@rachelallyson/hero-hook-form 1.2.0 → 2.0.0

package/CHANGELOG.md

@@ -2,6 +2,86 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.0.0] - 2025-01-27
+
+### 🎉 Major Release - Enhanced Form Experience
+
+This is a major release with significant new features, performance improvements, and some breaking changes. See the [Migration Guide](./docs/migration-v2.md) for upgrade instructions.
+
+### Added
+
+#### Dynamic Form Sections
+
+- **Conditional Fields**: Show/hide fields based on form data with `ConditionalField` component
+- **Field Arrays**: Dynamic repeating field groups with `FieldArrayField` component  
+- **Dynamic Sections**: Grouped conditional fields with `DynamicSectionField` component
+- Builder methods: `conditionalField()`, `fieldArray()`, `dynamicSection()`
+
+#### Enhanced Form State Management
+
+- **Enhanced Form State Hook**: `useEnhancedFormState` with comprehensive state tracking
+- **Form Status Component**: `FormStatus` with loading, success, and error states
+- **Automatic State Management**: Built-in loading indicators and success feedback
+- **Toast Notifications**: Optional toast notifications with `FormToast` component
+
+#### Performance Optimizations
+
+- **Memoized Components**: All field components now use `React.memo` for better performance
+- **Debounced Validation**: `useDebouncedValidation` hook for configurable validation delays
+- **Performance Utilities**: `usePerformanceMonitor`, `useBatchedFieldUpdates`, and optimization helpers
+- **Memory Optimization**: Better memory usage with proper cleanup and memoization
+
+#### Type-Inferred Forms (Alternative API)
+
+- **Type-Inferred Builder**: `TypeInferredBuilder` for automatic schema and field generation
+- **Define Inferred Form**: `defineInferredForm` function for single-call form definition
+- **Field Type Builders**: Individual field builders with proper type inference
+- **Auto-Generated Schemas**: Automatic Zod schema generation from field definitions
+
+#### Enhanced Validation Patterns
+
+- **Cross-Field Validation**: Password confirmation, date ranges, conditional requirements
+- **Validation Patterns**: Common patterns for emails, phones, passwords, credit cards
+- **Async Validation**: Server-side validation integration with `asyncValidation` helpers
+- **Validation Utilities**: Comprehensive validation utilities and error message helpers
+
+#### New Hooks and Utilities
+
+- `useEnhancedFormState`: Comprehensive form state management
+- `useDebouncedValidation`: Debounced field validation
+- `useInferredForm`: Type-inferred form hook
+- `usePerformanceMonitor`: Performance monitoring utilities
+- `useBatchedFieldUpdates`: Batched field updates for better performance
+
+### Changed
+
+#### Breaking Changes
+
+- **Field Props**: `isDisabled` → `disabled` for consistency with HeroUI
+- **Form State**: Enhanced form state structure with additional properties and methods
+- **Field Configuration**: `FormFieldConfig` → `ZodFormFieldConfig` (removed `rules` property)
+- **Type Definitions**: Updated type definitions for better TypeScript support
+
+#### API Improvements
+
+- **Consistent Naming**: Standardized prop names across all components
+- **Better Type Safety**: Enhanced TypeScript support with better type inference
+- **Simplified API**: Cleaner, more intuitive API design
+- **Performance**: Significant performance improvements across all components
+
+### Fixed
+
+- **Memory Leaks**: Fixed potential memory leaks in form components
+- **Type Safety**: Resolved TypeScript compilation issues
+- **Build Process**: Improved build process and bundle optimization
+- **Component Re-renders**: Reduced unnecessary re-renders with proper memoization
+
+### Removed
+
+- **Deprecated APIs**: Removed deprecated field prop names
+- **Legacy Code**: Cleaned up legacy code and unused utilities
+- **Redundant Types**: Simplified type definitions by removing redundant types
+
 ## [1.0.2] - 2025-01-27
 
 ### Enhanced

package/dist/cypress/index.d.ts

@@ -0,0 +1,141 @@
+/**
+ * TypeScript types for Cypress form testing helpers
+ */
+interface FormFieldData {
+    [key: string]: string | number | boolean | string[] | FileList | null;
+}
+interface FormFlowStep {
+    /** Type of interaction */
+    type: 'fill' | 'select' | 'check' | 'uncheck' | 'submit' | 'wait';
+    /** Field identifier (label, type, placeholder, etc.) */
+    field?: string;
+    /** Value to set or option to select */
+    value?: string | number | boolean;
+    /** Expected result after step */
+    expect?: string | boolean;
+    /** Wait time in milliseconds */
+    waitTime?: number;
+}
+interface FieldInteractionOptions {
+    /** Whether to clear field before typing */
+    clear?: boolean;
+    /** Whether to use force click for dropdowns */
+    force?: boolean;
+    /** Whether to wait for field to be visible */
+    waitForVisible?: boolean;
+    /** Custom timeout for this interaction */
+    timeout?: number;
+}
+interface CypressFormHelpers {
+    fillInputByType: (type: string, value: string, index?: number) => Cypress.Chainable<Element>;
+    fillInputByPlaceholder: (placeholder: string, value: string) => Cypress.Chainable<Element>;
+    fillInputByLabel: (label: string, value: string) => Cypress.Chainable<Element>;
+    fillTextarea: (value: string, index?: number) => Cypress.Chainable<Element>;
+    selectDropdownOption: (optionValue: string, dropdownIndex?: number) => Cypress.Chainable<Element>;
+    selectDropdownByLabel: (label: string, optionValue: string) => Cypress.Chainable<Element>;
+    checkCheckbox: (index?: number) => Cypress.Chainable<Element>;
+    checkCheckboxByLabel: (label: string) => Cypress.Chainable<Element>;
+    checkSwitch: (index?: number) => Cypress.Chainable<Element>;
+    uncheckCheckbox: (index?: number) => Cypress.Chainable<Element>;
+    uncheckSwitch: (index?: number) => Cypress.Chainable<Element>;
+    moveSlider: (value: number, index?: number) => Cypress.Chainable<Element>;
+    expectValidationError: (message: string) => Cypress.Chainable<Element>;
+    expectNoValidationErrors: () => Cypress.Chainable<Element>;
+    expectFieldError: (fieldLabel: string, errorMessage: string) => Cypress.Chainable<Element>;
+    expectFieldValid: (fieldLabel: string) => Cypress.Chainable<Element>;
+    triggerValidation: (submitButton?: boolean) => Cypress.Chainable<Element>;
+    submitForm: () => Cypress.Chainable<Element>;
+    submitAndExpectSuccess: (successIndicator?: string) => Cypress.Chainable<Element>;
+    submitAndExpectErrors: () => Cypress.Chainable<Element>;
+    resetForm: () => Cypress.Chainable<Element>;
+    interceptFormSubmission: (method: string, url: string, alias: string) => Cypress.Chainable<Element>;
+    verifyFormExists: () => Cypress.Chainable<Element>;
+    verifyFieldExists: (selector: string) => Cypress.Chainable<Element>;
+    verifyFieldValue: (selector: string, value: string) => Cypress.Chainable<Element>;
+    verifyFieldCount: (selector: string, count: number) => Cypress.Chainable<Element>;
+    getFormData: () => Cypress.Chainable<FormFieldData>;
+    fillCompleteForm: (formData: FormFieldData) => Cypress.Chainable<Element>;
+    testFieldInteraction: (fieldType: string, value: string) => Cypress.Chainable<Element>;
+    testFormFlow: (steps: FormFlowStep[]) => Cypress.Chainable<Element>;
+}
+declare global {
+    namespace Cypress {
+        interface Chainable extends CypressFormHelpers {
+        }
+    }
+}
+
+/**
+ * TypeScript declarations for Cypress form testing helpers
+ */
+
+
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      // Field Interaction Helpers
+      fillInputByType(type: string, value: string, index?: number, options?: FieldInteractionOptions): Chainable<Element>;
+      fillInputByPlaceholder(placeholder: string, value: string, options?: FieldInteractionOptions): Chainable<Element>;
+      fillInputByLabel(label: string, value: string, options?: FieldInteractionOptions): Chainable<Element>;
+      fillTextarea(value: string, index?: number, options?: FieldInteractionOptions): Chainable<Element>;
+      selectDropdownOption(optionValue: string, dropdownIndex?: number): Chainable<Element>;
+      selectDropdownByLabel(label: string, optionValue: string): Chainable<Element>;
+      checkCheckbox(index?: number): Chainable<Element>;
+      checkCheckboxByLabel(label: string): Chainable<Element>;
+      checkSwitch(index?: number): Chainable<Element>;
+      uncheckCheckbox(index?: number): Chainable<Element>;
+      uncheckSwitch(index?: number): Chainable<Element>;
+      moveSlider(value: number, index?: number): Chainable<Element>;
+      
+      // Validation & Error Testing Helpers
+      expectValidationError(message: string): Chainable<Element>;
+      expectNoValidationErrors(): Chainable<Element>;
+      expectFieldError(fieldLabel: string, errorMessage?: string): Chainable<Element>;
+      expectFieldValid(fieldLabel: string): Chainable<Element>;
+      triggerValidation(submitButton?: string): Chainable<Element>;
+      testRealTimeValidation(fieldLabel: string, invalidValue: string, expectedError?: string): Chainable<Element>;
+      testRequiredFieldValidation(fieldLabel: string, expectedError?: string): Chainable<Element>;
+      testEmailValidation(email: string, shouldBeValid: boolean): Chainable<Element>;
+      testPhoneValidation(phone: string, shouldBeValid: boolean): Chainable<Element>;
+      testPasswordValidation(password: string, shouldBeValid: boolean): Chainable<Element>;
+      testRequiredFieldsValidation(): Chainable<Element>;
+      
+      // Form Submission Helpers
+      submitForm(): Chainable<Element>;
+      submitAndExpectSuccess(successIndicator?: string): Chainable<Element>;
+      submitAndExpectErrors(): Chainable<Element>;
+      resetForm(): Chainable<Element>;
+      interceptFormSubmission(method: string, url: string, alias: string): Chainable<Element>;
+      
+      // Form State Helpers
+      verifyFormExists(): Chainable<Element>;
+      verifyFieldExists(selector: string): Chainable<Element>;
+      verifyFieldValue(selector: string, value: string): Chainable<Element>;
+      verifyFieldCount(selector: string, count: number): Chainable<Element>;
+      getFormData(): Chainable<FormFieldData>;
+      
+      // Complex Form Flow Helpers
+      fillCompleteForm(formData: FormFieldData): Chainable<Element>;
+      testFieldInteraction(fieldType: string, value: string): Chainable<Element>;
+      testFormFlow(steps: FormFlowStep[]): Chainable<Element>;
+      
+      // Legacy commands (backward compatibility)
+      fillField(label: string, value: string): Chainable<Element>;
+      selectOption(label: string, option: string): Chainable<Element>;
+      
+      // Convenience commands
+      fillEmail(value: string): Chainable<Element>;
+      fillPhone(value: string): Chainable<Element>;
+      fillPassword(value: string): Chainable<Element>;
+      fillText(value: string): Chainable<Element>;
+      
+      // Debug commands
+      logFormState(): Chainable<Element>;
+      waitForFormReady(): Chainable<Element>;
+      clearForm(): Chainable<Element>;
+      verifyFormValid(): Chainable<Element>;
+      screenshotForm(name?: string): Chainable<Element>;
+    }
+  }
+}