@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Navigation/stories/Navigation.mobileVisibility.story.js

@@ -0,0 +1,172 @@
+import React from "react";
+import { useTheme } from "styled-components";
+import Navigation from "../Navigation";
+import { Text } from "../../Type";
+import { ApplicationFrame } from "../../Layout";
+import { Page } from "../../Layout/Page";
+import { Code } from "../../utils/story/code";
+import { NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY } from "../components/shared/constants";
+export default {
+    title: "Components/Navigation/Mobile Visibility",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+const baseMenuItems = [
+    { key: "home", label: "Home", type: "link", props: { href: "#" } },
+    { key: "products", label: "Products", type: "button" },
+    { key: "about", label: "About Us", type: "link", props: { href: "#" } },
+    { key: "contact", label: "Contact", type: "button" },
+];
+const StoryLayout = ({ children, description }) => {
+    const { breakpoints } = useTheme();
+    return (React.createElement(ApplicationFrame, { navBar: children },
+        React.createElement(Page, null,
+            description && React.createElement(Text, { mb: "x2" }, description),
+            React.createElement(Text, { mb: "x2", color: "darkGrey", fontSize: "small" },
+                "Resize the window to the default mobile breakpoint width (",
+                breakpoints[NAVIGATION_DEFAULT_BREAKPOINT_THEME_KEY],
+                ") to observe the mobile navigation behavior."))));
+};
+export const DefaultBehavior = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
+        "Default behavior: Items without ",
+        React.createElement(Code, null, "mobileVisibility"),
+        " set will appear in the mobile navigation menu.") },
+    React.createElement(Navigation, { primaryNavigation: [
+            Object.assign(Object.assign({}, baseMenuItems[0]), { label: "Home (Default)" }),
+            Object.assign(Object.assign({}, baseMenuItems[1]), { label: "Products (Default)" }),
+        ], secondaryNavigation: [
+            {
+                key: "settings",
+                label: "Settings (Default)",
+                icon: "settings",
+                type: "button",
+            },
+        ] })));
+export const ItemInNavigationBar = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
+        "Items with ",
+        React.createElement(Code, null, "mobileVisibility: \"navigationBar\""),
+        " will appear directly in the mobile navigation bar.") },
+    React.createElement(Navigation, { primaryNavigation: [
+            Object.assign(Object.assign({}, baseMenuItems[0]), { label: "Home (Menu)" }),
+            {
+                key: "search",
+                label: "Search",
+                type: "button",
+                icon: "search",
+                mobileVisibility: "navigationBar",
+                props: { "aria-label": "Search" },
+            },
+            Object.assign(Object.assign({}, baseMenuItems[1]), { label: "Products (Menu)" }),
+        ], secondaryNavigation: [
+            {
+                key: "notifications",
+                label: "Notifications",
+                icon: "chatBubble",
+                type: "button",
+                mobileVisibility: "navigationBar",
+                props: { "aria-label": "Notifications" },
+            },
+            {
+                key: "help",
+                label: "Help",
+                icon: "help",
+                type: "button",
+                mobileVisibility: "navigationMenu",
+            },
+        ] })));
+export const ItemInNavigationMenu = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
+        "Items with ",
+        React.createElement(Code, null, "mobileVisibility: \"navigationMenu\""),
+        " will appear inside the collapsible mobile menu. This is also the default behavior if the prop is not set.") },
+    React.createElement(Navigation, { primaryNavigation: [
+            Object.assign(Object.assign({}, baseMenuItems[0]), { label: "Home (Explicit Menu)", mobileVisibility: "navigationMenu" }),
+            Object.assign(Object.assign({}, baseMenuItems[1]), { label: "Products (Explicit Menu)", mobileVisibility: "navigationMenu" }),
+        ], secondaryNavigation: [
+            {
+                key: "profile",
+                label: "Profile",
+                icon: "user",
+                type: "button",
+                mobileVisibility: "navigationMenu",
+            },
+        ] })));
+export const ItemHiddenOnMobile = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
+        "Items with ",
+        React.createElement(Code, null, "mobileVisibility: \"hidden\""),
+        " will not be visible on mobile viewports.") },
+    React.createElement(Navigation, { primaryNavigation: [
+            Object.assign(Object.assign({}, baseMenuItems[0]), { label: "Home (Visible)" }),
+            Object.assign(Object.assign({}, baseMenuItems[1]), { label: "Products (Hidden)", mobileVisibility: "hidden" }),
+            Object.assign(Object.assign({}, baseMenuItems[2]), { label: "About (Visible)" }),
+        ], secondaryNavigation: [
+            {
+                key: "admin",
+                label: "Admin Panel (Hidden)",
+                icon: "settings",
+                type: "button",
+                mobileVisibility: "hidden",
+            },
+            {
+                key: "support",
+                label: "Support (Visible)",
+                icon: "chatBubble",
+                type: "button",
+            },
+        ] })));
+export const MixedVisibility = () => (React.createElement(StoryLayout, { description: React.createElement(React.Fragment, null,
+        "A mix of items with different ",
+        React.createElement(Code, null, "mobileVisibility"),
+        " settings to demonstrate various behaviors simultaneously.") },
+    React.createElement(Navigation, { primaryNavigation: [
+            {
+                key: "dashboard",
+                label: "Dashboard",
+                type: "link",
+                props: { href: "#" },
+                mobileVisibility: "navigationMenu",
+            },
+            {
+                key: "quick-action",
+                label: "Quick Action",
+                icon: "add",
+                type: "button",
+                mobileVisibility: "navigationBar",
+                props: { "aria-label": "Quick Action" },
+            },
+            {
+                key: "reports",
+                label: "Reports",
+                type: "button",
+                mobileVisibility: "hidden",
+            },
+            {
+                key: "docs",
+                label: "Documentation",
+                type: "link",
+                props: { href: "#" },
+            },
+        ], secondaryNavigation: [
+            {
+                key: "alerts",
+                label: "Alerts",
+                icon: "warning",
+                type: "button",
+                mobileVisibility: "navigationBar",
+                props: { "aria-label": "Alerts" },
+            },
+            {
+                key: "preferences",
+                label: "Preferences",
+                icon: "settings",
+                type: "button",
+                mobileVisibility: "navigationMenu",
+            },
+            {
+                key: "logout-info",
+                label: "Logout Info (Desktop only)",
+                icon: "lock",
+                type: "button",
+                mobileVisibility: "hidden",
+            },
+        ] })));

package/dist/src/Navigation/stories/Navigation.navigationMenus.story.d.ts

@@ -1,13 +1,13 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const BasicUsage: () => React.JSX.Element;
-export declare const Separators: () => React.JSX.Element;
-export declare const CustomMenuItems: () => React.JSX.Element;
-export declare const IconsAndLabels: () => React.JSX.Element;
-export declare const WithClientRouting: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const BasicUsage: () => React.JSX.Element;
+export declare const Separators: () => React.JSX.Element;
+export declare const CustomMenuItems: () => React.JSX.Element;
+export declare const IconsAndLabels: () => React.JSX.Element;
+export declare const WithClientRouting: () => React.JSX.Element;

package/dist/src/Navigation/stories/Navigation.navigationMenus.story.js

@@ -0,0 +1,305 @@
+import React from "react";
+import { BrowserRouter, Link } from "react-router-dom";
+import Navigation from "../Navigation";
+import { ApplicationFrame, Page } from "../../Layout";
+import Sidebar from "../../Layout/Sidebar";
+import { Box } from "../../Box";
+import { Flex } from "../../Flex";
+import { Text } from "../../Type";
+import { Button } from "../../Button";
+import { Alert } from "../../Alert";
+import { NavigationMenuTrigger } from "../components/shared/components";
+import NavigationMenuContent from "../components/shared/NavigationMenuContent";
+import { Code } from "../../utils/story/code";
+import { Input } from "../../Input";
+export default {
+    title: "Components/Navigation/Navigation Menus",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export const BasicUsage = () => {
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryNavigation: [
+                {
+                    key: "dashboard",
+                    label: "Dashboard",
+                    type: "link",
+                    props: {
+                        href: "https://nulogy.com/",
+                    },
+                },
+                {
+                    key: "inspector",
+                    label: "Inspector",
+                    type: "link",
+                    props: {
+                        href: "https://nulogy.com/",
+                    },
+                },
+                {
+                    key: "reports",
+                    label: "Reports",
+                    type: "link",
+                    props: {
+                        href: "https://nulogy.com/",
+                    },
+                },
+                {
+                    key: "sheets",
+                    label: "Sheets",
+                    type: "button",
+                    props: {
+                        onClick: () => {
+                            alert("You clicked Sheets");
+                        },
+                    },
+                },
+                {
+                    key: "forms",
+                    label: "Forms",
+                    type: "button",
+                    props: {
+                        onClick: () => {
+                            alert("You clicked Forms");
+                        },
+                    },
+                },
+                {
+                    key: "disabled",
+                    label: "Disabled item",
+                    type: "button",
+                    props: {
+                        disabled: true,
+                    },
+                },
+            ], secondaryNavigation: [
+                {
+                    key: "search",
+                    type: "button",
+                    icon: "search",
+                    tooltip: "Search",
+                    props: {
+                        onClick: () => {
+                            alert("You clicked Search");
+                        },
+                    },
+                },
+                {
+                    key: "settings",
+                    type: "button",
+                    icon: "settings",
+                    tooltip: "Settings",
+                    props: {
+                        onClick: () => {
+                            alert("You clicked Settings");
+                        },
+                    },
+                },
+            ] }) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Flex, null,
+                React.createElement(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "64px", bottom: "0px" },
+                    React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                            "In this example, the ",
+                            React.createElement("strong", null, "Dashboard"),
+                            ", ",
+                            React.createElement("strong", null, "Inspector"),
+                            ", and",
+                            " ",
+                            React.createElement("strong", null, "Reports"),
+                            " are links, and the ",
+                            React.createElement("strong", null, "Sheets"),
+                            " and ",
+                            React.createElement("strong", null, "Forms"),
+                            " are buttons."),
+                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                            "The ",
+                            React.createElement("strong", null, "Search"),
+                            " and ",
+                            React.createElement("strong", null, "Settings"),
+                            " buttons are secondary navigation items."),
+                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                            "Everything that can be rendered in the ",
+                            React.createElement(Code, null, "primaryNavigation"),
+                            " (left part of the navigation) can also be rendered in the ",
+                            React.createElement(Code, null, "secondaryNavigation"),
+                            " (right part of the navigation), and vice versa."))),
+                React.createElement(Box, { flex: 1 })))));
+};
+export const Separators = () => {
+    return (React.createElement(Navigation, { primaryNavigation: [
+            {
+                key: "dashboard",
+                label: "Dashboard",
+                type: "link",
+            },
+            {
+                key: "inspector",
+                label: "Inspector",
+                type: "link",
+            },
+            {
+                key: "inspector-reports-separator",
+                type: "separator",
+            },
+            {
+                key: "reports",
+                label: "Reports",
+                type: "link",
+            },
+            {
+                key: "sheets",
+                label: "Sheets",
+                type: "button",
+            },
+        ], secondaryNavigation: [
+            {
+                key: "search",
+                type: "button",
+                icon: "search",
+                tooltip: "Search",
+            },
+            {
+                key: "search-settings-separator",
+                type: "separator",
+            },
+            {
+                key: "settings",
+                type: "button",
+                icon: "settings",
+                tooltip: "Settings",
+            },
+        ] }));
+};
+export const CustomMenuItems = () => {
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryNavigation: [
+                {
+                    key: "custom-menu-item",
+                    type: "custom",
+                    render: () => {
+                        return (React.createElement(Text, { color: "red", fontWeight: "bold" }, "I am a custom menu item"));
+                    },
+                },
+                {
+                    key: "custom-submenu-item-parent",
+                    type: "button",
+                    label: "Custom Submenu Items",
+                    items: [
+                        {
+                            key: "custom-submenu-item-1",
+                            type: "custom",
+                            render: () => {
+                                return React.createElement(Text, { color: "darkGrey" }, "I am custom submenu item 1");
+                            },
+                        },
+                        {
+                            key: "custom-submenu-item-2",
+                            type: "custom",
+                            render: () => {
+                                return React.createElement(Button, null, "I am custom submenu item 2");
+                            },
+                        },
+                    ],
+                },
+                {
+                    key: "custom-panel-1",
+                    type: "custom",
+                    render: ({ withinSubMenu, withinMobileNav, level }) => (React.createElement(React.Fragment, null,
+                        React.createElement(NavigationMenuTrigger, null, "Open custom panel"),
+                        React.createElement(NavigationMenuContent, { padding: "x2", background: "coral", right: withinMobileNav ? "100%" : "auto", top: withinMobileNav ? "0px" : "auto" },
+                            React.createElement(Text, { fontWeight: "bold" }, "I am a custom panel."),
+                            React.createElement("pre", null,
+                                React.createElement(Text, null,
+                                    "withinSubMenu: ",
+                                    withinSubMenu ? "true" : "false"),
+                                React.createElement(Text, null,
+                                    "withinMobileNav: ",
+                                    withinMobileNav ? "true" : "false"),
+                                React.createElement(Text, null,
+                                    "level: ",
+                                    level))))),
+                },
+            ], secondaryNavigation: [
+                {
+                    key: "custom-menu-item",
+                    type: "custom",
+                    render: () => {
+                        return React.createElement(Input, { placeholder: "Custom menu item too!", iconLeft: "search" });
+                    },
+                },
+            ] }) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Alert, { type: "warning" },
+                "Custom menu items should be used sparingly. When used, make sure they remain accessible and use styles that are inline with the rest of the navigation. The render function gives you access to ",
+                React.createElement(Code, null, "withinSubMenu"),
+                ", ",
+                React.createElement(Code, null, "withinMobileNav"),
+                ", and ",
+                React.createElement(Code, null, "level"),
+                " to style and position the rendered items properly. See component documentation for more details."))));
+};
+export const IconsAndLabels = () => {
+    return (React.createElement(Navigation, { primaryNavigation: [
+            {
+                key: "icon-and-label",
+                label: "Icon and label",
+                icon: "stylusNote",
+                type: "button",
+            },
+            {
+                key: "label-only",
+                label: "Label only",
+                type: "button",
+            },
+            {
+                key: "icon-only",
+                icon: "filter",
+                type: "button",
+                tooltip: "Icon only",
+            },
+        ], secondaryNavigation: [
+            {
+                key: "icon-and-label",
+                label: "Icon and label",
+                icon: "stylusNote",
+                type: "button",
+            },
+            {
+                key: "label-only",
+                label: "Label only",
+                type: "button",
+            },
+            {
+                key: "icon-only",
+                icon: "filter",
+                type: "button",
+                tooltip: "Icon only",
+            },
+        ] }));
+};
+export const WithClientRouting = () => {
+    return (React.createElement(BrowserRouter, null,
+        React.createElement(Navigation, { primaryNavigation: [
+                {
+                    key: "dashboard",
+                    label: "Dashboard",
+                    type: "link",
+                    element: React.createElement(Link, { to: "/dashboard" }),
+                },
+                {
+                    key: "profile",
+                    label: "Profile",
+                    type: "link",
+                    icon: "user",
+                    element: React.createElement(Link, { to: "/profile" }),
+                },
+                {
+                    key: "settings",
+                    tooltip: "Settings",
+                    type: "link",
+                    icon: "settings",
+                    element: React.createElement(Link, { to: "/settings" }),
+                },
+            ] })));
+};

package/dist/src/Navigation/stories/Navigation.navigationMenus.subMenus.story.d.ts

@@ -1,11 +1,11 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const SubMenus: () => React.JSX.Element;
-export declare const SubMenuSeparator: () => React.JSX.Element;
-export declare const IconsAndLabels: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const SubMenus: () => React.JSX.Element;
+export declare const SubMenuSeparator: () => React.JSX.Element;
+export declare const IconsAndLabels: () => React.JSX.Element;