@heymantle/litho 0.0.1

package/dist/esm/components/Navigation.js

@@ -0,0 +1,321 @@
+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 _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;
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext } from "react";
+import { FrameContext } from "./AppProvider.js";
+import { tv } from "tailwind-variants";
+import { Badge, Icon, Text } from "../index.js";
+import { ChevronLeftMinor, ChevronRightMinor, ExternalMinor } from "@shopify/polaris-icons";
+var styles = tv({
+    base: "Litho-Navigation h-full w-full pt-12 @md:pt-0 pr-2.5 pb-3 @md:pb-0 flex flex-col gap-2 justify-between bg-surface-normal"
+});
+var sectionStyles = tv({
+    base: "Litho-Navigation-Section mb-4"
+});
+var titleStyles = tv({
+    base: "Litho-Navigation-Title relative min-h-8 ml-2.5 px-2.5 py-1.5 flex items-center justify-between gap-2",
+    variants: {
+        selected: {
+            true: "after:content-[''] after:absolute after:-left-2.5 after:top-0.5 after:bottom-0.5 after:w-0.75 after:rounded-r-md after:bg-brand-saturated"
+        },
+        hasAction: {
+            true: "cursor-pointer rounded-md hover"
+        }
+    }
+});
+/**
+ * Navigation component.
+ * A sidebar navigation component for displaying links, sections, and footer links.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {Object} [props.breadcrumb] - Breadcrumb navigation item.
+ * @param {string} [props.breadcrumb.content] - Label for the breadcrumb.
+ * @param {Function} [props.breadcrumb.onAction] - Callback for breadcrumb action.
+ * @param {Array<Object>} [props.sections] - Array of navigation sections.
+ * @param {Object} [props.sections[].title] - Section title configuration.
+ * @param {string} [props.sections[].title.label] - Title label.
+ * @param {boolean} [props.sections[].title.selected] - Whether the title is selected.
+ * @param {Function} [props.sections[].title.onAction] - Callback for title action.
+ * @param {Array<Object>} [props.sections[].links] - Array of link configurations for the section.
+ * @param {Array<Object>} [props.footerLinks] - Array of footer link configurations.
+ * @returns {JSX.Element} The rendered Navigation component.
+ */ function Navigation() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var breadcrumb = props.breadcrumb, sections = props.sections, footerLinks = props.footerLinks;
+    var setShowMobileNavigation = useContext(FrameContext).setShowMobileNavigation;
+    var classes = styles(props);
+    var sectionClasses = sectionStyles(props);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: classes,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                children: [
+                    breadcrumb && /*#__PURE__*/ _jsx("div", {
+                        className: sectionClasses,
+                        children: /*#__PURE__*/ _jsx(Navigation.Link, {
+                            label: breadcrumb.content || "Back",
+                            onAction: breadcrumb.onAction,
+                            icon: ChevronLeftMinor,
+                            keepNavigationOpen: breadcrumb.keepNavigationOpen
+                        })
+                    }),
+                    sections && sections.map(function(section, index) {
+                        var _section_title, _section_title1;
+                        if (!section.links) return null;
+                        var titleClasses = titleStyles({
+                            selected: (_section_title = section.title) === null || _section_title === void 0 ? void 0 : _section_title.selected,
+                            hasAction: !!((_section_title1 = section.title) === null || _section_title1 === void 0 ? void 0 : _section_title1.onAction)
+                        });
+                        var handleTitleClick = function() {
+                            var _section_title_onAction, _section_title;
+                            (_section_title_onAction = (_section_title = section.title).onAction) === null || _section_title_onAction === void 0 ? void 0 : _section_title_onAction.call(_section_title);
+                            if (!section.title.keepNavigationOpen) {
+                                setShowMobileNavigation(false);
+                            }
+                        };
+                        return /*#__PURE__*/ _jsxs("div", {
+                            className: sectionClasses,
+                            children: [
+                                section.title && /*#__PURE__*/ _jsx("div", {
+                                    className: titleClasses,
+                                    onClick: handleTitleClick,
+                                    children: /*#__PURE__*/ _jsx(Text, {
+                                        color: section.title.selected ? "link" : "normal",
+                                        fontWeight: "medium",
+                                        variant: "bodySm",
+                                        truncate: true,
+                                        children: section.title.label
+                                    })
+                                }),
+                                section.links.map(function(link, index) {
+                                    return /*#__PURE__*/ _jsx(Navigation.Link, _object_spread({}, link), "navigation-link-".concat(index));
+                                })
+                            ]
+                        }, "navigation-section-".concat(index));
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                children: footerLinks && footerLinks.map(function(link, index) {
+                    return /*#__PURE__*/ _jsx(Navigation.Link, _object_spread({}, link), "navigation-footer-link-".concat(index));
+                })
+            })
+        ]
+    });
+}
+var linkStyles = tv({
+    base: "Litho-Navigation-Link relative min-h-8 ml-2.5 px-2.5 py-1.5 flex items-center justify-between gap-2",
+    variants: {
+        selected: {
+            true: "Litho-Navigation-Link-Selected after:content-[''] after:absolute after:-left-2.5 after:top-0.5 after:bottom-0.5 after:w-0.75 after:rounded-r-md after:bg-brand-saturated"
+        },
+        hasAction: {
+            true: "cursor-pointer rounded-md hover"
+        },
+        onlyShowOnMobile: {
+            true: "@md:hidden"
+        }
+    },
+    defaultVariants: {
+        onlyShowOnMobile: false
+    }
+});
+/**
+ * Navigation.Link component.
+ * Represents a link within the navigation.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {boolean} [props.selected] - Whether the link is selected.
+ * @param {boolean} [props.highlight] - Whether the link is highlighted.
+ * @param {Array<Object>} [props.subLinks] - Array of sub-links for this link.
+ * @param {boolean} [props.showSubLinksAsRegularLinks] - Whether to render sub-links as regular links.
+ * @param {boolean} [props.showDividerAbove] - Whether to show a divider above the link.
+ * @param {boolean} [props.showDividerBelow] - Whether to show a divider below the link.
+ * @param {Function} [props.onAction] - Callback for the link action.
+ * @param {React.ReactNode} [props.source] - Optional source content to render.
+ * @param {React.ReactNode} [props.icon] - Optional icon to render.
+ * @param {string} [props.label] - Label for the link.
+ * @param {Object} [props.badge] - Badge configuration.
+ * @param {string} [props.badge.status] - Badge status (e.g., "success", "warning").
+ * @param {string} [props.badge.label] - Badge label.
+ * @param {boolean} [props.external] - Whether the link is external.
+ * @param {boolean} [props.disclosure] - Whether the link has a disclosure icon.
+ * @param {string} [props.iconDisplay] - Icon display style (e.g., "block", "inline").
+ * @param {boolean} [props.keepNavigationOpen] - Whether to keep the navigation open.
+ * @returns {JSX.Element} The rendered Link component.
+ */ function Link() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var selected = props.selected, highlight = props.highlight, subLinks = props.subLinks, showSubLinksAsRegularLinks = props.showSubLinksAsRegularLinks, showDividerAbove = props.showDividerAbove, showDividerBelow = props.showDividerBelow, onAction = props.onAction, source = props.source, icon = props.icon, label = props.label, badge = props.badge, external = props.external, expanded = props.expanded, _props_iconDisplay = props.iconDisplay, iconDisplay = _props_iconDisplay === void 0 ? "block" : _props_iconDisplay, _props_keepNavigationOpen = props.keepNavigationOpen, keepNavigationOpen = _props_keepNavigationOpen === void 0 ? false : _props_keepNavigationOpen, _props_onlyShowOnMobile = props.onlyShowOnMobile, onlyShowOnMobile = _props_onlyShowOnMobile === void 0 ? false : _props_onlyShowOnMobile, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure;
+    var setShowMobileNavigation = useContext(FrameContext).setShowMobileNavigation;
+    var subLinkIsSelected = subLinks === null || subLinks === void 0 ? void 0 : subLinks.some(function(subLink) {
+        return subLink.selected;
+    });
+    var grandChildLinkIsSelected = subLinks === null || subLinks === void 0 ? void 0 : subLinks.some(function(subLink) {
+        var _subLink_subLinks;
+        return (_subLink_subLinks = subLink.subLinks) === null || _subLink_subLinks === void 0 ? void 0 : _subLink_subLinks.some(function(grandChildLink) {
+            return grandChildLink.selected;
+        });
+    });
+    var linkSelected = selected || subLinkIsSelected && !highlight;
+    var linkClasses = linkStyles({
+        selected: linkSelected,
+        hasAction: !!onAction,
+        highlight: highlight,
+        onlyShowOnMobile: onlyShowOnMobile
+    });
+    var handleClick = function() {
+        onAction === null || onAction === void 0 ? void 0 : onAction();
+        if (!keepNavigationOpen) {
+            setShowMobileNavigation(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            showDividerAbove && /*#__PURE__*/ _jsx("div", {
+                className: "h-px w-full bg-tint-3 dark:bg-tint-alt-3 my-3"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: linkClasses,
+                onClick: handleClick,
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-2 truncate",
+                        children: [
+                            source ? source : icon ? /*#__PURE__*/ _jsx(Icon, {
+                                source: icon,
+                                color: linkSelected ? "link" : "subdued",
+                                display: iconDisplay
+                            }) : null,
+                            /*#__PURE__*/ _jsx(Text, {
+                                fontWeight: "medium",
+                                color: linkSelected ? "link" : subLinkIsSelected || grandChildLinkIsSelected ? "default" : "normal",
+                                truncate: true,
+                                children: label
+                            })
+                        ]
+                    }),
+                    badge ? /*#__PURE__*/ _jsx(Badge, {
+                        status: badge.status,
+                        children: badge.label
+                    }) : external ? /*#__PURE__*/ _jsx(Icon, {
+                        source: ExternalMinor,
+                        color: "subdued"
+                    }) : disclosure ? /*#__PURE__*/ _jsx(Icon, {
+                        source: ChevronRightMinor,
+                        color: "subdued",
+                        className: "opacity-50"
+                    }) : null
+                ]
+            }),
+            (expanded || selected || subLinkIsSelected || grandChildLinkIsSelected) && !disclosure && subLinks && /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-col mb-3",
+                children: subLinks.map(function(subLink, index) {
+                    if (showSubLinksAsRegularLinks) {
+                        return /*#__PURE__*/ _jsx(Navigation.Link, _object_spread({}, subLink), "navigation-sublink-".concat(index));
+                    }
+                    return /*#__PURE__*/ _jsx(Navigation.SubLink, _object_spread({}, subLink), "navigation-sublink-".concat(index));
+                })
+            }),
+            showDividerBelow && /*#__PURE__*/ _jsx("div", {
+                className: "h-px w-full bg-tint-3 dark:bg-tint-alt-3 mb-3"
+            })
+        ]
+    });
+}
+Navigation.Link = Link;
+var subLinkStyles = tv({
+    base: "Litho-Navigation-SubLink min-h-8 ml-2.5 pr-2.5 py-1.5 flex items-center justify-between gap-2",
+    variants: {
+        selected: {
+            true: "pl-2.5",
+            false: "pl-9.5"
+        },
+        hasAction: {
+            true: "cursor-pointer rounded-md hover"
+        }
+    }
+});
+/**
+ * Navigation.SubLink component.
+ * Represents a sub-link within the navigation.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {boolean} [props.selected] - Whether the sub-link is selected.
+ * @param {Function} [props.onAction] - Callback for the sub-link action.
+ * @param {string} [props.label] - Label for the sub-link.
+ * @param {Object} [props.badge] - Badge configuration.
+ * @param {string} [props.badge.status] - Badge status (e.g., "success", "warning").
+ * @param {string} [props.badge.label] - Badge label.
+ * @param {boolean} [props.keepNavigationOpen] - Whether to keep the navigation open.
+ * @returns {JSX.Element} The rendered SubLink component.
+ */ function SubLink() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var selected = props.selected, onAction = props.onAction, label = props.label, badge = props.badge, _props_keepNavigationOpen = props.keepNavigationOpen, keepNavigationOpen = _props_keepNavigationOpen === void 0 ? false : _props_keepNavigationOpen;
+    var subLinkClasses = subLinkStyles({
+        selected: selected,
+        hasAction: !!onAction
+    });
+    var setShowMobileNavigation = useContext(FrameContext).setShowMobileNavigation;
+    var handleClick = function() {
+        onAction === null || onAction === void 0 ? void 0 : onAction();
+        if (!keepNavigationOpen) {
+            setShowMobileNavigation(false);
+        }
+    };
+    return /*#__PURE__*/ _jsxs("div", {
+        className: subLinkClasses,
+        onClick: handleClick,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    selected && /*#__PURE__*/ _jsx(Icon, {
+                        source: ChevronRightMinor,
+                        color: "subdued",
+                        className: "opacity-50"
+                    }),
+                    /*#__PURE__*/ _jsx(Text, {
+                        fontWeight: selected ? "medium" : "normal",
+                        color: selected ? "default" : "normal",
+                        children: label
+                    })
+                ]
+            }),
+            badge && /*#__PURE__*/ _jsx(Badge, {
+                status: badge.status,
+                children: badge.label
+            })
+        ]
+    });
+}
+Navigation.SubLink = SubLink;
+export default Navigation;