@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,38 @@
+import type {
+  AvatarProperties,
+  AvatarStackProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/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.componentAvatarStack.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/avatar.ts

@@ -0,0 +1,58 @@
+import type {
+  AvatarProperties,
+  IdentityPlaceholderProperties,
+} 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 } 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.componentAvatar.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/badge.ts

@@ -0,0 +1,18 @@
+import type { BadgeProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/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.componentBadge.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/bottom-sheet.ts

@@ -0,0 +1,74 @@
+import type { BottomSheetProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/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");
+
+export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<BottomSheetProperties>(
+    metadata.componentBottomSheet.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: props["Contents#25320:0"].componentKey,
+      });
+
+      const bottomSheetBody =
+        bodyNodes.length === 1
+          ? createLocalSnippetElement("BottomSheetBody", {}, bodyNodes[0].children.map(traverse))
+          : createLocalSnippetElement(
+              "BottomSheetBody",
+              {},
+              createElement("div", undefined, "No content available"),
+            );
+
+      const footerNodes = findAllInstances({
+        node,
+        // TODO: Bottom Action Bar (WIP) handler의 키. 해당 컴포넌트(템플릿) 핸들러 작성 시 handler.transform()으로 대체
+        key: metadata.componentBottomActionBarFigmaOnly.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/callout.ts

@@ -0,0 +1,88 @@
+import type { CalloutProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/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.componentCallout.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/checkbox.ts

@@ -0,0 +1,129 @@
+import type {
+  CheckboxGroupFieldProperties,
+  CheckboxProperties,
+  FieldFooterProperties,
+  FieldHeaderProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/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";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+import { findAllInstances } from "@/utils/figma-node";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("checkbox");
+
+export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CheckboxProperties>(
+    metadata.componentCheckbox.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으로 묶어서 사용하는 것을 권장합니다.",
+      });
+    },
+  );
+
+export const createCheckboxGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const checkboxHandler = createCheckboxHandler(ctx);
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<CheckboxGroupFieldProperties>(
+    metadata.templateCheckboxField.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const items = findAllInstances<CheckboxProperties>({
+        node,
+        key: checkboxHandler.key,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      // maxGraphemeCount / required / invalid can't be props of CheckboxGroup
+      const { required: _required, ...headerProps } =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const {
+        maxGraphemeCount: _maxGraphemeCount,
+        invalid: _invalid,
+        ...footerProps
+      } = props["Show Footer#40606:9"].value && fieldFooter
+        ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+        : {};
+
+      const commonProps = {
+        ...headerProps,
+        ...footerProps,
+      };
+
+      return createLocalSnippetElement(
+        "CheckboxGroup",
+        commonProps,
+        items.map((item) => {
+          const result = checkboxHandler.transform(item, traverse);
+
+          return {
+            ...result,
+            meta: {
+              ...result.meta,
+
+              // remove comment from individual Checkbox items
+              comment: undefined,
+            },
+          };
+        }),
+        {
+          comment: [
+            headerProps.label
+              ? undefined
+              : "label을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+            footerProps.errorMessage
+              ? "errorMessage를 표시하는 경우, 접근성을 위해 개별 Checkbox 중 무효한 항목에 invalid를 설정해주세요."
+              : undefined,
+          ]
+            .filter(Boolean)
+            .join(" "),
+        },
+      );
+    },
+  );
+};

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

@@ -0,0 +1,29 @@
+import type { CheckmarkProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/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.componentCheckmark.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);
+    },
+  );

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

@@ -0,0 +1,93 @@
+import type {
+  AvatarProperties,
+  ChipIconSuffixProperties,
+  ChipProperties,
+} 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 { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
+import { camelCase } from "change-case";
+import { findAllInstances } from "@/utils/figma-node";
+import { createAvatarHandler } from "@/codegen/targets/react/component/handlers/avatar";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("chip");
+
+const createChipIconSuffixHandler = (ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<ChipIconSuffixProperties>(
+    components.componentChipSuffixIcon.key,
+    ({ componentProperties }) => {
+      return createLocalSnippetElement(
+        "Chip.SuffixIcon",
+        undefined,
+        createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(componentProperties["Icon#33203:0"]),
+        }),
+      );
+    },
+  );
+};
+
+export const createChipHandler = (ctx: ComponentHandlerDeps) => {
+  const avatarHandler = createAvatarHandler(ctx);
+  const iconSuffixHandler = createChipIconSuffixHandler(ctx);
+
+  return defineComponentHandler<ChipProperties>(metadata.componentChip.key, (node, traverse) => {
+    const props = node.componentProperties;
+
+    const prefix = match(props["Prefix Type"].value)
+      .with("None", "Image", () => undefined)
+      .with("Icon", () =>
+        createLocalSnippetElement(
+          "Chip.PrefixIcon",
+          undefined,
+          createSeedReactElement("Icon", {
+            svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
+          }),
+        ),
+      )
+      .with("Avatar", () => {
+        const [avatar] = findAllInstances<AvatarProperties>({
+          node,
+          key: avatarHandler.key,
+        });
+        if (!avatar) return undefined;
+
+        return createLocalSnippetElement(
+          "Chip.PrefixAvatar",
+          undefined,
+          avatarHandler.transform(avatar, traverse),
+        );
+      })
+      .exhaustive();
+
+    const label = createLocalSnippetElement("Chip.Label", undefined, props["Label#7185:0"].value);
+
+    const [suffixIcon] = findAllInstances<ChipIconSuffixProperties>({
+      node,
+      key: components.componentChipSuffixIcon.key,
+    });
+
+    const commonProps = {
+      variant: camelCase(props.Variant.value),
+      size: handleSizeProp(props.Size.value),
+      layout: props["Label#7185:0"].value ? "withText" : "iconOnly",
+      ...(props.Selected.value === "True" && {
+        defaultChecked: true,
+      }),
+      ...(props.State.value === "Disabled" && {
+        disabled: true,
+      }),
+    };
+
+    return createLocalSnippetElement(
+      "Chip.Toggle",
+      commonProps,
+      [prefix, label, suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined],
+      { comment: "목적에 따라 Chip.Button, Chip.RadioItem 등으로 바꿔 사용하세요." },
+    );
+  });
+};

package/src/codegen/targets/react/component/handlers/content-placeholder.ts

@@ -0,0 +1,20 @@
+import { defineComponentHandler } from "@/codegen/core";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ContentPlaceholderProperties } from "@/codegen/component-properties";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("content-placeholder");
+
+export const createContentPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ContentPlaceholderProperties>(
+    metadata.privateComponentContentPlaceholder.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        type: camelCase(props.Type.value),
+      };
+
+      return createLocalSnippetElement("ContentPlaceholder", commonProps);
+    },
+  );

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

@@ -0,0 +1,52 @@
+import type { ContextualFloatingButtonProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("contextual-floating-button");
+
+export const createContextualFloatingButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ContextualFloatingButtonProperties>(
+    metadata.componentContextualFloatingButton.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#28796:0"]),
+            }),
+          ],
+        }))
+        .with("Icon First", () => ({
+          layout: "withText",
+          children: [
+            createSeedReactElement("PrefixIcon", {
+              svg: ctx.iconHandler.transform(props["Icon#28796:0"]),
+            }),
+            props["Label#28936:0"].value,
+          ],
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+        variant: match(props.Variant.value)
+          .with("Solid", () => "solid")
+          .with("Layer", () => "layer")
+          .exhaustive(),
+        layout,
+      };
+
+      return createLocalSnippetElement("ContextualFloatingButton", commonProps, children);
+    },
+  );

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

@@ -0,0 +1,25 @@
+import type { DividerProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { match } from "ts-pattern";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { camelCase } from "change-case";
+
+export const createDividerHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<DividerProperties>(
+    metadata.componentDivider.key,
+    ({ componentProperties: props }) => {
+      const { color } = match(props.Tone.value)
+        .with("Neutral Muted", () => ({ color: "stroke.neutralMuted" }))
+        .with("Neutral Subtle", () => ({ color: "stroke.neutralSubtle" }))
+        .exhaustive();
+
+      const commonProps = {
+        color,
+        orientation: camelCase(props.Orientation.value),
+      };
+
+      return createSeedReactElement("Divider", commonProps, undefined);
+    },
+  );