@seed-design/figma 0.0.2 → 0.0.4

package/src/layout.ts

@@ -1,289 +1,31 @@
-import type {
-  NormalizedComponentNode,
-  NormalizedFrameNode,
-  NormalizedInstanceNode,
-  NormalizedSceneNode,
-} from "./normalizer/types";
-import { getLayoutVariableName, inferDimension, inferRadius } from "./variable";
-
-interface FigmaLayoutProps {
-  layoutMode?: NormalizedFrameNode["layoutMode"];
-  layoutWrap?: NormalizedFrameNode["layoutWrap"];
-  paddingLeft?: NormalizedFrameNode["paddingLeft"];
-  paddingRight?: NormalizedFrameNode["paddingRight"];
-  paddingTop?: NormalizedFrameNode["paddingTop"];
-  paddingBottom?: NormalizedFrameNode["paddingBottom"];
-  primaryAxisAlignItems?: NormalizedFrameNode["primaryAxisAlignItems"];
-  counterAxisAlignItems?: NormalizedFrameNode["counterAxisAlignItems"];
-  primaryAxisSizingMode?: NormalizedFrameNode["primaryAxisSizingMode"];
-  counterAxisSizingMode?: NormalizedFrameNode["counterAxisSizingMode"];
-  layoutGrow?: NormalizedFrameNode["layoutGrow"];
-  layoutAlign?: NormalizedFrameNode["layoutAlign"];
-  itemSpacing?: NormalizedFrameNode["itemSpacing"];
-  counterAxisSpacing?: NormalizedFrameNode["counterAxisSpacing"];
-  boundVariables?: NormalizedFrameNode["boundVariables"];
-  cornerRadius?: NormalizedFrameNode["cornerRadius"];
-  rectangleCornerRadii?: NormalizedFrameNode["rectangleCornerRadii"];
-  children: NormalizedSceneNode[];
+export interface LayoutComponentProps {
+  flexDirection: string | number | boolean;
+  alignItems: string | number | boolean;
+  justifyContent: string | number | boolean;
+  flexWrap: string | number | boolean;
 }
 
-type LayoutPropHandler = (props: FigmaLayoutProps) => string | number | boolean | undefined;
-
-const layoutPropHandlers = {
-  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"),
-  flexGrow: ({ layoutGrow }) => layoutGrow,
-  alignSelf: ({ layoutAlign }) => {
-    switch (layoutAlign) {
-      case "STRETCH":
-        return "stretch";
-      case "MIN":
-        return "flexStart";
-      case "CENTER":
-        return "center";
-      case "MAX":
-        return "flexEnd";
-    }
-  },
-  gap: ({ itemSpacing, boundVariables, primaryAxisAlignItems, children }) =>
-    children.length <= 1
-      ? 0
-      : primaryAxisAlignItems === "SPACE_BETWEEN"
-        ? 0
-        : boundVariables?.itemSpacing
-          ? getLayoutVariableName(boundVariables.itemSpacing.id)
-          : inferDimension(itemSpacing ?? 0),
-  paddingTop: ({ paddingTop, boundVariables }) =>
-    boundVariables?.paddingTop
-      ? getLayoutVariableName(boundVariables.paddingTop.id)
-      : inferDimension(paddingTop ?? 0),
-  paddingBottom: ({ paddingBottom, boundVariables }) =>
-    boundVariables?.paddingBottom
-      ? getLayoutVariableName(boundVariables.paddingBottom.id)
-      : inferDimension(paddingBottom ?? 0),
-  paddingLeft: ({ paddingLeft, boundVariables }) =>
-    boundVariables?.paddingLeft
-      ? getLayoutVariableName(boundVariables.paddingLeft.id)
-      : inferDimension(paddingLeft ?? 0),
-  paddingRight: ({ paddingRight, boundVariables }) =>
-    boundVariables?.paddingRight
-      ? getLayoutVariableName(boundVariables.paddingRight.id)
-      : inferDimension(paddingRight ?? 0),
-  borderRadius: ({ cornerRadius, boundVariables }) => {
-    // If all corner radii are the same, use the first one
-    if (
-      cornerRadius &&
-      boundVariables?.bottomLeftRadius === boundVariables?.bottomRightRadius &&
-      boundVariables?.bottomLeftRadius === boundVariables?.topLeftRadius &&
-      boundVariables?.bottomLeftRadius === boundVariables?.topRightRadius
-    ) {
-      return boundVariables?.bottomLeftRadius
-        ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
-        : inferRadius(cornerRadius ?? 0);
-    }
-
-    // TODO: handle individual corner radii
-    return undefined;
-  },
-  borderTopLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.topLeftRadius
-      ? getLayoutVariableName(boundVariables.topLeftRadius.id)
-      : inferRadius(rectangleCornerRadii?.[0] ?? 0),
-  borderTopRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.topRightRadius
-      ? getLayoutVariableName(boundVariables.topRightRadius.id)
-      : inferRadius(rectangleCornerRadii?.[1] ?? 0),
-  borderBottomLeftRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.bottomLeftRadius
-      ? getLayoutVariableName(boundVariables.bottomLeftRadius.id)
-      : inferRadius(rectangleCornerRadii?.[2] ?? 0),
-  borderBottomRightRadius: ({ rectangleCornerRadii, boundVariables }) =>
-    boundVariables?.bottomRightRadius
-      ? getLayoutVariableName(boundVariables.bottomRightRadius.id)
-      : inferRadius(rectangleCornerRadii?.[3] ?? 0),
-} satisfies Record<string, LayoutPropHandler>;
-
-type LayoutProps = keyof typeof layoutPropHandlers;
-
-type LayoutShorthandHandler = (props: Record<LayoutProps, string | number | boolean | undefined>) =>
-  | {
-      value: string | number | boolean | undefined;
-      exclude: LayoutProps[];
-    }
-  | undefined;
-
-const layoutShorthandHandlers = {
-  paddingX: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
-    if (
-      paddingLeft === paddingRight &&
-      paddingTop === paddingBottom &&
-      paddingLeft === paddingTop
-    ) {
-      return undefined;
-    }
-    if (paddingLeft === paddingRight) {
-      const value =
-        paddingLeft === "globalGutter" || paddingLeft === "betweenChips"
-          ? `spacingX.${paddingLeft}`
-          : paddingLeft;
-      return {
-        value,
-        exclude: ["paddingLeft", "paddingRight"],
-      };
-    }
-    return undefined;
-  },
-  paddingY: ({ paddingLeft, paddingRight, paddingTop, paddingBottom }) => {
-    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 === paddingRight &&
-      paddingTop === paddingBottom &&
-      paddingLeft === paddingTop
-    ) {
-      return {
-        value: paddingLeft,
-        exclude: ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"],
-      };
-    }
-    return undefined;
-  },
-} satisfies Record<string, LayoutShorthandHandler>;
-
-type LayoutShorthandProps = keyof typeof layoutShorthandHandlers;
-
-const layoutPropDefaults: Record<string, string | number | boolean> = {
-  flexDirection: "row",
-  justifyContent: "flexStart",
-  alignItems: "stretch",
-  flexWrap: "nowrap",
-  flexGrow: 0,
-  alignSelf: "auto",
-  gap: 0,
-  padding: 0,
-  paddingX: 0,
-  paddingY: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-  paddingTop: 0,
-  borderRadius: 0,
-  borderTopLeftRadius: 0,
-  borderTopRightRadius: 0,
-  borderBottomLeftRadius: 0,
-  borderBottomRightRadius: 0,
-} satisfies Record<LayoutProps | LayoutShorthandProps, string | number | boolean>;
-
-type FrameLikeNode = NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode;
-
-export function createLayoutProps(
-  node: FrameLikeNode,
-): Record<LayoutProps | LayoutShorthandProps, string | number | boolean> {
-  const boundVariables = node.boundVariables;
-  const children = node.children;
-
-  const autoLayoutProperties = {
-    layoutMode: node.layoutMode,
-    layoutWrap: node.layoutWrap,
-    paddingLeft: node.paddingLeft,
-    paddingRight: node.paddingRight,
-    paddingTop: node.paddingTop,
-    paddingBottom: node.paddingBottom,
-    primaryAxisAlignItems: node.primaryAxisAlignItems,
-    counterAxisAlignItems: node.counterAxisAlignItems,
-    primaryAxisSizingMode: node.primaryAxisSizingMode,
-    counterAxisSizingMode: node.counterAxisSizingMode,
-    layoutGrow: node.layoutGrow,
-    layoutAlign: node.layoutAlign,
-    itemSpacing: node.itemSpacing,
-    counterAxisSpacing: node.counterAxisSpacing,
-  };
-
-  const radiusProperties = {
-    cornerRadius: node.cornerRadius,
-    topLeftRadius: node.rectangleCornerRadii?.[0],
-    topRightRadius: node.rectangleCornerRadii?.[1],
-    bottomRightRadius: node.rectangleCornerRadii?.[2],
-    bottomLeftRadius: node.rectangleCornerRadii?.[3],
-  };
-
-  const result: Record<string, string | number | boolean> = {};
+export function inferLayoutComponent(props: LayoutComponentProps) {
+  if (
+    props.flexDirection === "row" &&
+    props.alignItems === "flexStart" &&
+    props.justifyContent === "flexStart" &&
+    props.flexWrap === "wrap"
+  ) {
+    return "Inline";
+  }
 
-  for (const [prop, handler] of Object.entries(layoutPropHandlers)) {
-    const value = handler({
-      ...autoLayoutProperties,
-      ...radiusProperties,
-      boundVariables,
-      children,
-    });
-    if (value !== undefined && value !== layoutPropDefaults[prop]) {
-      result[prop] = value;
-    }
+  if (
+    props.flexDirection === "row" &&
+    props.justifyContent === "flexStart" &&
+    props.flexWrap === "nowrap"
+  ) {
+    return "Columns";
   }
 
-  for (const [prop, handler] of Object.entries(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];
-      }
-    }
+  if (props.flexDirection === "column") {
+    return "Stack";
   }
 
-  return result;
+  return "Flex";
 }

package/src/normalizer/from-plugin.ts

@@ -7,9 +7,14 @@ import type {
   NormalizedComponentNode,
   NormalizedInstanceNode,
   NormalizedVectorNode,
+  NormalizedBooleanOperationNode,
 } from "./types";
 
 export function createPluginNormalizer() {
+  async function normalizeNodes(nodes: readonly SceneNode[]): Promise<NormalizedSceneNode[]> {
+    return Promise.all(nodes.filter((node) => node.visible).map(normalizeNode));
+  }
+
   async function normalizeNode(node: SceneNode): Promise<NormalizedSceneNode> {
     if (node.type === "FRAME") {
       return normalizeFrameNode(node);
@@ -23,6 +28,9 @@ export function createPluginNormalizer() {
     if (node.type === "VECTOR") {
       return normalizeVectorNode(node);
     }
+    if (node.type === "BOOLEAN_OPERATION") {
+      return normalizeBooleanOperationNode(node);
+    }
     if (node.type === "TEXT") {
       return normalizeTextNode(node);
     }
@@ -44,7 +52,7 @@ export function createPluginNormalizer() {
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
       ...normalizeAutolayoutProps(node),
-      children: await Promise.all(node.children.map(normalizeNode)),
+      children: await normalizeNodes(node.children),
     };
   }
 
@@ -75,7 +83,7 @@ export function createPluginNormalizer() {
       counterAxisSpacing: node.inferredAutoLayout?.counterAxisSpacing ?? undefined,
       fills: [],
       strokes: [],
-      children: await Promise.all(node.children.map(normalizeNode)),
+      children: await normalizeNodes(node.children),
     };
   }
 
@@ -100,6 +108,18 @@ export function createPluginNormalizer() {
     };
   }
 
+  async function normalizeBooleanOperationNode(
+    node: BooleanOperationNode,
+  ): Promise<NormalizedBooleanOperationNode> {
+    return {
+      type: node.type,
+      id: node.id,
+      name: node.name,
+      boundVariables: await normalizeBoundVariables(node),
+      children: await normalizeNodes(node.children),
+      fills: normalizePaints(node.fills),
+    };
+  }
   async function normalizeTextNode(node: TextNode): Promise<NormalizedTextNode> {
     const segments = node.getStyledTextSegments([
       "fontSize",
@@ -173,7 +193,7 @@ export function createPluginNormalizer() {
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
       ...normalizeAutolayoutProps(node),
-      children: await Promise.all(node.children.map(normalizeNode)),
+      children: await normalizeNodes(node.children),
     };
   }
 
@@ -203,7 +223,7 @@ export function createPluginNormalizer() {
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
       ...normalizeAutolayoutProps(node),
-      children: await Promise.all(node.children.map(normalizeNode)),
+      children: await normalizeNodes(node.children),
       componentKey: mainComponent.key,
       componentSetKey:
         mainComponent.parent?.type === "COMPONENT_SET" ? mainComponent.parent.key : undefined,

package/src/normalizer/from-rest.ts

@@ -8,6 +8,7 @@ import type {
   NormalizedInstanceNode,
   NormalizedTextSegment,
   NormalizedVectorNode,
+  NormalizedBooleanOperationNode,
 } from "./types";
 
 export interface RestNormalizerContext {
@@ -17,6 +18,11 @@ export interface RestNormalizerContext {
 }
 
 export function createRestNormalizer(ctx: RestNormalizerContext) {
+  function normalizeNodes(nodes: readonly FigmaRestSpec.Node[]): NormalizedSceneNode[] {
+    // Figma REST API omits default values for some fields, "visible" is one of them
+    return nodes.filter((node) => !("visible" in node) || node.visible).map(normalizeNode);
+  }
+
   function normalizeNode(node: FigmaRestSpec.Node): NormalizedSceneNode {
     if (node.type === "FRAME") {
       return normalizeFrameNode(node);
@@ -30,6 +36,9 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
     if (node.type === "VECTOR") {
       return normalizeVectorNode(node);
     }
+    if (node.type === "BOOLEAN_OPERATION") {
+      return normalizeBooleanOperationNode(node);
+    }
     if (node.type === "TEXT") {
       return normalizeTextNode(node);
     }
@@ -46,7 +55,7 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
   function normalizeFrameNode(node: FigmaRestSpec.FrameNode): NormalizedFrameNode {
     return {
       ...node,
-      children: node.children.map(normalizeNode),
+      children: normalizeNodes(node.children),
     };
   }
 
@@ -54,7 +63,7 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
     return {
       ...node,
       type: "FRAME",
-      children: node.children.map(normalizeNode),
+      children: normalizeNodes(node.children),
     };
   }
 
@@ -66,6 +75,15 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
     return node;
   }
 
+  function normalizeBooleanOperationNode(
+    node: FigmaRestSpec.BooleanOperationNode,
+  ): NormalizedBooleanOperationNode {
+    return {
+      ...node,
+      children: normalizeNodes(node.children),
+    };
+  }
+
   function normalizeTextNode(node: FigmaRestSpec.TextNode): NormalizedTextNode {
     // Function to segment a text node based on style overrides
     function segmentTextNode(textNode: FigmaRestSpec.TextNode): NormalizedTextSegment[] {
@@ -141,7 +159,7 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
   function normalizeComponentNode(node: FigmaRestSpec.ComponentNode): NormalizedComponentNode {
     return {
       ...node,
-      children: node.children.map(normalizeNode),
+      children: normalizeNodes(node.children),
     };
   }
 
@@ -167,7 +185,7 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
 
     return {
       ...node,
-      children: node.children.map(normalizeNode),
+      children: normalizeNodes(node.children),
       componentKey: mainComponent.key,
       componentSetKey: componentSet?.key,
       componentProperties,

package/src/normalizer/index.ts

@@ -0,0 +1,3 @@
+export * from "./types";
+export { createRestNormalizer } from "./from-rest";
+export { createPluginNormalizer } from "./from-plugin";

package/src/normalizer/types.ts

@@ -82,7 +82,9 @@ export interface NormalizedVectorNode
   extends Pick<FigmaRestSpec.VectorNode, CommonProps | ShapeProps> {}
 
 export interface NormalizedBooleanOperationNode
-  extends Pick<FigmaRestSpec.BooleanOperationNode, CommonProps | "fills"> {}
+  extends Pick<FigmaRestSpec.BooleanOperationNode, CommonProps | "fills"> {
+  children: NormalizedSceneNode[];
+}
 
 export type NormalizedSceneNode =
   | NormalizedFrameNode

package/src/{color.ts → props/color.ts}

@@ -1,4 +1,4 @@
-import type { NormalizedFrameNode, NormalizedTextNode } from "./normalizer/types";
+import type { NormalizedFrameNode, NormalizedTextNode } from "../normalizer";
 import { getColorVariableName } from "./variable";
 
 export function createBackgroundProps(