eventx-design-system/dist/components/Pagination/Pagination.stories.js

Design System do EventX

import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { Pagination } from './Pagination';
const meta = {
    title: 'Components/Pagination',
    component: Pagination,
    parameters: {
        layout: 'padded',
    },
    tags: ['autodocs'],
    argTypes: {
        showPageSizeSelector: {
            control: { type: 'boolean' },
        },
        showTotalInfo: {
            control: { type: 'boolean' },
        },
    },
};
export default meta;
// Interactive wrapper component for stories
const PaginationWrapper = (args) => {
    const [currentPage, setCurrentPage] = useState(args.currentPage || 1);
    const [pageSize, setPageSize] = useState(args.pageSize || 10);
    return (_jsx(Pagination, { ...args, currentPage: currentPage, pageSize: pageSize, onPageChange: setCurrentPage, onPageSizeChange: setPageSize }));
};
export const Default = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 1,
        totalPages: 10,
        totalItems: 100,
        pageSize: 10,
        showPageSizeSelector: false,
        showTotalInfo: true,
    },
};
export const WithPageSizeSelector = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 1,
        totalPages: 10,
        totalItems: 100,
        pageSize: 10,
        pageSizeOptions: [5, 10, 20, 50],
        showPageSizeSelector: true,
        showTotalInfo: true,
    },
};
export const WithoutTotalInfo = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 1,
        totalPages: 10,
        totalItems: 100,
        pageSize: 10,
        showPageSizeSelector: false,
        showTotalInfo: false,
    },
};
export const ManyPages = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 50,
        totalPages: 100,
        totalItems: 1000,
        pageSize: 10,
        showPageSizeSelector: false,
        showTotalInfo: true,
    },
};
export const FirstPage = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 1,
        totalPages: 5,
        totalItems: 50,
        pageSize: 10,
        showPageSizeSelector: false,
        showTotalInfo: true,
    },
};
export const LastPage = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 5,
        totalPages: 5,
        totalItems: 50,
        pageSize: 10,
        showPageSizeSelector: false,
        showTotalInfo: true,
    },
};
export const MiddlePage = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 3,
        totalPages: 5,
        totalItems: 50,
        pageSize: 10,
        showPageSizeSelector: false,
        showTotalInfo: true,
    },
};
export const SinglePage = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 1,
        totalPages: 1,
        totalItems: 5,
        pageSize: 10,
        showPageSizeSelector: false,
        showTotalInfo: true,
    },
};
export const LargePageSize = {
    render: (args) => _jsx(PaginationWrapper, { ...args }),
    args: {
        currentPage: 1,
        totalPages: 3,
        totalItems: 250,
        pageSize: 100,
        pageSizeOptions: [50, 100, 200],
        showPageSizeSelector: true,
        showTotalInfo: true,
    },
};