@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Pagination.stories.js

@@ -0,0 +1,438 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Default () {
+        return Default;
+    },
+    get FirstPage () {
+        return FirstPage;
+    },
+    get InTable () {
+        return InTable;
+    },
+    get Interactive () {
+        return Interactive;
+    },
+    get LastPage () {
+        return LastPage;
+    },
+    get SinglePage () {
+        return SinglePage;
+    },
+    get WithLabel () {
+        return WithLabel;
+    },
+    get WithResultsInfo () {
+        return WithResultsInfo;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _transformers = require("../utilities/transformers.js");
+var _Pagination = /*#__PURE__*/ _interop_require_default(require("../components/Pagination.js"));
+var _Text = /*#__PURE__*/ _interop_require_default(require("../components/Text.js"));
+var _Card = /*#__PURE__*/ _interop_require_default(require("../components/Card.js"));
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var _default = {
+    title: 'Litho/Pagination',
+    component: _Pagination.default,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Pagination component that allows users to navigate through multiple pages of content. Pagination helps break down large datasets into manageable chunks."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    args: {
+        hasPrevious: true,
+        hasNext: true,
+        onPrevious: function() {
+            return console.log('Previous clicked');
+        },
+        onNext: function() {
+            return console.log('Next clicked');
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        hasPrevious: {
+            control: 'boolean',
+            description: 'Whether there is a previous page available'
+        },
+        hasNext: {
+            control: 'boolean',
+            description: 'Whether there is a next page available'
+        },
+        onPrevious: {
+            action: 'previous',
+            description: 'Callback when previous button is clicked'
+        },
+        onNext: {
+            action: 'next',
+            description: 'Callback when next button is clicked'
+        },
+        label: {
+            control: 'text',
+            description: 'Accessibility label for the pagination'
+        }
+    }
+};
+var Default = {};
+var FirstPage = {
+    args: {
+        hasPrevious: false,
+        hasNext: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'On the first page, the previous button is disabled.'
+            }
+        }
+    }
+};
+var LastPage = {
+    args: {
+        hasPrevious: true,
+        hasNext: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'On the last page, the next button is disabled.'
+            }
+        }
+    }
+};
+var SinglePage = {
+    args: {
+        hasPrevious: false,
+        hasNext: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When there\'s only one page, both buttons are disabled.'
+            }
+        }
+    }
+};
+var WithLabel = {
+    args: {
+        label: 'Product list navigation'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Custom accessibility labels can be provided for better screen reader support.'
+            }
+        }
+    }
+};
+var Interactive = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(1), 2), currentPage = _useState[0], setCurrentPage = _useState[1];
+        var totalPages = 5;
+        var handlePrevious = function() {
+            if (currentPage > 1) {
+                setCurrentPage(currentPage - 1);
+            }
+        };
+        var handleNext = function() {
+            if (currentPage < totalPages) {
+                setCurrentPage(currentPage + 1);
+            }
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                    children: [
+                        "Page ",
+                        currentPage,
+                        " of ",
+                        totalPages
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pagination.default, {
+                    hasPrevious: currentPage > 1,
+                    hasNext: currentPage < totalPages,
+                    onPrevious: handlePrevious,
+                    onNext: handleNext
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example showing how pagination state changes between pages.'
+            }
+        }
+    }
+};
+var InTable = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(1), 2), currentPage = _useState[0], setCurrentPage = _useState[1];
+        var totalItems = 247;
+        var itemsPerPage = 10;
+        var totalPages = Math.ceil(totalItems / itemsPerPage);
+        var startItem = (currentPage - 1) * itemsPerPage + 1;
+        var endItem = Math.min(currentPage * itemsPerPage, totalItems);
+        var handlePrevious = function() {
+            if (currentPage > 1) {
+                setCurrentPage(currentPage - 1);
+            }
+        };
+        var handleNext = function() {
+            if (currentPage < totalPages) {
+                setCurrentPage(currentPage + 1);
+            }
+        };
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Card.default, {
+            title: "Customer List",
+            padded: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        style: {
+                            display: 'grid',
+                            gridTemplateColumns: '1fr 1fr 1fr',
+                            gap: '0.5rem',
+                            padding: '0.5rem',
+                            backgroundColor: '#f9f9f9',
+                            borderRadius: '4px',
+                            fontSize: '14px',
+                            fontWeight: 'bold'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                children: "Name"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                children: "Email"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                children: "Status"
+                            })
+                        ]
+                    }),
+                    Array.from({
+                        length: Math.min(itemsPerPage, totalItems - startItem + 1)
+                    }, function(_, i) {
+                        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                            style: {
+                                display: 'grid',
+                                gridTemplateColumns: '1fr 1fr 1fr',
+                                gap: '0.5rem',
+                                padding: '0.5rem',
+                                borderBottom: '1px solid #eee',
+                                fontSize: '14px'
+                            },
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    children: [
+                                        "Customer ",
+                                        startItem + i
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                                    children: [
+                                        "customer",
+                                        startItem + i,
+                                        "@example.com"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                                    children: "Active"
+                                })
+                            ]
+                        }, i);
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            paddingTop: '1rem',
+                            borderTop: '1px solid #eee'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                                variant: "bodySm",
+                                color: "subdued",
+                                children: [
+                                    "Showing ",
+                                    startItem,
+                                    "-",
+                                    endItem,
+                                    " of ",
+                                    totalItems,
+                                    " customers"
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pagination.default, {
+                                hasPrevious: currentPage > 1,
+                                hasNext: currentPage < totalPages,
+                                onPrevious: handlePrevious,
+                                onNext: handleNext,
+                                label: "Customer list navigation"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pagination is commonly used with tables and lists to navigate large datasets.'
+            }
+        }
+    }
+};
+var WithResultsInfo = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)(3), 2), currentPage = _useState[0], setCurrentPage = _useState[1];
+        var totalResults = 1247;
+        var resultsPerPage = 25;
+        var totalPages = Math.ceil(totalResults / resultsPerPage);
+        var startResult = (currentPage - 1) * resultsPerPage + 1;
+        var endResult = Math.min(currentPage * resultsPerPage, totalResults);
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: [
+                                "Showing ",
+                                startResult,
+                                "-",
+                                endResult,
+                                " of ",
+                                totalResults,
+                                " results"
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Text.default, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: [
+                                "Page ",
+                                currentPage,
+                                " of ",
+                                totalPages
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pagination.default, {
+                    hasPrevious: currentPage > 1,
+                    hasNext: currentPage < totalPages,
+                    onPrevious: function() {
+                        return setCurrentPage(Math.max(1, currentPage - 1));
+                    },
+                    onNext: function() {
+                        return setCurrentPage(Math.min(totalPages, currentPage + 1));
+                    }
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Pagination often includes information about the current page and total results.'
+            }
+        }
+    }
+};