@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,24 @@
+import type { ComponentHandler } from "@/codegen/core";
+import type { NormalizedInstanceNode } from "@/normalizer";
+import type { ComponentHandlerDeps } from "./deps.interface";
+
+import * as archivedHandlers from "./handlers/archive";
+import * as currentHandlers from "./handlers";
+
+export type { ComponentHandlerDeps };
+export type UnboundComponentHandler<T extends NormalizedInstanceNode["componentProperties"]> = (
+  deps: ComponentHandlerDeps,
+) => ComponentHandler<T>;
+
+export function bindComponentHandler<T extends NormalizedInstanceNode["componentProperties"]>(
+  unbound: UnboundComponentHandler<T>,
+  deps: ComponentHandlerDeps,
+): ComponentHandler<T> {
+  return unbound(deps);
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: handlers have different component property types
+export const unboundSeedComponentHandlers: Array<UnboundComponentHandler<any>> = [
+  ...Object.values(archivedHandlers),
+  ...Object.values(currentHandlers),
+];

package/src/codegen/targets/react/component/size.ts

@@ -0,0 +1,22 @@
+// TODO: move this file to relevant directory
+
+import { camelCase } from "change-case";
+
+type SizeProp = "XSmall" | "Small" | "Medium" | "Large" | "XLarge" | ({} & string);
+
+export function handleSizeProp(size: SizeProp) {
+  switch (size) {
+    case "XSmall":
+      return "xsmall";
+    case "Small":
+      return "small";
+    case "Medium":
+      return "medium";
+    case "Large":
+      return "large";
+    case "XLarge":
+      return "xlarge";
+    default:
+      return camelCase(size);
+  }
+}

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

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

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

@@ -0,0 +1,96 @@
+import type {
+  NormalizedComponentNode,
+  NormalizedFrameNode,
+  NormalizedInstanceNode,
+} from "@/normalizer";
+import {
+  cloneElement,
+  createElement,
+  defineElementTransformer,
+  type ElementTransformer,
+} from "../../core";
+import { createSeedReactElement } from "./element-factories";
+import type { ContainerLayoutProps, PropsConverters } from "./props";
+
+export interface FrameTransformerDeps {
+  propsConverters: PropsConverters;
+}
+
+export function createFrameTransformer({
+  propsConverters,
+}: 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 = {
+        ...propsConverters.radius(node),
+        ...(isFlex ? propsConverters.containerLayout(node) : {}),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.frameFill(node),
+        ...propsConverters.stroke(node),
+        ...propsConverters.shadow(node),
+      };
+
+      const isStretch = props.align === undefined || props.align === "stretch";
+
+      const layoutComponent = inferLayoutComponent(props, isFlex);
+
+      const hasSpacingMismatch =
+        node.layoutWrap === "WRAP" &&
+        node.counterAxisSpacing !== undefined &&
+        node.itemSpacing !== node.counterAxisSpacing;
+
+      const hasImageFill = node.fills.some(({ type }) => type === "IMAGE");
+      const imgElement = hasImageFill
+        ? createElement("img", {
+            src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`,
+          })
+        : undefined;
+
+      const processedChildren = [
+        imgElement,
+        ...(isStretch
+          ? transformedChildren.map((child) =>
+              child ? cloneElement(child, { alignSelf: undefined }) : child,
+            )
+          : transformedChildren),
+      ];
+
+      const comment = [
+        hasSpacingMismatch &&
+          // currently counterAxisSpacing is only supported when direction=row
+          `row-gap과 column-gap이 다릅니다. (row-gap: ${node.counterAxisSpacing}, column-gap: ${node.itemSpacing})`,
+      ]
+        .filter((cmt) => cmt)
+        .join(" ");
+
+      switch (layoutComponent) {
+        case "VStack":
+        case "HStack": {
+          const { direction: _direction, ...rest } = props;
+
+          return createSeedReactElement(layoutComponent, rest, processedChildren, { comment });
+        }
+        case "Box":
+          return createSeedReactElement("Box", props, processedChildren, { comment });
+      }
+    },
+  );
+}

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

@@ -0,0 +1,55 @@
+import type { IconService } from "@/entities";
+import { pascalCase } from "change-case";
+import { type ElementNode, createElement } from "../../core";
+import { createMonochromeIconElement, createMulticolorIconElement } from "./element-factories";
+
+export interface IconHandler {
+  isIconInstance: (node: { componentKey: string }) => boolean;
+  transform: (node: { componentKey: string }) => ElementNode;
+}
+
+export interface IconHandlerDeps {
+  iconService: IconService;
+  iconNameFormatter?: (props: { name: string; weight?: string }) => string;
+}
+
+const defaultIconNameFormatter = ({ name, weight }: { name: string; weight?: string }) =>
+  pascalCase(`${name}${weight ? weight : ""}`);
+
+export function createIconHandler({
+  iconService,
+  iconNameFormatter = defaultIconNameFormatter,
+}: IconHandlerDeps): IconHandler {
+  function isIconInstance(node: { componentKey: string }): boolean {
+    const key = node.componentKey;
+
+    if (!key) {
+      return false;
+    }
+
+    return iconService.isAvailable(key);
+  }
+
+  function transform(node: { componentKey: string }): ElementNode {
+    const key = node.componentKey;
+    const iconData = iconService.getOne(key);
+    if (!iconData) {
+      return createElement("UnknownIcon");
+    }
+
+    const { name, weight, type } = iconData;
+
+    const tagName = iconNameFormatter({ name, weight });
+
+    if (type === "multicolor") {
+      return createMulticolorIconElement(tagName);
+    }
+
+    return createMonochromeIconElement(tagName);
+  }
+
+  return {
+    isIconInstance,
+    transform,
+  };
+}

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 "./pipeline";

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

@@ -0,0 +1,82 @@
+import type { NormalizedInstanceNode } from "@/normalizer";
+import {
+  defineElementTransformer,
+  type ComponentHandler,
+  type ElementTransformer,
+} from "../../core";
+import { createSeedReactElement } from "./element-factories";
+import type { IconHandler } from "./icon";
+import type { PropsConverters } from "./props";
+
+const OVERRIDE_ACCEPTABLE_PROPERTIES: Set<NodeChangeProperty> = new Set([
+  "characters",
+  "parent",
+  "locked",
+  "visible",
+  "name",
+  "x",
+  "y",
+  "componentProperties",
+  "componentPropertyDefinitions",
+  "componentPropertyReferences",
+] satisfies NodeChangeProperty[]);
+
+export interface InstanceTransformerDeps {
+  iconHandler?: IconHandler;
+  propsConverters: PropsConverters;
+  componentHandlers: Record<string, ComponentHandler>;
+  frameTransformer: ElementTransformer<NormalizedInstanceNode>;
+}
+
+export function createInstanceTransformer({
+  iconHandler,
+  propsConverters,
+  componentHandlers,
+  frameTransformer,
+}: InstanceTransformerDeps): ElementTransformer<NormalizedInstanceNode> {
+  const transform = defineElementTransformer((node: NormalizedInstanceNode, traverse) => {
+    const { componentKey, componentSetKey } = node;
+
+    if (iconHandler?.isIconInstance(node)) {
+      const props = {
+        ...propsConverters.iconSelfLayout(node),
+        ...propsConverters.vectorChildrenFill(node),
+      };
+      return createSeedReactElement("Icon", { svg: iconHandler.transform(node), ...props });
+    }
+
+    const componentHandler = componentSetKey
+      ? componentHandlers[componentSetKey]
+      : componentHandlers[componentKey];
+
+    if (componentHandler) {
+      const handled = componentHandler.transform(node, traverse);
+
+      if (node.overrides && node.overrides.length > 0) {
+        const overriddenFields = node.overrides
+          .flatMap(({ overriddenFields }) => overriddenFields)
+          .filter(
+            (field) => OVERRIDE_ACCEPTABLE_PROPERTIES.has(field as NodeChangeProperty) === false,
+          );
+
+        if (overriddenFields.length === 0) {
+          return handled;
+        }
+
+        return {
+          ...handled,
+          meta: {
+            ...handled.meta,
+            comment: `${handled.meta.comment ? `${handled.meta.comment} ` : ""}오버라이드된 필드: ${Array.from(new Set(overriddenFields)).join(", ")}`,
+          },
+        };
+      }
+
+      return handled;
+    }
+
+    return frameTransformer(node, traverse);
+  });
+
+  return transform;
+}

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

@@ -0,0 +1,133 @@
+import { createCodeGenerator, createValueResolver } from "@/codegen/core";
+import { iconService, styleService, variableService } from "@/codegen/default-services";
+import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
+import {
+  type UnboundComponentHandler,
+  bindComponentHandler,
+  unboundSeedComponentHandlers,
+} from "./component";
+import { createFrameTransformer } from "./frame";
+import { createIconHandler } from "./icon";
+import { createInstanceTransformer } from "./instance";
+import {
+  createContainerLayoutPropsConverter,
+  createFrameFillPropsConverter,
+  createIconSelfLayoutPropsConverter,
+  createRadiusPropsConverter,
+  createSelfLayoutPropsConverter,
+  createShadowPropsConverter,
+  createShapeFillPropsConverter,
+  createStrokePropsConverter,
+  createTextFillPropsConverter,
+  createTypeStylePropsConverter,
+  createVectorChildrenFillPropsConverter,
+} from "./props";
+import {
+  createBooleanOperationTransformer,
+  createRectangleTransformer,
+  createVectorTransformer,
+} from "./shape";
+import { createTextTransformer } from "./text";
+import {
+  defaultEffectStyleNameFormatter,
+  defaultFillStyleResolver,
+  defaultRawValueFormatters,
+  defaultTextStyleNameFormatter,
+  defaultVariableNameFormatter,
+} from "./value-resolver";
+
+export interface CreatePipelineConfig {
+  shouldInferAutoLayout?: boolean;
+  shouldInferVariableName?: boolean;
+  extend?: {
+    componentHandlers?: Array<UnboundComponentHandler<any>>;
+  };
+}
+
+const iconHandler = createIconHandler({
+  iconService,
+});
+
+export function createPipeline(options: CreatePipelineConfig = {}) {
+  const { shouldInferAutoLayout = true, shouldInferVariableName = true, extend = {} } = options;
+
+  const valueResolver = createValueResolver({
+    variableService,
+    variableNameFormatter: defaultVariableNameFormatter,
+    styleService,
+    textStyleNameFormatter: defaultTextStyleNameFormatter,
+    effectStyleNameFormatter: defaultEffectStyleNameFormatter,
+    fillStyleResolver: defaultFillStyleResolver,
+    rawValueFormatters: defaultRawValueFormatters,
+    shouldInferVariableName,
+  });
+
+  const containerLayoutPropsConverter = createContainerLayoutPropsConverter(valueResolver);
+  const selfLayoutPropsConverter = createSelfLayoutPropsConverter(valueResolver);
+  const iconSelfLayoutPropsConverter = createIconSelfLayoutPropsConverter(valueResolver);
+  const frameFillPropsConverter = createFrameFillPropsConverter(valueResolver);
+  const shapeFillPropsConverter = createShapeFillPropsConverter(valueResolver);
+  const textFillPropsConverter = createTextFillPropsConverter(valueResolver);
+  const vectorChildrenFillPropsConverter = createVectorChildrenFillPropsConverter(valueResolver);
+  const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
+  const strokePropsConverter = createStrokePropsConverter(valueResolver);
+  const shadowPropsConverter = createShadowPropsConverter(valueResolver);
+  const typeStylePropsConverter = createTypeStylePropsConverter({
+    valueResolver,
+  });
+  const propsConverters = {
+    containerLayout: containerLayoutPropsConverter,
+    selfLayout: selfLayoutPropsConverter,
+    iconSelfLayout: iconSelfLayoutPropsConverter,
+    frameFill: frameFillPropsConverter,
+    shapeFill: shapeFillPropsConverter,
+    textFill: textFillPropsConverter,
+    vectorChildrenFill: vectorChildrenFillPropsConverter,
+    radius: radiusPropsConverter,
+    stroke: strokePropsConverter,
+    shadow: shadowPropsConverter,
+    typeStyle: typeStylePropsConverter,
+  };
+
+  const componentHandlers = Object.fromEntries(
+    [...unboundSeedComponentHandlers, ...(extend.componentHandlers ?? [])]
+      .map((h) =>
+        bindComponentHandler(h, {
+          valueResolver,
+          iconHandler,
+        }),
+      )
+      .map((t) => [t.key, t]),
+  );
+
+  const frameTransformer = createFrameTransformer({
+    propsConverters,
+  });
+  const instanceTransformer = createInstanceTransformer({
+    iconHandler,
+    propsConverters,
+    componentHandlers,
+    frameTransformer,
+  });
+  const textTransformer = createTextTransformer({
+    propsConverters,
+  });
+  const rectangleTransformer = createRectangleTransformer({
+    propsConverters,
+  });
+  const vectorTransformer = createVectorTransformer();
+  const booleanOperationTransformer = createBooleanOperationTransformer();
+
+  const codeGenerator = createCodeGenerator({
+    frameTransformer,
+    textTransformer,
+    rectangleTransformer,
+    instanceTransformer,
+    vectorTransformer,
+    booleanOperationTransformer,
+    shouldInferAutoLayout,
+    skipComponentKeys: SKIP_COMPONENT_KEYS,
+  });
+
+  return codeGenerator;
+}