@seed-design/figma 0.0.4 → 0.0.6

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

@@ -0,0 +1,95 @@
+import { isVariableAlias, sanitizeVariableId } from "@/utils/figma-variable";
+import type { Variable, VariableScope, VariableValueResolved } from "./variable.interface";
+import type { VariableRepository } from "./variable.repository";
+
+export interface VariableService {
+  getVariableName: (id: string) => string;
+  inferVariableName: (scope: VariableScope, value: number | string | boolean) => string | undefined;
+}
+
+export interface VariableServiceDeps {
+  variableRepository: VariableRepository;
+  variableNameTransformer: ({ slug }: { slug: string[] }) => string;
+}
+
+export function createVariableService({
+  variableRepository,
+  variableNameTransformer,
+}: VariableServiceDeps): VariableService {
+  const variables = variableRepository.getVariableList();
+
+  // private
+  function getFigmaVariableName(key: string) {
+    const sanitizedId = sanitizeVariableId(key);
+    const variable = variableRepository.findVariableByKey(sanitizedId);
+
+    if (!variable) {
+      return "UNKNOWN_VARIABLE";
+    }
+
+    return variable.name;
+  }
+
+  function getFigmaVariableSlug(key: string): string[] {
+    const name = getFigmaVariableName(key);
+    return name.split("/");
+  }
+
+  function getDefaultModeId(variable: Variable) {
+    const variableCollection = variableRepository.findVariableCollectionById(
+      variable.variableCollectionId,
+    );
+
+    if (!variableCollection) {
+      // Variable collection not found: ${variable.variableCollectionId}, falling back to variable.valuesByMode key
+      return Object.keys(variable.valuesByMode)[0]!;
+    }
+
+    return variableCollection.defaultModeId;
+  }
+
+  function resolveVariableValue(id: string, mode: string): VariableValueResolved {
+    const variable = variableRepository.findVariableById(id);
+    if (!variable) {
+      throw new Error(`Variable not found: ${id}`);
+    }
+
+    const value = variable.valuesByMode[mode];
+
+    if (value === undefined) {
+      throw new Error(`Variable value not found: ${id} ${mode}`);
+    }
+
+    if (isVariableAlias(value)) {
+      return resolveVariableValue(value.id, mode);
+    }
+
+    return value;
+  }
+
+  // public
+  function getVariableName(key: string) {
+    const slug = getFigmaVariableSlug(key);
+    return variableNameTransformer({ slug });
+  }
+
+  function inferVariableName(scope: VariableScope, value: number | string | boolean) {
+    // NOTE: We assume that the variable is in the default mode or value is equal between all modes for simplicity.
+    const inferredVariable = variables.find(
+      (variable) =>
+        variable.scopes.includes(scope) &&
+        resolveVariableValue(variable.id, getDefaultModeId(variable)) === value,
+    );
+
+    if (!inferredVariable) {
+      return undefined;
+    }
+
+    return getVariableName(inferredVariable.key);
+  }
+
+  return {
+    getVariableName,
+    inferVariableName,
+  };
+}

package/src/codegen/index.ts

@@ -0,0 +1,13 @@
+export * from "./core";
+export * from "./domain";
+
+import type { NormalizedSceneNode } from "@/normalizer";
+import { codegenService, devCodegenService } from "./context";
+
+export function generateJsxTree(node: NormalizedSceneNode) {
+  return codegenService.transform(node);
+}
+
+export function generateCode(node: NormalizedSceneNode, { dev }: { dev?: boolean } = {}) {
+  return dev ? devCodegenService.transformToString(node) : codegenService.transformToString(node);
+}

package/src/index.ts

@@ -1,2 +1,2 @@
-export { generateCode } from "./generate-code";
-export { createPluginNormalizer, createRestNormalizer } from "./normalizer";
+export * from "./normalizer";
+export * from "./codegen";

package/src/normalizer/from-plugin.ts

@@ -41,7 +41,11 @@ export function createPluginNormalizer() {
       return normalizeInstanceNode(node);
     }
 
-    throw new Error(`Unimplemented node type: ${node.type}`);
+    return {
+      type: "UNHANDLED",
+      id: node.id,
+      original: node,
+    };
   }
 
   async function normalizeFrameNode(node: FrameNode): Promise<NormalizedFrameNode> {
@@ -117,7 +121,7 @@ export function createPluginNormalizer() {
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
       children: await normalizeNodes(node.children),
-      fills: normalizePaints(node.fills),
+      ...normalizeShapeProps(node),
     };
   }
   async function normalizeTextNode(node: TextNode): Promise<NormalizedTextNode> {
@@ -132,7 +136,7 @@ export function createPluginNormalizer() {
       "fills",
       "boundVariables",
     ]);
-    const first = segments[0]!; // TODO: handle multiple segments
+    const first = segments[0]!;
 
     const textStyleKey =
       typeof node.textStyleId === "string"
@@ -144,8 +148,6 @@ export function createPluginNormalizer() {
       id: node.id,
       name: node.name,
       boundVariables: await normalizeBoundVariables(node),
-      layoutGrow: node.layoutGrow as 0 | 1 | undefined,
-      layoutAlign: node.layoutAlign,
       style: {
         fontSize: first.fontSize,
         fontWeight: first.fontWeight,
@@ -159,29 +161,20 @@ export function createPluginNormalizer() {
       },
       ...(textStyleKey ? { textStyleKey } : {}),
       characters: node.characters,
-      segments: node
-        .getStyledTextSegments([
-          "fontSize",
-          "fontWeight",
-          "fontName",
-          "letterSpacing",
-          "lineHeight",
-        ])
-        .map((segment) => ({
-          characters: segment.characters,
-          start: segment.start,
-          end: segment.end,
-          style: {
-            fontSize: segment.fontSize,
-            fontWeight: segment.fontWeight,
-            fontFamily: segment.fontName.family,
-            letterSpacing:
-              segment.letterSpacing.unit === "PIXELS" ? segment.letterSpacing.value : undefined,
-            lineHeightPx:
-              segment.lineHeight.unit === "PIXELS" ? segment.lineHeight.value : undefined,
-          },
-        })),
-      fills: normalizePaints(node.fills),
+      segments: segments.map((segment) => ({
+        characters: segment.characters,
+        start: segment.start,
+        end: segment.end,
+        style: {
+          fontSize: segment.fontSize,
+          fontWeight: segment.fontWeight,
+          fontFamily: segment.fontName.family,
+          letterSpacing:
+            segment.letterSpacing.unit === "PIXELS" ? segment.letterSpacing.value : undefined,
+          lineHeightPx: segment.lineHeight.unit === "PIXELS" ? segment.lineHeight.value : undefined,
+        },
+      })),
+      ...normalizeShapeProps(node),
     };
   }
 
@@ -303,6 +296,10 @@ export function createPluginNormalizer() {
       | "layoutSizingHorizontal"
       | "layoutSizingVertical"
       | "absoluteBoundingBox"
+      | "minHeight"
+      | "minWidth"
+      | "maxHeight"
+      | "maxWidth"
     > &
       Partial<Pick<FrameNode, "inferredAutoLayout">>,
   ) {
@@ -315,6 +312,10 @@ export function createPluginNormalizer() {
       fills: normalizePaints(node.fills),
       strokes: normalizePaints(node.strokes),
       strokeWeight: node.strokeWeight === figma.mixed ? undefined : node.strokeWeight,
+      minHeight: node.minHeight ?? undefined,
+      minWidth: node.minWidth ?? undefined,
+      maxHeight: node.maxHeight ?? undefined,
+      maxWidth: node.maxWidth ?? undefined,
     };
   }
 

package/src/normalizer/from-rest.ts

@@ -49,7 +49,11 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
       return normalizeInstanceNode(node);
     }
 
-    throw new Error(`Unimplemented node type: ${node.type}, ${node.name}`);
+    return {
+      type: "UNHANDLED",
+      id: node.id,
+      original: node,
+    };
   }
 
   function normalizeFrameNode(node: FigmaRestSpec.FrameNode): NormalizedFrameNode {

package/src/normalizer/types.ts

@@ -1,20 +1,40 @@
 import type * as FigmaRestSpec from "@figma/rest-api-spec";
 
-export type CommonProps = "type" | "id" | "name" | "boundVariables";
+export type NormalizedIsLayerTrait = Pick<
+  FigmaRestSpec.IsLayerTrait,
+  "type" | "id" | "name" | "boundVariables"
+>;
 
-export type RadiusProps = "cornerRadius" | "rectangleCornerRadii";
+export type NormalizedCornerTrait = Pick<
+  FigmaRestSpec.CornerTrait,
+  "cornerRadius" | "rectangleCornerRadii"
+>;
 
-export type ShapeProps =
-  | "layoutGrow"
+export type NormalizedHasChildrenTrait = {
+  children: NormalizedSceneNode[];
+};
+
+export type NormalizedHasLayoutTrait = Pick<
+  FigmaRestSpec.HasLayoutTrait,
   | "layoutAlign"
+  | "layoutGrow"
+  | "absoluteBoundingBox"
+  | "layoutPositioning"
   | "layoutSizingHorizontal"
   | "layoutSizingVertical"
-  | "absoluteBoundingBox"
-  | "fills"
-  | "strokes"
-  | "strokeWeight";
-
-export type LayoutProps =
+  | "minHeight"
+  | "minWidth"
+  | "maxHeight"
+  | "maxWidth"
+>;
+
+export type NormalizedHasGeometryTrait = Pick<
+  FigmaRestSpec.HasGeometryTrait,
+  "fills" | "strokes" | "strokeWeight" | "styles"
+>;
+
+export type NormalizedHasFramePropertiesTrait = Pick<
+  FigmaRestSpec.HasFramePropertiesTrait,
   | "layoutMode"
   | "layoutWrap"
   | "paddingLeft"
@@ -22,26 +42,43 @@ export type LayoutProps =
   | "paddingTop"
   | "paddingBottom"
   | "primaryAxisAlignItems"
-  | "counterAxisAlignItems"
   | "primaryAxisSizingMode"
+  | "counterAxisAlignItems"
   | "counterAxisSizingMode"
   | "itemSpacing"
-  | "counterAxisSpacing";
-
-export interface NormalizedFrameNode
-  extends Pick<FigmaRestSpec.FrameNode, CommonProps | ShapeProps | RadiusProps | LayoutProps> {
-  children: NormalizedSceneNode[];
+  | "counterAxisSpacing"
+>;
+
+export type NormalizedDefaultShapeTrait = NormalizedIsLayerTrait &
+  NormalizedHasLayoutTrait &
+  NormalizedHasGeometryTrait;
+
+export type NormalizedFrameTrait = NormalizedIsLayerTrait &
+  NormalizedHasLayoutTrait &
+  NormalizedHasGeometryTrait &
+  NormalizedHasChildrenTrait &
+  NormalizedCornerTrait &
+  NormalizedHasFramePropertiesTrait;
+
+export interface NormalizedFrameNode extends NormalizedFrameTrait {
+  type: FigmaRestSpec.FrameNode["type"];
 }
 
 export interface NormalizedRectangleNode
-  extends Pick<FigmaRestSpec.RectangleNode, CommonProps | ShapeProps | RadiusProps> {}
+  extends NormalizedDefaultShapeTrait,
+    NormalizedCornerTrait {
+  type: FigmaRestSpec.RectangleNode["type"];
+}
+
+export interface NormalizedTextNode extends NormalizedDefaultShapeTrait {
+  type: FigmaRestSpec.TextNode["type"];
+
+  style: FigmaRestSpec.TextNode["style"];
+
+  characters: FigmaRestSpec.TextNode["characters"];
 
-export interface NormalizedTextNode
-  extends Pick<
-    FigmaRestSpec.TextNode,
-    CommonProps | "layoutGrow" | "layoutAlign" | "style" | "characters" | "fills"
-  > {
   segments: NormalizedTextSegment[];
+
   textStyleKey?: string;
 }
 
@@ -60,13 +97,13 @@ export interface NormalizedTextSegment {
   };
 }
 
-export interface NormalizedComponentNode
-  extends Pick<FigmaRestSpec.ComponentNode, CommonProps | ShapeProps | RadiusProps | LayoutProps> {
-  children: NormalizedSceneNode[];
+export interface NormalizedComponentNode extends NormalizedFrameTrait {
+  type: FigmaRestSpec.ComponentNode["type"];
 }
 
-export interface NormalizedInstanceNode
-  extends Pick<FigmaRestSpec.InstanceNode, CommonProps | ShapeProps | RadiusProps | LayoutProps> {
+export interface NormalizedInstanceNode extends NormalizedFrameTrait {
+  type: FigmaRestSpec.InstanceNode["type"];
+
   componentProperties: {
     [key: string]: FigmaRestSpec.ComponentProperty & { componentKey?: string };
   };
@@ -78,12 +115,22 @@ export interface NormalizedInstanceNode
   children: NormalizedSceneNode[];
 }
 
-export interface NormalizedVectorNode
-  extends Pick<FigmaRestSpec.VectorNode, CommonProps | ShapeProps> {}
+export interface NormalizedVectorNode extends NormalizedDefaultShapeTrait, NormalizedCornerTrait {
+  type: FigmaRestSpec.VectorNode["type"];
+}
 
 export interface NormalizedBooleanOperationNode
-  extends Pick<FigmaRestSpec.BooleanOperationNode, CommonProps | "fills"> {
-  children: NormalizedSceneNode[];
+  extends NormalizedIsLayerTrait,
+    NormalizedHasChildrenTrait,
+    NormalizedHasLayoutTrait,
+    NormalizedHasGeometryTrait {
+  type: FigmaRestSpec.BooleanOperationNode["type"];
+}
+
+export interface NormalizedUnhandledNode {
+  type: "UNHANDLED";
+  id: string;
+  original: FigmaRestSpec.Node | SceneNode;
 }
 
 export type NormalizedSceneNode =
@@ -93,4 +140,5 @@ export type NormalizedSceneNode =
   | NormalizedComponentNode
   | NormalizedInstanceNode
   | NormalizedVectorNode
-  | NormalizedBooleanOperationNode;
+  | NormalizedBooleanOperationNode
+  | NormalizedUnhandledNode;

package/src/utils/common.ts

@@ -1,3 +1,5 @@
+import { camelCase } from "change-case";
+
 export function ensureArray<T>(maybeArray: T | T[]): T[] {
   if (Array.isArray(maybeArray)) {
     return maybeArray;
@@ -13,3 +15,20 @@ export function exists<T>(value: T | null | undefined): value is T {
 export function compactObject<T extends Record<string, unknown>>(obj: T): T {
   return Object.fromEntries(Object.entries(obj).filter(([, value]) => value != null)) as T;
 }
+
+export function objectEntries<T extends Record<string, unknown>>(obj: T) {
+  return Object.entries(obj) as [keyof T, T[keyof T]][];
+}
+
+/**
+ * camelCase but preserve underscore between numbers.
+ * temporary workaround to avoid x1_5 -> x15
+ * @example "color-1_5" -> "color1_5"
+ */
+export function camelCasePreserveUnderscoreBetweenNumbers(input: string) {
+  return camelCase(input, {
+    mergeAmbiguousCharacters: false,
+  })
+    .replaceAll(/(\D)_(\d)/g, "$1$2")
+    .replaceAll(/(\d)_(\D)/g, "$1$2");
+}

package/src/utils/css.ts

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

package/src/utils/figma-variable.ts

@@ -0,0 +1,13 @@
+export function isVariableAlias(value: unknown): value is VariableAlias {
+  return (
+    typeof value === "object" &&
+    value !== null &&
+    "type" in value &&
+    value.type === "VARIABLE_ALIAS"
+  );
+}
+
+// boundVariable.id is formatted as "VariableID:{key}/{localId}", we have to extract the key
+export function sanitizeVariableId(id: string) {
+  return id.replace("VariableID:", "").split("/")[0]!;
+}

package/src/component/handlers/action-button.ts

@@ -1,66 +0,0 @@
-import { camelCase } from "change-case";
-import { match } from "ts-pattern";
-import * as metadata from "../../data/__generated__/component-sets";
-import { createIconTagNameFromKey } from "../../icon";
-import { createElement } from "../../jsx";
-import { handleSize } from "../properties";
-import type { ActionButtonProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-
-export const actionButtonHandler: ComponentHandler<ActionButtonProperties> = {
-  key: metadata.actionButton.key,
-  codegen: async ({ componentProperties: props }) => {
-    const states = props.State.value.split("-");
-
-    const { layout, children } = await match(props.Layout.value)
-      .with("Icon Only", async () => ({
-        layout: "iconOnly",
-        children: [
-          createElement("Icon", {
-            svg: createElement(createIconTagNameFromKey(props["Icon#7574:0"].componentKey)),
-          }),
-        ],
-      }))
-      .with("Icon First", async () => ({
-        layout: "withText",
-        children: [
-          createElement("PrefixIcon", {
-            svg: createElement(
-              createIconTagNameFromKey(props["Prefix Icon#5987:305"].componentKey),
-            ),
-          }),
-          props["Label#5987:61"].value,
-        ],
-      }))
-      .with("Icon Last", async () => ({
-        layout: "withText",
-        children: [
-          props["Label#5987:61"].value,
-          createElement("SuffixIcon", {
-            svg: createElement(
-              createIconTagNameFromKey(props["Suffix Icon#5987:244"].componentKey),
-            ),
-          }),
-        ],
-      }))
-      .with("Text Only", () => ({
-        layout: "withText",
-        children: props["Label#5987:61"].value,
-      }))
-      .exhaustive();
-
-    const commonProps = {
-      ...(states.includes("Disabled") && {
-        disabled: true,
-      }),
-      ...(states.includes("Loading") && {
-        loading: true,
-      }),
-      size: handleSize(props.Size.value),
-      variant: camelCase(props.Variant.value),
-      layout,
-    };
-
-    return createElement("ActionButton", commonProps, children);
-  },
-};

package/src/component/handlers/action-chip.ts

@@ -1,71 +0,0 @@
-import { match } from "ts-pattern";
-import * as metadata from "../../data/__generated__/component-sets";
-import { createIconTagNameFromKey } from "../../icon";
-import { createElement } from "../../jsx";
-import { handleSize } from "../properties";
-import type { ActionChipProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-
-export const actionChipHandler: ComponentHandler<ActionChipProperties> = {
-  key: metadata.actionChip.key,
-  codegen: async ({ componentProperties: props }) => {
-    const states = props.State.value.split("-");
-
-    const { layout, children } = await match(props.Layout.value)
-      .with("Icon Only", async () => ({
-        layout: "iconOnly",
-        children: [
-          createElement("Icon", {
-            svg: createElement(createIconTagNameFromKey(props["Icon#8714:0"].componentKey)),
-          }),
-        ],
-      }))
-      .with("Icon First", async () => ({
-        layout: "withText",
-        children: [
-          createElement("PrefixIcon", {
-            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#8711:0"].componentKey)),
-          }),
-          props["Label#7185:0"].value,
-        ],
-      }))
-      .with("Icon Last", async () => ({
-        layout: "withText",
-        children: [
-          props["Label#7185:0"].value,
-          createElement("SuffixIcon", {
-            svg: createElement(createIconTagNameFromKey(props["Suffix Icon#8711:3"].componentKey)),
-          }),
-        ],
-      }))
-      .with("Icon Both", async () => ({
-        layout: "withText",
-        children: [
-          createElement("PrefixIcon", {
-            svg: createElement(createIconTagNameFromKey(props["Prefix Icon#8711:0"].componentKey)),
-          }),
-          props["Label#7185:0"].value,
-          createElement("SuffixIcon", {
-            svg: createElement(createIconTagNameFromKey(props["Suffix Icon#8711:3"].componentKey)),
-          }),
-        ],
-      }))
-      .with("Text Only", () => ({
-        layout: "withText",
-        children: props["Label#7185:0"].value,
-      }))
-      .exhaustive();
-
-    const commonProps = {
-      size: handleSize(props.Size.value),
-      layout,
-      ...(states.includes("Disabled") && {
-        disabled: true,
-      }),
-      ...(props["Show Count#7185:42"].value && {
-        count: Number(props["Count#7185:21"].value),
-      }),
-    };
-    return createElement("ActionChip", commonProps, children);
-  },
-};

package/src/component/handlers/action-sheet.ts

@@ -1,74 +0,0 @@
-import { camelCase } from "change-case";
-import { match } from "ts-pattern";
-import * as metadata from "../../data/__generated__/component-sets";
-import { createElement } from "../../jsx";
-import { findAllInstances } from "../../utils/figma-node";
-import type { ActionSheetItemProperties, ActionSheetProperties } from "../type";
-import type { ComponentHandler } from "../type-helper";
-
-export const actionSheetHandler: ComponentHandler<ActionSheetProperties> = {
-  key: metadata.actionSheet.key,
-  codegen: async (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 = await findAllInstances<ActionSheetItemProperties>({
-      node,
-      key: actionSheetItemHandler.key,
-    });
-
-    const contentChildren = await Promise.all(items.map(actionSheetItemHandler.codegen));
-
-    const content = createElement(
-      "ActionSheetContent",
-      contentProps,
-      contentChildren,
-      contentProps.title
-        ? ""
-        : "title을 제공하지 않는 경우 aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
-    );
-
-    const trigger = createElement(
-      "ActionSheetTrigger",
-      { asChild: true },
-      createElement("ActionButton", undefined, "열기", "ActionSheet을 여는 요소를 제공해주세요."),
-    );
-
-    return createElement("ActionSheet", undefined, [trigger, content]);
-  },
-};
-
-const actionSheetItemHandler: ComponentHandler<ActionSheetItemProperties> = {
-  key: "c3cafd3a3fdcd45fecb6971019d88eaf39a2e381",
-  codegen: async ({ 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 createElement("ActionSheetItem", commonProps);
-  },
-};