@payfit/unity-illustrations 2.49.1 → 2.50.0

package/src/scripts/generate-assets.ts

@@ -14,7 +14,10 @@ import {
   parseSvgWidth,
   reportViolations,
 } from '../../scripts/shared/validate-size'
-import { generateAssetModule } from './templates/assetTemplate'
+import {
+  generateAssetModule,
+  generateThemedSvgAssetModule,
+} from './templates/assetTemplate'
 import { generateBaseTypes } from './templates/baseTypes'
 import { generateIndexFile } from './templates/indexTemplate'
 
@@ -32,6 +35,30 @@ const verboseFromNx = ['1', 'true', 'yes', 'on'].includes(
   (process.env.NX_VERBOSE_LOGGING ?? '').toLowerCase(),
 )
 const isVerbose = verboseFromArg || verboseFromNx
+type IllustrationTheme = 'legacy' | 'rebrand'
+
+type AssetCategory = 'icon' | 'picture' | 'animation'
+
+type AssetType = {
+  type: 'svg' | 'image'
+  animated: boolean
+  category?: AssetCategory
+  theme?: IllustrationTheme
+}
+
+type ProcessedComponent = {
+  name: string
+  type: 'svg' | 'image'
+  animated: boolean
+  category?: AssetCategory
+  theme?: IllustrationTheme
+  dimensions?: { width: number; height: number }
+  sizeBefore: number
+  sizeAfter: number
+  originalPath: string
+  optimizedPath: string
+  originalFileName: string
+}
 
 function verboseLog(message: string) {
   if (isVerbose) {
@@ -67,8 +94,8 @@ function getComponentName(filePath: string) {
 
   // Add Animation suffix for animated illustrations
   const relativePath = path.relative(illustrationsSvgDir, filePath)
-  const folder = relativePath.split(path.sep)[0]
-  if (folder === 'animated-illustrations') {
+  const pathParts = relativePath.split(path.sep)
+  if (pathParts.includes('animated-illustrations')) {
     base += 'Animation'
   }
 
@@ -89,12 +116,13 @@ async function getAllAssetFiles(dir: string) {
   return results
 }
 
-function getAssetTypeFromPath(filePath: string) {
+function getAssetTypeFromPath(filePath: string): AssetType | undefined {
   const relativePath = path.relative(illustrationsSvgDir, filePath)
-  const folder = relativePath.split(path.sep)[0]
+  const pathParts = relativePath.split(path.sep)
+  const [themeFolder, categoryFolder] = pathParts
   const ext = path.extname(filePath).toLowerCase()
 
-  if (folder === 'animated-illustrations') {
+  if (themeFolder === 'legacy' && categoryFolder === 'animated-illustrations') {
     if (ext !== '.webp') {
       throw new Error(
         `Animated illustrations must be WEBP format. Found: ${ext} in ${filePath}`,
@@ -104,32 +132,60 @@ function getAssetTypeFromPath(filePath: string) {
       type: 'image' as const,
       animated: true,
       category: 'animation' as const,
+      theme: 'legacy' as const,
     }
   }
 
-  if (folder === 'illustrated-icons') {
-    return { type: 'svg' as const, animated: false, category: 'icon' as const }
+  if (themeFolder === 'legacy' && categoryFolder === 'illustrated-icons') {
+    if (ext !== '.svg') {
+      throw new Error(
+        `Legacy illustrated icons must be SVG format. Found: ${ext} in ${filePath}`,
+      )
+    }
+    return {
+      type: 'svg' as const,
+      animated: false,
+      category: 'icon' as const,
+      theme: 'legacy' as const,
+    }
   }
 
-  if (folder === 'illustrated-pictures') {
+  if (themeFolder === 'legacy' && categoryFolder === 'illustrated-pictures') {
+    if (ext !== '.svg') {
+      throw new Error(
+        `Legacy illustrated pictures must be SVG format. Found: ${ext} in ${filePath}`,
+      )
+    }
     return {
       type: 'svg' as const,
       animated: false,
       category: 'picture' as const,
+      theme: 'legacy' as const,
     }
   }
 
-  // Fallback to extension-based detection for backward compatibility
-  const animatedFormats = ['.gif', '.webp']
+  if (themeFolder === 'rebrand') {
+    if (ext === '.svg') {
+      return {
+        type: 'svg' as const,
+        animated: false,
+        theme: 'rebrand' as const,
+      }
+    }
 
-  if (ext === '.svg') {
-    return { type: 'svg' as const, animated: false }
-  }
+    if (
+      ext === '.webp' &&
+      path.basename(filePath).startsWith('Type=Animation')
+    ) {
+      return undefined
+    }
 
-  return {
-    type: 'image' as const,
-    animated: animatedFormats.includes(ext),
+    throw new Error(
+      `Static rebrand illustration variants must be SVG format. Found: ${ext} in ${filePath}`,
+    )
   }
+
+  return undefined
 }
 
 function optimizeSvg(svgContent: string, filePath: string, svgoConfig: Config) {
@@ -169,16 +225,23 @@ async function getImageDimensions(
   }
 }
 
-async function processAsset(assetPath: string) {
+async function processAsset(assetPath: string, outputFileName?: string) {
   const assetFile = path.basename(assetPath)
   const componentName = getComponentName(assetPath)
   const assetType = getAssetTypeFromPath(assetPath)
+  if (!assetType) {
+    return undefined
+  }
   const svgoConfig = (await loadConfig()) ?? {}
 
   // Generate output path in the generated/assets folder
   const ext = path.extname(assetPath)
-  const outputFileName = `${componentName}${ext}`
-  const optimizedAssetPath = path.join(assetsOutputDir, outputFileName)
+  const optimizedOutputFileName =
+    outputFileName ??
+    (assetType.type === 'svg' && assetType.theme
+      ? `${componentName}.${assetType.theme}${ext}`
+      : `${componentName}${ext}`)
+  const optimizedAssetPath = path.join(assetsOutputDir, optimizedOutputFileName)
 
   let sizeBefore = 0
   let sizeAfter = 0
@@ -226,6 +289,7 @@ async function processAsset(assetPath: string) {
     type: assetType.type,
     animated: assetType.animated,
     category: assetType.category,
+    theme: assetType.theme,
     dimensions,
     sizeBefore,
     sizeAfter,
@@ -235,6 +299,117 @@ async function processAsset(assetPath: string) {
   }
 }
 
+function groupStaticSvgAssets(components: ProcessedComponent[]) {
+  const groups = new Map<
+    string,
+    Partial<Record<IllustrationTheme, ProcessedComponent>>
+  >()
+
+  for (const component of components) {
+    if (component.type !== 'svg' || !component.theme) {
+      continue
+    }
+
+    const group = groups.get(component.name) ?? {}
+    if (group[component.theme]) {
+      throw new Error(
+        `Duplicate ${component.theme} asset for ${component.name}: ${component.originalFileName}`,
+      )
+    }
+    group[component.theme] = component
+    groups.set(component.name, group)
+  }
+
+  const groupedComponents: ProcessedComponent[] = []
+  const missingRebrandFiles: string[] = []
+
+  for (const [componentName, group] of groups) {
+    if (group.legacy && !group.rebrand) {
+      missingRebrandFiles.push(group.legacy.originalFileName)
+    }
+
+    if (group.legacy) {
+      groupedComponents.push({
+        ...group.legacy,
+        name: componentName,
+        sizeBefore: group.legacy.sizeBefore + (group.rebrand?.sizeBefore ?? 0),
+        sizeAfter: group.legacy.sizeAfter + (group.rebrand?.sizeAfter ?? 0),
+      })
+      continue
+    }
+
+    if (group.rebrand) {
+      groupedComponents.push({
+        ...group.rebrand,
+        name: componentName,
+      })
+    }
+  }
+
+  if (missingRebrandFiles.length > 0) {
+    throw new Error(
+      `Every legacy SVG asset must have a rebrand asset with the same generated name. Missing rebrand counterparts for: ${missingRebrandFiles.join(', ')}`,
+    )
+  }
+
+  return groupedComponents
+}
+
+async function validateSvgGuardrails(
+  component: ProcessedComponent,
+  sizeGuardrails: SizeGuardrailsConfig,
+  violations: ValidationEntry[],
+  warnings: ValidationEntry[],
+) {
+  const optimizedContent = await fs.readFile(component.optimizedPath, 'utf8')
+  const optimizedSize = Buffer.byteLength(optimizedContent, 'utf8')
+  const width = parseSvgWidth(optimizedContent)
+
+  const exceedsFileSize = optimizedSize > sizeGuardrails.maxFileSize
+  const exceedsWidth = width !== undefined && width > sizeGuardrails.maxWidth
+  const isAllowlisted = sizeGuardrails.allowlist.includes(
+    component.originalFileName,
+  )
+
+  if (!exceedsFileSize && !exceedsWidth) {
+    return
+  }
+
+  const details: string[] = []
+  if (exceedsFileSize) {
+    details.push(
+      `${(optimizedSize / 1024).toFixed(1)}KB after SVGO (limit: ${(
+        sizeGuardrails.maxFileSize / 1024
+      ).toFixed(0)}KB)`,
+    )
+  }
+  if (exceedsWidth) {
+    details.push(`${width}px width (limit: ${sizeGuardrails.maxWidth}px)`)
+  }
+
+  const detailStr = details.join('; ')
+  const sourceLabel = component.theme
+    ? `[${component.theme}] ${component.originalFileName}`
+    : component.originalFileName
+
+  if (isAllowlisted) {
+    const msg = `${sourceLabel}: ${detailStr}. Consider simplifying this illustration in Figma.`
+    warnings.push({
+      filename: sourceLabel,
+      message: msg,
+    })
+    console.warn(`    ⚠️  [Allowlisted] ${msg}`)
+    return
+  }
+
+  const msg = `${sourceLabel}: ${detailStr}. Automatic optimization could not reduce below limit — simplify in Figma.`
+  violations.push({
+    filename: sourceLabel,
+    message: msg,
+  })
+  console.error(`    ❌  ${msg}`)
+}
+
 function loadSizeGuardrails(): SizeGuardrailsConfig | undefined {
   if (!existsSync(configPath)) {
     console.log('ℹ️  No .figma-sync.json found, skipping size guardrails')
@@ -259,6 +434,9 @@ async function main() {
     console.log('🔎 Verbose mode enabled (full asset logs)')
   }
 
+  // Clear generated output so old asset names do not survive generator changes.
+  await fs.rm(outputDir, { recursive: true, force: true })
+
   // Ensure output directories exist
   await fs.mkdir(outputDir, { recursive: true })
   await fs.mkdir(assetsOutputDir, { recursive: true })
@@ -283,91 +461,122 @@ async function main() {
   }
 
   // Process all assets
-  const components = []
+  const processedComponents: ProcessedComponent[] = []
+  let hasProcessingErrors = false
   for (const assetPath of assetFiles) {
     try {
       const component = await processAsset(assetPath)
+      if (!component) {
+        verboseLog(`↪️  Skipped unsupported asset: ${path.basename(assetPath)}`)
+        continue
+      }
 
       // Validate optimized SVG against size guardrails
       if (sizeGuardrails && component.type === 'svg') {
-        const optimizedContent = await fs.readFile(
-          component.optimizedPath,
-          'utf8',
+        await validateSvgGuardrails(
+          component,
+          sizeGuardrails,
+          violations,
+          warnings,
         )
-        const optimizedSize = optimizedContent.length
-        const width = parseSvgWidth(optimizedContent)
+      }
 
-        const exceedsFileSize = optimizedSize > sizeGuardrails.maxFileSize
-        const exceedsWidth =
-          width !== undefined && width > sizeGuardrails.maxWidth
-        const isAllowlisted = sizeGuardrails.allowlist.includes(
-          component.originalFileName,
+      processedComponents.push(component)
+      verboseLog(
+        `✅ ${component.originalFileName} → optimized ${path.basename(
+          component.optimizedPath,
+        )}`,
+      )
+
+      if (!isVerbose && processedComponents.length % 25 === 0) {
+        console.log(
+          `⏳ Processed ${processedComponents.length}/${assetFiles.length} assets...`,
         )
+      }
+    } catch (error) {
+      hasProcessingErrors = true
+      console.error(
+        `❌ Failed to process ${assetPath}:`,
+        (error as Error).message,
+      )
+      if (isVerbose) {
+        console.error(error)
+      }
+    }
+  }
+
+  if (hasProcessingErrors) {
+    throw new Error('One or more illustration assets failed to process')
+  }
+
+  const staticComponents = groupStaticSvgAssets(processedComponents)
+  const animatedComponents = processedComponents.filter(
+    component => component.category === 'animation',
+  )
+  const components = [...staticComponents, ...animatedComponents].sort((a, b) =>
+    a.name.localeCompare(b.name),
+  )
+
+  const staticGroups = new Map<
+    string,
+    Partial<Record<IllustrationTheme, ProcessedComponent>>
+  >()
+  for (const component of processedComponents) {
+    if (component.type === 'svg' && component.theme) {
+      const group = staticGroups.get(component.name) ?? {}
+      group[component.theme] = component
+      staticGroups.set(component.name, group)
+    }
+  }
 
-        if (exceedsFileSize || exceedsWidth) {
-          const details: string[] = []
-          if (exceedsFileSize) {
-            details.push(
-              `${(optimizedSize / 1024).toFixed(1)}KB after SVGO (limit: ${(
-                sizeGuardrails.maxFileSize / 1024
-              ).toFixed(0)}KB)`,
-            )
-          }
-          if (exceedsWidth) {
-            details.push(
-              `${width}px width (limit: ${sizeGuardrails.maxWidth}px)`,
-            )
-          }
-
-          const detailStr = details.join('; ')
-
-          if (isAllowlisted) {
-            const msg = `${component.originalFileName}: ${detailStr}. Consider simplifying this illustration in Figma.`
-            warnings.push({
-              filename: component.originalFileName,
-              message: msg,
-            })
-            console.warn(`    ⚠️  [Allowlisted] ${msg}`)
-          } else {
-            const msg = `${component.originalFileName}: ${detailStr}. Automatic optimization could not reduce below limit — simplify in Figma.`
-            violations.push({
-              filename: component.originalFileName,
-              message: msg,
-            })
-            console.error(`    ❌  ${msg}`)
-          }
+  for (const component of components) {
+    try {
+      let moduleContent: string
+      if (component.type === 'svg') {
+        const group = staticGroups.get(component.name)
+        if (!group?.legacy && !group?.rebrand) {
+          throw new Error(`Missing SVG source for ${component.name}`)
+        }
+        const defaultComponent = group.legacy ?? group.rebrand
+        if (!defaultComponent) {
+          throw new Error(`Missing default SVG source for ${component.name}`)
         }
+        moduleContent = generateThemedSvgAssetModule(
+          component.name,
+          {
+            default: defaultComponent.optimizedPath,
+            legacy: group.legacy?.optimizedPath,
+            rebrand: group.rebrand?.optimizedPath,
+          },
+          {
+            default: defaultComponent.originalFileName,
+            legacy: group.legacy?.originalFileName,
+            rebrand: group.rebrand?.originalFileName,
+          },
+        )
+      } else {
+        moduleContent = generateAssetModule(
+          component.name,
+          component.optimizedPath,
+          {
+            type: component.type,
+            animated: component.animated,
+            category: component.category,
+            dimensions: component.dimensions,
+          },
+          component.originalFileName,
+        )
       }
 
-      // Generate individual asset module
-      const moduleContent = generateAssetModule(
-        component.name,
-        component.optimizedPath,
-        {
-          type: component.type,
-          animated: component.animated,
-          category: component.category,
-          dimensions: component.dimensions,
-        },
-        component.originalFileName,
-      )
-
       const outPath = path.join(outputDir, `${component.name}.ts`)
       await fs.writeFile(outPath, moduleContent, 'utf8')
 
-      components.push(component)
       verboseLog(
         `✅ ${component.originalFileName} → ${component.name}.ts + optimized asset`,
       )
-
-      if (!isVerbose && components.length % 25 === 0) {
-        console.log(
-          `⏳ Processed ${components.length}/${assetFiles.length} assets...`,
-        )
-      }
     } catch (error) {
       console.error(
-        `❌ Failed to process ${assetPath}:`,
+        `❌ Failed to generate ${component.name}:`,
         (error as Error).message,
       )
       if (isVerbose) {

package/src/scripts/templates/assetTemplate.ts

@@ -22,13 +22,80 @@ export function generateAssetModule(
   }
 }
 
+export function generateThemedSvgAssetModule(
+  componentName: string,
+  optimizedAssets: {
+    default: string,
+    legacy?: string,
+    rebrand?: string,
+  },
+  originalFileNames: {
+    default: string,
+    legacy?: string,
+    rebrand?: string,
+  },
+) {
+  const defaultRelativePath = `./assets/${path.basename(optimizedAssets.default)}`
+  const legacyRelativePath = optimizedAssets.legacy
+    ? `./assets/${path.basename(optimizedAssets.legacy)}`
+    : undefined
+  const rebrandRelativePath = optimizedAssets.rebrand
+    ? `./assets/${path.basename(optimizedAssets.rebrand)}`
+    : undefined
+
+  return generateSvgAsset(
+    componentName,
+    defaultRelativePath,
+    originalFileNames.default,
+    legacyRelativePath,
+    originalFileNames.legacy,
+    rebrandRelativePath,
+    originalFileNames.rebrand,
+  )
+}
+
 /**
  * Generates SVG asset module
  */
-function generateSvgAsset(componentName: string, relativePath: string, originalFileName: string) {
+function generateSvgAsset(
+  componentName: string,
+  relativePath: string,
+  originalFileName: string,
+  legacyRelativePath?: string,
+  legacyOriginalFileName?: string,
+  rebrandRelativePath?: string,
+  rebrandOriginalFileName?: string,
+) {
+  const sourceComments = [
+    legacyOriginalFileName ? `// Legacy source: ${legacyOriginalFileName}` : '',
+    rebrandOriginalFileName
+      ? `// Rebrand source: ${rebrandOriginalFileName}`
+      : '',
+  ]
+    .filter(Boolean)
+    .join('\n')
+  const legacyImport =
+    legacyRelativePath && legacyRelativePath !== relativePath
+      ? `\nimport legacySvgUrl from '${legacyRelativePath}'`
+      : ''
+  const rebrandImport =
+    rebrandRelativePath && rebrandRelativePath !== relativePath
+      ? `\nimport rebrandSvgUrl from '${rebrandRelativePath}'`
+      : ''
+  const legacyUrl = legacyRelativePath
+    ? legacyRelativePath === relativePath
+      ? 'defaultSvgUrl'
+      : 'legacySvgUrl'
+    : 'defaultSvgUrl'
+  const rebrandUrl = rebrandRelativePath
+    ? rebrandRelativePath === relativePath
+      ? 'defaultSvgUrl'
+      : 'rebrandSvgUrl'
+    : 'defaultSvgUrl'
+
   return `// AUTO-GENERATED FILE. DO NOT EDIT.
-// Source: ${originalFileName}
-import svgUrl from '${relativePath}'
+// Source: ${originalFileName}${sourceComments ? `\n${sourceComments}` : ''}
+import defaultSvgUrl from '${relativePath}'${legacyImport}${rebrandImport}
 import type { IllustrationAsset, BaseSvgAsset } from './types'
 
 export type ${componentName}Asset = IllustrationAsset<BaseSvgAsset & {
@@ -51,7 +118,11 @@ export type ${componentName}Asset = IllustrationAsset<BaseSvgAsset & {
  */
 const ${componentName}: ${componentName}Asset = {
   type: 'svg',
-  url: svgUrl,
+  url: defaultSvgUrl,
+  urls: {
+    legacy: ${legacyUrl},
+    rebrand: ${rebrandUrl},
+  },
   animated: false,
   name: '${componentName}',
 } as ${componentName}Asset
@@ -95,6 +166,10 @@ export type ${componentName}Asset = IllustrationAsset<BaseAnimatedImageAsset & {
 const ${componentName}: ${componentName}Asset = {
   type: 'image',
   url: assetUrl,
+  urls: {
+    legacy: assetUrl,
+    rebrand: assetUrl,
+  },
   animated: true,
   dimensions: { width: ${dimensions.width}, height: ${dimensions.height} },
   category: 'animation',
@@ -136,6 +211,10 @@ export type ${componentName}Asset = IllustrationAsset<BaseImageAsset & {
 const ${componentName}: ${componentName}Asset = {
   type: 'image',
   url: assetUrl,
+  urls: {
+    legacy: assetUrl,
+    rebrand: assetUrl,
+  },
   animated: ${animated},
   name: '${componentName}',
 } as ${componentName}Asset

package/src/scripts/templates/baseTypes.ts

@@ -3,6 +3,7 @@
  */
 export function generateBaseTypes() {
   return `// AUTO-GENERATED FILE. DO NOT EDIT.
+import type { UnityTheme } from '@payfit/unity-themes'
 
 // Brand symbol for type safety
 declare const __UNITY_ILLUSTRATION: unique symbol
@@ -11,16 +12,20 @@ export interface IllustrationAssetBrand {
   readonly [__UNITY_ILLUSTRATION]: true
 }
 
+export type IllustrationAssetUrls = Partial<Record<UnityTheme, string>>
+
 // Base interfaces
 export interface BaseSvgAsset {
   readonly type: 'svg'
   readonly url: string
+  readonly urls?: IllustrationAssetUrls
   readonly animated: false
 }
 
 export interface BaseImageAsset {
   readonly type: 'image'
   readonly url: string
+  readonly urls?: IllustrationAssetUrls
   readonly animated: boolean
 }
 

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureMedium.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/components/lazy-illustration/figma/LazyIllustratedPictureSmall.figma.d.ts

@@ -1,7 +0,0 @@
-import { default as figma } from 'figma';
-declare const _default: {
-    id: string;
-    example: figma.TemplateStringResult;
-    imports: string[];
-};
-export default _default;

package/dist/esm/generated/JEC.d.ts

@@ -1,20 +0,0 @@
-import { IllustrationAsset, BaseSvgAsset } from './types.js';
-export type JECAsset = IllustrationAsset<BaseSvgAsset & {
-    readonly name: 'JEC';
-}>;
-/**
- * JEC illustration asset
- * @example
- * ```tsx
- * import { Illustration } from '@payfit/unity-illustrations'
- * import JEC from '@payfit/unity-illustrations/assets/JEC'
- *
- * <Illustration
- *   illustration={JEC}
- *   alt="JEC illustration"
- *   size="md"
- * />
- * ```
- */
-declare const JEC: JECAsset;
-export default JEC;

package/dist/esm/generated/JEC.js

@@ -1,10 +0,0 @@
-import e from "./assets/JEC.js";
-//#region src/generated/JEC.ts
-var t = {
-	type: "svg",
-	url: e,
-	animated: !1,
-	name: "JEC"
-};
-//#endregion
-export { t as default };