@seed-design/figma 0.0.4 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/figma",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@create-figma-plugin/utilities": "^3.0.2",
-    "@seed-design/css": "0.0.12",
+    "@seed-design/css": "0.0.13",
     "change-case": "^5.2.0",
     "ts-pattern": "^5.2.0"
   },

package/src/codegen/context.ts

@@ -0,0 +1,148 @@
+import { camelCasePreserveUnderscoreBetweenNumbers } from "@/utils/common";
+import { camelCase } from "change-case";
+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 {
+  createCodegenService,
+  createContainerLayoutPropsService,
+  createFigmaComponentService,
+  createFrameFillPropsService,
+  createFrameStrokePropsService,
+  createFrameTypeStylePropsService,
+  createIconService,
+  createRadiusPropsService,
+  createSeedComponentTransformers,
+  createSeedFrameService,
+  createSeedInstanceService,
+  createSeedRectangleService,
+  createSeedTextService,
+  createSelfLayoutPropsService,
+  createShapeFillPropsService,
+  createStaticIconRepository,
+  createStaticStyleRepository,
+  createStaticVariableRepository,
+  createStyleService,
+  createVariableService,
+} from "./domain";
+
+const IGNORED_COMPONENT_KEYS = new Set<string>([
+  "1acdc7247c83a73a0504d6fad86d08783938cb1a",
+  "b38b719b61cdf1a24458d7a7888bee74b7649084",
+]);
+
+export interface CodegenContextOptions {
+  ignoredComponentKeys?: Set<string>;
+  shouldInferVariableName: boolean;
+  shouldPrintSource: boolean;
+}
+
+export function createCodegenContext(options: CodegenContextOptions) {
+  const {
+    ignoredComponentKeys = IGNORED_COMPONENT_KEYS,
+    shouldInferVariableName,
+    shouldPrintSource,
+  } = options;
+
+  const styleRepository = createStaticStyleRepository(FIGMA_TEXT_STYLES);
+  const variableRepository = createStaticVariableRepository({
+    variables: FIGMA_VARIABLES,
+    variableCollections: FIGMA_VARIABLE_COLLECTIONS,
+  });
+  const iconRepository = createStaticIconRepository(FIGMA_ICONS);
+
+  const styleService = createStyleService({
+    styleRepository,
+    styleNameTransformer: ({ slug }) =>
+      camelCase(slug[slug.length - 1]!, { mergeAmbiguousCharacters: true }),
+  });
+  const variableService = createVariableService({
+    variableRepository,
+    variableNameTransformer: ({ slug }) =>
+      slug
+        .filter((s) => s !== "dimension")
+        .map((s) => s.replaceAll(",", "_"))
+        .map(camelCasePreserveUnderscoreBetweenNumbers)
+        .join("."),
+  });
+  const iconService = createIconService({
+    iconRepository,
+  });
+
+  const containerLayoutPropsService = createContainerLayoutPropsService({
+    variableService,
+    shouldInferVariableName,
+  });
+  const selfLayoutPropsService = createSelfLayoutPropsService({
+    variableService,
+    shouldInferVariableName,
+  });
+  const frameFillPropsService = createFrameFillPropsService({
+    variableService,
+  });
+  const shapeFillPropsService = createShapeFillPropsService({
+    variableService,
+  });
+  const radiusPropsService = createRadiusPropsService({
+    variableService,
+    shouldInferVariableName,
+  });
+  const strokePropsService = createFrameStrokePropsService({
+    variableService,
+  });
+  const typeStylePropsService = createFrameTypeStylePropsService({
+    variableService,
+  });
+
+  const figmaComponentService = createFigmaComponentService({
+    transformers: createSeedComponentTransformers({
+      iconService,
+      variableService,
+    }),
+  });
+
+  const frameService = createSeedFrameService({
+    containerLayoutPropsService,
+    selfLayoutPropsService,
+    radiusPropsService,
+    fillPropsService: frameFillPropsService,
+    strokePropsService,
+  });
+  const instanceService = createSeedInstanceService({
+    figmaComponentService,
+    fillPropsService: shapeFillPropsService,
+    selfLayoutPropsService,
+    iconService,
+    frameService,
+    ignoredComponentKeys,
+  });
+  const textService = createSeedTextService({
+    styleService,
+    fillPropsService: shapeFillPropsService,
+    typeStylePropsService,
+  });
+  const rectangleService = createSeedRectangleService({
+    selfLayoutPropsService,
+  });
+
+  const codegenService = createCodegenService({
+    frameService,
+    textService,
+    rectangleService,
+    instanceService,
+    shouldPrintSource,
+  });
+
+  return codegenService;
+}
+
+export const codegenService = createCodegenContext({
+  shouldInferVariableName: true,
+  shouldPrintSource: false,
+});
+
+export const devCodegenService = createCodegenContext({
+  shouldInferVariableName: false,
+  shouldPrintSource: true,
+});

package/src/{component/type-helper.ts → codegen/core/component.ts}

@@ -1,7 +1,4 @@
-import type { ElementNode } from "../jsx";
-import type { NormalizedInstanceNode } from "../normalizer";
-
-interface ComponentPropertyDefinition {
+export interface ComponentPropertyDefinition {
   type: ComponentPropertyType;
   preferredValues?: InstanceSwapPreferredValue[];
   variantOptions?: string[];
@@ -30,11 +27,3 @@ export type InferFromDefinition<T extends Record<string, ComponentPropertyDefini
     };
   };
 };
-
-export interface ComponentHandler<
-  T extends
-    NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"],
-> {
-  key: string;
-  codegen: (node: NormalizedInstanceNode & { componentProperties: T }) => Promise<ElementNode>;
-}

package/src/codegen/core/index.ts

@@ -0,0 +1,14 @@
+export type {
+  ComponentPropertyDefinition,
+  InferFromDefinition,
+  InferPropertyType,
+} from "./component";
+export type { ElementNode } from "./jsx";
+export type { ElementTransformer, PropsTransformer, ComponentTransformer } from "./transformer";
+
+export { createElement } from "./jsx";
+export {
+  defineElementTransformer,
+  definePropsTransformer,
+  defineComponentTransformer,
+} from "./transformer";

package/src/{jsx.ts → codegen/core/jsx.ts}

@@ -1,4 +1,4 @@
-import { ensureArray, exists } from "./utils/common";
+import { ensureArray, exists } from "@/utils/common";
 
 export interface ElementNode {
   __IS_JSX_ELEMENT_NODE: true;
@@ -6,6 +6,7 @@ export interface ElementNode {
   props: Record<string, string | number | boolean | ElementNode | object | undefined>;
   children: (ElementNode | string)[];
   comment?: string;
+  source?: string;
 }
 
 export function createElement(
@@ -23,6 +24,13 @@ export function createElement(
   };
 }
 
+export function appendSource(element: ElementNode, source: string) {
+  return {
+    ...element,
+    source,
+  };
+}
+
 export function isElement(node: unknown): node is ElementNode {
   return (
     typeof node === "object" &&
@@ -32,14 +40,16 @@ export function isElement(node: unknown): node is ElementNode {
   );
 }
 
-export function stringifyElement(element: ElementNode) {
+export function stringifyElement(element: ElementNode, options: { printSource?: boolean } = {}) {
   function recursive(node: ElementNode | string, depth: number): string {
     if (typeof node === "string") {
       return node;
     }
 
     const { tag, props, children, comment } = node;
-    const propEntries = Object.entries(props);
+    const propEntries = Object.entries(
+      options.printSource ? { ...props, "data-figma-node-id": node.source } : props,
+    );
     const propFragments = propEntries
       .map(([key, value]) => {
         if (typeof value === "string") {

package/src/codegen/core/transformer.ts

@@ -0,0 +1,40 @@
+import type { ElementNode } from "./jsx";
+import type { NormalizedInstanceNode, NormalizedSceneNode } from "@/normalizer";
+
+export type ElementTransformer<T extends NormalizedSceneNode> = (
+  node: T,
+  traverse: (node: NormalizedSceneNode) => ElementNode | undefined,
+) => ElementNode | undefined;
+
+export type PropsTransformer<
+  T extends Record<string, any> = Record<string, any>,
+  R extends Record<string, any> = Record<string, any>,
+> = (node: T, traverse: (node: NormalizedSceneNode) => ElementNode | undefined) => R;
+
+export interface ComponentTransformer<
+  T extends
+    NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"],
+> {
+  key: string;
+  transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode;
+}
+
+export function defineElementTransformer<T extends NormalizedSceneNode>(
+  transformer: ElementTransformer<T>,
+) {
+  return transformer;
+}
+
+export function definePropsTransformer<
+  T extends Record<string, any>,
+  R extends Record<string, any>,
+>(transformer: PropsTransformer<T, R>) {
+  return transformer;
+}
+
+export function defineComponentTransformer<T extends NormalizedInstanceNode["componentProperties"]>(
+  key: string,
+  transform: (node: NormalizedInstanceNode & { componentProperties: T }) => ElementNode,
+): ComponentTransformer<T> {
+  return { key, transform };
+}

package/src/{data → codegen/data}/icons.ts

@@ -1,10 +1,6 @@
-export interface IconData {
-  name: string;
-  type: "monochrome" | "multicolor";
-  weight?: string;
-}
+import type { IconData } from "../domain";
 
-export const iconRecord: Record<string, IconData> = {
+export const FIGMA_ICONS: Record<string, IconData> = {
   "8b12671ecc2e0d9bd87c854fd10f7907bd06c54b": {
     name: "icon_arrow_left",
     type: "monochrome",

package/src/{data → codegen/data}/styles.ts

@@ -1,142 +1,200 @@
-export const FIGMA_TEXT_STYLES = [
+import type { Style } from "../domain";
+
+export const FIGMA_TEXT_STYLES: Style[] = [
   {
-    id: "S:2fec4e47f53f75ea46bee4d740795e099af5472f,",
+    styleType: "TEXT",
     key: "2fec4e47f53f75ea46bee4d740795e099af5472f",
     name: "legacy-14-150",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:af24f9e7cc90af3bf2a18029dd59ae0646966486,",
+    styleType: "TEXT",
     key: "af24f9e7cc90af3bf2a18029dd59ae0646966486",
     name: "legacy-13-150",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:4d54fb58fa4a63a6ddec973099b4babfbe502849,",
+    styleType: "TEXT",
     key: "4d54fb58fa4a63a6ddec973099b4babfbe502849",
     name: "scale/t1-regular",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:49735ed4693e2f7e9d98b6b6e3818f38e2fe77a8,",
+    styleType: "TEXT",
     key: "49735ed4693e2f7e9d98b6b6e3818f38e2fe77a8",
     name: "scale/t1-medium",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:337e113e2fafc22ccd5423b3fc7a7da69a6c917c,",
+    styleType: "TEXT",
     key: "337e113e2fafc22ccd5423b3fc7a7da69a6c917c",
     name: "scale/t1-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:711eaf0bd91b906e108f3508cf7845fc82294b1a,",
+    styleType: "TEXT",
     key: "711eaf0bd91b906e108f3508cf7845fc82294b1a",
     name: "scale/t2-regular",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:2aff06b0ad8be136acbfb3090fa4dde1f9eac48e,",
+    styleType: "TEXT",
     key: "2aff06b0ad8be136acbfb3090fa4dde1f9eac48e",
     name: "scale/t2-medium",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:8378bd59b14f5682dcaf20110efde4b7a1fb18e3,",
+    styleType: "TEXT",
     key: "8378bd59b14f5682dcaf20110efde4b7a1fb18e3",
     name: "scale/t2-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:22ead16ee07b342df4a26952bc987f3155988779,",
+    styleType: "TEXT",
     key: "22ead16ee07b342df4a26952bc987f3155988779",
     name: "scale/t3-regular",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:96a2f248d201c246587d63eb4d00cb7610897400,",
+    styleType: "TEXT",
     key: "96a2f248d201c246587d63eb4d00cb7610897400",
     name: "scale/t3-medium",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:f749d659a689cbbecbdbb1b559056731234332a3,",
+    styleType: "TEXT",
     key: "f749d659a689cbbecbdbb1b559056731234332a3",
     name: "scale/t3-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:b23d3e206b0244690c19472fd78bfc33b9b46d06,",
+    styleType: "TEXT",
     key: "b23d3e206b0244690c19472fd78bfc33b9b46d06",
     name: "scale/t4-regular",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:2c143ba862b3c1af10a0bd5d2e723bd12e7878ef,",
+    styleType: "TEXT",
     key: "2c143ba862b3c1af10a0bd5d2e723bd12e7878ef",
     name: "scale/t4-medium",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:a85ea49c1625319427c047bc206c26e708012030,",
+    styleType: "TEXT",
     key: "a85ea49c1625319427c047bc206c26e708012030",
     name: "scale/t4-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:54a5a4c2bfc09573fba3a8efe0dafff067cf53bd,",
+    styleType: "TEXT",
     key: "54a5a4c2bfc09573fba3a8efe0dafff067cf53bd",
     name: "scale/t5-regular",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:bc8bcf3caa904cdc2e1c2983d0f12d32832d7374,",
+    styleType: "TEXT",
     key: "bc8bcf3caa904cdc2e1c2983d0f12d32832d7374",
     name: "scale/t5-medium",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:8eff229c53f06eeb418f39ad1cb3dbe12480f12b,",
+    styleType: "TEXT",
     key: "8eff229c53f06eeb418f39ad1cb3dbe12480f12b",
     name: "scale/t5-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:6608eaab965859080a5effa6e23eb857d888057f,",
+    styleType: "TEXT",
     key: "6608eaab965859080a5effa6e23eb857d888057f",
     name: "scale/t6-regular",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:02ee25a9050a9c78dbaa03ea006aa4d1db593e99,",
+    styleType: "TEXT",
     key: "02ee25a9050a9c78dbaa03ea006aa4d1db593e99",
     name: "scale/t6-medium",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:adf921a56e89b5737a6b626034cfea184e828370,",
+    styleType: "TEXT",
     key: "adf921a56e89b5737a6b626034cfea184e828370",
     name: "scale/t6-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:eb1c0409582609a51fe9afc9e31301d529e3d12f,",
+    styleType: "TEXT",
     key: "eb1c0409582609a51fe9afc9e31301d529e3d12f",
     name: "scale/t7-regular",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:b2e24640e7dc1264fc638434511c9f994e1e149c,",
+    styleType: "TEXT",
     key: "b2e24640e7dc1264fc638434511c9f994e1e149c",
     name: "scale/t7-medium",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:182d9252d7f7380075915a89e6160d7595124bc3,",
+    styleType: "TEXT",
     key: "182d9252d7f7380075915a89e6160d7595124bc3",
     name: "scale/t7-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:b7f864e3f64524a863d38729e2cea18f44c7ebaa,",
+    styleType: "TEXT",
     key: "b7f864e3f64524a863d38729e2cea18f44c7ebaa",
     name: "scale/t8-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:b146e1317c67db787834f1890493225bdbba4e48,",
+    styleType: "TEXT",
     key: "b146e1317c67db787834f1890493225bdbba4e48",
     name: "scale/t9-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:6ea6b06312771259d59de265a5ef12cd1dae9102,",
+    styleType: "TEXT",
     key: "6ea6b06312771259d59de265a5ef12cd1dae9102",
     name: "scale/t10-bold",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d,",
+    styleType: "TEXT",
     key: "85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d",
     name: "semantic/article-body",
+    description: "",
+    remote: false,
   },
   {
-    id: "S:d918eb7069e10c8dd745abf40bc375004c1badb8,",
+    styleType: "TEXT",
     key: "d918eb7069e10c8dd745abf40bc375004c1badb8",
     name: "semantic/screen-title",
+    description: "",
+    remote: false,
   },
 ];