@seed-design/figma 1.1.19 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "1.1.19",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -39,7 +39,7 @@
     "sync-entities": "rm -rf src/entities/data/__generated__ && bun figma-extractor src/entities/data/__generated__"
   },
   "dependencies": {
-    "@seed-design/css": "1.1.19",
+    "@seed-design/css": "1.2.0",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

package/src/codegen/component-properties.ts

@@ -166,6 +166,14 @@ export type MenuSheetItemProperties = InferComponentDefinition<{
     type: "BOOLEAN";
     defaultValue: true;
   };
+  "Sub Text#51411:0": {
+    type: "TEXT";
+    defaultValue: "설명을 입력해주세요.";
+  };
+  "Show Item Description#51411:19": {
+    type: "BOOLEAN";
+    defaultValue: false;
+  };
   "Label#55905:8": {
     type: "TEXT";
     defaultValue: "라벨";
@@ -188,7 +196,7 @@ export type MenuSheetItemProperties = InferComponentDefinition<{
   Layout: {
     type: "VARIANT";
     defaultValue: "Text Only";
-    variantOptions: ["Text with Icon", "Text Only"];
+    variantOptions: ["Text Only", "Text with Icon"];
   };
 }>;
 

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

@@ -15,7 +15,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("list");
 
 const PREFIX_KEYS = {
   checkmark: "f24c9ef42ef08df79483fbae0fa7d9037e566748",
-  radioMark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
+  radiomark: "5a77ad37a2291989dfe77c44ddee9aa39e447f90",
   icon: "0e4c05f097d3fa2dc0cbfdbf8db2662bcf8439ca",
   avatar: "ef0e8bd6c2f92e620acf204bb9a8079ef25a1e5c",
   image: "82239325aa1cb65af7c649fc71a8f2b48fb9b9f3",
@@ -24,7 +24,7 @@ const PREFIX_KEYS = {
 
 const SUFFIX_KEYS = {
   checkmark: "abf9810103ae6e6afe8fa253ec5f05d6a7304b38",
-  radioMark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
+  radiomark: "0a9464ad270bfd7f56438f62bb0155a25ca146a9",
   chevron: "8c52207687ffed15cd5931d71ed9d196b3358a68",
   switch: "1e933f75dd6bb4b21c3289b5c3b4402d2c623125",
   custom: "3a70bf5bb9856c13893931b7a0df652bcf0be895",
@@ -102,7 +102,7 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
     const disabled = props.State.value === "Disabled";
 
     const tag = (() => {
-      if (suffix?.tag === "SwitchMark") {
+      if (suffix?.tag === "Switchmark") {
         return "ListSwitchItem";
       }
 
@@ -110,11 +110,11 @@ export const createListItemHandler = (ctx: ComponentHandlerDeps) =>
         return "ListCheckItem";
       }
 
-      if (prefix?.tag === "RadioMark" || suffix?.tag === "RadioMark") {
+      if (prefix?.tag === "Radiomark" || suffix?.tag === "Radiomark") {
         return "ListRadioItem";
       }
 
-      // checkmark/radioMark 없는데 disabled인 경우 Button으로 추측
+      // checkmark/radiomark 없는데 disabled인 경우 Button으로 추측
       if (disabled) {
         return "ListButtonItem";
       }

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

@@ -7,7 +7,7 @@ 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, createSeedReactElement } from "../../element-factories";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { match } from "ts-pattern";
 
@@ -27,16 +27,16 @@ const createMenuSheetItemHandler = (ctx: ComponentHandlerDeps) =>
         ...(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, [
-        props["Show Prefix Icon#17043:5"].value
-          ? createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
-            })
-          : undefined,
-        props["Label#55905:8"].value,
-      ]);
+      return createLocalSnippetElement("MenuSheetItem", commonProps);
     },
   );
 
@@ -76,8 +76,10 @@ export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
       ? props["Title Text#14599:0"].value
       : undefined;
 
-    // TODO: React 구현체에 description 추가 이후
-    // const description = props["Description Text#21827:0"].value;
+    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" }))
@@ -86,7 +88,7 @@ export const createMenuSheetHandler = (ctx: ComponentHandlerDeps) => {
 
     const content = createLocalSnippetElement(
       "MenuSheetContent",
-      { title, labelAlign },
+      { title, description, labelAlign },
       contentChildren,
       {
         comment: title

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

@@ -22,6 +22,6 @@ export const createRadiomarkHandler = (_ctx: ComponentHandlerDeps) =>
         size: handleSizeProp(props.Size.value),
       };
 
-      return createLocalSnippetElement("RadioMark", commonProps);
+      return createLocalSnippetElement("Radiomark", commonProps);
     },
   );

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

@@ -22,7 +22,7 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
       };
 
       if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
-        return createLocalSnippetElement("SwitchMark", commonProps);
+        return createLocalSnippetElement("Switchmark", commonProps);
       }
 
       return createLocalSnippetElement("Switch", {

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

@@ -21,6 +21,6 @@ export const createSwitchmarkHandler = (_ctx: ComponentHandlerDeps) =>
         size: props.Size.value,
       };
 
-      return createLocalSnippetElement("SwitchMark", commonProps);
+      return createLocalSnippetElement("Switchmark", commonProps);
     },
   );

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

@@ -1,12 +1,14 @@
 import type { TagGroupItemProperties, TagGroupProperties } from "@/codegen/component-properties";
 import { defineComponentHandler, type ElementNode } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import { createSeedReactElement } from "../../element-factories";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
 import { findAllInstances } from "@/utils/figma-node";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("tag-group");
+
 export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
   const itemHandler = createTagGroupItemHandler(ctx);
 
@@ -20,10 +22,10 @@ export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
     })[];
 
     if (items.length === 0) {
-      return createSeedReactElement("TagGroup.Root");
+      return createLocalSnippetElement("TagGroupRoot");
     }
 
-    // if size/weight/tone are all the same among item[n].props, lift them up to TagGroup.Root
+    // if size/weight/tone are all the same among item[n].props, lift them up to TagGroupRoot
 
     const consistent = {
       size: items.map((item) => item.props.size).every((size) => size === items[0].props.size),
@@ -33,8 +35,8 @@ export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
       tone: items.map((item) => item.props.tone).every((tone) => tone === items[0].props.tone),
     };
 
-    return createSeedReactElement(
-      "TagGroup.Root",
+    return createLocalSnippetElement(
+      "TagGroupRoot",
       {
         // lift up consistent props
         ...(consistent.size && { size: items[0].props.size }),
@@ -51,6 +53,7 @@ export const createTagGroupHandler = (ctx: ComponentHandlerDeps) => {
           tone: consistent.tone ? undefined : item.props.tone,
         },
       })),
+      { comment: "`truncate` prop을 통해 한 줄로 표시되도록 할 수 있습니다." },
     );
   });
 };
@@ -67,26 +70,17 @@ export const createTagGroupItemHandler = (ctx: ComponentHandlerDeps) =>
         .with("t4(14pt)", () => "t4")
         .exhaustive();
 
-      const commonProps = {
+      return createLocalSnippetElement("TagGroupItem", {
         size,
         weight: camelCase(props["Weight"].value),
         tone: camelCase(props["Tone"].value),
-      };
-
-      const children = [
-        props.Layout.value === "Icon First"
-          ? createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#47948:0"]),
-            })
-          : undefined,
-        props["Label#5409:0"].value,
-        props.Layout.value === "Icon Last"
-          ? createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#47948:55"]),
-            })
-          : undefined,
-      ].filter(Boolean);
-
-      return createSeedReactElement("TagGroup.Item", commonProps, children);
+        label: props["Label#5409:0"].value,
+        ...(props.Layout.value === "Icon First" && {
+          prefixIcon: ctx.iconHandler.transform(props["Prefix Icon#47948:0"]),
+        }),
+        ...(props.Layout.value === "Icon Last" && {
+          suffixIcon: ctx.iconHandler.transform(props["Suffix Icon#47948:55"]),
+        }),
+      });
     },
   );