Figma Code Connect PoC (#2469)

<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## Self Checklist

- [x] I wrote a PR title in **English** and added an appropriate
**label** to the PR.
- [x] I wrote the commit message in **English** and to follow [**the
Conventional Commits
specification**](https://www.conventionalcommits.org/en/v1.0.0/).
- [x] I [added the
**changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md)
about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated **documentation** related to the changes. (or
didn't have to)
- [x] I wrote or updated **tests** related to the changes. (or didn't
have to)
- [x] I tested the changes in various browsers. (or didn't have to)
  - Windows: Chrome, Edge, (Optional) Firefox
  - macOS: Chrome, Edge, Safari, (Optional) Firefox

## Related Issue

<!-- Please link to issue if one exists -->

- Fixes #2268 

## Summary

<!-- Please brief explanation of the changes made -->

<img width="450" alt="image"
src="https://github.com/user-attachments/assets/5d830846-841a-47c0-b58d-4aa2c9e98240">

Figma Code Connect를 도입/검증합니다. 

## Details

<!-- Please elaborate description of the changes -->

- figma code connect cli를 사용하여 설정 파일과 AlphaButton 컴포넌트 군을 code connect
합니다.
- code connect 파일이 변경된 커밋이 main 브랜치에 푸시되었을 경우 퍼블리시를 트리거하는 GitHub Action을
추가합니다. (토큰 환경변수로 추가함)
- 릴리즈 시점에 퍼블리시 워크플로우를 트리거하여야 불일치가 발생하지 않겠으나, 불일치가 문제가 될 케이스가 많지 않을 것이며
테스트 용이성을 고려해봤을 때 이 편이 좋겠다고 판단했습니다.
- 피그마 내의 GitHub 링크가 제 fork repository로 이동하는 문제가 있습니다. 제 PAT를 사용해서 그런건지,
remote origin(fork repository)을 바라보는 건지 모르겠어서 CI 트리거된 이후 체크해봐야할 거 같습니다.
- Icon의 경우 제대로 보이지 않는데, [아이콘별 Code Connect를 만드는 별도
처리](https://github.com/figma/code-connect/blob/main/docs/react.md#icons)가
필요합니다. 이는 추후에 별도 이슈로 다룹니다.

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

- https://github.com/figma/code-connect/blob/main/docs/react.md

.github/workflows/code-connect.yml

@@ -0,0 +1,15 @@
+name: Figma Code Connect
+
+on:
+  push:
+    paths:
+      - packages/bezier-react/src/components/**/*.figma.tsx
+    branches:
+      - main
+
+jobs:
+  code-connect:
+    name: Code Connect
+    runs-on: ubuntu-latest
+    steps:
+      - run: yarn workspace @channel.io/bezier-react code-connect

packages/bezier-react/figma.config.json

@@ -0,0 +1,9 @@
+{
+  "codeConnect": {
+    "parser": "react",
+    "include": ["/**/*.{tsx,jsx}"],
+    "importPaths": {
+      "src/components/*": "@channel.io/bezier-react"
+    }
+  }
+}

packages/bezier-react/jest.config.js

@@ -17,5 +17,9 @@ module.exports = {
   },
   collectCoverage: true,
   coveragePathIgnorePatterns: ['src/index.ts'],
-  collectCoverageFrom: ['**/*.{ts,tsx,js,jsx}', '!**/*.stories.tsx'],
+  collectCoverageFrom: [
+    '**/*.{ts,tsx,js,jsx}',
+    '!**/*.stories.tsx',
+    '!**/*.figma.tsx',
+  ],
 }

packages/bezier-react/package.json

@@ -48,7 +48,9 @@
     "prebuild": "yarn clean:build",
     "storybook": "storybook dev -p 4101",
     "build-storybook": "storybook build",
-    "chromatic": "chromatic --project-token=06157a6fbe6f"
+    "chromatic": "chromatic --project-token=06157a6fbe6f",
+    "code-connect": "figma connect publish",
+    "code-connect:create": "figma connect"
   },
   "keywords": [
     "design",
@@ -64,6 +66,7 @@
     "@babel/preset-typescript": "^7.23.3",
     "@channel.io/bezier-icons": "0.35.0",
     "@chromatic-com/storybook": "^1",
+    "@figma/code-connect": "^1.2.2",
     "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",

packages/bezier-react/src/components/AlphaButton/Button.figma.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import figma from '@figma/code-connect'
+
+import { Button as AlphaButton } from './Button'
+
+figma.connect(
+  AlphaButton,
+  'https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=112%3A5533',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 's',
+        xsmall: 'xs',
+        'medium (default)': 'm',
+        large: 'l',
+        xlarge: 'xl',
+      }),
+      text: figma.string('🔄 text'),
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+        tertiary: 'tertiary',
+      }),
+      color: figma.enum('color', {
+        blue: 'blue',
+        cobalt: 'cobalt',
+        red: 'red',
+        orange: 'orange',
+        green: 'green',
+        pink: 'pink',
+        purple: 'purple',
+        darkGrey: 'dark-grey',
+        lightGrey: 'light-grey',
+        'white (absolute)': 'white-absolute',
+      }),
+      /**
+       * TODO: Add Code Connect for Icon component
+       * @see {@link https://github.com/figma/code-connect/blob/main/cli/scripts/README.md}
+       */
+      prefixContent: figma.instance('↪ 🔄 prefixContent'),
+      suffixContent: figma.instance('↪ 🔄 suffixContent'),
+    },
+    example: (props) => (
+      <AlphaButton
+        size={props.size}
+        text={props.text}
+        variant={props.variant}
+        color={props.color}
+        prefixContent={props.prefixContent}
+        suffixContent={props.suffixContent}
+      />
+    ),
+  }
+)

packages/bezier-react/src/components/AlphaFloatingButton/FloatingButton.figma.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import figma from '@figma/code-connect'
+
+import { FloatingButton as AlphaFloatingButton } from './FloatingButton'
+
+figma.connect(
+  AlphaFloatingButton,
+  'https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=112%3A8172',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 's',
+        xsmall: 'xs',
+        'medium (default)': 'm',
+        large: 'l',
+        xlarge: 'xl',
+      }),
+      text: figma.string('🔄 text'),
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+      }),
+      color: figma.enum('color', {
+        blue: 'blue',
+        cobalt: 'cobalt',
+        red: 'red',
+        orange: 'orange',
+        green: 'green',
+        pink: 'pink',
+        purple: 'purple',
+        darkGrey: 'dark-grey',
+        lightGrey: 'light-grey',
+      }),
+      /**
+       * TODO: Add Code Connect for Icon component
+       * @see {@link https://github.com/figma/code-connect/blob/main/cli/scripts/README.md}
+       */
+      prefixContent: figma.instance('↪ 🔄 prefixContent'),
+      suffixContent: figma.instance('↪ 🔄 suffixContent'),
+    },
+    example: (props) => (
+      <AlphaFloatingButton
+        size={props.size}
+        text={props.text}
+        variant={props.variant}
+        color={props.color}
+        prefixContent={props.prefixContent}
+        suffixContent={props.suffixContent}
+      />
+    ),
+  }
+)

packages/bezier-react/src/components/AlphaFloatingIconButton/FloatingIconButton.figma.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import figma from '@figma/code-connect'
+
+import { FloatingIconButton as AlphaFloatingIconButton } from './FloatingIconButton'
+
+figma.connect(
+  AlphaFloatingIconButton,
+  'https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=112%3A9057',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 's',
+        xsmall: 'xs',
+        'medium (default)': 'm',
+        large: 'l',
+        xlarge: 'xl',
+      }),
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+      }),
+      color: figma.enum('color', {
+        blue: 'blue',
+        cobalt: 'cobalt',
+        red: 'red',
+        orange: 'orange',
+        green: 'green',
+        pink: 'pink',
+        purple: 'purple',
+        darkGrey: 'dark-grey',
+        lightGrey: 'light-grey',
+      }),
+      /**
+       * TODO: Add Code Connect for Icon component
+       * @see {@link https://github.com/figma/code-connect/blob/main/cli/scripts/README.md}
+       */
+      content: figma.instance('🔄 content'),
+    },
+    example: (props) => (
+      <AlphaFloatingIconButton
+        size={props.size}
+        variant={props.variant}
+        color={props.color}
+        content={props.content}
+      />
+    ),
+  }
+)

packages/bezier-react/src/components/AlphaIconButton/IconButton.figma.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+
+import figma from '@figma/code-connect'
+
+import { IconButton as AlphaIconButton } from './IconButton'
+
+figma.connect(
+  AlphaIconButton,
+  'https://www.figma.com/design/8J76noM3T1Sp5cNPhnYQiG/Action?node-id=112%3A6652',
+  {
+    props: {
+      size: figma.enum('size', {
+        small: 's',
+        xsmall: 'xs',
+        'medium (default)': 'm',
+        large: 'l',
+        xlarge: 'xl',
+      }),
+      variant: figma.enum('variant', {
+        primary: 'primary',
+        secondary: 'secondary',
+        tertiary: 'tertiary',
+      }),
+      color: figma.enum('color', {
+        blue: 'blue',
+        cobalt: 'cobalt',
+        red: 'red',
+        orange: 'orange',
+        green: 'green',
+        pink: 'pink',
+        purple: 'purple',
+        darkGrey: 'dark-grey',
+        lightGrey: 'light-grey',
+        'white (absolute)': 'white-absolute',
+      }),
+      shape: figma.enum('shape', {
+        circle: 'circle',
+        rectangle: 'rectangle',
+      }),
+      /**
+       * TODO: Add Code Connect for Icon component
+       * @see {@link https://github.com/figma/code-connect/blob/main/cli/scripts/README.md}
+       */
+      content: figma.instance('🔄 content'),
+    },
+    example: (props) => (
+      <AlphaIconButton
+        size={props.size}
+        variant={props.variant}
+        color={props.color}
+        content={props.content}
+        shape={props.shape}
+      />
+    ),
+  }
+)