ars9
077cd6ad5f
- 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
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
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: () => {},
|
|
},
|
|
};
|