feat: automate provisioning of available currency codes

closes #122

Author: simonwep

package.json

@@ -57,8 +57,9 @@
     "eslint-plugin-prefer-arrow-functions": "3.6.2",
     "eslint-plugin-prettier": "5.4.0",
     "eslint-plugin-vue": "10.1.0",
+    "fast-xml-parser": "5.3.0",
     "html-minifier-terser": "7.2.0",
-    "husky": "9.1.7",
+    "husky": "^8.0.0",
     "prettier": "3.5.3",
     "sass": "1.89.0",
     "typescript": "5.8.3",

pnpm-lock.yaml

@@ -0,0 +1,25 @@
+import { XMLParser } from 'fast-xml-parser';
+import fs from 'fs/promises';
+
+const target = '../src/composables/available-currency-codes/currencies.json';
+const source =
+  'https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml';
+
+const response = await fetch(source).then((res) => res.text());
+const parsed = new XMLParser({ ignoreAttributes: false }).parse(response);
+const list = parsed['ISO_4217']['CcyTbl']['CcyNtry'];
+
+const currencies = new Set(
+  list
+    .filter((v) => v.Ccy)
+    .filter((v) => typeof v.CcyNm === 'string' || !('@_IsFund' in v.CcyNm)) // Filter out funds
+    .filter((v) => !v.Ccy.startsWith('X')) // Filter out other funds and precious metals
+    .filter((v) => !v.Ccy.match(/bond|market|unit/i)) // Filter out special purpose codes
+    .map((v) => v.Ccy)
+);
+
+// Remove special currency
+currencies.delete('XXX');
+
+const sortedList = Array.from(currencies).sort();
+await fs.writeFile(target, JSON.stringify(sortedList) + '\n', 'utf-8');

scripts/update-currencies.mjs

@@ -3,22 +3,26 @@
     <slot :toggle="toggle" />
   </div>
   <div ref="popper" :class="[$style.popper, { [$style.visible]: visible }]">
-    <ul :class="listClasses">
-      <slot v-if="$slots.options" name="options" />
-      <template v-else-if="options">
-        <ContextMenuButton
-          v-for="option of options"
-          :key="option.id"
-          :testId="`${testId}-${option.id}`"
-          :padIcon="hasOptionWithIcon"
-          :text="option.label ?? option.id"
-          :icon="option.icon"
-          :muted="option.muted"
-          :highlight="option.id === highlight"
-          @click="select(option)"
-        />
-      </template>
-    </ul>
+    <div :class="listClasses">
+      <slot name="header" />
+
+      <ul :class="$style.options">
+        <slot v-if="$slots.options" name="options" />
+        <template v-else-if="options">
+          <ContextMenuButton
+            v-for="option of options"
+            :key="option.id"
+            :testId="`${testId}-${option.id}`"
+            :padIcon="hasOptionWithIcon"
+            :text="option.label ?? option.id"
+            :icon="option.icon"
+            :muted="option.muted"
+            :highlight="option.id === highlight"
+            @click="select(option)"
+          />
+        </template>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -36,7 +40,9 @@ import { ClassNames } from '@utils/types.ts';
 import { computed, provide, ref, useCssModule, watch } from 'vue';
 
 const emit = defineEmits<{
-  (e: 'select', option: ContextMenuOption): void;
+  select: [option: ContextMenuOption];
+  open: [];
+  close: [];
 }>();
 
 const props = withDefaults(
@@ -99,6 +105,8 @@ const select = (option: ContextMenuOption): void => {
 
 const toggle = () => requestAnimationFrame(() => (visible.value = !visible.value));
 
+watch(visible, (value) => (value ? emit('open') : emit('close')));
+
 provide<ContextMenuStore>(ContextMenuStoreKey, {
   close: () => requestAnimationFrame(() => (visible.value = false))
 });
@@ -129,17 +137,13 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
 }
 
 .list {
-  list-style: none outside none;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
   -webkit-backdrop-filter: var(--context-menu-backdrop);
   backdrop-filter: var(--context-menu-backdrop);
   box-shadow: var(--context-menu-shadow);
   border-radius: var(--border-radius-m);
   padding: 6px 0;
-  max-height: 130px;
-  overflow: auto;
   visibility: hidden;
   opacity: 0;
   transition: all var(--transition-s);
@@ -164,4 +168,13 @@ provide<ContextMenuStore>(ContextMenuStoreKey, {
     transform: translateX(-6px);
   }
 }
+
+.options {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  list-style: none outside none;
+  max-height: 130px;
+  overflow: auto;
+}
 </style>

src/app/components/base/context-menu/ContextMenu.vue

@@ -5,11 +5,15 @@
     <ContextMenu
       :testId="testId"
       tooltipPosition="bottom"
-      :options="options"
+      :options="availableOptions"
       :offset="[0, 4]"
       position="bottom-start"
+      @open="focusInput"
       @select="modelValue = $event.id"
     >
+      <template v-if="searchable" #header>
+        <input ref="input" v-model.trim="searchQuery" placeholder="Search..." :class="$style.searchField" />
+      </template>
       <template #default="{ toggle }">
         <button :id="fieldId" :data-testid="testId" :class="$style.btn" type="button" @click="toggle">
           {{ currentValue }}
@@ -23,20 +27,37 @@
 import { ContextMenuOption, ContextMenuOptionId } from '@components/base/context-menu/ContextMenu.types.ts';
 import ContextMenu from '@components/base/context-menu/ContextMenu.vue';
 import { uuid } from '@utils/uuid.ts';
-import { computed } from 'vue';
+import { computed, nextTick, ref, useTemplateRef, watch } from 'vue';
 
 const modelValue = defineModel<ContextMenuOptionId>();
 
 const props = defineProps<{
   label: string;
   options?: ContextMenuOption[];
   testId?: string;
+  searchable?: boolean;
 }>();
 
 const fieldId = uuid();
+const input = useTemplateRef('input');
+const searchQuery = ref('');
+
+const availableOptions = computed(() => {
+  const lowerSearch = searchQuery.value.toLowerCase();
+  return props.options?.filter((option) => option.label?.toLowerCase().includes(lowerSearch));
+});
+
 const currentValue = computed(
   () => props.options?.find((option) => option.id === modelValue.value)?.label ?? 'Select...'
 );
+
+const focusInput = () => {
+  nextTick(() => input.value?.focus());
+};
+
+watch(modelValue, () => {
+  searchQuery.value = '';
+});
 </script>
 
 <style lang="scss" module>
@@ -76,4 +97,11 @@ const currentValue = computed(
     background: var(--input-field-focus-background);
   }
 }
+
+.searchField {
+  all: unset;
+  font-size: var(--font-size-xs);
+  padding: 3px 12px 8px;
+  border-bottom: 2px solid var(--input-field-border);
+}
 </style>

src/app/components/base/select/Select.vue

@@ -14,7 +14,8 @@
         testId="change-currency"
         :label="t('navigation.settings.currency')"
         :options="currencies"
-        @update:model-value="changeCurrency($event as AvailableCurrency)"
+        searchable
+        @update:model-value="changeCurrency($event)"
       />
 
       <Select
@@ -47,12 +48,12 @@ import CheckBox from '@components/base/check-box/CheckBox.vue';
 import { ContextMenuOption } from '@components/base/context-menu/ContextMenu.types.ts';
 import Dialog from '@components/base/dialog/Dialog.vue';
 import Select from '@components/base/select/Select.vue';
+import { useAvailableCurrencyCodes } from '@composables/available-currency-codes/useAvailableCurrencyCodes.ts';
 import { useMonthNames } from '@composables/useMonthNames.ts';
 import { AvailableLocale, availableLocales, initialLocale } from '@i18n/index.ts';
 import { RiCheckLine } from '@remixicon/vue';
 import { useSettingsStore } from '@store/settings';
 import { useDataStore } from '@store/state';
-import { availableCurrencies, AvailableCurrency } from '@store/state/types.ts';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -67,6 +68,7 @@ defineProps<{
 const { t, locale } = useI18n();
 const { setMonthOffset, setCarryOver, setAnimations, state: settings } = useSettingsStore();
 const { changeCurrency, changeLocale, state } = useDataStore();
+const currencyCodes = useAvailableCurrencyCodes(() => [state.currency]);
 const monthNames = useMonthNames();
 
 const locales = computed<ContextMenuOption[]>(() => {
@@ -80,10 +82,10 @@ const locales = computed<ContextMenuOption[]>(() => {
 });
 
 const currencies = computed<ContextMenuOption[]>(() =>
-  availableCurrencies.map((value) => ({
+  currencyCodes.value.map((value) => ({
     id: value,
     icon: state.currency === value ? RiCheckLine : undefined,
-    label: `${formatNumber(locale.value, value, 'name')} (${formatNumber(locale.value, value)})`
+    label: `${formatNumber(locale.value, value, 'name')} ${value} (${formatNumber(locale.value, value)})`
   }))
 );
 

src/app/pages/navigation/settings/SettingsDialog.vue

@@ -0,0 +1 @@
+["AED","AFN","ALL","AMD","AOA","ARS","AUD","AWG","AZN","BAM","BBD","BDT","BGN","BHD","BIF","BMD","BND","BOB","BRL","BSD","BTN","BWP","BYN","BZD","CAD","CDF","CHF","CLP","CNY","COP","CRC","CUP","CVE","CZK","DJF","DKK","DOP","DZD","EGP","ERN","ETB","EUR","FJD","FKP","GBP","GEL","GHS","GIP","GMD","GNF","GTQ","GYD","HKD","HNL","HTG","HUF","IDR","ILS","INR","IQD","IRR","ISK","JMD","JOD","JPY","KES","KGS","KHR","KMF","KPW","KRW","KWD","KYD","KZT","LAK","LBP","LKR","LRD","LSL","LYD","MAD","MDL","MGA","MKD","MMK","MNT","MOP","MRU","MUR","MVR","MWK","MXN","MYR","MZN","NAD","NGN","NIO","NOK","NPR","NZD","OMR","PAB","PEN","PGK","PHP","PKR","PLN","PYG","QAR","RON","RSD","RUB","RWF","SAR","SBD","SCR","SDG","SEK","SGD","SHP","SLE","SOS","SRD","SSP","STN","SVC","SYP","SZL","THB","TJS","TMT","TND","TOP","TRY","TTD","TWD","TZS","UAH","UGX","USD","UYU","UYW","UZS","VED","VES","VND","VUV","WST","YER","ZAR","ZMW","ZWG"]

src/composables/available-currency-codes/currencies.json

@@ -0,0 +1,9 @@
+import codes from './currencies.json' assert { type: 'json' };
+import { computed, MaybeRefOrGetter, toValue } from 'vue';
+
+const availableCurrencies = new Set(codes);
+const supportedCurrenciesByBrowser = new Set(Intl.supportedValuesOf('currency'));
+const currencies = availableCurrencies.intersection(supportedCurrenciesByBrowser);
+
+export const useAvailableCurrencyCodes = (include?: MaybeRefOrGetter<string[]>) =>
+  computed(() => Array.from(currencies.union(new Set(toValue(include) ?? []))).sort());

src/composables/available-currency-codes/useAvailableCurrencyCodes.ts

@@ -1,5 +1,5 @@
 import { migrateApplicationState } from './migrator';
-import { AvailableCurrency, Budget, BudgetGroup, BudgetYear, DataState, DataStates, DataStateV1 } from './types';
+import { Budget, BudgetGroup, BudgetYear, DataState, DataStates, DataStateV1 } from './types';
 import { generateBudgetYearFromCurrent } from './utils/generators.ts';
 import { useTime } from '@composables/useTime.ts';
 import { AvailableLocale, changeLocale } from '@i18n/index';
@@ -22,7 +22,7 @@ interface StoredClipboardData {
 type StoreView = Omit<BudgetYear, 'year'> & {
   clipboard: StoredClipboardData | undefined;
   activeYear: number;
-  currency: AvailableCurrency;
+  currency: string;
   locale: AvailableLocale;
   years: BudgetYear[];
   overallBalance: number | undefined;
@@ -42,7 +42,7 @@ export const createDataStore = (storage?: Storage) => {
   };
 
   watch(
-    () => [state.locale, state.currency] as [AvailableLocale, AvailableCurrency],
+    () => [state.locale, state.currency] as [AvailableLocale, string],
     ([locale, currency]) => changeLocale(locale, { currency }),
     { immediate: true }
   );
@@ -144,7 +144,7 @@ export const createDataStore = (storage?: Storage) => {
       state.locale = locale;
     },
 
-    changeCurrency: (currency: AvailableCurrency) => {
+    changeCurrency: (currency: string) => {
       state.currency = currency;
     },
 

src/store/state/index.ts

@@ -3,42 +3,6 @@ import { MigratableState } from 'yuppee';
 
 export type BudgetValues = number[];
 
-export const availableCurrencies = [
-  'USD',
-  'EUR',
-  'JPY',
-  'GBP',
-  'CZK',
-  'AUD',
-  'CAD',
-  'CHF',
-  'CNY',
-  'DKK',
-  'ILS',
-  'SEK',
-  'NZD',
-  'MXN',
-  'CLP',
-  'UYU',
-  'SGD',
-  'HKD',
-  'NOK',
-  'KRW',
-  'TRY',
-  'INR',
-  'RUB',
-  'BRL',
-  'ZAR',
-  'HUF',
-  'PLN',
-  'CRC',
-  'IDR',
-  'RON',
-  'MDL'
-] as const;
-
-export type AvailableCurrency = (typeof availableCurrencies)[number];
-
 export interface Budget {
   id: string;
   name: string;
@@ -69,7 +33,7 @@ export interface DataStateV2 extends MigratableState<2> {
 export interface DataStateV3 extends MigratableState<3> {
   years: BudgetYear[];
   locale: AvailableLocale;
-  currency: AvailableCurrency;
+  currency: string;
 }
 
 // Latest structure