@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Page.stories.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { transformStorySource } from "../utilities/transformers.js";
+import Stack from "../components/Stack.js";
+import Page from "../components/Page.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Layout from "../components/Layout.js";
+export default {
+    title: "Litho/Page",
+    component: Page,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: "A Page component that provides a structured layout with a header, primary and secondary actions, and content."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Page title"
+        },
+        subtitle: {
+            control: "text",
+            description: "Page subtitle"
+        },
+        narrowWidth: {
+            control: "boolean",
+            description: "Use narrow width layout"
+        },
+        fullWidth: {
+            control: "boolean",
+            description: "Use full width layout"
+        },
+        showTitleInTopBar: {
+            control: "boolean",
+            description: "Show title in top bar"
+        },
+        wrapInContentContainer: {
+            control: "boolean",
+            description: "Wrap content in container with padding"
+        }
+    }
+};
+export var Default = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Default Page",
+            children: /*#__PURE__*/ _jsx(Text, {
+                children: "This is a basic page with a title and some content."
+            })
+        });
+    }
+};
+export var WithSubtitle = {
+    render: function() {
+        return /*#__PURE__*/ _jsx(Page, {
+            title: "Page with Subtitle",
+            subtitle: "This page includes a subtitle for additional context",
+            backAction: {
+                onAction: function() {
+                    return console.log("Back clicked");
+                },
+                accessibilityLabel: "Go back to products"
+            },
+            children: /*#__PURE__*/ _jsx(Layout, {
+                children: /*#__PURE__*/ _jsx(Layout.Section, {
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        padded: true,
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            children: "Page content goes here."
+                        })
+                    })
+                })
+            })
+        });
+    }
+};
+export var WithPrimaryAction = {
+    args: {
+        title: "Page with Primary Action",
+        primaryAction: {
+            content: "Save",
+            onAction: function() {
+                return console.log("Save clicked");
+            }
+        },
+        children: /*#__PURE__*/ _jsx(Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ _jsx(Text, {
+                children: "This page has a primary action button in the header."
+            })
+        })
+    }
+};
+export var WithSecondaryActions = {
+    args: {
+        title: "Page with Actions",
+        primaryAction: {
+            content: "Save",
+            onAction: function() {
+                return console.log("Save clicked");
+            }
+        },
+        secondaryActions: [
+            {
+                content: "Duplicate",
+                onAction: function() {
+                    return console.log("Duplicate clicked");
+                }
+            },
+            {
+                content: "Archive",
+                onAction: function() {
+                    return console.log("Archive clicked");
+                }
+            }
+        ],
+        children: /*#__PURE__*/ _jsx(Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ _jsx(Text, {
+                children: "This page has both primary and secondary actions."
+            })
+        })
+    }
+};
+export var WithBackAction = {
+    args: {
+        title: "Product Details",
+        backAction: {
+            onAction: function() {
+                return console.log("Back clicked");
+            },
+            accessibilityLabel: "Go back to products"
+        },
+        primaryAction: {
+            content: "Save",
+            onAction: function() {
+                return console.log("Save clicked");
+            }
+        },
+        children: /*#__PURE__*/ _jsx(Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ _jsx(Text, {
+                children: "This page has a back action to navigate to the previous page."
+            })
+        })
+    }
+};
+export var NarrowWidth = {
+    args: {
+        title: "Narrow Width Page",
+        narrowWidth: true,
+        children: /*#__PURE__*/ _jsx(Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ _jsx(Text, {
+                children: "This page uses a narrow width layout for focused content."
+            })
+        })
+    }
+};
+export var FullWidth = {
+    args: {
+        title: "Full Width Page",
+        fullWidth: true,
+        children: /*#__PURE__*/ _jsx(Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ _jsx(Text, {
+                children: "This page uses the full width of the viewport."
+            })
+        })
+    }
+};
+export var WithFooterActions = {
+    args: {
+        title: "Page with Footer Actions",
+        footerActions: {
+            primaryAction: {
+                content: "Save Changes",
+                onAction: function() {
+                    return console.log("Save changes clicked");
+                }
+            },
+            secondaryAction: {
+                content: "Cancel",
+                onAction: function() {
+                    return console.log("Cancel clicked");
+                }
+            },
+            destructiveAction: {
+                content: "Delete",
+                onAction: function() {
+                    return console.log("Delete clicked");
+                }
+            }
+        },
+        children: /*#__PURE__*/ _jsx(Card, {
+            sectioned: true,
+            children: /*#__PURE__*/ _jsx(Text, {
+                children: "This page includes footer actions for additional controls."
+            })
+        })
+    }
+};
+export var ComplexPage = {
+    args: {
+        title: "Customer Profile",
+        subtitle: "Manage customer information and preferences",
+        backAction: {
+            onAction: function() {
+                return console.log("Back to customers");
+            },
+            accessibilityLabel: "Go back to customers"
+        },
+        primaryAction: {
+            content: "Save Customer",
+            onAction: function() {
+                return console.log("Save customer");
+            }
+        },
+        secondaryActions: [
+            {
+                content: "Export Data",
+                onAction: function() {
+                    return console.log("Export data");
+                }
+            },
+            {
+                title: "More Actions",
+                items: [
+                    {
+                        content: "Duplicate Customer",
+                        onAction: function() {
+                            return console.log("Duplicate");
+                        }
+                    },
+                    {
+                        content: "Archive Customer",
+                        onAction: function() {
+                            return console.log("Archive");
+                        }
+                    }
+                ]
+            }
+        ],
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            gap: "md",
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    sectioned: true,
+                    title: "Customer Information",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Basic customer details and contact information."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    sectioned: true,
+                    title: "Order History",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Previous orders and transaction history."
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card, {
+                    sectioned: true,
+                    title: "Preferences",
+                    children: /*#__PURE__*/ _jsx(Text, {
+                        children: "Customer preferences and settings."
+                    })
+                })
+            ]
+        })
+    }
+};

package/dist/esm/stories/Pagination.stories.js

@@ -0,0 +1,394 @@
+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 _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);
+}
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { transformStorySource } from "../utilities/transformers.js";
+import Pagination from "../components/Pagination.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+export default {
+    title: 'Litho/Pagination',
+    component: Pagination,
+    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: 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'
+        }
+    }
+};
+export var Default = {};
+export var FirstPage = {
+    args: {
+        hasPrevious: false,
+        hasNext: true
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'On the first page, the previous button is disabled.'
+            }
+        }
+    }
+};
+export var LastPage = {
+    args: {
+        hasPrevious: true,
+        hasNext: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'On the last page, the next button is disabled.'
+            }
+        }
+    }
+};
+export var SinglePage = {
+    args: {
+        hasPrevious: false,
+        hasNext: false
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'When there\'s only one page, both buttons are disabled.'
+            }
+        }
+    }
+};
+export var WithLabel = {
+    args: {
+        label: 'Product list navigation'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Custom accessibility labels can be provided for better screen reader support.'
+            }
+        }
+    }
+};
+export var Interactive = {
+    render: function() {
+        var _useState = _sliced_to_array(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__*/ _jsxs("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsxs(Text, {
+                    children: [
+                        "Page ",
+                        currentPage,
+                        " of ",
+                        totalPages
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Pagination, {
+                    hasPrevious: currentPage > 1,
+                    hasNext: currentPage < totalPages,
+                    onPrevious: handlePrevious,
+                    onNext: handleNext
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Interactive example showing how pagination state changes between pages.'
+            }
+        }
+    }
+};
+export var InTable = {
+    render: function() {
+        var _useState = _sliced_to_array(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__*/ _jsx(Card, {
+            title: "Customer List",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _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__*/ _jsx("div", {
+                                children: "Name"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                children: "Email"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                children: "Status"
+                            })
+                        ]
+                    }),
+                    Array.from({
+                        length: Math.min(itemsPerPage, totalItems - startItem + 1)
+                    }, function(_, i) {
+                        return /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'grid',
+                                gridTemplateColumns: '1fr 1fr 1fr',
+                                gap: '0.5rem',
+                                padding: '0.5rem',
+                                borderBottom: '1px solid #eee',
+                                fontSize: '14px'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    children: [
+                                        "Customer ",
+                                        startItem + i
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    children: [
+                                        "customer",
+                                        startItem + i,
+                                        "@example.com"
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    children: "Active"
+                                })
+                            ]
+                        }, i);
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            paddingTop: '1rem',
+                            borderTop: '1px solid #eee'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs(Text, {
+                                variant: "bodySm",
+                                color: "subdued",
+                                children: [
+                                    "Showing ",
+                                    startItem,
+                                    "-",
+                                    endItem,
+                                    " of ",
+                                    totalItems,
+                                    " customers"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Pagination, {
+                                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.'
+            }
+        }
+    }
+};
+export var WithResultsInfo = {
+    render: function() {
+        var _useState = _sliced_to_array(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__*/ _jsxs("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: [
+                                "Showing ",
+                                startResult,
+                                "-",
+                                endResult,
+                                " of ",
+                                totalResults,
+                                " results"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            color: "subdued",
+                            children: [
+                                "Page ",
+                                currentPage,
+                                " of ",
+                                totalPages
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Pagination, {
+                    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.'
+            }
+        }
+    }
+};