@payfit/unity-illustrations 0.0.0-alpha.9 → 1.0.0

package/src/generated/types.ts

@@ -0,0 +1,25 @@
+// AUTO-GENERATED FILE. DO NOT EDIT.
+
+// Brand symbol for type safety
+declare const __UNITY_ILLUSTRATION: unique symbol
+
+export interface IllustrationAssetBrand {
+  readonly [__UNITY_ILLUSTRATION]: true
+}
+
+// Base interfaces
+export interface BaseSvgAsset {
+  readonly type: 'svg'
+  readonly url: string
+  readonly animated: false
+}
+
+export interface BaseImageAsset {
+  readonly type: 'image'
+  readonly url: string
+  readonly animated: boolean
+}
+
+// Branded wrapper type
+export type IllustrationAsset<T extends (BaseSvgAsset | BaseImageAsset) & { readonly name: string }> =
+  T & IllustrationAssetBrand

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components/illustration/Illustration'
+export * from './components/lazy-illustration/LazyIllustration'
+
+export * from './generated/illustrationAssets'

package/src/scripts/generate-assets.ts

@@ -0,0 +1,237 @@
+import fs from 'fs/promises'
+import path from 'path'
+
+import type { Config } from 'svgo'
+
+import { loadConfig, optimize } from 'svgo'
+
+import { generateAssetModule } from './templates/assetTemplate'
+import { generateBaseTypes } from './templates/baseTypes'
+import { generateIndexFile } from './templates/indexTemplate'
+
+// 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
+
+// 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(filename: string) {
+  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'
+  }
+  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 getAssetType(filePath: string) {
+  const ext = path.extname(filePath).toLowerCase()
+  const animatedFormats = ['.gif', '.webp']
+
+  if (ext === '.svg') {
+    return { type: 'svg', animated: false }
+  }
+
+  return {
+    type: 'image',
+    animated: animatedFormats.includes(ext),
+  }
+}
+
+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 processAsset(assetPath: string) {
+  const assetFile = path.basename(assetPath)
+  const componentName = getComponentName(assetFile)
+  const assetType = getAssetType(assetPath)
+  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)
+
+  let sizeBefore = 0
+  let sizeAfter = 0
+
+  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)
+    console.log(
+      `📉 ${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
+    console.log(
+      `📦 ${assetFile}: ${(sizeBefore / 1024).toFixed(2)}KB (${
+        assetType.animated ? 'animated ' : ''
+      }${assetType.type})`,
+    )
+  }
+
+  return {
+    name: componentName,
+    type: assetType.type,
+    animated: assetType.animated,
+    sizeBefore,
+    sizeAfter,
+    originalPath: assetPath,
+    optimizedPath: optimizedAssetPath,
+    originalFileName: assetFile,
+  }
+}
+
+async function main() {
+  console.log('🎨 Generating and optimizing illustration assets...')
+
+  // 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')
+  console.log('✅ Generated base types')
+
+  // 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 components = []
+  for (const assetPath of assetFiles) {
+    try {
+      const component = await processAsset(assetPath)
+
+      // Generate individual asset module
+      const moduleContent = generateAssetModule(
+        component.name,
+        component.optimizedPath,
+        {
+          type: component.type as 'svg' | 'image',
+          animated: component.animated,
+        },
+        component.originalFileName,
+      )
+
+      const outPath = path.join(outputDir, `${component.name}.ts`)
+      await fs.writeFile(outPath, moduleContent, 'utf8')
+
+      components.push(component)
+      console.log(
+        `✅ ${component.originalFileName} → ${component.name}.ts + optimized asset`,
+      )
+    } catch (error) {
+      console.log(error)
+      console.error(
+        `❌ Failed to process ${assetPath}:`,
+        (error as Error).message,
+      )
+    }
+  }
+
+  // Generate main index file
+  const indexContent = generateIndexFile(components)
+  await fs.writeFile(
+    path.join(outputDir, 'illustrationAssets.ts'),
+    indexContent,
+    'utf8',
+  )
+
+  // 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').length}`,
+  )
+  console.log(`   - Animated: ${components.filter(c => c.animated).length}`)
+}
+
+main().catch((err: unknown) => {
+  console.error('❌ Error generating illustrations:', err)
+  process.exit(1)
+})

package/src/scripts/templates/assetTemplate.ts

@@ -0,0 +1,92 @@
+import path from 'path'
+
+/**
+ * Generates a single asset module
+ */
+export function generateAssetModule(componentName: string, optimizedAssetPath: string, assetType: { type: 'svg' | 'image', animated: boolean }, originalFileName: string) {
+  // Use relative path from the generated TypeScript file to the optimized asset
+  const relativePath = `./assets/${path.basename(optimizedAssetPath)}`
+
+  if (assetType.type === 'svg') {
+    return generateSvgAsset(componentName, relativePath, originalFileName)
+  } else {
+    return generateImageAsset(componentName, relativePath, originalFileName, assetType.animated)
+  }
+}
+
+/**
+ * Generates SVG asset module
+ */
+function generateSvgAsset(componentName: string, relativePath: string, originalFileName: string) {
+  return `// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: ${originalFileName}
+import svgUrl from '${relativePath}'
+import type { IllustrationAsset, BaseSvgAsset } from './types'
+
+export type ${componentName}Asset = IllustrationAsset<BaseSvgAsset & {
+  readonly name: '${componentName}'
+}>
+
+/**
+ * ${componentName} illustration asset
+ * @example
+ * \`\`\`tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ${componentName} from '@payfit/unity-illustrations/${componentName}'
+ *
+ * <Illustration
+ *   illustration={${componentName}}
+ *   alt="${componentName} illustration"
+ *   size="md"
+ * />
+ * \`\`\`
+ */
+const ${componentName}: ${componentName}Asset = {
+  type: 'svg',
+  url: svgUrl,
+  animated: false,
+  name: '${componentName}',
+} as ${componentName}Asset
+
+export default ${componentName}
+`
+}
+
+/**
+ * Generates image asset module
+ */
+function generateImageAsset(componentName: string, relativePath: string, originalFileName: string, animated: boolean) {
+  return `// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: ${originalFileName}
+import assetUrl from '${relativePath}'
+import type { IllustrationAsset, BaseImageAsset } from './types'
+
+export type ${componentName}Asset = IllustrationAsset<BaseImageAsset & {
+  readonly name: '${componentName}'
+  readonly animated: ${animated}
+}>
+
+/**
+ * ${componentName} illustration asset
+ * @example
+ * \`\`\`tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ${componentName} from '@payfit/unity-illustrations/${componentName}'
+ *
+ * <Illustration
+ *   illustration={${componentName}}
+ *   alt="${componentName} illustration"
+ *   size="md"
+ * />
+ * \`\`\`
+ */
+const ${componentName}: ${componentName}Asset = {
+  type: 'image',
+  url: assetUrl,
+  animated: ${animated},
+  name: '${componentName}',
+} as ${componentName}Asset
+
+export default ${componentName}
+`
+}

package/src/scripts/templates/baseTypes.ts

@@ -0,0 +1,31 @@
+/**
+ * Generates the base types file content
+ */
+export function generateBaseTypes() {
+  return `// AUTO-GENERATED FILE. DO NOT EDIT.
+
+// Brand symbol for type safety
+declare const __UNITY_ILLUSTRATION: unique symbol
+
+export interface IllustrationAssetBrand {
+  readonly [__UNITY_ILLUSTRATION]: true
+}
+
+// Base interfaces
+export interface BaseSvgAsset {
+  readonly type: 'svg'
+  readonly url: string
+  readonly animated: false
+}
+
+export interface BaseImageAsset {
+  readonly type: 'image'
+  readonly url: string
+  readonly animated: boolean
+}
+
+// Branded wrapper type
+export type IllustrationAsset<T extends (BaseSvgAsset | BaseImageAsset) & { readonly name: string }> =
+  T & IllustrationAssetBrand
+`
+}

package/src/scripts/templates/indexTemplate.ts

@@ -0,0 +1,108 @@
+type Component = {
+  name: string,
+  type: string,
+  animated: boolean,
+  sizeBefore: number,
+  sizeAfter: number
+}
+
+/**
+ * Generates the main index file
+ */
+export function generateIndexFile(components: Component[]) {
+  // Import all the actual assets
+  const assetImports = components
+    .map(({ name }) => `import { type ${name}Asset } from './${name}'`)
+    .join('\n')
+
+  const typeExports = components
+    .map(({ name }) => `export type { ${name}Asset } from './${name}'`)
+    .join('\n')
+
+  const nameUnion = components
+    .map(({ name }) => `'${name}'`)
+    .join(' | ')
+
+  const assetTypeUnion = components
+    .map(({ name }) => `${name}Asset`)
+    .join(' | ')
+
+  const illustrationNamesArray = components
+    .map(({ name }) => `'${name}'`)
+    .join(', ')
+
+  // Create the components map for lazy loading
+  const componentsMap = `{
+    ${components.map(({ name }) => `'${name}': () => import('./${name}')`).join(',\n    ')}
+  }`
+
+  // Generate statistics comment
+  const stats = generateStatsComment(components)
+
+  return `// AUTO-GENERATED FILE. DO NOT EDIT.
+${stats}
+
+// Re-export shared types
+export type {
+  IllustrationAsset,
+  IllustrationAssetBrand,
+  BaseSvgAsset,
+  BaseImageAsset
+} from './types'
+
+// Import all assets for union type
+${assetImports}
+
+/**
+ * Map of all illustrations with lazy loading
+ * Use this for dynamic imports of illustrations
+ */
+export const lazyIllustrationsMap = ${componentsMap}
+
+// Type exports
+${typeExports}
+
+/**
+ * Union of all available illustration names
+ */
+export type UnityIllustrationName = ${nameUnion}
+
+/**
+ * Union of all branded illustration asset types
+ * This prevents creation of fake illustration objects
+ */
+export type UnityIllustrationAsset = ${assetTypeUnion}
+
+/**
+ * Array of all available illustration names
+ * Useful for iteration or validation
+ */
+export const illustrationNames: readonly UnityIllustrationName[] = [${illustrationNamesArray}] as const
+`
+}
+
+/**
+ * Generates statistics comment for the index file
+ */
+function generateStatsComment(components: Component[]) {
+  const totalCount = components.length
+  const svgCount = components.filter(c => c.type === 'svg').length
+  const imageCount = components.filter(c => c.type === 'image').length
+  const animatedCount = components.filter(c => c.animated).length
+
+  const totalSizeBefore = components.reduce((sum, c) => sum + (c.sizeBefore || 0), 0)
+  const totalSizeAfter = components.reduce((sum, c) => sum + (c.sizeAfter || 0), 0)
+  const totalReduction = totalSizeBefore > 0
+    ? ((totalSizeBefore - totalSizeAfter) / totalSizeBefore * 100).toFixed(1)
+    : '0'
+
+  return `//
+// 📊 Generation Statistics:
+// - Total illustrations: ${totalCount}
+// - SVGs: ${svgCount}
+// - Images: ${imageCount}
+// - Animated: ${animatedCount}
+// - Size optimization: ${(totalSizeBefore / 1024).toFixed(1)}KB → ${(totalSizeAfter / 1024).toFixed(1)}KB (-${totalReduction}%)
+// - Generated: ${new Date().toISOString()}
+//`
+}

package/src/unity.css

@@ -0,0 +1,5 @@
+@import '@payfit/unity-themes/css/unity.css';
+
+/* BEGIN: @source */
+
+/* END: @source */

package/dist/cjs/index.js

@@ -1 +0,0 @@
-"use strict";

package/dist/esm/index.mjs

@@ -1 +0,0 @@
-