@seed-design/figma 0.0.21 → 0.0.23

package/src/utils/figma-variable.ts

@@ -1,3 +1,10 @@
+import type { VariableScope } from "@figma/rest-api-spec";
+
+// 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]!;
+}
+
 export function isVariableAlias(value: unknown): value is VariableAlias {
   return (
     typeof value === "object" &&
@@ -7,7 +14,36 @@ export function isVariableAlias(value: unknown): value is VariableAlias {
   );
 }
 
-// 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]!;
+export function isIdenticalVariableValue(
+  value1: string | number | boolean | RGBA,
+  value2: string | number | boolean | RGBA,
+) {
+  if (typeof value1 !== typeof value2) {
+    return false;
+  }
+
+  if (typeof value1 === "string" || typeof value1 === "number" || typeof value1 === "boolean") {
+    return value1 === value2;
+  }
+
+  return (
+    value1.r === (value2 as RGBA).r &&
+    value1.g === (value2 as RGBA).g &&
+    value1.b === (value2 as RGBA).b &&
+    value1.a === (value2 as RGBA).a
+  );
+}
+
+export function isInsideScope(variable: { scopes: VariableScope[] }, scope: VariableScope) {
+  if (variable.scopes.includes("ALL_SCOPES")) {
+    return true;
+  }
+
+  if (variable.scopes.includes("ALL_FILLS")) {
+    if (scope === "FRAME_FILL" || scope === "SHAPE_FILL" || scope === "TEXT_FILL") {
+      return true;
+    }
+  }
+
+  return variable.scopes.includes(scope);
 }

package/src/codegen/core/component.types.ts

@@ -1,29 +0,0 @@
-export interface ComponentPropertyDefinition {
-  type: ComponentPropertyType;
-  preferredValues?: InstanceSwapPreferredValue[];
-  variantOptions?: string[];
-}
-
-export type InferPropertyType<T extends ComponentPropertyDefinition> = T["type"] extends "TEXT"
-  ? string
-  : T["type"] extends "BOOLEAN"
-    ? boolean
-    : T["type"] extends "INSTANCE_SWAP"
-      ? string
-      : T["type"] extends "VARIANT"
-        ? T["variantOptions"] extends string[]
-          ? T["variantOptions"][number]
-          : never
-        : never;
-
-export type InferFromDefinition<T extends Record<string, ComponentPropertyDefinition>> = {
-  [K in keyof T]: {
-    type: T[K]["type"];
-    value: InferPropertyType<T[K]>;
-    componentKey?: string;
-    preferredValues?: InstanceSwapPreferredValue[];
-    readonly boundVariables?: {
-      [field in VariableBindableComponentPropertyField]?: VariableAlias;
-    };
-  };
-};

package/src/codegen/targets/figma/context.ts

@@ -1,139 +0,0 @@
-import { createCodegenTransformer, createValueTransformer } from "@/codegen/core";
-import {
-  createStyleService,
-  createVariableService,
-  styleRepository,
-  variableRepository,
-} from "@/entities";
-import { toCssRgba } from "@/utils/css";
-import { createFrameTransformer } from "./frame";
-import { createInstanceTransformer } from "./instance";
-import {
-  createContainerLayoutPropsTransformer,
-  createFrameFillPropsTransformer,
-  createRadiusPropsTransformer,
-  createSelfLayoutPropsTransformer,
-  createShapeFillPropsTransformer,
-  createStrokePropsTransformer,
-  createTextFillPropsTransformer,
-  createTypeStylePropsTransformer,
-} from "./props";
-import {
-  createBooleanOperationTransformer,
-  createRectangleTransformer,
-  createVectorTransformer,
-} from "./shape";
-import { createTextTransformer } from "./text";
-
-export interface CreateContextOptions {
-  ignoredComponentKeys?: Set<string>;
-  shouldInferVariableName: boolean;
-  shouldInferAutoLayout: boolean;
-}
-
-const styleService = createStyleService({
-  styleRepository,
-  styleNameTransformer: ({ slug }) => slug[slug.length - 1]!,
-});
-const variableService = createVariableService({
-  variableRepository,
-  variableNameTransformer: ({ slug }) =>
-    slug
-      .filter((s) => s !== "dimension")
-      .map((s) => s.replaceAll(",", "_"))
-      .join("/"),
-  inferCompareFunction: (name1: string, name2: string) => {
-    const scoreFn = (name: string) => {
-      let score = 0;
-      if (name.includes("bg")) {
-        score += 100;
-      }
-      if (name.includes("fg")) {
-        score += 100;
-      }
-      if (name.includes("stroke")) {
-        score += 100;
-      }
-      if (name.includes("spacing-x")) {
-        score -= 100;
-      }
-      if (name.includes("spacing-y")) {
-        score -= 100;
-      }
-      if (name.endsWith("pressed")) {
-        score -= 100;
-      }
-      return score;
-    };
-
-    return scoreFn(name2) - scoreFn(name1);
-  },
-});
-
-export function createContext(options: CreateContextOptions) {
-  const { shouldInferVariableName, shouldInferAutoLayout } = options;
-
-  const valueTransformer = createValueTransformer({
-    variableService,
-    formatters: {
-      color: (value: RGBA) => toCssRgba(value),
-      dimension: (value: number) => value,
-      fontDimension: (value: number) => value,
-      fontWeight: (value: number) => value,
-    },
-    shouldInferVariableName,
-  });
-
-  const containerLayoutPropsTransformer = createContainerLayoutPropsTransformer(valueTransformer);
-  const selfLayoutPropsTransformer = createSelfLayoutPropsTransformer(valueTransformer);
-  const frameFillPropsTransformer = createFrameFillPropsTransformer(valueTransformer);
-  const shapeFillPropsTransformer = createShapeFillPropsTransformer(valueTransformer);
-  const textFillPropsTransformer = createTextFillPropsTransformer(valueTransformer);
-  const radiusPropsTransformer = createRadiusPropsTransformer(valueTransformer);
-  const strokePropsTransformer = createStrokePropsTransformer(valueTransformer);
-  const typeStylePropsTransformer = createTypeStylePropsTransformer({
-    valueTransformer,
-    styleService,
-  });
-  const propsTransformers = {
-    containerLayout: containerLayoutPropsTransformer,
-    selfLayout: selfLayoutPropsTransformer,
-    frameFill: frameFillPropsTransformer,
-    shapeFill: shapeFillPropsTransformer,
-    textFill: textFillPropsTransformer,
-    radius: radiusPropsTransformer,
-    stroke: strokePropsTransformer,
-    typeStyle: typeStylePropsTransformer,
-  };
-
-  const frameTransformer = createFrameTransformer({
-    propsTransformers,
-  });
-  const instanceTransformer = createInstanceTransformer({
-    frameTransformer,
-  });
-  const textTransformer = createTextTransformer({
-    propsTransformers,
-  });
-  const rectangleTransformer = createRectangleTransformer({
-    propsTransformers,
-  });
-  const vectorTransformer = createVectorTransformer({
-    propsTransformers,
-  });
-  const booleanOperationTransformer = createBooleanOperationTransformer({
-    propsTransformers,
-  });
-
-  const codegenTransformer = createCodegenTransformer({
-    frameTransformer,
-    textTransformer,
-    rectangleTransformer,
-    instanceTransformer,
-    vectorTransformer,
-    booleanOperationTransformer,
-    shouldInferAutoLayout,
-  });
-
-  return codegenTransformer;
-}

package/src/codegen/targets/react/component/transformers/avatar-stack.ts

@@ -1,29 +0,0 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { findAllInstances } from "@/utils/figma-node";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { AvatarProperties, AvatarStackProperties } from "../properties.type";
-import { createAvatarTransformer } from "./avatar";
-
-export const createAvatarStackTransformer = (ctx: SeedComponentTransformerDeps) => {
-  const avatarTransformer = createAvatarTransformer(ctx);
-
-  return defineComponentTransformer<AvatarStackProperties>(metadata.avatarStack.key, (node) => {
-    const avatarNodes = findAllInstances<AvatarProperties>({
-      node,
-      key: avatarTransformer.key,
-    });
-
-    const { componentProperties: props } = node;
-
-    const commonProps = {
-      size: props.Size.value,
-      // TODO: 구현될 예정
-      // topItem: camelCase(props["Top Item"].value),
-    };
-
-    const avatarStackChildren = avatarNodes.map(avatarTransformer.transform);
-
-    return createElement("AvatarStack", commonProps, avatarStackChildren);
-  });
-};

package/src/codegen/targets/react/component/transformers/badge.ts

@@ -1,21 +0,0 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { BadgeProperties } from "../properties.type";
-import { handleSizeProp } from "../size";
-
-export const createBadgeTransformer = (_ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<BadgeProperties>(
-    metadata.badge.key,
-    ({ componentProperties: props }) => {
-      const commonProps = {
-        size: handleSizeProp(props.Size.value),
-        tone: camelCase(props.Tone.value),
-        variant: camelCase(props.Variant.value),
-        shape: camelCase(props.Shape.value),
-      };
-
-      return createElement("Badge", commonProps, props["Label#1584:0"].value);
-    },
-  );

package/src/codegen/targets/react/component/transformers/fab.ts

@@ -1,18 +0,0 @@
-import { defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { createElement } from "@/codegen/core";
-import type { FabProperties } from "../properties.type";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-
-export const createFabTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<FabProperties>(
-    metadata.floatingActionButton.key,
-    ({ componentProperties: props }) => {
-      return createElement(
-        "Fab",
-        undefined,
-        createElement(ctx.iconService.createIconTagName(props["Icon#28796:0"].componentKey)),
-        "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.",
-      );
-    },
-  );

package/src/codegen/targets/react/component/transformers/skeleton.ts

@@ -1,51 +0,0 @@
-import { createElement, defineComponentTransformer } from "@/codegen/core";
-import * as metadata from "@/entities/data/__generated__/component-sets";
-import { camelCase } from "change-case";
-import type { SeedComponentTransformerDeps } from "../deps.interface";
-import type { SkeletonProperties } from "../properties.type";
-
-export const createSkeletonTransformer = (ctx: SeedComponentTransformerDeps) =>
-  defineComponentTransformer<SkeletonProperties>(
-    metadata.skeleton.key,
-    ({
-      componentProperties: props,
-      absoluteBoundingBox,
-      layoutSizingHorizontal,
-      layoutSizingVertical,
-      boundVariables,
-    }) => {
-      const commonProps = {
-        radius: camelCase(props.Radius.value),
-        width: (() => {
-          switch (layoutSizingHorizontal) {
-            case "FIXED": {
-              const variableId = boundVariables?.size?.x?.id;
-              if (variableId) return ctx.variableService.getVariableName(variableId);
-
-              return `${absoluteBoundingBox?.width}px`;
-            }
-            case "FILL":
-              return "full";
-            default:
-              return "full";
-          }
-        })(),
-        height: (() => {
-          switch (layoutSizingVertical) {
-            case "FIXED": {
-              const variableId = boundVariables?.size?.y?.id;
-              if (variableId) return ctx.variableService.getVariableName(variableId);
-
-              return `${absoluteBoundingBox?.height}px`;
-            }
-            case "FILL":
-              return "full";
-            default:
-              return "full";
-          }
-        })(),
-      };
-
-      return createElement("Skeleton", commonProps);
-    },
-  );

package/src/codegen/targets/react/context.ts

@@ -1,176 +0,0 @@
-import { createCodegenTransformer, createValueTransformer } from "@/codegen/core";
-import {
-  createIconService,
-  createStyleService,
-  createVariableService,
-  iconRepository,
-  styleRepository,
-  variableRepository,
-} from "@/entities";
-import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
-import { toCssPixel, toCssRgba } from "@/utils/css";
-import { camelCase } from "change-case";
-import { createSeedComponentTransformers } from "./component";
-import { createFrameTransformer } from "./frame";
-import { createInstanceTransformer } from "./instance";
-import {
-  createContainerLayoutPropsTransformer,
-  createFrameFillPropsTransformer,
-  createIconSelfLayoutPropsTransformer,
-  createRadiusPropsTransformer,
-  createSelfLayoutPropsTransformer,
-  createShapeFillPropsTransformer,
-  createStrokePropsTransformer,
-  createTextFillPropsTransformer,
-  createTypeStylePropsTransformer,
-} from "./props";
-import {
-  createBooleanOperationTransformer,
-  createRectangleTransformer,
-  createVectorTransformer,
-} from "./shape";
-import { createTextTransformer } from "./text";
-
-const IGNORED_COMPONENT_KEYS = new Set<string>([
-  "1acdc7247c83a73a0504d6fad86d08783938cb1a",
-  "b38b719b61cdf1a24458d7a7888bee74b7649084",
-]);
-
-export interface CreateContextOptions {
-  ignoredComponentKeys?: Set<string>;
-  shouldInferVariableName: boolean;
-  shouldInferAutoLayout: boolean;
-}
-
-const styleService = createStyleService({
-  styleRepository,
-  styleNameTransformer: ({ slug }) =>
-    camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
-});
-const variableService = createVariableService({
-  variableRepository,
-  variableNameTransformer: ({ slug }) =>
-    slug
-      .filter(
-        (s) =>
-          !(
-            s === "dimension" ||
-            s === "radius" ||
-            s === "font-size" ||
-            s === "font-weight" ||
-            s === "line-height"
-          ),
-      )
-      .map((s) => s.replaceAll(",", "_"))
-      .map(camelCasePreserveUnderscoreBetweenNumbers)
-      .join("."),
-  inferCompareFunction: (name1: string, name2: string) => {
-    const scoreFn = (name: string) => {
-      let score = 0;
-      if (name.includes("bg")) {
-        score += 100;
-      }
-      if (name.includes("fg")) {
-        score += 100;
-      }
-      if (name.includes("stroke")) {
-        score += 100;
-      }
-      if (name.includes("spacing-x")) {
-        score -= 100;
-      }
-      if (name.includes("spacing-y")) {
-        score -= 100;
-      }
-      if (name.endsWith("pressed")) {
-        score -= 100;
-      }
-      return score;
-    };
-
-    return scoreFn(name2) - scoreFn(name1);
-  },
-});
-const iconService = createIconService({
-  iconRepository,
-});
-
-// TODO: implement figma component service
-const componentTransformers = createSeedComponentTransformers({
-  iconService,
-  variableService,
-});
-
-export function createContext(options: CreateContextOptions) {
-  const {
-    ignoredComponentKeys = IGNORED_COMPONENT_KEYS,
-    shouldInferVariableName,
-    shouldInferAutoLayout,
-  } = options;
-
-  const valueTransformer = createValueTransformer({
-    variableService,
-    formatters: {
-      color: (value: RGBA) => toCssRgba(value),
-      dimension: (value: number) => toCssPixel(value),
-      fontDimension: (value: number) => toCssPixel(value),
-      fontWeight: (value: number) => value,
-    },
-    shouldInferVariableName,
-  });
-
-  const containerLayoutPropsTransformer = createContainerLayoutPropsTransformer(valueTransformer);
-  const selfLayoutPropsTransformer = createSelfLayoutPropsTransformer(valueTransformer);
-  const iconSelfLayoutPropsTransformer = createIconSelfLayoutPropsTransformer(valueTransformer);
-  const frameFillPropsTransformer = createFrameFillPropsTransformer(valueTransformer);
-  const shapeFillPropsTransformer = createShapeFillPropsTransformer(valueTransformer);
-  const textFillPropsTransformer = createTextFillPropsTransformer(valueTransformer);
-  const radiusPropsTransformer = createRadiusPropsTransformer(valueTransformer);
-  const strokePropsTransformer = createStrokePropsTransformer(valueTransformer);
-  const typeStylePropsTransformer = createTypeStylePropsTransformer({
-    valueTransformer,
-    styleService,
-  });
-  const propsTransformers = {
-    containerLayout: containerLayoutPropsTransformer,
-    selfLayout: selfLayoutPropsTransformer,
-    iconSelfLayout: iconSelfLayoutPropsTransformer,
-    frameFill: frameFillPropsTransformer,
-    shapeFill: shapeFillPropsTransformer,
-    textFill: textFillPropsTransformer,
-    radius: radiusPropsTransformer,
-    stroke: strokePropsTransformer,
-    typeStyle: typeStylePropsTransformer,
-  };
-
-  const frameTransformer = createFrameTransformer({
-    propsTransformers,
-  });
-  const instanceTransformer = createInstanceTransformer({
-    iconService,
-    ignoredComponentKeys,
-    propsTransformers,
-    componentTransformers,
-    frameTransformer,
-  });
-  const textTransformer = createTextTransformer({
-    propsTransformers,
-  });
-  const rectangleTransformer = createRectangleTransformer({
-    propsTransformers,
-  });
-  const vectorTransformer = createVectorTransformer();
-  const booleanOperationTransformer = createBooleanOperationTransformer();
-
-  const codegenTransformer = createCodegenTransformer({
-    frameTransformer,
-    textTransformer,
-    rectangleTransformer,
-    instanceTransformer,
-    vectorTransformer,
-    booleanOperationTransformer,
-    shouldInferAutoLayout,
-  });
-
-  return codegenTransformer;
-}