@auto-engineer/frontend-generator-react-graphql 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,156 @@
+# @auto-engineer/frontend-react-graphql-generator
+
+## 0.1.1
+
+### Patch Changes
+
+- renamed packages
+- Updated dependencies
+  - @auto-engineer/message-bus@0.5.2
+  - @auto-engineer/ai-gateway@0.6.2
+
+## 0.4.1
+
+### Patch Changes
+
+- version bump for testihng
+- Updated dependencies
+  - @auto-engineer/ai-gateway@0.6.1
+  - @auto-engineer/message-bus@0.5.1
+
+## 0.4.0
+
+### Minor Changes
+
+- Major overhaul of the plugin system
+
+### Patch Changes
+
+- Updated dependencies
+  - @auto-engineer/ai-gateway@0.6.0
+  - @auto-engineer/message-bus@0.5.0
+
+## 0.3.1
+
+### Patch Changes
+
+- Uses AI with a default provider
+- Updated dependencies
+  - @auto-engineer/ai-gateway@0.5.1
+
+## 0.3.0
+
+### Minor Changes
+
+- • All cli commands now use commands and emit events on the bus
+
+### Patch Changes
+
+- Updated dependencies
+  - @auto-engineer/ai-gateway@0.5.0
+  - @auto-engineer/message-bus@0.4.0
+
+## 0.2.4
+
+### Patch Changes
+
+- Add debug logging throughout packages for better debugging and issue tracking. Fix MCP server hanging issue in frontend-implementer by ensuring it only starts when run directly, not when imported as a module. The debug logs can be enabled by setting DEBUG environment variable (e.g., DEBUG=frontend-checks:_,frontend-impl:_)
+
+## 0.2.3
+
+### Patch Changes
+
+- TEST
+
+## 0.2.2
+
+### Patch Changes
+
+- TEST
+
+## 0.2.1
+
+### Patch Changes
+
+- version testing
+- Updated dependencies
+  - @auto-engineer/ai-gateway@0.4.3
+  - @auto-engineer/message-bus@0.3.3
+
+## 0.4.2
+
+### Patch Changes
+
+- Bump versions
+- Updated dependencies
+  - @auto-engineer/ai-gateway@0.4.2
+  - @auto-engineer/message-bus@0.3.2
+
+## 0.4.1
+
+### Patch Changes
+
+- Version bump to trigger builds
+- Updated dependencies
+  - @auto-engineer/ai-gateway@0.4.1
+  - @auto-engineer/message-bus@0.3.1
+
+## 0.4.0
+
+### Minor Changes
+
+- [#22](https://github.com/SamHatoum/auto-engineer/pull/22) [`927b39a`](https://github.com/SamHatoum/auto-engineer/commit/927b39a2c08c0baa1942b2955a8e8015e09364d9) Thanks [@SamHatoum](https://github.com/SamHatoum)! - Some major refactorings of the directory structure
+
+### Patch Changes
+
+- [`f3e97e5`](https://github.com/SamHatoum/auto-engineer/commit/f3e97e563b79ca8328e802dd502e65285ec58ce9) Thanks [@SamHatoum](https://github.com/SamHatoum)! - global version bump to test release process
+
+- Updated dependencies [[`f3e97e5`](https://github.com/SamHatoum/auto-engineer/commit/f3e97e563b79ca8328e802dd502e65285ec58ce9), [`927b39a`](https://github.com/SamHatoum/auto-engineer/commit/927b39a2c08c0baa1942b2955a8e8015e09364d9)]:
+  - @auto-engineer/ai-gateway@0.4.0
+  - @auto-engineer/message-bus@0.3.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [`330afa5`](https://github.com/SamHatoum/auto-engineer/commit/330afa565079e3b528d0f448d64919a8dc78d684) Thanks [@SamHatoum](https://github.com/SamHatoum)! - Fix multiple dependency issues
+
+### Patch Changes
+
+- Updated dependencies [[`330afa5`](https://github.com/SamHatoum/auto-engineer/commit/330afa565079e3b528d0f448d64919a8dc78d684)]:
+  - @auto-engineer/ai-gateway@0.3.0
+  - @auto-engineer/message-bus@0.2.0
+
+## 0.2.0
+
+### Minor Changes
+
+- [#24](https://github.com/SamHatoum/auto-engineer/pull/24) [`d4dcacd`](https://github.com/SamHatoum/auto-engineer/commit/d4dcacd18cf2217d3ac9f4354f79ab7ff2ba39a0) Thanks [@SamHatoum](https://github.com/SamHatoum)! - Making commands independent and CLI based
+
+- [#22](https://github.com/SamHatoum/auto-engineer/pull/22) [`e39acf3`](https://github.com/SamHatoum/auto-engineer/commit/e39acf31e9051652084d0de99cf8c89b40e6531c) Thanks [@SamHatoum](https://github.com/SamHatoum)! - Some major refactorings of the directory structure
+
+### Patch Changes
+
+- Updated dependencies [[`d4dcacd`](https://github.com/SamHatoum/auto-engineer/commit/d4dcacd18cf2217d3ac9f4354f79ab7ff2ba39a0), [`e39acf3`](https://github.com/SamHatoum/auto-engineer/commit/e39acf31e9051652084d0de99cf8c89b40e6531c)]:
+  - @auto-engineer/ai-gateway@0.2.0
+  - @auto-engineer/message-bus@0.1.0
+
+## 0.1.2
+
+### Patch Changes
+
+- Fix workspace:\* dependencies to use actual version numbers for npm publishing
+
+- Updated dependencies []:
+  - @auto-engineer/ai-gateway@0.1.2
+  - @auto-engineer/message-bus@0.0.3
+
+## 0.1.1
+
+### Patch Changes
+
+- Bump versions to fix npm publish conflicts
+
+- Updated dependencies []:
+  - @auto-engineer/ai-gateway@0.1.1
+  - @auto-engineer/message-bus@0.0.2

package/LICENSE

@@ -0,0 +1,10 @@
+Elastic License 2.0
+
+Copyright 2024 Sam Hatoum
+
+This software and associated documentation files (the "Software") are licensed under the Elastic License 2.0 (the "License"). You may not use this file except in compliance with the License.
+
+You may obtain a copy of the License at:
+https://www.elastic.co/licensing/elastic-license
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. 

package/README.md

@@ -0,0 +1,362 @@
+# @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.
+
+## 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
+
+- Apollo Client setup with type-safe operations
+- Code generation from GraphQL schemas
+- Optimistic updates and error handling patterns
+- Real-time subscriptions and caching strategies
+
+### Design System Support
+
+- 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:
+
+```bash
+auto copy:example --template=shadcn
+```
+
+Features:
+
+- 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:
+
+```
+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
+
+React application using Material-UI:
+
+```bash
+auto copy:example --template=mui
+```
+
+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:
+
+```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);
+};
+```
+
+### Component Architecture
+
+Organized component structure following atomic design principles:
+
+```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>
+  );
+}
+```
+
+### Page Components
+
+Complete page implementations with routing:
+
+```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>
+  );
+}
+```
+
+## 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:
+
+```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,
+      },
+    },
+  },
+};
+```
+
+## Configuration Options
+
+Customize generation through `auto.config.ts`:
+
+```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,
+      },
+    ],
+  ],
+};
+```
+
+## 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
+   ```
+
+3. **Generate GraphQL Types** (when schema changes):
+
+   ```bash
+   npm run codegen
+   ```
+
+4. **Build for Production**:
+   ```bash
+   npm run build
+   ```
+
+## Testing Infrastructure
+
+Generated applications include testing setup:
+
+- 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
+
+Example test:
+
+```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();
+    });
+  });
+});
+```
+
+## Performance Considerations
+
+Generated applications include:
+
+- 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
+
+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/dist/builder.d.ts

@@ -0,0 +1,7 @@
+export declare class FrontendScaffoldBuilder {
+    private starterFiles;
+    cloneStarter(_starterDir: string): Promise<this>;
+    private collectFiles;
+    build(outputDir: string): Promise<void>;
+}
+//# sourceMappingURL=builder.d.ts.map

package/dist/builder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"builder.d.ts","sourceRoot":"","sources":["../src/builder.ts"],"names":[],"mappings":"AAQA,qBAAa,uBAAuB;IAClC,OAAO,CAAC,YAAY,CAAkC;IAEhD,YAAY,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;YAUxC,YAAY;IAsJpB,KAAK,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;CAuB9C"}