refactor(components): rewrite Pagination component

1 files changed, 150 insertions, 0 deletions

diff --git a/src/components/organisms/nav/pagination/pagination.stories.tsx b/src/components/organisms/nav/pagination/pagination.stories.tsx
new file mode 100644
index 0000000..83f3a63
--- /dev/null
+++ b/src/components/organisms/nav/pagination/pagination.stories.tsx
@@ -0,0 +1,150 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import {
+  Pagination,
+  type RenderPaginationItemAriaLabel,
+  type RenderPaginationLink,
+} from './pagination';
+
+/**
+ * Pagination - Storybook Meta
+ */
+export default {
+  title: 'Organisms/Nav/Pagination',
+  component: Pagination,
+  args: {
+    siblings: 1,
+  },
+  argTypes: {
+    current: {
+      control: {
+        type: 'number',
+      },
+      description: 'The current page number.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    siblings: {
+      control: {
+        type: 'number',
+      },
+      description:
+        'The number of pages to show next to the current page for one side.',
+      table: {
+        category: 'Options',
+        defaultValue: { summary: 1 },
+      },
+      type: {
+        name: 'number',
+        required: false,
+      },
+    },
+    total: {
+      control: {
+        type: 'number',
+      },
+      description: 'The total number of items.',
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+  },
+} as ComponentMeta<typeof Pagination>;
+
+const Template: ComponentStory<typeof Pagination> = (args) => (
+  <Pagination {...args} />
+);
+
+const renderLink: RenderPaginationLink = (num: number) => `#page-${num}`;
+
+const renderItemAriaLabel: RenderPaginationItemAriaLabel = ({
+  kind,
+  pageNumber,
+  isCurrentPage,
+}) => {
+  switch (kind) {
+    case 'backward':
+      return 'Go to previous page';
+    case 'forward':
+      return 'Go to next page';
+    case 'number':
+    default:
+      return isCurrentPage
+        ? `Current page, page ${pageNumber}`
+        : `Go to page ${pageNumber}`;
+  }
+};
+
+/**
+ * Pagination Stories - More than 5 pages and current page is near the beginning
+ */
+export const RightEllipsis = Template.bind({});
+RightEllipsis.args = {
+  current: 2,
+  siblings: 2,
+  renderItemAriaLabel,
+  renderLink,
+  total: 50,
+};
+
+/**
+ * Pagination Stories - More than 5 pages and current page is near the end
+ */
+export const LeftEllipsis = Template.bind({});
+LeftEllipsis.args = {
+  current: 49,
+  siblings: 2,
+  renderItemAriaLabel,
+  renderLink,
+  total: 50,
+};
+
+/**
+ * Pagination Stories - More than 5 pages and current page is near the middle
+ */
+export const BothEllipsis = Template.bind({});
+BothEllipsis.args = {
+  current: 25,
+  siblings: 2,
+  renderItemAriaLabel,
+  renderLink,
+  total: 50,
+};
+
+/**
+ * Pagination Stories - Less than 5 pages
+ */
+export const WithoutEllipsis = Template.bind({});
+WithoutEllipsis.args = {
+  current: 2,
+  siblings: 2,
+  renderItemAriaLabel,
+  renderLink,
+  total: 5,
+};
+
+/**
+ * Pagination Stories - First page selected
+ */
+export const WithoutBackwardLink = Template.bind({});
+WithoutBackwardLink.args = {
+  current: 1,
+  siblings: 2,
+  renderItemAriaLabel,
+  renderLink,
+  total: 5,
+};
+
+/**
+ * Pagination Stories - Last page selected
+ */
+export const WithoutForwardLink = Template.bind({});
+WithoutForwardLink.args = {
+  current: 5,
+  siblings: 2,
+  renderItemAriaLabel,
+  renderLink,
+  total: 5,
+};