@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,149 @@
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+} from "@/codegen/component-properties";
+import { handleSizeProp } from "../size";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import { findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("action-button");
+
+export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionButtonProperties>(
+    metadata.componentActionButton.key,
+    ({ componentProperties: props, layoutGrow }) => {
+      const states = props.State.value.split("-");
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createSeedReactElement("Icon", {
+              svg: ctx.iconHandler.transform(props["Icon#7574:0"]),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"]),
+            }),
+            props["Label#5987:61"].value,
+          ],
+        }))
+        .with("Icon Last", () => ({
+          layout: "withText",
+          children: [
+            props["Label#5987:61"].value,
+            createSeedReactElement("SuffixIcon", {
+              svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"]),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#5987:61"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        size: handleSizeProp(props.Size.value),
+        variant: camelCase(props.Variant.value),
+        layout,
+        ...(layoutGrow === 1 && { flexGrow: true }),
+      };
+
+      return createLocalSnippetElement("ActionButton", commonProps, children);
+    },
+  );
+
+export const createActionButtonGhostHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionButtonGhostProperties>(
+    metadata.componentActionButtonGhostButton.key,
+    (node) => {
+      const props = node.componentProperties;
+
+      const states = props.State.value.split("-");
+
+      const buttonWrapperNode = findOne(
+        node,
+        (n) => n.type === "FRAME" && n.layoutPositioning !== "ABSOLUTE",
+      );
+
+      const labelNode = buttonWrapperNode
+        ? (findOne(buttonWrapperNode, (n) => n.type === "TEXT") as NormalizedTextNode | undefined)
+        : undefined;
+
+      const color = labelNode ? ctx.valueResolver.getFormattedValue.textFill(labelNode) : null;
+      const fontWeight = labelNode
+        ? ctx.valueResolver.getFormattedValue.fontWeight(labelNode)
+        : null;
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createSeedReactElement("Icon", {
+              svg: ctx.iconHandler.transform(props["Icon#30525:15"]),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#30511:3"]),
+            }),
+            props["Label#30511:2"].value,
+          ],
+        }))
+        .with("Icon Last", () => ({
+          layout: "withText",
+          children: [
+            props["Label#30511:2"].value,
+            createSeedReactElement("SuffixIcon", {
+              svg: ctx.iconHandler.transform(props["Suffix Icon#30525:0"]),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#30511:2"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        size: handleSizeProp(props.Size.value),
+        variant: "ghost",
+        layout,
+        ...(color && { color }),
+        ...(fontWeight && { fontWeight }),
+        ...(props.Bleed.value === "true" && {
+          bleedX: "asPadding",
+          bleedY: "asPadding",
+        }),
+        ...(node.layoutGrow === 1 && { flexGrow: true }),
+      };
+
+      return createLocalSnippetElement("ActionButton", commonProps, children);
+    },
+  );

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

@@ -0,0 +1,120 @@
+import { defineComponentHandler } from "@/codegen/core";
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+  AlertDialogFooterProperties,
+  AlertDialogProperties,
+} from "@/codegen/component-properties";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+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 } =
+  createLocalSnippetHelper("action-button");
+
+export const createAlertDialogHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
+  const actionButtonGhostHandler = createActionButtonGhostHandler(ctx);
+
+  return defineComponentHandler<AlertDialogProperties>(
+    metadata.componentAlertDialog.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,
+        ),
+      ]);
+
+      const footerNodes = findAllInstances<AlertDialogFooterProperties>({
+        node,
+        key: metadata.privateComponentAlertDialogActions.key,
+      });
+
+      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 [ghostButtonNode] = findAllInstances<ActionButtonGhostProperties>({
+            node: footerNode,
+            key: actionButtonGhostHandler.key,
+          });
+
+          const actionButton = actionButtonHandler.transform(actionButtonNode, traverse);
+          const ghostButton = actionButtonGhostHandler.transform(ghostButtonNode, traverse);
+
+          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,
+        ]),
+      ]);
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/app-bar.ts

@@ -0,0 +1,169 @@
+import type {
+  AppBarProperties,
+  AppBarMainProperties,
+  AppBarRightIconButtonProperties,
+  AppBarLeftIconButtonProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
+import { findAllInstances } from "@/utils/figma-node";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("app-bar");
+
+const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<AppBarMainProperties>(
+    metadata.privateComponentTopNavigationTitle.key,
+    ({ componentProperties: props }) => {
+      const { title, subtitle } = match(props.Type.value)
+        .with("Title", () => ({
+          title: props["Title#16944:0"].value,
+          subtitle: undefined,
+        }))
+        .with("Title-Subtitle", () => ({
+          title: props["Title#16944:0"].value,
+          subtitle: props["Subtitle#16958:9"].value,
+        }))
+        .with("Logo (Figma Only)", () => ({
+          title: undefined,
+          subtitle: undefined,
+        }))
+        .exhaustive();
+
+      if (title) {
+        return createLocalSnippetElement("AppBarMain", { title, subtitle });
+      }
+
+      return createLocalSnippetElement("AppBarMain", undefined, undefined, {
+        comment: "AppBarMain 내부를 직접 작성해주세요.",
+      });
+    },
+  );
+};
+
+export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
+  const appBarMainHandler = createAppBarMainHandler(ctx);
+
+  return defineComponentHandler<AppBarProperties>(
+    metadata.componentTopNavigation.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const { theme, tone } = {
+        theme: match(props["OS (Figma Only)"].value)
+          .with("Android", () => "android")
+          .with("iOS", () => "cupertino")
+          .exhaustive(),
+
+        tone: match(props.Variant.value)
+          .with("Layer Default", () => "layer")
+          .with("Transparent", () => "transparent")
+          .exhaustive(),
+      };
+
+      const main = (() => {
+        if (!props["Show Title#33588:82"].value) {
+          return undefined;
+        }
+
+        const [mainNode] = findAllInstances<AppBarMainProperties>({
+          node,
+          key: metadata.privateComponentTopNavigationTitle.key,
+        });
+
+        if (!mainNode) {
+          return undefined;
+        }
+
+        return appBarMainHandler.transform(mainNode, traverse);
+      })();
+
+      const leftChildren = match(props.Left.value)
+        .with("None", () => undefined)
+        .with("Back", () => [createLocalSnippetElement("AppBarBackButton")])
+        .with("Close", () => [createLocalSnippetElement("AppBarCloseButton")])
+        .with("Custom", () => {
+          const buttons = findAllInstances<AppBarLeftIconButtonProperties>({
+            node,
+            key: components.privateComponentTopNavigationLeftIconButton.key,
+          });
+
+          if (buttons.length > 0) {
+            return buttons.map((button) =>
+              createLocalSnippetElement(
+                "AppBarIconButton",
+                undefined,
+                ctx.iconHandler.transform(button.componentProperties["Icon#33580:0"]),
+                { comment: "AppBarIconButton에 aria-label 속성을 추가해주세요." },
+              ),
+            );
+          }
+
+          return undefined;
+        })
+        .exhaustive();
+
+      const left =
+        leftChildren && leftChildren.length > 0
+          ? createLocalSnippetElement("AppBarLeft", {}, leftChildren)
+          : undefined;
+
+      const rightChildren = match(props.Right.value)
+        .with("None", () => undefined)
+        .with("1 Icon Button", "2 Icon Button", "3 Icon Button", () => {
+          const buttons = findAllInstances<AppBarRightIconButtonProperties>({
+            node,
+            key: metadata.privateComponentTopNavigationRightIconButton.key,
+          });
+
+          return buttons.map((button) =>
+            createLocalSnippetElement(
+              "AppBarIconButton",
+              undefined,
+              ctx.iconHandler.transform(button.componentProperties["Icon#6406:3"]),
+              { comment: "AppBarIconButton에 aria-label 속성을 추가해주세요." },
+            ),
+          );
+        })
+        .with("Text Button", () => undefined)
+        .exhaustive();
+
+      const right =
+        rightChildren && rightChildren.length > 0
+          ? createLocalSnippetElement("AppBarRight", {}, rightChildren)
+          : undefined;
+
+      return createLocalSnippetElement(
+        "AppBar",
+        { theme, tone },
+        [left, main, right].filter(Boolean),
+        {
+          comment:
+            tone === "transparent"
+              ? '<AppScreen layerOffsetTop="none">으로 상단 패딩을 제거할 수 있습니다.'
+              : undefined,
+        },
+      );
+    },
+  );
+};
+
+export const createAppBarPresetHandler = (ctx: ComponentHandlerDeps) => {
+  const appBarHandler = createAppBarHandler(ctx);
+
+  return defineComponentHandler(metadata.templateTopNavigationPreset.key, (node, traverse) => {
+    const [appBarNode] = findAllInstances<AppBarProperties>({
+      node,
+      key: metadata.componentTopNavigation.key,
+    });
+
+    if (!appBarNode) {
+      return createLocalSnippetElement("AppBar");
+    }
+
+    return appBarHandler.transform(appBarNode, traverse);
+  });
+};

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

@@ -0,0 +1,144 @@
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+} from "@/codegen/component-properties.archive";
+import { handleSizeProp } from "../../size";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../../element-factories";
+import { findOne } from "@/utils/figma-node";
+import type { NormalizedTextNode } from "@/normalizer";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("action-button");
+
+export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionButtonProperties>(
+    metadata.actionButton.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const { layout, children } = match(props.Layout.value)
+        .with("Icon Only", () => ({
+          layout: "iconOnly",
+          children: [
+            createSeedReactElement("Icon", {
+              svg: ctx.iconHandler.transform(props["Icon#7574:0"]),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"]),
+            }),
+            props["Label#5987:61"].value,
+          ],
+        }))
+        .with("Icon Last", () => ({
+          layout: "withText",
+          children: [
+            props["Label#5987:61"].value,
+            createSeedReactElement("SuffixIcon", {
+              svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"]),
+            }),
+          ],
+        }))
+        .with("Text Only", () => ({
+          layout: "withText",
+          children: props["Label#5987:61"].value,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        size: handleSizeProp(props.Size.value),
+        variant: camelCase(props.Variant.value),
+        layout,
+      };
+
+      return createLocalSnippetElement("ActionButton", commonProps, children);
+    },
+  );
+
+const ACTION_BUTTON_GHOST_BUTTON_KEY = "ea69291fb4d76217419f3d9613ae16aadafb56a5";
+
+export const createActionButtonGhostHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionButtonGhostProperties>(ACTION_BUTTON_GHOST_BUTTON_KEY, (node) => {
+    const props = node.componentProperties;
+
+    const states = props.State.value.split("-");
+
+    const buttonWrapperNode = findOne(
+      node,
+      (n) => n.type === "FRAME" && n.layoutPositioning !== "ABSOLUTE",
+    );
+
+    const labelNode = buttonWrapperNode
+      ? (findOne(buttonWrapperNode, (n) => n.type === "TEXT") as NormalizedTextNode | undefined)
+      : undefined;
+
+    const color = labelNode ? ctx.valueResolver.getFormattedValue.textFill(labelNode) : null;
+    const fontWeight = labelNode ? ctx.valueResolver.getFormattedValue.fontWeight(labelNode) : null;
+
+    const { layout, children } = match(props.Layout.value)
+      .with("Icon Only", () => ({
+        layout: "iconOnly",
+        children: [
+          createSeedReactElement("Icon", {
+            svg: ctx.iconHandler.transform(props["Icon#30525:15"]),
+          }),
+        ],
+      }))
+      .with("Icon First", () => ({
+        layout: "withText",
+        children: [
+          createSeedReactElement("PrefixIcon", {
+            svg: ctx.iconHandler.transform(props["Prefix Icon#30511:3"]),
+          }),
+          props["Label#30511:2"].value,
+        ],
+      }))
+      .with("Icon Last", () => ({
+        layout: "withText",
+        children: [
+          props["Label#30511:2"].value,
+          createSeedReactElement("SuffixIcon", {
+            svg: ctx.iconHandler.transform(props["Suffix Icon#30525:0"]),
+          }),
+        ],
+      }))
+      .with("Text Only", () => ({
+        layout: "withText",
+        children: props["Label#30511:2"].value,
+      }))
+      .exhaustive();
+
+    const commonProps = {
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+      ...(states.includes("Loading") && {
+        loading: true,
+      }),
+      size: handleSizeProp(props.Size.value),
+      variant: "ghost",
+      layout,
+      ...(color && { color }),
+      ...(fontWeight && { fontWeight }),
+      ...(props.Bleed.value === "true" && {
+        bleedX: "asPadding",
+        bleedY: "asPadding",
+      }),
+    };
+
+    return createLocalSnippetElement("ActionButton", commonProps, children);
+  });