@seed-design/figma 0.0.6 → 0.0.15

package/src/codegen/core/value.ts

@@ -0,0 +1,289 @@
+import type {
+  NormalizedCornerTrait,
+  NormalizedHasFramePropertiesTrait,
+  NormalizedHasGeometryTrait,
+  NormalizedHasLayoutTrait,
+  NormalizedIsLayerTrait,
+  NormalizedTypePropertiesTrait,
+} from "@/normalizer";
+import {
+  getFirstFillVariable,
+  getFirstSolidFill,
+  getFirstStroke,
+  getFirstStrokeVariable,
+} from "@/utils/figma-node";
+import type { RGBA } from "@figma/rest-api-spec";
+import type { VariableService } from "../../entities/variable.service";
+
+export interface ValueTransformer<TColor, TDimension, TFontDimension, TFontWeight> {
+  getFormattedValue: {
+    frameFill: (
+      node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
+    ) => string | TColor | undefined;
+    shapeFill: (
+      node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
+    ) => string | TColor | undefined;
+    textFill: (
+      node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
+    ) => string | TColor | undefined;
+    stroke: (
+      node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
+    ) => string | TColor | undefined;
+    width: (
+      node: NormalizedHasLayoutTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    height: (
+      node: NormalizedHasLayoutTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    minWidth: (
+      node: NormalizedHasLayoutTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    minHeight: (
+      node: NormalizedHasLayoutTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    maxWidth: (
+      node: NormalizedHasLayoutTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    maxHeight: (
+      node: NormalizedHasLayoutTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    paddingLeft: (
+      node: NormalizedHasFramePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    paddingRight: (
+      node: NormalizedHasFramePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    paddingTop: (
+      node: NormalizedHasFramePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    paddingBottom: (
+      node: NormalizedHasFramePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    itemSpacing: (
+      node: NormalizedHasFramePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    topLeftRadius: (
+      node: NormalizedCornerTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    topRightRadius: (
+      node: NormalizedCornerTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    bottomLeftRadius: (
+      node: NormalizedCornerTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    bottomRightRadius: (
+      node: NormalizedCornerTrait & NormalizedIsLayerTrait,
+    ) => string | TDimension | undefined;
+    fontSize: (
+      node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TFontDimension | undefined;
+    fontWeight: (
+      node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TFontWeight | undefined;
+    lineHeight: (
+      node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
+    ) => string | TFontDimension | undefined;
+  };
+}
+
+export interface ValueTransformerDeps<TColor, TDimension, TFontDimension, TFontWeight> {
+  variableService: VariableService;
+  formatters: {
+    color: (value: RGBA) => string | TColor;
+    dimension: (value: number) => string | TDimension;
+    fontDimension: (value: number) => string | TFontDimension;
+    fontWeight: (value: number) => string | TFontWeight;
+  };
+  shouldInferVariableName: boolean;
+}
+
+export function createValueTransformer<TColor, TDimension, TFontDimension, TFontWeight>({
+  variableService,
+  formatters,
+  shouldInferVariableName,
+}: ValueTransformerDeps<TColor, TDimension, TFontDimension, TFontWeight>): ValueTransformer<
+  TColor,
+  TDimension,
+  TFontDimension,
+  TFontWeight
+> {
+  function processColor(
+    key: string | undefined,
+    value: RGBA | undefined,
+    scope: "FRAME_FILL" | "SHAPE_FILL" | "STROKE_COLOR" | "TEXT_FILL",
+  ) {
+    if (key) {
+      return variableService.getVariableName(key);
+    }
+
+    if (value) {
+      if (shouldInferVariableName) {
+        return variableService.inferVariableName(value, scope) ?? formatters.color(value);
+      }
+
+      return formatters.color(value);
+    }
+
+    return undefined;
+  }
+
+  function processDimension(
+    key: string | undefined,
+    value: number | undefined,
+    scope: "WIDTH_HEIGHT" | "GAP" | "CORNER_RADIUS",
+  ) {
+    if (key) {
+      return variableService.getVariableName(key);
+    }
+
+    if (value) {
+      if (shouldInferVariableName) {
+        return variableService.inferVariableName(value, scope) ?? formatters.dimension(value);
+      }
+
+      return formatters.dimension(value);
+    }
+
+    return undefined;
+  }
+
+  function processFontDimension(
+    key: string | undefined,
+    value: number | undefined,
+    scope: "FONT_SIZE" | "LINE_HEIGHT",
+  ) {
+    if (key) {
+      return variableService.getVariableName(key);
+    }
+
+    if (value) {
+      if (shouldInferVariableName) {
+        return variableService.inferVariableName(value, scope) ?? formatters.fontDimension(value);
+      }
+
+      return formatters.fontDimension(value);
+    }
+
+    return undefined;
+  }
+
+  function processFontWeight(key: string | undefined, value: number | undefined) {
+    if (key) {
+      return variableService.getVariableName(key);
+    }
+
+    if (value) {
+      if (shouldInferVariableName) {
+        const fontWeightToString: Record<number, string> = {
+          100: "thin",
+          200: "extra-light",
+          300: "light",
+          400: "regular",
+          500: "medium",
+          600: "semi-bold",
+          700: "bold",
+          800: "extra-bold",
+          900: "black",
+        };
+
+        return (
+          variableService.inferVariableName(value, "FONT_WEIGHT") ??
+          variableService.inferVariableName(fontWeightToString[value], "FONT_STYLE") ??
+          formatters.fontWeight(value)
+        );
+      }
+
+      return formatters.fontWeight(value);
+    }
+
+    return undefined;
+  }
+
+  const getFormattedValue: ValueTransformer<
+    TColor,
+    TDimension,
+    TFontDimension,
+    TFontWeight
+  >["getFormattedValue"] = {
+    width: (node) =>
+      processDimension(
+        node.boundVariables?.size?.x?.id,
+        node.absoluteBoundingBox?.width,
+        "WIDTH_HEIGHT",
+      ),
+    height: (node) =>
+      processDimension(
+        node.boundVariables?.size?.y?.id,
+        node.absoluteBoundingBox?.height,
+        "WIDTH_HEIGHT",
+      ),
+    minWidth: (node) =>
+      processDimension(node.boundVariables?.minWidth?.id, node.minWidth, "WIDTH_HEIGHT"),
+    minHeight: (node) =>
+      processDimension(node.boundVariables?.minHeight?.id, node.minHeight, "WIDTH_HEIGHT"),
+    maxWidth: (node) =>
+      processDimension(node.boundVariables?.maxWidth?.id, node.maxWidth, "WIDTH_HEIGHT"),
+    maxHeight: (node) =>
+      processDimension(node.boundVariables?.maxHeight?.id, node.maxHeight, "WIDTH_HEIGHT"),
+    paddingLeft: (node) =>
+      processDimension(node.boundVariables?.paddingLeft?.id, node.paddingLeft, "GAP"),
+    paddingRight: (node) =>
+      processDimension(node.boundVariables?.paddingRight?.id, node.paddingRight, "GAP"),
+    paddingTop: (node) =>
+      processDimension(node.boundVariables?.paddingTop?.id, node.paddingTop, "GAP"),
+    paddingBottom: (node) =>
+      processDimension(node.boundVariables?.paddingBottom?.id, node.paddingBottom, "GAP"),
+    itemSpacing: (node) =>
+      processDimension(node.boundVariables?.itemSpacing?.id, node.itemSpacing, "GAP"),
+    frameFill: (node) =>
+      processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "FRAME_FILL"),
+    shapeFill: (node) =>
+      processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "SHAPE_FILL"),
+    textFill: (node) =>
+      processColor(getFirstFillVariable(node)?.id, getFirstSolidFill(node)?.color, "TEXT_FILL"),
+    stroke: (node) =>
+      processColor(getFirstStrokeVariable(node)?.id, getFirstStroke(node)?.color, "STROKE_COLOR"),
+    topLeftRadius: (node) =>
+      processDimension(
+        node.boundVariables?.topLeftRadius?.id,
+        node.rectangleCornerRadii?.[0] ?? node.cornerRadius,
+        "CORNER_RADIUS",
+      ),
+    topRightRadius: (node) =>
+      processDimension(
+        node.boundVariables?.topRightRadius?.id,
+        node.rectangleCornerRadii?.[1] ?? node.cornerRadius,
+        "CORNER_RADIUS",
+      ),
+    bottomLeftRadius: (node) =>
+      processDimension(
+        node.boundVariables?.bottomLeftRadius?.id,
+        node.rectangleCornerRadii?.[2] ?? node.cornerRadius,
+        "CORNER_RADIUS",
+      ),
+    bottomRightRadius: (node) =>
+      processDimension(
+        node.boundVariables?.bottomRightRadius?.id,
+        node.rectangleCornerRadii?.[3] ?? node.cornerRadius,
+        "CORNER_RADIUS",
+      ),
+    fontSize: (node) =>
+      processFontDimension(
+        node.boundVariables?.fontSize?.[0]?.id,
+        node.style.fontSize,
+        "FONT_SIZE",
+      ),
+    fontWeight: (node) =>
+      processFontWeight(node.boundVariables?.fontWeight?.[0]?.id, node.style.fontWeight),
+    lineHeight: (node) =>
+      processFontDimension(
+        node.boundVariables?.lineHeight?.[0]?.id,
+        node.style.lineHeightPx,
+        "LINE_HEIGHT",
+      ),
+  };
+
+  return {
+    getFormattedValue,
+  };
+}

package/src/codegen/index.ts

@@ -1,13 +1,46 @@
 export * from "./core";
-export * from "./domain";
+export * from "./targets";
 
 import type { NormalizedSceneNode } from "@/normalizer";
-import { codegenService, devCodegenService } from "./context";
+import { stringifyElement } from "./core/jsx";
+import { figma, react } from "./targets";
 
-export function generateJsxTree(node: NormalizedSceneNode) {
-  return codegenService.transform(node);
+export function generateJsxTree(
+  node: NormalizedSceneNode,
+  options: Partial<react.CreateContextOptions> = {},
+) {
+  const { shouldInferVariableName = true, shouldInferAutoLayout = true } = options;
+  const codegen = react.createContext({
+    shouldInferVariableName,
+    shouldInferAutoLayout,
+  });
+
+  return codegen(node);
+}
+
+export function generateCode(
+  node: NormalizedSceneNode,
+  options: Partial<react.CreateContextOptions> & { shouldPrintSource?: boolean } = {},
+) {
+  const result = generateJsxTree(node, options);
+  return result ? stringifyElement(result, { printSource: options.shouldPrintSource }) : undefined;
 }
 
-export function generateCode(node: NormalizedSceneNode, { dev }: { dev?: boolean } = {}) {
-  return dev ? devCodegenService.transformToString(node) : codegenService.transformToString(node);
+export function generateFigmaSummary(
+  node: NormalizedSceneNode,
+  options: Partial<figma.CreateContextOptions> & { shouldPrintSource?: boolean } = {},
+) {
+  const {
+    shouldInferVariableName = false,
+    shouldPrintSource = false,
+    shouldInferAutoLayout = false,
+  } = options;
+  const codegen = figma.createContext({
+    shouldInferVariableName,
+    shouldInferAutoLayout,
+  });
+
+  const result = codegen(node);
+
+  return result ? stringifyElement(result, { printSource: shouldPrintSource }) : undefined;
 }

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

@@ -0,0 +1,139 @@
+import { createCodegenTransformer, createValueTransformer } from "@/codegen/core";
+import {
+  createStyleService,
+  createVariableService,
+  styleRepository,
+  variableRepository,
+} from "@/entities";
+import { toCssRgba } from "@/utils/css";
+import { createFrameTransformer } from "./frame";
+import { createInstanceTransformer } from "./instance";
+import {
+  createContainerLayoutPropsTransformer,
+  createFrameFillPropsTransformer,
+  createRadiusPropsTransformer,
+  createSelfLayoutPropsTransformer,
+  createShapeFillPropsTransformer,
+  createStrokePropsTransformer,
+  createTextFillPropsTransformer,
+  createTypeStylePropsTransformer,
+} from "./props";
+import {
+  createBooleanOperationTransformer,
+  createRectangleTransformer,
+  createVectorTransformer,
+} from "./shape";
+import { createTextTransformer } from "./text";
+
+export interface CreateContextOptions {
+  ignoredComponentKeys?: Set<string>;
+  shouldInferVariableName: boolean;
+  shouldInferAutoLayout: boolean;
+}
+
+const styleService = createStyleService({
+  styleRepository,
+  styleNameTransformer: ({ slug }) => slug[slug.length - 1]!,
+});
+const variableService = createVariableService({
+  variableRepository,
+  variableNameTransformer: ({ slug }) =>
+    slug
+      .filter((s) => s !== "dimension")
+      .map((s) => s.replaceAll(",", "_"))
+      .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);
+  },
+});
+
+export function createContext(options: CreateContextOptions) {
+  const { shouldInferVariableName, shouldInferAutoLayout } = options;
+
+  const valueTransformer = createValueTransformer({
+    variableService,
+    formatters: {
+      color: (value: RGBA) => toCssRgba(value),
+      dimension: (value: number) => value,
+      fontDimension: (value: number) => value,
+      fontWeight: (value: number) => value,
+    },
+    shouldInferVariableName,
+  });
+
+  const containerLayoutPropsTransformer = createContainerLayoutPropsTransformer(valueTransformer);
+  const selfLayoutPropsTransformer = createSelfLayoutPropsTransformer(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,
+    frameFill: frameFillPropsTransformer,
+    shapeFill: shapeFillPropsTransformer,
+    textFill: textFillPropsTransformer,
+    radius: radiusPropsTransformer,
+    stroke: strokePropsTransformer,
+    typeStyle: typeStylePropsTransformer,
+  };
+
+  const frameTransformer = createFrameTransformer({
+    propsTransformers,
+  });
+  const instanceTransformer = createInstanceTransformer({
+    frameTransformer,
+  });
+  const textTransformer = createTextTransformer({
+    propsTransformers,
+  });
+  const rectangleTransformer = createRectangleTransformer({
+    propsTransformers,
+  });
+  const vectorTransformer = createVectorTransformer({
+    propsTransformers,
+  });
+  const booleanOperationTransformer = createBooleanOperationTransformer({
+    propsTransformers,
+  });
+
+  const codegenTransformer = createCodegenTransformer({
+    frameTransformer,
+    textTransformer,
+    rectangleTransformer,
+    instanceTransformer,
+    vectorTransformer,
+    booleanOperationTransformer,
+    shouldInferAutoLayout,
+  });
+
+  return codegenTransformer;
+}

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

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

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

@@ -0,0 +1,6 @@
+export * from "./context";
+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,16 @@
+import type { NormalizedInstanceNode } from "@/normalizer";
+import { defineElementTransformer, type ElementTransformer } from "../../core";
+
+export interface InstanceTransformerDeps {
+  frameTransformer: ElementTransformer<NormalizedInstanceNode>;
+}
+
+export function createInstanceTransformer({
+  frameTransformer,
+}: InstanceTransformerDeps): ElementTransformer<NormalizedInstanceNode> {
+  const transform = defineElementTransformer((node: NormalizedInstanceNode, traverse) => {
+    return frameTransformer(node, traverse);
+  });
+
+  return transform;
+}