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

package/src/molecules/table/Table.stories.tsx

@@ -1,122 +1,305 @@
-import "../pagination/all";
-import "../forms/select/all";
+import "./all";
 
-import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
 
-import { mapPagination } from "../../utils/mapPagination";
+import { SubmissionType } from "../../interfaces";
 import FormType from "../__fixtures__/form-schema.json";
 import formSubmissions from "../__fixtures__/form-submissions.json";
 import { Table } from "./Table";
 import { mapFormToColumns } from "./utils/mapFormToColumns";
+
+const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+type ProductSubmission = SubmissionType<{
+  id: string;
+  label: string;
+  description: string;
+  image: string;
+  price?: number;
+  currency?: string;
+}>;
+/**
+ * Table component.
+ *
+ * You can import this component and use it like:
+ *
+ * ```tsx
+ * import {Table} from "@tsed/react-formio/molecules/table/all"
+ *
+ * or
+ *
+ * import {Table} from "@tsed/react-formio/molecules/table/Table";
+ * ```
+ *
+ * Table component support DI container and can be used with custom component. Here is the list of components that you can override:
+ *
+ * - DefaultFilter
+ * - DefaultArrowSort
+ * - DefaultCell
+ * - DefaultCellOperations
+ * - DefaultOperationButton
+ * - DefaultCellHeader
+ * - DefaultCellFooter
+ * - TextFieldFilter
+ * - SelectFilter
+ * - RangeFilter
+ *
+ * ```tsx
+ * function CustomDefaultFilter() {
+ *
+ * }
+ *
+ * registerComponent("DefaultFilter", DefaultFilter);
+ * ```
+ */
 export default {
   title: "Table",
   component: Table,
-  argTypes: {},
+  argTypes: {
+    onClick: {
+      description: "Click event",
+      action: "onClick"
+    },
+    onChange: {
+      description: "Change event",
+      action: "onChange"
+    }
+  },
   parameters: {}
-};
+} satisfies Meta<typeof Table>;
+
+type Story = StoryObj<typeof Table<ProductSubmission>>;
+
+export const Usage: Story = {
+  args: {
+    data: formSubmissions as unknown as ProductSubmission[],
+    columns: mapFormToColumns(FormType as any),
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit"
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver({ data }: any) {
+          return data.id === "CSKC";
+        }
+      }
+    ],
+    i18n: {},
+    onClick: fn(),
+    onChange: fn()
+  },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+
+    // check headers information
+    await expect(canvas.getByTestId("head-cell-data_id")).toHaveTextContent("Id");
+    await expect(canvas.getByTestId("head-cell-data_label")).toHaveTextContent("Label");
+
+    // check body information
+    await expect(canvas.getByTestId("body-row-0")).toBeDefined();
+    await expect(canvas.getByTestId("body-cell-0_data_id")).toHaveTextContent("CSKC");
+    await expect(canvas.getByTestId("body-cell-0_data_label")).toHaveTextContent("Cap Skirring");
+
+    const editButton = canvas.getByTestId("operation-0-edit");
+
+    await userEvent.click(editButton);
+
+    await expect(args.onClick).toHaveBeenCalledWith(formSubmissions[0], args.operations[0]);
+
+    const deleteButton = canvas.getByTestId("operation-0-delete");
+
+    await userEvent.click(deleteButton);
+    await expect(args.onClick).toHaveBeenCalledWith(formSubmissions[0], args.operations[1]);
+
+    await expect(canvas.queryByTestId("operation-1-delete")).not.toBeInTheDocument();
+
+    // check sorting
+    const sortId = canvas.getByTestId("head-sort-data_id");
+    const thId = canvas.getByTestId("head-cell-data_id");
+
+    await userEvent.click(sortId, { delay: 200 });
 
-export const Sandbox = (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 (
-    <Table
-      {...args}
-      onChange={onChange}
-      {...mapPagination({
-        skip,
-        limit,
-        serverCount
-      })}
-    />
-  );
+    await expect(args.onChange).toHaveBeenCalledWith({
+      columnSizing: {},
+      columnSizingInfo: {
+        startOffset: null,
+        startSize: null,
+        deltaOffset: null,
+        deltaPercentage: null,
+        isResizingColumn: false,
+        columnSizingStart: []
+      },
+      rowSelection: {},
+      rowPinning: { top: [], bottom: [] },
+      expanded: {},
+      grouping: [],
+      sorting: [],
+      columnFilters: [],
+      columnPinning: { left: [], right: [] },
+      columnOrder: [],
+      columnVisibility: {},
+      pagination: { pageIndex: 0, pageSize: 10 }
+    });
+
+    await expect(sortId).toHaveAttribute("aria-pressed", "false");
+    await expect(thId).toHaveAttribute("aria-sort", "ascending");
+
+    await userEvent.click(sortId, { delay: 200 });
+
+    await expect(sortId).toHaveAttribute("aria-pressed", "true");
+    await expect(thId).toHaveAttribute("aria-sort", "descending");
+
+    await userEvent.click(sortId, { delay: 200 });
+
+    await expect(sortId).not.toHaveAttribute("aria-pressed");
+    await expect(thId).toHaveAttribute("aria-sort", "none");
+
+    // check filtering
+    const filterLabel = canvas.getByTestId("input_filter_data_label");
+
+    await userEvent.type(filterLabel, "La caravelle", { delay: 200 });
+
+    await waitFor(() => {
+      return expect(canvas.queryByText("MPEC")).not.toBeInTheDocument();
+    });
+
+    await expect(canvas.getByText("La Caravelle")).toBeInTheDocument();
+
+    await delay(300);
+
+    await userEvent.clear(filterLabel);
+  }
 };
 
-Sandbox.args = {
-  data: formSubmissions,
-  columns: mapFormToColumns(FormType as any),
-  operations: [
-    {
-      title: "Edit",
-      action: "edit",
-      alias: "row",
-      path: "/resources/:resourceId/submissions/:submissionId",
-      icon: "edit",
-      permissionsResolver() {
-        return true;
+export const WithFilters: Story = {
+  args: {
+    data: formSubmissions as unknown as ProductSubmission[],
+    columns: mapFormToColumns(FormType as any, [
+      {
+        accessorKey: "data.id",
+        meta: {
+          filter: {
+            variant: "select",
+            layout: "react"
+          }
+        }
       }
-    },
-    {
-      action: "delete",
-      path: "/resources/:resourceId/submissions/:submissionId/delete",
-      icon: "trash",
-      buttonType: "danger",
-      permissionsResolver() {
-        return true;
+    ]),
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit"
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver({ data }: any) {
+          return data.id === "MPEC";
+        }
       }
-    }
-  ]
+    ],
+    i18n: {},
+    onClick: fn()
+  }
 };
 
-export const TableWithDragNDrop = (args: any) => {
-  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);
-    setSkip(obj.pageIndex * obj.pageSize);
-    args.onChange && args.onChange(obj);
-  };
-
-  return (
-    <Table
-      {...args}
-      data={data}
-      onChange={onChange}
-      {...mapPagination({
-        skip,
-        limit,
-        serverCount
-      })}
-      onDrag={(data) => {
-        setData(data);
-      }}
-    />
-  );
-};
+export const WithCustomCell: Story = {
+  args: {
+    data: formSubmissions as unknown as ProductSubmission[],
+    columns: mapFormToColumns<ProductSubmission>(FormType as any, [
+      {
+        accessorKey: "data.id",
+        meta: {
+          filter: {
+            variant: "select",
+            layout: "react"
+          },
+          cellProps: {
+            colSpan: 2
+          }
+        },
+        cell: (context) => {
+          return (
+            <div className='flex space-x-4 align-items-center'>
+              <div className='max-w-[80px]'>
+                <img className='max-w-[80px] rounded-md' src={context.row.original.data.image} alt={context.row.original.data.label} />
+              </div>
+              <div>
+                <div className='text-lg text-primary'>{context.row.original.data.label}</div>
+                <div className='text-xs'>{context.getValue()}</div>
+              </div>
+            </div>
+          );
+        }
+      },
+      {
+        accessorKey: "data.label",
+        meta: {
+          hidden: true
+        }
+      },
+      {
+        accessorKey: "data.description",
+        meta: {
+          filter: {
+            variant: "text",
+            disableDatalist: true
+          }
+        }
+      },
+      {
+        accessorKey: "data.price",
+        cell: (context) => {
+          const value = context.getValue();
+
+          if (value === undefined) {
+            return "-";
+          }
 
-TableWithDragNDrop.args = {
-  enableDragNDrop: true,
-  data: [],
-  columns: mapFormToColumns(FormType as any),
-  operations: [
-    {
-      title: "Edit",
-      action: "edit",
-      alias: "row",
-      path: "/resources/:resourceId/submissions/:submissionId",
-      icon: "edit",
-      permissionsResolver() {
-        return true;
+          return (
+            <div className='text-right'>
+              {Intl.NumberFormat("fr-FR", {
+                style: "currency",
+                currency: context.row.original.data.currency
+              }).format(context.getValue())}
+            </div>
+          );
+        }
       }
-    },
-    {
-      action: "delete",
-      path: "/resources/:resourceId/submissions/:submissionId/delete",
-      icon: "trash",
-      buttonType: "danger",
-      permissionsResolver() {
-        return true;
+    ]),
+    operations: [
+      {
+        title: "Edit",
+        action: "edit",
+        alias: "row",
+        path: "/resources/:resourceId/submissions/:submissionId",
+        icon: "edit"
+      },
+      {
+        action: "delete",
+        path: "/resources/:resourceId/submissions/:submissionId/delete",
+        icon: "trash",
+        buttonType: "danger",
+        permissionsResolver({ data }: any) {
+          return data.id === "MPEC";
+        }
       }
-    }
-  ]
+    ],
+    i18n: {},
+    onClick: fn()
+  }
 };

package/src/molecules/table/Table.tsx

@@ -1,101 +1,106 @@
-import classnames from "classnames";
+import { flexRender } from "@tanstack/react-table";
+import cx from "classnames";
 import { PropsWithChildren } from "react";
 
-import { PaginationProps } from "../../molecules/pagination/Pagination";
-import { DrapNDropContainer } from "./components/DragNDropContainer";
-import { TableProps, useCustomTable } from "./hooks/useCustomTable";
+import type { JSON } from "../../interfaces/index.js";
+import { getComponent } from "../../registries/components";
+import type { Pagination as DefaultPagination } from "../pagination/Pagination";
+import type { DefaultCellFooter } from "./components/DefaultCellFooter";
+import type { DefaultCellHeader } from "./components/DefaultCellHeader";
+import { useTable, UseTableProps } from "./hooks/useTable";
 
-export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
-  const {
-    className,
-    tableInstance,
-    CellHeader,
-    isLoading,
-    onClick,
-    Loader,
-    EmptyData,
-    Row,
-    data,
-    disablePagination,
-    Pagination,
-    pageIndex,
-    pageSize,
-    pageSizes,
-    setPageSize,
-    totalLength,
-    i18n,
-    enableDragNDrop,
-    children,
-    onDrag,
-    onDrop
-  } = useCustomTable(props);
+export interface TableProps<Data extends { [key: string]: JSON } = { [key: string]: JSON }> extends UseTableProps<Data> {
+  className?: string;
+
+  enableFooter?: boolean;
+
+  pageSizes?: number[];
+}
+
+export function Table<Data extends { [key: string]: JSON } = { [key: string]: JSON }>({
+  className,
+  enableFooter,
+  children,
+  ...props
+}: PropsWithChildren<TableProps<Data>>) {
+  const { tableInstance, i18n } = useTable<Data>(props);
+  const CellHeader = getComponent<typeof DefaultCellHeader>("CellHeader");
+  const CellFooter = getComponent<typeof DefaultCellFooter>("CellFooter");
+  const Pagination = getComponent<typeof DefaultPagination>("Pagination");
+
+  const { pagination } = tableInstance.getState();
 
-  // Render the UI for your table
   return (
-    <DrapNDropContainer enableDragNDrop={enableDragNDrop}>
-      <div className={classnames("table-group table-responsive", className)}>
-        <table
-          className={"table table-striped table-hover"}
-          {...tableInstance.getTableProps()}
-          /* style={{ marginBottom: disablePagination ? "-1px" : "0px" }} */
-        >
-          <thead>
-            {tableInstance.headerGroups.map((headerGroup, i) => (
-              <tr {...headerGroup.getHeaderGroupProps()} key={`tableInstance.headerGroups${i}`}>
-                {enableDragNDrop ? (
-                  <th role='columnheader' className='text-center'>
-                    <div className='table-cell-header'></div>
-                  </th>
-                ) : null}
-                {headerGroup.headers.map((column) => (
+    <div className={cx("table-group table-responsive", className)}>
+      <table className='table table-striped table-hover'>
+        <thead>
+          {tableInstance.getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id}>
+              {headerGroup.headers.map((header) => {
+                const sort = header.column.getIsSorted();
+                return (
                   <th
-                    /* className='text-left py-2 align-top' */
-                    {...column.getHeaderProps()}
-                    key={`tableInstance.headers.column.${column.id}`}
+                    data-testid={`head-cell-${header.id}`}
+                    key={header.id}
+                    aria-sort={sort ? (sort === "asc" ? "ascending" : "descending") : "none"}
                   >
-                    <CellHeader column={column} />
+                    {header.isPlaceholder ? null : <CellHeader header={header} i18n={i18n} />}
                   </th>
+                );
+              })}
+            </tr>
+          ))}
+        </thead>
+        <tbody>
+          {tableInstance.getRowModel().rows.map((row) => {
+            return (
+              <tr key={row.id} data-testid={`body-row-${row.id}`}>
+                {row
+                  .getVisibleCells()
+                  .filter((cell) => !cell.column.columnDef.meta?.hidden)
+                  .map((cell) => {
+                    return (
+                      <td {...cell.column.columnDef?.meta?.cellProps} key={cell.id} data-testid={`body-cell-${cell.id}`}>
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </td>
+                    );
+                  })}
+              </tr>
+            );
+          })}
+        </tbody>
+        {enableFooter && (
+          <tfoot>
+            {tableInstance.getFooterGroups().map((footerGroup) => (
+              <tr key={footerGroup.id}>
+                {footerGroup.headers.map((header) => (
+                  <th key={header.id}>{header.isPlaceholder ? null : <CellFooter header={header} i18n={i18n} />}</th>
                 ))}
               </tr>
             ))}
-          </thead>
-          {!isLoading ? (
-            <tbody {...tableInstance.getTableBodyProps()}>
-              {(tableInstance as unknown as { page: any[] }).page.map((row: any, index: number) => {
-                tableInstance.prepareRow(row);
-                return (
-                  <Row<Data>
-                    index={index}
-                    enableDragNDrop={enableDragNDrop}
-                    onClick={onClick}
-                    row={row}
-                    key={`tableInstance.page.${row.id}`}
-                    onDrag={onDrag}
-                    onDrop={onDrop}
-                  />
-                );
-              })}
-            </tbody>
-          ) : null}
-        </table>
-        {isLoading ? <Loader /> : null}
-        {!data.length ? <EmptyData /> : null}
-        {!isLoading && data.length && !disablePagination ? (
-          <div className={"overflow-hidden"}>
-            <Pagination
-              {...(tableInstance as unknown as PaginationProps)}
-              totalLength={totalLength}
-              className={"text-sm"}
-              pageIndex={pageIndex}
-              pageSize={pageSize}
-              pageSizes={pageSizes}
-              setPageSize={setPageSize}
-              i18n={i18n}
-            />
-          </div>
+          </tfoot>
+        )}
+      </table>
+      <div className={"overflow-hidden flex flex-wrap"}>
+        {props.data.length && pagination ? (
+          <Pagination
+            className={"flex-1"}
+            canNextPage={tableInstance.getCanNextPage()}
+            canPreviousPage={tableInstance.getCanPreviousPage()}
+            pageIndex={pagination.pageIndex}
+            pageSize={pagination.pageSize}
+            pageSizes={props.pageSizes}
+            i18n={props.i18n}
+            pageCount={tableInstance.getPageCount()}
+            rowCount={props.rowCount}
+            onPageIndexChange={(page) => tableInstance.setPageIndex(page)}
+            onClickPreviousPage={() => tableInstance.previousPage()}
+            onClickNextPage={() => tableInstance.nextPage()}
+            onPageSizeChange={(pageSize) => tableInstance.setPageSize(pageSize)}
+          />
         ) : null}
-        {children}
+        <div>{children}</div>
       </div>
-    </DrapNDropContainer>
+    </div>
   );
 }

package/src/molecules/table/all.ts

@@ -0,0 +1,16 @@
+import "./components/DefaultFilter";
+import "./components/DefaultArrowSort";
+import "./components/DefaultCell";
+import "./components/DefaultCellOperations";
+import "./components/DefaultOperationButton";
+import "./components/DefaultCellHeader";
+import "./components/DefaultCellFooter";
+// forms
+import "../forms/input-text/InputText";
+import "../forms/select/all";
+// filters
+import "./filters/TextFieldFilter";
+import "./filters/SelectFilter";
+import "./filters/RangeFilter";
+// ui
+import "../pagination/all";

package/src/molecules/table/components/DefaultArrowSort.tsx

@@ -1,10 +1,26 @@
+import type { Header } from "@tanstack/react-table";
+
+import { registerComponent } from "../../../registries/components";
 import { iconClass } from "../../../utils/iconClass";
 
-export function DefaultArrowSort({ column }: any) {
-  const { isSorted, isSortedDesc } = column;
+export interface DefaultArrowSortProps<Data = any> {
+  header: Header<Data, unknown>;
+}
+
+export function DefaultArrowSort<Data>({ header }: DefaultArrowSortProps<Data>) {
+  const sort = header.column.getIsSorted();
+
   return (
-    <span className={"table-arrow-sort"}>
-      {isSorted ? <i className={iconClass(undefined, isSortedDesc ? "sort-up" : "sort-down")} /> : ""}
+    <span
+      data-testid={`head-sort-${header.column.id}`}
+      role='button'
+      aria-label={`Sort by ${header.column.columnDef.header}`}
+      aria-pressed={sort ? sort === "desc" : undefined}
+      className='table-arrow-sort'
+    >
+      {sort ? <i className={iconClass(undefined, sort === "asc" ? "sort-up" : "sort-down")} /> : null}
     </span>
   );
 }
+
+registerComponent("ArrowSort", DefaultArrowSort);

package/src/molecules/table/components/DefaultCell.tsx

@@ -1,4 +1,11 @@
-export function DefaultCell({ value, render = (f: any) => f }: any): JSX.Element {
+import { registerComponent } from "../../../registries/components";
+
+export interface DefaultCellProps<Data = any> {
+  value: Data;
+  render?: (value: Data) => any;
+}
+
+export function DefaultCell<Data = any>({ value, render = (f: any) => f }: DefaultCellProps<Data>): JSX.Element {
   if (value === undefined) {
     return <span></span>;
   }
@@ -11,3 +18,5 @@ export function DefaultCell({ value, render = (f: any) => f }: any): JSX.Element
 
   return <span>{String(value)}</span>;
 }
+
+registerComponent("Cell", DefaultCell);