@auto-engineer/design-system-importer 0.4.8 → 0.5.0

package/src/index.ts

@@ -4,120 +4,195 @@ import * as dotenv from 'dotenv';
 import { fileURLToPath } from 'url';
 import * as Figma from 'figma-api';
 import { FigmaComponentsBuilder, type FilterFunctionType } from './FigmaComponentsBuilder';
+import createDebug from 'debug';
 // import { AIProvider, generateTextWithAI } from '@auto-engineer/ai-gateway';
 
+const debug = createDebug('design-system-importer');
+const debugFiles = createDebug('design-system-importer:files');
+const debugFigma = createDebug('design-system-importer:figma');
+const debugMarkdown = createDebug('design-system-importer:markdown');
+const debugComponents = createDebug('design-system-importer:components');
+const debugCopy = createDebug('design-system-importer:copy');
+
 dotenv.config();
+debug('Design system importer initialized');
 
 const __filename = fileURLToPath(import.meta.url);
 
+debugFigma('Initializing Figma API with personal access token');
 const api = new Figma.Api({
   personalAccessToken: process.env.FIGMA_PERSONAL_TOKEN as string,
 });
+debugFigma('Figma API initialized');
 
 async function getAllTsxFiles(dir: string): Promise<string[]> {
+  debugFiles('Scanning directory for TSX files: %s', dir);
   let results: string[] = [];
-  const entries = await fs.readdir(dir, { withFileTypes: true });
-  for (const entry of entries) {
-    const fullPath = path.join(dir, entry.name);
-    if (entry.isDirectory()) {
-      results = results.concat(await getAllTsxFiles(fullPath));
-    } else if (entry.isFile() && entry.name.endsWith('.tsx')) {
-      results.push(fullPath);
+
+  try {
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    debugFiles('Found %d entries in %s', entries.length, dir);
+
+    for (const entry of entries) {
+      const fullPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        debugFiles('Entering subdirectory: %s', entry.name);
+        const subResults = await getAllTsxFiles(fullPath);
+        results = results.concat(subResults);
+        debugFiles('Found %d TSX files in %s', subResults.length, entry.name);
+      } else if (entry.isFile() && entry.name.endsWith('.tsx')) {
+        debugFiles('Found TSX file: %s', entry.name);
+        results.push(fullPath);
+      }
     }
+  } catch (error) {
+    debugFiles('Error reading directory %s: %O', dir, error);
   }
+
+  debugFiles('Total TSX files found in %s: %d', dir, results.length);
   return results;
 }
 
 function getComponentNameFromFile(filePath: string): string {
+  debugComponents('Extracting component name from: %s', filePath);
   const file = path.basename(filePath, '.tsx');
   // Capitalize first letter
-  return file.charAt(0).toUpperCase() + file.slice(1);
+  const componentName = file.charAt(0).toUpperCase() + file.slice(1);
+  debugComponents('Component name: %s', componentName);
+  return componentName;
 }
 
 export async function generateDesignSystemMarkdown(inputDir: string, outputDir: string): Promise<void> {
+  debugMarkdown('Generating design system markdown from: %s to: %s', inputDir, outputDir);
+
   const files = await getAllTsxFiles(inputDir);
   if (files.length === 0) {
+    debugMarkdown('WARNING: No .tsx files found in input directory');
     console.warn('No .tsx files found in input directory.');
     return;
   }
 
+  debugMarkdown('Processing %d TSX files', files.length);
   const componentNames = files.map(getComponentNameFromFile).sort();
+  debugMarkdown('Found %d unique components', componentNames.length);
 
   let md = '# Design System\n\n## Components\n\n';
   for (const name of componentNames) {
     md += `- ${name}\n`;
+    debugMarkdown('Added component to markdown: %s', name);
   }
 
+  debugMarkdown('Creating output directory: %s', outputDir);
   await fs.mkdir(outputDir, { recursive: true });
+
   const outPath = path.join(outputDir, 'design-system.md');
+  debugMarkdown('Writing markdown to: %s', outPath);
   await fs.writeFile(outPath, md);
+  debugMarkdown('Markdown file written successfully, size: %d bytes', md.length);
 }
 
 export * from './commands/import-design-system';
 export type { FilterFunctionType } from './FigmaComponentsBuilder';
+export { CLI_MANIFEST } from './cli-manifest';
 
 async function copyFile(inputDir: string, outputDir: string, file: string): Promise<void> {
   const srcPath = path.join(inputDir, file);
   const destPath = path.join(outputDir, file);
+  debugCopy('Attempting to copy file: %s from %s to %s', file, inputDir, outputDir);
 
   // Check if source file exists
   try {
     await fs.access(srcPath);
+    debugCopy('Source file exists: %s', srcPath);
+
+    debugCopy('Creating output directory: %s', outputDir);
     await fs.mkdir(outputDir, { recursive: true });
+
     await fs.copyFile(srcPath, destPath);
+    debugCopy('Successfully copied %s to %s', file, destPath);
   } catch (error) {
     // File doesn't exist, skip copying
+    debugCopy('File %s not found in %s, error: %O', file, inputDir, error);
     console.log(`File ${file} not found in ${inputDir}, skipping...`, error);
   }
 }
 
 export async function copyDesignSystemDocsAndUserPreferences(inputDir: string, outputDir: string): Promise<void> {
+  debugCopy('Copying design system docs from %s to %s', inputDir, outputDir);
+
   // Ensure output directory exists
+  debugCopy('Creating output directory: %s', outputDir);
   await fs.mkdir(outputDir, { recursive: true });
 
   // Try to copy existing files
+  debugCopy('Copying design-system.md...');
   await copyFile(inputDir, outputDir, 'design-system.md');
+
+  debugCopy('Copying design-system-principles.md...');
   await copyFile(inputDir, outputDir, 'design-system-principles.md');
 
   // If design-system.md doesn't exist in output, try to generate it from TSX files
   const designSystemPath = path.join(outputDir, 'design-system.md');
+  debugCopy('Checking if design-system.md exists at: %s', designSystemPath);
+
   try {
     await fs.access(designSystemPath);
+    debugCopy('design-system.md already exists');
   } catch {
+    debugCopy('design-system.md does not exist, attempting to generate from TSX files');
     // File doesn't exist, try to generate from TSX files if inputDir exists
     try {
       await fs.access(inputDir);
+      debugCopy('Input directory is accessible: %s', inputDir);
+
       const files = await getAllTsxFiles(inputDir);
       if (files.length > 0) {
+        debugCopy('Found %d TSX files, generating design-system.md', files.length);
         await generateDesignSystemMarkdown(inputDir, outputDir);
         console.log(`Generated design-system.md from ${files.length} component files`);
       } else {
+        debugCopy('No TSX files found in %s', inputDir);
         console.log(`No .tsx files found in ${inputDir} to generate design-system.md`);
       }
-    } catch {
+    } catch (error) {
+      debugCopy('Input directory %s not accessible: %O', inputDir, error);
       console.log(`Input directory ${inputDir} not accessible`);
     }
   }
+
+  debugCopy('Design system docs copy/generation complete');
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function getFigmaComponents(): Promise<{ name: string; description: string; thumbnail: string }[]> {
+  debugFigma('Fetching Figma components from file: %s', process.env.FIGMA_FILE_ID);
   let components: { name: string; description: string; thumbnail: string }[] = [];
+
   try {
+    debugFigma('Making API call to Figma...');
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const response = await api.getFileComponentSets({ file_key: process.env.FIGMA_FILE_ID });
+    debugFigma('Figma API response received');
+
     // 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,
-      }),
+      (component: { name: string; description: string; thumbnail_url: string }) => {
+        debugFigma('Processing component: %s', component.name);
+        return {
+          name: component.name,
+          description: component.description,
+          thumbnail: component.thumbnail_url,
+        };
+      },
     );
+
+    debugFigma('Successfully fetched %d components from Figma', components.length);
     console.log('figma response: ', response);
   } catch (e) {
+    debugFigma('ERROR: Failed to fetch Figma components: %O', e);
     console.error(e);
   }
+
   console.log(components.length);
   return components;
 }
@@ -125,16 +200,21 @@ async function getFigmaComponents(): Promise<{ name: string; description: string
 export function generateMarkdownFromComponents(
   components: { name: string; description: string; thumbnail: string }[],
 ): string {
+  debugMarkdown('Generating markdown from %d components', components.length);
   let md = '# Design System\n\n## Components\n\n';
 
   if (components.length === 0) {
+    debugMarkdown('WARNING: No components found to generate markdown');
     console.warn('No components found');
   }
 
-  for (const component of components) {
+  for (const [index, component] of components.entries()) {
+    debugMarkdown('Processing component %d/%d: %s', index + 1, components.length, component.name);
     md += `### ${component.name}\nDescription: ${component.description}\nImage: ![${component.name} image](${component.thumbnail})\n\n`;
+    debugMarkdown('Added component %s with description length: %d', component.name, component.description.length);
   }
 
+  debugMarkdown('Generated markdown document, total size: %d bytes', md.length);
   return md;
 }
 
@@ -149,28 +229,44 @@ export async function importDesignSystemComponentsFromFigma(
   strategy: ImportStrategy = ImportStrategy.WITH_COMPONENT_SETS,
   filterFn?: FilterFunctionType,
 ): Promise<void> {
+  debug('Starting Figma design system import');
+  debug('Output directory: %s', outputDir);
+  debug('Import strategy: %s', strategy);
+  debug('Filter function provided: %s', filterFn ? 'yes' : 'no');
+
   const figmaComponentsBuilder = new FigmaComponentsBuilder();
+  debugComponents('FigmaComponentsBuilder instance created');
 
   if (strategy === ImportStrategy.WITH_COMPONENTS) {
+    debugComponents('Using strategy: WITH_COMPONENTS');
     await figmaComponentsBuilder.withFigmaComponents();
   } else if (strategy === ImportStrategy.WITH_COMPONENT_SETS) {
+    debugComponents('Using strategy: WITH_COMPONENT_SETS');
     await figmaComponentsBuilder.withFigmaComponentSets();
   } else if (strategy === ImportStrategy.WITH_ALL_FIGMA_INSTANCES) {
+    debugComponents('Using strategy: WITH_ALL_FIGMA_INSTANCES');
     await figmaComponentsBuilder.withAllFigmaInstanceNames();
   }
+  debugComponents('Strategy applied successfully');
 
   // figmaComponentsBuilder.withFilteredNamesForMui();
   // figmaComponentsBuilder.withFilteredNamesForShadcn();
 
   if (filterFn) {
+    debugComponents('Applying custom filter function');
     figmaComponentsBuilder.withFilter(filterFn);
   }
 
+  debugComponents('Building Figma components...');
   const figmaComponents = figmaComponentsBuilder.build();
+  debugComponents('Built %d Figma components', figmaComponents.length);
 
   console.log(figmaComponents.length);
 
+  debugMarkdown('Generating markdown from Figma components');
   const generatedComponentsMDFile = generateMarkdownFromComponents(figmaComponents);
+  debugMarkdown('Markdown generated, size: %d bytes', generatedComponentsMDFile.length);
+
   // const mdWithImageAnalysis = await generateTextWithAI(
   //   `
   // Given this markdown file content:
@@ -186,8 +282,21 @@ export async function importDesignSystemComponentsFromFigma(
   //   { temperature: 0.2, maxTokens: 8000 },
   // );
   // await fs.mkdir(outputDir, { recursive: true });
-  const outPath = path.join(outputDir, 'design-system.md');
+
+  // Parse the outputDir to determine if it's a file path or directory
+  const isFilePath = outputDir.endsWith('.md');
+  const actualOutputDir = isFilePath ? path.dirname(outputDir) : outputDir;
+  const fileName = isFilePath ? path.basename(outputDir) : 'design-system.md';
+
+  debugFiles('Creating output directory: %s', actualOutputDir);
+  await fs.mkdir(actualOutputDir, { recursive: true });
+
+  const outPath = path.join(actualOutputDir, fileName);
+  debugFiles('Writing markdown to: %s', outPath);
   await fs.writeFile(outPath, generatedComponentsMDFile);
+  debugFiles('Design system markdown written successfully');
+
+  debug('Figma design system import complete');
 }
 
 // Check if this file is being run directly

package/src/utils/FilterLoader.ts

@@ -4,57 +4,83 @@ import { existsSync, readFileSync, writeFileSync, mkdtempSync, rmSync } from 'fs
 import { spawnSync } from 'child_process';
 import { tmpdir } from 'os';
 import type { FilterFunctionType } from '../FigmaComponentsBuilder';
+import createDebug from 'debug';
+
+const debug = createDebug('design-system-importer:filter-loader');
+const debugLoad = createDebug('design-system-importer:filter-loader:load');
+const debugTS = createDebug('design-system-importer:filter-loader:typescript');
+const debugStrategy = createDebug('design-system-importer:filter-loader:strategy');
+const debugTemplate = createDebug('design-system-importer:filter-loader:template');
 
 export class FilterLoader {
   private templatesDir: string;
 
   constructor() {
+    debug('FilterLoader instance created');
     // Get the directory where template files are stored
     const currentFile = fileURLToPath(import.meta.url);
     this.templatesDir = join(dirname(currentFile), 'templates');
+    debug('Templates directory: %s', this.templatesDir);
   }
 
   async loadFilter(filePath: string): Promise<FilterFunctionType> {
+    debugLoad('Loading filter from: %s', filePath);
+
     if (typeof filePath !== 'string' || filePath.trim().length === 0) {
+      debugLoad('ERROR: Invalid filter path provided');
       throw new Error('Filter file path is required');
     }
 
     const absolutePath = resolvePath(process.cwd(), filePath);
+    debugLoad('Resolved absolute path: %s', absolutePath);
 
     if (!existsSync(absolutePath)) {
+      debugLoad('ERROR: Filter file not found at %s', absolutePath);
       throw new Error(`Filter file not found: ${absolutePath}`);
     }
 
     const ext = extname(absolutePath).toLowerCase();
+    debugLoad('File extension: %s', ext);
 
     // For TypeScript files, use tsx to load them
     if (ext === '.ts' || ext === '.tsx') {
+      debugLoad('Detected TypeScript file, using TypeScript loader');
       return this.loadTypeScriptFilter(absolutePath);
     }
 
     // For JavaScript files, load directly
+    debugLoad('Loading JavaScript file directly');
     const fileUrl = pathToFileURL(absolutePath).href;
+    debugLoad('File URL: %s', fileUrl);
+
     const loadedUnknown: unknown = await import(fileUrl);
     const loadedModule = loadedUnknown as { filter?: unknown; default?: unknown };
+    debugLoad('Module loaded, checking for filter function');
 
     if (typeof loadedModule.filter === 'function') {
+      debugLoad('Found named export "filter"');
       return loadedModule.filter as FilterFunctionType;
     }
 
     if (typeof loadedModule.default === 'function') {
+      debugLoad('Found default export, using as filter');
       console.warn('Using default export from filter module. Prefer a named export "filter".');
       return loadedModule.default as FilterFunctionType;
     }
 
+    debugLoad('ERROR: No filter function found in module');
     throw new Error('No filter function found. Export a function named "filter" or as a default export from the file.');
   }
 
   private async loadTypeScriptFilter(filePath: string): Promise<FilterFunctionType> {
+    debugTS('Loading TypeScript filter from: %s', filePath);
     // Create a temporary directory for our scripts
     const tempDir = mkdtempSync(join(tmpdir(), 'tsx-filter-'));
+    debugTS('Created temp directory: %s', tempDir);
 
     try {
       const filterUrl = pathToFileURL(filePath).href;
+      debugTS('Filter URL: %s', filterUrl);
 
       // Try different loading strategies in order
       const strategies = [
@@ -62,14 +88,19 @@ export class FilterLoader {
         () => this.tryNpxTsxExport(tempDir, filterUrl),
         () => this.tryNodeLoaderOptions(tempDir, filterUrl),
       ];
+      debugTS('Will try %d loading strategies', strategies.length);
 
-      for (const strategy of strategies) {
-        const result = await strategy();
+      for (let i = 0; i < strategies.length; i++) {
+        debugTS('Trying strategy %d/%d', i + 1, strategies.length);
+        const result = await strategies[i]();
         if (result) {
+          debugTS('Strategy %d succeeded!', i + 1);
           return result;
         }
+        debugTS('Strategy %d failed, trying next...', i + 1);
       }
 
+      debugTS('ERROR: All strategies failed to load TypeScript filter');
       throw new Error(
         `TypeScript filter cannot be loaded. ` +
           `Please ensure tsx is installed in your project:\n` +
@@ -77,25 +108,32 @@ export class FilterLoader {
           `Or provide a JavaScript version of your filter.`,
       );
     } catch (error) {
+      debugTS('ERROR: Failed to load TypeScript filter: %O', error);
       throw new Error(
         `Failed to load TypeScript filter.\n` +
           `Error: ${error instanceof Error ? error.message : String(error)}\n` +
           `Please ensure tsx is installed locally: npm install -D tsx`,
       );
     } finally {
+      debugTS('Cleaning up temp directory: %s', tempDir);
       // Clean up temp files
       try {
         rmSync(tempDir, { recursive: true, force: true });
-      } catch {
+        debugTS('Temp directory cleaned up successfully');
+      } catch (cleanupError) {
+        debugTS('Warning: Failed to clean up temp directory: %O', cleanupError);
         // Ignore cleanup errors
       }
     }
   }
 
   private async tryNodeDirectLoad(tempDir: string, filterUrl: string): Promise<FilterFunctionType | null> {
+    debugStrategy('Strategy: Node direct load');
     // First attempt: Try to run the loader script with Node.js directly
     const loaderFile = this.prepareTemplate(tempDir, 'tsx-loader.mjs', filterUrl);
+    debugStrategy('Prepared loader file: %s', loaderFile);
 
+    debugStrategy('Spawning node with experimental loader...');
     const result = spawnSync('node', [loaderFile], {
       cwd: process.cwd(),
       encoding: 'utf-8',
@@ -104,46 +142,69 @@ export class FilterLoader {
         NODE_OPTIONS: '--experimental-loader tsx',
       },
     });
+    debugStrategy('Node process exit code: %d', result.status);
 
     if (result.status === 0) {
+      debugStrategy('Node direct load succeeded, importing module');
       // Success! Now import the loader module to get the filter
       const loaderModule = (await import(pathToFileURL(loaderFile).href)) as { filter: FilterFunctionType };
+      debugStrategy('Filter function retrieved from module');
       return loaderModule.filter;
     }
 
+    debugStrategy('Node direct load failed');
+    if (result.stderr) {
+      debugStrategy('Error output: %s', result.stderr);
+    }
     return null;
   }
 
   private async tryNpxTsxExport(tempDir: string, filterUrl: string): Promise<FilterFunctionType | null> {
+    debugStrategy('Strategy: npx tsx export');
     // Second attempt: Use npx tsx to run a script that exports the filter
     const exportFile = this.prepareTemplate(tempDir, 'tsx-export.mjs', filterUrl);
+    debugStrategy('Prepared export file: %s', exportFile);
 
+    debugStrategy('Spawning npx tsx...');
     const npxResult = spawnSync('npx', ['tsx', exportFile], {
       cwd: process.cwd(),
       encoding: 'utf-8',
       shell: true,
     });
+    debugStrategy('npx process exit code: %d', npxResult.status);
 
     if (npxResult.status === 0 && npxResult.stdout) {
+      debugStrategy('npx tsx succeeded, parsing output');
       try {
         const output = JSON.parse(npxResult.stdout) as { success: boolean; filterCode?: string };
         if (output.success === true && typeof output.filterCode === 'string' && output.filterCode.length > 0) {
+          debugStrategy('Successfully parsed filter code, creating function');
           // Create a function from the filter code
           // eslint-disable-next-line @typescript-eslint/no-implied-eval, @typescript-eslint/no-unsafe-call
           const filter = new Function('return ' + output.filterCode)() as FilterFunctionType;
+          debugStrategy('Filter function created successfully');
           return filter;
         }
-      } catch {
+        debugStrategy('Output missing success flag or filter code');
+      } catch (parseError) {
+        debugStrategy('Failed to parse npx output: %O', parseError);
         // JSON parse failed, try another approach
       }
+    } else {
+      debugStrategy('npx tsx failed or no output');
+      if (npxResult.stderr) {
+        debugStrategy('Error output: %s', npxResult.stderr);
+      }
     }
 
     return null;
   }
 
   private async tryNodeLoaderOptions(tempDir: string, filterUrl: string): Promise<FilterFunctionType | null> {
+    debugStrategy('Strategy: Node loader options');
     // Third attempt: Create a wrapper that uses dynamic import with tsx
     const wrapperFile = this.prepareTemplate(tempDir, 'tsx-wrapper.mjs', filterUrl);
+    debugStrategy('Prepared wrapper file: %s', wrapperFile);
 
     // Try with various Node.js loader configurations
     const loaderOptions = [
@@ -152,53 +213,73 @@ export class FilterLoader {
       ['--require', 'tsx'],
       ['--import', 'tsx'],
     ];
+    debugStrategy('Will try %d loader configurations', loaderOptions.length);
 
     for (const options of loaderOptions) {
+      debugStrategy('Trying loader options: %s', options.join(' '));
       const testResult = spawnSync('node', [...options, wrapperFile], {
         cwd: process.cwd(),
         encoding: 'utf-8',
         env: { ...process.env },
       });
+      debugStrategy('Exit code: %d', testResult.status);
 
       if (testResult.status === 0) {
+        debugStrategy('Configuration works! Loading final filter');
         // This configuration works! Use it to load the actual filter
         const finalFile = this.prepareTemplate(tempDir, 'tsx-final-loader.mjs', filterUrl);
         const finalModule = (await import(pathToFileURL(finalFile).href)) as { filter: FilterFunctionType };
+        debugStrategy('Filter loaded successfully with options: %s', options.join(' '));
         return finalModule.filter;
+      } else if (testResult.stderr) {
+        debugStrategy('Error with %s: %s', options.join(' '), testResult.stderr);
       }
     }
 
+    debugStrategy('All loader options failed');
     return null;
   }
 
   private prepareTemplate(tempDir: string, templateName: string, filterPath: string): string {
+    debugTemplate('Preparing template: %s', templateName);
+    debugTemplate('Filter path: %s', filterPath);
     const templatePath = join(this.templatesDir, templateName);
     const outputPath = join(tempDir, templateName);
+    debugTemplate('Template path: %s', templatePath);
+    debugTemplate('Output path: %s', outputPath);
 
     // Read the template
     let content: string;
     if (existsSync(templatePath)) {
+      debugTemplate('Reading template from source');
       content = readFileSync(templatePath, 'utf-8');
     } else {
+      debugTemplate('Template not in source, checking dist');
       // Fallback to dist directory if running from compiled code
       const distTemplatePath = templatePath.replace('/src/', '/dist/');
+      debugTemplate('Checking dist path: %s', distTemplatePath);
       if (existsSync(distTemplatePath)) {
+        debugTemplate('Reading template from dist');
         content = readFileSync(distTemplatePath, 'utf-8');
       } else {
+        debugTemplate('ERROR: Template not found in source or dist');
         throw new Error(`Template not found: ${templateName}`);
       }
     }
 
     // Replace the placeholder with the actual filter path
     content = content.replace(/__FILTER_PATH__/g, filterPath);
+    debugTemplate('Replaced filter path placeholder');
 
     // Write the prepared script
     writeFileSync(outputPath, content);
+    debugTemplate('Written prepared script to: %s', outputPath);
 
     return outputPath;
   }
 
   cleanup(): void {
+    debug('FilterLoader cleanup called');
     // No cleanup needed
   }
 }