@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

package/src/{components/forms-table/formsTable.stories.tsx → organisms/table/forms/FormsTable.stories.tsx}

@@ -1,52 +1,48 @@
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/forms/form-control/FormControl";
+import "../../../molecules/pagination/all";
+import "../../../molecules/table/all";
+
 import tailwind from "@tsed/tailwind-formio";
-import React from "react";
 
-import { FormsTable } from "./formsTable.component";
+import { FormsTable } from "./FormsTable";
 
+/**
+ *
+ * ```tsx
+ * import {FormsTable} from "@tsed/react-formio/organisms/table/forms/FormsTable";
+ * ```
+ */
 export default {
-  title: "ReactFormio/FormsTable",
+  title: "table/forms/FormsTable",
   component: FormsTable,
   argTypes: {
     icon: {
-      control: {
-        type: "select",
-        options: Object.keys(tailwind.templates.tailwind.ICONS)
-      }
+      control: "select",
+      options: Object.keys(tailwind.templates.tailwind.ICONS)
     },
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     isLoading: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     isEmpty: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disableFilters: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     tags: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {}

package/src/organisms/table/forms/FormsTable.tsx

@@ -0,0 +1,66 @@
+import "./components/FormsCell.js";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import type { FormType } from "../../../interfaces";
+import { Table, TableProps } from "../../../molecules/table/Table";
+import { getComponent } from "../../../registries/components.js";
+import { FormsCell } from "./components/FormsCell.js";
+
+export type FormsTableProps = Omit<TableProps<FormType>, "columns"> & {
+  tags?: { label: string; value: string }[];
+};
+
+export function FormsTable({ ...props }: FormsTableProps) {
+  const { i18n = (f: string) => f, tags } = props;
+  const Cell = getComponent<typeof FormsCell>("FormsCell");
+
+  const columns: ColumnDef<any>[] = [
+    {
+      header: i18n("Title"),
+      accessorKey: "title",
+      cell: (context) => <Cell {...context} i18n={i18n} />,
+      meta: {
+        cellProps: {
+          colSpan: 2
+        }
+      }
+    },
+    {
+      header: i18n("Tags"),
+      accessorKey: "tags",
+      meta: {
+        cellProps: {
+          hidden: true
+        },
+        filter: {
+          variant: "select",
+          layout: "react",
+          options: tags
+        }
+      }
+    }
+    // {
+    //   Header: i18n("Title"),
+    //   accessor: "title",
+    //   id: "title",
+    //   Cell: (props: any) => <FormCell {...props} icon={props.icon} i18n={i18n} />,
+    //   Filter: DefaultColumnFilter,
+    //   colspan: 2
+    // },
+    // {
+    //   Header: i18n("Tags"),
+    //   accessor: "tags",
+    //   id: "tags",
+    //   hidden: true,
+    //   Filter: (props: any) =>
+    //     tags && tags.length ? (
+    //       <SelectColumnFilter {...props} column={{ ...props.columns, choices: tags }} />
+    //     ) : (
+    //       <DefaultColumnFilter {...props} />
+    //     )
+    // }
+  ];
+
+  return <Table {...(props as any)} columns={columns} />;
+}

package/src/organisms/table/forms/components/FormsCell.tsx

@@ -0,0 +1,53 @@
+import { CellContext } from "@tanstack/react-table";
+import cx from "classnames";
+import moment from "moment";
+
+import type { FormType } from "../../../../interfaces/index.js";
+import { registerComponent } from "../../../../registries/components.js";
+import { iconClass } from "../../../../utils/iconClass";
+import { stopPropagationWrapper } from "../../../../utils/stopPropagationWrapper";
+
+export function FormsCell(
+  props: CellContext<FormType, any> & {
+    i18n: (i18n: string) => string;
+  }
+) {
+  const {
+    row: { original: form }
+  } = props;
+
+  return (
+    <div className={"p-1"}>
+      <h4 className={"text-primary text-lg flex space-x-2 items-center"}>
+        <i className={cx(iconClass(undefined, "server"), "text-secondary")} />
+        <span>{form.title}</span>
+      </h4>
+
+      <ul className='reset-list text-gray-500'>
+        <li className={"text-sm"}>Name: {form.name || form.machineName}</li>
+        <li className='mt-5 flex space-x-1'>
+          <span className='badge bg-light flex space-x-1'>
+            <i className={iconClass(undefined, "history")} />
+            <span>Updated {moment(form.modified).fromNow()}</span>
+          </span>
+
+          {(form.tags || []).map((tag, index) => (
+            <button
+              key={index}
+              className='badge badge-hover bg-secondary flex space-x-1'
+              onClick={stopPropagationWrapper(() => {
+                // props.setFilter("tags", tag);
+                // props.gotoPage(0);
+              })}
+            >
+              <i className={iconClass(undefined, "tags")} />
+              <span>{tag}</span>
+            </button>
+          ))}
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+registerComponent("FormsCell", FormsCell);

package/src/{components/submissions-table/submissionsTable.stories.tsx → organisms/table/submissions/SubmissionsTable.stories.tsx}

@@ -1,57 +1,54 @@
-import React from "react";
+import "../../../molecules/button/Button";
+import "../../../molecules/forms/input-text/InputText";
+import "../../../molecules/forms/select/all";
+import "../../../molecules/pagination/all";
+import "../../../molecules/table/all";
 
-import { mapPagination } from "../../utils/mapPagination";
-import formSchema from "../__fixtures__/form-schema.json";
-import formSubmissions from "../__fixtures__/form-submissions.json";
-import { SubmissionsTable } from "./submissionsTable.component";
+import { useState } from "react";
 
+import { mapPagination } from "../../../utils/mapPagination";
+import FormType from "../../__fixtures__/form-schema.json";
+import formSubmissions from "../../__fixtures__/form-submissions.json";
+import { SubmissionsTable } from "./SubmissionsTable";
+
+/**
+ * ```tsx
+ * import {SubmissionsTable} from "@tsed/react-formio/organisms/table/submissions/SubmissionsTable";
+ * ```
+ */
 export default {
-  title: "ReactFormio/SubmissionsTable",
+  title: "table/submissions/SubmissionsTable",
   component: SubmissionsTable,
   argTypes: {
     form: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     isLoading: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     isEmpty: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disableFilters: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     }
   },
   parameters: {}
 };
 
 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);
@@ -73,7 +70,7 @@ export const Sandbox = (args: any) => {
 };
 
 Sandbox.args = {
-  form: formSchema,
+  form: FormType,
   data: formSubmissions,
   operations: [
     {

package/src/organisms/table/submissions/SubmissionsTable.tsx

@@ -0,0 +1,13 @@
+import type { FormType, SubmissionType } from "../../../interfaces";
+import { Table, type TableProps } from "../../../molecules/table/Table";
+import { mapFormToColumns } from "../../../molecules/table/utils/mapFormToColumns.js";
+
+export type SubmissionsTableProps = Omit<TableProps<SubmissionType>, "columns"> & {
+  form?: FormType;
+};
+
+export function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {
+  const columns: any[] | undefined = form && mapFormToColumns(form);
+
+  return <Table {...props} columns={columns!} />;
+}

package/src/registries/components.ts

@@ -0,0 +1,23 @@
+export const components = new Map<string, unknown>();
+
+export function registerComponent(type: string, component: unknown) {
+  components.set(type, component);
+}
+
+export function getComponent<Cmp>(type: string | string[]): Cmp {
+  if (Array.isArray(type)) {
+    for (const t of type) {
+      if (components.has(t)) {
+        return components.get(t) as unknown as Cmp;
+      }
+    }
+  }
+
+  const result = components.get(type as string) as unknown as Cmp;
+
+  if (!result) {
+    console.warn(`Missing component for ${type}`);
+  }
+
+  return result;
+}

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"],
+  "exclude": ["node_modules", "dist", "src/**/*.spec.ts", "src/**/*.spec.tsx"]
+}

package/tsconfig.json

@@ -1,16 +1,21 @@
 {
-  "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.app.json"
+    },
     {
       "path": "./tsconfig.node.json"
     },
     {
-      "path": "../redux-utils/tsconfig.json"
+      "path": "./tsconfig.spec.json"
     }
   ]
 }

package/tsconfig.node.json

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

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": 0,
-  "branches": 0,
-  "functions": 0,
-  "lines": 0
-}

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

@@ -1,11 +0,0 @@
-import React from "react";
-import { ActionSchema } from "../../interfaces";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-export type ActionsTableProps = Omit<TableProps<ActionSchema>, "columns"> & {
-    onAddAction?: (actionName: string) => void;
-    availableActions?: {
-        label: string;
-        value: string;
-    }[];
-};
-export declare function ActionsTable({ disableFilters, disablePagination, availableActions, onAddAction, ...props }: ActionsTableProps): React.JSX.Element;

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

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

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

@@ -1,40 +0,0 @@
-import type { StoryObj } from "@storybook/react";
-import { ActionsTable } from "./actionsTable.component";
-declare const _default: {
-    title: string;
-    component: typeof ActionsTable;
-    argTypes: {
-        data: {
-            control: {
-                type: "object";
-            };
-        };
-        operations: {
-            control: {
-                type: "object";
-            };
-        };
-        isLoading: {
-            control: {
-                type: "boolean";
-            };
-        };
-        disableFilters: {
-            control: {
-                type: "boolean";
-            };
-        };
-        disablePagination: {
-            control: {
-                type: "boolean";
-            };
-        };
-        onAddAction: {
-            action: string;
-        };
-    };
-    parameters: {};
-};
-export default _default;
-type Story = StoryObj<typeof ActionsTable>;
-export declare const Sandbox: Story;

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

@@ -1,6 +0,0 @@
-import React from "react";
-export interface AlertProps {
-    error?: any | any[];
-    type?: string;
-}
-export declare function Alert({ error, type }: AlertProps): React.JSX.Element | null;

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;
-    };
-};