@vrobots/storybook 0.1.39 → 0.1.41

package/dist/package.json

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

package/dist/src/components/Frame.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, HStack } from "@chakra-ui/react";
 import React, { forwardRef } from "react";
-import { Header } from "./Header";
-import { Sidebar } from "./Sidebar";
+import { Header, useHeader } from "./Header";
+import { Sidebar, useSidebar } from "./Sidebar";
 import { Display } from "./Display";
 export const Frame = forwardRef((props, ref) => {
-    const headerRef = React.useRef(null);
-    const sidebarRef = React.useRef(null);
+    const { ref: headerRef } = useHeader();
+    const { ref: sidebarRef } = useSidebar();
     const displayRef = React.useRef(null);
     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 })] })] }));
 });

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

@@ -22,6 +22,7 @@ export interface IHeaderContextProps {
     setMenu: React.Dispatch<React.SetStateAction<React.ReactNode | null>>;
     version?: string | null;
     setVersion?: React.Dispatch<React.SetStateAction<string>>;
+    ref: React.RefObject<HTMLDivElement | null>;
 }
 export declare const HeaderContext: React.Context<IHeaderContextProps>;
 export declare const useHeader: () => IHeaderContextProps;

package/dist/src/components/Header.js

@@ -12,6 +12,7 @@ export const HeaderProvider = (props) => {
     const [logo, setLogo] = React.useState(props.logo);
     const [version, setVersion] = React.useState(props.version || '');
     const [defaultPath, setDefaultPath] = React.useState(props.defaultPath || '');
+    const ref = React.useRef(null);
     React.useEffect(() => {
         setAppName(props.appName || '');
     }, [props.appName]);
@@ -24,7 +25,7 @@ export const HeaderProvider = (props) => {
     React.useEffect(() => {
         setVersion(props.version || '');
     }, [props.version]);
-    return (_jsx(HeaderContext.Provider, { value: { appName, setVersion, setAppName, setLogo, setMenu, logo, menu, version, defaultPath, setDefaultPath }, children: props.children }));
+    return (_jsx(HeaderContext.Provider, { value: { appName, setVersion, setAppName, setLogo, setMenu, logo, menu, version, defaultPath, setDefaultPath, ref }, children: props.children }));
 };
 export const Header = forwardRef(({}, ref) => {
     const { appName, logo, menu, version, defaultPath } = useHeader();

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

@@ -1,15 +1,20 @@
 import React from "react";
 import { IconButtonProps } from "@chakra-ui/react";
-export interface ISidebarProps {
+export interface ISidebarProviderProps {
+    isOpen?: boolean;
+    menu?: React.ReactNode | null;
+    children?: React.ReactNode;
+}
+export interface ISidebarContextProps {
     isOpen?: boolean;
     menu?: React.ReactNode | null;
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     setMenu?: React.Dispatch<React.SetStateAction<React.ReactNode | null>>;
     toggleSidebar?: () => void;
-    children?: React.ReactNode;
+    ref: React.RefObject<HTMLDivElement | null>;
 }
-export declare const SidebarContext: React.Context<ISidebarProps>;
-export declare const SidebarProvider: React.FC<ISidebarProps>;
-export declare const useSidebar: () => ISidebarProps;
+export declare const SidebarContext: React.Context<ISidebarContextProps>;
+export declare const SidebarProvider: React.FC<ISidebarProviderProps>;
+export declare const useSidebar: () => ISidebarContextProps;
 export declare const SidebarToggleButton: React.FC<IconButtonProps>;
 export declare const Sidebar: React.ForwardRefExoticComponent<React.RefAttributes<HTMLDivElement>>;

package/dist/src/components/Sidebar.js

@@ -11,13 +11,14 @@ export const SidebarProvider = (props) => {
     const [isOpen, setIsOpen] = React.useState(props?.isOpen || false);
     const [menu, setMenu] = React.useState(props?.menu || null);
     const toggleSidebar = () => setIsOpen(!isOpen);
+    const ref = React.useRef(null);
     React.useEffect(() => {
         setIsOpen(props.isOpen || false);
     }, [props.isOpen]);
     React.useEffect(() => {
         setMenu(props.menu || null);
     }, [props.menu]);
-    return (_jsx(SidebarContext.Provider, { value: { ...props, isOpen, menu, setIsOpen, setMenu, toggleSidebar }, children: props.children }));
+    return (_jsx(SidebarContext.Provider, { value: { ...props, isOpen, menu, ref, setIsOpen, setMenu, toggleSidebar }, children: props.children }));
 };
 export const useSidebar = () => React.useContext(SidebarContext);
 export const SidebarToggleButton = (props) => {
@@ -25,7 +26,6 @@ export const SidebarToggleButton = (props) => {
     return (_jsx(IconButton, { onClick: toggleSidebar, position: 'absolute', bottom: 2, right: 2, zIndex: 3, variant: 'ghost', ...props, children: _jsx(LuMenu, {}) }));
 };
 export const Sidebar = forwardRef((props, ref) => {
-    const [isFirstTimeOpen, setIsFirstTimeOpen] = React.useState(true);
     const sidebar = useSidebar();
     const { colorMode } = useColorMode();
     const breakpoint = useBreakpoint();

package/dist/src/components/ui/color-mode.js

@@ -12,6 +12,9 @@ export function useColorMode() {
     const toggleColorMode = () => {
         setTheme(resolvedTheme === "dark" ? "light" : "dark");
     };
+    if (!colorMode) {
+        setTheme("light");
+    }
     return {
         colorMode: colorMode,
         setColorMode: setTheme,

package/package.json

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