@pattern-stack/frontend-patterns 0.1.0 → 0.1.2

package/src/templates/factory.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import type { ReactNode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { AuthProvider } from '../features/auth'
+import { SidebarProvider } from '../molecules/layout'
+import { AppLayout } from '../molecules/layout'
+import { DashboardTemplate } from './DashboardTemplate'
+import type { AuthConfig } from '../atoms/types'
+
+// App configuration interface
+export interface AppConfig {
+  title: string
+  description?: string
+  version?: string
+  enableAuth?: boolean
+  enableQuery?: boolean
+  enableTheming?: boolean
+  enableRouting?: boolean
+  apiUrl?: string
+  apiTimeout?: number
+  theme?: string
+  darkMode?: boolean
+  auth?: AuthConfig
+  customProviders?: React.ComponentType<{ children: ReactNode }>[]
+}
+
+// App instance interface
+export interface AppInstance {
+  render: () => ReactNode
+  addRoutes: (path: string, component: ReactNode) => void
+  mount: (elementId?: string) => void
+}
+
+// Main app factory function
+export function createReactApp(config: AppConfig | string): AppInstance {
+  // Handle simple string config
+  const appConfig: AppConfig = typeof config === 'string' 
+    ? { title: config }
+    : config
+
+  // Set defaults
+  const {
+    title,
+    description = `${title} Application`,
+    version = '1.0.0',
+    enableAuth = true,
+    enableQuery = true,
+    enableRouting = true,
+    auth,
+    customProviders = []
+  } = appConfig
+
+  // Initialize query client
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: 1,
+        refetchOnWindowFocus: false,
+        staleTime: 5 * 60 * 1000, // 5 minutes
+      },
+    },
+  })
+
+  // Store routes
+  const routes: Array<{ path: string; component: ReactNode }> = []
+
+  // Default home page
+  const DefaultHome = () => (
+    <DashboardTemplate title={title} description={description}>
+      <div className="flex flex-col items-center justify-center min-h-[400px] text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">🌿 {title}</h1>
+        <p className="text-lg text-gray-600 mb-6">{description}</p>
+        <div className="space-y-2 text-sm text-gray-500">
+          <p>✅ Template integration successful</p>
+          <p>🔧 Version: {version}</p>
+          <p>🚀 Ready for development</p>
+        </div>
+      </div>
+    </DashboardTemplate>
+  )
+
+  // Build provider tree
+  const createProviderTree = (children: ReactNode): ReactNode => {
+    let tree = children
+
+    // Wrap with custom providers (in reverse order)
+    customProviders.reverse().forEach((Provider) => {
+      tree = <Provider key={Provider.name}>{tree}</Provider>
+    })
+
+    // Wrap with layout providers
+    if (enableRouting) {
+      tree = (
+        <SidebarProvider>
+          {tree}
+        </SidebarProvider>
+      )
+    }
+
+    // Wrap with auth provider
+    if (enableAuth) {
+      tree = <AuthProvider config={auth}>{tree}</AuthProvider>
+    }
+
+    // Wrap with query provider
+    if (enableQuery) {
+      tree = (
+        <QueryClientProvider client={queryClient}>
+          {tree}
+          {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+        </QueryClientProvider>
+      )
+    }
+
+    // Wrap with router
+    if (enableRouting) {
+      tree = <BrowserRouter>{tree}</BrowserRouter>
+    }
+
+    return tree
+  }
+
+  // Create app instance
+  const appInstance: AppInstance = {
+    addRoutes(path: string, component: ReactNode) {
+      routes.push({ path, component })
+    },
+
+    render() {
+      const AppContent = () => (
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route index element={<DefaultHome />} />
+            {routes.map(({ path, component }, index) => (
+              <Route key={index} path={path} element={component} />
+            ))}
+          </Route>
+        </Routes>
+      )
+
+      return createProviderTree(<AppContent />)
+    },
+
+    mount(elementId = 'root') {
+      const element = document.getElementById(elementId)
+      if (!element) {
+        throw new Error(`Element with id "${elementId}" not found`)
+      }
+
+      const root = createRoot(element)
+      root.render(
+        <React.StrictMode>
+          {this.render()}
+        </React.StrictMode>
+      )
+    }
+  }
+
+  return appInstance
+}
+
+// Convenience function for simple apps
+export function createSimpleApp(title: string): AppInstance {
+  return createReactApp({ title })
+}
+

package/src/templates/index.ts

@@ -0,0 +1,37 @@
+// Page templates for common layout patterns
+export { ComponentShowcaseTemplate } from './ComponentShowcaseTemplate';
+export { 
+  DashboardTemplate, 
+  DashboardGrid, 
+  DashboardCard,
+  type DashboardTemplateProps,
+  type DashboardGridProps,
+  type DashboardCardProps 
+} from './DashboardTemplate';
+export { 
+  AuthTemplate, 
+  AuthFormField, 
+  AuthLink, 
+  AuthDivider,
+  type AuthTemplateProps,
+  type AuthFormFieldProps,
+  type AuthLinkProps,
+  type AuthDividerProps 
+} from './AuthTemplate';
+export { 
+  DataTemplate, 
+  DataDetailTemplate,
+  type DataTemplateProps,
+  type DataDetailTemplateProps 
+} from './DataTemplate';
+
+// Admin templates for administrative interfaces
+export * from './admin';
+
+// React App Factory
+export { 
+  createReactApp, 
+  createSimpleApp,
+  type AppConfig,
+  type AppInstance 
+} from './factory';

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/CHANGELOG.md

@@ -1,63 +0,0 @@
-# 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

@@ -1,19 +0,0 @@
-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

@@ -1,291 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-"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');
-}