feat: #1246947 added Pagination component

packages/react-front-kit/package.json

@@ -63,6 +63,7 @@
     "@storybook/addon-links": "^7.1.0",
     "@storybook/blocks": "^7.1.0",
     "@storybook/jest": "^0.1.0",
+    "@storybook/preview-api": "^7.4.0",
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
     "@storybook/test-runner": "^0.11.0",

packages/react-front-kit/src/3-custom/Components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useStorybookArgsConnect } from '../../../hooks/useStorybookArgsConnect';
+
+import { Pagination as Cmp } from './Pagination';
+
+const meta = {
+  component: Cmp,
+  decorators: [
+    function Component(Story, ctx) {
+      const args = useStorybookArgsConnect(ctx.args, {
+        onPageChange: 'page',
+        onRowsPerPageChange: 'rowsPerPage',
+      });
+      return <Story args={{ ...args }} />;
+    },
+  ],
+  tags: ['autodocs'],
+  title: '3-custom/Components/Pagination',
+} satisfies Meta<typeof Cmp>;
+
+export default meta;
+type IStory = StoryObj<typeof meta>;
+
+export const Pagination: IStory = {
+  args: {
+    page: 2,
+    rowsPerPage: 15,
+    rowsPerPageLabel: 'Number of results per page',
+    rowsPerPageOptions: [
+      { label: 'Display 1 result', value: 1 },
+      { label: 'Display 5 results', value: 5 },
+      { label: 'Display 10 results', value: 10 },
+      { label: 'Display 15 results', value: 15 },
+    ],
+    totalPages: 10,
+  },
+};

packages/react-front-kit/src/3-custom/Components/Pagination/Pagination.test.tsx

@@ -0,0 +1,62 @@
+import { expect } from '@storybook/jest';
+import { within } from '@storybook/testing-library';
+
+import { renderWithProviders } from '../../../utils/tests';
+
+import { Pagination } from './Pagination';
+
+describe('Pagination', () => {
+  beforeEach(() => {
+    // Prevent mantine random ID
+    Math.random = () => 0.42;
+  });
+
+  it('matches snapshot', () => {
+    const { container } = renderWithProviders(
+      <Pagination
+        page={2}
+        rowsPerPage={15}
+        rowsPerPageLabel="Number of results per page"
+        rowsPerPageOptions={[
+          { label: 'Display 1 result', value: 1 },
+          { label: 'Display 5 results', value: 5 },
+          { label: 'Display 10 results', value: 10 },
+          { label: 'Display 15 results', value: 15 },
+        ]}
+        totalPages={10}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders with minimal props', () => {
+    const { container } = renderWithProviders(
+      <Pagination page={2} rowsPerPage={15} totalPages={10} />
+    );
+    const canvas = within(container);
+    expect(canvas.queryByTestId('pagination')).toBeVisible();
+    expect(canvas.queryByTestId('pagination-rowsPerPage')).toBeNull();
+    expect(canvas.queryByTestId('pagination-page')).toBeVisible();
+  });
+
+  it('renders with full props', () => {
+    const { container } = renderWithProviders(
+      <Pagination
+        page={2}
+        rowsPerPage={15}
+        rowsPerPageLabel="Number of results per page"
+        rowsPerPageOptions={[
+          { value: 1 },
+          { value: 5 },
+          { value: 10 },
+          { value: 15 },
+        ]}
+        totalPages={10}
+      />
+    );
+    const canvas = within(container);
+    expect(canvas.queryByTestId('pagination')).toBeVisible();
+    expect(canvas.queryByTestId('pagination-rowsPerPage')).toBeVisible();
+    expect(canvas.queryByTestId('pagination-page')).toBeVisible();
+  });
+});