@wix/headless-forms 0.0.1

package/dist/react/core/Form.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useService, WixServices } from '@wix/services-manager-react';
+import { FormServiceDefinition, FormService, } from '../../services/form-service.js';
+import { createServicesMap } from '@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>
+ *   );
+ * }
+ * ```
+ */
+export function Root(props) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(FormServiceDefinition, 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>
+ *   );
+ * }
+ * ```
+ */
+export function Loading(props) {
+    const service = useService(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>
+ *   );
+ * }
+ * ```
+ */
+export function LoadingError(props) {
+    const service = useService(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>
+ *   );
+ * }
+ * ```
+ */
+export function Error(props) {
+    const service = useService(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>
+ *   );
+ * }
+ * ```
+ */
+export function Submitted(props) {
+    const service = useService(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/dist/react/index.d.ts

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

package/dist/react/index.js

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