@auto-engineer/design-system-importer 0.9.13 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @auto-engineer/design-system-importer
 
+## 0.10.0
+
+### Minor Changes
+
+- New templates and bug fixes
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @auto-engineer/message-bus@0.10.0
+
 ## 0.9.13
 
 ### Patch Changes

package/package.json

@@ -15,12 +15,12 @@
   "dependencies": {
     "figma-api": "2.0.2-beta",
     "tsx": "^3.12.7",
-    "@auto-engineer/message-bus": "0.9.13"
+    "@auto-engineer/message-bus": "0.10.0"
   },
   "devDependencies": {
-    "@auto-engineer/cli": "0.9.13"
+    "@auto-engineer/cli": "0.10.0"
   },
-  "version": "0.9.13",
+  "version": "0.10.0",
   "scripts": {
     "start": "tsx src/index.ts",
     "build": "tsc && tsx ../../scripts/fix-esm-imports.ts && cp -r src/utils/templates dist/src/utils/",

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

@@ -18,21 +18,24 @@ export type ImportDesignSystemCommand = Command<
 >;
 
 export type DesignSystemImportedEvent = Event<
-  'DesignSystemImported',
+  'ImportDesignSystemCompleted',
   {
     outputDir: string;
   }
 >;
 
 export type DesignSystemImportFailedEvent = Event<
-  'DesignSystemImportFailed',
+  'ImportDesignSystemFailed',
   {
     error: string;
     outputDir: string;
   }
 >;
 
-export const commandHandler = defineCommandHandler({
+export const commandHandler = defineCommandHandler<
+  ImportDesignSystemCommand,
+  (command: ImportDesignSystemCommand) => Promise<DesignSystemImportedEvent | DesignSystemImportFailedEvent>
+>({
   name: 'ImportDesignSystem',
   alias: 'import:design-system',
   description: 'Import Figma design system',
@@ -45,22 +48,20 @@ export const commandHandler = defineCommandHandler({
     },
     strategy: {
       description: 'Import mode (e.g., WITH_COMPONENT_SETS)',
-      required: false,
     },
     filterPath: {
       description: 'Optional filter file',
-      required: false,
     },
   },
   examples: [
     '$ auto import:design-system --output-dir=./.context --strategy=WITH_COMPONENT_SETS --filter-path=./shadcn-filter.ts',
   ],
-  handle: async (
-    command: ImportDesignSystemCommand,
-  ): Promise<DesignSystemImportedEvent | DesignSystemImportFailedEvent> => {
+  events: ['ImportDesignSystemCompleted', 'ImportDesignSystemFailed'],
+  handle: async (command: Command): Promise<DesignSystemImportedEvent | DesignSystemImportFailedEvent> => {
+    const typedCommand = command as ImportDesignSystemCommand;
     debug('CommandHandler executing for ImportDesignSystem');
-    const result = await handleImportDesignSystemCommandInternal(command);
-    if (result.type === 'DesignSystemImported') {
+    const result = await handleImportDesignSystemCommandInternal(typedCommand);
+    if (result.type === 'ImportDesignSystemCompleted') {
       debug('Command handler completed: success');
       debugResult('Design system imported successfully to %s', result.data.outputDir);
     } else {
@@ -100,7 +101,7 @@ async function loadFilterFunction(filterPath?: string): Promise<FilterFunctionTy
 
 function createSuccessEvent(command: ImportDesignSystemCommand, outputDir: string): DesignSystemImportedEvent {
   const successEvent: DesignSystemImportedEvent = {
-    type: 'DesignSystemImported',
+    type: 'ImportDesignSystemCompleted',
     data: { outputDir },
     timestamp: new Date(),
     requestId: command.requestId,
@@ -121,13 +122,13 @@ function createFailureEvent(
   debugResult('Error message: %s', errorMessage);
 
   const failureEvent: DesignSystemImportFailedEvent = {
-    type: 'DesignSystemImportFailed',
+    type: 'ImportDesignSystemFailed',
     data: { error: errorMessage, outputDir },
     timestamp: new Date(),
     requestId: command.requestId,
     correlationId: command.correlationId,
   };
-  debugResult('Returning failure event: DesignSystemImportFailed');
+  debugResult('Returning failure event: ImportDesignSystemFailed');
   debugResult('  Error: %s', errorMessage);
   debugResult('  Output directory: %s', outputDir);
   return failureEvent;

package/src/figma-importer.ts

@@ -1,7 +1,7 @@
 import * as path from 'path';
 import * as fs from 'fs/promises';
 import createDebug from 'debug';
-import { FigmaComponentsBuilder, type FilterFunctionType } from './FigmaComponentsBuilder.js';
+import { type FilterFunctionType } from './FigmaComponentsBuilder.js';
 import { generateMarkdownFromComponents } from './markdown-generator.js';
 
 const debug = createDebug('design-system-importer');
@@ -25,31 +25,40 @@ export async function importDesignSystemComponentsFromFigma(
   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();
-  }
+  // 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();
+  let figmaComponents: { name: string; description: string; thumbnail: string }[] = [];
 
   if (filterFn) {
     debugComponents('Applying custom filter function');
-    figmaComponentsBuilder.withFilter(filterFn);
+    // figmaComponentsBuilder.withFilter(filterFn);
+
+    const absolutePath = path.resolve(outputDir, 'figma-file.json');
+    const rawFigmaFile = await fs.readFile(absolutePath, 'utf-8');
+    const parsedFile = JSON.parse(rawFigmaFile) as {
+      root: { name: string; description: string; thumbnail: string }[];
+    };
+    const nodes = parsedFile.root;
+    figmaComponents = filterFn(nodes);
   }
 
   debugComponents('Building Figma components...');
-  const figmaComponents = figmaComponentsBuilder.build();
+  // const figmaComponents = figmaComponentsBuilder.build();
   debugComponents('Built %d Figma components', figmaComponents.length);
 
   console.log(figmaComponents.length);