@wix/headless-forms 0.0.1 → 0.0.2

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

@@ -563,7 +563,7 @@ export interface FieldsProps {
  * };
  * ```
  */
-export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLElement>>;
+export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * 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.
@@ -627,6 +627,6 @@ export declare const Form: {
     /** Form submitted state component */
     readonly Submitted: React.ForwardRefExoticComponent<SubmittedProps & React.RefAttributes<HTMLElement>>;
     /** Form fields component for rendering form fields */
-    readonly Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLElement>>;
+    readonly Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/cjs/dist/react/Form.js

@@ -32,15 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = exports.Fields = exports.Submitted = exports.Error = exports.LoadingError = exports.Loading = exports.Root = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_2 = require("@wix/headless-utils/react");
-const CoreForm = __importStar(require("./core/Form.js"));
+const services_manager_react_1 = require("@wix/services-manager-react");
+const form_public_1 = require("@wix/form-public");
+const form_service_1 = require("../services/form-service");
+const CoreForm = __importStar(require("./core/Form"));
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -114,7 +114,7 @@ exports.Root = react_1.default.forwardRef((props, ref) => {
  */
 const RootContent = react_1.default.forwardRef((props, ref) => {
     const { asChild, children, className, ...otherProps } = props;
-    return ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formRoot, customElement: children, customElementProps: {}, ...otherProps, children: (0, jsx_runtime_1.jsx)("div", { children: react_1.default.isValidElement(children) ? children : null }) }));
+    return ((0, jsx_runtime_1.jsx)(react_2.AsChildSlot, { ref: ref, asChild: asChild, className: className, "data-testid": TestIds.formRoot, customElement: children, customElementProps: {}, ...otherProps, children: (0, jsx_runtime_1.jsx)("div", { children: children }) }));
 });
 /**
  * Component that renders content during loading state.
@@ -483,108 +483,26 @@ exports.Submitted = react_1.default.forwardRef((props, ref) => {
  * };
  * ```
  */
-exports.Fields = react_1.default.forwardRef(({ fieldMap }) => {
-    // TODO: render real viewer
-    return (0, jsx_runtime_1.jsx)(MockViewer, { fieldMap: 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,
+exports.Fields = react_1.default.forwardRef(({ fieldMap }, ref) => {
+    const formService = (0, services_manager_react_1.useService)(form_service_1.FormServiceDefinition);
+    const form = formService.form.get();
+    const _form = {
+        ...form,
+        id: form?._id,
+        fields: form?.formFields?.map((field) => ({ ...field, id: field._id })),
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: "Form Fields" }), (0, jsx_runtime_1.jsx)("div", { children: JSON.stringify(schemaFields) })] }));
-};
+    const [formValues, setFormValues] = (0, react_1.useState)({});
+    const [formErrors, setFormErrors] = (0, react_1.useState)([]);
+    const handleFormChange = (0, react_1.useCallback)((values) => {
+        setFormValues(values);
+    }, []);
+    const handleFormValidate = (0, react_1.useCallback)((errors) => {
+        setFormErrors(errors);
+    }, []);
+    if (!form)
+        return (0, jsx_runtime_1.jsx)("div", { children: "Form not found, oops!" });
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: (0, jsx_runtime_1.jsx)(form_public_1.Form, { form: _form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: fieldMap }) }));
+});
 /**
  * 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.

package/cjs/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;
 }

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

@@ -136,6 +136,6 @@ async function loadFormServiceConfig(id) {
     }
     catch (error) {
         console.error('Failed to load form:', error);
-        return { type: 'notFound' };
     }
+    return { type: 'notFound' };
 }

package/dist/react/Form.d.ts

@@ -563,7 +563,7 @@ export interface FieldsProps {
  * };
  * ```
  */
-export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLElement>>;
+export declare const Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * 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.
@@ -627,6 +627,6 @@ export declare const Form: {
     /** Form submitted state component */
     readonly Submitted: React.ForwardRefExoticComponent<SubmittedProps & React.RefAttributes<HTMLElement>>;
     /** Form fields component for rendering form fields */
-    readonly Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLElement>>;
+    readonly Fields: React.ForwardRefExoticComponent<FieldsProps & React.RefAttributes<HTMLDivElement>>;
 };
 export {};

package/dist/react/Form.js

@@ -1,7 +1,10 @@
-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, { useCallback, useState } from 'react';
 import { AsChildSlot } from '@wix/headless-utils/react';
-import * as CoreForm from './core/Form.js';
+import { useService } from '@wix/services-manager-react';
+import { Form as FormViewer, } from '@wix/form-public';
+import { FormServiceDefinition, } from '../services/form-service';
+import * as CoreForm from './core/Form';
 var TestIds;
 (function (TestIds) {
     TestIds["formRoot"] = "form-root";
@@ -75,7 +78,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.
@@ -444,108 +447,26 @@ export const Submitted = React.forwardRef((props, ref) => {
  * };
  * ```
  */
-export const Fields = React.forwardRef(({ fieldMap }) => {
-    // TODO: render real viewer
-    return _jsx(MockViewer, { fieldMap: 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,
+export const Fields = React.forwardRef(({ fieldMap }, ref) => {
+    const formService = useService(FormServiceDefinition);
+    const form = formService.form.get();
+    const _form = {
+        ...form,
+        id: form?._id,
+        fields: form?.formFields?.map((field) => ({ ...field, id: field._id })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { children: "Form Fields" }), _jsx("div", { children: JSON.stringify(schemaFields) })] }));
-};
+    const [formValues, setFormValues] = useState({});
+    const [formErrors, setFormErrors] = useState([]);
+    const handleFormChange = useCallback((values) => {
+        setFormValues(values);
+    }, []);
+    const handleFormValidate = useCallback((errors) => {
+        setFormErrors(errors);
+    }, []);
+    if (!form)
+        return _jsx("div", { children: "Form not found, oops!" });
+    return (_jsx("div", { ref: ref, children: _jsx(FormViewer, { form: _form, values: formValues, onChange: handleFormChange, errors: formErrors, onValidate: handleFormValidate, fields: fieldMap }) }));
+});
 /**
  * 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.

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;
 }

package/dist/services/form-service.js

@@ -132,6 +132,6 @@ export async function loadFormServiceConfig(id) {
     }
     catch (error) {
         console.error('Failed to load form:', error);
-        return { type: 'notFound' };
     }
+    return { type: 'notFound' };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/headless-forms",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "type": "module",
   "scripts": {
     "build": "npm run build:esm && npm run build:cjs",
@@ -41,6 +41,7 @@
     "vitest": "^3.1.4"
   },
   "dependencies": {
+    "@wix/form-public": "^0.9.0",
     "@wix/forms": "^1.0.292",
     "@wix/headless-utils": "0.0.3",
     "@wix/services-definitions": "^0.1.4",