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

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,15 +1,16 @@
 import classnames from "classnames";
-import PropTypes from "prop-types";
-import React from "react";
+import type { PropsWithChildren, ReactNode } from "react";
 
-export interface FormControlProps {
+export interface FormControlProps<Data = any> {
   name: string;
+  value?: Data;
   required?: boolean;
   label?: string;
   className?: string;
-  description?: string | React.ComponentType | any;
-  prefix?: JSX.Element | React.ComponentType | any;
-  suffix?: JSX.Element | React.ComponentType | any;
+  onChange?: (name: string, value: any) => void;
+  description?: string | ReactNode;
+  prefix?: ReactNode | string;
+  suffix?: ReactNode | string;
   shadow?: boolean;
 }
 
@@ -22,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 && (
@@ -55,11 +56,3 @@ export function FormControl({
     </div>
   );
 }
-
-FormControl.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  children: PropTypes.any,
-  required: PropTypes.bool,
-  description: PropTypes.any
-};

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,24 +1,20 @@
 import Choices from "@formio/choices.js";
 import classnames from "classnames";
-import PropTypes from "prop-types";
-import React, { 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";
 
-export interface SelectProps<T = any> extends FormControlProps {
-  value?: any;
+export interface SelectProps<Data = any> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
   size?: string;
-  onChange?: (name: string, value: any) => void;
   placeholder?: string;
-  choices: { label: string; value: T }[];
+  choices: { label: string; value: Data }[];
   layout?: "html5" | "choicesjs";
+  disabled?: boolean;
   multiple?: boolean;
-
-  [key: string]: any;
 }
 
-export function Select<T = any>({
+export function Select<Data = any>({
   name,
   label,
   size,
@@ -33,14 +29,14 @@ export function Select<T = any>({
   multiple,
   layout,
   ...props
-}: SelectProps<T>): ReactElement {
-  const ref = useRef<any>();
+}: SelectProps<Data>): ReactElement {
+  const ref = useRef<HTMLSelectElement>(null);
 
   useEffect(() => {
     let instance: any;
 
     if (layout === "choicesjs") {
-      instance = new Choices(ref.current, {
+      instance = new Choices(ref.current as unknown as HTMLInputElement, {
         removeItemButton: true,
         placeholderValue: placeholder
       });
@@ -64,11 +60,11 @@ export function Select<T = 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}
-        {...props}
         data-testid={`select_${name}`}
+        {...props}
         className={classnames("form-control", size && `form-control-${size}`)}
         name={name}
         id={name}
@@ -90,12 +86,3 @@ export function Select<T = any>({
     </FormControl>
   );
 }
-
-Select.propTypes = {
-  label: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  value: PropTypes.any,
-  required: PropTypes.bool,
-  onChange: PropTypes.func,
-  choices: PropTypes.array.isRequired
-};

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,19 +1,30 @@
-import React from "react";
+import { DefaultOperationButton, OperationButtonProps } from "./defaultOperationButton.component";
 
-import { DefaultOperationButton } from "./defaultOperationButton.component";
+export interface DefaultCellOperationsProps {
+  operations: (OperationButtonProps & {
+    OperationButton: typeof DefaultOperationButton;
+    permissionsResolver?(data: unknown, ctx: any): boolean;
+  })[];
+  row: any;
 
-export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: any) {
+  onClick: (data: any, action: string) => void;
+  ctx: any;
+  i18n: (i18n: string) => string;
+}
+
+export function DefaultCellOperations({ operations, row, onClick, ctx, i18n }: DefaultCellOperationsProps) {
   const data = row.original;
 
   return (
     <div className='btn-group'>
       {operations
-        .filter(({ permissionsResolver }: any) => !permissionsResolver || permissionsResolver(data, ctx))
-        .map(({ OperationButton = DefaultOperationButton, ...operation }: any) => {
+        .filter(({ permissionsResolver }) => !permissionsResolver || permissionsResolver(data, ctx))
+        .map(({ OperationButton = DefaultOperationButton, ...operation }, index: number) => {
           return (
             <OperationButton
               key={operation.action}
               {...operation}
+              data-testid={`operation-${index}-${operation.action}`}
               onClick={(action: string) => onClick(data, action)}
               data={data}
               i18n={i18n}

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

@@ -1,11 +1,10 @@
 import classnames from "classnames";
-import React from "react";
+import { HTMLAttributes } from "react";
 
 import { iconClass } from "../../../utils/iconClass";
 import { stopPropagationWrapper } from "../../../utils/stopPropagationWrapper";
 
-export interface OperationButtonProps {
-  className?: string;
+export interface OperationButtonProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick"> {
   buttonType?: string;
   buttonSize?: string;
   buttonOutline?: boolean;
@@ -15,6 +14,8 @@ export interface OperationButtonProps {
   icon?: string;
   title?: string;
   i18n?: (i18n: string) => string;
+  ctx?: any;
+  permissionsResolver?: (ctx: any) => boolean;
 }
 
 export function DefaultOperationButton(props: OperationButtonProps) {
@@ -27,11 +28,20 @@ export function DefaultOperationButton(props: OperationButtonProps) {
     action,
     icon = "",
     title = "",
-    i18n = (f: string) => f
+    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;
 
   return (
     <button
+      {...otherProps}
+      aria-label={"Operation button: " + (title || action)}
       className={classnames(className, ["btn", buttonOutline && "outline", buttonType].filter(Boolean).join("-"), `btn-${buttonSize}`)}
       onClick={stopPropagationWrapper(() => onClick(action))}
     >