Merge pull request #179 from Dias999/feature/Storybook-HeaderAccount

Feature/storybook header account

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

@@ -5,7 +5,7 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react';
-import HeaderAccount from '../src/components/HeaderAccount/HeaderAccount';
+import { HeaderAccount } from '../src/components/HeaderAccount/HeaderAccount';
 
 describe('HeaderAccount component', () => {
   const defaultText = 'John Doe';

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

@@ -7,19 +7,58 @@ import ExpandMore from '@mui/icons-material/ExpandMore';
 import Button from '@mui/material/Button';
 import Menu from '@mui/material/Menu';
 
+/**
+ * Props for the `HeaderAccount` component.
+ */
 export type HeaderAccountProps = {
+  /** URL or path to the avatar image */
   avatar?: string;
+  /** Size of the avatar in pixels */
   avatarSize?: number;
+  /** Main text displayed in the header account */
   text?: string;
+  /** Subtext displayed below the main text */
   subText?: string;
+  /** Custom `onClick` handler */
   onClick?: () => void;
+  /** Props passed to the main text component */
   textProps?: TextProps;
+  /** Props passed to the subtext component */
   subTextProps?: TextProps;
+  /** Color of the expand icon */
   iconColor?: string;
+  /** Function that returns menu options as React nodes */
   menuOptions?: (handleClose: () => void) => ReactNode;
 };
 
-const HeaderAccount = ({
+/**
+ * The `HeaderAccount` component is used in the application's header to display
+ * user information, such as an avatar, main text, subtext, and a dropdown menu with options.
+ * It provides customizable styling for the text, avatar, and icon colors.
+ *
+ * @see [Storybook - HeaderAccount](https://storybook.rockets.tools/?path=/docs/headeraccount)
+ *
+ * @example
+ * ```tsx
+ * <HeaderAccount
+ *   avatar="https://example.com/avatar.jpg"
+ *   avatarSize={40}
+ *   text="John Doe"
+ *   subText="Admin"
+ *   onClick={() => console.log('Avatar clicked')}
+ *   iconColor="primary.main"
+ *   menuOptions={(handleClose) => (
+ *     <>
+ *       <MenuItem onClick={handleClose}>Profile</MenuItem>
+ *       <MenuItem onClick={handleClose}>Logout</MenuItem>
+ *     </>
+ *   )}
+ * />
+ * ```
+ *
+ * @param props - Header account component props
+ */
+export const HeaderAccount = ({
   avatar,
   avatarSize = 36,
   text,
@@ -85,5 +124,3 @@ const HeaderAccount = ({
     </Box>
   );
 };
-
-export default HeaderAccount;

packages/react-material-ui/src/components/HeaderAccount/index.ts

@@ -1,4 +1 @@
-import HeaderAccount, { HeaderAccountProps } from './HeaderAccount';
-
-export type { HeaderAccountProps };
-export default HeaderAccount;
+export { HeaderAccount, HeaderAccountProps } from './HeaderAccount';

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

@@ -4,7 +4,7 @@ import MenuIcon from '@mui/icons-material/Menu';
 import Box from '@mui/material/Box';
 import { Notifications } from '../Notifications';
 import Text from '../Text';
-import HeaderAccount, { HeaderAccountProps } from '../HeaderAccount';
+import { HeaderAccount, HeaderAccountProps } from '../HeaderAccount';
 import { SxProps, Theme } from '@mui/material/styles';
 
 /**

packages/react-material-ui/src/index.ts

@@ -24,8 +24,7 @@ export {
 
 export { FormTemplate, FormTemplateProps } from './components/FormTemplate';
 
-import HeaderAccount, { HeaderAccountProps } from './components/HeaderAccount';
-export { HeaderAccount, HeaderAccountProps };
+export { HeaderAccount, HeaderAccountProps } from './components/HeaderAccount';
 
 export { Image, ImageProps } from './components/Image';
 export { default as Link } from './components/Link';

stories/HeaderAccount.stories.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+
+import { HeaderAccount } from '@concepta/react-material-ui';
+import MenuItem from '@mui/material/MenuItem';
+
+const meta = {
+  component: HeaderAccount,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {},
+} satisfies Meta<typeof HeaderAccount>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+    text: 'John Doe',
+    subText: 'Admin',
+  },
+};
+
+export const WithAvatar: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+  },
+};
+
+export const WithLargeAvatar: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+    avatarSize: 80,
+  },
+};
+
+export const WithoutAvatar: Story = {
+  args: {
+    text: 'John Doe',
+    subText: 'Admin',
+  },
+};
+
+export const WithTextAndSubtext: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+    text: 'John Doe',
+    subText: 'Admin',
+  },
+};
+
+export const WithCustomTextStyling: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+    text: 'John Doe',
+    subText: 'Admin',
+    textProps: {
+      fontSize: 16,
+      fontWeight: 'bold',
+      color: 'primary.main',
+    },
+    subTextProps: {
+      fontSize: 14,
+      color: 'secondary.main',
+    },
+  },
+};
+
+export const WithCustomIconColor: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+    text: 'John Doe',
+    subText: 'Admin',
+    iconColor: 'error.main',
+  },
+};
+
+export const WithOnClickEvent: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+    text: 'John Doe',
+    subText: 'Admin',
+    onClick: fn(),
+  },
+};
+
+export const WithMenuOptions: Story = {
+  args: {
+    avatar: 'https://picsum.photos/200/200',
+    text: 'John Doe',
+    subText: 'Admin',
+    menuOptions: (handleClose) => (
+      <>
+        <MenuItem onClick={handleClose}>Profile</MenuItem>
+        <MenuItem onClick={handleClose}>Logout</MenuItem>
+      </>
+    ),
+  },
+};