Merge pull request #298 from omnifed/295-feature-add-missing-icons-se…

…ctions-in-create-icons-script

295 feature add missing icons sections in create icons script

.gitignore

@@ -27,4 +27,5 @@ packages/*/styled-system-studio
 
 ## Figma
 
-figma/.env
+figma/.env
+figma/src/generated

figma/figma.config.json

@@ -3,13 +3,11 @@
     "parser": "react",
     "include": [
       "src/**/*.figma.tsx",
-      "src/components/**/*.tsx",
       "node_modules/@cerberus-design/*/src/**/*"
     ],
     "exclude": ["scripts"],
 
     "importPaths": {
-      "src/components/*": "@cerberus/react",
       "node_modules/@cerberus-design/icons/src/*": "@cerberus/icons",
       "node_modules/@cerberus-design/react/src/*": "@cerberus/react"
     },

figma/icons.config.json

@@ -0,0 +1,17 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "include": [
+      "src/generated/*.figma.tsx",
+      "node_modules/@cerberus-design/icons/src/**/*"
+    ],
+    "exclude": ["scripts"],
+
+    "importPaths": {
+      "node_modules/@cerberus-design/icons/src/*": "@cerberus/icons"
+    },
+    "paths": {
+      "@cerberus-design/icons": ["node_modules/@cerberus-design/icons/src/*"]
+    }
+  }
+}

figma/package.json

@@ -3,8 +3,11 @@
   "version": "1.0.0",
   "description": "The Figma Code Connect config for Cerberus Design",
   "scripts": {
+    "kill:icons": "rm -rf ./src/generated/icons.figma.tsx",
     "create:icons": "bun run ./scripts/create-icons.ts",
+    "generate:icons": "pnpm kill:icons && pnpm create:icons",
     "figma:publish": "exec figma connect publish",
+    "figma:publish:icons": "exec figma connect publish --config icons.config.json",
     "figma:sync": "bun run ./scripts/variables/sync-figma.ts",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -16,8 +19,8 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@figma/code-connect": "^1.0.2",
-    "@figma/rest-api-spec": "^0.15.0",
+    "@figma/code-connect": "^1.0.3",
+    "@figma/rest-api-spec": "^0.16.0",
     "@types/react": "^18",
     "dotenv": "^16.4.5"
   },

figma/scripts/create-icons.ts

@@ -1,6 +1,7 @@
 import { client } from '@figma/code-connect'
 import { write } from 'bun'
 import { resolve } from 'node:path'
+import { appendFile } from 'node:fs/promises'
 import { green } from './variables/utils'
 
 /**
@@ -17,29 +18,129 @@ const iconGroups = [
   'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9301-911&m=dev',
   // Controls
   'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9315-35054&m=dev',
+  // Data
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9359-322&m=dev',
+  // Design & Dev
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9381-11&m=dev',
+  // File
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9384-139&m=dev',
+  // Formatting
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9472-2&m=dev',
+  // Health
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9553-1938&m=dev',
+  // IBM
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9614-3177&m=dev',
+  // Instrument
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9617-2&m=dev',
   // Nav
   'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9018-8973&m=dev',
+  // Operational
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9601-2186&m=dev',
+  // Research
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9626-669&m=dev',
+  // Senses
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9632-3&m=dev',
+  // Social
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9656-349&m=dev',
+  // Status
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9266-589&m=dev',
+  // System
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9693-4&m=dev',
+  // Tech
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9622-244&m=dev',
+  // Time
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9619-3&m=dev',
+  // Toggle
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9602-36406&m=dev',
+  // Travel
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9455-852&m=dev',
+  // User
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9426-1626&m=dev',
+  // Weather
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9385-2&m=dev',
 ]
 
-function addUnderScoreBeforeNumber(name: string): string {
-  return name.replace(/([0-9]+)/g, '_$1')
+function addUnderscoreToNumber(name: string): string {
+  return correctIBMWeirdFormatting(name.replace(/([0-9]+)/g, '_$1'))
 }
 
-function makeComponentName(name: string): string {
-  return addUnderScoreBeforeNumber(
-    name
-      .split(/[.-]/g)
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-      .join(''),
+function shouldReplaceUnderscore(name: string): boolean {
+  return (
+    /(Db)|(HL)|(Mp)|(Mpg)|(QCu)|(QU)|(3D)|(3rd)_[0-9]/.test(name) ||
+    /Health_3rd/.test(name)
   )
 }
 
-function getIconTemplate(name: string, url: string): string {
+function correctIBMWeirdFormatting(name: string): string {
+  let formattedName = name
+
+  if (shouldReplaceUnderscore(name) && !/(Chart)|(Erase)_3D/.test(name)) {
+    formattedName = name.replace('_', '').replace('HL7', 'Hl7')
+  }
+
+  if (/QCu[0-9]/.test(formattedName) || /Q[C|I][z|d|y]/.test(formattedName)) {
+    formattedName = formattedName.toUpperCase()
+  }
+
+  return formattedName
+}
+
+function makePascalCase(name: string): string {
+  return name
+    .split(/[.-]/g)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
+
+function isNotWatsonHealth(name: string): boolean {
+  const lowerCaseName = name.toLowerCase()
+  return (
+    !lowerCaseName.includes('pills') &&
+    !lowerCaseName.includes('medication') &&
+    !lowerCaseName.includes('chemistry') &&
+    !lowerCaseName.includes('image--medical') &&
+    !lowerCaseName.includes('health-cross') &&
+    !lowerCaseName.includes('coronavirus') &&
+    !lowerCaseName.includes('exam-mode')
+  )
+}
+
+function getParams(rawUrl: string): URLSearchParams {
+  const url: URL = new URL(rawUrl)
+  return url.searchParams
+}
+
+function makeComponentName(name: string, rawUrl: string): string {
+  const nodeID = getParams(rawUrl).get('node-id') ?? ''
+  let formattedName = name
+
+  if (nodeID.includes('9553') && isNotWatsonHealth(name)) {
+    formattedName = `watson-health-${name}`
+  }
+
+  return addUnderscoreToNumber(
+    makePascalCase(formattedName)
+      .replace('4k', '4K')
+      .replace('2d', '2D')
+      .replace('3d', '3D'),
+  )
+}
+
+function getInitialTemplate(): string {
   return `
 import figma from '@figma/code-connect'
-import { ${name} } from '@cerberus-design/icons'
+import * as CerbIcons from '@cerberus-design/icons'
+
+/**
+ * This file was generated by the create-icons script.
+ * Do not modify this file directly or your changes will be overwritten.
+ **/
+  `
+}
 
-// This file was generated using the create:icons script
+function getIconTemplate(name: string, url: string): string {
+  return `
+const ${name} = CerbIcons['${name}']
 
 figma.connect(
   ${name},
@@ -65,35 +166,48 @@ figma.connect(
 async function getIcons() {
   try {
     const data = await Promise.all(
-      iconGroups.map(async (group) => await client.getComponents(group)),
+      iconGroups.map(async (group) => {
+        const data = await client.getComponents(group)
+        return data.map((component) => ({
+          ...component,
+          group,
+        }))
+      }),
     )
+    const flatData = data.flatMap((set) => set)
 
-    // Figma example: https://github.com/figma/code-connect/blob/main/cli/scripts/import-icons.ts
-
-    // Converts icon names from e.g `icon-32-list` to `Icon32List`
-    const components = data
-      .flatMap((group) => group)
-      .map((component) => ({
-        ...component,
-        name: makeComponentName(component.name),
-      }))
-
-    const uniqueNames = new Set([components.map((c) => c.name)])
     const iconsDirPath = resolve(
       import.meta.dir,
       '..', // scripts
       'src',
-      'icons',
+      'generated',
     )
 
+    // chunk out files so Figma doesn't get overwhelmed and 413
+    flatData.forEach(async (componentSet) => {
+      const group = getParams(componentSet.group).get('node-id') ?? ''
+      await write(
+        resolve(iconsDirPath, `${group}.figma.tsx`),
+        getInitialTemplate(),
+      )
+    })
+
+    // Converts icon names from e.g `icon-32-list` to `Icon32List`
+    const components = flatData.map((component) => ({
+      ...component,
+      name: makeComponentName(component.name, component.group),
+      group: getParams(component.group).get('node-id') ?? '',
+    }))
+
+    const uniqueNames = new Set([components.map((c) => c.name)])
+
     uniqueNames.forEach((componentName) => {
       componentName.forEach(async (name) => {
         const componentData = components.find((c) => c.name === name)
-        await write(
-          resolve(iconsDirPath, `${name}.figma.tsx`),
+        await appendFile(
+          resolve(iconsDirPath, `${componentData?.group}.figma.tsx`),
           getIconTemplate(name, componentData?.figmaUrl || ''),
         )
-        console.log(`Wrote ${name}`)
       })
     })