@seed-design/figma 0.1.7 → 0.1.8

package/src/normalizer/from-plugin.ts

@@ -9,6 +9,7 @@ import type {
   NormalizedVectorNode,
   NormalizedBooleanOperationNode,
 } from "./types";
+import { convertTransformToGradientHandles } from "@/utils/figma-gradient";
 
 export function createPluginNormalizer() {
   async function normalizeNodes(nodes: readonly SceneNode[]): Promise<NormalizedSceneNode[]> {
@@ -55,7 +56,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeAutolayoutProps(node),
+      ...(await normalizeAutolayoutProps(node)),
       children: await normalizeNodes(node.children),
     };
   }
@@ -99,7 +100,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
 
@@ -109,7 +110,7 @@ export function createPluginNormalizer() {
       id: node.id,
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
 
@@ -122,7 +123,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       children: await normalizeNodes(node.children),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
   async function normalizeTextNode(node: TextNode): Promise<NormalizedTextNode> {
@@ -136,6 +137,7 @@ export function createPluginNormalizer() {
       "textStyleId",
       "fills",
       "boundVariables",
+      "textDecoration",
     ]);
     const first = segments[0]!;
 
@@ -175,7 +177,7 @@ export function createPluginNormalizer() {
           lineHeightPx: segment.lineHeight.unit === "PIXELS" ? segment.lineHeight.value : undefined,
         },
       })),
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
     };
   }
 
@@ -186,7 +188,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeAutolayoutProps(node),
+      ...(await normalizeAutolayoutProps(node)),
       children: await normalizeNodes(node.children),
     };
   }
@@ -219,7 +221,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       ...normalizeRadiusProps(node),
-      ...normalizeAutolayoutProps(node),
+      ...(await normalizeAutolayoutProps(node)),
       children: await normalizeNodes(node.children),
       componentKey: mainComponent.key,
       componentSetKey:
@@ -244,29 +246,44 @@ export function createPluginNormalizer() {
   }
 
   function normalizePaint(paint: Paint): FigmaRestSpec.Paint {
-    if (paint.type === "SOLID") {
-      return normalizeSolidPaint(paint);
+    switch (paint.type) {
+      case "SOLID":
+        return normalizeSolidPaint(paint);
+      case "IMAGE":
+        return {
+          type: "IMAGE",
+          scaleMode: paint.scaleMode === "CROP" ? "STRETCH" : paint.scaleMode,
+          imageTransform: paint.imageTransform,
+          scalingFactor: paint.scalingFactor,
+          filters: paint.filters,
+          rotation: paint.rotation,
+          imageRef: paint.imageHash ?? "",
+          blendMode: paint.blendMode ?? "NORMAL",
+          visible: paint.visible,
+          opacity: paint.opacity,
+        };
+      case "GRADIENT_LINEAR":
+      case "GRADIENT_RADIAL":
+      case "GRADIENT_ANGULAR":
+      case "GRADIENT_DIAMOND":
+        return {
+          type: paint.type,
+          gradientStops: [...paint.gradientStops],
+          visible: paint.visible,
+          opacity: paint.opacity,
+          blendMode: paint.blendMode ?? "NORMAL",
+          gradientHandlePositions: convertTransformToGradientHandles(paint.gradientTransform),
+        };
+      default:
+        throw new Error(`Unimplemented paint type: ${paint.type}`);
     }
-    if (paint.type === "IMAGE") {
-      return {
-        type: "IMAGE",
-        scaleMode: paint.scaleMode === "CROP" ? "STRETCH" : paint.scaleMode,
-        imageTransform: paint.imageTransform,
-        scalingFactor: paint.scalingFactor,
-        filters: paint.filters,
-        rotation: paint.rotation,
-        imageRef: paint.imageHash ?? "",
-        blendMode: paint.blendMode ?? "NORMAL",
-        visible: paint.visible,
-        opacity: paint.opacity,
-      };
-    }
-    throw new Error(`Unimplemented paint type: ${paint.type}`);
   }
 
   function normalizePaints(fills: readonly Paint[] | PluginAPI["mixed"]): FigmaRestSpec.Paint[] {
     if (fills === figma.mixed) {
-      throw new Error("Mixed fills are not supported");
+      console.warn("Mixed fills are not supported");
+
+      return [];
     }
 
     return fills.map(normalizePaint);
@@ -289,10 +306,11 @@ export function createPluginNormalizer() {
     };
   }
 
-  function normalizeShapeProps(
+  async function normalizeShapeProps(
     node: Pick<
       RectangleNode,
       | "fills"
+      | "fillStyleId"
       | "strokes"
       | "strokeWeight"
       | "layoutGrow"
@@ -308,6 +326,11 @@ export function createPluginNormalizer() {
     > &
       Partial<Pick<FrameNode, "inferredAutoLayout">>,
   ) {
+    const fillStyleKey =
+      typeof node.fillStyleId === "string"
+        ? (await figma.getStyleByIdAsync(node.fillStyleId))?.key
+        : undefined;
+
     return {
       layoutGrow: (node.inferredAutoLayout?.layoutGrow ?? node.layoutGrow) as 0 | 1 | undefined,
       layoutAlign: node.inferredAutoLayout?.layoutAlign ?? node.layoutAlign,
@@ -316,6 +339,7 @@ export function createPluginNormalizer() {
       absoluteBoundingBox: node.absoluteBoundingBox,
       relativeTransform: node.relativeTransform,
       fills: normalizePaints(node.fills),
+      ...(fillStyleKey ? { fillStyleKey } : {}),
       strokes: normalizePaints(node.strokes),
       strokeWeight: node.strokeWeight === figma.mixed ? undefined : node.strokeWeight,
       minHeight: node.minHeight ?? undefined,
@@ -325,9 +349,9 @@ export function createPluginNormalizer() {
     };
   }
 
-  function normalizeAutolayoutProps(node: Omit<FrameNode, "type" | "clone">) {
+  async function normalizeAutolayoutProps(node: Omit<FrameNode, "type" | "clone">) {
     return {
-      ...normalizeShapeProps(node),
+      ...(await normalizeShapeProps(node)),
       layoutMode: node.inferredAutoLayout?.layoutMode ?? node.layoutMode,
       layoutWrap: node.inferredAutoLayout?.layoutWrap ?? node.layoutWrap,
       paddingLeft: node.inferredAutoLayout?.paddingLeft ?? node.paddingLeft,
@@ -348,23 +372,59 @@ export function createPluginNormalizer() {
     };
   }
 
-  async function normalizeBoundVariables(node: Pick<FrameNode, "boundVariables">) {
+  async function normalizeBoundVariables({
+    boundVariables,
+  }: Pick<FrameNode, "boundVariables">): Promise<FigmaRestSpec.IsLayerTrait["boundVariables"]> {
+    if (!boundVariables) return undefined;
+
+    const { width, height, componentProperties: _componentProperties, ...rest } = boundVariables;
+
+    // replace VariableAlias' id with the actual variable key
+    const resolveVariableId = async (variable: VariableAlias): Promise<VariableAlias> => ({
+      ...variable,
+      id: (await figma.variables.getVariableByIdAsync(variable.id))?.key ?? variable.id,
+    });
+
+    const needsResolution = [
+      "fills",
+      "itemSpacing",
+      "counterAxisSpacing",
+      "bottomLeftRadius",
+      "bottomRightRadius",
+      "topLeftRadius",
+      "topRightRadius",
+      "paddingBottom",
+      "paddingLeft",
+      "paddingRight",
+      "paddingTop",
+      "maxHeight",
+      "minHeight",
+      "maxWidth",
+      "minWidth",
+    ];
+
+    // Process all properties in parallel
+    const resolvedEntries = await Promise.all(
+      Object.entries(rest).map(async ([key, value]) => {
+        if (!value || !needsResolution.includes(key)) return [key, value];
+
+        if (Array.isArray(value)) {
+          return [key, await Promise.all(value.map(resolveVariableId))];
+        }
+
+        return [key, await resolveVariableId(value)];
+      }),
+    );
+
     return {
-      ...node.boundVariables,
-      fills: await Promise.all(
-        node.boundVariables?.fills?.map((fill) =>
-          figma.variables.getVariableByIdAsync(fill.id).then((res) => {
-            return {
-              ...fill,
-              id: res?.key ?? fill.id,
-            };
-          }),
-        ) ?? [],
-      ),
-      size: {
-        x: node.boundVariables?.width,
-        y: node.boundVariables?.height,
-      },
+      ...Object.fromEntries(resolvedEntries),
+      ...(width &&
+        height && {
+          size: {
+            x: width,
+            y: height,
+          },
+        }),
     };
   }
 

package/src/normalizer/types.ts

@@ -32,7 +32,9 @@ export type NormalizedHasLayoutTrait = Pick<
 export type NormalizedHasGeometryTrait = Pick<
   FigmaRestSpec.HasGeometryTrait,
   "fills" | "strokes" | "strokeWeight" | "styles"
->;
+> & {
+  fillStyleKey?: string;
+};
 
 export type NormalizedHasFramePropertiesTrait = Pick<
   FigmaRestSpec.HasFramePropertiesTrait,

package/src/utils/figma-gradient.ts

@@ -0,0 +1,72 @@
+/**
+ * @see https://gist.github.com/yagudaev/0c2b89674c6aee8b38cd379752ef58d0
+ */
+
+const identityMatrixHandlePositions = [
+  [0, 1, 0],
+  [0.5, 0.5, 1],
+  [1, 1, 1],
+];
+
+/**
+ * Inverts a 2x3 affine transformation matrix
+ * For a 2x3 matrix [[a, b, c], [d, e, f]], we treat it as a 3x3 matrix with [0, 0, 1] as the third row
+ */
+function inv(matrix: number[][]): number[][] {
+  const [[a, b, c], [d, e, f]] = matrix;
+  
+  // Calculate determinant of the 2x2 linear part
+  const det = a * e - b * d;
+  
+  if (Math.abs(det) < 1e-10) {
+    throw new Error("Matrix is not invertible");
+  }
+  
+  // Invert the 2x2 linear part
+  const invDet = 1 / det;
+  const a_inv = e * invDet;
+  const b_inv = -b * invDet;
+  const d_inv = -d * invDet;
+  const e_inv = a * invDet;
+  
+  // Calculate the inverted translation
+  const c_inv = -(a_inv * c + b_inv * f);
+  const f_inv = -(d_inv * c + e_inv * f);
+  
+  return [
+    [a_inv, b_inv, c_inv],
+    [d_inv, e_inv, f_inv]
+  ];
+}
+
+/**
+ * Multiplies a 2x3 matrix with a 3x3 matrix
+ * Result is a 2x3 matrix
+ */
+function multiply(matrix1: number[][], matrix2: number[][]): number[][] {
+  const [[a, b, c], [d, e, f]] = matrix1;
+  const result: number[][] = [[], []];
+  
+  // For each column in matrix2
+  for (let col = 0; col < matrix2[0].length; col++) {
+    // First row of result
+    result[0][col] = a * matrix2[0][col] + b * matrix2[1][col] + c * matrix2[2][col];
+    // Second row of result
+    result[1][col] = d * matrix2[0][col] + e * matrix2[1][col] + f * matrix2[2][col];
+  }
+  
+  return result;
+}
+
+export function convertTransformToGradientHandles(transform: number[][]) {
+  const inverseTransform = inv(transform);
+
+  // point matrix
+  const mp = multiply(inverseTransform, identityMatrixHandlePositions);
+
+  return [
+    { x: mp[0][0], y: mp[1][0] },
+    { x: mp[0][1], y: mp[1][1] },
+    { x: mp[0][2], y: mp[1][2] },
+  ];
+}

package/src/utils/figma-node.ts

@@ -5,14 +5,15 @@ import type {
   NormalizedIsLayerTrait,
   NormalizedSceneNode,
 } from "../normalizer";
+
 export function traverseNode(
   node: NormalizedSceneNode,
   callback: (node: NormalizedSceneNode) => void,
 ) {
+  callback(node);
+
   if ("children" in node) {
     node.children.forEach((child) => traverseNode(child, callback));
-  } else {
-    callback(node);
   }
 }
 
@@ -50,7 +51,7 @@ export function findAllInstances<T>({ node, key }: { node: NormalizedSceneNode;
   return findAll(
     node,
     (n) => n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key),
-  ) as (NormalizedInstanceNode & { componentProperties: T })[];
+  ) as (Omit<NormalizedInstanceNode, "componentProperties"> & { componentProperties: T })[];
 }
 
 export function getFirstSolidFill(node: NormalizedHasGeometryTrait) {

package/src/codegen/targets/react/component/handlers/action-chip.ts

@@ -1,72 +0,0 @@
-import type { ActionChipProperties } from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { match } from "ts-pattern";
-import { createSeedReactElement } from "../../element-factories";
-import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
-
-export const createActionChipHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ActionChipProperties>(
-    metadata.actionChip.key,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
-      const { layout, children } = match(props.Layout.value)
-        .with("Icon Only", () => ({
-          layout: "iconOnly",
-          children: [
-            createSeedReactElement("Icon", {
-              svg: ctx.iconHandler.transform(props["Icon#8714:0"]),
-            }),
-          ],
-        }))
-        .with("Icon First", () => ({
-          layout: "withText",
-          children: [
-            createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
-            }),
-            props["Label#7185:0"].value,
-          ],
-        }))
-        .with("Icon Last", () => ({
-          layout: "withText",
-          children: [
-            props["Label#7185:0"].value,
-            createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
-            }),
-          ],
-        }))
-        .with("Icon Both", () => ({
-          layout: "withText",
-          children: [
-            createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#8711:0"]),
-            }),
-            props["Label#7185:0"].value,
-            createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#8711:3"]),
-            }),
-          ],
-        }))
-        .with("Text Only", () => ({
-          layout: "withText",
-          children: props["Label#7185:0"].value,
-        }))
-        .exhaustive();
-
-      const commonProps = {
-        size: handleSizeProp(props.Size.value),
-        layout,
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-        ...(props["Show Count#7185:42"].value && {
-          count: Number(props["Count#7185:21"].value),
-        }),
-      };
-      return createSeedReactElement("ActionChip", commonProps, children);
-    },
-  );

package/src/codegen/targets/react/component/handlers/action-sheet.ts

@@ -1,82 +0,0 @@
-import type {
-  ActionSheetItemProperties,
-  ActionSheetProperties,
-} from "@/codegen/component-properties";
-import { createElement, defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { findAllInstances } from "@/utils/figma-node";
-import { camelCase } from "change-case";
-import { match } from "ts-pattern";
-import { createLocalSnippetHelper } from "../../element-factories";
-import type { ComponentHandlerDeps } from "../deps.interface";
-
-const { createLocalSnippetElement } = createLocalSnippetHelper("action-sheet");
-
-const ACTION_SHEET_ITEM_KEY = "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381";
-const createActionSheetItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ActionSheetItemProperties>(
-    ACTION_SHEET_ITEM_KEY,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
-      const commonProps = {
-        label: props["Label#15420:4"].value,
-        tone: camelCase(props.Tone.value),
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-      };
-
-      return createLocalSnippetElement("ActionSheetItem", commonProps);
-    },
-  );
-
-export const createActionSheetHandler = (ctx: ComponentHandlerDeps) => {
-  const actionSheetItemHandler = createActionSheetItemHandler(ctx);
-
-  return defineComponentHandler<ActionSheetProperties>(metadata.actionSheet.key, (node) => {
-    const { componentProperties: props } = node;
-
-    const contentProps = match(props.Header.value)
-      .with("None", () => ({
-        title: undefined,
-        description: undefined,
-      }))
-      .with("Title Only", () => ({
-        title: props["Title#15641:37"].value,
-        description: undefined,
-      }))
-      .with("Description Only", () => ({
-        title: undefined,
-        description: props["Description#15641:70"].value,
-      }))
-      .with("Title With Description", () => ({
-        title: props["Title#15641:37"].value,
-        description: props["Description#15641:70"].value,
-      }))
-      .exhaustive();
-
-    const items = findAllInstances<ActionSheetItemProperties>({
-      node,
-      key: actionSheetItemHandler.key,
-    });
-
-    const contentChildren = items.map(actionSheetItemHandler.transform);
-
-    const content = createLocalSnippetElement("ActionSheetContent", contentProps, contentChildren, {
-      comment: contentProps.title
-        ? undefined
-        : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
-    });
-
-    const trigger = createLocalSnippetElement(
-      "ActionSheetTrigger",
-      { asChild: true },
-      createElement("button", undefined, "열기", {
-        comment: "ActionSheet을 여는 요소를 제공해주세요.",
-      }),
-    );
-
-    return createLocalSnippetElement("ActionSheet", undefined, [trigger, content]);
-  });
-};

package/src/codegen/targets/react/component/handlers/chip-tabs.ts

@@ -1,57 +0,0 @@
-import type { ChipTabsItemProperties, ChipTabsProperties } from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { findAllInstances } from "@/utils/figma-node";
-import { camelCase } from "change-case";
-import { createLocalSnippetHelper } from "../../element-factories";
-import type { ComponentHandlerDeps } from "../deps.interface";
-
-const { createLocalSnippetElement } = createLocalSnippetHelper("chip-tabs");
-
-const CHIP_TABS_ITEM_KEY = "fa80168b02051fbb0ba032238bd76d840dbe2e15";
-const createChipTabsItemHandler = (_ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ChipTabsItemProperties>(
-    CHIP_TABS_ITEM_KEY,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
-      const commonProps = {
-        value: props["Label#8876:0"].value,
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-      };
-
-      return createLocalSnippetElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
-    },
-  );
-
-export const createChipTabsHandler = (ctx: ComponentHandlerDeps) => {
-  const chipTabsItemHandler = createChipTabsItemHandler(ctx);
-
-  return defineComponentHandler<ChipTabsProperties>(metadata.chipTablist.key, (node) => {
-    const chipTabsItems = findAllInstances<ChipTabsItemProperties>({
-      node,
-      key: chipTabsItemHandler.key,
-    });
-
-    const selectedChipTabsItem = chipTabsItems.find((chipTabsItem) =>
-      chipTabsItem.componentProperties.State.value.split("-").includes("Selected"),
-    );
-
-    const chipTabsList = createLocalSnippetElement(
-      "ChipTabsList",
-      undefined,
-      chipTabsItems.map(chipTabsItemHandler.transform),
-    );
-
-    const commonProps = {
-      variant: camelCase(node.componentProperties.Variant.value),
-      ...(selectedChipTabsItem && {
-        defaultValue: selectedChipTabsItem.componentProperties["Label#8876:0"].value,
-      }),
-    };
-
-    return createLocalSnippetElement("ChipTabs", commonProps, chipTabsList);
-  });
-};

package/src/codegen/targets/react/component/handlers/control-chip.ts

@@ -1,81 +0,0 @@
-import type { ControlChipProperties } from "@/codegen/component-properties";
-import { defineComponentHandler } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { match } from "ts-pattern";
-import { createLocalSnippetHelper, createSeedReactElement } from "../../element-factories";
-import type { ComponentHandlerDeps } from "../deps.interface";
-import { handleSizeProp } from "../size";
-
-const { createLocalSnippetElement } = createLocalSnippetHelper("control-chip");
-
-export const createControlChipHandler = (ctx: ComponentHandlerDeps) =>
-  defineComponentHandler<ControlChipProperties>(
-    metadata.controlChip.key,
-    ({ componentProperties: props }) => {
-      const states = props.State.value.split("-");
-
-      const count = props["Show Count#7185:42"].value ? props["Count#7185:21"].value : undefined;
-
-      const { layout, children } = match(props.Layout.value)
-        .with("Icon Only", () => ({
-          layout: "iconOnly",
-          children: [
-            createSeedReactElement("Icon", {
-              svg: ctx.iconHandler.transform(props["Icon#8722:41"]),
-            }),
-          ],
-        }))
-        .with("Icon First", () => ({
-          layout: "withText",
-          children: [
-            createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
-            }),
-            props["Label#7185:0"].value,
-            count ? createSeedReactElement("Count", undefined, [count]) : undefined,
-          ],
-        }))
-        .with("Icon Last", () => ({
-          layout: "withText",
-          children: [
-            props["Label#7185:0"].value,
-            createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
-            }),
-          ],
-        }))
-        .with("Icon Both", () => ({
-          layout: "withText",
-          children: [
-            createSeedReactElement("PrefixIcon", {
-              svg: ctx.iconHandler.transform(props["Prefix Icon#8722:0"]),
-            }),
-            props["Label#7185:0"].value,
-            createSeedReactElement("SuffixIcon", {
-              svg: ctx.iconHandler.transform(props["Suffix Icon#8722:82"]),
-            }),
-          ],
-        }))
-        .with("Text Only", () => ({
-          layout: "withText",
-          children: props["Label#7185:0"].value,
-        }))
-        .exhaustive();
-
-      const commonProps = {
-        size: handleSizeProp(props.Size.value),
-        layout,
-        ...(states.includes("Selected") && {
-          defaultChecked: true,
-        }),
-        ...(states.includes("Disabled") && {
-          disabled: true,
-        }),
-        ...(props["Show Count#7185:42"].value && {
-          count: Number(props["Count#7185:21"].value),
-        }),
-      };
-
-      return createLocalSnippetElement("ControlChip.Toggle", commonProps, children);
-    },
-  );