feat(client): add Pagination component and integrate with Table and pages

- add Pagination component with prev/next, ellipsis page range, and optional page-size selector
- add Pagination and Table pagination stories (WithPagination, WithPaginationAndSizeSelector)
- extend Table with optional pageSize and pageSizeOptions props for built-in client-side pagination
- add Timestamp column to Table story fixtures
- enable pagination on all four pages with pageSize=10 and size selector
- add pagination i18n keys to en.json
This commit is contained in:
2026-04-09 10:43:45 +03:00
parent b4d576c6e9
commit 077cd6ad5f
11 changed files with 358 additions and 35 deletions
@@ -0,0 +1,56 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { useState } from 'react';
import { Pagination } from '../../src/ui/Pagination/Pagination';
const meta: Meta<typeof Pagination> = {
title: 'UI/Pagination',
component: Pagination,
parameters: { layout: 'padded' },
tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Pagination>;
function Controlled(args: React.ComponentProps<typeof Pagination>) {
const [page, setPage] = useState(args.page);
const [pageSize, setPageSize] = useState(args.pageSize);
return (
<Pagination
{...args}
page={page}
pageSize={pageSize}
onPageChange={setPage}
onPageSizeChange={args.onPageSizeChange ? setPageSize : undefined}
/>
);
}
export const FewPages: Story = {
render: (args) => <Controlled {...args} />,
args: { page: 1, pageSize: 10, total: 30 },
};
export const ManyPages: Story = {
render: (args) => <Controlled {...args} />,
args: { page: 5, pageSize: 10, total: 200 },
};
export const LastPage: Story = {
render: (args) => <Controlled {...args} />,
args: { page: 20, pageSize: 10, total: 200 },
};
export const SinglePage: Story = {
render: (args) => <Controlled {...args} />,
args: { page: 1, pageSize: 10, total: 7 },
};
export const WithPageSizeSelector: Story = {
render: (args) => <Controlled {...args} />,
args: {
page: 1,
pageSize: 10,
total: 150,
onPageSizeChange: () => {},
},
};