@payfit/unity-illustrations 1.1.0 → 1.2.0

package/src/scripts/generate-assets.ts

@@ -3,6 +3,7 @@ import path from 'path'
 
 import type { Config } from 'svgo'
 
+import imageSize from 'image-size'
 import { loadConfig, optimize } from 'svgo'
 
 import { generateAssetModule } from './templates/assetTemplate'
@@ -25,7 +26,8 @@ function toPascalCase(str: string) {
     .join('')
 }
 
-function getComponentName(filename: string) {
+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)
@@ -39,6 +41,14 @@ function getComponentName(filename: string) {
   if (bgMatch) {
     base += 'WithBackground'
   }
+
+  // Add Animation suffix for animated illustrations
+  const relativePath = path.relative(illustrationsSvgDir, filePath)
+  const folder = relativePath.split(path.sep)[0]
+  if (folder === 'animated-illustrations') {
+    base += 'Animation'
+  }
+
   return base
 }
 
@@ -56,16 +66,45 @@ async function getAllAssetFiles(dir: string) {
   return results
 }
 
-function getAssetType(filePath: string) {
+function getAssetTypeFromPath(filePath: string) {
+  const relativePath = path.relative(illustrationsSvgDir, filePath)
+  const folder = relativePath.split(path.sep)[0]
   const ext = path.extname(filePath).toLowerCase()
+
+  if (folder === '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,
+    }
+  }
+
+  if (folder === 'illustrated-icons') {
+    return { type: 'svg' as const, animated: false, category: 'icon' as const }
+  }
+
+  if (folder === 'illustrated-pictures') {
+    return {
+      type: 'svg' as const,
+      animated: false,
+      category: 'picture' as const,
+    }
+  }
+
+  // Fallback to extension-based detection for backward compatibility
   const animatedFormats = ['.gif', '.webp']
 
   if (ext === '.svg') {
-    return { type: 'svg', animated: false }
+    return { type: 'svg' as const, animated: false }
   }
 
   return {
-    type: 'image',
+    type: 'image' as const,
     animated: animatedFormats.includes(ext),
   }
 }
@@ -88,10 +127,29 @@ function optimizeSvg(svgContent: string, filePath: string, svgoConfig: Config) {
   }
 }
 
+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) {
   const assetFile = path.basename(assetPath)
-  const componentName = getComponentName(assetFile)
-  const assetType = getAssetType(assetPath)
+  const componentName = getComponentName(assetPath)
+  const assetType = getAssetTypeFromPath(assetPath)
   const svgoConfig = (await loadConfig()) ?? {}
 
   // Generate output path in the generated/assets folder
@@ -101,6 +159,7 @@ async function processAsset(assetPath: string) {
 
   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
@@ -121,17 +180,30 @@ async function processAsset(assetPath: string) {
     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})`,
-    )
+
+    // Extract dimensions for animated illustrations
+    if (assetType.category === 'animation') {
+      dimensions = await getImageDimensions(assetPath)
+      console.log(
+        `🎬 ${assetFile}: ${(sizeBefore / 1024).toFixed(2)}KB (animation ${
+          dimensions.width
+        }x${dimensions.height})`,
+      )
+    } else {
+      console.log(
+        `📦 ${assetFile}: ${(sizeBefore / 1024).toFixed(2)}KB (${
+          assetType.animated ? 'animated ' : ''
+        }${assetType.type})`,
+      )
+    }
   }
 
   return {
     name: componentName,
     type: assetType.type,
     animated: assetType.animated,
+    category: assetType.category,
+    dimensions,
     sizeBefore,
     sizeAfter,
     originalPath: assetPath,
@@ -172,8 +244,10 @@ async function main() {
         component.name,
         component.optimizedPath,
         {
-          type: component.type as 'svg' | 'image',
+          type: component.type,
           animated: component.animated,
+          category: component.category,
+          dimensions: component.dimensions,
         },
         component.originalFileName,
       )
@@ -226,9 +300,19 @@ async function main() {
   )
   console.log(`   - SVGs: ${components.filter(c => c.type === 'svg').length}`)
   console.log(
-    `   - Images: ${components.filter(c => c.type === 'image').length}`,
+    `   - 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}`,
   )
-  console.log(`   - Animated: ${components.filter(c => c.animated).length}`)
 }
 
 main().catch((err: unknown) => {

package/src/scripts/templates/assetTemplate.ts

@@ -3,11 +3,19 @@ import path from 'path'
 /**
  * Generates a single asset module
  */
-export function generateAssetModule(componentName: string, optimizedAssetPath: string, assetType: { type: 'svg' | 'image', animated: boolean }, originalFileName: string) {
+export function generateAssetModule(
+  componentName: string,
+  optimizedAssetPath: string,
+  assetType: { type: 'svg' | 'image', animated: boolean, category?: string, dimensions?: { width: number, height: number } },
+  originalFileName: string
+) {
   // Use relative path from the generated TypeScript file to the optimized asset
   const relativePath = `./assets/${path.basename(optimizedAssetPath)}`
 
-  if (assetType.type === 'svg') {
+  if (assetType.category === 'animation') {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    return generateAnimatedAsset(componentName, relativePath, originalFileName, assetType.dimensions!)
+  } else if (assetType.type === 'svg') {
     return generateSvgAsset(componentName, relativePath, originalFileName)
   } else {
     return generateImageAsset(componentName, relativePath, originalFileName, assetType.animated)
@@ -52,6 +60,51 @@ export default ${componentName}
 `
 }
 
+/**
+ * Generates animated asset module
+ */
+function generateAnimatedAsset(
+  componentName: string,
+  relativePath: string,
+  originalFileName: string,
+  dimensions: { width: number, height: number }
+) {
+  return `// AUTO-GENERATED FILE. DO NOT EDIT.
+// Source: ${originalFileName} (Animated WEBP - ${dimensions.width}x${dimensions.height})
+import assetUrl from '${relativePath}'
+import type { IllustrationAsset, BaseAnimatedImageAsset } from './types'
+
+export type ${componentName}Asset = IllustrationAsset<BaseAnimatedImageAsset & {
+  readonly name: '${componentName}'
+}>
+
+/**
+ * ${componentName} animated illustration asset (${dimensions.width}x${dimensions.height})
+ * @example
+ * \`\`\`tsx
+ * import { Illustration } from '@payfit/unity-illustrations'
+ * import ${componentName} from '@payfit/unity-illustrations/${componentName}'
+ *
+ * <Illustration
+ *   variant="picture"
+ *   src={${componentName}}
+ *   alt="${componentName.replace('Animation', '')} animation"
+ * />
+ * \`\`\`
+ */
+const ${componentName}: ${componentName}Asset = {
+  type: 'image',
+  url: assetUrl,
+  animated: true,
+  dimensions: { width: ${dimensions.width}, height: ${dimensions.height} },
+  category: 'animation',
+  name: '${componentName}',
+} as ${componentName}Asset
+
+export default ${componentName}
+`
+}
+
 /**
  * Generates image asset module
  */

package/src/scripts/templates/baseTypes.ts

@@ -24,8 +24,17 @@ export interface BaseImageAsset {
   readonly animated: boolean
 }
 
+export interface BaseAnimatedImageAsset extends BaseImageAsset {
+  readonly animated: true
+  readonly dimensions: {
+    readonly width: number
+    readonly height: number
+  }
+  readonly category: 'animation'
+}
+
 // Branded wrapper type
-export type IllustrationAsset<T extends (BaseSvgAsset | BaseImageAsset) & { readonly name: string }> =
+export type IllustrationAsset<T extends (BaseSvgAsset | BaseImageAsset | BaseAnimatedImageAsset) & { readonly name: string }> =
   T & IllustrationAssetBrand
 `
 }

package/src/scripts/templates/indexTemplate.ts

@@ -47,7 +47,8 @@ export type {
   IllustrationAsset,
   IllustrationAssetBrand,
   BaseSvgAsset,
-  BaseImageAsset
+  BaseImageAsset,
+  BaseAnimatedImageAsset
 } from './types'
 
 // Import all assets for union type