@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/stories/Tabs.stories.js

@@ -0,0 +1,684 @@
+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 Stack from "../components/Stack.js";
+import Tabs from "../components/Tabs.js";
+import Text from "../components/Text.js";
+import Card from "../components/Card.js";
+import Button from "../components/Button.js";
+import TextField from "../components/TextField.js";
+import Box from "../components/Box.js";
+export default {
+    title: 'Litho/Tabs',
+    component: Tabs,
+    parameters: {
+        layout: 'padded',
+        docs: {
+            description: {
+                component: "A Tabs component that allows users to switch between different views or sections of content. Tabs help organize related information in a compact interface."
+            },
+            source: {
+                transform: transformStorySource
+            }
+        }
+    },
+    args: {
+        tabs: [
+            {
+                id: 'tab1',
+                content: 'Tab 1',
+                panelID: 'panel1'
+            },
+            {
+                id: 'tab2',
+                content: 'Tab 2',
+                panelID: 'panel2'
+            },
+            {
+                id: 'tab3',
+                content: 'Tab 3',
+                panelID: 'panel3'
+            }
+        ],
+        selected: 0
+    },
+    tags: [
+        'autodocs'
+    ],
+    argTypes: {
+        tabs: {
+            control: 'object',
+            description: 'Array of tab configuration objects with id, content, icon, and disclosure properties'
+        },
+        selected: {
+            control: 'number',
+            description: 'Index of the currently selected tab'
+        },
+        fullWidth: {
+            control: 'boolean',
+            description: 'Whether the tabs should expand to fit the container width'
+        },
+        disclosureText: {
+            control: 'text',
+            description: 'Label for the "More" disclosure tab'
+        },
+        disclosure: {
+            control: 'boolean',
+            description: 'Whether the "More" disclosure is enabled'
+        },
+        activeDisclosure: {
+            control: 'boolean',
+            description: 'Whether the "More" disclosure is currently active'
+        },
+        padded: {
+            control: 'boolean',
+            description: 'Whether to apply padding to the Tabs container'
+        },
+        borderBottom: {
+            control: 'boolean',
+            description: 'Whether to apply a bottom border to the Tabs container'
+        },
+        onSelect: {
+            action: 'tabSelected',
+            description: 'Callback fired when a tab is selected, receives the tab index'
+        }
+    }
+};
+export var Default = {
+    render: function(args) {
+        var _args_tabs_selected;
+        var _useState = _sliced_to_array(useState(args.selected || 0), 2), selected = _useState[0], setSelected = _useState[1];
+        return /*#__PURE__*/ _jsxs("div", {
+            children: [
+                /*#__PURE__*/ _jsx(Tabs, _object_spread_props(_object_spread({}, args), {
+                    selected: selected,
+                    onSelect: setSelected
+                })),
+                /*#__PURE__*/ _jsx(Box, {
+                    paddingBlockStart: "4",
+                    padding: "4",
+                    background: "surface-neutral-subdued",
+                    borderRadius: "1",
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Content for ",
+                            (_args_tabs_selected = args.tabs[selected]) === null || _args_tabs_selected === void 0 ? void 0 : _args_tabs_selected.content
+                        ]
+                    })
+                })
+            ]
+        });
+    }
+};
+export var WithPanels = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(0), 2), selected = _useState[0], setSelected = _useState[1];
+        var tabs = [
+            {
+                id: 'overview',
+                content: 'Overview',
+                panelID: 'overview-panel'
+            },
+            {
+                id: 'details',
+                content: 'Details',
+                panelID: 'details-panel'
+            },
+            {
+                id: 'settings',
+                content: 'Settings',
+                panelID: 'settings-panel'
+            }
+        ];
+        var panels = [
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingMd",
+                        style: {
+                            marginBottom: '1rem'
+                        },
+                        children: "Overview"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        children: "This is the overview section with summary information about the current item."
+                    })
+                ]
+            }, "overview"),
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingMd",
+                        style: {
+                            marginBottom: '1rem'
+                        },
+                        children: "Details"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        children: "Detailed information and specifications can be found in this section."
+                    })
+                ]
+            }, "details"),
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        variant: "headingMd",
+                        style: {
+                            marginBottom: '1rem'
+                        },
+                        children: "Settings"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        children: "Configure options and preferences in this section."
+                    })
+                ]
+            }, "settings")
+        ];
+        return /*#__PURE__*/ _jsxs("div", {
+            children: [
+                /*#__PURE__*/ _jsx(Tabs, {
+                    tabs: tabs,
+                    selected: selected,
+                    onSelect: setSelected
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '1rem',
+                        padding: '1rem',
+                        border: '1px solid #e1e1e1',
+                        borderRadius: '4px'
+                    },
+                    children: panels[selected]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tabs with corresponding content panels that change based on selection.'
+            }
+        }
+    }
+};
+export var ManyTabs = {
+    render: function() {
+        var _tabs_selected;
+        var _useState = _sliced_to_array(useState(0), 2), selected = _useState[0], setSelected = _useState[1];
+        var tabs = [
+            {
+                id: 'dashboard',
+                content: 'Dashboard',
+                panelID: 'dashboard-panel'
+            },
+            {
+                id: 'analytics',
+                content: 'Analytics',
+                panelID: 'analytics-panel'
+            },
+            {
+                id: 'customers',
+                content: 'Customers',
+                panelID: 'customers-panel'
+            },
+            {
+                id: 'products',
+                content: 'Products',
+                panelID: 'products-panel'
+            },
+            {
+                id: 'orders',
+                content: 'Orders',
+                panelID: 'orders-panel'
+            },
+            {
+                id: 'inventory',
+                content: 'Inventory',
+                panelID: 'inventory-panel'
+            },
+            {
+                id: 'reports',
+                content: 'Reports',
+                panelID: 'reports-panel'
+            },
+            {
+                id: 'settings',
+                content: 'Settings',
+                panelID: 'settings-panel'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs("div", {
+            children: [
+                /*#__PURE__*/ _jsx(Tabs, {
+                    tabs: tabs,
+                    selected: selected,
+                    onSelect: setSelected
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '1rem',
+                        padding: '1rem',
+                        backgroundColor: '#f9f9f9',
+                        borderRadius: '4px'
+                    },
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Content for ",
+                            (_tabs_selected = tabs[selected]) === null || _tabs_selected === void 0 ? void 0 : _tabs_selected.content
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tabs handle overflow gracefully when there are many tabs.'
+            }
+        }
+    }
+};
+export var FormTabs = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(0), 2), selected = _useState[0], setSelected = _useState[1];
+        var tabs = [
+            {
+                id: 'basic',
+                content: 'Basic Info',
+                panelID: 'basic-panel'
+            },
+            {
+                id: 'advanced',
+                content: 'Advanced',
+                panelID: 'advanced-panel'
+            },
+            {
+                id: 'permissions',
+                content: 'Permissions',
+                panelID: 'permissions-panel'
+            }
+        ];
+        var panels = [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Name",
+                        placeholder: "Enter name"
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Email",
+                        placeholder: "Enter email"
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Phone",
+                        placeholder: "Enter phone number"
+                    })
+                ]
+            }, "basic"),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Company",
+                        placeholder: "Enter company name"
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Job Title",
+                        placeholder: "Enter job title"
+                    }),
+                    /*#__PURE__*/ _jsx(TextField, {
+                        label: "Department",
+                        placeholder: "Enter department"
+                    })
+                ]
+            }, "advanced"),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Text, {
+                        children: "Permission settings would go here."
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            gap: '0.5rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Grant Access"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Revoke Access"
+                            })
+                        ]
+                    })
+                ]
+            }, "permissions")
+        ];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "User Settings",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Tabs, {
+                    tabs: tabs,
+                    selected: selected,
+                    onSelect: setSelected
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '1.5rem'
+                    },
+                    children: panels[selected]
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '2rem',
+                        paddingTop: '1rem',
+                        borderTop: '1px solid #e1e1e1'
+                    },
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            gap: '0.5rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                children: "Save Changes"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tabs are commonly used in forms to organize different sections of information.'
+            }
+        }
+    }
+};
+export var WithIcons = {
+    render: function() {
+        var _tabs_selected;
+        var _useState = _sliced_to_array(useState(0), 2), selected = _useState[0], setSelected = _useState[1];
+        var tabs = [
+            {
+                id: 'home',
+                content: '🏠 Home',
+                panelID: 'home-panel'
+            },
+            {
+                id: 'search',
+                content: '🔍 Search',
+                panelID: 'search-panel'
+            },
+            {
+                id: 'notifications',
+                content: '🔔 Notifications',
+                panelID: 'notifications-panel'
+            },
+            {
+                id: 'profile',
+                content: '👤 Profile',
+                panelID: 'profile-panel'
+            }
+        ];
+        return /*#__PURE__*/ _jsxs("div", {
+            children: [
+                /*#__PURE__*/ _jsx(Tabs, {
+                    tabs: tabs,
+                    selected: selected,
+                    onSelect: setSelected
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '1rem',
+                        padding: '1rem',
+                        backgroundColor: '#f9f9f9',
+                        borderRadius: '4px'
+                    },
+                    children: /*#__PURE__*/ _jsxs(Text, {
+                        children: [
+                            "Content for ",
+                            (_tabs_selected = tabs[selected]) === null || _tabs_selected === void 0 ? void 0 : _tabs_selected.content
+                        ]
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Tab labels can include icons or emojis for better visual recognition.'
+            }
+        }
+    }
+};
+export var NavigationExample = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(0), 2), selected = _useState[0], setSelected = _useState[1];
+        var _useState1 = _sliced_to_array(useState('recent'), 2), activeOrder = _useState1[0], setActiveOrder = _useState1[1];
+        var tabs = [
+            {
+                id: 'all',
+                content: 'All Orders',
+                panelID: 'all-panel'
+            },
+            {
+                id: 'pending',
+                content: 'Pending',
+                panelID: 'pending-panel'
+            },
+            {
+                id: 'shipped',
+                content: 'Shipped',
+                panelID: 'shipped-panel'
+            },
+            {
+                id: 'delivered',
+                content: 'Delivered',
+                panelID: 'delivered-panel'
+            }
+        ];
+        var orderData = {
+            all: [
+                'Order #1001',
+                'Order #1002',
+                'Order #1003',
+                'Order #1004',
+                'Order #1005'
+            ],
+            pending: [
+                'Order #1001',
+                'Order #1003'
+            ],
+            shipped: [
+                'Order #1002',
+                'Order #1004'
+            ],
+            delivered: [
+                'Order #1005'
+            ]
+        };
+        var tabKeys = [
+            'all',
+            'pending',
+            'shipped',
+            'delivered'
+        ];
+        var currentOrders = orderData[tabKeys[selected]] || [];
+        return /*#__PURE__*/ _jsxs(Card, {
+            title: "Order Management",
+            padded: true,
+            children: [
+                /*#__PURE__*/ _jsx(Tabs, {
+                    tabs: tabs,
+                    selected: selected,
+                    onSelect: setSelected
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        marginTop: '1.5rem'
+                    },
+                    children: currentOrders.length > 0 ? /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.5rem'
+                        },
+                        children: currentOrders.map(function(order, index) {
+                            return /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    padding: '0.75rem',
+                                    border: '1px solid #e1e1e1',
+                                    borderRadius: '4px',
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(Text, {
+                                        children: order
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        size: "small",
+                                        children: "View Details"
+                                    })
+                                ]
+                            }, index);
+                        })
+                    }) : /*#__PURE__*/ _jsx(Text, {
+                        color: "subdued",
+                        children: "No orders in this category."
+                    })
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Real-world example showing tabs used for filtering and organizing content.'
+            }
+        }
+    }
+};