feat: add extract-code-connect package

packages/composites/package.json

@@ -54,6 +54,7 @@
     "scripts": {
         "build": "rimraf dist && rolldown -c rolldown.config.ts",
         "clean": "rimraf dist node_modules .turbo",
+        "figma:gen": "extract-code-connect",
         "lint": "eslint ./src",
         "test": "vitest --run --passWithNoTests",
         "test:coverage": "vitest --coverage --passWithNoTests",
@@ -79,6 +80,7 @@
         "@types/react": "catalog:",
         "@types/react-dom": "catalog:",
         "@vapor-ui/core": "workspace:^",
+        "@vapor-ui/extract-code-connect": "workspace:*",
         "@vitest/browser": "^3.2.7",
         "@vitest/coverage-v8": "^3.2.7",
         "eslint": "catalog:",

packages/composites/src/components/dialog/dialog.figma.ts

@@ -13,23 +13,21 @@ const popup = getProperties(instance, '(Popup)', {
 
 const header = getProperties(instance, '(Header)', {
     title: { kind: 'string', name: 'title' },
-    description: { kind: 'string', name: 'description' },
+    description: { kind: 'string', name: 'description', visibleWhen: '(has description)' },
 });
 
 const body = getProperties(instance, '(Body)', {
     children: { kind: 'slot', name: '(content)' },
 });
 
 const footer = getProperties(instance, '(Footer)', {
-    assistive: { kind: 'instance', name: 'Assistive' },
+    assistive: { kind: 'instance', name: 'Assistive', visibleWhen: '(has assistive)' },
     action: { kind: 'instance', name: 'Action' },
 });
 
 export default {
     example: figma.code`
         <Dialog.Root
-            // ariaLabels={} 닫기 버튼의 aria-label을 지정하세요.
-            // trigger={} 트리거 요소를 입력하세요.
             ${popup.size}
             ${header.title}
             ${header.description}

packages/composites/src/utils/figma-utils.ts

@@ -2,25 +2,18 @@ import figma from 'figma';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyProp = any;
+
 type PropSpec =
-    | { kind: 'string'; name: string }
-    | { kind: 'boolean'; name: string }
-    | { kind: 'slot'; name: string }
-    | { kind: 'enum'; name: string; options: Record<string, unknown> }
-    | { kind: 'instance'; name: string };
+    | { kind: 'string'; name: string; visibleWhen?: string }
+    | { kind: 'boolean'; name: string; visibleWhen?: string }
+    | { kind: 'slot'; name: string; visibleWhen?: string }
+    | { kind: 'enum'; name: string; options: Record<string, unknown>; visibleWhen?: string }
+    | { kind: 'instance'; name: string; visibleWhen?: string };
 
 /**
  * Descend into a nested INSTANCE child of `parent` by name.
  * Returns the INSTANCE ref (chainable into `getProperties` / `findChild`),
  * or `undefined` when the child is missing or not an INSTANCE.
- *
- * Use when a component is wrapped in an anatomy layer (e.g. `(Popup)` around
- * `(Header)` / `(Body)` / `(Footer)`) and you need to read properties from
- * the inner instances.
- *
- * @param parent        Parent instance/component to search inside.
- * @param instanceName  Direct-child instance name (e.g. '(Popup)').
- * @returns             Child INSTANCE ref, or `undefined`.
  */
 export function findChild(
     parent: AnyProp,
@@ -41,6 +34,8 @@ export function findChild(
  * Returns `undefined` when the value is missing (e.g. instance not found).
  */
 function readRawValue(target: AnyProp, spec: PropSpec): AnyProp {
+    if (spec.visibleWhen && target.getBoolean(spec.visibleWhen) === false) return;
+
     switch (spec.kind) {
         case 'string':
             return target.getString(spec.name);
@@ -63,31 +58,13 @@ function readRawValue(target: AnyProp, spec: PropSpec): AnyProp {
  * Read multiple properties from a nested INSTANCE inside `parent` and return
  * them **pre-rendered as JSX attribute fragments**, keyed by the code prop name.
  *
- * Each key in `specs` is the code prop name. Every non-`slot` value is rendered
- * with `figma.helpers.react.renderProp(key, value)`:
- *
- * - `undefined` / `''`      → `''` (attribute omitted — safe for optional props)
- * - `string`                → ` key="value"`
- * - `boolean`               → ` key` or `''`
- * - `ResultSection[]`       → ` key={<pill>}` (or fragment-wrapped when > 1)
- *
- * `slot` values are passed through `renderChildren` and stay raw so they can be
- * interpolated as element children.
- *
- * All keys are always present, so a missing target instance yields `''` for
- * every attribute instead of the literal string `undefined`.
- *
  * @example
  * const footer = getProperties(instance, '(Footer)', {
  *     assistive: { kind: 'instance', name: 'Assistive' },
  *     action: { kind: 'instance', name: 'Action' },
  * });
  * figma.code`<Dialog.Root${footer.assistive}${footer.action}>${body.children}</Dialog.Root>`;
  *
- * @param parent        Parent instance/component to search inside.
- * @param instanceName  Direct-child instance name (e.g. '(Header)').
- * @param specs         Map of code prop name → figma property descriptor.
- * @returns             Map of code prop name → rendered attribute (or raw slot).
  */
 export function getProperties<K extends string>(
     parent: AnyProp,

pnpm-workspace.yaml

@@ -3,6 +3,7 @@ packages:
     - packages/*
     - scripts/ts-api-extractor
     - scripts/sync-figma
+    - scripts/extract-code-connect
 
 # Unified React 19 for entire monorepo
 # Libraries (packages/*) maintain peerDependencies for React 17/18/19 compatibility