@auto-engineer/frontend-generator-react-graphql 0.13.3 → 0.15.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @auto-engineer/frontend-react-graphql-generator
 
+## 0.15.0
+
+### Minor Changes
+
+- version bump
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @auto-engineer/message-bus@0.15.0
+  - @auto-engineer/ai-gateway@0.15.0
+
+## 0.14.0
+
+### Minor Changes
+
+- Rewrite CLI and Pipeline
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @auto-engineer/ai-gateway@0.14.0
+  - @auto-engineer/message-bus@0.14.0
+
 ## 0.13.3
 
 ### Patch Changes

package/README.md

@@ -1,362 +1,193 @@
 # @auto-engineer/frontend-generator-react-graphql
 
-React client generation plugin for the Auto Engineer CLI that scaffolds GraphQL-powered frontend applications. This plugin creates type-safe React applications with tooling, design systems, and GraphQL integration.
+React frontend generator that scaffolds GraphQL-powered applications from IA schemas.
 
-## 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/frontend-generator-react-graphql
-```
-
-## Configuration
-
-Add this plugin to your `auto.config.ts`:
-
-```typescript
-export default {
-  plugins: [
-    '@auto-engineer/frontend-generator-react-graphql',
-    // ... other plugins
-  ],
-};
-```
-
-## Commands
-
-This plugin provides the following commands:
-
-- `generate:client` - Generate a React GraphQL client application
-- `copy:example` - Copy an example React GraphQL project template
-
-## What does this plugin do?
-
-The React GraphQL Generator creates React applications with GraphQL integration. It generates project scaffolding, configures build tools, sets up design systems, and creates type-safe GraphQL operations.
-
-## Key Features
-
-### Project Scaffolding
-
-- React project structure with TypeScript
-- Vite configuration for development and builds
-- ESLint and Prettier setup for code quality
-- Testing infrastructure with Vitest and Testing Library
+---
 
-### GraphQL Integration
+## Purpose
 
-- Apollo Client setup with type-safe operations
-- Code generation from GraphQL schemas
-- Optimistic updates and error handling patterns
-- Real-time subscriptions and caching strategies
+Without `@auto-engineer/frontend-generator-react-graphql`, you would have to manually scaffold React components, write GraphQL operations, configure Apollo Client, and integrate design system tokens by hand.
 
-### Design System Support
+This package generates complete React frontends from Information Architecture schemas. It creates type-safe components following atomic design principles, generates GraphQL operations, and configures Apollo Client with full codegen integration.
 
-- Design system options (Material-UI, shadcn/ui)
-- Theming and styling patterns
-- Responsive design with CSS techniques
-- Component library integration and customization
+---
 
-### Developer Experience
-
-- Hot module replacement for feedback
-- TypeScript for compile-time safety
-- IntelliSense and autocomplete support
-- Development tools and debugging
-
-## Available Starter Templates
-
-### shadcn/ui Starter
-
-React application using shadcn/ui components:
+## Installation
 
 ```bash
-auto copy:example --template=shadcn
+pnpm add @auto-engineer/frontend-generator-react-graphql
 ```
 
-Features:
+## Quick Start
 
-- shadcn/ui: Accessible components built with Radix UI
-- Tailwind CSS: Utility-first CSS framework
-- Apollo Client: GraphQL client with caching and state management
-- React Router: Client-side routing with type safety
-- Form Handling: React Hook Form with Zod validation
-- Toast Notifications: User feedback with react-hot-toast
-
-Project structure:
+```typescript
+import { generateClientCommandHandler } from '@auto-engineer/frontend-generator-react-graphql';
+
+const result = await generateClientCommandHandler.handle({
+  type: 'GenerateClient',
+  data: {
+    starter: 'shadcn',
+    targetDir: './client',
+    iaSchemaPath: './auto-ia.json',
+    gqlSchemaPath: './schema.graphql',
+    figmaVariablesPath: './figma-vars.json',
+  },
+  requestId: 'req-123',
+});
 
+console.log(result);
+// → { type: 'ClientGenerated', data: { targetDir: './client', components: [...] } }
 ```
-client/
-├── src/
-│   ├── components/
-│   │   ├── atoms/           # shadcn/ui components
-│   │   ├── molecules/       # Composed components
-│   │   └── organisms/       # Complex UI sections
-│   ├── pages/               # Application pages
-│   ├── hooks/               # Custom React hooks
-│   ├── lib/                 # Utilities and configuration
-│   ├── graphql/             # Generated GraphQL operations
-│   └── styles/              # Global styles and theme
-├── public/                  # Static assets
-└── package.json
-```
 
-### Material-UI Starter
+---
+
+## How-to Guides
 
-React application using Material-UI:
+### Generate via CLI
 
 ```bash
-auto copy:example --template=mui
+auto generate:client \
+  --starter=shadcn \
+  --target-dir=./client \
+  --ia-schema-path=./auto-ia.json \
+  --gql-schema-path=./schema.graphql \
+  --figma-variables-path=./figma-vars.json
 ```
 
-Features:
-
-- Material-UI (MUI): React components implementing Google's Material Design
-- Emotion: CSS-in-JS library for styling
-- Apollo Client: GraphQL integration with Material-UI components
-- React Router: Navigation with Material-UI integration
-- Theme Customization: Theming system
-- Responsive Design: Mobile-first approach with breakpoints
-
-## Generated Application Features
-
-### Type-Safe GraphQL Operations
-
-The generator creates fully typed GraphQL operations:
+### Generate Programmatically
 
 ```typescript
-// Generated types from GraphQL schema
-export interface User {
-  id: string;
-  name: string;
-  email: string;
-  avatar?: string;
-}
-
-// Generated Apollo hooks
-export const useGetUsersQuery = () => {
-  return useQuery<GetUsersQuery, GetUsersQueryVariables>(GET_USERS);
-};
-
-export const useCreateUserMutation = () => {
-  return useMutation<CreateUserMutation, CreateUserMutationVariables>(CREATE_USER);
-};
+import { generateClientCommandHandler } from '@auto-engineer/frontend-generator-react-graphql';
+
+const result = await generateClientCommandHandler.handle({
+  type: 'GenerateClient',
+  data: {
+    starter: 'shadcn',
+    targetDir: './client',
+    iaSchemaPath: './auto-ia.json',
+    gqlSchemaPath: './schema.graphql',
+    figmaVariablesPath: './figma-vars.json',
+  },
+});
 ```
 
-### Component Architecture
-
-Organized component structure following atomic design principles:
+### Use Material-UI Starter
 
 ```typescript
-// Atoms - Basic building blocks
-export function Button({ children, variant, ...props }: ButtonProps) {
-  return (
-    <button className={`btn btn-${variant}`} {...props}>
-      {children}
-    </button>
-  );
-}
-
-// Molecules - Combined atoms
-export function SearchBox({ onSearch, placeholder }: SearchBoxProps) {
-  return (
-    <div className="flex gap-2">
-      <Input placeholder={placeholder} />
-      <Button onClick={onSearch}>Search</Button>
-    </div>
-  );
-}
-
-// Organisms - Complex UI sections
-export function UserList({ users, onUserSelect }: UserListProps) {
-  return (
-    <div className="space-y-4">
-      <SearchBox onSearch={handleSearch} />
-      <div className="grid gap-4">
-        {users.map(user => (
-          <UserCard key={user.id} user={user} onClick={onUserSelect} />
-        ))}
-      </div>
-    </div>
-  );
-}
+const result = await generateClientCommandHandler.handle({
+  type: 'GenerateClient',
+  data: {
+    starter: 'mui',
+    targetDir: './client',
+    // ...other options
+  },
+});
 ```
 
-### Page Components
+---
+
+## API Reference
 
-Complete page implementations with routing:
+### Package Exports
 
 ```typescript
-export function UsersPage() {
-  const { data, loading, error } = useGetUsersQuery();
-  const [searchTerm, setSearchTerm] = useState('');
-
-  const filteredUsers = useMemo(() =>
-    data?.users.filter(user =>
-      user.name.toLowerCase().includes(searchTerm.toLowerCase())
-    ) || [],
-    [data?.users, searchTerm]
-  );
-
-  if (loading) return <LoadingSpinner />;
-  if (error) return <ErrorBoundary error={error} />;
-
-  return (
-    <PageLayout title="Users" breadcrumbs={[{ label: 'Users', href: '/users' }]}>
-      <UserList
-        users={filteredUsers}
-        onUserSelect={handleUserSelect}
-      />
-    </PageLayout>
-  );
-}
+import {
+  generateClientCommandHandler,
+  type GenerateClientCommand,
+  type GenerateClientEvents,
+  type ClientGeneratedEvent,
+  type ClientGenerationFailedEvent,
+} from '@auto-engineer/frontend-generator-react-graphql';
 ```
 
-## Build Configuration
-
-### Vite Setup
-
-Build configuration with:
-
-- Fast HMR for development
-- Production builds
-- Code splitting and lazy loading
-- Environment variable handling
-- Asset optimization
-
-### GraphQL Code Generation
-
-Type generation from GraphQL schemas:
+### GenerateClientCommand
 
 ```typescript
-// codegen.ts configuration
-import type { CodegenConfig } from '@graphql-codegen/cli';
-
-const config: CodegenConfig = {
-  schema: 'http://localhost:4000/graphql',
-  documents: ['src/**/*.{ts,tsx}'],
-  generates: {
-    './src/graphql/generated.ts': {
-      plugins: ['typescript', 'typescript-operations', 'typescript-react-apollo'],
-      config: {
-        withHooks: true,
-        withComponent: false,
-        withHOC: false,
-      },
-    },
-  },
-};
+type GenerateClientCommand = Command<
+  'GenerateClient',
+  {
+    starter?: 'shadcn' | 'mui';
+    starterDir?: string;
+    targetDir: string;
+    iaSchemaPath: string;
+    gqlSchemaPath: string;
+    figmaVariablesPath: string;
+  }
+>;
 ```
 
-## Configuration Options
-
-Customize generation through `auto.config.ts`:
+### ClientGeneratedEvent
 
 ```typescript
-export default {
-  plugins: [
-    [
-      '@auto-engineer/frontend-generator-react-graphql',
-      {
-        // Template selection
-        template: 'shadcn', // or 'mui'
-
-        // Build configuration
-        bundler: 'vite',
-
-        // GraphQL configuration
-        graphqlEndpoint: 'http://localhost:4000/graphql',
-        generateMocks: true,
-
-        // Styling approach
-        cssFramework: 'tailwind', // or 'emotion'
-
-        // Additional features
-        includeStorybook: true,
-        includePWA: false,
-        includeI18n: false,
-      },
-    ],
-  ],
-};
+type ClientGeneratedEvent = Event<
+  'ClientGenerated',
+  {
+    targetDir: string;
+    components: Array<{ type: string; filePath: string }>;
+  }
+>;
 ```
 
-## Integration with Other Plugins
-
-Works with the Auto Engineer ecosystem:
-
-- **@auto-engineer/server-generator-apollo-emmett**: Consumes GraphQL schemas from generated servers
-- **@auto-engineer/design-system-importer**: Integrates imported design tokens and components
-- **@auto-engineer/frontend-implementer**: Provides scaffolding for AI-powered implementation
-- **@auto-engineer/frontend-checks**: Validates generated applications
-- **@auto-engineer/information-architect**: Uses IA specifications for navigation structure
-
-## Development Workflow
-
-1. **Generate Client Application**:
-
-   ```bash
-   auto generate:client
-   ```
-
-2. **Start Development Server**:
-
-   ```bash
-   cd client
-   npm run start
-   ```
+### IAScheme Structure
 
-3. **Generate GraphQL Types** (when schema changes):
+```typescript
+interface IAScheme {
+  schema_description: string;
+  atoms: ComponentGroup<AtomSpec>;
+  molecules: ComponentGroup<MoleculeSpec>;
+  organisms: ComponentGroup<OrganismSpec>;
+  pages: PageGroup;
+}
+```
 
-   ```bash
-   npm run codegen
-   ```
+### Starter Templates
 
-4. **Build for Production**:
-   ```bash
-   npm run build
-   ```
+| Template | Stack |
+|----------|-------|
+| `shadcn` | React + Vite + shadcn/ui + Tailwind + Apollo |
+| `mui` | React + Vite + Material-UI + Apollo |
 
-## Testing Infrastructure
+---
 
-Generated applications include testing setup:
+## Architecture
 
-- Unit Testing: Vitest with React Testing Library
-- Component Testing: Isolated component testing
-- Integration Testing: Page-level testing with mocked GraphQL
-- E2E Testing: Playwright configuration for end-to-end tests
+```
+src/
+├── index.ts
+├── types.ts
+├── builder.ts
+├── configure-starter.ts
+├── run-codegen.ts
+├── scaffold-gql-operations.ts
+├── graphql-type-extractor.ts
+├── generator/
+│   ├── generateComponents.ts
+│   └── templates/
+├── commands/
+│   └── generate-client.ts
+├── shadcn-starter/
+└── mui-starter/
+```
 
-Example test:
+The following diagram shows the generation pipeline:
 
-```typescript
-describe('UserList Component', () => {
-  it('renders users correctly', async () => {
-    const mockUsers = [
-      { id: '1', name: 'John Doe', email: 'john@example.com' }
-    ];
-
-    render(
-      <MockedProvider mocks={[getUsersMock(mockUsers)]}>
-        <UserList />
-      </MockedProvider>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByText('John Doe')).toBeInTheDocument();
-    });
-  });
-});
+```mermaid
+flowchart TB
+    A[GenerateClient] --> B[Clone Starter]
+    B --> C[Generate Components]
+    C --> D[Write GraphQL Operations]
+    D --> E[Run Codegen]
+    E --> F[Configure Starter]
+    F --> G[ClientGenerated]
 ```
 
-## Performance Considerations
-
-Generated applications include:
+*Flow: Command clones starter, generates components from IA schema, writes GraphQL operations, runs codegen, applies Figma configuration.*
 
-- Code Splitting: Route-based and component-based splitting
-- Lazy Loading: Images and non-critical components
-- Bundle Analysis: Tools to analyze and optimize bundle size
-- Caching Strategies: Apollo Client caching and persistence
-- Optimization: Production build optimizations
+### Dependencies
 
-The React GraphQL Generator provides a foundation for building React applications with GraphQL, allowing developers to focus on business logic rather than configuration and setup.
+| Package | Usage |
+|---------|-------|
+| `@auto-engineer/ai-gateway` | AI-powered Figma variable mapping |
+| `@auto-engineer/message-bus` | Command handler infrastructure |
+| `ejs` | Template rendering |
+| `graphql` | GraphQL schema parsing |

package/dist/mui-starter/package.json

@@ -8,13 +8,9 @@
     "start": "vite",
     "build": "vite build",
     "build:dev": "vite build --mode development",
-    "lint": "eslint .",
     "preview": "vite preview",
     "codegen": "graphql-codegen --config codegen.ts",
-    "format": "prettier --write \"**/*.{js,ts,json,md,yml,yaml}\" --ignore-path ../../../.prettierignore --log-level warn",
     "type:check": "tsc --noEmit",
-    "lint:fix": "eslint .",
-    "format:fix": "prettier --write \"**/*.{js,ts,json,md,yml,yaml}\" --ignore-path ../../../.prettierignore --log-level warn",
     "auto-configure": "tsx auto-configure.ts"
   },
   "dependencies": {
@@ -49,7 +45,6 @@
     "commander": "^14.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.0",
     "@graphql-codegen/cli": "3.2.0",
     "@graphql-codegen/client-preset": "2.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
@@ -58,13 +53,8 @@
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"
   }
 }

package/dist/mui-starter/src/App.tsx

@@ -1,9 +1,9 @@
 import { ApolloProvider } from '@apollo/client';
+import { ThemeProvider } from '@mui/material';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { apolloClient } from '@/apolloClient';
 import { Index } from '@/pages/Index';
 import { NotFound } from '@/pages/NotFound';
-import { apolloClient } from '@/apolloClient';
-import { ThemeProvider } from '@mui/material';
 import { theme } from '@/theme.ts';
 
 export const App = () => (

package/dist/mui-starter/src/apolloClient.ts

@@ -1,4 +1,4 @@
-import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';
+import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';
 
 export const apolloClient = new ApolloClient({
   link: new HttpLink({

package/dist/mui-starter/src/hooks/use-toast.ts

@@ -172,7 +172,7 @@ function useToast() {
         listeners.splice(index, 1);
       }
     };
-  }, [state]);
+  }, []);
 
   return {
     ...state,

package/dist/mui-starter/src/pages/NotFound.tsx

@@ -1,5 +1,5 @@
-import { useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 export const NotFound = () => {
   const location = useLocation();

package/dist/mui-starter/vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite';
+import path from 'node:path';
 import react from '@vitejs/plugin-react';
-import path from 'path';
+import { defineConfig } from 'vite';
 import postcss from './postcss.config';
 
 // https://vitejs.dev/config/

package/dist/shadcn-starter/package.json

@@ -8,14 +8,10 @@
     "start": "vite",
     "build": "vite build",
     "build:dev": "vite build --mode development",
-    "lint": "eslint .",
     "preview": "vite preview",
     "codegen": "graphql-codegen --config codegen.ts",
-    "format": "prettier --write \"**/*.{js,ts,json,md,yml,yaml}\" --ignore-path ../../../.prettierignore --log-level warn",
     "type:check": "tsc --noEmit",
     "type-check": "tsc --noEmit",
-    "lint:fix": "eslint .",
-    "format:fix": "prettier --write \"**/*.{js,ts,json,md,yml,yaml}\" --ignore-path ../../../.prettierignore --log-level warn",
     "auto-configure": "tsx auto-configure.ts"
   },
   "dependencies": {
@@ -76,7 +72,6 @@
     "zod": "^3.25.63"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.0",
     "@graphql-codegen/cli": "3.2.0",
     "@graphql-codegen/client-preset": "2.1.0",
     "@graphql-typed-document-node/core": "^3.2.0",
@@ -87,14 +82,9 @@
     "@types/recharts": "^2.0.1",
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.11",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"
   }
 }

package/dist/shadcn-starter/postcss.config.ts

@@ -1,5 +1,5 @@
-import tailwindcss from 'tailwindcss';
 import autoprefixer from 'autoprefixer';
+import tailwindcss from 'tailwindcss';
 
 export default {
   plugins: [tailwindcss, autoprefixer],

package/dist/shadcn-starter/src/App.tsx

@@ -1,11 +1,11 @@
 import { ApolloProvider } from '@apollo/client';
+import type React from 'react';
 // import { Toaster } from '@/components/atoms/toaster';
 // import { Toaster as Sonner } from '@/components/atoms/sonner';
 // import { TooltipProvider } from '@/components/atoms/tooltip';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import { NotFound } from '@/pages/NotFound';
 import { apolloClient } from '@/apolloClient';
-import React from 'react';
+import { NotFound } from '@/pages/NotFound';
 
 // Type assertion workaround for React component type issues
 const ApolloProviderTyped = ApolloProvider as any;