@tsed/react-formio 2.3.2 → 3.0.0-alpha.1

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

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

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

@@ -4,7 +4,7 @@ import { render } from "@testing-library/react";
 import { Form } from "./form.component";
 
 async function createFixture(props: any = {}) {
-  const onSubmit = jest.fn();
+  const onSubmit = vi.fn();
   const form = {
     type: "form",
     display: "form",

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

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

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

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
-import { Submission } from "../../interfaces";
 import form from "../__fixtures__/form.fixture.json";
 import { Form } from "./form.component";
 
@@ -123,7 +122,7 @@ export const Sandbox = {
 
 export const TriggerError = {
   render: (args: any) => {
-    const onAsyncSubmit = (submission: Submission) => {
+    const onAsyncSubmit = () => {
       return new Promise((resolve, reject) => {
         setTimeout(() => {
           reject(new Error("server error"));

package/src/components/form-access/formAccess.component.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
+import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from "react";
 
 import type { FormOptions, FormSchema, Submission } from "../../interfaces";
 import { Card } from "../card/card.component";
@@ -23,7 +23,6 @@ export interface FormAccessProps {
 }
 
 function useFormAccess({ form: formDefinition, roles, onSubmit, options }: FormAccessProps) {
-  // eslint-disable-next-line no-undef
   const form = useMemo(() => getFormAccess(roles), [roles]);
 
   const [submissions, setSubmissions] = useState(() => dataAccessToSubmissions(formDefinition, form));

package/src/components/form-action/formAction.component.tsx

@@ -1,5 +1,5 @@
 import FormioUtils from "formiojs/utils";
-import React, { PropsWithChildren, ReactElement } from "react";
+import { PropsWithChildren, ReactElement } from "react";
 
 import { ActionDefaultsSchema, ActionSchema, FormOptions, Submission } from "../../interfaces";
 import { Form } from "../form/form.component";
@@ -11,6 +11,7 @@ function mapData(options: any, defaults: ActionDefaultsSchema): any {
   };
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function mapSettingsForm({ action, ...settingsForm }: any): any {
   FormioUtils.eachComponent(settingsForm.components, (component: any) => {
     const resourceExclude = "";

package/src/components/form-action/formAction.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { FormAction } from "./formAction.component";
 
 export default {

package/src/components/form-builder/formBuilder.component.tsx

@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { ComponentSchema } from "formiojs";
 import AllComponents from "formiojs/components";
 import Components from "formiojs/components/Components";
@@ -7,7 +5,7 @@ import FormioFormBuilder from "formiojs/FormBuilder";
 import cloneDeep from "lodash/cloneDeep";
 import noop from "lodash/noop";
 import PropTypes from "prop-types";
-import React from "react";
+import { Component } from "react";
 
 import { callLast } from "../../utils/callLast";
 
@@ -73,7 +71,7 @@ export interface FormBuilderProps {
   onPasteComponent?: Function;
 }
 
-export class FormBuilder extends React.Component<FormBuilderProps, any> {
+export class FormBuilder extends Component<FormBuilderProps, any> {
   static defaultProps = {
     options: {},
     onChange: noop,
@@ -180,6 +178,8 @@ export class FormBuilder extends React.Component<FormBuilderProps, any> {
     });
   }
 
+  /* eslint-disable jsx-a11y/no-static-element-interactions */
+  /* eslint-disable jsx-a11y/click-events-have-key-events */
   render() {
     return (
       <div

package/src/components/form-builder/formBuilder.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { FormBuilder } from "../../index";
 
 export default {

package/src/components/form-control/formControl.component.spec.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 
 import { iconClass } from "../../utils/iconClass";
 import { Sandbox, WithDescription, WithPrefix, WithSuffix } from "./formControl.stories";

package/src/components/form-control/formControl.component.tsx

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React, { HTMLAttributes } from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 
 export interface FormControlProps<Data = any> {
   name: string;
@@ -8,9 +8,9 @@ export interface FormControlProps<Data = any> {
   label?: string;
   className?: string;
   onChange?: (name: string, value: any) => void;
-  description?: string | React.ComponentType | any;
-  prefix?: JSX.Element | React.ComponentType | any;
-  suffix?: JSX.Element | React.ComponentType | any;
+  description?: string | ReactNode;
+  prefix?: ReactNode | string;
+  suffix?: ReactNode | string;
   shadow?: boolean;
 }
 
@@ -23,7 +23,7 @@ export function FormControl({
   description,
   label,
   className
-}: React.PropsWithChildren<FormControlProps>) {
+}: PropsWithChildren<FormControlProps>) {
   return (
     <div data-testid={name && `form-group-${name}`} id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
       {label && (

package/src/components/form-control/formControl.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { iconClass } from "../../utils/iconClass";
 import { FormControl } from "./formControl.component";
 

package/src/components/form-edit/formCtas.component.tsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 
 import { useTooltip } from "../../hooks/useTooltip";
 import { FormOptions } from "../../interfaces";

package/src/components/form-edit/formEdit.component.tsx

@@ -1,5 +1,4 @@
 import PropTypes from "prop-types";
-import React from "react";
 
 import { FormOptions } from "../../interfaces/FormOptions";
 import { FormBuilder } from "../form-builder/formBuilder.component";

package/src/components/form-edit/formEdit.reducer.ts

@@ -71,7 +71,6 @@ export const reducer = (state: FormEditState, { type, value }: any): FormEditSta
       return update(cloneDeep(state.original));
 
     case "formChange":
-      // eslint-disable-next-line no-case-declarations
       const newValue = { ...state.current, ...value };
 
       if (hasChanged(state.current, newValue)) {

package/src/components/form-edit/formEdit.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { FormEdit } from "./formEdit.component";
 import { defaultDisplayChoices } from "./formParameters.component";
 

package/src/components/form-edit/formParameters.component.tsx

@@ -1,5 +1,5 @@
 import PropTypes from "prop-types";
-import React, { ReactElement } from "react";
+import { ReactElement } from "react";
 
 import { FormSchema } from "../../interfaces/FormSchema";
 import { InputTags } from "../input-tags/inputTags.component";

package/src/components/form-settings/formSettings.component.spec.tsx

@@ -1,12 +1,11 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 
 import { FormSettings } from "./formSettings.component";
 import { Sandbox } from "./formSettings.stories";
 
 describe("FormSettings", () => {
-  it("should render form settings", async () => {
-    const onSubmit = jest.fn();
+  it("should render form settings", () => {
+    const onSubmit = vi.fn();
 
     // @ts-ignore
     Sandbox.args.form.action = "https://test";
@@ -23,7 +22,7 @@ describe("FormSettings", () => {
 
     const btn = screen.getByTestId("submit");
 
-    await fireEvent.click(btn);
+    fireEvent.click(btn);
 
     expect(btn).toHaveTextContent("Save settings");
     expect(onSubmit).toHaveBeenCalledWith({
@@ -47,7 +46,7 @@ describe("FormSettings", () => {
       type: "form"
     });
   });
-  it("should render form settings with i18n options", async () => {
+  it("should render form settings with i18n options", () => {
     render(
       <FormSettings
         {...Sandbox.args}
@@ -59,7 +58,7 @@ describe("FormSettings", () => {
 
     const btn = screen.getByTestId("submit");
 
-    await fireEvent.click(btn);
+    fireEvent.click(btn);
 
     expect(btn).toHaveTextContent("Save settings i18N");
   });

package/src/components/form-settings/formSettings.component.tsx

@@ -1,6 +1,6 @@
 import isEqual from "lodash/isEqual";
 import noop from "lodash/noop";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { FormOptions, FormSchema } from "../../interfaces";
 import { Form } from "../form/form.component";

package/src/components/form-settings/formSettings.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { FormSettings } from "./formSettings.component";
 
 export default {

package/src/components/forms-table/components/formCell.component.tsx

@@ -1,6 +1,5 @@
 import classnames from "classnames";
 import moment from "moment";
-import React from "react";
 import { CellProps } from "react-table";
 
 import { FormSchema } from "../../../interfaces";

package/src/components/forms-table/formsTable.component.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { FormSchema } from "../../interfaces";
 import { DefaultColumnFilter } from "../table/filters/defaultColumnFilter.component";
 import { SelectColumnFilter } from "../table/filters/selectColumnFilter.component";

package/src/components/forms-table/formsTable.stories.tsx

@@ -1,5 +1,4 @@
 import tailwind from "@tsed/tailwind-formio";
-import React from "react";
 
 import { FormsTable } from "./formsTable.component";
 

package/src/components/index.ts

@@ -19,7 +19,6 @@ export * from "./loader/loader.component";
 export * from "./modal/modal.component";
 export * from "./modal/removeModal.component";
 export * from "./pagination/pagination.component";
-export * from "./react-component/reactComponent.component";
 export * from "./select/select.component";
 export * from "./submissions-table/submissionsTable.component";
 export * from "./table";

package/src/components/input-tags/inputTags.component.tsx

@@ -1,7 +1,7 @@
 import Choices from "@formio/choices.js";
 import uniq from "lodash/uniq";
 import PropTypes from "prop-types";
-import React, { useEffect, useRef } from "react";
+import { useEffect, useRef } from "react";
 
 import { FormControl, FormControlProps } from "../form-control/formControl.component";
 

package/src/components/input-tags/inputTags.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { iconClass } from "../../utils/iconClass";
 import { InputTags } from "./inputTags.component";

package/src/components/input-text/inputText.component.spec.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 
 import { Sandbox } from "./inputText.stories";
 

package/src/components/input-text/inputText.component.tsx

@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import PropTypes from "prop-types";
-import React, { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { callLast } from "../../utils/callLast";
 import { getEventValue } from "../../utils/getEventValue";

package/src/components/input-text/inputText.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { iconClass } from "../../utils/iconClass";
 import { InputText } from "./inputText.component";

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

@@ -1,7 +1,7 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 
 import { Sandbox } from "./loader.stories";
+
 describe("Loader", () => {
   it("should render a component (when isActive = true)", () => {
     render(<Sandbox isActive={true} />);

package/src/components/loader/loader.component.tsx

@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import PropTypes from "prop-types";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { iconClass } from "../../utils/iconClass";
 

package/src/components/loader/loader.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Loader } from "./loader.component";
 
 export default {

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

@@ -1,14 +1,11 @@
-import "@testing-library/jest-dom/extend-expect";
-
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 
 import { WithFooter, WithTitle } from "./modal.stories";
 
 describe("Modal", () => {
   describe("WithTitle", () => {
     it("should display the modal when we click on the button", async () => {
-      const onClose = jest.fn();
+      const onClose = vi.fn();
 
       render(<WithTitle {...WithTitle.args} onClose={onClose} />);
 
@@ -60,7 +57,7 @@ describe("Modal", () => {
       expect(screen.queryByTestId("modalFooter")).toBeFalsy();
     });
     it("should call the onSubmit listener", async () => {
-      const onSubmit = jest.fn();
+      const onSubmit = vi.fn();
 
       render(<WithFooter {...WithFooter.args} onSubmit={onSubmit} />);
 

package/src/components/modal/modal.component.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import noop from "lodash";
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { PropsWithChildren, useEffect, useRef, useState } from "react";
 
 export function useModal() {
   const [show, setShowModal] = useState(false);

package/src/components/modal/modal.stories.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { Modal, ModalProps, useModal } from "./modal.component";
 import { RemoveModal, RemoveModalProps } from "./removeModal.component";
 

package/src/components/modal/removeModal.component.tsx

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React, { PropsWithChildren, useState } from "react";
+import { PropsWithChildren, useState } from "react";
 
 import { iconClass } from "../../utils/iconClass";
 import { InputText } from "../input-text/inputText.component";

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

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 
 import { Sandbox } from "./pagination.stories";
 
@@ -18,7 +17,7 @@ describe("Pagination", () => {
   });
 
   it("should call previousPage() callback", () => {
-    const previousPageSpy = jest.fn();
+    const previousPageSpy = vi.fn();
     render(<Sandbox previousPage={previousPageSpy} canPreviousPage={true} />);
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
@@ -29,7 +28,7 @@ describe("Pagination", () => {
   });
 
   it("should call nextPage() callback", () => {
-    const nextPageSpy = jest.fn();
+    const nextPageSpy = vi.fn();
     render(<Sandbox nextPage={nextPageSpy} canNextPage={true} />);
 
     fireEvent.click(screen.getByText(/Next/i));
@@ -38,7 +37,7 @@ describe("Pagination", () => {
   });
 
   it("should call gotoPage() callback when cliking on a button page", () => {
-    const gotoPageSpy = jest.fn();
+    const gotoPageSpy = vi.fn();
     let page: number;
 
     render(<Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />);
@@ -50,16 +49,14 @@ describe("Pagination", () => {
       if (btn.textContent !== "...") {
         page = +btn.textContent!;
         fireEvent.click(btn);
-        // eslint-disable-next-line jest/no-conditional-expect
         expect(gotoPageSpy).toHaveBeenCalled();
-        // eslint-disable-next-line jest/no-conditional-expect
         expect(gotoPageSpy).toHaveBeenCalledWith(page - 1);
       }
     });
   });
 
   it("should have Previous button disabled and not clickable", () => {
-    const previousPageSpy = jest.fn();
+    const previousPageSpy = vi.fn();
     render(<Sandbox canPreviousPage={false} previousPage={previousPageSpy} {...Sandbox.args} />);
 
     const previousButton = screen.getByText("Previous");
@@ -70,7 +67,7 @@ describe("Pagination", () => {
   });
 
   it("should have Previous button NOT disabled and clickable", () => {
-    const previousPageSpy = jest.fn();
+    const previousPageSpy = vi.fn();
     render(<Sandbox {...Sandbox.args} canPreviousPage={true} previousPage={previousPageSpy} />);
 
     const previousButton = screen.getByText("Previous");
@@ -81,7 +78,7 @@ describe("Pagination", () => {
   });
 
   it("should have Next button disabled and not clickable", () => {
-    const nextPageSpy = jest.fn();
+    const nextPageSpy = vi.fn();
     render(<Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />);
 
     const nextButton = screen.getByText("Next");
@@ -91,7 +88,7 @@ describe("Pagination", () => {
   });
 
   it("should have Next button NOT disabled and clickable", () => {
-    const nextPageSpy = jest.fn();
+    const nextPageSpy = vi.fn();
     render(<Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />);
     const nextButton = screen.getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");

package/src/components/pagination/pagination.component.tsx

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { Select } from "../select/select.component";
 import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table/utils/getPageNumbers";

package/src/components/pagination/pagination.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { Pagination } from "./pagination.component";
 

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

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 
 import { Choicesjs, Sandbox } from "./select.stories";
 
@@ -52,7 +51,7 @@ describe("Select", () => {
         { label: "test2", value: "value2" }
       ];
       const placeHolderTest = "Placeholder test";
-      const onChange = jest.fn();
+      const onChange = vi.fn();
 
       render(<Sandbox {...Sandbox.args} placeholder={placeHolderTest} choices={choices} name={"test-sandbox"} onChange={onChange} />);
 

package/src/components/select/select.component.tsx

@@ -1,6 +1,6 @@
 import Choices from "@formio/choices.js";
 import classnames from "classnames";
-import React, { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
+import { HTMLAttributes, ReactElement, useEffect, useRef } from "react";
 
 import { getEventValue } from "../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/formControl.component";
@@ -60,7 +60,7 @@ export function Select<Data = any>({
 
   return (
     <FormControl name={name} label={label} required={required} description={description} prefix={prefix} suffix={suffix} shadow={false}>
-      {/* eslint-disable-next-line jsx-a11y/no-onchange */}
+      {}
       <select
         ref={ref}
         data-testid={`select_${name}`}

package/src/components/select/select.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { iconClass } from "../../utils/iconClass";
 import { Select } from "./select.component";

package/src/components/submissions-table/submissionsTable.component.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { FormSchema, Submission } from "../../interfaces";
 import { TableProps } from "../table/hooks/useCustomTable.hook";
 import { Table } from "../table/table.component";

package/src/components/submissions-table/submissionsTable.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { useState } from "react";
 
 import { mapPagination } from "../../utils/mapPagination";
 import formSchema from "../__fixtures__/form-schema.json";
@@ -49,9 +49,9 @@ export default {
 };
 
 export const Sandbox = (args: any) => {
-  const [skip, setSkip] = React.useState(0);
-  const [limit, setLimit] = React.useState(10);
-  const [serverCount] = React.useState(87);
+  const [skip, setSkip] = useState(0);
+  const [limit, setLimit] = useState(10);
+  const [serverCount] = useState(87);
 
   const onChange = (obj: any) => {
     setLimit(obj.pageSize);

package/src/components/table/components/defaultArrowSort.component.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { iconClass } from "../../../utils/iconClass";
 
 export function DefaultArrowSort({ column }: any) {

package/src/components/table/components/defaultCell.component.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export function DefaultCell({ value, render = (f: any) => f }: any): JSX.Element {
   if (value === undefined) {
     return <span></span>;

package/src/components/table/components/defaultCellHeader.component.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { HeaderGroup } from "react-table";
 
 export interface DefaultCellHeaderProps<Data extends object = any> extends Record<string, unknown> {

package/src/components/table/components/defaultCellOperations.component.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { DefaultOperationButton, OperationButtonProps } from "./defaultOperationButton.component";
 
 export interface DefaultCellOperationsProps {

package/src/components/table/components/defaultCells.component.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Row } from "react-table";
 
 import type { ExtendedCell } from "../hooks/useCustomTable.hook";

package/src/components/table/components/defaultOperationButton.component.tsx

@@ -15,6 +15,7 @@ export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElem
   title?: string;
   i18n?: (i18n: string) => string;
   ctx?: any;
+  permissionsResolver?: (ctx: any) => boolean;
 }
 
 export function DefaultOperationButton(props: OperationButtonProps) {
@@ -28,8 +29,12 @@ export function DefaultOperationButton(props: OperationButtonProps) {
     icon = "",
     title = "",
     i18n = (f: string) => f,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     data,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     ctx,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    permissionsResolver,
     ...otherProps
   } = props;