@seed-design/figma 1.1.9 → 1.1.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.1.9",
+  "version": "1.1.12",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,14 +39,14 @@
     "sync-entities": "rm -rf src/entities/data/__generated__ && bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.1.9",
+    "@seed-design/css": "1.1.12",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },
   "devDependencies": {
     "@figma/plugin-typings": "^1.110.0",
     "@figma/rest-api-spec": "^0.34.0",
-    "@karrotmarket/icon-data": "^1.6.0",
+    "@karrotmarket/icon-data": "^1.13.0",
     "@seed-design/figma-extractor": "^1.0.0",
     "typescript": "^5.9.2"
   },

package/src/codegen/component-properties.ts

@@ -76,10 +76,6 @@ export type DividerProperties = InferComponentDefinition<
   typeof sets.divider.componentPropertyDefinitions
 >;
 
-export type ErrorStateProperties = InferComponentDefinition<
-  typeof sets.templateErrorState.componentPropertyDefinitions
->;
-
 export type FieldHeaderProperties = InferComponentDefinition<{
   "Label#34796:0": {
     type: "TEXT";
@@ -321,6 +317,10 @@ export type ReactionButtonProperties = InferComponentDefinition<
   typeof sets.reactionButton.componentPropertyDefinitions
 >;
 
+export type ResultSectionProperties = InferComponentDefinition<
+  typeof sets.templateResultSection.componentPropertyDefinitions
+>;
+
 export type SegmentedControlProperties = InferComponentDefinition<
   typeof sets.segmentedControl.componentPropertyDefinitions
 >;

package/src/codegen/targets/react/component/handlers/alert-dialog.ts

@@ -1,5 +1,7 @@
 import { defineComponentHandler } from "@/codegen/core";
 import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
   AlertDialogFooterProperties,
   AlertDialogProperties,
 } from "@/codegen/component-properties";
@@ -8,6 +10,10 @@ import { createLocalSnippetHelper, createSeedReactElement } from "../../element-
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { findAllInstances } from "@/utils/figma-node";
 import { match } from "ts-pattern";
+import {
+  createActionButtonGhostHandler,
+  createActionButtonHandler,
+} from "@/codegen/targets/react/component/handlers/action-button";
 
 const { createLocalSnippetElement } = createLocalSnippetHelper("alert-dialog");
 const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
@@ -15,67 +21,102 @@ const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
 
 const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
 
-export const createAlertDialogHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<AlertDialogProperties>(metadata.alertDialog.key, (node, traverse) => {
-    const props = node.componentProperties;
-    const alertDialogHeader = createLocalSnippetElement("AlertDialogHeader", undefined, [
-      ...(props["Show Title#20361:14"].value
-        ? [
-            createLocalSnippetElement(
-              "AlertDialogTitle",
-              undefined,
-              props["Title Text#20361:0"].value,
-            ),
-          ]
-        : []),
-      createLocalSnippetElement(
-        "AlertDialogDescription",
-        undefined,
-        props["Description Text#20361:7"].value,
-      ),
-    ]);
+export const createAlertDialogHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
+  const actionButtonGhostHandler = createActionButtonGhostHandler(ctx);
 
-    const footerNodes = findAllInstances<AlertDialogFooterProperties>({
-      node,
-      key: ALERT_DIALOG_FOOTER_KEY,
-    });
+  return defineComponentHandler<AlertDialogProperties>(
+    metadata.alertDialog.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+      const alertDialogHeader = createLocalSnippetElement("AlertDialogHeader", undefined, [
+        ...(props["Show Title#20361:14"].value
+          ? [
+              createLocalSnippetElement(
+                "AlertDialogTitle",
+                undefined,
+                props["Title Text#20361:0"].value,
+              ),
+            ]
+          : []),
+        createLocalSnippetElement(
+          "AlertDialogDescription",
+          undefined,
+          props["Description Text#20361:7"].value,
+        ),
+      ]);
 
-    if (footerNodes.length === 0 || footerNodes.length > 1) {
-      return createLocalSnippetElement("AlertDialog", undefined, alertDialogHeader, {
-        comment: "Footer 영역을 확인해주세요.",
+      const footerNodes = findAllInstances<AlertDialogFooterProperties>({
+        node,
+        key: ALERT_DIALOG_FOOTER_KEY,
       });
-    }
 
-    const footerNode = footerNodes[0];
-    const footerNodeProps = traverse(footerNode)?.props;
+      if (footerNodes.length === 0 || footerNodes.length > 1) {
+        return createLocalSnippetElement("AlertDialog", undefined, alertDialogHeader, {
+          comment: "Footer 영역을 확인해주세요.",
+        });
+      }
+
+      const footerNode = footerNodes[0];
+      const footerNodeProps = traverse(footerNode)?.props;
+
+      const buttons = footerNode.children.map(traverse);
+
+      const alertDialogFooterChildren = match(footerNode.componentProperties.Type.value)
+        .with("Single", () => buttons)
+        .with("Neutral", "Critical", () =>
+          createSeedReactElement("ResponsivePair", footerNodeProps, buttons),
+        )
+        .with("Neutral (Overflow)", "Critical (Overflow)", () =>
+          createSeedReactElement("VStack", footerNodeProps, buttons),
+        )
+        .with("Nonpreferred", () => {
+          const [actionButtonNode] = findAllInstances<ActionButtonProperties>({
+            node: footerNode,
+            key: actionButtonHandler.key,
+          });
 
-    const buttons = footerNode.children.map(traverse);
+          const [ghostButtonNode] = findAllInstances<ActionButtonGhostProperties>({
+            node: footerNode,
+            key: actionButtonGhostHandler.key,
+          });
 
-    const alertDialogFooterChildren = match(footerNode.componentProperties.Type.value)
-      .with("Single", () => buttons)
-      .with("Neutral", "Critical", () =>
-        createSeedReactElement("ResponsivePair", footerNodeProps, buttons),
-      )
-      .with("Neutral (Overflow)", "Critical (Overflow)", "Nonpreferred", () =>
-        createSeedReactElement("VStack", footerNodeProps, buttons),
-      )
-      .exhaustive();
+          const actionButton = actionButtonHandler.transform(actionButtonNode, traverse);
+          const ghostButton = actionButtonGhostHandler.transform(ghostButtonNode, traverse);
 
-    const alertDialogFooter = createLocalSnippetElement(
-      "AlertDialogFooter",
-      undefined,
-      alertDialogFooterChildren,
-    );
+          const buttons = [
+            actionButton,
+            {
+              ...ghostButton,
+              props: {
+                ...ghostButton.props,
+                // nonpreferred shouldn't have bleedX, but in Figma it's not possible to represent that
+                bleedX: undefined,
+              },
+            },
+          ];
+
+          return createSeedReactElement("VStack", footerNodeProps, buttons);
+        })
+        .exhaustive();
+
+      const alertDialogFooter = createLocalSnippetElement(
+        "AlertDialogFooter",
+        undefined,
+        alertDialogFooterChildren,
+      );
 
-    return createLocalSnippetElement("AlertDialogRoot", { open: true }, [
-      createLocalSnippetElement(
-        "AlertDialogTrigger",
-        { asChild: true },
-        createLocalSnippetElementTrigger("ActionButton", {}, "AlertDialog 열기"),
-      ),
-      createLocalSnippetElement("AlertDialogContent", undefined, [
-        alertDialogHeader,
-        alertDialogFooter,
-      ]),
-    ]);
-  });
+      return createLocalSnippetElement("AlertDialogRoot", { open: true }, [
+        createLocalSnippetElement(
+          "AlertDialogTrigger",
+          { asChild: true },
+          createLocalSnippetElementTrigger("ActionButton", {}, "AlertDialog 열기"),
+        ),
+        createLocalSnippetElement("AlertDialogContent", undefined, [
+          alertDialogHeader,
+          alertDialogFooter,
+        ]),
+      ]);
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/list-item.ts

@@ -141,7 +141,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
           tag === "ListSwitchItem") && {
           disabled: true,
         }),
-      ...(props.State.value === "Highlighted" && {
+      ...(props.Highlighted.value === "True" && {
         highlighted: true,
       }),
     };

package/src/codegen/targets/react/component/handlers/menu-sheet.ts

@@ -79,14 +79,14 @@ export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
     // TODO: React 구현체에 description 추가 이후
     // const description = props["Description Text#21827:0"].value;
 
-    const { labelAlignment } = match(props.Layout.value)
-      .with("Text with Icon", () => ({ labelAlignment: undefined }))
-      .with("Text Only", () => ({ labelAlignment: "center" }))
+    const { labelAlign } = match(props.Layout.value)
+      .with("Text with Icon", "Text with Subtext", () => ({ labelAlign: "left" }))
+      .with("Text Only", () => ({ labelAlign: "center" }))
       .exhaustive();
 
     const content = createLocalSnippetElement(
       "MenuSheetContent",
-      { title, labelAlignment },
+      { title, labelAlign },
       contentChildren,
       {
         comment: title

package/src/codegen/targets/react/component/handlers/result-section.ts

@@ -0,0 +1,67 @@
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+  ResultSectionProperties,
+} from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { createActionButtonGhostHandler, createActionButtonHandler } from "./action-button";
+import { handleSizeProp } from "@/codegen/targets/react/component/size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("result-section");
+
+export const createResultSectionHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
+  const ghostButtonHandler = createActionButtonGhostHandler(ctx);
+
+  return defineComponentHandler<ResultSectionProperties>(
+    metadata.templateResultSection.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [actionButton] =
+        props["Show Buttons#53435:0"].value && props["ㄴShow First Button#53766:0"].value
+          ? findAllInstances<ActionButtonProperties>({
+              node,
+              key: actionButtonHandler.key,
+            })
+          : [undefined];
+
+      const [ghostButton] =
+        props["Show Buttons#53435:0"].value && props["ㄴShow Second Button#53766:3"].value
+          ? findAllInstances<ActionButtonGhostProperties>({
+              node,
+              key: ghostButtonHandler.key,
+            })
+          : [undefined];
+
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        ...(props["Show Asset#45154:14"].value && {
+          asset: createSeedReactElement(
+            "Box",
+            undefined,
+            createElement("div", undefined, undefined, { comment: "Asset Placeholder" }),
+          ),
+        }),
+        title: props["Title#16237:0"].value,
+        description: props["Description#16237:5"].value,
+        ...(actionButton && {
+          primaryActionProps: {
+            children: actionButtonHandler.transform(actionButton, traverse).children[0],
+          },
+        }),
+        ...(ghostButton && {
+          secondaryActionProps: {
+            children: ghostButtonHandler.transform(ghostButton, traverse).children[0],
+          },
+        }),
+      };
+
+      return createLocalSnippetElement("ResultSection", commonProps);
+    },
+  );
+};

package/src/codegen/targets/react/component/index.ts

@@ -18,7 +18,6 @@ import { createCheckmarkHandler } from "@/codegen/targets/react/component/handle
 import { createChipHandler } from "./handlers/chip";
 import { createContextualFloatingButtonHandler } from "./handlers/contextual-floating-button";
 import { createDividerHandler } from "./handlers/divider";
-import { createErrorStateHandler } from "./handlers/error-state";
 import {
   createFieldButtonHandler,
   createAddressFieldHandler,
@@ -39,6 +38,7 @@ import { createProgressCircleHandler } from "./handlers/progress-circle";
 import { createRadioGroupItemHandler } from "@/codegen/targets/react/component/handlers/radio-group";
 import { createRadioMarkHandler } from "@/codegen/targets/react/component/handlers/radio-mark";
 import { createReactionButtonHandler } from "./handlers/reaction-button";
+import { createResultSectionHandler } from "./handlers/result-section";
 import { createSegmentedControlHandler } from "./handlers/segmented-control";
 import { createSelectBoxGroupHandler, createSelectBoxHandler } from "./handlers/select-box";
 import { createSkeletonHandler } from "./handlers/skeleton";
@@ -112,7 +112,7 @@ export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> =
   createDatePickerFieldHandler,
   createSelectFieldHandler,
   createTimePickerFieldHandler,
-  createErrorStateHandler,
+  createResultSectionHandler,
   createContextualFloatingButtonHandler,
   createFloatingActionButtonHandler,
   createHelpBubbleHandler,