@vrobots/storybook 0.1.18 → 0.1.19

package/dist/package.json

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

package/dist/src/components/Sidebar.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
 import { Box, IconButton } from "@chakra-ui/react";
 import { useColorMode } from "./ui/color-mode";
 import { LuMenu } from "react-icons/lu";
 import { motion } from "motion/react";
-import { useBreakpoint } from "../hooks";
+import { useBreakpoint, useIsMobile } from "../hooks";
 import { COLOR_GRAY_200, COLOR_GRAY_800 } from "../constants";
 export const SidebarContext = React.createContext({});
 export const SidebarProvider = (props) => {
@@ -25,15 +25,11 @@ 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 [shouldAnimate, setShouldAnimate] = React.useState(false);
+    const [isFirstTimeOpen, setIsFirstTimeOpen] = React.useState(true);
     const sidebar = useSidebar();
     const { colorMode } = useColorMode();
     const breakpoint = useBreakpoint();
-    React.useEffect(() => {
-        if (!shouldAnimate && sidebar.isOpen) {
-            setShouldAnimate(true);
-        }
-    }, [sidebar.isOpen, shouldAnimate]);
+    const isMobile = useIsMobile();
     const width = {
         base: '100vw',
         sm: '100vw',
@@ -52,18 +48,20 @@ export const Sidebar = forwardRef((props, ref) => {
         animate: { width: '0' },
         transition: { duration: 0.2 }
     };
-    const action = shouldAnimate ? sidebar.isOpen ? open : close : {};
+    const action = isMobile ? sidebar.isOpen ? open : close : {};
     const borderColor = colorMode === 'light' ? COLOR_GRAY_200 : COLOR_GRAY_800;
-    return (_jsx(SidebarContext.Provider, { value: sidebar, children: _jsx(motion.div, { style: {
-                position: 'relative',
-                display: 'flex',
-                flexDirection: 'column',
-                flex: '0 0 auto',
-                zIndex: 1,
-                overflow: 'hidden',
-                height: 'inherit',
-                width: 0,
-                borderRight: `1px solid ${borderColor}`,
-            }, ...action, ref: ref, children: _jsx(Box, { width: width[breakpoint || 'base'], children: sidebar.menu }) }) }));
+    if (!sidebar.menu)
+        return null;
+    return (_jsxs(React.Fragment, { children: [_jsx(motion.div, { style: {
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    flex: '0 0 auto',
+                    zIndex: 1,
+                    overflow: 'hidden',
+                    height: 'inherit',
+                    width: sidebar.isOpen ? width[breakpoint || 'base'] : '0',
+                    borderRight: `1px solid ${borderColor}`,
+                }, ...action, ref: ref, children: _jsx(Box, { width: width[breakpoint || 'base'], children: sidebar.menu }) }), isMobile && _jsx(SidebarToggleButton, { name: 'sidebar-toggle', "aria-label": 'Toggle sidebar' })] }));
 });
 Sidebar.displayName = 'Sidebar';

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

@@ -1,9 +1,9 @@
-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 { Frame } from '../components/Frame';
 import { Heading } from '@chakra-ui/react';
 import { Menu } from '../components/Menu';
-import { SidebarProvider, SidebarToggleButton } from '../components/Sidebar';
+import { SidebarProvider } from '../components/Sidebar';
 import { SIDEBAR_MENU } from './Sidebar.stories';
 import { Page } from '../components/Page';
 import { EXAMPLE_BREADCRUMBS } from './Breadcrumbs.stories';
@@ -39,7 +39,7 @@ export const Component = {
         (Story) => {
             const isMobile = useIsMobile();
             const isSidebarOpen = !isMobile;
-            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' })] }) }));
+            return (_jsx(HeaderProvider, { appName: 'My Application', logo: logo, menu: menu, version: packageJson.version, children: _jsx(SidebarProvider, { isOpen: isSidebarOpen, menu: _jsx(Menu, { label: 'Sidebar Menu', menuItems: SIDEBAR_MENU }), children: _jsx(Story, {}) }) }));
         },
     ],
 };

package/package.json

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