@lub-crm/forms 1.0.0

package/src/fields/FileField.tsx

@@ -0,0 +1,45 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+
+interface FileFieldProps {
+  field: FormField;
+}
+
+export function FileField({ field }: FileFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  const rules = field.validation_rules;
+  const acceptTypes = rules?.allowed_types?.join(",");
+
+  return (
+    <FieldWrapper field={field}>
+      <input
+        id={field.name}
+        type="file"
+        className={cn(
+          "lub-form__file-input",
+          hasError && "lub-form__file-input--error",
+        )}
+        accept={acceptTypes}
+        aria-invalid={hasError}
+        aria-describedby={
+          hasError
+            ? `${field.name}-error`
+            : field.help_text
+              ? `${field.name}-help`
+              : undefined
+        }
+        {...register(field.name)}
+      />
+      {rules?.max_file_size && (
+        <p className="lub-form__file-hint">
+          Max file size: {rules.max_file_size}MB
+        </p>
+      )}
+    </FieldWrapper>
+  );
+}

package/src/fields/HiddenField.tsx

@@ -0,0 +1,18 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+
+interface HiddenFieldProps {
+  field: FormField;
+}
+
+export function HiddenField({ field }: HiddenFieldProps) {
+  const { register } = useFormContext();
+
+  return (
+    <input
+      type="hidden"
+      {...register(field.name)}
+      defaultValue={field.default_value}
+    />
+  );
+}

package/src/fields/HtmlField.tsx

@@ -0,0 +1,17 @@
+import type { FormField } from "@/api/types";
+
+interface HtmlFieldProps {
+  field: FormField;
+}
+
+export function HtmlField({ field }: HtmlFieldProps) {
+  // HTML fields display static content from default_value
+  if (!field.default_value) return null;
+
+  return (
+    <div
+      className="lub-form__html-content"
+      dangerouslySetInnerHTML={{ __html: field.default_value }}
+    />
+  );
+}

package/src/fields/NumberField.tsx

@@ -0,0 +1,39 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+
+interface NumberFieldProps {
+  field: FormField;
+}
+
+export function NumberField({ field }: NumberFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  const rules = field.validation_rules;
+
+  return (
+    <FieldWrapper field={field}>
+      <input
+        id={field.name}
+        type="number"
+        className={cn("lub-form__input", hasError && "lub-form__input--error")}
+        placeholder={field.placeholder}
+        min={rules?.min}
+        max={rules?.max}
+        step="any"
+        aria-invalid={hasError}
+        aria-describedby={
+          hasError
+            ? `${field.name}-error`
+            : field.help_text
+              ? `${field.name}-help`
+              : undefined
+        }
+        {...register(field.name)}
+      />
+    </FieldWrapper>
+  );
+}

package/src/fields/RadioField.tsx

@@ -0,0 +1,57 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+
+interface RadioFieldProps {
+  field: FormField;
+}
+
+export function RadioField({ field }: RadioFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  const options = field.options?.options ?? [];
+
+  return (
+    <FieldWrapper field={field}>
+      <div
+        className="lub-form__radio-group"
+        role="radiogroup"
+        aria-labelledby={`${field.name}-label`}
+      >
+        {options.map((option) => (
+          <label key={option.value} className="lub-form__radio-label">
+            <input
+              type="radio"
+              className={cn(
+                "lub-form__radio",
+                hasError && "lub-form__radio--error",
+              )}
+              value={option.value}
+              {...register(field.name)}
+            />
+            <span className="lub-form__radio-text">{option.label}</span>
+          </label>
+        ))}
+        {field.options?.allow_other && (
+          <label className="lub-form__radio-label">
+            <input
+              type="radio"
+              className={cn(
+                "lub-form__radio",
+                hasError && "lub-form__radio--error",
+              )}
+              value="__other__"
+              {...register(field.name)}
+            />
+            <span className="lub-form__radio-text">
+              {field.options.other_label || "Other"}
+            </span>
+          </label>
+        )}
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/fields/RecaptchaField.tsx

@@ -0,0 +1,137 @@
+import { useEffect, useRef, useCallback } from "react";
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { useLubFormContext } from "@/core/FormProvider";
+
+interface RecaptchaFieldProps {
+  field: FormField;
+}
+
+declare global {
+  interface Window {
+    grecaptcha?: {
+      ready: (callback: () => void) => void;
+      execute: (
+        siteKey: string,
+        options: { action: string },
+      ) => Promise<string>;
+      render: (
+        container: HTMLElement,
+        options: {
+          sitekey: string;
+          callback: (token: string) => void;
+          "expired-callback"?: () => void;
+          "error-callback"?: () => void;
+        },
+      ) => number;
+      reset: (widgetId?: number) => void;
+    };
+  }
+}
+
+export function RecaptchaField({ field }: RecaptchaFieldProps) {
+  const { setValue, setError, clearErrors } = useFormContext();
+  const { form } = useLubFormContext();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const widgetIdRef = useRef<number | null>(null);
+  const scriptLoadedRef = useRef(false);
+
+  const siteKey = form.settings.recaptcha_site_key;
+
+  // Callback for v2 checkbox
+  const handleV2Callback = useCallback(
+    (token: string) => {
+      setValue("_recaptcha_token", token);
+      clearErrors("_recaptcha_token");
+    },
+    [setValue, clearErrors],
+  );
+
+  const handleExpired = useCallback(() => {
+    setValue("_recaptcha_token", "");
+    setError("_recaptcha_token", {
+      type: "manual",
+      message: "reCAPTCHA expired, please try again",
+    });
+  }, [setValue, setError]);
+
+  // Load reCAPTCHA script
+  useEffect(() => {
+    if (!siteKey || scriptLoadedRef.current) return;
+
+    // Check if script already exists
+    const existingScript = document.querySelector('script[src*="recaptcha"]');
+    if (existingScript) {
+      scriptLoadedRef.current = true;
+      return;
+    }
+
+    const script = document.createElement("script");
+    script.src = `https://www.google.com/recaptcha/api.js?render=explicit`;
+    script.async = true;
+    script.defer = true;
+    script.onload = () => {
+      scriptLoadedRef.current = true;
+    };
+    document.head.appendChild(script);
+
+    return () => {
+      // Don't remove script on cleanup as it might be used elsewhere
+    };
+  }, [siteKey]);
+
+  // Render v2 widget
+  useEffect(() => {
+    if (!siteKey || !containerRef.current) return;
+
+    const renderWidget = () => {
+      if (
+        window.grecaptcha &&
+        containerRef.current &&
+        widgetIdRef.current === null
+      ) {
+        window.grecaptcha.ready(() => {
+          if (containerRef.current) {
+            widgetIdRef.current = window.grecaptcha!.render(
+              containerRef.current,
+              {
+                sitekey: siteKey,
+                callback: handleV2Callback,
+                "expired-callback": handleExpired,
+                "error-callback": handleExpired,
+              },
+            );
+          }
+        });
+      }
+    };
+
+    // Try rendering, with retry if script isn't loaded yet
+    const attemptRender = () => {
+      if (window.grecaptcha) {
+        renderWidget();
+      } else {
+        setTimeout(attemptRender, 100);
+      }
+    };
+
+    attemptRender();
+
+    return () => {
+      if (widgetIdRef.current !== null && window.grecaptcha) {
+        window.grecaptcha.reset(widgetIdRef.current);
+        widgetIdRef.current = null;
+      }
+    };
+  }, [siteKey, handleV2Callback, handleExpired]);
+
+  if (!siteKey) {
+    return null;
+  }
+
+  return (
+    <div className="lub-form__recaptcha">
+      <div ref={containerRef} className="lub-form__recaptcha-widget" />
+    </div>
+  );
+}

package/src/fields/SelectField.tsx

@@ -0,0 +1,49 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+
+interface SelectFieldProps {
+  field: FormField;
+}
+
+export function SelectField({ field }: SelectFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  const options = field.options?.options ?? [];
+
+  return (
+    <FieldWrapper field={field}>
+      <select
+        id={field.name}
+        className={cn(
+          "lub-form__select",
+          hasError && "lub-form__select--error",
+        )}
+        aria-invalid={hasError}
+        aria-describedby={
+          hasError
+            ? `${field.name}-error`
+            : field.help_text
+              ? `${field.name}-help`
+              : undefined
+        }
+        {...register(field.name)}
+      >
+        <option value="">{field.placeholder || "Select an option..."}</option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+        {field.options?.allow_other && (
+          <option value="__other__">
+            {field.options.other_label || "Other"}
+          </option>
+        )}
+      </select>
+    </FieldWrapper>
+  );
+}

package/src/fields/StateField.tsx

@@ -0,0 +1,84 @@
+import { useFormContext, useWatch } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+import { getStatesForCountry } from "@/utils/countries";
+
+interface StateFieldProps {
+  field: FormField;
+  /** Name of the country field to watch for state filtering */
+  countryFieldName?: string;
+}
+
+export function StateField({
+  field,
+  countryFieldName = "country",
+}: StateFieldProps) {
+  const { register, formState, control } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  // Watch country field to filter states
+  const countryValue = useWatch({
+    control,
+    name: countryFieldName,
+    defaultValue: "",
+  });
+
+  const states = getStatesForCountry(countryValue as string);
+  const hasStates = states.length > 0;
+
+  // If no country selected or country has no states, show text input
+  if (!hasStates) {
+    return (
+      <FieldWrapper field={field}>
+        <input
+          id={field.name}
+          type="text"
+          className={cn(
+            "lub-form__input",
+            hasError && "lub-form__input--error",
+          )}
+          placeholder={field.placeholder || "State/Province"}
+          aria-invalid={hasError}
+          aria-describedby={
+            hasError
+              ? `${field.name}-error`
+              : field.help_text
+                ? `${field.name}-help`
+                : undefined
+          }
+          {...register(field.name)}
+        />
+      </FieldWrapper>
+    );
+  }
+
+  return (
+    <FieldWrapper field={field}>
+      <select
+        id={field.name}
+        className={cn(
+          "lub-form__select",
+          hasError && "lub-form__select--error",
+        )}
+        aria-invalid={hasError}
+        aria-describedby={
+          hasError
+            ? `${field.name}-error`
+            : field.help_text
+              ? `${field.name}-help`
+              : undefined
+        }
+        {...register(field.name)}
+      >
+        <option value="">{field.placeholder || "Select a state..."}</option>
+        {states.map((state) => (
+          <option key={state.code} value={state.code}>
+            {state.name}
+          </option>
+        ))}
+      </select>
+    </FieldWrapper>
+  );
+}

package/src/fields/TextField.tsx

@@ -0,0 +1,51 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+
+interface TextFieldProps {
+  field: FormField;
+}
+
+export function TextField({ field }: TextFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  // Determine input type based on field_type
+  const inputType = getInputType(field.field_type);
+
+  return (
+    <FieldWrapper field={field}>
+      <input
+        id={field.name}
+        type={inputType}
+        className={cn("lub-form__input", hasError && "lub-form__input--error")}
+        placeholder={field.placeholder}
+        aria-invalid={hasError}
+        aria-describedby={
+          hasError
+            ? `${field.name}-error`
+            : field.help_text
+              ? `${field.name}-help`
+              : undefined
+        }
+        {...register(field.name)}
+      />
+    </FieldWrapper>
+  );
+}
+
+function getInputType(fieldType: FormField["field_type"]): string {
+  switch (fieldType) {
+    case "email":
+      return "email";
+    case "phone":
+      return "tel";
+    case "url":
+      return "url";
+    case "text":
+    default:
+      return "text";
+  }
+}

package/src/fields/TextareaField.tsx

@@ -0,0 +1,37 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+
+interface TextareaFieldProps {
+  field: FormField;
+}
+
+export function TextareaField({ field }: TextareaFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  return (
+    <FieldWrapper field={field}>
+      <textarea
+        id={field.name}
+        className={cn(
+          "lub-form__textarea",
+          hasError && "lub-form__textarea--error",
+        )}
+        placeholder={field.placeholder}
+        rows={4}
+        aria-invalid={hasError}
+        aria-describedby={
+          hasError
+            ? `${field.name}-error`
+            : field.help_text
+              ? `${field.name}-help`
+              : undefined
+        }
+        {...register(field.name)}
+      />
+    </FieldWrapper>
+  );
+}

package/src/fields/TimeField.tsx

@@ -0,0 +1,33 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+
+interface TimeFieldProps {
+  field: FormField;
+}
+
+export function TimeField({ field }: TimeFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  return (
+    <FieldWrapper field={field}>
+      <input
+        id={field.name}
+        type="time"
+        className={cn("lub-form__input", hasError && "lub-form__input--error")}
+        aria-invalid={hasError}
+        aria-describedby={
+          hasError
+            ? `${field.name}-error`
+            : field.help_text
+              ? `${field.name}-help`
+              : undefined
+        }
+        {...register(field.name)}
+      />
+    </FieldWrapper>
+  );
+}

package/src/fields/index.ts

@@ -0,0 +1,84 @@
+import type { ComponentType } from "react";
+import type { FieldType, FormField } from "@/api/types";
+
+import { TextField } from "./TextField";
+import { TextareaField } from "./TextareaField";
+import { NumberField } from "./NumberField";
+import { SelectField } from "./SelectField";
+import { RadioField } from "./RadioField";
+import { CheckboxField } from "./CheckboxField";
+import { CheckboxGroupField } from "./CheckboxGroupField";
+import { DateField } from "./DateField";
+import { TimeField } from "./TimeField";
+import { DateTimeField } from "./DateTimeField";
+import { FileField } from "./FileField";
+import { HiddenField } from "./HiddenField";
+import { CountryField } from "./CountryField";
+import { StateField } from "./StateField";
+import { HtmlField } from "./HtmlField";
+import { DividerField } from "./DividerField";
+import { RecaptchaField } from "./RecaptchaField";
+
+// Field component type
+export type FieldComponent = ComponentType<{ field: FormField }>;
+
+// Field component registry
+const fieldRegistry: Record<FieldType, FieldComponent> = {
+  text: TextField,
+  email: TextField,
+  phone: TextField,
+  url: TextField,
+  textarea: TextareaField,
+  number: NumberField,
+  select: SelectField,
+  radio: RadioField,
+  checkbox: CheckboxField,
+  checkbox_group: CheckboxGroupField,
+  date: DateField,
+  time: TimeField,
+  datetime: DateTimeField,
+  file: FileField,
+  hidden: HiddenField,
+  country: CountryField,
+  state: StateField,
+  html: HtmlField,
+  divider: DividerField,
+  recaptcha: RecaptchaField,
+};
+
+/**
+ * Get the component for a field type
+ */
+export function getFieldComponent(type: FieldType): FieldComponent | null {
+  return fieldRegistry[type] ?? null;
+}
+
+/**
+ * Register a custom field component
+ */
+export function registerFieldComponent(
+  type: string,
+  component: FieldComponent,
+): void {
+  (fieldRegistry as Record<string, FieldComponent>)[type] = component;
+}
+
+// Export all field components
+export { FieldWrapper } from "./FieldWrapper";
+export { TextField } from "./TextField";
+export { TextareaField } from "./TextareaField";
+export { NumberField } from "./NumberField";
+export { SelectField } from "./SelectField";
+export { RadioField } from "./RadioField";
+export { CheckboxField } from "./CheckboxField";
+export { CheckboxGroupField } from "./CheckboxGroupField";
+export { DateField } from "./DateField";
+export { TimeField } from "./TimeField";
+export { DateTimeField } from "./DateTimeField";
+export { FileField } from "./FileField";
+export { HiddenField } from "./HiddenField";
+export { CountryField } from "./CountryField";
+export { StateField } from "./StateField";
+export { HtmlField } from "./HtmlField";
+export { DividerField } from "./DividerField";
+export { RecaptchaField } from "./RecaptchaField";

package/src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useFormApi } from "./useFormApi";
+export { useConditionalLogic } from "./useConditionalLogic";
+export { useMultiStep } from "./useMultiStep";
+export { useFormDesign } from "./useFormDesign";