@seed-design/figma 0.0.21 → 0.0.22

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

@@ -4,35 +4,35 @@ import type {
   NormalizedVectorNode,
 } from "@/normalizer";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface RectangleTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createRectangleTransformer({
-  propsTransformers,
+  propsConverters,
 }: RectangleTransformerDeps): ElementTransformer<NormalizedRectangleNode> {
-  return defineElementTransformer((node: NormalizedRectangleNode, traverse) => {
-    return createElement("Rectangle", { ...propsTransformers.selfLayout(node, traverse) });
+  return defineElementTransformer((node: NormalizedRectangleNode) => {
+    return createElement("Rectangle", { ...propsConverters.selfLayout(node) });
   });
 }
 
 export interface VectorTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createVectorTransformer({
-  propsTransformers,
+  propsConverters,
 }: VectorTransformerDeps): ElementTransformer<NormalizedVectorNode> {
-  return defineElementTransformer((node, traverse) => {
+  return defineElementTransformer((node) => {
     return createElement(
       "Vector",
       {
-        ...propsTransformers.selfLayout(node, traverse),
-        ...propsTransformers.radius(node, traverse),
-        ...propsTransformers.stroke(node, traverse),
-        ...propsTransformers.shapeFill(node, traverse),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.radius(node),
+        ...propsConverters.stroke(node),
+        ...propsConverters.shapeFill(node),
       },
       [],
       "Vector Node Placeholder",
@@ -41,20 +41,20 @@ export function createVectorTransformer({
 }
 
 export interface BooleanOperationTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createBooleanOperationTransformer({
-  propsTransformers,
+  propsConverters,
 }: BooleanOperationTransformerDeps): ElementTransformer<NormalizedBooleanOperationNode> {
   return defineElementTransformer((node, traverse) => {
     return createElement(
       "BooleanOperation",
       {
-        ...propsTransformers.selfLayout(node, traverse),
-        ...propsTransformers.radius(node, traverse),
-        ...propsTransformers.stroke(node, traverse),
-        ...propsTransformers.shapeFill(node, traverse),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.radius(node),
+        ...propsConverters.stroke(node),
+        ...propsConverters.shapeFill(node),
       },
       node.children.map(traverse),
     );

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

@@ -1,20 +1,20 @@
 import type { NormalizedTextNode } from "@/normalizer";
 import { compactObject } from "@/utils/common";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface TextTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createTextTransformer({
-  propsTransformers,
+  propsConverters,
 }: TextTransformerDeps): ElementTransformer<NormalizedTextNode> {
-  return defineElementTransformer((node: NormalizedTextNode, traverse) => {
+  return defineElementTransformer((node: NormalizedTextNode) => {
     const hasMultipleFills = node.fills.length > 1;
 
-    const fillProps = propsTransformers.textFill(node, traverse);
-    const typeStyleProps = propsTransformers.typeStyle(node, traverse);
+    const fillProps = propsConverters.textFill(node);
+    const typeStyleProps = propsConverters.typeStyle(node);
 
     const props = compactObject({
       ...typeStyleProps,

package/src/codegen/targets/figma/value-resolver.ts

@@ -0,0 +1,22 @@
+import { createValueResolver, type ValueResolver } from "@/codegen/core";
+import { styleService, variableService } from "@/codegen/default-services";
+import { toCssRgba } from "@/utils/css";
+
+export type FigmaValueResolver = ValueResolver<string, number, number, number>;
+
+export const valueResolver = createValueResolver({
+  variableService,
+  variableNameFormatter: ({ slug }) =>
+    slug
+      .filter((s) => s !== "dimension")
+      .map((s) => s.replaceAll(",", "_"))
+      .join("/"),
+  styleService,
+  styleNameFormatter: ({ slug }) => slug[slug.length - 1]!,
+  rawValueFormatters: {
+    color: (value: RGBA) => toCssRgba(value),
+    dimension: (value: number) => value,
+    fontDimension: (value: number) => value,
+    fontWeight: (value: number) => value,
+  },
+});

package/src/codegen/targets/react/component/deps.interface.ts

@@ -1,6 +1,7 @@
-import type { IconService, VariableService } from "@/entities";
+import type { IconHandler } from "../icon";
+import type { ReactValueResolver } from "../value-resolver";
 
-export interface SeedComponentTransformerDeps {
-  iconService: IconService;
-  variableService: VariableService;
+export interface ComponentHandlerDeps {
+  iconHandler: IconHandler;
+  valueResolver: ReactValueResolver;
 }

package/src/codegen/targets/react/component/{transformers → handlers}/action-button.ts

@@ -1,13 +1,13 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ActionButtonProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ActionButtonProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ActionButtonProperties>(
+export const createActionButtonHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionButtonProperties>(
     metadata.actionButton.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -17,9 +17,7 @@ export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "iconOnly",
           children: [
             createElement("Icon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Icon#7574:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Icon#7574:0"]),
             }),
           ],
         }))
@@ -27,9 +25,7 @@ export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps)
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#5987:305"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#5987:305"]),
             }),
             props["Label#5987:61"].value,
           ],
@@ -39,9 +35,7 @@ export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps)
           children: [
             props["Label#5987:61"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#5987:244"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#5987:244"]),
             }),
           ],
         }))

package/src/codegen/targets/react/component/{transformers → handlers}/action-chip.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ActionChipProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ActionChipProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ActionChipProperties>(
+export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionChipProperties>(
     metadata.actionChip.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -16,9 +16,7 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           layout: "iconOnly",
           children: [
             createElement("Icon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Icon#8714:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Icon#8714:0"]),
             }),
           ],
         }))
@@ -26,9 +24,7 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
             }),
             props["Label#7185:0"].value,
           ],
@@ -38,9 +34,7 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           children: [
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
             }),
           ],
         }))
@@ -48,15 +42,11 @@ export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =
           layout: "withText",
           children: [
             createElement("PrefixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Prefix Icon#8711:0"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
             }),
             props["Label#7185:0"].value,
             createElement("SuffixIcon", {
-              svg: createElement(
-                ctx.iconService.createIconTagName(props["Suffix Icon#8711:3"].componentKey),
-              ),
+              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
             }),
           ],
         }))

package/src/codegen/targets/react/component/{transformers → handlers}/action-sheet.ts

@@ -1,14 +1,17 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, 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 { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ActionSheetItemProperties, ActionSheetProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type {
+  ActionSheetItemProperties,
+  ActionSheetProperties,
+} from "@/codegen/component-properties";
 
 const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
-const createActionSheetItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ActionSheetItemProperties>(
+const createActionSheetItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ActionSheetItemProperties>(
     ACTION_SHEET_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -25,10 +28,10 @@ const createActionSheetItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
     },
   );
 
-export const createActionSheetTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const actionSheetItemTransformer = createActionSheetItemTransformer(ctx);
+export const createActionSheetHandler = (ctx: ComponentHandlerDeps) => {
+  const actionSheetItemHandler = createActionSheetItemHandler(ctx);
 
-  return defineComponentTransformer<ActionSheetProperties>(metadata.actionSheet.key, (node) => {
+  return defineComponentHandler<ActionSheetProperties>(metadata.actionSheet.key, (node) => {
     const { componentProperties: props } = node;
 
     const contentProps = match(props.Header.value)
@@ -52,10 +55,10 @@ export const createActionSheetTransformer = (ctx: SeedComponentTransformerDeps)
 
     const items = findAllInstances<ActionSheetItemProperties>({
       node,
-      key: actionSheetItemTransformer.key,
+      key: actionSheetItemHandler.key,
     });
 
-    const contentChildren = items.map(actionSheetItemTransformer.transform);
+    const contentChildren = items.map(actionSheetItemHandler.transform);
 
     const content = createElement(
       "ActionSheetContent",

package/src/codegen/targets/react/component/{transformers → handlers}/app-bar.ts

@@ -1,19 +1,19 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
 import { findAll, findAllInstances, findOne } from "@/utils/figma-node";
 import { match } from "ts-pattern";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ComponentHandlerDeps } from "../deps.interface";
 import type {
   AppBarLeftProperties,
   AppBarMainProperties,
   AppBarProperties,
   AppBarRightProperties,
-} from "../properties.type";
+} from "@/codegen/component-properties";
 
 const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
-const createAppBarMainTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<AppBarMainProperties>(
+const createAppBarMainHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<AppBarMainProperties>(
     APP_BAR_MAIN_KEY,
     ({ componentProperties: props }) => {
       const { title, subtitle, layout } = match(props.Type.value)
@@ -49,8 +49,8 @@ const createAppBarMainTransformer = (_ctx: SeedComponentTransformerDeps) =>
   );
 
 const APP_BAR_LEFT_KEY = "e5d2e47052a22395db79f195a0991a570dc1b6c9";
-const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<AppBarLeftProperties>(APP_BAR_LEFT_KEY, (node) => {
+const createAppBarLeftHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<AppBarLeftProperties>(APP_BAR_LEFT_KEY, (node) => {
     const props = node.componentProperties;
 
     const children = (() => {
@@ -65,17 +65,15 @@ const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
             (child) => child.type === "INSTANCE" && child.name === "Icon",
           ) as NormalizedInstanceNode | null;
 
-          const iconComponentKey = iconNode?.componentKey ?? undefined;
+          if (!iconNode) {
+            return undefined;
+          }
 
           return createElement(
             "AppBarIconButton",
             undefined,
-            iconComponentKey
-              ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
-              : undefined,
-            iconComponentKey === undefined
-              ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
-              : "aria-label 또는 aria-labelledby를 제공해주세요.",
+            ctx.iconHandler.transform(iconNode),
+            "aria-label 또는 aria-labelledby를 제공해주세요.",
           );
         }
       }
@@ -85,8 +83,8 @@ const createAppBarLeftTransformer = (ctx: SeedComponentTransformerDeps) =>
   });
 
 const APP_BAR_RIGHT_KEY = "9e157fc2d1f89ffee938a5bc62f4a58064fec44e";
-const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<AppBarRightProperties>(APP_BAR_RIGHT_KEY, (node) => {
+const createAppBarRightHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<AppBarRightProperties>(APP_BAR_RIGHT_KEY, (node) => {
     const props = node.componentProperties;
 
     const children = (() => {
@@ -105,18 +103,12 @@ const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
             (child) => child.type === "INSTANCE" && child.name === "Icon",
           ) as NormalizedInstanceNode[];
 
-          const iconComponentKeys = iconNodes.map((iconNode) => iconNode.componentKey);
-
-          return iconComponentKeys.map((iconComponentKey) =>
+          return iconNodes.map((iconNode) =>
             createElement(
               "AppBarIconButton",
               undefined,
-              iconComponentKey
-                ? createElement(ctx.iconService.createIconTagName(iconComponentKey))
-                : undefined,
-              iconComponentKey === undefined
-                ? "아이콘과, aria-label 또는 aria-labelledby를 제공해주세요."
-                : "aria-label 또는 aria-labelledby를 제공해주세요.",
+              ctx.iconHandler.transform(iconNode),
+              "aria-label 또는 aria-labelledby를 제공해주세요.",
             ),
           );
         }
@@ -126,12 +118,12 @@ const createAppBarRightTransformer = (ctx: SeedComponentTransformerDeps) =>
     return createElement("AppBarRight", undefined, children);
   });
 
-export const createAppBarTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const appBarMainTransformer = createAppBarMainTransformer(ctx);
-  const appBarLeftTransformer = createAppBarLeftTransformer(ctx);
-  const appBarRightTransformer = createAppBarRightTransformer(ctx);
+export const createAppBarHandler = (ctx: ComponentHandlerDeps) => {
+  const appBarMainHandler = createAppBarMainHandler(ctx);
+  const appBarLeftHandler = createAppBarLeftHandler(ctx);
+  const appBarRightHandler = createAppBarRightHandler(ctx);
 
-  return defineComponentTransformer<AppBarProperties>(metadata.standardNavigation.key, (node) => {
+  return defineComponentHandler<AppBarProperties>(metadata.standardNavigation.key, (node) => {
     const props = node.componentProperties;
 
     const theme = (() => {
@@ -153,25 +145,25 @@ export const createAppBarTransformer = (ctx: SeedComponentTransformerDeps) => {
     })();
 
     const mainNode = findAllInstances<AppBarMainProperties>({
-      key: appBarMainTransformer.key,
+      key: appBarMainHandler.key,
       node,
     });
     const onlyMainNode = mainNode.length === 1 ? mainNode[0] : undefined;
-    const main = onlyMainNode ? appBarMainTransformer.transform(onlyMainNode) : undefined;
+    const main = onlyMainNode ? appBarMainHandler.transform(onlyMainNode) : undefined;
 
     const leftNode = findAllInstances<AppBarLeftProperties>({
-      key: appBarLeftTransformer.key,
+      key: appBarLeftHandler.key,
       node,
     });
     const onlyLeftNode = leftNode.length === 1 ? leftNode[0] : undefined;
-    const left = onlyLeftNode ? appBarLeftTransformer.transform(onlyLeftNode) : undefined;
+    const left = onlyLeftNode ? appBarLeftHandler.transform(onlyLeftNode) : undefined;
 
     const rightNode = findAllInstances<AppBarRightProperties>({
-      key: appBarRightTransformer.key,
+      key: appBarRightHandler.key,
       node,
     });
     const onlyRightNode = rightNode.length === 1 ? rightNode[0] : undefined;
-    const right = onlyRightNode ? appBarRightTransformer.transform(onlyRightNode) : undefined;
+    const right = onlyRightNode ? appBarRightHandler.transform(onlyRightNode) : undefined;
 
     return createElement(
       "AppBar",

package/src/codegen/targets/react/component/handlers/avatar-stack.ts

@@ -0,0 +1,29 @@
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { AvatarProperties, AvatarStackProperties } from "@/codegen/component-properties";
+import { createAvatarHandler } from "./avatar";
+
+export const createAvatarStackHandler = (ctx: ComponentHandlerDeps) => {
+  const avatarHandler = createAvatarHandler(ctx);
+
+  return defineComponentHandler<AvatarStackProperties>(metadata.avatarStack.key, (node) => {
+    const avatarNodes = findAllInstances<AvatarProperties>({
+      node,
+      key: avatarHandler.key,
+    });
+
+    const { componentProperties: props } = node;
+
+    const commonProps = {
+      size: props.Size.value,
+      // TODO: 구현될 예정
+      // topItem: camelCase(props["Top Item"].value),
+    };
+
+    const avatarStackChildren = avatarNodes.map(avatarHandler.transform);
+
+    return createElement("AvatarStack", commonProps, avatarStackChildren);
+  });
+};

package/src/codegen/targets/react/component/{transformers → handlers}/avatar.ts

@@ -1,17 +1,20 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { AvatarProperties, IdentityPlaceholderProperties } from "../properties.type";
-import { createIdentityPlaceholderTransformer } from "./identity-placeholder";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type {
+  AvatarProperties,
+  IdentityPlaceholderProperties,
+} from "@/codegen/component-properties";
+import { createIdentityPlaceholderHandler } from "./identity-placeholder";
 
-export const createAvatarTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const identityPlaceholderTransformer = createIdentityPlaceholderTransformer(ctx);
+export const createAvatarHandler = (ctx: ComponentHandlerDeps) => {
+  const identityPlaceholderHandler = createIdentityPlaceholderHandler(ctx);
 
-  return defineComponentTransformer<AvatarProperties>(metadata.avatar.key, (node) => {
+  return defineComponentHandler<AvatarProperties>(metadata.avatar.key, (node) => {
     const [placeholder] = findAllInstances<IdentityPlaceholderProperties>({
       node,
-      key: identityPlaceholderTransformer.key,
+      key: identityPlaceholderHandler.key,
     });
     const { componentProperties: props } = node;
 
@@ -23,7 +26,7 @@ export const createAvatarTransformer = (ctx: SeedComponentTransformerDeps) => {
         src: `https://placehold.co/${props.Size.value}x${props.Size.value}`,
       }),
       ...(placeholder && {
-        fallback: identityPlaceholderTransformer.transform(placeholder),
+        fallback: identityPlaceholderHandler.transform(placeholder),
       }),
       size: props.Size.value,
     };

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

@@ -0,0 +1,18 @@
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { camelCase } from "change-case";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { BadgeProperties } from "@/codegen/component-properties";
+import { handleSizeProp } from "../size";
+
+export const createBadgeHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<BadgeProperties>(metadata.badge.key, ({ componentProperties: props }) => {
+    const commonProps = {
+      size: handleSizeProp(props.Size.value),
+      tone: camelCase(props.Tone.value),
+      variant: camelCase(props.Variant.value),
+      shape: camelCase(props.Shape.value),
+    };
+
+    return createElement("Badge", commonProps, props["Label#1584:0"].value);
+  });

package/src/codegen/targets/react/component/{transformers → handlers}/callout.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { NormalizedTextNode } from "@/normalizer";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { CalloutProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { CalloutProperties } from "@/codegen/component-properties";
 
-export const createCalloutTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<CalloutProperties>(
+export const createCalloutHandler = (ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CalloutProperties>(
     metadata.callout.key,
     ({ componentProperties: props, children }) => {
       const tag = (() => {
@@ -78,9 +78,7 @@ export const createCalloutTransformer = (ctx: SeedComponentTransformerDeps) =>
           children: linkLabel,
         },
         ...(props["Icon#12598:210"].value && {
-          prefixIcon: createElement(
-            ctx.iconService.createIconTagName(props["Icon#12598:210"].componentKey),
-          ),
+          prefixIcon: ctx.iconHandler.transform(props["Icon#12598:210"]),
         }),
       };
 

package/src/codegen/targets/react/component/{transformers → handlers}/checkbox.ts

@@ -1,12 +1,12 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { CheckboxProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { CheckboxProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
-export const createCheckboxTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<CheckboxProperties>(
+export const createCheckboxHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<CheckboxProperties>(
     metadata.checkbox.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");

package/src/codegen/targets/react/component/{transformers → handlers}/chip-tabs.ts

@@ -1,13 +1,13 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
+import { createElement, 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 type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { ChipTabsItemProperties, ChipTabsProperties } from "../properties.type";
+import type { ComponentHandlerDeps } from "../deps.interface";
+import type { ChipTabsItemProperties, ChipTabsProperties } from "@/codegen/component-properties";
 
 const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
-const createChipTabsItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<ChipTabsItemProperties>(
+const createChipTabsItemHandler = (_ctx: ComponentHandlerDeps) =>
+  defineComponentHandler<ChipTabsItemProperties>(
     CHIP_TABS_ITEM_KEY,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
@@ -23,13 +23,13 @@ const createChipTabsItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
     },
   );
 
-export const createChipTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const chipTabsItemTransformer = createChipTabsItemTransformer(ctx);
+export const createChipTabsHandler = (ctx: ComponentHandlerDeps) => {
+  const chipTabsItemHandler = createChipTabsItemHandler(ctx);
 
-  return defineComponentTransformer<ChipTabsProperties>(metadata.chipTablist.key, (node) => {
+  return defineComponentHandler<ChipTabsProperties>(metadata.chipTablist.key, (node) => {
     const chipTabsItems = findAllInstances<ChipTabsItemProperties>({
       node,
-      key: chipTabsItemTransformer.key,
+      key: chipTabsItemHandler.key,
     });
 
     const selectedChipTabsItem = chipTabsItems.find((chipTabsItem) =>
@@ -39,7 +39,7 @@ export const createChipTabsTransformer = (ctx: SeedComponentTransformerDeps) =>
     const chipTabsList = createElement(
       "ChipTabsList",
       undefined,
-      chipTabsItems.map(chipTabsItemTransformer.transform),
+      chipTabsItems.map(chipTabsItemHandler.transform),
     );
 
     const commonProps = {