@wise/art 0.0.0-experimental-6054253 → 0.0.0-experimental-e5fd55b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "0.0.0-experimental-6054253",
+  "version": "0.0.0-experimental-e5fd55b",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",

package/src/flags/AllFlagsAndSizes.stories.tsx

@@ -11,43 +11,66 @@ export default meta;
 
 type Story = StoryObj<typeof Flag>;
 
-type GroupedFlag = { country: string[]; currencies: string[][] };
-
-const groupFlags = (flags: { country: string[]; currency: string[] }[]): GroupedFlag[] =>
-  flags.reduce<GroupedFlag[]>((acc, flag) => {
-    const existing = acc.find(
-      (currentFlag) => currentFlag.country[0] && currentFlag.country[0] === flag.country[0],
-    );
-    if (existing) {
-      existing.currencies.push(flag.currency);
-    } else {
-      acc.push({ country: flag.country, currencies: [flag.currency] });
+interface GroupedFlag { name: string; countryCode?: string; currencyCodes: string[] }
+
+const toTitleCase = (str: string) =>
+  str.replace(/\b\w/gu, (char) => char.toUpperCase());
+
+const deriveName = (slug: string): string => {
+  if (!slug.includes('-')) return toTitleCase(slug);
+  const nameSlug = slug.slice(slug.indexOf('-') + 1);
+  return toTitleCase(nameSlug.replace(/-/gu, ' '));
+};
+
+const groupByCountry = (
+  entries: [string, (typeof flagRawMetaData)[keyof typeof flagRawMetaData]][],
+): GroupedFlag[] => {
+  const countryMap = new Map<string, GroupedFlag>();
+  const standaloneFlags: GroupedFlag[] = [];
+
+  for (const [slug, data] of entries) {
+    const isDetailed = 'detailed' in data && data.detailed;
+    if (!isDetailed) {
+      const iso2 = 'iso2' in data ? data.iso2 : undefined;
+      const currencyCode = 'currencyCode' in data ? data.currencyCode : undefined;
+
+      if (iso2) {
+        const existing = countryMap.get(iso2);
+        if (existing) {
+          if (currencyCode) existing.currencyCodes.push(currencyCode);
+        } else {
+          countryMap.set(iso2, {
+            name: deriveName(slug),
+            countryCode: iso2,
+            currencyCodes: currencyCode ? [currencyCode] : [],
+          });
+        }
+      } else {
+        standaloneFlags.push({
+          name: deriveName(slug),
+          currencyCodes: currencyCode ? [currencyCode] : [],
+        });
+      }
     }
-    return acc;
-  }, []);
-
-const allFlagsSorted = groupFlags(
-  Object.values(flagRawMetaData)
-    .flat()
-    .sort((a, b) => {
-      const nameA = (a.country.at(-1) ?? a.currency?.at(-1) ?? '').toLowerCase();
-      const nameB = (b.country.at(-1) ?? b.currency?.at(-1) ?? '').toLowerCase();
-      return nameA.localeCompare(nameB);
-    }),
+  }
+
+  return [...countryMap.values(), ...standaloneFlags];
+};
+
+const allEntries = Object.entries(flagRawMetaData);
+const allFlagsSorted = groupByCountry(allEntries).sort((a, b) =>
+  a.name.localeCompare(b.name),
 );
 
+const getFlagsByRegion = (region: string): GroupedFlag[] =>
+  groupByCountry(allEntries.filter(([, data]) => data.group === region));
+
 // Helper function to render all flags and sizes for a given region
 const AllFlagsAndSizes = (
   region: string,
   flagsOverride?: GroupedFlag[],
 ) => {
-  const regionFlags =
-    flagsOverride ??
-    groupFlags(
-      Object.entries(flagRawMetaData)
-        .filter(([currentRegion]) => currentRegion === region)
-        .flatMap(([, flags]) => flags),
-    );
+  const regionFlags = flagsOverride ?? getFlagsByRegion(region);
 
   return (
     <>
@@ -71,19 +94,11 @@ const AllFlagsAndSizes = (
         }}
       >
         {regionFlags.map((flag) => {
-          const countryCode = flag.country[0]?.toUpperCase();
-          const primaryCurrencyCode = flag.currencies[0]?.[0]?.toUpperCase();
-          const flagCode = countryCode ?? primaryCurrencyCode;
-          const currencyCodes = flag.currencies.map((currency) => currency[0]).filter(Boolean).map((code) => code.toUpperCase());
-
-          // Covers cases where there's just a currency code and no country (e.g. Euro)
-          const flagName = countryCode
-            ? flag.country.at(-1)
-            : flag.currencies[0]?.at(-1);
+          const flagCode = flag.countryCode ?? flag.currencyCodes[0];
 
           return (
             <div
-              key={flagName}
+              key={flag.name}
               style={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -111,19 +126,19 @@ const AllFlagsAndSizes = (
                   alignItems: 'flex-start',
                 }}
               >
-                <strong>{flagName}</strong>
+                <strong>{flag.name}</strong>
                 <span>
-                  {countryCode && (
+                  {flag.countryCode && (
                     <>
-                      Country: <code>{countryCode}</code>
+                      Country: <code>{flag.countryCode}</code>
                     </>
                   )}
-                  {currencyCodes.length > 0 && (
+                  {flag.currencyCodes.length > 0 && (
                       <>
                         <br />
                         <span>
-                          {`${currencyCodes.length === 1 ? 'Currency' : 'Currencies'}: `}
-                          {currencyCodes.map((currencyCode) => (
+                          {`${flag.currencyCodes.length === 1 ? 'Currency' : 'Currencies'}: `}
+                          {flag.currencyCodes.map((currencyCode) => (
                             <code key={currencyCode}>{currencyCode}</code>
                           ))}
                         </span>