@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/RadioButton.stories.js

@@ -0,0 +1,598 @@
+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 { transformStorySource } from "../utilities/transformers.js";
+import RadioButton from "../components/RadioButton.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+export default {
+    title: 'Litho/RadioButton',
+    component: RadioButton,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A RadioButton component that allows users to select one option from a group. RadioButtons are typically used when users need to make mutually exclusive choices."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        label: 'Radio button option',
+        name: 'radio-group',
+        value: 'option1'
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Label text for the radio button'
+        },
+        name: {
+            control: 'text',
+            description: 'Name attribute for grouping radio buttons'
+        },
+        value: {
+            control: 'text',
+            description: 'Value of the radio button'
+        },
+        checked: {
+            control: 'boolean',
+            description: 'Whether the radio button is selected'
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the radio button is disabled'
+        },
+        helpText: {
+            control: 'text',
+            description: 'Additional descriptive text'
+        },
+        error: {
+            control: 'text',
+            description: 'Error message to display'
+        },
+        labelHidden: {
+            control: 'boolean',
+            description: 'Whether to hide the label visually but keep it available for screen readers'
+        },
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the radio input'
+        },
+        tooltip: {
+            control: 'object',
+            description: 'Tooltip content for the radio button label'
+        },
+        alignItems: {
+            control: 'select',
+            options: [
+                'stretch',
+                'center'
+            ],
+            description: 'Vertical alignment of radio button elements'
+        },
+        onChange: {
+            action: 'changed',
+            description: 'Callback when selection changes'
+        },
+        onFocus: {
+            action: 'focused',
+            description: 'Callback function called when the radio button gains focus'
+        },
+        onBlur: {
+            action: 'blurred',
+            description: 'Callback function called when the radio button loses focus'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(args.checked || false), 2), checked = _useState[0], setChecked = _useState[1];
+        return /*#__PURE__*/ _jsx(RadioButton, _object_spread_props(_object_spread({}, args), {
+            checked: checked,
+            onChange: function(newChecked, value) {
+                var _args_onChange;
+                setChecked(newChecked);
+                (_args_onChange = args.onChange) === null || _args_onChange === void 0 ? void 0 : _args_onChange.call(args, newChecked, value);
+            }
+        }));
+    }
+};
+export var WithHelpText = {
+    args: {
+        label: 'Send notifications',
+        helpText: 'Receive email notifications for important updates',
+        name: 'notifications',
+        value: 'enabled'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(false), 2), checked = _useState[0], setChecked = _useState[1];
+        return /*#__PURE__*/ _jsx(RadioButton, _object_spread_props(_object_spread({}, args), {
+            checked: checked,
+            onChange: setChecked
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio buttons can include help text for additional context.'
+            }
+        }
+    }
+};
+export var WithError = {
+    args: {
+        label: 'Required option',
+        error: 'Please select an option',
+        name: 'required-group',
+        value: 'option'
+    },
+    render: function(args) {
+        var _useState = _sliced_to_array(useState(false), 2), checked = _useState[0], setChecked = _useState[1];
+        return /*#__PURE__*/ _jsx(RadioButton, _object_spread_props(_object_spread({}, args), {
+            checked: checked,
+            onChange: setChecked
+        }));
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio buttons can display error states for validation.'
+            }
+        }
+    }
+};
+export var Disabled = {
+    args: {
+        label: 'Disabled option',
+        disabled: true,
+        name: 'disabled-group',
+        value: 'disabled'
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Radio buttons can be disabled to prevent interaction.'
+            }
+        }
+    }
+};
+export var RadioGroup = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('medium'), 2), selectedValue = _useState[0], setSelectedValue = _useState[1];
+        var options = [
+            {
+                value: 'small',
+                label: 'Small',
+                helpText: 'Perfect for personal use'
+            },
+            {
+                value: 'medium',
+                label: 'Medium',
+                helpText: 'Good for small teams'
+            },
+            {
+                value: 'large',
+                label: 'Large',
+                helpText: 'Best for large organizations'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Text, {
+                    variant: "headingSm",
+                    children: "Choose your plan size:"
+                }),
+                options.map(function(option) {
+                    return /*#__PURE__*/ _jsx(RadioButton, {
+                        label: option.label,
+                        helpText: option.helpText,
+                        name: "plan-size",
+                        value: option.value,
+                        checked: selectedValue === option.value,
+                        onChange: function(checked) {
+                            if (checked) {
+                                setSelectedValue(option.value);
+                            }
+                        }
+                    }, option.value);
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '1rem',
+                        padding: '1rem',
+                        backgroundColor: '#f9f9f9',
+                        borderRadius: '4px'
+                    },
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Selected: ",
+                            selectedValue
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Multiple radio buttons work together as a group for mutually exclusive selection.'
+            }
+        }
+    }
+};
+export var PaymentMethod = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('credit-card'), 2), paymentMethod = _useState[0], setPaymentMethod = _useState[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Payment Method",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(RadioButton, {
+                        label: "Credit Card",
+                        helpText: "Pay with Visa, MasterCard, or American Express",
+                        name: "payment",
+                        value: "credit-card",
+                        checked: paymentMethod === 'credit-card',
+                        onChange: function(checked) {
+                            return checked && setPaymentMethod('credit-card');
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(RadioButton, {
+                        label: "PayPal",
+                        helpText: "Pay securely with your PayPal account",
+                        name: "payment",
+                        value: "paypal",
+                        checked: paymentMethod === 'paypal',
+                        onChange: function(checked) {
+                            return checked && setPaymentMethod('paypal');
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(RadioButton, {
+                        label: "Bank Transfer",
+                        helpText: "Direct bank transfer (2-3 business days)",
+                        name: "payment",
+                        value: "bank-transfer",
+                        checked: paymentMethod === 'bank-transfer',
+                        onChange: function(checked) {
+                            return checked && setPaymentMethod('bank-transfer');
+                        }
+                    }),
+                    /*#__PURE__*/ _jsx(RadioButton, {
+                        label: "Apple Pay",
+                        helpText: "Quick payment with Touch ID or Face ID",
+                        name: "payment",
+                        value: "apple-pay",
+                        checked: paymentMethod === 'apple-pay',
+                        disabled: true,
+                        onChange: function(checked) {
+                            return checked && setPaymentMethod('apple-pay');
+                        }
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Real-world example showing payment method selection with different states.'
+            }
+        }
+    }
+};
+export var ShippingOptions = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('standard'), 2), shippingOption = _useState[0], setShippingOption = _useState[1];
+        var shippingOptions = [
+            {
+                value: 'standard',
+                label: 'Standard Shipping',
+                helpText: '5-7 business days • Free',
+                price: 'Free'
+            },
+            {
+                value: 'express',
+                label: 'Express Shipping',
+                helpText: '2-3 business days • $9.99',
+                price: '$9.99'
+            },
+            {
+                value: 'overnight',
+                label: 'Overnight Shipping',
+                helpText: 'Next business day • $24.99',
+                price: '$24.99'
+            }
+        ];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Shipping Options",
+            padded: true,
+            children: /*#__PURE__*/ _jsx("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: shippingOptions.map(function(option) {
+                    return /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'flex-start',
+                            padding: '0.75rem',
+                            border: shippingOption === option.value ? '2px solid #2196f3' : '1px solid #e1e1e1',
+                            borderRadius: '4px',
+                            backgroundColor: shippingOption === option.value ? '#f3f9ff' : 'white'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(RadioButton, {
+                                label: option.label,
+                                helpText: option.helpText,
+                                name: "shipping",
+                                value: option.value,
+                                checked: shippingOption === option.value,
+                                onChange: function(checked) {
+                                    return checked && setShippingOption(option.value);
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                style: {
+                                    color: '#2196f3'
+                                },
+                                children: option.price
+                            })
+                        ]
+                    }, option.value);
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Shipping selection example with visual selection indicators and pricing.'
+            }
+        }
+    }
+};
+export var SettingsForm = {
+    render: function() {
+        var _useState = _sliced_to_array(useState('friends'), 2), privacy = _useState[0], setPrivacy = _useState[1];
+        var _useState1 = _sliced_to_array(useState('important'), 2), notifications = _useState1[0], setNotifications = _useState1[1];
+        return /*#__PURE__*/ _jsx(Card, {
+            title: "Privacy Settings",
+            padded: true,
+            children: /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '2rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                style: {
+                                    marginBottom: '1rem'
+                                },
+                                children: "Profile Visibility"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '0.75rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(RadioButton, {
+                                        label: "Public",
+                                        helpText: "Anyone can see your profile",
+                                        name: "privacy",
+                                        value: "public",
+                                        checked: privacy === 'public',
+                                        onChange: function(checked) {
+                                            return checked && setPrivacy('public');
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(RadioButton, {
+                                        label: "Friends Only",
+                                        helpText: "Only your friends can see your profile",
+                                        name: "privacy",
+                                        value: "friends",
+                                        checked: privacy === 'friends',
+                                        onChange: function(checked) {
+                                            return checked && setPrivacy('friends');
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(RadioButton, {
+                                        label: "Private",
+                                        helpText: "Only you can see your profile",
+                                        name: "privacy",
+                                        value: "private",
+                                        checked: privacy === 'private',
+                                        onChange: function(checked) {
+                                            return checked && setPrivacy('private');
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingSm",
+                                style: {
+                                    marginBottom: '1rem'
+                                },
+                                children: "Email Notifications"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '0.75rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(RadioButton, {
+                                        label: "All notifications",
+                                        helpText: "Receive all email notifications",
+                                        name: "notifications",
+                                        value: "all",
+                                        checked: notifications === 'all',
+                                        onChange: function(checked) {
+                                            return checked && setNotifications('all');
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(RadioButton, {
+                                        label: "Important only",
+                                        helpText: "Only receive critical notifications",
+                                        name: "notifications",
+                                        value: "important",
+                                        checked: notifications === 'important',
+                                        onChange: function(checked) {
+                                            return checked && setNotifications('important');
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(RadioButton, {
+                                        label: "None",
+                                        helpText: "Don't send any email notifications",
+                                        name: "notifications",
+                                        value: "none",
+                                        checked: notifications === 'none',
+                                        onChange: function(checked) {
+                                            return checked && setNotifications('none');
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Complex form example with multiple radio button groups for different settings.'
+            }
+        }
+    }
+};