@payfit/unity-illustrations 2.55.21 → 2.55.23

package/src/scripts/templates/assetTemplate.ts

@@ -1,224 +0,0 @@
-import path from 'path'
-
-/**
- * Generates a single asset module
- */
-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.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)
-  }
-}
-
-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,
-  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}${sourceComments ? `\n${sourceComments}` : ''}
-import defaultSvgUrl from '${relativePath}'${legacyImport}${rebrandImport}
-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/assets/${componentName}'
- *
- * <Illustration
- *   illustration={${componentName}}
- *   alt="${componentName} illustration"
- *   size="md"
- * />
- * \`\`\`
- */
-const ${componentName}: ${componentName}Asset = {
-  type: 'svg',
-  url: defaultSvgUrl,
-  urls: {
-    legacy: ${legacyUrl},
-    rebrand: ${rebrandUrl},
-  },
-  animated: false,
-  name: '${componentName}',
-} as ${componentName}Asset
-
-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/assets/${componentName}'
- *
- * <Illustration
- *   variant="picture"
- *   src={${componentName}}
- *   alt="${componentName.replace('Animation', '')} animation"
- * />
- * \`\`\`
- */
-const ${componentName}: ${componentName}Asset = {
-  type: 'image',
-  url: assetUrl,
-  urls: {
-    legacy: assetUrl,
-    rebrand: assetUrl,
-  },
-  animated: true,
-  dimensions: { width: ${dimensions.width}, height: ${dimensions.height} },
-  category: 'animation',
-  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/assets/${componentName}'
- *
- * <Illustration
- *   illustration={${componentName}}
- *   alt="${componentName} illustration"
- *   size="md"
- * />
- * \`\`\`
- */
-const ${componentName}: ${componentName}Asset = {
-  type: 'image',
-  url: assetUrl,
-  urls: {
-    legacy: assetUrl,
-    rebrand: assetUrl,
-  },
-  animated: ${animated},
-  name: '${componentName}',
-} as ${componentName}Asset
-
-export default ${componentName}
-`
-}

package/src/scripts/templates/baseTypes.ts

@@ -1,45 +0,0 @@
-/**
- * Generates the base types file content
- */
-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
-
-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
-}
-
-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 | BaseAnimatedImageAsset) & { readonly name: string }> =
-  T & IllustrationAssetBrand
-`
-}

package/src/scripts/templates/indexTemplate.ts

@@ -1,109 +0,0 @@
-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,
-  BaseAnimatedImageAsset
-} 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

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