A comprehensive Storybook story collection demonstrating various states and configurations of the Pagination component in different scenarios.
## Key Components
- **Meta Configuration** - Storybook setup with `currentPage` and `totalPages` controls
- **Static Stories** - Predefined pagination states (Default, FirstPage, MiddlePage, LastPage, etc.)
- **Interactive Stories** - Stateful examples with `useState` for live interaction
- **Composable Story** - Manual composition using individual pagination subcomponents
- **AllStates Story** - Visual showcase of all pagination variations in one view
## Usage Example
```typescript
// Basic pagination story
export const Default: Story = {
args: {
currentPage: 1,
totalPages: 10,
onPageChange: () => {},
},
};
// Interactive pagination with state management
export const Interactive: Story = {
render: function InteractivePagination() {
const [page, setPage] = useState(1);
return (
);
},
};
// Manual composition using subcomponents
export const Composable: Story = {
render: () => (
1
),
};
```
This story file covers edge cases like single pages, few pages, many pages, and provides both controlled and interactive examples for testing pagination behavior across different scenarios.