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

package/src/{components/pagination/pagination.component.spec.tsx → molecules/pagination/Pagination.spec.tsx}

@@ -1,10 +1,16 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 
-import { Sandbox } from "./pagination.stories";
+import { Pagination } from "./all";
+
+const args: any = {
+  pageSizes: [10, 25, 50, 100],
+  pageCount: 50,
+  pageIndex: 1
+};
 
 describe("Pagination", () => {
   it("should render the pagination component", () => {
-    render(<Sandbox {...Sandbox.args} />);
+    render(<Pagination {...args} />);
 
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const allBtnBlocks = paginationBtn.map((bloc) => bloc.textContent);
@@ -16,9 +22,9 @@ describe("Pagination", () => {
     expect(allBtnBlocks[allBtnBlocks.length - 1]).toBe("Next");
   });
 
-  it("should call previousPage() callback", () => {
+  it("should call onClickPreviousPage() callback", () => {
     const previousPageSpy = vi.fn();
-    render(<Sandbox previousPage={previousPageSpy} canPreviousPage={true} />);
+    render(<Pagination {...args} onClickPreviousPage={previousPageSpy} canPreviousPage={true} />);
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
 
@@ -27,20 +33,20 @@ describe("Pagination", () => {
     expect(previousPageSpy).toHaveBeenCalledTimes(1);
   });
 
-  it("should call nextPage() callback", () => {
+  it("should call onClickNextPage() callback", () => {
     const nextPageSpy = vi.fn();
-    render(<Sandbox nextPage={nextPageSpy} canNextPage={true} />);
+    render(<Pagination {...args} onClickNextPage={nextPageSpy} canNextPage={true} />);
 
     fireEvent.click(screen.getByText(/Next/i));
 
     expect(nextPageSpy).toHaveBeenCalledTimes(1);
   });
 
-  it("should call gotoPage() callback when cliking on a button page", () => {
+  it("should call onPageIndexChange() callback when cliking on a button page", () => {
     const gotoPageSpy = vi.fn();
     let page: number;
 
-    render(<Sandbox {...Sandbox.args} gotoPage={gotoPageSpy} />);
+    render(<Pagination {...args} onPageIndexChange={gotoPageSpy} />);
 
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const buttonsPage = paginationBtn.filter((btn) => btn.textContent !== "Previous" && btn.textContent !== "Next");
@@ -57,7 +63,7 @@ describe("Pagination", () => {
 
   it("should have Previous button disabled and not clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Sandbox canPreviousPage={false} previousPage={previousPageSpy} {...Sandbox.args} />);
+    render(<Pagination canPreviousPage={false} onClickPreviousPage={previousPageSpy} {...args} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -68,7 +74,7 @@ describe("Pagination", () => {
 
   it("should have Previous button NOT disabled and clickable", () => {
     const previousPageSpy = vi.fn();
-    render(<Sandbox {...Sandbox.args} canPreviousPage={true} previousPage={previousPageSpy} />);
+    render(<Pagination {...args} canPreviousPage={true} onClickPreviousPage={previousPageSpy} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -79,7 +85,7 @@ describe("Pagination", () => {
 
   it("should have Next button disabled and not clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />);
+    render(<Pagination canNextPage={false} onClickNextPage={nextPageSpy} {...args} />);
 
     const nextButton = screen.getByText("Next");
     expect(nextButton).toHaveAttribute("disabled");
@@ -89,7 +95,7 @@ describe("Pagination", () => {
 
   it("should have Next button NOT disabled and clickable", () => {
     const nextPageSpy = vi.fn();
-    render(<Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />);
+    render(<Pagination canNextPage={true} onClickNextPage={nextPageSpy} {...args} />);
     const nextButton = screen.getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");
     fireEvent.click(nextButton);
@@ -99,7 +105,7 @@ describe("Pagination", () => {
   it("should correctly render select component", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} />);
+    render(<Pagination {...args} pageSizes={pageSizes} />);
     const selectComp = screen.getByTestId("select_page");
     const selectChilds = Array.prototype.map.call(selectComp, function (child) {
       return +child.textContent;
@@ -112,7 +118,7 @@ describe("Pagination", () => {
   it("should display total length", () => {
     const pageSizes = [10, 25, 50, 100, 200, 500];
 
-    render(<Sandbox {...Sandbox.args} pageSizes={pageSizes} totalLength={1000} />);
+    render(<Pagination {...args} pageSizes={pageSizes} rowCount={1000} />);
 
     expect(screen.getByTestId("pagination-total-items")).toHaveTextContent("1,000 items");
   });

package/src/molecules/pagination/Pagination.stories.tsx

@@ -0,0 +1,92 @@
+import "../forms/select/all";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { useEffect, useState } from "react";
+
+import { Pagination } from "./all";
+
+/**
+ * Pagination component.
+ *
+ * You can import this component and use it like:
+ *
+ * ```tsx
+ * import {Pagination} from "@tsed/react-formio/molecules/pagination/all"
+ *
+ * or
+ *
+ * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
+ * import "@tsed/react-formio/molecules/pagination/PaginationButton";
+ * ```
+ *
+ * Pagination component support DI container and can be used with custom PaginationButton component.
+ *
+ * You can also override the Pagination component with your own implementation:
+ *
+ * ```tsx
+ * function MyPagination(props: PaginationProps) {
+ *
+ * }
+ *
+ * registerComponent("Pagination", MyPagination);
+ * ```
+ */
+export default {
+  title: "Pagination",
+  component: Pagination,
+  parameters: {},
+  argTypes: {
+    pageSizes: {
+      description: "Pagination steps list"
+    },
+    pageCount: {
+      description: "Total number of pages",
+      control: "number"
+    },
+    pageIndex: {
+      description: "Current page index",
+      control: "number"
+    },
+    onPageIndexChange: {
+      description: "Change page index event",
+      action: "onPageIndexChange"
+    },
+    onClickPreviousPage: {
+      description: "Click previous page event",
+      action: "onClickPreviousPage"
+    },
+    onClickNextPage: {
+      description: "Click next page event",
+      action: "onClickNextPage"
+    },
+    onPageSizeChange: {
+      description: "Change page size event",
+      action: "onPageSizeChange"
+    }
+  },
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [currentPageIndex, setPageIndex] = useState(args.pageIndex);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      args.onPageIndexChange && args.onPageIndexChange(currentPageIndex);
+    }, [currentPageIndex]);
+
+    return (
+      <div>
+        <Pagination {...args} pageIndex={currentPageIndex} onPageIndexChange={setPageIndex} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Pagination>;
+
+type Story = StoryObj<typeof Pagination>;
+
+export const Sandbox: Story = {
+  args: {
+    pageSizes: [10, 25, 50, 100],
+    pageCount: 50,
+    pageIndex: 1
+  }
+};

package/src/{components/pagination/pagination.component.tsx → molecules/pagination/Pagination.tsx}

@@ -1,65 +1,44 @@
 import classnames from "classnames";
-import { PropsWithChildren } from "react";
 
-import { Select } from "../select/select.component";
-import { getPageNumbers, LEFT_PAGE, RIGHT_PAGE } from "../table/utils/getPageNumbers";
-
-function PaginationButton(
-  props: PropsWithChildren<
-    {
-      component?: any;
-      disabled?: boolean;
-      className?: string;
-      active?: boolean;
-    } & Record<string, any>
-  >
-) {
-  const { component: Component = "button", children, disabled, active, ...otherProps } = props;
-
-  return (
-    <Component
-      {...otherProps}
-      data-testid='pagination-button'
-      disabled={disabled}
-      className={classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)}
-    >
-      {children}
-    </Component>
-  );
-}
+import { getComponent, registerComponent } from "../../registries/components";
+import type { Select as DefaultSelect } from "../forms/select/Select";
+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;
+
+  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,
+    onPageSizeChange,
+    rowCount,
     i18n = (f: string) => f
   } = props;
 
@@ -68,13 +47,16 @@ export function Pagination(props: PaginationProps) {
     // 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");
 
   return (
     <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()}>
+          <PaginationButton tabIndex={-1} disabled={!canPreviousPage} onClick={() => onClickPreviousPage()}>
             {i18n("Previous")}
           </PaginationButton>
         </li>
@@ -91,7 +73,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>
@@ -99,19 +81,22 @@ export function Pagination(props: PaginationProps) {
         })}
 
         <li className={classnames("page-item", !canNextPage && "disabled")}>
-          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => nextPage()}>
+          <PaginationButton tabIndex={pageNumbers.length} disabled={!canNextPage} onClick={() => onClickNextPage()}>
             {i18n("Next")}
           </PaginationButton>
         </li>
       </ul>
 
       <li className='mb-3 mr-3 flex items-center'>
-        <Select
+        <Select<number>
           name={"page"}
           value={pageSize}
-          choices={choices}
-          onChange={(name: string, value: number) => {
-            setPageSize(+value);
+          options={options}
+          multiple={false}
+          layout={props.layout}
+          onChange={(_, value) => {
+            console.log("On page change", value);
+            onPageSizeChange(+value);
           }}
         />
         <span className={"ml-3"}>{i18n("items per page")}</span>
@@ -124,11 +109,13 @@ export function Pagination(props: PaginationProps) {
           </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")}
+          {i18n("Total")}: <strong className='mx-1'>{new Intl.NumberFormat(undefined).format(rowCount)}</strong> {i18n("items")}
         </li>
       )}
     </nav>
   );
 }
+
+registerComponent("Pagination", Pagination);

package/src/molecules/pagination/PaginationButton.tsx

@@ -0,0 +1,30 @@
+import classnames from "classnames";
+import { PropsWithChildren } from "react";
+
+import { registerComponent } from "../../registries/components";
+
+export function PaginationButton(
+  props: PropsWithChildren<
+    {
+      component?: any;
+      disabled?: boolean;
+      className?: string;
+      active?: boolean;
+    } & Record<string, any>
+  >
+) {
+  const { component: Component = "button", children, disabled, active, ...otherProps } = props;
+
+  return (
+    <Component
+      {...otherProps}
+      data-testid='pagination-button'
+      disabled={disabled}
+      className={classnames("page-link", disabled ? "disabled" : "", active ? "" : "", props.className)}
+    >
+      {children}
+    </Component>
+  );
+}
+
+registerComponent("PaginationButton", PaginationButton);

package/src/molecules/pagination/all.ts

@@ -0,0 +1,3 @@
+import "../forms/select/all.ts";
+export * from "./Pagination";
+export * from "./PaginationButton";

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

@@ -0,0 +1,305 @@
+import "./all";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, waitFor, within } from "@storybook/test";
+
+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: {
+    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 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: (f: string) => f,
+    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 });
+
+    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);
+  }
+};
+
+export const WithFilters: Story = {
+  args: {
+    data: formSubmissions as ProductSubmission[],
+    columns: mapFormToColumns(FormType as any, [
+      {
+        accessorKey: "data.id",
+        meta: {
+          filter: {
+            variant: "select",
+            layout: "react"
+          }
+        }
+      }
+    ]),
+    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: (f: string) => f,
+    onClick: fn()
+  }
+};
+
+export const WithCustomCell: Story = {
+  args: {
+    data: formSubmissions 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 "-";
+          }
+
+          return (
+            <div className='text-right'>
+              {Intl.NumberFormat("fr-FR", {
+                style: "currency",
+                currency: context.row.original.data.currency
+              }).format(context.getValue())}
+            </div>
+          );
+        }
+      }
+    ]),
+    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: (f: string) => f,
+    onClick: fn()
+  }
+};