@heymantle/litho 0.0.3 → 0.0.4

package/dist/cjs/stories/Navigation.stories.js

@@ -0,0 +1,605 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get Default () {
+        return Default;
+    },
+    get Disabled () {
+        return Disabled;
+    },
+    get FullExample () {
+        return FullExample;
+    },
+    get WithBadges () {
+        return WithBadges;
+    },
+    get WithSections () {
+        return WithSections;
+    },
+    get WithSubNavigation () {
+        return WithSubNavigation;
+    },
+    get default () {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = require("react");
+var _transformers = require("../utilities/transformers.js");
+var _Navigation = /*#__PURE__*/ _interop_require_default(require("../components/Navigation.js"));
+var _Box = /*#__PURE__*/ _interop_require_default(require("../components/Box.js"));
+var _polarisicons = require("@shopify/polaris-icons");
+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 _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: 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 _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);
+}
+var _default = {
+    title: "Litho/Navigation",
+    component: _Navigation.default,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: "A Navigation component that provides hierarchical navigation with support for sections, badges, and various interaction states. Navigation helps users move through different areas of an application."
+            },
+            source: {
+                transform: _transformers.transformStorySource
+            }
+        }
+    },
+    tags: [
+        "autodocs"
+    ]
+};
+var basicItems = [
+    {
+        title: "Main",
+        links: [
+            {
+                url: "/dashboard",
+                label: "Dashboard",
+                icon: _polarisicons.HomeMajor
+            },
+            {
+                url: "/products",
+                label: "Products",
+                icon: _polarisicons.ProductsMajor,
+                badge: "12"
+            },
+            {
+                url: "/customers",
+                label: "Customers",
+                icon: _polarisicons.CustomersMajor
+            },
+            {
+                url: "/orders",
+                label: "Orders",
+                icon: _polarisicons.OrdersMajor,
+                badge: "3"
+            }
+        ]
+    }
+];
+var Default = {
+    render: function(args) {
+        var _useState = _sliced_to_array((0, _react.useState)(args.location), 2), location = _useState[0], setLocation = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            height: "400px",
+            width: "240px",
+            border: "default",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default, {
+                sections: basicItems
+            })
+        });
+    }
+};
+var WithSections = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("/dashboard"), 2), location = _useState[0], setLocation = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            height: "500px",
+            width: "240px",
+            border: "default",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Navigation.default, {
+                location: location,
+                onNavigate: function(item) {
+                    return setLocation(item.url);
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        title: "Main",
+                        items: [
+                            {
+                                url: "/dashboard",
+                                label: "Dashboard",
+                                icon: _polarisicons.HomeMajor
+                            },
+                            {
+                                url: "/analytics",
+                                label: "Analytics",
+                                icon: _polarisicons.AnalyticsMajor
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        title: "Sales",
+                        items: [
+                            {
+                                url: "/products",
+                                label: "Products",
+                                icon: _polarisicons.ProductsMajor,
+                                badge: "24"
+                            },
+                            {
+                                url: "/customers",
+                                label: "Customers",
+                                icon: _polarisicons.CustomersMajor
+                            },
+                            {
+                                url: "/orders",
+                                label: "Orders",
+                                icon: _polarisicons.OrdersMajor,
+                                badge: "5"
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        title: "Settings",
+                        items: [
+                            {
+                                url: "/apps",
+                                label: "Apps",
+                                icon: _polarisicons.AppsMajor
+                            },
+                            {
+                                url: "/settings",
+                                label: "Settings",
+                                icon: _polarisicons.SettingsMajor
+                            }
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Navigation can be organized into sections with titles for better grouping."
+            }
+        }
+    }
+};
+var WithSubNavigation = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("/products"), 2), location = _useState[0], setLocation = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            height: "600px",
+            width: "240px",
+            border: "default",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default, {
+                location: location,
+                onNavigate: function(item) {
+                    return setLocation(item.url);
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                    items: [
+                        {
+                            url: "/dashboard",
+                            label: "Dashboard",
+                            icon: _polarisicons.HomeMajor
+                        },
+                        {
+                            url: "/products",
+                            label: "Products",
+                            icon: _polarisicons.ProductsMajor,
+                            subNavigationItems: [
+                                {
+                                    url: "/products/all",
+                                    label: "All products"
+                                },
+                                {
+                                    url: "/products/inventory",
+                                    label: "Inventory"
+                                },
+                                {
+                                    url: "/products/collections",
+                                    label: "Collections"
+                                },
+                                {
+                                    url: "/products/gift-cards",
+                                    label: "Gift cards"
+                                }
+                            ]
+                        },
+                        {
+                            url: "/customers",
+                            label: "Customers",
+                            icon: _polarisicons.CustomersMajor,
+                            subNavigationItems: [
+                                {
+                                    url: "/customers/all",
+                                    label: "All customers"
+                                },
+                                {
+                                    url: "/customers/segments",
+                                    label: "Segments"
+                                }
+                            ]
+                        },
+                        {
+                            url: "/orders",
+                            label: "Orders",
+                            icon: _polarisicons.OrdersMajor,
+                            badge: "8"
+                        },
+                        {
+                            url: "/analytics",
+                            label: "Analytics",
+                            icon: _polarisicons.AnalyticsMajor,
+                            subNavigationItems: [
+                                {
+                                    url: "/analytics/reports",
+                                    label: "Reports"
+                                },
+                                {
+                                    url: "/analytics/live-view",
+                                    label: "Live View"
+                                },
+                                {
+                                    url: "/analytics/behavior",
+                                    label: "Behavior"
+                                }
+                            ]
+                        }
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Navigation items can have sub-navigation for hierarchical organization."
+            }
+        }
+    }
+};
+var WithBadges = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("/dashboard"), 2), location = _useState[0], setLocation = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            height: "400px",
+            width: "240px",
+            border: "default",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default, {
+                location: location,
+                onNavigate: function(item) {
+                    return setLocation(item.url);
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                    items: [
+                        {
+                            url: "/dashboard",
+                            label: "Dashboard",
+                            icon: _polarisicons.HomeMajor
+                        },
+                        {
+                            url: "/products",
+                            label: "Products",
+                            icon: _polarisicons.ProductsMajor,
+                            badge: "142"
+                        },
+                        {
+                            url: "/orders",
+                            label: "Orders",
+                            icon: _polarisicons.OrdersMajor,
+                            badge: "7",
+                            badgeStatus: "critical"
+                        },
+                        {
+                            url: "/customers",
+                            label: "Customers",
+                            icon: _polarisicons.CustomersMajor,
+                            badge: "New",
+                            badgeStatus: "success"
+                        },
+                        {
+                            url: "/reports",
+                            label: "Reports",
+                            icon: _polarisicons.ReportsMajor,
+                            badge: "!",
+                            badgeStatus: "warning"
+                        }
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Navigation items can display badges with different statuses for notifications."
+            }
+        }
+    }
+};
+var Disabled = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("/dashboard"), 2), location = _useState[0], setLocation = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            height: "400px",
+            width: "240px",
+            border: "default",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default, {
+                location: location,
+                onNavigate: function(item) {
+                    return setLocation(item.url);
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                    items: [
+                        {
+                            url: "/dashboard",
+                            label: "Dashboard",
+                            icon: _polarisicons.HomeMajor
+                        },
+                        {
+                            url: "/products",
+                            label: "Products",
+                            icon: _polarisicons.ProductsMajor
+                        },
+                        {
+                            url: "/premium-feature",
+                            label: "Premium Feature",
+                            icon: _polarisicons.AnalyticsMajor,
+                            disabled: true,
+                            badge: "Pro"
+                        },
+                        {
+                            url: "/coming-soon",
+                            label: "Coming Soon",
+                            icon: _polarisicons.AppsMajor,
+                            disabled: true
+                        }
+                    ]
+                })
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Navigation items can be disabled to indicate unavailable features."
+            }
+        }
+    }
+};
+var FullExample = {
+    render: function() {
+        var _useState = _sliced_to_array((0, _react.useState)("/dashboard"), 2), location = _useState[0], setLocation = _useState[1];
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_Box.default, {
+            height: "700px",
+            width: "260px",
+            border: "default",
+            background: "subdued",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_Navigation.default, {
+                location: location,
+                onNavigate: function(item) {
+                    return setLocation(item.url);
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        items: [
+                            {
+                                url: "/dashboard",
+                                label: "Home",
+                                icon: _polarisicons.HomeMajor
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        title: "Sales channels",
+                        items: [
+                            {
+                                url: "/online-store",
+                                label: "Online Store",
+                                badge: "1",
+                                badgeStatus: "success"
+                            },
+                            {
+                                url: "/point-of-sale",
+                                label: "Point of Sale"
+                            },
+                            {
+                                url: "/buy-button",
+                                label: "Buy Button",
+                                disabled: true
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        title: "Sales",
+                        items: [
+                            {
+                                url: "/orders",
+                                label: "Orders",
+                                icon: _polarisicons.OrdersMajor,
+                                badge: "15"
+                            },
+                            {
+                                url: "/products",
+                                label: "Products",
+                                icon: _polarisicons.ProductsMajor,
+                                subNavigationItems: [
+                                    {
+                                        url: "/products/all",
+                                        label: "All products",
+                                        badge: "156"
+                                    },
+                                    {
+                                        url: "/products/inventory",
+                                        label: "Inventory"
+                                    },
+                                    {
+                                        url: "/products/transfers",
+                                        label: "Transfers"
+                                    },
+                                    {
+                                        url: "/products/collections",
+                                        label: "Collections",
+                                        badge: "12"
+                                    },
+                                    {
+                                        url: "/products/gift-cards",
+                                        label: "Gift cards"
+                                    }
+                                ]
+                            },
+                            {
+                                url: "/customers",
+                                label: "Customers",
+                                icon: _polarisicons.CustomersMajor,
+                                badge: "2,847"
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        title: "Analytics",
+                        items: [
+                            {
+                                url: "/analytics",
+                                label: "Analytics",
+                                icon: _polarisicons.AnalyticsMajor,
+                                subNavigationItems: [
+                                    {
+                                        url: "/analytics/overview",
+                                        label: "Overview"
+                                    },
+                                    {
+                                        url: "/analytics/reports",
+                                        label: "Reports"
+                                    },
+                                    {
+                                        url: "/analytics/live-view",
+                                        label: "Live View"
+                                    },
+                                    {
+                                        url: "/analytics/behavior",
+                                        label: "Behavior"
+                                    }
+                                ]
+                            },
+                            {
+                                url: "/reports",
+                                label: "Reports",
+                                icon: _polarisicons.ReportsMajor
+                            }
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_Navigation.default.Section, {
+                        title: "Settings",
+                        items: [
+                            {
+                                url: "/settings",
+                                label: "Settings",
+                                icon: _polarisicons.SettingsMajor,
+                                subNavigationItems: [
+                                    {
+                                        url: "/settings/general",
+                                        label: "General"
+                                    },
+                                    {
+                                        url: "/settings/payments",
+                                        label: "Payments"
+                                    },
+                                    {
+                                        url: "/settings/checkout",
+                                        label: "Checkout"
+                                    },
+                                    {
+                                        url: "/settings/shipping",
+                                        label: "Shipping and delivery"
+                                    },
+                                    {
+                                        url: "/settings/taxes",
+                                        label: "Taxes and duties"
+                                    },
+                                    {
+                                        url: "/settings/locations",
+                                        label: "Locations"
+                                    },
+                                    {
+                                        url: "/settings/notifications",
+                                        label: "Notifications"
+                                    }
+                                ]
+                            }
+                        ]
+                    })
+                ]
+            })
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: "Comprehensive navigation example showing all features working together."
+            }
+        }
+    }
+};