@bookinglab/booking-ui-react 1.0.2 → 1.1.0

package/dist/index.mjs

@@ -0,0 +1,644 @@
+import { forwardRef, useId, useState, useCallback, useImperativeHandle, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/BookingForm.tsx
+var cx = (...classes) => classes.filter(Boolean).join(" ");
+function FormField({
+  question,
+  value,
+  error,
+  onChange,
+  classNames
+}) {
+  const inputId = `question-${question.id}`;
+  const errorId = `${inputId}-error`;
+  const hasError = !!error;
+  const defaultFieldWrapper = "mb-4";
+  const defaultLabel = "block text-sm font-medium mb-1 text-gray-700";
+  const defaultHeading = "text-lg font-semibold text-gray-900 mt-4 mb-2 first:mt-0";
+  const defaultInput = "w-full px-3 py-2 border rounded-md text-sm transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 border-gray-300 focus:ring-blue-500 focus:border-blue-500";
+  const defaultInputError = "border-red-500 focus:ring-red-500";
+  const defaultCheckbox = "mt-1 h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500";
+  const defaultHelpText = "mt-1 text-xs text-gray-500";
+  const defaultErrorText = "mt-1 text-xs text-red-600";
+  const inputClasses = hasError ? cx(classNames?.input ?? defaultInput, classNames?.inputError ?? defaultInputError) : cx(classNames?.input ?? defaultInput);
+  const labelClasses = classNames?.label ?? defaultLabel;
+  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: [
+      question.name,
+      question.required && /* @__PURE__ */ 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 });
+  };
+  const renderError = () => {
+    if (!error) return null;
+    return /* @__PURE__ */ jsx("p", { id: errorId, className: classNames?.errorText ?? defaultErrorText, role: "alert", children: error });
+  };
+  const ariaProps = {
+    "aria-invalid": hasError ? true : void 0,
+    "aria-describedby": hasError ? errorId : void 0,
+    "aria-required": question.required || void 0
+  };
+  switch (question.detail_type) {
+    case "heading":
+      return /* @__PURE__ */ jsx("h3", { className: classNames?.heading ?? defaultHeading, children: question.name });
+    case "text_field":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            type: "text",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: question.settings?.placeholder,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "text_area":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            id: inputId,
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            placeholder: question.settings?.placeholder,
+            rows: 4,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "select":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: inputId,
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value),
+            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))
+            ]
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "date":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            type: "date",
+            value: value || "",
+            onChange: (e) => onChange(e.target.value),
+            min: question.settings?.min?.toString(),
+            max: question.settings?.max?.toString(),
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "number":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        renderLabel(),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            type: "number",
+            value: value ?? "",
+            onChange: (e) => onChange(e.target.value ? Number(e.target.value) : ""),
+            min: question.settings?.min,
+            max: question.settings?.max,
+            placeholder: question.settings?.placeholder,
+            className: inputClasses,
+            ...ariaProps
+          }
+        ),
+        renderHelpText(),
+        renderError()
+      ] });
+    case "check":
+      return /* @__PURE__ */ jsxs("div", { className: classNames?.fieldWrapper ?? defaultFieldWrapper, children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: inputId,
+              type: "checkbox",
+              checked: !!value,
+              onChange: (e) => onChange(e.target.checked),
+              className: classNames?.checkbox ?? defaultCheckbox,
+              ...ariaProps
+            }
+          ),
+          /* @__PURE__ */ jsxs("label", { htmlFor: inputId, className: checkboxLabelClasses, children: [
+            question.name,
+            question.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+          ] })
+        ] }),
+        renderHelpText(),
+        renderError()
+      ] });
+    default:
+      return null;
+  }
+}
+function BookingForm({
+  questions,
+  onSubmit,
+  submitLabel = "Submit",
+  className = "",
+  labelClassName,
+  classNames: classNamesProp
+}) {
+  const classNames = {
+    ...classNamesProp,
+    label: classNamesProp?.label ?? labelClassName
+  };
+  const [values, setValues] = useState({});
+  const [errors, setErrors] = useState({});
+  const [touched, setTouched] = useState({});
+  const isQuestionVisible = useCallback(
+    (question) => {
+      const { settings } = question;
+      if (!settings?.conditional_answers) {
+        return true;
+      }
+      const conditionEntries = Object.entries(settings.conditional_answers);
+      if (conditionEntries.length === 0) {
+        return true;
+      }
+      return conditionEntries.some(([questionIdStr, expectedAnswer]) => {
+        const questionId = Number(questionIdStr);
+        const currentValue = values[String(questionId)];
+        if (currentValue === void 0 || currentValue === "" || currentValue === null) {
+          return false;
+        }
+        const normalizedCurrent = typeof currentValue === "object" && currentValue !== null && "id" in currentValue ? currentValue : currentValue;
+        const candidates = /* @__PURE__ */ new Set();
+        const addCandidate = (v) => {
+          if (v === void 0 || v === null) return;
+          const s = String(v).trim();
+          if (s) candidates.add(s);
+        };
+        const sourceQuestion = questions.find((q) => q.id === questionId);
+        if (typeof normalizedCurrent === "object" && normalizedCurrent !== null) {
+          addCandidate(normalizedCurrent.id);
+          addCandidate(normalizedCurrent.name);
+        } else {
+          addCandidate(normalizedCurrent);
+        }
+        if (sourceQuestion?.detail_type === "select" && sourceQuestion.options?.length) {
+          const currentStr = [...candidates][0] ?? "";
+          const optionById = sourceQuestion.options.find((o) => String(o.id) === currentStr);
+          const optionByName = sourceQuestion.options.find((o) => String(o.name).trim() === currentStr);
+          const opt = optionById ?? optionByName;
+          if (opt) {
+            addCandidate(opt.id);
+            addCandidate(opt.name);
+          }
+        }
+        const matchesScalar = (expected) => {
+          const expectedStr = String(expected).trim();
+          return candidates.has(expectedStr);
+        };
+        if (Array.isArray(expectedAnswer)) {
+          return expectedAnswer.some((v) => matchesScalar(v));
+        }
+        if (expectedAnswer && typeof expectedAnswer === "object") {
+          const expectedMap = expectedAnswer;
+          for (const c of candidates) {
+            if (Object.prototype.hasOwnProperty.call(expectedMap, c)) {
+              const flag = expectedMap[c];
+              return flag === void 0 ? true : !!flag;
+            }
+          }
+          return false;
+        }
+        return matchesScalar(expectedAnswer);
+      });
+    },
+    [values, questions]
+  );
+  const visibleQuestions = questions.filter(isQuestionVisible);
+  const validateField = useCallback((question, value) => {
+    if (question.detail_type === "heading") return null;
+    if (question.required) {
+      if (value === void 0 || value === "" || value === null) {
+        return `${question.name} is required`;
+      }
+      if (question.detail_type === "check" && !value) {
+        return `${question.name} must be checked`;
+      }
+    }
+    if (question.detail_type === "number" && value !== "" && value !== void 0) {
+      const numValue = Number(value);
+      if (question.settings?.min !== void 0 && numValue < question.settings.min) {
+        return `Minimum value is ${question.settings.min}`;
+      }
+      if (question.settings?.max !== void 0 && numValue > question.settings.max) {
+        return `Maximum value is ${question.settings.max}`;
+      }
+    }
+    return null;
+  }, []);
+  const validateAll = useCallback(() => {
+    const newErrors = {};
+    let isValid = true;
+    visibleQuestions.forEach((question) => {
+      const error = validateField(question, values[question.id]);
+      if (error) {
+        newErrors[question.id] = error;
+        isValid = false;
+      }
+    });
+    setErrors(newErrors);
+    return isValid;
+  }, [visibleQuestions, values, validateField]);
+  useEffect(() => {
+    const visibleIds = new Set(visibleQuestions.map((q) => q.id));
+    setErrors((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      Object.keys(next).forEach((idStr) => {
+        const id = Number(idStr);
+        if (!visibleIds.has(id)) {
+          delete next[id];
+          changed = true;
+        }
+      });
+      return changed ? next : prev;
+    });
+  }, [visibleQuestions]);
+  const handleChange = (questionId, value) => {
+    setValues((prev) => ({ ...prev, [questionId]: value }));
+    setTouched((prev) => ({ ...prev, [questionId]: true }));
+    if (touched[questionId]) {
+      const question = questions.find((q) => q.id === questionId);
+      if (question) {
+        const error = validateField(question, value);
+        setErrors((prev) => {
+          if (error) {
+            return { ...prev, [questionId]: error };
+          }
+          const { [questionId]: _, ...rest } = prev;
+          return rest;
+        });
+      }
+    }
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const allTouched = {};
+    visibleQuestions.forEach((q) => {
+      allTouched[q.id] = true;
+    });
+    setTouched(allTouched);
+    if (validateAll()) {
+      const visibleValues = {};
+      visibleQuestions.forEach((q) => {
+        if (q.detail_type !== "heading" && values[q.id] !== void 0) {
+          visibleValues[q.id] = values[q.id];
+        }
+      });
+      onSubmit(visibleValues);
+    }
+  };
+  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(
+      FormField,
+      {
+        question,
+        value: values[question.id],
+        error: touched[question.id] ? errors[question.id] : void 0,
+        onChange: (value) => handleChange(question.id, value),
+        classNames
+      },
+      question.id
+    )),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        className: classNames?.button ?? defaultButton,
+        children: submitLabel
+      }
+    )
+  ] });
+}
+
+// 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 = forwardRef(
+  ({
+    fields = DEFAULT_FIELDS,
+    onSubmit,
+    onChange,
+    validateOnBlur = true,
+    submitLabel = "Submit",
+    className = "",
+    classNames = {}
+  }, ref) => {
+    const formId = useId();
+    const [values, setValues] = useState({});
+    const [errors, setErrors] = useState({});
+    const [touched, setTouched] = useState({});
+    const validateField = 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 = 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 = 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 = 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 = 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 = 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]
+    );
+    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__ */ 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__ */ jsxs("div", { className: styles.fieldWrapper, children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: fieldId, className: styles.label, children: [
+            field.label,
+            field.required && /* @__PURE__ */ jsx("span", { className: "text-red-500 ml-1", "aria-hidden": "true", children: "*" })
+          ] }),
+          /* @__PURE__ */ 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__ */ jsx("p", { id: errorId, className: styles.errorText, role: "alert", children: error })
+        ] }, field.name);
+      }),
+      /* @__PURE__ */ jsx("button", { type: "submit", className: styles.button, children: submitLabel })
+    ] });
+  }
+);
+RegistrationForm.displayName = "RegistrationForm";
+
+export { BookingForm, RegistrationForm, compose, email, minLen, phone, required, ukPostcode };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map