@seed-design/figma 0.0.0-alpha-20260324091316

package/src/codegen/targets/react/component/handlers/legacy-select-box.ts

@@ -0,0 +1,87 @@
+import type {
+  LegacySelectBoxGroupProperties,
+  LegacySelectBoxProperties,
+} 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 { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("select-box");
+
+const createLegacySelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<LegacySelectBoxProperties>(
+    metadata.componentDeprecatedSelectBox.key,
+    ({ componentProperties: props }) => {
+      const tag = match(props.Control.value)
+        .with("Checkbox", () => "CheckSelectBox")
+        .with("Radio", () => "RadioSelectBoxItem")
+        .exhaustive();
+
+      const commonProps = {
+        label: props["Label#3635:0"].value,
+        ...(props["Show Description#3033:0"].value && {
+          description: props["Description #3033:5"].value,
+        }),
+        ...(tag === "RadioSelectBoxItem" && {
+          value: props["Label#3635:0"].value,
+        }),
+        ...(tag === "CheckSelectBox" &&
+          props.Selected.value === "True" && {
+            defaultChecked: true,
+          }),
+      };
+
+      return createLocalSnippetElement(tag, commonProps, undefined, {
+        comment:
+          "이 Figma 컴포넌트는 @seed-design/react@1.2보다 낮은 버전의 SelectBox입니다. 신규 컴포넌트로 교체할 수 있습니다.",
+      });
+    },
+  );
+
+export const createLegacySelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const selectBoxHandler = createLegacySelectBoxHandler(ctx);
+
+  return defineComponentHandler<LegacySelectBoxGroupProperties>(
+    metadata.componentDeprecatedSelectBoxGroup.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const tag = match(props.Control.value)
+        .with("Checkbox", () => "CheckSelectBoxGroup")
+        .with("Radio", () => "RadioSelectBoxRoot")
+        .exhaustive();
+
+      const selectBoxes = findAllInstances<LegacySelectBoxProperties>({
+        node,
+        key: selectBoxHandler.key,
+      });
+
+      const selectedSelectBox = selectBoxes.find(
+        (selectBox) => selectBox.componentProperties.Selected.value === "True",
+      );
+
+      // traverse the container like it's a frame
+      const vStackProps = traverse({ ...node, type: "FRAME" })?.props;
+
+      const stack = createSeedReactElement(
+        "VStack",
+        vStackProps,
+        selectBoxes.map((box) => selectBoxHandler.transform(box, traverse)),
+      );
+
+      const commonProps = {
+        ...(tag === "RadioSelectBoxRoot" && {
+          defaultValue: selectedSelectBox?.componentProperties["Label#3635:0"].value,
+        }),
+      };
+
+      return createLocalSnippetElement(tag, commonProps, stack, {
+        comment:
+          "이 Figma 컴포넌트는 @seed-design/react@1.2보다 낮은 버전의 SelectBox입니다. 신규 컴포넌트로 교체할 수 있습니다.",
+      });
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/legacy-text-field.ts

@@ -0,0 +1,196 @@
+import type {
+  LegacyMultilineTextFieldProperties,
+  LegacyTextFieldProperties,
+} from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
+
+export const createLegacyTextFieldHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<LegacyTextFieldProperties>(
+    metadata.componentDeprecatedTextField.key,
+    ({ componentProperties: props }) => {
+      const {
+        Size: { value: size },
+        State: { value: state },
+        Filled: { value: filled },
+        "Show Header#870:0": { value: showHeader },
+        "Label#14964:0": { value: label },
+        "Show Indicator#1259:0": { value: showIndicator },
+        "Indicator#15327:249": { value: indicator },
+        "Show Prefix#958:125": { value: showPrefix },
+        "Show Prefix Icon#1267:50": { value: showPrefixIcon },
+        "Prefix Icon#1267:25": prefixIcon,
+        "Show Prefix Text#1267:0": { value: showPrefixText },
+        "Prefix Text#15327:101": { value: prefix },
+        "Placeholder#958:0": { value: placeholder },
+        "Filled Text#1304:0": { value: defaultValue },
+        "Show Suffix#958:100": { value: showSuffix },
+        "Show Suffix Icon#1267:75": { value: showSuffixIcon },
+        "Suffix Icon #1267:100": suffixIcon,
+        "Show Suffix Text#1267:125": { value: showSuffixText },
+        "Suffix Text#15327:138": { value: suffix },
+        "Show Footer#958:25": { value: showFooter },
+        "Show Description#958:50": { value: showDescription },
+        "Description#12626:5": { value: description },
+        "Show Character Count#958:75": { value: showCharacterCount },
+        "Character Count#15327:64": { value: _characterCount },
+        "Max Character Count#15327:27": { value: maxCharacterCount },
+      } = props;
+
+      const states = state.split("-");
+
+      const commonProps = {
+        size: handleSizeProp(size),
+        // header
+        ...(showHeader && {
+          label,
+        }),
+        ...(showHeader &&
+          showIndicator && {
+            indicator,
+          }),
+        // input affixes
+        ...(showPrefix &&
+          showPrefixIcon && {
+            prefixIcon: ctx.iconHandler.transform(prefixIcon),
+          }),
+        ...(showPrefix &&
+          showPrefixText && {
+            prefix,
+          }),
+        ...(showSuffix &&
+          showSuffixIcon && {
+            suffixIcon: ctx.iconHandler.transform(suffixIcon),
+          }),
+        ...(showSuffix &&
+          showSuffixText && {
+            suffix,
+          }),
+        // input
+        ...(filled === "True" && {
+          defaultValue,
+        }),
+        ...(states.includes("Invalid") && {
+          invalid: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Read Only") && {
+          readOnly: true,
+        }),
+        // footer
+        ...(showFooter &&
+          showDescription &&
+          states.includes("Invalid") && {
+            // invalid인 경우 description을 error로 사용
+            errorMessage: description,
+          }),
+        ...(showFooter &&
+          showDescription &&
+          !states.includes("Invalid") && {
+            // invalid가 아닌 경우 description을 description으로 사용
+            description,
+          }),
+        ...(showFooter &&
+          showCharacterCount && {
+            maxGraphemeCount: Number(maxCharacterCount),
+          }),
+      };
+
+      const inputProps = {
+        placeholder,
+      };
+
+      const TextFieldChildren = createLocalSnippetElement("TextFieldInput", inputProps);
+
+      return createLocalSnippetElement("TextField", commonProps, TextFieldChildren, {
+        comment:
+          "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다.",
+      });
+    },
+  );
+
+export const createLegacyMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<LegacyMultilineTextFieldProperties>(
+    metadata.componentDeprecatedMultilineTextField.key,
+    ({ componentProperties: props }) => {
+      const {
+        Size: { value: size },
+        State: { value: state },
+        Filled: { value: filled },
+        "Show Header#870:0": { value: showHeader },
+        "Label#15327:323": { value: label },
+        "Show Indicator#1259:0": { value: showIndicator },
+        "Indicator#15327:286": { value: indicator },
+        "Placeholder#958:0": { value: placeholder },
+        "Filled Text#1304:0": { value: defaultValue },
+        "Show Footer#958:25": { value: showFooter },
+        "Show Description#958:50": { value: showDescription },
+        "Description#15327:212": { value: description },
+        "Show Character count#958:75": { value: showCharacterCount },
+        "Character Count#15327:360": { value: _characterCount },
+        "Max Character Count#15327:175": { value: maxCharacterCount },
+      } = props;
+
+      const states = state.split("-");
+
+      const commonProps = {
+        size: handleSizeProp(size),
+        // header
+        ...(showHeader && {
+          label,
+        }),
+        ...(showHeader &&
+          showIndicator && {
+            indicator,
+          }),
+        // input
+        ...(filled === "True" && {
+          defaultValue,
+        }),
+        ...(states.includes("Invalid") && {
+          invalid: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Read Only") && {
+          readOnly: true,
+        }),
+        // footer
+        ...(showFooter &&
+          showDescription &&
+          states.includes("Invalid") && {
+            // invalid인 경우 description을 error로 사용
+            errorMessage: description,
+          }),
+        ...(showFooter &&
+          showDescription &&
+          !states.includes("Invalid") && {
+            // invalid가 아닌 경우 description을 description으로 사용
+            description,
+          }),
+        ...(showFooter &&
+          showCharacterCount && {
+            maxGraphemeCount: Number(maxCharacterCount),
+          }),
+      };
+
+      const inputProps = {
+        placeholder,
+      };
+
+      const TextFieldChildren = createLocalSnippetElement("TextFieldTextarea", inputProps);
+
+      return createLocalSnippetElement("TextField", commonProps, TextFieldChildren, {
+        comment:
+          "이 Figma 컴포넌트는 @seed-design/react@1.1보다 낮은 버전의 TextField입니다. 신규 컴포넌트로 교체할 수 있습니다.",
+      });
+    },
+  );

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

@@ -0,0 +1,20 @@
+import type { ListHeaderProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { camelCase } from "change-case";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("list-header");
+
+export const createListHeaderHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ListHeaderProperties>(
+    metadata.componentListHeader.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        variant: camelCase(props["Variant"].value),
+      };
+
+      return createLocalSnippetElement("ListHeader", commonProps, props["Title#28588:0"].value);
+    },
+  );

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

@@ -0,0 +1,163 @@
+import type {
+  ListItemSuffixIconProperties,
+  ListItemPrefixIconProperties,
+  ListItemProperties,
+} from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import * as components from "@/entities/data/__generated__/components";
+import type { NormalizedTextNode } from "@/normalizer";
+import { findAllInstances, findOne } from "@/utils/figma-node";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("list");
+
+const PREFIX_KEYS = [
+  components.componentListItemPrefixCheckbox.key,
+  components.componentListItemPrefixRadiomark.key,
+  components.componentListItemPrefixIcon.key,
+  components.componentListItemPrefixAvatar.key,
+  components.componentListItemPrefixImage.key,
+  components.componentListItemPrefixCustom.key,
+];
+
+const SUFFIX_KEYS = [
+  components.componentListItemSuffixCheckbox.key,
+  components.componentListItemSuffixRadiomark.key,
+  components.componentListItemSuffixChevron.key,
+  components.componentListItemSuffixSwitch.key,
+  components.componentListItemSuffixCustom.key,
+  components.componentListItemSuffixIcon.key,
+  components.componentListItemSuffixChevronWithText.key,
+  metadata.componentListItemSuffixIconButton.key,
+  metadata.componentListItemSuffixActionButton.key,
+];
+
+export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ListItemProperties>(metadata.componentListItem.key, (node, traverse) => {
+    const { componentProperties: props } = node;
+
+    const { alignItems, title } = match(props.Variants.value)
+      .with("Single Line", () => ({ alignItems: undefined, title: props["Title#28452:21"].value }))
+      .with("Multi Line", () => ({
+        alignItems: "flex-start",
+        title: props["Title #28487:0"].value,
+      }))
+      .exhaustive();
+
+    const detailNode = findOne(
+      node,
+      (node) => node.type === "TEXT" && node.name === "Sub Text",
+    ) as NormalizedTextNode | null;
+
+    const prefixNode = (() => {
+      if (props["Has Prefix#28452:85"].value === false) return null;
+
+      for (const key of PREFIX_KEYS) {
+        const [found] = findAllInstances<ListItemPrefixIconProperties | {}>({ node, key });
+
+        if (found) return found;
+      }
+
+      return null;
+    })();
+
+    const prefix = (() => {
+      if (!prefixNode) return undefined;
+
+      if ("Icon#28452:111" in prefixNode.componentProperties) {
+        return createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(prefixNode.componentProperties["Icon#28452:111"]),
+        });
+      }
+
+      return traverse(prefixNode.children[0]);
+    })();
+
+    const suffixNode = (() => {
+      if (props["Has Suffix#28452:64"].value === false) return null;
+
+      for (const key of SUFFIX_KEYS) {
+        const [found] = findAllInstances<ListItemSuffixIconProperties | {}>({ node, key });
+
+        if (found) return found;
+      }
+
+      return null;
+    })();
+
+    const suffix = (() => {
+      if (!suffixNode) return undefined;
+
+      if ("Icon#28347:9" in suffixNode.componentProperties) {
+        return createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(suffixNode.componentProperties["Icon#28347:9"]),
+        });
+      }
+
+      return traverse(suffixNode.children[0]);
+    })();
+
+    const disabled = props.State.value === "Disabled";
+
+    const tag = (() => {
+      if (suffix?.tag === "Switchmark") {
+        return "ListSwitchItem";
+      }
+
+      if (prefix?.tag === "Checkmark" || suffix?.tag === "Checkmark") {
+        return "ListCheckItem";
+      }
+
+      if (prefix?.tag === "Radiomark" || suffix?.tag === "Radiomark") {
+        return "ListRadioItem";
+      }
+
+      // checkmark/radiomark 없는데 disabled인 경우 Button으로 추측
+      if (disabled) {
+        return "ListButtonItem";
+      }
+
+      return "ListItem";
+    })();
+
+    const commonProps = {
+      ...(tag === "ListRadioItem" && {
+        value: title,
+      }),
+      alignItems,
+      title,
+      ...(props["Has Detail#28469:1"].value &&
+        detailNode && {
+          detail: detailNode.characters,
+        }),
+      ...(prefix && { prefix }),
+      ...(suffix && { suffix }),
+      ...(disabled &&
+        (tag === "ListButtonItem" ||
+          tag === "ListCheckItem" ||
+          tag === "ListRadioItem" ||
+          tag === "ListSwitchItem") && {
+          disabled: true,
+        }),
+      ...(props.Highlighted.value === "True" && {
+        highlighted: true,
+      }),
+    };
+
+    const comment = match(tag)
+      .with("ListItem", () => "목적에 따라 ListButtonItem이나 ListLinkItem으로 바꿔 사용하세요.")
+      .with("ListCheckItem", () => `<List as="fieldset">과 함께 사용하세요.`)
+      .with("ListRadioItem", () => "<RadioGroup.Root>와 함께 사용하세요.")
+      .otherwise(() => undefined);
+
+    const list = createLocalSnippetElement(tag, commonProps, undefined, { comment });
+
+    if (props["Divider#28441:0"].value) {
+      return createElement("", {}, [list, createLocalSnippetElement("ListDivider")]);
+    }
+
+    return list;
+  });

package/src/codegen/targets/react/component/handlers/manner-temp-badge.ts

@@ -0,0 +1,21 @@
+import type { MannerTempBadgeProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp-badge");
+
+export const createMannerTempBadgeHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MannerTempBadgeProperties>(
+    metadata.componentMannerTempBadge.key,
+    ({ children }) => {
+      const textNode = children.find((child) => child.type === "TEXT");
+
+      const commonProps = {
+        temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1"),
+      };
+
+      return createLocalSnippetElement("MannerTempBadge", commonProps);
+    },
+  );

package/src/codegen/targets/react/component/handlers/manner-temp.ts

@@ -0,0 +1,18 @@
+import type { MannerTempProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp");
+
+export const createMannerTempHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MannerTempProperties>(metadata.componentMannerTemp.key, ({ children }) => {
+    const textNode = children.find((child) => child.type === "TEXT");
+
+    const commonProps = {
+      temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1"),
+    };
+
+    return createLocalSnippetElement("MannerTemp", commonProps);
+  });

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

@@ -0,0 +1,111 @@
+import type {
+  MenuSheetGroupProperties,
+  MenuSheetItemProperties,
+  MenuSheetProperties,
+} 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 { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("menu-sheet");
+const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
+  createLocalSnippetHelper("action-button");
+
+const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<MenuSheetItemProperties>(
+    metadata.privateComponentMenuSheetMenuItem.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        tone: camelCase(props.Tone.value),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(props["Show Prefix Icon#17043:5"].value && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
+        }),
+        label: props["Label#55905:8"].value,
+        ...(props["Show Item Description#51411:19"].value && {
+          description: props["Sub Text#51411:0"].value,
+        }),
+      };
+
+      return createLocalSnippetElement("MenuSheetItem", commonProps);
+    },
+  );
+
+const createMenuSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetItemHandler = createMenuSheetItemHandler(ctx);
+
+  return defineComponentHandler<MenuSheetGroupProperties>(
+    metadata.privateComponentMenuSheetMenuGroup.key,
+    (node, traverse) => {
+      const items = findAllInstances<MenuSheetItemProperties>({
+        node,
+        key: menuSheetItemHandler.key,
+      });
+
+      const contentChildren = items.map((item) => menuSheetItemHandler.transform(item, traverse));
+
+      return createLocalSnippetElement("MenuSheetGroup", undefined, contentChildren);
+    },
+  );
+};
+
+export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const menuSheetGroupHandler = createMenuSheetGroupHandler(ctx);
+
+  return defineComponentHandler<MenuSheetProperties>(
+    metadata.componentMenuSheet.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const groups = findAllInstances<MenuSheetGroupProperties>({
+        node,
+        key: menuSheetGroupHandler.key,
+      });
+
+      const contentChildren = groups.map((group) =>
+        menuSheetGroupHandler.transform(group, traverse),
+      );
+
+      const title = props["Show Header#17043:12"].value
+        ? props["Title Text#14599:0"].value
+        : undefined;
+
+      const description =
+        props["Show Header#17043:12"].value && props["Show Header Description#32984:0"].value
+          ? props["Description Text#21827:0"].value
+          : undefined;
+
+      const { labelAlign } = match(props.Layout.value)
+        .with("Text with Icon", () => ({ labelAlign: "left" }))
+        .with("Text Only", () => ({ labelAlign: "center" }))
+        .exhaustive();
+
+      const content = createLocalSnippetElement(
+        "MenuSheetContent",
+        { title, description, labelAlign },
+        contentChildren,
+        {
+          comment: title
+            ? undefined
+            : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+        },
+      );
+
+      const trigger = createLocalSnippetElement(
+        "MenuSheetTrigger",
+        { asChild: true },
+        createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"),
+      );
+
+      return createLocalSnippetElement("MenuSheetRoot", undefined, [trigger, content]);
+    },
+  );
+};