@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/Autocomplete.stories.js

@@ -0,0 +1,833 @@
+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 _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return 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 _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+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 Autocomplete from "../components/Autocomplete.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import { SearchMinor, ProductsMinor, CustomersMinor } from "@shopify/polaris-icons";
+import HorizontalStack from "../components/HorizontalStack.js";
+import VerticalStack from "../components/VerticalStack.js";
+import Tag from "../components/Tag.js";
+import Thumbnail from "../components/Thumbnail.js";
+import { transformStorySource } from "../utilities/transformers.js";
+export default {
+    title: "Litho/Autocomplete",
+    component: Autocomplete,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "An Autocomplete component that provides search functionality with dropdown options. It supports single and multiple selection, grouped options, loading states, and custom empty states."
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        options: {
+            control: "object",
+            description: "Array of options to display in the dropdown",
+            table: {
+                type: {
+                    summary: "AutocompleteOption[]",
+                    detail: "{\n  label: string;\n  value: string;\n  title?: string;\n  allowMultiple?: boolean;\n  selected?: string;\n  onSelect?: () => void;\n  options?: AutocompleteOption[];\n}"
+                }
+            }
+        },
+        selected: {
+            control: "object",
+            description: "Currently selected option values",
+            table: {
+                type: {
+                    summary: "string[]"
+                },
+                defaultValue: {
+                    summary: "[]"
+                }
+            }
+        },
+        allowMultiple: {
+            control: "boolean",
+            description: "Whether multiple options can be selected",
+            table: {
+                type: {
+                    summary: "boolean"
+                },
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        loading: {
+            control: "boolean",
+            description: "Whether to show loading spinner",
+            table: {
+                type: {
+                    summary: "boolean"
+                },
+                defaultValue: {
+                    summary: "false"
+                }
+            }
+        },
+        preferredPosition: {
+            control: "select",
+            options: [
+                "below",
+                "above"
+            ],
+            description: "Preferred position of the dropdown",
+            table: {
+                type: {
+                    summary: "string"
+                },
+                defaultValue: {
+                    summary: "below"
+                }
+            }
+        },
+        preferredAlignment: {
+            control: "select",
+            options: [
+                "left",
+                "center",
+                "right"
+            ],
+            description: "Preferred alignment of the dropdown",
+            table: {
+                type: {
+                    summary: "string"
+                },
+                defaultValue: {
+                    summary: "left"
+                }
+            }
+        },
+        onSelect: {
+            control: false,
+            description: "Callback when selection changes",
+            table: {
+                type: {
+                    summary: "() => void"
+                }
+            }
+        },
+        textField: {
+            control: false,
+            description: "TextField component used as activator",
+            table: {
+                type: {
+                    summary: "React.ReactNode"
+                }
+            }
+        },
+        emptyState: {
+            control: "object",
+            description: "Content to display when no options available",
+            table: {
+                type: {
+                    summary: "AutocompleteEmptyState",
+                    detail: "{\n  content: string;\n  icon?: React.ReactNode;\n}"
+                }
+            }
+        }
+    }
+};
+export var Default = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            "product1"
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        var _useState1 = _sliced_to_array(useState(""), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+        var options = [
+            {
+                label: "Product A",
+                value: "product1"
+            },
+            {
+                label: "Product B",
+                value: "product2"
+            },
+            {
+                label: "Product C",
+                value: "product3"
+            },
+            {
+                label: "Service A",
+                value: "service1"
+            },
+            {
+                label: "Service B",
+                value: "service2"
+            }
+        ];
+        var filteredOptions = inputValue ? options.filter(function(option) {
+            return option.label.toLowerCase().includes(inputValue.toLowerCase());
+        }) : options;
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Select a Product",
+            style: {
+                width: "400px"
+            },
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "2",
+                children: [
+                    /*#__PURE__*/ _jsx(Autocomplete, {
+                        options: filteredOptions,
+                        selected: selected,
+                        onSelect: setSelected,
+                        textField: /*#__PURE__*/ _jsx(Autocomplete.TextField, {
+                            placeholder: "Search products...",
+                            value: inputValue,
+                            onChange: setInputValue
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(HorizontalStack, {
+                        children: selected.length > 0 && selected.map(function(item) {
+                            return /*#__PURE__*/ _jsx(Tag, {
+                                children: item
+                            }, item);
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Basic autocomplete with single selection and search filtering."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var MultipleSelection = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            "tag1",
+            "tag3"
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        var _useState1 = _sliced_to_array(useState(""), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+        var options = [
+            {
+                label: "JavaScript",
+                value: "tag1"
+            },
+            {
+                label: "React",
+                value: "tag2"
+            },
+            {
+                label: "TypeScript",
+                value: "tag3"
+            },
+            {
+                label: "Node.js",
+                value: "tag4"
+            },
+            {
+                label: "CSS",
+                value: "tag5"
+            },
+            {
+                label: "HTML",
+                value: "tag6"
+            },
+            {
+                label: "Python",
+                value: "tag7"
+            },
+            {
+                label: "GraphQL",
+                value: "tag8"
+            }
+        ];
+        var filteredOptions = inputValue ? options.filter(function(option) {
+            return option.label.toLowerCase().includes(inputValue.toLowerCase());
+        }) : options;
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Select Technologies",
+            style: {
+                width: "400px"
+            },
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "2",
+                children: [
+                    /*#__PURE__*/ _jsx(Autocomplete, {
+                        options: filteredOptions,
+                        selected: selected,
+                        allowMultiple: true,
+                        onSelect: setSelected,
+                        textField: /*#__PURE__*/ _jsx(Autocomplete.TextField, {
+                            placeholder: "Search technologies...",
+                            value: inputValue,
+                            onChange: setInputValue
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(HorizontalStack, {
+                        gap: "2",
+                        children: selected.length > 0 && selected.map(function(item) {
+                            return /*#__PURE__*/ _jsx(Tag, {
+                                children: item
+                            }, item);
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Autocomplete with multiple selection using checkboxes."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var GroupedOptions = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            "user1"
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        var _useState1 = _sliced_to_array(useState(""), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+        var allOptions = [
+            {
+                title: "Recent Contacts",
+                options: [
+                    {
+                        label: "John Doe",
+                        value: "user1"
+                    },
+                    {
+                        label: "Jane Smith",
+                        value: "user2"
+                    },
+                    {
+                        label: "Bob Johnson",
+                        value: "user3"
+                    }
+                ]
+            },
+            {
+                title: "Team Members",
+                options: [
+                    {
+                        label: "Alice Brown",
+                        value: "team1"
+                    },
+                    {
+                        label: "Charlie Wilson",
+                        value: "team2"
+                    },
+                    {
+                        label: "Diana Miller",
+                        value: "team3"
+                    }
+                ]
+            },
+            {
+                title: "External Contacts",
+                options: [
+                    {
+                        label: "Mike Davis",
+                        value: "ext1"
+                    },
+                    {
+                        label: "Sarah Taylor",
+                        value: "ext2"
+                    }
+                ]
+            }
+        ];
+        var filteredOptions = inputValue ? allOptions.map(function(group) {
+            return _object_spread_props(_object_spread({}, group), {
+                options: group.options.filter(function(option) {
+                    return option.label.toLowerCase().includes(inputValue.toLowerCase());
+                })
+            });
+        }).filter(function(group) {
+            return group.options.length > 0;
+        }) : allOptions;
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Select Contact",
+            style: {
+                width: "400px"
+            },
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "2",
+                children: [
+                    /*#__PURE__*/ _jsx(Autocomplete, {
+                        options: filteredOptions,
+                        selected: selected,
+                        onSelect: setSelected,
+                        textField: /*#__PURE__*/ _jsx(Autocomplete.TextField, {
+                            placeholder: "Search contacts...",
+                            value: inputValue,
+                            onChange: setInputValue
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(HorizontalStack, {
+                        gap: "2",
+                        children: selected.length > 0 && selected.map(function(item) {
+                            return /*#__PURE__*/ _jsx(Tag, {
+                                children: item
+                            }, item);
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Autocomplete with grouped options and section titles."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var EmptyState = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
+        var _useState1 = _sliced_to_array(useState("xyz123"), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+        var options = [
+            {
+                label: "Apple",
+                value: "apple"
+            },
+            {
+                label: "Banana",
+                value: "banana"
+            },
+            {
+                label: "Cherry",
+                value: "cherry"
+            }
+        ];
+        var filteredOptions = inputValue ? options.filter(function(option) {
+            return option.label.toLowerCase().includes(inputValue.toLowerCase());
+        }) : options;
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "No Results Found",
+            style: {
+                width: "400px"
+            },
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    style: {
+                        marginBottom: "1rem",
+                        fontSize: "0.9rem"
+                    },
+                    children: 'Try searching for "apple", "banana", or "cherry". The current search has no results.'
+                }),
+                /*#__PURE__*/ _jsx(Autocomplete, {
+                    options: filteredOptions,
+                    selected: selected,
+                    onSelect: setSelected,
+                    emptyState: {
+                        icon: SearchMinor,
+                        content: "No results found. Try a different search term."
+                    },
+                    textField: /*#__PURE__*/ _jsx(Autocomplete.TextField, {
+                        placeholder: "Search fruits...",
+                        value: inputValue,
+                        onChange: setInputValue
+                    })
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: "1rem"
+                    },
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        onClick: function() {
+                            return setInputValue("");
+                        },
+                        size: "slim",
+                        children: "Clear Search"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Autocomplete with custom empty state when no results found."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ProductSearch = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
+        var _useState1 = _sliced_to_array(useState(""), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+        var products = [
+            {
+                title: "Electronics",
+                options: [
+                    {
+                        label: "iPhone 15 Pro",
+                        value: "iphone15"
+                    },
+                    {
+                        label: "MacBook Air M2",
+                        value: "macbook"
+                    },
+                    {
+                        label: "AirPods Pro",
+                        value: "airpods"
+                    },
+                    {
+                        label: "iPad Pro",
+                        value: "ipad"
+                    }
+                ]
+            },
+            {
+                title: "Clothing",
+                options: [
+                    {
+                        label: "Cotton T-Shirt",
+                        value: "tshirt"
+                    },
+                    {
+                        label: "Denim Jeans",
+                        value: "jeans"
+                    },
+                    {
+                        label: "Running Shoes",
+                        value: "shoes"
+                    },
+                    {
+                        label: "Winter Jacket",
+                        value: "jacket"
+                    }
+                ]
+            },
+            {
+                title: "Home & Garden",
+                options: [
+                    {
+                        label: "Coffee Maker",
+                        value: "coffee"
+                    },
+                    {
+                        label: "Garden Hose",
+                        value: "hose"
+                    },
+                    {
+                        label: "Desk Lamp",
+                        value: "lamp"
+                    }
+                ]
+            }
+        ];
+        var filteredOptions = inputValue ? products.map(function(category) {
+            return _object_spread_props(_object_spread({}, category), {
+                options: category.options.filter(function(option) {
+                    return option.label.toLowerCase().includes(inputValue.toLowerCase());
+                })
+            });
+        }).filter(function(category) {
+            return category.options.length > 0;
+        }) : products;
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Product Catalog Search",
+            style: {
+                width: "500px"
+            },
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Autocomplete, {
+                    options: filteredOptions,
+                    selected: selected,
+                    allowMultiple: true,
+                    onSelect: setSelected,
+                    textField: /*#__PURE__*/ _jsx(Autocomplete.TextField, {
+                        placeholder: "Search products...",
+                        value: inputValue,
+                        onChange: setInputValue
+                    }),
+                    emptyState: {
+                        icon: ProductsMinor,
+                        content: "No products found matching your search."
+                    }
+                }),
+                selected.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        marginTop: "1.5rem"
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs(Text, {
+                            variant: "headingSm",
+                            style: {
+                                marginBottom: "0.5rem"
+                            },
+                            children: [
+                                "Selected Products (",
+                                selected.length,
+                                ")"
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                display: "flex",
+                                flexWrap: "wrap",
+                                gap: "0.5rem"
+                            },
+                            children: selected.map(function(item) {
+                                return /*#__PURE__*/ _jsx(Tag, {
+                                    children: item
+                                }, item);
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Product search autocomplete with categorized results."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var CustomerSearch = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), selected = _useState[0], setSelected = _useState[1];
+        var _useState1 = _sliced_to_array(useState(""), 2), inputValue = _useState1[0], setInputValue = _useState1[1];
+        var customers = [
+            {
+                label: "John Smith (john@example.com)",
+                value: "customer1"
+            },
+            {
+                label: "Sarah Johnson (sarah@company.com)",
+                value: "customer2"
+            },
+            {
+                label: "Mike Wilson (mike@business.org)",
+                value: "customer3"
+            },
+            {
+                label: "Lisa Brown (lisa@startup.io)",
+                value: "customer4"
+            },
+            {
+                label: "David Miller (david@corp.net)",
+                value: "customer5"
+            },
+            {
+                label: "Emma Davis (emma@agency.com)",
+                value: "customer6"
+            }
+        ];
+        var filteredOptions = inputValue ? customers.filter(function(option) {
+            return option.label.toLowerCase().includes(inputValue.toLowerCase());
+        }) : customers;
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Customer Management",
+            style: {
+                width: "500px"
+            },
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "2",
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        variant: "bodySm",
+                        children: "Search by name or email address to find customers."
+                    }),
+                    /*#__PURE__*/ _jsx(Autocomplete, {
+                        options: filteredOptions,
+                        selected: selected,
+                        allowMultiple: true,
+                        onSelect: setSelected,
+                        textField: /*#__PURE__*/ _jsx(Autocomplete.TextField, {
+                            placeholder: "Search customers by name or email...",
+                            value: inputValue,
+                            onChange: setInputValue
+                        }),
+                        emptyState: {
+                            icon: CustomersMinor,
+                            content: "No customers found. Try searching by name or email."
+                        }
+                    }),
+                    selected.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            marginTop: "1.5rem"
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs(Text, {
+                                variant: "headingSm",
+                                style: {
+                                    marginBottom: "0.5rem"
+                                },
+                                children: [
+                                    "Selected Customers (",
+                                    selected.length,
+                                    ")"
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    display: "flex",
+                                    flexDirection: "column",
+                                    gap: "0.5rem"
+                                },
+                                children: selected.map(function(customerId) {
+                                    var customer = customers.find(function(c) {
+                                        return c.value === customerId;
+                                    });
+                                    return /*#__PURE__*/ _jsxs(HorizontalStack, {
+                                        gap: "2",
+                                        blockAlign: "center",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Thumbnail, {
+                                                size: "small"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                variant: "bodySm",
+                                                children: customer === null || customer === void 0 ? void 0 : customer.label
+                                            })
+                                        ]
+                                    });
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Customer search with email addresses and multiple selection."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};