@tsed/react-formio 1.13.2 → 1.13.5

package/dist/stores/actions/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./actions.constant";
 export * from "./actions.actions";
+export * from "./actions.constant";
 export * from "./actions.reducers";
 export * from "./actions.selectors";

package/dist/stores/auth/index.d.ts

@@ -1,10 +1,10 @@
-export * from "./auth.constant";
-export * from "./auth.utils";
 export * from "./auth.actions";
+export * from "./auth.constant";
 export * from "./auth.reducers";
 export * from "./auth.selectors";
-export * from "./getProjectAccess.action";
+export * from "./auth.utils";
 export * from "./getAccess.action";
+export * from "./getProjectAccess.action";
+export * from "./initAuth.action";
 export * from "./logout.action";
 export * from "./setUser.action";
-export * from "./initAuth.action";

package/dist/stores/index.d.ts

@@ -1,10 +1,10 @@
-export * from "./auth";
 export * from "./action";
 export * from "./action-info";
 export * from "./actions";
+export * from "./auth";
 export * from "./form";
 export * from "./forms";
+export * from "./root";
 export * from "./submission";
 export * from "./submissions";
-export * from "./root";
 export declare const defaultFormioReducer: Record<string, import("@tsed/redux-utils").ReduceFunction<any, any>>;

package/jest.config.js

@@ -1 +1,6 @@
-module.exports = require("@tsed/config/jest/jest.web.config.js");
+module.exports = {
+  ...require("@tsed/config/jest/jest.web.config.js"),
+  coverageThreshold: {
+    global: require("./coverage.json")
+  }
+};

package/package.json

@@ -1,17 +1,20 @@
 {
   "name": "@tsed/react-formio",
-  "version": "1.13.2",
+  "version": "1.13.5",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
   "scripts": {
+    "lint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "yarn lint --fix",
     "test": "cross-env NODE_ENV=test jest --coverage",
+    "test:coverage:update": "write-coverage",
     "build": "microbundle --no-compress --format modern,cjs --jsx React.createElement",
     "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement"
   },
   "dependencies": {
-    "@tsed/redux-utils": "1.13.2",
+    "@tsed/redux-utils": "1.13.5",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -26,8 +29,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.13.2",
-    "@tsed/tailwind-formio": "1.13.2"
+    "@tsed/tailwind": "1.13.5",
+    "@tsed/tailwind-formio": "1.13.5"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

package/src/components/actions-table/actionsTable.component.spec.tsx

@@ -1,6 +1,6 @@
-import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import React from "react";
 
 import { Sandbox } from "./actionsTable.stories";
 
@@ -8,11 +8,11 @@ describe("ActionsTable", () => {
   it("should render the table actions", async () => {
     const onAddAction = jest.fn();
 
-    const { getByRole, getAllByRole } = render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
 
-    const btn = getByRole("button", { name: /add action/i });
-    const cells = getAllByRole("cell");
-    const options = getAllByRole("option");
+    const btn = screen.getByRole("button", { name: /add action/i });
+    const cells = screen.getAllByRole("cell");
+    const options = screen.getAllByRole("option");
 
     expect(btn).toHaveProperty("disabled");
     expect(btn.innerHTML).toMatch("Add action");
@@ -25,9 +25,9 @@ describe("ActionsTable", () => {
   it("should not call addAction when the default item is selected", async () => {
     const onAddAction = jest.fn();
 
-    const { getByRole } = render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
 
-    const btn = getByRole("button", { name: /add action/i });
+    const btn = screen.getByRole("button", { name: /add action/i });
 
     await fireEvent.click(btn);
     expect(onAddAction).not.toHaveBeenCalled();
@@ -35,10 +35,10 @@ describe("ActionsTable", () => {
   it("should call addAction with the selected action", async () => {
     const onAddAction = jest.fn();
 
-    const { getByRole } = render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
+    render(<Sandbox {...Sandbox.args} onAddAction={onAddAction} />);
 
-    const btn = getByRole("button", { name: /add action/i });
-    const select = getByRole("combobox");
+    const btn = screen.getByRole("button", { name: /add action/i });
+    const select = screen.getByRole("combobox");
 
     await userEvent.selectOptions(select, String(Sandbox.args.availableActions[1].value));
 

package/src/components/actions-table/actionsTable.component.tsx

@@ -1,6 +1,7 @@
 import classnames from "classnames";
 import noop from "lodash/noop";
 import React, { useState } from "react";
+
 import { ActionSchema } from "../../interfaces";
 import { iconClass } from "../../utils/iconClass";
 import { Select } from "../select/select.component";
@@ -21,15 +22,13 @@ export function ActionsTable({
   const { i18n = (f: string) => f } = props;
   const [currentAction, setAction] = useState("");
 
-  const columns = React.useMemo(() => {
-    return [
-      {
-        Header: i18n("Actions"),
-        accessor: "title",
-        id: "title"
-      }
-    ];
-  }, []);
+  const columns = [
+    {
+      Header: i18n("Actions"),
+      accessor: "title",
+      id: "title"
+    }
+  ];
 
   return (
     <Table {...props} disableFilters={disableFilters} disablePagination={disablePagination} columns={columns}>

package/src/components/actions-table/actionsTable.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { ActionsTable } from "./actionsTable.component";
 
 export default {

package/src/components/alert/alert.component.spec.tsx

@@ -1,5 +1,6 @@
+import { render, screen } from "@testing-library/react";
 import React from "react";
-import { render } from "@testing-library/react";
+
 import { Sandbox } from "./alert.stories";
 
 describe("Alert component", () => {
@@ -11,9 +12,10 @@ describe("Alert component", () => {
 
   it("should display an error when the error is in string format", () => {
     const error = "error in string format";
-    const { getByRole } = render(<Sandbox {...Sandbox.args} error={error} />);
 
-    const alert = getByRole("alert") as HTMLDivElement;
+    render(<Sandbox {...Sandbox.args} error={error} />);
+
+    const alert = screen.getByRole("alert") as HTMLDivElement;
 
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveClass("alert alert-danger");
@@ -23,13 +25,13 @@ describe("Alert component", () => {
   it("should display error(s) when the error is an array", () => {
     const arrayOfErrors = ["first error", "second error", "third error"];
     const joinedErrors = arrayOfErrors.map((error) => error).join("");
-    const { getByRole, getByText } = render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+    render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
 
-    const alert = getByRole("alert") as HTMLDivElement;
+    const alert = screen.getByRole("alert") as HTMLDivElement;
 
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveClass("alert alert-danger");
-    expect(getByText(joinedErrors)).toBeInTheDocument();
+    expect(screen.getByText(joinedErrors)).toBeInTheDocument();
   });
 
   it("should display error's names paths and messages when the error is an object that has an 'errors' property that contains an array of error objects", () => {
@@ -40,9 +42,9 @@ describe("Alert component", () => {
         { name: "third error", path: "/path", message: "message" }
       ]
     };
-    const { getByRole } = render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
+    render(<Sandbox {...Sandbox.args} error={arrayOfErrors} />);
 
-    const alert = getByRole("alert") as HTMLDivElement;
+    const alert = screen.getByRole("alert") as HTMLDivElement;
 
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveClass("alert alert-danger");
@@ -51,33 +53,33 @@ describe("Alert component", () => {
 
   it("should display an error message when the error is a standard error", () => {
     const standardError = { message: "first error" };
-    const { getByRole, getByText } = render(<Sandbox {...Sandbox.args} error={standardError} />);
+    render(<Sandbox {...Sandbox.args} error={standardError} />);
 
-    const alert = getByRole("alert") as HTMLDivElement;
+    const alert = screen.getByRole("alert") as HTMLDivElement;
 
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveClass("alert alert-danger");
-    expect(getByText(standardError.message)).toBeInTheDocument();
+    expect(screen.getByText(standardError.message)).toBeInTheDocument();
   });
 
   it("should display error(s) message(s) when the error is a joi validation error", () => {
     const joiValidationError = { name: "ValidationError", details: [{ message: "message 1" }, { message: "message 2" }] };
-    const { getByRole, getByText } = render(<Sandbox {...Sandbox.args} error={joiValidationError} />);
+    render(<Sandbox {...Sandbox.args} error={joiValidationError} />);
 
-    const alert = getByRole("alert") as HTMLDivElement;
+    const alert = screen.getByRole("alert") as HTMLDivElement;
 
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveClass("alert alert-danger");
-    expect(getByText("message 1")).toBeInTheDocument();
-    expect(getByText("message 2")).toBeInTheDocument();
+    expect(screen.getByText("message 1")).toBeInTheDocument();
+    expect(screen.getByText("message 2")).toBeInTheDocument();
   });
 
   it("should display a custom error message that asks to reload the form when a conflict error occurs in a form", () => {
     const error = { _id: "some id", display: "some value" };
     const messageReturned = "Another user has saved this form already. Please reload and re-apply your changes.";
-    const { getByRole } = render(<Sandbox {...Sandbox.args} error={error} />);
+    render(<Sandbox {...Sandbox.args} error={error} />);
 
-    const alert = getByRole("alert") as HTMLDivElement;
+    const alert = screen.getByRole("alert") as HTMLDivElement;
 
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveClass("alert alert-danger");
@@ -86,9 +88,9 @@ describe("Alert component", () => {
 
   it("should display an error message by default when the error format does not match any of the conditions of the formatError() handler", () => {
     const messageError: string = "An error occurred. See console logs for details.";
-    const { getByRole } = render(<Sandbox {...Sandbox.args} error={true} />);
+    render(<Sandbox {...Sandbox.args} error={true} />);
 
-    const alert = getByRole("alert") as HTMLDivElement;
+    const alert = screen.getByRole("alert") as HTMLDivElement;
 
     expect(alert).toBeInTheDocument();
     expect(alert).toHaveClass("alert alert-danger");

package/src/components/alert/alert.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Alert } from "./alert.component";
 
 export default {

package/src/components/card/card.component.spec.tsx

@@ -1,13 +1,14 @@
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import React from "react";
+
 import { Sandbox } from "./card.stories";
 
 describe("Card", () => {
   it("should render the card component", () => {
-    const { getByRole } = render(<Sandbox {...Sandbox.args} />);
+    render(<Sandbox {...Sandbox.args} />);
 
-    const title = getByRole("heading");
-    const body = getByRole("article");
+    const title = screen.getByRole("heading");
+    const body = screen.getByRole("article");
 
     expect(title).toHaveTextContent("label");
     expect(body).toHaveTextContent("test");

package/src/components/card/card.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { Card } from "./card.component";
 
 export default {

package/src/components/form/form.component.spec.tsx

@@ -1,6 +1,7 @@
-import {render} from "@testing-library/react";
-import {screen} from "@testing-library/dom";
-import {Form} from "./form.component";
+import { screen } from "@testing-library/react";
+import { render } from "@testing-library/react";
+
+import { Form } from "./form.component";
 
 async function createFixture(props: any = {}) {
   const onSubmit = jest.fn();
@@ -11,7 +12,7 @@ async function createFixture(props: any = {}) {
     components: [
       {
         label: "First name",
-        "placeholder": "Fill first name",
+        placeholder: "Fill first name",
         widget: {
           type: "input"
         },
@@ -33,9 +34,9 @@ async function createFixture(props: any = {}) {
     ]
   };
 
-  render(<Form {...props} form={form} onSubmit={onSubmit}/>);
+  render(<Form {...props} form={form} onSubmit={onSubmit} />);
 
-  return {onSubmit};
+  return { onSubmit };
 }
 
 describe("Form", () => {

package/src/components/form/form.component.tsx

@@ -1,7 +1,8 @@
-import AllComponents from "formiojs/components";
 import { Components } from "formiojs";
+import AllComponents from "formiojs/components";
 import PropTypes from "prop-types";
 import React from "react";
+
 import { useForm, UseFormHookProps } from "./useForm.hook";
 
 Components.setComponents(AllComponents);

package/src/components/form/form.stories.tsx

@@ -1,7 +1,8 @@
-import React from "react";
-import {Form} from "./form.component";
+import React, { useState } from "react";
+
+import { Submission } from "../../interfaces";
 import form from "../__fixtures__/form.fixture.json";
-import {Submission} from "../../interfaces";
+import { Form } from "./form.component";
 
 export default {
   title: "ReactFormio/Form",
@@ -12,44 +13,43 @@ export default {
         type: "object"
       }
     },
-    onPrevPage: {action: "onPrevPage"},
-    onNextPage: {action: "onNextPage"},
-    onCancel: {action: "onCancel"},
-    onChange: {action: "onChange"},
-    onCustomEvent: {action: "onCustomEvent"},
-    onComponentChange: {action: "onComponentChange"},
-    onSubmit: {action: "onSubmit"},
-    onAsyncSubmit: {action: "onAsyncSubmit"},
-    onSubmitDone: {action: "onSubmitDone"},
-    onFormLoad: {action: "onFormLoad"},
-    onError: {action: "onError"},
-    onRender: {action: "onRender"},
-    onAttach: {action: "onAttach"},
-    onBuild: {action: "onBuild"},
-    onFocus: {action: "onFocus"},
-    onBlur: {action: "onBlur"},
-    onInitialized: {action: "onInitialized"},
-    onFormReady: {action: "onFormReady"}
+    onPrevPage: { action: "onPrevPage" },
+    onNextPage: { action: "onNextPage" },
+    onCancel: { action: "onCancel" },
+    onChange: { action: "onChange" },
+    onCustomEvent: { action: "onCustomEvent" },
+    onComponentChange: { action: "onComponentChange" },
+    onSubmit: { action: "onSubmit" },
+    onAsyncSubmit: { action: "onAsyncSubmit" },
+    onSubmitDone: { action: "onSubmitDone" },
+    onFormLoad: { action: "onFormLoad" },
+    onError: { action: "onError" },
+    onRender: { action: "onRender" },
+    onAttach: { action: "onAttach" },
+    onBuild: { action: "onBuild" },
+    onFocus: { action: "onFocus" },
+    onBlur: { action: "onBlur" },
+    onInitialized: { action: "onInitialized" },
+    onFormReady: { action: "onFormReady" }
   }
 };
 
 function filter(args: any[]) {
-  return args
-    .map((item) => {
-      if (item && (item._form)) {
-        return "FormioInstance";
-      }
+  return args.map((item) => {
+    if (item && item._form) {
+      return "FormioInstance";
+    }
 
-      if (item && item.component) {
-        return ["Component", item.component.type, item.component.key].filter(Boolean).join(":");
-      }
+    if (item && item.component) {
+      return ["Component", item.component.type, item.component.key].filter(Boolean).join(":");
+    }
 
-      if (item && item.changed) {
-        return `${item.changed.component.key}(${item.changed.value})`;
-      }
+    if (item && item.changed) {
+      return `${item.changed.component.key}(${item.changed.value})`;
+    }
 
-      return item;
-    });
+    return item;
+  });
 }
 
 function wrap(args: any) {
@@ -113,13 +113,7 @@ function wrap(args: any) {
 }
 
 export const Sandbox = (args: any) => {
-  return (
-    <Form
-      {...wrap(args)}
-      form={args.form}
-      options={{template: "tailwind", iconset: "bx"}}
-    />
-  );
+  return <Form {...wrap(args)} form={args.form} options={{ template: "tailwind", iconset: "bx" }} />;
 };
 
 Sandbox.args = {
@@ -134,66 +128,57 @@ export const TriggerError = (args: any) => {
       }, 500);
     }).catch((error) => {
       error.errors = {
-        "message": "My custom message about this field",
-        "type": "custom",
-        "path": ["firstName"],
-        "level": "error"
+        message: "My custom message about this field",
+        type: "custom",
+        path: ["firstName"],
+        level: "error"
       };
       throw error;
     });
   };
 
-  return (
-    <Form<any>
-      {...wrap(args)}
-      form={args.form}
-      onAsyncSubmit={onAsyncSubmit}
-    />
-  );
+  return <Form<any> {...wrap(args)} form={args.form} onAsyncSubmit={onAsyncSubmit} />;
 };
 
 TriggerError.args = {
   form: {
-    "type": "form",
-    "display": "form",
-    "tags": [],
-    "components": [
+    type: "form",
+    display: "form",
+    tags: [],
+    components: [
       {
-        "label": "First name",
-        "widget": {
-          "type": "input"
+        label: "First name",
+        widget: {
+          type: "input"
         },
-        "errorLabel": "",
-        "key": "firstName",
-        "inputType": "text",
-        "type": "textfield",
-        "id": "eqb1o4r",
-        "defaultValue": ""
+        errorLabel: "",
+        key: "firstName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: ""
       },
       {
-        "label": "Submit",
-        "showValidations": false,
-        "tableView": false,
-        "key": "submit",
-        "type": "button",
-        "input": true
+        label: "Submit",
+        showValidations: false,
+        tableView: false,
+        key: "submit",
+        type: "button",
+        input: true
       }
     ]
   }
 };
 
-
 export const ReadOnly = (args: any) => {
   return (
     <Form
       {...wrap(args)}
-      options={{template: "tailwind", iconset: "bx", readOnly: args.readOnly}}
+      options={{ template: "tailwind", iconset: "bx", readOnly: args.readOnly }}
       form={args.form}
       submission={{
         data: {
-          editGrid: [
-            {currency: "EUR"}
-          ]
+          editGrid: [{ currency: "EUR" }]
         }
       }}
     />
@@ -204,3 +189,60 @@ ReadOnly.args = {
   readonly: true,
   form
 };
+
+export const OnChange = (args: any) => {
+  const [data, setForm] = useState<any>(() => {});
+  const props = wrap(args);
+
+  return (
+    <Form
+      {...props}
+      options={{ template: "tailwind", iconset: "bx", readOnly: args.readOnly }}
+      form={args.form}
+      submission={{ data }}
+      onChange={(changedSubmission) => {
+        setForm(changedSubmission.data);
+      }}
+    />
+  );
+};
+
+OnChange.args = {
+  form: {
+    type: "form",
+    display: "form",
+    tags: [],
+    components: [
+      {
+        label: "First name",
+        widget: {
+          type: "input"
+        },
+        errorLabel: "",
+        key: "firstName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: "",
+        validate: {
+          required: true
+        }
+      },
+      {
+        label: "Last name",
+        widget: {
+          type: "input"
+        },
+        errorLabel: "",
+        key: "lastName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: "",
+        validate: {
+          required: true
+        }
+      }
+    ]
+  }
+};