@seed-design/figma 0.2.1 → 0.2.4

package/src/codegen/component-properties.ts

@@ -107,6 +107,10 @@ export type CheckboxProperties = InferComponentDefinition<
   typeof metadata.checkbox.componentPropertyDefinitions
 >;
 
+export type CheckmarkProperties = InferComponentDefinition<
+  typeof metadata.checkmark.componentPropertyDefinitions
+>;
+
 export type ChipProperties = InferComponentDefinition<
   typeof metadata.chip.componentPropertyDefinitions
 >;
@@ -250,6 +254,30 @@ export type PageBannerButtonProperties = InferComponentDefinition<{
   };
 }>;
 
+export type ListHeaderProperties = InferComponentDefinition<
+  typeof metadata.listHeader.componentPropertyDefinitions
+>;
+
+export type ListItemProperties = InferComponentDefinition<
+  typeof metadata.listItem.componentPropertyDefinitions
+>;
+
+export type ListItemPrefixIconProperties = InferComponentDefinition<{
+  "Icon#28452:111": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "34885:102336";
+    preferredValues: [{ type: "COMPONENT_SET"; key: "1449adc3a216979ac3e6a4a99183a9e9790b220c" }];
+  };
+}>;
+
+export type ListItemSuffixIconProperties = InferComponentDefinition<{
+  "Icon#28347:9": {
+    type: "INSTANCE_SWAP";
+    defaultValue: "26621:23412";
+    preferredValues: [];
+  };
+}>;
+
 export type MannerTempProperties = InferComponentDefinition<
   typeof metadata.mannerTemp.componentPropertyDefinitions
 >;
@@ -266,6 +294,14 @@ export type ProgressCircleProperties = InferComponentDefinition<
   typeof metadata.progressCircle.componentPropertyDefinitions
 >;
 
+export type RadioProperties = InferComponentDefinition<
+  typeof metadata.radio.componentPropertyDefinitions
+>;
+
+export type RadioMarkProperties = InferComponentDefinition<
+  typeof metadata.radioMark.componentPropertyDefinitions
+>;
+
 export type ReactionButtonProperties = InferComponentDefinition<
   typeof metadata.reactionButton.componentPropertyDefinitions
 >;
@@ -414,7 +450,24 @@ export type AppBarRightIconButtonProperties = InferComponentDefinition<{
   };
 }>;
 
-export type TabsUnderlineHugItemProperties = InferComponentDefinition<{
+export type TabsProperties = InferComponentDefinition<
+  typeof metadata.tabs.componentPropertyDefinitions
+>;
+
+export type TabsLineWrapperProperties = InferComponentDefinition<{
+  Size: {
+    type: "VARIANT";
+    defaultValue: "Medium";
+    variantOptions: ["Medium", "Small"];
+  };
+  Layout: {
+    type: "VARIANT";
+    defaultValue: "Fill";
+    variantOptions: ["Hug", "Fill"];
+  };
+}>;
+
+export type TabsLineTriggerHugProperties = InferComponentDefinition<{
   "Label#4478:2": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -426,7 +479,7 @@ export type TabsUnderlineHugItemProperties = InferComponentDefinition<{
   Size: {
     type: "VARIANT";
     defaultValue: "Small";
-    variantOptions: ["Small", "Medium"];
+    variantOptions: ["Medium", "Small"];
   };
   State: {
     type: "VARIANT";
@@ -435,19 +488,19 @@ export type TabsUnderlineHugItemProperties = InferComponentDefinition<{
   };
 }>;
 
-export type TabsUnderlineFillItemProperties = InferComponentDefinition<{
+export type TabsLineTriggerFillProperties = InferComponentDefinition<{
   "Label#4478:2": {
     type: "TEXT";
     defaultValue: "라벨";
   };
-  "Has Notification#32892:0": {
+  "Has Notification#32904:13": {
     type: "BOOLEAN";
     defaultValue: false;
   };
   Size: {
     type: "VARIANT";
     defaultValue: "Small";
-    variantOptions: ["Small", "Medium"];
+    variantOptions: ["Medium", "Small"];
   };
   State: {
     type: "VARIANT";
@@ -456,7 +509,7 @@ export type TabsUnderlineFillItemProperties = InferComponentDefinition<{
   };
 }>;
 
-export type TabsChipItemProperties = InferComponentDefinition<{
+export type TabsChipWrapperProperties = InferComponentDefinition<{
   Size: {
     type: "VARIANT";
     defaultValue: "Large";
@@ -468,3 +521,26 @@ export type TabsChipItemProperties = InferComponentDefinition<{
     variantOptions: ["Solid", "Outline"];
   };
 }>;
+
+export type ChipTabsTriggerProperties = InferComponentDefinition<{
+  "\bSize": {
+    type: "VARIANT";
+    defaultValue: "Medium";
+    variantOptions: ["Medium", "Large"];
+  };
+  Variant: {
+    type: "VARIANT";
+    defaultValue: "Solid";
+    variantOptions: ["Outline", "Solid"];
+  };
+  State: {
+    type: "VARIANT";
+    defaultValue: "Selected";
+    variantOptions: ["Enabled", "Selected", "Disabled"];
+  };
+  "Has Notification": {
+    type: "VARIANT";
+    defaultValue: "False";
+    variantOptions: ["False", "True"];
+  };
+}>;

package/src/codegen/core/jsx.ts

@@ -90,7 +90,7 @@ export function stringifyElement(element: ElementNode, options: { printSource?:
       .map(([key, value]) => {
         if (typeof value === "string") {
           if (value.includes("\n")) {
-            return `${key}={\"${value.replace("\n", "\\n")}\"}`;
+            return `${key}={"${value.replaceAll("\n", "\\n")}"}`;
           }
 
           return `${key}="${value}"`;
@@ -107,7 +107,17 @@ export function stringifyElement(element: ElementNode, options: { printSource?:
         }
 
         if (isElement(value)) {
-          return `${key}={${recursive(value, depth + 1)}}`;
+          const elementStr = recursive(value, depth + 1);
+
+          const commentMatch = elementStr.match(/\{\/\* (.+?)\*\/\}$/);
+
+          if (commentMatch) {
+            const elementWithoutComment = elementStr.replace(/\{\/\* .+? \*\/\}$/, "");
+
+            return `${key}={${elementWithoutComment}}/* ${commentMatch[1]} */`;
+          }
+
+          return `${key}={${elementStr}}`;
         }
 
         if (typeof value === "object") {
@@ -117,6 +127,8 @@ export function stringifyElement(element: ElementNode, options: { printSource?:
         if (typeof value === "undefined") {
           return undefined;
         }
+
+        return undefined;
       })
       .filter(exists);
 

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

@@ -5,6 +5,7 @@ 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");
 
@@ -12,9 +13,15 @@ export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<CheckboxProperties>(
     metadata.checkbox.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" && {

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.checkmark.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

@@ -72,16 +72,19 @@ export const createChipHandler = (ctx: ComponentHandlerDeps) => {
       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.Button",
+      "Chip.Toggle",
       commonProps,
       [prefix, label, suffixIcon ? iconSuffixHandler.transform(suffixIcon, traverse) : undefined],
-      { comment: "목적에 따라 Chip.Toggle, Chip.RadioItem 등으로 바꿔 사용하세요." },
+      { comment: "목적에 따라 Chip.Button, Chip.RadioItem 등으로 바꿔 사용하세요." },
     );
   });
 };

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

@@ -4,16 +4,22 @@ 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.divider.key,
     ({ componentProperties: props }) => {
       const { color } = match(props.Tone.value)
-        .with("Neutral", () => ({ color: "stroke.neutral" }))
         .with("Neutral Muted", () => ({ color: "stroke.neutralMuted" }))
+        .with("Neutral Subtle", () => ({ color: "stroke.neutralSubtle" }))
         .exhaustive();
 
-      return createSeedReactElement("Divider", { color });
+      const commonProps = {
+        color,
+        orientation: camelCase(props.Orientation.value),
+      };
+
+      return createSeedReactElement("Divider", commonProps, undefined);
     },
   );

package/src/codegen/targets/react/component/handlers/help-bubble.ts

@@ -59,6 +59,7 @@ export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
           description: props["Description#62535:98"].value,
         }),
         defaultOpen: true,
+        showCloseButton: props["Show Close Button#40538:0"].value,
         placement,
       };
 
@@ -66,6 +67,7 @@ export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
         "HelpBubbleTrigger",
         commonProps,
         createLocalSnippetElementTrigger("ActionButton", {}, "HelpBubble 열기"),
+        { comment: "필요에 따라 HelpBubbleAnchor로 변경하여 사용하세요." },
       );
     },
   );

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

@@ -0,0 +1,155 @@
+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 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 = {
+  checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
+  radioMark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
+  icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
+  avatar: "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c",
+  image: "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3",
+  custom: "81f201fc876e38f016ab7427a6b3da000ee919a2",
+} as const;
+
+const SUFFIX_KEYS = {
+  checkmark: "abf9810103ae6e6afe8fa253ec5f05d6a7304b38",
+  radioMark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
+  chevron: "8c52207687ffed15cd5931d71ed9d196b3358a68",
+  switch: "1e933f75dd6bb4b21c3289b5c3b4402d2c623125",
+  custom: "3a70bf5bb9856c13893931b7a0df652bcf0be895",
+  icon: "4cc7e9b84a8388a36cb3898c6c02e6110a3281b9",
+  chevronWithText: "fe0e25f4fecda59d0a3730ead7c5bc0a66a41e7e",
+  iconButton: "5636566f6de6f58200dce388f7b1ac9f517b30e1",
+  actionButton: "3d788f28c785d1c60b937b253c39ce582dbe1ed3",
+} as const;
+
+export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ListItemProperties>(metadata.listItem.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 Object.values(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 Object.values(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 (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") && {
+          disabled: true,
+        }),
+      ...(props.State.value === "Highlighted" && {
+        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/radio-group.ts

@@ -0,0 +1,31 @@
+import type { 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";
+
+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/radio-mark.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.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/switch.ts

@@ -3,6 +3,7 @@ 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");
 
@@ -10,7 +11,13 @@ 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,
         label: props["Label#36578:0"].value,
         ...(props.Selected.value === "True" && {