@bookinglab/booking-ui-react 1.0.2 → 1.1.0

package/dist/index.js

@@ -1,5 +1,7 @@
-import { useState, useCallback, useEffect } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/BookingForm.tsx
 var cx = (...classes) => classes.filter(Boolean).join(" ");
@@ -26,18 +28,18 @@ function FormField({
   const checkboxLabelClasses = cx("text-sm", classNames?.label ?? "text-gray-700");
   const renderLabel = () => {
     if (question.detail_type === "heading") return null;
-    return /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: labelClasses, children: [
       question.name,
-      question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+      question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
     ] });
   };
   const renderHelpText = () => {
     if (!question.help_text) return null;
-    return /* @__PURE__ */ jsx("p", { className: classNames?.helpText ?? defaultHelpText, children: question.help_text });
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: classNames?.helpText ?? defaultHelpText, children: question.help_text });
   };
   const renderError = () => {
     if (!error) return null;
-    return /* @__PURE__ */ jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
   };
   const ariaProps = {
     "aria-invalid": hasError ? true : void 0,
@@ -46,11 +48,11 @@ function FormField({
   };
   switch (question.detail_type) {
     case "heading":
-      return /* @__PURE__ */ jsx("h3", { className: classNames?.heading ?? defaultHeading, children: question.name });
+      return /* @__PURE__ */ jsxRuntime.jsx("h3", { className: classNames?.heading ?? defaultHeading, children: question.name });
     case "text_field":
-      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             id: inputId,
@@ -66,9 +68,9 @@ function FormField({
         renderError()
       ] });
     case "text_area":
-      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "textarea",
           {
             id: inputId,
@@ -84,9 +86,9 @@ function FormField({
         renderError()
       ] });
     case "select":
-      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
-        /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
             id: inputId,
@@ -95,8 +97,8 @@ function FormField({
             className: inputClasses,
             ...ariaProps,
             children: [
-              /* @__PURE__ */ jsx("option", { value: "", children: "Select an option" }),
-              question.options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.id, children: option.name }, option.id))
+              /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Select an option" }),
+              question.options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.id, children: option.name }, option.id))
             ]
           }
         ),
@@ -104,9 +106,9 @@ function FormField({
         renderError()
       ] });
     case "date":
-      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             id: inputId,
@@ -123,9 +125,9 @@ function FormField({
         renderError()
       ] });
     case "number":
-      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
         renderLabel(),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             id: inputId,
@@ -143,9 +145,9 @@ function FormField({
         renderError()
       ] });
     case "check":
-      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               id: inputId,
@@ -156,9 +158,9 @@ function FormField({
               ...ariaProps
             }
           ),
-          /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
             question.name,
-            question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+            question.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
           ] })
         ] }),
         renderHelpText(),
@@ -180,10 +182,10 @@ function BookingForm({
     ...classNamesProp,
     label: classNamesProp?.label ?? labelClassName
   };
-  const [values, setValues] = useState({});
-  const [errors, setErrors] = useState({});
-  const [touched, setTouched] = useState({});
-  const isQuestionVisible = useCallback(
+  const [values, setValues] = react.useState({});
+  const [errors, setErrors] = react.useState({});
+  const [touched, setTouched] = react.useState({});
+  const isQuestionVisible = react.useCallback(
     (question) => {
       const { settings } = question;
       if (!settings?.conditional_answers) {
@@ -246,7 +248,7 @@ function BookingForm({
     [values, questions]
   );
   const visibleQuestions = questions.filter(isQuestionVisible);
-  const validateField = useCallback((question, value) => {
+  const validateField = react.useCallback((question, value) => {
     if (question.detail_type === "heading") return null;
     if (question.required) {
       if (value === void 0 || value === "" || value === null) {
@@ -267,7 +269,7 @@ function BookingForm({
     }
     return null;
   }, []);
-  const validateAll = useCallback(() => {
+  const validateAll = react.useCallback(() => {
     const newErrors = {};
     let isValid = true;
     visibleQuestions.forEach((question) => {
@@ -280,7 +282,7 @@ function BookingForm({
     setErrors(newErrors);
     return isValid;
   }, [visibleQuestions, values, validateField]);
-  useEffect(() => {
+  react.useEffect(() => {
     const visibleIds = new Set(visibleQuestions.map((q) => q.id));
     setErrors((prev) => {
       let changed = false;
@@ -330,8 +332,8 @@ function BookingForm({
     }
   };
   const defaultButton = "w-full mt-4 px-4 py-2 bg-blue-600 text-white font-medium rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors";
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className, noValidate: true, children: [
-    visibleQuestions.map((question) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className, noValidate: true, children: [
+    visibleQuestions.map((question) => /* @__PURE__ */ jsxRuntime.jsx(
       FormField,
       {
         question,
@@ -342,7 +344,7 @@ function BookingForm({
       },
       question.id
     )),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "submit",
@@ -353,6 +355,299 @@ function BookingForm({
   ] });
 }
 
-export { BookingForm };
+// src/utils/validators.ts
+function required(value) {
+  if (!value || value.trim() === "") {
+    return "This field is required";
+  }
+  return null;
+}
+function email(value) {
+  if (!value) return null;
+  const emailRegex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
+  if (!emailRegex.test(value)) {
+    return "Please enter a valid email address";
+  }
+  return null;
+}
+function phone(value) {
+  if (!value) return null;
+  const cleaned = value.replace(/[\s\-\(\)]/g, "");
+  const phoneRegex = /^\+?[0-9]{7,15}$/;
+  if (!phoneRegex.test(cleaned)) {
+    return "Please enter a valid phone number";
+  }
+  return null;
+}
+function ukPostcode(value) {
+  if (!value) return null;
+  const postcodeRegex = /^([A-Z]{1,2}[0-9][A-Z0-9]? ?[0-9][A-Z]{2})$/i;
+  if (!postcodeRegex.test(value.trim())) {
+    return "Please enter a valid UK postcode";
+  }
+  return null;
+}
+function minLen(min) {
+  return (value) => {
+    if (!value) return null;
+    if (value.trim().length < min) {
+      return `Must be at least ${min} character${min === 1 ? "" : "s"}`;
+    }
+    return null;
+  };
+}
+function compose(...validators) {
+  return (value) => {
+    for (const validator of validators) {
+      const error = validator(value);
+      if (error) return error;
+    }
+    return null;
+  };
+}
+var DEFAULT_FIELDS = [
+  {
+    name: "firstName",
+    label: "First name",
+    type: "text",
+    required: true,
+    validate: required
+  },
+  {
+    name: "lastName",
+    label: "Last name",
+    type: "text",
+    required: true,
+    validate: required
+  },
+  {
+    name: "email",
+    label: "Email address",
+    type: "email",
+    required: true,
+    validate: compose(required, email)
+  },
+  {
+    name: "phone",
+    label: "Contact number",
+    type: "tel",
+    required: false,
+    validate: phone
+  },
+  {
+    name: "address1",
+    label: "Address 1",
+    type: "text",
+    required: true,
+    validate: required
+  },
+  {
+    name: "address2",
+    label: "Address 2",
+    type: "text",
+    required: false
+  },
+  {
+    name: "city",
+    label: "Town/City",
+    type: "text",
+    required: true,
+    validate: required
+  },
+  {
+    name: "postcode",
+    label: "Postcode",
+    type: "text",
+    required: true,
+    validate: compose(required, ukPostcode)
+  }
+];
+var RegistrationForm = react.forwardRef(
+  ({
+    fields = DEFAULT_FIELDS,
+    onSubmit,
+    onChange,
+    validateOnBlur = true,
+    submitLabel = "Submit",
+    className = "",
+    classNames = {}
+  }, ref) => {
+    const formId = react.useId();
+    const [values, setValues] = react.useState({});
+    const [errors, setErrors] = react.useState({});
+    const [touched, setTouched] = react.useState({});
+    const validateField = react.useCallback(
+      (field, value) => {
+        if (field.required && (!value || value.trim() === "")) {
+          return "This field is required";
+        }
+        if (field.validate && value) {
+          return field.validate(value);
+        }
+        return null;
+      },
+      []
+    );
+    const validateAll = react.useCallback(() => {
+      const newErrors = {};
+      let isValid = true;
+      for (const field of fields) {
+        const value = values[field.name] || "";
+        const error = validateField(field, value);
+        if (error) {
+          newErrors[field.name] = error;
+          isValid = false;
+        }
+      }
+      setErrors(newErrors);
+      return isValid;
+    }, [fields, values, validateField]);
+    const checkIsValid = react.useCallback(
+      (currentValues) => {
+        for (const field of fields) {
+          const value = currentValues[field.name] || "";
+          const error = validateField(field, value);
+          if (error) return false;
+        }
+        return true;
+      },
+      [fields, validateField]
+    );
+    const handleChange = react.useCallback(
+      (fieldName, value) => {
+        const newValues = { ...values, [fieldName]: value };
+        setValues(newValues);
+        if (touched[fieldName]) {
+          const field = fields.find((f) => f.name === fieldName);
+          if (field) {
+            const error = validateField(field, value);
+            if (!error) {
+              setErrors((prev) => {
+                const next = { ...prev };
+                delete next[fieldName];
+                return next;
+              });
+            }
+          }
+        }
+        if (onChange) {
+          const isValid = checkIsValid(newValues);
+          onChange(newValues, isValid);
+        }
+      },
+      [values, touched, fields, validateField, onChange, checkIsValid]
+    );
+    const handleBlur = react.useCallback(
+      (fieldName) => {
+        setTouched((prev) => ({ ...prev, [fieldName]: true }));
+        if (validateOnBlur) {
+          const field = fields.find((f) => f.name === fieldName);
+          if (field) {
+            const value = values[fieldName] || "";
+            const error = validateField(field, value);
+            if (error) {
+              setErrors((prev) => ({ ...prev, [fieldName]: error }));
+            } else {
+              setErrors((prev) => {
+                const next = { ...prev };
+                delete next[fieldName];
+                return next;
+              });
+            }
+          }
+        }
+      },
+      [validateOnBlur, fields, values, validateField]
+    );
+    const handleSubmit = react.useCallback(
+      (e) => {
+        e.preventDefault();
+        const allTouched = {};
+        for (const field of fields) {
+          allTouched[field.name] = true;
+        }
+        setTouched(allTouched);
+        if (validateAll()) {
+          onSubmit(values);
+        }
+      },
+      [fields, validateAll, onSubmit, values]
+    );
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        reset: () => {
+          setValues({});
+          setErrors({});
+          setTouched({});
+        },
+        setValues: (newValues) => {
+          setValues((prev) => {
+            const merged = { ...prev };
+            for (const [key, value] of Object.entries(newValues)) {
+              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,
+            field.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: fieldId,
+              name: field.name,
+              type: field.type,
+              value,
+              onChange: (e) => handleChange(field.name, e.target.value),
+              onBlur: () => handleBlur(field.name),
+              placeholder: field.placeholder,
+              className: `${styles.input} ${showError ? styles.inputError : ""}`,
+              "aria-invalid": showError ? "true" : "false",
+              "aria-describedby": showError ? errorId : void 0,
+              "aria-required": field.required ? "true" : "false"
+            }
+          ),
+          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 })
+    ] });
+  }
+);
+RegistrationForm.displayName = "RegistrationForm";
+
+exports.BookingForm = BookingForm;
+exports.RegistrationForm = RegistrationForm;
+exports.compose = compose;
+exports.email = email;
+exports.minLen = minLen;
+exports.phone = phone;
+exports.required = required;
+exports.ukPostcode = ukPostcode;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map