Merge pull request #220 from omnifed/219-feature-setup-figma-code-con…

…nect

219 feature setup figma code connect

.github/workflows/publish-figma.yml

@@ -0,0 +1,29 @@
+name: 🚀 Publish to Figma
+
+on:
+  push:
+    paths:
+      - figma/src/**/*.figma.tsx
+    branches:
+      - main
+
+env:
+  CI: true
+  FIGMA_ACCESS_TOKEN: ${{ secrets.FIGMA_ACCESS_TOKEN }}
+
+jobs:
+  publish-npm-next:
+    runs-on: ubuntu-latest
+    name: Publish Figma Code Connect
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 9.1.4
+      - uses: actions/setup-node@v4
+        with:
+          cache: 'pnpm'
+
+      - run: pnpm install
+      - run: pnpm run figma:publish
+        working-directory: ./figma

.gitignore

@@ -23,4 +23,8 @@ packages/styled-system/helpers.mjs
 
 docs/styled-system
 packages/*/styled-system
-packages/*/styled-system-studio
+packages/*/styled-system-studio
+
+## Figma
+
+figma/.env

eslint.config.js

@@ -38,6 +38,7 @@ export default tseslint.config(
           './configs/tsconfig.json',
           './tests/tsconfig.json',
           './docs/tsconfig.json',
+          './figma/tsconfig.json',
         ],
         tsconfigRootDir: import.meta.dirname,
       },
@@ -89,6 +90,17 @@ export default tseslint.config(
     files: ['tests/**/*.ts', 'tests/**/*.tsx'],
   },
 
+  {
+    name: 'figma',
+    files: ['figma/**/*.ts', 'figma/**/*.tsx'],
+    plugins: {
+      react,
+    },
+    ...reactRecommended,
+    ...reactHooks.recommended,
+    rules: {},
+  },
+
   // this must be last
   eslintConfigPrettier,
 )

figma/figma.config.json

@@ -0,0 +1,18 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "include": [
+      "src/**",
+      "node_modules/@cerberus/react/**",
+      "node_modules/@cerberus/icons/**"
+    ],
+    "importPaths": {
+      "@cerberus-design/react": "@cerberus/react",
+      "@cerberus-design/icons": "@cerberus/icons"
+    },
+    "paths": {
+      "@cerberus-design/react": "node_modules/@cerberus/react",
+      "@cerberus-design/icons": "node_modules/@cerberus/icons"
+    }
+  }
+}

figma/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "figma",
+  "version": "1.0.0",
+  "description": "The Figma Code Connect config for Cerberus Design",
+  "scripts": {
+    "figma:publish": "npx figma connect publish",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "@cerberus-design/icons": "workspace:*",
+    "@cerberus-design/react": "workspace:*",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@figma/code-connect": "^1.0.1",
+    "@types/react": "^18"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

figma/src/button.figma.tsx

@@ -0,0 +1,72 @@
+import figma from '@figma/code-connect'
+import { Button } from '@cerberus-design/react'
+
+const SELECTION =
+  'https://www.figma.com/design/ducwqOCxoxcWc3ReV3FYd8/Digital-University-Component-Library?node-id=8637-3339&m=dev'
+
+const imports = ["import { Button } from '@cerberus/react'"]
+
+const props = {
+  palette: figma.enum('Palette', {
+    action: 'action',
+    danger: 'danger',
+  }),
+  shape: figma.enum('Shape', {
+    sharp: 'sharp',
+    rounded: 'rounded',
+  }),
+  usage: figma.enum('Usage', {
+    filled: 'filled',
+    outline: 'outline',
+    text: 'text',
+  }),
+  // Figma specific
+  text: figma.textContent('Action'),
+  icon: figma.children('*'),
+}
+
+figma.connect(Button, SELECTION, {
+  imports,
+  props,
+  example: (props) => {
+    return (
+      <Button palette={props.palette} shape={props.shape} usage={props.usage}>
+        {props.text}
+      </Button>
+    )
+  },
+})
+
+figma.connect(Button, SELECTION, {
+  imports,
+  variant: {
+    'Show Icon': 'True',
+    'Icon Position': 'start',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Button palette={props.palette} shape={props.shape} usage={props.usage}>
+        {props.icon}
+        {props.text}
+      </Button>
+    )
+  },
+})
+
+figma.connect(Button, SELECTION, {
+  imports,
+  variant: {
+    'Show Icon': 'True',
+    'Icon Position': 'end',
+  },
+  props,
+  example: (props) => {
+    return (
+      <Button palette={props.palette} shape={props.shape} usage={props.usage}>
+        {props.text}
+        {props.icon}
+      </Button>
+    )
+  },
+})

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

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

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

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

figma/tsconfig.json

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