@tsed/react-formio 1.13.1 → 1.13.2

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

@@ -1,8 +1,8 @@
 import PropTypes from "prop-types";
-import React, { ReactElement } from "react";
-import { useTooltip } from "../../hooks/useTooltip";
-import { FormOptions } from "../../interfaces";
-import { iconClass } from "../../utils/iconClass";
+import React, {ReactElement} from "react";
+import {useTooltip} from "../../hooks/useTooltip";
+import {FormOptions} from "../../interfaces";
+import {iconClass} from "../../utils/iconClass";
 
 export interface FormEditCTAsProps extends Record<string, unknown> {
   saveText?: string;
@@ -18,38 +18,38 @@ export interface FormEditCTAsProps extends Record<string, unknown> {
 }
 
 export function FormEditCTAs({
-  saveText = "Save",
-  disabled,
-  options = {},
-  onCopy,
-  hasUndo,
-  hasRedo,
-  onUndo,
-  onRedo,
-  onReset,
-  onSubmit
-}: FormEditCTAsProps): ReactElement {
-  const { i18n: t = (t: string): string => t } = options;
+                               saveText = "Save",
+                               disabled,
+                               options = {},
+                               onCopy,
+                               hasUndo,
+                               hasRedo,
+                               onUndo,
+                               onRedo,
+                               onReset,
+                               onSubmit
+                             }: FormEditCTAsProps): ReactElement {
+  const {i18n: t = (t: string): string => t} = options;
 
-  const copyTooltipRef = useTooltip({
+  const copyTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Copy")
   });
 
-  const undoTooltipRef = useTooltip({
+  const undoTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Undo last change")
   });
 
-  const redoTooltipRef = useTooltip({
+  const redoTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Redo last change")
   });
 
-  const resetTooltipRef = useTooltip({
+  const resetTooltipRef: any = useTooltip({
     trigger: "hover",
     placement: "top",
     title: t("Reset all changes")
@@ -61,31 +61,33 @@ export function FormEditCTAs({
         <button
           className={`btn btn-primary btn-save flex ${disabled ? "disabled" : ""}`}
           disabled={disabled}
-          onClick={() => !disabled && onSubmit()}
+          onClick={() => !disabled && onSubmit && onSubmit()}
         >
-          <i className={`mr-1 ${iconClass(options.iconset, "save")}`} />
+          <i className={`mr-1 ${iconClass(options.iconset, "save")}`}/>
           {saveText}
         </button>
 
         <div>
-          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo()} ref={undoTooltipRef}>
-            <i className={iconClass(options.iconset, "undo")} />
+          <button className={`btn btn-light btn-undo ${hasUndo ? "" : "disabled"}`} onClick={() => onUndo && onUndo()}
+                  ref={undoTooltipRef}>
+            <i className={iconClass(options.iconset, "undo")}/>
           </button>
 
-          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo()} ref={redoTooltipRef}>
-            <i className={iconClass(options.iconset, "redo")} />
+          <button className={`btn btn-light btn-redo ${hasRedo ? "" : "disabled"}`} onClick={() => onRedo && onRedo()}
+                  ref={redoTooltipRef}>
+            <i className={iconClass(options.iconset, "redo")}/>
           </button>
         </div>
 
         <div>
           {onCopy && (
-            <button className='btn btn-light' onClick={() => onCopy()} ref={copyTooltipRef}>
-              <i className={iconClass(options.iconset, "copy")} />
+            <button className="btn btn-light" onClick={() => onCopy()} ref={copyTooltipRef!}>
+              <i className={iconClass(options.iconset, "copy")}/>
             </button>
           )}
 
-          <button className={`btn btn-light btn-reset`} onClick={() => onReset()} ref={resetTooltipRef}>
-            <i className={iconClass(options.iconset, "reset")} />
+          <button className={`btn btn-light btn-reset`} onClick={() => onReset && onReset()} ref={resetTooltipRef!}>
+            <i className={iconClass(options.iconset, "reset")}/>
           </button>
         </div>
       </div>

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

@@ -37,7 +37,7 @@ export function FormEdit(props: FormEditProps) {
 
       <FormBuilder
         key={`form-builder-${form._id}`}
-        components={form.components}
+        components={form.components!}
         display={form.display}
         options={options}
         builder={builder}

package/src/components/form-settings/formSettings.utils.ts

@@ -10,9 +10,9 @@ export type FormSettingsSchema = {
 export function formSettingsToSubmission(form: Partial<FormSchema>): Submission<FormSettingsSchema> {
   return {
     data: {
-      action: form.action,
-      tags: form.tags,
-      properties: form.properties
+      action: form.action!,
+      tags: form.tags!,
+      properties: form.properties!
     }
   };
 }

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

@@ -14,7 +14,7 @@ export interface InputTagsProps<T = any> extends Omit<FormControlProps, "descrip
 }
 
 export function InputTags({ name, value = [], label, onChange, required, description, prefix, suffix, ...props }: InputTagsProps) {
-  const ref = useRef();
+  const ref: any = useRef();
 
   useEffect(() => {
     const instance = new Choices(ref.current, {
@@ -26,11 +26,11 @@ export function InputTags({ name, value = [], label, onChange, required, descrip
     instance.setValue([].concat(value, []));
 
     instance.passedElement.element.addEventListener("addItem", (event: any) => {
-      onChange(name, uniq(value.concat(event.detail.value)));
+      onChange && onChange(name, uniq(value.concat(event.detail.value)));
     });
 
     instance.passedElement.element.addEventListener("removeItem", (event: any) => {
-      onChange(
+      onChange && onChange(
         name,
         value.filter((v: string) => v !== event.detail.value)
       );

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

@@ -35,7 +35,7 @@ export function InputText<T = any>({
 }: InputTextProps<T>) {
   const [localValue, setValue] = useState(value);
 
-  const change = useMemo(() => callLast(onChange, 300), [onChange]);
+  const change = useMemo(() => onChange && callLast(onChange, 300), [onChange]);
 
   useEffect(() => {
     setValue(value);
@@ -64,7 +64,7 @@ export function InputText<T = any>({
           const value = getEventValue(event);
           setValue(value);
 
-          return change(name, value);
+          return change && change(name, value);
         }}
       />
     </FormControl>

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

@@ -37,8 +37,8 @@ export function Modal({
   className = "",
   ...props
 }: PropsWithChildren<ModalProps>) {
-  const titleRef = useRef<HTMLDivElement>();
-  const footerRef = useRef<HTMLDivElement>();
+  const titleRef: any = useRef<HTMLDivElement>();
+  const footerRef: any = useRef<HTMLDivElement>();
   const [maxHeight, setMaxHeight] = useState<string>();
 
   const onClickClose = () => {

package/src/components/react-component/reactComponent.component.tsx

@@ -4,8 +4,8 @@ import { Submission } from "../../interfaces/Submission";
 
 export class ReactComponent<Data = any> extends Components.components.field {
   public reactInstance: any;
-  public shouldSetValue: boolean;
-  private dataForSetting: Data;
+  public shouldSetValue?: boolean;
+  private dataForSetting?: Data;
 
   /**
    * This is the first phase of component building where the component is instantiated.
@@ -20,7 +20,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
   }
 
   get $reactNode() {
-    return this.refs[`react-${this.id}`];
+    return (this.refs as any)[`react-${this.id}`];
   }
 
   /**
@@ -67,7 +67,9 @@ export class ReactComponent<Data = any> extends Components.components.field {
       [`react-${this.id}`]: "single"
     });
 
+    // @ts-ignore
     if (this.refs[`react-${this.id}`]) {
+      // @ts-ignore
       this.reactInstance = this.attachReact(this.refs[`react-${this.id}`]);
 
       if (this.shouldSetValue) {
@@ -82,7 +84,9 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * or it is being removed from the form.
    */
   detach() {
+    // @ts-ignore
     if (this.refs[`react-${this.id}`]) {
+      // @ts-ignore
       this.detachReact(this.refs[`react-${this.id}`]);
     }
     super.detach();
@@ -122,8 +126,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
    * @param value
    * @param flags
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  setValue(value: any, flags?: any): boolean {
+  setValue(value: any, flags?: any) {
     if (this.reactInstance) {
       this.reactInstance.setState({
         value: value
@@ -134,7 +137,7 @@ export class ReactComponent<Data = any> extends Components.components.field {
       this.dataForSetting = value;
     }
 
-    return undefined;
+    return false
   }
 
   /**

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

@@ -33,7 +33,7 @@ export function Select<T = any>({
   layout,
   ...props
 }: SelectProps<T>): ReactElement {
-  const ref = useRef();
+  const ref = useRef<any>();
 
   useEffect(() => {
     let instance: any;
@@ -75,7 +75,7 @@ export function Select<T = any>({
         value={value || ("" as any)}
         placeholder={placeholder}
         onChange={(event) => {
-          onChange(name, getEventValue(event));
+          onChange && onChange(name, getEventValue(event));
         }}
       >
         {choices.map(({ label, value }) => {

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

@@ -1,14 +1,14 @@
 import React from "react";
-import { FormSchema, Submission } from "../../interfaces";
-import { Table, TableProps } from "../table/table.component";
-import { mapFormToColumns } from "../table/utils/mapFormToColumns";
+import {FormSchema, Submission} from "../../interfaces";
+import {Table, TableProps} from "../table/table.component";
+import {mapFormToColumns} from "../table/utils/mapFormToColumns";
 
 export type SubmissionsTableProps = Omit<TableProps<Submission>, "columns"> & {
   form?: FormSchema;
 };
 
-export function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {
-  const columns: any[] = React.useMemo(() => form && mapFormToColumns(form), [form]);
+export function SubmissionsTable({form, ...props}: SubmissionsTableProps) {
+  const columns: any[] | undefined = form && mapFormToColumns(form);
 
-  return <Table {...props} columns={columns} />;
+  return <Table {...props} columns={columns!}/>;
 }

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

@@ -1,13 +1,23 @@
 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";
-import { DefaultCellHeader, DefaultCellHeaderProps } from "./components/defaultCellHeader.component";
-import { DefaultColumnFilter } from "./filters/defaultColumnFilter.component";
-import { useOperations } from "./utils/useOperations.hook";
+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";
+import {DefaultCellHeader, DefaultCellHeaderProps} from "./components/defaultCellHeader.component";
+import {DefaultColumnFilter} from "./filters/defaultColumnFilter.component";
+import {useOperations} from "./utils/useOperations.hook";
 
 export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
   className?: string;
@@ -92,7 +102,7 @@ function DefaultLoader() {
 }
 
 function DefaultEmptyData() {
-  return <div className='text-center p-2 pb-4 font-bold'>No data found</div>;
+  return <div className="text-center p-2 pb-4 font-bold">No data found</div>;
 }
 
 const hooks = [useFilters, useGroupBy, useSortBy, usePagination];
@@ -161,12 +171,12 @@ export function Table<Data extends object = any>(props: PropsWithChildren<TableP
       setFilterId
     } as any,
     ...hooks,
-    useOperations({ operations, CellOperations, onClick: _onClick, ctx, i18n })
+    useOperations({operations, CellOperations, onClick: _onClick, ctx, i18n})
   );
 
   const {
     setPageSize,
-    state: { pageIndex, pageSize, sortBy, filters }
+    state: {pageIndex, pageSize, sortBy, filters}
   } = tableInstance;
 
   React.useEffect(() => {
@@ -188,45 +198,49 @@ export function Table<Data extends object = any>(props: PropsWithChildren<TableP
         /* style={{ marginBottom: disablePagination ? "-1px" : "0px" }} */
       >
         <thead>
-          {tableInstance.headerGroups.map((headerGroup, i) => (
-            <tr key={`tableInstance.headerGroups${i}`} {...headerGroup.getHeaderGroupProps()}>
-              {headerGroup.headers.map((column) => (
-                <th
-                  key={`tableInstance.headers.column.${column.id}`}
-                  /* className='text-left py-2 align-top' */
-                  {...column.getHeaderProps()}
-                >
-                  <CellHeader column={column} />
-                </th>
-              ))}
-            </tr>
-          ))}
+        {tableInstance.headerGroups.map((headerGroup, i) => (
+          <tr {...headerGroup.getHeaderGroupProps()} key={`tableInstance.headerGroups${i}`}>
+            {headerGroup.headers.map((column) => (
+              <th
+                /* className='text-left py-2 align-top' */
+                {...column.getHeaderProps()}
+                key={`tableInstance.headers.column.${column.id}`}
+              >
+                <CellHeader column={column}/>
+              </th>
+            ))}
+          </tr>
+        ))}
         </thead>
         {!isLoading ? (
           <tbody {...tableInstance.getTableBodyProps()}>
-            {tableInstance.page.map((row) => {
-              tableInstance.prepareRow(row);
-              return (
-                <tr key={`tableInstance.page.${row.id}`} onClick={() => _onClick(row.original, "row")} {...row.getRowProps()}>
-                  {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()}>
-                        {cell.render("Cell")}
-                      </td>
-                    );
-                  })}
-                </tr>
-              );
-            })}
+          {tableInstance.page.map((row) => {
+            tableInstance.prepareRow(row);
+            return (
+              <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
+                      colSpan={colspan}
+                      {...cell.getCellProps()}
+                      key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}>
+                      {cell.render("Cell")}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
           </tbody>
         ) : null}
       </table>
-      {isLoading ? <Loader /> : null}
-      {!data.length ? <EmptyData /> : null}
+      {isLoading ? <Loader/> : null}
+      {!data.length ? <EmptyData/> : null}
       {!isLoading && data.length && !disablePagination ? (
         <div className={"overflow-hidden"}>
           <Pagination

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

@@ -11,7 +11,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/tabs/tabs.component.tsx

@@ -71,7 +71,7 @@ export function Tabs({
                     {...additionalProps}
                     {...item}
                   >
-                    {i18n(item.label)}
+                    {i18n(item.label || "")}
                   </Button>
                 );
               })}

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/stores/action-info/action-info.selectors.ts

@@ -3,4 +3,4 @@ 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/auth/auth.utils.tsx

@@ -7,7 +7,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 +29,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.ts

@@ -8,7 +8,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 +24,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/logout.action.spec.ts

@@ -4,6 +4,7 @@ import { AUTH } from "./auth.constant";
 import { logout } from "./logout.action";
 
 jest.mock("./auth.actions");
+jest.mock('formiojs')
 
 describe("logout()", () => {
   beforeEach(() => {

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

@@ -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/tsconfig.json

@@ -1,32 +1,15 @@
 {
+  "extends": "@tsed/config/tsconfig.web.json",
   "compilerOptions": {
-    "outDir": "dist",
-    "module": "esnext",
-    "lib": ["dom", "esnext"],
-    "downlevelIteration": true,
-    "moduleResolution": "node",
-    "jsx": "react",
-    "sourceMap": true,
-    "declaration": true,
-    "esModuleInterop": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": false,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": false,
-    "allowSyntheticDefaultImports": true,
-    "target": "es5",
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true
+    "rootDir": "src"
   },
   "include": ["src"],
-  "exclude": ["node_modules", "dist", "example"]
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "../redux-utils/tsconfig.json"
+    }
+  ]
 }

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": []
+}

package/craco.config.js

@@ -1,11 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-module.exports = require("@tsed/config/craco.config")("react-formio", {
-  coverageThreshold: {
-    global: {
-      branches: 44.6,
-      functions: 60.98,
-      lines: 60.98,
-      statements: 62.27
-    }
-  }
-});

package/tsconfig.test.json

@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "commonjs"
-  }
-}