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

package/src/{components/modal/removeModal.component.tsx → organisms/modal/RemoveModal.tsx}

@@ -1,9 +1,9 @@
 import classnames from "classnames";
 import { PropsWithChildren, useState } from "react";
 
+import { InputText } from "../../molecules/forms/input-text/InputText";
+import { Modal, ModalProps } from "../../molecules/modal/Modal";
 import { iconClass } from "../../utils/iconClass";
-import { InputText } from "../input-text/inputText.component";
-import { Modal, ModalProps } from "./modal.component";
 
 function RemoveModalFooter({ value, valueToCompare, onSubmit, onClose, i18n = (f: string) => f }: ModalProps) {
   return (

package/src/{components/actions-table/actionsTable.component.spec.tsx → organisms/table/actions/ActionsTable.spec.tsx}

@@ -1,9 +1,12 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import "../../../molecules/forms/select/all.ts";
+import "../../../molecules/table/all.ts";
+
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
-import availableActions from "../__fixtures__/form-actions.json";
+import availableActions from "../../__fixtures__/form-actions.json";
 import data from "./__fixtures__/data.json";
-import { ActionsTable } from "./actionsTable.component";
+import { ActionsTable } from "./ActionsTable";
 
 const args: any = {
   data: data,
@@ -42,12 +45,13 @@ describe("ActionsTable", () => {
 
     const btn = screen.getByTestId("action-table-add");
     const cells = screen.getAllByRole("cell");
-    const options = screen.getAllByRole("option");
+    const options = within(screen.getByTestId("action-table-select")).getAllByRole("option");
 
     expect(btn).toHaveProperty("disabled");
     expect(btn.innerHTML).toMatch("Add action");
     expect(cells[0].innerHTML).toMatch("Save Submission");
-    expect(options.length).toEqual(availableActions.length + 1);
+
+    expect(options.length).toEqual(17);
 
     expect(options[0].innerHTML).toMatch("Select an action");
     expect(options[1].innerHTML).toMatch("Webhook (Premium)");
@@ -68,9 +72,9 @@ describe("ActionsTable", () => {
     render(<ActionsTable {...args} onAddAction={onAddAction} />);
 
     const btn = screen.getByTestId("action-table-add");
-    const select = screen.getByRole("combobox");
+    const select = screen.getByTestId("action-table-select");
 
-    await userEvent.selectOptions(select, String(args.availableActions[1].value));
+    await userEvent.selectOptions(select, "sql");
 
     fireEvent.click(btn);
 

package/src/{components/actions-table/actionsTable.stories.tsx → organisms/table/actions/ActionsTable.stories.tsx}

@@ -1,56 +1,82 @@
+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 availableActions from "../__fixtures__/form-actions.json";
+import availableActions from "../../__fixtures__/form-actions.json";
 import data from "./__fixtures__/data.json";
-import { ActionsTable } from "./actionsTable.component";
+import { ActionsTable } from "./ActionsTable";
 
+/**
+ * ```tsx
+ * import {ActionsTable} from "@tsed/react-formio/organisms/table/actions/ActionsTable";
+ * ```
+ */
 export default {
-  title: "ReactFormio/ActionsTable",
+  title: "table/actions/ActionsTable",
   component: ActionsTable,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     operations: {
-      control: {
-        type: "object"
-      }
-    },
-    isLoading: {
-      control: {
-        type: "boolean"
-      }
-    },
-    disableFilters: {
-      control: {
-        type: "boolean"
-      }
-    },
-    disablePagination: {
-      control: {
-        type: "boolean"
-      }
+      control: "object"
     },
+    // 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
@@ -58,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/{components/actions-table/actionsTable.component.tsx → organisms/table/actions/ActionsTable.tsx}

@@ -1,45 +1,38 @@
+import { ColumnDef } from "@tanstack/react-table";
 import classnames from "classnames";
 import noop from "lodash/noop";
 import { useState } from "react";
 
-import { ActionSchema } from "../../interfaces";
-import { iconClass } from "../../utils/iconClass";
-import { Select } from "../select/select.component";
-import { TableProps } from "../table/hooks/useCustomTable.hook";
-import { Table } from "../table/table.component";
+import { ActionType } from "../../../interfaces";
+import { Select } from "../../../molecules/forms/select/Select";
+import { Table, type TableProps } from "../../../molecules/table/Table";
+import { iconClass } from "../../../utils/iconClass";
 
-export type ActionsTableProps = Omit<TableProps<ActionSchema>, "columns"> & {
+export type ActionsTableProps = Omit<TableProps<ActionType>, "columns"> & {
   onAddAction?: (actionName: string) => void;
   availableActions?: { label: string; value: string }[];
 };
 
-export function ActionsTable({
-  disableFilters = true,
-  disablePagination = true,
-  availableActions = [],
-  onAddAction = noop,
-  ...props
-}: ActionsTableProps) {
+export function ActionsTable({ availableActions = [], onAddAction = noop, ...props }: ActionsTableProps) {
   const { i18n = (f: string) => f } = props;
   const [currentAction, setAction] = useState("");
 
-  const columns = [
+  const columns: ColumnDef<ActionType>[] = [
     {
-      Header: i18n("Actions"),
-      accessor: "title",
-      id: "title"
+      header: i18n("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}
-          choices={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
-          onChange={(name: string, action: string) => setAction(action)}
+          options={[{ label: i18n("Select an action"), value: "" }].concat(availableActions)}
+          onChange={(_, action) => setAction(action)}
         />
         <div className={"pl-3"}>
           <button

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

@@ -1,51 +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 { 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/organisms/table/submissions/SubmissionsTable.stories.tsx

@@ -0,0 +1,142 @@
+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";
+import { useState } from "react";
+
+import { mapPagination } from "../../../utils/mapPagination";
+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";
+ * ```
+ */
+export default {
+  title: "table/submissions/SubmissionsTable",
+  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"
+    },
+    onChange: {
+      description: "Callback when table state changes (sorting, filtering, pagination)",
+      action: "onChange"
+    },
+    i18n: {
+      description: "Internationalization function"
+    }
+  },
+  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,
+    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>;
+
+type Story = StoryObj<typeof SubmissionsTable>;
+
+/**
+ * Standard table with default settings
+ */
+export const Default: Story = {};
+
+/**
+ * Empty table with no data
+ */
+export const Empty: Story = {
+  args: {
+    data: []
+  }
+};
+
+/**
+ * Table with custom translations
+ */
+export const Translated: Story = {
+  args: {
+    i18n: (key: string) => {
+      const translations: Record<string, string> = {
+        "Search...": "Rechercher...",
+        "No results found": "Aucun résultat trouvé",
+        "Loading...": "Chargement...",
+        Page: "Page",
+        of: "sur",
+        rows: "lignes",
+        Edit: "Éditer",
+        Delete: "Supprimer"
+      };
+      return translations[key] || key;
+    }
+  }
+};

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

@@ -0,0 +1,19 @@
+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<Data extends { [key: string]: JSON } = { [key: string]: JSON }> = Omit<
+  TableProps<SubmissionType<Data>>,
+  "columns"
+> & {
+  form?: FormType;
+};
+
+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 as any)} columns={columns!} />;
+}