@tsed/react-formio 1.13.0 → 1.13.3

package/src/components/table/filters/selectColumnFilter.component.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { FilterProps } from "react-table";
+
 import { Select } from "../../select/select.component";
 
 export function SelectColumnFilter<D extends Record<string, unknown> = {}>({ column }: FilterProps<D>) {

package/src/components/table/index.ts

@@ -1,4 +1,3 @@
-export * from "./utils/useOperations.hook";
 export * from "./components/defaultArrowSort.component";
 export * from "./components/defaultCell.component";
 export * from "./components/defaultCellHeader.component";
@@ -9,3 +8,4 @@ export * from "./filters/defaultColumnFilter.component";
 export * from "./filters/selectColumnFilter.component";
 export * from "./filters/sliderColumnFilter.component";
 export * from "./table.component";
+export * from "./utils/useOperations.hook";

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

@@ -2,6 +2,7 @@ import classnames from "classnames";
 import noop from "lodash/noop";
 import React, { PropsWithChildren } from "react";
 import { CellProps, FilterProps, Renderer, TableOptions, useFilters, useGroupBy, usePagination, useSortBy, useTable } from "react-table";
+
 import { OnClickOperation, Operation, QueryOptions } from "../../interfaces";
 import { Pagination as DefaultPagination } from "../pagination/pagination.component";
 import { DefaultArrowSort } from "./components/defaultArrowSort.component";
@@ -189,12 +190,12 @@ export function Table<Data extends object = any>(props: PropsWithChildren<TableP
       >
         <thead>
           {tableInstance.headerGroups.map((headerGroup, i) => (
-            <tr key={`tableInstance.headerGroups${i}`} {...headerGroup.getHeaderGroupProps()}>
+            <tr {...headerGroup.getHeaderGroupProps()} key={`tableInstance.headerGroups${i}`}>
               {headerGroup.headers.map((column) => (
                 <th
-                  key={`tableInstance.headers.column.${column.id}`}
                   /* className='text-left py-2 align-top' */
                   {...column.getHeaderProps()}
+                  key={`tableInstance.headers.column.${column.id}`}
                 >
                   <CellHeader column={column} />
                 </th>
@@ -207,14 +208,14 @@ export function Table<Data extends object = any>(props: PropsWithChildren<TableP
             {tableInstance.page.map((row) => {
               tableInstance.prepareRow(row);
               return (
-                <tr key={`tableInstance.page.${row.id}`} onClick={() => _onClick(row.original, "row")} {...row.getRowProps()}>
+                <tr onClick={() => _onClick(row.original, "row")} {...row.getRowProps()} key={`tableInstance.page.${row.id}`}>
                   {row.cells.map((cell, i) => {
                     const { hidden, colspan } = cell.column as any;
                     if (hidden) {
                       return null;
                     }
                     return (
-                      <td key={`tableInstance.page.cells.${cell.value || "value"}.${i}`} colSpan={colspan} {...cell.getCellProps()}>
+                      <td colSpan={colspan} {...cell.getCellProps()} key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}>
                         {cell.render("Cell")}
                       </td>
                     );

package/src/components/table/table.stories.tsx

@@ -1,9 +1,10 @@
 import React from "react";
+
+import { mapPagination } from "../../utils/mapPagination";
 import formSchema from "../__fixtures__/form-schema.json";
 import formSubmissions from "../__fixtures__/form-submissions.json";
 import { Table } from "./table.component";
 import { mapFormToColumns } from "./utils/mapFormToColumns";
-import { mapPagination } from "../../utils/mapPagination";
 
 export default {
   title: "ReactFormio/Table",

package/src/components/table/utils/mapFormToColumns.tsx

@@ -1,7 +1,8 @@
-import React from "react";
 import { Components, ExtendedComponentSchema } from "formiojs";
 import FormioUtils from "formiojs/utils";
+import React from "react";
 import { Column } from "react-table";
+
 import { FormSchema } from "../../../interfaces";
 import { DefaultCell } from "../components/defaultCell.component";
 import { SelectColumnFilter } from "../filters/selectColumnFilter.component";
@@ -11,7 +12,7 @@ export function mapFormToColumns(form: FormSchema): Column[] {
 
   FormioUtils.eachComponent(form.components, (component: ExtendedComponentSchema) => {
     if (component.tableView && component.key) {
-      const cmp: any = Components.create(component, null, null, true);
+      const cmp: any = Components.create(component, {}, null, true);
 
       const column: Column = {
         Header: component.label || component.title || component.key,

package/src/components/table/utils/useOperations.hook.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Hooks } from "react-table";
+
 import { Operation } from "../../../interfaces";
 import { DefaultCellOperations } from "../components/defaultCellOperations.component";
 

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

@@ -1,7 +1,8 @@
+import { fireEvent, render, screen } from "@testing-library/react";
 import * as React from "react";
-import {fireEvent, render, screen} from "@testing-library/react";
-import {Sandbox} from "./tabs.component.stories";
-import {Tabs} from "./tabs.component";
+
+import { Tabs } from "./tabs.component";
+import { Sandbox } from "./tabs.component.stories";
 
 describe("tabs", () => {
   it("should display the tabs component and children", () => {
@@ -20,7 +21,7 @@ describe("tabs", () => {
       }
     ];
 
-    render(<Sandbox {...Sandbox.args} items={items}/>);
+    render(<Sandbox {...Sandbox.args} items={items} />);
 
     const tabsComponent = screen.getByTestId("tabs-comp");
 
@@ -67,7 +68,7 @@ describe("tabs", () => {
     ];
     const onClick = jest.fn();
 
-    render(<Tabs items={items} onClick={onClick}/>);
+    render(<Tabs items={items} onClick={onClick} />);
 
     const buttonsTab = screen.getAllByTitle("button-tab");
     const chevronLeftButtonTab = buttonsTab[0];

package/src/components/tabs/tabs.component.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+
 import { Tabs } from "./tabs.component";
 
 const useTabs = (args: any) => {

package/src/components/tabs/tabs.component.tsx

@@ -1,12 +1,16 @@
 import classnames from "classnames";
 import React, { PropsWithChildren } from "react";
+
 import { iconClass } from "../../utils/iconClass";
 
 export function ButtonTab({ icon, back, onClick, isActive, reverse, children, className, after }: PropsWithChildren<any>) {
   return (
-    <div title={'button-wrapper'} className={classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)}>
+    <div
+      title={"button-wrapper"}
+      className={classnames("tw-tabs__button-wrapper", isActive ? "-active" : "", back ? "-back" : "", className)}
+    >
       <button
-        title={'button-tab'}
+        title={"button-tab"}
         className={classnames("tw-tabs__button", reverse ? "-reverse" : "", isActive ? "-active" : "", back ? "-back" : "")}
         onClick={onClick}
       >
@@ -51,7 +55,7 @@ export function Tabs({
   ...additionalProps
 }: PropsWithChildren<TabsProps>) {
   return (
-    <div data-testid={'tabs-comp'} className={`tw-tabs ${className}`} style={style}>
+    <div data-testid={"tabs-comp"} className={`tw-tabs ${className}`} style={style}>
       <div>
         <nav className='tw-tabs__header'>
           <div className='tw-tabs__header-wrapper'>
@@ -71,7 +75,7 @@ export function Tabs({
                     {...additionalProps}
                     {...item}
                   >
-                    {i18n(item.label)}
+                    {i18n(item.label || "")}
                   </Button>
                 );
               })}
@@ -80,7 +84,9 @@ export function Tabs({
         </nav>
         {HeaderChildren && <HeaderChildren {...additionalProps} current={current} />}
       </div>
-      <div title={"tab-body"} className={"tw-tabs__body"}>{children}</div>
+      <div title={"tab-body"} className={"tw-tabs__body"}>
+        {children}
+      </div>
     </div>
   );
 }

package/src/hooks/useTooltip.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef } from "react";
 import Tooltip, { Options } from "tooltip.js";
 
 export function useTooltip(options: Options) {
-  const ref = useRef();
+  const ref = useRef<any>();
 
   useEffect(() => {
     ref.current && new Tooltip(ref.current as any, options);

package/src/index.ts

@@ -11,11 +11,10 @@ export {
   // editFormUtils,
 };
 
-export * from "./stores";
-export * from "./interfaces";
 export * from "./components";
 export * from "./hooks/useTooltip";
+export * from "./interfaces";
+export * from "./stores";
 export * from "./utils/iconClass";
 export * from "./utils/url";
-
-export { Components, Formio, Utils, Templates } from "formiojs";
+export { Components, Formio, Templates, Utils } from "formiojs";

package/src/interfaces/Operation.ts

@@ -1,4 +1,5 @@
 import React from "react";
+
 import { OperationButtonProps } from "../components/table/components/defaultOperationButton.component";
 
 export type PermissionsResolver<Data = any> = (data: Data, ctx: any) => void;

package/src/stores/action/action.actions.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { getActionInfo } from "../action-info";
 import {
   clearActionError,

package/src/stores/action/action.actions.ts

@@ -2,6 +2,7 @@ import { createAction } from "@tsed/redux-utils";
 import { Formio } from "formiojs";
 import get from "lodash/get";
 import noop from "lodash/noop";
+
 import { getActionUrl } from "../../utils/url";
 import { getActionInfo } from "../action-info";
 import { ACTION } from "./action.constant";

package/src/stores/action/action.reducers.ts

@@ -1,6 +1,6 @@
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
-import { ActionSchema } from "../../interfaces";
 
+import { ActionSchema } from "../../interfaces";
 import { clearActionError, failAction, receiveAction, requestAction, resetAction, sendAction } from "./action.actions";
 import { ACTION } from "./action.constant";
 

package/src/stores/action-info/action-info.actions.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { getActionInfo, receiveActionInfo, requestActionInfo } from "./action-info.actions";
 
 jest.mock("formiojs/Formio");

package/src/stores/action-info/action-info.actions.ts

@@ -1,6 +1,7 @@
 import { createAction } from "@tsed/redux-utils";
-import noop from "lodash/noop";
 import { Formio } from "formiojs";
+import noop from "lodash/noop";
+
 import { getFormUrl } from "../../utils/url";
 import { ACTION_INFO } from "./action-info.constant";
 

package/src/stores/action-info/action-info.reducers.ts

@@ -1,4 +1,5 @@
-import { InitialStateCreator, createReducer } from "@tsed/redux-utils";
+import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
+
 import { ActionSchema } from "../../interfaces";
 import { failActionInfo, receiveActionInfo, requestActionInfo, resetActionInfo } from "./action-info.actions";
 import { ACTION_INFO } from "./action-info.constant";

package/src/stores/action-info/action-info.selectors.ts

@@ -3,4 +3,5 @@ import { selectRoot } from "../root";
 import { ACTION_INFO } from "./action-info.constant";
 import { ActionInfoState } from "./action-info.reducers";
 
-export const selectActionInfo = (state: Record<string, any>): Partial<ActionSchema> => selectRoot<ActionInfoState>(ACTION_INFO, state).data;
+export const selectActionInfo = (state: Record<string, any>): Partial<ActionSchema> =>
+  selectRoot<ActionInfoState>(ACTION_INFO, state).data!;

package/src/stores/actions/actions.actions.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { getActions, receiveActions, requestActions, resetActions } from "./actions.actions";
 
 jest.mock("formiojs");

package/src/stores/actions/actions.actions.ts

@@ -1,6 +1,7 @@
 import { createAction } from "@tsed/redux-utils";
 import { Formio } from "formiojs";
 import noop from "lodash/noop";
+
 import { getFormUrl } from "../../utils/url";
 import { ACTIONS } from "./actions.constant";
 

package/src/stores/actions/actions.reducers.ts

@@ -1,4 +1,5 @@
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
+
 import { ActionInfoSchema, ActionSchema } from "../../interfaces";
 import { failActions, receiveActions, requestActions, resetActions } from "./actions.actions";
 import { ACTIONS } from "./actions.constant";

package/src/stores/actions/index.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/src/stores/auth/auth.actions.ts

@@ -1,4 +1,5 @@
 import { createAction } from "@tsed/redux-utils";
+
 import { FormSchema, RoleSchema, Submission } from "../../interfaces";
 
 export const requestUser = createAction();

package/src/stores/auth/auth.reducers.ts

@@ -1,4 +1,5 @@
 import { createReducer } from "@tsed/redux-utils";
+
 import { FormSchema, Submission } from "../../interfaces";
 import { RoleSchema } from "../../interfaces/RoleSchema";
 import {

package/src/stores/auth/auth.selectors.ts

@@ -1,4 +1,5 @@
 import get from "lodash/get";
+
 import { RoleSchema, Submission } from "../../interfaces";
 import { selectRoot } from "../root";
 import { AUTH } from "./auth.constant";

package/src/stores/auth/auth.utils.tsx

@@ -1,4 +1,5 @@
 import get from "lodash/get";
+
 import { FormSchema } from "../../interfaces/FormSchema";
 import { AuthState } from "./auth.reducers";
 
@@ -7,7 +8,7 @@ export function hasRole(auth: AuthState, role: string): boolean {
 }
 
 export function hasRoles(auth: AuthState, roles: string[]): boolean {
-  roles = [].concat(roles);
+  roles = ([] as string[]).concat(roles);
 
   return !!roles.find((role) => hasRole(auth, role));
 }
@@ -29,7 +30,7 @@ export function checkRoleFormAccess(auth: AuthState, form?: Partial<FormSchema>,
       return true;
     }
 
-    return !!(roles.includes("owner") && get(form, "owner") === get(auth, "user._id"));
+    return roles.includes("owner") && get(form, "owner") === get(auth, "user._id");
   }
 
   return true;

package/src/stores/auth/getAccess.action.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { formAccessUser, submissionAccessUser, userForms, userRoles } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 import { getAccess } from "./getAccess.action";

package/src/stores/auth/getAccess.action.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { RoleSchema } from "../../interfaces";
 import { FormSchema } from "../../interfaces/FormSchema";
 import { formAccessUser, submissionAccessUser, userForms, userRoles } from "./auth.actions";
@@ -8,7 +9,7 @@ function transformSubmissionAccess(forms: Record<string, FormSchema>) {
   return Object.values(forms).reduce(
     (result, form) => ({
       ...result,
-      [form.name]: form.submissionAccess.reduce(
+      [form.name as string]: form.submissionAccess.reduce(
         (formSubmissionAccess: any, access: any) => ({
           ...formSubmissionAccess,
           [access.type]: access.roles
@@ -24,7 +25,7 @@ function transformFormAccess(forms: Record<string, FormSchema>) {
   return Object.values(forms).reduce(
     (result, form) => ({
       ...result,
-      [form.name]: form.access.reduce(
+      [form.name as string]: form.access.reduce(
         (formAccess: any, access: any) => ({
           ...formAccess,
           [access.type]: access.roles

package/src/stores/auth/getProjectAccess.action.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { projectAccessUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 

package/src/stores/auth/index.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/src/stores/auth/initAuth.action.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { requestUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 import { getAccess } from "./getAccess.action";

package/src/stores/auth/initAuth.action.ts

@@ -1,5 +1,6 @@
 import { Formio } from "formiojs";
 import noop from "lodash/noop";
+
 import { failUser, requestUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 import { getAccess } from "./getAccess.action";

package/src/stores/auth/logout.action.spec.ts

@@ -1,9 +1,11 @@
 import { Formio } from "formiojs";
+
 import { logoutUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 import { logout } from "./logout.action";
 
 jest.mock("./auth.actions");
+jest.mock("formiojs");
 
 describe("logout()", () => {
   beforeEach(() => {

package/src/stores/auth/logout.action.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { logoutUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 

package/src/stores/auth/setUser.action.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { receiveUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 import { setUser } from "./setUser.action";

package/src/stores/auth/setUser.action.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { receiveUser } from "./auth.actions";
 import { AUTH } from "./auth.constant";
 

package/src/stores/form/form.actions.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { deleteForm, failForm, getForm, receiveForm, requestForm, resetForm, saveForm, sendForm } from "./form.actions";
 
 jest.mock("formiojs");

package/src/stores/form/form.actions.ts

@@ -1,6 +1,7 @@
 import { createAction } from "@tsed/redux-utils";
 import { Formio } from "formiojs";
 import noop from "lodash/noop";
+
 import { FormSchema } from "../../interfaces";
 import { getFormUrl } from "../../utils/url";
 import { getActions } from "../actions";

package/src/stores/form/form.reducers.ts

@@ -1,4 +1,5 @@
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
+
 import { FormSchema } from "../../interfaces";
 import { clearFormError, failForm, receiveForm, requestForm, resetForm, sendForm } from "./form.actions";
 

package/src/stores/form/form.selectors.ts

@@ -2,4 +2,4 @@ import { FormSchema } from "../../interfaces";
 import { selectRoot } from "../root";
 import { FormState } from "./form.reducers";
 
-export const selectForm = (name: string, state: any): Partial<FormSchema> => selectRoot<FormState>(name, state).data;
+export const selectForm = (name: string, state: any): Partial<FormSchema> => selectRoot<FormState>(name, state).data!;

package/src/stores/forms/forms.actions.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { mapRequestParams } from "../../utils/mapRequestParams";
 import { failForms, getForms, receiveForms, requestForms } from "./forms.actions";
 

package/src/stores/forms/forms.actions.ts

@@ -1,6 +1,7 @@
 import { createAction } from "@tsed/redux-utils";
 import { Formio } from "formiojs";
 import noop from "lodash/noop";
+
 import { FormSchema } from "../../interfaces";
 import type { RequestParamsOptions } from "../../utils/mapRequestParams";
 import { mapRequestParams } from "../../utils/mapRequestParams";

package/src/stores/forms/forms.reducers.ts

@@ -1,4 +1,5 @@
 import { createReducer } from "@tsed/redux-utils";
+
 import { FormSchema } from "../../interfaces";
 import { failForms, receiveForms, requestForms, resetForms } from "./forms.actions";
 

package/src/stores/index.ts

@@ -1,4 +1,5 @@
 import { combine } from "@tsed/redux-utils";
+
 import { actionReducer } from "./action";
 import { actionInfoReducer } from "./action-info";
 import { actionsReducer } from "./actions";
@@ -8,15 +9,15 @@ import { formsReducer } from "./forms";
 import { submissionReducer } from "./submission";
 import { submissionsReducer } from "./submissions";
 
-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 const defaultFormioReducer = combine(
   authReducer,

package/src/stores/root/root.selectors.ts

@@ -2,7 +2,7 @@ import get from "lodash/get";
 
 export function selectRoot<State = Record<string, any>>(name: string): (state: Record<string, any>) => State;
 export function selectRoot<State = Record<string, any>>(name: string, state: Record<string, any>): State;
-export function selectRoot<State = Record<string, any>>(name: string, state?: Record<string, any>): any {
+export function selectRoot<State = Record<string, any>>(name: string, state?: Record<string, any>): State & any {
   if (state) {
     return state[name];
   }
@@ -10,9 +10,9 @@ export function selectRoot<State = Record<string, any>>(name: string, state?: Re
   return (state: Record<string, any>) => selectRoot(name, state);
 }
 
-export const selectError = (name: string, state: Record<string, any>): null | Error => get(selectRoot(name, state), "error");
+export const selectError = (name: string, state: Record<string, any>): null | Error => get(selectRoot(name, state)!, "error");
 
-export const selectIsActive = (name: string, state: Record<string, any>): boolean => get(selectRoot(name, state), "isActive");
+export const selectIsActive = (name: string, state: Record<string, any>): boolean => get(selectRoot(name, state)!, "isActive");
 
 export function oneOfIsActive(...names: string[]) {
   return (state: any) => {

package/src/stores/submission/submission.actions.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import {
   clearSubmissionError,
   deleteSubmission,

package/src/stores/submission/submission.actions.ts

@@ -1,6 +1,7 @@
 import { createAction } from "@tsed/redux-utils";
 import { Formio } from "formiojs";
 import noop from "lodash/noop";
+
 import { Submission } from "../../interfaces";
 import { getSubmissionUrl } from "../../utils/url";
 

package/src/stores/submission/submission.reducers.ts

@@ -1,4 +1,5 @@
 import { createReducer, InitialStateCreator } from "@tsed/redux-utils";
+
 import { Submission } from "../../interfaces";
 import {
   clearSubmissionError,

package/src/stores/submissions/submissions.actions.spec.ts

@@ -1,4 +1,5 @@
 import { Formio } from "formiojs";
+
 import { mapRequestParams } from "../../utils/mapRequestParams";
 import { failSubmissions, getSubmissions, receiveSubmissions, requestSubmissions } from "./submissions.actions";
 

package/src/stores/submissions/submissions.actions.ts

@@ -1,6 +1,7 @@
 import { createAction } from "@tsed/redux-utils";
 import { Formio } from "formiojs";
 import noop from "lodash/noop";
+
 import { mapRequestParams } from "../../utils/mapRequestParams";
 import { getSubmissionUrl } from "../../utils/url";
 import { selectSubmissionsParameters } from "./submissions.selectors";

package/src/stores/submissions/submissions.reducers.ts

@@ -1,4 +1,5 @@
 import { createReducer } from "@tsed/redux-utils";
+
 import { Submission } from "../../interfaces/Submission";
 import { failSubmissions, receiveSubmissions, requestSubmissions, resetSubmissions } from "./submissions.actions";