@bookinglab/booking-ui-react 1.5.0 → 1.6.0

package/README.md

@@ -481,6 +481,85 @@ const formRef = useRef<ContactDetailsFormRef>(null);
 
 ---
 
+## ResetPasswordForm
+
+A reusable password reset form with current password, new password, and confirm new password fields. Includes built-in validation, customizable submit button text, and programmatic control via ref.
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onSubmit` | `(values: ResetPasswordFormValues) => void` | required | Called with all 3 values on valid submit |
+| `onChange` | `(values: Partial<ResetPasswordFormValues>, isValid: boolean) => void` | `undefined` | Called on every field change |
+| `submitLabel` | `string` | `"Update Password"` | Text for the submit button |
+| `validateOnBlur` | `boolean` | `true` | Whether to validate fields on blur |
+| `className` | `string` | `""` | Class name for the form element |
+| `classNames` | `ResetPasswordFormClassNames` | `undefined` | Custom class names for styling |
+
+### Fields
+
+| Field | Label | Required | Validation |
+|-------|-------|----------|------------|
+| `currentPassword` | Current Password | Yes | required |
+| `newPassword` | New Password | Yes | required |
+| `confirmNewPassword` | Confirm New Password | Yes | required, must match New Password |
+
+### Usage
+
+```tsx
+import { useRef } from 'react';
+import {
+  ResetPasswordForm,
+  ResetPasswordFormRef,
+  ResetPasswordFormValues,
+} from '@bookinglab/booking-ui-react';
+
+function MyComponent() {
+  const formRef = useRef<ResetPasswordFormRef>(null);
+
+  const handleSubmit = (values: ResetPasswordFormValues) => {
+    console.log('Password reset:', values);
+    // { currentPassword: '...', newPassword: '...', confirmNewPassword: '...' }
+  };
+
+  return (
+    <>
+      <ResetPasswordForm
+        ref={formRef}
+        onSubmit={handleSubmit}
+        submitLabel="Change Password"
+      />
+      <button onClick={() => formRef.current?.reset()}>Reset</button>
+    </>
+  );
+}
+```
+
+### Ref Methods
+
+| Method | Description |
+|--------|-------------|
+| `reset()` | Clear all values, errors, and touched state |
+| `setValues(values)` | Programmatically set field values |
+
+### Styling
+
+```tsx
+<ResetPasswordForm
+  onSubmit={handleSubmit}
+  classNames={{
+    fieldWrapper: 'mb-6',
+    label: 'text-white font-bold',
+    input: 'border-2 border-gray-400 rounded-lg p-3',
+    inputError: 'border-red-500',
+    errorText: 'text-red-400 text-sm',
+    button: 'bg-primary text-white py-3 px-6 rounded-lg',
+  }}
+/>
+```
+
+---
+
 ## Requirements
 
 - React 17.0.0 or higher
@@ -515,6 +594,10 @@ import type {
   ContactDetailsFieldSettings,
   ContactDetailsInitialValues,
   ContactFieldSettings,
+  ResetPasswordFormProps,
+  ResetPasswordFormRef,
+  ResetPasswordFormValues,
+  ResetPasswordFormClassNames,
 } from '@bookinglab/booking-ui-react';
 ```
 

package/dist/index.d.cts

@@ -218,6 +218,58 @@ interface ContactDetailsFormRef {
     }>) => void;
 }
 
+/**
+ * Values emitted by the ResetPasswordForm on submit
+ */
+interface ResetPasswordFormValues {
+    currentPassword: string;
+    newPassword: string;
+    confirmNewPassword: string;
+}
+/**
+ * Custom class names for styling ResetPasswordForm elements
+ */
+interface ResetPasswordFormClassNames {
+    /** Wrapper for each form field */
+    fieldWrapper?: string;
+    /** All labels */
+    label?: string;
+    /** All input elements */
+    input?: string;
+    /** Input elements in error state */
+    inputError?: string;
+    /** Error message text */
+    errorText?: string;
+    /** Submit button */
+    button?: string;
+}
+/**
+ * Props for the ResetPasswordForm component
+ */
+interface ResetPasswordFormProps {
+    /** Called with all 3 password values on valid submit */
+    onSubmit: (values: ResetPasswordFormValues) => void;
+    /** Called on every field change with current values and validity */
+    onChange?: (values: Partial<ResetPasswordFormValues>, isValid: boolean) => void;
+    /** Whether to validate on blur (default: true) */
+    validateOnBlur?: boolean;
+    /** Text for the submit button (default: "Update Password") */
+    submitLabel?: string;
+    /** Class name for the form element */
+    className?: string;
+    /** Custom class names for styling individual elements */
+    classNames?: ResetPasswordFormClassNames;
+}
+/**
+ * Imperative handle methods exposed via ref
+ */
+interface ResetPasswordFormRef {
+    /** Reset all form values and errors */
+    reset: () => void;
+    /** Programmatically set form values */
+    setValues: (values: Partial<ResetPasswordFormValues>) => void;
+}
+
 interface QuestionOption {
     id: number;
     name: string;
@@ -355,6 +407,26 @@ declare const RegistrationForm: React.ForwardRefExoticComponent<RegistrationForm
  */
 declare const ContactDetailsForm: React.ForwardRefExoticComponent<ContactDetailsFormProps & React.RefAttributes<ContactDetailsFormRef>>;
 
+/**
+ * A reusable, accessible reset-password form component.
+ *
+ * Features:
+ * - Three password fields: Current, New, Confirm New
+ * - Validation: all required; confirm must match new password
+ * - forwardRef for programmatic reset()/setValues()
+ * - onChange callback with live validity
+ * - Granular styling via classNames prop
+ *
+ * @example
+ * ```tsx
+ * <ResetPasswordForm
+ *   onSubmit={(values) => console.log(values)}
+ *   submitLabel="Change Password"
+ * />
+ * ```
+ */
+declare const ResetPasswordForm: React.ForwardRefExoticComponent<ResetPasswordFormProps & React.RefAttributes<ResetPasswordFormRef>>;
+
 /**
  * Validation helper functions for form fields
  * Each validator returns an error message string if invalid, or null if valid
@@ -388,4 +460,4 @@ declare function minLen(min: number): (value: string) => string | null;
  */
 declare function compose(...validators: Array<(value: string) => string | null>): (value: string) => string | null;
 
-export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, compose, email, minLen, phone, required, ukPostcode };
+export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, compose, email, minLen, phone, required, ukPostcode };

package/dist/index.d.ts

@@ -218,6 +218,58 @@ interface ContactDetailsFormRef {
     }>) => void;
 }
 
+/**
+ * Values emitted by the ResetPasswordForm on submit
+ */
+interface ResetPasswordFormValues {
+    currentPassword: string;
+    newPassword: string;
+    confirmNewPassword: string;
+}
+/**
+ * Custom class names for styling ResetPasswordForm elements
+ */
+interface ResetPasswordFormClassNames {
+    /** Wrapper for each form field */
+    fieldWrapper?: string;
+    /** All labels */
+    label?: string;
+    /** All input elements */
+    input?: string;
+    /** Input elements in error state */
+    inputError?: string;
+    /** Error message text */
+    errorText?: string;
+    /** Submit button */
+    button?: string;
+}
+/**
+ * Props for the ResetPasswordForm component
+ */
+interface ResetPasswordFormProps {
+    /** Called with all 3 password values on valid submit */
+    onSubmit: (values: ResetPasswordFormValues) => void;
+    /** Called on every field change with current values and validity */
+    onChange?: (values: Partial<ResetPasswordFormValues>, isValid: boolean) => void;
+    /** Whether to validate on blur (default: true) */
+    validateOnBlur?: boolean;
+    /** Text for the submit button (default: "Update Password") */
+    submitLabel?: string;
+    /** Class name for the form element */
+    className?: string;
+    /** Custom class names for styling individual elements */
+    classNames?: ResetPasswordFormClassNames;
+}
+/**
+ * Imperative handle methods exposed via ref
+ */
+interface ResetPasswordFormRef {
+    /** Reset all form values and errors */
+    reset: () => void;
+    /** Programmatically set form values */
+    setValues: (values: Partial<ResetPasswordFormValues>) => void;
+}
+
 interface QuestionOption {
     id: number;
     name: string;
@@ -355,6 +407,26 @@ declare const RegistrationForm: React.ForwardRefExoticComponent<RegistrationForm
  */
 declare const ContactDetailsForm: React.ForwardRefExoticComponent<ContactDetailsFormProps & React.RefAttributes<ContactDetailsFormRef>>;
 
+/**
+ * A reusable, accessible reset-password form component.
+ *
+ * Features:
+ * - Three password fields: Current, New, Confirm New
+ * - Validation: all required; confirm must match new password
+ * - forwardRef for programmatic reset()/setValues()
+ * - onChange callback with live validity
+ * - Granular styling via classNames prop
+ *
+ * @example
+ * ```tsx
+ * <ResetPasswordForm
+ *   onSubmit={(values) => console.log(values)}
+ *   submitLabel="Change Password"
+ * />
+ * ```
+ */
+declare const ResetPasswordForm: React.ForwardRefExoticComponent<ResetPasswordFormProps & React.RefAttributes<ResetPasswordFormRef>>;
+
 /**
  * Validation helper functions for form fields
  * Each validator returns an error message string if invalid, or null if valid
@@ -388,4 +460,4 @@ declare function minLen(min: number): (value: string) => string | null;
  */
 declare function compose(...validators: Array<(value: string) => string | null>): (value: string) => string | null;
 
-export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, compose, email, minLen, phone, required, ukPostcode };
+export { BookingForm, type BookingFormClassNames, type BookingFormProps, type BookingUIConfig, type ContactDetailsAnswerEntry, type ContactDetailsFieldSettings, ContactDetailsForm, type ContactDetailsFormClassNames, type ContactDetailsFormProps, type ContactDetailsFormRef, type ContactDetailsInitialValues, type ContactDetailsQuestionEntry, type ContactDetailsValues, type ContactFieldSettings, type FieldConfig, type FieldOption, type FormErrors, type FormValues, type Question, type QuestionOption, type QuestionSettings, RegistrationForm, type RegistrationFormClassNames, type RegistrationFormErrors, type RegistrationFormProps, type RegistrationFormRef, type RegistrationFormValues, ResetPasswordForm, type ResetPasswordFormClassNames, type ResetPasswordFormProps, type ResetPasswordFormRef, type ResetPasswordFormValues, compose, email, minLen, phone, required, ukPostcode };

package/dist/index.js

@@ -1088,10 +1088,182 @@ var ContactDetailsForm = react.forwardRef(
   }
 );
 ContactDetailsForm.displayName = "ContactDetailsForm";
+var FIELDS = [
+  { name: "currentPassword", label: "Current Password" },
+  { name: "newPassword", label: "New Password" },
+  { name: "confirmNewPassword", label: "Confirm New Password" }
+];
+var ResetPasswordForm = react.forwardRef(
+  ({
+    onSubmit,
+    onChange,
+    validateOnBlur = true,
+    submitLabel = "Update Password",
+    className = "",
+    classNames = {}
+  }, ref) => {
+    const formId = react.useId();
+    const [values, setValues] = react.useState({
+      currentPassword: "",
+      newPassword: "",
+      confirmNewPassword: ""
+    });
+    const [errors, setErrors] = react.useState({});
+    const [touched, setTouched] = react.useState({});
+    const validateField = react.useCallback(
+      (name, val, allValues) => {
+        if (!val || val.trim() === "") return "This field is required";
+        if (name === "confirmNewPassword" && val !== allValues.newPassword) {
+          return "Passwords do not match";
+        }
+        return null;
+      },
+      []
+    );
+    const checkIsValid = react.useCallback(
+      (v) => {
+        for (const field of FIELDS) {
+          if (validateField(field.name, v[field.name], v)) return false;
+        }
+        return true;
+      },
+      [validateField]
+    );
+    const handleChange = react.useCallback(
+      (name, val) => {
+        const newValues = { ...values, [name]: val };
+        setValues(newValues);
+        if (touched[name]) {
+          const error = validateField(name, val, newValues);
+          if (!error) {
+            setErrors((prev) => {
+              const next = { ...prev };
+              delete next[name];
+              return next;
+            });
+          }
+        }
+        if (name === "newPassword" && touched.confirmNewPassword) {
+          const confirmError = validateField("confirmNewPassword", newValues.confirmNewPassword, newValues);
+          if (confirmError) {
+            setErrors((prev) => ({ ...prev, confirmNewPassword: confirmError }));
+          } else {
+            setErrors((prev) => {
+              const next = { ...prev };
+              delete next.confirmNewPassword;
+              return next;
+            });
+          }
+        }
+        onChange?.(newValues, checkIsValid(newValues));
+      },
+      [values, touched, validateField, onChange, checkIsValid]
+    );
+    const handleBlur = react.useCallback(
+      (name) => {
+        setTouched((prev) => ({ ...prev, [name]: true }));
+        if (validateOnBlur) {
+          const error = validateField(name, values[name], values);
+          if (error) {
+            setErrors((prev) => ({ ...prev, [name]: error }));
+          } else {
+            setErrors((prev) => {
+              const next = { ...prev };
+              delete next[name];
+              return next;
+            });
+          }
+        }
+      },
+      [validateOnBlur, values, validateField]
+    );
+    const handleSubmit = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        const allTouched = {};
+        const newErrors = {};
+        let isValid = true;
+        for (const field of FIELDS) {
+          allTouched[field.name] = true;
+          const error = validateField(field.name, values[field.name], values);
+          if (error) {
+            newErrors[field.name] = error;
+            isValid = false;
+          }
+        }
+        setTouched(allTouched);
+        setErrors(newErrors);
+        if (isValid) onSubmit(values);
+      },
+      [values, validateField, onSubmit]
+    );
+    react.useImperativeHandle(ref, () => ({
+      reset: () => {
+        setValues({ currentPassword: "", newPassword: "", confirmNewPassword: "" });
+        setErrors({});
+        setTouched({});
+      },
+      setValues: (newVals) => {
+        setValues((prev) => {
+          const merged = { ...prev };
+          for (const [key, value] of Object.entries(newVals)) {
+            if (value !== void 0) {
+              merged[key] = value;
+            }
+          }
+          return merged;
+        });
+      }
+    }), []);
+    const styles = {
+      fieldWrapper: classNames.fieldWrapper || "mb-4",
+      label: classNames.label || "block text-sm font-medium mb-1",
+      input: classNames.input || "w-full px-3 py-2 border rounded-md",
+      inputError: classNames.inputError || "border-red-500",
+      errorText: classNames.errorText || "mt-1 text-xs text-red-600",
+      button: classNames.button || "w-full mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 disabled:opacity-50"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className, noValidate: true, children: [
+      FIELDS.map((field) => {
+        const fieldId = `${formId}-${field.name}`;
+        const errorId = `${fieldId}-error`;
+        const value = values[field.name];
+        const error = errors[field.name];
+        const isTouched = touched[field.name];
+        const showError = isTouched && error;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.fieldWrapper, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+            field.label,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: fieldId,
+              name: field.name,
+              type: "password",
+              value,
+              onChange: (e) => handleChange(field.name, e.target.value),
+              onBlur: () => handleBlur(field.name),
+              className: `${styles.input} ${showError ? styles.inputError : ""}`,
+              "aria-invalid": showError ? "true" : "false",
+              "aria-describedby": showError ? errorId : void 0,
+              "aria-required": "true"
+            }
+          ),
+          showError && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+        ] }, field.name);
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: styles.button, children: submitLabel })
+    ] });
+  }
+);
+ResetPasswordForm.displayName = "ResetPasswordForm";
 
 exports.BookingForm = BookingForm;
 exports.ContactDetailsForm = ContactDetailsForm;
 exports.RegistrationForm = RegistrationForm;
+exports.ResetPasswordForm = ResetPasswordForm;
 exports.compose = compose;
 exports.email = email;
 exports.minLen = minLen;