@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Listbox.stories.js

@@ -0,0 +1,780 @@
+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 _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+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 _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread 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 _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+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 Listbox from "../components/Listbox.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Stack from "../components/Stack.js";
+import Box from "../components/Box.js";
+import { MobileAcceptMajor, StarFilledMinor } from "@shopify/polaris-icons";
+export default {
+    title: 'Litho/Listbox',
+    component: Listbox,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Listbox component that displays a list of selectable options with keyboard navigation support. It can show icons for selected items and supports both vertical and horizontal layouts."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        options: {
+            control: 'object',
+            description: 'Array of option objects with label, value, selected, and onAction properties'
+        },
+        showIcon: {
+            control: 'boolean',
+            description: 'Whether to show icons for selected options'
+        },
+        displayHorizontallyOnMobile: {
+            control: 'boolean',
+            description: 'Whether to display horizontally on mobile devices'
+        },
+        icon: {
+            control: false,
+            description: 'Icon to display for selected options'
+        }
+    }
+};
+export var Default = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('option2'), 2), selectedValue = _useState[0], setSelectedValue = _useState[1];
+        var options = [
+            {
+                label: 'Option 1',
+                value: 'option1',
+                selected: selectedValue === 'option1',
+                onAction: function() {
+                    return setSelectedValue('option1');
+                }
+            },
+            {
+                label: 'Option 2',
+                value: 'option2',
+                selected: selectedValue === 'option2',
+                onAction: function() {
+                    return setSelectedValue('option2');
+                }
+            },
+            {
+                label: 'Option 3',
+                value: 'option3',
+                selected: selectedValue === 'option3',
+                onAction: function() {
+                    return setSelectedValue('option3');
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Select an Option",
+            style: {
+                width: '300px'
+            },
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Listbox, {
+                options: options
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic listbox with selectable options.'
+            }
+        }
+    }
+};
+export var WithIcons = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('option2'), 2), selectedValue = _useState[0], setSelectedValue = _useState[1];
+        var options = [
+            {
+                label: 'Option 1',
+                value: 'option1',
+                selected: selectedValue === 'option1',
+                onAction: function() {
+                    return setSelectedValue('option1');
+                }
+            },
+            {
+                label: 'Option 2',
+                value: 'option2',
+                selected: selectedValue === 'option2',
+                onAction: function() {
+                    return setSelectedValue('option2');
+                }
+            },
+            {
+                label: 'Option 3',
+                value: 'option3',
+                selected: selectedValue === 'option3',
+                onAction: function() {
+                    return setSelectedValue('option3');
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Select with Icons",
+            style: {
+                width: '300px'
+            },
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Listbox, {
+                options: options,
+                showIcon: true
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Listbox with icons showing selected state.'
+            }
+        }
+    }
+};
+export var CustomIcon = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('favorite'), 2), selectedValue = _useState[0], setSelectedValue = _useState[1];
+        var options = [
+            {
+                label: 'Favorite',
+                value: 'favorite',
+                selected: selectedValue === 'favorite',
+                onAction: function() {
+                    return setSelectedValue('favorite');
+                }
+            },
+            {
+                label: 'Recent',
+                value: 'recent',
+                selected: selectedValue === 'recent',
+                onAction: function() {
+                    return setSelectedValue('recent');
+                }
+            },
+            {
+                label: 'Archive',
+                value: 'archive',
+                selected: selectedValue === 'archive',
+                onAction: function() {
+                    return setSelectedValue('archive');
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Custom Icon",
+            style: {
+                width: '300px'
+            },
+            padded: true,
+            children: /*#__PURE__*/ _jsx(Listbox, {
+                options: options,
+                showIcon: true,
+                icon: StarFilledMinor
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Listbox with custom icon for selected items.'
+            }
+        }
+    }
+};
+export var MultipleSelection = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            'option2',
+            'option3'
+        ]), 2), selectedValues = _useState[0], setSelectedValues = _useState[1];
+        var toggleSelection = function(value) {
+            setSelectedValues(function(prev) {
+                return prev.includes(value) ? prev.filter(function(v) {
+                    return v !== value;
+                }) : _to_consumable_array(prev).concat([
+                    value
+                ]);
+            });
+        };
+        var options = [
+            {
+                label: 'Email Notifications',
+                value: 'option1',
+                selected: selectedValues.includes('option1'),
+                onAction: function() {
+                    return toggleSelection('option1');
+                }
+            },
+            {
+                label: 'SMS Notifications',
+                value: 'option2',
+                selected: selectedValues.includes('option2'),
+                onAction: function() {
+                    return toggleSelection('option2');
+                }
+            },
+            {
+                label: 'Push Notifications',
+                value: 'option3',
+                selected: selectedValues.includes('option3'),
+                onAction: function() {
+                    return toggleSelection('option3');
+                }
+            },
+            {
+                label: 'Newsletter',
+                value: 'option4',
+                selected: selectedValues.includes('option4'),
+                onAction: function() {
+                    return toggleSelection('option4');
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Notification Preferences",
+            style: {
+                width: '300px'
+            },
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Listbox, {
+                    options: options,
+                    showIcon: true,
+                    icon: MobileAcceptMajor
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "4",
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        paddingBlock: "2",
+                        paddingInline: "2",
+                        background: "surface-neutral-subdued",
+                        borderRadius: "base",
+                        children: /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            children: [
+                                "Selected: ",
+                                selectedValues.length > 0 ? selectedValues.join(', ') : 'None'
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Listbox allowing multiple selections.'
+            }
+        }
+    }
+};
+export var NavigationMenu = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('dashboard'), 2), activeSection = _useState[0], setActiveSection = _useState[1];
+        var menuOptions = [
+            {
+                label: 'Dashboard',
+                value: 'dashboard',
+                selected: activeSection === 'dashboard',
+                onAction: function() {
+                    return setActiveSection('dashboard');
+                }
+            },
+            {
+                label: 'Products',
+                value: 'products',
+                selected: activeSection === 'products',
+                onAction: function() {
+                    return setActiveSection('products');
+                }
+            },
+            {
+                label: 'Customers',
+                value: 'customers',
+                selected: activeSection === 'customers',
+                onAction: function() {
+                    return setActiveSection('customers');
+                }
+            },
+            {
+                label: 'Orders',
+                value: 'orders',
+                selected: activeSection === 'orders',
+                onAction: function() {
+                    return setActiveSection('orders');
+                }
+            },
+            {
+                label: 'Analytics',
+                value: 'analytics',
+                selected: activeSection === 'analytics',
+                onAction: function() {
+                    return setActiveSection('analytics');
+                }
+            },
+            {
+                label: 'Settings',
+                value: 'settings',
+                selected: activeSection === 'settings',
+                onAction: function() {
+                    return setActiveSection('settings');
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    width: "200px",
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        title: "Navigation",
+                        padded: true,
+                        children: /*#__PURE__*/ _jsx(Listbox, {
+                            options: menuOptions
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    minWidth: "0",
+                    style: {
+                        flex: 1
+                    },
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        title: "".concat(activeSection.charAt(0).toUpperCase() + activeSection.slice(1), " Content"),
+                        padded: true,
+                        children: /*#__PURE__*/ _jsxs(Text, {
+                            children: [
+                                "This is the content for the ",
+                                activeSection,
+                                " section."
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Listbox used as a navigation menu with content area.'
+            }
+        }
+    }
+};
+export var FilterOptions = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            'active'
+        ]), 2), selectedFilters = _useState[0], setSelectedFilters = _useState[1];
+        var toggleFilter = function(value) {
+            setSelectedFilters(function(prev) {
+                return prev.includes(value) ? prev.filter(function(v) {
+                    return v !== value;
+                }) : _to_consumable_array(prev).concat([
+                    value
+                ]);
+            });
+        };
+        var filterOptions = [
+            {
+                label: 'All Items',
+                value: 'all',
+                selected: selectedFilters.includes('all'),
+                onAction: function() {
+                    return toggleFilter('all');
+                }
+            },
+            {
+                label: 'Active',
+                value: 'active',
+                selected: selectedFilters.includes('active'),
+                onAction: function() {
+                    return toggleFilter('active');
+                }
+            },
+            {
+                label: 'Inactive',
+                value: 'inactive',
+                selected: selectedFilters.includes('inactive'),
+                onAction: function() {
+                    return toggleFilter('inactive');
+                }
+            },
+            {
+                label: 'Pending',
+                value: 'pending',
+                selected: selectedFilters.includes('pending'),
+                onAction: function() {
+                    return toggleFilter('pending');
+                }
+            },
+            {
+                label: 'Archived',
+                value: 'archived',
+                selected: selectedFilters.includes('archived'),
+                onAction: function() {
+                    return toggleFilter('archived');
+                }
+            }
+        ];
+        var sampleData = [
+            {
+                name: 'Item 1',
+                status: 'active'
+            },
+            {
+                name: 'Item 2',
+                status: 'inactive'
+            },
+            {
+                name: 'Item 3',
+                status: 'active'
+            },
+            {
+                name: 'Item 4',
+                status: 'pending'
+            },
+            {
+                name: 'Item 5',
+                status: 'archived'
+            }
+        ];
+        var filteredData = selectedFilters.includes('all') ? sampleData : sampleData.filter(function(item) {
+            return selectedFilters.includes(item.status);
+        });
+        return /*#__PURE__*/ _jsxs(Stack, {
+            horizontal: true,
+            gap: "lg",
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    width: "200px",
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        title: "Filters",
+                        padded: true,
+                        children: /*#__PURE__*/ _jsx(Listbox, {
+                            options: filterOptions,
+                            showIcon: true
+                        })
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    minWidth: "0",
+                    style: {
+                        flex: 1
+                    },
+                    children: /*#__PURE__*/ _jsx(Card, {
+                        title: "Filtered Results",
+                        padded: true,
+                        children: filteredData.length > 0 ? /*#__PURE__*/ _jsx(Stack, {
+                            gap: "sm",
+                            children: filteredData.map(function(item, index) {
+                                return /*#__PURE__*/ _jsx(Box, {
+                                    paddingBlock: "2",
+                                    paddingInline: "2",
+                                    borderWidth: "base",
+                                    borderColor: "border-subdued",
+                                    borderRadius: "base",
+                                    children: /*#__PURE__*/ _jsxs(Stack, {
+                                        horizontal: true,
+                                        blockAlign: "center",
+                                        inlineAlign: "space-between",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                children: item.name
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                color: "subdued",
+                                                style: {
+                                                    textTransform: 'capitalize'
+                                                },
+                                                children: item.status
+                                            })
+                                        ]
+                                    })
+                                }, index);
+                            })
+                        }) : /*#__PURE__*/ _jsx(Text, {
+                            color: "subdued",
+                            children: "No items match the selected filters."
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Listbox used for filtering data with real-time results.'
+            }
+        }
+    }
+};
+export var HorizontalOnMobile = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('overview'), 2), selectedTab = _useState[0], setSelectedTab = _useState[1];
+        var tabOptions = [
+            {
+                label: 'Overview',
+                value: 'overview',
+                selected: selectedTab === 'overview',
+                onAction: function() {
+                    return setSelectedTab('overview');
+                }
+            },
+            {
+                label: 'Details',
+                value: 'details',
+                selected: selectedTab === 'details',
+                onAction: function() {
+                    return setSelectedTab('details');
+                }
+            },
+            {
+                label: 'Reviews',
+                value: 'reviews',
+                selected: selectedTab === 'reviews',
+                onAction: function() {
+                    return setSelectedTab('reviews');
+                }
+            },
+            {
+                label: 'Specifications',
+                value: 'specifications',
+                selected: selectedTab === 'specifications',
+                onAction: function() {
+                    return setSelectedTab('specifications');
+                }
+            },
+            {
+                label: 'Support',
+                value: 'support',
+                selected: selectedTab === 'support',
+                onAction: function() {
+                    return setSelectedTab('support');
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Product Information",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockEnd: "4",
+                    children: /*#__PURE__*/ _jsx(Listbox, {
+                        options: tabOptions,
+                        displayHorizontallyOnMobile: true
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Box, {
+                    paddingBlock: "4",
+                    paddingInline: "4",
+                    background: "surface-neutral-subdued",
+                    borderRadius: "base",
+                    minHeight: "200px",
+                    children: [
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingBlockEnd: "4",
+                            children: /*#__PURE__*/ _jsxs(Text, {
+                                variant: "headingSm",
+                                children: [
+                                    selectedTab.charAt(0).toUpperCase() + selectedTab.slice(1),
+                                    " Content"
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsxs(Text, {
+                            children: [
+                                "This is the content for the ",
+                                selectedTab,
+                                " tab. On mobile devices, the tabs above will display horizontally with horizontal scrolling."
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Listbox that displays horizontally on mobile for better mobile UX.'
+            }
+        }
+    }
+};
+export var KeyboardNavigation = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('item2'), 2), selectedValue = _useState[0], setSelectedValue = _useState[1];
+        var options = [
+            {
+                label: 'First Item',
+                value: 'item1',
+                selected: selectedValue === 'item1',
+                onAction: function() {
+                    return setSelectedValue('item1');
+                }
+            },
+            {
+                label: 'Second Item',
+                value: 'item2',
+                selected: selectedValue === 'item2',
+                onAction: function() {
+                    return setSelectedValue('item2');
+                }
+            },
+            {
+                label: 'Third Item',
+                value: 'item3',
+                selected: selectedValue === 'item3',
+                onAction: function() {
+                    return setSelectedValue('item3');
+                }
+            },
+            {
+                label: 'Fourth Item',
+                value: 'item4',
+                selected: selectedValue === 'item4',
+                onAction: function() {
+                    return setSelectedValue('item4');
+                }
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Keyboard Navigation Demo",
+            style: {
+                width: '300px'
+            },
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsxs(Box, {
+                    paddingBlockEnd: "4",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "bodySm",
+                            children: "Try keyboard navigation:"
+                        }),
+                        /*#__PURE__*/ _jsx(Box, {
+                            paddingBlockStart: "2",
+                            paddingInlineStart: "4",
+                            children: /*#__PURE__*/ _jsxs("ul", {
+                                style: {
+                                    fontSize: '0.8rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("li", {
+                                        children: "↑/↓ arrows: Move between options"
+                                    }),
+                                    /*#__PURE__*/ _jsx("li", {
+                                        children: "Enter: Select option"
+                                    }),
+                                    /*#__PURE__*/ _jsx("li", {
+                                        children: "Escape: Remove focus"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Listbox, {
+                    options: options,
+                    showIcon: true
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "4",
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        paddingBlock: "2",
+                        paddingInline: "2",
+                        background: "surface-accent-subdued",
+                        borderRadius: "base",
+                        children: /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            children: [
+                                "Selected: ",
+                                selectedValue
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Demonstrates keyboard navigation features of the listbox.'
+            }
+        }
+    }
+};