create-auto-app 0.13.3 → 0.15.0

package/templates/kanban-todo/narratives/structure.narrative.ts

@@ -1,4 +1,5 @@
-import { experience, narrative, it } from '@auto-engineer/narrative';
+import { experience, it, narrative } from '@auto-engineer/narrative';
+
 narrative('App Structure', 'A8u1Ee4Sz', () => {
   experience('Application Layout', 'L9v2Ff5Tz').client(() => {
     it('display clean top navigation bar spanning full width');

package/templates/kanban-todo/narratives/todo-list.narrative.ts

@@ -1,18 +1,19 @@
+import type { Command, Event, State } from '@auto-engineer/narrative';
 import {
   command,
   data,
+  describe,
   example,
   gql,
+  it,
   narrative,
   query,
   rule,
-  describe,
-  it,
   sink,
   source,
   specs,
 } from '@auto-engineer/narrative';
-import type { Command, Event, State } from '@auto-engineer/narrative';
+
 type AddTodo = Command<
   'AddTodo',
   {

package/templates/kanban-todo/package.json

@@ -3,8 +3,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "auto": "node ../../packages/cli/dist/bin/auto.js",
-    "auto:debug": "DEBUG=auto:* node ../../packages/cli/dist/bin/auto.js",
+    "auto": "auto",
+    "auto:debug": "DEBUG=auto:* auto",
     "start": "dotenv -e .env -- pnpm --parallel start"
   },
   "dependencies": {
@@ -18,6 +18,7 @@
     "@auto-engineer/frontend-implementer": "workspace:*",
     "@auto-engineer/information-architect": "workspace:*",
     "@auto-engineer/message-bus": "workspace:*",
+    "@auto-engineer/pipeline": "workspace:*",
     "@auto-engineer/server-checks": "workspace:*",
     "@auto-engineer/server-generator-apollo-emmett": "workspace:*",
     "@auto-engineer/server-implementer": "workspace:*"

package/templates/questionnaires/README.md

@@ -0,0 +1,161 @@
+# Support Files
+
+Shared design system assets for Auto Engineer examples.
+
+---
+
+## Purpose
+
+This directory provides pre-configured design system files that other examples copy into their `.context/` directories. These files are consumed by the `@auto-engineer/design-system-importer` package and frontend generation plugins.
+
+---
+
+## Directory Structure
+
+```
+support-files/
+├── .env.example          # Environment variable template
+└── .context/
+    ├── design-system.md    # Component documentation
+    ├── figma-file.json     # Figma design tokens (~44MB)
+    └── shadcn-filter.ts    # Component filtering logic
+```
+
+---
+
+## File Descriptions
+
+### .env.example
+
+Template for Auto Engineer environment variables:
+
+```bash
+# AI Provider Keys
+ANTHROPIC_API_KEY=
+OPENAI_API_KEY=
+GEMINI_API_KEY=
+XAI_API_KEY=
+
+# Defaults
+DEFAULT_AI_PROVIDER=anthropic
+DEFAULT_AI_MODEL=claude-sonnet-4-20250514
+
+# Debug
+DEBUG=auto:*
+```
+
+### .context/design-system.md
+
+Generated markdown listing 55+ shadcn/ui components:
+
+| Category | Components |
+|----------|------------|
+| Form | button, checkbox, input, select, switch, textarea, slider |
+| Layout | accordion, card, dialog, drawer, sheet, tabs, separator |
+| Navigation | breadcrumb, menubar, navigation-menu, pagination |
+| Data | avatar, badge, calendar, data-table, table |
+| Feedback | alert, alert-dialog, progress, skeleton, toast, tooltip |
+
+### .context/figma-file.json
+
+Raw Figma API export containing design tokens:
+
+- **Spacing**: `spacing/0`, `spacing/px`, `spacing/1`...`spacing/96`
+- **Dimensions**: `w-0`, `h-0`, `h-px`, `w-full`, `h-screen`
+- **Scopes**: GAP, WIDTH_HEIGHT configurations
+
+### .context/shadcn-filter.ts
+
+Filter function for processing Figma components during import:
+
+**Excludes:**
+- Generic names: `image`, `slot`, `logo`, `icon`
+- Internal components: `toolbar`, `stepper`, `sidebar`
+
+**Includes:**
+- Valid component names (1-3 words, alphabetic)
+- `INSTANCE` type components
+- Hierarchy depth ≤ 3
+
+**Transforms:**
+- Converts to lowercase kebab-case
+- Deduplicates and sorts
+
+---
+
+## Usage
+
+### Copying to a Project
+
+From another example directory:
+
+```bash
+rm -rf .context && mkdir .context && cp ../support-files/.context/* ./.context
+```
+
+The `kanban-todo` example includes this in its clean script:
+
+```bash
+pnpm clean  # Runs the copy automatically
+```
+
+### Using with Design System Importer
+
+```bash
+auto import:design-system \
+  --output-dir=./.context \
+  --strategy=WITH_COMPONENT_SETS \
+  --filter-path=./shadcn-filter.ts
+```
+
+### Pipeline Integration
+
+In `auto.config.ts`, reference these files:
+
+```typescript
+.on('IAGenerated')
+.emit('GenerateClient', () => ({
+  figmaVariablesPath: resolvePath('./.context/figma-file.json'),
+}))
+
+.emit('ImplementComponent', (c) => ({
+  designSystemPath: resolvePath('./.context/design-system.md'),
+}))
+```
+
+---
+
+## Regenerating Files
+
+To regenerate from a Figma source:
+
+```bash
+# Set credentials
+export FIGMA_PERSONAL_TOKEN=your-token
+export FIGMA_FILE_ID=your-file-id
+
+# Run importer
+auto import:design-system \
+  --output-dir=./.context \
+  --strategy=WITH_ALL_FIGMA_INSTANCES \
+  --filter-path=./shadcn-filter.ts
+```
+
+**Import Strategies:**
+
+| Strategy | Description |
+|----------|-------------|
+| `WITH_COMPONENTS` | Individual components only |
+| `WITH_COMPONENT_SETS` | Component sets (default) |
+| `WITH_ALL_FIGMA_INSTANCES` | Full document traversal |
+
+---
+
+## Related Packages
+
+| Package | Relationship |
+|---------|--------------|
+| `@auto-engineer/design-system-importer` | Consumes filter, produces design-system.md |
+| `@auto-engineer/frontend-generator-react-graphql` | Uses figma-file.json for tokens |
+| `@auto-engineer/component-implementer` | Uses design-system.md for constraints |
+| `@auto-engineer/information-architect` | References component list for IA |

package/templates/questionnaires/.gitignore

@@ -1,4 +0,0 @@
-.context
-server
-client
-/.context/

package/templates/questionnaires/auto.config.ts

@@ -1,239 +0,0 @@
-import { autoConfig, on, dispatch } from '@auto-engineer/cli';
-import type { ExportSchemaCommand, ExportSchemaEvents } from '@auto-engineer/narrative';
-import type { GenerateServerCommand, GenerateServerEvents } from '@auto-engineer/server-generator-apollo-emmett';
-import type {
-  ImplementServerCommand,
-  ImplementServerEvents,
-  ImplementSliceEvents,
-  ImplementSliceCommand,
-} from '@auto-engineer/server-implementer';
-import type {
-  CheckTestsCommand,
-  CheckTestsEvents,
-  CheckTypesCommand,
-  CheckTypesEvents,
-  CheckLintCommand,
-  CheckLintEvents,
-  TestsCheckFailedEvent,
-  TypeCheckFailedEvent,
-  LintCheckFailedEvent,
-} from '@auto-engineer/server-checks';
-import type { GenerateIACommand, GenerateIAEvents } from '@auto-engineer/information-architect';
-import type { ImplementClientCommand, ImplementClientEvents } from '@auto-engineer/frontend-implementer';
-import type { GenerateClientCommand, GenerateClientEvents } from '@auto-engineer/frontend-generator-react-graphql';
-import {
-  CheckClientCommand,
-  CheckClientEvents,
-  ClientCheckFailedEvent,
-} from '../../packages/frontend-checks/dist/src/commands/check-client';
-import { SliceGeneratedEvent } from '../../packages/server-generator-apollo-emmett/dist/src/commands/generate-server';
-
-export default autoConfig({
-  fileId: 'test44444', // unique 9-character base62 canvas file id where all flows in this project will be shown
-
-  plugins: [
-    '@auto-engineer/server-checks',
-    '@auto-engineer/design-system-importer',
-    '@auto-engineer/server-generator-apollo-emmett',
-    '@auto-engineer/narrative',
-    '@auto-engineer/frontend-checks',
-    '@auto-engineer/frontend-implementer',
-    '@auto-engineer/component-implementer',
-    '@auto-engineer/information-architect',
-    '@auto-engineer/frontend-generator-react-graphql',
-    '@auto-engineer/server-implementer',
-  ],
-  aliases: {
-    // Resolve command name conflicts between packages
-    // 'test:types': checkTypesCommandHandler,
-  },
-  pipeline: () => {
-    on<ExportSchemaEvents>('SchemaExported', () =>
-      dispatch<GenerateServerCommand>('GenerateServer', {
-        modelPath: './.context/schema.json',
-        destination: '.',
-      }),
-    );
-    on<SliceGeneratedEvent>('SliceGenerated', (e) =>
-      dispatch<ImplementSliceCommand>('ImplementSlice', {
-        slicePath: e.data.slicePath,
-        context: {
-          previousOutputs: 'errors',
-          attemptNumber: 0,
-        },
-      }),
-    );
-
-    on<ImplementSliceEvents>('SliceImplemented', (e) =>
-      dispatch<CheckTestsCommand>('CheckTests', {
-        targetDirectory: e.data.slicePath,
-        scope: 'slice',
-      }),
-    );
-
-    on<ImplementSliceEvents>('SliceImplemented', (e) =>
-      dispatch<CheckTypesCommand>('CheckTypes', {
-        targetDirectory: e.data.slicePath,
-        scope: 'slice',
-      }),
-    );
-
-    on<ImplementSliceEvents>('SliceImplemented', (e) =>
-      dispatch<CheckLintCommand>('CheckLint', {
-        targetDirectory: e.data.slicePath,
-        scope: 'slice',
-        fix: true,
-      }),
-    );
-
-    on<ImplementSliceEvents>('SliceImplemented', (e) =>
-      dispatch<CheckTestsCommand>('CheckTests', {
-        targetDirectory: e.data.slicePath,
-        scope: 'slice',
-      }),
-    );
-
-    on<ImplementSliceEvents>('SliceImplemented', (e) =>
-      dispatch<CheckTypesCommand>('CheckTypes', {
-        targetDirectory: e.data.slicePath,
-        scope: 'slice',
-      }),
-    );
-
-    on<ImplementSliceEvents>('SliceImplemented', (e) =>
-      dispatch<CheckLintCommand>('CheckLint', {
-        targetDirectory: e.data.slicePath,
-        scope: 'slice',
-        fix: true,
-      }),
-    );
-
-    on.settled<CheckTestsCommand, CheckTypesCommand, CheckLintCommand>(
-      ['CheckTests', 'CheckTypes', 'CheckLint'],
-      dispatch<ImplementSliceCommand>(['ImplementSlice'], (events, send) => {
-        const hasFailures =
-          events.CheckTests.some((e: CheckTestsEvents) => e.type === 'TestsCheckFailed') ||
-          events.CheckTypes.some((e: CheckTypesEvents) => e.type === 'TypeCheckFailed') ||
-          events.CheckLint.some((e: CheckLintEvents) => e.type === 'LintCheckFailed');
-
-        if (hasFailures) {
-          send({
-            type: 'ImplementSlice',
-            data: {
-              slicePath: (events.CheckTests[0] as CheckTestsEvents).data.targetDirectory,
-              context: {
-                previousOutputs:
-                  events.CheckTests.filter((e): e is TestsCheckFailedEvent => e.type === 'TestsCheckFailed')
-                    .map((e) => e.data.errors)
-                    .join('\n') +
-                  events.CheckTypes.filter((e): e is TypeCheckFailedEvent => e.type === 'TypeCheckFailed')
-                    .map((e) => e.data.errors)
-                    .join('\n') +
-                  events.CheckLint.filter((e): e is LintCheckFailedEvent => e.type === 'LintCheckFailed')
-                    .map((e) => e.data.errors)
-                    .join('\n'),
-                attemptNumber: 0,
-              },
-            },
-          });
-        }
-      }),
-    );
-
-    on<GenerateServerEvents>('ServerGenerated', () =>
-      dispatch<GenerateIACommand>('GenerateIA', {
-        modelPath: './.context/schema.json',
-        outputDir: './.context',
-      }),
-    );
-
-    on<GenerateIAEvents>('IAGenerated', () =>
-      dispatch<GenerateClientCommand>('GenerateClient', {
-        targetDir: './client',
-        iaSchemaPath: './.context/auto-ia-scheme.json',
-        gqlSchemaPath: './.context/schema.graphql',
-        figmaVariablesPath: './.context/figma-file.json',
-      }),
-    );
-
-    on<GenerateClientEvents>('ClientGenerated', () =>
-      dispatch<ImplementClientCommand>('ImplementClient', {
-        projectDir: './client',
-        iaSchemeDir: './.context',
-        designSystemPath: './.context/design-system.md',
-      }),
-    );
-
-    // on<ImplementClientEvents>('ClientImplemented', () =>
-    //   dispatch<CheckClientCommand>('CheckClient', {
-    //     clientDirectory: './client',
-    //     skipBrowserChecks: true,
-    //   }),
-    // );
-
-    on<CheckClientEvents>('ClientChecked', (e) => {
-      if (e.type === 'ClientChecked') {
-        const hasErrors = e.data.tsErrors > 0 || e.data.buildErrors > 0 || e.data.consoleErrors > 0;
-
-        if (hasErrors) {
-          const failures = [
-            ...(e.data.tsErrorDetails || []),
-            ...(e.data.buildErrorDetails || []),
-            ...(e.data.consoleErrorDetails || []),
-          ];
-          return dispatch<ImplementClientCommand>('ImplementClient', {
-            projectDir: './client',
-            iaSchemeDir: './.context',
-            designSystemPath: './.context/design-system.md',
-            failures,
-          });
-        }
-      }
-    });
-  },
-});
-/*
-
-rm -rf server client .context/schema.json .context/schema.graphql .context/auto-ia-scheme.json 
-pnpm auto export:schema
-pnpm auto generate:ia --output-dir=./.context --flow-files=./narratives/questionnaires.narrative.ts
-pnpm auto generate:server --schema-path=./.context/schema.json --destination=.
-pnpm auto generate:client --starter-dir=../../packages/frontend-generator-react-graphql/shadcn-starter --target-dir=./client  --ia-schema-path=./.context/auto-ia-scheme.json  --gql-schema-path=./.context/schema.graphql  --figma-variables-path=./.context/figma-file.json
-pnpm auto implement:client --project-dir=./questionnaires/client --ia-scheme-dir=./questionnaires/.context --design-system-path=./questionnaires/.context/design-system.md
-
-
-// make this emit one slice at a time
-pnpm auto generate:server --schema-path=./.context/schema.json --destination=.
-
-// TODO remove the AI part and make it mathematical
-pnpm auto generate:client --starter-dir=/Users/sam/WebstormProjects/top/auto-engineer/packages/frontend-generator-react-graphql/shadcn-starter  --target-dir=./client  --ia-schema-path=./.context/auto-ia-scheme.json  --gql-schema-path=./.context/schema.graphql  --figma-variables-path=./.context/figma-file.json
-
-// run this per slice in parallel
-pnpm auto implement:slice --slice-path=./questionnaires/server/src/domain/narratives/questionnaires/submits-the-questionnaire
-// add checks
-// add retry logic tore-implement failed slices with a retry count
-
-// slice these up
-pnpm auto implement:client --project-dir=./questionnaires/client --ia-scheme-dir=./questionnaires/.context --design-system-path=./questionnaires/.context/design-system.md
-
-
-// implement atoms in parallel - how do I know all atoms are done?
-// implement molecules in parallel - how do I know all molecules are done?
-// implement organisms in parallel - how do I know all organisms are done?
-// implement pages in parallel - how do I know all pages are done?
-
-
-// generate slice > implement slice > check slice > retry failure 3 times > 
-// generate slice > implement slice > check slice > retry failure 3 times > 
-// generate slice > implement slice > check slice > retry failure 3 times > 
-
-cd ~/WebstormProjects/top/auto-engineer/examples/questionnaires &&\
-pnpm -w build &&\
-rm -rf server client .context/schema.json .context/schema.graphql .context/auto-ia-scheme.json &&\
-DEBUG=* pnpm auto export:schema &&\
-DEBUG=* pnpm auto generate:server --schema-path=./.context/schema.json --destination=. &&\
-DEBUG=* pnpm auto generate:ia --output-dir=./.context --flow-files=./narratives/questionnaires.narrative.ts &&\
-DEBUG=* pnpm auto generate:client --starter-dir=../../packages/frontend-generator-react-graphql/shadcn-starter --target-dir=./client  --ia-schema-path=./.context/auto-ia-scheme.json  --gql-schema-path=./.context/schema.graphql  --figma-variables-path=./.context/figma-file.json
-
-
-*/

package/templates/questionnaires/narratives/homepage.narrative.ts

@@ -1,103 +0,0 @@
-import { experience, narrative, it } from '@auto-engineer/narrative';
-narrative('Home Screen', 'cDAZP41Kb', () => {
-  experience('Active Surveys Summary', 'aifPcU3hw').client(() => {
-    it('show active surveys summary and response rate overview');
-  });
-  experience('Recent Survey Responses', 'B2gF5k9Xj').client(() => {
-    it('display recent survey responses list');
-  });
-  experience('Completion Rate Progress', 'C3hG6l0Yk').client(() => {
-    it('show visual progress of completion rate goals');
-  });
-  experience('Quick Access Actions', 'D4iH7m1Zl').client(() => {
-    it('show quick access buttons for Create Survey, Analytics, Templates');
-  });
-});
-narrative('Create Survey', 'OnuAvj45V', () => {
-  experience('Create Survey Form', 'MPviTMrQC').client(() => {
-    it('allow entering survey title, description, and question types');
-  });
-  experience('Question Templates Selection', 'E5jI8n2Am').client(() => {
-    it('show recent/frequent question templates for quick selection');
-  });
-  experience('Survey Creation Confirmation', 'F6kJ9o3Bn').client(() => {
-    it('display confirmation toast after creating survey');
-  });
-  experience('Real-time Dashboard Updates', 'G7lK0p4Co').client(() => {
-    it('update survey dashboard and analytics in real-time');
-  });
-});
-narrative('Response Analytics', 'dRYuxORz0', () => {
-  experience('Response Rate Charts', 'eME978Euk').client(() => {
-    it('show daily response rate charts');
-    it('show weekly response rate charts');
-  });
-  experience('High Engagement Survey Highlights', 'H8mL1q5Dp').client(() => {
-    it('highlight surveys with highest engagement');
-  });
-  experience('Analytics Filtering', 'I9nM2r6Eq').client(() => {
-    it('allow filtering by survey type or date range');
-  });
-  experience('Real-time Analytics Updates', 'J0oN3s7Fr').client(() => {
-    it('update dynamically when new responses are received');
-  });
-});
-narrative('Manage Templates', 'KFxx8k1ul', () => {
-  experience('Templates List View', 'TRJBgM1JS').client(() => {
-    it('list all survey templates with usage count and last modified date');
-  });
-  experience('Template Management Actions', 'K1pO4t8Gs').client(() => {
-    it('allow creating, editing, and deleting survey templates');
-  });
-  experience('Template Usage Statistics', 'L2qP5u9Ht').client(() => {
-    it('show monthly summary of template usage statistics');
-  });
-  experience('Popular Templates Highlights', 'M3rQ6v0Iu').client(() => {
-    it('highlight most popular and recently used templates');
-  });
-});
-narrative('Survey Completion Tracker', 'wXdtfGpFr', () => {
-  experience('Completion Rate Progress View', 'oDBBOUNzr').client(() => {
-    it('show current completion rate and target progress');
-  });
-  experience('Target Setting Interface', 'N4sR7w1Jv').client(() => {
-    it('allow setting completion rate targets');
-  });
-  experience('Automatic Completion Tracking', 'O5tS8x2Kw').client(() => {
-    it('automatically track new survey completions');
-  });
-  experience('Shell Progress Bar Display', 'P6uT9y3Lx').client(() => {
-    it('display visual completion progress bar consistently in shell');
-  });
-});
-narrative('Response Goals Tracker', 'W8dytm3oC', () => {
-  experience('Response Target Setting', 'Idmim68Yf').client(() => {
-    it('allow setting monthly/weekly response targets');
-  });
-  experience('Response Target Progress Bar', 'Q7vU0z4My').client(() => {
-    it('show remaining response targets as a progress bar');
-  });
-  experience('Underperforming Survey Highlights', 'R8wV1a5Nz').client(() => {
-    it('highlight underperforming surveys');
-  });
-  experience('Real-time Goals Updates', 'S9xW2b6Oa').client(() => {
-    it('update in real-time when responses are received');
-  });
-});
-narrative('Response History', 'JizW21yrr', () => {
-  experience('Response History List', 'cIpwPlqRq').client(() => {
-    it('allow viewing full response history');
-  });
-  experience('Response History Filtering', 'T0yX3c7Pb').client(() => {
-    it('filter by survey type, date, or completion status');
-  });
-  experience('Detailed Response View', 'U1zY4d8Qc').client(() => {
-    it('view detailed response data and export individual responses');
-  });
-  experience('Response Export Functionality', 'V2aZ5e9Rd').client(() => {
-    it('export individual responses');
-  });
-  experience('Response Engagement Contribution', 'W3ba6f0Se').client(() => {
-    it('show contribution of each response to daily/weekly/monthly engagement totals');
-  });
-});