@rachelallyson/hero-hook-form 2.6.0 → 2.7.2

package/CHANGELOG.md

@@ -2,6 +2,59 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.7.2] - 2026-01-21
+
+### Fixed
+
+- **Critical Bug Fix: Input Name Attributes**: Fixed missing `name` prop forwarding in `InputField` component
+  - `CoercedInput` now properly passes `name={field.name}` to HeroUI Input components
+  - Fixes accessibility issues where form inputs had no name attribute in DOM
+  - Critical for form automation tools, accessibility compliance, and proper form submission
+  - Affects all input types (text, email, password, tel, number, etc.) in ZodForm
+
+### Internal
+
+- **Architecture Cleanup: Simplified HeroUI Integration**: Removed redundant dual-build system and `/react` subpath
+  - Eliminated duplicate `react/fields/` components and `tsconfig.react.json`
+  - Streamlined to single `#ui` alias approach that works with both individual `@heroui/*` packages and `@heroui/react`
+  - `@heroui/react` re-exports all components, making separate configurations unnecessary
+  - Cleaner codebase with same functionality and flexibility for users
+
+## [2.7.0] - 2026-01-13
+
+### Added
+
+- **Enhanced FieldArrayConfig**: Added powerful new features for dynamic field arrays
+  - `enableReordering` - Enable up/down buttons to reorder array items
+  - `reorderButtonText` - Customize reorder button labels (`{ up?: string; down?: string }`)
+  - `renderItem` - Custom render function for array items with full control over layout
+  - `renderAddButton` - Custom render function for the add button
+  - `defaultItem` - Function to create default values when adding new array items
+  - Conditional fields now work within array items (automatic path resolution)
+  - Example: `{ type: "fieldArray", name: "slots", enableReordering: true, ... }`
+
+- **SimpleForm Component**: New simplified API for single-field forms
+  - Perfect for search bars, message inputs, or simple single-field forms
+  - Uses `ZodForm` internally for consistent validation and error handling
+  - Example: `<SimpleForm schema={schema} field={FormFieldHelpers.input("message", "")} />`
+
+- **syncArrays Utility**: Helper function for syncing arrays in edit forms
+  - Determines which items to create, update, or delete based on IDs
+  - Useful for edit forms where you need to sync array changes with a database
+  - Example: `const { toCreate, toUpdate, toDelete } = syncArrays({ existing, current, getId })`
+
+- **createFieldArrayCustomConfig Helper**: Reduces boilerplate for custom field arrays
+  - Creates a `CustomFieldConfig` that uses `useFieldArray` internally
+  - Provides structured way to render custom array items with reordering
+  - Example: `createFieldArrayCustomConfig({ name: "slots", enableReordering: true, ... })`
+
+### Fixed
+
+- **Conditional Fields in Arrays**: Fixed path resolution for conditional fields within array items
+  - Uses `get()` from react-hook-form to correctly resolve nested paths like `"slots.0.slotType"`
+  - Conditional fields now work correctly within dynamic field arrays
+  - Example: Field with `dependsOn: "slotType"` in array item automatically resolves to `"slots.0.slotType"`
+
 ## [2.6.0] - 2026-01-13
 
 ### Added

package/dist/cypress/index.d.ts

@@ -1,80 +1,48 @@
-/**
- * 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
  */
 
+import type { FormFieldData, FormFlowStep, FieldInteractionOptions } from './types';
+
+// Re-export types and helpers
+export * from './types';
+export * from './utils';
+export * from './helpers';
+
+// Export the main registration function
+export function registerHeroFormCommands(): void;
 
+// Export constants
+export const SETUP_INSTRUCTIONS: {
+  installation: string;
+  import: string;
+  usage: string;
+};
 
+export const COMMANDS_REFERENCE: {
+  fieldInteractions: string[];
+  validation: string[];
+  submission: string[];
+  state: string[];
+  complex: string[];
+  convenience: string[];
+  debug: string[];
+};
+
+// Global type augmentations for Cypress
 declare global {
   namespace Cypress {
     interface Chainable {
-      // Field Interaction Helpers
+      // Field Interaction Helpers - Name-based (recommended, most reliable)
+      fillInputByName(name: string, value: string, options?: FieldInteractionOptions): Chainable<Element>;
+      fillTextareaByName(name: string, value: string, options?: FieldInteractionOptions): Chainable<Element>;
+      selectDropdownByName(name: string, optionValue: string): Chainable<Element>;
+      checkCheckboxByName(name: string): Chainable<Element>;
+      checkSwitchByName(name: string): Chainable<Element>;
+      uncheckCheckboxByName(name: string): Chainable<Element>;
+      uncheckSwitchByName(name: string): Chainable<Element>;
+      
+      // Field Interaction Helpers - Legacy methods (still supported)
       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>;
@@ -87,6 +55,12 @@ declare global {
       uncheckCheckbox(index?: number): Chainable<Element>;
       uncheckSwitch(index?: number): Chainable<Element>;
       moveSlider(value: number, index?: number): Chainable<Element>;
+      moveSliderByName(name: string, value: number): Chainable<Element>;
+      selectRadioByName(name: string, value: string): Chainable<Element>;
+      checkCheckboxInGroupByName(name: string, index?: number): Chainable<Element>;
+      selectAutocompleteByName(name: string, optionValue: string): Chainable<Element>;
+      fillDateInputByName(name: string): Chainable<Element>;
+      selectFileByName(name: string, filePath: string): Chainable<Element>;
       
       // Validation & Error Testing Helpers
       expectValidationError(message: string): Chainable<Element>;
@@ -104,14 +78,15 @@ declare global {
       // Form Submission Helpers
       submitForm(): Chainable<Element>;
       submitAndExpectSuccess(successIndicator?: string): Chainable<Element>;
-      submitAndExpectErrors(): Chainable<Element>;
+      submitAndExpectErrors(errorMessage?: string, formIndex?: number): 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>;
+      verifyFieldValueByName(name: string, value: string): Chainable<Element>;
+      verifyFieldValue(type: string, value: string, index?: number): Chainable<Element>;
       verifyFieldCount(selector: string, count: number): Chainable<Element>;
       getFormData(): Chainable<FormFieldData>;
       
@@ -132,10 +107,26 @@ declare global {
       
       // Debug commands
       logFormState(): Chainable<Element>;
-      waitForFormReady(): Chainable<Element>;
+      waitForFormReady(timeout?: number): Chainable<JQuery<HTMLElement>>;
       clearForm(): Chainable<Element>;
       verifyFormValid(): Chainable<Element>;
       screenshotForm(name?: string): Chainable<Element>;
+      
+      // Utility Helpers (for better form testing)
+      waitForReactUpdate(timeout?: number): Chainable<void>;
+      waitForElementState(selector: string, state: 'visible' | 'hidden' | 'enabled' | 'disabled' | 'exist', timeout?: number): Chainable<JQuery<HTMLElement>>;
+      waitForDropdownOpen(timeout?: number): Chainable<JQuery<HTMLElement>>;
+      waitForDropdownClose(buttonSelector?: string, timeout?: number): Chainable<JQuery<HTMLElement>>;
+      getFormDataValue(fieldName: string): Chainable<string | File | null>;
+      verifyFormDataValue(fieldName: string, expectedValue: string | number, timeout?: number): Chainable<void>;
+      waitForValidation(shouldHaveErrors?: boolean, timeout?: number): Chainable<void>;
+      getFormDataArray(fieldName: string): Chainable<string[]>;
+      verifyFormDataArray(fieldName: string, expectedValues: string[], exactMatch?: boolean): Chainable<void>;
+      verifyFormDataFieldExists(fieldName: string): Chainable<void>;
+      verifyNameAttribute(fieldName: string, selector?: string): Chainable<void>;
+      verifyFormDataStructure(expectedData: Record<string, string | number | string[]>): Chainable<void>;
+      verifyFormCleared(fieldNames: string[]): Chainable<void>;
+      verifyDropdownNameAttribute(fieldName: string, labelText?: string): Chainable<void>;
     }
   }
 }