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

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @auto-engineer/design-system-importer@0.4.8 build /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
+> @auto-engineer/design-system-importer@0.5.0 build /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
 > tsc && tsx ../../scripts/fix-esm-imports.ts && cp -r src/utils/templates dist/utils/
 
 Fixed ESM imports in dist/

package/.turbo/turbo-format.log

@@ -1,13 +1,15 @@
 
 
-> @auto-engineer/design-system-importer@0.4.7 format /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
+> @auto-engineer/design-system-importer@0.5.0 format /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
 > prettier --write "**/*.{js,ts,json,md,yml,yaml}" --ignore-path ../../.prettierignore
 
-CHANGELOG.mdCHANGELOG.md 28ms (unchanged)
-package.jsonpackage.json 20ms (unchanged)
-README.mdREADME.md 15ms (unchanged)
-src/commands/import-design-system.tssrc/commands/import-design-system.ts 52ms (unchanged)
-src/FigmaComponentsBuilder.tssrc/FigmaComponentsBuilder.ts 20ms (unchanged)
-src/index.tssrc/index.ts 16ms (unchanged)
-src/utils/FilterLoader.tssrc/utils/FilterLoader.ts 9ms (unchanged)
+CHANGELOG.mdCHANGELOG.md 27ms (unchanged)
+DEBUG.mdDEBUG.md 5ms (unchanged)
+package.jsonpackage.json 15ms (unchanged)
+README.mdREADME.md 35ms (unchanged)
+src/cli-manifest.tssrc/cli-manifest.ts 8ms (unchanged)
+src/commands/import-design-system.tssrc/commands/import-design-system.ts 28ms (unchanged)
+src/FigmaComponentsBuilder.tssrc/FigmaComponentsBuilder.ts 26ms (unchanged)
+src/index.tssrc/index.ts 13ms (unchanged)
+src/utils/FilterLoader.tssrc/utils/FilterLoader.ts 10ms (unchanged)
 tsconfig.jsontsconfig.json 1ms (unchanged)

package/.turbo/turbo-lint.log

@@ -1,5 +1,5 @@
 
 
-> @auto-engineer/design-system-importer@0.4.7 lint /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
+> @auto-engineer/design-system-importer@0.5.0 lint /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
 > eslint 'src/**/*.ts' --max-warnings 0 --config ../../eslint.config.ts
 

package/.turbo/turbo-test.log

@@ -1,12 +1,14 @@
-
-> @auto-engineer/design-system-importer@0.4.8 test /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
-> vitest run
-
-
- RUN  v3.2.4 /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
-
-No test files found, exiting with code 0
-
-include: **/*.specs.{js,ts}
-exclude:  **/.tmp/**, **/node_modules/**, **/dist/**
-
+
+
+> @auto-engineer/design-system-importer@0.5.0 test /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
+> vitest run
+
+[?25l
+ RUN  v3.2.4 /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
+
+No test files found, exiting with code 0
+
+include: **/*.specs.{js,ts}
+exclude:  **/.tmp/**, **/node_modules/**, **/dist/**
+
+[?25h

package/.turbo/turbo-type-check.log

@@ -1,4 +1,5 @@
-
-> @auto-engineer/design-system-importer@0.4.8 type-check /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
-> tsc --noEmit
-
+
+
+> @auto-engineer/design-system-importer@0.5.0 type-check /Users/sam/WebstormProjects/top/auto-engineer/packages/design-system-importer
+> tsc --noEmit
+

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @auto-engineer/design-system-importer
 
+## 0.5.0
+
+### Minor Changes
+
+- • All cli commands now use commands and emit events on the bus
+
+### Patch Changes
+
+- Updated dependencies
+  - @auto-engineer/message-bus@0.4.0
+
 ## 0.4.8
 
 ### Patch Changes

package/DEBUG.md

@@ -0,0 +1,195 @@
+# Debug Logging - Design System Importer
+
+This package uses the [debug](https://www.npmjs.com/package/debug) library for conditional logging.
+
+## Available Debug Namespaces
+
+- `design-importer:command` - Command handling
+- `design-importer:handler` - Import handler operations
+- `design-importer:filter` - Filter loading and application
+- `design-importer:result` - Result generation
+- `design-importer:builder` - Figma component builder
+- `design-importer:builder:api` - Figma API calls
+- `design-importer:builder:components` - Component extraction
+- `design-importer:builder:tree` - Tree walking operations
+
+## Enabling Debug Output
+
+Set the `DEBUG` environment variable to enable logging:
+
+```bash
+# Enable all design-importer logging
+DEBUG=design-importer:* pnpm import:design-system
+
+# Enable specific namespace
+DEBUG=design-importer:builder:api pnpm import:design-system
+
+# Enable builder operations
+DEBUG=design-importer:builder:* pnpm import:design-system
+
+# Enable all logging
+DEBUG=* pnpm import:design-system
+```
+
+## Examples
+
+### Debug Command Handling
+
+```bash
+DEBUG=design-importer:command pnpm import:design-system
+```
+
+Output example:
+
+```
+design-importer:command Handling ImportDesignSystemCommand
+design-importer:command   Output directory: ./output
+design-importer:command   Strategy: WITH_COMPONENT_SETS
+design-importer:command   Filter path: ./filters/custom-filter.js
+design-importer:command   Request ID: req-123
+design-importer:command   Correlation ID: corr-456
+```
+
+### Debug Figma API Operations
+
+```bash
+DEBUG=design-importer:builder:api pnpm import:design-system
+```
+
+Output example:
+
+```
+design-importer:builder:api Fetching Figma file: file-key-123
+design-importer:builder:api   Using strategy: WITH_COMPONENT_SETS
+design-importer:builder:api Making API request to Figma
+design-importer:builder:api Response received, status: 200
+design-importer:builder:api File document received, starting tree walk
+```
+
+### Debug Component Extraction
+
+```bash
+DEBUG=design-importer:builder:components pnpm import:design-system
+```
+
+Output example:
+
+```
+design-importer:builder:components Extracting component sets from Figma
+design-importer:builder:components Found 15 component sets
+design-importer:builder:components Processing component set: Button
+design-importer:builder:components   Variants: 8
+design-importer:builder:components   Properties: size, variant, state
+design-importer:builder:components Processing component set: Input
+design-importer:builder:components   Variants: 6
+design-importer:builder:components   Properties: size, state, type
+design-importer:builder:components Extracted 45 unique component instances
+```
+
+### Debug Tree Walking
+
+```bash
+DEBUG=design-importer:builder:tree pnpm import:design-system
+```
+
+Output example:
+
+```
+design-importer:builder:tree Starting tree walk from document root
+design-importer:builder:tree Visiting node: Page 1 (type: PAGE)
+design-importer:builder:tree   Has 5 children
+design-importer:builder:tree   Visiting node: Header Component (type: COMPONENT)
+design-importer:builder:tree     -> Found new instance: Header
+design-importer:builder:tree        Description: present
+design-importer:builder:tree        Thumbnail: present
+design-importer:builder:tree   Visiting node: Button Instance (type: INSTANCE)
+design-importer:builder:tree     -> Instance already tracked: Button
+design-importer:builder:tree Tree walk complete
+```
+
+### Debug Filter Operations
+
+```bash
+DEBUG=design-importer:filter pnpm import:design-system
+```
+
+Output example:
+
+```
+design-importer:filter Loading custom filter from: ./filters/custom-filter.js
+design-importer:filter FilterLoader instance created
+design-importer:filter Creating temporary file for filter
+design-importer:filter   Temp file: /tmp/filter-12345.mjs
+design-importer:filter Importing filter module
+design-importer:filter Filter function loaded successfully
+design-importer:filter Applying filter to component: Button
+design-importer:filter   Filter result: include
+design-importer:filter Applying filter to component: InternalComponent
+design-importer:filter   Filter result: exclude
+design-importer:filter Cleaning up FilterLoader
+```
+
+### Debug Result Handling
+
+```bash
+DEBUG=design-importer:result pnpm import:design-system
+```
+
+Output example:
+
+```
+design-importer:result Import completed successfully
+design-importer:result Returning success event: DesignSystemImported
+design-importer:result   Output directory: ./output
+design-importer:result   Components processed: 45
+design-importer:result   Files generated: 3
+```
+
+## Common Use Cases
+
+### Debug Full Import Process
+
+```bash
+DEBUG=design-importer:* pnpm import:design-system
+```
+
+### Debug Figma Operations Only
+
+```bash
+DEBUG=design-importer:builder:* pnpm import:design-system
+```
+
+### Debug with Filter Details
+
+```bash
+DEBUG=design-importer:filter,design-importer:builder:components pnpm import:design-system
+```
+
+### Debug API and Tree Walking
+
+```bash
+DEBUG=design-importer:builder:api,design-importer:builder:tree pnpm import:design-system
+```
+
+### Save Debug Output
+
+```bash
+DEBUG=design-importer:* pnpm import:design-system 2> design-import-debug.log
+```
+
+## Environment Variables
+
+Required for Figma API access:
+
+```bash
+FIGMA_ACCESS_TOKEN=your-figma-token
+FIGMA_FILE_ID=your-file-id
+```
+
+## Tips
+
+- Use `DEBUG=design-importer:builder:*` to see all Figma operations
+- Monitor API calls with `DEBUG=design-importer:builder:api`
+- Track component processing with `DEBUG=design-importer:builder:components`
+- Combine with other packages: `DEBUG=design-importer:*,ia:*`
+- Filter verbose output: `DEBUG=design-importer:*,-design-importer:builder:tree`

package/README.md

@@ -1,48 +1,75 @@
-# Design System Importer
+# @auto-engineer/design-system-importer
 
-Pull in your team’s design system to build consistent, on-brand apps—fast.  
-Easily sync shared styles, components, and tokens from design tools or code.
+Import your team's design system to build consistent, on-brand apps. Plugin for the Auto Engineer CLI that syncs shared styles, components, and tokens from design tools or code.
+
+## Installation
+
+This is a plugin for the Auto Engineer CLI. Install both the CLI and this plugin:
+
+```bash
+npm install -g @auto-engineer/cli
+npm install @auto-engineer/design-system-importer
+```
+
+## Configuration
+
+Add this plugin to your `auto.config.ts`:
+
+```typescript
+export default {
+  plugins: [
+    '@auto-engineer/design-system-importer',
+    // ... other plugins
+  ],
+};
+```
+
+## Commands
+
+This plugin provides the following commands:
+
+- `import:design-system` - Import a design system from Figma
 
 ## Available Importers
 
-- **Figma** – Import components directly from Figma. Use our [Auto plugin]() to export design tokens effortlessly.
+- **Figma** – Import components directly from Figma. Use our [Auto plugin]() to export design tokens.
 - **Code** – _(coming soon)_ Import tokens and components from an existing codebase.
-- **NPM Package** – _(coming soon)_ Pull in a published design system as a dependency.
+- **NPM Package** – _(coming soon)_ Import a published design system as a dependency.
 
 ## Figma Importer
 
-Sync your design system directly from Figma and integrate it into your local project.
+Import your design system directly from Figma and integrate it into your local project.
 
 ### Prerequisites
 
-- A **Figma Personal Access Token**
-- A **Professional Figma Plan** (or higher)
+- Figma Personal Access Token
+- Professional Figma Plan (or higher)
 
 ### Setup
 
-1. **Generate a personal access token**  
+1. Generate a personal access token  
    Follow [these instructions](https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens) from Figma.
 
-2. **Get your design system file ID**  
+2. Get your design system file ID  
    Open your Figma file and copy the part of the URL after `/design/`.
 
-3. **Configure environment variables**
+3. Configure environment variables
    - `FIGMA_PERSONAL_TOKEN` – The token from your Figma account
    - `FIGMA_FILE_ID` – The ID of the design file (found in the Figma URL after `/design/`)
 
-4. **Publish your components in Figma**  
-   Right-click anywhere → **Actions** → Search for “Publish changes to library”.
+4. Publish your components in Figma  
+   Right-click anywhere → Actions → Search for "Publish changes to library".
 
-   > _(Optional)_ If you're using a public design system, you may need to move the file into one of your own Figma projects first.
+   > (Optional) If you're using a public design system, you may need to move the file into one of your own Figma projects first.
 
-5. **Export tokens with the Auto plugin**
+5. Export tokens with the Auto plugin
    - Install the [Auto plugin]()
    - Run it inside your Figma file
-   - Click **"Export Tokens"**
+   - Click "Export Tokens"
    - Save the exported file inside the `.context` folder of your output directory
 
-6. **Run the importer**
+6. Run the importer
 
    ```bash
-   pnpm import:design-system
+   auto import:design-system
    ```

package/dist/FigmaComponentsBuilder.d.ts

@@ -6,6 +6,7 @@ export interface FigmaComponent {
 export type FilterFunctionType = (components: FigmaComponent[]) => FigmaComponent[];
 export declare class FigmaComponentsBuilder {
     components: FigmaComponent[];
+    constructor();
     withFigmaComponents(): Promise<this>;
     withFigmaComponentSets(): Promise<this>;
     withFilteredNamesForShadcn(): void;

package/dist/FigmaComponentsBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FigmaComponentsBuilder.d.ts","sourceRoot":"","sources":["../src/FigmaComponentsBuilder.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kBAAkB,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,CAAC;AAUpF,qBAAa,sBAAsB;IACjC,UAAU,EAAE,cAAc,EAAE,CAAM;IAE5B,mBAAmB;IAuBnB,sBAAsB;IA+B5B,0BAA0B,IAAI,IAAI;IA2BlC,UAAU,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI;IAQtC,yBAAyB;IAsF/B,KAAK;CAGN"}
+{"version":3,"file":"FigmaComponentsBuilder.d.ts","sourceRoot":"","sources":["../src/FigmaComponentsBuilder.ts"],"names":[],"mappings":"AA6BA,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,MAAM,kBAAkB,GAAG,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,CAAC;AAUpF,qBAAa,sBAAsB;IACjC,UAAU,EAAE,cAAc,EAAE,CAAM;;IAO5B,mBAAmB;IA8CnB,sBAAsB;IA2D5B,0BAA0B,IAAI,IAAI;IAwClC,UAAU,CAAC,MAAM,EAAE,kBAAkB,GAAG,IAAI;IAYtC,yBAAyB;IAwH/B,KAAK;CASN"}