@pattern-stack/frontend-patterns 0.0.5 → 0.1.0

package/cli/index.ts

@@ -0,0 +1,122 @@
+#!/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

package/cli/src/codegen/openapi/bulk-hook-generator.js

@@ -0,0 +1,252 @@
+"use strict";
+/**
+ * Bulk Operations Hook Generator
+ *
+ * Generates specialized React hooks for bulk operations with proper typing,
+ * error handling, and progress tracking.
+ *
+ * Part of FRO-35: Bulk Operations Hook Generation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BulkHookGenerator = void 0;
+const bulk_types_1 = require("./bulk-types");
+class BulkHookGenerator {
+    /**
+     * Generate a bulk mutation hook with progress tracking and retry logic
+     */
+    generateBulkMutationHook(endpoint, hookName, operationName) {
+        const bulkType = (0, bulk_types_1.detectBulkOperationType)(endpoint.path, endpoint.method);
+        const lines = [];
+        // Generate JSDoc
+        lines.push('/**');
+        if (endpoint.summary) {
+            lines.push(` * ${endpoint.summary}`);
+        }
+        if (endpoint.description) {
+            lines.push(` * ${endpoint.description}`);
+        }
+        lines.push(' * @param options Mutation options with bulk operation support');
+        lines.push(' */');
+        // Generate hook signature
+        const resource = endpoint.tags?.[0] || 'default';
+        lines.push(`export function ${hookName}(`);
+        lines.push(`  options?: UseMutationOptions<BulkOperationResponse, any, BulkOperationRequest> & BulkMutationOptions`);
+        lines.push(') {');
+        lines.push('  const queryClient = useQueryClient()');
+        lines.push('  ');
+        lines.push('  return useMutation({');
+        // Generate mutation function with progress tracking
+        lines.push('    mutationFn: async (request: BulkOperationRequest) => {');
+        lines.push('      // Transform request if needed');
+        lines.push('      const transformedRequest = options?.transformRequest ');
+        lines.push('        ? options.transformRequest(request) ');
+        lines.push('        : request');
+        lines.push('      ');
+        lines.push('      // Simulate progress updates for demo');
+        lines.push('      if (options?.onProgress) {');
+        lines.push('        options.onProgress({');
+        lines.push('          total: request.ids.length,');
+        lines.push('          processed: 0,');
+        lines.push('          succeeded: 0,');
+        lines.push('          failed: 0,');
+        lines.push('          percentage: 0,');
+        lines.push("          status: 'processing'");
+        lines.push('        })');
+        lines.push('      }');
+        lines.push('      ');
+        lines.push(`      const response = await apiClient.${this.camelCase(operationName)}(transformedRequest)`);
+        lines.push('      ');
+        lines.push('      // Transform response if needed');
+        lines.push('      const transformedResponse = options?.transformResponse');
+        lines.push('        ? options.transformResponse(response)');
+        lines.push('        : response');
+        lines.push('      ');
+        lines.push('      // Final progress update');
+        lines.push('      if (options?.onProgress && transformedResponse) {');
+        lines.push('        options.onProgress({');
+        lines.push('          total: transformedResponse.summary?.total || request.ids.length,');
+        lines.push('          processed: transformedResponse.summary?.total || request.ids.length,');
+        lines.push('          succeeded: transformedResponse.summary?.succeeded || 0,');
+        lines.push('          failed: transformedResponse.summary?.failed || 0,');
+        lines.push('          percentage: 100,');
+        lines.push("          status: 'completed'");
+        lines.push('        })');
+        lines.push('      }');
+        lines.push('      ');
+        lines.push('      return transformedResponse');
+        lines.push('    },');
+        // Generate optimistic updates for bulk operations
+        lines.push(this.generateBulkOptimisticUpdate(resource, bulkType));
+        // Generate cache invalidation
+        lines.push(this.generateBulkCacheInvalidation(resource));
+        // Handle partial success
+        lines.push('    onSuccess: (data, variables, context) => {');
+        lines.push('      // Handle partial success');
+        lines.push('      if (data.failed.length > 0 && options?.onPartialSuccess) {');
+        lines.push('        options.onPartialSuccess(data)');
+        lines.push('      }');
+        lines.push('      ');
+        lines.push('      // Call original onSuccess if provided');
+        lines.push('      options?.onSuccess?.(data, variables, context)');
+        lines.push('    },');
+        // Retry configuration for bulk operations
+        lines.push('    retry: (failureCount, error) => {');
+        lines.push('      // Use custom retry config if provided');
+        lines.push('      if (options?.retry?.maxAttempts !== undefined) {');
+        lines.push('        return failureCount < options.retry.maxAttempts');
+        lines.push('      }');
+        lines.push('      // Default: retry up to 3 times for bulk operations');
+        lines.push('      return failureCount < 3');
+        lines.push('    },');
+        lines.push('    retryDelay: (attemptIndex) => {');
+        lines.push('      // Use custom retry delay if provided');
+        lines.push('      if (options?.retry?.initialDelay) {');
+        lines.push('        const delay = Math.min(');
+        lines.push('          options.retry.initialDelay * Math.pow(options.retry.backoffMultiplier || 2, attemptIndex),');
+        lines.push('          options.retry.maxDelay || 30000');
+        lines.push('        )');
+        lines.push('        return delay');
+        lines.push('      }');
+        lines.push('      // Default exponential backoff: 1s, 2s, 4s...');
+        lines.push('      return Math.min(1000 * Math.pow(2, attemptIndex), 30000)');
+        lines.push('    },');
+        lines.push('    ...options');
+        lines.push('  })');
+        lines.push('}');
+        return lines.join('\n');
+    }
+    /**
+     * Generate optimistic updates for bulk operations
+     */
+    generateBulkOptimisticUpdate(resource, bulkType) {
+        switch (bulkType) {
+            case 'delete':
+                return `    onMutate: async (request: BulkOperationRequest) => {
+      // Cancel outgoing refetches
+      await queryClient.cancelQueries({ queryKey: queryKeys.${resource}() })
+      
+      // Snapshot previous value
+      const previousData = queryClient.getQueryData(queryKeys.${resource}())
+      
+      // Optimistically remove items
+      queryClient.setQueryData(queryKeys.${resource}(), (old: any) => {
+        if (Array.isArray(old)) {
+          return old.filter((item: any) => !request.ids.includes(item.id))
+        }
+        return old
+      })
+      
+      return { previousData }
+    },
+    onError: (err: any, request: any, context: any) => {
+      // Rollback on error
+      if (context?.previousData !== undefined) {
+        queryClient.setQueryData(queryKeys.${resource}(), context.previousData)
+      }
+    },`;
+            case 'update':
+                return `    onMutate: async (request: BulkOperationRequest) => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.${resource}() })
+      
+      const previousData = queryClient.getQueryData(queryKeys.${resource}())
+      
+      // Optimistically update items
+      queryClient.setQueryData(queryKeys.${resource}(), (old: any) => {
+        if (Array.isArray(old)) {
+          return old.map((item: any) => 
+            request.ids.includes(item.id) 
+              ? { ...item, ...request.data } 
+              : item
+          )
+        }
+        return old
+      })
+      
+      return { previousData }
+    },
+    onError: (err: any, request: any, context: any) => {
+      if (context?.previousData !== undefined) {
+        queryClient.setQueryData(queryKeys.${resource}(), context.previousData)
+      }
+    },`;
+            case 'create':
+                return `    onMutate: async (request: BulkOperationRequest) => {
+      await queryClient.cancelQueries({ queryKey: queryKeys.${resource}() })
+      
+      const previousData = queryClient.getQueryData(queryKeys.${resource}())
+      
+      // Optimistically add items (if data provided)
+      if (request.data && Array.isArray(request.data)) {
+        queryClient.setQueryData(queryKeys.${resource}(), (old: any) => {
+          if (Array.isArray(old)) {
+            return [...old, ...request.data]
+          }
+          return old
+        })
+      }
+      
+      return { previousData }
+    },
+    onError: (err: any, request: any, context: any) => {
+      if (context?.previousData !== undefined) {
+        queryClient.setQueryData(queryKeys.${resource}(), context.previousData)
+      }
+    },`;
+            default:
+                return '';
+        }
+    }
+    /**
+     * Generate cache invalidation for bulk operations
+     */
+    generateBulkCacheInvalidation(resource) {
+        return `    onSettled: () => {
+      // Invalidate related queries after bulk operation
+      queryClient.invalidateQueries({ queryKey: queryKeys.${resource}() })
+      queryClient.invalidateQueries({ queryKey: queryKeys.all })
+    },`;
+    }
+    /**
+     * Generate bulk mutation hook name
+     */
+    generateBulkMutationHookName(endpoint, resourceName) {
+        const requestBody = endpoint.requestBody;
+        if (!(0, bulk_types_1.isBulkOperation)(endpoint.path, endpoint.method, requestBody)) {
+            return null;
+        }
+        const bulkType = (0, bulk_types_1.detectBulkOperationType)(endpoint.path, endpoint.method);
+        if (bulkType && resourceName) {
+            const bulkName = (0, bulk_types_1.generateBulkOperationName)(resourceName, bulkType);
+            return `use${this.capitalize(bulkName)}`;
+        }
+        return null;
+    }
+    /**
+     * Check if endpoint is a bulk operation
+     */
+    isBulkEndpoint(endpoint) {
+        const requestBody = endpoint.requestBody;
+        return (0, bulk_types_1.isBulkOperation)(endpoint.path, endpoint.method, requestBody);
+    }
+    /**
+     * Helper to convert to camelCase
+     */
+    camelCase(str) {
+        return str.replace(/[-_](.)/g, (_, char) => char.toUpperCase())
+            .replace(/^./, char => char.toLowerCase());
+    }
+    /**
+     * Helper to capitalize string
+     */
+    capitalize(str) {
+        // Convert snake_case to PascalCase
+        if (str.includes('_')) {
+            return str.split('_')
+                .map(part => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+                .join('');
+        }
+        // Simple capitalization
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    }
+}
+exports.BulkHookGenerator = BulkHookGenerator;

package/cli/src/codegen/openapi/bulk-types.js

@@ -0,0 +1,89 @@
+"use strict";
+/**
+ * Bulk Operations Types
+ *
+ * Standard types for bulk operations in generated hooks
+ * Part of FRO-35: Bulk Operations Hook Generation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isBulkOperation = isBulkOperation;
+exports.detectBulkOperationType = detectBulkOperationType;
+exports.generateBulkOperationName = generateBulkOperationName;
+/**
+ * Type guard to check if an endpoint handles bulk operations
+ */
+function isBulkOperation(path, method, requestBody) {
+    const bulkPatterns = [
+        /\/bulk[-_]?delete$/i,
+        /\/bulk[-_]?update$/i,
+        /\/bulk[-_]?create$/i,
+        /\/batch$/i,
+        /\/bulk$/i,
+        /\/multiple$/i
+    ];
+    // Check path patterns
+    if (bulkPatterns.some(pattern => pattern.test(path))) {
+        return true;
+    }
+    // Check if request body expects an array of items
+    if (requestBody && typeof requestBody === 'object') {
+        // Check for ParsedRequestBody structure
+        const body = requestBody;
+        if (body.content?.['application/json']?.schema) {
+            const schema = body.content['application/json'].schema;
+            return schema.type === 'array' && !!schema.items;
+        }
+        // Check direct schema
+        if ('type' in requestBody) {
+            const bodyType = requestBody;
+            return bodyType.type === 'array' && !!bodyType.items;
+        }
+    }
+    return false;
+}
+/**
+ * Detect bulk operation type from endpoint
+ */
+function detectBulkOperationType(path, method) {
+    const lowercasePath = path.toLowerCase();
+    const lowercaseMethod = method.toLowerCase();
+    if (lowercasePath.includes('delete') || lowercaseMethod === 'delete') {
+        return 'delete';
+    }
+    if (lowercasePath.includes('update') || lowercaseMethod === 'put' || lowercaseMethod === 'patch') {
+        return 'update';
+    }
+    if (lowercasePath.includes('create') || lowercaseMethod === 'post') {
+        return 'create';
+    }
+    if (lowercasePath.includes('batch') || lowercasePath.includes('bulk')) {
+        return 'mixed';
+    }
+    return null;
+}
+/**
+ * Generate a descriptive bulk operation name
+ */
+function generateBulkOperationName(resource, operationType) {
+    const cleanResource = resource.replace(/[^a-zA-Z0-9]/g, '');
+    const singular = cleanResource.endsWith('s') ? cleanResource.slice(0, -1) : cleanResource;
+    // Capitalize first letter of singular resource
+    const capitalizedSingular = capitalize(singular);
+    switch (operationType) {
+        case 'delete':
+            return `bulkDelete${capitalizedSingular}s`;
+        case 'update':
+            return `bulkUpdate${capitalizedSingular}s`;
+        case 'create':
+            return `bulkCreate${capitalizedSingular}s`;
+        case 'mixed':
+            return `bulk${capitalizedSingular}Operations`;
+        default:
+            return `bulk${capitalizedSingular}s`;
+    }
+}
+function capitalize(str) {
+    if (!str)
+        return '';
+    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}