@seed-design/figma 0.0.4 → 0.0.6

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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,21 @@
+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

@@ -0,0 +1,108 @@
+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/icon.interface.ts

@@ -0,0 +1,5 @@
+export interface IconData {
+  name: string;
+  type: "monochrome" | "multicolor";
+  weight?: string;
+}

package/src/codegen/domain/icon.repository.ts

@@ -0,0 +1,11 @@
+import type { IconData } from "./icon.interface";
+
+export interface IconRepository {
+  getIconData(key: string): IconData;
+}
+
+export function createStaticIconRepository(iconRecord: Record<string, IconData>) {
+  return {
+    getIconData: (key: string) => iconRecord[key],
+  };
+}

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

@@ -0,0 +1,35 @@
+import { pascalCase } from "change-case";
+import type { IconRepository } from "./icon.repository";
+
+export interface IconService {
+  isIconComponent: (componentKey: string) => boolean;
+  createIconTagName: (key?: string) => string;
+}
+
+export function createIconService({
+  iconRepository,
+}: { iconRepository: IconRepository }): IconService {
+  function isIconComponent(componentKey: string) {
+    return iconRepository.getIconData(componentKey) !== undefined;
+  }
+
+  function createIconTagName(key?: string) {
+    if (!key) {
+      return "UnknownIcon";
+    }
+
+    const iconData = iconRepository.getIconData(key);
+    if (!iconData) {
+      throw new Error(`Icon not found: ${key}`);
+    }
+
+    const { name, weight } = iconData;
+
+    return pascalCase(`${name}${weight ? weight : ""}`);
+  }
+
+  return {
+    isIconComponent,
+    createIconTagName,
+  };
+}

package/src/codegen/domain/index.ts

@@ -0,0 +1,22 @@
+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";

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

@@ -0,0 +1,91 @@
+import type { NormalizedFrameTrait, NormalizedInstanceNode } from "@/normalizer";
+import {
+  createElement,
+  defineElementTransformer,
+  definePropsTransformer,
+  type ElementTransformer,
+} from "../core";
+import type { FigmaComponentService } from "./figma-component.service";
+import type { FrameService } from "./frame.service";
+import type { IconService } from "./icon.service";
+import type { FillPropsService, ShapeFillProps } from "./props/fill-props.service";
+import type {
+  SeedSelfLayoutProps,
+  SelfLayoutPropsService,
+} from "./props/self-layout-props.service";
+
+export interface InstanceService {
+  transform: ElementTransformer<NormalizedInstanceNode>;
+}
+
+export interface SeedInstanceServiceDeps {
+  figmaComponentService: FigmaComponentService;
+  fillPropsService: FillPropsService<ShapeFillProps>;
+  selfLayoutPropsService: SelfLayoutPropsService<SeedSelfLayoutProps>;
+  iconService?: IconService;
+  frameService?: FrameService;
+  ignoredComponentKeys?: Set<string>;
+}
+
+export function createSeedInstanceService({
+  figmaComponentService,
+  fillPropsService,
+  selfLayoutPropsService,
+  iconService,
+  frameService,
+  ignoredComponentKeys,
+}: SeedInstanceServiceDeps): InstanceService {
+  const transformIconColorProps = definePropsTransformer((node: NormalizedFrameTrait, traverse) => {
+    if (node.children.length === 0) {
+      throw new Error("Node has no children");
+    }
+
+    const vectors = node.children.filter(
+      (child) => child.type === "VECTOR" || child.type === "BOOLEAN_OPERATION",
+    );
+
+    const colorProps = vectors.map((vector) => fillPropsService.transform(vector, traverse));
+
+    const fills = new Set(
+      colorProps.map((props) => props.color).filter((color) => color !== undefined),
+    );
+
+    // If there are more than 1 color, colors are likely pre-defined in the icon component; we should ignore the color prop.
+    if (fills.size > 1) {
+      return {};
+    }
+
+    return { color: fills.values().next().value };
+  });
+
+  const transform = defineElementTransformer((node: NormalizedInstanceNode, traverse) => {
+    const { componentKey, componentSetKey } = node;
+
+    if (ignoredComponentKeys?.has(componentKey)) {
+      return undefined;
+    }
+
+    if (iconService?.isIconComponent(componentKey)) {
+      const tagName = iconService.createIconTagName(componentKey);
+      const props = {
+        ...selfLayoutPropsService.transform(node, traverse),
+        ...transformIconColorProps(node, traverse),
+      };
+      return createElement(tagName, props);
+    }
+
+    const componentTransformer = componentSetKey
+      ? figmaComponentService.getTransformer(componentSetKey)
+      : figmaComponentService.getTransformer(componentKey);
+
+    if (componentTransformer) {
+      return componentTransformer.transform(node);
+    }
+
+    return frameService?.transform(node, traverse);
+  });
+
+  return {
+    transform,
+  };
+}

package/src/codegen/domain/props/container-layout-props.service.ts

@@ -0,0 +1,248 @@
+import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
+import type {
+  NormalizedHasChildrenTrait,
+  NormalizedHasFramePropertiesTrait,
+  NormalizedIsLayerTrait,
+} from "@/normalizer";
+import { objectEntries } from "@/utils/common";
+import { toCssPixel } from "@/utils/css";
+import type { VariableService } from "../variable.service";
+
+type ContainerLayoutTrait = NormalizedHasFramePropertiesTrait &
+  NormalizedHasChildrenTrait &
+  NormalizedIsLayerTrait;
+
+export interface ContainerLayoutPropsService<T extends Record<string, any>> {
+  transform: PropsTransformer<ContainerLayoutTrait, T>;
+}
+
+// Seed Implementation
+type LayoutPropsKey =
+  | "flexDirection"
+  | "justifyContent"
+  | "alignItems"
+  | "flexWrap"
+  | "gap"
+  | "paddingBottom"
+  | "paddingLeft"
+  | "paddingRight"
+  | "paddingTop";
+
+type LayoutShorthandPropsKey = "padding" | "paddingX" | "paddingY";
+
+type LayoutPropHandler = (props: ContainerLayoutTrait) => string | number | boolean | undefined;
+
+type LayoutShorthandHandler = (
+  props: Partial<Record<LayoutPropsKey, string | number | boolean | undefined>>,
+) =>
+  | {
+      value: string | number | boolean | undefined;
+      exclude: LayoutPropsKey[];
+    }
+  | undefined;
+
+export type SeedContainerLayoutProps = Partial<
+  Record<LayoutPropsKey | LayoutShorthandPropsKey, string | number | boolean>
+>;
+
+export function createContainerLayoutPropsService({
+  variableService,
+  shouldInferVariableName,
+}: {
+  variableService: VariableService;
+  shouldInferVariableName: boolean;
+}): ContainerLayoutPropsService<SeedContainerLayoutProps> {
+  const getLayoutVariableName = (id: string) => variableService.getVariableName(id);
+  const inferSpacingVariableName = (value?: number) => {
+    if (value === undefined) {
+      return undefined;
+    }
+
+    if (shouldInferVariableName) {
+      const inferred = variableService.inferVariableName("GAP", value);
+      if (inferred) {
+        return inferred;
+      }
+    }
+
+    return value === 0 ? 0 : toCssPixel(value);
+  };
+
+  const layoutPropHandlers: Record<LayoutPropsKey, LayoutPropHandler> = {
+    flexDirection: ({ layoutMode }) => (layoutMode === "HORIZONTAL" ? "row" : "column"),
+    justifyContent: ({ primaryAxisAlignItems }) => {
+      switch (primaryAxisAlignItems) {
+        case "MIN":
+          return "flexStart";
+        case "CENTER":
+          return "center";
+        case "MAX":
+          return "flexEnd";
+        case "SPACE_BETWEEN":
+          return "spaceBetween";
+      }
+    },
+    alignItems: ({ counterAxisAlignItems, children }) => {
+      const isStretch = children.every((child) => {
+        if (!("layoutAlign" in child)) {
+          return false;
+        }
+
+        return child.layoutAlign === "STRETCH";
+      });
+
+      if (isStretch) {
+        return "stretch";
+      }
+
+      switch (counterAxisAlignItems) {
+        case "MIN":
+          return "flexStart";
+        case "CENTER":
+          return "center";
+        case "MAX":
+          return "flexEnd";
+        case "BASELINE":
+          return "baseline";
+      }
+    },
+    flexWrap: ({ layoutWrap }) => (layoutWrap === "WRAP" ? "wrap" : "nowrap"),
+    gap: ({ itemSpacing, boundVariables, primaryAxisAlignItems, children }) =>
+      children.length <= 1
+        ? 0
+        : primaryAxisAlignItems === "SPACE_BETWEEN"
+          ? 0
+          : boundVariables?.itemSpacing
+            ? getLayoutVariableName(boundVariables.itemSpacing.id)
+            : inferSpacingVariableName(itemSpacing),
+    paddingTop: ({ paddingTop, boundVariables }) =>
+      boundVariables?.paddingTop
+        ? getLayoutVariableName(boundVariables.paddingTop.id)
+        : inferSpacingVariableName(paddingTop),
+    paddingBottom: ({ paddingBottom, boundVariables }) =>
+      boundVariables?.paddingBottom
+        ? getLayoutVariableName(boundVariables.paddingBottom.id)
+        : inferSpacingVariableName(paddingBottom),
+    paddingLeft: ({ paddingLeft, boundVariables }) =>
+      boundVariables?.paddingLeft
+        ? getLayoutVariableName(boundVariables.paddingLeft.id)
+        : inferSpacingVariableName(paddingLeft),
+    paddingRight: ({ paddingRight, boundVariables }) =>
+      boundVariables?.paddingRight
+        ? getLayoutVariableName(boundVariables.paddingRight.id)
+        : inferSpacingVariableName(paddingRight),
+  };
+
+  const layoutShorthandHandlers: Record<LayoutShorthandPropsKey, LayoutShorthandHandler> = {
+    paddingX: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
+      if (paddingLeft === undefined || paddingRight === undefined) {
+        return undefined;
+      }
+
+      if (
+        paddingLeft === paddingRight &&
+        paddingTop === paddingBottom &&
+        paddingLeft === paddingTop
+      ) {
+        return undefined;
+      }
+
+      if (paddingLeft === paddingRight) {
+        const value = paddingLeft;
+        return {
+          value,
+          exclude: ["paddingLeft", "paddingRight"],
+        };
+      }
+      return undefined;
+    },
+    paddingY: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
+      if (paddingTop === undefined || paddingBottom === undefined) {
+        return undefined;
+      }
+
+      if (
+        paddingLeft === paddingRight &&
+        paddingTop === paddingBottom &&
+        paddingLeft === paddingTop
+      ) {
+        return undefined;
+      }
+
+      if (paddingTop === paddingBottom) {
+        return {
+          value: paddingTop,
+          exclude: ["paddingTop", "paddingBottom"],
+        };
+      }
+      return undefined;
+    },
+    padding: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
+      if (
+        paddingLeft === undefined ||
+        paddingRight === undefined ||
+        paddingTop === undefined ||
+        paddingBottom === undefined
+      ) {
+        return undefined;
+      }
+
+      if (
+        paddingLeft === paddingRight &&
+        paddingTop === paddingBottom &&
+        paddingLeft === paddingTop
+      ) {
+        return {
+          value: paddingLeft,
+          exclude: ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"],
+        };
+      }
+      return undefined;
+    },
+  };
+
+  // Default values
+  const layoutPropDefaults: SeedContainerLayoutProps = {
+    flexDirection: "row",
+    justifyContent: "flexStart",
+    alignItems: "stretch",
+    flexWrap: "nowrap",
+    gap: 0,
+    padding: 0,
+    paddingX: 0,
+    paddingY: 0,
+    paddingBottom: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+  };
+
+  const transform = definePropsTransformer((node: ContainerLayoutTrait) => {
+    const result: SeedContainerLayoutProps = {};
+
+    for (const [prop, handler] of objectEntries(layoutPropHandlers)) {
+      const value = handler(node);
+      if (value !== undefined && value !== layoutPropDefaults[prop]) {
+        result[prop] = value;
+      }
+    }
+
+    for (const [prop, handler] of objectEntries(layoutShorthandHandlers)) {
+      const shorthandResult = handler(result);
+      if (shorthandResult === undefined) {
+        continue;
+      }
+      const { value, exclude } = shorthandResult;
+      if (value !== undefined && value !== layoutPropDefaults[prop]) {
+        result[prop] = value;
+        for (const excludedProp of exclude) {
+          delete result[excludedProp];
+        }
+      }
+    }
+
+    return result;
+  });
+
+  return { transform };
+}

package/src/codegen/domain/props/fill-props.service.ts

@@ -0,0 +1,75 @@
+import { definePropsTransformer, type PropsTransformer } from "@/codegen/core";
+import type { NormalizedHasGeometryTrait, NormalizedIsLayerTrait } from "@/normalizer";
+import { toCssRgba } from "@/utils/css";
+import type { VariableService } from "../variable.service";
+
+type FillTrait = NormalizedIsLayerTrait & NormalizedHasGeometryTrait;
+
+export interface FillPropsService<T extends Record<string, any>> {
+  transform: PropsTransformer<FillTrait, T>;
+}
+
+export interface FrameFillProps {
+  background?: string;
+}
+
+export function createFrameFillPropsService({
+  variableService,
+}: { variableService: VariableService }): FillPropsService<FrameFillProps> {
+  const transform = definePropsTransformer((node: FillTrait) => {
+    const fills = node.fills;
+    if (fills.length === 0) {
+      return {};
+    }
+
+    const fill = fills[0];
+    if (!fill || ("visible" in fill && !fill.visible) || fill.type !== "SOLID") {
+      return {};
+    }
+
+    if (node.boundVariables?.fills?.length === 1) {
+      return {
+        background: variableService.getVariableName(node.boundVariables.fills[0]!.id),
+      };
+    }
+
+    const color = fill.color;
+    return {
+      background: toCssRgba(color),
+    };
+  });
+
+  return { transform };
+}
+
+export interface ShapeFillProps {
+  color?: string;
+}
+
+export function createShapeFillPropsService({
+  variableService,
+}: { variableService: VariableService }): FillPropsService<ShapeFillProps> {
+  const transform = definePropsTransformer((node: FillTrait) => {
+    const fills = node.fills;
+    if (fills.length === 0) {
+      return {};
+    }
+
+    const fill = fills[0];
+    if (!fill || ("visible" in fill && !fill.visible) || fill.type !== "SOLID") {
+      return {};
+    }
+    if (node.boundVariables?.fills?.length === 1) {
+      return {
+        color: variableService.getVariableName(node.boundVariables.fills[0]!.id),
+      };
+    }
+
+    const color = fill.color;
+    return {
+      color: toCssRgba(color),
+    };
+  });
+
+  return { transform };
+}