@lub-crm/forms 1.0.0

package/src/hooks/useConditionalLogic.ts

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import type { FormField } from "@/api/types";
+import {
+  evaluateFieldVisibility,
+  evaluateFieldRequired,
+  getVisibleFields,
+  getRequiredFieldNames,
+} from "@/validation/conditional";
+
+interface UseConditionalLogicOptions {
+  fields: FormField[];
+  formValues: Record<string, unknown>;
+}
+
+interface UseConditionalLogicReturn {
+  visibleFields: FormField[];
+  requiredFieldNames: Set<string>;
+  isFieldVisible: (fieldName: string) => boolean;
+  isFieldRequired: (fieldName: string) => boolean;
+}
+
+export function useConditionalLogic({
+  fields,
+  formValues,
+}: UseConditionalLogicOptions): UseConditionalLogicReturn {
+  const visibleFields = useMemo(
+    () => getVisibleFields(fields, formValues),
+    [fields, formValues],
+  );
+
+  const requiredFieldNames = useMemo(
+    () => getRequiredFieldNames(fields, formValues),
+    [fields, formValues],
+  );
+
+  const fieldMap = useMemo(
+    () => new Map(fields.map((f) => [f.name, f])),
+    [fields],
+  );
+
+  const isFieldVisible = (fieldName: string): boolean => {
+    const field = fieldMap.get(fieldName);
+    if (!field) return false;
+    return evaluateFieldVisibility(field, formValues);
+  };
+
+  const isFieldRequired = (fieldName: string): boolean => {
+    const field = fieldMap.get(fieldName);
+    if (!field) return false;
+    return evaluateFieldRequired(field, formValues);
+  };
+
+  return {
+    visibleFields,
+    requiredFieldNames,
+    isFieldVisible,
+    isFieldRequired,
+  };
+}

package/src/hooks/useFormApi.ts

@@ -0,0 +1,118 @@
+import { useState, useCallback } from "react";
+import type {
+  PublicFormResponse,
+  SubmitFormRequest,
+  SubmitFormResponse,
+  ApiError,
+} from "@/api/types";
+import { LubFormsClient } from "@/api/client";
+
+interface UseFormApiOptions {
+  baseUrl: string;
+  formId: string;
+}
+
+interface UseFormApiReturn {
+  form: PublicFormResponse | null;
+  isLoading: boolean;
+  isSubmitting: boolean;
+  error: ApiError | null;
+  submitResponse: SubmitFormResponse | null;
+  fetchForm: () => Promise<void>;
+  submitForm: (data: Record<string, unknown>) => Promise<SubmitFormResponse>;
+  reset: () => void;
+}
+
+export function useFormApi({
+  baseUrl,
+  formId,
+}: UseFormApiOptions): UseFormApiReturn {
+  const [form, setForm] = useState<PublicFormResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<ApiError | null>(null);
+  const [submitResponse, setSubmitResponse] =
+    useState<SubmitFormResponse | null>(null);
+
+  const client = new LubFormsClient(baseUrl);
+
+  const fetchForm = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const data = await client.getForm(formId);
+      setForm(data);
+    } catch (err) {
+      setError(err as ApiError);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [formId, baseUrl]);
+
+  const submitForm = useCallback(
+    async (data: Record<string, unknown>): Promise<SubmitFormResponse> => {
+      setIsSubmitting(true);
+      setError(null);
+
+      try {
+        const request: SubmitFormRequest = {
+          data,
+          referrer: typeof window !== "undefined" ? window.location.href : "",
+          utm_parameters: getUTMParameters(),
+        };
+
+        const response = await client.submitForm(formId, request);
+        setSubmitResponse(response);
+        return response;
+      } catch (err) {
+        const apiError = err as ApiError;
+        setError(apiError);
+        throw apiError;
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [formId, baseUrl],
+  );
+
+  const reset = useCallback(() => {
+    setError(null);
+    setSubmitResponse(null);
+  }, []);
+
+  return {
+    form,
+    isLoading,
+    isSubmitting,
+    error,
+    submitResponse,
+    fetchForm,
+    submitForm,
+    reset,
+  };
+}
+
+function getUTMParameters() {
+  if (typeof window === "undefined") return undefined;
+
+  const params = new URLSearchParams(window.location.search);
+  const utm: Record<string, string> = {};
+
+  const utmParams = [
+    "utm_source",
+    "utm_medium",
+    "utm_campaign",
+    "utm_term",
+    "utm_content",
+  ];
+
+  for (const param of utmParams) {
+    const value = params.get(param);
+    if (value) {
+      utm[param.replace("utm_", "")] = value;
+    }
+  }
+
+  return Object.keys(utm).length > 0 ? utm : undefined;
+}

package/src/hooks/useFormDesign.ts

@@ -0,0 +1,48 @@
+import { useMemo, type CSSProperties } from "react";
+import type { FormDesign } from "@/api/types";
+import { formDesignToCssVariables } from "@/utils/css-variables";
+
+interface UseFormDesignOptions {
+  design: FormDesign;
+  overrides?: Partial<FormDesign>;
+}
+
+interface UseFormDesignReturn {
+  mergedDesign: FormDesign;
+  cssVariables: Record<string, string>;
+  style: CSSProperties;
+  theme: string;
+}
+
+export function useFormDesign({
+  design,
+  overrides,
+}: UseFormDesignOptions): UseFormDesignReturn {
+  const mergedDesign = useMemo(
+    (): FormDesign => ({
+      ...design,
+      ...overrides,
+      button_style: {
+        ...design.button_style,
+        ...overrides?.button_style,
+      },
+    }),
+    [design, overrides],
+  );
+
+  const cssVariables = useMemo(
+    () => formDesignToCssVariables(mergedDesign),
+    [mergedDesign],
+  );
+
+  const style = useMemo(() => cssVariables as CSSProperties, [cssVariables]);
+
+  const theme = mergedDesign.theme || "light";
+
+  return {
+    mergedDesign,
+    cssVariables,
+    style,
+    theme,
+  };
+}

package/src/hooks/useMultiStep.ts

@@ -0,0 +1,98 @@
+import { useState, useCallback, useMemo } from "react";
+import type { FormStep, FormField } from "@/api/types";
+
+interface UseMultiStepOptions {
+  steps: FormStep[];
+  fields: FormField[];
+  onStepChange?: (step: number, total: number) => void;
+}
+
+interface UseMultiStepReturn {
+  currentStep: number;
+  totalSteps: number;
+  isFirstStep: boolean;
+  isLastStep: boolean;
+  currentStepData: FormStep | null;
+  currentStepFields: FormField[];
+  progress: number;
+  goToStep: (step: number) => void;
+  nextStep: () => void;
+  prevStep: () => void;
+  reset: () => void;
+}
+
+export function useMultiStep({
+  steps,
+  fields,
+  onStepChange,
+}: UseMultiStepOptions): UseMultiStepReturn {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const totalSteps = steps.length || 1;
+  const isFirstStep = currentStep === 0;
+  const isLastStep = currentStep >= totalSteps - 1;
+
+  const currentStepData = useMemo(
+    () => steps[currentStep] ?? null,
+    [steps, currentStep],
+  );
+
+  const currentStepFields = useMemo(() => {
+    if (!currentStepData) {
+      return fields.filter((f) => f.is_active);
+    }
+
+    const stepFieldIds = new Set(currentStepData.field_ids);
+    return fields.filter((f) => f.is_active && stepFieldIds.has(f.id));
+  }, [currentStepData, fields]);
+
+  const progress = useMemo(() => {
+    if (totalSteps <= 1) return 100;
+    return Math.round(((currentStep + 1) / totalSteps) * 100);
+  }, [currentStep, totalSteps]);
+
+  const goToStep = useCallback(
+    (step: number) => {
+      if (step >= 0 && step < totalSteps) {
+        setCurrentStep(step);
+        onStepChange?.(step, totalSteps);
+      }
+    },
+    [totalSteps, onStepChange],
+  );
+
+  const nextStep = useCallback(() => {
+    if (!isLastStep) {
+      const newStep = currentStep + 1;
+      setCurrentStep(newStep);
+      onStepChange?.(newStep, totalSteps);
+    }
+  }, [currentStep, isLastStep, totalSteps, onStepChange]);
+
+  const prevStep = useCallback(() => {
+    if (!isFirstStep) {
+      const newStep = currentStep - 1;
+      setCurrentStep(newStep);
+      onStepChange?.(newStep, totalSteps);
+    }
+  }, [currentStep, isFirstStep, totalSteps, onStepChange]);
+
+  const reset = useCallback(() => {
+    setCurrentStep(0);
+    onStepChange?.(0, totalSteps);
+  }, [totalSteps, onStepChange]);
+
+  return {
+    currentStep,
+    totalSteps,
+    isFirstStep,
+    isLastStep,
+    currentStepData,
+    currentStepFields,
+    progress,
+    goToStep,
+    nextStep,
+    prevStep,
+    reset,
+  };
+}

package/src/index.ts

@@ -0,0 +1,101 @@
+// Main ESM entry point for @lub/forms
+
+// Core component
+export { LubForm, type LubFormProps } from "./core/LubForm";
+
+// Context and providers
+export { LubFormProvider, useLubFormContext } from "./core/FormProvider";
+
+// Rendering components
+export { FormRenderer } from "./core/FormRenderer";
+export { StepManager, StepNavigation } from "./core/StepManager";
+
+// Field components
+export {
+  getFieldComponent,
+  registerFieldComponent,
+  type FieldComponent,
+  FieldWrapper,
+  TextField,
+  TextareaField,
+  NumberField,
+  SelectField,
+  RadioField,
+  CheckboxField,
+  CheckboxGroupField,
+  DateField,
+  TimeField,
+  DateTimeField,
+  FileField,
+  HiddenField,
+  CountryField,
+  StateField,
+  HtmlField,
+  DividerField,
+  RecaptchaField,
+} from "./fields";
+
+// API client
+export {
+  LubFormsClient,
+  createClient,
+  setDefaultClient,
+  getDefaultClient,
+} from "./api/client";
+
+// Types
+export type {
+  FieldType,
+  FieldWidth,
+  Operator,
+  FormLayout,
+  ValidationRules,
+  SelectOption,
+  FieldOptions,
+  Condition,
+  ConditionalLogic,
+  CRMMapping,
+  FormField,
+  ButtonStyle,
+  FormDesign,
+  FormStep,
+  PublicFormSettings,
+  PublicFormResponse,
+  UTMParameters,
+  SubmitFormRequest,
+  SubmitFormResponse,
+  ApiError,
+} from "./api/types";
+
+// Validation
+export { buildFormSchema, buildFieldSchema } from "./validation/schema-builder";
+export {
+  evaluateFieldVisibility,
+  evaluateFieldRequired,
+  evaluateCondition,
+  getVisibleFields,
+  getRequiredFieldNames,
+} from "./validation/conditional";
+
+// Hooks
+export { useFormApi } from "./hooks/useFormApi";
+export { useConditionalLogic } from "./hooks/useConditionalLogic";
+export { useMultiStep } from "./hooks/useMultiStep";
+export { useFormDesign } from "./hooks/useFormDesign";
+
+// Utilities
+export { cn } from "./utils/cn";
+export {
+  formDesignToCssVariables,
+  applyCssVariables,
+} from "./utils/css-variables";
+export {
+  countries,
+  usStates,
+  caProvinces,
+  getStatesForCountry,
+  getCountryByCode,
+  getStateByCode,
+  type Country,
+  type State,
+} from "./utils/countries";

package/src/main.tsx

@@ -0,0 +1,40 @@
+/**
+ * Development entry point
+ * This file is used for local development with vite dev server
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { LubForm } from "./core/LubForm";
+import "./styles/index.css";
+
+// Mock API response for development
+const MOCK_FORM_ID = "demo-123";
+const MOCK_BASE_URL = "http://localhost:8080"; // Your local API server
+
+function App() {
+  return (
+    <div style={{ maxWidth: 600, margin: "40px auto", padding: 20 }}>
+      <h1 style={{ marginBottom: 24 }}>Lub Forms Development</h1>
+      <LubForm
+        formId={MOCK_FORM_ID}
+        baseUrl={MOCK_BASE_URL}
+        onSuccess={(data) => {
+          console.log("Form submitted successfully:", data);
+        }}
+        onError={(error) => {
+          console.error("Form error:", error);
+        }}
+        onStepChange={(step, total) => {
+          console.log(`Step ${step + 1} of ${total}`);
+        }}
+      />
+    </div>
+  );
+}
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);