@nulogy/components 14.8.2 → 15.0.1

package/dist/src/Navigation/components/utils/getNavigationBarItems.d.ts

@@ -1,2 +1,2 @@
-import { MenuItem } from "../../types";
-export declare function getNavigationBarItems(items: MenuItem[]): MenuItem[];
+import { MenuItem } from "../../types";
+export declare function getNavigationBarItems(items: MenuItem[]): MenuItem[];

package/dist/src/Navigation/components/utils/getNavigationBarItems.js

@@ -0,0 +1,15 @@
+export function getNavigationBarItems(items) {
+    const navigationBarItems = [];
+    function findNavigationBarItems(menuItems) {
+        for (const item of menuItems) {
+            if (item.mobileVisibility === "navigationBar") {
+                navigationBarItems.push(item);
+            }
+            if (item.type === "button" && item.items) {
+                findNavigationBarItems(item.items);
+            }
+        }
+    }
+    findNavigationBarItems(items);
+    return navigationBarItems;
+}

package/dist/src/Navigation/hooks/useResponsiveMenu.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import { MenuItems, MenuItem } from "../types";
-type UseResponsiveMenu = (initialMenuItems: MenuItems) => {
-    menuItems: MenuItems;
-    moreMenu: MenuItems;
-    hiddenMenuItem: MenuItem | null;
-    primaryMenuRef: React.RefObject<HTMLUListElement>;
-    secondaryMenuRef: React.RefObject<HTMLUListElement>;
-    hiddenButtonRef: React.RefObject<HTMLLIElement>;
-};
-export declare const useResponsiveMenu: UseResponsiveMenu;
-export {};
+/// <reference types="react" />
+import { MenuItems, MenuItem } from "../types";
+type UseResponsiveMenu = (initialMenuItems: MenuItems) => {
+    menuItems: MenuItems;
+    moreMenu: MenuItems;
+    hiddenMenuItem: MenuItem | null;
+    primaryMenuRef: React.RefObject<HTMLUListElement>;
+    secondaryMenuRef: React.RefObject<HTMLUListElement>;
+    hiddenButtonRef: React.RefObject<HTMLLIElement>;
+};
+export declare const useResponsiveMenu: UseResponsiveMenu;
+export {};

package/dist/src/Navigation/hooks/useResponsiveMenu.js

@@ -0,0 +1,66 @@
+import { useState, useCallback, useLayoutEffect, useRef } from "react";
+import equal from "deep-equal";
+import { MIN_DISTANCE_BETWEEN_MENUS_PX } from "../components/shared/constants";
+export const useResponsiveMenu = (initialMenuItems) => {
+    const [menuState, setMenuState] = useState({
+        menuItems: initialMenuItems,
+        moreMenu: [],
+        hiddenMenuItem: {
+            key: "hidden-menu-item",
+            label: "",
+            type: "button",
+        },
+    });
+    const primaryMenuRef = useRef(null);
+    const secondaryMenuRef = useRef(null);
+    const hiddenButtonRef = useRef(null);
+    const calculateDistance = useCallback(() => {
+        if (!primaryMenuRef.current || !secondaryMenuRef.current || !hiddenButtonRef.current) {
+            return false;
+        }
+        const primaryRect = primaryMenuRef.current.getBoundingClientRect();
+        const secondaryRect = secondaryMenuRef.current.getBoundingClientRect();
+        const hiddenButtonWidth = hiddenButtonRef.current.getBoundingClientRect().width;
+        const distance = secondaryRect.left - primaryRect.right;
+        if (distance < MIN_DISTANCE_BETWEEN_MENUS_PX && menuState.menuItems.length > 0) {
+            const lastItem = menuState.menuItems[menuState.menuItems.length - 1];
+            const newMenuItems = menuState.menuItems.slice(0, -1);
+            const newHiddenMenu = [lastItem, ...menuState.moreMenu];
+            if (!equal(newMenuItems, menuState.menuItems) || !equal(newHiddenMenu, menuState.moreMenu)) {
+                setMenuState({
+                    menuItems: newMenuItems,
+                    moreMenu: newHiddenMenu,
+                    hiddenMenuItem: lastItem,
+                });
+            }
+        }
+        else if (Math.floor(distance - hiddenButtonWidth - 8) > MIN_DISTANCE_BETWEEN_MENUS_PX &&
+            menuState.moreMenu.length > 0) {
+            const firstHiddenItem = menuState.moreMenu[0];
+            const newHiddenMenu = menuState.moreMenu.slice(1);
+            const newMenuItems = [...menuState.menuItems, firstHiddenItem];
+            if (!equal(newHiddenMenu, menuState.moreMenu) || !equal(newMenuItems, menuState.menuItems)) {
+                setMenuState({
+                    menuItems: newMenuItems,
+                    moreMenu: newHiddenMenu,
+                    hiddenMenuItem: firstHiddenItem,
+                });
+            }
+        }
+    }, [menuState]);
+    useLayoutEffect(() => {
+        calculateDistance();
+        window.addEventListener("resize", calculateDistance);
+        return () => {
+            window.removeEventListener("resize", calculateDistance);
+        };
+    }, [calculateDistance]);
+    return {
+        menuItems: menuState.menuItems,
+        moreMenu: menuState.moreMenu,
+        hiddenMenuItem: menuState.hiddenMenuItem,
+        primaryMenuRef,
+        secondaryMenuRef,
+        hiddenButtonRef,
+    };
+};

package/dist/src/Navigation/index.d.ts

@@ -1,9 +1,9 @@
-export { default as Navigation } from "./Navigation";
-export { NulogyLogo } from "./components/NulogyLogo/NulogyLogo";
-export { NavigationLogoLink } from "./components/shared/NavigationLogoLink";
-export { NavigationLogo } from "./components/shared/NavigationLogo";
-export { EnvironmentBanner } from "./components/EnvironmentBanner";
-export type { NavigationProps } from "./Navigation";
-export type { MenuItems, MenuItem, UserMenu, UserMenuItem, UserMenuInfo } from "./types";
-export type { AppSwitcherConfig } from "./components/AppSwitcher/NulogyAppSwitcher";
-export type { EnvironmentBannerProps } from "./components/EnvironmentBanner";
+export { default as Navigation } from "./Navigation";
+export { NulogyLogo } from "./components/NulogyLogo/NulogyLogo";
+export { NavigationLogoLink } from "./components/shared/NavigationLogoLink";
+export { NavigationLogo } from "./components/shared/NavigationLogo";
+export { EnvironmentBanner } from "./components/EnvironmentBanner";
+export type { NavigationProps } from "./Navigation";
+export type { MenuItems, MenuItem, UserMenu, UserMenuItem, UserMenuInfo } from "./types";
+export type { AppSwitcherConfig } from "./components/AppSwitcher/NulogyAppSwitcher";
+export type { EnvironmentBannerProps } from "./components/EnvironmentBanner";

package/dist/src/Navigation/index.js

@@ -0,0 +1,5 @@
+export { default as Navigation } from "./Navigation";
+export { NulogyLogo } from "./components/NulogyLogo/NulogyLogo";
+export { NavigationLogoLink } from "./components/shared/NavigationLogoLink";
+export { NavigationLogo } from "./components/shared/NavigationLogo";
+export { EnvironmentBanner } from "./components/EnvironmentBanner";

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

@@ -1,12 +1,12 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const AllApps: () => React.JSX.Element;
-export declare const OnlySelectApps: () => React.JSX.Element;
-export declare const WithConditionallyVisibleApps: () => React.JSX.Element;
-export declare const WithAnIndicator: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const AllApps: () => React.JSX.Element;
+export declare const OnlySelectApps: () => React.JSX.Element;
+export declare const WithConditionallyVisibleApps: () => React.JSX.Element;
+export declare const WithAnIndicator: () => React.JSX.Element;

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

@@ -0,0 +1,147 @@
+import React, { useState } from "react";
+import useConditionalAutoClick from "../../utils/testing/useConditionalAutoClick";
+import Navigation from "../Navigation";
+import { ApplicationFrame, Page } from "../../Layout";
+import Sidebar from "../../Layout/Sidebar";
+import { Box } from "../../Box";
+import { Checkbox } from "../../Checkbox";
+import { Text } from "../../Type";
+import { StatusIndicator } from "../../StatusIndicator";
+import { Flex, InlineFlex } from "../../Flex";
+import { Icon } from "../../Icon";
+import { Code } from "../../utils/story/code";
+export default {
+    title: "Components/Navigation/App Switcher",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+const appSwitcherToggleSelector = 'button[aria-label="Toggle app switcher"]';
+export const AllApps = () => {
+    useConditionalAutoClick({
+        selector: appSwitcherToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(Navigation, { appSwitcher: {
+            apps: {
+                "production-scheduling": {
+                    url: "https://nulogy.com/",
+                },
+                "supplier-collaboration": {
+                    url: "https://nulogy.com/",
+                },
+                "digital-quality-inspection": {
+                    url: "https://nulogy.com/",
+                },
+                "shop-floor": {
+                    url: "https://nulogy.com/",
+                },
+                "smart-factory": {
+                    url: "https://nulogy.com/",
+                },
+                connections: {
+                    url: "https://nulogy.com/",
+                },
+                data: {
+                    url: "https://nulogy.com/",
+                },
+            },
+        } }));
+};
+export const OnlySelectApps = () => {
+    useConditionalAutoClick({
+        selector: appSwitcherToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(Navigation, { appSwitcher: {
+            apps: {
+                "production-scheduling": {
+                    url: "https://nulogy.com/",
+                },
+                "digital-quality-inspection": {
+                    url: "https://nulogy.com/",
+                },
+                "shop-floor": {
+                    url: "https://nulogy.com/",
+                },
+            },
+        } }));
+};
+export const WithConditionallyVisibleApps = () => {
+    const [isAdmin, setIsAdmin] = useState(false);
+    useConditionalAutoClick({
+        selector: appSwitcherToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { appSwitcher: {
+                apps: {
+                    "production-scheduling": {
+                        url: "https://nulogy.com/",
+                    },
+                    "digital-quality-inspection": {
+                        url: "https://nulogy.com/",
+                    },
+                    "shop-floor": {
+                        url: "https://nulogy.com/",
+                    },
+                    "smart-factory": {
+                        url: "https://nulogy.com/",
+                        visible: isAdmin,
+                    },
+                },
+            } }) },
+        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(Checkbox, { labelText: "User is admin", checked: isAdmin, onChange: () => setIsAdmin(!isAdmin) }),
+                        React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                            "In this example, the Smart Factory app is only visible to ",
+                            React.createElement("strong", null, "admins"),
+                            ". The app switcher is conditionally rendered based on the user's role."))),
+                React.createElement(Box, { flex: 1 })))));
+};
+export const WithAnIndicator = () => {
+    useConditionalAutoClick({
+        selector: appSwitcherToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { appSwitcher: {
+                apps: {
+                    "production-scheduling": {
+                        url: "https://nulogy.com/",
+                    },
+                    "smart-factory": {
+                        url: "https://nulogy.com/",
+                        indicator: React.createElement(StatusIndicator, { type: "informative" }, "new"),
+                    },
+                    "shop-floor": {
+                        url: "https://nulogy.com/",
+                        indicator: (React.createElement(InlineFlex, { alignItems: "center", gap: "x0_25", bg: "lightRed", pl: "x0_5", pr: "x1", borderRadius: "rounded" },
+                            React.createElement(Icon, { icon: "error", size: "x2", color: "red" }),
+                            React.createElement(Text, { fontSize: "smaller", letterSpacing: "0.05em", textTransform: "uppercase", fontWeight: "medium", color: "red" }, "Not available"))),
+                    },
+                },
+            } }) },
+        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 Smart Factory app is using a ",
+                            React.createElement(Code, null, "StatusIndicator"),
+                            ", The Shop Floor app is using a custom one."))),
+                React.createElement(Box, { flex: 1 })))));
+};

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

@@ -1,22 +1,22 @@
-import React from "react";
-declare const _default: {
-    title: string;
-    parameters: {
-        layout: string;
-    };
-};
-export default _default;
-export declare const PrimaryLogo: () => React.JSX.Element;
-export declare const UsingClientRouting: () => React.JSX.Element;
-export declare const WithANulogyApplicationName: () => React.JSX.Element;
-export declare const SecondaryLogo: () => React.JSX.Element;
-export declare const SecondaryLogoLink: () => React.JSX.Element;
-export declare const WithoutPassingAPrimaryLogo: () => React.JSX.Element;
-export declare const WithoutAPrimaryLogo: () => React.JSX.Element;
-export declare const WithACustomPrimaryLogo: () => React.JSX.Element;
-export declare const WithNavigationLogoWrapper: {
-    (): React.JSX.Element;
-    story: {
-        name: string;
-    };
-};
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const PrimaryLogo: () => React.JSX.Element;
+export declare const UsingClientRouting: () => React.JSX.Element;
+export declare const WithANulogyApplicationName: () => React.JSX.Element;
+export declare const SecondaryLogo: () => React.JSX.Element;
+export declare const SecondaryLogoLink: () => React.JSX.Element;
+export declare const WithoutPassingAPrimaryLogo: () => React.JSX.Element;
+export declare const WithoutAPrimaryLogo: () => React.JSX.Element;
+export declare const WithACustomPrimaryLogo: () => React.JSX.Element;
+export declare const WithNavigationLogoWrapper: {
+    (): React.JSX.Element;
+    story: {
+        name: string;
+    };
+};

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

@@ -0,0 +1,116 @@
+import React, { Fragment, useState } from "react";
+import { BrowserRouter, Link } from "react-router-dom";
+import { NulogyLogo } from "../components/NulogyLogo/NulogyLogo";
+import Navigation from "../Navigation";
+import { Page } from "../../Layout/Page";
+import { ApplicationFrame, Sidebar } from "../../Layout";
+import { Alert } from "../../Alert";
+import { Code } from "../../utils/story/code";
+import { Radio } from "../../Radio";
+import { RadioGroup } from "../../Radio";
+import { Flex, Text } from "../..";
+import { NavigationLogoLink } from "../components/shared/NavigationLogoLink";
+import { NavigationLogo } from "../components/shared/NavigationLogo";
+import CustomLogo from "./fixtures/logos/Customlogo1";
+import CustomLogo2 from "./fixtures/logos/CustomLogo2";
+import CustomLogoThree from "./fixtures/logos/CustomLogo3";
+export default {
+    title: "Components/Navigation/Logos",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export const PrimaryLogo = () => {
+    return (React.createElement(Navigation, { primaryLogo: React.createElement(NavigationLogoLink, { href: "/", "aria-label": "Nulogy Logo" },
+            React.createElement(NulogyLogo, null)) }));
+};
+export const UsingClientRouting = () => {
+    return (React.createElement(BrowserRouter, null,
+        React.createElement(Navigation, { primaryLogo: React.createElement(NavigationLogoLink, { renderAsFragment: true },
+                React.createElement(Link, { to: "/", "aria-label": "Nulogy Logo" },
+                    React.createElement(NulogyLogo, null))) })));
+};
+export const WithANulogyApplicationName = () => {
+    const [application, setApplication] = useState("supplier-collaboration");
+    const handleApplicationChange = (e) => {
+        setApplication(e.target.value);
+    };
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(BrowserRouter, null,
+            React.createElement(Navigation, { primaryLogo: React.createElement(NavigationLogoLink, { renderAsFragment: true },
+                    React.createElement(Link, { to: "/", "aria-label": "Nulogy Logo" },
+                        React.createElement(NulogyLogo, { app: application }))) })) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story configuration", overlay: "hide", top: "64px", bottom: "0px" },
+                React.createElement(RadioGroup, { labelText: "Application name", name: "application", onChange: handleApplicationChange, defaultValue: application },
+                    React.createElement(Radio, { value: "supplier-collaboration", labelText: "Supplier Collaboration" }),
+                    React.createElement(Radio, { value: "smart-factory", labelText: "Smart Factory" }),
+                    React.createElement(Radio, { value: "digital-quality-inspection", labelText: "Digital Quality Inspection" }),
+                    React.createElement(Radio, { value: "production-scheduling", labelText: "Production Scheduling" }),
+                    React.createElement(Radio, { value: "shop-floor", labelText: "Shop Floor Control" }),
+                    React.createElement(Radio, { value: "data", labelText: "Data" }))))));
+};
+export const SecondaryLogo = () => {
+    return (React.createElement(BrowserRouter, null,
+        React.createElement(Navigation, { secondaryLogo: React.createElement(CustomLogoThree, { style: { width: "auto", height: 32 } }) })));
+};
+export const SecondaryLogoLink = () => {
+    return (React.createElement(BrowserRouter, null,
+        React.createElement(Navigation, { secondaryLogo: React.createElement(NavigationLogoLink, { renderAsFragment: true },
+                React.createElement(Link, { to: "/", "aria-label": "Nulogy Logo" },
+                    React.createElement(CustomLogo, { style: { width: "auto", height: 24 } }))) })));
+};
+export const WithoutPassingAPrimaryLogo = () => {
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, null) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Alert, { type: "warning" },
+                "If the primary logo is not passed, the Nulogy logo without an application name will be used with a standard anchor tag with an ",
+                React.createElement(Code, null, "href=\"/\""),
+                " attribute."))));
+};
+export const WithoutAPrimaryLogo = () => {
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryLogo: React.createElement(Fragment, null) }) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Alert, { type: "danger" }, "This is not a recommended usage of the Navigation component."))));
+};
+export const WithACustomPrimaryLogo = () => {
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryLogo: React.createElement(CustomLogo2, { style: { width: "auto", height: 24 } }) }) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Alert, { type: "danger" }, "This is not a recommended usage of the Navigation component."))));
+};
+export const WithNavigationLogoWrapper = () => {
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { secondaryLogo: React.createElement(NavigationLogoLink, { href: "/", "aria-label": "Custom Logo" },
+                React.createElement(NavigationLogo, null,
+                    React.createElement(CustomLogo2, null))) }) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Flex, { flexDirection: "column", gap: "x2" },
+                React.createElement(Text, null,
+                    "Secondary logos are not styled, ensure setting an explicit ",
+                    React.createElement(Code, null, "width"),
+                    " / ",
+                    React.createElement(Code, null, "height"),
+                    " on the passed ",
+                    React.createElement(Code, null, "ReactNode"),
+                    " to prevent overflow, or using the ",
+                    React.createElement(Code, null, "NavigationLogo"),
+                    " helper."),
+                React.createElement(Text, null,
+                    React.createElement(Code, null, "NavigationLogo"),
+                    " component constrains logos to maximum ",
+                    React.createElement(Code, null, "184px"),
+                    " width and",
+                    " ",
+                    React.createElement(Code, null, "36px"),
+                    " height by default to prevent overflow in the Navigation."),
+                React.createElement(Text, null,
+                    "You can adjust this by passing ",
+                    React.createElement(Code, null, "maxWidth"),
+                    " and ",
+                    React.createElement(Code, null, "maxHeight"),
+                    " props to the",
+                    " ",
+                    React.createElement(Code, null, "NavigationLogo"),
+                    " component.")))));
+};
+WithNavigationLogoWrapper.story = {
+    name: "With NavigationLogo wrapper",
+};

package/dist/src/Navigation/stories/Navigation.mobileVisibility.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 DefaultBehavior: () => React.JSX.Element;
-export declare const ItemInNavigationBar: () => React.JSX.Element;
-export declare const ItemInNavigationMenu: () => React.JSX.Element;
-export declare const ItemHiddenOnMobile: () => React.JSX.Element;
-export declare const MixedVisibility: () => React.JSX.Element;
+import React from "react";
+declare const _default: {
+    title: string;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const DefaultBehavior: () => React.JSX.Element;
+export declare const ItemInNavigationBar: () => React.JSX.Element;
+export declare const ItemInNavigationMenu: () => React.JSX.Element;
+export declare const ItemHiddenOnMobile: () => React.JSX.Element;
+export declare const MixedVisibility: () => React.JSX.Element;