Merge pull request #696 from parz3val/feat/pagination_component

do: add pagination component with mui styles, and stories
fonoster · Jan 2, 2025 · ab4e50f · ab4e50f
2 parents f9f60d5 + 463f3d9
commit ab4e50f
Show file tree

Hide file tree

Showing 4 changed files with 231 additions and 0 deletions.
diff --git a/mods/webui/src/stories/pagination/Pagination.stories.ts b/mods/webui/src/stories/pagination/Pagination.stories.ts
@@ -0,0 +1,95 @@
+/*
+ * Copyright (C) 2024 by Fonoster Inc (https://fonoster.com)
+ * http://github.com/fonoster/fonoster
+ *
+ * This file is part of Fonoster
+ *
+ * Licensed under the MIT License (the "License");
+ * you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *    https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination } from "./Pagination";
+import { fn } from "@storybook/test";
+
+/**
+ *  Story of the Pagination component
+ * */
+
+const meta = {
+  title: "Shared Components/Pagination",
+  component: Pagination,
+  parameters: {
+    layout: "centered",
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/OsZlne0RvIgoFlFKF7hnAU/Shared-Component-Library?node-id=888-19707&t=7iBONnPS49mz6HuU-4"
+    }
+  },
+  tags: ["autodocs"],
+  args: { onClick: fn() },
+  argTypes: {
+    count: {
+      name: "Count",
+      description: "Count of the total number of items",
+      control: "number"
+    },
+    disabled: {
+      name: "Disabled",
+      description: "If true, pagination will be disable",
+      control: "boolean"
+    },
+    rowsPerPage: {
+      name: "Rows per page",
+      description: "Rows per page",
+      control: "number"
+    }
+  }
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Example of a Pagination with the count of 32
+ * and default rowsPerPage of 10
+ */
+export const Default: Story = {
+  args: {
+    count: 32,
+    disabled: false
+  }
+};
+
+/**
+ *  Example of Pagination Component with the count of 4269
+ * and explicit rowsPerPage of 69
+ */
+
+export const WithExplicitOnPage: Story = {
+  args: {
+    count: 4269,
+    disabled: false,
+    rowsPerPage: 69
+  }
+};
+
+/**
+ * Example of disabled pagination component
+ */
+
+export const Disable: Story = {
+  args: {
+    count: 100,
+    disabled: true
+  }
+};
diff --git a/mods/webui/src/stories/pagination/Pagination.styles.ts b/mods/webui/src/stories/pagination/Pagination.styles.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2024 by Fonoster Inc (https://fonoster.com)
+ * http://github.com/fonoster/fonoster
+ *
+ * This file is part of Fonoster
+ *
+ * Licensed under the MIT License (the "License");
+ * you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *    https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { styled } from "@mui/material/styles";
+import TablePagination from "@mui/material/TablePagination";
+
+export const StyledPagination = styled(TablePagination)(({ theme }) => ({
+  "& .MuiTablePagination-toolbar": {
+    display: "flex",
+    justifyContent: "flex-start",
+    gap: theme.spacing(0.5)
+  },
+  "& .MuiTablePagination-actions": {
+    order: -1,
+    gap: theme.spacing(0.1),
+    "& .MuiSvgIcon-root": {
+      fontSize: "2rem",
+      fontWeight: 700
+    },
+    "& button": {
+      margin: 0,
+      padding: theme.spacing(0.1)
+    }
+  },
+  "&.disabled": {
+    color: theme.palette.secondary[200],
+    pointerEvents: "none"
+  }
+}));
diff --git a/mods/webui/src/stories/pagination/Pagination.tsx b/mods/webui/src/stories/pagination/Pagination.tsx
@@ -0,0 +1,63 @@
+/*
+ * Copyright (C) 2024 by Fonoster Inc (https://fonoster.com)
+ * http://github.com/fonoster/fonoster
+ *
+ * This file is part of Fonoster
+ *
+ * Licensed under the MIT License (the "License");
+ * you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *    https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useState } from "react";
+import { StyledPagination } from "./Pagination.styles";
+import { PaginationProps } from "./types";
+import { Typography } from "../typography/Typography";
+
+export const Pagination = (props: PaginationProps) => {
+  const [page, setPage] = useState(0);
+  const { onClick, count, disabled, rowsPerPage } = props;
+
+  const handleChangePage = (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => {
+    onClick(event, newPage);
+    setPage(newPage);
+  };
+
+  const renderDisplayedRows = ({
+    from,
+    to,
+    count
+  }: {
+    from: number;
+    to: number;
+    count: number;
+  }) => (
+    <Typography variant="body-medium">{`${from}-${to} of ${count}`}</Typography>
+  );
+
+  return (
+    <StyledPagination
+      count={count}
+      disabled={disabled}
+      component="div"
+      onPageChange={handleChangePage}
+      page={page}
+      rowsPerPage={rowsPerPage ? rowsPerPage : 10}
+      rowsPerPageOptions={[]}
+      labelRowsPerPage=""
+      labelDisplayedRows={renderDisplayedRows}
+      className={disabled ? "disabled" : ""}
+    />
+  );
+};
diff --git a/mods/webui/src/stories/pagination/types.ts b/mods/webui/src/stories/pagination/types.ts
@@ -0,0 +1,29 @@
+/*
+ * Copyright (C) 2024 by Fonoster Inc (https://fonoster.com)
+ * http://github.com/fonoster/fonoster
+ *
+ * This file is part of Fonoster
+ *
+ * Licensed under the MIT License (the "License");
+ * you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *    https://opensource.org/licenses/MIT
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+type PaginationProps = {
+  onClick?: (
+    event: React.MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => void;
+  count: number;
+  disabled: boolean;
+  rowsPerPage?: number;
+};
+
+export type { PaginationProps };