@seed-design/figma 0.0.23 → 0.0.25

package/src/codegen/targets/react/component/handlers/control-chip.ts

@@ -1,21 +1,26 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { ControlChipProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ControlChipProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("control-chip");
+
 export const createControlChipHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ControlChipProperties>(
     metadata.controlChip.key,
     ({ componentProperties: props }) => {
       const states = props.State.value.split("-");
 
+      const count = props["Show Count#7185:42"].value ? props["Count#7185:21"].value : undefined;
+
       const { layout, children } = match(props.Layout.value)
         .with("Icon Only", () => ({
           layout: "iconOnly",
           children: [
-            createElement("Icon", {
+            createSeedReactElement("Icon", {
               svg: ctx.iconHandler.transform(props["Icon#8722:41"]),
             }),
           ],
@@ -23,17 +28,18 @@ export const createControlChipHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon First", () => ({
           layout: "withText",
           children: [
-            createElement("PrefixIcon", {
+            createSeedReactElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
             }),
             props["Label#7185:0"].value,
+            count ? createSeedReactElement("Count", undefined, [count]) : undefined,
           ],
         }))
         .with("Icon Last", () => ({
           layout: "withText",
           children: [
             props["Label#7185:0"].value,
-            createElement("SuffixIcon", {
+            createSeedReactElement("SuffixIcon", {
               svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
             }),
           ],
@@ -41,11 +47,11 @@ export const createControlChipHandler = (ctx: ComponentHandlerDeps) =>
         .with("Icon Both", () => ({
           layout: "withText",
           children: [
-            createElement("PrefixIcon", {
+            createSeedReactElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
             }),
             props["Label#7185:0"].value,
-            createElement("SuffixIcon", {
+            createSeedReactElement("SuffixIcon", {
               svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
             }),
           ],
@@ -70,6 +76,6 @@ export const createControlChipHandler = (ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("ControlChip.Toggle", commonProps, children);
+      return createLocalSnippetElement("ControlChip.Toggle", commonProps, children);
     },
   );

package/src/codegen/targets/react/component/handlers/error-state.ts

@@ -1,11 +1,14 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { ActionButtonProperties, ErrorStateProperties } from "@/codegen/component-properties";
+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 } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ActionButtonProperties, ErrorStateProperties } from "@/codegen/component-properties";
 import { createActionButtonHandler } from "./action-button";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("error-state");
+
 export const createErrorStateHandler = (ctx: ComponentHandlerDeps) => {
   const actionButtonHandler = createActionButtonHandler(ctx);
 
@@ -33,6 +36,6 @@ export const createErrorStateHandler = (ctx: ComponentHandlerDeps) => {
       }),
     };
 
-    return createElement("ErrorState", commonProps);
+    return createLocalSnippetElement("ErrorState", commonProps);
   });
 };

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

@@ -1,13 +1,16 @@
-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 { ComponentHandlerDeps } from "../deps.interface";
 import type {
   ExtendedActionSheetGroupProperties,
   ExtendedActionSheetItemProperties,
   ExtendedActionSheetProperties,
 } from "@/codegen/component-properties";
+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 { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("extended-action-sheet");
 
 const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createExtendedActionSheetItemHandler = (ctx: ComponentHandlerDeps) =>
@@ -23,9 +26,9 @@ const createExtendedActionSheetItemHandler = (ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("ExtendedActionSheetItem", commonProps, [
+      return createLocalSnippetElement("ExtendedActionSheetItem", commonProps, [
         props["Show Prefix Icon#17043:5"].value
-          ? createElement("PrefixIcon", {
+          ? createSeedReactElement("PrefixIcon", {
               svg: ctx.iconHandler.transform(props["Prefix Icon#55948:0"]),
             })
           : undefined,
@@ -48,7 +51,7 @@ const createExtendedActionSheetGroupHandler = (ctx: ComponentHandlerDeps) => {
 
       const contentChildren = items.map(extendedActionSheetItemHandler.transform);
 
-      return createElement("ExtendedActionSheetGroup", undefined, contentChildren);
+      return createLocalSnippetElement("ExtendedActionSheetGroup", undefined, contentChildren);
     },
   );
 };
@@ -70,27 +73,26 @@ export const createExtendedActionSheetHandler = (ctx: ComponentHandlerDeps) => {
 
       const title = props["Show Title#17043:12"].value ? props["Title#14599:0"].value : undefined;
 
-      const content = createElement(
+      const content = createLocalSnippetElement(
         "ExtendedActionSheetContent",
         { title },
         contentChildren,
-        title
-          ? undefined
-          : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+        {
+          comment: title
+            ? undefined
+            : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+        },
       );
 
-      const trigger = createElement(
+      const trigger = createLocalSnippetElement(
         "ExtendedActionSheetTrigger",
         { asChild: true },
-        createElement(
-          "ActionButton",
-          undefined,
-          "열기",
-          "ExtendedActionSheet을 여는 요소를 제공해주세요.",
-        ),
+        createElement("button", undefined, "열기", {
+          comment: "ExtendedActionSheet을 여는 요소를 제공해주세요.",
+        }),
       );
 
-      return createElement("ExtendedActionSheet", undefined, [trigger, content]);
+      return createLocalSnippetElement("ExtendedActionSheet", undefined, [trigger, content]);
     },
   );
 };

package/src/codegen/targets/react/component/handlers/extended-fab.ts

@@ -1,8 +1,9 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { ExtendedFabProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
+import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ExtendedFabProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
 export const createExtendedFabHandler = (ctx: ComponentHandlerDeps) =>
@@ -14,8 +15,8 @@ export const createExtendedFabHandler = (ctx: ComponentHandlerDeps) =>
         variant: camelCase(props.Variant.value),
       };
 
-      return createElement("ExtendedFab", commonProps, [
-        createElement("PrefixIcon", {
+      return createSeedReactElement("ExtendedFab", commonProps, [
+        createSeedReactElement("PrefixIcon", {
           svg: ctx.iconHandler.transform(props["Icon#28796:0"]),
         }),
         props["Label#28936:0"].value,

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

@@ -1,18 +1,22 @@
+import type { FabProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import { createElement } from "@/codegen/core";
-import type { FabProperties } from "@/codegen/component-properties";
+import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
 export const createFabHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<FabProperties>(
     metadata.floatingActionButton.key,
     ({ componentProperties: props }) => {
-      return createElement(
+      return createSeedReactElement(
         "Fab",
         undefined,
-        ctx.iconHandler.transform(props["Icon#28796:0"]),
-        "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+        createSeedReactElement("Icon", {
+          svg: ctx.iconHandler.transform(props["Icon#28796:0"]),
+        }),
+        {
+          comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+        },
       );
     },
   );

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

@@ -1,9 +1,11 @@
-import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { createElement } from "@/codegen/core";
 import type { HelpBubbleProperties } from "@/codegen/component-properties";
+import { createElement, defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("help-bubble");
+
 export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<HelpBubbleProperties>(
     metadata.helpBubble.key,
@@ -59,10 +61,12 @@ export const createHelpBubbleHandler = (_ctx: ComponentHandlerDeps) =>
         placement,
       };
 
-      return createElement(
+      return createLocalSnippetElement(
         "HelpBubbleTrigger",
         commonProps,
-        createElement("ActionButton", undefined, "열기", "HelpBubble을 여는 요소를 제공해주세요."),
+        createElement("button", undefined, "열기", {
+          comment: "HelpBubble을 여는 요소를 제공해주세요.",
+        }),
       );
     },
   );

package/src/codegen/targets/react/component/handlers/identity-placeholder.ts

@@ -1,8 +1,8 @@
+import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
 import { defineComponentHandler } from "@/codegen/core";
-import { camelCase } from "change-case";
 import * as metadata from "@/entities/data/__generated__/component-sets";
-import { createElement } from "@/codegen/core";
-import type { IdentityPlaceholderProperties } from "@/codegen/component-properties";
+import { camelCase } from "change-case";
+import { createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
 export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
@@ -13,6 +13,6 @@ export const createIdentityPlaceholderHandler = (_ctx: ComponentHandlerDeps) =>
         identity: camelCase(props.Identity.value),
       };
 
-      return createElement("IdentityPlaceholder", commonProps);
+      return createSeedReactElement("IdentityPlaceholder", commonProps);
     },
   );

package/src/codegen/targets/react/component/handlers/inline-banner.ts

@@ -1,11 +1,14 @@
 import type { InlineBannerProperties } 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, NormalizedTextNode } from "@/normalizer";
 import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
+import { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("inline-banner");
+
 export const createInlineBannerHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {
     const { componentProperties: props } = node;
@@ -31,7 +34,9 @@ export const createInlineBannerHandler = (ctx: ComponentHandlerDeps) =>
     ) as NormalizedTextNode | null;
 
     if (!textNode) {
-      return createElement(tag, undefined, undefined, "내용을 제공해주세요.");
+      return createLocalSnippetElement(tag, undefined, undefined, {
+        comment: "내용을 제공해주세요.",
+      });
     }
 
     const slices = textNode.segments;
@@ -73,5 +78,5 @@ export const createInlineBannerHandler = (ctx: ComponentHandlerDeps) =>
       prefixIcon,
     };
 
-    return createElement(tag, commonProps);
+    return createLocalSnippetElement(tag, commonProps);
   });

package/src/codegen/targets/react/component/handlers/manner-temp-badge.ts

@@ -1,7 +1,10 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { MannerTempBadgeProperties } 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 { MannerTempBadgeProperties } from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("manner-temp-badge");
 
 export const createMannerTempBadgeHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MannerTempBadgeProperties>(
@@ -13,6 +16,6 @@ export const createMannerTempBadgeHandler = (_ctx: ComponentHandlerDeps) =>
         temperature: Number(textNode?.characters.replace(/[^\d.-]/g, "") ?? "-1"),
       };
 
-      return createElement("MannerTempBadge", commonProps);
+      return createLocalSnippetElement("MannerTempBadge", commonProps);
     },
   );

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

@@ -1,9 +1,12 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { MultilineTextFieldProperties } 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 { MultilineTextFieldProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("multiline-text-field");
+
 export const createMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<MultilineTextFieldProperties>(
     metadata.multilineTextField.key,
@@ -74,8 +77,8 @@ export const createMultilineTextFieldHandler = (_ctx: ComponentHandlerDeps) =>
         placeholder,
       };
 
-      const TextFieldChildren = createElement("TextFieldTextarea", inputProps);
+      const TextFieldChildren = createLocalSnippetElement("TextFieldTextarea", inputProps);
 
-      return createElement("TextField", commonProps, TextFieldChildren);
+      return createLocalSnippetElement("TextField", commonProps, TextFieldChildren);
     },
   );

package/src/codegen/targets/react/component/handlers/progress-circle.ts

@@ -1,9 +1,12 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { ProgressCircleProperties } 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 { createLocalSnippetHelper } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { ProgressCircleProperties } from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("progress-circle");
 
 export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ProgressCircleProperties>(
@@ -45,6 +48,6 @@ export const createProgressCircleHandler = (_ctx: ComponentHandlerDeps) =>
         tone: camelCase(props.Tone.value),
       };
 
-      return createElement("ProgressCircle", commonProps);
+      return createLocalSnippetElement("ProgressCircle", commonProps);
     },
   );

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

@@ -1,9 +1,12 @@
 import type { ReactionButtonProperties } 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 { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("reaction-button");
+
 export const createReactionButtonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<ReactionButtonProperties>(
     metadata.reactionButton.key,
@@ -23,13 +26,13 @@ export const createReactionButtonHandler = (ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("ReactionButton", commonProps, [
-        createElement("PrefixIcon", {
+      return createLocalSnippetElement("ReactionButton", commonProps, [
+        createSeedReactElement("PrefixIcon", {
           svg: ctx.iconHandler.transform(props["Icon#12379:0"]),
         }),
         props["Label#6397:0"].value,
         props["Show Count#6397:33"].value
-          ? createElement("Count", {}, props["Count#15816:0"].value)
+          ? createSeedReactElement("Count", {}, props["Count#15816:0"].value)
           : undefined,
       ]);
     },

package/src/codegen/targets/react/component/handlers/segmented-control.ts

@@ -1,11 +1,14 @@
-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 {
   SegmentedControlItemProperties,
   SegmentedControlProperties,
 } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
+import { createLocalSnippetHelper } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("segmented-control");
 
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemHandler = (_ctx: ComponentHandlerDeps) =>
@@ -20,7 +23,11 @@ const createSegmentedControlItemHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
+      return createLocalSnippetElement(
+        "SegmentedControlItem",
+        commonProps,
+        props["Label#11366:15"].value,
+      );
     },
   );
 
@@ -47,12 +54,9 @@ export const createSegmentedControlHandler = (ctx: ComponentHandlerDeps) => {
         }),
       };
 
-      return createElement(
-        "SegmentedControl",
-        commonProps,
-        segmentedControlChildren,
-        "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
-      );
+      return createLocalSnippetElement("SegmentedControl", commonProps, segmentedControlChildren, {
+        comment: "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
+      });
     },
   );
 };

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

@@ -1,21 +1,21 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+import type { SelectBoxGroupProperties, SelectBoxProperties } from "@/codegen/component-properties";
+import { defineComponentHandler } from "@/codegen/core";
 import * as metadata from "@/entities/data/__generated__/component-sets";
 import { findAllInstances } from "@/utils/figma-node";
+import { match } from "ts-pattern";
+import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
 import type { ComponentHandlerDeps } from "../deps.interface";
-import type { SelectBoxGroupProperties, SelectBoxProperties } from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("select-box");
 
 export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SelectBoxProperties>(
     metadata.selectBox.key,
     ({ componentProperties: props }) => {
-      const tag = (() => {
-        switch (props.Control.value) {
-          case "Checkbox":
-            return "CheckSelectBox";
-          case "Radio":
-            return "RadioSelectBox";
-        }
-      })();
+      const tag = match(props.Control.value)
+        .with("Checkbox", () => "CheckSelectBox")
+        .with("Radio", () => "RadioSelectBox")
+        .exhaustive();
 
       const states = props.State.value.split("-");
 
@@ -33,7 +33,7 @@ export const createSelectBoxHandler = (_ctx: ComponentHandlerDeps) =>
           }),
       };
 
-      return createElement(tag, commonProps);
+      return createLocalSnippetElement(tag, commonProps);
     },
   );
 
@@ -45,14 +45,10 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
     (node) => {
       const props = node.componentProperties;
 
-      const tag = (() => {
-        switch (props.Control.value) {
-          case "Checkbox":
-            return "CheckSelectBoxGroup";
-          case "Radio":
-            return "RadioSelectBoxGroup";
-        }
-      })();
+      const tag = match(props.Control.value)
+        .with("Checkbox", () => "CheckSelectBoxGroup")
+        .with("Radio", () => "RadioSelectBoxGroup")
+        .exhaustive();
 
       const selectBoxes = findAllInstances<SelectBoxProperties>({
         node,
@@ -63,7 +59,7 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
         selectBox.componentProperties.State.value.split("-").includes("Selected"),
       );
 
-      const stack = createElement(
+      const stack = createSeedReactElement(
         "Stack",
         { gap: "spacingY.componentDefault" },
         selectBoxes.map(selectBoxHandler.transform),
@@ -75,7 +71,7 @@ export const createSelectBoxGroupHandler = (ctx: ComponentHandlerDeps) => {
         }),
       };
 
-      return createElement(tag, commonProps, stack);
+      return createLocalSnippetElement(tag, commonProps, stack);
     },
   );
 };

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

@@ -1,9 +1,10 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+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 type { ComponentHandlerDeps } from "../deps.interface";
-import type { SkeletonProperties } from "@/codegen/component-properties";
 import { match } from "ts-pattern";
+import { createSeedReactElement } from "../../element-factories";
+import type { ComponentHandlerDeps } from "../deps.interface";
 
 export const createSkeletonHandler = (ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SkeletonProperties>(metadata.skeleton.key, (node) => {
@@ -21,5 +22,5 @@ export const createSkeletonHandler = (ctx: ComponentHandlerDeps) =>
         .otherwise(() => "full"),
     };
 
-    return createElement("Skeleton", commonProps);
+    return createSeedReactElement("Skeleton", commonProps);
   });

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

@@ -1,8 +1,11 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+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";
-import type { SnackbarProperties } from "@/codegen/component-properties";
+
+const { createLocalSnippetElement } = createLocalSnippetHelper("snackbar");
 
 export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SnackbarProperties>(
@@ -17,6 +20,6 @@ export const createSnackbarHandler = (_ctx: ComponentHandlerDeps) =>
       };
 
       // TODO: adapter.create({ render })
-      return createElement("Snackbar", commonProps);
+      return createLocalSnippetElement("Snackbar", commonProps);
     },
   );

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

@@ -1,9 +1,12 @@
-import { createElement, defineComponentHandler } from "@/codegen/core";
+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 type { SwitchProperties } from "@/codegen/component-properties";
 import { handleSizeProp } from "../size";
 
+const { createLocalSnippetElement } = createLocalSnippetHelper("switch");
+
 export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
   defineComponentHandler<SwitchProperties>(
     metadata.switch.key,
@@ -25,6 +28,6 @@ export const createSwitchHandler = (_ctx: ComponentHandlerDeps) =>
         }),
       };
 
-      return createElement("Switch", commonProps);
+      return createLocalSnippetElement("Switch", commonProps);
     },
   );