@lub-crm/forms 1.0.0

package/src/core/StepManager.tsx

@@ -0,0 +1,199 @@
+import type { ReactNode } from "react";
+import { cn } from "@/utils/cn";
+import type { FormStep } from "@/api/types";
+
+interface StepManagerProps {
+  steps: FormStep[];
+  currentStep: number;
+  onStepClick?: (stepIndex: number) => void;
+  allowStepNavigation?: boolean;
+}
+
+export function StepManager({
+  steps,
+  currentStep,
+  onStepClick,
+  allowStepNavigation = false,
+}: StepManagerProps) {
+  if (steps.length <= 1) return null;
+
+  return (
+    <div className="lub-form__steps" role="navigation" aria-label="Form steps">
+      <ol className="lub-form__steps-list">
+        {steps.map((step, index) => {
+          const isActive = index === currentStep;
+          const isCompleted = index < currentStep;
+          const isClickable = allowStepNavigation && (isCompleted || isActive);
+
+          return (
+            <li
+              key={step.id}
+              className={cn(
+                "lub-form__step",
+                isActive && "lub-form__step--active",
+                isCompleted && "lub-form__step--completed",
+              )}
+            >
+              {isClickable ? (
+                <button
+                  type="button"
+                  className="lub-form__step-button"
+                  onClick={() => onStepClick?.(index)}
+                  aria-current={isActive ? "step" : undefined}
+                >
+                  <span className="lub-form__step-number">{index + 1}</span>
+                  <span className="lub-form__step-name">{step.name}</span>
+                </button>
+              ) : (
+                <span
+                  className="lub-form__step-indicator"
+                  aria-current={isActive ? "step" : undefined}
+                >
+                  <span className="lub-form__step-number">
+                    {isCompleted ? <CheckIcon /> : index + 1}
+                  </span>
+                  <span className="lub-form__step-name">{step.name}</span>
+                </span>
+              )}
+              {index < steps.length - 1 && (
+                <span
+                  className={cn(
+                    "lub-form__step-connector",
+                    isCompleted && "lub-form__step-connector--completed",
+                  )}
+                  aria-hidden="true"
+                />
+              )}
+            </li>
+          );
+        })}
+      </ol>
+      {steps[currentStep]?.description && (
+        <p className="lub-form__step-description">
+          {steps[currentStep].description}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      className="lub-form__check-icon"
+      viewBox="0 0 20 20"
+      fill="currentColor"
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}
+
+// Step navigation buttons
+interface StepNavigationProps {
+  currentStep: number;
+  totalSteps: number;
+  onNext: () => void;
+  onPrev: () => void;
+  isNextDisabled?: boolean;
+  isPrevDisabled?: boolean;
+  isLastStep?: boolean;
+  isSubmitting?: boolean;
+  submitButtonText?: string;
+  nextButtonText?: string;
+  prevButtonText?: string;
+  children?: ReactNode;
+}
+
+export function StepNavigation({
+  currentStep,
+  totalSteps,
+  onNext,
+  onPrev,
+  isNextDisabled = false,
+  isPrevDisabled = false,
+  isLastStep = false,
+  isSubmitting = false,
+  submitButtonText = "Submit",
+  nextButtonText = "Next",
+  prevButtonText = "Back",
+  children,
+}: StepNavigationProps) {
+  const showPrev = currentStep > 0;
+  const showNext = !isLastStep;
+
+  return (
+    <div className="lub-form__navigation">
+      {showPrev && (
+        <button
+          type="button"
+          className="lub-form__button lub-form__button--secondary"
+          onClick={onPrev}
+          disabled={isPrevDisabled || isSubmitting}
+        >
+          {prevButtonText}
+        </button>
+      )}
+      <div className="lub-form__navigation-spacer" />
+      {showNext ? (
+        <button
+          type="button"
+          className="lub-form__button lub-form__button--primary"
+          onClick={onNext}
+          disabled={isNextDisabled || isSubmitting}
+        >
+          {nextButtonText}
+        </button>
+      ) : (
+        (children ?? (
+          <button
+            type="submit"
+            className="lub-form__button lub-form__button--primary"
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              <span className="lub-form__button-loading">
+                <LoadingSpinner />
+                Submitting...
+              </span>
+            ) : (
+              submitButtonText
+            )}
+          </button>
+        ))
+      )}
+    </div>
+  );
+}
+
+function LoadingSpinner() {
+  return (
+    <svg
+      className="lub-form__spinner"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle
+        className="lub-form__spinner-track"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="3"
+      />
+      <path
+        className="lub-form__spinner-head"
+        d="M12 2a10 10 0 0 1 10 10"
+        stroke="currentColor"
+        strokeWidth="3"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

package/src/core/index.ts

@@ -0,0 +1,4 @@
+export { LubForm, type LubFormProps } from "./LubForm";
+export { LubFormProvider, useLubFormContext } from "./FormProvider";
+export { FormRenderer } from "./FormRenderer";
+export { StepManager, StepNavigation } from "./StepManager";

package/src/embed.ts

@@ -0,0 +1,188 @@
+/**
+ * UMD/IIFE entry point for script tag embedding
+ *
+ * Usage:
+ *
+ * <!-- Auto-mount via data attributes -->
+ * <script src="https://forms.lub.com/v1/lub-forms.standalone.js"></script>
+ * <link rel="stylesheet" href="https://forms.lub.com/v1/lub-forms.css">
+ * <div data-lub-form-id="abc123" data-lub-base-url="https://api.lub.com"></div>
+ *
+ * <!-- Manual render -->
+ * <script>
+ *   LubForms.render('abc123', 'container-id', {
+ *     baseUrl: 'https://api.lub.com',
+ *     onSuccess: (data) => console.log('Success!', data),
+ *     onError: (err) => console.error('Error:', err),
+ *   });
+ * </script>
+ */
+
+import { createElement } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { LubForm, type LubFormProps } from "./core/LubForm";
+import type { SubmitFormResponse, ApiError, FormDesign } from "./api/types";
+
+// Import styles for standalone bundle
+import "./styles/index.css";
+
+// Store roots for cleanup
+const roots = new Map<string, Root>();
+
+// Render options type
+interface RenderOptions {
+  baseUrl?: string;
+  onSuccess?: (data: SubmitFormResponse) => void;
+  onError?: (error: ApiError) => void;
+  onValidationError?: (errors: Record<string, string>) => void;
+  onStepChange?: (step: number, total: number) => void;
+  className?: string;
+  designOverrides?: Partial<FormDesign>;
+}
+
+/**
+ * Render a form into a container element
+ */
+function render(
+  formId: string,
+  containerOrId: string | HTMLElement,
+  options: RenderOptions = {},
+): { unmount: () => void } {
+  const container =
+    typeof containerOrId === "string"
+      ? document.getElementById(containerOrId)
+      : containerOrId;
+
+  if (!container) {
+    console.error(`[LubForms] Container not found: ${containerOrId}`);
+    return { unmount: () => {} };
+  }
+
+  // Unmount existing root if present
+  const existingRoot = roots.get(container.id || formId);
+  if (existingRoot) {
+    existingRoot.unmount();
+    roots.delete(container.id || formId);
+  }
+
+  // Create new root and render
+  const root = createRoot(container);
+  roots.set(container.id || formId, root);
+
+  const props: LubFormProps = {
+    formId,
+    baseUrl: options.baseUrl || "",
+    onSuccess: options.onSuccess,
+    onError: options.onError,
+    onValidationError: options.onValidationError,
+    onStepChange: options.onStepChange,
+    className: options.className,
+    designOverrides: options.designOverrides,
+  };
+
+  root.render(createElement(LubForm, props));
+
+  return {
+    unmount: () => {
+      root.unmount();
+      roots.delete(container.id || formId);
+    },
+  };
+}
+
+/**
+ * Auto-mount forms from data attributes
+ */
+function autoMount(): void {
+  const containers =
+    document.querySelectorAll<HTMLElement>("[data-lub-form-id]");
+
+  containers.forEach((container) => {
+    const formId = container.dataset.lubFormId;
+    if (!formId) return;
+
+    // Skip if already mounted
+    if (container.dataset.lubMounted === "true") return;
+
+    const options: RenderOptions = {
+      baseUrl: container.dataset.lubBaseUrl || "",
+      className: container.dataset.lubClass,
+    };
+
+    // Handle callbacks via global functions
+    const onSuccessName = container.dataset.lubOnSuccess;
+    if (
+      onSuccessName &&
+      typeof window[onSuccessName as keyof Window] === "function"
+    ) {
+      options.onSuccess = window[onSuccessName as keyof Window] as (
+        data: SubmitFormResponse,
+      ) => void;
+    }
+
+    const onErrorName = container.dataset.lubOnError;
+    if (
+      onErrorName &&
+      typeof window[onErrorName as keyof Window] === "function"
+    ) {
+      options.onError = window[onErrorName as keyof Window] as (
+        error: ApiError,
+      ) => void;
+    }
+
+    render(formId, container, options);
+    container.dataset.lubMounted = "true";
+  });
+}
+
+/**
+ * Unmount a form by container ID
+ */
+function unmount(containerId: string): void {
+  const root = roots.get(containerId);
+  if (root) {
+    root.unmount();
+    roots.delete(containerId);
+  }
+}
+
+/**
+ * Unmount all forms
+ */
+function unmountAll(): void {
+  roots.forEach((root) => root.unmount());
+  roots.clear();
+}
+
+/**
+ * Initialize LubForms (call autoMount on DOM ready)
+ */
+function init(): void {
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", autoMount);
+  } else {
+    autoMount();
+  }
+}
+
+// Export for UMD/global
+const LubForms = {
+  render,
+  autoMount,
+  unmount,
+  unmountAll,
+  init,
+  // Re-export main component for advanced usage
+  LubForm,
+};
+
+// Auto-initialize when script loads
+init();
+
+// Expose on window for UMD
+if (typeof window !== "undefined") {
+  (window as unknown as { LubForms: typeof LubForms }).LubForms = LubForms;
+}
+
+export default LubForms;
+export { render, autoMount, unmount, unmountAll, init, LubForm };

package/src/fields/CheckboxField.tsx

@@ -0,0 +1,62 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { cn } from "@/utils/cn";
+
+interface CheckboxFieldProps {
+  field: FormField;
+}
+
+export function CheckboxField({ field }: CheckboxFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  return (
+    <div
+      className={cn(
+        "lub-form__field-wrapper",
+        hasError && "lub-form__field-wrapper--error",
+      )}
+    >
+      <label className="lub-form__checkbox-label">
+        <input
+          id={field.name}
+          type="checkbox"
+          className={cn(
+            "lub-form__checkbox",
+            hasError && "lub-form__checkbox--error",
+          )}
+          aria-invalid={hasError}
+          aria-describedby={
+            hasError
+              ? `${field.name}-error`
+              : field.help_text
+                ? `${field.name}-help`
+                : undefined
+          }
+          {...register(field.name)}
+        />
+        <span className="lub-form__checkbox-text">
+          {field.label}
+          {field.required && (
+            <span className="lub-form__required-indicator" aria-hidden="true">
+              *
+            </span>
+          )}
+        </span>
+      </label>
+
+      {field.help_text && !hasError && (
+        <p className="lub-form__help-text" id={`${field.name}-help`}>
+          {field.help_text}
+        </p>
+      )}
+
+      {hasError && (
+        <p className="lub-form__error" id={`${field.name}-error`} role="alert">
+          {error.message as string}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/fields/CheckboxGroupField.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 CheckboxGroupFieldProps {
+  field: FormField;
+}
+
+export function CheckboxGroupField({ field }: CheckboxGroupFieldProps) {
+  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__checkbox-group"
+        role="group"
+        aria-labelledby={`${field.name}-label`}
+      >
+        {options.map((option) => (
+          <label key={option.value} className="lub-form__checkbox-label">
+            <input
+              type="checkbox"
+              className={cn(
+                "lub-form__checkbox",
+                hasError && "lub-form__checkbox--error",
+              )}
+              value={option.value}
+              {...register(field.name)}
+            />
+            <span className="lub-form__checkbox-text">{option.label}</span>
+          </label>
+        ))}
+        {field.options?.allow_other && (
+          <label className="lub-form__checkbox-label">
+            <input
+              type="checkbox"
+              className={cn(
+                "lub-form__checkbox",
+                hasError && "lub-form__checkbox--error",
+              )}
+              value="__other__"
+              {...register(field.name)}
+            />
+            <span className="lub-form__checkbox-text">
+              {field.options.other_label || "Other"}
+            </span>
+          </label>
+        )}
+      </div>
+    </FieldWrapper>
+  );
+}

package/src/fields/CountryField.tsx

@@ -0,0 +1,43 @@
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { FieldWrapper } from "./FieldWrapper";
+import { cn } from "@/utils/cn";
+import { countries } from "@/utils/countries";
+
+interface CountryFieldProps {
+  field: FormField;
+}
+
+export function CountryField({ field }: CountryFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  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 country..."}</option>
+        {countries.map((country) => (
+          <option key={country.code} value={country.code}>
+            {country.name}
+          </option>
+        ))}
+      </select>
+    </FieldWrapper>
+  );
+}

package/src/fields/DateField.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 DateFieldProps {
+  field: FormField;
+}
+
+export function DateField({ field }: DateFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  return (
+    <FieldWrapper field={field}>
+      <input
+        id={field.name}
+        type="date"
+        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/DateTimeField.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 DateTimeFieldProps {
+  field: FormField;
+}
+
+export function DateTimeField({ field }: DateTimeFieldProps) {
+  const { register, formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  return (
+    <FieldWrapper field={field}>
+      <input
+        id={field.name}
+        type="datetime-local"
+        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/DividerField.tsx

@@ -0,0 +1,16 @@
+import type { FormField } from "@/api/types";
+
+interface DividerFieldProps {
+  field: FormField;
+}
+
+export function DividerField({ field }: DividerFieldProps) {
+  return (
+    <div className="lub-form__divider">
+      <hr className="lub-form__divider-line" />
+      {field.label && (
+        <span className="lub-form__divider-label">{field.label}</span>
+      )}
+    </div>
+  );
+}

package/src/fields/FieldWrapper.tsx

@@ -0,0 +1,60 @@
+import type { ReactNode } from "react";
+import { useFormContext } from "react-hook-form";
+import type { FormField } from "@/api/types";
+import { cn } from "@/utils/cn";
+
+interface FieldWrapperProps {
+  field: FormField;
+  children: ReactNode;
+  hideLabel?: boolean;
+}
+
+export function FieldWrapper({
+  field,
+  children,
+  hideLabel = false,
+}: FieldWrapperProps) {
+  const { formState } = useFormContext();
+  const error = formState.errors[field.name];
+  const hasError = !!error;
+
+  return (
+    <div
+      className={cn(
+        "lub-form__field-wrapper",
+        hasError && "lub-form__field-wrapper--error",
+      )}
+    >
+      {!hideLabel && field.label && (
+        <label
+          htmlFor={field.name}
+          className={cn(
+            "lub-form__label",
+            field.required && "lub-form__label--required",
+          )}
+        >
+          {field.label}
+          {field.required && (
+            <span className="lub-form__required-indicator" aria-hidden="true">
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      {children}
+
+      {field.help_text && !hasError && (
+        <p className="lub-form__help-text" id={`${field.name}-help`}>
+          {field.help_text}
+        </p>
+      )}
+
+      {hasError && (
+        <p className="lub-form__error" id={`${field.name}-error`} role="alert">
+          {error.message as string}
+        </p>
+      )}
+    </div>
+  );
+}