@rachelallyson/hero-hook-form 2.1.1 → 2.1.3

package/CHANGELOG.md

@@ -2,6 +2,38 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.1.3] - 2025-01-28
+
+### Fixed
+
+- **Cypress Form Submission Helpers**: Improved reliability of `cy.submitForm()` and related submission helpers
+  - Added form existence verification before submission
+  - Added submit button visibility and enabled state checks
+  - Implemented retry logic for better handling of timing issues
+  - Fixed `submitAndExpectSuccess()`, `submitAndExpectErrors()`, and `interceptFormSubmission()` helpers
+  - Made `expectFieldError()` more flexible by making `errorMessage` parameter optional
+  - Fixed TypeScript type compatibility issues in `getFormData()`
+  - All helpers now properly wait for forms to be ready before interacting
+
+### Added
+
+- **Test Coverage**: Added comprehensive tests for `cy.submitForm()` helper in ZodForm component tests
+  - Tests successful form submission
+  - Tests validation error handling with submission helpers
+
+## [2.1.2] - 2025-01-28
+
+### Added
+
+- **Date field helper**: Added `FormFieldHelpers.date()` method for creating date fields in forms
+- Supports optional `dateProps` parameter for customizing the date input component
+- Comprehensive test coverage for date field functionality
+
+### Fixed
+
+- **ZodForm FormProvider**: Wrapped ZodForm component with FormProvider to ensure form context is properly available
+- Fixes issues with form context not being accessible in nested components
+
 ## [2.1.1] - 2025-01-28
 
 ### Fixed

package/dist/cypress/index.js

@@ -293,48 +293,72 @@ function expectNoValidationErrors() {
   return cy.get("body").should("not.contain", "error").and("not.contain", "invalid");
 }
 function expectFieldError(fieldLabel, errorMessage) {
-  return cy.contains("label", fieldLabel).closest("div").should("contain", errorMessage);
+  const fieldContainer = cy.contains("label", fieldLabel).closest("div");
+  if (errorMessage) {
+    return fieldContainer.should("contain", errorMessage);
+  }
+  return fieldContainer.should(($div) => {
+    const text = $div.text();
+    const hasError = text.includes("error") || text.includes("invalid") || text.includes("required") || $div.find('[class*="error"], [class*="invalid"], [class*="danger"]').length > 0;
+    expect(hasError, "Field should have an error").to.be.true;
+  });
 }
 function expectFieldValid(fieldLabel) {
   return cy.contains("label", fieldLabel).closest("div").should("not.contain", "error").and("not.contain", "invalid");
 }
 function triggerValidation(submitButton = false) {
   if (submitButton) {
-    return cy.get(HERO_UI_SELECTORS.button.submit).first().click();
+    return withRetry(() => {
+      cy.get("form").should("exist");
+      cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+      return cy.get("form");
+    }, DEFAULT_CONFIG);
   }
   return cy.get("input").first().blur();
 }
 function submitForm() {
-  return cy.get(HERO_UI_SELECTORS.button.submit).first().click();
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function submitAndExpectSuccess(successIndicator) {
-  cy.get(HERO_UI_SELECTORS.button.submit).first().click();
-  if (successIndicator) {
-    return cy.contains(successIndicator).should("be.visible");
-  }
-  return cy.get("body").should("contain.one.of", ["success", "submitted", "complete", "thank you"]);
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+    if (successIndicator) {
+      cy.contains(successIndicator).should("be.visible");
+    } else {
+      cy.get("body").should("contain.one.of", ["success", "submitted", "complete", "thank you"]);
+    }
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function submitAndExpectErrors(errorMessage, formIndex = 0) {
-  cy.get(HERO_UI_SELECTORS.button.submit).eq(formIndex).click();
-  cy.get("form").should("exist");
-  cy.wait(500);
-  if (errorMessage) {
-    cy.get("body").then(($body) => {
-      if ($body.text().includes(errorMessage)) {
-        cy.contains(errorMessage).should("be.visible");
-      } else {
-        cy.log("Expected error message not found:", errorMessage);
-        cy.get('[class*="text-danger"], [class*="text-red"], [class*="error"]').then(($errors) => {
-          cy.log("Found validation errors:", $errors.length);
-          $errors.each((index, error) => {
-            cy.log(`Error ${index}:`, error.textContent);
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).eq(formIndex).should("be.visible").should("not.be.disabled").click();
+    cy.get("form").should("exist");
+    cy.wait(500);
+    if (errorMessage) {
+      cy.get("body").then(($body) => {
+        if ($body.text().includes(errorMessage)) {
+          cy.contains(errorMessage).should("be.visible");
+        } else {
+          cy.log("Expected error message not found:", errorMessage);
+          cy.get('[class*="text-danger"], [class*="text-red"], [class*="error"]').then(($errors) => {
+            cy.log("Found validation errors:", $errors.length);
+            $errors.each((index, error) => {
+              cy.log(`Error ${index}:`, error.textContent);
+            });
           });
-        });
-        cy.contains(errorMessage).should("be.visible");
-      }
-    });
-  }
-  return cy.get("form");
+          cy.contains(errorMessage).should("be.visible");
+        }
+      });
+    }
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function resetForm() {
   return cy.get("body").then(($body) => {
@@ -348,7 +372,11 @@ function resetForm() {
 }
 function interceptFormSubmission(method, url, alias) {
   cy.intercept(method, url).as(alias);
-  return cy.get(HERO_UI_SELECTORS.button.submit).first().click();
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function verifyFormExists() {
   return cy.get("form").should("exist");
@@ -365,7 +393,7 @@ function verifyFieldCount(selector, count) {
   return cy.get(selector).filter(":visible").not('[type="hidden"]').should("have.length", count);
 }
 function getFormData() {
-  return extractFormData();
+  return extractFormData().then((data) => data);
 }
 function fillCompleteForm(formData) {
   return cy.then(() => {

package/dist/index.d.ts

@@ -724,7 +724,7 @@ interface ZodFormProps<T extends FieldValues> {
         values: T;
     }) => React$1.ReactNode;
 }
-declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
+declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
 
 /**
  * Hook for using Zod validation with React Hook Form
@@ -781,6 +781,10 @@ declare const FormFieldHelpers: {
      * Create a checkbox field
      */
     checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    /**
+     * Create a date field
+     */
+    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Record<string, string | number | boolean>) => ZodFormFieldConfig<T>;
     /**
      * Create an input field
      */

package/dist/index.js

@@ -1855,6 +1855,9 @@ import { useFormContext as useFormContext5 } from "react-hook-form";
 // src/components/ZodForm.tsx
 import React21 from "react";
 import { Button as Button5 } from "@heroui/react";
+import {
+  FormProvider as FormProvider2
+} from "react-hook-form";
 
 // src/zod-integration.ts
 import { useForm as useForm2 } from "react-hook-form";
@@ -2182,16 +2185,16 @@ function ZodForm({
     }
   }, [form.formState.errors, config.onError]);
   if (render) {
-    return render({
+    return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, render({
       errors: form.formState.errors,
       form,
       isSubmitted: enhancedState.status !== "idle",
       isSubmitting: enhancedState.isSubmitting,
       isSuccess: enhancedState.isSuccess,
       values: form.getValues()
-    });
+    }));
   }
-  return /* @__PURE__ */ React21.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, /* @__PURE__ */ React21.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React21.createElement(
     FormStatus,
     {
       state: enhancedState,
@@ -2217,7 +2220,7 @@ function ZodForm({
       onPress: resetForm
     },
     resetButtonText
-  )));
+  ))));
 }
 
 // src/builders/BasicFormBuilder.ts
@@ -2302,6 +2305,15 @@ var FormFieldHelpers = {
     name,
     type: "checkbox"
   }),
+  /**
+   * Create a date field
+   */
+  date: (name, label, dateProps) => ({
+    dateProps,
+    label,
+    name,
+    type: "date"
+  }),
   /**
    * Create an input field
    */

package/dist/react/index.d.ts

@@ -716,7 +716,7 @@ interface ZodFormProps<T extends FieldValues> {
         values: T;
     }) => React$1.ReactNode;
 }
-declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
+declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
 
 /**
  * Hook for using Zod validation with React Hook Form
@@ -773,6 +773,10 @@ declare const FormFieldHelpers: {
      * Create a checkbox field
      */
     checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    /**
+     * Create a date field
+     */
+    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Record<string, string | number | boolean>) => ZodFormFieldConfig<T>;
     /**
      * Create an input field
      */

package/dist/react/index.js

@@ -1860,6 +1860,9 @@ import { useFormContext as useFormContext5 } from "react-hook-form";
 // src/components/ZodForm.tsx
 import React21 from "react";
 import { Button as Button5 } from "@heroui/react";
+import {
+  FormProvider as FormProvider2
+} from "react-hook-form";
 
 // src/zod-integration.ts
 import { useForm as useForm2 } from "react-hook-form";
@@ -2187,16 +2190,16 @@ function ZodForm({
     }
   }, [form.formState.errors, config.onError]);
   if (render) {
-    return render({
+    return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, render({
       errors: form.formState.errors,
       form,
       isSubmitted: enhancedState.status !== "idle",
       isSubmitting: enhancedState.isSubmitting,
       isSuccess: enhancedState.isSuccess,
       values: form.getValues()
-    });
+    }));
   }
-  return /* @__PURE__ */ React21.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, /* @__PURE__ */ React21.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React21.createElement(
     FormStatus,
     {
       state: enhancedState,
@@ -2222,7 +2225,7 @@ function ZodForm({
       onPress: resetForm
     },
     resetButtonText
-  )));
+  ))));
 }
 
 // src/builders/BasicFormBuilder.ts
@@ -2307,6 +2310,15 @@ var FormFieldHelpers = {
     name,
     type: "checkbox"
   }),
+  /**
+   * Create a date field
+   */
+  date: (name, label, dateProps) => ({
+    dateProps,
+    label,
+    name,
+    type: "date"
+  }),
   /**
    * Create an input field
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rachelallyson/hero-hook-form",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
   "author": "Rachel Higley",
   "homepage": "https://rachelallyson.github.io/hero-hook-form/",