@nulogy/components 14.8.2 → 15.0.1

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

@@ -0,0 +1,203 @@
+import React from "react";
+import Navigation from "../Navigation";
+export default {
+    title: "Components/Navigation/Navigation Menus/Sub Menus",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export const SubMenus = () => {
+    return (React.createElement(Navigation, { primaryNavigation: [
+            {
+                key: "company",
+                label: "Company",
+                type: "button",
+                items: [
+                    {
+                        key: "customers",
+                        label: "Customers",
+                        type: "button",
+                    },
+                    {
+                        key: "estimating",
+                        label: "Estimating",
+                        type: "button",
+                    },
+                    {
+                        key: "invoices",
+                        label: "Invoices",
+                        type: "button",
+                        items: [
+                            {
+                                key: "customers",
+                                label: "Customers",
+                                type: "button",
+                            },
+                            {
+                                key: "estimating",
+                                label: "Estimating",
+                                type: "button",
+                            },
+                            {
+                                key: "invoices",
+                                label: "Invoices",
+                                type: "button",
+                                items: [
+                                    {
+                                        key: "customers",
+                                        label: "Customers",
+                                        type: "button",
+                                    },
+                                    {
+                                        key: "estimating",
+                                        label: "Estimating",
+                                        type: "button",
+                                    },
+                                    {
+                                        key: "invoices",
+                                        label: "Invoices",
+                                        type: "button",
+                                    },
+                                ],
+                            },
+                        ],
+                    },
+                ],
+            },
+        ], secondaryNavigation: [
+            {
+                key: "organization",
+                type: "button",
+                icon: "building",
+                tooltip: "Organization",
+                items: [
+                    {
+                        key: "organization-a",
+                        label: "Organization A",
+                        type: "button",
+                    },
+                    {
+                        key: "organization-b",
+                        label: "Organization B",
+                        type: "button",
+                    },
+                    {
+                        key: "organization-c",
+                        label: "Organization C",
+                        type: "button",
+                    },
+                ],
+            },
+            {
+                key: "search",
+                type: "link",
+                icon: "search",
+                tooltip: "Search",
+            },
+            {
+                key: "settings",
+                type: "button",
+                icon: "settings",
+                tooltip: "Settings",
+                props: {
+                    onClick: () => {
+                        alert("You clicked Settings");
+                    },
+                },
+            },
+            {
+                key: "tune",
+                type: "button",
+                icon: "tune",
+                tooltip: "Tune",
+                props: {
+                    onClick: () => {
+                        alert("You clicked Tune");
+                    },
+                },
+            },
+        ] }));
+};
+export const SubMenuSeparator = () => {
+    return (React.createElement(Navigation, { primaryNavigation: [
+            {
+                key: "company",
+                label: "Company",
+                type: "button",
+                items: [
+                    {
+                        key: "customers",
+                        label: "Customers",
+                        type: "button",
+                    },
+                    {
+                        key: "separator",
+                        type: "separator",
+                    },
+                    {
+                        key: "estimating",
+                        label: "Estimating",
+                        type: "button",
+                    },
+                    {
+                        key: "invoices",
+                        label: "Invoices",
+                        type: "button",
+                    },
+                ],
+            },
+        ] }));
+};
+export const IconsAndLabels = () => {
+    return (React.createElement(Navigation, { primaryNavigation: [
+            {
+                key: "primary-submenu-parent",
+                label: "Primary submenu parent",
+                type: "button",
+                items: [
+                    {
+                        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: "secondary-submenu-parent",
+                label: "Secondary submenu parent",
+                type: "button",
+                items: [
+                    {
+                        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",
+                    },
+                ],
+            },
+        ] }));
+};

package/dist/src/Navigation/stories/Navigation.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 BasicUsage: () => React.JSX.Element;
-export declare const WithACustomBreakpoint: () => React.JSX.Element;
-export declare const WithBanners: () => 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 WithACustomBreakpoint: () => React.JSX.Element;
+export declare const WithBanners: () => React.JSX.Element;

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

@@ -0,0 +1,208 @@
+import React, { useState } from "react";
+import { Input } from "../../Input";
+import { Navigation } from "..";
+import { ApplicationFrame, Page, Sidebar } from "../../Layout";
+import { Placeholder } from "../../utils/story/placeholder";
+import { Select } from "../../Select";
+import { Flex } from "../../Flex";
+import { Text } from "../../Type";
+import { Code } from "../../utils/story/code";
+import { Banner } from "../../Banner";
+import CustomLogo3 from "./fixtures/logos/CustomLogo3";
+export default {
+    title: "Components/Navigation",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export const BasicUsage = () => (React.createElement(ApplicationFrame, { navBar: 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/",
+                },
+            },
+        }, 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",
+                items: [
+                    {
+                        key: "quality-inspection-form",
+                        label: "Quality Inspection Form",
+                        type: "button",
+                        props: {
+                            onClick: () => {
+                                alert("You clicked Quality Inspection Form");
+                            },
+                        },
+                    },
+                    {
+                        key: "production-report-form",
+                        label: "Production Report Form",
+                        type: "button",
+                        props: {
+                            onClick: () => {
+                                alert("You clicked Production Report Form");
+                            },
+                        },
+                    },
+                    {
+                        key: "maintenance-request-form",
+                        label: "Maintenance Request Form",
+                        type: "button",
+                        props: {
+                            onClick: () => {
+                                alert("You clicked Maintenance Request Form");
+                            },
+                        },
+                    },
+                    {
+                        key: "inventory-count-form",
+                        label: "Inventory Count Form",
+                        type: "link",
+                    },
+                ],
+            },
+        ], 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");
+                    },
+                },
+            },
+        ], secondaryLogo: React.createElement(CustomLogo3, { style: { width: "auto", height: 32 } }), userMenu: {
+            triggerText: { title: "haidera@nulogy.com", subtitle2: "Toronto, ON" },
+            header: {
+                title: "Haider Alshamma",
+                subtitle1: "haidera@nulogy.com",
+                subtitle2: "Nulogy",
+            },
+            controls: () => (React.createElement(Flex, { gap: "x2", flexDirection: "column", width: "100%", pt: "x1" },
+                React.createElement(Select, { labelText: "Company", defaultValue: ["Nulogy Canada"], options: [
+                        { value: "Nulogy Canada", label: "Nulogy - Canada" },
+                        { value: "Nulogy US", label: "Nulogy - US" },
+                        { value: "Nulogy UK", label: "Nulogy - UK" },
+                    ] }),
+                React.createElement(Select, { labelText: "User group", defaultValue: ["super-user"], options: [
+                        { value: "super-user", label: "Super User" },
+                        { value: "admin", label: "Admin" },
+                        { value: "user", label: "User" },
+                    ] }))),
+            menuItems: [
+                {
+                    key: "preferences",
+                    label: "Preferences",
+                    type: "button",
+                    props: {
+                        onClick: () => {
+                            console.log("You clicked preferences");
+                        },
+                    },
+                },
+                {
+                    key: "sign-out",
+                    label: "Sign out",
+                    type: "button",
+                    props: {
+                        onClick: () => {
+                            console.log("You clicked sign out");
+                        },
+                    },
+                },
+            ],
+        } }) },
+    React.createElement(Page, { fullHeight: true },
+        React.createElement(Placeholder, null))));
+export const WithACustomBreakpoint = () => {
+    const [breakpoint, setBreakpoint] = useState("1000px");
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { primaryNavigation: [{ key: "dashboard", label: "Dashboard", type: "link" }], secondaryNavigation: [{ key: "settings", icon: "settings", tooltip: "Settings", type: "button" }], breakpoint: breakpoint }) },
+        React.createElement(Page, { fullHeight: true },
+            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(Input, { labelText: "Breakpoint", value: breakpoint, onChange: (e) => setBreakpoint(e.target.value) }),
+                    React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                        "The navigation will transition to desktop when the viewport is wider than ",
+                        React.createElement(Code, null, breakpoint),
+                        "."),
+                    React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                        "You can also use any valid key from the ",
+                        React.createElement("a", { href: "/?path=/story/tokens--breakpoints" }, "theme breakpoints"),
+                        " ",
+                        "as a breakpoint value."))))));
+};
+export const WithBanners = () => {
+    return (React.createElement(ApplicationFrame, { environment: "production", navBar: React.createElement(React.Fragment, null,
+            React.createElement(Banner, { title: "Action required" }, "We have detected unauthorized access attempts on your account. Please change your password immediately to secure your account."),
+            React.createElement(Navigation, { primaryNavigation: [{ key: "dashboard", label: "Dashboard", type: "link" }], secondaryNavigation: [{ key: "settings", icon: "settings", tooltip: "Settings", type: "button" }] })) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Sidebar, { height: "100%", width: "350px", hideCloseButton: true, isOpen: true, title: "Story information", overlay: "hide", top: "83px", bottom: "0px" }))));
+};

package/dist/src/Navigation/stories/Navigation.userMenu.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 WithoutATrigger: () => React.JSX.Element;
-export declare const Header: () => React.JSX.Element;
-export declare const Controls: () => React.JSX.Element;
-export declare const MenuItems: () => 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 WithoutATrigger: () => React.JSX.Element;
+export declare const Header: () => React.JSX.Element;
+export declare const Controls: () => React.JSX.Element;
+export declare const MenuItems: () => React.JSX.Element;

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

@@ -0,0 +1,215 @@
+import React from "react";
+import { BrowserRouter, Link } from "react-router-dom";
+import { Flex } from "../../Flex";
+import { Input } from "../../Input";
+import { ApplicationFrame, Page } from "../../Layout";
+import { Text } from "../../Type";
+import Navigation from "../Navigation";
+import { Code } from "../../utils/story/code";
+import useConditionalAutoClick from "../../utils/testing/useConditionalAutoClick";
+import { Select } from "../../Select";
+export default {
+    title: "Components/Navigation/User Menu",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+const userMenuToggleSelector = 'button[aria-label="Toggle user menu"]';
+export const BasicUsage = () => {
+    useConditionalAutoClick({
+        selector: userMenuToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(Navigation, { userMenu: {
+            triggerText: { title: "haidera@nulogy.com", subtitle1: "Nulogy", subtitle2: "Toronto, ON" },
+            header: {
+                title: "Haider Alshamma",
+                subtitle1: "haidera@nulogy.com",
+                subtitle2: "Nulogy",
+            },
+            controls: () => (React.createElement(Flex, { gap: "x2", flexDirection: "column", width: "100%", pt: "x1" },
+                React.createElement(Select, { labelText: "Company", defaultValue: ["Nulogy Canada"], options: [
+                        { value: "Nulogy Canada", label: "Nulogy - Canada" },
+                        { value: "Nulogy US", label: "Nulogy - US" },
+                        { value: "Nulogy UK", label: "Nulogy - UK" },
+                    ] }),
+                React.createElement(Select, { labelText: "User group", defaultValue: ["super-user"], options: [
+                        { value: "super-user", label: "Super User" },
+                        { value: "admin", label: "Admin" },
+                        { value: "user", label: "User" },
+                    ] }))),
+            menuItems: [
+                {
+                    key: "preferences",
+                    label: "Preferences",
+                    type: "button",
+                    props: {
+                        onClick: () => {
+                            console.log("You clicked preferences");
+                        },
+                    },
+                },
+                {
+                    key: "sign-out",
+                    label: "Sign out",
+                    type: "button",
+                    props: {
+                        onClick: () => {
+                            console.log("You clicked sign out");
+                        },
+                    },
+                },
+            ],
+        } }));
+};
+export const WithoutATrigger = () => {
+    const [title, setTitle] = React.useState("haidera@nulogy.com");
+    const [subtitle1, setSubtitle1] = React.useState("Nulogy");
+    const [subtitle2, setSubtitle2] = React.useState("Toronto, ON");
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { userMenu: {
+                triggerText: {
+                    title: title,
+                    subtitle1: subtitle1,
+                    subtitle2: subtitle2,
+                },
+            } }) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Flex, { width: "600px", flexDirection: "column", gap: "x2" },
+                React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                    "You can add a ",
+                    React.createElement(Code, null, "title"),
+                    ", ",
+                    React.createElement(Code, null, "subtitle1"),
+                    ", and ",
+                    React.createElement(Code, null, "subtitle2"),
+                    " to the trigger text of the user menu. Values will be truncated if they do not fit."),
+                React.createElement(Text, { fontSize: "small", color: "darkGrey" }, "If the user menu does not contain anything other than the trigger text, the user menu button will be disabled, like in this example."),
+                React.createElement(Input, { labelText: "Title", value: title, onChange: (e) => {
+                        setTitle(e.target.value);
+                    } }),
+                React.createElement(Input, { labelText: "Subtitle 1", value: subtitle1, onChange: (e) => {
+                        setSubtitle1(e.target.value);
+                    } }),
+                React.createElement(Input, { labelText: "Subtitle 2", value: subtitle2, onChange: (e) => {
+                        setSubtitle2(e.target.value);
+                    } })))));
+};
+export const Header = () => {
+    const [title, setTitle] = React.useState("Haider Alshamma");
+    const [subtitle1, setSubtitle1] = React.useState("haidera@nulogy.com");
+    const [subtitle2, setSubtitle2] = React.useState("Nulogy");
+    useConditionalAutoClick({
+        selector: userMenuToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(ApplicationFrame, { navBar: React.createElement(Navigation, { userMenu: {
+                triggerText: {
+                    title: "haidera@nulogy.com",
+                    subtitle1: "Nulogy",
+                    subtitle2: "Toronto, ON",
+                },
+                header: {
+                    title: title,
+                },
+            } }) },
+        React.createElement(Page, { fullHeight: true },
+            React.createElement(Flex, { width: "600px", flexDirection: "column", gap: "x2" },
+                React.createElement(Text, { fontSize: "small", color: "darkGrey" },
+                    "The header is optional. You can add a ",
+                    React.createElement(Code, null, "title"),
+                    ", ",
+                    React.createElement(Code, null, "subtitle1"),
+                    ", and ",
+                    React.createElement(Code, null, "subtitle2"),
+                    "."),
+                React.createElement(Input, { labelText: "Title", value: title, onChange: (e) => {
+                        setTitle(e.target.value);
+                    } }),
+                React.createElement(Input, { labelText: "Subtitle 1", value: subtitle1, onChange: (e) => {
+                        setSubtitle1(e.target.value);
+                    } }),
+                React.createElement(Input, { labelText: "Subtitle 2", value: subtitle2, onChange: (e) => {
+                        setSubtitle2(e.target.value);
+                    } })))));
+};
+export const Controls = () => {
+    useConditionalAutoClick({
+        selector: userMenuToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(Navigation, { userMenu: {
+            triggerText: {
+                title: "haidera@nulogy.com",
+                subtitle1: "Nulogy",
+                subtitle2: "Toronto, ON",
+            },
+            controls: () => (React.createElement(Flex, { gap: "x2", flexDirection: "column", width: "100%" },
+                React.createElement(Select, { defaultValue: ["eaches"], options: [
+                        { value: "eaches", label: "Eaches" },
+                        { value: "cases", label: "Cases" },
+                        { value: "pallets", label: "Pallets" },
+                    ], labelText: "Default" }),
+                React.createElement(Select, { defaultValue: ["eaches"], options: [
+                        { value: "eaches", label: "Eaches" },
+                        { value: "cases", label: "Cases" },
+                        { value: "pallets", label: "Pallets" },
+                    ], labelText: "Base" }))),
+        } }));
+};
+export const MenuItems = () => {
+    useConditionalAutoClick({
+        selector: userMenuToggleSelector,
+        condition: {
+            queryParam: "cypressTest",
+            when: "absent",
+        },
+    });
+    return (React.createElement(BrowserRouter, null,
+        React.createElement(Navigation, { userMenu: {
+                triggerText: {
+                    title: "haidera@nulogy.com",
+                    subtitle1: "Nulogy",
+                    subtitle2: "Toronto, ON",
+                },
+                menuItems: [
+                    {
+                        key: "simple-link",
+                        label: "A menu item can be a link",
+                        type: "link",
+                        props: {
+                            href: "#",
+                        },
+                    },
+                    {
+                        key: "simple-button",
+                        label: "A menu item can be a button",
+                        type: "button",
+                        props: {
+                            onClick: () => {
+                                console.log("You clicked finance");
+                            },
+                        },
+                    },
+                    {
+                        key: "client-side-routing",
+                        label: "A menu item can use client-side routing",
+                        type: "link",
+                        element: React.createElement(Link, { to: "/finance" }),
+                    },
+                    {
+                        key: "nested-items",
+                        label: "A menu item can have nested items",
+                        type: "button",
+                    },
+                ],
+            } })));
+};

package/dist/src/Navigation/stories/fixtures/logos/CustomLogo2.d.ts

@@ -1,2 +1,2 @@
-import React, { SVGProps } from "react";
-export default function CustomLogo2(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+import React, { SVGProps } from "react";
+export default function CustomLogo2(props: SVGProps<SVGSVGElement>): React.JSX.Element;