@seed-design/figma 0.0.20 → 0.0.22

package/src/codegen/core/{props.ts → props-converter.ts}

@@ -1,18 +1,15 @@
 import type { VariableValueResolved } from "@/entities";
-import type { NormalizedSceneNode } from "@/normalizer";
 import { objectEntries } from "@/utils/common";
-import type { ElementNode } from "./jsx";
 
-export type PropsTransformer<
+export type PropsConverter<
   T extends Record<string, any> = Record<string, any>,
   R extends Record<string, any> = Record<string, any>,
-> = (node: T, traverse: (node: NormalizedSceneNode) => ElementNode | undefined) => R;
+> = (node: T) => R;
 
-export function definePropsTransformer<
-  T extends Record<string, any>,
-  R extends Record<string, any>,
->(transformer: PropsTransformer<T, R>) {
-  return transformer;
+export function definePropsConverter<T extends Record<string, any>, R extends Record<string, any>>(
+  converter: PropsConverter<T, R>,
+) {
+  return converter;
 }
 
 type Handlers<
@@ -28,7 +25,7 @@ type Shorthands<TProps extends Record<string, any>, HandlerKeys extends keyof TP
   HandlerKeys[]
 >;
 
-export interface PropsTransformerConfig<
+export interface CreatePropsConverterConfig<
   TTrait extends Record<string, any>,
   TProps extends Record<string, any>,
   HandlerKeys extends keyof TProps,
@@ -42,7 +39,7 @@ export interface PropsTransformerConfig<
   defaults?: Partial<TProps>;
 }
 
-export function createPropsTransformer<
+export function createPropsConverter<
   TTrait extends Record<string, any>,
   TProps extends Record<string, any>,
   HandlerKeys extends keyof TProps,
@@ -50,8 +47,8 @@ export function createPropsTransformer<
   handlers,
   shorthands,
   defaults,
-}: PropsTransformerConfig<TTrait, TProps, HandlerKeys>): PropsTransformer<TTrait, TProps> {
-  return definePropsTransformer((node: TTrait) => {
+}: CreatePropsConverterConfig<TTrait, TProps, HandlerKeys>): PropsConverter<TTrait, TProps> {
+  return definePropsConverter((node: TTrait) => {
     const result = {} as TProps;
 
     for (const [prop, handler] of objectEntries(handlers)) {

package/src/codegen/core/{value.ts → value-resolver.ts}

@@ -1,3 +1,4 @@
+import type { StyleService, VariableValueResolved } from "@/entities";
 import type {
   NormalizedCornerTrait,
   NormalizedHasFramePropertiesTrait,
@@ -14,8 +15,9 @@ import {
 } from "@/utils/figma-node";
 import type { RGBA } from "@figma/rest-api-spec";
 import type { VariableService } from "../../entities/variable.service";
+import { useCodegenOptions } from "./context";
 
-export interface ValueTransformer<TColor, TDimension, TFontDimension, TFontWeight> {
+export interface ValueResolver<TColor, TDimension, TFontDimension, TFontWeight> {
   getFormattedValue: {
     frameFill: (
       node: NormalizedHasGeometryTrait & NormalizedIsLayerTrait,
@@ -84,44 +86,83 @@ export interface ValueTransformer<TColor, TDimension, TFontDimension, TFontWeigh
       node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
     ) => string | TFontDimension | undefined;
   };
+  getTextStyleValue: (
+    node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait,
+  ) => string | undefined; // TODO: we might turn this into a generic; not sure yet
 }
 
-export interface ValueTransformerDeps<TColor, TDimension, TFontDimension, TFontWeight> {
+export interface ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeight> {
   variableService: VariableService;
-  formatters: {
+  variableNameFormatter: (props: { slug: string[] }) => string;
+  styleService: StyleService;
+  styleNameFormatter: (props: { slug: string[] }) => string;
+  rawValueFormatters: {
     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>({
+export function createValueResolver<TColor, TDimension, TFontDimension, TFontWeight>({
   variableService,
-  formatters,
-  shouldInferVariableName,
-}: ValueTransformerDeps<TColor, TDimension, TFontDimension, TFontWeight>): ValueTransformer<
+  variableNameFormatter,
+  styleService,
+  styleNameFormatter,
+  rawValueFormatters,
+}: ValueResolverDeps<TColor, TDimension, TFontDimension, TFontWeight>): ValueResolver<
   TColor,
   TDimension,
   TFontDimension,
   TFontWeight
 > {
+  function getVariableName(key: string) {
+    const slug = variableService.getSlug(key);
+
+    if (!slug) {
+      return undefined;
+    }
+
+    return variableNameFormatter({ slug });
+  }
+
+  function inferVariableName(value: VariableValueResolved, scope: VariableScope) {
+    const { shouldInferVariableName } = useCodegenOptions();
+
+    if (!shouldInferVariableName) {
+      return undefined;
+    }
+
+    const inferred = variableService.infer(value, scope);
+
+    if (!inferred) {
+      return undefined;
+    }
+
+    return getVariableName(inferred.key);
+  }
+
+  function getStyleName(key: string) {
+    const slug = styleService.getSlug(key);
+
+    if (!slug) {
+      return undefined;
+    }
+
+    return styleNameFormatter({ slug });
+  }
+
   function processColor(
     key: string | undefined,
     value: RGBA | undefined,
     scope: "FRAME_FILL" | "SHAPE_FILL" | "STROKE_COLOR" | "TEXT_FILL",
   ) {
     if (key) {
-      return variableService.getVariableName(key);
+      return getVariableName(key);
     }
 
-    if (value) {
-      if (shouldInferVariableName) {
-        return variableService.inferVariableName(value, scope) ?? formatters.color(value);
-      }
-
-      return formatters.color(value);
+    if (value !== undefined) {
+      return inferVariableName(value, scope) ?? rawValueFormatters.color(value);
     }
 
     return undefined;
@@ -133,15 +174,11 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
     scope: "WIDTH_HEIGHT" | "GAP" | "CORNER_RADIUS",
   ) {
     if (key) {
-      return variableService.getVariableName(key);
+      return getVariableName(key);
     }
 
-    if (value) {
-      if (shouldInferVariableName) {
-        return variableService.inferVariableName(value, scope) ?? formatters.dimension(value);
-      }
-
-      return formatters.dimension(value);
+    if (value !== undefined) {
+      return inferVariableName(value, scope) ?? rawValueFormatters.dimension(value);
     }
 
     return undefined;
@@ -153,15 +190,11 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
     scope: "FONT_SIZE" | "LINE_HEIGHT",
   ) {
     if (key) {
-      return variableService.getVariableName(key);
+      return getVariableName(key);
     }
 
-    if (value) {
-      if (shouldInferVariableName) {
-        return variableService.inferVariableName(value, scope) ?? formatters.fontDimension(value);
-      }
-
-      return formatters.fontDimension(value);
+    if (value !== undefined) {
+      return inferVariableName(value, scope) ?? rawValueFormatters.fontDimension(value);
     }
 
     return undefined;
@@ -169,37 +202,33 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
 
   function processFontWeight(key: string | undefined, value: number | undefined) {
     if (key) {
-      return variableService.getVariableName(key);
+      return 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",
-        };
+    if (value !== undefined) {
+      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 (
+        inferVariableName(value, "FONT_WEIGHT") ??
+        inferVariableName(fontWeightToString[value], "FONT_STYLE") ??
+        rawValueFormatters.fontWeight(value)
+      );
     }
 
     return undefined;
   }
 
-  const getFormattedValue: ValueTransformer<
+  const getFormattedValue: ValueResolver<
     TColor,
     TDimension,
     TFontDimension,
@@ -283,7 +312,16 @@ export function createValueTransformer<TColor, TDimension, TFontDimension, TFont
       ),
   };
 
+  function getTextStyleValue(node: NormalizedTypePropertiesTrait & NormalizedIsLayerTrait) {
+    if (node.textStyleKey) {
+      return getStyleName(node.textStyleKey);
+    }
+
+    return undefined;
+  }
+
   return {
     getFormattedValue,
+    getTextStyleValue,
   };
 }

package/src/codegen/default-services.ts

@@ -0,0 +1,44 @@
+import {
+  createIconService,
+  createStyleService,
+  createVariableService,
+  iconRepository,
+  styleRepository,
+  variableRepository,
+} from "@/entities";
+
+export const styleService = createStyleService({
+  styleRepository,
+});
+export const variableService = createVariableService({
+  variableRepository,
+  inferCompareFunction: (a, b) => {
+    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(b.name) - scoreFn(a.name);
+  },
+});
+export const iconService = createIconService({
+  iconRepository,
+});

package/src/codegen/index.ts

@@ -1,46 +1,3 @@
+export * from "./component-properties";
 export * from "./core";
 export * from "./targets";
-
-import type { NormalizedSceneNode } from "@/normalizer";
-import { stringifyElement } from "./core/jsx";
-import { figma, react } from "./targets";
-
-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 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/frame.ts

@@ -4,14 +4,14 @@ import type {
   NormalizedInstanceNode,
 } from "@/normalizer";
 import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
-import type { PropsTransformers } from "./props";
+import type { PropsConverters } from "./props";
 
 export interface FrameTransformerDeps {
-  propsTransformers: PropsTransformers;
+  propsConverters: PropsConverters;
 }
 
 export function createFrameTransformer({
-  propsTransformers,
+  propsConverters,
 }: FrameTransformerDeps): ElementTransformer<
   NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode
 > {
@@ -20,11 +20,11 @@ export function createFrameTransformer({
       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),
+        ...propsConverters.radius(node),
+        ...propsConverters.containerLayout(node),
+        ...propsConverters.selfLayout(node),
+        ...propsConverters.frameFill(node),
+        ...propsConverters.stroke(node),
       };
 
       return createElement(

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

@@ -1,4 +1,4 @@
-export * from "./context";
+export * from "./pipeline";
 export * from "./frame";
 export * from "./instance";
 export * from "./props";

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

@@ -0,0 +1,71 @@
+import { createCodeGenerator } from "@/codegen/core";
+import { createFrameTransformer } from "./frame";
+import { createInstanceTransformer } from "./instance";
+import {
+  createContainerLayoutPropsConverter,
+  createFrameFillPropsConverter,
+  createRadiusPropsConverter,
+  createSelfLayoutPropsConverter,
+  createShapeFillPropsConverter,
+  createStrokePropsConverter,
+  createTextFillPropsConverter,
+  createTypeStylePropsConverter,
+} from "./props";
+import {
+  createBooleanOperationTransformer,
+  createRectangleTransformer,
+  createVectorTransformer,
+} from "./shape";
+import { createTextTransformer } from "./text";
+import { valueResolver } from "./value-resolver";
+
+export function createPipeline() {
+  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 typeStylePropsConverter = createTypeStylePropsConverter(valueResolver);
+  const propsConverters = {
+    containerLayout: containerLayoutPropsConverter,
+    selfLayout: selfLayoutPropsConverter,
+    frameFill: frameFillPropsConverter,
+    shapeFill: shapeFillPropsConverter,
+    textFill: textFillPropsConverter,
+    radius: radiusPropsConverter,
+    stroke: strokePropsConverter,
+    typeStyle: typeStylePropsConverter,
+  };
+
+  const frameTransformer = createFrameTransformer({
+    propsConverters,
+  });
+  const instanceTransformer = createInstanceTransformer({
+    frameTransformer,
+  });
+  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,
+  });
+
+  return codegenTransformer;
+}