Merge pull request #260 from omnifed/259-feature-input-code-connect-t…

…o-figma

259 feature input code connect to figma

figma/figma.config.json

@@ -2,19 +2,9 @@
   "codeConnect": {
     "parser": "react",
     "include": [
-      "src/**",
-      "node_modules/@cerberus/react/**",
-      "node_modules/@cerberus/icons/**"
+      "src/**/*.figma.tsx",
+      "node_modules/@cerberus-design/*/src/**/*"
     ],
-    "importPaths": {
-      "@cerberus-design/react": "@cerberus/react",
-      "@cerberus-design/icons": "@cerberus/icons",
-      "@cerberus-design/styled-system/*": "@cerberus/styled-system/*"
-    },
-    "paths": {
-      "@cerberus-design/react": "node_modules/@cerberus/react",
-      "@cerberus-design/icons": "node_modules/@cerberus/icons",
-      "@cerberus-design/styled-system/*": "node_modules/@cerberus/styled-system/*"
-    }
+    "exclude": ["scripts"]
   }
 }

figma/package.json

@@ -4,7 +4,7 @@
   "description": "The Figma Code Connect config for Cerberus Design",
   "scripts": {
     "create:icons": "bun run ./scripts/create-icons.ts",
-    "figma:publish": "npx figma connect publish",
+    "figma:publish": "exec figma connect publish",
     "figma:sync": "bun run ./scripts/variables/sync-figma.ts",
     "test": "echo \"Error: no test specified\" && exit 1"
   },

figma/scripts/create-icons.ts

@@ -18,6 +18,8 @@ async function getIcons() {
       ),
     })
 
+    // 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)
 
     // STEP 2: Create a new file for each icon [name].figma.tsx in the src/icons folder (using Bun)

figma/src/fieldMessage.figma.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect'
+import { FieldMessage } from '@cerberus-design/react'
+
+const SELECTION =
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9266-1663&m=dev'
+
+const imports = ["import { FieldMessage } from '@cerberus/react'"]
+
+const props = {
+  text: figma.textContent('Text'),
+}
+
+figma.connect(FieldMessage, SELECTION, {
+  imports,
+  props,
+  example: (props) => {
+    return <FieldMessage id="help:ADD_INPUT_ID">{props.text}</FieldMessage>
+  },
+})

figma/src/icons/add-icon.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect'
+import { Add } from '@cerberus-design/icons'
+
+figma.connect(
+  Add,
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9261-475&m=dev',
+
+  {
+    imports: ["import { Add } from '@cerberus/icons'"],
+    props: {
+      size: figma.enum('Size', {
+        sm: 16,
+        md: 20,
+        lg: 24,
+        xl: 32,
+      }),
+    },
+
+    example: (props) => <Add size={props.size} />,
+  },
+)

figma/src/icons/arrow-down-icon.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect'
+import { ArrowDown } from '@cerberus-design/icons'
+
+figma.connect(
+  ArrowDown,
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9266-1144&m=dev',
+
+  {
+    imports: ["import { ArrowDown } from '@cerberus/icons'"],
+    props: {
+      size: figma.enum('Size', {
+        sm: 16,
+        md: 20,
+        lg: 24,
+        xl: 32,
+      }),
+    },
+
+    example: (props) => <ArrowDown size={props.size} />,
+  },
+)

figma/src/icons/information-filled-icon.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect'
+import { InformationFilled } from '@cerberus-design/icons'
+
+figma.connect(
+  InformationFilled,
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9266-591&m=dev',
+
+  {
+    imports: ["import { InformationFilled } from '@cerberus/icons'"],
+    props: {
+      size: figma.enum('Size', {
+        sm: 16,
+        md: 20,
+        lg: 24,
+        xl: 32,
+      }),
+    },
+
+    example: (props) => <InformationFilled size={props.size} />,
+  },
+)

figma/src/icons/information-icon.figma.tsx

@@ -0,0 +1,21 @@
+import figma from '@figma/code-connect'
+import { Information } from '@cerberus-design/icons'
+
+figma.connect(
+  Information,
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=9266-590&m=dev',
+
+  {
+    imports: ["import { Information } from '@cerberus/icons'"],
+    props: {
+      size: figma.enum('Size', {
+        sm: 16,
+        md: 20,
+        lg: 24,
+        xl: 32,
+      }),
+    },
+
+    example: (props) => <Information size={props.size} />,
+  },
+)

figma/src/input.figma.tsx

@@ -0,0 +1,107 @@
+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'
+
+const imports = ["import { Field, Input } from '@cerberus/react'"]
+
+const props = {
+  size: figma.enum('Size', {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+  }),
+  // Figma specific
+  state: figma.enum('State', {
+    valid: 'valid',
+    invalid: 'invalid',
+    warning: 'warning',
+    disabled: 'disabled',
+  }),
+  label: figma.instance('Label'),
+  fieldMessage: figma.instance('FieldMessage'),
+  placeholder: figma.textContent('placeholder-text'),
+}
+
+figma.connect(Input, SELECTION, {
+  imports,
+  props,
+  example: (props) => {
+    return (
+      <Field>
+        {props.label}
+        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        {props.fieldMessage}
+      </Field>
+    )
+  },
+})
+
+figma.connect(Input, SELECTION, {
+  imports,
+  variant: {
+    State: 'valid',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Field>
+        {props.label}
+        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        {props.fieldMessage}
+      </Field>
+    )
+  },
+})
+
+figma.connect(Input, SELECTION, {
+  imports,
+  variant: {
+    State: 'invalid',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Field invalid>
+        {props.label}
+        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        {props.fieldMessage}
+      </Field>
+    )
+  },
+})
+
+figma.connect(Input, SELECTION, {
+  imports,
+  variant: {
+    State: 'disabled',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Field disabled>
+        {props.label}
+        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        {props.fieldMessage}
+      </Field>
+    )
+  },
+})
+
+figma.connect(Input, SELECTION, {
+  imports,
+  variant: {
+    required: 'True',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Field required>
+        {props.label}
+        <Input id="ADD_UUID" placeholder={props.placeholder} />
+        {props.fieldMessage}
+      </Field>
+    )
+  },
+})

figma/src/label.figma.tsx

@@ -0,0 +1,40 @@
+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'
+
+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'),
+}
+
+figma.connect(Label, SELECTION, {
+  imports,
+  props,
+  example: (props) => {
+    return <Label htmlFor="ADD_INPUT_ID">{props.text}</Label>
+  },
+})
+
+figma.connect(Label, SELECTION, {
+  imports,
+  variant: {
+    State: 'hidden',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Label htmlFor="ADD_INPUT_ID" hidden>
+        {props.text}
+      </Label>
+    )
+  },
+})

figma/src/tag.figma.tsx

@@ -0,0 +1,56 @@
+import figma from '@figma/code-connect'
+import { Tag } from '@cerberus-design/react'
+
+const SELECTION =
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=7228-19066&m=dev'
+
+const imports = ["import { Tag } from '@cerberus/react'"]
+
+const props = {
+  palette: figma.enum('Palette', {
+    neutral: 'neutral',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    danger: 'danger',
+  }),
+  shape: figma.enum('Shape', {
+    pill: 'pill',
+    rounded: 'rounded',
+  }),
+  usage: figma.enum('Usage', {
+    filled: 'filled',
+    outlined: 'outline',
+  }),
+  // Figma specific
+  text: figma.textContent('label'),
+  icon: figma.children('*'),
+}
+
+figma.connect(Tag, SELECTION, {
+  imports,
+  props,
+  example: (props) => {
+    return (
+      <Tag palette={props.palette} shape={props.shape} usage={props.usage}>
+        {props.text}
+      </Tag>
+    )
+  },
+})
+
+figma.connect(Tag, SELECTION, {
+  imports,
+  variant: {
+    'show icon': 'True',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Tag palette={props.palette} shape={props.shape} usage={props.usage}>
+        {props.icon}
+        {props.text}
+      </Tag>
+    )
+  },
+})

figma/src/tooltip.figma.tsx

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

figma/tsconfig.json

@@ -1,11 +1,5 @@
 {
   "extends": "../tsconfig.base.json",
-  "include": ["src/**/*.figma.tsx"],
-  "exclude": ["build", "node_modules"],
-
-  "compilerOptions": {
-    "paths": {
-      "@/*": ["./*"]
-    }
-  }
+  "include": ["src/**/*"],
+  "exclude": ["build", "node_modules"]
 }