@seed-design/figma 0.0.0-alpha-20260324091316

package/src/entities/icon.interface.ts

@@ -0,0 +1,5 @@
+export interface IconData {
+  name: string;
+  type: "monochrome" | "multicolor";
+  weight?: string;
+}

package/src/entities/icon.repository.ts

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

package/src/entities/icon.service.ts

@@ -0,0 +1,26 @@
+import type { IconData } from "./icon.interface";
+import type { IconRepository } from "./icon.repository";
+
+export interface IconService {
+  isAvailable: (componentKey: string) => boolean;
+  getOne: (componentKey: string) => IconData;
+}
+
+export function createIconService({
+  iconRepository,
+}: {
+  iconRepository: IconRepository;
+}): IconService {
+  function isAvailable(componentKey: string) {
+    return iconRepository.getOne(componentKey) !== undefined;
+  }
+
+  function getOne(componentKey: string) {
+    return iconRepository.getOne(componentKey);
+  }
+
+  return {
+    isAvailable,
+    getOne,
+  };
+}

package/src/entities/index.ts

@@ -0,0 +1,60 @@
+import { createStaticIconRepository } from "./icon.repository";
+import { createStaticStyleRepository } from "./style.repository";
+import { createStaticVariableRepository } from "./variable.repository";
+import { createStaticComponentRepository } from "./component.repository";
+import { FIGMA_ICONS } from "./data/__generated__/icons";
+
+// Archive
+import { FIGMA_STYLES as FIGMA_STYLES_ARCHIVE } from "./data/__generated__/archive/styles";
+import { FIGMA_VARIABLE_COLLECTIONS as FIGMA_VARIABLE_COLLECTIONS_ARCHIVE } from "./data/__generated__/archive/variable-collections";
+import { FIGMA_VARIABLES as FIGMA_VARIABLES_ARCHIVE } from "./data/__generated__/archive/variables";
+import * as FIGMA_COMPONENTS_ARCHIVE from "./data/__generated__/archive/component-sets";
+
+// Current
+import { FIGMA_STYLES } from "./data/__generated__/styles";
+import { FIGMA_VARIABLE_COLLECTIONS } from "./data/__generated__/variable-collections";
+import { FIGMA_VARIABLES } from "./data/__generated__/variables";
+import * as FIGMA_COMPONENTS from "./data/__generated__/component-sets";
+
+export * from "./icon.interface";
+export * from "./icon.repository";
+export * from "./icon.service";
+export * from "./style.interface";
+export * from "./style.repository";
+export * from "./style.service";
+export * from "./variable.interface";
+export * from "./variable.repository";
+export * from "./variable.service";
+export * from "./component.interface";
+export * from "./component.repository";
+
+export const styleRepository = createStaticStyleRepository([
+  ...FIGMA_STYLES_ARCHIVE,
+  ...FIGMA_STYLES,
+]);
+export const variableRepository = createStaticVariableRepository({
+  variables: { ...FIGMA_VARIABLES_ARCHIVE, ...FIGMA_VARIABLES },
+  variableCollections: { ...FIGMA_VARIABLE_COLLECTIONS_ARCHIVE, ...FIGMA_VARIABLE_COLLECTIONS },
+});
+export const iconRepository = createStaticIconRepository(FIGMA_ICONS);
+export const componentRepository = createStaticComponentRepository({
+  ...FIGMA_COMPONENTS_ARCHIVE,
+  ...FIGMA_COMPONENTS,
+});
+
+export function getFigmaVariableKey(name: string) {
+  return variableRepository.findVariableByName(name)?.key;
+}
+
+export function getFigmaStyleKey(name: string) {
+  return styleRepository.findOneByName(name)?.key;
+}
+
+export function getFigmaColorVariableNames(scopes: Array<"fg" | "bg" | "stroke" | "palette">) {
+  const variables = variableRepository.getVariableList();
+  return variables
+    .filter((variable) =>
+      scopes.includes(variable.name.split("/")[0] as "fg" | "bg" | "stroke" | "palette"),
+    )
+    .map((variable) => variable.name);
+}

package/src/entities/style.interface.ts

@@ -0,0 +1,5 @@
+import type { Style as FigmaStyle, StyleType as FigmaStyleType } from "@figma/rest-api-spec";
+
+export type Style = FigmaStyle;
+
+export type StyleType = FigmaStyleType;

package/src/entities/style.repository.ts

@@ -0,0 +1,27 @@
+import type { Style } from "./style.interface";
+
+export interface StyleRepository {
+  getAll(): Style[];
+  getTextStyles(): Style[];
+  getColorStyles(): Style[];
+  findOneByKey(key: string): Style | undefined;
+  findOneByName(name: string): Style | undefined;
+}
+
+export function createStaticStyleRepository(styles: Style[]): StyleRepository {
+  const stylesMap = new Map<string, Style>();
+  const stylesNameMap = new Map<string, Style>();
+
+  for (const style of styles) {
+    stylesMap.set(style.key, style);
+    stylesNameMap.set(style.name, style);
+  }
+
+  return {
+    getAll: () => styles,
+    getTextStyles: () => styles.filter((style) => style.styleType === "TEXT"),
+    getColorStyles: () => styles.filter((style) => style.styleType === "FILL"),
+    findOneByKey: (key) => stylesMap.get(key),
+    findOneByName: (name) => stylesNameMap.get(name),
+  };
+}

package/src/entities/style.service.ts

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

package/src/entities/variable.interface.ts

@@ -0,0 +1,18 @@
+import type {
+  LocalVariable,
+  LocalVariableCollection,
+  VariableAlias,
+  VariableResolvedDataType,
+} from "@figma/rest-api-spec";
+
+export type Variable = LocalVariable;
+
+export type VariableCollection = LocalVariableCollection;
+
+export type VariableType = VariableResolvedDataType;
+
+export type VariableValue = Variable["valuesByMode"][string];
+
+export type VariableValueResolved = Exclude<VariableValue, VariableAlias>;
+
+export type { VariableScope } from "@figma/rest-api-spec";

package/src/entities/variable.repository.ts

@@ -0,0 +1,57 @@
+import type { Variable, VariableCollection } from "./variable.interface";
+
+export interface VariableRepository {
+  getVariableList(): Variable[];
+  getVariableCollectionList(): VariableCollection[];
+  findVariableByKey(key: string): Variable | undefined;
+  findVariableById(id: string): Variable | undefined;
+  findVariableByName(name: string): Variable | undefined;
+  findVariableCollectionByKey(key: string): VariableCollection | undefined;
+  findVariableCollectionById(id: string): VariableCollection | undefined;
+}
+
+export function createStaticVariableRepository({
+  variables,
+  variableCollections,
+}: {
+  variables: Record<string, Variable>;
+  variableCollections: Record<string, VariableCollection>;
+}): VariableRepository {
+  const variablesKeyMap = new Map<string, Variable>();
+  const variablesIdMap = new Map<string, Variable>();
+  const variablesNameMap = new Map<string, Variable>();
+  const variableCollectionsKeyMap = new Map<string, VariableCollection>();
+  const variableCollectionsIdMap = new Map<string, VariableCollection>();
+
+  for (const variable of Object.values(variables)) {
+    if (variable.remote) {
+      continue;
+    }
+
+    variablesKeyMap.set(variable.key, variable);
+    variablesIdMap.set(variable.id, variable);
+    variablesNameMap.set(variable.name, variable);
+  }
+
+  for (const variableCollection of Object.values(variableCollections)) {
+    if (variableCollection.remote) {
+      continue;
+    }
+
+    variableCollectionsKeyMap.set(variableCollection.key, variableCollection);
+    variableCollectionsIdMap.set(variableCollection.id, variableCollection);
+  }
+
+  const variablesList = [...variablesKeyMap.values()];
+  const variableCollectionsList = [...variableCollectionsKeyMap.values()];
+
+  return {
+    getVariableList: () => variablesList,
+    getVariableCollectionList: () => variableCollectionsList,
+    findVariableByName: (name: string) => variablesNameMap.get(name),
+    findVariableByKey: (key: string) => variablesKeyMap.get(key),
+    findVariableById: (id: string) => variablesIdMap.get(id),
+    findVariableCollectionByKey: (key: string) => variableCollectionsKeyMap.get(key),
+    findVariableCollectionById: (id: string) => variableCollectionsIdMap.get(id),
+  };
+}

package/src/entities/variable.service.ts

@@ -0,0 +1,101 @@
+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 {
+  getSlug: (id: string) => string[] | undefined;
+  resolveValue: (variable: Variable, mode: string) => VariableValueResolved;
+  infer: (value: VariableValueResolved, scope: VariableScope) => Variable | undefined;
+}
+
+export interface VariableServiceDeps {
+  variableRepository: VariableRepository;
+  inferCompareFunction: (a: Variable, b: Variable) => number;
+}
+
+export function createVariableService({
+  variableRepository,
+  inferCompareFunction,
+}: VariableServiceDeps): VariableService {
+  const variables = variableRepository.getVariableList();
+
+  // private
+  function getName(key: string) {
+    const sanitizedId = sanitizeVariableId(key);
+    const variable = variableRepository.findVariableByKey(sanitizedId);
+
+    if (!variable) {
+      return undefined;
+    }
+
+    return variable.name;
+  }
+
+  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;
+  }
+
+  // public
+  function getSlug(key: string): string[] | undefined {
+    const name = getName(key);
+
+    if (!name) {
+      return undefined;
+    }
+
+    return name.split("/");
+  }
+
+  function resolveValue(variable: Variable, mode: string): VariableValueResolved {
+    const value = variable.valuesByMode[mode];
+
+    if (value === undefined) {
+      throw new Error(`Variable value not found: ${variable.id} ${mode}`);
+    }
+
+    if (isVariableAlias(value)) {
+      const resolvedVariable = variableRepository.findVariableById(value.id);
+
+      if (!resolvedVariable) {
+        throw new Error(`Variable not found: ${value.id}`);
+      }
+
+      return resolveValue(resolvedVariable, mode);
+    }
+
+    return value;
+  }
+
+  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(resolveValue(variable, getDefaultModeId(variable)), value),
+    );
+
+    const sortedVariables = inferredVariables.sort(inferCompareFunction);
+
+    return sortedVariables[0];
+  }
+
+  return {
+    getSlug,
+    resolveValue,
+    infer,
+  };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./normalizer";
+export * from "./codegen";
+export * from "./entities";