@heymantle/litho 0.0.3 → 0.0.4

package/dist/esm/stories/RadioButtonCard.stories.js

@@ -0,0 +1,772 @@
+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 _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 RadioButtonCard from "../components/RadioButtonCard.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import VerticalStack from "../components/VerticalStack.js";
+import HorizontalStack from "../components/HorizontalStack.js";
+import Box from "../components/Box.js";
+export default {
+    title: 'Litho/RadioButtonCard',
+    component: RadioButtonCard,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A RadioButtonCard component that renders radio buttons as styled cards with labels, descriptions, and help text. It provides extensive styling options and supports error states, disabled states, and tooltips."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        label: 'Option Label',
+        name: 'example',
+        value: 'option1',
+        checked: false,
+        disabled: false
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'The text label for the radio button card'
+        },
+        description: {
+            control: 'text',
+            description: 'A description for the radio button option'
+        },
+        name: {
+            control: 'text',
+            description: 'The name attribute for the radio input (groups radio buttons)'
+        },
+        value: {
+            control: 'text',
+            description: 'The value attribute for the radio input'
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Whether the radio button is selected'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the radio button is disabled'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message to display'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Additional help text below the radio button'
+        },
+        tooltip: {
+            control: 'text',
+            description: 'Tooltip content for the label'
+        },
+        labelHidden: {
+            control: 'boolean',
+            description: 'Whether the label is visually hidden'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        return /*#__PURE__*/ _jsx(RadioButtonCard, _object_spread({}, args));
+    }
+};
+export var BasicGroup = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('standard'), 2), selectedValue = _useState[0], setSelectedValue = _useState[1];
+        var options = [
+            {
+                value: 'basic',
+                label: 'Basic Plan',
+                description: 'Perfect for individuals getting started'
+            },
+            {
+                value: 'standard',
+                label: 'Standard Plan',
+                description: 'Great for small teams and growing businesses'
+            },
+            {
+                value: 'premium',
+                label: 'Premium Plan',
+                description: 'Advanced features for large organizations'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Select a Plan",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "4",
+                    children: options.map(function(option) {
+                        return /*#__PURE__*/ _jsx(RadioButtonCard, {
+                            name: "plan",
+                            value: option.value,
+                            label: option.label,
+                            description: option.description,
+                            checked: selectedValue === option.value,
+                            onChange: function(e) {
+                                return setSelectedValue(e.target.value);
+                            }
+                        }, option.value);
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "6",
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        variant: "bodySm",
+                        children: [
+                            "Selected plan: ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: selectedValue
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Basic group of radio button cards for plan selection.'
+            }
+        }
+    }
+};
+export var WithHelpText = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('credit-card'), 2), selectedMethod = _useState[0], setSelectedMethod = _useState[1];
+        var paymentMethods = [
+            {
+                value: 'credit-card',
+                label: 'Credit Card',
+                description: 'Pay with Visa, MasterCard, or American Express',
+                helpText: 'Most popular payment method with instant processing'
+            },
+            {
+                value: 'bank-transfer',
+                label: 'Bank Transfer',
+                description: 'Direct transfer from your bank account',
+                helpText: 'Processing takes 2-3 business days'
+            },
+            {
+                value: 'digital-wallet',
+                label: 'Digital Wallet',
+                description: 'Pay with PayPal, Apple Pay, or Google Pay',
+                helpText: 'Quick and secure one-click payments'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Payment Method",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "4",
+                    children: paymentMethods.map(function(method) {
+                        return /*#__PURE__*/ _jsx(RadioButtonCard, {
+                            name: "payment",
+                            value: method.value,
+                            label: method.label,
+                            description: method.description,
+                            helpText: method.helpText,
+                            checked: selectedMethod === method.value,
+                            onChange: function(e) {
+                                return setSelectedMethod(e.target.value);
+                            }
+                        }, method.value);
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "6",
+                    padding: "4",
+                    background: "primary-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        variant: "bodySm",
+                        children: [
+                            "Selected payment method: ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: selectedMethod.replace('-', ' ')
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio button cards with help text providing additional context.'
+            }
+        }
+    }
+};
+export var ErrorStates = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(''), 2), selectedOption = _useState[0], setSelectedOption = _useState[1];
+        var _useState1 = _sliced_to_array(useState(false), 2), showError = _useState1[0], setShowError = _useState1[1];
+        var options = [
+            {
+                value: 'option1',
+                label: 'Option 1',
+                description: 'First available option'
+            },
+            {
+                value: 'option2',
+                label: 'Option 2',
+                description: 'Second available option'
+            },
+            {
+                value: 'option3',
+                label: 'Option 3',
+                description: 'Third available option'
+            }
+        ];
+        var handleSubmit = function() {
+            if (!selectedOption) {
+                setShowError(true);
+            } else {
+                setShowError(false);
+                alert("Selected: ".concat(selectedOption));
+            }
+        };
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Form with Validation",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                gap: "4",
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        children: "Please select an option (required):"
+                    }),
+                    options.map(function(option) {
+                        return /*#__PURE__*/ _jsx(RadioButtonCard, {
+                            name: "required-option",
+                            value: option.value,
+                            label: option.label,
+                            description: option.description,
+                            checked: selectedOption === option.value,
+                            error: showError && !selectedOption ? 'Please select an option' : '',
+                            onChange: function(e) {
+                                setSelectedOption(e.target.value);
+                                setShowError(false);
+                            }
+                        }, option.value);
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "4",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            primary: true,
+                            onClick: handleSubmit,
+                            children: "Submit Form"
+                        })
+                    }),
+                    showError && /*#__PURE__*/ _jsx(Box, {
+                        paddingBlockStart: "4",
+                        padding: "4",
+                        background: "critical-subdued",
+                        border: "critical",
+                        borderRadius: "default",
+                        children: /*#__PURE__*/ _jsx(Text, {
+                            color: "critical",
+                            variant: "bodySm",
+                            children: "Please select one of the options above to continue."
+                        })
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio button cards with error state validation.'
+            }
+        }
+    }
+};
+export var DisabledStates = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('basic'), 2), selectedFeature = _useState[0], setSelectedFeature = _useState[1];
+        var features = [
+            {
+                value: 'basic',
+                label: 'Basic Features',
+                description: 'Essential functionality for all users',
+                disabled: false
+            },
+            {
+                value: 'advanced',
+                label: 'Advanced Features',
+                description: 'Premium functionality with advanced tools',
+                disabled: false
+            },
+            {
+                value: 'enterprise',
+                label: 'Enterprise Features',
+                description: 'Coming soon - Advanced enterprise functionality',
+                disabled: true,
+                helpText: 'This feature will be available in Q2 2024'
+            },
+            {
+                value: 'beta',
+                label: 'Beta Features',
+                description: 'Experimental features currently in testing',
+                disabled: true,
+                helpText: 'Contact support to join our beta program'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Feature Selection",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "4",
+                    children: features.map(function(feature) {
+                        return /*#__PURE__*/ _jsx(RadioButtonCard, {
+                            name: "features",
+                            value: feature.value,
+                            label: feature.label,
+                            description: feature.description,
+                            helpText: feature.helpText,
+                            disabled: feature.disabled,
+                            checked: selectedFeature === feature.value,
+                            onChange: function(e) {
+                                return setSelectedFeature(e.target.value);
+                            }
+                        }, feature.value);
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "6",
+                    padding: "4",
+                    background: "subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        variant: "bodySm",
+                        children: [
+                            "Selected features: ",
+                            /*#__PURE__*/ _jsx("strong", {
+                                children: selectedFeature
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio button cards with some options disabled.'
+            }
+        }
+    }
+};
+export var ShippingOptions = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('standard'), 2), selectedShipping = _useState[0], setSelectedShipping = _useState[1];
+        var shippingOptions = [
+            {
+                value: 'standard',
+                label: 'Standard Shipping',
+                description: '5-7 business days',
+                helpText: 'Free for orders over $50',
+                price: 'Free'
+            },
+            {
+                value: 'express',
+                label: 'Express Shipping',
+                description: '2-3 business days',
+                helpText: 'Guaranteed delivery by end of business day',
+                price: '$9.99'
+            },
+            {
+                value: 'overnight',
+                label: 'Overnight Shipping',
+                description: 'Next business day',
+                helpText: 'Order by 2 PM for next day delivery',
+                price: '$24.99'
+            },
+            {
+                value: 'same-day',
+                label: 'Same Day Delivery',
+                description: 'Within 4 hours',
+                helpText: 'Available in select cities only',
+                price: '$19.99'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Shipping Options",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "4",
+                    children: shippingOptions.map(function(option) {
+                        return /*#__PURE__*/ _jsxs(Box, {
+                            position: "relative",
+                            children: [
+                                /*#__PURE__*/ _jsx(RadioButtonCard, {
+                                    name: "shipping",
+                                    value: option.value,
+                                    label: option.label,
+                                    description: option.description,
+                                    helpText: option.helpText,
+                                    checked: selectedShipping === option.value,
+                                    onChange: function(e) {
+                                        return setSelectedShipping(e.target.value);
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    position: "absolute",
+                                    insetBlockStart: "4",
+                                    insetInlineEnd: "4",
+                                    style: {
+                                        fontSize: '1rem',
+                                        fontWeight: 'bold',
+                                        color: option.price === 'Free' ? '#28a745' : '#333'
+                                    },
+                                    children: option.price
+                                })
+                            ]
+                        }, option.value);
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "6",
+                    padding: "4",
+                    background: "success-subdued",
+                    borderRadius: "default",
+                    children: /*#__PURE__*/ _jsxs(VerticalStack, {
+                        gap: "2",
+                        children: [
+                            /*#__PURE__*/ _jsxs(Text, {
+                                variant: "bodySm",
+                                children: [
+                                    "Selected shipping: ",
+                                    /*#__PURE__*/ _jsx("strong", {
+                                        children: selectedShipping.replace('-', ' ')
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs(Text, {
+                                variant: "caption",
+                                children: [
+                                    "Estimated delivery: ",
+                                    selectedShipping === 'standard' ? '5-7 business days' : selectedShipping === 'express' ? '2-3 business days' : selectedShipping === 'overnight' ? 'Next business day' : 'Within 4 hours'
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Real-world shipping options selection with pricing and delivery times.'
+            }
+        }
+    }
+};
+export var SubscriptionPlans = {
+    render: function() {
+        var _subscriptionPlans_find;
+        var _useState = _sliced_to_array(useState('pro'), 2), selectedPlan = _useState[0], setSelectedPlan = _useState[1];
+        var subscriptionPlans = [
+            {
+                value: 'free',
+                label: 'Free Plan',
+                description: 'Perfect for trying out our service',
+                helpText: 'Includes: 1 project, basic support, 1GB storage',
+                price: '$0/month',
+                popular: false
+            },
+            {
+                value: 'pro',
+                label: 'Pro Plan',
+                description: 'Best for individuals and small teams',
+                helpText: 'Includes: 10 projects, priority support, 100GB storage, advanced features',
+                price: '$29/month',
+                popular: true
+            },
+            {
+                value: 'business',
+                label: 'Business Plan',
+                description: 'Ideal for growing businesses',
+                helpText: 'Includes: Unlimited projects, 24/7 support, 1TB storage, custom integrations',
+                price: '$99/month',
+                popular: false
+            },
+            {
+                value: 'enterprise',
+                label: 'Enterprise Plan',
+                description: 'Custom solution for large organizations',
+                helpText: 'Includes: Everything in Business plus custom SLA, dedicated support, unlimited storage',
+                price: 'Contact us',
+                popular: false
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Choose Your Plan",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "4",
+                    children: subscriptionPlans.map(function(plan) {
+                        return /*#__PURE__*/ _jsxs(Box, {
+                            position: "relative",
+                            children: [
+                                plan.popular && /*#__PURE__*/ _jsx(Box, {
+                                    position: "absolute",
+                                    insetBlockStart: "-8px",
+                                    insetInlineEnd: "4",
+                                    background: "primary",
+                                    color: "white",
+                                    padding: "1 2",
+                                    borderRadius: "default",
+                                    style: {
+                                        fontSize: '0.7rem',
+                                        fontWeight: 'bold',
+                                        zIndex: 1
+                                    },
+                                    children: "MOST POPULAR"
+                                }),
+                                /*#__PURE__*/ _jsx(RadioButtonCard, {
+                                    name: "subscription",
+                                    value: plan.value,
+                                    label: plan.label,
+                                    description: plan.description,
+                                    helpText: plan.helpText,
+                                    checked: selectedPlan === plan.value,
+                                    onChange: function(e) {
+                                        return setSelectedPlan(e.target.value);
+                                    }
+                                }),
+                                /*#__PURE__*/ _jsx(Box, {
+                                    position: "absolute",
+                                    insetBlockStart: "4",
+                                    insetInlineEnd: "4",
+                                    style: {
+                                        fontSize: '1.1rem',
+                                        fontWeight: 'bold',
+                                        color: plan.price === 'Contact us' ? '#666' : '#007bff'
+                                    },
+                                    children: plan.price
+                                })
+                            ]
+                        }, plan.value);
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "8",
+                    children: /*#__PURE__*/ _jsxs(HorizontalStack, {
+                        align: "space-between",
+                        blockAlign: "center",
+                        children: [
+                            /*#__PURE__*/ _jsxs(VerticalStack, {
+                                gap: "1",
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Text, {
+                                        variant: "bodySm",
+                                        children: [
+                                            "Selected plan: ",
+                                            /*#__PURE__*/ _jsx("strong", {
+                                                children: selectedPlan
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        variant: "caption",
+                                        color: "subdued",
+                                        children: (_subscriptionPlans_find = subscriptionPlans.find(function(p) {
+                                            return p.value === selectedPlan;
+                                        })) === null || _subscriptionPlans_find === void 0 ? void 0 : _subscriptionPlans_find.price
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: selectedPlan === 'enterprise' ? 'Contact Sales' : 'Start Free Trial'
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Subscription plan selection with pricing, popular indicators, and detailed features.'
+            }
+        }
+    }
+};
+export var CustomStyling = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('light'), 2), selectedTheme = _useState[0], setSelectedTheme = _useState[1];
+        var themes = [
+            {
+                value: 'light',
+                label: 'Light Theme',
+                description: 'Clean and bright interface',
+                tooltip: 'Recommended for daytime use'
+            },
+            {
+                value: 'dark',
+                label: 'Dark Theme',
+                description: 'Easy on the eyes for extended use',
+                tooltip: 'Perfect for low-light environments'
+            },
+            {
+                value: 'auto',
+                label: 'Auto Theme',
+                description: 'Matches your system preferences',
+                tooltip: 'Automatically switches between light and dark'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Theme Selection",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(VerticalStack, {
+                    gap: "4",
+                    children: themes.map(function(theme) {
+                        return /*#__PURE__*/ _jsx(RadioButtonCard, {
+                            name: "theme",
+                            value: theme.value,
+                            label: theme.label,
+                            description: theme.description,
+                            tooltip: theme.tooltip,
+                            checked: selectedTheme === theme.value,
+                            onChange: function(e) {
+                                return setSelectedTheme(e.target.value);
+                            }
+                        }, theme.value);
+                    })
+                }),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "6",
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        padding: "4",
+                        borderRadius: "default",
+                        border: "default",
+                        style: {
+                            backgroundColor: selectedTheme === 'light' ? '#ffffff' : selectedTheme === 'dark' ? '#2d3748' : '#f7fafc',
+                            color: selectedTheme === 'dark' ? '#ffffff' : '#000000'
+                        },
+                        children: /*#__PURE__*/ _jsxs(Text, {
+                            variant: "bodySm",
+                            style: {
+                                color: selectedTheme === 'dark' ? '#ffffff' : '#000000'
+                            },
+                            children: [
+                                "Preview: This is how your interface will look with the ",
+                                /*#__PURE__*/ _jsx("strong", {
+                                    children: selectedTheme
+                                }),
+                                " theme."
+                            ]
+                        })
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio button cards with tooltips and live preview functionality.'
+            }
+        }
+    }
+};