@auto-engineer/design-system-importer 0.1.2 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auto-engineer/design-system-importer",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,7 +18,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@auto-engineer/message-bus": "^0.0.3"
+    "figma-api": "2.0.2-beta",
+    "@auto-engineer/message-bus": "^0.1.0"
   },
   "scripts": {
     "start": "tsx src/index.ts",

package/src/FigmaComponentsBuilder.ts

@@ -0,0 +1,207 @@
+import * as dotenv from 'dotenv';
+import * as Figma from 'figma-api';
+
+dotenv.config();
+
+const figmaApi = new Figma.Api({
+  personalAccessToken: process.env.FIGMA_PERSONAL_TOKEN as string,
+});
+
+export interface FigmaComponent {
+  name: string;
+  description: string;
+  thumbnail: string;
+}
+
+export type FilterFunctionType = (components: FigmaComponent[]) => FigmaComponent[];
+
+interface FigmaNode {
+  type: string;
+  name: string;
+  children: FigmaNode[];
+  description: string;
+  thumbnail_url: string;
+}
+
+export class FigmaComponentsBuilder {
+  components: FigmaComponent[] = [];
+
+  async withFigmaComponents() {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const response = await figmaApi.getFileComponents({ file_key: process.env.FIGMA_FILE_ID });
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      if (response.meta.components.length > 0) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        console.log(JSON.stringify(response.meta.components.length, null, 2));
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+        this.components = response.meta.components.map(
+          (component: { name: string; description: string; thumbnail_url: string }) => ({
+            name: component.name,
+            description: component.description,
+            thumbnail: component.thumbnail_url,
+          }),
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return this;
+  }
+
+  async withFigmaComponentSets() {
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const response = await figmaApi.getFileComponentSets({ file_key: process.env.FIGMA_FILE_ID });
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      if (response.meta.component_sets.length > 0) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+        this.components = response.meta.component_sets.map(
+          (component: { name: string; description: string; thumbnail_url: string }) => ({
+            name: component.name,
+            description: component.description ?? 'N/A',
+            thumbnail: component.thumbnail_url ?? 'N/A',
+          }),
+        );
+      }
+    } catch (e) {
+      console.error(e);
+    }
+    return this;
+  }
+
+  // extractBracketedComponents(item: FigmaComponent): FigmaComponent | null {
+  //   const match = item.name.match(/<([^>]+)>/);
+  //   return match ? { ...item, name: match[1].trim() } : null;
+  // }
+  //
+  // withFilteredNamesForMui() {
+  //   // eslint-disable-next-line @typescript-eslint/unbound-method
+  //   this.components = this.components.map(this.extractBracketedComponents).filter(Boolean) as FigmaComponent[];
+  // }
+
+  withFilteredNamesForShadcn(): void {
+    this.components = this.components
+      .map((comp: FigmaComponent): FigmaComponent | null => {
+        if (!comp?.name) return null;
+
+        let str = comp.name.trim();
+
+        if (str.includes('/')) {
+          str = str.split('/')[0].trim();
+        } else {
+          str = str.split(' ')[0].trim();
+        }
+
+        if (str.length > 0) {
+          str = str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+        } else {
+          return null;
+        }
+
+        return {
+          ...comp,
+          name: str.toLowerCase(),
+        };
+      })
+      .filter((c: FigmaComponent | null): c is FigmaComponent => Boolean(c));
+  }
+
+  withFilter(filter: FilterFunctionType): void {
+    try {
+      this.components = filter(this.components);
+    } catch (e) {
+      console.error('Error applying custom filter:', e);
+    }
+  }
+
+  async withAllFigmaInstanceNames() {
+    try {
+      /// ----
+      const usedComponentMap = new Map<string, { name: string; description: string; thumbnail: string }>();
+
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      const { document } = await figmaApi.getFile({
+        file_key: process.env.FIGMA_FILE_ID,
+        depth: 1,
+      });
+
+      function walkTree(node: FigmaNode) {
+        if (node.type === 'INSTANCE' && Boolean(node.name)) {
+          if (!usedComponentMap.has(node.name)) {
+            usedComponentMap.set(node.name, {
+              name: node.name,
+              description: node.description ?? '',
+              thumbnail: node.thumbnail_url ?? '',
+            });
+          }
+        }
+
+        // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        if (node.children) {
+          for (const child of node.children) {
+            walkTree(child);
+          }
+        }
+      }
+
+      walkTree(document);
+
+      this.components = Array.from(usedComponentMap.values());
+
+      /// ----
+
+      // const components = []
+      // // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+      // const { meta } = await figmaApi.getFileComponentSets({ file_key: process.env.FIGMA_FILE_ID });
+      // // console.log(response);
+      //
+      // console.log('Component sets:', meta.component_sets); // ⬅️ Check this!
+      //
+      // const componentSetIds = meta.component_sets.map(componentSet => componentSet.node_id); // This must return valid Figma node IDs
+      //
+      // console.log('ComponentSet IDs:', componentSetIds);
+      //
+      // const fileNodes = await figmaApi.getFileNodes({
+      //   file_key: process.env.FIGMA_FILE_ID,
+      // }, {
+      //   ids: componentSetIds.join(','),
+      // });
+      //
+      // for (const node of Object.values(fileNodes.nodes)) {
+      //   const componentSet = node.document;
+      //
+      //   if (componentSet.type === 'COMPONENT_SET' && componentSet.children?.length) {
+      //     const variants = componentSet.children;
+      //     const firstVariant = variants[0]; // or apply filtering logic
+      //
+      //     components.push({
+      //       name: componentSet.name,       // e.g. "Button"
+      //       id: firstVariant.id,           // this is the actual variant node
+      //       variantName: firstVariant.name // e.g. "primary=true, size=md"
+      //     });
+      //   }
+      // }
+      //
+      // fs.writeFileSync('output.json', JSON.stringify(components, null, 2));
+
+      // if (Boolean(response)) {
+      //   // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+      //   this.components = response.meta.component_sets.map(
+      //     (component: { name: string; description: string; thumbnail_url: string }) => ({
+      //       name: component.name,
+      //       description: component.description,
+      //       thumbnail_url: component.thumbnail_url,
+      //     }),
+      //   );
+      // }
+    } catch (e) {
+      console.error(e);
+    }
+    return this;
+  }
+
+  build() {
+    return this.components;
+  }
+}

package/src/commands/import-design-system.ts

@@ -1,12 +1,15 @@
 import { type CommandHandler, type Command, type Event } from '@auto-engineer/message-bus';
 import { promises as fs } from 'fs';
-import { copyDesignSystemDocsAndUserPreferences } from '../index';
+import { importDesignSystemComponentsFromFigma, ImportStrategy, type FilterFunctionType } from '../index';
+import { FilterLoader } from '../utils/FilterLoader';
 
 export type ImportDesignSystemCommand = Command<
   'ImportDesignSystem',
   {
     inputDir: string;
     outputDir: string;
+    strategy?: keyof typeof ImportStrategy;
+    filterPath?: string;
   }
 >;
 
@@ -31,7 +34,7 @@ export type DesignSystemImportFailedEvent = Event<
 export async function handleImportDesignSystemCommand(
   command: ImportDesignSystemCommand,
 ): Promise<DesignSystemImportedEvent | DesignSystemImportFailedEvent> {
-  const { inputDir, outputDir } = command.data;
+  const { inputDir, outputDir, strategy, filterPath } = command.data;
 
   try {
     // Check if input directory exists
@@ -55,7 +58,22 @@ export async function handleImportDesignSystemCommand(
       };
     }
 
-    await copyDesignSystemDocsAndUserPreferences(inputDir, outputDir);
+    const resolvedStrategy = strategy ? ImportStrategy[strategy] : ImportStrategy.WITH_COMPONENT_SETS;
+
+    let filterFn: FilterFunctionType | undefined;
+    let loader: FilterLoader | undefined;
+    if (typeof filterPath === 'string' && filterPath.trim().length > 0) {
+      try {
+        loader = new FilterLoader();
+        filterFn = await loader.loadFilter(filterPath);
+      } catch (e) {
+        console.warn(`Could not import filter from ${filterPath}. Skipping custom filter.`, e);
+      } finally {
+        if (loader) loader.cleanup();
+      }
+    }
+
+    await importDesignSystemComponentsFromFigma(outputDir, resolvedStrategy, filterFn);
     console.log(`Design system files processed from ${inputDir} to ${outputDir}`);
 
     return {

package/src/index.ts

@@ -2,11 +2,18 @@ import * as path from 'path';
 import * as fs from 'fs/promises';
 import * as dotenv from 'dotenv';
 import { fileURLToPath } from 'url';
+import * as Figma from 'figma-api';
+import { FigmaComponentsBuilder, type FilterFunctionType } from './FigmaComponentsBuilder';
+// import { AIProvider, generateTextWithAI } from '@auto-engineer/ai-gateway';
 
 dotenv.config();
 
 const __filename = fileURLToPath(import.meta.url);
 
+const api = new Figma.Api({
+  personalAccessToken: process.env.FIGMA_PERSONAL_TOKEN as string,
+});
+
 async function getAllTsxFiles(dir: string): Promise<string[]> {
   let results: string[] = [];
   const entries = await fs.readdir(dir, { withFileTypes: true });
@@ -47,6 +54,7 @@ export async function generateDesignSystemMarkdown(inputDir: string, outputDir:
 }
 
 export * from './commands/import-design-system';
+export type { FilterFunctionType } from './FigmaComponentsBuilder';
 
 async function copyFile(inputDir: string, outputDir: string, file: string): Promise<void> {
   const srcPath = path.join(inputDir, file);
@@ -92,6 +100,97 @@ export async function copyDesignSystemDocsAndUserPreferences(inputDir: string, o
   }
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function getFigmaComponents(): Promise<{ name: string; description: string; thumbnail: string }[]> {
+  let components: { name: string; description: string; thumbnail: string }[] = [];
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const response = await api.getFileComponentSets({ file_key: process.env.FIGMA_FILE_ID });
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-call,@typescript-eslint/no-unsafe-member-access
+    components = response.meta.component_sets.map(
+      (component: { name: string; description: string; thumbnail_url: string }) => ({
+        name: component.name,
+        description: component.description,
+        thumbnail: component.thumbnail_url,
+      }),
+    );
+    console.log('figma response: ', response);
+  } catch (e) {
+    console.error(e);
+  }
+  console.log(components.length);
+  return components;
+}
+
+export function generateMarkdownFromComponents(
+  components: { name: string; description: string; thumbnail: string }[],
+): string {
+  let md = '# Design System\n\n## Components\n\n';
+
+  if (components.length === 0) {
+    console.warn('No components found');
+  }
+
+  for (const component of components) {
+    md += `### ${component.name}\nDescription: ${component.description}\nImage: ![${component.name} image](${component.thumbnail})\n\n`;
+  }
+
+  return md;
+}
+
+export enum ImportStrategy {
+  WITH_COMPONENTS = 'WITH_COMPONENTS',
+  WITH_COMPONENT_SETS = 'WITH_COMPONENT_SETS',
+  WITH_ALL_FIGMA_INSTANCES = 'WITH_ALL_FIGMA_INSTANCES',
+}
+
+export async function importDesignSystemComponentsFromFigma(
+  outputDir: string,
+  strategy: ImportStrategy = ImportStrategy.WITH_COMPONENT_SETS,
+  filterFn?: FilterFunctionType,
+): Promise<void> {
+  const figmaComponentsBuilder = new FigmaComponentsBuilder();
+
+  if (strategy === ImportStrategy.WITH_COMPONENTS) {
+    await figmaComponentsBuilder.withFigmaComponents();
+  } else if (strategy === ImportStrategy.WITH_COMPONENT_SETS) {
+    await figmaComponentsBuilder.withFigmaComponentSets();
+  } else if (strategy === ImportStrategy.WITH_ALL_FIGMA_INSTANCES) {
+    await figmaComponentsBuilder.withAllFigmaInstanceNames();
+  }
+
+  // figmaComponentsBuilder.withFilteredNamesForMui();
+  // figmaComponentsBuilder.withFilteredNamesForShadcn();
+
+  if (filterFn) {
+    figmaComponentsBuilder.withFilter(filterFn);
+  }
+
+  const figmaComponents = figmaComponentsBuilder.build();
+
+  console.log(figmaComponents.length);
+
+  const generatedComponentsMDFile = generateMarkdownFromComponents(figmaComponents);
+  // const mdWithImageAnalysis = await generateTextWithAI(
+  //   `
+  // Given this markdown file content:
+  // ${generatedComponentsMDFile}
+  //
+  // ------ INSTRUCTIONS -------
+  // !IMPORTANT: Only return with Markdown content, nothing else, I will be putting this straight in a .md file. Don't even start the file with \`\`\`markdown
+  // For every component Image: Analyze the given image and add to the given component.
+  // - add more content to the "Description:" part of the component.
+  // - add "Hierarchy:" part under the component, returning the parts a component is build of. like [Button, Input]
+  // `,
+  //   AIProvider.OpenAI,
+  //   { temperature: 0.2, maxTokens: 8000 },
+  // );
+  // await fs.mkdir(outputDir, { recursive: true });
+  const outPath = path.join(outputDir, 'design-system.md');
+  await fs.writeFile(outPath, generatedComponentsMDFile);
+  // await copyFile("../../../examples/design-system/design-system-principles.md", outputDir, 'design-system-principles.md');
+}
+
 // Check if this file is being run directly
 if (process.argv[1] === __filename) {
   const [, , inputDir, outputDir] = process.argv;
@@ -107,12 +206,20 @@ if (process.argv[1] === __filename) {
   //     console.error('Error generating design-system.md:', err);
   //     process.exit(1);
   //   });
-  copyDesignSystemDocsAndUserPreferences(inputDir, outputDir)
+  // copyDesignSystemDocsAndUserPreferences(inputDir, outputDir)
+  //   .then(() => {
+  //     console.log(`design-system.md copied to ${outputDir}`);
+  //   })
+  //   .catch((err) => {
+  //     console.error('Error copying design-system.md:', err);
+  //     process.exit(1);
+  //   });
+  importDesignSystemComponentsFromFigma(outputDir)
     .then(() => {
-      console.log(`design-system.md copied to ${outputDir}`);
+      console.log(`design-system.md generated to ${outputDir}`);
     })
     .catch((err) => {
-      console.error('Error copying design-system.md:', err);
+      console.error('Error generating design-system.md:', err);
       process.exit(1);
     });
 }

package/src/utils/FilterLoader.ts

@@ -0,0 +1,76 @@
+import { extname, resolve as resolvePath } from 'path';
+import { pathToFileURL } from 'url';
+import { existsSync } from 'fs';
+import type { FilterFunctionType } from '../FigmaComponentsBuilder';
+
+export class FilterLoader {
+  private tsxRegistered = false;
+  private tsxUnregister: (() => void) | null = null;
+
+  async loadFilter(filePath: string): Promise<FilterFunctionType> {
+    if (typeof filePath !== 'string' || filePath.trim().length === 0) {
+      throw new Error('Filter file path is required');
+    }
+
+    const absolutePath = resolvePath(process.cwd(), filePath);
+
+    if (!existsSync(absolutePath)) {
+      throw new Error(`Filter file not found: ${absolutePath}`);
+    }
+
+    const ext = extname(absolutePath).toLowerCase();
+
+    // Enable tsx loader for TS files at runtime
+    if (ext === '.ts' || ext === '.tsx') {
+      await this.ensureTsxSupport();
+    }
+
+    const fileUrl = pathToFileURL(absolutePath).href;
+
+    const loadedUnknown: unknown = await import(fileUrl);
+    const loadedModule = loadedUnknown as { filter?: unknown; default?: unknown };
+
+    if (typeof loadedModule.filter === 'function') {
+      return loadedModule.filter as FilterFunctionType;
+    }
+
+    if (typeof loadedModule.default === 'function') {
+      console.warn('Using default export from filter module. Prefer a named export "filter".');
+      return loadedModule.default as FilterFunctionType;
+    }
+
+    throw new Error('No filter function found. Export a function named "filter" or as a default export from the file.');
+  }
+
+  private async ensureTsxSupport(): Promise<void> {
+    if (this.tsxRegistered) return;
+
+    try {
+      const tsxUnknown: unknown = await import('tsx/esm/api');
+      const tsxApi = tsxUnknown as { register: () => () => void };
+      if (typeof tsxApi.register === 'function') {
+        this.tsxUnregister = tsxApi.register();
+        this.tsxRegistered = true;
+      } else {
+        throw new Error('tsx/esm/api.register is not a function');
+      }
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (error) {
+      throw new Error(
+        'TypeScript filter detected but tsx is not available.\n' +
+          'Install tsx (npm i -D tsx) or provide a JavaScript file (.js/.mjs).',
+      );
+    }
+  }
+
+  cleanup(): void {
+    if (this.tsxUnregister) {
+      try {
+        this.tsxUnregister();
+      } finally {
+        this.tsxUnregister = null;
+        this.tsxRegistered = false;
+      }
+    }
+  }
+}