@wix/headless-forms 0.0.0

package/cjs/dist/react/utils.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateGridStyles = calculateGridStyles;
+function calculateGridStyles(layout) {
+    const labelRow = 1;
+    const inputRow = 2;
+    const gridColumn = `${layout.column + 1} / span ${layout.width}`;
+    return {
+        label: {
+            gridRow: `${labelRow} / span 1`,
+            gridColumn,
+            display: 'flex',
+            alignItems: 'flex-end',
+        },
+        input: {
+            gridRow: `${inputRow} / span 1`,
+            gridColumn,
+        },
+    };
+}

package/cjs/dist/services/form-service.d.ts

@@ -0,0 +1,114 @@
+import { forms } from '@wix/forms';
+import { type ReadOnlySignal } from '@wix/services-definitions/core-services/signals';
+import { FormValues } from '../react/types.js';
+/**
+ * Response type for form submission operations.
+ * Represents the different states a form submission can be in.
+ */
+export type SubmitResponse = {
+    type: 'success';
+    message?: string;
+} | {
+    type: 'error';
+    message: string;
+} | {
+    type: 'idle';
+} | {
+    type: 'loading';
+};
+/**
+ * API interface for the Form service, providing reactive form data management.
+ * This service handles loading and managing form data, loading state, errors, and submissions.
+ * It supports both pre-loaded form data and lazy loading with form IDs.
+ *
+ * @interface FormServiceAPI
+ */
+export interface FormServiceAPI {
+    /** Reactive signal containing the current form data */
+    formSignal: ReadOnlySignal<forms.Form | null>;
+    /** Reactive signal indicating if a form is currently being loaded */
+    isLoadingSignal: ReadOnlySignal<boolean>;
+    /** Reactive signal containing any error message, or null if no error */
+    errorSignal: ReadOnlySignal<string | null>;
+    /** Reactive signal containing submission response state */
+    submitResponseSignal: ReadOnlySignal<SubmitResponse>;
+    /** Function to submit form with current values */
+    submitForm: (formValues: FormValues) => Promise<void>;
+}
+/**
+ * Service definition for the Form service.
+ * This defines the contract that the FormService must implement.
+ *
+ * @constant
+ */
+export declare const FormServiceDefinition: string & {
+    __api: FormServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FormServiceAPI;
+type OnSubmit = (formId: string, formValues: FormValues) => Promise<SubmitResponse>;
+/**
+ * Configuration type for the Form service.
+ * Supports two distinct patterns for providing form data:
+ * - Pre-loaded form data (SSR/SSG scenarios)
+ * - Lazy loading with form ID (client-side routing)
+ *
+ * Optionally accepts a custom submission handler to override default behavior.
+ *
+ * @type {FormServiceConfig}
+ */
+export type FormServiceConfig = {
+    formId: string;
+    onSubmit?: OnSubmit;
+} | {
+    form: forms.Form;
+    onSubmit?: OnSubmit;
+};
+/**
+ * Implementation of the Form service that manages reactive form data and submissions.
+ * This service provides signals for form data, loading state, error handling, and submission state.
+ * It supports both pre-loaded form data and lazy loading with form IDs.
+ * Consumers can provide a custom submission handler via config.
+ *
+ * @example
+ * ```tsx
+ * // Pre-loaded form data (SSR/SSG)
+ * const formService = FormService.withConfig({ form: formData });
+ *
+ * // Lazy loading with form ID (client-side)
+ * const formService = FormService.withConfig({ formId: 'form-123' });
+ *
+ * // With custom submission handler
+ * const formService = FormService.withConfig({
+ *   formId: 'form-123',
+ *   onSubmit: async (formId, formValues) => {
+ *     // Custom submission logic
+ *     await fetch('/api/submit', { method: 'POST', body: JSON.stringify({ formId, ...formValues }) });
+ *     return { type: 'success', message: 'Form submitted!' };
+ *   }
+ * });
+ * ```
+ */
+export declare const FormService: import("@wix/services-definitions").ServiceFactory<string & {
+    __api: FormServiceAPI;
+    __config: {};
+    isServiceDefinition?: boolean;
+} & FormServiceAPI, FormServiceConfig>;
+/**
+ * Loads form service configuration from the Wix Forms API for SSR initialization.
+ * This function is designed to be used during Server-Side Rendering (SSR) to preload
+ * a specific form by ID that will be used to configure the FormService.
+ *
+ * @param {string} formId - The unique identifier of the form to load
+ * @returns {Promise<FormServiceConfig>} Configuration object with pre-loaded form data
+ * @throws {Error} When the form cannot be loaded
+ *
+ * @example
+ * ```tsx
+ * // In your SSR/SSG setup
+ * const formConfig = await loadFormServiceConfig('form-123');
+ * const formService = FormService.withConfig(formConfig);
+ * ```
+ */
+export declare function loadFormServiceConfig(formId: string): Promise<FormServiceConfig>;
+export {};

package/cjs/dist/services/form-service.js

@@ -0,0 +1,152 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormService = exports.FormServiceDefinition = void 0;
+exports.loadFormServiceConfig = loadFormServiceConfig;
+const forms_1 = require("@wix/forms");
+const services_definitions_1 = require("@wix/services-definitions");
+const signals_1 = require("@wix/services-definitions/core-services/signals");
+/**
+ * Service definition for the Form service.
+ * This defines the contract that the FormService must implement.
+ *
+ * @constant
+ */
+exports.FormServiceDefinition = (0, services_definitions_1.defineService)('formService');
+/**
+ * Implementation of the Form service that manages reactive form data and submissions.
+ * This service provides signals for form data, loading state, error handling, and submission state.
+ * It supports both pre-loaded form data and lazy loading with form IDs.
+ * Consumers can provide a custom submission handler via config.
+ *
+ * @example
+ * ```tsx
+ * // Pre-loaded form data (SSR/SSG)
+ * const formService = FormService.withConfig({ form: formData });
+ *
+ * // Lazy loading with form ID (client-side)
+ * const formService = FormService.withConfig({ formId: 'form-123' });
+ *
+ * // With custom submission handler
+ * const formService = FormService.withConfig({
+ *   formId: 'form-123',
+ *   onSubmit: async (formId, formValues) => {
+ *     // Custom submission logic
+ *     await fetch('/api/submit', { method: 'POST', body: JSON.stringify({ formId, ...formValues }) });
+ *     return { type: 'success', message: 'Form submitted!' };
+ *   }
+ * });
+ * ```
+ */
+exports.FormService = services_definitions_1.implementService.withConfig()(exports.FormServiceDefinition, ({ getService, config }) => {
+    const signalsService = getService(signals_1.SignalsServiceDefinition);
+    const isLoadingSignal = signalsService.signal(false);
+    const errorSignal = signalsService.signal(null);
+    const submitResponseSignal = signalsService.signal({
+        type: 'idle',
+    });
+    const hasSchema = 'form' in config;
+    const formSignal = signalsService.signal(hasSchema ? config.form : null);
+    if (!hasSchema) {
+        loadForm(config.formId);
+    }
+    async function loadForm(id) {
+        isLoadingSignal.set(true);
+        errorSignal.set(null);
+        try {
+            const result = await fetchForm(id);
+            if (result) {
+                formSignal.set(result);
+            }
+            else {
+                errorSignal.set('Form not found');
+            }
+        }
+        catch (err) {
+            errorSignal.set('Failed to load form');
+            throw err;
+        }
+        finally {
+            isLoadingSignal.set(false);
+        }
+    }
+    async function defaultSubmitHandler(formId, formValues) {
+        try {
+            await forms_1.submissions.createSubmission({
+                formId,
+                submissions: formValues,
+            });
+            // TODO: add message
+            return { type: 'success' };
+        }
+        catch (error) {
+            console.error('Form submission failed:', error);
+            return { type: 'error', message: 'Failed to submit form' };
+        }
+    }
+    /**
+     * Submits the form with the provided values.
+     * Uses custom handler if provided in config, otherwise uses default submission.
+     */
+    async function submitForm(formValues) {
+        const form = formSignal.get();
+        if (!form) {
+            console.error('Cannot submit: form not loaded');
+            return;
+        }
+        // @ts-expect-error
+        const formId = form._id ? form._id : form.id;
+        submitResponseSignal.set({ type: 'loading' });
+        try {
+            const handler = config.onSubmit || defaultSubmitHandler;
+            const response = await handler(formId, formValues);
+            submitResponseSignal.set(response);
+        }
+        catch (error) {
+            console.error('Unexpected error during submission:', error);
+            submitResponseSignal.set({
+                type: 'error',
+                message: 'Unexpected error during submission',
+            });
+        }
+    }
+    return {
+        formSignal: formSignal,
+        isLoadingSignal: isLoadingSignal,
+        errorSignal: errorSignal,
+        submitResponseSignal: submitResponseSignal,
+        submitForm: submitForm,
+    };
+});
+async function fetchForm(id) {
+    try {
+        const result = await forms_1.forms.getForm(id);
+        if (!result) {
+            throw new Error(`Form ${id} not found`);
+        }
+        return result;
+    }
+    catch (err) {
+        console.error('Failed to load form:', id, err);
+        throw err;
+    }
+}
+/**
+ * Loads form service configuration from the Wix Forms API for SSR initialization.
+ * This function is designed to be used during Server-Side Rendering (SSR) to preload
+ * a specific form by ID that will be used to configure the FormService.
+ *
+ * @param {string} formId - The unique identifier of the form to load
+ * @returns {Promise<FormServiceConfig>} Configuration object with pre-loaded form data
+ * @throws {Error} When the form cannot be loaded
+ *
+ * @example
+ * ```tsx
+ * // In your SSR/SSG setup
+ * const formConfig = await loadFormServiceConfig('form-123');
+ * const formService = FormService.withConfig(formConfig);
+ * ```
+ */
+async function loadFormServiceConfig(formId) {
+    const form = await fetchForm(formId);
+    return { form };
+}

package/cjs/dist/services/index.d.ts

@@ -0,0 +1 @@
+export * from './form-service.js';

package/cjs/dist/services/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./form-service.js"), exports);

package/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}