@seed-design/figma 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "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.9",
+    "@seed-design/css": "0.1.10",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

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

@@ -37,7 +37,6 @@ export const createChipHandler = (ctx: ComponentHandlerDeps) => {
 
   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)
@@ -73,7 +72,7 @@ export const createChipHandler = (ctx: ComponentHandlerDeps) => {
       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,
       }),
     };

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

@@ -17,8 +17,6 @@ export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
         .with("Radio", () => "RadioSelectBoxItem")
         .exhaustive();
 
-      const states = props.State.value.split("-");
-
       const commonProps = {
         label: props["Label#3635:0"].value,
         ...(props["Show Description#3033:0"].value && {
@@ -28,7 +26,7 @@ export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
           value: props["Label#3635:0"].value,
         }),
         ...(tag === "CheckSelectBox" &&
-          states.includes("Selected") && {
+          props.Selected.value === "True" && {
             defaultChecked: true,
           }),
       };
@@ -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

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

@@ -10,15 +10,13 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SwitchProperties>(
     metadata.switch.key,
     ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
       const commonProps = {
         size: props.Size.value,
         label: props["Label#36578:0"].value,
-        ...(states.includes("Selected") && {
+        ...(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/frame.ts

@@ -3,7 +3,12 @@ import type {
   NormalizedFrameNode,
   NormalizedInstanceNode,
 } from "@/normalizer";
-import { cloneElement, defineElementTransformer, type ElementTransformer } from "../../core";
+import {
+  cloneElement,
+  createElement,
+  defineElementTransformer,
+  type ElementTransformer,
+} from "../../core";
 import { createSeedReactElement } from "./element-factories";
 import type { ContainerLayoutProps, PropsConverters } from "./props";
 
@@ -43,28 +48,34 @@ export function createFrameTransformer({
       };
 
       const isStretch = props.align === undefined || props.align === "stretch";
-      const processedChildren = isStretch
-        ? transformedChildren.map((child) =>
-            child ? cloneElement(child, { alignSelf: undefined }) : child,
-          )
-        : transformedChildren;
 
       const layoutComponent = inferLayoutComponent(props, isFlex);
 
-      if (layoutComponent === "VStack") {
-        const { direction, ...rest } = props;
+      const hasImageFill = node.fills.some(({ type }) => type === "IMAGE");
+      const imgElement = hasImageFill
+        ? createElement("img", {
+            src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`,
+          })
+        : undefined;
 
-        return createSeedReactElement("VStack", rest, processedChildren);
-      }
-
-      if (layoutComponent === "HStack") {
-        const { direction, ...rest } = props;
+      const processedChildren = [
+        imgElement,
+        ...(isStretch
+          ? transformedChildren.map((child) =>
+              child ? cloneElement(child, { alignSelf: undefined }) : child,
+            )
+          : transformedChildren),
+      ];
 
-        return createSeedReactElement("HStack", rest, processedChildren);
-      }
+      switch (layoutComponent) {
+        case "VStack":
+        case "HStack": {
+          const { direction: _direction, ...rest } = props;
 
-      if (layoutComponent === "Box") {
-        return createSeedReactElement("Box", props, processedChildren);
+          return createSeedReactElement(layoutComponent, rest, processedChildren);
+        }
+        case "Box":
+          return createSeedReactElement("Box", props, processedChildren);
       }
     },
   );

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(),

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

@@ -62,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

@@ -62,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";

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

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

package/src/entities/data/__generated__/component-sets/radio-mark.mjs

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

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

@@ -12,15 +12,19 @@ export declare const metadata: {
         "Large"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
-        "Disabled",
-        "Selected",
-        "Selected-Pressed",
-        "Selected-Disabled"
+        "Disabled"
       ]
     }
   }

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

@@ -12,15 +12,19 @@ export const metadata = {
         "Large"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
-        "Disabled",
-        "Selected",
-        "Selected-Pressed",
-        "Selected-Disabled"
+        "Disabled"
       ]
     }
   }

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

@@ -22,17 +22,20 @@ export declare const metadata: {
         "Small"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
         "Loading",
-        "Selected",
-        "Selected-Pressed",
-        "Selected-Loading",
-        "Disabled",
-        "Disabled-Selected"
+        "Disabled"
       ]
     }
   }

package/src/entities/data/__generated__/component-sets/reaction-button.mjs

@@ -22,17 +22,20 @@ export const metadata = {
         "Small"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
         "Pressed",
         "Loading",
-        "Selected",
-        "Selected-Pressed",
-        "Selected-Loading",
-        "Disabled",
-        "Disabled-Selected"
+        "Disabled"
       ]
     }
   }

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

@@ -18,13 +18,18 @@ export declare const metadata: {
         "Radio"
       ]
     },
+    "Selected": {
+      "type": "VARIANT",
+      "variantOptions": [
+        "True",
+        "False"
+      ]
+    },
     "State": {
       "type": "VARIANT",
       "variantOptions": [
         "Enabled",
-        "Pressed",
-        "Selected",
-        "Selected-Pressed"
+        "Pressed"
       ]
     }
   }