@payfit/unity-illustrations 2.21.16 → 2.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-illustrations",
-  "version": "2.21.16",
+  "version": "2.22.0",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -39,7 +39,7 @@
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-themes": "2.21.16",
+    "@payfit/unity-themes": "2.22.0",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.3.3",
     "@storybook/addon-docs": "10.3.3",
@@ -58,7 +58,7 @@
     "vite": "7.1.12"
   },
   "peerDependencies": {
-    "@payfit/unity-themes": "2.21.16",
+    "@payfit/unity-themes": "2.22.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   }

package/src/scripts/generate-assets.ts

@@ -1,11 +1,19 @@
+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 } from './templates/assetTemplate'
 import { generateBaseTypes } from './templates/baseTypes'
 import { generateIndexFile } from './templates/indexTemplate'
@@ -15,6 +23,7 @@ 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 configPath = path.resolve('./.figma-sync.json')
 
 const verboseFromArg = process.argv.some(
   arg => arg === '--verbose' || arg === '-v',
@@ -226,6 +235,24 @@ async function processAsset(assetPath: string) {
   }
 }
 
+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) {
@@ -241,6 +268,11 @@ async function main() {
   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`)
@@ -256,6 +288,57 @@ async function main() {
     try {
       const component = await processAsset(assetPath)
 
+      // Validate optimized SVG against size guardrails
+      if (sizeGuardrails && component.type === 'svg') {
+        const optimizedContent = await fs.readFile(
+          component.optimizedPath,
+          'utf8',
+        )
+        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,
+        )
+
+        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}`)
+          }
+        }
+      }
+
       // Generate individual asset module
       const moduleContent = generateAssetModule(
         component.name,
@@ -338,6 +421,11 @@ async function main() {
   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) => {