intelicoreact 1.5.41 → 1.6.1

package/dist/Atomic/UI/NavLine/NavLine.stories.js

@@ -0,0 +1,434 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CompactView: function() {
+        return CompactView;
+    },
+    DefaultWithIcons: function() {
+        return DefaultWithIcons;
+    },
+    SimpleDefault: function() {
+        return SimpleDefault;
+    },
+    SimpleWithCounts: function() {
+        return SimpleWithCounts;
+    },
+    SimpleWithDisabled: function() {
+        return SimpleWithDisabled;
+    },
+    SimpleWithScroll: function() {
+        return SimpleWithScroll;
+    },
+    WithHiddenTabs: function() {
+        return WithHiddenTabs;
+    },
+    WithLongLabels: function() {
+        return WithLongLabels;
+    },
+    default: function() {
+        return _default;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _reactrouterdom = require("react-router-dom");
+const _NavLine = /*#__PURE__*/ _interop_require_default(require("./NavLine"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const meta = {
+    title: 'UI/NavLine',
+    component: _NavLine.default,
+    parameters: {
+        layout: 'centered'
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: [
+                'simple',
+                'default'
+            ]
+        },
+        scrollMode: {
+            control: 'boolean'
+        },
+        isLocal: {
+            control: 'boolean'
+        },
+        isNavigateByKeys: {
+            control: 'boolean'
+        }
+    },
+    decorators: [
+        (Story)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.BrowserRouter, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    style: {
+                        maxWidth: '1200px',
+                        margin: '0 auto'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
+                })
+            })
+    ]
+};
+const _default = meta;
+const CustomTabContent = ({ label })=>/*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        style: {
+            padding: '20px',
+            background: '#f5f5f5',
+            borderRadius: '4px',
+            margin: '20px 0',
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)("h3", {
+                style: {
+                    margin: '0 0 10px'
+                },
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("p", {
+                children: [
+                    "Tab content for",
+                    label
+                ]
+            })
+        ]
+    });
+// Base Template
+const Template = (args)=>{
+    var _args_items_find;
+    const [activeTab, setActiveTab] = (0, _react.useState)(args.initialTab);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_NavLine.default, {
+        ...args,
+        activeTab: activeTab,
+        onChange: setActiveTab,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(CustomTabContent, {
+            label: ((_args_items_find = args.items.find((item)=>item.tabId === activeTab)) === null || _args_items_find === void 0 ? void 0 : _args_items_find.label) || ''
+        })
+    });
+};
+const SimpleDefault = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'general',
+        variant: 'simple',
+        isLocal: true,
+        scrollMode: false,
+        isNavigateByKeys: true,
+        items: [
+            {
+                tabId: 'general',
+                label: 'General'
+            },
+            {
+                tabId: 'payments',
+                label: 'Payments'
+            },
+            {
+                tabId: 'filters',
+                label: 'Filters'
+            },
+            {
+                tabId: 'settings',
+                label: 'Settings'
+            },
+            {
+                tabId: 'users',
+                label: 'Users'
+            },
+            {
+                tabId: 'reports',
+                label: 'Reports'
+            },
+            {
+                tabId: 'analytics',
+                label: 'Analytics'
+            }
+        ]
+    }
+};
+const SimpleWithScroll = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'tab4',
+        variant: 'simple',
+        isLocal: true,
+        scrollMode: true,
+        isNavigateByKeys: true,
+        items: Array.from({
+            length: 50
+        }, (_, i)=>({
+                tabId: `tab${i + 1}`,
+                label: `Tab ${i + 1}`
+            }))
+    }
+};
+const SimpleWithCounts = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'general',
+        variant: 'simple',
+        isLocal: true,
+        scrollMode: false,
+        isNavigateByKeys: true,
+        items: [
+            {
+                tabId: 'general',
+                label: 'General',
+                count: 5
+            },
+            {
+                tabId: 'payments',
+                label: 'Payments',
+                count: 12
+            },
+            {
+                tabId: 'filters',
+                label: 'Filters',
+                count: 3
+            },
+            {
+                tabId: 'settings',
+                label: 'Settings',
+                count: 8
+            },
+            {
+                tabId: 'users',
+                label: 'Users',
+                count: 24
+            }
+        ]
+    }
+};
+const SimpleWithDisabled = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'general',
+        variant: 'simple',
+        isLocal: true,
+        scrollMode: false,
+        isNavigateByKeys: true,
+        items: [
+            {
+                tabId: 'general',
+                label: 'Active Tab'
+            },
+            {
+                tabId: 'payments',
+                label: 'Disabled Tab',
+                disabled: true
+            },
+            {
+                tabId: 'filters',
+                label: 'Another Active'
+            },
+            {
+                tabId: 'settings',
+                label: 'Also Disabled',
+                disabled: true
+            },
+            {
+                tabId: 'users',
+                label: 'Active Again'
+            }
+        ]
+    }
+};
+const DefaultWithIcons = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'settings',
+        isLocal: true,
+        isNavigateByKeys: true,
+        items: [
+            {
+                tabId: 'settings',
+                label: 'Settings',
+                icon: 'Settings'
+            },
+            {
+                tabId: 'users',
+                label: 'Users',
+                icon: 'Users'
+            },
+            {
+                tabId: 'analytics',
+                label: 'Analytics',
+                icon: 'BarChart2'
+            },
+            {
+                tabId: 'notifications',
+                label: 'Notifications',
+                icon: 'Bell'
+            }
+        ]
+    }
+};
+const WithHiddenTabs = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'general',
+        variant: 'simple',
+        isLocal: true,
+        items: [
+            {
+                tabId: 'general',
+                label: 'Visible Tab 1'
+            },
+            {
+                tabId: 'hidden1',
+                label: 'Hidden Tab 1',
+                isHidden: true
+            },
+            {
+                tabId: 'visible2',
+                label: 'Visible Tab 2'
+            },
+            {
+                tabId: 'hidden2',
+                label: 'Hidden Tab 2',
+                isHidden: true
+            },
+            {
+                tabId: 'visible3',
+                label: 'Visible Tab 3'
+            }
+        ]
+    }
+};
+const WithLongLabels = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'tab1',
+        variant: 'simple',
+        isLocal: true,
+        scrollMode: true,
+        items: [
+            {
+                tabId: 'tab1',
+                label: 'Very Very Long Tab Label That Needs Scrolling'
+            },
+            {
+                tabId: 'tab2',
+                label: 'Another Extremely Long Tab Label For Testing Purposes'
+            },
+            {
+                tabId: 'tab3',
+                label: 'Yet Another Long Label That Extends Beyond View'
+            },
+            {
+                tabId: 'tab4',
+                label: 'One More Extra Long Tab Label Just To Be Sure'
+            },
+            {
+                tabId: 'tab5',
+                label: 'Final Very Long Tab Label For Good Measure'
+            }
+        ]
+    }
+};
+const CompactView = {
+    render: (args)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(Template, {
+            ...args
+        }),
+    args: {
+        initialTab: 'general',
+        variant: 'simple',
+        className: 'nav-line--compact',
+        isLocal: true,
+        items: [
+            {
+                tabId: 'general',
+                label: 'G',
+                title: 'General'
+            },
+            {
+                tabId: 'payments',
+                label: 'P',
+                title: 'Payments'
+            },
+            {
+                tabId: 'filters',
+                label: 'F',
+                title: 'Filters'
+            },
+            {
+                tabId: 'settings',
+                label: 'S',
+                title: 'Settings'
+            },
+            {
+                tabId: 'users',
+                label: 'U',
+                title: 'Users'
+            }
+        ]
+    }
+};