@seed-design/figma 0.0.2 → 0.0.5

package/src/codegen/domain/seed-component/transformers/tabs.ts

@@ -0,0 +1,129 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import type { NormalizedInstanceNode } from "../../../../normalizer";
+import { handleSizeProp } from "../size";
+import type {
+  TabsFillItemProperties,
+  TabsHugItemProperties,
+  TabsProperties,
+} from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+const TABS_HUG_ITEM_KEY = "c242492543b327ceb84fa9933841512fc62a898c";
+const createTabsHugItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<TabsHugItemProperties>(
+    TABS_HUG_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        value: props["Label#4478:2"].value,
+        ...(props.Notification.value === "True" && {
+          alert: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+    },
+  );
+
+const TABS_FILL_ITEM_KEY = "7275293344efb40ee9a3f5248ba2659b94a0b305";
+const createTabsFillItemTransformer = (_ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<TabsFillItemProperties>(
+    TABS_FILL_ITEM_KEY,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        value: props["Label#4478:2"].value,
+        ...(props.Notification.value === "True" && {
+          alert: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+      };
+
+      return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
+    },
+  );
+
+export const createTabsTransformer = (ctx: SeedComponentTransformerDeps) => {
+  const tabsHugItemTransformer = createTabsHugItemTransformer(ctx);
+  const tabsFillItemTransformer = createTabsFillItemTransformer(ctx);
+
+  return defineComponentTransformer<TabsProperties>(metadata.tablist.key, (node) => {
+    const { componentProperties: props, children } = node;
+
+    const mappedItems = children.map(
+      (
+        child,
+      ): {
+        triggerLayout: "hug" | "fill";
+        node: NormalizedInstanceNode & {
+          componentProperties: TabsHugItemProperties | TabsFillItemProperties;
+        };
+      } | null => {
+        if (child.type !== "INSTANCE") return null;
+
+        const componentKey = child.componentSetKey ? child.componentSetKey : child.componentKey;
+
+        if (componentKey === tabsHugItemTransformer.key)
+          return {
+            triggerLayout: "hug" as const,
+            node: child as NormalizedInstanceNode & { componentProperties: TabsHugItemProperties },
+          };
+
+        if (componentKey === tabsFillItemTransformer.key)
+          return {
+            triggerLayout: "fill" as const,
+            node: child as NormalizedInstanceNode & { componentProperties: TabsFillItemProperties },
+          };
+
+        return null;
+      },
+    );
+
+    const tabsItems = mappedItems.filter(
+      (item): item is NonNullable<(typeof mappedItems)[number]> => item !== null,
+    );
+
+    const selectedTabsItem = tabsItems.find(({ node: { componentProperties } }) =>
+      componentProperties.State.value.split("-").includes("Selected"),
+    )?.node;
+
+    const tabTriggerList = createElement(
+      "TabsList",
+      undefined,
+      tabsItems.map(({ triggerLayout, node }) => {
+        switch (triggerLayout) {
+          case "hug":
+            return tabsHugItemTransformer.transform(node);
+          case "fill":
+            return tabsFillItemTransformer.transform(node);
+        }
+      }),
+    );
+
+    const tabContents = tabsItems.map(({ node }) => {
+      const value = node.componentProperties["Label#4478:2"].value;
+
+      return createElement("TabsContent", { value }, "{/* TODO: 컨텐츠 추가 */}");
+    });
+
+    const commonProps = {
+      triggerLayout: camelCase(props.Layout.value),
+      size: handleSizeProp(props.Size.value),
+      ...(selectedTabsItem && {
+        defaultValue: selectedTabsItem.componentProperties["Label#4478:2"].value,
+      }),
+    };
+
+    return createElement("TabsRoot", commonProps, [tabTriggerList, ...tabContents]);
+  });
+};

package/src/codegen/domain/seed-component/transformers/text-button.ts

@@ -0,0 +1,55 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import { match } from "ts-pattern";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { findOne } from "../../../../utils/figma-node";
+import type { NormalizedInstanceNode } from "../../../../normalizer";
+import { handleSizeProp } from "../size";
+import type { TextButtonProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createTextButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<TextButtonProperties>(metadata.textButton.key, (node) => {
+    const { componentProperties: props } = node;
+
+    const states = props.State.value.split("-");
+
+    const { prefixIcon, suffixIcon, children } = match(props.Layout.value)
+      .with("Icon First", () => ({
+        prefixIcon: createElement(
+          ctx.iconService.createIconTagName(props["Prefix Icon#7561:0"].componentKey),
+        ),
+        suffixIcon: undefined,
+        children: props["Label#6148:0"].value,
+      }))
+      .with("Icon Last", () => {
+        const suffixIconNode = findOne(
+          node,
+          (node) => node.type === "INSTANCE" && node.name === "Suffix Icon",
+        ) as NormalizedInstanceNode | null;
+
+        const suffixIconComponentKey = suffixIconNode?.componentKey;
+
+        return {
+          prefixIcon: undefined,
+          suffixIcon: suffixIconComponentKey
+            ? createElement(ctx.iconService.createIconTagName(suffixIconComponentKey))
+            : undefined,
+          children: props["Label#6148:0"].value,
+        };
+      })
+      .exhaustive();
+
+    const commonProps = {
+      tone: camelCase(props.Tone.value),
+      size: handleSizeProp(props.Size.value),
+      prefixIcon,
+      suffixIcon,
+      ...(states.includes("Disabled") && {
+        disabled: true,
+      }),
+    };
+
+    return createElement("TextButton", commonProps, children);
+  });

package/src/codegen/domain/seed-component/transformers/text-field.ts

@@ -0,0 +1,109 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { TextFieldProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createTextFieldTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<TextFieldProperties>(
+    metadata.textField.key,
+    ({ componentProperties: props }) => {
+      const {
+        Size: { value: size },
+        State: { value: state },
+        Filled: { value: filled },
+        "Show Header#870:0": { value: showHeader },
+        "Label#14964:0": { value: label },
+        "Show Indicator#1259:0": { value: showIndicator },
+        "Indicator#15327:249": { value: indicator },
+        "Show Prefix#958:125": { value: showPrefix },
+        "Show Prefix Icon#1267:50": { value: showPrefixIcon },
+        "Prefix Icon#1267:25": { value: prefixIcon },
+        "Show Prefix Text#1267:0": { value: showPrefixText },
+        "Prefix Text#15327:101": { value: prefix },
+        "Placeholder#958:0": { value: placeholder },
+        "Filled Text#1304:0": { value: defaultValue },
+        "Show Suffix#958:100": { value: showSuffix },
+        "Show Suffix Icon#1267:75": { value: showSuffixIcon },
+        "Suffix Icon #1267:100": { value: suffixIcon },
+        "Show Suffix Text#1267:125": { value: showSuffixText },
+        "Suffix Text#15327:138": { value: suffix },
+        "Show Footer#958:25": { value: showFooter },
+        "Show Description#958:50": { value: showDescription },
+        "Description#12626:5": { value: description },
+        "Show Character Count#958:75": { value: showCharacterCount },
+        "Character Count#15327:64": { value: _characterCount },
+        "Max Character Count#15327:27": { value: maxCharacterCount },
+      } = props;
+
+      const states = state.split("-");
+
+      const commonProps = {
+        size: handleSizeProp(size),
+        // header
+        ...(showHeader && {
+          label,
+        }),
+        ...(showHeader &&
+          showIndicator && {
+            indicator,
+          }),
+        // input affixes
+        ...(showPrefix &&
+          showPrefixIcon && {
+            prefixIcon: createElement(ctx.iconService.createIconTagName(prefixIcon)),
+          }),
+        ...(showPrefix &&
+          showPrefixText && {
+            prefix,
+          }),
+        ...(showSuffix &&
+          showSuffixIcon && {
+            suffixIcon: createElement(ctx.iconService.createIconTagName(suffixIcon)),
+          }),
+        ...(showSuffix &&
+          showSuffixText && {
+            suffix,
+          }),
+        // input
+        ...(filled === "True" && {
+          defaultValue,
+        }),
+        ...(states.includes("Invalid") && {
+          invalid: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Read Only") && {
+          readOnly: true,
+        }),
+        // footer
+        ...(showFooter &&
+          showDescription &&
+          states.includes("Invalid") && {
+            // invalid인 경우 description을 error로 사용
+            errorMessage: description,
+          }),
+        ...(showFooter &&
+          showDescription &&
+          !states.includes("Invalid") && {
+            // invalid가 아닌 경우 description을 description으로 사용
+            description,
+          }),
+        ...(showFooter &&
+          showCharacterCount && {
+            maxGraphemeCount: Number(maxCharacterCount),
+          }),
+      };
+
+      const inputProps = {
+        placeholder,
+      };
+
+      const TextFieldChildren = createElement("TextFieldInput", inputProps);
+
+      return createElement("TextField", commonProps, TextFieldChildren);
+    },
+  );

package/src/codegen/domain/seed-component/transformers/toggle-button.ts

@@ -0,0 +1,47 @@
+import { defineComponentTransformer } from "@/codegen/core";
+import { camelCase } from "change-case";
+import * as metadata from "../../../data/__generated__/component-sets";
+import { createElement } from "../../../core/jsx";
+import { handleSizeProp } from "../size";
+import type { ToggleButtonProperties } from "../properties.type";
+import type { SeedComponentTransformerDeps } from "../deps.interface";
+
+export const createToggleButtonTransformer = (ctx: SeedComponentTransformerDeps) =>
+  defineComponentTransformer<ToggleButtonProperties>(
+    metadata.toggleButton.key,
+    ({ componentProperties: props }) => {
+      const states = props.State.value.split("-");
+
+      const commonProps = {
+        variant: camelCase(props.Variant.value),
+        size: handleSizeProp(props.Size.value),
+        ...(states.includes("Selected") && {
+          defaultPressed: true,
+        }),
+        ...(states.includes("Disabled") && {
+          disabled: true,
+        }),
+        ...(states.includes("Loading") && {
+          loading: true,
+        }),
+      };
+
+      return createElement("ToggleButton", commonProps, [
+        props["Show Prefix Icon#6122:392"].value
+          ? createElement("PrefixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Prefix Icon#6122:98"].componentKey),
+              ),
+            })
+          : undefined,
+        props["Label#6122:49"].value,
+        props["Show Suffix Icon#6122:147"].value
+          ? createElement("SuffixIcon", {
+              svg: createElement(
+                ctx.iconService.createIconTagName(props["Suffix Icon#6122:343"].componentKey),
+              ),
+            })
+          : undefined,
+      ]);
+    },
+  );

package/src/codegen/domain/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/codegen/domain/style.repository.ts

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

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

@@ -0,0 +1,38 @@
+import type { StyleRepository } from "./style.repository";
+
+export interface StyleService {
+  getStyleName: (id: string) => string;
+}
+
+// TODO: inferStyleName 추가해야 함, rest api에서 style value가 제공되지 않고 있어 보류
+export function createStyleService({
+  styleRepository,
+  styleNameTransformer,
+}: {
+  styleRepository: StyleRepository;
+  styleNameTransformer: ({ slug }: { slug: string[] }) => string;
+}): StyleService {
+  function getFigmaStyleName(id: string) {
+    const style = styleRepository.getOne(id);
+
+    if (!style) {
+      throw new Error(`Style not found: ${id}`);
+    }
+
+    return style.name;
+  }
+
+  function getFigmaStyleSlug(id: string): string[] {
+    const name = getFigmaStyleName(id);
+    return name.split("/");
+  }
+
+  function getStyleName(id: string) {
+    const slug = getFigmaStyleSlug(id);
+    return styleNameTransformer({ slug });
+  }
+
+  return {
+    getStyleName,
+  };
+}

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

@@ -0,0 +1,62 @@
+import type { NormalizedTextNode } from "@/normalizer";
+import { compactObject } from "@/utils/common";
+import { camelCase } from "change-case";
+import { createElement, defineElementTransformer, type ElementTransformer } from "../core";
+import type { FillPropsService, ShapeFillProps } from "./props/fill-props.service";
+import type { TypeStylePropsService } from "./props/type-style-props.service";
+import type { StyleService } from "./style.service";
+
+export interface TextService {
+  transform: ElementTransformer<NormalizedTextNode>;
+}
+
+export interface SeedTextServiceDeps {
+  styleService: StyleService;
+  fillPropsService: FillPropsService<ShapeFillProps>;
+  typeStylePropsService: TypeStylePropsService;
+}
+
+export function createSeedTextService({
+  styleService,
+  fillPropsService,
+  typeStylePropsService,
+}: SeedTextServiceDeps): TextService {
+  const transform = defineElementTransformer((node: NormalizedTextNode, traverse) => {
+    const maxLines =
+      node.style.textTruncation === "ENDING" ? (node.style.maxLines ?? undefined) : undefined;
+
+    const hasMultipleFills = node.fills.length > 1;
+
+    const fillProps = fillPropsService.transform(node, traverse);
+
+    const styleName = node.textStyleKey ? styleService.getStyleName(node.textStyleKey) : undefined;
+    const { fontSize, fontWeight, lineHeight } = typeStylePropsService.transform(node, traverse);
+
+    const props = styleName
+      ? compactObject({
+          textStyle: camelCase(styleName, { mergeAmbiguousCharacters: true }),
+          maxLines,
+          ...fillProps,
+        })
+      : compactObject({
+          fontSize,
+          fontWeight,
+          lineHeight,
+          maxLines,
+          ...fillProps,
+        });
+
+    return createElement(
+      "Text",
+      props,
+      node.characters.replace(/\n/g, "<br />"),
+      hasMultipleFills
+        ? "Multiple fills in Text node encountered, only the first fill is used."
+        : "",
+    );
+  });
+
+  return {
+    transform,
+  };
+}

package/src/codegen/domain/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/codegen/domain/variable.repository.ts

@@ -0,0 +1,44 @@
+import type { Variable, VariableCollection } from "./variable.interface";
+
+export interface VariableRepository {
+  getVariableList(): Variable[];
+  getVariableCollectionList(): VariableCollection[];
+  findVariableByKey(key: string): Variable | undefined;
+  findVariableById(id: 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 variableCollectionsKeyMap = new Map<string, VariableCollection>();
+  const variableCollectionsIdMap = new Map<string, VariableCollection>();
+  const variablesList = Object.values(variables);
+  const variableCollectionsList = Object.values(variableCollections);
+
+  for (const variable of variablesList) {
+    variablesKeyMap.set(variable.key, variable);
+    variablesIdMap.set(variable.id, variable);
+  }
+
+  for (const variableCollection of variableCollectionsList) {
+    variableCollectionsKeyMap.set(variableCollection.key, variableCollection);
+    variableCollectionsIdMap.set(variableCollection.id, variableCollection);
+  }
+
+  return {
+    getVariableList: () => variablesList,
+    getVariableCollectionList: () => variableCollectionsList,
+    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/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,3 +1,2 @@
-export { generateCode } from "./generate-code";
-export { createPluginNormalizer } from "./normalizer/from-plugin";
-export { createRestNormalizer } from "./normalizer/from-rest";
+export * from "./normalizer";
+export * from "./codegen";