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

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

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React, { DetailedHTMLProps, HTMLAttributes } from "react";
+import { DetailedHTMLProps, HTMLAttributes } from "react";
 import { Row } from "react-table";
 
 import { iconClass } from "../../../utils/iconClass";
@@ -21,6 +21,7 @@ export function DefaultDndRow<Data extends object = {}>(props: DefaultRowProps<D
 
   return (
     <tr ref={dropRef} style={{ opacity }}>
+      {/* eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role */}
       <td ref={dragRef} role='cell' style={{ cursor: isDragging ? "grabbing" : "grab" }} className='align-middle'>
         <div className='flex items-center justify-center'>
           <i className={classnames(iconClass(undefined, "dots-vertical-rounded"))} />

package/src/components/table/components/dragNDropContainer.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 

package/src/components/table/filters/defaultColumnFilter.component.spec.tsx

@@ -1,7 +1,4 @@
-import "@testing-library/jest-dom/extend-expect";
-
 import { act, fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 
 import { DefaultColumnFilter } from "./defaultColumnFilter.component";
 
@@ -9,9 +6,9 @@ describe("DefaultColumnFilter", () => {
   it("should display text-field and handle change", async () => {
     const props = {
       filterId: "data.id",
-      setFilterId: jest.fn(),
+      setFilterId: vi.fn(),
       name: "data.id",
-      column: { id: "id", filterValue: "", setFilter: jest.fn() }
+      column: { id: "id", filterValue: "", setFilter: vi.fn() }
     };
 
     render(

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import { useCallback, useState } from "react";
 import { FilterProps } from "react-table";
 
 import { InputText } from "../../input-text/inputText.component";
@@ -23,6 +23,7 @@ export function DefaultColumnFilter<D extends Record<string, unknown> = {}>(
     [id, setValue, setFilterId, setFilter]
   );
 
+  /* eslint-disable jsx-a11y/no-autofocus */
   return (
     <InputText
       size={"sm"}

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

@@ -1,13 +1,10 @@
-import "@testing-library/jest-dom/extend-expect";
-
 import { render, screen } from "@testing-library/react";
-import React from "react";
 
 import { SelectColumnFilter } from "./selectColumnFilter.component";
 
 describe("SelectColumnFilter", () => {
   it("should display select with choices", async () => {
-    const mockSetFilter = jest.fn();
+    const mockSetFilter = vi.fn();
     const props = {
       name: "data.id",
       setFilter: mockSetFilter,
@@ -26,7 +23,7 @@ describe("SelectColumnFilter", () => {
     expect(screen.getByText("select-choice-2")).toBeDefined();
   });
   it("should display select with custom choices", async () => {
-    const mockSetFilter = jest.fn();
+    const mockSetFilter = vi.fn();
     const props = {
       name: "data.id",
       setFilter: mockSetFilter,
@@ -47,7 +44,7 @@ describe("SelectColumnFilter", () => {
   });
 
   it("should display select with custom choices (function)", async () => {
-    const mockSetFilter = jest.fn();
+    const mockSetFilter = vi.fn();
     const props = {
       name: "data.id",
       setFilter: mockSetFilter,

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

@@ -1,4 +1,3 @@
-import React from "react";
 import { FilterProps } from "react-table";
 
 import { Select } from "../../select/select.component";

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

@@ -1,18 +1,15 @@
-import React from "react";
 import { FilterProps } from "react-table";
 
 export function SliderColumnFilter<D extends Record<string, unknown> = {}>({
   column: { filterValue, setFilter, preFilteredRows, id }
 }: FilterProps<D>) {
-  const [min, max] = React.useMemo(() => {
-    let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-    let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
-    preFilteredRows.forEach((row) => {
-      min = Math.min(row?.values[id], min);
-      max = Math.max(row?.values[id], max);
-    });
-    return [min, max];
-  }, [id, preFilteredRows]);
+  let min = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+  let max = preFilteredRows.length ? preFilteredRows[0].values[id] : 0;
+
+  preFilteredRows.forEach((row) => {
+    min = Math.min(row?.values[id], min);
+    max = Math.max(row?.values[id], max);
+  });
 
   return (
     <>

package/src/components/table/hooks/useCustomTable.hook.tsx

@@ -1,5 +1,5 @@
 import noop from "lodash/noop";
-import React, { PropsWithChildren, useEffect, useState } from "react";
+import { ComponentType, CSSProperties, PropsWithChildren, useEffect, useState } from "react";
 import {
   Cell,
   CellProps,
@@ -27,7 +27,7 @@ export interface ExtraColumnProps {
   colspan?: number;
   hidden?: boolean;
   className?: string;
-  style?: React.CSSProperties;
+  style?: CSSProperties;
 }
 
 export type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;
@@ -66,11 +66,11 @@ export interface TableProps<Data extends object = any> extends TableOptions<Data
   /**
    * Custom EmptyData displayed when there is no data
    */
-  EmptyData?: React.ComponentType;
+  EmptyData?: ComponentType;
   /**
    * Custom ArrowSort
    */
-  ArrowSort?: React.ComponentType;
+  ArrowSort?: ComponentType;
   /**
    * Custom default ColumnFilter
    */
@@ -78,27 +78,27 @@ export interface TableProps<Data extends object = any> extends TableOptions<Data
   /**
    * Custom cell
    */
-  Cell?: React.ComponentType<CellProps<Data>>;
+  Cell?: ComponentType<CellProps<Data>>;
   /**
    * Custom Row
    */
-  Row?: React.ComponentType<DefaultRowProps<Data>>;
+  Row?: ComponentType<DefaultRowProps<Data>>;
   /**
    *
    */
-  CellHeader?: React.ComponentType<DefaultCellHeaderProps<Data>>;
+  CellHeader?: ComponentType<DefaultCellHeaderProps<Data>>;
   /**
    *
    */
-  CellOperations?: React.ComponentType;
+  CellOperations?: ComponentType;
   /**
    * Custom Loader
    */
-  Loader?: React.ComponentType;
+  Loader?: ComponentType;
   /**
    * Custom Loader
    */
-  Pagination?: React.ComponentType;
+  Pagination?: ComponentType;
   /**
    * Disable filters
    */
@@ -179,16 +179,12 @@ export function useCustomTable<Data extends object = {}>(props: PropsWithChildre
 
   const _onClick = getOperationCallback(operations, onClick);
 
-  const defaultColumn = React.useMemo(
-    () => ({
-      // Let's set up our default Filter UI
-      Filter: ColumnFilter,
-      ArrowSort
-    }),
-    [ColumnFilter, ArrowSort]
-  ) as any;
+  const defaultColumn = {
+    Filter: ColumnFilter,
+    ArrowSort
+  };
 
-  const [filterId, setFilterId] = React.useState(controlledFilterId);
+  const [filterId, setFilterId] = useState(controlledFilterId);
 
   // DND
   const [records, setRecords] = useState<readonly Data[]>(data);
@@ -236,7 +232,7 @@ export function useCustomTable<Data extends object = {}>(props: PropsWithChildre
     state: { pageIndex, pageSize, sortBy, filters }
   } = tableInstance;
 
-  React.useEffect(() => {
+  useEffect(() => {
     onChange({
       pageIndex,
       pageSize,

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

@@ -1,11 +1,11 @@
-import React from "react";
+import { type ComponentType, type FunctionComponent } from "react";
 import { Hooks } from "react-table";
 
 import { Operation } from "../../../interfaces";
 import { DefaultCellOperations } from "../components/defaultCellOperations.component";
 
 export type UseOperationsHookProps = {
-  CellOperations?: React.ComponentType;
+  CellOperations?: FunctionComponent | ComponentType<{}>;
   operations: Operation[];
   onClick?: (data: any, event: string) => void;
   i18n?: (f: string) => string;
@@ -14,7 +14,7 @@ export type UseOperationsHookProps = {
 
 export function useOperations<D extends object = {}>({
   operations,
-  CellOperations = DefaultCellOperations,
+  CellOperations = DefaultCellOperations as FunctionComponent,
   onClick,
   i18n = (f: string) => f,
   ctx

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

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { DrapNDropContainer } from "./components/dragNDropContainer";
 import { TableProps, useCustomTable } from "./hooks/useCustomTable.hook";

package/src/components/table/table.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";
@@ -14,9 +14,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);
@@ -64,10 +64,10 @@ Sandbox.args = {
 };
 
 export const TableWithDragNDrop = (args: any) => {
-  const [skip, setSkip] = React.useState(0);
-  const [limit, setLimit] = React.useState(10);
-  const [serverCount] = React.useState(87);
-  const [data, setData] = React.useState(() => formSubmissions);
+  const [skip, setSkip] = useState(0);
+  const [limit, setLimit] = useState(10);
+  const [serverCount] = useState(87);
+  const [data, setData] = useState(() => formSubmissions);
 
   const onChange = (obj: any) => {
     setLimit(obj.pageSize);

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

@@ -1,6 +1,5 @@
 import { Components, ExtendedComponentSchema } from "formiojs";
 import FormioUtils from "formiojs/utils";
-import React from "react";
 
 import { FormSchema } from "../../../interfaces";
 import { DefaultCell } from "../components/defaultCell.component";

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

@@ -1,5 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import * as React from "react";
+import { expect, vi } from "vitest";
 
 import { Tabs } from "./tabs.component";
 import { Sandbox } from "./tabs.component.stories";
@@ -66,7 +66,7 @@ describe("tabs", () => {
         label: "Edit"
       }
     ];
-    const onClick = jest.fn();
+    const onClick = vi.fn();
 
     render(<Tabs items={items} onClick={onClick} />);
 

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { Tabs } from "./tabs.component";
 

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

@@ -1,5 +1,5 @@
 import classnames from "classnames";
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import { iconClass } from "../../utils/iconClass";
 

package/src/react-table.d.ts

@@ -45,10 +45,12 @@ import {
 } from "react-table";
 
 declare module "react-table" {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   export interface UseFlexLayoutInstanceProps<D extends Record<string, unknown>> {
     totalColumnsMinWidth: number;
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   export interface UseFlexLayoutColumnProps<D extends Record<string, unknown>> {
     totalMinWidth: number;
   }

package/src/utils/iconClass.ts

@@ -1,4 +1,6 @@
-import { Templates } from "formiojs";
+import * as formio from "formiojs";
+
+const { Templates } = formio;
 
 export function iconClass(iconset: string | undefined, name: string, spinning?: boolean): string {
   return Templates.current.iconClass(iconset || Templates.current.defaultIconset, name, spinning);

package/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@tsed/typescript/tsconfig.web.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "noEmit": true,
+    "declaration": false,
+    "composite": false
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "vite.config.mts"],
+  "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
+}

package/tsconfig.json

@@ -1,16 +1,18 @@
 {
-  "extends": "@tsed/config/tsconfig.web.json",
+  "extends": "@tsed/typescript/tsconfig.web.json",
   "compilerOptions": {
-    "rootDir": "src",
-    "moduleResolution": "node"
+    "baseUrl": ".",
+    "composite": true,
+    "noEmit": true
   },
-  "include": ["src"],
+  "include": [],
+  "exclude": [],
   "references": [
     {
-      "path": "./tsconfig.node.json"
+      "path": "./tsconfig.app.json"
     },
     {
-      "path": "../redux-utils/tsconfig.json"
+      "path": "./tsconfig.spec.json"
     }
   ]
 }

package/tsconfig.spec.json

@@ -0,0 +1,14 @@
+{
+  "extends": "@tsed/typescript/tsconfig.web.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": ".",
+    "declaration": false,
+    "composite": false,
+    "noEmit": true,
+    "paths": {},
+    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": ["src/**/*.spec.tsx", "src/**/*.spec.ts", "vitest.config.mts"],
+  "exclude": ["node_modules", "dist", "coverage"]
+}

package/vite.config.mts

@@ -0,0 +1,69 @@
+import {fileURLToPath} from "node:url";
+
+import react from "@vitejs/plugin-react";
+import {globbySync} from "globby";
+import {extname, relative} from "path";
+import preserveDirectives from "rollup-preserve-directives";
+import {defineConfig} from "vite";
+import dts from "vite-plugin-dts";
+import {resolve} from "node:path";
+
+import pkg from "./package.json" with {type: "json"};
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      tsconfigPath: "./tsconfig.app.json",
+      aliasesExclude: [],
+      include: ["src/**/*.{ts,tsx}"],
+      exclude: ["**/*.spec.{ts,tsx}", "**/*.stories.{ts,tsx}", "**/__*__/**"]
+    })
+  ],
+  resolve: {
+    alias: {}
+  },
+  build: {
+    sourcemap: true,
+    lib: {
+      entry: resolve(import.meta.dirname, "src/index.ts"),
+      formats: ["es"]
+    },
+    copyPublicDir: false,
+    rollupOptions: {
+      external: [
+        ...Object.keys(pkg.peerDependencies || {}),
+        "react",
+        "react-dom",
+        "react/jsx-runtime",
+        /lodash\/.*/,
+        /formiojs\/.*/,
+        /@tsed\/.*/
+      ],
+      plugins: [preserveDirectives() as any],
+      input: Object.fromEntries(
+        globbySync("src/**/*.{ts,tsx}", {
+          ignore: ["**/*.spec.{ts,tsx}", "**/*.stories.{ts,tsx}", "**/__*__/**"]
+        }).map((file) => {
+          return [
+            // The name of the entry point
+            // src/nested/foo.ts becomes nested/foo
+            relative("src", file.slice(0, file.length - extname(file).length)),
+            // The absolute path to the entry file
+            // src/nested/foo.ts becomes /project/src/nested/foo.ts
+            fileURLToPath(new URL(file, import.meta.url))
+          ];
+        })
+      ),
+      output: {
+        assetFileNames: "assets/[name][extname]",
+        chunkFileNames: "chunks/[name].js",
+        entryFileNames: "[name].js",
+        globals: {
+          react: "React"
+        }
+      }
+    }
+  }
+});

package/vitest.config.mts

@@ -0,0 +1,21 @@
+// @ts-ignore
+import {presets} from "@tsed/vitest/presets";
+import {defineConfig} from "vitest/config";
+
+export default defineConfig(
+  {
+    ...presets,
+    test: {
+      ...presets.test,
+      coverage: {
+        ...presets.test.coverage,
+        thresholds: {
+          statements: 0,
+          branches: 0,
+          functions: 0,
+          lines: 0
+        }
+      }
+    }
+  }
+);

package/.eslintignore

@@ -1,13 +0,0 @@
-**/node_modules
-docs
-docs-references
-**/lib
-**/build
-**/dist
-**/coverage
-**/.nyc_output
-**/node_modules
-*-lock.json
-*.lock
-benchmarks.*
-**/generated

package/.eslintrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-  extends: [require.resolve("@tsed/config/eslint/web")],
-  rules: {
-    "import/no-anonymous-default-export": 0,
-    "jsx-a11y/no-autofocus": 1
-  }
-};

package/coverage.json

@@ -1,6 +0,0 @@
-{
-  "statements": 56.02,
-  "branches": 46.56,
-  "functions": 48.33,
-  "lines": 56.04
-}

package/dist/components/actions-table/actionsTable.component.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/actions-table/actionsTable.stories.d.ts

@@ -1,85 +0,0 @@
-import React from "react";
-import { ActionsTable } from "./actionsTable.component";
-declare const _default: {
-    title: string;
-    component: typeof ActionsTable;
-    argTypes: {
-        data: {
-            control: {
-                type: string;
-            };
-        };
-        operations: {
-            control: {
-                type: string;
-            };
-        };
-        isLoading: {
-            control: {
-                type: string;
-            };
-        };
-        isEmpty: {
-            control: {
-                type: string;
-            };
-        };
-        disableFilters: {
-            control: {
-                type: string;
-            };
-        };
-        disablePagination: {
-            control: {
-                type: string;
-            };
-        };
-        tags: {
-            control: {
-                type: string;
-            };
-        };
-        onAddAction: {
-            action: string;
-        };
-    };
-    parameters: {};
-};
-export default _default;
-export declare const Sandbox: {
-    (args: any): React.JSX.Element;
-    args: {
-        icon: string;
-        availableActions: {
-            label: string;
-            value: string;
-        }[];
-        data: {
-            _id: string;
-            handler: string[];
-            method: string[];
-            priority: number;
-            name: string;
-            title: string;
-            form: string;
-            machineName: string;
-        }[];
-        operations: ({
-            title: string;
-            action: string;
-            alias: string;
-            path: string;
-            icon: string;
-            permissionsResolver(): boolean;
-            buttonType?: undefined;
-        } | {
-            action: string;
-            path: string;
-            icon: string;
-            buttonType: string;
-            permissionsResolver(): boolean;
-            title?: undefined;
-            alias?: undefined;
-        })[];
-    };
-};

package/dist/components/alert/alert.component.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/alert/alert.stories.d.ts

@@ -1,15 +0,0 @@
-import React from "react";
-import { Alert } from "./alert.component";
-declare const _default: {
-    title: string;
-    component: typeof Alert;
-    argTypes: {};
-    parameters: {};
-};
-export default _default;
-export declare const Sandbox: {
-    (args: any): React.JSX.Element;
-    args: {
-        error: string;
-    };
-};

package/dist/components/card/card.component.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/card/card.stories.d.ts

@@ -1,16 +0,0 @@
-import React from "react";
-import { Card } from "./card.component";
-declare const _default: {
-    title: string;
-    component: typeof Card;
-    argTypes: {};
-    parameters: {};
-};
-export default _default;
-export declare const Sandbox: {
-    (args: any): React.JSX.Element;
-    args: {
-        label: string;
-        children: string;
-    };
-};

package/dist/components/form/form.component.spec.d.ts

@@ -1 +0,0 @@
-export {};