@wise/art 0.0.0-experimental-7f4f66a → 0.0.0-experimental-b088eec

package/src/illustrations/metadata.ts

@@ -4,10 +4,272 @@
   * See: `scripts/generate-i10s-metadata.mjs`
   *
   */
-  
-  
+
+
   export enum Assets {
-    WALLET = 'wallet',TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',TOOL = 'tool',TARGET_PLATFORM = 'target-platform',STOPWATCH_PLATFORM = 'stopwatch-platform',SPEECH_BUBBLE = 'speech-bubble',SKIP_AUTHENTICATION = 'skip-authentication',SHOPPING_BAG = 'shopping-bag',SATELLITE_PLATFORM = 'satellite-platform',SAND_TIMER_BUSINESS = 'sand-timer-business',SAND_TIMER = 'sand-timer',REMINDER_LETTER = 'reminder-letter',RED_PACKET = 'red-packet',RECEIVE_BUSINESS = 'receive-business',RECEIVE = 'receive',QUESTION_MARK_BUSINESS = 'question-mark-business',QUESTION_MARK = 'question-mark',PUZZLE_PIECES_BUSINESS = 'puzzle-pieces-business',PUZZLE_PIECES = 'puzzle-pieces',PLANE_BUSINESS = 'plane-business',PLANE_2 = 'plane-2',PLANE = 'plane',PIE_CHART_BUSINESS = 'pie-chart-business',PIE_CHART = 'pie-chart',PHONES = 'phones',PERSONAL_CARD = 'personal-card',PERCENTAGE_BUSINESS = 'percentage-business',PERCENTAGE = 'percentage',PASSKEY = 'passkey',PALM_TREE = 'palm-tree',ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',MULTI_CURRENCY_BUSINESS = 'multi-currency-business',MULTI_CURRENCY = 'multi-currency',MEGAPHONE = 'megaphone',MARBLE_CARD_FLAG_ONLY_BUSINESS = 'marble-card-flag-only-business',MARBLE_CARD_FLAG_ONLY = 'marble-card-flag-only',MARBLE_CARD_BUSINESS_FLAG_ONLY = 'marble-card-business-flag-only',MARBLE_CARD_BUSINESS = 'marble-card-business',MARBLE_CARD = 'marble-card',MARBLE_BUSINESS = 'marble-business',MARBLE = 'marble',MAP = 'map',MAGNIFYING_GLASS_BUSINESS = 'magnifying-glass-business',MAGNIFYING_GLASS = 'magnifying-glass',LOCK_PLATFORM = 'lock-platform',LOCK_BUSINESS = 'lock-business',LOCK = 'lock',LIGHT_BULB_BUSINESS = 'light-bulb-business',LIGHT_BULB = 'light-bulb',KEY_BUSINESS = 'key-business',KEY = 'key',JARS = 'jars',INVITE_LETTER = 'invite-letter',INTEREST = 'interest',INFINITE = 'infinite',ID_CARD = 'id-card',HOUSE = 'house',HEART_5 = 'heart-5',HEART_4 = 'heart-4',HEART_3 = 'heart-3',HEART_2 = 'heart-2',HEART = 'heart',HEADSET_BUSINESS = 'headset-business',HEADSET = 'headset',GRAPH_BUSINESS = 'graph-business',GRAPH = 'graph',GLOBE = 'globe',GIFT_BOX = 'gift-box',GET_PAID_WITH_CARD_BUSINESS = 'get-paid-with-card-business',GEAR_BUSINESS = 'gear-business',GEAR = 'gear',FLOWER = 'flower',FLAG = 'flag',EXCLAMATION_MARK_BUSINESS = 'exclamation-mark-business',EXCLAMATION_MARK = 'exclamation-mark',EMAIL_SUCCESS_BUSINESS = 'email-success-business',EMAIL_SUCCESS = 'email-success',EMAIL = 'email',ELECTRIC_PLUG = 'electric-plug',ECO_CARD = 'eco-card',DOOR = 'door',DOCUMENTS_FOLDER_BUSINESS = 'documents-folder-business',DOCUMENTS = 'documents',DIGITAL_CARD_BUSINESS = 'digital-card-business',DIGITAL_CARD_2 = 'digital-card-2',DIGITAL_CARD = 'digital-card',COOKIE = 'cookie',CONVERT_BUSINESS = 'convert-business',CONVERT = 'convert',CONSTRUCTION_FENCE = 'construction-fence',CONFETTI_BUSINESS = 'confetti-business',CONFETTI = 'confetti',COIN_PILE_UP_BUSINESS = 'coin-pile-up-business',COIN_PILE_UP = 'coin-pile-up',COIN_PILE_DOWN_BUSINESS = 'coin-pile-down-business',COIN_PILE_DOWN = 'coin-pile-down',CLOSED_WINDOW = 'closed-window',CHECK_MARK_BUSINESS = 'check-mark-business',CHECK_MARK = 'check-mark',CALENDAR_BUSINESS = 'calendar-business',CALENDAR = 'calendar',CALCULATOR_BUSINESS = 'calculator-business',BUSINESS_CARD_BUSINESS = 'business-card-business',BUSINESS_CARD = 'business-card',BRIEFCASE_BUSINESS = 'briefcase-business',BRIEFCASE = 'briefcase',BELL_BUSINESS = 'bell-business',BELL = 'bell',BATCH_PAYMENTS_BUSINESS = 'batch-payments-business',BACKPACK = 'backpack',APP_MARKETPLACE_BUSINESS = 'app-marketplace-business',API_INTEGRATIONS_BUSINESS = 'api-integrations-business'
+    API_INTEGRATIONS_BUSINESS = 'api-integrations-business',
+    APP_MARKETPLACE_BUSINESS = 'app-marketplace-business',
+    BACKPACK = 'backpack',
+    BATCH_PAYMENTS_BUSINESS = 'batch-payments-business',
+    BELL = 'bell',
+    BELL_BUSINESS = 'bell-business',
+    BRIEFCASE = 'briefcase',
+    BRIEFCASE_BUSINESS = 'briefcase-business',
+    BUSINESS_CARD = 'business-card',
+    BUSINESS_CARD_BUSINESS = 'business-card-business',
+    CALCULATOR_BUSINESS = 'calculator-business',
+    CALENDAR = 'calendar',
+    CALENDAR_BUSINESS = 'calendar-business',
+    CARD = 'card',
+    CARD_BUSINESS = 'card-business',
+    CHECK_MARK = 'check-mark',
+    CHECK_MARK_BUSINESS = 'check-mark-business',
+    CLOSED_WINDOW = 'closed-window',
+    COIN_PILE_DOWN = 'coin-pile-down',
+    COIN_PILE_DOWN_BUSINESS = 'coin-pile-down-business',
+    COIN_PILE_UP = 'coin-pile-up',
+    COIN_PILE_UP_BUSINESS = 'coin-pile-up-business',
+    COMPLIANCE_PLATFORM = 'compliance-platform',
+    CONFETTI = 'confetti',
+    CONFETTI_BUSINESS = 'confetti-business',
+    CONSTRUCTION_FENCE = 'construction-fence',
+    CONTROLS_PLATFORM = 'controls-platform',
+    CONVERT = 'convert',
+    CONVERT_BUSINESS = 'convert-business',
+    COOKIE = 'cookie',
+    DIGITAL_CARD = 'digital-card',
+    DIGITAL_CARD_2 = 'digital-card-2',
+    DIGITAL_CARD_BUSINESS = 'digital-card-business',
+    DOCUMENTS = 'documents',
+    DOCUMENTS_FOLDER_BUSINESS = 'documents-folder-business',
+    DOOR = 'door',
+    ECO_CARD = 'eco-card',
+    ELECTRIC_PLUG = 'electric-plug',
+    EMAIL = 'email',
+    EMAIL_SUCCESS = 'email-success',
+    EMAIL_SUCCESS_BUSINESS = 'email-success-business',
+    EXCLAMATION_MARK = 'exclamation-mark',
+    EXCLAMATION_MARK_BUSINESS = 'exclamation-mark-business',
+    FLAG = 'flag',
+    FLOWER = 'flower',
+    GEAR = 'gear',
+    GEAR_BUSINESS = 'gear-business',
+    GEAR_PLATFORM = 'gear-platform',
+    GET_PAID_WITH_CARD_BUSINESS = 'get-paid-with-card-business',
+    GIFT_BOX = 'gift-box',
+    GLOBE = 'globe',
+    GRAPH = 'graph',
+    GRAPH_BUSINESS = 'graph-business',
+    HEADSET = 'headset',
+    HEADSET_BUSINESS = 'headset-business',
+    HEART = 'heart',
+    HEART_2 = 'heart-2',
+    HEART_3 = 'heart-3',
+    HEART_4 = 'heart-4',
+    HEART_5 = 'heart-5',
+    HOUSE = 'house',
+    ID_CARD = 'id-card',
+    INFINITE = 'infinite',
+    INTEREST = 'interest',
+    INVITE_LETTER = 'invite-letter',
+    JARS = 'jars',
+    KEY = 'key',
+    KEY_BUSINESS = 'key-business',
+    LIGHT_BULB = 'light-bulb',
+    LIGHT_BULB_BUSINESS = 'light-bulb-business',
+    LOCK = 'lock',
+    LOCK_BUSINESS = 'lock-business',
+    LOCK_PLATFORM = 'lock-platform',
+    MAGNIFYING_GLASS = 'magnifying-glass',
+    MAGNIFYING_GLASS_BUSINESS = 'magnifying-glass-business',
+    MAP = 'map',
+    MAP_BUSINESS = 'map-business',
+    MARBLE = 'marble',
+    MARBLE_BUSINESS = 'marble-business',
+    MARBLE_CARD = 'marble-card',
+    MARBLE_CARD_BUSINESS = 'marble-card-business',
+    MARBLE_CARD_BUSINESS_FLAG_ONLY = 'marble-card-business-flag-only',
+    MARBLE_CARD_FLAG_ONLY = 'marble-card-flag-only',
+    MARBLE_CARD_FLAG_ONLY_BUSINESS = 'marble-card-flag-only-business',
+    MEGAPHONE = 'megaphone',
+    MEGAPHONE_BUSINESS = 'megaphone-business',
+    MULTI_CURRENCY = 'multi-currency',
+    MULTI_CURRENCY_BUSINESS = 'multi-currency-business',
+    ONE_INVITE_LETTER_OPENED = 'one-invite-letter-opened',
+    PALM_TREE = 'palm-tree',
+    PASSKEY = 'passkey',
+    PERCENTAGE = 'percentage',
+    PERCENTAGE_BUSINESS = 'percentage-business',
+    PERSONAL_CARD = 'personal-card',
+    PHONES = 'phones',
+    PIE_CHART = 'pie-chart',
+    PIE_CHART_BUSINESS = 'pie-chart-business',
+    PLANE = 'plane',
+    PLANE_2 = 'plane-2',
+    PLANE_BUSINESS = 'plane-business',
+    PUZZLE_PIECES = 'puzzle-pieces',
+    PUZZLE_PIECES_BUSINESS = 'puzzle-pieces-business',
+    QUESTION_MARK = 'question-mark',
+    QUESTION_MARK_BUSINESS = 'question-mark-business',
+    RECEIVE = 'receive',
+    RECEIVE_BUSINESS = 'receive-business',
+    RED_PACKET = 'red-packet',
+    REMINDER_LETTER = 'reminder-letter',
+    ROCKET_PLATFORM = 'rocket-platform',
+    SAND_TIMER = 'sand-timer',
+    SAND_TIMER_BUSINESS = 'sand-timer-business',
+    SATELLITE_PLATFORM = 'satellite-platform',
+    SHOPPING_BAG = 'shopping-bag',
+    SKIP_AUTHENTICATION = 'skip-authentication',
+    SPEECH_BUBBLE = 'speech-bubble',
+    STOPWATCH_PLATFORM = 'stopwatch-platform',
+    TARGET_PLATFORM = 'target-platform',
+    TOOL = 'tool',
+    TREASURY_PLATFORM = 'treasury-platform',
+    TWO_INVITE_LETTERS_OPENED = 'two-invite-letters-opened',
+    WALLET = 'wallet',
   }
-  
-  export type IllustrationNames = 'wallet' | 'two-invite-letters-opened' | 'tool' | 'target-platform' | 'stopwatch-platform' | 'speech-bubble' | 'skip-authentication' | 'shopping-bag' | 'satellite-platform' | 'sand-timer-business' | 'sand-timer' | 'reminder-letter' | 'red-packet' | 'receive-business' | 'receive' | 'question-mark-business' | 'question-mark' | 'puzzle-pieces-business' | 'puzzle-pieces' | 'plane-business' | 'plane-2' | 'plane' | 'pie-chart-business' | 'pie-chart' | 'phones' | 'personal-card' | 'percentage-business' | 'percentage' | 'passkey' | 'palm-tree' | 'one-invite-letter-opened' | 'multi-currency-business' | 'multi-currency' | 'megaphone' | 'marble-card-flag-only-business' | 'marble-card-flag-only' | 'marble-card-business-flag-only' | 'marble-card-business' | 'marble-card' | 'marble-business' | 'marble' | 'map' | 'magnifying-glass-business' | 'magnifying-glass' | 'lock-platform' | 'lock-business' | 'lock' | 'light-bulb-business' | 'light-bulb' | 'key-business' | 'key' | 'jars' | 'invite-letter' | 'interest' | 'infinite' | 'id-card' | 'house' | 'heart-5' | 'heart-4' | 'heart-3' | 'heart-2' | 'heart' | 'headset-business' | 'headset' | 'graph-business' | 'graph' | 'globe' | 'gift-box' | 'get-paid-with-card-business' | 'gear-business' | 'gear' | 'flower' | 'flag' | 'exclamation-mark-business' | 'exclamation-mark' | 'email-success-business' | 'email-success' | 'email' | 'electric-plug' | 'eco-card' | 'door' | 'documents-folder-business' | 'documents' | 'digital-card-business' | 'digital-card-2' | 'digital-card' | 'cookie' | 'convert-business' | 'convert' | 'construction-fence' | 'confetti-business' | 'confetti' | 'coin-pile-up-business' | 'coin-pile-up' | 'coin-pile-down-business' | 'coin-pile-down' | 'closed-window' | 'check-mark-business' | 'check-mark' | 'calendar-business' | 'calendar' | 'calculator-business' | 'business-card-business' | 'business-card' | 'briefcase-business' | 'briefcase' | 'bell-business' | 'bell' | 'batch-payments-business' | 'backpack' | 'app-marketplace-business' | 'api-integrations-business'
+
+  export const illustrationNames = [
+    'api-integrations-business',
+    'app-marketplace-business',
+    'backpack',
+    'batch-payments-business',
+    'bell',
+    'bell-business',
+    'briefcase',
+    'briefcase-business',
+    'business-card',
+    'business-card-business',
+    'calculator-business',
+    'calendar',
+    'calendar-business',
+    'card',
+    'card-business',
+    'check-mark',
+    'check-mark-business',
+    'closed-window',
+    'coin-pile-down',
+    'coin-pile-down-business',
+    'coin-pile-up',
+    'coin-pile-up-business',
+    'compliance-platform',
+    'confetti',
+    'confetti-business',
+    'construction-fence',
+    'controls-platform',
+    'convert',
+    'convert-business',
+    'cookie',
+    'digital-card',
+    'digital-card-2',
+    'digital-card-business',
+    'documents',
+    'documents-folder-business',
+    'door',
+    'eco-card',
+    'electric-plug',
+    'email',
+    'email-success',
+    'email-success-business',
+    'exclamation-mark',
+    'exclamation-mark-business',
+    'flag',
+    'flower',
+    'gear',
+    'gear-business',
+    'gear-platform',
+    'get-paid-with-card-business',
+    'gift-box',
+    'globe',
+    'graph',
+    'graph-business',
+    'headset',
+    'headset-business',
+    'heart',
+    'heart-2',
+    'heart-3',
+    'heart-4',
+    'heart-5',
+    'house',
+    'id-card',
+    'infinite',
+    'interest',
+    'invite-letter',
+    'jars',
+    'key',
+    'key-business',
+    'light-bulb',
+    'light-bulb-business',
+    'lock',
+    'lock-business',
+    'lock-platform',
+    'magnifying-glass',
+    'magnifying-glass-business',
+    'map',
+    'map-business',
+    'marble',
+    'marble-business',
+    'marble-card',
+    'marble-card-business',
+    'marble-card-business-flag-only',
+    'marble-card-flag-only',
+    'marble-card-flag-only-business',
+    'megaphone',
+    'megaphone-business',
+    'multi-currency',
+    'multi-currency-business',
+    'one-invite-letter-opened',
+    'palm-tree',
+    'passkey',
+    'percentage',
+    'percentage-business',
+    'personal-card',
+    'phones',
+    'pie-chart',
+    'pie-chart-business',
+    'plane',
+    'plane-2',
+    'plane-business',
+    'puzzle-pieces',
+    'puzzle-pieces-business',
+    'question-mark',
+    'question-mark-business',
+    'receive',
+    'receive-business',
+    'red-packet',
+    'reminder-letter',
+    'rocket-platform',
+    'sand-timer',
+    'sand-timer-business',
+    'satellite-platform',
+    'shopping-bag',
+    'skip-authentication',
+    'speech-bubble',
+    'stopwatch-platform',
+    'target-platform',
+    'tool',
+    'treasury-platform',
+    'two-invite-letters-opened',
+    'wallet',
+  ] as const;
+
+  export type IllustrationNames = typeof illustrationNames[number];
+
+  export const illustration3DNames = [
+    'check-mark',
+    'confetti',
+    'flower',
+    'globe',
+    'graph',
+    'interest',
+    'jars',
+    'lock',
+    'magnifying-glass',
+    'marble',
+    'marble-card',
+    'multi-currency',
+    'plane',
+  ] as const;
+
+  export type Illustration3DNames = typeof illustration3DNames[number];

package/src/illustrations3d/Illustration3D.stories.tsx

@@ -2,7 +2,7 @@
 import React, { useEffect } from 'react';
 
 import { Sizes } from '../common';
-import { Assets } from '../illustrations/metadata';
+import { Assets, illustration3DNames } from '../illustrations/metadata';
 
 import Illustration3D from './Illustration3D';
 
@@ -10,6 +10,39 @@ export default {
   title: '3D Illustrations',
 };
 
+export const All = () => {
+  return (
+    <>
+      <span className="np-text-body-large-bold">
+        Total number of 3D illustrations: {illustration3DNames.length}
+      </span>
+      <div
+        style={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+          gap: 'var(--padding-small)',
+        }}
+      >
+        {illustration3DNames.map((name) => (
+          <div
+            key={name}
+            style={{
+              display: 'grid',
+              alignItems: 'center',
+              justifyItems: 'center',
+            }}
+          >
+            <Illustration3D name={name} size={Sizes.SMALL} />
+            <span>
+              <code>{name}</code>
+            </span>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
 export const Confetti = () => {
   return (
     <>

package/src/illustrations3d/Illustration3D.tsx

@@ -4,24 +4,11 @@ import { lazy, Suspense, useEffect, useState, LazyExoticComponent } from 'react'
 
 import { LargeSize, MediumSize, SmallSize, Sizes } from '../common';
 import Illustration, { Assets } from '../illustrations';
+import { type Illustration3DNames } from '../illustrations/metadata';
+export type { Illustration3DNames };
 
 import { useBattery, isConnectionSlow, isBatteryLow, isWebGL2Available } from './utils';
 
-export type Illustration3DNames =
-  | 'lock'
-  | 'globe'
-  | 'confetti'
-  | 'check-mark'
-  | 'flower'
-  | 'graph'
-  | 'jars'
-  | 'magnifying-glass'
-  | 'marble'
-  | 'marble-card'
-  | 'multi-currency'
-  | 'plane'
-  | 'interest';
-
 export type Props = {
   name: Illustration3DNames;
   size?: SmallSize | MediumSize | LargeSize;

package/src/illustrations3d/utils.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-import type { IllustrationNames } from '../illustrations/metadata';
+import { illustration3DNames, type IllustrationNames } from '../illustrations/metadata';
 
 export function useBattery() {
   const [batteryData, setBatteryData] = useState<{ level: number }>({ level: 1.0 });
@@ -62,22 +62,8 @@ export function defineSrc(asset: string): string {
   return `https://wise.com/web-art/assets/illustrations3d/${asset}`;
 }
 
-const illustration3DNames = [
-  'lock',
-  'globe',
-  'confetti',
-  'check-mark',
-  'flower',
-  'graph',
-  'jars',
-  'magnifying-glass',
-  'marble',
-  'marble-card',
-  'multi-currency',
-  'plane',
-  'interest',
-];
+const illustration3DSet = new Set<string>(illustration3DNames);
 
 export function isIllustrationSupport3D(asset: IllustrationNames): boolean {
-  return illustration3DNames.includes(asset);
+  return illustration3DSet.has(asset);
 }