@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/ChoiceList.stories.js

@@ -0,0 +1,834 @@
+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 ChoiceList from "../components/ChoiceList.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import { transformStorySource } from "../utilities/transformers.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Badge from "../components/Badge.js";
+export default {
+    title: "Litho/ChoiceList",
+    component: ChoiceList,
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "A ChoiceList component that allows users to select one or multiple options from a list of choices. ChoiceLists support both single and multiple selection modes with customizable styling."
+            }
+        }
+    },
+    args: {
+        title: "Choose an option",
+        choices: [
+            {
+                label: "Option 1",
+                value: "option1"
+            },
+            {
+                label: "Option 2",
+                value: "option2"
+            },
+            {
+                label: "Option 3",
+                value: "option3"
+            }
+        ],
+        selected: []
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        title: {
+            control: "text",
+            description: "Title for the choice list"
+        },
+        titleHidden: {
+            control: "boolean",
+            description: "Whether to hide the title visually"
+        },
+        choices: {
+            control: "object",
+            description: "Array of choice objects with label, value, and optional properties",
+            table: {
+                type: {
+                    summary: "Array<ChoiceListItem>",
+                    detail: "{\n  value: string;\n  label: string;\n  disabled?: boolean;\n  helpText?: string;\n  tooltip?: React.ReactNode;\n  renderChildren?: () => React.ReactNode;\n}"
+                }
+            }
+        },
+        selected: {
+            control: "object",
+            description: "Array of currently selected values"
+        },
+        allowMultiple: {
+            control: "boolean",
+            description: "Whether multiple selections are allowed (uses checkboxes) or single selection (uses radio buttons)"
+        },
+        disabled: {
+            control: "boolean",
+            description: "Whether the entire choice list is disabled"
+        },
+        error: {
+            control: "text",
+            description: "Error message to display for validation"
+        },
+        name: {
+            control: "text",
+            description: "Name attribute for the choice inputs (used for grouping radio buttons)"
+        },
+        tooltip: {
+            control: "object",
+            description: "Tooltip content for the choice list title"
+        },
+        onChange: {
+            action: "selectionChanged",
+            description: "Callback when selection changes, receives updated array of selected values"
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.selected), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            padded: true,
+            children: /*#__PURE__*/ _jsx(ChoiceList, _object_spread_props(_object_spread({}, args), {
+                selected: selected,
+                onChange: function(newSelected) {
+                    var _args_onChange;
+                    setSelected(newSelected);
+                    (_args_onChange = args.onChange) === null || _args_onChange === void 0 ? void 0 : _args_onChange.call(args, newSelected);
+                }
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Default choice list with single selection mode."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var SingleSelection = {
+    args: {
+        title: "Select your plan",
+        allowMultiple: false,
+        choices: [
+            {
+                label: "Basic Plan - $9/month",
+                value: "basic"
+            },
+            {
+                label: "Pro Plan - $29/month",
+                value: "pro"
+            },
+            {
+                label: "Enterprise Plan - $99/month",
+                value: "enterprise"
+            }
+        ],
+        selected: [
+            "basic"
+        ]
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.selected), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            padded: true,
+            children: /*#__PURE__*/ _jsx(ChoiceList, _object_spread_props(_object_spread({}, args), {
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Choice lists can be restricted to single selection mode."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var MultipleSelection = {
+    args: {
+        title: "Select features",
+        allowMultiple: true,
+        choices: [
+            {
+                label: "Email notifications",
+                value: "email"
+            },
+            {
+                label: "SMS notifications",
+                value: "sms"
+            },
+            {
+                label: "Push notifications",
+                value: "push"
+            },
+            {
+                label: "Weekly digest",
+                value: "digest"
+            }
+        ],
+        selected: [
+            "email",
+            "push"
+        ]
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.selected), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            padded: true,
+            children: /*#__PURE__*/ _jsx(ChoiceList, _object_spread_props(_object_spread({}, args), {
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Choice lists can allow multiple selections with checkboxes."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithHelpText = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            "standard"
+        ]), 2), selected = _useState[0], setSelected = _useState[1];
+        var choices = [
+            {
+                label: "Standard Shipping",
+                value: "standard",
+                helpText: "5-7 business days • Free"
+            },
+            {
+                label: "Express Shipping",
+                value: "express",
+                helpText: "2-3 business days • $9.99"
+            },
+            {
+                label: "Overnight Shipping",
+                value: "overnight",
+                helpText: "Next business day • $24.99"
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            padded: true,
+            children: /*#__PURE__*/ _jsx(ChoiceList, {
+                title: "Shipping method",
+                choices: choices,
+                selected: selected,
+                onChange: setSelected,
+                allowMultiple: false
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Choice options can include help text for additional context."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var WithError = {
+    args: {
+        title: "Required selection",
+        error: "Please select at least one option",
+        choices: [
+            {
+                label: "Option A",
+                value: "a"
+            },
+            {
+                label: "Option B",
+                value: "b"
+            },
+            {
+                label: "Option C",
+                value: "c"
+            }
+        ],
+        selected: []
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.selected), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            padded: true,
+            children: /*#__PURE__*/ _jsx(ChoiceList, _object_spread_props(_object_spread({}, args), {
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Choice lists can display error states for validation."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var Disabled = {
+    args: {
+        title: "Disabled choice list",
+        disabled: true,
+        choices: [
+            {
+                label: "Option 1",
+                value: "option1"
+            },
+            {
+                label: "Option 2",
+                value: "option2"
+            },
+            {
+                label: "Option 3",
+                value: "option3"
+            }
+        ],
+        selected: [
+            "option1"
+        ]
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.selected), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            padded: true,
+            children: /*#__PURE__*/ _jsx(ChoiceList, _object_spread_props(_object_spread({}, args), {
+                selected: selected,
+                onChange: setSelected
+            }))
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Choice lists can be disabled to prevent interaction."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var ProductCategories = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            "electronics",
+            "books"
+        ]), 2), selectedCategories = _useState[0], setSelectedCategories = _useState[1];
+        var categories = [
+            {
+                label: "Electronics",
+                value: "electronics"
+            },
+            {
+                label: "Books",
+                value: "books"
+            },
+            {
+                label: "Clothing",
+                value: "clothing"
+            },
+            {
+                label: "Home & Garden",
+                value: "home-garden"
+            },
+            {
+                label: "Sports & Outdoors",
+                value: "sports"
+            },
+            {
+                label: "Toys & Games",
+                value: "toys"
+            },
+            {
+                label: "Health & Beauty",
+                value: "health"
+            },
+            {
+                label: "Automotive",
+                value: "automotive"
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Product Filter",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(ChoiceList, {
+                    title: "Categories",
+                    choices: categories,
+                    selected: selectedCategories,
+                    onChange: setSelectedCategories,
+                    allowMultiple: true
+                }),
+                /*#__PURE__*/ _jsxs(VerticalStack, {
+                    gap: "1",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            variant: "headingSm",
+                            children: "Selected: "
+                        }),
+                        /*#__PURE__*/ _jsx(HorizontalStack, {
+                            gap: "1",
+                            children: selectedCategories.map(function(category) {
+                                return /*#__PURE__*/ _jsx(Badge, {
+                                    children: category
+                                }, category);
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Real-world example of using choice lists for product category filtering."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var SubscriptionPlan = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([
+            "pro"
+        ]), 2), selectedPlan = _useState[0], setSelectedPlan = _useState[1];
+        var plans = [
+            {
+                label: "Starter",
+                value: "starter",
+                helpText: "Perfect for individuals • $0/month • 5 projects • 1GB storage"
+            },
+            {
+                label: "Professional",
+                value: "pro",
+                helpText: "For small teams • $29/month • Unlimited projects • 100GB storage"
+            },
+            {
+                label: "Enterprise",
+                value: "enterprise",
+                helpText: "For large organizations • $99/month • Advanced features • 1TB storage"
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Choose Your Plan",
+            children: [
+                /*#__PURE__*/ _jsx(Card.Section, {
+                    children: /*#__PURE__*/ _jsx(ChoiceList, {
+                        title: "Subscription plans",
+                        choices: plans,
+                        selected: selectedPlan,
+                        onChange: setSelectedPlan,
+                        allowMultiple: false
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card.Section, {
+                    subdued: true,
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                children: "Plan Summary"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: selectedPlan.length > 0 ? "You've selected the ".concat(selectedPlan[0], " plan.") : "No plan selected."
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "Continue to Payment"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Subscription plan selection with detailed plan information."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var SurveyForm = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), satisfaction = _useState[0], setSatisfaction = _useState[1];
+        var _useState1 = _sliced_to_array(useState([]), 2), features = _useState1[0], setFeatures = _useState1[1];
+        var _useState2 = _sliced_to_array(useState([]), 2), improvements = _useState2[0], setImprovements = _useState2[1];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Product Feedback Survey",
+            children: [
+                /*#__PURE__*/ _jsx(Card.Section, {
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsx(ChoiceList, {
+                                title: "How satisfied are you with our product?",
+                                choices: [
+                                    {
+                                        label: "Very satisfied",
+                                        value: "very-satisfied"
+                                    },
+                                    {
+                                        label: "Satisfied",
+                                        value: "satisfied"
+                                    },
+                                    {
+                                        label: "Neutral",
+                                        value: "neutral"
+                                    },
+                                    {
+                                        label: "Dissatisfied",
+                                        value: "dissatisfied"
+                                    },
+                                    {
+                                        label: "Very dissatisfied",
+                                        value: "very-dissatisfied"
+                                    }
+                                ],
+                                selected: satisfaction,
+                                onChange: setSatisfaction,
+                                allowMultiple: false
+                            }),
+                            /*#__PURE__*/ _jsx(ChoiceList, {
+                                title: "Which features do you use most? (Select all that apply)",
+                                choices: [
+                                    {
+                                        label: "Dashboard analytics",
+                                        value: "analytics"
+                                    },
+                                    {
+                                        label: "Team collaboration",
+                                        value: "collaboration"
+                                    },
+                                    {
+                                        label: "File sharing",
+                                        value: "file-sharing"
+                                    },
+                                    {
+                                        label: "Project templates",
+                                        value: "templates"
+                                    },
+                                    {
+                                        label: "Mobile app",
+                                        value: "mobile"
+                                    },
+                                    {
+                                        label: "API integrations",
+                                        value: "api"
+                                    }
+                                ],
+                                selected: features,
+                                onChange: setFeatures,
+                                allowMultiple: true
+                            }),
+                            /*#__PURE__*/ _jsx(ChoiceList, {
+                                title: "What areas need improvement? (Select all that apply)",
+                                choices: [
+                                    {
+                                        label: "User interface design",
+                                        value: "ui-design"
+                                    },
+                                    {
+                                        label: "Performance speed",
+                                        value: "performance"
+                                    },
+                                    {
+                                        label: "Documentation",
+                                        value: "documentation"
+                                    },
+                                    {
+                                        label: "Customer support",
+                                        value: "support"
+                                    },
+                                    {
+                                        label: "Pricing",
+                                        value: "pricing"
+                                    },
+                                    {
+                                        label: "Feature completeness",
+                                        value: "features"
+                                    }
+                                ],
+                                selected: improvements,
+                                onChange: setImprovements,
+                                allowMultiple: true
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Card.Section, {
+                    subdued: true,
+                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        gap: "1",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "Submit Survey"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Save as Draft"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Complex survey form using multiple choice lists with different selection modes."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};
+export var FormValidation = {
+    render: function() {
+        var _useState = _sliced_to_array(useState([]), 2), preferences = _useState[0], setPreferences = _useState[1];
+        var _useState1 = _sliced_to_array(useState([]), 2), communication = _useState1[0], setCommunication = _useState1[1];
+        var _useState2 = _sliced_to_array(useState({}), 2), errors = _useState2[0], setErrors = _useState2[1];
+        var handleSubmit = function() {
+            var newErrors = {};
+            if (preferences.length === 0) {
+                newErrors.preferences = "Please select at least one preference";
+            }
+            if (communication.length === 0) {
+                newErrors.communication = "Please select a communication method";
+            }
+            setErrors(newErrors);
+            if (Object.keys(newErrors).length === 0) {
+                console.log("Form submitted successfully");
+            }
+        };
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "User Preferences",
+            children: [
+                /*#__PURE__*/ _jsxs(Card.Section, {
+                    children: [
+                        /*#__PURE__*/ _jsx(ChoiceList, {
+                            title: "Marketing preferences",
+                            choices: [
+                                {
+                                    label: "Product updates",
+                                    value: "product-updates"
+                                },
+                                {
+                                    label: "Special offers",
+                                    value: "offers"
+                                },
+                                {
+                                    label: "Newsletter",
+                                    value: "newsletter"
+                                },
+                                {
+                                    label: "Event invitations",
+                                    value: "events"
+                                }
+                            ],
+                            selected: preferences,
+                            onChange: function(selected) {
+                                setPreferences(selected);
+                                if (errors.preferences && selected.length > 0) {
+                                    setErrors(function(prev) {
+                                        return _object_spread_props(_object_spread({}, prev), {
+                                            preferences: ""
+                                        });
+                                    });
+                                }
+                            },
+                            allowMultiple: true,
+                            error: errors.preferences
+                        }),
+                        /*#__PURE__*/ _jsx(ChoiceList, {
+                            title: "Preferred communication method",
+                            choices: [
+                                {
+                                    label: "Email",
+                                    value: "email"
+                                },
+                                {
+                                    label: "SMS",
+                                    value: "sms"
+                                },
+                                {
+                                    label: "Phone call",
+                                    value: "phone"
+                                },
+                                {
+                                    label: "Mail",
+                                    value: "mail"
+                                }
+                            ],
+                            selected: communication,
+                            onChange: function(selected) {
+                                setCommunication(selected);
+                                if (errors.communication && selected.length > 0) {
+                                    setErrors(function(prev) {
+                                        return _object_spread_props(_object_spread({}, prev), {
+                                            communication: ""
+                                        });
+                                    });
+                                }
+                            },
+                            allowMultiple: false,
+                            error: errors.communication
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(Card.Section, {
+                    subdued: true,
+                    children: /*#__PURE__*/ _jsx(Button, {
+                        primary: true,
+                        onClick: handleSubmit,
+                        children: "Save Preferences"
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Form validation example with error handling for required choice lists."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    }
+};