@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,333 @@
+import type {
+  FieldFooterProperties,
+  FieldHeaderProperties,
+  SelectBoxGroupFieldProperties,
+  SelectBoxGroupProperties,
+  SelectBoxHorizontalProperties,
+  SelectBoxPrefixIconProperties,
+  SelectBoxVerticalProperties,
+} 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 { findAllInstances } from "@/utils/figma-node";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+
+const PREFIX_KEYS = [
+  components.componentSelectBoxItemPrefixIcon.key,
+  components.componentSelectBoxItemPrefixAvatar.key,
+  components.componentSelectBoxItemPrefixImage.key,
+  components.componentSelectBoxItemPrefixBadge.key,
+  components.componentSelectBoxItemPrefixCustom.key,
+];
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("select-box");
+
+const createSelectBoxHorizontalHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SelectBoxHorizontalProperties>(
+    metadata.componentSelectBoxItemHorizontal.key,
+    (node) => {
+      const { componentProperties: props } = node;
+
+      const { tag, suffix } = match(props.Control.value)
+        .with("Checkmark", () => ({
+          tag: "CheckSelectBox" as const,
+          suffix: createLocalSnippetElement("CheckSelectBoxCheckmark"),
+        }))
+        .with("Radiomark", () => ({
+          tag: "RadioSelectBoxItem" as const,
+          suffix: createLocalSnippetElement("RadioSelectBoxRadiomark"),
+        }))
+        .with("None", () => ({
+          tag: "UnknownSelectBox" as const,
+          suffix: undefined,
+        }))
+        .exhaustive();
+
+      const prefixNode = (() => {
+        if (props["Has Prefix#28452:85"].value === false) return null;
+
+        for (const key of PREFIX_KEYS) {
+          const [found] = findAllInstances<SelectBoxPrefixIconProperties | {}>({ node, key });
+
+          if (found) return found;
+        }
+
+        return null;
+      })();
+
+      const prefixIcon = (() => {
+        if (!prefixNode) return undefined;
+
+        if ("Icon#2475:0" in prefixNode.componentProperties) {
+          return ctx.iconHandler.transform(prefixNode.componentProperties["Icon#2475:0"]);
+        }
+
+        // React Select Box only supports icon for now
+        // return undefined if not icon
+
+        return undefined;
+      })();
+
+      const commonProps = {
+        // layout: "horizontal",
+
+        ...(prefixIcon && { prefixIcon }),
+
+        label: props["Title#28452:21"].value,
+
+        ...(props["Show Description#28469:1"].value && {
+          description: props["Description#56540:0"].value,
+        }),
+
+        ...(suffix && { suffix }),
+
+        ...(props["Show Custom Content#56903:0"].value && {
+          footer: createSeedReactElement("Box", undefined, "Footer Placeholder"),
+        }),
+
+        ...(tag === "RadioSelectBoxItem" && {
+          value: props["Title#28452:21"].value,
+        }),
+
+        ...(tag === "CheckSelectBox" &&
+          props.Selected.value === "True" && {
+            defaultChecked: true,
+          }),
+
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+      };
+
+      return createLocalSnippetElement(tag, commonProps, undefined);
+    },
+  );
+
+const createSelectBoxVerticalHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SelectBoxVerticalProperties>(
+    metadata.componentSelectBoxItemVertical.key,
+    (node) => {
+      const { componentProperties: props } = node;
+
+      const { tag, suffix } = match(props.Control.value)
+        .with("Checkmark", () => ({
+          tag: "CheckSelectBox" as const,
+          suffix: createLocalSnippetElement("CheckSelectBoxCheckmark"),
+        }))
+        .with("Radiomark", () => ({
+          tag: "RadioSelectBoxItem" as const,
+          suffix: createLocalSnippetElement("RadioSelectBoxRadiomark"),
+        }))
+        .with("None", () => ({
+          tag: "UnknownSelectBox" as const,
+          suffix: undefined,
+        }))
+        .exhaustive();
+
+      const prefixNode = (() => {
+        if (props["Has Prefix#58766:115"].value === false) return null;
+
+        for (const key of PREFIX_KEYS) {
+          const [found] = findAllInstances<SelectBoxPrefixIconProperties | {}>({ node, key });
+
+          if (found) return found;
+        }
+
+        return null;
+      })();
+
+      const prefixIcon = (() => {
+        if (!prefixNode) return undefined;
+
+        if ("Icon#2475:0" in prefixNode.componentProperties) {
+          return ctx.iconHandler.transform(prefixNode.componentProperties["Icon#2475:0"]);
+        }
+
+        // React Select Box only supports icon for now
+        // return undefined if not icon
+
+        return undefined;
+      })();
+
+      const commonProps = {
+        // layout: "vertical",
+
+        ...(prefixIcon && { prefixIcon }),
+
+        label: props["Title#58766:114"].value,
+
+        ...(props["Show Description#58766:117"].value && {
+          description: props["Description#58766:118"].value,
+        }),
+
+        ...(suffix && { suffix }),
+
+        ...(props["Show Custom Content#58766:119"].value && {
+          footer: createSeedReactElement("Box", undefined, "Footer Placeholder"),
+        }),
+
+        ...(tag === "RadioSelectBoxItem" && {
+          value: props["Title#58766:114"].value,
+        }),
+
+        ...(tag === "CheckSelectBox" &&
+          props.Selected.value === "True" && {
+            defaultChecked: true,
+          }),
+
+        ...(props.State.value === "Disabled" && {
+          disabled: true,
+        }),
+      };
+
+      return createLocalSnippetElement(tag, commonProps, undefined);
+    },
+  );
+
+export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
+  const horizontalHandler = createSelectBoxHorizontalHandler(ctx);
+  const verticalHandler = createSelectBoxVerticalHandler(ctx);
+
+  return defineComponentHandler<SelectBoxGroupProperties>(
+    metadata.componentSelectBoxGroup.key,
+    (node, traverse) => {
+      const props = node.componentProperties;
+
+      const horizontalBoxes = findAllInstances<SelectBoxHorizontalProperties>({
+        node,
+        key: horizontalHandler.key,
+      });
+
+      const verticalBoxes = findAllInstances<SelectBoxVerticalProperties>({
+        node,
+        key: verticalHandler.key,
+      });
+
+      const boxes = [...horizontalBoxes, ...verticalBoxes];
+
+      const selectedSelectBox = boxes.find(
+        (selectBox) => selectBox.componentProperties.Selected.value === "True",
+      );
+
+      const { tag, comment } = match([
+        boxes.every((box) => box.componentProperties.Control.value === "Radiomark"),
+        boxes.every((box) => box.componentProperties.Control.value === "Checkmark"),
+      ])
+        .with([true, false], () => ({ tag: "RadioSelectBoxRoot" as const, comment: undefined }))
+        .with([false, true], () => ({ tag: "CheckSelectBoxGroup" as const, comment: undefined }))
+        .otherwise(() => ({
+          tag: "UnknownSelectBoxGroup" as const,
+          comment:
+            "모든 SelectBox의 Control 프로퍼티가 동일하지 않거나 None이 포함되어 있기 때문에 코드에서 어떻게 사용될지 파악할 수 없습니다. 모든 children 요소들을 CheckSelectBox 또는 RadioSelectBoxItem으로 변경하고 CheckSelectBoxGroup 또는 RadioSelectBoxRoot로 묶어 사용하세요.",
+        }));
+
+      const selectedSelectBoxProperties = selectedSelectBox?.componentProperties;
+
+      const commonProps = {
+        columns: Number(props.Column.value[0]),
+
+        ...(selectedSelectBoxProperties &&
+          tag === "RadioSelectBoxRoot" && {
+            defaultValue:
+              "Title#28452:21" in selectedSelectBoxProperties
+                ? selectedSelectBoxProperties["Title#28452:21"].value
+                : selectedSelectBoxProperties["Title#58766:114"].value,
+          }),
+      };
+
+      const children = [
+        ...horizontalBoxes.map((box) => horizontalHandler.transform(box, traverse)),
+        ...verticalBoxes.map((box) => verticalHandler.transform(box, traverse)),
+      ];
+
+      return createLocalSnippetElement(tag, commonProps, children, { comment });
+    },
+  );
+};
+
+export const createSelectBoxGroupFieldHandler = (ctx: ComponentHandlerDeps) => {
+  const fieldHeaderHandler = createFieldHeaderHandler(ctx);
+  const fieldFooterHandler = createFieldFooterHandler(ctx);
+  const selectBoxGroupHandler = createSelectBoxGroupHandler(ctx);
+
+  return defineComponentHandler<SelectBoxGroupFieldProperties>(
+    metadata.templateSelectBoxField.key,
+    (node, traverse) => {
+      const { componentProperties: props } = node;
+
+      const [group] = findAllInstances<SelectBoxGroupProperties>({
+        node,
+        key: selectBoxGroupHandler.key,
+      });
+
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      const __headerProps =
+        props["Show Header#40606:8"].value && fieldHeader
+          ? (fieldHeaderHandler.transform(fieldHeader, traverse).props as FieldHeaderProps)
+          : {};
+      const __footerProps =
+        props["Show Footer#40606:9"].value && fieldFooter
+          ? (fieldFooterHandler.transform(fieldFooter, traverse).props as FieldFooterProps)
+          : {};
+
+      const groupResult = selectBoxGroupHandler.transform(group, traverse);
+
+      const { headerProps, footerProps } = match(
+        groupResult.tag as "RadioSelectBoxRoot" | "CheckSelectBoxGroup" | "UnknownSelectBoxGroup",
+      )
+        .with("RadioSelectBoxRoot", () => {
+          const { required: _required, ...headerProps } = __headerProps;
+          const { maxGraphemeCount: _maxGraphemeCount, ...footerProps } = __footerProps;
+
+          return { headerProps, footerProps };
+        })
+        .with("CheckSelectBoxGroup", () => {
+          const { required: _required, ...headerProps } = __headerProps;
+          const {
+            maxGraphemeCount: _maxGraphemeCount,
+            invalid: _invalid,
+            ...footerProps
+          } = __footerProps;
+
+          return { headerProps, footerProps };
+        })
+        .with("UnknownSelectBoxGroup", () => {
+          const { required: _required, ...headerProps } = __headerProps;
+          const {
+            maxGraphemeCount: _maxGraphemeCount,
+            invalid: _invalid,
+            ...footerProps
+          } = __footerProps;
+
+          return { headerProps, footerProps };
+        })
+        .exhaustive();
+
+      return {
+        ...groupResult,
+        props: {
+          ...groupResult.props,
+          ...headerProps,
+          ...footerProps,
+        },
+      };
+    },
+  );
+};

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

@@ -0,0 +1,26 @@
+import type { SkeletonProperties } 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 { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+export const createSkeletonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SkeletonProperties>(metadata.componentSkeleton.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/slider.ts

@@ -0,0 +1,117 @@
+import type {
+  FieldFooterProperties,
+  FieldHeaderProperties,
+  SliderFieldProperties,
+  SliderProperties,
+  SliderTicksProperties,
+} 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 { match } from "ts-pattern";
+import { findAllInstances } from "@/utils/figma-node";
+import {
+  createFieldFooterHandler,
+  createFieldHeaderHandler,
+  type FieldFooterProps,
+  type FieldHeaderProps,
+} from "@/codegen/targets/react/component/handlers/field";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("slider");
+
+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: sliderHandler.key,
+      });
+      const [fieldHeader] = findAllInstances<FieldHeaderProperties>({
+        node,
+        key: fieldHeaderHandler.key,
+      });
+      const [fieldFooter] = findAllInstances<FieldFooterProperties>({
+        node,
+        key: fieldFooterHandler.key,
+      });
+
+      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.componentSlider.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: metadata.privateComponentSliderItemTickMark.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/snackbar.ts

@@ -0,0 +1,25 @@
+import type { SnackbarProperties } 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";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("snackbar");
+
+export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SnackbarProperties>(
+    metadata.componentSnackbar.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/switch.ts

@@ -0,0 +1,35 @@
+import type { SwitchProperties } 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 { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
+
+export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SwitchProperties>(
+    metadata.componentSwitch.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("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/switchmark.ts

@@ -0,0 +1,26 @@
+import type { SwitchmarkProperties } 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 { match } from "ts-pattern";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
+
+export const createSwitchmarkHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<SwitchmarkProperties>(
+    metadata.componentSwitchmark.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);
+    },
+  );