@seed-design/figma 1.1.10 → 1.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.1.10",
+  "version": "1.1.13",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
     "sync-entities": "rm -rf src/entities/data/__generated__ && bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.1.10",
+    "@seed-design/css": "1.1.13",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

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/entities/data/__generated__/component-sets/index.d.ts

@@ -6,9 +6,7 @@ export declare const templateBannerDetach: {
       "type": "VARIANT",
       "variantOptions": [
         "Title + Description",
-        "Description + Title",
-        "Layout3",
-        "Layout4"
+        "Description + Title"
       ]
     },
     "Rounded": {
@@ -1261,7 +1259,8 @@ export declare const pageBanner: {
         "Informative",
         "Positive",
         "Warning",
-        "Critical"
+        "Critical",
+        "Magic"
       ]
     },
     "Variant": {

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

@@ -6,9 +6,7 @@ export const templateBannerDetach = {
       "type": "VARIANT",
       "variantOptions": [
         "Title + Description",
-        "Description + Title",
-        "Layout3",
-        "Layout4"
+        "Description + Title"
       ]
     },
     "Rounded": {
@@ -1261,7 +1259,8 @@ export const pageBanner = {
         "Informative",
         "Positive",
         "Warning",
-        "Critical"
+        "Critical",
+        "Magic"
       ]
     },
     "Variant": {

package/src/entities/data/__generated__/variable-collections/index.mjs

@@ -16,6 +16,7 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
     ],
     "key": "34e782f5d238a8c5be4618ff4a24ae0f4fc4e1da",
     "hiddenFromPublishing": false,
+    "isExtension": false,
     "variableIds": [
       "VariableID:1:129",
       "VariableID:1:130",
@@ -42,19 +43,18 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
       "VariableID:8482:98909",
       "VariableID:1:155",
       "VariableID:1:156",
+      "VariableID:1:157",
       "VariableID:238:17662",
       "VariableID:670:2700",
-      "VariableID:1:157",
       "VariableID:52349:2",
       "VariableID:52349:3",
       "VariableID:1:164",
       "VariableID:1:165",
       "VariableID:654:20851",
       "VariableID:1:171",
-      "VariableID:17544:4057",
       "VariableID:41186:6437",
-      "VariableID:1:158",
       "VariableID:1:172",
+      "VariableID:1:158",
       "VariableID:1:161",
       "VariableID:1:159",
       "VariableID:576:22878",
@@ -85,7 +85,6 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
       "VariableID:33327:83273",
       "VariableID:1:167",
       "VariableID:764:14294",
-      "VariableID:1:170",
       "VariableID:1883:92911",
       "VariableID:1:169",
       "VariableID:41338:804",
@@ -221,14 +220,20 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
       "VariableID:30894:36313",
       "VariableID:30894:36314",
       "VariableID:30894:36315",
+      "VariableID:54554:3095",
+      "VariableID:54554:3097",
+      "VariableID:54554:3098",
+      "VariableID:50088:12999",
       "VariableID:1884:93034",
+      "VariableID:1:168",
       "VariableID:1883:93030",
       "VariableID:1883:93031",
       "VariableID:30501:79135",
       "VariableID:12973:26217",
       "VariableID:10181:34417",
-      "VariableID:50088:12999",
-      "VariableID:1:168",
+      "VariableID:17544:4057",
+      "VariableID:1:170",
+      "VariableID:54461:116345",
       "VariableID:51280:230267",
       "VariableID:51280:230268",
       "VariableID:51280:230269",
@@ -321,6 +326,7 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
     ],
     "key": "2d3b4ad8e4ba14ef53b92ba019942ca633ce21ba",
     "hiddenFromPublishing": false,
+    "isExtension": false,
     "variableIds": [
       "VariableID:1:189",
       "VariableID:1:196",
@@ -388,6 +394,7 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
     ],
     "key": "75a9a164e0f9d49ba07e82176cbc7240569928a5",
     "hiddenFromPublishing": false,
+    "isExtension": false,
     "variableIds": [
       "VariableID:1:199",
       "VariableID:1:200",
@@ -469,6 +476,7 @@ export const FIGMA_VARIABLE_COLLECTIONS = {
     ],
     "key": "7b0f506ae5e0955f152efe15b7982265075ad655",
     "hiddenFromPublishing": false,
+    "isExtension": false,
     "variableIds": [
       "VariableID:6075:34488",
       "VariableID:6075:34489",