@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

package/src/molecules/modal/Modal.stories.tsx

@@ -0,0 +1,178 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Modal, ModalProps, useModal } from "./Modal";
+
+/**
+ * The modal component provides a solid foundation for creating dialogs, popovers, lightboxes, or whatever else.
+ *
+ * ```tsx
+ * import {Modal} from "@tsed/react-formio/molecules/modal/Modal";
+ * ```
+ */
+export default {
+  title: "Modal",
+  component: Modal,
+  argTypes: {
+    onSubmit: {
+      title: {
+        control: {
+          type: "text"
+        }
+      },
+      control: {
+        action: "onSubmit"
+      }
+    }
+  },
+  parameters: {},
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal}>
+          <div className={"p-5"} style={{ height: "900px" }}>
+            Hello body
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  tags: ["autodocs"]
+} satisfies Meta<typeof Modal>;
+
+type Story = StoryObj<typeof Modal>;
+
+export const Sandbox: Story = {};
+
+export const WithTitle: Story = {
+  render: (args: ModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal}>
+          <div className={"p-5"} style={{ height: "900px" }}>
+            Hello body
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  args: {
+    title: "Modal title"
+  }
+};
+
+export const WithFooter = {
+  render: (args: ModalProps) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const modal = useModal();
+
+    function ModalFooter({ closeModal, onSubmit }: any) {
+      return (
+        <div className={"flex items-center justify-center bg-white p-2"}>
+          <button
+            data-testid='customSubmitModal'
+            className={"btn btn-primary mx-1"}
+            onClick={(e) => {
+              onSubmit(e);
+              closeModal();
+            }}
+          >
+            Save
+          </button>
+
+          <button data-testid='customCloseModal' className={"btn btn-danger mx-1"} onClick={closeModal}>
+            Close
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div>
+        <div>
+          <button className={"btn btn-primary"} onClick={modal.openModal}>
+            Open modal
+          </button>
+        </div>
+        <Modal {...args} {...modal} footer={ModalFooter}>
+          <div className={"px-5"} style={{ height: "900px" }}>
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+            Hello body
+            <br />
+          </div>
+        </Modal>
+      </div>
+    );
+  },
+  args: {
+    title: "Modal title"
+  }
+};

package/src/{components/modal/modal.component.tsx → molecules/modal/Modal.tsx}

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import noop from "lodash";
-import React, { PropsWithChildren, useEffect, useRef, useState } from "react";
+import { PropsWithChildren, useEffect, useRef, useState } from "react";
 
 export function useModal() {
   const [show, setShowModal] = useState(false);

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

@@ -1,11 +1,16 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "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);
@@ -17,9 +22,9 @@ describe("Pagination", () => {
     expect(allBtnBlocks[allBtnBlocks.length - 1]).toBe("Next");
   });
 
-  it("should call previousPage() callback", () => {
-    const previousPageSpy = jest.fn();
-    render(<Sandbox previousPage={previousPageSpy} canPreviousPage={true} />);
+  it("should call onClickPreviousPage() callback", () => {
+    const previousPageSpy = vi.fn();
+    render(<Pagination {...args} onClickPreviousPage={previousPageSpy} canPreviousPage={true} />);
     const paginationBtn = screen.queryAllByTestId("pagination-button");
     const btnPreviousPage = paginationBtn.find((btn) => btn.textContent === "Previous");
 
@@ -28,20 +33,20 @@ describe("Pagination", () => {
     expect(previousPageSpy).toHaveBeenCalledTimes(1);
   });
 
-  it("should call nextPage() callback", () => {
-    const nextPageSpy = jest.fn();
-    render(<Sandbox nextPage={nextPageSpy} canNextPage={true} />);
+  it("should call onClickNextPage() callback", () => {
+    const nextPageSpy = vi.fn();
+    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", () => {
-    const gotoPageSpy = jest.fn();
+  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,8 +62,8 @@ describe("Pagination", () => {
   });
 
   it("should have Previous button disabled and not clickable", () => {
-    const previousPageSpy = jest.fn();
-    render(<Sandbox canPreviousPage={false} previousPage={previousPageSpy} {...Sandbox.args} />);
+    const previousPageSpy = vi.fn();
+    render(<Pagination canPreviousPage={false} onClickPreviousPage={previousPageSpy} {...args} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -68,8 +73,8 @@ describe("Pagination", () => {
   });
 
   it("should have Previous button NOT disabled and clickable", () => {
-    const previousPageSpy = jest.fn();
-    render(<Sandbox {...Sandbox.args} canPreviousPage={true} previousPage={previousPageSpy} />);
+    const previousPageSpy = vi.fn();
+    render(<Pagination {...args} canPreviousPage={true} onClickPreviousPage={previousPageSpy} />);
 
     const previousButton = screen.getByText("Previous");
 
@@ -79,8 +84,8 @@ describe("Pagination", () => {
   });
 
   it("should have Next button disabled and not clickable", () => {
-    const nextPageSpy = jest.fn();
-    render(<Sandbox canNextPage={false} nextPage={nextPageSpy} {...Sandbox.args} />);
+    const nextPageSpy = vi.fn();
+    render(<Pagination canNextPage={false} onClickNextPage={nextPageSpy} {...args} />);
 
     const nextButton = screen.getByText("Next");
     expect(nextButton).toHaveAttribute("disabled");
@@ -89,8 +94,8 @@ describe("Pagination", () => {
   });
 
   it("should have Next button NOT disabled and clickable", () => {
-    const nextPageSpy = jest.fn();
-    render(<Sandbox canNextPage={true} nextPage={nextPageSpy} {...Sandbox.args} />);
+    const nextPageSpy = vi.fn();
+    render(<Pagination canNextPage={true} onClickNextPage={nextPageSpy} {...args} />);
     const nextButton = screen.getByText("Next");
     expect(nextButton).not.toHaveAttribute("disabled");
     fireEvent.click(nextButton);
@@ -100,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;
@@ -113,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,99 @@
+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"
+ * import {Pagination} from "@tsed/react-formio/molecules/form/select/Select/all"
+ *
+ * or
+ *
+ * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
+ * import "@tsed/react-formio/molecules/pagination/PaginationButton";
+ *
+ * or
+ *
+ * import {Pagination} from "@tsed/react-formio/molecules/pagination/Pagination";
+ *
+ * registerComponent("PaginationButton", MyPaginationButton);
+ * ```
+ *
+ * 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 React, { 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";