@seed-design/figma 0.0.27 → 0.0.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -38,7 +38,7 @@
     "lint:publish": "bun publint"
   },
   "dependencies": {
-    "@seed-design/css": "0.0.27",
+    "@seed-design/css": "0.0.28",
     "change-case": "^5.4.4",
     "ts-pattern": "^5.7.0"
   },

package/src/codegen/core/codegen.ts

@@ -25,6 +25,14 @@ export interface CodeGeneratorDeps {
   shouldInferAutoLayout: boolean;
 }
 
+export interface CodeGenerator {
+  generateJsxTree: (node: NormalizedSceneNode) => ElementNode | undefined;
+  generateCode: (
+    node: NormalizedSceneNode,
+    options: { shouldPrintSource: boolean },
+  ) => { imports: string; jsx: string } | undefined;
+}
+
 export function createCodeGenerator({
   frameTransformer,
   textTransformer,
@@ -33,7 +41,7 @@ export function createCodeGenerator({
   vectorTransformer,
   booleanOperationTransformer,
   shouldInferAutoLayout,
-}: CodeGeneratorDeps) {
+}: CodeGeneratorDeps): CodeGenerator {
   function traverse(node: NormalizedSceneNode): ElementNode | undefined {
     if ("visible" in node && !node.visible) {
       return;

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

@@ -1,14 +1,34 @@
+import type { ComponentRepository } from "@/entities";
 import type { NormalizedInstanceNode } from "@/normalizer";
-import { defineElementTransformer, type ElementTransformer } from "../../core";
+import { camelCase } from "change-case";
+import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
 
 export interface InstanceTransformerDeps {
   frameTransformer: ElementTransformer<NormalizedInstanceNode>;
+  componentRepository?: ComponentRepository;
 }
 
 export function createInstanceTransformer({
   frameTransformer,
+  componentRepository,
 }: InstanceTransformerDeps): ElementTransformer<NormalizedInstanceNode> {
   const transform = defineElementTransformer((node: NormalizedInstanceNode, traverse) => {
+    const component = componentRepository?.getOne(node.componentSetKey ?? node.componentKey);
+
+    if (component) {
+      return createElement("Instance", {
+        componentName: component.name,
+        ...Object.fromEntries(
+          Object.entries(node.componentProperties)
+            .filter(([_, props]) => props.type === "VARIANT" || props.type === "TEXT")
+            .map(([key, props]) => [
+              camelCase(key.split("#")[0]),
+              camelCase(props.value as string),
+            ]),
+        ),
+      });
+    }
+
     return frameTransformer(node, traverse);
   });
 

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

@@ -1,5 +1,7 @@
 import { createCodeGenerator, createValueResolver } from "@/codegen/core";
+import type { CodeGenerator } from "@/codegen/core/codegen";
 import { styleService, variableService } from "@/codegen/default-services";
+import { componentRepository } from "@/entities";
 import { createFrameTransformer } from "./frame";
 import { createInstanceTransformer } from "./instance";
 import {
@@ -29,7 +31,7 @@ export interface CreatePipelineConfig {
   shouldInferVariableName?: boolean;
 }
 
-export function createPipeline(options: CreatePipelineConfig = {}) {
+export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerator {
   const { shouldInferAutoLayout = true, shouldInferVariableName = true } = options;
 
   const valueResolver = createValueResolver({
@@ -66,6 +68,7 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
   });
   const instanceTransformer = createInstanceTransformer({
     frameTransformer,
+    componentRepository,
   });
   const textTransformer = createTextTransformer({
     propsConverters,

package/src/entities/component.interface.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropertyDefinition } from "@/codegen";
+
+export interface ComponentMetadata {
+  name: string;
+  key: string;
+  componentPropertyDefinitions: Record<string, ComponentPropertyDefinition>;
+}

package/src/entities/component.repository.ts

@@ -0,0 +1,16 @@
+import type { ComponentMetadata } from "./component.interface";
+
+export interface ComponentRepository {
+  getOne(key: string): ComponentMetadata | undefined;
+}
+
+export function createStaticComponentRepository(data: Record<string, ComponentMetadata>) {
+  const componentRecord: Record<string, ComponentMetadata> = {};
+  Object.values(data).forEach((component) => {
+    componentRecord[component.key] = component;
+  });
+
+  return {
+    getOne: (key: string) => componentRecord[key],
+  };
+}

package/src/entities/index.ts

@@ -3,8 +3,10 @@ import { FIGMA_ICONS } from "./data/icons";
 import { FIGMA_TEXT_STYLES } from "./data/styles";
 import { FIGMA_VARIABLE_COLLECTIONS } from "./data/variable-collections";
 import { FIGMA_VARIABLES } from "./data/variables";
+import * as FIGMA_COMPONENTS from "./data/__generated__/component-sets";
 import { createStaticStyleRepository } from "./style.repository";
 import { createStaticVariableRepository } from "./variable.repository";
+import { createStaticComponentRepository } from "./component.repository";
 
 export * from "./icon.interface";
 export * from "./icon.repository";
@@ -15,6 +17,8 @@ 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_TEXT_STYLES);
 export const variableRepository = createStaticVariableRepository({
@@ -22,6 +26,7 @@ export const variableRepository = createStaticVariableRepository({
   variableCollections: FIGMA_VARIABLE_COLLECTIONS,
 });
 export const iconRepository = createStaticIconRepository(FIGMA_ICONS);
+export const componentRepository = createStaticComponentRepository(FIGMA_COMPONENTS);
 
 export function getFigmaVariableKey(name: string) {
   return variableRepository.findVariableByName(name)?.key;