@seed-design/figma 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -38,7 +38,7 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@seed-design/css": "0.1.8",
+    "@seed-design/css": "0.1.10",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

package/src/codegen/component-properties.ts

@@ -111,6 +111,14 @@ export type ChipProperties = InferComponentDefinition<
   typeof metadata.chip.componentPropertyDefinitions
 >;
 
+export type ChipIconSuffixProperties = InferComponentDefinition<{
+  "Icon#33203:0": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:23250";
+    preferredValues: [];
+  };
+}>;
+
 export type ContextualFloatingButtonProperties = InferComponentDefinition<
   typeof metadata.contextualFloatingButton.componentPropertyDefinitions
 >;

package/src/codegen/targets/figma/props.ts

@@ -59,7 +59,7 @@ export function createContainerLayoutPropsConverter(
       props: {} as ContainerLayoutProps,
     },
     handlers: {
-      layoutMode: ({ layoutMode }) => layoutMode ?? "NONE",
+      layoutMode: ({ layoutMode }) => (!layoutMode || layoutMode === "GRID" ? "NONE" : layoutMode),
       primaryAxisAlignItems: ({ primaryAxisAlignItems }) => primaryAxisAlignItems,
       counterAxisAlignItems: ({ counterAxisAlignItems }) => counterAxisAlignItems,
       layoutWrap: ({ layoutWrap }) => layoutWrap,

package/src/codegen/targets/react/component/handlers/avatar-stack.ts

@@ -11,20 +11,25 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("avatar");
 export const createAvatarStackHandler = (ctx: ComponentHandlerDeps) => {
   const avatarHandler = createAvatarHandler(ctx);
 
-  return defineComponentHandler<AvatarStackProperties>(metadata.avatarStack.key, (node) => {
-    const avatarNodes = findAllInstances<AvatarProperties>({
-      node,
-      key: avatarHandler.key,
-    });
+  return defineComponentHandler<AvatarStackProperties>(
+    metadata.avatarStack.key,
+    (node, traverse) => {
+      const avatarNodes = findAllInstances<AvatarProperties>({
+        node,
+        key: avatarHandler.key,
+      });
 
-    const { componentProperties: props } = node;
+      const { componentProperties: props } = node;
 
-    const commonProps = {
-      size: props.Size.value,
-    };
+      const commonProps = {
+        size: props.Size.value,
+      };
 
-    const avatarStackChildren = avatarNodes.map(avatarHandler.transform);
+      const avatarStackChildren = avatarNodes.map((avatarNode) =>
+        avatarHandler.transform(avatarNode, traverse),
+      );
 
-    return createLocalSnippetElement("AvatarStack", commonProps, avatarStackChildren);
-  });
+      return createLocalSnippetElement("AvatarStack", commonProps, avatarStackChildren);
+    },
+  );
 };

package/src/codegen/targets/react/component/handlers/checkbox.ts

@@ -12,21 +12,19 @@ export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<CheckboxProperties>(
     metadata.checkbox.key,
     ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
       const commonProps = {
         label: props["Label#49990:0"].value,
         weight: camelCase(props.Weight.value),
         variant: camelCase(props.Shape.value),
         size: handleSizeProp(props.Size.value),
-        ...(states.includes("Selected") && {
+        ...(props.Selected.value === "True" && {
           defaultChecked: true,
         }),
-        ...(states.includes("Indeterminate") && {
+        ...(props.Selected.value === "Indeterminate" && {
           defaultChecked: true,
           indeterminate: true,
         }),
-        ...(states.includes("Disabled") && {
+        ...(props.State.value === "Disabled" && {
           disabled: true,
         }),
       };

package/src/codegen/targets/react/component/handlers/chip.ts

@@ -1,8 +1,12 @@
-import type { AvatarProperties, ChipProperties } from "@/codegen/component-properties";
+import type {
+  AvatarProperties,
+  ChipIconSuffixProperties,
+  ChipProperties,
+} from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
-import { createLocalSnippetHelper } from "../../element-factories";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 import { camelCase } from "change-case";
@@ -11,12 +15,28 @@ import { createAvatarHandler } from "@/codegen/targets/react/component/handlers/
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("chip");
 
+const CHIP_ICON_SUFFIX_KEY = "27343e0e5ab2c66948e9b10fde03d58b5e037212";
+const createChipIconSuffixHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ChipIconSuffixProperties>(
+    CHIP_ICON_SUFFIX_KEY,
+    ({ componentProperties }) => {
+      return createLocalSnippetElement(
+        "Chip.SuffixIcon",
+        undefined,
+        createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"]),
+        }),
+      );
+    },
+  );
+};
+
 export const createChipHandler = (ctx: ComponentHandlerDeps) => {
   const avatarHandler = createAvatarHandler(ctx);
+  const iconSuffixHandler = createChipIconSuffixHandler(ctx);
 
   return defineComponentHandler<ChipProperties>(metadata.chip.key, (node, traverse) => {
     const props = node.componentProperties;
-    const states = props.State.value.split("-");
 
     const prefix = match(props["Prefix Type"].value)
       .with("None", "Image", () => undefined)
@@ -24,7 +44,9 @@ export const createChipHandler = (ctx: ComponentHandlerDeps) => {
         createLocalSnippetElement(
           "Chip.PrefixIcon",
           undefined,
-          ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
+          createSeedReactElement("Icon", {
+            svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
+          }),
         ),
       )
       .with("Avatar", () => {
@@ -39,19 +61,18 @@ export const createChipHandler = (ctx: ComponentHandlerDeps) => {
       })
       .exhaustive();
 
-    const suffix = props["Has Suffix#32538:181"].value
-      ? createLocalSnippetElement(
-          "Chip.SuffixIcon",
-          undefined,
-          ctx.iconHandler.transform(props["Suffix Type#32538:0"]),
-        )
-      : undefined;
+    const label = createLocalSnippetElement("Chip.Label", undefined, props["Label#7185:0"].value);
+
+    const [suffixIcon] = findAllInstances<ChipIconSuffixProperties>({
+      node,
+      key: CHIP_ICON_SUFFIX_KEY,
+    });
 
     const commonProps = {
       variant: camelCase(props.Variant.value),
       size: handleSizeProp(props.Size.value),
       layout: props["Label#7185:0"].value ? "withText" : "iconOnly",
-      ...(states.includes("Disabled") && {
+      ...(props.State.value === "Disabled" && {
         disabled: true,
       }),
     };
@@ -59,8 +80,8 @@ export const createChipHandler = (ctx: ComponentHandlerDeps) => {
     return createLocalSnippetElement(
       "Chip.Button",
       commonProps,
-      [prefix, props["Label#7185:0"].value, suffix],
-      { comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로도 사용할 수 있습니다." },
+      [prefix, label, suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined],
+      { comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로 바꿔 사용하세요." },
     );
   });
 };

package/src/codegen/targets/react/component/handlers/identity-placeholder.ts

@@ -1,11 +1,13 @@
 import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import { camelCase } from "change-case";
-import { createSeedReactElement } from "../../element-factories";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
 const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("identity-placeholder");
+
 export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<IdentityPlaceholderProperties>(
     IDENTITY_PLACEHOLDER_KEY,
@@ -14,6 +16,6 @@ export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
         identity: camelCase(props.Identity.value),
       };
 
-      return createSeedReactElement("IdentityPlaceholder", commonProps);
+      return createLocalSnippetElement("IdentityPlaceholder", commonProps);
     },
   );

package/src/codegen/targets/react/component/handlers/manner-temp.ts

@@ -4,7 +4,7 @@ import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
-const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp-badge");
+const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp");
 
 export const createMannerTempHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MannerTempProperties>(metadata.mannerTemp.key, ({ children }) => {

package/src/codegen/targets/react/component/handlers/progress-circle.ts

@@ -45,7 +45,7 @@ export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
         minValue,
         maxValue,
         size: props.Size.value,
-        ...(props.Tone.value !== "Custom" && {
+        ...(props.Tone.value !== "Custom(inherit)" && {
           tone: camelCase(props.Tone.value),
         }),
       };

package/src/codegen/targets/react/component/handlers/reaction-button.ts

@@ -11,17 +11,15 @@ export const createReactionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ReactionButtonProperties>(
     metadata.reactionButton.key,
     ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
       const commonProps = {
         size: handleSizeProp(props.Size.value),
-        ...(states.includes("Loading") && {
+        ...(props.State.value === "Loading" && {
           loading: true,
         }),
-        ...(states.includes("Disabled") && {
+        ...(props.State.value === "Disabled" && {
           disabled: true,
         }),
-        ...(states.includes("Selected") && {
+        ...(props.Selected.value === "True" && {
           defaultPressed: true,
         }),
       };

package/src/codegen/targets/react/component/handlers/select-box.ts

@@ -14,21 +14,19 @@ export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
     ({ componentProperties: props }) => {
       const tag = match(props.Control.value)
         .with("Checkbox", () => "CheckSelectBox")
-        .with("Radio", () => "RadioSelectBox")
+        .with("Radio", () => "RadioSelectBoxItem")
         .exhaustive();
 
-      const states = props.State.value.split("-");
-
       const commonProps = {
         label: props["Label#3635:0"].value,
         ...(props["Show Description#3033:0"].value && {
           description: props["Description #3033:5"].value,
         }),
-        ...(tag === "RadioSelectBox" && {
+        ...(tag === "RadioSelectBoxItem" && {
           value: props["Label#3635:0"].value,
         }),
         ...(tag === "CheckSelectBox" &&
-          states.includes("Selected") && {
+          props.Selected.value === "True" && {
             defaultChecked: true,
           }),
       };
@@ -47,7 +45,7 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
 
       const tag = match(props.Control.value)
         .with("Checkbox", () => "CheckSelectBoxGroup")
-        .with("Radio", () => "RadioSelectBoxGroup")
+        .with("Radio", () => "RadioSelectBoxRoot")
         .exhaustive();
 
       const selectBoxes = findAllInstances<SelectBoxProperties>({
@@ -56,7 +54,7 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
       });
 
       const selectedSelectBox = selectBoxes.find((selectBox) =>
-        selectBox.componentProperties.State.value.split("-").includes("Selected"),
+        selectBox.componentProperties.Selected.value === "True",
       );
 
       // traverse the container like it's a frame
@@ -69,7 +67,7 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
       );
 
       const commonProps = {
-        ...(tag === "RadioSelectBoxGroup" && {
+        ...(tag === "RadioSelectBoxRoot" && {
           defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value,
         }),
       };

package/src/codegen/targets/react/component/handlers/switch.ts

@@ -3,7 +3,6 @@ import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
 
@@ -11,19 +10,13 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SwitchProperties>(
     metadata.switch.key,
     ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
-      const size = handleSizeProp(props.Size.value);
-
       const commonProps = {
-        size,
-        ...(size === "small" && {
-          label: props["Label#15191:2"].value,
-        }),
-        ...(states.includes("Selected") && {
+        size: props.Size.value,
+        label: props["Label#36578:0"].value,
+        ...(props.Selected.value === "True" && {
           defaultChecked: true,
         }),
-        ...(states.includes("Disabled") && {
+        ...(props.State.value === "Disabled" && {
           disabled: true,
         }),
       };

package/src/codegen/targets/react/component/handlers/toggle-button.ts

@@ -12,18 +12,16 @@ export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ToggleButtonProperties>(
     metadata.toggleButton.key,
     ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
       const commonProps = {
         variant: camelCase(props.Variant.value),
         size: handleSizeProp(props.Size.value),
-        ...(states.includes("Selected") && {
+        ...(props.Selected.value === "True" && {
           defaultPressed: true,
         }),
-        ...(states.includes("Disabled") && {
+        ...(props.State.value === "Disabled" && {
           disabled: true,
         }),
-        ...(states.includes("Loading") && {
+        ...(props.State.value === "Loading" && {
           loading: true,
         }),
       };

package/src/codegen/targets/react/instance.ts

@@ -37,7 +37,21 @@ export function createInstanceTransformer({
       : componentHandlers[componentKey];
 
     if (componentHandler) {
-      return componentHandler.transform(node, traverse);
+      const handled = componentHandler.transform(node, traverse);
+
+      if (node.overrides && node.overrides.length > 0) {
+        const overriddenFields = node.overrides.flatMap(({ overriddenFields }) => overriddenFields);
+
+        return {
+          ...handled,
+          meta: {
+            ...handled.meta,
+            comment: `${handled.meta.comment ? `${handled.meta.comment} ` : ""}오버라이드된 필드: ${overriddenFields.join(", ")}`,
+          },
+        };
+      }
+
+      return handled;
     }
 
     return frameTransformer(node, traverse);

package/src/codegen/targets/react/props.ts

@@ -67,6 +67,7 @@ export function createContainerLayoutPropsConverter(
         match(layoutMode)
           .with("HORIZONTAL", () => "row" as const)
           .with("VERTICAL", () => "column" as const)
+          .with("GRID", () => undefined)
           .with("NONE", () => undefined)
           .with(undefined, () => undefined)
           .exhaustive(),
@@ -143,7 +144,7 @@ export function createContainerLayoutPropsConverter(
 }
 
 export interface SelfLayoutProps {
-  grow?: 0 | 1 | true;
+  flexGrow?: 0 | 1 | true;
   alignSelf?: "stretch";
   width?: string | number;
   height?: string | number;
@@ -162,7 +163,7 @@ export function createSelfLayoutPropsConverter(
       props: {} as SelfLayoutProps,
     },
     handlers: {
-      grow: ({ layoutGrow }) => (layoutGrow === 1 ? true : layoutGrow),
+      flexGrow: ({ layoutGrow }) => (layoutGrow === 1 ? true : layoutGrow),
       alignSelf: ({ layoutAlign }) =>
         match(layoutAlign)
           .with("STRETCH", () => "stretch" as const)
@@ -198,7 +199,7 @@ export function createSelfLayoutPropsConverter(
           : undefined,
     },
     defaults: {
-      grow: 0,
+      flexGrow: 0,
     },
   });
 }
@@ -371,7 +372,7 @@ export function createVectorChildrenFillPropsConverter(valueResolver: ReactValue
 }
 
 export interface StrokeProps {
-  borderWidth?: number;
+  borderWidth?: string;
   borderColor?: string;
 }
 
@@ -380,7 +381,7 @@ export function createStrokePropsConverter(
 ): PropsConverter<StrokeTrait, StrokeProps> {
   return definePropsConverter((node) => {
     const borderColor = valueResolver.getFormattedValue.stroke(node);
-    const borderWidth = borderColor ? node.strokeWeight : undefined;
+    const borderWidth = borderColor && node.strokeWeight ? `${node.strokeWeight}` : undefined;
 
     return {
       borderColor,

package/src/entities/data/__generated__/component-sets/checkbox.d.ts

@@ -26,18 +26,20 @@ export declare const metadata: {
         "Stronger"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False",
+        "Indeterminate"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
-        "Disabled",
-        "Selected",
-        "Selected-Pressed",
-        "Selected-Disabled",
-        "Indeterminate",
-        "Indeterminate-Pressed",
-        "Indeterminate-Disabled"
+        "Disabled"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/checkbox.mjs

@@ -26,18 +26,20 @@ export const metadata = {
         "Stronger"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False",
+        "Indeterminate"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
-        "Disabled",
-        "Selected",
-        "Selected-Pressed",
-        "Selected-Disabled",
-        "Indeterminate",
-        "Indeterminate-Pressed",
-        "Indeterminate-Disabled"
+        "Disabled"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/checkmark.d.ts

@@ -16,18 +16,20 @@ export declare const metadata: {
         "Large"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False",
+        "Indeterminate"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
-        "Selected",
-        "Selected-Pressed",
-        "Indeterminate",
-        "Indeterminate-Pressed",
-        "Disabled",
-        "Disabled-Selected",
-        "Disabled-Indeterminate"
+        "Disabled"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/checkmark.mjs

@@ -16,18 +16,20 @@ export const metadata = {
         "Large"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False",
+        "Indeterminate"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
-        "Selected",
-        "Selected-Pressed",
-        "Indeterminate",
-        "Indeterminate-Pressed",
-        "Disabled",
-        "Disabled-Selected",
-        "Disabled-Indeterminate"
+        "Disabled"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/chip.d.ts

@@ -36,6 +36,10 @@ export declare const metadata: {
         {
           "type": "COMPONENT_SET",
           "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6"
+        },
+        {
+          "type": "COMPONENT_SET",
+          "key": "19923052d4152393ecdc6e2f5853ea0359849127"
         }
       ]
     },
@@ -58,19 +62,19 @@ export declare const metadata: {
         "Small"
       ]
     },
-    "State": {
+    "Selected": {
       "type": "VARIANT",
       "variantOptions": [
-        "Enabled",
-        "Pressed",
-        "Disabled"
+        "False",
+        "True"
       ]
     },
-    "Selected": {
+    "State": {
       "type": "VARIANT",
       "variantOptions": [
-        "False",
-        "True"
+        "Enabled",
+        "Pressed",
+        "Disabled"
       ]
     },
     "Prefix Type": {

package/src/entities/data/__generated__/component-sets/chip.mjs

@@ -36,6 +36,10 @@ export const metadata = {
         {
           "type": "COMPONENT_SET",
           "key": "df43b92004c850e7c6d2869e7a4ba1ef9a2d7db6"
+        },
+        {
+          "type": "COMPONENT_SET",
+          "key": "19923052d4152393ecdc6e2f5853ea0359849127"
         }
       ]
     },
@@ -58,19 +62,19 @@ export const metadata = {
         "Small"
       ]
     },
-    "State": {
+    "Selected": {
       "type": "VARIANT",
       "variantOptions": [
-        "Enabled",
-        "Pressed",
-        "Disabled"
+        "False",
+        "True"
       ]
     },
-    "Selected": {
+    "State": {
       "type": "VARIANT",
       "variantOptions": [
-        "False",
-        "True"
+        "Enabled",
+        "Pressed",
+        "Disabled"
       ]
     },
     "Prefix Type": {

package/src/entities/data/__generated__/component-sets/index.d.ts

@@ -40,6 +40,7 @@ export { metadata as selectBox } from "./select-box";
 export { metadata as skeleton } from "./skeleton";
 export { metadata as slider } from "./slider";
 export { metadata as snackbar } from "./snackbar";
+export { metadata as superscriptChild } from "./superscript-child";
 export { metadata as switch } from "./switch";
 export { metadata as tabs } from "./tabs";
 export { metadata as textField } from "./text-field";

package/src/entities/data/__generated__/component-sets/index.mjs

@@ -40,6 +40,7 @@ export { metadata as selectBox } from "./select-box.mjs";
 export { metadata as skeleton } from "./skeleton.mjs";
 export { metadata as slider } from "./slider.mjs";
 export { metadata as snackbar } from "./snackbar.mjs";
+export { metadata as superscriptChild } from "./superscript-child.mjs";
 export { metadata as switch } from "./switch.mjs";
 export { metadata as tabs } from "./tabs.mjs";
 export { metadata as textField } from "./text-field.mjs";