silverlogic · joaosoutto · Jan 8, 2025 · Dec 27, 2024 · Jan 8, 2025 · coderabbitai
@@ -0,0 +1,77 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/AccountPopover" />
+
+# Component Documentation
+
+## AccountPopover
+
+- **Purpose**: A popover menu component that displays user account-related options and actions.
+- **Expected Behavior**: Opens on click of the account trigger button, displaying a menu with user profile information and navigation options. Closes when clicking outside or selecting a menu item.
+
+## Use Cases
+
+- **Current Usage**: Used in the main application header for user account management and navigation.
+- **Potential Usage**: Could be used in:
+  - User profile sections
+  - Settings panels
+  - Account management interfaces
+  - Navigation drawers
+  - Dashboard headers
+
+## Props
+
+- **MenuItems** (MenuItem[]): Array of menu items containing label and onClick handlers for each action
+- **PopoverStyles** (object): Styles for the popover component
+- **CurrentUser** (object): The current user object containing profile information
+- **SwitchProfileMenu** (object): The switch profile menu object containing label and onClick handlers for each action
+- **SwitchProfileMenuProps** (object): The switch profile menu props object containing label and onClick handlers for each action
+- **ProfilesList** (object): The profiles list object containing label and onClick handlers for each action
+- **ProfilesListProps** (object): The profiles list props object containing label and onClick handlers for each action
+- **AddProfileMenuItem** (object): The add profile menu item object containing label and onClick handlers for each action
+- **AddProfileMenuItemProps** (object): The add profile menu item props object containing label and onClick handlers for each action
+- **LogoutItemProps** (object): The logout menu item props object containing label and onClick handlers for each action
+
+## Notes
+
+- **Related Components**:
+  - Header: Parent component that contains the AccountPopover
+  - Popover: Base component used for the popup interface
+  - MenuItem: Used for individual menu options
+  - AccountMenu: Wrapper component that manages the popover state
+
+## Example Usage
+
+```javascript
+import { AccountPopover } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <AccountPopover
+      MenuItemsProps={{
+        menuItems: [
+          { label: 'Profile', onClick: () => console.log('Profile clicked') },
+          { label: 'Settings', onClick: () => console.log('Settings clicked') },
+        ],
+      }}
+      SwitchProfileMenuProps={{
+        label: 'Switch Profile',
+        onClick: () => console.log('Switch Profile clicked'),
+      }}
+      ProfilesListProps={{
+        label: 'Profiles List',
+        onClick: () => console.log('Profiles List clicked'),
+      }}
+      AddProfileMenuItemProps={{
+        label: 'Add Profile',
+        onClick: () => console.log('Add Profile clicked'),
+      }}
+      LogoutItemProps={{
+        label: 'Logout',
+        onClick: () => console.log('Logout clicked'),
+      }}
+    />
+  )
+}
+export default MyComponent
+```
-```javascript
-import { AccountPopover } from '@baseapp-frontend/design-system'
-
-const MyComponent = () => {
-  return (
-    <AccountPopover
-      MenuItemsProps={{
-        menuItems: [
-          { label: 'Profile', onClick: () => console.log('Profile clicked') },
-          { label: 'Settings', onClick: () => console.log('Settings clicked') },
-        ],
-      }}
-      SwitchProfileMenuProps={{
-        label: 'Switch Profile',
-        onClick: () => console.log('Switch Profile clicked'),
-      }}
-      ProfilesListProps={{
-        label: 'Profiles List',
-        onClick: () => console.log('Profiles List clicked'),
-      }}
-      AddProfileMenuItemProps={{
-        label: 'Add Profile',
-        onClick: () => console.log('Add Profile clicked'),
-      }}
-      LogoutItemProps={{
-        label: 'Logout',
-        onClick: () => console.log('Logout clicked'),
-      }}
-    />
-  )
-}
-export default MyComponent
-```
+import { AccountPopover } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <AccountPopover
+      menuItems={[
+          { label: 'Profile', onClick: () => console.log('Profile clicked') },
+          { label: 'Settings', onClick: () => console.log('Settings clicked') },
+      ]}
+      switchProfile={{
+        label: 'Switch Profile',
+        onClick: () => console.log('Switch Profile clicked'),
+      }}
+      profiles={{
+        list: [],
+        onAdd: () => console.log('Add Profile clicked'),
+      }}
+      onLogout={() => console.log('Logout clicked')}
+    />
+  )
+}
+export default MyComponent
-```javascript
-import { AccountPopover } from '@baseapp-frontend/design-system'
-
-const MyComponent = () => {
-  return (
-    <AccountPopover
-      MenuItemsProps={{
-        menuItems: [
-          { label: 'Profile', onClick: () => console.log('Profile clicked') },
-          { label: 'Settings', onClick: () => console.log('Settings clicked') },
-        ],
-      }}
-      SwitchProfileMenuProps={{
-        label: 'Switch Profile',
-        onClick: () => console.log('Switch Profile clicked'),
-      }}
-      ProfilesListProps={{
-        label: 'Profiles List',
-        onClick: () => console.log('Profiles List clicked'),
-      }}
-      AddProfileMenuItemProps={{
-        label: 'Add Profile',
-        onClick: () => console.log('Add Profile clicked'),
-      }}
-      LogoutItemProps={{
-        label: 'Logout',
-        onClick: () => console.log('Logout clicked'),
-      }}
-    />
-  )
-}
-export default MyComponent
-```
+import { AccountPopover } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <AccountPopover
+      menuItems={[
+          { label: 'Profile', onClick: () => console.log('Profile clicked') },
+          { label: 'Settings', onClick: () => console.log('Settings clicked') },
+      ]}
+      switchProfile={{
+        label: 'Switch Profile',
+        onClick: () => console.log('Switch Profile clicked'),
+      }}
+      profiles={{
+        list: [],
+        onAdd: () => console.log('Add Profile clicked'),
+      }}
+      onLogout={() => console.log('Logout clicked')}
+    />
+  )
+}
+export default MyComponent
@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/Header" />
+
+# Component Documentation
+
+## Header
+
+- **Purpose**: A versatile header component that provides navigation controls and branding elements for the application layout.
+- **Expected Behavior**: Renders a customizable app bar with optional logo, navigation toggle, and account menu. Adapts its layout based on theme settings and screen size.
+
+## Use Cases
+
+- **Current Usage**: Used as the main navigation header across the application, providing consistent branding and navigation controls.
+- **Potential Usage**: Could be used in:
+  - Admin dashboards
+  - Web applications requiring consistent navigation
+  - Portals with user account management
+  - Applications with multiple layout options
+
+## Props
+
+- **settings** (object): Configuration object for theme and layout settings
+  - **themeLayout**: Determines the header layout ('horizontal' | 'centered' | 'vertical')
+- **children** (ReactNode): Optional content to render within the header
+- **onOpenNav** (function): Callback function for handling navigation menu toggle
+- **LogoIcon** (component): Custom logo component to display in the header
+- **AccountMenu** (component): Custom account menu component, defaults to DefaultAccountMenu
+- **AccountMenuProps** (object): Props passed to the AccountMenu component
+- **ToolbarProps** (object): Props passed to the underlying MUI Toolbar component
+
+## Notes
+
+- **Related Components**:
+  - Logo: For branding display
+  - AccountMenu: For user account actions
+  - MenuIcon: For navigation toggle
+  - Toolbar: For layout structure
+
+## Example Usage
+
+```javascript
+import { Header } from '@baseapp-frontend/design-system'
+import { LogoIcon } from '@baseapp-frontend/design-system'
+import { AccountMenu } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <Header settings={{ themeLayout: 'horizontal' }}>
+      <LogoIcon />
+      <AccountMenu />
+    </Header>
+  )
+}
+
+export default MyComponent
+```
@@ -0,0 +1,57 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavCentered" />
+
+# Component Documentation
+
+## NavCentered
+
+- **Purpose**: A navigation component that provides a centered horizontal menu layout for desktop views and transforms into a drawer for mobile views.
+- **Expected Behavior**: On desktop screens (lg and up), displays as a horizontal scrollable navigation bar with centered menu items. On mobile screens (lgDown), transforms into a vertical drawer component.
+
+## Use Cases
+
+- **Current Usage**: Used as a centered horizontal navigation component with responsive mobile drawer.
+- **Potential Usage**: Could be used in:
+  - Applications requiring centered horizontal navigation
+  - Interfaces needing scrollable menu content
+  - Responsive web applications
+  - Systems with desktop and mobile navigation patterns
+  - Content-focused layouts where centered navigation is preferred
+
+## Props
+
+- **navData** (array): Navigation items data containing routes and content
+- **openNav** (boolean): Controls visibility of mobile navigation drawer
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+
+## Notes
+
+- **Related Components**:
+  - Scrollbar: Handles horizontal scrolling of navigation items
+  - NavSectionHorizontal: Renders horizontal navigation items with tab layout
+  - VerticalDrawer: Mobile view navigation component
+  - useResponsive: Hook for responsive breakpoint detection
+
+## Example Usage
+
+```javascript
+import { NavCentered } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [openNav, setOpenNav] = useState(false)
+  return (
+    <NavCentered
+      navData={[
+        { title: 'Home', icon: <MenuIcon /> },
+        { title: 'About', icon: <InfoIcon /> },
+        { title: 'Contact', icon: <ContactIcon /> },
+      ]}
+      openNav={openNav}
+      onCloseNav={() => setOpenNav(false)}
+    />
+  )
+}
+
+export default MyComponent
+```
@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavHorizontal" />
+
+# Component Documentation
+
+## NavHorizontal
+
+- **Purpose**: A horizontal navigation component that provides a secondary navigation bar below the main header.
+- **Expected Behavior**: On desktop screens (lg and up), displays as a horizontal navigation bar fixed below the header with centered menu items and horizontal scrolling if needed. On mobile screens (lgDown), transforms into a vertical drawer component. Uses blur effect on the background.
+
+## Use Cases
+
+- **Current Usage**: Secondary horizontal navigation bar below main header.
+- **Potential Usage**: Could be used in:
+  - Multi-level navigation systems
+  - Complex web applications requiring secondary navigation
+  - Interfaces needing horizontally scrollable navigation items
+  - Applications with responsive navigation requirements
+  - Systems with desktop and mobile navigation patterns
+
+## Props
+
+- **navData** (array): Navigation items data containing routes and content
+- **openNav** (boolean): Controls visibility of mobile navigation drawer 
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+
+## Notes
+
+- **Related Components**:
+  - Scrollbar: Handles horizontal scrolling of navigation items
+  - NavSectionHorizontal: Renders horizontal navigation items
+  - VerticalDrawer: Mobile view navigation component
+  - HeaderShadow: Adds shadow effect below navigation
+  - AppBar: Material-UI container component
+
+## Example Usage
+
+```javascript
+import { NavHorizontal } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [openNav, setOpenNav] = useState(false)
+  return (
+    <NavHorizontal
+      navData={[
+        { title: 'Home', icon: <MenuIcon /> },
+        { title: 'About', icon: <InfoIcon /> },
+        { title: 'Contact', icon: <ContactIcon /> },
+      ]}
+      openNav={openNav}
+      onCloseNav={() => setOpenNav(false)}
+    />
+  )
+}
+
+export default MyComponent
+```
@@ -0,0 +1,75 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavMini" />
+
+# Component Documentation
+## NavMini
+
+- **Purpose**: A compact navigation component that provides a fixed-width mini sidebar menu with icon-only display for desktop views and transforms into a drawer for mobile views.
+- **Expected Behavior**: On desktop screens (lg and up), displays as a narrow vertical sidebar with width NAV_WIDTH.MINI containing only icons. On mobile screens (lgDown), transforms into a full drawer component. Includes optional logo placement and navigation toggle button.
+
+## Use Cases
+
+- **Current Usage**: Used as a space-efficient navigation sidebar when minimal screen space usage is desired.
+- **Potential Usage**: Could be used in:
+  - Applications requiring minimal-width navigation
+  - Interfaces prioritizing content space
+  - Responsive web applications
+  - Systems needing collapsible navigation options
+  - Dashboards with space constraints
+
+## Props
+
+- **navData** (array): Navigation items data containing routes and content
+- **settings** (object): Configuration settings for the navigation component
+- **setSettings** (function): Callback to update navigation settings
+- **LogoIcon** (component): Optional custom logo component to display at top
+- **openNav** (boolean): Controls visibility of mobile navigation drawer
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+- **hideToggleButton** (boolean): Optional flag to hide the navigation toggle button, defaults to false
+
+## Notes
+
+- **Related Components**:
+  - Logo: Optional branding component at top
+  - NavSectionMini: Renders mini navigation items
+  - NavToggleButton: Button to expand/collapse navigation
+  - VerticalDrawer: Mobile view navigation component
+  - Box: Container component with responsive styles
+  - Stack: Vertical layout container
+
+## Example Usage
+
+```javascript
+import { NavMini } from '@baseapp-frontend/design-system'
+import { FavoriteIcon, MentionIcon, MenuIcon, PenEditIcon } from '@baseapp-frontend/design-system'
+import { BaseAppLogoCondensed } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  return (
+    <NavMini
+      navData={[
+        {
+          subheader: 'BASEAPP',
+          items: [{ title: 'Home', icon: <MenuIcon /> }],
+        },
+        {
+          subheader: 'BASIC',
+          items: [
+            { title: 'Feature Requests', icon: <MentionIcon /> },
+            { title: 'Flat Pages', icon: <PenEditIcon /> },
+            { title: 'Feedback', icon: <FavoriteIcon /> },
+          ],
+        },
+      ]}
+      settings={defaultTheme.settings}
+      LogoIcon={BaseAppLogoCondensed}
+      openNav={false}
+      hideToggleButton={true}
+      onCloseNav={() => console.log('NavMini closed')}
+    />
+  )
+}
+
+export default MyComponent
+```
@@ -0,0 +1,64 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="@baseapp-frontend | components/Navigation/NavVertical" />
+
+# Component Documentation
+
+## NavVertical
+
+- **Purpose**: A vertical navigation component that provides a fixed-width sidebar menu with scrollable content and optional logo.
+- **Expected Behavior**: Displays as a vertical sidebar on desktop screens with a width of NAV_WIDTH.VERTICAL. On mobile screens (lgDown breakpoint), transforms into a drawer component. Includes optional logo placement and scrollable navigation sections.
+
+## Use Cases
+
+- **Current Usage**: Main vertical navigation sidebar for desktop views.
+- **Potential Usage**: Could be used in:
+  - Applications requiring fixed sidebar navigation
+  - Interfaces needing scrollable menu content
+  - Layouts with optional logo placement
+  - Responsive applications with mobile drawer navigation
+  - Systems requiring collapsible navigation options
+
+## Props
+
+- **settings** (object): Configuration settings for the navigation component
+- **setSettings** (function): Callback to update navigation settings
+- **navData** (array): Navigation items data containing routes and content
+- **LogoIcon** (component): Optional custom logo component to display at top
+- **openNav** (boolean): Controls visibility of mobile navigation drawer
+- **onCloseNav** (function): Callback when mobile navigation drawer closes
+- **hideToggleButton** (boolean): Optional flag to hide the navigation toggle button, defaults to false
+
+## Notes
+
+- **Related Components**:
+  - Scrollbar: Handles scrollable content within navigation
+  - NavSectionVertical: Renders navigation item sections
+  - NavToggleButton: Button to expand/collapse navigation
+  - VerticalDrawer: Mobile view navigation component
+  - Logo: Optional branding component
+
+## Example Usage
+
+```javascript
+import { NavVertical } from '@baseapp-frontend/design-system'
+import { BaseAppLogoCondensed } from '@baseapp-frontend/design-system'
+
+const MyComponent = () => {
+  const [openNav, setOpenNav] = useState(false)
+  return (
+    <NavVertical
+      navData={[
+        { title: 'Home', icon: <MenuIcon /> },
+        { title: 'About', icon: <InfoIcon /> },
+        { title: 'Contact', icon: <ContactIcon /> },
+      ]}
+      openNav={openNav}
+      onCloseNav={() => setOpenNav(false)}
+      hideToggleButton={true}
+    />
+  )
+}
+
+export default MyComponent
+```