From fc34b6dfb8b73f79c0b33042e06fb20d9e958ed5 Mon Sep 17 00:00:00 2001 From: Rodrigo Dias Date: Thu, 18 Jul 2024 12:22:50 -0300 Subject: [PATCH] feat: storybook - add Navbar stories / add tsdocs for Navbar component --- .storybook/{preview.ts => preview.tsx} | 11 ++ .../src/components/AppBar/AppBarNav.tsx | 2 +- .../HeaderAccount/HeaderAccount.tsx | 2 +- .../src/components/Navbar/Navbar.tsx | 23 +++- .../src/components/Navbar/index.ts | 5 +- packages/react-material-ui/src/index.ts | 3 +- stories/Navbar.stories.tsx | 118 ++++++++++++++++++ 7 files changed, 153 insertions(+), 11 deletions(-) rename .storybook/{preview.ts => preview.tsx} (52%) create mode 100644 stories/Navbar.stories.tsx diff --git a/.storybook/preview.ts b/.storybook/preview.tsx similarity index 52% rename from .storybook/preview.ts rename to .storybook/preview.tsx index ed3b9ad3..eb9edfc9 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.tsx @@ -1,6 +1,10 @@ +import React from 'react'; import type { Preview } from '@storybook/react'; import { initialize, mswLoader } from 'msw-storybook-addon'; +import { ThemeProvider } from '@concepta/react-material-ui/dist/styles'; +import { themeLight } from '@concepta/react-material-ui/dist/styles/theme'; + initialize(); const preview: Preview = { @@ -13,6 +17,13 @@ const preview: Preview = { }, }, loaders: [mswLoader], + decorators: [ + (Story) => ( + + + + ), + ], }; export default preview; diff --git a/packages/react-material-ui/src/components/AppBar/AppBarNav.tsx b/packages/react-material-ui/src/components/AppBar/AppBarNav.tsx index 9ef1d692..65d7873b 100644 --- a/packages/react-material-ui/src/components/AppBar/AppBarNav.tsx +++ b/packages/react-material-ui/src/components/AppBar/AppBarNav.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import Navbar, { NavbarProps } from '../Navbar'; +import { Navbar, NavbarProps } from '../Navbar'; import { useAppBarRoot } from './hooks/useAppBarRoot'; /** diff --git a/packages/react-material-ui/src/components/HeaderAccount/HeaderAccount.tsx b/packages/react-material-ui/src/components/HeaderAccount/HeaderAccount.tsx index 40013394..b39dec76 100644 --- a/packages/react-material-ui/src/components/HeaderAccount/HeaderAccount.tsx +++ b/packages/react-material-ui/src/components/HeaderAccount/HeaderAccount.tsx @@ -61,7 +61,7 @@ const HeaderAccount = ({ > {avatar && } - + {text}{' '} diff --git a/packages/react-material-ui/src/components/Navbar/Navbar.tsx b/packages/react-material-ui/src/components/Navbar/Navbar.tsx index 710ee731..fa1f0949 100644 --- a/packages/react-material-ui/src/components/Navbar/Navbar.tsx +++ b/packages/react-material-ui/src/components/Navbar/Navbar.tsx @@ -49,7 +49,26 @@ export type NavbarProps = { sx?: SxProps; }; -const Navbar = ({ +/** + * The Navbar component is a UI element used to display a navigation bar + * that includes a menu icon for drawer toggling, notification icon, and + * user account information. + * + * @example + * ```tsx + * + * ``` + * + * @param props - Navbar component props + */ +export const Navbar = ({ drawerToggle, showNotifications, notificationsNumber, @@ -116,5 +135,3 @@ const Navbar = ({ ); }; - -export default Navbar; diff --git a/packages/react-material-ui/src/components/Navbar/index.ts b/packages/react-material-ui/src/components/Navbar/index.ts index 3e794187..7b36e79e 100644 --- a/packages/react-material-ui/src/components/Navbar/index.ts +++ b/packages/react-material-ui/src/components/Navbar/index.ts @@ -1,4 +1 @@ -import Navbar, { NavbarProps } from './Navbar'; - -export type { NavbarProps }; -export default Navbar; +export { Navbar, NavbarProps } from './Navbar'; diff --git a/packages/react-material-ui/src/index.ts b/packages/react-material-ui/src/index.ts index c32bec2a..8ee69bdc 100644 --- a/packages/react-material-ui/src/index.ts +++ b/packages/react-material-ui/src/index.ts @@ -25,8 +25,7 @@ export { HeaderAccount, HeaderAccountProps }; export { default as Image } from './components/Image'; export { default as Link } from './components/Link'; -import Navbar, { NavbarProps } from './components/Navbar'; -export { Navbar, NavbarProps }; +export { Navbar, NavbarProps } from './components/Navbar'; export { default as Notifications } from './components/Notifications'; export { default as RadioGroup } from './components/RadioGroup'; diff --git a/stories/Navbar.stories.tsx b/stories/Navbar.stories.tsx new file mode 100644 index 00000000..7a141e9a --- /dev/null +++ b/stories/Navbar.stories.tsx @@ -0,0 +1,118 @@ +import React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; + +import { Navbar } from '@concepta/react-material-ui'; +import { Box, MenuItem } from '@mui/material'; + +const meta = { + component: Navbar, + tags: ['autodocs'], + args: { + text: 'John Doe', + subText: 'Admin', + }, + argTypes: { + drawerToggle: { + type: 'function', + description: 'Function to call when the drawer toggle button is clicked', + }, + showNotifications: { + control: 'boolean', + description: 'Whether to show the notifications icon', + }, + notificationsNumber: { + control: 'number', + description: 'Number of notifications to display', + }, + notificationsOnClick: { + type: 'function', + description: 'Function to call when the notifications icon is clicked', + }, + avatar: { control: 'text', description: 'URL of the user avatar' }, + text: { + control: 'text', + description: 'Text to display next to the avatar', + }, + subText: { + control: 'text', + description: 'Subtext to display below the text', + }, + headerMenuOptions: { + type: 'function', + description: + 'Function to render the dropdown menu options and handle the close action', + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + showNotifications: true, + notificationsNumber: 8, + notificationsOnClick: fn(), + avatar: 'https://picsum.photos/40/40', + }, +}; + +/** + * Please preview it in a mobile viewPort to see the drawer toggle button. + */ +export const NavbarWithDrawerToggle: Story = { + parameters: { viewport: { defaultViewport: 'mobile1' } }, + args: { + drawerToggle: fn(), + }, +}; + +export const NavbarWithNotifications: Story = { + args: { + showNotifications: true, + notificationsNumber: 3, + }, +}; + +export const NavbarWithUserAccountInfo: Story = { + args: { + avatar: 'https://picsum.photos/40/40', + text: 'John Doe', + subText: 'Admin', + }, +}; + +export const NavbarWithCustomStyles: Story = { + args: { + sx: { + backgroundColor: '#93d6ff', + color: 'white', + padding: '16px 32px', + }, + }, +}; + +export const NavbarWithClickableNotifications: Story = { + args: { + showNotifications: true, + notificationsNumber: 5, + notificationsOnClick: fn(), + }, +}; + +export const NavbarWithDropdownMenu: Story = { + args: { + avatar: 'https://picsum.photos/40/40', + text: 'John Doe', + subText: 'Admin', + headerMenuOptions: (handleClose) => ( + + Profile + My account + Logout + + ), + }, +};