@seed-design/figma 0.0.5 → 0.0.15

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

@@ -0,0 +1,244 @@
+import {
+  createPropsTransformer,
+  definePropsTransformer,
+  type PropsTransformer,
+  type ValueTransformer,
+} from "@/codegen/core";
+import type { StyleService } from "@/entities";
+import type {
+  NormalizedCornerTrait,
+  NormalizedHasChildrenTrait,
+  NormalizedHasFramePropertiesTrait,
+  NormalizedHasGeometryTrait,
+  NormalizedHasLayoutTrait,
+  NormalizedIsLayerTrait,
+  NormalizedTypePropertiesTrait,
+} from "@/normalizer";
+
+export interface PropsTransformers {
+  containerLayout: PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps>;
+  selfLayout: PropsTransformer<SelfLayoutTrait, SelfLayoutProps>;
+  radius: PropsTransformer<RadiusTrait, RadiusProps>;
+  frameFill: PropsTransformer<FillTrait, FillProps>;
+  shapeFill: PropsTransformer<FillTrait, FillProps>;
+  textFill: PropsTransformer<FillTrait, FillProps>;
+  stroke: PropsTransformer<StrokeTrait, StrokeProps>;
+  typeStyle: PropsTransformer<TypeStyleTrait, TypeStyleProps>;
+}
+
+export type ContainerLayoutTrait = NormalizedHasFramePropertiesTrait &
+  NormalizedHasChildrenTrait &
+  NormalizedHasLayoutTrait &
+  NormalizedIsLayerTrait;
+
+export type SelfLayoutTrait = NormalizedIsLayerTrait & NormalizedHasLayoutTrait;
+
+export type RadiusTrait = NormalizedCornerTrait & NormalizedIsLayerTrait;
+
+export type FillTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
+
+export type StrokeTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
+
+export type TypeStyleTrait = NormalizedTypePropertiesTrait & NormalizedIsLayerTrait;
+
+export interface ContainerLayoutProps {
+  layoutMode?: "HORIZONTAL" | "VERTICAL" | "NONE";
+  primaryAxisAlignItems?: "MIN" | "CENTER" | "MAX" | "SPACE_BETWEEN";
+  counterAxisAlignItems?: "MIN" | "CENTER" | "MAX" | "BASELINE";
+  layoutWrap?: "WRAP" | "NO_WRAP";
+  itemSpacing?: number | string; // string when variable
+  paddingTop?: number | string; // string when variable
+  paddingBottom?: number | string; // string when variable
+  paddingLeft?: number | string; // string when variable
+  paddingRight?: number | string; // string when variable
+  horizontalPadding?: number | string; // string when variable
+  verticalPadding?: number | string; // string when variable
+}
+
+type FigmaValueTransformer = ValueTransformer<string, number, number, number>;
+
+export function createContainerLayoutPropsTransformer(
+  valueTransformer: FigmaValueTransformer,
+): PropsTransformer<ContainerLayoutTrait, ContainerLayoutProps> {
+  return createPropsTransformer({
+    _types: {
+      trait: {} as ContainerLayoutTrait,
+      props: {} as ContainerLayoutProps,
+    },
+    handlers: {
+      layoutMode: ({ layoutMode }) => layoutMode ?? "NONE",
+      primaryAxisAlignItems: ({ primaryAxisAlignItems }) => primaryAxisAlignItems,
+      counterAxisAlignItems: ({ counterAxisAlignItems }) => counterAxisAlignItems,
+      layoutWrap: ({ layoutWrap }) => layoutWrap,
+      itemSpacing: ({ itemSpacing }) => itemSpacing,
+      paddingTop: (node) => valueTransformer.getFormattedValue.paddingTop(node),
+      paddingBottom: (node) => valueTransformer.getFormattedValue.paddingBottom(node),
+      paddingLeft: (node) => valueTransformer.getFormattedValue.paddingLeft(node),
+      paddingRight: (node) => valueTransformer.getFormattedValue.paddingRight(node),
+    },
+    shorthands: {
+      horizontalPadding: ["paddingLeft", "paddingRight"],
+      verticalPadding: ["paddingTop", "paddingBottom"],
+    },
+    defaults: {},
+  });
+}
+
+export interface SelfLayoutProps {
+  layoutGrow?: number;
+  layoutAlign?: "STRETCH" | "INHERIT" | "MIN" | "CENTER" | "MAX";
+  layoutSizingVertical?: "FIXED" | "HUG" | "FILL";
+  layoutSizingHorizontal?: "FIXED" | "HUG" | "FILL";
+  width?: string | number; // string when variable
+  height?: string | number; // string when variable
+  minWidth?: string | number; // string when variable
+  minHeight?: string | number; // string when variable
+  maxWidth?: string | number; // string when variable
+  maxHeight?: string | number; // string when variable
+}
+
+export function createSelfLayoutPropsTransformer(
+  valueTransformer: FigmaValueTransformer,
+): PropsTransformer<SelfLayoutTrait, SelfLayoutProps> {
+  return createPropsTransformer({
+    _types: {
+      trait: {} as SelfLayoutTrait,
+      props: {} as SelfLayoutProps,
+    },
+    handlers: {
+      layoutGrow: ({ layoutGrow }) => layoutGrow,
+      layoutAlign: ({ layoutAlign }) => layoutAlign,
+      layoutSizingVertical: ({ layoutSizingVertical }) => layoutSizingVertical,
+      layoutSizingHorizontal: ({ layoutSizingHorizontal }) => layoutSizingHorizontal,
+      width: (node) => valueTransformer.getFormattedValue.width(node),
+      height: (node) => valueTransformer.getFormattedValue.height(node),
+      minWidth: (node) => valueTransformer.getFormattedValue.minWidth(node),
+      minHeight: (node) => valueTransformer.getFormattedValue.minHeight(node),
+      maxWidth: (node) => valueTransformer.getFormattedValue.maxWidth(node),
+      maxHeight: (node) => valueTransformer.getFormattedValue.maxHeight(node),
+    },
+    defaults: {},
+  });
+}
+
+export interface RadiusProps {
+  cornerRadius?: number | string; // string when variable
+  topLeftRadius?: number | string; // string when variable
+  topRightRadius?: number | string; // string when variable
+  bottomLeftRadius?: number | string; // string when variable
+  bottomRightRadius?: number | string; // string when variable
+}
+
+export function createRadiusPropsTransformer(valueTransformer: FigmaValueTransformer) {
+  return createPropsTransformer({
+    _types: {
+      trait: {} as RadiusTrait,
+      props: {} as RadiusProps,
+    },
+    handlers: {
+      topLeftRadius: (node) => valueTransformer.getFormattedValue.topLeftRadius(node),
+      topRightRadius: (node) => valueTransformer.getFormattedValue.topRightRadius(node),
+      bottomLeftRadius: (node) => valueTransformer.getFormattedValue.bottomLeftRadius(node),
+      bottomRightRadius: (node) => valueTransformer.getFormattedValue.bottomRightRadius(node),
+    },
+    shorthands: {
+      cornerRadius: ["topLeftRadius", "topRightRadius", "bottomLeftRadius", "bottomRightRadius"],
+    },
+    defaults: {
+      cornerRadius: 0,
+      topLeftRadius: 0,
+      topRightRadius: 0,
+      bottomLeftRadius: 0,
+      bottomRightRadius: 0,
+    },
+  });
+}
+
+export interface FillProps {
+  fill?: string;
+}
+
+export function createFrameFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
+  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueTransformer.getFormattedValue.frameFill(node);
+
+    return {
+      fill,
+    };
+  });
+}
+
+export function createShapeFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
+  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueTransformer.getFormattedValue.shapeFill(node);
+
+    return {
+      fill,
+    };
+  });
+}
+
+export function createTextFillPropsTransformer(valueTransformer: FigmaValueTransformer) {
+  return definePropsTransformer<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueTransformer.getFormattedValue.textFill(node);
+
+    return {
+      fill,
+    };
+  });
+}
+
+export interface StrokeProps {
+  stroke?: string;
+  strokeWeight?: number;
+}
+
+export function createStrokePropsTransformer(
+  valueTransformer: FigmaValueTransformer,
+): PropsTransformer<StrokeTrait, StrokeProps> {
+  return definePropsTransformer((node: StrokeTrait) => {
+    const stroke = valueTransformer.getFormattedValue.stroke(node);
+    const strokeWeight = node.strokeWeight;
+
+    return {
+      stroke,
+      strokeWeight,
+    };
+  });
+}
+
+export interface TypeStyleProps {
+  textStyle?: string;
+  fontSize?: string | number;
+  fontWeight?: string | number;
+  lineHeight?: string | number;
+  maxLines?: number;
+}
+
+export function createTypeStylePropsTransformer({
+  valueTransformer,
+  styleService,
+}: {
+  valueTransformer: FigmaValueTransformer;
+  styleService: StyleService;
+}): PropsTransformer<TypeStyleTrait, TypeStyleProps> {
+  return definePropsTransformer((node) => {
+    const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
+    const maxLines =
+      node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
+
+    if (styleName) {
+      return {
+        textStyle: styleName,
+        maxLines,
+      };
+    }
+
+    return {
+      fontSize: valueTransformer.getFormattedValue.fontSize(node),
+      fontWeight: valueTransformer.getFormattedValue.fontWeight(node),
+      lineHeight: valueTransformer.getFormattedValue.lineHeight(node),
+      maxLines,
+    };
+  });
+}

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

@@ -0,0 +1,62 @@
+import type {
+  NormalizedBooleanOperationNode,
+  NormalizedRectangleNode,
+  NormalizedVectorNode,
+} from "@/normalizer";
+import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
+import type { PropsTransformers } from "./props";
+
+export interface RectangleTransformerDeps {
+  propsTransformers: PropsTransformers;
+}
+
+export function createRectangleTransformer({
+  propsTransformers,
+}: RectangleTransformerDeps): ElementTransformer<NormalizedRectangleNode> {
+  return defineElementTransformer((node: NormalizedRectangleNode, traverse) => {
+    return createElement("Rectangle", { ...propsTransformers.selfLayout(node, traverse) });
+  });
+}
+
+export interface VectorTransformerDeps {
+  propsTransformers: PropsTransformers;
+}
+
+export function createVectorTransformer({
+  propsTransformers,
+}: VectorTransformerDeps): ElementTransformer<NormalizedVectorNode> {
+  return defineElementTransformer((node, traverse) => {
+    return createElement(
+      "Vector",
+      {
+        ...propsTransformers.selfLayout(node, traverse),
+        ...propsTransformers.radius(node, traverse),
+        ...propsTransformers.stroke(node, traverse),
+        ...propsTransformers.shapeFill(node, traverse),
+      },
+      [],
+      "Vector Node Placeholder",
+    );
+  });
+}
+
+export interface BooleanOperationTransformerDeps {
+  propsTransformers: PropsTransformers;
+}
+
+export function createBooleanOperationTransformer({
+  propsTransformers,
+}: 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),
+      },
+      node.children.map(traverse),
+    );
+  });
+}

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

@@ -0,0 +1,33 @@
+import type { NormalizedTextNode } from "@/normalizer";
+import { compactObject } from "@/utils/common";
+import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
+import type { PropsTransformers } from "./props";
+
+export interface TextTransformerDeps {
+  propsTransformers: PropsTransformers;
+}
+
+export function createTextTransformer({
+  propsTransformers,
+}: TextTransformerDeps): ElementTransformer<NormalizedTextNode> {
+  return defineElementTransformer((node: NormalizedTextNode, traverse) => {
+    const hasMultipleFills = node.fills.length > 1;
+
+    const fillProps = propsTransformers.textFill(node, traverse);
+    const typeStyleProps = propsTransformers.typeStyle(node, traverse);
+
+    const props = compactObject({
+      ...typeStyleProps,
+      ...fillProps,
+    });
+
+    return createElement(
+      "Text",
+      props,
+      node.characters,
+      hasMultipleFills
+        ? "Multiple fills in Text node encountered, only the first fill is used."
+        : "",
+    );
+  });
+}

package/src/codegen/targets/index.ts

@@ -0,0 +1,2 @@
+export * as figma from "./figma";
+export * as react from "./react";

package/src/codegen/{domain/seed-component → targets/react/component}/deps.interface.ts

@@ -1,5 +1,5 @@
-import type { IconService } from "../icon.service";
-import type { VariableService } from "../variable.service";
+import type { IconService, VariableService } from "@/entities";
+
 export interface SeedComponentTransformerDeps {
   iconService: IconService;
   variableService: VariableService;

package/src/codegen/{domain/seed-component → targets/react/component}/index.ts

@@ -39,37 +39,39 @@ export type { SeedComponentTransformerDeps };
 export type * from "./properties.type";
 
 export const createSeedComponentTransformers = (ctx: SeedComponentTransformerDeps) =>
-  [
-    createActionButtonTransformer(ctx),
-    createActionChipTransformer(ctx),
-    createActionSheetTransformer(ctx),
-    createAppBarTransformer(ctx),
-    createAvatarTransformer(ctx),
-    createAvatarStackTransformer(ctx),
-    createBadgeTransformer(ctx),
-    createCalloutTransformer(ctx),
-    createCheckboxTransformer(ctx),
-    createChipTabsTransformer(ctx),
-    createControlChipTransformer(ctx),
-    createErrorStateTransformer(ctx),
-    createExtendedActionSheetTransformer(ctx),
-    createExtendedFabTransformer(ctx),
-    createFabTransformer(ctx),
-    createHelpBubbleTransformer(ctx),
-    createIdentityPlaceholderTransformer(ctx),
-    createInlineBannerTransformer(ctx),
-    createMannerTempBadgeTransformer(ctx),
-    createMultilineTextFieldTransformer(ctx),
-    createProgressCircleTransformer(ctx),
-    createReactionButtonTransformer(ctx),
-    createSegmentedControlTransformer(ctx),
-    createSelectBoxGroupTransformer(ctx),
-    createSelectBoxTransformer(ctx),
-    createSkeletonTransformer(ctx),
-    createSnackbarTransformer(ctx),
-    createSwitchTransformer(ctx),
-    createTabsTransformer(ctx),
-    createTextButtonTransformer(ctx),
-    createTextFieldTransformer(ctx),
-    createToggleButtonTransformer(ctx),
-  ] as Array<ComponentTransformer>;
+  Object.fromEntries(
+    [
+      createActionButtonTransformer(ctx),
+      createActionChipTransformer(ctx),
+      createActionSheetTransformer(ctx),
+      createAppBarTransformer(ctx),
+      createAvatarTransformer(ctx),
+      createAvatarStackTransformer(ctx),
+      createBadgeTransformer(ctx),
+      createCalloutTransformer(ctx),
+      createCheckboxTransformer(ctx),
+      createChipTabsTransformer(ctx),
+      createControlChipTransformer(ctx),
+      createErrorStateTransformer(ctx),
+      createExtendedActionSheetTransformer(ctx),
+      createExtendedFabTransformer(ctx),
+      createFabTransformer(ctx),
+      createHelpBubbleTransformer(ctx),
+      createIdentityPlaceholderTransformer(ctx),
+      createInlineBannerTransformer(ctx),
+      createMannerTempBadgeTransformer(ctx),
+      createMultilineTextFieldTransformer(ctx),
+      createProgressCircleTransformer(ctx),
+      createReactionButtonTransformer(ctx),
+      createSegmentedControlTransformer(ctx),
+      createSelectBoxGroupTransformer(ctx),
+      createSelectBoxTransformer(ctx),
+      createSkeletonTransformer(ctx),
+      createSnackbarTransformer(ctx),
+      createSwitchTransformer(ctx),
+      createTabsTransformer(ctx),
+      createTextButtonTransformer(ctx),
+      createTextFieldTransformer(ctx),
+      createToggleButtonTransformer(ctx),
+    ].map((x) => [x.key, x]) as Array<[string, ComponentTransformer]>,
+  );

package/src/codegen/{domain/seed-component → targets/react/component}/properties.type.ts

@@ -1,5 +1,5 @@
-import type { InferFromDefinition } from "../../core/component";
-import type * as metadata from "../../data/__generated__/component-sets";
+import type { InferFromDefinition } from "@/codegen/core";
+import type * as metadata from "@/entities/data/__generated__/component-sets";
 
 export type ActionButtonProperties = InferFromDefinition<
   typeof metadata.actionButton.componentPropertyDefinitions

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

@@ -1,11 +1,10 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
 import { match } from "ts-pattern";
-import { createElement } from "../../../core/jsx";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { handleSizeProp } from "../size";
-import type { ActionButtonProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ActionButtonProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
 
 export const createActionButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<ActionButtonProperties>(

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

@@ -1,10 +1,9 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
-import { createElement } from "../../../core/jsx";
-import * as metadata from "../../../data/__generated__/component-sets";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
 import type { ActionChipProperties } from "../properties.type";
 import { handleSizeProp } from "../size";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
 
 export const createActionChipTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<ActionChipProperties>(

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

@@ -1,11 +1,10 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } 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 * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findAllInstances } from "../../../../utils/figma-node";
-import type { ActionSheetItemProperties, ActionSheetProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ActionSheetItemProperties, ActionSheetProperties } from "../properties.type";
 
 const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
 const createActionSheetItemTransformer = (_ctx: SeedComponentTransformerDeps) =>

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

@@ -1,16 +1,15 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } 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 * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findAll, findAllInstances, findOne } from "../../../../utils/figma-node";
-import type { NormalizedInstanceNode, NormalizedTextNode } from "../../../../normalizer";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
 import type {
   AppBarLeftProperties,
   AppBarMainProperties,
   AppBarProperties,
   AppBarRightProperties,
 } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
 
 const APP_BAR_MAIN_KEY = "336b49b26c3933485d87cc460b06c390976ea58e";
 const createAppBarMainTransformer = (_ctx: SeedComponentTransformerDeps) =>

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/avatar-stack.ts

@@ -1,9 +1,8 @@
-import { defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findAllInstances } from "../../../../utils/figma-node";
-import type { AvatarProperties, AvatarStackProperties } from "../properties.type";
+import { createElement, defineComponentTransformer } 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, AvatarStackProperties } from "../properties.type";
 import { createAvatarTransformer } from "./avatar";
 
 export const createAvatarStackTransformer = (ctx: SeedComponentTransformerDeps) => {

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/avatar.ts

@@ -1,9 +1,8 @@
-import { defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findAllInstances } from "../../../../utils/figma-node";
-import type { AvatarProperties, IdentityPlaceholderProperties } from "../properties.type";
+import { createElement, defineComponentTransformer } 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";
 
 export const createAvatarTransformer = (ctx: SeedComponentTransformerDeps) => {

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/badge.ts

@@ -1,10 +1,9 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { handleSizeProp } from "../size";
-import type { BadgeProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { BadgeProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
 
 export const createBadgeTransformer = (_ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<BadgeProperties>(

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/callout.ts

@@ -1,10 +1,9 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import type { NormalizedTextNode } from "@/normalizer";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import type { NormalizedTextNode } from "../../../../normalizer";
-import type { CalloutProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { CalloutProperties } from "../properties.type";
 
 export const createCalloutTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<CalloutProperties>(

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/checkbox.ts

@@ -1,10 +1,9 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { handleSizeProp } from "../size";
-import type { CheckboxProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { CheckboxProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
 
 export const createCheckboxTransformer = (_ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<CheckboxProperties>(

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

@@ -1,10 +1,9 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findAllInstances } from "../../../../utils/figma-node";
-import type { ChipTabsItemProperties, ChipTabsProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ChipTabsItemProperties, ChipTabsProperties } from "../properties.type";
 
 const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
 const createChipTabsItemTransformer = (_ctx: SeedComponentTransformerDeps) =>

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/control-chip.ts

@@ -1,10 +1,9 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import { match } from "ts-pattern";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { handleSizeProp } from "../size";
-import type { ControlChipProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ControlChipProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
 
 export const createControlChipTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<ControlChipProperties>(

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/error-state.ts

@@ -1,10 +1,9 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findAllInstances } from "../../../../utils/figma-node";
-import type { ActionButtonProperties, ErrorStateProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ActionButtonProperties, ErrorStateProperties } from "../properties.type";
 import { createActionButtonTransformer } from "./action-button";
 
 export const createErrorStateTransformer = (ctx: SeedComponentTransformerDeps) => {

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

@@ -1,14 +1,13 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { findAllInstances } from "@/utils/figma-node";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findAllInstances } from "../../../../utils/figma-node";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
 import type {
   ExtendedActionSheetGroupProperties,
   ExtendedActionSheetItemProperties,
   ExtendedActionSheetProperties,
 } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
 
 const EXTENDED_ACTION_SHEET_ITEM_KEY = "057083e95466da59051119eec0b41d4ad5a07f8f";
 const createExtendedActionSheetItemTransformer = (ctx: SeedComponentTransformerDeps) =>