@tsed/react-formio 3.0.0-alpha.8 → 3.0.0-rc.1

package/src/organisms/table/actions/ActionsTable.stories.tsx

@@ -1,7 +1,8 @@
 import "../../../molecules/forms/select/all.ts";
+import "../../../molecules/table/all.ts";
 
-import type { Meta, StoryObj } from "@storybook/react";
-import { expect, fn, userEvent, within } from "@storybook/test";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, within } from "storybook/test";
 
 import availableActions from "../../__fixtures__/form-actions.json";
 import data from "./__fixtures__/data.json";
@@ -22,32 +23,60 @@ export default {
     operations: {
       control: "object"
     },
-    isLoading: {
-      control: "boolean"
-    },
-    disableFilters: {
-      control: "boolean"
-    },
-    disablePagination: {
-      control: "boolean"
-    },
+    // isLoading: {
+    //   control: "boolean"
+    // },
+    // disableFilters: {
+    //   control: "boolean"
+    // },
+    // disablePagination: {
+    //   control: "boolean"
+    // },
     onAddAction: {
       action: "onAddAction"
     }
   },
+  args: {
+    availableActions: availableActions.map(({ name, title }) => ({
+      label: title,
+      value: name
+    })),
+    data: data as never,
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit",
+        permissionsResolver() {
+          return true;
+        }
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver() {
+          return true;
+        }
+      }
+    ]
+  },
   parameters: {}
 } satisfies Meta<typeof ActionsTable>;
 
 type Story = StoryObj<typeof ActionsTable>;
 
-export const Sandbox: Story = {
+export const Usage: Story = {
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
 
     const select = canvas.getByTestId("action-table-select");
     const addButton = canvas.getByTestId("action-table-add");
 
-    expect(addButton).toHaveAttribute("disabled");
+    await expect(addButton).toHaveAttribute("disabled");
 
     await userEvent.selectOptions(select, "save", {
       delay: 100
@@ -55,56 +84,30 @@ export const Sandbox: Story = {
 
     await userEvent.click(addButton);
 
-    expect(args.onAddAction).toHaveBeenCalledWith("save");
+    await expect(args.onAddAction).toHaveBeenCalledWith("save");
 
     const editButton = await canvas.getByRole("button", { name: /Operation button: Edit/i });
     const deleteButton = await canvas.getByRole("button", { name: /Operation button: delete/i });
 
-    expect(editButton).toBeInTheDocument();
-    expect(deleteButton).toBeInTheDocument();
+    await expect(editButton).toBeInTheDocument();
+    await expect(deleteButton).toBeInTheDocument();
 
     await userEvent.click(editButton);
 
-    expect(args.onClick).toHaveBeenCalledWith(
+    await expect(args.onClick).toHaveBeenCalledWith(
       args.data[0],
       args.operations!.find(({ action }) => action === "edit")
     );
 
     await userEvent.click(deleteButton);
 
-    expect(args.onClick).toHaveBeenCalledWith(
+    await expect(args.onClick).toHaveBeenCalledWith(
       args.data[0],
       args.operations!.find(({ action }) => action === "delete")
     );
   },
   args: {
     onAddAction: fn(),
-    onClick: fn(),
-    availableActions: availableActions.map(({ name, title }) => ({
-      label: title,
-      value: name
-    })),
-    data: data as never,
-    operations: [
-      {
-        title: "Edit",
-        action: "edit",
-        alias: "row",
-        path: "/resources/:resourceId/submissions/:submissionId",
-        icon: "edit",
-        permissionsResolver() {
-          return true;
-        }
-      },
-      {
-        action: "delete",
-        path: "/resources/:resourceId/submissions/:submissionId/delete",
-        icon: "trash",
-        buttonType: "danger",
-        permissionsResolver() {
-          return true;
-        }
-      }
-    ]
+    onClick: fn()
   }
 };

package/src/organisms/table/actions/ActionsTable.tsx

@@ -1,44 +1,40 @@
+import { ColumnDef } from "@tanstack/react-table";
 import classnames from "classnames";
 import noop from "lodash/noop";
 import { useState } from "react";
 
-import { ActionType } from "../../../interfaces";
+import { useI18n } from "../../../hooks/useI18n.js";
+import { ActionType, type FormOptions } from "../../../interfaces";
 import { Select } from "../../../molecules/forms/select/Select";
-import { Table, type TableProps } from "../../../molecules/table";
+import { Table, type TableProps } from "../../../molecules/table/Table";
 import { iconClass } from "../../../utils/iconClass";
 
 export type ActionsTableProps = Omit<TableProps<ActionType>, "columns"> & {
   onAddAction?: (actionName: string) => void;
   availableActions?: { label: string; value: string }[];
+  i18n?: FormOptions["i18n"];
 };
 
-export function ActionsTable({
-  disableFilters = true,
-  disablePagination = true,
-  availableActions = [],
-  onAddAction = noop,
-  ...props
-}: ActionsTableProps) {
-  const { i18n = (f: string) => f } = props;
+export function ActionsTable({ availableActions = [], onAddAction = noop, ...props }: ActionsTableProps) {
+  const { t } = useI18n(props.i18n);
   const [currentAction, setAction] = useState("");
 
-  const columns = [
+  const columns: ColumnDef<ActionType>[] = [
     {
-      Header: i18n("Actions"),
-      accessor: "title",
-      id: "title"
+      header: t("Action"),
+      accessorKey: "title"
     }
   ];
 
   return (
-    <Table {...props} disableFilters={disableFilters} disablePagination={disablePagination} columns={columns}>
+    <Table {...props} columns={columns}>
       <div className={"pagination-group"}>
         <Select
           data-testid={"action-table-select"}
           name={"actions"}
           value={currentAction}
-          options={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
-          onChange={(name: string, action: string) => setAction(action)}
+          options={[{ label: t("Select an action"), value: "" }].concat(availableActions)}
+          onChange={(_, action) => setAction(action)}
         />
         <div className={"pl-3"}>
           <button
@@ -48,7 +44,7 @@ export function ActionsTable({
             onClick={() => currentAction && onAddAction(currentAction)}
             type={"submit"}
           >
-            <i className={classnames(iconClass(undefined, "plus"), "mr-1")} /> {i18n("Add action")}
+            <i className={classnames(iconClass(undefined, "plus"), "mr-1")} /> {t("Add action")}
           </button>
         </div>
       </div>

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

@@ -1,7 +1,9 @@
 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";
 

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

@@ -1,36 +1,66 @@
+import "./components/FormsCell.js";
+
+import { ColumnDef } from "@tanstack/react-table";
+
+import { useI18n } from "../../../hooks/useI18n.js";
 import type { FormType } from "../../../interfaces";
-import { DefaultColumnFilter, SelectColumnFilter, Table, TableProps } from "../../../molecules/table";
-import { FormsCell as DefaultFormCell } from "./components/FormCell";
+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"> & {
-  icon?: string;
   tags?: { label: string; value: string }[];
 };
 
-export function FormsTable({ Cell, ...props }: FormsTableProps) {
-  const { i18n = (f: string) => f, tags } = props;
-  const FormCell = Cell || (DefaultFormCell as any);
-  const columns = [
+export function FormsTable({ tags, ...props }: FormsTableProps) {
+  const { t } = useI18n(props.i18n);
+  const Cell = getComponent<typeof FormsCell>("FormsCell");
+
+  const columns: ColumnDef<any>[] = [
     {
-      Header: i18n("Title"),
-      accessor: "title",
-      id: "title",
-      Cell: (props: any) => <FormCell {...props} icon={props.icon} i18n={i18n} />,
-      Filter: DefaultColumnFilter,
-      colspan: 2
+      header: t("Title"),
+      accessorKey: "title",
+      cell: (context) => <Cell {...context} i18n={t} />,
+      meta: {
+        cellProps: {
+          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} />
-        )
+      header: t("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/organisms/table/submissions/SubmissionsTable.stories.tsx

@@ -2,17 +2,46 @@ import "../../../molecules/button/Button";
 import "../../../molecules/forms/input-text/InputText";
 import "../../../molecules/forms/select/all";
 import "../../../molecules/pagination/all";
+import "../../../molecules/table/all";
 
+import { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 
 import { mapPagination } from "../../../utils/mapPagination";
-import FormType from "../../__fixtures__/form-schema.json";
+import FormSchema from "../../__fixtures__/form-schema.json";
 import formSubmissions from "../../__fixtures__/form-submissions.json";
 import { SubmissionsTable } from "./SubmissionsTable";
 
+function Wrapper(args: any) {
+  const [skip, setSkip] = useState(0);
+  const [limit, setLimit] = useState(10);
+  const [serverCount] = useState(87);
+
+  const onChange = (obj: any) => {
+    setLimit(obj.pageSize);
+    setSkip(obj.pageIndex * obj.pageSize);
+    args.onChange && args.onChange(obj);
+  };
+
+  return (
+    <SubmissionsTable
+      {...args}
+      onChange={onChange}
+      {...mapPagination({
+        skip,
+        limit,
+        serverCount
+      })}
+    />
+  );
+}
+
 /**
+ * SubmissionsTable component displays form submissions in a table format with filtering,
+ * pagination, and action buttons for each submission.
+ *
  * ```tsx
- * import {SubmissionsTable} from "@tsed/react-formio/organisms/table/submissions/SubmissionsTable";
+ * import { SubmissionsTable } from "@tsed/react-formio/organisms/table/submissions/SubmissionsTable";
  * ```
  */
 export default {
@@ -20,76 +49,91 @@ export default {
   component: SubmissionsTable,
   argTypes: {
     form: {
+      description: "The form schema used to determine table columns",
       control: "object"
     },
     data: {
+      description: "Array of submission data to display in the table",
       control: "object"
     },
     operations: {
+      description: "Array of operations/actions available for each submission",
       control: "object"
     },
-    isLoading: {
-      control: "boolean"
+    onChange: {
+      description: "Callback when table state changes (sorting, filtering, pagination)",
+      action: "onChange"
     },
-    isEmpty: {
-      control: "boolean"
-    },
-    disableFilters: {
-      control: "boolean"
-    },
-    disablePagination: {
-      control: "boolean"
+    i18n: {
+      description: "Internationalization function"
     }
   },
-  parameters: {}
-};
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Component that displays form submissions in a table format with filtering, pagination, and action buttons for each submission."
+      }
+    }
+  },
+  args: {
+    form: FormSchema as any,
+    data: formSubmissions as any[],
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit",
+        permissionsResolver() {
+          return true;
+        }
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver() {
+          return true;
+        }
+      }
+    ]
+  },
+  render: Wrapper
+} satisfies Meta<typeof SubmissionsTable>;
 
-export const Sandbox = (args: any) => {
-  const [skip, setSkip] = useState(0);
-  const [limit, setLimit] = useState(10);
-  const [serverCount] = useState(87);
+type Story = StoryObj<typeof SubmissionsTable>;
 
-  const onChange = (obj: any) => {
-    setLimit(obj.pageSize);
-    setSkip(obj.pageIndex * obj.pageSize);
-    args.onChange && args.onChange(obj);
-  };
+/**
+ * Standard table with default settings
+ */
+export const Default: Story = {};
 
-  return (
-    <SubmissionsTable
-      {...args}
-      onChange={onChange}
-      {...mapPagination({
-        skip,
-        limit,
-        serverCount
-      })}
-    />
-  );
+/**
+ * Empty table with no data
+ */
+export const Empty: Story = {
+  args: {
+    data: []
+  }
 };
 
-Sandbox.args = {
-  form: FormType,
-  data: formSubmissions,
-  operations: [
-    {
-      title: "Edit",
-      action: "edit",
-      alias: "row",
-      path: "/resources/:resourceId/submissions/:submissionId",
-      icon: "edit",
-      permissionsResolver() {
-        return true;
-      }
-    },
-    {
-      action: "delete",
-      path: "/resources/:resourceId/submissions/:submissionId/delete",
-      icon: "trash",
-      buttonType: "danger",
-      permissionsResolver() {
-        return true;
-      }
+/**
+ * Table with custom translations
+ */
+export const Translated: Story = {
+  args: {
+    i18n: {
+      "Search...": "Rechercher...",
+      "No results found": "Aucun résultat trouvé",
+      "Loading...": "Chargement...",
+      Page: "Page",
+      of: "sur",
+      rows: "lignes",
+      Edit: "Éditer",
+      Delete: "Supprimer"
     }
-  ]
+  }
 };

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

@@ -1,12 +1,19 @@
-import type { FormType, SubmissionType } from "../../../interfaces";
-import { mapFormToColumns, Table, type TableProps } from "../../../molecules/table";
+import type { FormType, JSON, 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"> & {
+export type SubmissionsTableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<
+  TableProps<SubmissionType<Data>>,
+  "columns"
+> & {
   form?: FormType;
 };
 
-export function SubmissionsTable({ form, ...props }: SubmissionsTableProps) {
+export function SubmissionsTable<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  form,
+  ...props
+}: SubmissionsTableProps<Data>) {
   const columns: any[] | undefined = form && mapFormToColumns(form);
 
-  return <Table {...props} columns={columns!} />;
+  return <Table {...(props as any)} columns={columns!} />;
 }