@pattern-stack/frontend-patterns 0.1.3 → 0.2.0-alpha.1

package/CHANGELOG.md

@@ -5,81 +5,76 @@ 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.2] - 2025-08-09
+## [Unreleased]
 
 ### Fixed
-- CLI module format issue - removed `"type": "module"` from package.json to fix CommonJS/ESM conflict
-- CSS export paths - added multiple export paths for easier importing
-- TypeScript type exports - exported missing interface types (CardProps, SpinnerProps, LabelProps, SelectProps)
-- CLI help command - improved help text with examples and version info
+- **TypeScript Build Errors**: Resolved all TypeScript compilation errors across codegen and auth modules
+  - Added missing type imports in OpenAPI codegen (`ParsedParameter`, `ClientGeneratorOptions`)
+  - Fixed OpenAPIV3 namespace imports and type casting
+  - Corrected parser method signatures and response array handling
+  - Updated `isListEndpoint` to correctly access responses as array
+- **Auth Type System**: Consolidated user types for better type safety
+  - Moved `name`, `roles`, and `permissions` to `BaseUser` as optional fields
+  - Made `ExtendedUser` a type alias to `BaseUser` for backward compatibility
+  - Updated `MockAuthService` and `MockAuthProvider` to use consolidated types
+  - Added proper `RegisterData` interface
+- **Test Suite**: Fixed all test failures
+  - Updated hook generator tests to use correct `ParsedEndpoint` response format (array instead of object)
+  - All 173 tests now passing
+- **Performance**: Improved MockAuthProvider performance
+  - Added memoization to prevent creating new auth service instance on every render
+- **Component Exports**: Standardized component export patterns
+  - Consolidated type exports using modern TypeScript syntax (`export { Component, type Props }`)
 
 ### Changed
-- Package is now properly marked as private on NPM (requires authentication)
-
-## [0.1.1] - 2025-08-09 (skipped)
-
-### Fixed
-- CLI module format issue - removed `"type": "module"` from package.json to fix CommonJS/ESM conflict
-- CSS export paths - added multiple export paths for easier importing
-- TypeScript type exports - exported missing interface types (CardProps, SpinnerProps, LabelProps, SelectProps)
-- CLI help command - improved help text with examples and version info
-
-### Changed
-- Package is now properly marked as private on NPM (requires authentication)
-
-## [0.1.0] - 2025-08-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.
+- **SkeletonAvatar API**: Changed from `size` prop to separate `width` and `height` props
+  - **Breaking Change**: `<SkeletonAvatar size={40} />` is no longer supported
+  - **Migration**: Use `<SkeletonAvatar width={40} height={40} />` instead
+  - Added comprehensive JSDoc with migration examples
+- **DataTable Templates**: Removed unsupported props from DataTemplate usage
+  - Removed `onSort`, `selectedRows`, `onSelectionChange` props
+  - Added TODO comments for future server-side sorting support (FRO-4)
+
+### Removed
+- **Map Components**: Temporarily removed map component suite due to `react-map-gl` type compatibility issues
+  - Removed: `MapCluster`, `MapContainer`, `MapHeatmap`, `MapMarker`, `MapPolygon`, `MapPopup`, `MapRoute`
+  - Removed: `MapProvider` context system
+  - Removed: `DataMap` and `LocationPicker` composed components
+  - Removed: Map-related templates and demo pages
+  - **Note**: Components preserved in `backup/map-components` branch for future restoration
+  - **Impact**: Applications using map components will need to use alternative mapping solutions until type issues are resolved
+- **Entity Templates**: Removed incomplete entity template and organism components
+  - Removed: `EntityManagementTemplate`, `EntityPerformanceDashboardTemplate`
+  - Removed: `CategoryBreakdownPanel`, `EntityListPanel`, `MetricsOverviewPanel`, `TrendAnalysisPanel`
+  - **Reason**: Incomplete implementations with placeholder text and non-functional features
+  - **Note**: Will be properly implemented in example applications and promoted back to template when production-ready
+- **Metric Card Refactoring**: Removed incomplete metric card refactoring files
+  - Removed: `MetricCardRefactored.tsx`, `NewMetricCard.tsx`, `NewMetricCard.demo.tsx`, `NewMetricCard.meta.ts`, `NewMetricCard.presets.tsx`, `REFACTORING.md`
+  - Removed: 16 commented export placeholders in `variants/index.ts`
+  - **Reason**: Only 3 of 19 variants were refactored, leaving most functionality using fallback implementations
+  - **Note**: Original MetricCard remains fully functional
+- **Bulk Operations Code**: Removed commented placeholder code for future FRO-35 implementation
+  - Removed: ~150 lines of commented code from `hook-generator.ts`
+  - Removed: `APIConfig` interface, `detectResourceOperations()` method, `createDefaultConfig()` method
+  - **Reason**: Placeholder code should not ship in pre-release; will implement from scratch when FRO-35 begins
+  - **Impact**: No impact - code was non-functional and commented out
+- **Production Code Cleanup**: Removed debug and temporary code
+  - Removed: Console.log statements from `hook-generator.ts`
+  - Removed: Placeholder alert() handlers from `UserAvatar.tsx` (replaced with documented extension points)
+  - Removed: WIP/TODO comments from `Chart.tsx` (replaced with professional JSDoc)
+
+### Internal
+- **Build Status**: Clean TypeScript compilation with zero errors
+- **Test Coverage**: 173/173 tests passing across 17 test files
+- **Type Safety**: Improved type inference throughout auth and codegen modules
+- **Code Quality**:
+  - Better component organization and import consistency
+  - Removed ~600+ lines of incomplete, commented, or placeholder code
+  - No console statements in production code
+  - All components have professional documentation
+  - Clean pre-release state with no partial implementations
+
+## Version History
+
+### Pre-release Development
+This is a pre-release version of the React Frontend Template. Breaking changes may occur without prior notice until v1.0.0 release.

package/README.md

@@ -34,11 +34,26 @@ app.addRoutes("/reports", ReportsRoutes)
 
 ### Installation
 
+This is a private package published to npm. Install using standard npm commands:
+
 ```bash
-# Install from NPM
+# Install latest version
 npm install @pattern-stack/frontend-patterns
 
-# Or for local development/testing
+# Install specific version
+npm install @pattern-stack/frontend-patterns@0.2.0-alpha.0
+
+# Or add to package.json dependencies
+{
+  "dependencies": {
+    "@pattern-stack/frontend-patterns": "^0.2.0-alpha.0"
+  }
+}
+```
+
+**For Local Development:**
+```bash
+# Install from local filesystem
 npm install file:../path/to/frontend-patterns
 
 # Or link for active development

package/cli/commands/generate-hooks.ts

@@ -7,12 +7,16 @@
  */
 
 import { promises as fs } from 'fs'
-import { join, dirname, resolve } from 'path'
+import { join, dirname } from 'path'
+import { fileURLToPath } from 'url'
 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'
 
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
 interface GenerateHooksOptions {
   output: string
   prefix?: string
@@ -121,6 +125,11 @@ export async function generateHooksCommand(source: string, options: GenerateHook
     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)
+
+    // Copy bulk-types.ts to output directory (referenced by hooks/types.ts)
+    const bulkTypesPath = join(__dirname, '../../src/codegen/openapi/bulk-types.ts')
+    const bulkTypesContent = await fs.readFile(bulkTypesPath, 'utf8')
+    await writeFile(join(options.output, 'bulk-types.ts'), bulkTypesContent)
     
     // Write confidence report if available
     if (hooks.report) {
@@ -154,10 +163,10 @@ export { queryKeys } from './hooks'`
     
     await writeFile(join(options.output, 'index.ts'), mainIndex)
     
-    // Generate usage example
+    // Generate usage example (as .tsx since it contains JSX)
     const usageExample = generateUsageExample(spec.info.title, options)
-    await writeFile(join(options.output, 'example.ts'), usageExample)
-    
+    await writeFile(join(options.output, 'example.tsx'), usageExample)
+
     console.log()
     console.log('✅ Generation complete!')
     console.log(`📦 Generated files in: ${options.output}`)
@@ -165,7 +174,7 @@ export { queryKeys } from './hooks'`
     console.log('🚀 Quick start:')
     console.log(`import { createAPIClient, useGetUsers } from './${options.output}'`)
     console.log()
-    console.log('💡 See example.ts for detailed usage instructions')
+    console.log('💡 See example.tsx for detailed usage instructions')
     
   } catch (error) {
     console.error('❌ Generation failed:')
@@ -177,7 +186,7 @@ export { queryKeys } from './hooks'`
 async function ensureDir(dir: string) {
   try {
     await fs.mkdir(dir, { recursive: true })
-  } catch (error) {
+  } catch {
     // Directory might already exist
   }
 }

package/cli/commands/scaffold.ts

@@ -213,7 +213,7 @@ export type { ${name}TemplateProps } from './${name}Template'`
 async function ensureDir(dir: string) {
   try {
     await fs.mkdir(dir, { recursive: true })
-  } catch (error) {
+  } catch {
     // Directory might already exist
   }
 }

package/cli/index.ts

@@ -18,9 +18,7 @@ const program = new Command()
 program
   .name('pattern-stack')
   .description('Pattern-Stack CLI for code generation and scaffolding')
-  .version('0.1.1')
-  .helpOption('-h, --help', 'Display help for command')
-  .addHelpText('after', '\nExamples:\n  $ pattern-stack generate hooks ./openapi.json --output ./src/api\n  $ pattern-stack scaffold component UserCard\n  $ pattern-stack init financial --name my-app')
+  .version('1.0.0')
 
 // Generate commands
 const generateCommand = program

package/cli/src/codegen/openapi/__tests__/naming-utils.test.js

@@ -0,0 +1,367 @@
+import { singularize, pluralize, isPlural } from '../naming-utils.js';
+
+describe('singularize()', () => {
+  describe('regular plurals', () => {
+    it('should convert cats to cat', () => {
+      expect(singularize('cats')).toBe('cat');
+    });
+
+    it('should convert dogs to dog', () => {
+      expect(singularize('dogs')).toBe('dog');
+    });
+
+    it('should convert users to user', () => {
+      expect(singularize('users')).toBe('user');
+    });
+
+    it('should convert accounts to account', () => {
+      expect(singularize('accounts')).toBe('account');
+    });
+  });
+
+  describe('-ies plurals', () => {
+    it('should convert activities to activity', () => {
+      expect(singularize('activities')).toBe('activity');
+    });
+
+    it('should convert categories to category', () => {
+      expect(singularize('categories')).toBe('category');
+    });
+
+    it('should convert companies to company', () => {
+      expect(singularize('companies')).toBe('company');
+    });
+
+    it('should convert opportunities to opportunity', () => {
+      expect(singularize('opportunities')).toBe('opportunity');
+    });
+  });
+
+  describe('-es plurals', () => {
+    it('should convert boxes to box', () => {
+      expect(singularize('boxes')).toBe('box');
+    });
+
+    it('should convert watches to watch', () => {
+      expect(singularize('watches')).toBe('watch');
+    });
+
+    it('should convert dishes to dish', () => {
+      expect(singularize('dishes')).toBe('dish');
+    });
+
+    it('should convert benches to bench', () => {
+      expect(singularize('benches')).toBe('bench');
+    });
+  });
+
+  describe('-ses plurals (tricky cases)', () => {
+    it('should convert addresses to address', () => {
+      expect(singularize('addresses')).toBe('address');
+    });
+
+    it('should convert businesses to business', () => {
+      expect(singularize('businesses')).toBe('business');
+    });
+
+    it('should convert processes to process', () => {
+      expect(singularize('processes')).toBe('process');
+    });
+  });
+
+  describe('irregular plurals', () => {
+    it('should convert people to person', () => {
+      expect(singularize('people')).toBe('person');
+    });
+
+    it('should convert children to child', () => {
+      expect(singularize('children')).toBe('child');
+    });
+
+    it('should convert men to man', () => {
+      expect(singularize('men')).toBe('man');
+    });
+
+    it('should convert women to woman', () => {
+      expect(singularize('women')).toBe('woman');
+    });
+  });
+
+  describe('already singular', () => {
+    it('should keep data as data', () => {
+      expect(singularize('data')).toBe('data');
+    });
+
+    it('should keep metadata as metadata', () => {
+      expect(singularize('metadata')).toBe('metadata');
+    });
+
+    it('should keep user as user', () => {
+      expect(singularize('user')).toBe('user');
+    });
+
+    it('should keep account as account', () => {
+      expect(singularize('account')).toBe('account');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should keep status as status', () => {
+      expect(singularize('status')).toBe('status');
+    });
+
+    it('should keep class as class', () => {
+      expect(singularize('class')).toBe('class');
+    });
+
+    it('should keep bus as bus', () => {
+      expect(singularize('bus')).toBe('bus');
+    });
+
+    it('should convert pass to pass (not pas)', () => {
+      expect(singularize('pass')).toBe('pass');
+    });
+
+    it('should handle empty string', () => {
+      expect(singularize('')).toBe('');
+    });
+
+    it('should handle single character', () => {
+      expect(singularize('a')).toBe('a');
+    });
+  });
+});
+
+describe('pluralize()', () => {
+  describe('regular plurals', () => {
+    it('should convert cat to cats', () => {
+      expect(pluralize('cat')).toBe('cats');
+    });
+
+    it('should convert dog to dogs', () => {
+      expect(pluralize('dog')).toBe('dogs');
+    });
+
+    it('should convert user to users', () => {
+      expect(pluralize('user')).toBe('users');
+    });
+
+    it('should convert account to accounts', () => {
+      expect(pluralize('account')).toBe('accounts');
+    });
+  });
+
+  describe('-y endings (consonant + y)', () => {
+    it('should convert activity to activities', () => {
+      expect(pluralize('activity')).toBe('activities');
+    });
+
+    it('should convert category to categories', () => {
+      expect(pluralize('category')).toBe('categories');
+    });
+
+    it('should convert company to companies', () => {
+      expect(pluralize('company')).toBe('companies');
+    });
+
+    it('should convert opportunity to opportunities', () => {
+      expect(pluralize('opportunity')).toBe('opportunities');
+    });
+  });
+
+  describe('vowel + y endings', () => {
+    it('should convert day to days', () => {
+      expect(pluralize('day')).toBe('days');
+    });
+
+    it('should convert key to keys', () => {
+      expect(pluralize('key')).toBe('keys');
+    });
+
+    it('should convert boy to boys', () => {
+      expect(pluralize('boy')).toBe('boys');
+    });
+
+    it('should convert array to arrays', () => {
+      expect(pluralize('array')).toBe('arrays');
+    });
+  });
+
+  describe('-x, -ch, -sh, -s, -ss endings', () => {
+    it('should convert box to boxes', () => {
+      expect(pluralize('box')).toBe('boxes');
+    });
+
+    it('should convert watch to watches', () => {
+      expect(pluralize('watch')).toBe('watches');
+    });
+
+    it('should convert dish to dishes', () => {
+      expect(pluralize('dish')).toBe('dishes');
+    });
+
+    it('should convert bench to benches', () => {
+      expect(pluralize('bench')).toBe('benches');
+    });
+
+    it('should convert address to addresses', () => {
+      expect(pluralize('address')).toBe('addresses');
+    });
+
+    it('should convert business to businesses', () => {
+      expect(pluralize('business')).toBe('businesses');
+    });
+
+    it('should convert class to classes', () => {
+      expect(pluralize('class')).toBe('classes');
+    });
+  });
+
+  describe('irregular plurals', () => {
+    it('should convert person to people', () => {
+      expect(pluralize('person')).toBe('people');
+    });
+
+    it('should convert child to children', () => {
+      expect(pluralize('child')).toBe('children');
+    });
+
+    it('should convert man to men', () => {
+      expect(pluralize('man')).toBe('men');
+    });
+
+    it('should convert woman to women', () => {
+      expect(pluralize('woman')).toBe('women');
+    });
+  });
+
+  describe('already plural (no double-pluralize)', () => {
+    it('should keep accounts as accounts', () => {
+      expect(pluralize('accounts')).toBe('accounts');
+    });
+
+    it('should keep users as users', () => {
+      expect(pluralize('users')).toBe('users');
+    });
+
+    it('should keep activities as activities', () => {
+      expect(pluralize('activities')).toBe('activities');
+    });
+
+    it('should keep boxes as boxes', () => {
+      expect(pluralize('boxes')).toBe('boxes');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty string', () => {
+      expect(pluralize('')).toBe('');
+    });
+
+    it('should handle single character', () => {
+      expect(pluralize('a')).toBe('as');
+    });
+
+    it('should keep status as status (special case)', () => {
+      expect(pluralize('status')).toBe('status');
+    });
+  });
+});
+
+describe('isPlural()', () => {
+  describe('should return true for plural words', () => {
+    it('should identify cats as plural', () => {
+      expect(isPlural('cats')).toBe(true);
+    });
+
+    it('should identify activities as plural', () => {
+      expect(isPlural('activities')).toBe(true);
+    });
+
+    it('should identify boxes as plural', () => {
+      expect(isPlural('boxes')).toBe(true);
+    });
+
+    it('should identify watches as plural', () => {
+      expect(isPlural('watches')).toBe(true);
+    });
+
+    it('should identify addresses as plural', () => {
+      expect(isPlural('addresses')).toBe(true);
+    });
+
+    it('should identify people as plural', () => {
+      expect(isPlural('people')).toBe(true);
+    });
+
+    it('should identify children as plural', () => {
+      expect(isPlural('children')).toBe(true);
+    });
+
+    it('should identify users as plural', () => {
+      expect(isPlural('users')).toBe(true);
+    });
+
+    it('should identify accounts as plural', () => {
+      expect(isPlural('accounts')).toBe(true);
+    });
+  });
+
+  describe('should return false for singular words', () => {
+    it('should identify cat as singular', () => {
+      expect(isPlural('cat')).toBe(false);
+    });
+
+    it('should identify activity as singular', () => {
+      expect(isPlural('activity')).toBe(false);
+    });
+
+    it('should identify box as singular', () => {
+      expect(isPlural('box')).toBe(false);
+    });
+
+    it('should identify user as singular', () => {
+      expect(isPlural('user')).toBe(false);
+    });
+
+    it('should identify account as singular', () => {
+      expect(isPlural('account')).toBe(false);
+    });
+  });
+
+  describe('should return false for edge cases', () => {
+    it('should identify status as singular', () => {
+      expect(isPlural('status')).toBe(false);
+    });
+
+    it('should identify class as singular', () => {
+      expect(isPlural('class')).toBe(false);
+    });
+
+    it('should identify bus as singular', () => {
+      expect(isPlural('bus')).toBe(false);
+    });
+
+    it('should identify process as singular', () => {
+      expect(isPlural('process')).toBe(false);
+    });
+
+    it('should identify data as singular', () => {
+      expect(isPlural('data')).toBe(false);
+    });
+
+    it('should identify metadata as singular', () => {
+      expect(isPlural('metadata')).toBe(false);
+    });
+  });
+
+  describe('should handle empty/minimal input', () => {
+    it('should return false for empty string', () => {
+      expect(isPlural('')).toBe(false);
+    });
+
+    it('should return false for single character', () => {
+      expect(isPlural('a')).toBe(false);
+    });
+  });
+});