@tsed/react-formio 1.13.0 → 1.13.3

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/auth.selectors.d.ts

@@ -1,6 +1,6 @@
 import { RoleSchema, Submission } from "../../interfaces";
 import { AuthState } from "./auth.reducers";
 export declare const selectAuth: (state: any) => AuthState<any>;
-export declare const selectUser: <User = any>(state: any) => Submission<User>;
+export declare const selectUser: <User = any>(state: any) => Submission<User> | null;
 export declare const selectRoles: (state: any) => Record<string, RoleSchema>;
 export declare const selectIsAuthenticated: (state: any) => boolean;

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.config")("react-formio");
+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.0",
+  "version": "1.13.3",
   "description": "Provide a react formio wrapper. Written in TypeScript.",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
   "source": "src/index.ts",
   "scripts": {
-    "test": "cross-env CI=1 yarn craco test --coverage",
+    "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.0",
+    "@tsed/redux-utils": "1.13.3",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -26,8 +29,8 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "1.13.0",
-    "@tsed/tailwind-formio": "1.13.0"
+    "@tsed/tailwind": "1.13.3",
+    "@tsed/tailwind-formio": "1.13.3"
   },
   "repository": "https://github.com/TypedProject/tsed-formio",
   "bugs": {

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

@@ -1966,6 +1966,29 @@
       "id": "em22wkd",
       "defaultValue": null
     },
+    {
+      "label": "Edit Grid",
+      "tableView": false,
+      "rowDrafts": false,
+      "key": "editGrid",
+      "type": "editgrid",
+      "displayAsTable": false,
+      "input": true,
+      "components": [
+        {
+          "label": "Currency",
+          "mask": false,
+          "spellcheck": true,
+          "tableView": true,
+          "currency": "USD",
+          "inputFormat": "plain",
+          "key": "currency",
+          "type": "currency",
+          "input": true,
+          "delimiter": true
+        }
+      ]
+    },
     {
       "type": "button",
       "label": "Submit",

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

@@ -0,0 +1,57 @@
+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();
+  const form = {
+    type: "form",
+    display: "form",
+    tags: [],
+    components: [
+      {
+        label: "First name",
+        placeholder: "Fill first name",
+        widget: {
+          type: "input"
+        },
+        errorLabel: "",
+        key: "firstName",
+        inputType: "text",
+        type: "textfield",
+        id: "eqb1o4r",
+        defaultValue: ""
+      },
+      {
+        label: "Submit form",
+        showValidations: false,
+        tableView: false,
+        key: "submit",
+        type: "button",
+        input: true
+      }
+    ]
+  };
+
+  render(<Form {...props} form={form} onSubmit={onSubmit} />);
+
+  return { onSubmit };
+}
+
+describe("Form", () => {
+  it("should render the Form", async () => {
+    await createFixture({
+      data: [],
+      model: "MyForm",
+      groups: ["creation"],
+      params: {
+        env: "prod"
+      },
+      isActive: false
+    });
+
+    expect(screen.getByTestId("formioContainer")).toBeInTheDocument();
+    expect(screen.getByText("First name")).toBeInTheDocument();
+  });
+});

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);
@@ -14,10 +15,10 @@ export interface FormProps<Data = any> extends UseFormHookProps<Data> {
   className?: string;
 }
 
-export function Form(props: Partial<FormProps>) {
+export function Form<Data = any>(props: Partial<FormProps<Data>>) {
   const { element } = useForm(props);
 
-  return <div data-testid={"formioContainer" + (props.name || "")} ref={element} className={props.className} />;
+  return <div data-testid={`formioContainer${props.name || ""}`} ref={element} className={props.className} />;
 }
 
 Form.propTypes = {