@pattern-stack/frontend-patterns 0.2.0-alpha.0 → 0.2.0-alpha.11

package/cli/commands/generate-hooks.ts

@@ -1,316 +0,0 @@
-/**
- * Generate Hooks Command
- * 
- * Implementation of the `pattern-stack generate hooks` command
- * 
- * Part of FRO-6: Generate Hooks Command
- */
-
-import { promises as fs } from 'fs'
-import { join, dirname } from 'path'
-import { loadOpenAPISpec, parseOpenAPI } from '../../src/codegen/openapi/parser.js'
-import { generateTypes } from '../../src/codegen/openapi/type-generator.js'
-import { generateAPIClient } from '../../src/codegen/openapi/client-generator.js'
-import { generateHooks } from '../../src/codegen/openapi/hook-generator.js'
-
-interface GenerateHooksOptions {
-  output: string
-  prefix?: string
-  client: 'axios' | 'fetch'
-  auth: 'bearer' | 'apiKey' | 'basic'
-  dryRun?: boolean
-}
-
-export async function generateHooksCommand(source: string, options: GenerateHooksOptions) {
-  try {
-    console.log('🚀 Pattern-Stack Hook Generator')
-    console.log('================================')
-    console.log()
-    
-    // Load and parse OpenAPI specification
-    console.log('📥 Loading OpenAPI specification...')
-    const spec = await loadOpenAPISpec(source)
-    console.log(`✅ Loaded: ${spec.info.title} v${spec.info.version}`)
-    
-    console.log('🔍 Parsing specification...')
-    const parsed = await parseOpenAPI(spec)
-    console.log(`✅ Found ${parsed.endpoints.length} endpoints, ${parsed.schemas.length} schemas`)
-    
-    // Generate types
-    console.log('🏗️  Generating TypeScript types...')
-    const types = generateTypes(parsed, {
-      prefix: options.prefix,
-      includeJSDoc: true,
-      includeExamples: true
-    })
-    
-    // Generate API client
-    console.log('🔧 Generating API client...')
-    const client = generateAPIClient(parsed, {
-      clientType: options.client,
-      includeAuth: true,
-      authType: options.auth,
-      includeInterceptors: true
-    })
-    
-    // Generate React hooks
-    console.log('⚛️  Generating React hooks...')
-    const hooks = await 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(join(options.output, 'types'))
-    await ensureDir(join(options.output, 'client'))
-    await ensureDir(join(options.output, 'hooks'))
-    
-    // Write type files
-    console.log('💾 Writing type definitions...')
-    await writeFile(join(options.output, 'types', 'schemas.ts'), types.schemas)
-    await writeFile(join(options.output, 'types', 'endpoints.ts'), types.endpoints)
-    await writeFile(join(options.output, 'types', 'parameters.ts'), types.parameters)
-    await writeFile(join(options.output, 'types', 'responses.ts'), types.responses)
-    await writeFile(join(options.output, 'types', 'index.ts'), types.index)
-    
-    // Write client files
-    console.log('💾 Writing API client...')
-    await writeFile(join(options.output, 'client', 'client.ts'), client.client)
-    await writeFile(join(options.output, 'client', 'methods.ts'), client.methods)
-    await writeFile(join(options.output, 'client', 'types.ts'), client.types)
-    await writeFile(join(options.output, 'client', 'config.ts'), client.config)
-    await writeFile(join(options.output, 'client', 'index.ts'), client.index)
-    
-    // Write hook files
-    console.log('💾 Writing React hooks...')
-    await writeFile(join(options.output, 'hooks', 'queries.ts'), hooks.queries)
-    await writeFile(join(options.output, 'hooks', 'mutations.ts'), hooks.mutations)
-    await writeFile(join(options.output, 'hooks', 'keys.ts'), hooks.keys)
-    await writeFile(join(options.output, 'hooks', 'types.ts'), hooks.types)
-    await writeFile(join(options.output, 'hooks', 'index.ts'), hooks.index)
-    
-    // Write confidence report if available
-    if (hooks.report) {
-      await writeFile(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(join(options.output, 'index.ts'), mainIndex)
-    
-    // Generate usage example
-    const usageExample = generateUsageExample(spec.info.title, options)
-    await writeFile(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: string) {
-  try {
-    await fs.mkdir(dir, { recursive: true })
-  } catch {
-    // Directory might already exist
-  }
-}
-
-async function writeFile(path: string, content: string) {
-  await ensureDir(dirname(path))
-  await fs.writeFile(path, content, 'utf8')
-}
-
-function generateUsageExample(apiTitle: string, options: GenerateHooksOptions): string {
-  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/commands/init.ts

@@ -1,33 +0,0 @@
-/**
- * Init Command
- * 
- * Implementation of the `pattern-stack init` command
- * 
- * Part of FRO-14: Domain Template Initialization
- */
-
-interface InitOptions {
-  name?: string
-  dir?: string
-  git?: boolean
-  install?: boolean
-}
-
-export async function initCommand(template: string = 'basic', options: InitOptions) {
-  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/commands/scaffold.ts

@@ -1,224 +0,0 @@
-/**
- * Scaffold Command
- * 
- * Implementation of the `pattern-stack scaffold` command
- * 
- * Part of FRO-15: Component Scaffolding Commands
- */
-
-import { promises as fs } from 'fs'
-import { join, dirname } from 'path'
-
-interface ScaffoldOptions {
-  template?: string
-  output?: string
-}
-
-export async function scaffoldCommand(type: string, name: string, options: ScaffoldOptions) {
-  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: string, options: ScaffoldOptions) {
-  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(join(outputDir, `${name}.tsx`), componentContent)
-  await writeFile(join(outputDir, 'index.ts'), indexContent)
-  await writeFile(join(outputDir, `${name}.test.tsx`), testContent)
-  
-  console.log(`✅ Component scaffolded: ${outputDir}`)
-}
-
-async function scaffoldFeature(name: string, options: ScaffoldOptions) {
-  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(join(outputDir, 'hooks'))
-  await ensureDir(join(outputDir, 'components'))
-  await writeFile(join(outputDir, 'hooks', `use${name}.ts`), hookContent)
-  await writeFile(join(outputDir, 'hooks', 'index.ts'), `export { use${name} } from './use${name}'`)
-  await writeFile(join(outputDir, 'components', `${name}Component.tsx`), componentContent)
-  await writeFile(join(outputDir, 'components', 'index.ts'), `export { ${name}Component } from './${name}Component'`)
-  await writeFile(join(outputDir, 'index.ts'), indexContent)
-  
-  console.log(`✅ Feature scaffolded: ${outputDir}`)
-}
-
-async function scaffoldTemplate(name: string, options: ScaffoldOptions) {
-  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(join(outputDir, `${name}Template.tsx`), templateContent)
-  await writeFile(join(outputDir, 'index.ts'), indexContent)
-  
-  console.log(`✅ Template scaffolded: ${outputDir}`)
-}
-
-async function ensureDir(dir: string) {
-  try {
-    await fs.mkdir(dir, { recursive: true })
-  } catch {
-    // Directory might already exist
-  }
-}
-
-async function writeFile(path: string, content: string) {
-  await ensureDir(dirname(path))
-  await fs.writeFile(path, content, 'utf8')
-}

package/cli/index.ts

@@ -1,122 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Pattern-Stack CLI
- * 
- * Code generation and scaffolding tools for Pattern-Stack applications
- * 
- * Part of FRO-1: CLI Foundation Setup
- */
-
-import { Command } from 'commander'
-import { generateHooksCommand } from './commands/generate-hooks'
-import { scaffoldCommand } from './commands/scaffold'
-import { initCommand } from './commands/init'
-
-const program = new Command()
-
-program
-  .name('pattern-stack')
-  .description('Pattern-Stack CLI for code generation and scaffolding')
-  .version('1.0.0')
-
-// Generate commands
-const generateCommand = program
-  .command('generate')
-  .alias('g')
-  .description('Generate code from specifications')
-
-generateCommand
-  .command('hooks')
-  .description('Generate React hooks from OpenAPI specification')
-  .argument('<source>', 'OpenAPI specification (URL or file path)')
-  .option('-o, --output <dir>', 'Output directory', './src/generated')
-  .option('--prefix <prefix>', 'Type name prefix', '')
-  .option('--client <type>', 'API client type', 'axios')
-  .option('--auth <type>', 'Authentication type', 'bearer')
-  .option('--dry-run', 'Show what would be generated without writing files')
-  .action(generateHooksCommand)
-
-// Scaffold commands
-program
-  .command('scaffold')
-  .alias('s')
-  .description('Scaffold components and structures')
-  .argument('<type>', 'Type to scaffold (component, feature, template)')
-  .argument('<name>', 'Name of the item to scaffold')
-  .option('-t, --template <template>', 'Template to use')
-  .option('-o, --output <dir>', 'Output directory')
-  .action(scaffoldCommand)
-
-// Init commands
-program
-  .command('init')
-  .description('Initialize a new Pattern-Stack project')
-  .argument('[template]', 'Template to use (financial, ecommerce, analytics)')
-  .option('-n, --name <name>', 'Project name')
-  .option('-d, --dir <directory>', 'Target directory')
-  .option('--git', 'Initialize git repository')
-  .option('--install', 'Install dependencies')
-  .action(initCommand)
-
-// Config commands
-program
-  .command('config')
-  .description('Manage Pattern-Stack configuration')
-  .option('--show', 'Show current configuration')
-  .option('--set <key=value>', 'Set configuration value')
-  .action((options) => {
-    if (options.show) {
-      console.log('Current configuration:')
-      // Show config
-    }
-    if (options.set) {
-      const [key, value] = options.set.split('=')
-      console.log(`Setting ${key} = ${value}`)
-      // Set config
-    }
-  })
-
-// Help command
-program
-  .command('help')
-  .description('Display help for commands')
-  .argument('[command]', 'Command to get help for')
-  .action((command) => {
-    if (command) {
-      program.help()
-    } else {
-      console.log(`
-Pattern-Stack CLI
-
-Available commands:
-  generate hooks <source>     Generate React hooks from OpenAPI spec
-  scaffold <type> <name>      Scaffold components and structures  
-  init [template]             Initialize new project from template
-  config                      Manage configuration
-
-Examples:
-  pattern-stack generate hooks ./api/openapi.json
-  pattern-stack scaffold component UserCard
-  pattern-stack init financial --name my-finance-app
-  
-For more information on a command:
-  pattern-stack <command> --help
-`)
-    }
-  })
-
-// Handle unknown commands
-program.on('command:*', () => {
-  console.error('Invalid command: %s\nSee --help for a list of available commands.', program.args.join(' '))
-  process.exit(1)
-})
-
-// Parse arguments
-if (process.argv.length < 3) {
-  program.help()
-} else {
-  program.parse()
-}
-
-export default program