Merge pull request #271 from omnifed/270-feature-figma-fine-tuning-su…

…pport-pairing

270 feature figma fine tuning support pairing

figma/figma.config.json

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

figma/package.json

@@ -16,7 +16,7 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "@figma/code-connect": "^1.0.1",
+    "@figma/code-connect": "^1.0.2",
     "@figma/rest-api-spec": "^0.15.0",
     "@types/react": "^18",
     "dotenv": "^16.4.5"

figma/scripts/create-icons.ts

@@ -1,30 +1,107 @@
 import { client } from '@figma/code-connect'
+import { write } from 'bun'
+import { resolve } from 'node:path'
+import { green } from './variables/utils'
 
 /**
  * This module accepts a Figma Page URL and returns a list of components to
  * create a Code Connect file for each component.
  */
 
+const iconGroups = [
+  // Alphanumeric
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9269-768&m=dev',
+  // App Catalog
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9269-1202&m=dev',
+  // Commerce
+  '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',
+  // Nav
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9018-8973&m=dev',
+]
+
+function addUnderScoreBeforeNumber(name: string): string {
+  return 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 getIconTemplate(name: string, url: string): string {
+  return `
+import figma from '@figma/code-connect'
+import { ${name} } from '@cerberus-design/icons'
+
+// This file was generated using the create:icons script
+
+figma.connect(
+  ${name},
+  '${url}',
+
+  {
+    imports: ["import { ${name} } from '@cerberus/icons'"],
+    props: {
+      size: figma.enum('Size', {
+        sm: 16,
+        md: 20,
+        lg: 24,
+        xl: 32,
+      }),
+    },
+
+    example: (props) => <${name} size={props.size} />,
+  },
+)
+  `
+}
+
 async function getIcons() {
   try {
-    const components = await client.getComponents(
-      'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=2-14619&m=dev',
+    const data = await Promise.all(
+      iconGroups.map(async (group) => await client.getComponents(group)),
     )
 
-    console.log({
-      components,
-      properties: components.map(
-        ({ componentPropertyDefinitions }) => componentPropertyDefinitions,
-      ),
-    })
-
     // Figma example: https://github.com/figma/code-connect/blob/main/cli/scripts/import-icons.ts
 
-    // STEP 1: Get all the icons (should just be components)
+    // Converts icon names from e.g `icon-32-list` to `Icon32List`
+    const components = data
+      .flatMap((group) => group)
+      .map((component) => ({
+        ...component,
+        name: makeComponentName(component.name),
+      }))
 
-    // STEP 2: Create a new file for each icon [name].figma.tsx in the src/icons folder (using Bun)
+    const uniqueNames = new Set([components.map((c) => c.name)])
+    const iconsDirPath = resolve(
+      import.meta.dir,
+      '..', // scripts
+      'src',
+      'icons',
+    )
 
-    // Step 3. The contents should match the arrow-right.figma.tsx file
+    uniqueNames.forEach((componentName) => {
+      componentName.forEach(async (name) => {
+        const componentData = components.find((c) => c.name === name)
+        await write(
+          resolve(iconsDirPath, `${name}.figma.tsx`),
+          getIconTemplate(name, componentData?.figmaUrl || ''),
+        )
+        console.log(`Wrote ${name}`)
+      })
+    })
+
+    console.log(
+      green(
+        `✅ Tokens files have been written to the ${iconsDirPath} directory`,
+      ),
+    )
   } catch (error) {
     console.error(error)
   }

figma/src/components/Tooltip.tsx

@@ -0,0 +1,19 @@
+import type { PropsWithChildren } from 'react'
+
+/**
+ * This module is a fake Tooltip to prevent errors in Figma code connect
+ * publishing. It should support native elements, but it is not.
+ */
+
+interface TooltipProps {
+  position: 'top' | 'right' | 'bottom' | 'left'
+  text: string
+}
+
+export function Tooltip(props: PropsWithChildren<TooltipProps>) {
+  return (
+    <span aria-label={props.text} data-tooltip data-position={props.position}>
+      {props.children}
+    </span>
+  )
+}

figma/src/fieldMessage.figma.tsx

@@ -7,7 +7,7 @@ const SELECTION =
 const imports = ["import { FieldMessage } from '@cerberus/react'"]
 
 const props = {
-  text: figma.textContent('Text'),
+  text: figma.string('Text'),
 }
 
 figma.connect(FieldMessage, SELECTION, {

figma/src/input.figma.tsx

@@ -2,7 +2,7 @@ import figma from '@figma/code-connect'
 import { Input, Field } from '@cerberus-design/react'
 
 const SELECTION =
-  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=408-283&m=dev'
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9225-3775&m=dev'
 
 const imports = ["import { Field, Input } from '@cerberus/react'"]
 
@@ -18,20 +18,26 @@ const props = {
     invalid: 'invalid',
     warning: 'warning',
     disabled: 'disabled',
+    readonly: 'readonly',
   }),
-  label: figma.instance('Label'),
-  fieldMessage: figma.instance('FieldMessage'),
-  placeholder: figma.textContent('placeholder-text'),
+  required: figma.boolean('required'),
+  label: figma.children('Label'),
+  fieldMessage: figma.children('FieldMessage'),
+  placeholder: figma.string('placeholder-text'),
 }
 
 figma.connect(Input, SELECTION, {
   imports,
   props,
   example: (props) => {
     return (
-      <Field>
+      <Field required={props.required}>
         {props.label}
-        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        <Input
+          id="ADD_UUID"
+          placeholder={props.placeholder}
+          size={props.size}
+        />
         {props.fieldMessage}
       </Field>
     )
@@ -46,9 +52,13 @@ figma.connect(Input, SELECTION, {
   props,
   example: (props) => {
     return (
-      <Field>
+      <Field required={props.required}>
         {props.label}
-        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        <Input
+          id="ADD_UUID"
+          placeholder={props.placeholder}
+          size={props.size}
+        />
         {props.fieldMessage}
       </Field>
     )
@@ -63,9 +73,13 @@ figma.connect(Input, SELECTION, {
   props,
   example: (props) => {
     return (
-      <Field invalid>
+      <Field invalid required={props.required}>
         {props.label}
-        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        <Input
+          id="ADD_UUID"
+          placeholder={props.placeholder}
+          size={props.size}
+        />
         {props.fieldMessage}
       </Field>
     )
@@ -80,9 +94,13 @@ figma.connect(Input, SELECTION, {
   props,
   example: (props) => {
     return (
-      <Field disabled>
+      <Field disabled required={props.required}>
         {props.label}
-        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        <Input
+          id="ADD_UUID"
+          placeholder={props.placeholder}
+          size={props.size}
+        />
         {props.fieldMessage}
       </Field>
     )
@@ -92,14 +110,18 @@ figma.connect(Input, SELECTION, {
 figma.connect(Input, SELECTION, {
   imports,
   variant: {
-    required: 'True',
+    State: 'readonly',
   },
   props,
   example: (props) => {
     return (
-      <Field required>
+      <Field readOnly required={props.required}>
         {props.label}
-        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        <Input
+          id="ADD_UUID"
+          placeholder={props.placeholder}
+          size={props.size}
+        />
         {props.fieldMessage}
       </Field>
     )

figma/src/label.figma.tsx

@@ -2,18 +2,12 @@ import figma from '@figma/code-connect'
 import { Label } from '@cerberus-design/react'
 
 const SELECTION =
-  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9225-4221&m=dev'
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9333-1153&m=dev'
 
 const imports = ["import { Label } from '@cerberus/react'"]
 
 const props = {
-  state: figma.enum('State', {
-    required: 'required',
-    optional: 'optional',
-    disabled: 'disabled',
-    hidden: 'hidden',
-  }),
-  text: figma.textContent('text'),
+  text: figma.string('text'),
 }
 
 figma.connect(Label, SELECTION, {

figma/src/tooltip.figma.tsx

@@ -1,21 +1,26 @@
 import figma from '@figma/code-connect'
+import { Tooltip } from './components/Tooltip'
 
 const SELECTION =
   'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=1831-88823&m=dev'
 
+const imports = ['']
+
 const props = {
   position: figma.enum('Position', {
     top: 'top',
     right: 'right',
     bottom: 'bottom',
     left: 'left',
   }),
-  text: figma.textContent('text'),
+  text: figma.string('text'),
   icon: figma.children('*'),
 }
 
-figma.connect(SELECTION, {
+figma.connect(Tooltip, SELECTION, {
   props,
+  imports,
+
   example: (props) => {
     return (
       <span aria-label={props.text} data-tooltip data-position={props.position}>