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

package/dist/utils/FilterLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterLoader.d.ts","sourceRoot":"","sources":["../../src/utils/FilterLoader.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,qBAAa,YAAY;IACvB,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,aAAa,CAA6B;IAE5C,UAAU,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,kBAAkB,CAAC;YAmCjD,gBAAgB;IAqB9B,OAAO,IAAI,IAAI;CAUhB"}

package/dist/utils/FilterLoader.js

@@ -0,0 +1,66 @@
+import { extname, resolve as resolvePath } from 'path';
+import { pathToFileURL } from 'url';
+import { existsSync } from 'fs';
+export class FilterLoader {
+    constructor() {
+        this.tsxRegistered = false;
+        this.tsxUnregister = null;
+    }
+    async loadFilter(filePath) {
+        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 = await import(fileUrl);
+        const loadedModule = loadedUnknown;
+        if (typeof loadedModule.filter === 'function') {
+            return loadedModule.filter;
+        }
+        if (typeof loadedModule.default === 'function') {
+            console.warn('Using default export from filter module. Prefer a named export "filter".');
+            return loadedModule.default;
+        }
+        throw new Error('No filter function found. Export a function named "filter" or as a default export from the file.');
+    }
+    async ensureTsxSupport() {
+        if (this.tsxRegistered)
+            return;
+        try {
+            const tsxUnknown = await import('tsx/esm/api');
+            const tsxApi = tsxUnknown;
+            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() {
+        if (this.tsxUnregister) {
+            try {
+                this.tsxUnregister();
+            }
+            finally {
+                this.tsxUnregister = null;
+                this.tsxRegistered = false;
+            }
+        }
+    }
+}
+//# sourceMappingURL=FilterLoader.js.map

package/dist/utils/FilterLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterLoader.js","sourceRoot":"","sources":["../../src/utils/FilterLoader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,MAAM,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,KAAK,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,IAAI,CAAC;AAGhC,MAAM,OAAO,YAAY;IAAzB;QACU,kBAAa,GAAG,KAAK,CAAC;QACtB,kBAAa,GAAwB,IAAI,CAAC;IAoEpD,CAAC;IAlEC,KAAK,CAAC,UAAU,CAAC,QAAgB;QAC/B,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACjE,MAAM,IAAI,KAAK,CAAC,8BAA8B,CAAC,CAAC;QAClD,CAAC;QAED,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,QAAQ,CAAC,CAAC;QAE1D,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,EAAE,CAAC;YAC9B,MAAM,IAAI,KAAK,CAAC,0BAA0B,YAAY,EAAE,CAAC,CAAC;QAC5D,CAAC;QAED,MAAM,GAAG,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,WAAW,EAAE,CAAC;QAEhD,4CAA4C;QAC5C,IAAI,GAAG,KAAK,KAAK,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;YACpC,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAChC,CAAC;QAED,MAAM,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC;QAEjD,MAAM,aAAa,GAAY,MAAM,MAAM,CAAC,OAAO,CAAC,CAAC;QACrD,MAAM,YAAY,GAAG,aAAwD,CAAC;QAE9E,IAAI,OAAO,YAAY,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;YAC9C,OAAO,YAAY,CAAC,MAA4B,CAAC;QACnD,CAAC;QAED,IAAI,OAAO,YAAY,CAAC,OAAO,KAAK,UAAU,EAAE,CAAC;YAC/C,OAAO,CAAC,IAAI,CAAC,0EAA0E,CAAC,CAAC;YACzF,OAAO,YAAY,CAAC,OAA6B,CAAC;QACpD,CAAC;QAED,MAAM,IAAI,KAAK,CAAC,kGAAkG,CAAC,CAAC;IACtH,CAAC;IAEO,KAAK,CAAC,gBAAgB;QAC5B,IAAI,IAAI,CAAC,aAAa;YAAE,OAAO;QAE/B,IAAI,CAAC;YACH,MAAM,UAAU,GAAY,MAAM,MAAM,CAAC,aAAa,CAAC,CAAC;YACxD,MAAM,MAAM,GAAG,UAA4C,CAAC;YAC5D,IAAI,OAAO,MAAM,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;gBAC1C,IAAI,CAAC,aAAa,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC;gBACvC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;YAC5D,CAAC;YACD,6DAA6D;QAC/D,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,MAAM,IAAI,KAAK,CACb,wDAAwD;gBACtD,qEAAqE,CACxE,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,IAAI,CAAC;gBACH,IAAI,CAAC,aAAa,EAAE,CAAC;YACvB,CAAC;oBAAS,CAAC;gBACT,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;gBAC1B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;YAC7B,CAAC;QACH,CAAC;IACH,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@auto-engineer/design-system-importer",
-  "version": "0.1.2",
+  "version": "0.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -18,7 +18,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@auto-engineer/message-bus": "^0.0.3"
+    "@auto-engineer/message-bus": "^0.3.0",
+    "figma-api": "2.0.2-beta",
+    "tsx": "^3.12.7"
   },
   "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,19 +1,19 @@
 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;
   }
 >;
 
 export type DesignSystemImportedEvent = Event<
   'DesignSystemImported',
   {
-    inputDir: string;
     outputDir: string;
   }
 >;
@@ -22,7 +22,6 @@ export type DesignSystemImportFailedEvent = Event<
   'DesignSystemImportFailed',
   {
     error: string;
-    inputDir: string;
     outputDir: string;
   }
 >;
@@ -31,37 +30,30 @@ export type DesignSystemImportFailedEvent = Event<
 export async function handleImportDesignSystemCommand(
   command: ImportDesignSystemCommand,
 ): Promise<DesignSystemImportedEvent | DesignSystemImportFailedEvent> {
-  const { inputDir, outputDir } = command.data;
+  const { outputDir, strategy, filterPath } = command.data;
 
   try {
-    // Check if input directory exists
-    const inputExists = await fs
-      .access(inputDir)
-      .then(() => true)
-      .catch(() => false);
+    const resolvedStrategy = strategy ? ImportStrategy[strategy] : ImportStrategy.WITH_COMPONENT_SETS;
 
-    if (!inputExists) {
-      // Input directory doesn't exist - this is likely an error
-      return {
-        type: 'DesignSystemImportFailed',
-        data: {
-          error: `Input directory does not exist: ${inputDir}`,
-          inputDir,
-          outputDir,
-        },
-        timestamp: new Date(),
-        requestId: command.requestId,
-        correlationId: command.correlationId,
-      };
+    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 copyDesignSystemDocsAndUserPreferences(inputDir, outputDir);
-    console.log(`Design system files processed from ${inputDir} to ${outputDir}`);
+    await importDesignSystemComponentsFromFigma(outputDir, resolvedStrategy, filterFn);
+    console.log(`Design system files processed to ${outputDir}`);
 
     return {
       type: 'DesignSystemImported',
       data: {
-        inputDir,
         outputDir,
       },
       timestamp: new Date(),
@@ -76,7 +68,6 @@ export async function handleImportDesignSystemCommand(
       type: 'DesignSystemImportFailed',
       data: {
         error: errorMessage,
-        inputDir,
         outputDir,
       },
       timestamp: new Date(),

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,11 +100,101 @@ 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);
+}
+
 // Check if this file is being run directly
 if (process.argv[1] === __filename) {
-  const [, , inputDir, outputDir] = process.argv;
-  if (!inputDir || !outputDir) {
-    console.error('Usage: tsx src/index.ts <inputDir> <outputDir>');
+  const [, , outputDir] = process.argv;
+  if (!outputDir) {
+    console.error('Usage: tsx src/index.ts <outputDir>');
     process.exit(1);
   }
   // generateDesignSystemMarkdown(inputDir, outputDir)
@@ -107,12 +205,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;
+      }
+    }
+  }
+}