Merge pull request #150 from Dias999/feature/Storybook-Navbar

Storybook - Navbar stories / TSDocs for Navbar component

Author: andreneto97

.storybook/preview.ts .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) => (
+      <ThemeProvider theme={themeLight}>
+        <Story />
+      </ThemeProvider>
+    ),
+  ],
 };
 
 export default preview;

packages/react-material-ui/__tests__/Navbar.spec.tsx

@@ -5,7 +5,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import Navbar, { NavbarProps } from '../src/components/Navbar/Navbar';
+import { Navbar, NavbarProps } from '../src/components/Navbar/Navbar';
 
 describe('Navbar', () => {
   const defaultProps: NavbarProps = {

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';
 
 /**

packages/react-material-ui/src/components/HeaderAccount/HeaderAccount.tsx

@@ -61,7 +61,7 @@ const HeaderAccount = ({
       >
         {avatar && <Avatar src={avatar} alt="Avatar" size={avatarSize} />}
 
-        <Box display="flex" flexDirection="column">
+        <Box display="flex" flexDirection="column" ml={avatar ? 1 : 0}>
           <Box display="flex">
             <Text {...textProps}>{text}</Text>{' '}
             <ExpandMore sx={{ display: 'inline', color: iconColor }} />

packages/react-material-ui/src/components/Navbar/Navbar.tsx

@@ -49,7 +49,26 @@ export type NavbarProps = {
   sx?: SxProps<Theme>;
 };
 
-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
+ * <Navbar
+ *   showNotifications={true}
+ *   notificationsNumber={5}
+ *   notificationsOnClick={handleNotificationsClick}
+ *   avatar="https://example.com/avatar.jpg"
+ *   text="John Doe"
+ *   subText="Administrator"
+ * />
+ * ```
+ *
+ * @param props - Navbar component props
+ */
+export const Navbar = ({
   drawerToggle,
   showNotifications,
   notificationsNumber,
@@ -116,5 +135,3 @@ const Navbar = ({
     </Box>
   );
 };
-
-export default Navbar;

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';

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';

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<typeof Navbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+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) => (
+      <Box>
+        <MenuItem onClick={handleClose}>Profile</MenuItem>
+        <MenuItem onClick={handleClose}>My account</MenuItem>
+        <MenuItem onClick={handleClose}>Logout</MenuItem>
+      </Box>
+    ),
+  },
+};