@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,122 @@
+import { defineComponentHandler } from "@/codegen/core";
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+  AlertDialogFooterProperties,
+  AlertDialogProperties,
+} from "@/codegen/component-properties.archive";
+import * as metadata from "@/entities/data/__generated__/archive/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/archive/action-button";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("alert-dialog");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+const ALERT_DIALOG_FOOTER_KEY = "00b1b131d67edf2875a7a1df8dfa88098d7c04be";
+
+export const createAlertDialogHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
+  const actionButtonGhostHandler = createActionButtonGhostHandler(ctx);
+
+  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,
+        ),
+      ]);
+
+      const footerNodes = findAllInstances<AlertDialogFooterProperties>({
+        node,
+        key: ALERT_DIALOG_FOOTER_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/archive/app-bar.ts

@@ -0,0 +1,149 @@
+import type {
+  AppBarProperties,
+  AppBarMainProperties,
+  AppBarRightIconButtonProperties,
+  AppBarLeftIconButtonProperties,
+} from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+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 APP_BAR_TITLE_KEY = "d2cc4f615b2b44098be89448ad1c573f94af0355";
+const APP_BAR_LEFT_ICON_BUTTON_KEY = "5a953f7bafc0df744777517458396e9f6c915825";
+const APP_BAR_RIGHT_ICON_BUTTON_KEY = "c08db793288077e53bd45ef11aa419a835e88fce";
+
+const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<AppBarMainProperties>(
+    APP_BAR_TITLE_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.topNavigation.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: APP_BAR_TITLE_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: APP_BAR_LEFT_ICON_BUTTON_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: APP_BAR_RIGHT_ICON_BUTTON_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,
+      },
+    );
+  });
+};

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

@@ -0,0 +1,35 @@
+import type { AvatarProperties, AvatarStackProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { createAvatarHandler } from "./avatar";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("avatar");
+
+export const createAvatarStackHandler = (ctx: ComponentHandlerDeps) => {
+  const avatarHandler = createAvatarHandler(ctx);
+
+  return defineComponentHandler<AvatarStackProperties>(
+    metadata.avatarStack.key,
+    (node, traverse) => {
+      const avatarNodes = findAllInstances<AvatarProperties>({
+        node,
+        key: avatarHandler.key,
+      });
+
+      const { componentProperties: props } = node;
+
+      const commonProps = {
+        size: props.Size.value,
+      };
+
+      const avatarStackChildren = avatarNodes.map((avatarNode) =>
+        avatarHandler.transform(avatarNode, traverse),
+      );
+
+      return createLocalSnippetElement("AvatarStack", commonProps, avatarStackChildren);
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/archive/avatar.ts

@@ -0,0 +1,55 @@
+import type {
+  AvatarProperties,
+  IdentityPlaceholderProperties,
+} from "@/codegen/component-properties.archive";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { createIdentityPlaceholderHandler } from "./identity-placeholder";
+import { camelCase } from "change-case";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("avatar");
+
+export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
+  const identityPlaceholderHandler = createIdentityPlaceholderHandler(ctx);
+
+  return defineComponentHandler<AvatarProperties>(metadata.avatar.key, (node, traverse) => {
+    const [placeholder] = findAllInstances<IdentityPlaceholderProperties>({
+      node,
+      key: identityPlaceholderHandler.key,
+    });
+    const { componentProperties: props } = node;
+
+    const avatarHasSrc = props["Has Image Contents#33407:0"].value;
+
+    const commonProps = {
+      ...(avatarHasSrc && {
+        // Placeholder
+        src: `https://placehold.co/${props.Size.value}x${props.Size.value}`,
+      }),
+      ...(placeholder && {
+        fallback: identityPlaceholderHandler.transform(placeholder, traverse),
+      }),
+      ...(props["Badge"].value !== "None" && {
+        badgeMask: camelCase(props["Badge"].value),
+      }),
+      size: props.Size.value,
+    };
+
+    return createLocalSnippetElement(
+      "Avatar",
+      commonProps,
+      props["Badge"].value === "None"
+        ? undefined
+        : createLocalSnippetElement(
+            "AvatarBadge",
+            { asChild: true },
+            createElement("img", { src: "https://placehold.co/20x20" }),
+            { comment: "뱃지를 설명하는 alt 텍스트를 제공해야 합니다." },
+          ),
+      { comment: avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined },
+    );
+  });
+};

package/src/codegen/targets/react/component/handlers/archive/badge.ts

@@ -0,0 +1,18 @@
+import type { BadgeProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { camelCase } from "change-case";
+import { createSeedReactElement } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { handleSizeProp } from "../../size";
+
+export const createBadgeHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<BadgeProperties>(metadata.badge.key, ({ componentProperties: props }) => {
+    const commonProps = {
+      size: handleSizeProp(props.Size.value),
+      tone: camelCase(props.Tone.value),
+      variant: camelCase(props.Variant.value),
+    };
+
+    return createSeedReactElement("Badge", commonProps, props["Label#1584:0"].value);
+  });

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

@@ -0,0 +1,70 @@
+import type { BottomSheetProperties } from "@/codegen/component-properties.archive";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("bottom-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+// TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
+const BOTTOM_SHEET_FOOTER_KEY = "de6c65d34cc4a01c18c9a7c0ded34635170ca11f";
+const BOTTOM_SHEET_BODY_KEY = "aa9ffdd60fbfdea42f0d11162cd64f4b4389ddcc";
+
+export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<BottomSheetProperties>(metadata.bottomSheet.key, (node, traverse) => {
+    const props = node.componentProperties;
+    const headerAlign = match(props["Header Layout"].value)
+      .with("Bottom Left", "Top Left", () => "left")
+      .with("Bottom Center", "Top Center", () => "center")
+      .with("None", () => undefined)
+      .exhaustive();
+
+    const contentProps = {
+      title: props["Title#19787:3"].value,
+      ...(props["Show Description#25192:0"].value === true && {
+        description: props["Description#19787:7"].value,
+      }),
+      showHandle: props["Show Handle#49774:6"].value,
+      showCloseButton: props["Show Close Button#19787:11"].value,
+    };
+
+    const bodyNodes = findAllInstances({
+      node,
+      key: BOTTOM_SHEET_BODY_KEY,
+    });
+
+    const bottomSheetBody =
+      bodyNodes.length === 1
+        ? createLocalSnippetElement("BottomSheetBody", {}, bodyNodes[0].children.map(traverse))
+        : createLocalSnippetElement(
+            "BottomSheetBody",
+            {},
+            createElement("div", undefined, "No content available"),
+          );
+
+    const footerNodes = findAllInstances({
+      node,
+      key: BOTTOM_SHEET_FOOTER_KEY,
+    });
+
+    const bottomSheetFooter =
+      props["Show Footer#25162:14"].value && footerNodes.length === 1
+        ? createLocalSnippetElement("BottomSheetFooter", {}, footerNodes[0].children.map(traverse))
+        : undefined;
+
+    return createLocalSnippetElement("BottomSheetRoot", { defaultOpen: true, headerAlign }, [
+      createLocalSnippetElement(
+        "BottomSheetTrigger",
+        { asChild: true },
+        createLocalSnippetElementTrigger("ActionButton", {}, "BottomSheet 열기"),
+      ),
+      createLocalSnippetElement("BottomSheetContent", contentProps, [
+        bottomSheetBody,
+        bottomSheetFooter,
+      ]),
+    ]);
+  });

package/src/codegen/targets/react/component/handlers/archive/callout.ts

@@ -0,0 +1,88 @@
+import type { CalloutProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import type { NormalizedTextNode } from "@/normalizer";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("callout");
+
+export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CalloutProperties>(
+    metadata.callout.key,
+    ({ componentProperties: props, children }) => {
+      const tag = match(props.Interaction.value)
+        .with("Display", () => "Callout")
+        .with("Actionable", () => "ActionableCallout")
+        .with("Dismissible", () => "DismissibleCallout")
+        .exhaustive();
+
+      const textNode = children.find((child) => child.type === "TEXT") as NormalizedTextNode | null;
+
+      if (!textNode) {
+        return createLocalSnippetElement(tag, undefined, undefined, {
+          comment: "내용을 제공해주세요.",
+        });
+      }
+
+      const slices = textNode.segments;
+
+      let title: string | undefined;
+      let description: string | undefined;
+      let linkLabel: string | undefined;
+
+      switch (slices.length) {
+        case 1: {
+          description = slices[0]?.characters.trim();
+
+          break;
+        }
+        case 2: {
+          const firstSlice = slices[0];
+          const secondSlice = slices[1];
+
+          if (firstSlice?.style.fontWeight === 700) {
+            title = firstSlice?.characters.trim();
+            description = secondSlice?.characters.trim();
+            break;
+          }
+
+          description = firstSlice?.characters.trim();
+
+          if (tag !== "ActionableCallout") {
+            linkLabel = secondSlice?.characters.trim();
+          }
+
+          break;
+        }
+        case 3: {
+          title = slices[0]?.characters.trim();
+          description = slices[1]?.characters.trim();
+
+          if (tag !== "ActionableCallout") {
+            linkLabel = slices[2]?.characters.trim();
+          }
+
+          break;
+        }
+      }
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        title,
+        description,
+        ...(linkLabel && {
+          linkProps: {
+            children: linkLabel,
+          },
+        }),
+        ...(props["Show Prefix Icon#35087:1"].value && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#35087:0"]),
+        }),
+      };
+
+      return createLocalSnippetElement(tag, commonProps);
+    },
+  );

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

@@ -0,0 +1,43 @@
+import type { CheckboxProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { handleSizeProp } from "../../size";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("checkbox");
+
+export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CheckboxProperties>(
+    metadata.checkbox.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated]Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        label: props["Label#49990:0"].value,
+        weight: camelCase(props.Weight.value),
+        tone,
+        variant: camelCase(props.Shape.value),
+        size: handleSizeProp(props.Size.value),
+        ...(props.Selected.value === "True" && {
+          defaultChecked: true,
+        }),
+        ...(props.Selected.value === "Indeterminate" && {
+          defaultChecked: true,
+          indeterminate: true,
+        }),
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+      };
+
+      return createLocalSnippetElement("Checkbox", commonProps, undefined, {
+        comment: "CheckboxGroup으로 묶어서 사용하는 것을 권장합니다.",
+      });
+    },
+  );

package/src/codegen/targets/react/component/handlers/archive/checkmark.ts

@@ -0,0 +1,29 @@
+import type { CheckmarkProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { handleSizeProp } from "../../size";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("checkbox");
+
+export const createCheckmarkHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CheckmarkProperties>(
+    metadata.checkmark.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated]Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        tone,
+        variant: camelCase(props.Shape.value),
+        size: handleSizeProp(props.Size.value),
+      };
+
+      return createLocalSnippetElement("Checkmark", commonProps);
+    },
+  );