@seed-design/figma 0.0.6 → 0.0.15

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/extended-fab.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 { ExtendedFabProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ExtendedFabProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
 
 export const createExtendedFabTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<ExtendedFabProperties>(

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

@@ -1,6 +1,6 @@
 import { defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createElement } from "@/codegen/core";
 import type { FabProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
 

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

@@ -1,6 +1,6 @@
 import { defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createElement } from "@/codegen/core";
 import type { HelpBubbleProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
 

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

@@ -1,7 +1,7 @@
 import { defineComponentTransformer } from "@/codegen/core";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import { createElement } from "@/codegen/core";
 import type { IdentityPlaceholderProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
 

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/inline-banner.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 type { NormalizedInstanceNode, NormalizedTextNode } from "@/normalizer";
+import { findOne } from "@/utils/figma-node";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findOne } from "../../../../utils/figma-node";
-import type { NormalizedInstanceNode, NormalizedTextNode } from "../../../../normalizer";
-import type { InlineBannerProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { InlineBannerProperties } from "../properties.type";
 
 export const createInlineBannerTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<InlineBannerProperties>(metadata.inlineBanner.key, (node) => {

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

@@ -1,8 +1,7 @@
-import { defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import type { MannerTempBadgeProperties } from "../properties.type";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { MannerTempBadgeProperties } from "../properties.type";
 
 export const createMannerTempBadgeTransformer = (_ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<MannerTempBadgeProperties>(

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

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

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/progress-circle.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 { match } from "ts-pattern";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import type { ProgressCircleProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ProgressCircleProperties } from "../properties.type";
 
 export const createProgressCircleTransformer = (_ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<ProgressCircleProperties>(

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

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

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

@@ -1,12 +1,11 @@
-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 { 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 {
   SegmentedControlItemProperties,
   SegmentedControlProperties,
 } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
 
 const SEGMENTED_CONTROL_ITEM_KEY = "9a7ba0d4c041ddbce84ee48881788434fd6bccc8";
 const createSegmentedControlItemTransformer = (_ctx: SeedComponentTransformerDeps) =>

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/select-box.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 { SelectBoxGroupProperties, SelectBoxProperties } 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 { SelectBoxGroupProperties, SelectBoxProperties } from "../properties.type";
 
 export const createSelectBoxTransformer = (_ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<SelectBoxProperties>(

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

@@ -1,9 +1,8 @@
-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 type { SkeletonProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { SkeletonProperties } from "../properties.type";
 
 export const createSkeletonTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<SkeletonProperties>(

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

@@ -1,9 +1,8 @@
-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 type { SnackbarProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { SnackbarProperties } from "../properties.type";
 
 export const createSnackbarTransformer = (_ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<SnackbarProperties>(

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

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

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

@@ -1,15 +1,14 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "@/entities/data/__generated__/component-sets";
+import type { NormalizedInstanceNode } from "@/normalizer";
 import { camelCase } from "change-case";
-import * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import type { NormalizedInstanceNode } from "../../../../normalizer";
-import { handleSizeProp } from "../size";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
 import type {
   TabsFillItemProperties,
   TabsHugItemProperties,
   TabsProperties,
 } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
+import { handleSizeProp } from "../size";
 
 const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
 const createTabsHugItemTransformer = (_ctx: SeedComponentTransformerDeps) =>

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

@@ -1,13 +1,12 @@
-import { defineComponentTransformer } from "@/codegen/core";
+import { createElement, defineComponentTransformer } 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 * as metadata from "../../../data/__generated__/component-sets";
-import { createElement } from "../../../core/jsx";
-import { findOne } from "../../../../utils/figma-node";
-import type { NormalizedInstanceNode } from "../../../../normalizer";
-import { handleSizeProp } from "../size";
-import type { TextButtonProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { TextButtonProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
 
 export const createTextButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<TextButtonProperties>(metadata.textButton.key, (node) => {

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

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

package/src/codegen/{domain/seed-component → targets/react/component}/transformers/toggle-button.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 { ToggleButtonProperties } from "../properties.type";
 import type { SeedComponentTransformerDeps } from "../deps.interface";
+import type { ToggleButtonProperties } from "../properties.type";
+import { handleSizeProp } from "../size";
 
 export const createToggleButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
   defineComponentTransformer<ToggleButtonProperties>(

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

@@ -0,0 +1,170 @@
+import { createCodegenTransformer, createValueTransformer } from "@/codegen/core";
+import {
+  createIconService,
+  createStyleService,
+  createVariableService,
+  iconRepository,
+  styleRepository,
+  variableRepository,
+} from "@/entities";
+import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
+import { toCssPixel, toCssRgba } from "@/utils/css";
+import { camelCase } from "change-case";
+import { createSeedComponentTransformers } from "./component";
+import { createFrameTransformer } from "./frame";
+import { createInstanceTransformer } from "./instance";
+import {
+  createContainerLayoutPropsTransformer,
+  createFrameFillPropsTransformer,
+  createIconSelfLayoutPropsTransformer,
+  createRadiusPropsTransformer,
+  createSelfLayoutPropsTransformer,
+  createShapeFillPropsTransformer,
+  createStrokePropsTransformer,
+  createTextFillPropsTransformer,
+  createTypeStylePropsTransformer,
+} from "./props";
+import {
+  createBooleanOperationTransformer,
+  createRectangleTransformer,
+  createVectorTransformer,
+} from "./shape";
+import { createTextTransformer } from "./text";
+
+const IGNORED_COMPONENT_KEYS = new Set<string>([
+  "1acdc7247c83a73a0504d6fad86d08783938cb1a",
+  "b38b719b61cdf1a24458d7a7888bee74b7649084",
+]);
+
+export interface CreateContextOptions {
+  ignoredComponentKeys?: Set<string>;
+  shouldInferVariableName: boolean;
+  shouldInferAutoLayout: boolean;
+}
+
+const styleService = createStyleService({
+  styleRepository,
+  styleNameTransformer: ({ slug }) =>
+    camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
+});
+const variableService = createVariableService({
+  variableRepository,
+  variableNameTransformer: ({ slug }) =>
+    slug
+      .filter(
+        (s) =>
+          !(s === "dimension" || s === "font-size" || s === "font-weight" || s === "line-height"),
+      )
+      .map((s) => s.replaceAll(",", "_"))
+      .map(camelCasePreserveUnderscoreBetweenNumbers)
+      .join("."),
+  inferCompareFunction: (name1: string, name2: string) => {
+    const scoreFn = (name: string) => {
+      let score = 0;
+      if (name.includes("bg")) {
+        score += 100;
+      }
+      if (name.includes("fg")) {
+        score += 100;
+      }
+      if (name.includes("stroke")) {
+        score += 100;
+      }
+      if (name.includes("spacing-x")) {
+        score -= 100;
+      }
+      if (name.includes("spacing-y")) {
+        score -= 100;
+      }
+      if (name.endsWith("pressed")) {
+        score -= 100;
+      }
+      return score;
+    };
+
+    return scoreFn(name2) - scoreFn(name1);
+  },
+});
+const iconService = createIconService({
+  iconRepository,
+});
+
+// TODO: implement figma component service
+const componentTransformers = createSeedComponentTransformers({
+  iconService,
+  variableService,
+});
+
+export function createContext(options: CreateContextOptions) {
+  const {
+    ignoredComponentKeys = IGNORED_COMPONENT_KEYS,
+    shouldInferVariableName,
+    shouldInferAutoLayout,
+  } = options;
+
+  const valueTransformer = createValueTransformer({
+    variableService,
+    formatters: {
+      color: (value: RGBA) => toCssRgba(value),
+      dimension: (value: number) => toCssPixel(value),
+      fontDimension: (value: number) => toCssPixel(value),
+      fontWeight: (value: number) => value,
+    },
+    shouldInferVariableName,
+  });
+
+  const containerLayoutPropsTransformer = createContainerLayoutPropsTransformer(valueTransformer);
+  const selfLayoutPropsTransformer = createSelfLayoutPropsTransformer(valueTransformer);
+  const iconSelfLayoutPropsTransformer = createIconSelfLayoutPropsTransformer(valueTransformer);
+  const frameFillPropsTransformer = createFrameFillPropsTransformer(valueTransformer);
+  const shapeFillPropsTransformer = createShapeFillPropsTransformer(valueTransformer);
+  const textFillPropsTransformer = createTextFillPropsTransformer(valueTransformer);
+  const radiusPropsTransformer = createRadiusPropsTransformer(valueTransformer);
+  const strokePropsTransformer = createStrokePropsTransformer(valueTransformer);
+  const typeStylePropsTransformer = createTypeStylePropsTransformer({
+    valueTransformer,
+    styleService,
+  });
+  const propsTransformers = {
+    containerLayout: containerLayoutPropsTransformer,
+    selfLayout: selfLayoutPropsTransformer,
+    iconSelfLayout: iconSelfLayoutPropsTransformer,
+    frameFill: frameFillPropsTransformer,
+    shapeFill: shapeFillPropsTransformer,
+    textFill: textFillPropsTransformer,
+    radius: radiusPropsTransformer,
+    stroke: strokePropsTransformer,
+    typeStyle: typeStylePropsTransformer,
+  };
+
+  const frameTransformer = createFrameTransformer({
+    propsTransformers,
+  });
+  const instanceTransformer = createInstanceTransformer({
+    iconService,
+    ignoredComponentKeys,
+    propsTransformers,
+    componentTransformers,
+    frameTransformer,
+  });
+  const textTransformer = createTextTransformer({
+    propsTransformers,
+  });
+  const rectangleTransformer = createRectangleTransformer({
+    propsTransformers,
+  });
+  const vectorTransformer = createVectorTransformer();
+  const booleanOperationTransformer = createBooleanOperationTransformer();
+
+  const codegenTransformer = createCodegenTransformer({
+    frameTransformer,
+    textTransformer,
+    rectangleTransformer,
+    instanceTransformer,
+    vectorTransformer,
+    booleanOperationTransformer,
+    shouldInferAutoLayout,
+  });
+
+  return codegenTransformer;
+}

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

@@ -0,0 +1,75 @@
+import type {
+  NormalizedComponentNode,
+  NormalizedFrameNode,
+  NormalizedInstanceNode,
+} from "@/normalizer";
+import {
+  cloneElement,
+  createElement,
+  defineElementTransformer,
+  type ElementTransformer,
+} from "../../core";
+import type { ContainerLayoutProps, PropsTransformers } from "./props";
+
+export interface FrameTransformerDeps {
+  propsTransformers: PropsTransformers;
+}
+
+export function createFrameTransformer({
+  propsTransformers,
+}: FrameTransformerDeps): ElementTransformer<
+  NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode
+> {
+  function inferLayoutComponent(props: ContainerLayoutProps, isFlex: boolean) {
+    if (!isFlex) {
+      return "Box";
+    }
+
+    if (props.direction === "column") {
+      return "VStack";
+    }
+
+    return "HStack";
+  }
+
+  return defineElementTransformer(
+    (node: NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode, traverse) => {
+      const children = node.children;
+      const transformedChildren = children.map(traverse);
+      const isFlex = node.layoutMode === "HORIZONTAL" || node.layoutMode === "VERTICAL";
+
+      const props = {
+        ...propsTransformers.radius(node, traverse),
+        ...(isFlex ? propsTransformers.containerLayout(node, traverse) : {}),
+        ...propsTransformers.selfLayout(node, traverse),
+        ...propsTransformers.frameFill(node, traverse),
+        ...propsTransformers.stroke(node, traverse),
+      };
+
+      const isStretch = props.align === undefined || props.align === "stretch";
+      const processedChildren = isStretch
+        ? transformedChildren.map((child) =>
+            child ? cloneElement(child, { alignSelf: undefined }) : child,
+          )
+        : transformedChildren;
+
+      const layoutComponent = inferLayoutComponent(props, isFlex);
+
+      if (layoutComponent === "VStack") {
+        const { direction, ...rest } = props;
+
+        return createElement("VStack", rest, processedChildren);
+      }
+
+      if (layoutComponent === "HStack") {
+        const { direction, ...rest } = props;
+
+        return createElement("HStack", rest, processedChildren);
+      }
+
+      if (layoutComponent === "Box") {
+        return createElement("Box", props, processedChildren);
+      }
+    },
+  );
+}

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

@@ -0,0 +1,7 @@
+export * from "./props";
+export * from "./shape";
+export * from "./frame";
+export * from "./instance";
+export * from "./text";
+export * from "./component";
+export * from "./context";

package/src/codegen/{domain/instance.service.ts → targets/react/instance.ts}

@@ -1,40 +1,29 @@
+import type { IconService } from "@/entities";
 import type { NormalizedFrameTrait, NormalizedInstanceNode } from "@/normalizer";
 import {
   createElement,
   defineElementTransformer,
   definePropsTransformer,
+  type ComponentTransformer,
   type ElementTransformer,
-} from "../core";
-import type { FigmaComponentService } from "./figma-component.service";
-import type { FrameService } from "./frame.service";
-import type { IconService } from "./icon.service";
-import type { FillPropsService, ShapeFillProps } from "./props/fill-props.service";
-import type {
-  SeedSelfLayoutProps,
-  SelfLayoutPropsService,
-} from "./props/self-layout-props.service";
+} from "../../core";
+import type { PropsTransformers } from "./props";
 
-export interface InstanceService {
-  transform: ElementTransformer<NormalizedInstanceNode>;
-}
-
-export interface SeedInstanceServiceDeps {
-  figmaComponentService: FigmaComponentService;
-  fillPropsService: FillPropsService<ShapeFillProps>;
-  selfLayoutPropsService: SelfLayoutPropsService<SeedSelfLayoutProps>;
+export interface InstanceTransformerDeps {
   iconService?: IconService;
-  frameService?: FrameService;
   ignoredComponentKeys?: Set<string>;
+  propsTransformers: PropsTransformers;
+  componentTransformers: Record<string, ComponentTransformer>;
+  frameTransformer: ElementTransformer<NormalizedInstanceNode>;
 }
 
-export function createSeedInstanceService({
-  figmaComponentService,
-  fillPropsService,
-  selfLayoutPropsService,
+export function createInstanceTransformer({
   iconService,
-  frameService,
   ignoredComponentKeys,
-}: SeedInstanceServiceDeps): InstanceService {
+  propsTransformers,
+  componentTransformers,
+  frameTransformer,
+}: InstanceTransformerDeps): ElementTransformer<NormalizedInstanceNode> {
   const transformIconColorProps = definePropsTransformer((node: NormalizedFrameTrait, traverse) => {
     if (node.children.length === 0) {
       throw new Error("Node has no children");
@@ -44,7 +33,7 @@ export function createSeedInstanceService({
       (child) => child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION",
     );
 
-    const colorProps = vectors.map((vector) => fillPropsService.transform(vector, traverse));
+    const colorProps = vectors.map((vector) => propsTransformers.shapeFill(vector, traverse));
 
     const fills = new Set(
       colorProps.map((props) => props.color).filter((color) => color !== undefined),
@@ -68,24 +57,22 @@ export function createSeedInstanceService({
     if (iconService?.isIconComponent(componentKey)) {
       const tagName = iconService.createIconTagName(componentKey);
       const props = {
-        ...selfLayoutPropsService.transform(node, traverse),
+        ...propsTransformers.iconSelfLayout(node, traverse),
         ...transformIconColorProps(node, traverse),
       };
-      return createElement(tagName, props);
+      return createElement("Icon", { svg: createElement(tagName), ...props });
     }
 
     const componentTransformer = componentSetKey
-      ? figmaComponentService.getTransformer(componentSetKey)
-      : figmaComponentService.getTransformer(componentKey);
+      ? componentTransformers[componentSetKey]
+      : componentTransformers[componentKey];
 
     if (componentTransformer) {
       return componentTransformer.transform(node);
     }
 
-    return frameService?.transform(node, traverse);
+    return frameTransformer(node, traverse);
   });
 
-  return {
-    transform,
-  };
+  return transform;
 }