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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wise/art",
-  "version": "0.0.0-experimental-b088eec",
+  "version": "0.0.0-experimental-6054253",
   "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,43 @@ 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] });
+    }
+    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);
+    }),
+);
+
 // 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 ??
+    groupFlags(
+      Object.entries(flagRawMetaData)
+        .filter(([currentRegion]) => currentRegion === region)
+        .flatMap(([, flags]) => flags),
+    );
 
   return (
     <>
@@ -53,11 +71,19 @@ const AllFlagsAndSizes = (region: string) => {
         }}
       >
         {regionFlags.map((flag) => {
-          const flagCode = flag.iso2 ?? flag.currencyCode ?? flag.key;
+          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);
 
           return (
             <div
-              key={flag.key}
+              key={flagName}
               style={{
                 display: 'flex',
                 flexDirection: 'column',
@@ -85,19 +111,24 @@ const AllFlagsAndSizes = (region: string) => {
                   alignItems: 'flex-start',
                 }}
               >
-                <strong>{flag.name}</strong>
+                <strong>{flagName}</strong>
                 <span>
-                  {flag.iso2 && (
-                    <>
-                      Country: <code>{flag.iso2}</code>
-                    </>
-                  )}
-                  {flag.currencyCode && (
+                  {countryCode && (
                     <>
-                      {flag.iso2 && <br />}
-                      Currency: <code>{flag.currencyCode}</code>
+                      Country: <code>{countryCode}</code>
                     </>
                   )}
+                  {currencyCodes.length > 0 && (
+                      <>
+                        <br />
+                        <span>
+                          {`${currencyCodes.length === 1 ? 'Currency' : 'Currencies'}: `}
+                          {currencyCodes.map((currencyCode) => (
+                            <code key={currencyCode}>{currencyCode}</code>
+                          ))}
+                        </span>
+                      </>
+                    )}
                 </span>
               </div>
             </div>
@@ -108,6 +139,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 +182,7 @@ export const SouthAmerica: Story = {
 export const Misc: Story = {
   render: () => AllFlagsAndSizes('Misc'),
 };
+
+export const Fallback: Story = {
+  render: () => AllFlagsAndSizes('Fallback'),
+};