@seed-design/figma 0.0.0-alpha-20260324091316

package/src/codegen/targets/react/component/handlers/page-banner.ts

@@ -0,0 +1,106 @@
+import type {
+  PageBannerButtonProperties,
+  PageBannerProperties,
+} 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 { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
+import { findAllInstances, findOne } 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("page-banner");
+
+const createPageBannerButtonHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<PageBannerButtonProperties>(
+    components.componentPageBannerSuffixAction.key,
+    (node) => {
+      return createElement(
+        "PageBannerButton",
+        undefined,
+        node.componentProperties["Label#39890:0"].value,
+      );
+    },
+  );
+
+export const createPageBannerHandler = (ctx: ComponentHandlerDeps) => {
+  const buttonHandler = createPageBannerButtonHandler(ctx);
+
+  return defineComponentHandler<PageBannerProperties>(
+    metadata.componentPageBanner.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const { tag, suffix } = match(props.Interaction.value)
+        .with("Actionable", () => ({ tag: "ActionablePageBanner", suffix: undefined }))
+        .with("Dismissible", () => ({ tag: "DismissiblePageBanner", suffix: undefined }))
+        .with("Display", () => ({ tag: "PageBanner", suffix: undefined }))
+        .with("Display (With Action)", () => {
+          const [buttonNode] = findAllInstances<PageBannerButtonProperties>({
+            node,
+            key: components.componentPageBannerSuffixAction.key,
+          });
+          const suffix = buttonNode ? buttonHandler.transform(buttonNode, traverse) : undefined;
+
+          return { tag: "PageBanner", suffix };
+        })
+        .with("Actionable (Custom)", () => ({
+          tag: "PageBanner",
+          suffix: createElement("div", undefined, "Custom Content"),
+        }))
+        .exhaustive();
+
+      const textNode = findOne(
+        node,
+        (child) => child.type === "TEXT" && child.name === "Text",
+      ) as NormalizedTextNode | null;
+
+      if (!textNode) {
+        return createLocalSnippetElement(tag, undefined, undefined, {
+          comment: "내용을 제공해주세요.",
+        });
+      }
+
+      const slices = textNode.segments;
+
+      let title: string | undefined;
+      let description: string | undefined;
+
+      switch (slices.length) {
+        case 1: {
+          description = slices[0]?.characters.trim();
+
+          break;
+        }
+        case 2: {
+          title = slices[0]?.characters.trim();
+          description = slices[1]?.characters.trim();
+
+          break;
+        }
+      }
+
+      const iconNode = findOne(
+        node,
+        (child) => child.type === "INSTANCE" && child.name === "icon",
+      ) as NormalizedInstanceNode | null;
+
+      const showPrefixIcon = props["Show Prefix Icon#11840:27"].value && iconNode;
+      const prefixIcon = showPrefixIcon ? ctx.iconHandler.transform(iconNode) : undefined;
+
+      const commonProps = {
+        title,
+        description,
+        prefixIcon,
+        tone: camelCase(props.Tone.value),
+        variant: camelCase(props.Variant.value),
+        ...(suffix && { suffix }),
+      };
+
+      return createLocalSnippetElement(tag, commonProps);
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/progress-circle.ts

@@ -0,0 +1,55 @@
+import type { ProgressCircleProperties } from "@/codegen/component-properties";
+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 { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("progress-circle");
+
+export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ProgressCircleProperties>(
+    metadata.componentProgressCircle.key,
+    ({ componentProperties: props }) => {
+      const { value, minValue, maxValue } = match(props.Value.value)
+        .with("Indeterminate", () => ({
+          value: undefined,
+          minValue: undefined,
+          maxValue: undefined,
+        }))
+        .with("0%", () => ({
+          value: 0,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .with("25%", () => ({
+          value: 25,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .with("75%", () => ({
+          value: 75,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .with("100%", () => ({
+          value: 100,
+          minValue: 0,
+          maxValue: 100,
+        }))
+        .exhaustive();
+
+      const commonProps = {
+        value,
+        minValue,
+        maxValue,
+        size: props.Size.value,
+        ...(props.Tone.value !== "Custom(inherit)" && {
+          tone: camelCase(props.Tone.value),
+        }),
+      };
+
+      return createLocalSnippetElement("ProgressCircle", commonProps);
+    },
+  );

package/src/codegen/targets/react/component/handlers/radio-group.ts

@@ -0,0 +1,109 @@
+import type { RadioGroupFieldProperties, RadioProperties } 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";
+import { camelCase } from "change-case";
+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";
+import type { FieldFooterProperties, FieldHeaderProperties } from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("radio-group");
+
+export const createRadioGroupItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<RadioProperties>(
+    metadata.componentRadio.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated]Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        label: props["Label#49990:171"].value,
+        value: props["Label#49990:171"].value,
+        size: handleSizeProp(props.Size.value),
+        tone,
+        weight: camelCase(props.Weight.value),
+      };
+
+      return createLocalSnippetElement("RadioGroupItem", commonProps, undefined, {
+        comment: "RadioGroup으로 묶어서 사용하세요.",
+      });
+    },
+  );
+
+export const createRadioGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const radioItemHandler = createRadioGroupItemHandler(ctx);
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<RadioGroupFieldProperties>(
+    metadata.templateRadioField.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const items = findAllInstances<RadioProperties>({
+        node,
+        key: radioItemHandler.key,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      // maxGraphemeCount and required can't be props of RadioGroup
+      const { required: _required, ...headerProps } =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } =
+        props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {};
+
+      const selectedItem = items.find((item) => item.componentProperties.Selected.value === "True");
+
+      const commonProps = {
+        ...headerProps,
+        ...footerProps,
+
+        ...(selectedItem && {
+          defaultValue: selectedItem.componentProperties["Label#49990:171"].value,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "RadioGroup",
+        commonProps,
+        items.map((item) => {
+          const result = radioItemHandler.transform(item, traverse);
+
+          return {
+            ...result,
+            meta: {
+              ...result.meta,
+
+              // remove comment from individual RadioGroupItem items
+              comment: undefined,
+            },
+          };
+        }),
+      );
+    },
+  );
+};

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

@@ -0,0 +1,27 @@
+import type { RadiomarkProperties } 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";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("radio-group");
+
+export const createRadiomarkHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<RadiomarkProperties>(
+    metadata.componentRadiomark.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated]Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        tone,
+        size: handleSizeProp(props.Size.value),
+      };
+
+      return createLocalSnippetElement("Radiomark", commonProps);
+    },
+  );

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

@@ -0,0 +1,37 @@
+import type { ReactionButtonProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("reaction-button");
+
+export const createReactionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ReactionButtonProperties>(
+    metadata.componentReactionButton.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        ...(props.State.value === "Loading" && {
+          loading: true,
+        }),
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+        ...(props.Selected.value === "True" && {
+          defaultPressed: true,
+        }),
+      };
+
+      return createLocalSnippetElement("ReactionButton", commonProps, [
+        createSeedReactElement("PrefixIcon", {
+          svg: ctx.iconHandler.transform(props["Icon#12379:0"]),
+        }),
+        props["Label#6397:0"].value,
+        props["Show Count#6397:33"].value
+          ? createSeedReactElement("Count", {}, props["Count#15816:0"].value)
+          : undefined,
+      ]);
+    },
+  );

package/src/codegen/targets/react/component/handlers/result-section.ts

@@ -0,0 +1,67 @@
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+  ResultSectionProperties,
+} 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, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import { createActionButtonGhostHandler, createActionButtonHandler } from "./action-button";
+import { handleSizeProp } from "@/codegen/targets/react/component/size";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("result-section");
+
+export const createResultSectionHandler = (ctx: ComponentHandlerDeps) => {
+  const actionButtonHandler = createActionButtonHandler(ctx);
+  const ghostButtonHandler = createActionButtonGhostHandler(ctx);
+
+  return defineComponentHandler<ResultSectionProperties>(
+    metadata.componentResultSection.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [actionButton] =
+        props["Show Buttons#53435:0"].value && props["ㄴShow First Button#53766:0"].value
+          ? findAllInstances<ActionButtonProperties>({
+              node,
+              key: actionButtonHandler.key,
+            })
+          : [undefined];
+
+      const [ghostButton] =
+        props["Show Buttons#53435:0"].value && props["ㄴShow Second Button#53766:3"].value
+          ? findAllInstances<ActionButtonGhostProperties>({
+              node,
+              key: ghostButtonHandler.key,
+            })
+          : [undefined];
+
+      const commonProps = {
+        size: handleSizeProp(props.Size.value),
+        ...(props["Show Asset#45154:14"].value && {
+          asset: createSeedReactElement(
+            "Box",
+            undefined,
+            createElement("div", undefined, undefined, { comment: "Asset Placeholder" }),
+          ),
+        }),
+        title: props["Title#16237:0"].value,
+        description: props["Description#16237:5"].value,
+        ...(actionButton && {
+          primaryActionProps: {
+            children: actionButtonHandler.transform(actionButton, traverse).children[0],
+          },
+        }),
+        ...(ghostButton && {
+          secondaryActionProps: {
+            children: ghostButtonHandler.transform(ghostButton, traverse).children[0],
+          },
+        }),
+      };
+
+      return createLocalSnippetElement("ResultSection", commonProps);
+    },
+  );
+};

package/src/codegen/targets/react/component/handlers/segmented-control.ts

@@ -0,0 +1,63 @@
+import type {
+  SegmentedControlItemProperties,
+  SegmentedControlProperties,
+} 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";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("segmented-control");
+
+const createSegmentedControlItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SegmentedControlItemProperties>(
+    metadata.privateComponentSegmentedControlItem.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+      const commonProps = {
+        value: props["Label#11366:15"].value,
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createLocalSnippetElement(
+        "SegmentedControlItem",
+        commonProps,
+        props["Label#11366:15"].value,
+      );
+    },
+  );
+
+export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
+  const segmentedControlItemHandler = createSegmentedControlItemHandler(ctx);
+
+  return defineComponentHandler<SegmentedControlProperties>(
+    metadata.componentSegmentedControl.key,
+    (node, traverse) => {
+      const segments = findAllInstances<SegmentedControlItemProperties>({
+        node,
+        key: segmentedControlItemHandler.key,
+      });
+
+      const selectedSegment = segments.find((segment) =>
+        segment.componentProperties.State.value.split("-").includes("Selected"),
+      );
+
+      const segmentedControlChildren = segments.map((segment) =>
+        segmentedControlItemHandler.transform(segment, traverse),
+      );
+
+      const commonProps = {
+        ...(selectedSegment && {
+          defaultValue: selectedSegment.componentProperties["Label#11366:15"].value,
+        }),
+      };
+
+      return createLocalSnippetElement("SegmentedControl", commonProps, segmentedControlChildren, {
+        comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      });
+    },
+  );
+};