@seed-design/figma 0.0.0-alpha-20260324091316

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

@@ -0,0 +1,38 @@
+import type {
+  NormalizedComponentNode,
+  NormalizedFrameNode,
+  NormalizedInstanceNode,
+} from "@/normalizer";
+import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
+import type { PropsConverters } from "./props";
+
+export interface FrameTransformerDeps {
+  propsConverters: PropsConverters;
+}
+
+export function createFrameTransformer({
+  propsConverters,
+}: FrameTransformerDeps): ElementTransformer<
+  NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode
+> {
+  return defineElementTransformer(
+    (node: NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode, traverse) => {
+      const children = node.children;
+
+      const props = {
+        ...propsConverters.radius(node),
+        ...propsConverters.containerLayout(node),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.frameFill(node),
+        ...propsConverters.stroke(node),
+        ...propsConverters.shadow(node),
+      };
+
+      return createElement(
+        "Frame",
+        props,
+        children.map((child) => traverse(child)),
+      );
+    },
+  );
+}

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

@@ -0,0 +1,6 @@
+export * from "./pipeline";
+export * from "./frame";
+export * from "./instance";
+export * from "./props";
+export * from "./shape";
+export * from "./text";

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

@@ -0,0 +1,36 @@
+import type { ComponentRepository } from "@/entities";
+import type { NormalizedInstanceNode } from "@/normalizer";
+import { camelCase } from "change-case";
+import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
+
+export interface InstanceTransformerDeps {
+  frameTransformer: ElementTransformer<NormalizedInstanceNode>;
+  componentRepository?: ComponentRepository;
+}
+
+export function createInstanceTransformer({
+  frameTransformer,
+  componentRepository,
+}: InstanceTransformerDeps): ElementTransformer<NormalizedInstanceNode> {
+  const transform = defineElementTransformer((node: NormalizedInstanceNode, traverse) => {
+    const component = componentRepository?.getOne(node.componentSetKey ?? node.componentKey);
+
+    if (component) {
+      return createElement("Instance", {
+        componentName: component.name,
+        ...Object.fromEntries(
+          Object.entries(node.componentProperties)
+            .filter(([_, props]) => props.type === "VARIANT" || props.type === "TEXT")
+            .map(([key, props]) => [
+              camelCase(key.split("#")[0]),
+              camelCase(props.value as string),
+            ]),
+        ),
+      });
+    }
+
+    return frameTransformer(node, traverse);
+  });
+
+  return transform;
+}

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

@@ -0,0 +1,106 @@
+import { createCodeGenerator, createValueResolver } from "@/codegen/core";
+import type { CodeGenerator } from "@/codegen/core/codegen";
+import { styleService, variableService } from "@/codegen/default-services";
+import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
+import { componentRepository } from "@/entities";
+import { createFrameTransformer } from "./frame";
+import { createInstanceTransformer } from "./instance";
+import {
+  createContainerLayoutPropsConverter,
+  createFrameFillPropsConverter,
+  createRadiusPropsConverter,
+  createSelfLayoutPropsConverter,
+  createShadowPropsConverter,
+  createShapeFillPropsConverter,
+  createStrokePropsConverter,
+  createTextFillPropsConverter,
+  createTypeStylePropsConverter,
+} 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;
+}
+
+export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerator {
+  const { shouldInferAutoLayout = true, shouldInferVariableName = true } = 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 frameFillPropsConverter = createFrameFillPropsConverter(valueResolver);
+  const shapeFillPropsConverter = createShapeFillPropsConverter(valueResolver);
+  const textFillPropsConverter = createTextFillPropsConverter(valueResolver);
+  const radiusPropsConverter = createRadiusPropsConverter(valueResolver);
+  const strokePropsConverter = createStrokePropsConverter(valueResolver);
+  const shadowPropsConverter = createShadowPropsConverter(valueResolver);
+  const typeStylePropsConverter = createTypeStylePropsConverter(valueResolver);
+
+  const propsConverters = {
+    containerLayout: containerLayoutPropsConverter,
+    selfLayout: selfLayoutPropsConverter,
+    frameFill: frameFillPropsConverter,
+    shapeFill: shapeFillPropsConverter,
+    textFill: textFillPropsConverter,
+    radius: radiusPropsConverter,
+    stroke: strokePropsConverter,
+    shadow: shadowPropsConverter,
+    typeStyle: typeStylePropsConverter,
+  };
+
+  const frameTransformer = createFrameTransformer({
+    propsConverters,
+  });
+  const instanceTransformer = createInstanceTransformer({
+    frameTransformer,
+    componentRepository,
+  });
+  const textTransformer = createTextTransformer({
+    propsConverters,
+  });
+  const rectangleTransformer = createRectangleTransformer({
+    propsConverters,
+  });
+  const vectorTransformer = createVectorTransformer({
+    propsConverters,
+  });
+  const booleanOperationTransformer = createBooleanOperationTransformer({
+    propsConverters,
+  });
+
+  const codegenTransformer = createCodeGenerator({
+    frameTransformer,
+    textTransformer,
+    rectangleTransformer,
+    instanceTransformer,
+    vectorTransformer,
+    booleanOperationTransformer,
+    shouldInferAutoLayout,
+    skipComponentKeys: SKIP_COMPONENT_KEYS,
+  });
+
+  return codegenTransformer;
+}

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

@@ -0,0 +1,262 @@
+import { createPropsConverter, definePropsConverter, type PropsConverter } from "@/codegen/core";
+import type {
+  NormalizedCornerTrait,
+  NormalizedHasChildrenTrait,
+  NormalizedHasEffectsTrait,
+  NormalizedHasFramePropertiesTrait,
+  NormalizedHasGeometryTrait,
+  NormalizedHasLayoutTrait,
+  NormalizedIsLayerTrait,
+  NormalizedTypePropertiesTrait,
+} from "@/normalizer";
+import type { FigmaValueResolver } from "./value-resolver";
+
+export interface PropsConverters {
+  containerLayout: PropsConverter<ContainerLayoutTrait, ContainerLayoutProps>;
+  selfLayout: PropsConverter<SelfLayoutTrait, SelfLayoutProps>;
+  radius: PropsConverter<RadiusTrait, RadiusProps>;
+  frameFill: PropsConverter<FillTrait, FillProps>;
+  shapeFill: PropsConverter<FillTrait, FillProps>;
+  textFill: PropsConverter<FillTrait, FillProps>;
+  stroke: PropsConverter<StrokeTrait, StrokeProps>;
+  shadow: PropsConverter<ShadowTrait, ShadowProps>;
+  typeStyle: PropsConverter<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 ShadowTrait = NormalizedIsLayerTrait & NormalizedHasEffectsTrait;
+
+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
+  counterAxisSpacing?: 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
+}
+
+export function createContainerLayoutPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<ContainerLayoutTrait, ContainerLayoutProps> {
+  return createPropsConverter({
+    _types: {
+      trait: {} as ContainerLayoutTrait,
+      props: {} as ContainerLayoutProps,
+    },
+    handlers: {
+      layoutMode: ({ layoutMode }) => (!layoutMode || layoutMode === "GRID" ? "NONE" : layoutMode),
+      primaryAxisAlignItems: ({ primaryAxisAlignItems }) => primaryAxisAlignItems,
+      counterAxisAlignItems: ({ counterAxisAlignItems }) => counterAxisAlignItems,
+      layoutWrap: ({ layoutWrap }) => layoutWrap,
+      itemSpacing: (node) => valueResolver.getFormattedValue.itemSpacing(node),
+      counterAxisSpacing: (node) => valueResolver.getFormattedValue.counterAxisSpacing(node),
+      paddingTop: (node) => valueResolver.getFormattedValue.paddingTop(node),
+      paddingBottom: (node) => valueResolver.getFormattedValue.paddingBottom(node),
+      paddingLeft: (node) => valueResolver.getFormattedValue.paddingLeft(node),
+      paddingRight: (node) => valueResolver.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 createSelfLayoutPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<SelfLayoutTrait, SelfLayoutProps> {
+  return createPropsConverter({
+    _types: {
+      trait: {} as SelfLayoutTrait,
+      props: {} as SelfLayoutProps,
+    },
+    handlers: {
+      layoutGrow: ({ layoutGrow }) => layoutGrow,
+      layoutAlign: ({ layoutAlign }) => layoutAlign,
+      layoutSizingVertical: ({ layoutSizingVertical }) => layoutSizingVertical,
+      layoutSizingHorizontal: ({ layoutSizingHorizontal }) => layoutSizingHorizontal,
+      width: (node) => valueResolver.getFormattedValue.width(node),
+      height: (node) => valueResolver.getFormattedValue.height(node),
+      minWidth: (node) => valueResolver.getFormattedValue.minWidth(node),
+      minHeight: (node) => valueResolver.getFormattedValue.minHeight(node),
+      maxWidth: (node) => valueResolver.getFormattedValue.maxWidth(node),
+      maxHeight: (node) => valueResolver.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 createRadiusPropsConverter(valueResolver: FigmaValueResolver) {
+  return createPropsConverter({
+    _types: {
+      trait: {} as RadiusTrait,
+      props: {} as RadiusProps,
+    },
+    handlers: {
+      topLeftRadius: (node) => valueResolver.getFormattedValue.topLeftRadius(node),
+      topRightRadius: (node) => valueResolver.getFormattedValue.topRightRadius(node),
+      bottomLeftRadius: (node) => valueResolver.getFormattedValue.bottomLeftRadius(node),
+      bottomRightRadius: (node) => valueResolver.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 | { value: string; direction?: string };
+}
+
+export function createFrameFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.frameFill(node);
+
+    return {
+      fill,
+    };
+  });
+}
+
+export function createShapeFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.shapeFill(node);
+
+    return {
+      fill,
+    };
+  });
+}
+
+export function createTextFillPropsConverter(valueResolver: FigmaValueResolver) {
+  return definePropsConverter<FillTrait, FillProps>((node: FillTrait) => {
+    const fill = valueResolver.getFormattedValue.textFill(node);
+
+    return {
+      fill,
+    };
+  });
+}
+
+export interface StrokeProps {
+  stroke?: string;
+  strokeWeight?: number;
+}
+
+export function createStrokePropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<StrokeTrait, StrokeProps> {
+  return definePropsConverter((node: StrokeTrait) => {
+    const stroke = valueResolver.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 createTypeStylePropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<TypeStyleTrait, TypeStyleProps> {
+  return definePropsConverter((node) => {
+    const styleName = valueResolver.getTextStyleValue(node);
+    const maxLines =
+      node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
+
+    if (styleName) {
+      return {
+        textStyle: styleName,
+        maxLines,
+      };
+    }
+
+    return {
+      fontSize: valueResolver.getFormattedValue.fontSize(node),
+      fontWeight: valueResolver.getFormattedValue.fontWeight(node),
+      lineHeight: valueResolver.getFormattedValue.lineHeight(node),
+      maxLines,
+    };
+  });
+}
+
+export interface ShadowProps {
+  boxShadowStyle?: string;
+  boxShadow?: string;
+}
+
+export function createShadowPropsConverter(
+  valueResolver: FigmaValueResolver,
+): PropsConverter<ShadowTrait, ShadowProps> {
+  return definePropsConverter((node: ShadowTrait) => {
+    const effectStyleName = valueResolver.getEffectStyleValue(node);
+    if (effectStyleName) {
+      return {
+        boxShadowStyle: effectStyleName,
+      };
+    }
+
+    const boxShadow = valueResolver.getFormattedValue.boxShadow(node);
+    return {
+      boxShadow,
+    };
+  });
+}

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

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

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

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

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

@@ -0,0 +1,75 @@
+import type { ValueResolver } from "@/codegen/core";
+import { toCssRgba } from "@/utils/css";
+import type { RGBA } from "@figma/rest-api-spec";
+import { camelCase } from "change-case";
+
+export type FigmaValueResolver = ValueResolver<
+  string,
+  { value: string; direction?: string },
+  number,
+  number,
+  number
+>;
+
+export const defaultVariableNameFormatter = ({ slug }: { slug: string[] }) =>
+  slug
+    .filter((s) => s !== "dimension")
+    .map((s) => s.replaceAll(",", "_"))
+    .join("/");
+
+export const defaultTextStyleNameFormatter = ({ slug }: { slug: string[] }) =>
+  slug[slug.length - 1]!;
+
+export const defaultEffectStyleNameFormatter = ({ slug }: { slug: string[] }) =>
+  slug[slug.length - 1]!;
+
+export const defaultFillStyleResolver = ({ slug }: { slug: string[] }) => {
+  const [, ...rest] = slug;
+
+  if (rest.includes("fade")) {
+    // ["fade", "layer-default", "↓(to-bottom)"]
+
+    const last = rest[rest.length - 1];
+
+    const direction = (() => {
+      if (last.startsWith("↓")) return "to bottom";
+      if (last.startsWith("↑")) return "to top";
+      if (last.startsWith("→")) return "to right";
+      if (last.startsWith("←")) return "to left";
+
+      return "unknown";
+    })();
+
+    return {
+      value: camelCase(rest.slice(0, -1).join("-"), { mergeAmbiguousCharacters: true }),
+      direction,
+    };
+  }
+
+  return {
+    value: camelCase(rest.join("-"), { mergeAmbiguousCharacters: true }),
+  };
+};
+
+function formatBoxShadow(value: {
+  type: "DROP_SHADOW" | "INNER_SHADOW";
+  color: RGBA;
+  offset: { x: number; y: number };
+  radius: number;
+  spread?: number;
+}): string {
+  const { type, color, offset, radius, spread } = value;
+  const inset = type === "INNER_SHADOW" ? "inset " : "";
+  const colorStr = toCssRgba(color);
+  const spreadStr = spread !== undefined ? ` ${spread}px` : "";
+
+  return `${inset}${offset.x}px ${offset.y}px ${radius}px${spreadStr} ${colorStr}`;
+}
+
+export const defaultRawValueFormatters = {
+  color: (value: RGBA) => toCssRgba(value),
+  dimension: (value: number) => value,
+  fontDimension: (value: number) => value,
+  fontWeight: (value: number) => value,
+  boxShadow: formatBoxShadow,
+};

package/src/codegen/targets/index.ts

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

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

@@ -0,0 +1,7 @@
+import type { IconHandler } from "../icon";
+import type { ReactValueResolver } from "../value-resolver";
+
+export interface ComponentHandlerDeps {
+  iconHandler: IconHandler;
+  valueResolver: ReactValueResolver;
+}