@seed-design/figma 0.0.24 → 0.0.27

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

@@ -1,15 +1,18 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import type { NormalizedInstanceNode } from "@/normalizer";
-import { camelCase } from "change-case";
-import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   TabsFillItemProperties,
   TabsHugItemProperties,
   TabsProperties,
 } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import type { NormalizedInstanceNode } from "@/normalizer";
+import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("tabs");
+
 const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
 const createTabsHugItemHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<TabsHugItemProperties>(
@@ -27,7 +30,7 @@ const createTabsHugItemHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+      return createLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     },
   );
 
@@ -48,7 +51,7 @@ const createTabsFillItemHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+      return createLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
     },
   );
 
@@ -96,7 +99,7 @@ export const createTabsHandler = (ctx: ComponentHandlerDeps) => {
       componentProperties.State.value.split("-").includes("Selected"),
     )?.node;
 
-    const tabTriggerList = createElement(
+    const tabTriggerList = createLocalSnippetElement(
       "TabsList",
       undefined,
       tabsItems.map(({ triggerLayout, node }) => {
@@ -112,7 +115,7 @@ export const createTabsHandler = (ctx: ComponentHandlerDeps) => {
     const tabContents = tabsItems.map(({ node }) => {
       const value = node.componentProperties["Label#4478:2"].value;
 
-      return createElement("TabsContent", { value }, "{/* TODO: 컨텐츠 추가 */}");
+      return createLocalSnippetElement("TabsContent", { value }, "{/* TODO: 컨텐츠 추가 */}");
     });
 
     const commonProps = {
@@ -123,6 +126,6 @@ export const createTabsHandler = (ctx: ComponentHandlerDeps) => {
       }),
     };
 
-    return createElement("TabsRoot", commonProps, [tabTriggerList, ...tabContents]);
+    return createLocalSnippetElement("TabsRoot", commonProps, [tabTriggerList, ...tabContents]);
   });
 };

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

@@ -1,10 +1,11 @@
 import type { TextButtonProperties } from "@/codegen/component-properties";
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode } from "@/normalizer";
 import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
+import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
@@ -44,5 +45,5 @@ export const createTextButtonHandler = (ctx: ComponentHandlerDeps) =>
       }),
     };
 
-    return createElement("TextButton", commonProps, children);
+    return createSeedReactElement("TextButton", commonProps, children);
   });

package/src/codegen/targets/react/component/handlers/text-field.ts

@@ -1,9 +1,12 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { TextFieldProperties } 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 type { TextFieldProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("text-field");
+
 export const createTextFieldHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<TextFieldProperties>(
     metadata.textField.key,
@@ -101,8 +104,8 @@ export const createTextFieldHandler = (ctx: ComponentHandlerDeps) =>
         placeholder,
       };
 
-      const TextFieldChildren = createElement("TextFieldInput", inputProps);
+      const TextFieldChildren = createLocalSnippetElement("TextFieldInput", inputProps);
 
-      return createElement("TextField", commonProps, TextFieldChildren);
+      return createLocalSnippetElement("TextField", commonProps, TextFieldChildren);
     },
   );

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

@@ -1,10 +1,13 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { ToggleButtonProperties } 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, createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ToggleButtonProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("toggle-button");
+
 export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ToggleButtonProperties>(
     metadata.toggleButton.key,
@@ -25,15 +28,15 @@ export const createToggleButtonHandler = (ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("ToggleButton", commonProps, [
+      return createLocalSnippetElement("ToggleButton", commonProps, [
         props["Show Prefix Icon#6122:392"].value
-          ? createElement("PrefixIcon", {
+          ? createSeedReactElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#6122:98"]),
             })
           : undefined,
         props["Label#6122:49"].value,
         props["Show Suffix Icon#6122:147"].value
-          ? createElement("SuffixIcon", {
+          ? createSeedReactElement("SuffixIcon", {
               svg: ctx.iconHandler.transform(props["Suffix Icon#6122:343"]),
             })
           : undefined,

package/src/codegen/targets/react/element-factories.ts

@@ -0,0 +1,59 @@
+import { createElement, type ElementNode } from "@/codegen/core";
+
+const SEED_REACT_IMPORT_PATH = "@seed-design/react";
+const LOCAL_SNIPPET_BASE_PATH = "@/seed-design/ui";
+const MONOCHROME_ICON_IMPORT_PATH = "@karrotmarket/react-monochrome-icon";
+const MULTICOLOR_ICON_IMPORT_PATH = "@karrotmarket/react-multicolor-icon";
+
+type CreateElementArgs = Parameters<typeof createElement>;
+
+export function createSeedReactElement(
+  tag: CreateElementArgs[0],
+  props?: CreateElementArgs[1],
+  children?: CreateElementArgs[2],
+  meta?: CreateElementArgs[3],
+): ElementNode {
+  return createElement(tag, props, children, {
+    importPath: SEED_REACT_IMPORT_PATH,
+    ...meta,
+  });
+}
+
+export function createMonochromeIconElement(
+  tag: CreateElementArgs[0],
+  props?: CreateElementArgs[1],
+  children?: CreateElementArgs[2],
+  meta?: CreateElementArgs[3],
+): ElementNode {
+  return createElement(tag, props, children, {
+    ...meta,
+    importPath: MONOCHROME_ICON_IMPORT_PATH,
+  });
+}
+
+export function createMulticolorIconElement(
+  tag: CreateElementArgs[0],
+  props?: CreateElementArgs[1],
+  children?: CreateElementArgs[2],
+  meta?: CreateElementArgs[3],
+): ElementNode {
+  return createElement(tag, props, children, { ...meta, importPath: MULTICOLOR_ICON_IMPORT_PATH });
+}
+
+export function createLocalSnippetHelper(moduleName: string) {
+  function createLocalSnippetElement(
+    tag: CreateElementArgs[0],
+    props?: CreateElementArgs[1],
+    children?: CreateElementArgs[2],
+    meta?: CreateElementArgs[3],
+  ): ElementNode {
+    return createElement(tag, props, children, {
+      importPath: `${LOCAL_SNIPPET_BASE_PATH}/${moduleName}`,
+      ...meta,
+    });
+  }
+
+  return {
+    createLocalSnippetElement,
+  };
+}

package/src/codegen/targets/react/frame.ts

@@ -3,12 +3,8 @@ import type {
   NormalizedFrameNode,
   NormalizedInstanceNode,
 } from "@/normalizer";
-import {
-  cloneElement,
-  createElement,
-  defineElementTransformer,
-  type ElementTransformer,
-} from "../../core";
+import { cloneElement, defineElementTransformer, type ElementTransformer } from "../../core";
+import { createSeedReactElement } from "./element-factories";
 import type { ContainerLayoutProps, PropsConverters } from "./props";
 
 export interface FrameTransformerDeps {
@@ -58,17 +54,17 @@ export function createFrameTransformer({
       if (layoutComponent === "VStack") {
         const { direction, ...rest } = props;
 
-        return createElement("VStack", rest, processedChildren);
+        return createSeedReactElement("VStack", rest, processedChildren);
       }
 
       if (layoutComponent === "HStack") {
         const { direction, ...rest } = props;
 
-        return createElement("HStack", rest, processedChildren);
+        return createSeedReactElement("HStack", rest, processedChildren);
       }
 
       if (layoutComponent === "Box") {
-        return createElement("Box", props, processedChildren);
+        return createSeedReactElement("Box", props, processedChildren);
       }
     },
   );

package/src/codegen/targets/react/icon.ts

@@ -1,6 +1,7 @@
 import type { IconService } from "@/entities";
 import { pascalCase } from "change-case";
 import { type ElementNode, createElement } from "../../core";
+import { createMonochromeIconElement, createMulticolorIconElement } from "./element-factories";
 
 export interface IconHandler {
   isIconInstance: (node: { componentKey: string }) => boolean;
@@ -36,11 +37,15 @@ export function createIconHandler({
       return createElement("UnknownIcon");
     }
 
-    const { name, weight } = iconData;
+    const { name, weight, type } = iconData;
 
     const tagName = iconNameFormatter({ name, weight });
 
-    return createElement(tagName);
+    if (type === "multicolor") {
+      return createMulticolorIconElement(tagName);
+    }
+
+    return createMonochromeIconElement(tagName);
   }
 
   return {

package/src/codegen/targets/react/instance.ts

@@ -1,10 +1,10 @@
 import type { NormalizedInstanceNode } from "@/normalizer";
 import {
-  createElement,
   defineElementTransformer,
   type ComponentHandler,
   type ElementTransformer,
 } from "../../core";
+import { createSeedReactElement } from "./element-factories";
 import type { IconHandler } from "./icon";
 import type { PropsConverters } from "./props";
 
@@ -29,7 +29,7 @@ export function createInstanceTransformer({
         ...propsConverters.iconSelfLayout(node),
         ...propsConverters.vectorChildrenFill(node),
       };
-      return createElement("Icon", { svg: iconHandler.transform(node), ...props });
+      return createSeedReactElement("Icon", { svg: iconHandler.transform(node), ...props });
     }
 
     const componentHandler = componentSetKey

package/src/codegen/targets/react/props.ts

@@ -130,14 +130,14 @@ export function createContainerLayoutPropsConverter(
       justify: "flex-start",
       align: "stretch",
       wrap: "nowrap",
-      gap: 0,
-      p: 0,
-      px: 0,
-      py: 0,
-      pb: 0,
-      pl: 0,
-      pr: 0,
-      pt: 0,
+      gap: "0px",
+      p: "0px",
+      px: "0px",
+      py: "0px",
+      pb: "0px",
+      pl: "0px",
+      pr: "0px",
+      pt: "0px",
     },
   });
 }
@@ -248,11 +248,11 @@ export function createRadiusPropsConverter(valueResolver: ReactValueResolver) {
       ],
     },
     defaults: {
-      borderRadius: 0,
-      borderTopLeftRadius: 0,
-      borderTopRightRadius: 0,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
+      borderRadius: "0px",
+      borderTopLeftRadius: "0px",
+      borderTopRightRadius: "0px",
+      borderBottomLeftRadius: "0px",
+      borderBottomRightRadius: "0px",
     },
   });
 }

package/src/codegen/targets/react/shape.ts

@@ -4,6 +4,7 @@ import type {
   NormalizedVectorNode,
 } from "@/normalizer";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
+import { createSeedReactElement } from "./element-factories";
 import type { PropsConverters } from "./props";
 
 export interface RectangleTransformerDeps {
@@ -14,23 +15,29 @@ export function createRectangleTransformer({
   propsConverters,
 }: RectangleTransformerDeps): ElementTransformer<NormalizedRectangleNode> {
   return defineElementTransformer((node: NormalizedRectangleNode) => {
-    return createElement(
+    return createSeedReactElement(
       "Box",
       { ...propsConverters.selfLayout(node), background: "palette.gray200" },
       undefined,
-      "Rectangle Node Placeholder",
+      {
+        comment: "Rectangle Node Placeholder",
+      },
     );
   });
 }
 
 export function createVectorTransformer(): ElementTransformer<NormalizedVectorNode> {
   return defineElementTransformer(() => {
-    return createElement("svg", {}, [], "Vector Node Placeholder");
+    return createElement("svg", {}, [], {
+      comment: "Vector Node Placeholder",
+    });
   });
 }
 
 export function createBooleanOperationTransformer(): ElementTransformer<NormalizedBooleanOperationNode> {
   return defineElementTransformer(() => {
-    return createElement("svg", {}, [], "Boolean Operation Node Placeholder");
+    return createElement("svg", {}, [], {
+      comment: "Boolean Operation Node Placeholder",
+    });
   });
 }

package/src/codegen/targets/react/text.ts

@@ -1,6 +1,7 @@
 import type { NormalizedTextNode } from "@/normalizer";
 import { compactObject } from "@/utils/common";
-import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
+import { defineElementTransformer, type ElementTransformer } from "../../core";
+import { createSeedReactElement } from "./element-factories";
 import type { PropsConverters } from "./props";
 
 export interface TextTransformerDeps {
@@ -21,13 +22,10 @@ export function createTextTransformer({
       ...fillProps,
     });
 
-    return createElement(
-      "Text",
-      props,
-      node.characters.replace(/\n/g, "<br />"),
-      hasMultipleFills
+    return createSeedReactElement("Text", props, node.characters.replace(/\n/g, "<br />"), {
+      comment: hasMultipleFills
         ? "Multiple fills in Text node encountered, only the first fill is used."
-        : "",
-    );
+        : undefined,
+    });
   });
 }