@vrobots/storybook 0.1.55 → 0.1.57

package/dist/package.json

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

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

@@ -1,8 +1,11 @@
 import { IMenuItemsProps } from "./Menu";
+import React from "react";
 export interface IAvatarIconMenuProps {
     src: string;
     name: string;
     menu: IMenuItemsProps[];
+    onClick: (value: string) => void;
+    children?: React.ReactNode;
 }
-export declare const createMenuItem: (item: IMenuItemsProps) => import("react/jsx-runtime").JSX.Element;
-export declare const AvatarIconMenu: ({ src, name, menu, }: IAvatarIconMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const createMenuItem: (onClick: (value: string) => void) => (item: IMenuItemsProps, key: number) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarIconMenu: ({ src, name, menu, onClick, children, }: IAvatarIconMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/AvatarIconMenu.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Avatar, Menu, Portal } from "@chakra-ui/react";
-export const createMenuItem = (item) => {
-    return (_jsx(Menu.Item, { value: item.value, children: item.label }));
+import * as Icons from "react-icons/md";
+import React from "react";
+export const createMenuItem = (onClick) => (item, key) => {
+    return (_jsxs(Menu.Item, { value: item.value, onClick: () => onClick(item.value), children: [Icons[item.icon || ''] ? React.createElement(Icons[item.icon]) : null, " ", item.label] }, key + item.value));
 };
-export const AvatarIconMenu = ({ src, name, menu, }) => {
-    return (_jsxs(Menu.Root, { positioning: { placement: "right-end" }, children: [_jsx(Menu.Trigger, { rounded: "full", focusRing: "outside", children: _jsxs(Avatar.Root, { size: { base: 'xs', md: 'sm' }, children: [_jsx(Avatar.Fallback, { name: name }), _jsx(Avatar.Image, { src: src })] }) }), _jsx(Portal, { children: _jsx(Menu.Positioner, { children: _jsx(Menu.Content, { children: menu.map((item) => createMenuItem(item)) }) }) })] }));
+export const AvatarIconMenu = ({ src, name, menu, onClick, children, }) => {
+    return (_jsxs(Menu.Root, { positioning: { placement: "right-end" }, children: [_jsx(Menu.Trigger, { rounded: "full", focusRing: "outside", children: _jsxs(Avatar.Root, { size: { base: 'xs', md: 'sm' }, children: [_jsx(Avatar.Fallback, { name: name }), _jsx(Avatar.Image, { src: src })] }) }), _jsx(Portal, { children: _jsx(Menu.Positioner, { children: _jsxs(Menu.Content, { children: [menu.map(createMenuItem(onClick)), children] }) }) })] }));
 };

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

@@ -1,7 +1,9 @@
 import React from "react";
+import * as Icons from "react-icons/md";
 export interface IMenuItemsProps {
     label: string;
     value: string;
+    icon?: keyof typeof Icons;
 }
 export interface IMenuProps {
     menuItems?: IMenuItemsProps[];

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

@@ -1,11 +1,10 @@
 import { IBreadcrumb } from "./Breadcrumbs";
+import React from "react";
 export interface IPageProps {
     breadcrumbs?: IBreadcrumb[];
     children: React.ReactNode;
 }
 export declare const Page: {
     ({ breadcrumbs, children }: IPageProps): import("react/jsx-runtime").JSX.Element;
-    Flex({ children }: {
-        children: React.ReactNode;
-    }): import("react/jsx-runtime").JSX.Element;
+    Flex({ children, breadcrumbs }: IPageProps): import("react/jsx-runtime").JSX.Element;
 };

package/dist/src/components/Page.js

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from "@chakra-ui/react";
 import { Breadcrumbs } from "./Breadcrumbs";
 import { useHeader } from "./Header";
+import React from "react";
 export const Page = ({ breadcrumbs, children }) => {
     return (_jsxs(Box, { flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'stretch', overflow: 'hidden', minHeight: '100%', p: 4, children: [_jsx(Breadcrumbs, { breadcrumbs: breadcrumbs }), _jsx(Box, { flex: '1 1 auto', mt: !!breadcrumbs?.length ? 2 : 0, children: children })] }));
 };
-Page.Flex = ({ children }) => {
+Page.Flex = ({ children, breadcrumbs }) => {
     const { ref: headerRef } = useHeader();
-    return (_jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", height: `calc(100vh - ${(headerRef.current?.offsetHeight || 0) * 2}px)`, children: children }));
+    const breadcrumbsRef = React.useRef(null);
+    return (_jsxs(React.Fragment, { children: [_jsx(Breadcrumbs, { breadcrumbs: breadcrumbs, ref: breadcrumbsRef }), _jsx(Box, { display: "flex", justifyContent: "center", alignItems: "center", height: `calc(100vh - ${((headerRef.current?.offsetHeight || 0) * 2) + (breadcrumbsRef.current?.offsetHeight || 0)}px)`, children: children })] }));
 };

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

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react-vite';
 import { IMenuItemsProps } from '../components';
 declare const meta: {
     title: string;
-    component: ({ src, name, menu, }: import("../components").IAvatarIconMenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ src, name, menu, onClick, children, }: import("../components").IAvatarIconMenuProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/dist/src/stories/AvatarIconMenu.stories.js

@@ -23,5 +23,6 @@ export const Component = {
         name: "Segun Adebayo",
         src: "https://bit.ly/sage-adebayo",
         menu,
+        onClick: (value) => console.log(value),
     }
 };

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

@@ -18,7 +18,7 @@ const menu = (_jsx(AvatarIconMenu, { name: "Segun Adebayo", src: "https://bit.ly
         { label: 'Account', value: 'account' },
         { label: 'Settings', value: 'settings' },
         { label: 'Logout', value: 'logout' },
-    ] }));
+    ], onClick: (value) => console.log(value) }));
 const meta = {
     title: 'Frame/Frame',
     component: Frame,

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

@@ -10,7 +10,7 @@ const menu = (_jsx(AvatarIconMenu, { name: "Segun Adebayo", src: "https://bit.ly
         { label: 'Account', value: 'account' },
         { label: 'Settings', value: 'settings' },
         { label: 'Logout', value: 'logout' },
-    ] }));
+    ], onClick: (value) => console.log(value) }));
 const meta = {
     title: 'Frame/Header',
     component: Header,

package/package.json

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