@seed-design/figma 0.0.20 → 0.0.22

package/src/codegen/targets/react/value-resolver.ts

@@ -0,0 +1,35 @@
+import { createValueResolver, type ValueResolver } from "@/codegen/core";
+import { styleService, variableService } from "@/codegen/default-services";
+import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
+import { toCssPixel, toCssRgba } from "@/utils/css";
+import { camelCase } from "change-case";
+
+export type ReactValueResolver = ValueResolver<string, string, string, number>;
+
+export const valueResolver = createValueResolver({
+  variableService,
+  variableNameFormatter: ({ slug }) =>
+    slug
+      .filter(
+        (s) =>
+          !(
+            s === "dimension" ||
+            s === "radius" ||
+            s === "font-size" ||
+            s === "font-weight" ||
+            s === "line-height"
+          ),
+      )
+      .map((s) => s.replaceAll(",", "_"))
+      .map(camelCasePreserveUnderscoreBetweenNumbers)
+      .join("."),
+  styleService,
+  styleNameFormatter: ({ slug }) =>
+    camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
+  rawValueFormatters: {
+    color: (value: RGBA) => toCssRgba(value),
+    dimension: (value: number) => toCssPixel(value),
+    fontDimension: (value: number) => toCssPixel(value),
+    fontWeight: (value: number) => value,
+  },
+});

package/src/entities/icon.repository.ts

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

package/src/entities/icon.service.ts

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

package/src/entities/style.service.ts

@@ -1,18 +1,16 @@
 import type { StyleRepository } from "./style.repository";
 
 export interface StyleService {
-  getStyleName: (id: string) => string | undefined;
+  getSlug: (id: string) => string[] | undefined;
 }
 
 // TODO: inferStyleName 추가해야 함, rest api에서 style value가 제공되지 않고 있어 보류
 export function createStyleService({
   styleRepository,
-  styleNameTransformer,
 }: {
   styleRepository: StyleRepository;
-  styleNameTransformer: ({ slug }: { slug: string[] }) => string;
 }): StyleService {
-  function getFigmaStyleName(id: string) {
+  function getName(id: string) {
     const style = styleRepository.findOneByKey(id);
 
     if (!style) {
@@ -22,8 +20,8 @@ export function createStyleService({
     return style.name;
   }
 
-  function getFigmaStyleSlug(id: string): string[] | undefined {
-    const name = getFigmaStyleName(id);
+  function getSlug(id: string): string[] | undefined {
+    const name = getName(id);
 
     if (!name) {
       return undefined;
@@ -32,17 +30,7 @@ export function createStyleService({
     return name.split("/");
   }
 
-  function getStyleName(id: string) {
-    const slug = getFigmaStyleSlug(id);
-
-    if (!slug) {
-      return undefined;
-    }
-
-    return styleNameTransformer({ slug });
-  }
-
   return {
-    getStyleName,
+    getSlug,
   };
 }

package/src/entities/variable.service.ts

@@ -1,42 +1,41 @@
-import { isVariableAlias, sanitizeVariableId } from "@/utils/figma-variable";
+import {
+  isIdenticalVariableValue,
+  isInsideScope,
+  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: (value: VariableValueResolved, scope: VariableScope) => string | undefined;
+  getSlug: (id: string) => string[] | undefined;
+  resolveValue: (variable: Variable, mode: string) => VariableValueResolved;
+  infer: (value: VariableValueResolved, scope: VariableScope) => Variable | undefined;
 }
 
 export interface VariableServiceDeps {
   variableRepository: VariableRepository;
-  variableNameTransformer: ({ slug }: { slug: string[] }) => string;
-  inferCompareFunction: (name1: string, name2: string) => number;
+  inferCompareFunction: (a: Variable, b: Variable) => number;
 }
 
 export function createVariableService({
   variableRepository,
-  variableNameTransformer,
   inferCompareFunction,
 }: VariableServiceDeps): VariableService {
   const variables = variableRepository.getVariableList();
 
   // private
-  function getFigmaVariableName(key: string) {
+  function getName(key: string) {
     const sanitizedId = sanitizeVariableId(key);
     const variable = variableRepository.findVariableByKey(sanitizedId);
 
     if (!variable) {
-      return "UNKNOWN_VARIABLE";
+      return undefined;
     }
 
     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,
@@ -50,84 +49,53 @@ export function createVariableService({
     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}`);
-    }
+  // public
+  function getSlug(key: string): string[] | undefined {
+    const name = getName(key);
 
-    if (isVariableAlias(value)) {
-      return resolveVariableValue(value.id, mode);
+    if (!name) {
+      return undefined;
     }
 
-    return value;
+    return name.split("/");
   }
 
-  function isIdenticalVariableValue(value1: VariableValueResolved, value2: VariableValueResolved) {
-    if (typeof value1 !== typeof value2) {
-      return false;
-    }
+  function resolveValue(variable: Variable, mode: string): VariableValueResolved {
+    const value = variable.valuesByMode[mode];
 
-    if (typeof value1 === "string" || typeof value1 === "number" || typeof value1 === "boolean") {
-      return value1 === value2;
+    if (value === undefined) {
+      throw new Error(`Variable value not found: ${variable.id} ${mode}`);
     }
 
-    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
-    );
-  }
-
-  function isInsideScope(variable: Variable, scope: VariableScope) {
-    if (variable.scopes.includes("ALL_SCOPES")) {
-      return true;
-    }
+    if (isVariableAlias(value)) {
+      const resolvedVariable = variableRepository.findVariableById(value.id);
 
-    if (variable.scopes.includes("ALL_FILLS")) {
-      if (scope === "FRAME_FILL" || scope === "SHAPE_FILL" || scope === "TEXT_FILL") {
-        return true;
+      if (!resolvedVariable) {
+        throw new Error(`Variable not found: ${value.id}`);
       }
-    }
 
-    return variable.scopes.includes(scope);
-  }
+      return resolveValue(resolvedVariable, mode);
+    }
 
-  // public
-  function getVariableName(key: string) {
-    const slug = getFigmaVariableSlug(key);
-    return variableNameTransformer({ slug });
+    return value;
   }
 
-  function inferVariableName(value: VariableValueResolved, scope: VariableScope) {
+  function infer(value: VariableValueResolved, scope: VariableScope) {
     // NOTE: We assume that the variable is in the default mode or value is equal between all modes for simplicity.
     const inferredVariables = variables.filter(
       (variable) =>
         isInsideScope(variable, scope) &&
-        isIdenticalVariableValue(
-          resolveVariableValue(variable.id, getDefaultModeId(variable)),
-          value,
-        ),
-    );
-
-    const inferredVariableNames = inferredVariables.map((variable) =>
-      getVariableName(variable.key),
+        isIdenticalVariableValue(resolveValue(variable, getDefaultModeId(variable)), value),
     );
 
-    const sortedVariableNames = inferredVariableNames.sort(inferCompareFunction);
+    const sortedVariables = inferredVariables.sort(inferCompareFunction);
 
-    return sortedVariableNames[0];
+    return sortedVariables[0];
   }
 
   return {
-    getVariableName,
-    inferVariableName,
+    getSlug,
+    resolveValue,
+    infer,
   };
 }

package/src/normalizer/from-plugin.ts

@@ -206,6 +206,9 @@ export function createPluginNormalizer() {
         )) as ComponentNode;
         if (mainComponent) {
           componentProperties[key].componentKey = mainComponent.key;
+          if (mainComponent.parent?.type === "COMPONENT_SET") {
+            componentProperties[key].componentSetKey = mainComponent.parent.key;
+          }
         }
       }
     }

package/src/normalizer/from-rest.ts

@@ -184,6 +184,12 @@ export function createRestNormalizer(ctx: RestNormalizerContext) {
         if (mainComponent) {
           componentProperties[key].componentKey = mainComponent.key;
         }
+        const mainComponentSet = mainComponent.componentSetId
+          ? ctx.componentSets[mainComponent.componentSetId]
+          : undefined;
+        if (mainComponentSet) {
+          componentProperties[key].componentSetKey = mainComponentSet.key;
+        }
       }
     }
 

package/src/normalizer/types.ts

@@ -109,7 +109,10 @@ export interface NormalizedInstanceNode extends NormalizedFrameTrait {
   type: FigmaRestSpec.InstanceNode["type"];
 
   componentProperties: {
-    [key: string]: FigmaRestSpec.ComponentProperty & { componentKey?: string };
+    [key: string]: FigmaRestSpec.ComponentProperty & {
+      componentKey?: string;
+      componentSetKey?: string;
+    };
   };
 
   componentKey: string;

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 중 하나를 제공해야 합니다.",
-      );
-    },
-  );