whattheduck: Use more restrictive imports

Author: bperel

apps/whattheduck/histoire.setup.ts

@@ -22,7 +22,7 @@ import { SocketClient } from 'socket-call-client';
 
 import en from '~translations/en.json';
 import sv from '~translations/sv.json';
-import { i18n } from '~web';
+import i18n from '~web/src/i18n';
 
 import router from './src/router';
 

apps/whattheduck/src/components/FullIssue.vue

@@ -17,7 +17,7 @@
 
 <script setup lang="ts">
 import type { EntryPartInfo } from '~dm-types/EntryPartInfo';
-import { stores as webStores } from '~web';
+import { coa } from '~web/src/stores/coa';
 
 import { wtdcollection } from '~/stores/wtdcollection';
 
@@ -33,7 +33,7 @@ const {
   partInfo?: EntryPartInfo;
 }>();
 
-const coaStore = webStores.coa();
+const coaStore = coa();
 
 const { getCollectionIssues } = wtdcollection();
 

apps/whattheduck/src/components/Issue.vue

@@ -3,10 +3,9 @@
 </template>
 
 <script setup lang="ts">
-import { stores as webStores } from '~web';
+import { coa } from '~web/src/stores/coa';
 
-const { coa: webCoa } = webStores;
-const { issuecodeDetails } = storeToRefs(webCoa());
+const { issuecodeDetails } = storeToRefs(coa());
 defineProps<{
   issuecode: string;
 }>();

apps/whattheduck/src/components/Medal.vue

@@ -17,12 +17,10 @@
 </template>
 
 <script setup lang="ts">
-import { components as webComponents } from '~web';
+import MedalImage from '~web/src/components/MedalImage.vue';
 
 import { images as wtdImages } from '~/stores/images';
 
-const { MedalImage } = webComponents;
-
 const {
   contribution,
   nextLevel = false,

apps/whattheduck/src/components/Navigation.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import { stores } from '~web';
+import { coa } from '~web/src/stores/coa';
 
 import Country from './Country.vue';
 import GlobeIcon from './GlobeIcon.vue';
@@ -48,7 +48,7 @@ import Publication from './Publication.vue';
 import { app } from '~/stores/app';
 
 const { currentNavigationItem, countrycode, publicationcode, issuecodes } = storeToRefs(app());
-const { countryNames, publicationNames } = storeToRefs(stores.coa());
+const { countryNames, publicationNames } = storeToRefs(coa());
 
 const maxParts = 4;
 

apps/whattheduck/src/components/NavigationDrawer.vue

@@ -71,15 +71,15 @@ import {
   settingsOutline,
   settingsSharp,
 } from 'ionicons/icons';
-import { stores as webStores } from '~web';
+import { users } from '~web/src/stores/users';
 
 import { app } from '~/stores/app';
 import { wtdcollection } from '~/stores/wtdcollection';
 
 const { t } = useI18n();
 const { token, isOffline, isIOS } = storeToRefs(app());
 const collectionStore = wtdcollection();
-const points = computed(() => webStores.users().points);
+const points = computed(() => users().points);
 
 interface AppPage {
   title: string;

apps/whattheduck/src/composables/useMedal.ts

@@ -1,3 +1,3 @@
-import { composables as webComposables } from '~web';
+import useMedal from '~web/src/composables/useMedal';
 
-export default webComposables.useMedal;
+export default useMedal;

apps/whattheduck/src/main.ts

@@ -26,7 +26,7 @@ import VueVirtualScroller from 'vue-virtual-scroller';
 
 import en from '~translations/en.json';
 import sv from '~translations/sv.json';
-import { i18n } from '~web';
+import i18n from '~web/src/i18n';
 
 import App from './App.vue';
 import router from './router';

apps/whattheduck/src/stores/wtdcollection.ts

@@ -3,15 +3,19 @@ import { defineStore } from 'pinia';
 import type { EntryPartInfo } from '~dm-types/EntryPartInfo';
 import type { IssueWithIssuecodeOnly } from '~dm-types/IssueWithIssuecodeOnly';
 import type { issue, purchase } from '~prisma-schemas/schemas/dm';
-import { composables as webComposables, stores as webStores } from '~web';
+import useCollection from '~web/src/composables/useCollection';
+import { coa } from '~web/src/stores/coa';
+import { collection } from '~web/src/stores/collection';
+import { stats } from '~web/src/stores/stats';
+import { users } from '~web/src/stores/users';
 
 export type purchaseWithStringDate = Omit<purchase, 'date' | 'userId'> & {
   date: string;
 };
 
 export const wtdcollection = defineStore('wtdcollection', () => {
-  const coaStore = webStores.coa();
-  const webCollectionStore = webStores.collection();
+  const coaStore = coa();
+  const webCollectionStore = collection();
 
   const {
     createPurchase,
@@ -43,9 +47,9 @@ export const wtdcollection = defineStore('wtdcollection', () => {
     totalUniqueIssues,
     user,
   } = storeToRefs(webCollectionStore);
-  const statsStore = webStores.stats();
-  const usersStore = webStores.users();
-  const { quotedIssues, quotationSum } = webComposables.useCollection(issues);
+  const statsStore = stats();
+  const usersStore = users();
+  const { quotedIssues, quotationSum } = useCollection(issues);
 
   const ownedCountries = computed(() =>
       ownedPublications.value
@@ -75,8 +79,8 @@ export const wtdcollection = defineStore('wtdcollection', () => {
       async () => {
         const issue = quotedIssues.value?.sort((a, b) => b.estimationGivenCondition - a.estimationGivenCondition)[0];
         if (issue) {
-          await coa().fetchIssuecodeDetails([issue.issuecode]);
-          return { ...issue, ...coa().issuecodeDetails[issue.issuecode] };
+          await coaStore.fetchIssuecodeDetails([issue.issuecode]);
+          return { ...issue, ...coaStore.issuecodeDetails[issue.issuecode] };
         }
         return issue;
       },

apps/whattheduck/src/views/CountryList.vue

@@ -25,14 +25,14 @@
 </template>
 
 <script setup lang="ts">
-import { stores } from '~web';
+import { coa } from '~web/src/stores/coa';
 
 import { getOwnershipText, getOwnershipPercentages } from '~/composables/useOwnership';
 import { app } from '~/stores/app';
 import { wtdcollection } from '~/stores/wtdcollection';
 
 const { totalPerCountryWithoutDuplicates, ownedCountries } = storeToRefs(wtdcollection());
-const { countryNames, issueCountsByCountrycode: coaIssueCountsPerCountrycode } = storeToRefs(stores.coa());
+const { countryNames, issueCountsByCountrycode: coaIssueCountsPerCountrycode } = storeToRefs(coa());
 const { isCoaView } = storeToRefs(app());
 
 const ownershipPercentages = computed(() =>