@seed-design/figma 0.0.6 → 0.0.17

package/src/normalizer/from-plugin.ts

@@ -73,6 +73,7 @@ export function createPluginNormalizer() {
       layoutSizingHorizontal: node.layoutSizingHorizontal,
       layoutSizingVertical: node.layoutSizingVertical,
       absoluteBoundingBox: node.absoluteBoundingBox,
+      relativeTransform: node.relativeTransform,
       layoutMode: node.inferredAutoLayout?.layoutMode,
       layoutWrap: node.inferredAutoLayout?.layoutWrap,
       paddingLeft: node.inferredAutoLayout?.paddingLeft,
@@ -296,6 +297,7 @@ export function createPluginNormalizer() {
       | "layoutSizingHorizontal"
       | "layoutSizingVertical"
       | "absoluteBoundingBox"
+      | "relativeTransform"
       | "minHeight"
       | "minWidth"
       | "maxHeight"
@@ -309,6 +311,7 @@ export function createPluginNormalizer() {
       layoutSizingHorizontal: node.layoutSizingHorizontal,
       layoutSizingVertical: node.layoutSizingVertical,
       absoluteBoundingBox: node.absoluteBoundingBox,
+      relativeTransform: node.relativeTransform,
       fills: normalizePaints(node.fills),
       strokes: normalizePaints(node.strokes),
       strokeWeight: node.strokeWeight === figma.mixed ? undefined : node.strokeWeight,

package/src/normalizer/types.ts

@@ -19,6 +19,7 @@ export type NormalizedHasLayoutTrait = Pick<
   | "layoutAlign"
   | "layoutGrow"
   | "absoluteBoundingBox"
+  | "relativeTransform"
   | "layoutPositioning"
   | "layoutSizingHorizontal"
   | "layoutSizingVertical"
@@ -49,6 +50,30 @@ export type NormalizedHasFramePropertiesTrait = Pick<
   | "counterAxisSpacing"
 >;
 
+export interface NormalizedTextSegment {
+  characters: string;
+  start: number;
+  end: number;
+  style: {
+    fontFamily?: string;
+    fontWeight?: number;
+    fontSize?: number;
+    italic?: boolean;
+    textDecoration?: string;
+    letterSpacing?: number;
+    lineHeight?: number | { unit: string; value: number };
+  };
+}
+
+export type NormalizedTypePropertiesTrait = Pick<
+  FigmaRestSpec.TypePropertiesTrait,
+  "style" | "characters"
+> & {
+  segments: NormalizedTextSegment[];
+
+  textStyleKey?: string;
+};
+
 export type NormalizedDefaultShapeTrait = NormalizedIsLayerTrait &
   NormalizedHasLayoutTrait &
   NormalizedHasGeometryTrait;
@@ -70,31 +95,10 @@ export interface NormalizedRectangleNode
   type: FigmaRestSpec.RectangleNode["type"];
 }
 
-export interface NormalizedTextNode extends NormalizedDefaultShapeTrait {
+export interface NormalizedTextNode
+  extends NormalizedDefaultShapeTrait,
+    NormalizedTypePropertiesTrait {
   type: FigmaRestSpec.TextNode["type"];
-
-  style: FigmaRestSpec.TextNode["style"];
-
-  characters: FigmaRestSpec.TextNode["characters"];
-
-  segments: NormalizedTextSegment[];
-
-  textStyleKey?: string;
-}
-
-export interface NormalizedTextSegment {
-  characters: string;
-  start: number;
-  end: number;
-  style: {
-    fontFamily?: string;
-    fontWeight?: number;
-    fontSize?: number;
-    italic?: boolean;
-    textDecoration?: string;
-    letterSpacing?: number;
-    lineHeight?: number | { unit: string; value: number };
-  };
 }
 
 export interface NormalizedComponentNode extends NormalizedFrameTrait {

package/src/utils/common.ts

@@ -20,6 +20,10 @@ export function objectEntries<T extends Record<string, unknown>>(obj: T) {
   return Object.entries(obj) as [keyof T, T[keyof T]][];
 }
 
+export function identity<T>(value: T) {
+  return value;
+}
+
 /**
  * camelCase but preserve underscore between numbers.
  * temporary workaround to avoid x1_5 -> x15

package/src/utils/css.ts

@@ -1,13 +1,19 @@
 import type { RGBA } from "@figma/rest-api-spec";
 
-export function toCssPixel(value: number) {
+export function toCssPixel(value: number): `${number}px` {
   return `${value}px`;
 }
 
-export function toCssRgba(color: RGBA) {
+export function toCssRem(value: number): `${number}rem` {
+  return `${value / 16}rem`;
+}
+
+export function toCssRgba(
+  color: RGBA,
+): `rgba(${number}, ${number}, ${number}, ${number})` | `rgb(${number}, ${number}, ${number})` {
   if (color.a === 1) {
-    return `rgb(${color.r * 255}, ${color.g * 255}, ${color.b * 255})`;
+    return `rgb(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)})`;
   }
 
-  return `rgba(${color.r * 255}, ${color.g * 255}, ${color.b * 255}, ${color.a})`;
+  return `rgba(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)}, ${color.a})`;
 }

package/src/utils/figma-node.ts

@@ -1,5 +1,10 @@
-import type { NormalizedInstanceNode, NormalizedSceneNode } from "../normalizer";
-
+import type { SolidPaint } from "@figma/rest-api-spec";
+import type {
+  NormalizedHasGeometryTrait,
+  NormalizedInstanceNode,
+  NormalizedIsLayerTrait,
+  NormalizedSceneNode,
+} from "../normalizer";
 export function traverseNode(
   node: NormalizedSceneNode,
   callback: (node: NormalizedSceneNode) => void,
@@ -47,3 +52,38 @@ export function findAllInstances<T>({ node, key }: { node: NormalizedSceneNode;
     (n) => n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key),
   ) as (NormalizedInstanceNode & { componentProperties: T })[];
 }
+
+export function getFirstSolidFill(node: NormalizedHasGeometryTrait) {
+  const fills = node.fills.filter(
+    (fill): fill is SolidPaint =>
+      fill.type === "SOLID" && (!("visible" in fill) || fill.visible === true),
+  );
+
+  if (fills.length === 0) {
+    return undefined;
+  }
+
+  return fills[0];
+}
+
+export function getFirstFillVariable(node: NormalizedIsLayerTrait) {
+  return node.boundVariables?.fills?.[0];
+}
+
+export function getFirstStroke(node: NormalizedHasGeometryTrait) {
+  const strokes =
+    node.strokes?.filter(
+      (stroke): stroke is SolidPaint =>
+        stroke.type === "SOLID" && (!("visible" in stroke) || stroke.visible === true),
+    ) ?? [];
+
+  if (strokes.length === 0) {
+    return undefined;
+  }
+
+  return strokes[0];
+}
+
+export function getFirstStrokeVariable(node: NormalizedIsLayerTrait) {
+  return node.boundVariables?.strokes?.[0];
+}

package/src/codegen/context.ts

@@ -1,148 +0,0 @@
-import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
-import { camelCase } from "change-case";
-import { FIGMA_ICONS } from "./data/icons";
-import { FIGMA_TEXT_STYLES } from "./data/styles";
-import { FIGMA_VARIABLE_COLLECTIONS } from "./data/variable-collections";
-import { FIGMA_VARIABLES } from "./data/variables";
-import {
-  createCodegenService,
-  createContainerLayoutPropsService,
-  createFigmaComponentService,
-  createFrameFillPropsService,
-  createFrameStrokePropsService,
-  createFrameTypeStylePropsService,
-  createIconService,
-  createRadiusPropsService,
-  createSeedComponentTransformers,
-  createSeedFrameService,
-  createSeedInstanceService,
-  createSeedRectangleService,
-  createSeedTextService,
-  createSelfLayoutPropsService,
-  createShapeFillPropsService,
-  createStaticIconRepository,
-  createStaticStyleRepository,
-  createStaticVariableRepository,
-  createStyleService,
-  createVariableService,
-} from "./domain";
-
-const IGNORED_COMPONENT_KEYS = new Set<string>([
-  "1acdc7247c83a73a0504d6fad86d08783938cb1a",
-  "b38b719b61cdf1a24458d7a7888bee74b7649084",
-]);
-
-export interface CodegenContextOptions {
-  ignoredComponentKeys?: Set<string>;
-  shouldInferVariableName: boolean;
-  shouldPrintSource: boolean;
-}
-
-export function createCodegenContext(options: CodegenContextOptions) {
-  const {
-    ignoredComponentKeys = IGNORED_COMPONENT_KEYS,
-    shouldInferVariableName,
-    shouldPrintSource,
-  } = options;
-
-  const styleRepository = createStaticStyleRepository(FIGMA_TEXT_STYLES);
-  const variableRepository = createStaticVariableRepository({
-    variables: FIGMA_VARIABLES,
-    variableCollections: FIGMA_VARIABLE_COLLECTIONS,
-  });
-  const iconRepository = createStaticIconRepository(FIGMA_ICONS);
-
-  const styleService = createStyleService({
-    styleRepository,
-    styleNameTransformer: ({ slug }) =>
-      camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
-  });
-  const variableService = createVariableService({
-    variableRepository,
-    variableNameTransformer: ({ slug }) =>
-      slug
-        .filter((s) => s !== "dimension")
-        .map((s) => s.replaceAll(",", "_"))
-        .map(camelCasePreserveUnderscoreBetweenNumbers)
-        .join("."),
-  });
-  const iconService = createIconService({
-    iconRepository,
-  });
-
-  const containerLayoutPropsService = createContainerLayoutPropsService({
-    variableService,
-    shouldInferVariableName,
-  });
-  const selfLayoutPropsService = createSelfLayoutPropsService({
-    variableService,
-    shouldInferVariableName,
-  });
-  const frameFillPropsService = createFrameFillPropsService({
-    variableService,
-  });
-  const shapeFillPropsService = createShapeFillPropsService({
-    variableService,
-  });
-  const radiusPropsService = createRadiusPropsService({
-    variableService,
-    shouldInferVariableName,
-  });
-  const strokePropsService = createFrameStrokePropsService({
-    variableService,
-  });
-  const typeStylePropsService = createFrameTypeStylePropsService({
-    variableService,
-  });
-
-  const figmaComponentService = createFigmaComponentService({
-    transformers: createSeedComponentTransformers({
-      iconService,
-      variableService,
-    }),
-  });
-
-  const frameService = createSeedFrameService({
-    containerLayoutPropsService,
-    selfLayoutPropsService,
-    radiusPropsService,
-    fillPropsService: frameFillPropsService,
-    strokePropsService,
-  });
-  const instanceService = createSeedInstanceService({
-    figmaComponentService,
-    fillPropsService: shapeFillPropsService,
-    selfLayoutPropsService,
-    iconService,
-    frameService,
-    ignoredComponentKeys,
-  });
-  const textService = createSeedTextService({
-    styleService,
-    fillPropsService: shapeFillPropsService,
-    typeStylePropsService,
-  });
-  const rectangleService = createSeedRectangleService({
-    selfLayoutPropsService,
-  });
-
-  const codegenService = createCodegenService({
-    frameService,
-    textService,
-    rectangleService,
-    instanceService,
-    shouldPrintSource,
-  });
-
-  return codegenService;
-}
-
-export const codegenService = createCodegenContext({
-  shouldInferVariableName: true,
-  shouldPrintSource: false,
-});
-
-export const devCodegenService = createCodegenContext({
-  shouldInferVariableName: false,
-  shouldPrintSource: true,
-});

package/src/codegen/core/transformer.ts

@@ -1,40 +0,0 @@
-import type { ElementNode } from "./jsx";
-import type { NormalizedInstanceNode, NormalizedSceneNode } from "@/normalizer";
-
-export type ElementTransformer<T extends NormalizedSceneNode> = (
-  node: T,
-  traverse: (node: NormalizedSceneNode) => ElementNode | undefined,
-) => ElementNode | undefined;
-
-export type PropsTransformer<
-  T extends Record<string, any> = Record<string, any>,
-  R extends Record<string, any> = Record<string, any>,
-> = (node: T, traverse: (node: NormalizedSceneNode) => ElementNode | undefined) => R;
-
-export interface ComponentTransformer<
-  T extends
-    NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"],
-> {
-  key: string;
-  transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode;
-}
-
-export function defineElementTransformer<T extends NormalizedSceneNode>(
-  transformer: ElementTransformer<T>,
-) {
-  return transformer;
-}
-
-export function definePropsTransformer<
-  T extends Record<string, any>,
-  R extends Record<string, any>,
->(transformer: PropsTransformer<T, R>) {
-  return transformer;
-}
-
-export function defineComponentTransformer<T extends NormalizedInstanceNode["componentProperties"]>(
-  key: string,
-  transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode,
-): ComponentTransformer<T> {
-  return { key, transform };
-}

package/src/codegen/domain/codegen.service.ts

@@ -1,69 +0,0 @@
-import type { NormalizedSceneNode } from "@/normalizer";
-import type { ElementNode } from "../core";
-import { appendSource, createElement, stringifyElement } from "../core/jsx";
-import type { FrameService } from "./frame.service";
-import type { InstanceService } from "./instance.service";
-import type { RectangleService } from "./rectangle.service";
-import type { TextService } from "./text.service";
-import { match } from "ts-pattern";
-
-export interface CodegenService {
-  transform: (node: NormalizedSceneNode) => ElementNode | undefined;
-  transformToString: (node: NormalizedSceneNode) => string | undefined;
-}
-
-export interface SeedCodegenServiceDeps {
-  frameService: FrameService;
-  textService: TextService;
-  rectangleService: RectangleService;
-  instanceService: InstanceService;
-  shouldPrintSource: boolean;
-}
-
-export function createCodegenService({
-  frameService,
-  textService,
-  rectangleService,
-  instanceService,
-  shouldPrintSource,
-}: SeedCodegenServiceDeps): CodegenService {
-  function traverse(node: NormalizedSceneNode): ElementNode | undefined {
-    if ("visible" in node && !node.visible) {
-      return;
-    }
-
-    const result = match(node)
-      .with({ type: "FRAME" }, (node) => frameService.transform(node, traverse))
-      .with({ type: "TEXT" }, (node) => textService.transform(node, traverse))
-      .with({ type: "RECTANGLE" }, (node) => rectangleService.transform(node, traverse))
-      .with({ type: "COMPONENT" }, (node) => frameService.transform(node, traverse)) // NOTE: Treat component node as Frame for now
-      .with({ type: "INSTANCE" }, (node) => instanceService.transform(node, traverse))
-      .with({ type: "VECTOR" }, () => createElement("svg", {}, "Vector Node Placeholder"))
-      .with({ type: "BOOLEAN_OPERATION" }, () =>
-        createElement("svg", {}, "Boolean Operation Node Placeholder"),
-      )
-      .with({ type: "UNHANDLED" }, () => createElement("UnhandledFigmaNode"))
-      .exhaustive();
-
-    if (result) {
-      return appendSource(result, node.id);
-    }
-
-    return;
-  }
-
-  function transform(node: NormalizedSceneNode): ElementNode | undefined {
-    return traverse(node);
-  }
-
-  function transformToString(node: NormalizedSceneNode): string | undefined {
-    const result = transform(node);
-    if (!result) return undefined;
-
-    return stringifyElement(result, {
-      printSource: shouldPrintSource,
-    });
-  }
-
-  return { transform, transformToString };
-}

package/src/codegen/domain/figma-component.service.ts

@@ -1,21 +0,0 @@
-import type { ComponentTransformer } from "@/codegen/core";
-
-export interface FigmaComponentService {
-  getTransformer: (key: string) => ComponentTransformer | undefined;
-}
-
-export function createFigmaComponentService({
-  transformers,
-}: {
-  transformers: ComponentTransformer[];
-}): FigmaComponentService {
-  const transformerServiceMap = new Map(
-    transformers.map((transformer) => [transformer.key, transformer]),
-  );
-
-  return {
-    getTransformer: (key: string) => {
-      return transformerServiceMap.get(key);
-    },
-  };
-}

package/src/codegen/domain/frame.service.ts

@@ -1,108 +0,0 @@
-import type {
-  NormalizedComponentNode,
-  NormalizedFrameNode,
-  NormalizedInstanceNode,
-} from "@/normalizer";
-import { createElement, defineElementTransformer, type ElementTransformer } from "../core";
-import type {
-  ContainerLayoutPropsService,
-  SeedContainerLayoutProps,
-} from "./props/container-layout-props.service";
-import type { FillPropsService, FrameFillProps } from "./props/fill-props.service";
-import type { RadiusPropsService, SeedRadiusProps } from "./props/radius-props.service";
-import type {
-  SeedSelfLayoutProps,
-  SelfLayoutPropsService,
-} from "./props/self-layout-props.service";
-import type { SeedFrameStrokeProps, StrokePropsService } from "./props/stroke-props.service";
-
-export interface FrameService {
-  transform: ElementTransformer<
-    NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode
-  >;
-}
-
-export interface SeedFrameServiceDeps {
-  containerLayoutPropsService: ContainerLayoutPropsService<SeedContainerLayoutProps>;
-  selfLayoutPropsService: SelfLayoutPropsService<SeedSelfLayoutProps>;
-  radiusPropsService: RadiusPropsService<SeedRadiusProps>;
-  fillPropsService: FillPropsService<FrameFillProps>;
-  strokePropsService: StrokePropsService<SeedFrameStrokeProps>;
-}
-
-export function createSeedFrameService({
-  containerLayoutPropsService,
-  selfLayoutPropsService,
-  radiusPropsService,
-  fillPropsService,
-  strokePropsService,
-}: SeedFrameServiceDeps): FrameService {
-  function inferLayoutComponent(props: SeedContainerLayoutProps) {
-    if (
-      props.flexDirection === "row" &&
-      props.alignItems === "flexStart" &&
-      props.justifyContent === "flexStart" &&
-      props.flexWrap === "wrap"
-    ) {
-      return "Inline";
-    }
-
-    if (
-      props.flexDirection === "row" &&
-      props.justifyContent === "flexStart" &&
-      props.flexWrap === "nowrap"
-    ) {
-      return "Columns";
-    }
-
-    if (props.flexDirection === "column") {
-      return "Stack";
-    }
-
-    return "Flex";
-  }
-
-  const transform = defineElementTransformer(
-    (node: NormalizedFrameNode | NormalizedInstanceNode | NormalizedComponentNode, traverse) => {
-      const children = node.children;
-
-      const props = {
-        ...radiusPropsService.transform(node, traverse),
-        ...containerLayoutPropsService.transform(node, traverse),
-        ...selfLayoutPropsService.transform(node, traverse),
-        ...fillPropsService.transform(node, traverse),
-        ...strokePropsService.transform(node, traverse),
-      };
-
-      const layoutComponent = inferLayoutComponent(props);
-
-      if (layoutComponent === "Stack") {
-        const { flexDirection, ...rest } = props;
-
-        return createElement("Stack", rest, children.map(traverse));
-      }
-
-      if (layoutComponent === "Inline") {
-        const { flexDirection, flexWrap, alignItems, justifyContent, ...rest } = props;
-
-        return createElement("Inline", rest, children.map(traverse));
-      }
-
-      if (layoutComponent === "Columns") {
-        const { flexDirection, flexWrap, justifyContent, ...rest } = props;
-
-        const childrenResult = children.map(traverse);
-
-        return createElement(
-          "Columns",
-          rest,
-          childrenResult.map((child) => createElement("Column", {}, child)),
-        );
-      }
-    },
-  );
-
-  return {
-    transform,
-  };
-}

package/src/codegen/domain/index.ts

@@ -1,22 +0,0 @@
-export * from "./codegen.service";
-export * from "./figma-component.service";
-export * from "./frame.service";
-export * from "./icon.interface";
-export * from "./icon.repository";
-export * from "./icon.service";
-export * from "./instance.service";
-export * from "./props/container-layout-props.service";
-export * from "./props/fill-props.service";
-export * from "./props/radius-props.service";
-export * from "./props/self-layout-props.service";
-export * from "./props/stroke-props.service";
-export * from "./props/type-style-props.service";
-export * from "./rectangle.service";
-export * from "./seed-component";
-export * from "./style.interface";
-export * from "./style.repository";
-export * from "./style.service";
-export * from "./text.service";
-export * from "./variable.interface";
-export * from "./variable.repository";
-export * from "./variable.service";