React Components

import { FormRenderer } from './vendor/artisanpack-forms/react';

// Basic usage
<FormRenderer
    baseUrl="/api/v1/forms"
    formSlug="contact-us"
/>

// With callbacks and custom styling
<FormRenderer
    baseUrl="/api/v1/forms"
    formSlug="contact-us"
    className="max-w-lg mx-auto"
    onSuccess={(response) => {
        console.log('Submission ID:', response.submission_id);
        if (response.redirect_url) {
            window.location.href = response.redirect_url;
        }
    }}
    onError={(error) => {
        alert('Something went wrong. Please try again.');
    }}
/>

// With custom loading and error components
<FormRenderer
    baseUrl="/api/v1/forms"
    formSlug="contact-us"
    loadingComponent={<MySpinner />}
    errorComponent={({ message }) => <MyErrorBanner message={message} />}
    successComponent={({ message }) => <MySuccessPage message={message} />}
/>

const {
    form,               // FormRenderData | null - loaded form definition
    values,             // Record<string, unknown> - current field values
    errors,             // Record<string, string[]> - validation errors by field
    hiddenFields,       // Record<string, boolean> - conditional visibility
    isLoading,          // boolean - form definition loading
    isSubmitting,       // boolean - submission in progress
    isSubmitted,        // boolean - successfully submitted
    currentStep,        // number - current step index (0-based)
    totalSteps,         // number - total step count
    progressPercentage, // number - 0-100 progress
    currentFields,      // FormField[] - fields for current step
    currentStepData,    // FormStep | null - current step metadata
    loadError,          // string | null - form load error
    setValue,           // (field: string, value: unknown) => void
    setFile,            // (field: string, file: File | File[]) => void
    nextStep,           // () => Promise<void> - validate and advance
    prevStep,           // () => void - go back one step
    goToStep,           // (step: number) => Promise<void> - jump to step
    submit,             // () => Promise<void> - submit the form
    reset,              // () => void - reset to initial state
} = useForm({ baseUrl, formSlug, clientValidation, onSuccess, onError });

import { useForm } from './vendor/artisanpack-forms/react';

function CustomForm() {
    const {
        form, values, errors, isLoading, isSubmitting,
        isSubmitted, setValue, submit
    } = useForm({
        baseUrl: '/api/v1/forms',
        formSlug: 'contact',
        onSuccess: (res) => console.log('Done!', res),
    });

    if (isLoading) return <p>Loading...</p>;
    if (isSubmitted) return <p>{form?.success_message}</p>;

    return (
        <form onSubmit={(e) => { e.preventDefault(); submit(); }}>
            {form?.fields.map((field) => (
                <div key={field.id}>
                    <label>{field.label}</label>
                    <input
                        value={values[field.name] as string ?? ''}
                        onChange={(e) => setValue(field.name, e.target.value)}
                    />
                    {errors[field.name]?.map((err, i) => (
                        <span key={i} className="text-red-500">{err}</span>
                    ))}
                </div>
            ))}
            <button type="submit" disabled={isSubmitting}>
                {isSubmitting ? 'Submitting...' : form?.submit_button_text}
            </button>
        </form>
    );
}

import { useApi, ApiError, ApiValidationError } from './vendor/artisanpack-forms/react';

const api = useApi({ baseUrl: '/api/v1/forms' });

try {
    const form = await api.get(`/contact/render`);
    const result = await api.post(`/contact/submit`, formData);
} catch (error) {
    if (error instanceof ApiValidationError) {
        console.log(error.errors); // { field: ['message'] }
    } else if (error instanceof ApiError) {
        console.log(error.status, error.message);
    }
}

import { useAutoSave } from './vendor/artisanpack-forms/react';

useAutoSave({
    key: 'contact-form-draft',
    data: formValues,
    interval: 5000, // Save every 5 seconds
});

import {
    FormsList,
    FormBuilder,
    SubmissionsList,
    SubmissionDetail,
} from './vendor/artisanpack-forms/react';

// Forms management page
<FormsList baseUrl="/api/v1/forms" />

// Form builder
<FormBuilder baseUrl="/api/v1/forms" formId={1} />

// Submissions list
<SubmissionsList baseUrl="/api/v1/forms" formId={1} />

// Submission detail
<SubmissionDetail baseUrl="/api/v1/forms" formId={1} submissionId={42} />