@wix/headless-forms 0.0.1 → 0.0.3

package/dist/react/Form.js

@@ -1,10 +1,13 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState, useCallback } from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
-import * as CoreForm from './core/Form.js';
+import { Form as FormViewer, } from '@wix/form-public';
+import { Root as CoreRoot, Loading as CoreLoading, LoadingError as CoreLoadingError, Error as CoreError, Submitted as CoreSubmitted, Fields as CoreFields, } from './core/Form';
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
+    TestIds["form"] = "form";
+    TestIds["formLoading"] = "form-loading";
     TestIds["formLoadingError"] = "form-loading-error";
     TestIds["formError"] = "form-error";
     TestIds["formSubmitted"] = "form-submitted";
@@ -18,6 +21,7 @@ var TestIds;
  * @param {RootProps} props - The component props
  * @param {React.ReactNode} props.children - Child components that will have access to form context
  * @param {FormServiceConfig} props.formServiceConfig - Form service configuration object
+ * @param {boolean} [props.asChild] - Whether to render as a child component
  * @param {string} [props.className] - CSS classes to apply to the root element
  * @example
  * ```tsx
@@ -60,7 +64,7 @@ var TestIds;
  */
 export const Root = React.forwardRef((props, ref) => {
     const { children, formServiceConfig, asChild, ...otherProps } = props;
-    return (_jsx(CoreForm.Root, { formServiceConfig: formServiceConfig, children: _jsx(RootContent, { asChild: asChild, ref: ref, ...otherProps, children: children }) }));
+    return (_jsx(CoreRoot, { formServiceConfig: formServiceConfig, children: _jsx(RootContent, { asChild: asChild, ref: ref, ...otherProps, children: children }) }));
 });
 /**
  * Internal component to handle the Root content with service access.
@@ -75,7 +79,7 @@ export const Root = React.forwardRef((props, ref) => {
  */
 const RootContent = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formRoot, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: React.isValidElement(children) ? children : null }) }));
+    return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formRoot, customElement: children, customElementProps: {}, ...otherProps, children: _jsx("div", { children: children }) }));
 });
 /**
  * Component that renders content during loading state.
@@ -124,10 +128,10 @@ const RootContent = React.forwardRef((props, ref) => {
  */
 export const Loading = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreForm.Loading, { children: ({ isLoading }) => {
+    return (_jsx(CoreLoading, { children: ({ isLoading }) => {
             if (!isLoading)
                 return null;
-            return (_jsx(AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": "form-loading", customElement: children, content: "Loading form...", ...otherProps, children: _jsx("div", { children: "Loading form..." }) }));
+            return (_jsx(AsChildSlot, { "data-testid": TestIds.formLoading, ref: ref, asChild: asChild, className: className, customElement: children, content: "Loading form...", ...otherProps, children: _jsx("div", { children: "Loading form..." }) }));
         } }));
 });
 /**
@@ -181,7 +185,7 @@ export const Loading = React.forwardRef((props, ref) => {
  */
 export const LoadingError = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreForm.LoadingError, { children: ({ error, hasError }) => {
+    return (_jsx(CoreLoadingError, { children: ({ error, hasError }) => {
             if (!hasError)
                 return null;
             const errorData = { error, hasError };
@@ -237,7 +241,7 @@ export const LoadingError = React.forwardRef((props, ref) => {
  */
 export const Error = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreForm.Error, { children: ({ error, hasError }) => {
+    return (_jsx(CoreError, { children: ({ error, hasError }) => {
             if (!hasError)
                 return null;
             const errorData = { error, hasError };
@@ -293,7 +297,7 @@ export const Error = React.forwardRef((props, ref) => {
  */
 export const Submitted = React.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return (_jsx(CoreForm.Submitted, { children: ({ isSubmitted, message }) => {
+    return (_jsx(CoreSubmitted, { children: ({ isSubmitted, message }) => {
             if (!isSubmitted)
                 return null;
             const submittedData = { isSubmitted, message };
@@ -444,170 +448,26 @@ export const Submitted = React.forwardRef((props, ref) => {
  * };
  * ```
  */
-export const Fields = React.forwardRef(({ fieldMap }) => {
-    // TODO: render real viewer
-    return _jsx(MockViewer, { fieldMap: fieldMap });
+export const Fields = React.forwardRef((props, ref) => {
+    const [formValues, setFormValues] = useState({});
+    const [formErrors, setFormErrors] = useState([]);
+    const handleFormChange = useCallback((values) => {
+        setFormValues(values);
+    }, []);
+    const handleFormValidate = useCallback((errors) => {
+        setFormErrors(errors);
+    }, []);
+    return (_jsx(CoreFields, { children: ({ form }) => {
+            console.log('Fields form', form);
+            if (!form)
+                return null;
+            return (_jsx("div", { ref: ref, children: _jsx(FormViewer, { form: {
+                        ...form,
+                        id: form?._id,
+                        fields: form?.formFields?.map((field) => ({
+                            ...field,
+                            id: field._id,
+                        })),
+                    }, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: props.fieldMap }) }));
+        } }));
 });
-const MockViewer = ({ fieldMap }) => {
-    // This is how fieldMap is expected to be used in the viewer
-    const schemaFields = {
-        // CONTACTS_FIELD_TYPES
-        CONTACTS_COMPANY: fieldMap.TEXT_INPUT,
-        CONTACTS_POSITION: fieldMap.TEXT_INPUT,
-        CONTACTS_TAX_ID: fieldMap.TEXT_INPUT,
-        CONTACTS_FIRST_NAME: fieldMap.TEXT_INPUT,
-        CONTACTS_LAST_NAME: fieldMap.TEXT_INPUT,
-        CONTACTS_EMAIL: fieldMap.TEXT_INPUT,
-        CONTACTS_BIRTHDATE: fieldMap.DATE_INPUT,
-        CONTACTS_PHONE: fieldMap.PHONE_INPUT,
-        CONTACTS_ADDRESS: fieldMap.TEXT_INPUT,
-        CONTACTS_SUBSCRIBE: fieldMap.CHECKBOX,
-        // QUIZ_FIELD_TYPES
-        QUIZ_MULTI_CHOICE: fieldMap.CHECKBOX_GROUP,
-        QUIZ_SINGLE_CHOICE: fieldMap.RADIO_GROUP,
-        QUIZ_SHORT_TEXT: fieldMap.TEXT_INPUT,
-        QUIZ_LONG_TEXT: fieldMap.TEXT_AREA,
-        QUIZ_NUMBER: fieldMap.NUMBER_INPUT,
-        QUIZ_FILE_UPLOAD: fieldMap.FILE_UPLOAD,
-        QUIZ_IMAGE_CHOICE: fieldMap.IMAGE_CHOICE, // TODO: add
-        // DEXT_FIELD_TYPES
-        DEXT_TEXT_INPUT: fieldMap.TEXT_INPUT,
-        DEXT_TEXT_AREA: fieldMap.TEXT_AREA,
-        DEXT_DROPDOWN: fieldMap.DROPDOWN,
-        DEXT_URL_INPUT: fieldMap.TEXT_INPUT,
-        DEXT_RADIO_GROUP: fieldMap.RADIO_GROUP,
-        DEXT_NUMBER_INPUT: fieldMap.NUMBER_INPUT,
-        DEXT_CHECKBOX: fieldMap.CHECKBOX,
-        DEXT_CHECKBOX_GROUP: fieldMap.CHECKBOX_GROUP,
-        DEXT_EMAIL: fieldMap.TEXT_INPUT,
-        DEXT_PHONE: fieldMap.PHONE_INPUT,
-        DEXT_RATING_INPUT: fieldMap.RATING_INPUT,
-        DEXT_DATE_PICKER: fieldMap.DATE_PICKER,
-        DEXT_TAGS: fieldMap.TAGS,
-        // SCHEDULING_FIELD_TYPES
-        APPOINTMENT: fieldMap.APPOINTMENT,
-        SERVICES_DROPDOWN: fieldMap.DROPDOWN,
-        // ECOM_FIELD_TYPES
-        ECOM_ADDITIONAL_INFO: fieldMap.TEXT_AREA,
-        ECOM_ADDRESS: fieldMap.TEXT_INPUT,
-        ECOM_FULL_NAME: fieldMap.TEXT_INPUT,
-        ECOM_PHONE: fieldMap.PHONE_INPUT,
-        ECOM_COMPANY_NAME: fieldMap.TEXT_INPUT,
-        ECOM_EMAIL: fieldMap.TEXT_INPUT,
-        ECOM_SUBSCRIPTION: fieldMap.CHECKBOX,
-        // BOOKINGS_FIELD_TYPES
-        BOOKINGS_FIRST_NAME: fieldMap.TEXT_INPUT,
-        BOOKINGS_LAST_NAME: fieldMap.TEXT_INPUT,
-        BOOKINGS_EMAIL: fieldMap.TEXT_INPUT,
-        BOOKINGS_PHONE: fieldMap.PHONE_INPUT,
-        BOOKINGS_ADDRESS: fieldMap.TEXT_INPUT,
-        // PAYMENTS_FIELD_TYPES
-        PRODUCT_LIST: fieldMap.PRODUCT_LIST,
-        DONATION: fieldMap.DONATION,
-        PAYMENT_INPUT: fieldMap.PAYMENT_INPUT, // could be TEXT_INPUT?
-        FIXED_PAYMENT: fieldMap.FIXED_PAYMENT, // could be TAGS?
-        // COMMON_FIELD_TYPES
-        TEXT_INPUT: fieldMap.TEXT_INPUT,
-        NUMBER_INPUT: fieldMap.NUMBER_INPUT,
-        URL_INPUT: fieldMap.TEXT_INPUT,
-        TEXT_AREA: fieldMap.TEXT_AREA,
-        DATE_INPUT: fieldMap.DATE_INPUT,
-        DATE_TIME_INPUT: fieldMap.DATE_TIME_INPUT,
-        TIME_INPUT: fieldMap.TIME_INPUT,
-        RADIO_GROUP: fieldMap.RADIO_GROUP,
-        CHECKBOX_GROUP: fieldMap.CHECKBOX_GROUP,
-        FILE_UPLOAD: fieldMap.FILE_UPLOAD,
-        CHECKBOX: fieldMap.CHECKBOX,
-        DROPDOWN: fieldMap.DROPDOWN,
-        // NESTED_FORM: 'NESTED_FORM',
-        MULTILINE_ADDRESS: fieldMap.MULTILINE_ADDRESS,
-        // are these relevant for headless?
-        MLA_COUNTRY: fieldMap.DROPDOWN,
-        MLA_CITY: fieldMap.TEXT_INPUT,
-        MLA_ADDRESS_LINE: fieldMap.TEXT_INPUT, // dropdown if autocomplete disabled?
-        MLA_ADDRESS_LINE_2: fieldMap.TEXT_INPUT,
-        MLA_POSTAL_CODE: fieldMap.TEXT_INPUT,
-        MLA_SUBDIVISION: fieldMap.DROPDOWN,
-        MLA_STREET_NAME: fieldMap.TEXT_INPUT,
-        MLA_STREET_NUMBER: fieldMap.TEXT_INPUT,
-        MLA_APARTMENT: fieldMap.TEXT_INPUT,
-        FULL_NAME_FIRST_NAME: fieldMap.TEXT_INPUT,
-        FULL_NAME_LAST_NAME: fieldMap.TEXT_INPUT,
-        FULL_NAME: fieldMap.TEXT_INPUT,
-        VAT_ID: fieldMap.TEXT_INPUT,
-        SIGNATURE: fieldMap.SIGNATURE,
-        RATING_INPUT: fieldMap.RATING_INPUT,
-        TAGS: fieldMap.TAGS,
-        DATE_PICKER: fieldMap.DATE_PICKER,
-        // READONLY_FIELD_TYPES
-        HEADER: fieldMap.TEXT,
-        RICH_TEXT: fieldMap.TEXT,
-        SUBMIT_BUTTON: fieldMap.SUBMIT_BUTTON,
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { children: "Form Fields" }), _jsx("div", { children: JSON.stringify(schemaFields) })] }));
-};
-/**
- * Main Form namespace containing all form components following the compound component pattern.
- * Provides a headless, flexible way to render and manage forms with custom field components.
- *
- * @namespace Form
- * @property {typeof Root} Root - Form root component that provides service context to all child components
- * @property {typeof Loading} Loading - Form loading state component that displays content during form loading
- * @property {typeof LoadingError} LoadingError - Form loading error state component for handling form loading errors
- * @property {typeof Error} Error - Form submit error state component for handling form submission errors
- * @property {typeof Submitted} Submitted - Form submitted state component for displaying success messages
- * @property {typeof Fields} Fields - Form fields component for rendering form fields with custom field renderers
- * @example
- * ```tsx
- * import { Form } from '@wix/headless-forms/react';
- * import { loadFormServiceConfig } from '@wix/headless-forms/services';
- * import { TextInput, TextArea, Checkbox } from './field-components';
- *
- * const FIELD_MAP = {
- *   TEXT_INPUT: TextInput,
- *   TEXT_AREA: TextArea,
- *   CHECKBOX: Checkbox,
- *   // ... other field components
- * };
- *
- * // Pattern 1: Pre-loaded form data (SSR/SSG)
- * function MyForm({ formServiceConfig }) {
- *   return (
- *     <Form.Root formServiceConfig={formServiceConfig}>
- *       <Form.Loading className="flex justify-center p-4" />
- *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
- *       <Form.Fields fieldMap={FIELD_MAP} />
- *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
- *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
- *     </Form.Root>
- *   );
- * }
- *
- * // Pattern 2: Lazy loading with formId (Client-side)
- * function DynamicForm({ formId }) {
- *   return (
- *     <Form.Root formServiceConfig={{ formId }}>
- *       <Form.Loading className="flex justify-center p-4" />
- *       <Form.LoadingError className="text-destructive px-4 py-3 rounded mb-4" />
- *       <Form.Fields fieldMap={FIELD_MAP} />
- *       <Form.Error className="text-destructive p-4 rounded-lg mb-4" />
- *       <Form.Submitted className="text-green-500 p-4 rounded-lg mb-4" />
- *     </Form.Root>
- *   );
- * }
- * ```
- */
-export const Form = {
-    /** Form root component that provides service context */
-    Root,
-    /** Form loading state component */
-    Loading,
-    /** Form loading error state component */
-    LoadingError,
-    /** Form error state component */
-    Error,
-    /** Form submitted state component */
-    Submitted,
-    /** Form fields component for rendering form fields */
-    Fields,
-};

package/dist/react/core/Form.d.ts

@@ -1,4 +1,8 @@
+import { forms } from '@wix/forms';
 import { FormServiceConfig } from '../../services/form-service.js';
+/**
+ * Props for Root headless component
+ */
 export interface RootProps {
     children: React.ReactNode;
     formServiceConfig: FormServiceConfig;
@@ -9,8 +13,9 @@ export interface RootProps {
  *
  * @order 1
  * @component
- * @param {React.ReactNode} children - Child components that will have access to form context
- * @param {FormServiceConfig} formServiceConfig - Configuration object containing form data
+ * @param {RootProps} props - Component props
+ * @param {React.ReactNode} props.children - Child components that will have access to form context
+ * @param {FormServiceConfig} props.formServiceConfig - Configuration object containing form data
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -47,7 +52,7 @@ export interface RootProps {
  * }
  * ```
  */
-export declare function Root(props: RootProps): React.ReactNode;
+export declare function Root({ formServiceConfig, children, }: RootProps): React.ReactNode;
 /**
  * Props for FormLoading headless component
  */
@@ -213,3 +218,44 @@ export interface FormSubmittedRenderProps {
  * ```
  */
 export declare function Submitted(props: FormSubmittedProps): import("react").ReactNode;
+/**
+ * Render props for Fields component
+ */
+interface FieldsRenderProps {
+    form: forms.Form | null;
+}
+/**
+ * Props for Fields headless component
+ */
+interface FieldsProps {
+    children: (props: FieldsRenderProps) => React.ReactNode;
+}
+/**
+ * Fields component that provides form data to its children.
+ * This component accesses the form data from the service and passes it to children via render props.
+ *
+ * @component
+ * @param {FieldsProps} props - Component props
+ * @param {FieldsProps['children']} props.children - Render prop function that receives form data
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function FormFields() {
+ *   return (
+ *     <Form.Fields>
+ *       {({ form }) => (
+ *         form ? (
+ *           <div>
+ *             <h2>{form.name}</h2>
+ *             <p>{form.description}</p>
+ *           </div>
+ *         ) : null
+ *       )}
+ *     </Form.Fields>
+ *   );
+ * }
+ * ```
+ */
+export declare function Fields(props: FieldsProps): import("react").ReactNode;
+export {};

package/dist/react/core/Form.js

@@ -1,7 +1,7 @@
 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';
+import { FormServiceDefinition, FormService, } from '../../services/form-service.js';
 const DEFAULT_SUCCESS_MESSAGE = 'Your form has been submitted successfully.';
 /**
  * Root component that provides the Form service context to its children.
@@ -9,8 +9,9 @@ const DEFAULT_SUCCESS_MESSAGE = 'Your form has been submitted successfully.';
  *
  * @order 1
  * @component
- * @param {React.ReactNode} children - Child components that will have access to form context
- * @param {FormServiceConfig} formServiceConfig - Configuration object containing form data
+ * @param {RootProps} props - Component props
+ * @param {React.ReactNode} props.children - Child components that will have access to form context
+ * @param {FormServiceConfig} props.formServiceConfig - Configuration object containing form data
  * @example
  * ```tsx
  * import { Form } from '@wix/headless-forms/react';
@@ -47,8 +48,8 @@ const DEFAULT_SUCCESS_MESSAGE = 'Your form has been submitted successfully.';
  * }
  * ```
  */
-export function Root(props) {
-    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(FormServiceDefinition, FormService, props.formServiceConfig), children: props.children }));
+export function Root({ formServiceConfig, children, }) {
+    return (_jsx(WixServices, { servicesMap: createServicesMap().addService(FormServiceDefinition, FormService, formServiceConfig), children: children }));
 }
 /**
  * Headless component for form loading state access
@@ -74,8 +75,8 @@ export function Root(props) {
  * ```
  */
 export function Loading(props) {
-    const service = useService(FormServiceDefinition);
-    const isLoading = service.isLoading?.get() || false;
+    const { isLoadingSignal } = useService(FormServiceDefinition);
+    const isLoading = isLoadingSignal.get();
     return props.children({
         isLoading,
     });
@@ -106,8 +107,8 @@ export function Loading(props) {
  * ```
  */
 export function LoadingError(props) {
-    const service = useService(FormServiceDefinition);
-    const error = service.error?.get() || null;
+    const { errorSignal } = useService(FormServiceDefinition);
+    const error = errorSignal.get();
     const hasError = !!error;
     return props.children({
         error,
@@ -140,10 +141,9 @@ export function LoadingError(props) {
  * ```
  */
 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';
+    // TODO: Implement submit response handling when submitResponseSignal is added to service
+    const error = null;
+    const hasError = false;
     return props.children({
         error,
         hasError,
@@ -176,14 +176,45 @@ export function Error(props) {
  * ```
  */
 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;
+    // TODO: Implement submit response handling when submitResponseSignal is added to service
+    const isSubmitted = false;
+    const message = DEFAULT_SUCCESS_MESSAGE;
     return props.children({
         isSubmitted,
         message,
     });
 }
+/**
+ * Fields component that provides form data to its children.
+ * This component accesses the form data from the service and passes it to children via render props.
+ *
+ * @component
+ * @param {FieldsProps} props - Component props
+ * @param {FieldsProps['children']} props.children - Render prop function that receives form data
+ * @example
+ * ```tsx
+ * import { Form } from '@wix/headless-forms/react';
+ *
+ * function FormFields() {
+ *   return (
+ *     <Form.Fields>
+ *       {({ form }) => (
+ *         form ? (
+ *           <div>
+ *             <h2>{form.name}</h2>
+ *             <p>{form.description}</p>
+ *           </div>
+ *         ) : null
+ *       )}
+ *     </Form.Fields>
+ *   );
+ * }
+ * ```
+ */
+export function Fields(props) {
+    const { formSignal } = useService(FormServiceDefinition);
+    const form = formSignal.get();
+    return props.children({
+        form,
+    });
+}

package/dist/react/types.d.ts

@@ -786,7 +786,7 @@ export interface DateInputProps extends BaseFieldProps {
     label: string;
     showLabel: boolean;
     showPlaceholder: boolean;
-    firstDayOfWeek: 'SUNDAY' | 'MONDAY';
+    showDateLabels: boolean;
     acceptedDates: 'all' | 'past' | 'future';
     description?: forms.RichContent;
 }