@tsed/react-formio 3.0.0-alpha.11 → 3.0.0-alpha.13

package/src/molecules/tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import "./all.js";
 
-import { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { Icon } from "../../atoms/icon/Icon.js";
 import { Button } from "../button/Button.js";

package/src/molecules/tabs/TabsLegacy.stories.tsx

@@ -1,6 +1,6 @@
 import "./all.js";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { TabsLegacy } from "./TabsLegacy.js";
 
@@ -37,7 +37,7 @@ export default {
   render: (args: any) => {
     return (
       <div className={"border-gray-300 border-1 shadow"}>
-        <TabsLegacy {...args} i18n={(f) => f} />
+        <TabsLegacy {...args} />
       </div>
     );
   }

package/src/molecules/tabs/TabsLegacy.tsx

@@ -2,6 +2,8 @@ import "./all.js";
 
 import { CSSProperties, ReactNode } from "react";
 
+import { useI18n } from "../../hooks/useI18n.js";
+import type { FormOptions } from "../../interfaces/index.js";
 import { getComponent } from "../../registries/components.js";
 import type { Tab as DefaultTab } from "./Tab.js";
 import type { TabList as DefaultTabList } from "./TabList.js";
@@ -23,7 +25,7 @@ export interface TabsLegacyProps extends Record<string, any> {
   className?: string;
   reverse?: boolean;
   onClick?: (item: TabsItemProps) => void;
-  i18n?: (f: string) => string;
+  i18n?: FormOptions["i18n"];
 }
 
 export function TabsLegacy({
@@ -34,7 +36,6 @@ export function TabsLegacy({
   AddButton,
   className,
   onClick,
-  i18n = (f) => f,
   reverse,
   after,
   ...additionalProps
@@ -45,6 +46,7 @@ export function TabsLegacy({
   const TabPanel = getComponent<typeof DefaultTabPanel>("TabPanel");
   const Tabs = getComponent<typeof DefaultTabs>("Tabs");
   const tabs = items.filter((item) => item.label || item.icon);
+  const { t } = useI18n(additionalProps.i18n);
 
   return (
     <Tabs className={className} style={style}>
@@ -62,7 +64,7 @@ export function TabsLegacy({
                 className={reverse ? "-reverse" : ""}
                 after={after}
               >
-                {i18n(item.label || "")}
+                {t(item.label || "")}
               </Tab>
             );
           })}

package/src/organisms/form/Form.stories.tsx

@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { delay, http, HttpResponse } from "msw";
 import { useEffect, useState } from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
 import { SubmissionType } from "../../interfaces";
 import { InputText } from "../../molecules/forms/input-text/InputText";
@@ -9,12 +10,6 @@ import formFirstname from "../__fixtures__/form-firstname.fixture.json";
 import { useEditForm } from "../__fixtures__/useEditForm";
 import { Form } from "./Form";
 
-async function delay(number: number) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, number);
-  });
-}
-
 /**
  * The form component is the primary component of the system. It is what takes the form definition (json) and renders the
  * form into html. There are multiple ways to send the form to the Form component. The two main ways are to pass the `src`
@@ -332,15 +327,15 @@ export const WithOnSubmit: Story = {
     expect(firstnameInput).toHaveValue("John");
     expect(lastNameInput).toHaveValue("Doe");
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -397,42 +392,20 @@ export const WithOnSubmit: Story = {
  * Form with custom validation hook
  */
 export const CustomValidation: Story = {
-  parameters: {
-    mockData: [
-      {
-        url: "https://test.dev/todos/1",
-        method: "GET",
-        status: 500,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
-  },
+  parameters: {},
   args: {
     form: formFirstname as never,
     options: {
       hooks: {
         async customValidation(submission: SubmissionType, callback: (error: any) => void) {
-          const response = await fetch("https://test.dev/todos/1", {
-            headers: {
-              Accept: "application/json",
-              "Content-Type": "application/json"
-            },
-            method: "GET"
-          });
-
-          const responseData = await response.json();
-
-          if (response.ok) {
-            callback(null);
-          } else {
-            callback(responseData);
-          }
+          setTimeout(() => {
+            callback({
+              message: "My custom message about this field",
+              type: "custom",
+              path: ["firstName"],
+              level: "error"
+            });
+          }, 200);
         }
       }
     }
@@ -451,15 +424,15 @@ export const CustomValidation: Story = {
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -467,7 +440,7 @@ export const CustomValidation: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await waitFor(async () => {
       expect(canvas.getByText("Please fix the following errors before submitting.")).toBeInTheDocument();
@@ -490,35 +463,29 @@ export const FetchSubmissionWithCustomAction: Story = {
     }
   },
   parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test/submissions/1",
-        method: "PUT",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      }
-    ]
+    chromatic: { disableSnapshot: false },
+    msw: {
+      handlers: [
+        http.get("https://local.dev/form/Test", async () => {
+          await delay(200);
+          return HttpResponse.json(JSON.parse(JSON.stringify(formFirstname)));
+        }),
+        http.get("https://local.dev/form/Test/submissions/1", async () => {
+          await delay(300);
+          return HttpResponse.json({
+            firstName: "Jane",
+            lastName: "Doe"
+          });
+        }),
+        http.put("https://local.dev/form/Test/submissions/1", async () => {
+          await delay(800);
+          return HttpResponse.json({
+            firstName: "Jane",
+            lastName: "Doe"
+          });
+        })
+      ]
+    }
   },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -559,18 +526,25 @@ export const FetchSubmissionWithCustomAction: Story = {
       expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
     });
 
+    await delay(200);
+
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+
+    await waitFor(() => {
+      expect(firstnameInput).toHaveValue("");
+    });
+
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -578,7 +552,7 @@ export const FetchSubmissionWithCustomAction: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await delay(1000);
 
@@ -597,37 +571,36 @@ export const ErrorOnSubmitServer: Story = {
     }
   },
   parameters: {
-    mockData: [
-      {
-        url: "https://local.dev/form/Test2",
-        method: "GET",
-        status: 200,
-        response: formFirstname,
-        delay: 200
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "GET",
-        status: 200,
-        response: {
-          firstName: "John",
-          lastName: "Doe"
-        },
-        delay: 800
-      },
-      {
-        url: "https://local.dev/form/Test2/submissions/2",
-        method: "PUT",
-        status: 400,
-        response: {
-          message: "My custom message about this field",
-          type: "custom",
-          path: ["firstName"],
-          level: "error"
-        },
-        delay: 800
-      }
-    ]
+    chromatic: { disableSnapshot: false },
+    msw: {
+      handlers: [
+        http.get("https://local.dev/form/Test2", async () => {
+          await delay(200);
+          return HttpResponse.json(JSON.parse(JSON.stringify(formFirstname)));
+        }),
+        http.get("https://local.dev/form/Test2/submissions/2", async () => {
+          await delay(300);
+          return HttpResponse.json({
+            firstName: "John",
+            lastName: "Doe"
+          });
+        }),
+        http.put("https://local.dev/form/Test2/submissions/2", async () => {
+          await delay(800);
+          return HttpResponse.json(
+            {
+              message: "My custom message about this field",
+              type: "custom",
+              path: ["firstName"],
+              level: "error"
+            },
+            {
+              status: 400
+            }
+          );
+        })
+      ]
+    }
   },
   render(args) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -668,18 +641,25 @@ export const ErrorOnSubmitServer: Story = {
       expect(canvas.getByTestId("formio-container")).toHaveClass("formio-form-ready");
     });
 
+    await delay(200);
+
     let firstnameInput = canvas.getByRole("textbox", { name: "First name" });
     let lastNameInput = canvas.getByRole("textbox", { name: "Last name" });
 
-    userEvent.clear(firstnameInput);
-    userEvent.type(firstnameInput, "Jane", { delay: 100 });
+    await userEvent.clear(firstnameInput);
+
+    await waitFor(() => {
+      expect(firstnameInput).toHaveValue("");
+    });
+
+    await userEvent.type(firstnameInput, "Jane", { delay: 100 });
 
     await waitFor(() => {
       expect(firstnameInput).toHaveValue("Jane");
     });
 
-    userEvent.clear(lastNameInput);
-    userEvent.type(lastNameInput, "Smith", { delay: 100 });
+    await userEvent.clear(lastNameInput);
+    await userEvent.type(lastNameInput, "Smith", { delay: 100 });
 
     await waitFor(() => {
       expect(lastNameInput).toHaveValue("Smith");
@@ -687,7 +667,7 @@ export const ErrorOnSubmitServer: Story = {
 
     let submitButton = canvas.getByRole("button", { name: "Submit" });
 
-    userEvent.click(submitButton);
+    await userEvent.click(submitButton);
 
     await delay(1000);
 

package/src/organisms/form/access/FormAccess.schema.ts

@@ -11,6 +11,7 @@ export function getRoleComponent({ label, key, description, choices, data }: any
     placeholder: "Select roles...",
     tooltip: "",
     multiple: true,
+    input: true,
     dataSrc: "values",
     defaultValue: "",
     data: {

package/src/organisms/form/access/FormAccess.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import { FormAccess } from "./FormAccess";
 
@@ -63,7 +63,9 @@ export const Sandbox: Story = {
       ],
       controller: "",
       properties: {},
-      settings: {},
+      settings: {
+        hideTitle: false
+      },
       name: "textField",
       path: "textfield",
       machineName: "tcspjwhsevrzpcd:textField"

package/src/organisms/form/actions/FormAction.stories.tsx

@@ -1,7 +1,7 @@
 import "../../../molecules/card/Card.js";
 import "../Form.js";
 
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { FormAction } from "./FormAction.js";
 
@@ -88,6 +88,7 @@ export const SaveAction: Story = {
             input: false,
             tree: true,
             legend: "Action Settings",
+            key: "settings",
             components: [
               {
                 input: false,
@@ -101,7 +102,8 @@ export const SaveAction: Story = {
                     placeholder: "This form",
                     basePath: "/project/5d0797bc872fc7d140559857/form",
                     form: "62b18b10fbbba513555c6c5e",
-                    required: false
+                    required: false,
+                    input: true
                   }
                 ]
               }
@@ -205,6 +207,7 @@ export const EmailAction: Story = {
             input: false,
             tree: true,
             legend: "Email Settings",
+            key: "settings",
             components: [
               {
                 type: "textfield",
@@ -340,6 +343,7 @@ export const WebhookAction: Story = {
             input: false,
             tree: true,
             legend: "Webhook Settings",
+            key: "settings",
             components: [
               {
                 type: "textfield",

package/src/organisms/form/actions/FormAction.tsx

@@ -1,4 +1,4 @@
-import FormioUtils from "formiojs/utils";
+import FormioUtils from "@formio/js/utils";
 import { PropsWithChildren, ReactElement } from "react";
 
 import { ActionDefaultsType, ActionType, FormOptions, SubmissionType } from "../../../interfaces";
@@ -44,7 +44,7 @@ export function FormAction({ actionInfo, children, onSubmit, options, ...props }
     const submission = mapData(props.submission || {}, actionInfo.defaults!);
     const form = mapSettingsForm(actionInfo.settingsForm);
 
-    return { form, submission: { data: submission } };
+    return { form, submission: { data: submission } as SubmissionType<ActionType> };
   })();
 
   return (

package/src/organisms/form/builder/FormBuilder.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import form from "../../__fixtures__/form.fixture.json";
 import formWizard from "../../__fixtures__/form-wizard.fixture.json";
@@ -59,6 +59,9 @@ export default {
       action: "onDeleteComponent"
     }
   },
+  render(args) {
+    return <FormBuilder display={args.display} components={args.components} options={args.options} />;
+  },
   tags: ["autodocs"]
 } satisfies Meta<typeof FormBuilder>;
 

package/src/organisms/form/builder/FormEdit.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 
 import { FormEdit } from "./all";
 import { defaultDisplayChoices } from "./FormParameters";
@@ -92,7 +92,14 @@ export default {
       options: ["choicesjs", "react"]
     }
   },
-  parameters: {}
+  parameters: {},
+  args: {
+    options: {
+      template: "tailwind",
+      iconset: "bx",
+      noDefaultSubmitButton: true
+    }
+  }
 } satisfies Meta<typeof FormEdit>;
 
 type Story = StoryObj<typeof FormEdit>;
@@ -106,7 +113,6 @@ export const EditWebForm: Story = {
     ],
     displayChoices: defaultDisplayChoices,
     enableTags: true,
-    options: { template: "tailwind", iconset: "bx" },
     form: {
       type: "form",
       tags: [],
@@ -307,8 +313,7 @@ export const WithoutTypeChoices: Story = {
       machineName: "tcspjwhsevrzpcd:textField"
     } as any,
     displayChoices: defaultDisplayChoices,
-    enableTags: true,
-    options: { template: "tailwind", iconset: "bx" }
+    enableTags: true
   }
 };
 
@@ -412,7 +417,6 @@ export const WithoutTags: Story = {
       machineName: "tcspjwhsevrzpcd:textField"
     } as any,
     displayChoices: defaultDisplayChoices,
-    enableTags: false,
-    options: { template: "tailwind", iconset: "bx" }
+    enableTags: false
   }
 };

package/src/organisms/form/builder/FormEdit.tsx

@@ -1,6 +1,7 @@
 import classnames from "classnames";
+import type { CSSProperties } from "react";
 
-import type { FormOptions } from "../../../interfaces";
+import type { FormBuilderOptions, FormOptions } from "../../../interfaces/index.js";
 import { getComponent } from "../../../registries/components";
 import { FormBuilder as DefaultFormBuilder } from "./FormBuilder";
 import { FormEditCTAs as DefaultFormEditCTAs } from "./FormEditCtas";
@@ -9,10 +10,10 @@ import { FormBuilderEvents } from "./useFormBuilder";
 import { useFormEdit, UseFormEditHookProps } from "./useFormEdit";
 
 export interface FormEditProps extends UseFormEditHookProps, FormBuilderEvents {
-  options?: FormOptions;
+  options?: FormBuilderOptions & FormOptions;
   layout?: "html5" | "choicesjs" | "react";
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 export function FormEdit({
@@ -35,7 +36,6 @@ export function FormEdit({
     onCopy: initialOnCopy
   });
 
-  const { options = {} } = props;
   const FormParameters = getComponent<typeof DefaultFormParameters>("FormParameters");
   const FormBuilder = getComponent<typeof DefaultFormBuilder>("FormBuilder");
   const FormEditCTAs = getComponent<typeof DefaultFormEditCTAs>("FormEditCTAs");
@@ -54,7 +54,7 @@ export function FormEdit({
         />
         <FormEditCTAs
           key={`form-edit-ctas-${form._id}`}
-          options={options}
+          options={props.options}
           hasRedo={hasRedo}
           hasUndo={hasUndo}
           disabled={!(isValid && hasChanged)}
@@ -71,7 +71,7 @@ export function FormEdit({
         key={`form-builder-${form._id}`}
         components={form.components!}
         display={form.display}
-        options={options}
+        options={props.options}
         onChange={(components) => {
           setChange("components", components);
         }}

package/src/organisms/form/builder/FormEditCtas.tsx

@@ -1,8 +1,9 @@
 import { ReactElement } from "react";
 
 import { Icon as DefaultIcon } from "../../../atoms/icon/Icon";
+import { useI18n } from "../../../hooks/useI18n";
 import { useTooltip } from "../../../hooks/useTooltip";
-import type { FormOptions } from "../../../interfaces";
+import type { FormOptions } from "../../../interfaces/index.js";
 import { Button as DefaultButton } from "../../../molecules/button/Button";
 import { getComponent, registerComponent } from "../../../registries/components";
 
@@ -22,17 +23,16 @@ export interface FormEditCTAsProps extends Record<string, unknown> {
 export function FormEditCTAs({
   saveText = "Save",
   disabled,
-  options = {},
   onCopy,
   hasUndo,
   hasRedo,
   onUndo,
   onRedo,
   onReset,
-  onSubmit
+  onSubmit,
+  options
 }: FormEditCTAsProps): ReactElement {
-  const { i18n: t = (t: string): string => t } = options;
-
+  const { t } = useI18n(options?.i18n);
   const copyTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
@@ -64,29 +64,29 @@ export function FormEditCTAs({
     <div className={"form-edit__actions"}>
       <div>
         <Button variant='primary' className='btn-save' disabled={disabled} onClick={() => onSubmit?.()}>
-          <Icon name='save' iconset={options.iconset} />
+          <Icon name='save' iconset={options?.iconset} />
           {saveText}
         </Button>
 
         <div>
           <Button variant='light' className='btn-undo' disabled={!hasUndo} onClick={() => onUndo?.()} ref={undoTooltipRef}>
-            <Icon name='undo' iconset={options.iconset} />
+            <Icon name='undo' iconset={options?.iconset} />
           </Button>
 
           <Button variant='light' className='btn-redo' disabled={!hasRedo} onClick={() => onRedo?.()} ref={redoTooltipRef}>
-            <Icon name='redo' iconset={options.iconset} />
+            <Icon name='redo' iconset={options?.iconset} />
           </Button>
         </div>
 
         <div>
           {onCopy && (
             <Button variant='light' className='btn-copy' onClick={() => onCopy()} ref={copyTooltipRef}>
-              <Icon name='copy' iconset={options.iconset} />
+              <Icon name='copy' iconset={options?.iconset} />
             </Button>
           )}
 
           <Button variant='light' className='btn-reset' onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
-            <Icon name='reset' iconset={options.iconset} />
+            <Icon name='reset' iconset={options?.iconset} />
           </Button>
         </div>
       </div>