@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,63 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2024-01-09
+
+### Added - Initial Release 🚀
+
+#### Core Features
+- Complete atomic architecture component library (atoms, molecules, organisms, templates)
+- Factory pattern for creating React applications with minimal boilerplate
+- Comprehensive design system with 8 semantic color palettes
+- Domain-driven UI system for automatic component selection
+
+#### Components
+- **UI Primitives**: Button, Card, Input, Select, Badge, Table, and more
+- **Data Components**: DataTable with smart rendering, StatCard, Chart, DataBadge
+- **Layout Components**: AppLayout, Sidebar, AppHeader with responsive design
+- **Templates**: AdminDashboard, DataTemplate, EntityManagement templates
+
+#### Hook Generation System
+- CLI tool for generating React hooks from OpenAPI specifications
+- Automatic detection of bulk operations
+- Full TypeScript type safety
+- TanStack Query integration
+
+#### Responsive Design
+- Progressive responsive system with custom breakpoints
+- Mobile-first approach with intelligent component adaptation
+- Dynamic view modes (table/card switching)
+
+#### Enhanced DataTemplate
+- Server-side operations (pagination, filtering, sorting)
+- Inline editing with validation and optimistic updates
+- Bulk operations UI (85% complete, awaiting API integration)
+- Progressive responsive design
+
+#### Developer Experience
+- Zero-config setup with sensible defaults
+- Automatic UI component selection based on data types
+- Built-in authentication patterns
+- Comprehensive TypeScript support
+
+### Infrastructure
+- Vite-based build system
+- ESLint rules for design system compliance
+- Local development testing setup
+- NPM package distribution ready
+
+### Documentation
+- Comprehensive README with examples
+- Atomic architecture guidelines
+- Hook generation guide
+- Design system documentation
+
+---
+
+This is the foundation release of Pattern Stack Frontend Patterns - a reusable React template for building production-ready applications with minimal boilerplate. 
+
+Built with ❤️ for developers who want to focus on business logic, not infrastructure.

package/LICENSE

@@ -0,0 +1,19 @@
+PROPRIETARY LICENSE
+
+Copyright (c) 2024 Pattern Stack
+
+All rights reserved.
+
+This software and associated documentation files (the "Software") are 
+proprietary and confidential. No part of this Software may be used, 
+copied, modified, merged, published, distributed, sublicensed, and/or 
+sold without the prior written permission of the copyright holder.
+
+This Software is provided for evaluation and development purposes only 
+by authorized parties.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, 
+DAMAGES OR OTHER LIABILITY ARISING FROM THE USE OF THIS SOFTWARE.
+
+For licensing inquiries or permission requests, contact the Pattern Stack team.

package/cli/cli/commands/generate-hooks.js

@@ -0,0 +1,291 @@
+"use strict";
+/**
+ * Generate Hooks Command
+ *
+ * Implementation of the `pattern-stack generate hooks` command
+ *
+ * Part of FRO-6: Generate Hooks Command
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateHooksCommand = generateHooksCommand;
+const fs_1 = require("fs");
+const path_1 = require("path");
+const parser_js_1 = require("../../src/codegen/openapi/parser.js");
+const type_generator_js_1 = require("../../src/codegen/openapi/type-generator.js");
+const client_generator_js_1 = require("../../src/codegen/openapi/client-generator.js");
+const hook_generator_js_1 = require("../../src/codegen/openapi/hook-generator.js");
+async function generateHooksCommand(source, options) {
+    try {
+        console.log('🚀 Pattern-Stack Hook Generator');
+        console.log('================================');
+        console.log();
+        // Load and parse OpenAPI specification
+        console.log('📥 Loading OpenAPI specification...');
+        const spec = await (0, parser_js_1.loadOpenAPISpec)(source);
+        console.log(`✅ Loaded: ${spec.info.title} v${spec.info.version}`);
+        console.log('🔍 Parsing specification...');
+        const parsed = await (0, parser_js_1.parseOpenAPI)(spec);
+        console.log(`✅ Found ${parsed.endpoints.length} endpoints, ${parsed.schemas.length} schemas`);
+        // Generate types
+        console.log('🏗️  Generating TypeScript types...');
+        const types = (0, type_generator_js_1.generateTypes)(parsed, {
+            prefix: options.prefix,
+            includeJSDoc: true,
+            includeExamples: true
+        });
+        // Generate API client
+        console.log('🔧 Generating API client...');
+        const client = (0, client_generator_js_1.generateAPIClient)(parsed, {
+            clientType: options.client,
+            includeAuth: true,
+            authType: options.auth,
+            includeInterceptors: true
+        });
+        // Generate React hooks
+        console.log('⚛️  Generating React hooks...');
+        const hooks = await (0, hook_generator_js_1.generateHooks)(parsed, {
+            includeInfiniteQueries: true,
+            includeOptimisticUpdates: true,
+            includeMutationHelpers: true,
+            enableConfidenceScoring: true
+        });
+        if (options.dryRun) {
+            console.log('\n📋 Dry run - files that would be generated:');
+            console.log('Types:');
+            console.log('  - schemas.ts');
+            console.log('  - endpoints.ts');
+            console.log('  - parameters.ts');
+            console.log('  - responses.ts');
+            console.log();
+            console.log('API Client:');
+            console.log('  - client.ts');
+            console.log('  - methods.ts');
+            console.log('  - types.ts');
+            console.log('  - config.ts');
+            console.log();
+            console.log('React Hooks:');
+            console.log('  - queries.ts');
+            console.log('  - mutations.ts');
+            console.log('  - keys.ts');
+            console.log('  - types.ts');
+            console.log();
+            console.log('Generated code preview:');
+            console.log('======================');
+            console.log();
+            console.log('Types (first 20 lines):');
+            console.log(types.schemas.split('\n').slice(0, 20).join('\n'));
+            console.log('\n...');
+            return;
+        }
+        // Create output directories
+        console.log(`📁 Creating output directory: ${options.output}`);
+        await ensureDir(options.output);
+        await ensureDir((0, path_1.join)(options.output, 'types'));
+        await ensureDir((0, path_1.join)(options.output, 'client'));
+        await ensureDir((0, path_1.join)(options.output, 'hooks'));
+        // Write type files
+        console.log('💾 Writing type definitions...');
+        await writeFile((0, path_1.join)(options.output, 'types', 'schemas.ts'), types.schemas);
+        await writeFile((0, path_1.join)(options.output, 'types', 'endpoints.ts'), types.endpoints);
+        await writeFile((0, path_1.join)(options.output, 'types', 'parameters.ts'), types.parameters);
+        await writeFile((0, path_1.join)(options.output, 'types', 'responses.ts'), types.responses);
+        await writeFile((0, path_1.join)(options.output, 'types', 'index.ts'), types.index);
+        // Write client files
+        console.log('💾 Writing API client...');
+        await writeFile((0, path_1.join)(options.output, 'client', 'client.ts'), client.client);
+        await writeFile((0, path_1.join)(options.output, 'client', 'methods.ts'), client.methods);
+        await writeFile((0, path_1.join)(options.output, 'client', 'types.ts'), client.types);
+        await writeFile((0, path_1.join)(options.output, 'client', 'config.ts'), client.config);
+        await writeFile((0, path_1.join)(options.output, 'client', 'index.ts'), client.index);
+        // Write hook files
+        console.log('💾 Writing React hooks...');
+        await writeFile((0, path_1.join)(options.output, 'hooks', 'queries.ts'), hooks.queries);
+        await writeFile((0, path_1.join)(options.output, 'hooks', 'mutations.ts'), hooks.mutations);
+        await writeFile((0, path_1.join)(options.output, 'hooks', 'keys.ts'), hooks.keys);
+        await writeFile((0, path_1.join)(options.output, 'hooks', 'types.ts'), hooks.types);
+        await writeFile((0, path_1.join)(options.output, 'hooks', 'index.ts'), hooks.index);
+        // Write confidence report if available
+        if (hooks.report) {
+            await writeFile((0, path_1.join)(options.output, 'hooks', 'confidence-report.md'), hooks.report);
+            console.log('📊 Generated confidence report');
+            // Check if there are low confidence names
+            const lowConfidenceCount = (hooks.report.match(/## Low Confidence Names/g) || []).length;
+            if (lowConfidenceCount > 0) {
+                console.log('\n⚠️  Some hook names have low confidence and may need review.');
+                console.log('Run `npm run review:hooks` to interactively review and improve them.');
+            }
+        }
+        // Write main index file
+        const mainIndex = `/**
+ * Generated API Integration
+ * 
+ * Auto-generated from OpenAPI specification: ${spec.info.title}
+ * Version: ${spec.info.version}
+ * Generated: ${new Date().toISOString()}
+ */
+
+export * from './types'
+export * from './client'
+export * from './hooks'
+
+// Quick start exports
+export { createAPIClient } from './client'
+export { queryKeys } from './hooks'`;
+        await writeFile((0, path_1.join)(options.output, 'index.ts'), mainIndex);
+        // Generate usage example
+        const usageExample = generateUsageExample(spec.info.title, options);
+        await writeFile((0, path_1.join)(options.output, 'example.ts'), usageExample);
+        console.log();
+        console.log('✅ Generation complete!');
+        console.log(`📦 Generated files in: ${options.output}`);
+        console.log();
+        console.log('🚀 Quick start:');
+        console.log(`import { createAPIClient, useGetUsers } from './${options.output}'`);
+        console.log();
+        console.log('💡 See example.ts for detailed usage instructions');
+    }
+    catch (error) {
+        console.error('❌ Generation failed:');
+        console.error(error instanceof Error ? error.message : error);
+        process.exit(1);
+    }
+}
+async function ensureDir(dir) {
+    try {
+        await fs_1.promises.mkdir(dir, { recursive: true });
+    }
+    catch (error) {
+        // Directory might already exist
+    }
+}
+async function writeFile(path, content) {
+    await ensureDir((0, path_1.dirname)(path));
+    await fs_1.promises.writeFile(path, content, 'utf8');
+}
+function generateUsageExample(apiTitle, options) {
+    return `/**
+ * ${apiTitle} - Usage Example
+ * 
+ * This file demonstrates how to use the generated API integration
+ */
+
+import React from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { createAPIClient, useGetUsers, useCreateUser } from './'
+
+// 1. Set up the API client
+const apiClient = createAPIClient({
+  baseUrl: 'https://api.example.com/v1',
+  ${options.auth === 'bearer' ? `getAuthToken: () => localStorage.getItem('authToken'),` : ''}
+  ${options.auth === 'apiKey' ? `getApiKey: () => process.env.REACT_APP_API_KEY,
+  apiKeyHeader: 'X-API-Key',` : ''}
+  onError: (error) => {
+    console.error('API Error:', error)
+    // Handle global errors (show toast, redirect to login, etc.)
+  }
+})
+
+// 2. Set up React Query
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      cacheTime: 10 * 60 * 1000, // 10 minutes
+    },
+  },
+})
+
+// 3. Wrap your app with providers
+function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <UserList />
+    </QueryClientProvider>
+  )
+}
+
+// 4. Use generated hooks in components
+function UserList() {
+  // Query hook with automatic loading, error, and data states
+  const { data: users, isLoading, error } = useGetUsers({
+    limit: 10
+  })
+
+  // Mutation hook with optimistic updates
+  const createUserMutation = useCreateUser({
+    onSuccess: () => {
+      console.log('User created successfully!')
+    },
+    onError: (error) => {
+      console.error('Failed to create user:', error)
+    }
+  })
+
+  const handleCreateUser = () => {
+    createUserMutation.mutate({
+      email: 'new@example.com',
+      name: 'New User'
+    })
+  }
+
+  if (isLoading) return <div>Loading users...</div>
+  if (error) return <div>Error: {error.message}</div>
+
+  return (
+    <div>
+      <h2>Users</h2>
+      <button 
+        onClick={handleCreateUser}
+        disabled={createUserMutation.isLoading}
+      >
+        {createUserMutation.isLoading ? 'Creating...' : 'Create User'}
+      </button>
+      
+      <ul>
+        {users?.map(user => (
+          <li key={user.id}>
+            {user.name} ({user.email})
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+// 5. Advanced usage with infinite queries
+function InfiniteUserList() {
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteGetUsers({
+    limit: 20
+  })
+
+  return (
+    <div>
+      {data?.pages.map((page, i) => (
+        <React.Fragment key={i}>
+          {page.map(user => (
+            <div key={user.id}>{user.name}</div>
+          ))}
+        </React.Fragment>
+      ))}
+      
+      <button
+        onClick={() => fetchNextPage()}
+        disabled={!hasNextPage || isFetchingNextPage}
+      >
+        {isFetchingNextPage
+          ? 'Loading more...'
+          : hasNextPage
+          ? 'Load More'
+          : 'Nothing more to load'}
+      </button>
+    </div>
+  )
+}
+
+export default App`;
+}

package/cli/cli/commands/init.js

@@ -0,0 +1,25 @@
+"use strict";
+/**
+ * Init Command
+ *
+ * Implementation of the `pattern-stack init` command
+ *
+ * Part of FRO-14: Domain Template Initialization
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initCommand = initCommand;
+async function initCommand(template = 'basic', options) {
+    console.log(`🚀 Initializing Pattern-Stack project with ${template} template`);
+    if (options.name) {
+        console.log(`📦 Project name: ${options.name}`);
+    }
+    if (options.dir) {
+        console.log(`📁 Target directory: ${options.dir}`);
+    }
+    console.log('\n⚠️  Template initialization not yet implemented');
+    console.log('This feature will be available in a future release.');
+    console.log('\nFor now, you can:');
+    console.log('1. Clone the Pattern-Stack repository');
+    console.log('2. Use the generate hooks command to create API integrations');
+    console.log('3. Use the scaffold command to create components');
+}

package/cli/cli/commands/scaffold.js

@@ -0,0 +1,201 @@
+"use strict";
+/**
+ * Scaffold Command
+ *
+ * Implementation of the `pattern-stack scaffold` command
+ *
+ * Part of FRO-15: Component Scaffolding Commands
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scaffoldCommand = scaffoldCommand;
+const fs_1 = require("fs");
+const path_1 = require("path");
+async function scaffoldCommand(type, name, options) {
+    console.log(`🏗️  Scaffolding ${type}: ${name}`);
+    switch (type) {
+        case 'component':
+            await scaffoldComponent(name, options);
+            break;
+        case 'feature':
+            await scaffoldFeature(name, options);
+            break;
+        case 'template':
+            await scaffoldTemplate(name, options);
+            break;
+        default:
+            console.error(`❌ Unknown scaffold type: ${type}`);
+            console.log('Available types: component, feature, template');
+            process.exit(1);
+    }
+}
+async function scaffoldComponent(name, options) {
+    const outputDir = options.output || `./src/atoms/composed/${name}`;
+    const componentContent = `/**
+ * ${name} Component
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import React from 'react'
+import { cn } from '../../utils/utils'
+
+export interface ${name}Props {
+  className?: string
+  children?: React.ReactNode
+}
+
+export function ${name}({ className, children, ...props }: ${name}Props) {
+  return (
+    <div className={cn("", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+${name}.displayName = "${name}"`;
+    const indexContent = `export { ${name} } from './${name}'
+export type { ${name}Props } from './${name}'`;
+    const testContent = `/**
+ * ${name} Component Tests
+ */
+
+import { render, screen } from '@testing-library/react'
+import { ${name} } from './${name}'
+
+describe('${name}', () => {
+  it('renders children', () => {
+    render(<${name}>Test content</${name}>)
+    expect(screen.getByText('Test content')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<${name} className="custom-class" />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+})`;
+    await ensureDir(outputDir);
+    await writeFile((0, path_1.join)(outputDir, `${name}.tsx`), componentContent);
+    await writeFile((0, path_1.join)(outputDir, 'index.ts'), indexContent);
+    await writeFile((0, path_1.join)(outputDir, `${name}.test.tsx`), testContent);
+    console.log(`✅ Component scaffolded: ${outputDir}`);
+}
+async function scaffoldFeature(name, options) {
+    const outputDir = options.output || `./src/features/${name.toLowerCase()}`;
+    // Feature hook
+    const hookContent = `/**
+ * ${name} Hooks
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import { useState, useEffect } from 'react'
+
+export function use${name}() {
+  const [data, setData] = useState(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<Error | null>(null)
+
+  // Add your logic here
+
+  return {
+    data,
+    loading,
+    error,
+    refetch: () => {
+      // Implement refetch logic
+    }
+  }
+}`;
+    // Feature component
+    const componentContent = `/**
+ * ${name} Component
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import React from 'react'
+import { use${name} } from '../hooks/use${name}'
+
+export interface ${name}ComponentProps {
+  className?: string
+}
+
+export function ${name}Component({ className }: ${name}ComponentProps) {
+  const { data, loading, error } = use${name}()
+
+  if (loading) return <div>Loading...</div>
+  if (error) return <div>Error: {error.message}</div>
+
+  return (
+    <div className={className}>
+      <h2>${name}</h2>
+      {/* Add your UI here */}
+    </div>
+  )
+}`;
+    // Feature index
+    const indexContent = `export { use${name} } from './hooks/use${name}'
+export { ${name}Component } from './components/${name}Component'
+export type { ${name}ComponentProps } from './components/${name}Component'`;
+    await ensureDir((0, path_1.join)(outputDir, 'hooks'));
+    await ensureDir((0, path_1.join)(outputDir, 'components'));
+    await writeFile((0, path_1.join)(outputDir, 'hooks', `use${name}.ts`), hookContent);
+    await writeFile((0, path_1.join)(outputDir, 'hooks', 'index.ts'), `export { use${name} } from './use${name}'`);
+    await writeFile((0, path_1.join)(outputDir, 'components', `${name}Component.tsx`), componentContent);
+    await writeFile((0, path_1.join)(outputDir, 'components', 'index.ts'), `export { ${name}Component } from './${name}Component'`);
+    await writeFile((0, path_1.join)(outputDir, 'index.ts'), indexContent);
+    console.log(`✅ Feature scaffolded: ${outputDir}`);
+}
+async function scaffoldTemplate(name, options) {
+    const outputDir = options.output || `./src/templates/${name.toLowerCase()}`;
+    const templateContent = `/**
+ * ${name} Template
+ * 
+ * Generated by Pattern-Stack CLI
+ */
+
+import React from 'react'
+import { PageTemplate } from '../PageTemplate'
+
+export interface ${name}TemplateProps {
+  title?: string
+  children?: React.ReactNode
+}
+
+export function ${name}Template({ 
+  title = "${name}",
+  children 
+}: ${name}TemplateProps) {
+  return (
+    <PageTemplate>
+      <div className="space-y-6">
+        <header>
+          <h1 className="text-3xl font-bold">{title}</h1>
+        </header>
+        
+        <main>
+          {children}
+        </main>
+      </div>
+    </PageTemplate>
+  )
+}`;
+    const indexContent = `export { ${name}Template } from './${name}Template'
+export type { ${name}TemplateProps } from './${name}Template'`;
+    await ensureDir(outputDir);
+    await writeFile((0, path_1.join)(outputDir, `${name}Template.tsx`), templateContent);
+    await writeFile((0, path_1.join)(outputDir, 'index.ts'), indexContent);
+    console.log(`✅ Template scaffolded: ${outputDir}`);
+}
+async function ensureDir(dir) {
+    try {
+        await fs_1.promises.mkdir(dir, { recursive: true });
+    }
+    catch (error) {
+        // Directory might already exist
+    }
+}
+async function writeFile(path, content) {
+    await ensureDir((0, path_1.dirname)(path));
+    await fs_1.promises.writeFile(path, content, 'utf8');
+}