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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "0.0.0-experimental-b088eec",
+  "version": "0.0.0-experimental-e5fd55b",
   "license": "MIT",
   "description": "React library for art elements in UI",
   "homepage": "https://github.com/transferwise/web-art#readme",
@@ -76,7 +76,7 @@
     "storybook": "^10.2.10",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#0f3db58bbc3aef475d869f20f6a1a7e54b6decfb",
+    "wise-atoms": "git+https://github.com/transferwise/wise-atoms.git#b37005afd0ab740f763dbf022728b9e2a3b56736",
     "@storybook/addon-docs": "^10.2.10",
     "@changesets/cli": "^2.29.8",
     "@changesets/changelog-github": "0.5.2"
@@ -96,16 +96,18 @@
     "setup": "pnpm install && pnpm build",
     "load-3d-i10s": "rm -rf s3-bucket/illustrations3d/ && node ./scripts/load-3d-i10s.mjs && pnpm load-riv",
     "load-riv": "copyfiles -u 1 assets/*.riv s3-bucket/illustrations3d/rive",
-    "load-i10s": "copyfiles -u 4 node_modules/wise-atoms/assets/illustrations/**/*.webp s3-bucket/illustrations",
+    "load-i10s": "copyfiles -u 4 node_modules/wise-atoms/illustrations/**/*.png temp",
     "load-flags": "rm -rf s3-bucket/flags/* && pnpm load-country-flags && pnpm load-currency-flags && pnpm transform-flags && pnpm convert-flags-svg-to-png",
     "load-country-flags": "copyfiles -u 4 node_modules/wise-atoms/assets/flags/*.svg s3-bucket/flags && node ./scripts/generate-country-flags.mjs",
     "load-currency-flags": "copyfiles -u 4 node_modules/wise-atoms/assets/flags/_metadata.json s3-bucket/flags && node ./scripts/generate-currency-flags.mjs",
     "transform-flags": "node ./scripts/transform-flags.mjs",
     "convert-flags-svg-to-png": "node ./scripts/convert-flags-svg-to-png.mjs",
+    "convert-i10s-png-to-webp": "rm -rf s3-bucket/illustrations/ && copyfiles --f node_modules/wise-atoms/illustrations/**/*.png s3-bucket/illustrations && node ./scripts/convert-png-to-webp.mjs",
     "generate-i10s-metadata": "node ./scripts/generate-i10s-metadata.mjs && eslint 'src/illustrations/metadata.ts' --fix",
     "generate-flags-metadata": "node ./scripts/generate-flags-metadata.mjs && eslint 'src/flags/metadata.ts' --fix",
     "bundle": "rm -rf dist && rollup --config --sourcemap && pnpm build-styles",
-    "build": "NODE_ENV=web-art-prod pnpm load-i10s && pnpm load-3d-i10s && pnpm generate-i10s-metadata && pnpm load-flags && pnpm generate-flags-metadata && pnpm bundle",
+    "cleanup": "rm -rf temp",
+    "build": "NODE_ENV=web-art-prod pnpm load-i10s && pnpm load-3d-i10s && pnpm convert-i10s-png-to-webp && pnpm generate-i10s-metadata && pnpm load-flags && pnpm generate-flags-metadata && pnpm bundle && pnpm cleanup",
     "start": "storybook dev -p 3001",
     "dev": "NODE_ENV=web-art-dev pnpm start",
     "test": "jest",

package/src/flags/AllFlagsAndSizes.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import flagRawMetaData from "../../node_modules/wise-atoms/assets/flags/_metadata.json";
 
+import flagRawMetaData from '../../node_modules/wise-atoms/assets/flags/_metadata.json';
 import { Flag } from './Flag';
 
 const meta: Meta<typeof Flag> = {
@@ -11,25 +11,66 @@ export default meta;
 
 type Story = StoryObj<typeof Flag>;
 
+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 [...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) => {
-  const regionFlags = Object.entries(flagRawMetaData)
-    .filter(([, entry]) => entry.group === region)
-    .filter(([key]) => !key.endsWith('-detailed'))
-    .map(([key, entry]) => {
-      const name = key
-        .replace(/^[a-z0-9]+-/u, '')
-        .split('-')
-        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-        .join(' ');
-
-      return {
-        key,
-        name,
-        iso2: 'iso2' in entry ? entry.iso2 : undefined,
-        currencyCode: 'currencyCode' in entry ? entry.currencyCode : undefined,
-      };
-    });
+const AllFlagsAndSizes = (
+  region: string,
+  flagsOverride?: GroupedFlag[],
+) => {
+  const regionFlags = flagsOverride ?? getFlagsByRegion(region);
 
   return (
     <>
@@ -53,11 +94,11 @@ const AllFlagsAndSizes = (region: string) => {
         }}
       >
         {regionFlags.map((flag) => {
-          const flagCode = flag.iso2 ?? flag.currencyCode ?? flag.key;
+          const flagCode = flag.countryCode ?? flag.currencyCodes[0];
 
           return (
             <div
-              key={flag.key}
+              key={flag.name}
               style={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -87,17 +128,22 @@ const AllFlagsAndSizes = (region: string) => {
               >
                 <strong>{flag.name}</strong>
                 <span>
-                  {flag.iso2 && (
+                  {flag.countryCode && (
                     <>
-                      Country: <code>{flag.iso2}</code>
-                    </>
-                  )}
-                  {flag.currencyCode && (
-                    <>
-                      {flag.iso2 && <br />}
-                      Currency: <code>{flag.currencyCode}</code>
+                      Country: <code>{flag.countryCode}</code>
                     </>
                   )}
+                  {flag.currencyCodes.length > 0 && (
+                      <>
+                        <br />
+                        <span>
+                          {`${flag.currencyCodes.length === 1 ? 'Currency' : 'Currencies'}: `}
+                          {flag.currencyCodes.map((currencyCode) => (
+                            <code key={currencyCode}>{currencyCode}</code>
+                          ))}
+                        </span>
+                      </>
+                    )}
                 </span>
               </div>
             </div>
@@ -108,6 +154,14 @@ const AllFlagsAndSizes = (region: string) => {
   );
 };
 
+// Stories for each region
+export const World: Story = {
+  render: () => AllFlagsAndSizes('World', allFlagsSorted),
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 export const Africa: Story = {
   render: () => AllFlagsAndSizes('Africa'),
 };
@@ -143,3 +197,7 @@ export const SouthAmerica: Story = {
 export const Misc: Story = {
   render: () => AllFlagsAndSizes('Misc'),
 };
+
+export const Fallback: Story = {
+  render: () => AllFlagsAndSizes('Fallback'),
+};