@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/organisms/__fixtures__/form.fixture.json

@@ -1,4 +1,5 @@
 {
+  "title": "Form complex",
   "type": "form",
   "tags": [],
   "components": [

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`
@@ -185,7 +180,7 @@ export const BasicUsageWithForm: Story = {
   args: {
     form: form as any,
     onFormReady: fn(),
-    options: { template: "tailwind", iconset: "bx" }
+    options: { template: "tailwind", iconset: "lu" }
   },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
@@ -209,7 +204,7 @@ export const BasicUsageWithForm: Story = {
 export const BasicUsageWithSrc: Story = {
   args: {
     src: "https://example.form.io/example",
-    options: { template: "tailwind", iconset: "bx" }
+    options: { template: "tailwind", iconset: "lu" }
   },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
@@ -233,7 +228,7 @@ export const WithSubmissionData: Story = {
     form: formFirstname as never,
     options: {
       template: "tailwind",
-      iconset: "bx"
+      iconset: "lu"
     },
     submission: {
       data: {
@@ -306,7 +301,7 @@ export const WithOnSubmit: Story = {
     form: formFirstname as never,
     options: {
       template: "tailwind",
-      iconset: "bx"
+      iconset: "lu"
     },
     submission: {
       data: {
@@ -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();
@@ -486,39 +459,33 @@ export const FetchSubmissionWithCustomAction: Story = {
   args: {
     options: {
       template: "tailwind",
-      iconset: "bx"
+      iconset: "lu"
     }
   },
   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);
 
@@ -593,41 +567,40 @@ export const ErrorOnSubmitServer: Story = {
   args: {
     options: {
       template: "tailwind",
-      iconset: "bx"
+      iconset: "lu"
     }
   },
   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"
@@ -76,6 +78,6 @@ export const Sandbox: Story = {
       { title: "Authenticated", _id: "5d0797bc872fc71d05559859" },
       { title: "Anonymous", _id: "5d0797bc872fc7da3b55985a" }
     ],
-    options: { template: "tailwind", iconset: "bx" }
+    options: { template: "tailwind", iconset: "lu" }
   }
 };