@payfit/unity-illustrations 2.55.21 → 2.55.23

package/src/scripts/generate-assets.ts

@@ -1,649 +0,0 @@
-import { existsSync, readFileSync } from 'fs'
-import fs from 'fs/promises'
-import path from 'path'
-
-import type { Config } from 'svgo'
-
-import type { ValidationEntry } from '../../scripts/shared/validate-size'
-import type { SizeGuardrailsConfig } from '../../scripts/steps/download-assets'
-
-import imageSize from 'image-size'
-import { loadConfig, optimize } from 'svgo'
-
-import {
-  parseSvgWidth,
-  reportViolations,
-} from '../../scripts/shared/validate-size'
-import {
-  generateAssetModule,
-  generateThemedSvgAssetModule,
-} from './templates/assetTemplate'
-import { generateBaseTypes } from './templates/baseTypes'
-import { generateIndexFile } from './templates/indexTemplate'
-import { writeIllustrationAgentReferences } from './agent-references/illustration-reference'
-
-// Configuration
-const illustrationsSvgDir = path.resolve('./assets/')
-const srcRoot = path.resolve('./src')
-const outputDir = path.join(srcRoot, 'generated')
-const assetsOutputDir = path.join(outputDir, 'assets') // Optimized assets go here
-const agentReferencesOutputDir = path.resolve('./src/agent-references')
-const configPath = path.resolve('./.figma-sync.json')
-
-const verboseFromArg = process.argv.some(
-  arg => arg === '--verbose' || arg === '-v',
-)
-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) {
-    console.log(message)
-  }
-}
-
-// Utility functions
-function toPascalCase(str: string) {
-  return str
-    .replace(/([a-z])([A-Z])/g, '$1 $2')
-    .replace(/[^a-z0-9]+/gi, ' ')
-    .split(' ')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join('')
-}
-
-function getComponentName(filePath: string) {
-  const filename = path.basename(filePath)
-  const typeMatch = /Type=([^,.]+)/.exec(filename)
-  const nameMatch = /Name=([^,.]+)/.exec(filename)
-  const bgMatch = /With background=yes/.exec(filename)
-  const type = typeMatch ? typeMatch[1] : null
-  const name = nameMatch ? nameMatch[1] : 'Illustration'
-  let base = ''
-  if (type === 'empty-state') {
-    base += 'EmptyState'
-  }
-  base += toPascalCase(name ?? '')
-  if (bgMatch) {
-    base += 'WithBackground'
-  }
-
-  // Add Animation suffix for animated illustrations
-  const relativePath = path.relative(illustrationsSvgDir, filePath)
-  const pathParts = relativePath.split(path.sep)
-  if (pathParts.includes('animated-illustrations')) {
-    base += 'Animation'
-  }
-
-  return base
-}
-
-async function getAllAssetFiles(dir: string) {
-  let results: string[] = []
-  const list = await fs.readdir(dir, { withFileTypes: true })
-  for (const entry of list) {
-    const filePath = path.join(dir, entry.name)
-    if (entry.isDirectory()) {
-      results = results.concat(await getAllAssetFiles(filePath))
-    } else if (/\.(?:svg|gif|webp|png|jpg|jpeg)$/i.exec(filePath)) {
-      results.push(filePath)
-    }
-  }
-  return results
-}
-
-function getAssetTypeFromPath(filePath: string): AssetType | undefined {
-  const relativePath = path.relative(illustrationsSvgDir, filePath)
-  const pathParts = relativePath.split(path.sep)
-  const [themeFolder, categoryFolder] = pathParts
-  const ext = path.extname(filePath).toLowerCase()
-
-  if (themeFolder === 'legacy' && categoryFolder === 'animated-illustrations') {
-    if (ext !== '.webp') {
-      throw new Error(
-        `Animated illustrations must be WEBP format. Found: ${ext} in ${filePath}`,
-      )
-    }
-    return {
-      type: 'image' as const,
-      animated: true,
-      category: 'animation' as const,
-      theme: 'legacy' 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 (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,
-    }
-  }
-
-  if (themeFolder === 'rebrand') {
-    if (ext === '.svg') {
-      return {
-        type: 'svg' as const,
-        animated: false,
-        theme: 'rebrand' as const,
-      }
-    }
-
-    if (
-      ext === '.webp' &&
-      path.basename(filePath).startsWith('Type=Animation')
-    ) {
-      return undefined
-    }
-
-    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) {
-  try {
-    const result = optimize(svgContent, {
-      ...svgoConfig,
-      path: filePath,
-    })
-    return result.data
-  } catch (error) {
-    console.warn(
-      `⚠️  SVG optimization failed for ${path.basename(
-        filePath,
-      )}, using original:`,
-      (error as Error).message,
-    )
-    return svgContent
-  }
-}
-
-async function getImageDimensions(
-  imagePath: string,
-): Promise<{ width: number; height: number }> {
-  try {
-    const buffer = await fs.readFile(imagePath)
-    const dimensions = imageSize(buffer)
-
-    if (!dimensions.width || !dimensions.height) {
-      throw new Error(`Could not determine dimensions for ${imagePath}`)
-    }
-
-    return { width: dimensions.width, height: dimensions.height }
-  } catch (error) {
-    throw new Error(
-      `Failed to get dimensions for ${imagePath}: ${(error as Error).message}`,
-    )
-  }
-}
-
-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 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
-  let dimensions: { width: number; height: number } | undefined
-
-  if (assetType.type === 'svg') {
-    // Optimize SVG and save to generated/assets folder
-    const originalContent = await fs.readFile(assetPath, 'utf8')
-    sizeBefore = originalContent.length
-    const optimizedContent = optimizeSvg(originalContent, assetPath, svgoConfig)
-    sizeAfter = optimizedContent.length
-
-    // Write optimized content to generated/assets folder
-    await fs.writeFile(optimizedAssetPath, optimizedContent, 'utf8')
-
-    const reduction = (((sizeBefore - sizeAfter) / sizeBefore) * 100).toFixed(1)
-    verboseLog(
-      `📉 ${assetFile}: ${sizeBefore} → ${sizeAfter} bytes (-${reduction}%)`,
-    )
-  } else {
-    // For images, copy to generated/assets folder (assume they're already optimized)
-    await fs.copyFile(assetPath, optimizedAssetPath)
-    const stats = await fs.stat(assetPath)
-    sizeBefore = sizeAfter = stats.size
-
-    // Extract dimensions for animated illustrations
-    if (assetType.category === 'animation') {
-      dimensions = await getImageDimensions(assetPath)
-      verboseLog(
-        `🎬 ${assetFile}: ${(sizeBefore / 1024).toFixed(2)}KB (animation ${
-          dimensions.width
-        }x${dimensions.height})`,
-      )
-    } else {
-      verboseLog(
-        `📦 ${assetFile}: ${(sizeBefore / 1024).toFixed(2)}KB (${
-          assetType.animated ? 'animated ' : ''
-        }${assetType.type})`,
-      )
-    }
-  }
-
-  return {
-    name: componentName,
-    type: assetType.type,
-    animated: assetType.animated,
-    category: assetType.category,
-    theme: assetType.theme,
-    dimensions,
-    sizeBefore,
-    sizeAfter,
-    originalPath: assetPath,
-    optimizedPath: optimizedAssetPath,
-    originalFileName: assetFile,
-  }
-}
-
-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')
-    return undefined
-  }
-
-  const config = JSON.parse(readFileSync(configPath, 'utf-8')) as {
-    sizeGuardrails?: SizeGuardrailsConfig
-  }
-
-  if (!config.sizeGuardrails) {
-    console.log('ℹ️  No sizeGuardrails config, skipping size validation')
-    return undefined
-  }
-
-  return config.sizeGuardrails
-}
-
-async function main() {
-  console.log('🎨 Generating and optimizing illustration assets...')
-  if (isVerbose) {
-    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 })
-
-  // Generate base types file
-  const baseTypesContent = generateBaseTypes()
-  await fs.writeFile(path.join(outputDir, 'types.ts'), baseTypesContent, 'utf8')
-  verboseLog('✅ Generated base types')
-
-  // Load size guardrails config
-  const sizeGuardrails = loadSizeGuardrails()
-  const violations: ValidationEntry[] = []
-  const warnings: ValidationEntry[] = []
-
-  // Discover all asset files
-  const assetFiles = await getAllAssetFiles(illustrationsSvgDir)
-  console.log(`🔍 Found ${assetFiles.length} assets to process`)
-
-  if (assetFiles.length === 0) {
-    console.warn('⚠️  No assets found! Check your assets directory.')
-    return
-  }
-
-  // Process all assets
-  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') {
-        await validateSvgGuardrails(
-          component,
-          sizeGuardrails,
-          violations,
-          warnings,
-        )
-      }
-
-      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)
-    }
-  }
-
-  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,
-        )
-      }
-
-      const outPath = path.join(outputDir, `${component.name}.ts`)
-      await fs.writeFile(outPath, moduleContent, 'utf8')
-
-      verboseLog(
-        `✅ ${component.originalFileName} → ${component.name}.ts + optimized asset`,
-      )
-    } catch (error) {
-      console.error(
-        `❌ Failed to generate ${component.name}:`,
-        (error as Error).message,
-      )
-      if (isVerbose) {
-        console.error(error)
-      }
-    }
-  }
-
-  // Generate main index file
-  const indexContent = generateIndexFile(components)
-  await fs.writeFile(
-    path.join(outputDir, 'illustrationAssets.ts'),
-    indexContent,
-    'utf8',
-  )
-  writeIllustrationAgentReferences({
-    components,
-    outputDir: agentReferencesOutputDir,
-  })
-
-  // Summary
-  const totalSizeBefore = components.reduce((sum, c) => sum + c.sizeBefore, 0)
-  const totalSizeAfter = components.reduce((sum, c) => sum + c.sizeAfter, 0)
-  const totalReduction =
-    totalSizeBefore > 0
-      ? (((totalSizeBefore - totalSizeAfter) / totalSizeBefore) * 100).toFixed(
-          1,
-        )
-      : '0'
-
-  console.log(`\n🎉 Generated ${components.length} illustration assets!`)
-  console.log(
-    `📊 Total optimization: ${(totalSizeBefore / 1024).toFixed(1)}KB → ${(
-      totalSizeAfter / 1024
-    ).toFixed(1)}KB (-${totalReduction}%)`,
-  )
-  console.log(
-    `📁 Optimized assets saved to: ${path.relative(
-      process.cwd(),
-      assetsOutputDir,
-    )}`,
-  )
-  console.log(`   - SVGs: ${components.filter(c => c.type === 'svg').length}`)
-  console.log(
-    `   - Images: ${
-      components.filter(c => c.type === 'image' && c.category !== 'animation')
-        .length
-    }`,
-  )
-  console.log(
-    `   - Animations: ${
-      components.filter(c => c.category === 'animation').length
-    }`,
-  )
-  console.log(
-    `   - Total Animated: ${components.filter(c => c.animated).length}`,
-  )
-
-  // Report size guardrail results
-  if (sizeGuardrails) {
-    reportViolations(violations, warnings, sizeGuardrails.strict)
-  }
-}
-
-main().catch((err: unknown) => {
-  console.error('❌ Error generating illustrations:', err)
-  process.exit(1)
-})