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

package/src/molecules/pagination/Pagination.tsx

@@ -1,52 +1,55 @@
 import classnames from "classnames";
 
+import { useI18n } from "../../hooks/useI18n.js";
+import type { FormOptions } from "../../interfaces/index.js";
 import { getComponent, registerComponent } from "../../registries/components";
 import type { Select as DefaultSelect } from "../forms/select/Select";
-import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table";
 import type { PaginationButton as DefaultPaginationButton } from "./PaginationButton";
+import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "./utils/getPageNumbers.js";
 
 export interface PaginationProps {
   className?: string;
   pageSizes?: number[];
-  gotoPage: any;
   canPreviousPage: boolean;
-  previousPage: any;
-  nextPage: any;
   canNextPage: boolean;
   pageCount: number;
   pageIndex: number;
   pageOptions?: number[];
   pageSize: number;
-  setPageSize: any;
-  totalLength?: number;
+  rowCount?: number;
   layout?: "html5" | "react" | "choicesjs";
-  i18n?: (f: string) => string;
+  i18n?: FormOptions["i18n"];
+  onPageIndexChange: (pageIndex: number) => void;
+  onClickPreviousPage: () => void;
+  onClickNextPage: () => void;
+  onPageSizeChange: (pageSize: number) => void;
 }
 
 export function Pagination(props: PaginationProps) {
   const {
     className,
     pageSizes = [10, 25, 50, 100],
-    gotoPage,
+    onPageIndexChange,
     canPreviousPage,
-    previousPage,
-    nextPage,
+    onClickPreviousPage,
+    onClickNextPage,
     canNextPage,
     pageCount,
     pageIndex = 1,
     pageOptions,
     pageSize,
-    setPageSize,
-    totalLength,
-    i18n = (f: string) => f
+    onPageSizeChange,
+    rowCount
   } = props;
+  const { t } = useI18n(props.i18n);
 
   const pageNumbers = getPageNumbers({
     currentPage: pageIndex,
     // pageNeighbours,
     totalPages: pageCount
   });
-  const choices: any[] = pageSizes.map((value) => ({ value, label: value }));
+
+  const options: any[] = pageSizes.map((value) => ({ value, label: value }));
   const Select = getComponent<typeof DefaultSelect>("Select");
   const PaginationButton = getComponent<typeof DefaultPaginationButton>("PaginationButton");
 
@@ -54,8 +57,8 @@ export function Pagination(props: PaginationProps) {
     <nav aria-label='Page navigation' className={classnames("pagination-group -mb-3", className)}>
       <ul className='pagination mb-3 mr-3'>
         <li className={classnames("page-item", !canPreviousPage && "disabled")}>
-          <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => previousPage()}>
-            {i18n("Previous")}
+          <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => onClickPreviousPage()}>
+            {t("Previous")}
           </PaginationButton>
         </li>
 
@@ -71,7 +74,7 @@ export function Pagination(props: PaginationProps) {
           const active = page - 1 === pageIndex;
           return (
             <li className={classnames("page-item", active && "active")} key={page}>
-              <PaginationButton tabIndex={pageIndex} active={active} onClick={() => gotoPage(page - 1)}>
+              <PaginationButton tabIndex={pageIndex} active={active} onClick={() => onPageIndexChange(page - 1)}>
                 {page}
               </PaginationButton>
             </li>
@@ -79,8 +82,8 @@ export function Pagination(props: PaginationProps) {
         })}
 
         <li className={classnames("page-item", !canNextPage && "disabled")}>
-          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => nextPage()}>
-            {i18n("Next")}
+          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => onClickNextPage()}>
+            {t("Next")}
           </PaginationButton>
         </li>
       </ul>
@@ -89,26 +92,26 @@ export function Pagination(props: PaginationProps) {
         <Select<number>
           name={"page"}
           value={pageSize}
-          options={choices}
+          options={options}
           multiple={false}
           layout={props.layout}
           onChange={(_, value) => {
-            setPageSize(+value);
+            onPageSizeChange(+value);
           }}
         />
-        <span className={"ml-3"}>{i18n("items per page")}</span>
+        <span className={"ml-3"}>{t("items per page")}</span>
       </li>
       {pageOptions && (
         <li className={"mb-3 mr-3 flex items-center"}>
-          <span>{i18n("Page")}&nbsp;</span>
+          <span>{t("Page")}&nbsp;</span>
           <strong>
             {pageIndex + 1} of {pageOptions.length}
           </strong>
         </li>
       )}
-      {totalLength !== undefined && (
+      {rowCount !== undefined && (
         <li className={"mb-3 flex items-center"} data-testid='pagination-total-items'>
-          {i18n("Total")}: <strong className='mx-1'>{new Intl.NumberFormat(undefined).format(totalLength)}</strong> {i18n("items")}
+          {t("Total")}: <strong className='mx-1'>{new Intl.NumberFormat(undefined).format(rowCount)}</strong> {t("items")}
         </li>
       )}
     </nav>

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()
+  }
 };