@heymantle/litho 0.0.10 → 0.0.12

package/dist/esm/stories/Pane.stories.js

@@ -228,6 +228,7 @@ import TextField from "../components/TextField.js";
 import Page from "../components/Page.js";
 import Box from "../components/Box.js";
 import Grid from "../components/Grid.js";
+import { useTabStorage } from "../utilities/useTabStorage.js";
 import { EditMajor, DeleteMajor, ShareIosMinor, DuplicateMinor } from "@shopify/polaris-icons";
 export default {
     title: 'Litho/Pane',
@@ -264,6 +265,7 @@ export default {
 export var Default = {
     render: function(args) {
         var _useState = _sliced_to_array(useState(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = useTabStorage();
         return /*#__PURE__*/ _jsxs(Page, {
             title: "Pane Demo",
             children: [
@@ -274,7 +276,7 @@ export var Default = {
                         /*#__PURE__*/ _jsx(Box, {
                             paddingBlockEnd: "4",
                             children: /*#__PURE__*/ _jsx(Text, {
-                                children: "Click the button below to open a basic pane with header, content, and footer sections."
+                                children: "Click the button below to open a basic pane with header, content, and footer sections. The pane now includes tabbed functionality with automatic tab creation."
                             })
                         }),
                         /*#__PURE__*/ _jsx(Button, {
@@ -291,6 +293,9 @@ export var Default = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "basic-pane",
+                    tabTitle: "Basic Pane",
                     children: [
                         /*#__PURE__*/ _jsx(Pane.Header, {
                             children: /*#__PURE__*/ _jsx(Text, {
@@ -309,7 +314,7 @@ export var Default = {
                                         })
                                     }),
                                     /*#__PURE__*/ _jsx(Text, {
-                                        children: "The pane can be closed by clicking the close button in the header, pressing the Escape key, or programmatically."
+                                        children: "The pane can be closed by clicking the close button in the tab, pressing the Escape key, or programmatically."
                                     })
                                 ]
                             })
@@ -347,6 +352,7 @@ export var Default = {
 export var WithActions = {
     render: function() {
         var _useState = _sliced_to_array(useState(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = useTabStorage();
         var headerActions = [
             {
                 icon: EditMajor,
@@ -398,6 +404,9 @@ export var WithActions = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "product-details",
+                    tabTitle: "Product Details",
                     children: [
                         /*#__PURE__*/ _jsx(Pane.Header, {
                             actions: headerActions,
@@ -530,6 +539,7 @@ export var WithActions = {
 export var FormPane = {
     render: function() {
         var _useState = _sliced_to_array(useState(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = useTabStorage();
         var _useState1 = _sliced_to_array(useState({
             name: '',
             email: '',
@@ -595,6 +605,9 @@ export var FormPane = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "add-contact",
+                    tabTitle: "Add New Contact",
                     children: [
                         /*#__PURE__*/ _jsx(Pane.Header, {
                             children: /*#__PURE__*/ _jsx(Text, {
@@ -695,6 +708,7 @@ export var FormPane = {
 export var DetailViewPane = {
     render: function() {
         var _useState = _sliced_to_array(useState(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = useTabStorage();
         var _useState1 = _sliced_to_array(useState(null), 2), selectedOrder = _useState1[0], setSelectedOrder = _useState1[1];
         var orders = [
             {
@@ -843,6 +857,9 @@ export var DetailViewPane = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "order-".concat(selectedOrder === null || selectedOrder === void 0 ? void 0 : selectedOrder.id),
+                    tabTitle: "Order ".concat(selectedOrder === null || selectedOrder === void 0 ? void 0 : selectedOrder.id),
                     children: [
                         /*#__PURE__*/ _jsx(Pane.Header, {
                             actions: headerActions,
@@ -1089,6 +1106,8 @@ export var StackedPanes = {
     render: function() {
         var _useState = _sliced_to_array(useState(false), 2), firstPaneOpen = _useState[0], setFirstPaneOpen = _useState[1];
         var _useState1 = _sliced_to_array(useState(false), 2), secondPaneOpen = _useState1[0], setSecondPaneOpen = _useState1[1];
+        var firstPaneTabStorage = useTabStorage('stacked-pane-first');
+        var secondPaneTabStorage = useTabStorage('stacked-pane-second');
         return /*#__PURE__*/ _jsxs(Page, {
             title: "Stacked Panes",
             children: [
@@ -1115,6 +1134,9 @@ export var StackedPanes = {
                     onClose: function() {
                         return setFirstPaneOpen(false);
                     },
+                    tabStorage: firstPaneTabStorage,
+                    tabId: "categories",
+                    tabTitle: "Categories",
                     children: [
                         /*#__PURE__*/ _jsx(Pane.Header, {
                             children: /*#__PURE__*/ _jsx(Text, {
@@ -1189,6 +1211,9 @@ export var StackedPanes = {
                     onClose: function() {
                         return setSecondPaneOpen(false);
                     },
+                    tabStorage: secondPaneTabStorage,
+                    tabId: "category-details",
+                    tabTitle: "Category Details",
                     children: [
                         /*#__PURE__*/ _jsx(Pane.Header, {
                             children: /*#__PURE__*/ _jsx(Text, {
@@ -1311,9 +1336,325 @@ export var StackedPanes = {
         }
     }
 };
+export var AskModal = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var _useState1 = _sliced_to_array(useState("ask"), 2), askContext = _useState1[0], setAskContext = _useState1[1];
+        var tabStorage = useTabStorage();
+        return /*#__PURE__*/ _jsxs(Page, {
+            title: "Ask Modal Pane",
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Ask Modal Example",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: 'This example demonstrates the AskModal pane type. It creates a single "Ask" tab that can be reused. Opening multiple times will switch to the existing tab instead of creating new ones. The tab title is always "Ask" regardless of the context.'
+                            }),
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                horizontal: true,
+                                gap: "4",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        primary: askContext === "ask",
+                                        onClick: function() {
+                                            return setAskContext("ask");
+                                        },
+                                        children: "Ask Mode"
+                                    }),
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        primary: askContext === "search",
+                                        onClick: function() {
+                                            return setAskContext("search");
+                                        },
+                                        children: "Search Mode"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                primary: true,
+                                onClick: function() {
+                                    return setPaneOpen(true);
+                                },
+                                children: "Open Ask Modal"
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Pane, {
+                    open: paneOpen,
+                    onClose: function() {
+                        return setPaneOpen(false);
+                    },
+                    tabStorage: tabStorage,
+                    tabId: "ask-tab",
+                    tabTitle: askContext === "search" ? "Search" : "Ask",
+                    tabKey: "ask",
+                    children: [
+                        /*#__PURE__*/ _jsx(Pane.Header, {
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingMd",
+                                children: askContext === "search" ? "Search" : "Ask"
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Pane.Content, {
+                            children: /*#__PURE__*/ _jsx(Box, {
+                                padding: "4",
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            children: [
+                                                "This is the ",
+                                                askContext === "search" ? "Search" : "Ask",
+                                                ' modal pane. The tab title will be "',
+                                                askContext === "search" ? "Search" : "Ask",
+                                                '" based on the context.'
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "bodySm",
+                                            color: "subdued",
+                                            children: "Try switching between Ask and Search modes to see the tab title change. Opening multiple times will switch to the existing tab instead of creating duplicates."
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Pane.Footer, {
+                            children: /*#__PURE__*/ _jsx(Box, {
+                                padding: "4",
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    horizontal: true,
+                                    gap: "4",
+                                    align: "end",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            onClick: function() {
+                                                return setPaneOpen(false);
+                                            },
+                                            children: "Close"
+                                        }),
+                                        /*#__PURE__*/ _jsxs(Button, {
+                                            primary: true,
+                                            onClick: function() {
+                                                return alert("".concat(askContext, " functionality"));
+                                            },
+                                            children: [
+                                                askContext === "search" ? "Search" : "Ask",
+                                                " Question"
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'AskModal pane type that creates a reusable "Ask" or "Search" tab based on context. Multiple opens will switch to the existing tab.'
+            }
+        }
+    }
+};
+export var PinnedTickets = {
+    render: function() {
+        var _useState = _sliced_to_array(useState(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var _useState1 = _sliced_to_array(useState('TICKET-001'), 2), ticketId = _useState1[0], setTicketId = _useState1[1];
+        var _useState2 = _sliced_to_array(useState('John Smith'), 2), customerName = _useState2[0], setCustomerName = _useState2[1];
+        var tabStorage = useTabStorage();
+        var tickets = [
+            {
+                id: 'TICKET-001',
+                customer: 'John Smith',
+                subject: 'Login Issues'
+            },
+            {
+                id: 'TICKET-002',
+                customer: 'Sarah Johnson',
+                subject: 'Billing Question'
+            },
+            {
+                id: 'TICKET-003',
+                customer: 'Mike Wilson',
+                subject: 'Feature Request'
+            },
+            {
+                id: 'TICKET-004',
+                customer: 'Emily Davis',
+                subject: 'Password Reset'
+            },
+            {
+                id: 'TICKET-005',
+                customer: 'Robert Brown',
+                subject: 'Account Locked'
+            },
+            {
+                id: 'TICKET-006',
+                customer: 'Lisa Anderson',
+                subject: 'Payment Failed'
+            },
+            {
+                id: 'TICKET-007',
+                customer: 'David Miller',
+                subject: 'Refund Request'
+            },
+            {
+                id: 'TICKET-008',
+                customer: 'Jennifer Taylor',
+                subject: 'Shipping Delay'
+            },
+            {
+                id: 'TICKET-009',
+                customer: 'Michael Garcia',
+                subject: 'Product Defect'
+            },
+            {
+                id: 'TICKET-010',
+                customer: 'Amanda White',
+                subject: 'Subscription Cancel'
+            },
+            {
+                id: 'TICKET-011',
+                customer: 'Christopher Lee',
+                subject: 'Data Export'
+            },
+            {
+                id: 'TICKET-012',
+                customer: 'Jessica Martinez',
+                subject: 'API Integration'
+            }
+        ];
+        var handleOpenTicket = function(ticket) {
+            setTicketId(ticket.id);
+            setCustomerName(ticket.customer);
+            setPaneOpen(true);
+        };
+        return /*#__PURE__*/ _jsxs(Page, {
+            title: "Pinned Tickets Pane",
+            children: [
+                /*#__PURE__*/ _jsx(Card, {
+                    title: "Pinned Tickets Example",
+                    padded: true,
+                    children: /*#__PURE__*/ _jsxs(Stack, {
+                        gap: "4",
+                        children: [
+                            /*#__PURE__*/ _jsx(Text, {
+                                children: "This example demonstrates the PinnedTicketsPane type. Each ticket creates its own tab with the customer name. Multiple tickets can be pinned simultaneously, each getting their own tab. Opening the same ticket multiple times will switch to the existing tab instead of creating duplicates."
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                variant: "bodySm",
+                                color: "subdued",
+                                children: "Try clicking the same ticket multiple times - it will switch to the existing tab instead of creating duplicates."
+                            }),
+                            /*#__PURE__*/ _jsx(Stack, {
+                                gap: "2",
+                                children: tickets.map(function(ticket) {
+                                    return /*#__PURE__*/ _jsxs(Button, {
+                                        onClick: function() {
+                                            return handleOpenTicket(ticket);
+                                        },
+                                        children: [
+                                            "Open ",
+                                            ticket.customer,
+                                            " - ",
+                                            ticket.subject
+                                        ]
+                                    }, ticket.id);
+                                })
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ _jsxs(Pane, {
+                    open: paneOpen,
+                    onClose: function() {
+                        return setPaneOpen(false);
+                    },
+                    tabStorage: tabStorage,
+                    tabId: "ticket-".concat(ticketId),
+                    tabTitle: customerName,
+                    tabKey: "ticket-".concat(ticketId),
+                    children: [
+                        /*#__PURE__*/ _jsx(Pane.Header, {
+                            children: /*#__PURE__*/ _jsx(Text, {
+                                variant: "headingMd",
+                                children: customerName
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Pane.Content, {
+                            children: /*#__PURE__*/ _jsx(Box, {
+                                padding: "4",
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    gap: "4",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(Text, {
+                                            children: [
+                                                "This is a pinned ticket for ",
+                                                customerName,
+                                                " (Ticket ID: ",
+                                                ticketId,
+                                                ")."
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Text, {
+                                            variant: "bodySm",
+                                            color: "subdued",
+                                            children: "Each pinned ticket gets its own tab with the customer name as the tab label. Opening the same ticket multiple times will switch to the existing tab instead of creating duplicates."
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(Pane.Footer, {
+                            children: /*#__PURE__*/ _jsx(Box, {
+                                padding: "4",
+                                children: /*#__PURE__*/ _jsxs(Stack, {
+                                    horizontal: true,
+                                    gap: "4",
+                                    align: "end",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            onClick: function() {
+                                                return setPaneOpen(false);
+                                            },
+                                            children: "Close Ticket"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            primary: true,
+                                            onClick: function() {
+                                                return alert('Reply to ticket');
+                                            },
+                                            children: "Reply"
+                                        })
+                                    ]
+                                })
+                            })
+                        })
+                    ]
+                })
+            ]
+        });
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'PinnedTicketsPane type that creates a separate tab for each pinned ticket with customer name as tab label. Prevents duplicate tabs for the same ticket.'
+            }
+        }
+    }
+};
 export var CustomLayout = {
     render: function() {
         var _useState = _sliced_to_array(useState(false), 2), paneOpen = _useState[0], setPaneOpen = _useState[1];
+        var tabStorage = useTabStorage();
         return /*#__PURE__*/ _jsxs(Page, {
             title: "Custom Pane Layout",
             children: [
@@ -1340,10 +1681,12 @@ export var CustomLayout = {
                     onClose: function() {
                         return setPaneOpen(false);
                     },
+                    tabStorage: tabStorage,
+                    tabId: "live-chat",
+                    tabTitle: "Live Chat Support",
                     children: [
                         /*#__PURE__*/ _jsxs(Pane.Header, {
                             bottomBorder: false,
-                            showCloseButton: false,
                             children: [
                                 /*#__PURE__*/ _jsxs(Stack, {
                                     horizontal: true,

package/dist/esm/utilities/useBodyScrollLock.js

@@ -0,0 +1,53 @@
+"use client";
+import { useEffect, useRef } from "react";
+// Reference counter for body scroll lock (shared across all components)
+var bodyScrollLockCount = 0;
+/**
+ * Locks body scrolling by adding overflow-hidden class
+ * Uses reference counting to coordinate between multiple components
+ */ var lockBodyScroll = function() {
+    if (typeof document === 'undefined') return;
+    bodyScrollLockCount++;
+    if (bodyScrollLockCount === 1) {
+        document.body.classList.add('overflow-hidden');
+    }
+};
+/**
+ * Unlocks body scrolling by removing overflow-hidden class
+ * Uses reference counting to coordinate between multiple components
+ */ var unlockBodyScroll = function() {
+    if (typeof document === 'undefined') return;
+    bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+    if (bodyScrollLockCount === 0) {
+        document.body.classList.remove('overflow-hidden');
+    }
+};
+/**
+ * Custom hook for managing body scroll lock
+ * Uses reference counting to coordinate between multiple components (panes, modals, etc.)
+ * 
+ * @param {boolean} shouldLock - Whether to lock body scrolling
+ * @example
+ * // In a component:
+ * useBodyScrollLock(open && isMobile);
+ */ export function useBodyScrollLock(shouldLock) {
+    var hasLockedRef = useRef(false);
+    useEffect(function() {
+        if (shouldLock && !hasLockedRef.current) {
+            lockBodyScroll();
+            hasLockedRef.current = true;
+        } else if (!shouldLock && hasLockedRef.current) {
+            unlockBodyScroll();
+            hasLockedRef.current = false;
+        }
+        return function() {
+            if (hasLockedRef.current) {
+                unlockBodyScroll();
+                hasLockedRef.current = false;
+            }
+        };
+    }, [
+        shouldLock
+    ]);
+}
+export default useBodyScrollLock;

package/dist/esm/utilities/useKeyboardAction.js

@@ -0,0 +1,25 @@
+import { useCallback } from "react";
+/**
+ * Hook that provides a keyboard action handler for Enter and Space keys.
+ * Useful for making interactive elements keyboard accessible.
+ * 
+ * @returns {Function} A callback function that takes (event, action) and triggers the action on Enter/Space
+ * 
+ * @example
+ * const handleKeyboardAction = useKeyboardAction();
+ * 
+ * <div
+ *   role="button"
+ *   tabIndex={0}
+ *   onKeyDown={(e) => handleKeyboardAction(e, () => doSomething())}
+ * >
+ *   Click me
+ * </div>
+ */ export var useKeyboardAction = function() {
+    return useCallback(function(e, action) {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            action();
+        }
+    }, []);
+};

package/dist/esm/utilities/useLocalStorage.js

@@ -0,0 +1,115 @@
+"use client";
+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 _instanceof(left, right) {
+    if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+        return !!right[Symbol.hasInstance](left);
+    } else {
+        return left instanceof right;
+    }
+}
+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);
+}
+import { useState, useCallback } from "react";
+/**
+ * Custom hook for managing localStorage with React state
+ * @param {string} key - The localStorage key
+ * @param {any} initialValue - The initial value if key doesn't exist
+ * @param {Object} options - Optional configuration
+ * @param {boolean} options.serialize - Whether to serialize/deserialize JSON (default: true)
+ * @returns {[any, Function]} - [storedValue, setValue]
+ */ export function useLocalStorage(key, initialValue) {
+    var options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    var _options_serialize = options.serialize, serialize = _options_serialize === void 0 ? true : _options_serialize;
+    // State to store our value
+    var _useState = _sliced_to_array(useState(function() {
+        if (typeof window === 'undefined') {
+            return initialValue;
+        }
+        try {
+            var item = window.localStorage.getItem(key);
+            if (item === null) {
+                return initialValue;
+            }
+            if (serialize) {
+                return JSON.parse(item);
+            }
+            return item;
+        } catch (error) {
+            console.warn('Error reading localStorage key "'.concat(key, '":'), error);
+            return initialValue;
+        }
+    }), 2), storedValue = _useState[0], setStoredValue = _useState[1];
+    // Return a wrapped version of useState's setter function that
+    // persists the new value to localStorage.
+    var setValue = useCallback(function(value) {
+        try {
+            // Use functional update to get current value without needing it in dependencies
+            setStoredValue(function(currentValue) {
+                // Allow value to be a function so we have the same API as useState
+                var valueToStore = _instanceof(value, Function) ? value(currentValue) : value;
+                // Save to local storage
+                if (typeof window !== 'undefined') {
+                    if (serialize) {
+                        window.localStorage.setItem(key, JSON.stringify(valueToStore));
+                    } else {
+                        window.localStorage.setItem(key, valueToStore);
+                    }
+                }
+                return valueToStore;
+            });
+        } catch (error) {
+            console.warn('Error setting localStorage key "'.concat(key, '":'), error);
+        }
+    }, [
+        key,
+        serialize
+    ]);
+    return [
+        storedValue,
+        setValue
+    ];
+}
+export default useLocalStorage;