@wix/headless-forms 0.0.1

package/cjs/dist/react/core/Form.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Root = Root;
+exports.Loading = Loading;
+exports.LoadingError = LoadingError;
+exports.Error = Error;
+exports.Submitted = Submitted;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const services_manager_react_1 = require("@wix/services-manager-react");
+const form_service_js_1 = require("../../services/form-service.js");
+const services_manager_1 = require("@wix/services-manager");
+const DEFAULT_SUCCESS_MESSAGE = 'Your form has been submitted successfully.';
+/**
+ * Root component that provides the Form service context to its children.
+ * This component sets up the necessary services for rendering and managing form data.
+ *
+ * @order 1
+ * @component
+ * @param {React.ReactNode} children - Child components that will have access to form context
+ * @param {FormServiceConfig} formServiceConfig - Configuration object containing form data
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ * import { loadFormServiceConfig } from '@wix/headless-forms/services';
+ *
+ * // Pattern 1: Pre-loaded form data (SSR/SSG)
+ * function FormPage({ formServiceConfig }) {
+ *   return (
+ *     <Form.Root formServiceConfig={formServiceConfig}>
+ *       <Form.Loading>
+ *         {({ isLoading }) => isLoading ? <div>Loading form...</div> : null}
+ *       </Form.Loading>
+ *       <Form.LoadingError>
+ *         {({ error, hasError }) => hasError ? <div>{error}</div> : null}
+ *       </Form.LoadingError>
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *     </Form.Root>
+ *   );
+ * }
+ *
+ * // Pattern 2: Lazy loading with formId (Client-side)
+ * function DynamicFormPage({ formId }) {
+ *   return (
+ *     <Form.Root formServiceConfig={{ formId }}>
+ *       <Form.Loading>
+ *         {({ isLoading }) => isLoading ? <div>Loading form...</div> : null}
+ *       </Form.Loading>
+ *       <Form.LoadingError>
+ *         {({ error, hasError }) => hasError ? <div>{error}</div> : null}
+ *       </Form.LoadingError>
+ *       <Form.Fields fieldMap={FIELD_MAP} />
+ *     </Form.Root>
+ *   );
+ * }
+ * ```
+ */
+function Root(props) {
+    return ((0, jsx_runtime_1.jsx)(services_manager_react_1.WixServices, { servicesMap: (0, services_manager_1.createServicesMap)().addService(form_service_js_1.FormServiceDefinition, form_service_js_1.FormService, props.formServiceConfig), children: props.children }));
+}
+/**
+ * Headless component for form loading state access
+ *
+ * @component
+ * @param {FormLoadingProps} props - Component props
+ * @param {FormLoadingProps['children']} props.children - Render prop function that receives loading state
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function FormLoadingIndicator() {
+ *   return (
+ *     <Form.Loading>
+ *       {({ isLoading }) => (
+ *         isLoading ? (
+ *           <div>Loading form...</div>
+ *         ) : null
+ *       )}
+ *     </Form.Loading>
+ *   );
+ * }
+ * ```
+ */
+function Loading(props) {
+    const service = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const isLoading = service.isLoading?.get() || false;
+    return props.children({
+        isLoading,
+    });
+}
+/**
+ * Headless component for form error state access
+ *
+ * @component
+ * @param {FormErrorProps} props - Component props
+ * @param {FormErrorProps['children']} props.children - Render prop function that receives error state
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function FormErrorDisplay() {
+ *   return (
+ *     <Form.LoadingError>
+ *       {({ error, hasError }) => (
+ *         hasError ? (
+ *           <div className="error-message">
+ *             {error}
+ *           </div>
+ *         ) : null
+ *       )}
+ *     </Form.LoadingError>
+ *   );
+ * }
+ * ```
+ */
+function LoadingError(props) {
+    const service = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const error = service.error?.get() || null;
+    const hasError = !!error;
+    return props.children({
+        error,
+        hasError,
+    });
+}
+/**
+ * Headless component for form submit error state access
+ *
+ * @component
+ * @param {FormSubmitErrorProps} props - Component props
+ * @param {FormSubmitErrorProps['children']} props.children - Render prop function that receives submit error state
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function FormSubmitErrorDisplay() {
+ *   return (
+ *     <Form.Error>
+ *       {({ error, hasError }) => (
+ *         hasError ? (
+ *           <div className="error-message">
+ *             {error}
+ *           </div>
+ *         ) : null
+ *       )}
+ *     </Form.Error>
+ *   );
+ * }
+ * ```
+ */
+function Error(props) {
+    const service = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const submitResponse = service.submitResponse?.get() || { type: 'idle' };
+    const error = submitResponse.type === 'error' ? submitResponse.message : null;
+    const hasError = submitResponse.type === 'error';
+    return props.children({
+        error,
+        hasError,
+    });
+}
+/**
+ * Headless component for form submission state access
+ *
+ * @component
+ * @param {FormSubmittedProps} props - Component props
+ * @param {FormSubmittedProps['children']} props.children - Render prop function that receives submission state
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function FormSubmittedDisplay() {
+ *   return (
+ *     <Form.Submitted>
+ *       {({ isSubmitted, message }) => (
+ *         isSubmitted ? (
+ *           <div className="success-message">
+ *             <h2>Thank You!</h2>
+ *             <p>{message}</p>
+ *           </div>
+ *         ) : null
+ *       )}
+ *     </Form.Submitted>
+ *   );
+ * }
+ * ```
+ */
+function Submitted(props) {
+    const service = (0, services_manager_react_1.useService)(form_service_js_1.FormServiceDefinition);
+    const submitResponse = service.submitResponse?.get() || { type: 'idle' };
+    const isSubmitted = submitResponse.type === 'success';
+    const message = submitResponse.type === 'success'
+        ? submitResponse.message || DEFAULT_SUCCESS_MESSAGE
+        : DEFAULT_SUCCESS_MESSAGE;
+    return props.children({
+        isSubmitted,
+        message,
+    });
+}

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

@@ -0,0 +1,2 @@
+export * as Form from './Form.js';
+export * from './types.js';

package/cjs/dist/react/index.js

@@ -0,0 +1,41 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 });
+exports.Form = void 0;
+exports.Form = __importStar(require("./Form.js"));
+__exportStar(require("./types.js"), exports);