@vrobots/storybook 0.1.13 → 0.1.15

package/dist/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@vrobots/storybook",
     "private": false,
-    "version": "0.1.12",
+    "version": "0.1.15",
     "type": "module",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/dist/src/components/Display.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react";
 import { forwardRef } from "react";
+import { useColorMode } from "./ui/color-mode";
 export const Display = forwardRef((props, ref) => {
-    return (_jsx(Box, { ref: ref, height: 'inherit', width: '100%', children: props.children }));
+    const { colorMode } = useColorMode();
+    const bgColor = colorMode === 'light' ? 'gray.50' : 'gray.800';
+    return (_jsx(Box, { ref: ref, height: 'inherit', width: '100%', bg: bgColor, children: props.children }));
 });
 Display.displayName = 'Display';

package/dist/src/components/Frame.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-import { IHeaderProps } from "./Header";
 export interface IFrameProps {
     children?: React.ReactNode;
-    headerProps: IHeaderProps;
 }
 export declare const Frame: React.ForwardRefExoticComponent<IFrameProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Frame.js

@@ -5,10 +5,9 @@ import { Header } from "./Header";
 import { Sidebar } from "./Sidebar";
 import { Display } from "./Display";
 export const Frame = forwardRef((props, ref) => {
-    const { headerProps, } = props;
     const headerRef = React.useRef(null);
     const sidebarRef = React.useRef(null);
     const displayRef = React.useRef(null);
-    return (_jsxs(Box, { ref: ref, height: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'stretch', overflow: 'hidden', children: [_jsx(Header, { ...headerProps, ref: headerRef }), _jsxs(HStack, { gap: 0, flex: 12, alignItems: 'stretch', children: [_jsx(Sidebar, { ref: sidebarRef }), _jsx(Display, { ref: displayRef, children: props.children })] })] }));
+    return (_jsxs(Box, { ref: ref, height: '100vh', display: 'flex', flexDirection: 'column', alignItems: 'stretch', overflow: 'hidden', children: [_jsx(Header, { ref: headerRef }), _jsxs(HStack, { gap: 0, flex: 12, alignItems: 'stretch', children: [_jsx(Sidebar, { ref: sidebarRef }), _jsx(Display, { ref: displayRef, children: props.children })] })] }));
 });
 Frame.displayName = 'Frame';

package/dist/src/components/Header.d.ts

@@ -1,11 +1,26 @@
 import React from 'react';
+export interface IHeaderLogo {
+    light: string;
+    dark: string;
+}
 export interface IHeaderProps {
     appName?: string;
-    logo: {
-        light: string;
-        dark: string;
-    };
+    logo: IHeaderLogo;
+    menu?: React.ReactNode | null;
+    version?: string | null;
+    children?: React.ReactNode | null;
+}
+export interface IHeaderContextProps {
+    appName: string;
+    setAppName: React.Dispatch<React.SetStateAction<string>>;
+    logo: IHeaderLogo;
+    setLogo: React.Dispatch<React.SetStateAction<IHeaderLogo>>;
     menu: React.ReactNode | null;
+    setMenu: React.Dispatch<React.SetStateAction<React.ReactNode | null>>;
     version?: string | null;
+    setVersion?: React.Dispatch<React.SetStateAction<string>>;
 }
-export declare const Header: React.ForwardRefExoticComponent<IHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export declare const HeaderContext: React.Context<IHeaderContextProps>;
+export declare const useHeader: () => IHeaderContextProps;
+export declare const HeaderProvider: React.FC<IHeaderProps>;
+export declare const Header: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Header.js

@@ -1,9 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { defaultSystem, Grid, GridItem, Text } from '@chakra-ui/react';
 import { forwardRef } from 'react';
 import { Logo } from './Logo';
 import { useColorMode } from './ui/color-mode';
-export const Header = forwardRef(({ appName, logo, menu = null, version = null, }, ref) => {
+export const HeaderContext = React.createContext({});
+export const useHeader = () => React.useContext(HeaderContext);
+export const HeaderProvider = (props) => {
+    const [appName, setAppName] = React.useState(props.appName || '');
+    const [menu, setMenu] = React.useState(props?.menu || null);
+    const [logo, setLogo] = React.useState(props.logo);
+    const [version, setVersion] = React.useState(props.version || '');
+    React.useEffect(() => {
+        setAppName(props.appName || '');
+    }, [props.appName]);
+    React.useEffect(() => {
+        setMenu(props.menu || null);
+    }, [props.menu]);
+    React.useEffect(() => {
+        setLogo(props.logo);
+    }, [props.logo]);
+    React.useEffect(() => {
+        setVersion(props.version || '');
+    }, [props.version]);
+    return (_jsx(HeaderContext.Provider, { value: { appName, setVersion, setAppName, setLogo, setMenu, logo, menu, version }, children: props.children }));
+};
+export const Header = forwardRef(({}, ref) => {
+    const { appName, logo, menu, version } = useHeader();
     const { colorMode } = useColorMode();
     const selectedLogo = logo[colorMode];
     const borderColors = { ...defaultSystem }._config.theme?.semanticTokens?.colors.border.DEFAULT.value;

package/dist/src/components/Sidebar.js

@@ -5,8 +5,7 @@ import React, { forwardRef } from "react";
 import { LuMenu } from "react-icons/lu";
 import { motion } from "motion/react";
 import { useBreakpoint, useIsMobile } from "../hooks";
-const COLOR_GRAY_200 = '#e4e4e7';
-const COLOR_GRAY_800 = '#27272a';
+import { COLOR_GRAY_200, COLOR_GRAY_800 } from "../constants";
 export const SidebarContext = React.createContext({});
 export const SidebarProvider = (props) => {
     const [isOpen, setIsOpen] = React.useState(props?.isOpen || false);

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

@@ -0,0 +1,2 @@
+export declare const COLOR_GRAY_200 = "#e4e4e7";
+export declare const COLOR_GRAY_800 = "#27272a";

package/dist/src/constants/index.js

@@ -0,0 +1,2 @@
+export const COLOR_GRAY_200 = '#e4e4e7';
+export const COLOR_GRAY_800 = '#27272a';

package/dist/src/stories/Frame.stories.d.ts

@@ -7,15 +7,6 @@ declare const meta: {
         layout: string;
     };
     args: {
-        headerProps: {
-            appName: string;
-            logo: {
-                light: string;
-                dark: string;
-            };
-            menu: import("react/jsx-runtime").JSX.Element;
-            version: string;
-        };
         children: import("react/jsx-runtime").JSX.Element;
     };
 };

package/dist/src/stories/Frame.stories.js

@@ -9,6 +9,7 @@ import { Page } from '../components/Page';
 import { EXAMPLE_BREADCRUMBS } from './Breadcrumbs.stories';
 import { useIsMobile } from '../hooks/useIsMobile';
 import { AvatarIconMenu } from '../components/AvatarIconMenu';
+import { HeaderProvider } from '../components';
 const logo = {
     light: '/logo_hyperion_official.svg',
     dark: '/logo_hyperion_official_white.svg',
@@ -26,31 +27,19 @@ const meta = {
         layout: 'fullscreen',
     },
     args: {
-        headerProps: {
-            appName: 'My Application',
-            logo,
-            menu,
-            version: packageJson.version,
-        },
         children: (_jsx(Page, { breadcrumbs: EXAMPLE_BREADCRUMBS, children: _jsx(Heading, { children: "Gaming Laptops" }) })),
     },
 };
 export default meta;
 export const Component = {
     args: {
-        headerProps: {
-            appName: 'My Application',
-            logo,
-            menu,
-            version: packageJson.version,
-        },
         children: (_jsx(Page, { breadcrumbs: EXAMPLE_BREADCRUMBS, children: _jsx(Heading, { children: "Gaming Laptops" }) })),
     },
     decorators: [
         (Story) => {
             const isMobile = useIsMobile();
             const isSidebarOpen = !isMobile;
-            return (_jsxs(SidebarProvider, { isOpen: isSidebarOpen, menu: _jsx(Menu, { label: 'Sidebar Menu', menuItems: SIDEBAR_MENU }), children: [_jsx(Story, {}), isMobile && _jsx(SidebarToggleButton, { name: 'sidebar-toggle', "aria-label": 'Toggle sidebar' })] }));
+            return (_jsx(HeaderProvider, { appName: 'My Application', logo: logo, menu: menu, version: packageJson.version, children: _jsxs(SidebarProvider, { isOpen: isSidebarOpen, menu: _jsx(Menu, { label: 'Sidebar Menu', menuItems: SIDEBAR_MENU }), children: [_jsx(Story, {}), isMobile && _jsx(SidebarToggleButton, { name: 'sidebar-toggle', "aria-label": 'Toggle sidebar' })] }) }));
         },
     ],
 };

package/dist/src/stories/Header.stories.d.ts

@@ -1,20 +1,11 @@
 import type { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<import("../components").IHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    component: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLDivElement>>;
     tags: string[];
     parameters: {
         layout: string;
     };
-    args: {
-        appName: string;
-        logo: {
-            light: string;
-            dark: string;
-        };
-        menu: null;
-        version: string;
-    };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/src/stories/Header.stories.js

@@ -1,11 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import packageJson from '../../package.json';
-import { Header } from '../components/Header';
-import { Avatar } from '@chakra-ui/react';
+import { Header, HeaderProvider } from '../components/Header';
+import { AvatarIconMenu } from '../components/AvatarIconMenu';
 const logo = {
     light: '/logo_hyperion_official.svg',
     dark: '/logo_hyperion_official_white.svg',
 };
+const menu = (_jsx(AvatarIconMenu, { name: "Segun Adebayo", src: "https://bit.ly/sage-adebayo", menu: [
+        { label: 'Account', value: 'account' },
+        { label: 'Settings', value: 'settings' },
+        { label: 'Logout', value: 'logout' },
+    ] }));
 const meta = {
     title: 'Frame/Header',
     component: Header,
@@ -13,27 +18,19 @@ const meta = {
     parameters: {
         layout: 'fullscreen',
     },
-    args: {
-        appName: 'My Application',
-        logo,
-        menu: null,
-        version: packageJson.version,
-    },
 };
 export default meta;
 export const LoggedIn = {
-    args: {
-        appName: 'My Application',
-        logo,
-        menu: (_jsxs(Avatar.Root, { children: [_jsx(Avatar.Fallback, { name: "Segun Adebayo" }), _jsx(Avatar.Image, { src: "https://bit.ly/sage-adebayo" })] })),
-        version: packageJson.version,
-    }
+    decorators: [
+        (Story) => {
+            return (_jsx(HeaderProvider, { appName: 'My Application', logo: logo, menu: menu, version: packageJson.version, children: _jsx(Story, {}) }));
+        },
+    ],
 };
 export const LoggedOut = {
-    args: {
-        appName: 'My Application',
-        logo,
-        menu: null,
-        version: packageJson.version,
-    }
+    decorators: [
+        (Story) => {
+            return (_jsx(HeaderProvider, { appName: 'My Application', logo: logo, version: packageJson.version, children: _jsx(Story, {}) }));
+        },
+    ],
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vrobots/storybook",
   "private": false,
-  "version": "0.1.13",
+  "version": "0.1.15",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",