@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,101 @@
+import type {
+  PageBannerButtonProperties,
+  PageBannerProperties,
+} from "@/codegen/component-properties.archive";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+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 SUFFIX_BUTTON_KEY = "7dce4e1242761ccd8e5da42278fc2d870918039c";
+
+const createPageBannerButtonHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<PageBannerButtonProperties>(SUFFIX_BUTTON_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.pageBanner.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: SUFFIX_BUTTON_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/archive/progress-circle.ts

@@ -0,0 +1,55 @@
+import type { ProgressCircleProperties } 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 { 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.progressCircle.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/archive/radio-group.ts

@@ -0,0 +1,31 @@
+import type { RadioProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/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";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("radio-group");
+
+export const createRadioGroupItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<RadioProperties>(metadata.radio.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);
+  });

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

@@ -0,0 +1,27 @@
+import type { RadiomarkProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/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.radiomark.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/archive/reaction-button.ts

@@ -0,0 +1,37 @@
+import type { ReactionButtonProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/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.reactionButton.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/archive/result-section.ts

@@ -0,0 +1,67 @@
+import type {
+  ActionButtonGhostProperties,
+  ActionButtonProperties,
+  ResultSectionProperties,
+} 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, 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.resultSection.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/archive/segmented-control.ts

@@ -0,0 +1,64 @@
+import type {
+  SegmentedControlItemProperties,
+  SegmentedControlProperties,
+} 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";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("segmented-control");
+
+const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
+const createSegmentedControlItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SegmentedControlItemProperties>(
+    SEGMENTED_CONTROL_ITEM_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.segmentedControl.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 중 하나를 제공해야 합니다.",
+      });
+    },
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { SkeletonProperties } 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 { match } from "ts-pattern";
+import { createSeedReactElement } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+
+export const createSkeletonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SkeletonProperties>(metadata.skeleton.key, (node) => {
+    const { componentProperties: props, layoutSizingHorizontal, layoutSizingVertical } = node;
+
+    const commonProps = {
+      radius: camelCase(props.Radius.value),
+      width: match(layoutSizingHorizontal)
+        .with("FIXED", () => ctx.valueResolver.getFormattedValue.width(node))
+        .with("FILL", () => "full")
+        .otherwise(() => "full"),
+      height: match(layoutSizingVertical)
+        .with("FIXED", () => ctx.valueResolver.getFormattedValue.height(node))
+        .with("FILL", () => "full")
+        .otherwise(() => "full"),
+    };
+
+    return createSeedReactElement("Skeleton", commonProps);
+  });

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

@@ -0,0 +1,114 @@
+import type {
+  FieldFooterProperties,
+  FieldHeaderProperties,
+  SliderFieldProperties,
+  SliderProperties,
+  SliderTicksProperties,
+} from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  FIELD_KEYS,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/archive/field";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("slider");
+
+const SLIDER_TICK_KEY = "ace432ffb7a2af13bce549b19c932ac5f96a9a78";
+
+function getSliderComment(props: { markers?: unknown; ticks?: unknown } & Record<string, unknown>) {
+  return [
+    "min, max, step 값을 적절히 조정해주세요.",
+    props.markers && "markers 배열을 채워주세요.",
+    props.ticks && "ticks 배열을 채워주세요.",
+  ]
+    .filter(Boolean)
+    .join(" ");
+}
+
+export const createSliderFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const sliderHandler = createSliderHandler(ctx);
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+
+  return defineComponentHandler<SliderFieldProperties>(
+    metadata.templateSliderField.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const [slider] = findAllInstances<SliderProperties>({ node, key: metadata.slider.key });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: FIELD_KEYS.HEADER,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: FIELD_KEYS.FOOTER,
+      });
+
+      const sliderProps = sliderHandler.transform(slider, traverse).props;
+
+      // maxGraphemeCount and required can't be props of Slider
+      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 commonProps = {
+        ...sliderProps,
+        ...headerProps,
+        ...footerProps,
+      };
+
+      return createLocalSnippetElement("Slider", commonProps, undefined, {
+        comment: getSliderComment(commonProps),
+      });
+    },
+  );
+};
+
+export const createSliderHandler = (_ctx: ComponentHandlerDeps) => {
+  return defineComponentHandler<SliderProperties>(metadata.slider.key, (node) => {
+    const { componentProperties: props } = node;
+
+    const { min, max, defaultValues } = match(props.Value.value)
+      .with("Single", () => ({ min: 0, max: 100, defaultValues: [50] }))
+      .with("Range", () => ({ min: 0, max: 100, defaultValues: [0, 50] }))
+      .exhaustive();
+
+    const [ticks] = findAllInstances<SliderTicksProperties>({ node, key: SLIDER_TICK_KEY });
+
+    const commonProps = {
+      min,
+      max,
+      defaultValues,
+      hideRange: props["Show Active Track#48156:0"].value === false,
+      ...(props["Show Markers#49596:0"].value === true && {
+        markers: [],
+      }),
+      ...(props["Has Tick Mark#47921:0"].value === true &&
+        ticks && {
+          ticks: [],
+          tickWeight: ticks.componentProperties.Type.value === "Discrete" ? "thick" : "thin",
+        }),
+      ...(props.State.value === "Disabled" && {
+        disabled: true,
+      }),
+    };
+
+    return createLocalSnippetElement("Slider", commonProps, undefined, {
+      comment: getSliderComment(commonProps),
+    });
+  });
+};

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

@@ -0,0 +1,25 @@
+import type { SnackbarProperties } 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";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("snackbar");
+
+export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SnackbarProperties>(
+    metadata.snackbar.key,
+    ({ componentProperties: props }) => {
+      const commonProps = {
+        message: props["Message#1528:4"].value,
+        variant: camelCase(props.Variant.value),
+        ...(props["Show Action#1528:0"].value && {
+          actionLabel: props["Action Label#1528:8"].value,
+        }),
+      };
+
+      // TODO: adapter.create({ render })
+      return createLocalSnippetElement("Snackbar", commonProps);
+    },
+  );

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

@@ -0,0 +1,39 @@
+import type { SwitchProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
+
+export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SwitchProperties>(
+    metadata._switch.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated] Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        tone,
+        size: props.Size.value,
+      };
+
+      if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
+        return createLocalSnippetElement("Switchmark", commonProps);
+      }
+
+      return createLocalSnippetElement("Switch", {
+        ...commonProps,
+        label: props["Label#36578:0"].value,
+        ...(props.Selected.value === "True" && {
+          defaultChecked: true,
+        }),
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+      });
+    },
+  );

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

@@ -0,0 +1,26 @@
+import type { SwitchmarkProperties } from "@/codegen/component-properties.archive";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/archive/component-sets";
+import { createLocalSnippetHelper } from "../../../element-factories";
+import type { ComponentHandlerDeps } from "../../deps.interface";
+import { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
+
+export const createSwitchmarkHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SwitchmarkProperties>(
+    metadata.switchmark.key,
+    ({ componentProperties: props }) => {
+      const tone = match(props.Tone.value)
+        .with("Neutral", () => "neutral")
+        .with("🚫[Deprecated] Brand", () => "brand")
+        .exhaustive();
+
+      const commonProps = {
+        tone,
+        size: props.Size.value,
+      };
+
+      return createLocalSnippetElement("Switchmark", commonProps);
+    },
+  );