@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.2

package/src/components/Layout/AppHeader/AppHeaderActions/UserBox.tsx

@@ -1,164 +0,0 @@
-import { Avatar, Stack, Typography, useTheme } from '@mui/material';
-import { ReactNode } from 'react';
-import { Icons } from '../../../Assets/Icons/Icons';
-import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
-import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
-
-const getStartingLetters = (text: string) => {
-  if (!text) return '';
-  return text
-    .split(' ')
-    ?.map((w) => w[0])
-    ?.join('');
-};
-
-export default function UserBox({
-  fullName,
-  onLogoutClick,
-  designation = '',
-  actions,
-  profileUrl,
-  profileSx = {},
-  institutionsData,
-  changePassword,
-  avatar = true,
-  navigationIcon = true,
-  showActiveDevices = true,
-  onAccountClick,
-  onActiveDevicesClick,
-  onChangeInstitutionClick,
-  onAvatarClick,
-}: {
-  fullName: string;
-  designation?: string;
-  institutionsData?: any[];
-  actions: ReactNode[];
-  onLogoutClick?: () => void;
-  profileUrl?: string;
-  changePassword?: ReactNode;
-  profileSx?: any;
-  avatar?: boolean;
-  navigationIcon?: boolean;
-  showActiveDevices?: boolean;
-  // New custom onClick handlers
-  onAccountClick?: () => void;
-  onActiveDevicesClick?: () => void;
-  onChangeInstitutionClick?: () => void;
-  onAvatarClick?: () => void;
-}) {
-  const theme = useTheme();
-
-  const handleAccountClick = () => {
-    if (onAccountClick) {
-      onAccountClick();
-    } else {
-      console.log('Account clicked');
-    }
-  };
-
-  const handleActiveDevicesClick = () => {
-    if (onActiveDevicesClick) {
-      onActiveDevicesClick();
-    } else {
-      alert('Action 1 clicked');
-    }
-  };
-
-  const handleChangeInstitutionClick = (open: () => void) => {
-    if (onChangeInstitutionClick) {
-      onChangeInstitutionClick();
-    } else {
-      open();
-    }
-  };
-
-  return (
-    <>
-      <DropdownMenu
-        anchor={({ open }) => (
-          <Avatar
-            src={profileUrl ?? ''}
-            onClick={(e) => {
-              if (onAvatarClick) {
-                onAvatarClick();
-              } else {
-                open(e);
-              }
-            }}
-            sx={profileSx}
-          >
-            {getStartingLetters(fullName)}
-          </Avatar>
-        )}
-        menuListProps={{
-          sx: {
-            width: '300px',
-            borderRadius: '5px',
-          },
-        }}
-        menu={[
-          <DropdownMenuItem
-            label={
-              <Stack gap={0.5} sx={{ width: '100%' }}>
-                <Typography variant="subtitle3">Account</Typography>
-                <Stack
-                  direction={'row'}
-                  alignItems={'center'}
-                  justifyContent={'space-between'}
-                >
-                  {avatar && (
-                    <Stack direction={'row'} gap={1}>
-                      <Avatar src={profileUrl ?? ''} sx={profileSx}>
-                        {getStartingLetters(fullName)}
-                      </Avatar>
-                      <Stack direction={'row'} justifyContent={'space-between'}>
-                        <Stack>
-                          <Typography variant="subtitle3">
-                            {fullName}
-                          </Typography>
-                          <Typography variant="caption">
-                            {designation}
-                          </Typography>
-                        </Stack>
-                      </Stack>
-                    </Stack>
-                  )}
-                  {navigationIcon && <Icons.NavigationIcon />}
-                </Stack>
-              </Stack>
-            }
-            onClick={handleAccountClick}
-          />,
-          showActiveDevices && (
-            <DropdownMenuItem
-              label={
-                <Stack gap={0.5}>
-                  <Typography variant="subtitle3">Active Devices</Typography>
-                </Stack>
-              }
-              onClick={handleActiveDevicesClick}
-            />
-          ),
-          actions.map((action) => action),
-          <DropdownMenuItem
-            label={
-              <Stack
-                gap={0.5}
-                direction={'row'}
-                justifyContent={'space-between'}
-                width={'100%'}
-              >
-                <Typography variant="subtitle3">Logout</Typography>
-                <Icons.LogoutIcon
-                  hoverColor={theme.palette.tertiary.main}
-                  size={20}
-                />
-              </Stack>
-            }
-            onClick={onLogoutClick || (() => console.log('Logout clicked'))}
-          />,
-        ]}
-      />
-    </>
-  );
-}

package/src/components/Layout/AppHeader/AppHeaderV2.tsx

@@ -1,159 +0,0 @@
-import {
-  Drawer,
-  IconButton,
-  Stack,
-  SxProps,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import { ReactNode, useState } from 'react';
-import { CampxFullLogoIconV2 } from '../../Assets/Icons/IconComponents/CampxFullLogoIconV2';
-import { CampxIconV2 } from '../../Assets/Icons/IconComponents/CampxIconV2';
-import { HamburgerMenuIcon } from '../../Assets/Icons/IconComponents/HamburgerMenuIcon';
-import {} from '../../export';
-import { MenuBar } from '../../Navigation/Sidebar/MenuBar';
-import { SideMenuItemProps } from '../../Navigation/Sidebar/Sidebar';
-import UserBox from './AppHeaderActions/UserBox';
-import { StyledHeaderV2 } from './styles/stylesV2';
-
-export type AppHeaderV2Props = {
-  /** Custom action components to display in the header */
-  actions?: ReactNode[];
-  /** Profile dropdown actions */
-  profileActions?: ReactNode[];
-  /** Full name of the current user */
-  userFullName: string;
-  /** User's designation/role */
-  designation?: string;
-  /** Whether the sidebar is collapsed */
-  collapsed: boolean;
-  /** Callback function to toggle sidebar drawer (mobile only) */
-  onToggleSidebar?: () => void;
-  /** Breadcrumb navigation component (displayed on desktop only) */
-  breadcrumbs?: ReactNode;
-  /** Institution data for user profile */
-  institutionsData?: any[];
-  /** Custom styles for profile component */
-  profileSx?: any;
-  /** Logout click handler */
-  onLogoutClick?: () => void;
-  /** Whether to show active devices in profile */
-  showActiveDevices?: boolean;
-  /** Custom styles for the header */
-  headerSx?: SxProps;
-  menu: SideMenuItemProps[];
-};
-
-export const AppHeaderV2 = ({
-  actions = [],
-  profileActions = [],
-  profileSx = {},
-  onLogoutClick,
-  designation = '',
-  userFullName,
-  collapsed,
-  onToggleSidebar,
-  breadcrumbs,
-  institutionsData,
-  showActiveDevices = true,
-  headerSx,
-  menu,
-}: AppHeaderV2Props) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-  const [hamBurgerCollapsed, setHamBurgerCollapsed] = useState(true);
-
-  const toggleDrawer =
-    (open: boolean | ((prevState: boolean) => boolean)) => () => {
-      // setIsDrawerOpen(open);
-      setHamBurgerCollapsed(!hamBurgerCollapsed);
-    };
-
-  return (
-    <StyledHeaderV2
-      className="appHeaderV2"
-      // headerSx={headerSx}
-    >
-      {/* Left section - Hamburger (mobile) + CampX Logo */}
-      <Stack direction="row" alignItems="center" gap={2}>
-        {isSmallScreen && (
-          <Stack alignItems={'flex-start'}>
-            <IconButton
-              onClick={toggleDrawer(true)}
-              sx={{ padding: '8px 0px ' }}
-            >
-              <HamburgerMenuIcon />
-            </IconButton>
-
-            <Drawer
-              variant="temporary"
-              anchor="left"
-              open={!hamBurgerCollapsed}
-              onClose={toggleDrawer(false)}
-              transitionDuration={300}
-              SlideProps={{
-                direction: 'right',
-                timeout: { enter: 500, exit: 500 },
-              }}
-            >
-              <MenuBar
-                currentMenuState={{
-                  title: '',
-                  path: '',
-                  menu: menu,
-                }}
-                collapsed={hamBurgerCollapsed}
-                setCollapsed={setHamBurgerCollapsed}
-                menuPosition={0}
-                internalMenuClickHandler={() => {}}
-                previousMenuClickHandler={() => {}}
-              />
-            </Drawer>
-          </Stack>
-        )}
-
-        {/* CampX Logo - Full logo on desktop, icon on mobile */}
-        {isSmallScreen ? <CampxIconV2 size={24} /> : <CampxFullLogoIconV2 />}
-      </Stack>
-
-      {/* Middle section - Breadcrumbs (desktop only) */}
-      {!isSmallScreen && breadcrumbs && (
-        <Stack
-          flex={1}
-          justifyContent="flex-start"
-          alignItems="flex-start"
-          sx={{
-            ml: 3,
-            mr: 3,
-            minWidth: 0, // Allow flex shrinking
-            overflow: 'hidden', // Prevent breadcrumbs from overflowing
-          }}
-        >
-          {breadcrumbs}
-        </Stack>
-      )}
-
-      {/* Right section - Actions + User Profile */}
-      <Stack
-        alignItems="center"
-        gap="12px"
-        flexDirection="row"
-        sx={{ marginLeft: 'auto' }}
-      >
-        {actions.map((action, index) => (
-          <div key={index}>{action}</div>
-        ))}
-
-        <UserBox
-          fullName={userFullName}
-          actions={profileActions}
-          institutionsData={institutionsData}
-          profileSx={profileSx}
-          designation={designation}
-          showActiveDevices={showActiveDevices}
-          onLogoutClick={onLogoutClick}
-        />
-      </Stack>
-    </StyledHeaderV2>
-  );
-};

package/src/components/Layout/AppHeader/README.md

@@ -1,105 +0,0 @@
-# AppHeaderV2 Component
-
-A full-width, responsive header component for CampX applications with built-in CampX branding, breadcrumb navigation, and mobile sidebar toggle functionality.
-
-## Features
-
-- **Full-width layout**: Edge-to-edge header without border radius
-- **Responsive CampX branding**: Full logo on desktop, icon on mobile
-- **Mobile hamburger menu**: Toggles sidebar drawer on mobile devices
-- **Breadcrumb navigation**: Displayed on desktop only
-- **User actions**: Customizable action buttons and user profile
-- **No institution branding**: Focuses on CampX brand identity
-
-## Props
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `userFullName` | `string` | ✅ | Full name of the current user |
-| `collapsed` | `boolean` | ✅ | Whether the sidebar is collapsed |
-| `actions` | `ReactNode[]` | ❌ | Custom action components to display |
-| `profileActions` | `ReactNode[]` | ❌ | Profile dropdown actions |
-| `designation` | `string` | ❌ | User's designation/role |
-| `onToggleSidebar` | `() => void` | ❌ | Callback to toggle sidebar (mobile only) |
-| `breadcrumbs` | `ReactNode` | ❌ | Breadcrumb navigation (desktop only) |
-| `institutionsData` | `any[]` | ❌ | Institution data for user profile |
-| `profileSx` | `any` | ❌ | Custom styles for profile component |
-| `onLogoutClick` | `() => void` | ❌ | Logout click handler |
-| `showActiveDevices` | `boolean` | ❌ | Whether to show active devices in profile |
-| `headerSx` | `SxProps` | ❌ | Custom styles for the header |
-
-## Usage
-
-```tsx
-import { AppHeaderV2 } from '@campxdev/react-blueprint';
-import { Breadcrumbs, Link } from '@mui/material';
-
-const MyApp = () => {
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-
-  const breadcrumbs = (
-    <Breadcrumbs>
-      <Link href="/">Dashboard</Link>
-      <Link href="/students">Students</Link>
-      <Link color="text.primary">Student List</Link>
-    </Breadcrumbs>
-  );
-
-  return (
-    <AppHeaderV2
-      userFullName="John Doe"
-      designation="Administrator"
-      collapsed={sidebarCollapsed}
-      onToggleSidebar={() => setSidebarCollapsed(!sidebarCollapsed)}
-      breadcrumbs={breadcrumbs}
-      actions={[<NotificationButton key="notifications" />]}
-      showActiveDevices={true}
-    />
-  );
-};
-```
-
-## Responsive Behavior
-
-### Desktop (md and up)
-- Shows full CampX logo
-- Displays breadcrumbs in the center
-- No hamburger menu
-- User actions and profile on the right
-
-### Mobile (below md breakpoint)
-- Shows hamburger menu button (if `onToggleSidebar` provided)
-- Shows CampX icon (compact version)
-- Hides breadcrumbs
-- User actions and profile on the right
-
-## Differences from AppHeader
-
-AppHeaderV2 is a redesigned version that differs from the original AppHeader:
-
-1. **Full-width layout** instead of rounded container
-2. **CampX branding** instead of client/institution branding
-3. **Built-in responsive behavior** for logo and hamburger menu
-4. **Breadcrumb support** with desktop-only display
-5. **Simplified prop interface** focused on core functionality
-
-## Integration with AppLayoutV2
-
-This component is designed to work seamlessly with AppLayoutV2 from campx-web-utils. The prop interface is standardized for easy integration.
-
-## Accessibility
-
-- Hamburger menu button includes proper `aria-label`
-- Breadcrumbs should include `aria-label="breadcrumb"`
-- Color contrast meets WCAG guidelines
-- Keyboard navigation supported through MUI components
-
-## Styling
-
-The header uses a sticky positioning and includes:
-- Subtle shadow for depth
-- Border bottom for definition
-- Proper z-index for layering
-- Theme-aware colors and spacing
-
-Custom styling can be applied via the `headerSx` prop using MUI's SxProps system.

package/src/components/Layout/AppHeader/styles/styles.tsx

@@ -1,61 +0,0 @@
-import { Box, Divider, styled } from '@mui/material';
-import { Link } from 'react-router-dom';
-
-export const StyledHeader = styled('header')(
-  ({
-    theme,
-    headerSx,
-  }: {
-    theme?: any;
-    collapsed: boolean;
-    headerSx?: any;
-  }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: '60px',
-    minHeight: '60px',
-    width: '100%',
-    backgroundColor: theme.palette.background.paper,
-    justifyContent: 'space-between',
-    padding: '0 32px',
-    borderRadius: '8px',
-
-    [theme.breakpoints.down('md')]: {
-      height: '50px',
-      minHeight: '50px',
-      width: headerSx?.width?.sm ? headerSx?.width?.sm : 'calc(100% - 84px)',
-      marginTop: '12px',
-      padding: '0 12px',
-    },
-    ...headerSx,
-  }),
-);
-
-export const StyledDivider = styled(Divider)(({ theme }) => ({
-  orientation: 'vertical',
-  margin: '8px 0px',
-  border: `0.5px solid ${theme.palette.border.primary}`,
-}));
-
-export const StyledActionBox = styled(Box)(({ theme }) => ({
-  marginRight: '20px',
-  display: 'flex',
-  alignItems: 'center',
-  gap: '14px',
-}));
-
-export const StyledRouterLink = styled(Link)(() => ({
-  textDecoration: 'none',
-}));
-
-export const StyledImageWrapper = styled(Box)(() => ({
-  width: 'auto',
-  height: '22px',
-  display: 'flex',
-  img: {
-    width: '100%',
-    height: '25px',
-    objectFit: 'contain',
-  },
-}));

package/src/components/Layout/AppHeader/styles/stylesV2.tsx

@@ -1,29 +0,0 @@
-import { styled } from '@mui/material';
-
-export const StyledHeaderV2 = styled('header')(
-  ({ theme, headerSx }: { theme?: any; headerSx?: any }) => ({
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    height: '64px',
-    minHeight: '64px',
-    backgroundColor: theme.palette.background.paper,
-    padding: '0 24px',
-    borderRadius: '8px',
-    border: `1px solid ${theme.palette.divider}`,
-    flexShrink: 0, // Prevent AppBar from shrinking
-
-    [theme.breakpoints.down('md')]: {
-      height: '56px',
-      minHeight: '56px',
-      padding: '0 16px',
-    },
-
-    // Ensure proper spacing for child elements
-    '& > *:not(:last-child)': {
-      marginRight: theme.spacing(1),
-    },
-
-    ...headerSx,
-  }),
-);

package/src/components/Layout/AppLayout/components/AppBar.tsx

@@ -1,118 +0,0 @@
-import { Box, IconButton, Stack, styled, useTheme } from '@mui/material';
-import React from 'react';
-import { CampxIconV2 } from '../../../Assets/Icons/IconComponents/CampxIconV2';
-import { HamburgerMenuIcon } from '../../../Assets/Icons/IconComponents/HamburgerMenuIcon';
-
-const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  position: 'relative', // Add relative positioning for absolute center positioning
-  width: '100%',
-  height: '54px',
-  minHeight: '54px',
-  backgroundColor: theme.palette.surface.paperBackground,
-  padding: '0 24px 0 0',
-  flexShrink: 0, // Prevent AppBar from shrinking
-  borderBottom: `1px solid ${theme.palette.divider}`,
-  [theme.breakpoints.down('md')]: {
-    height: '54px',
-    minHeight: '54px',
-    padding: '0 16px 0px 0px',
-    backgroundColor: theme.palette.surface.paperBackground,
-  },
-
-  // Ensure proper spacing for child elements
-  '& > *:not(:last-child)': {
-    marginRight: theme.spacing(1),
-  },
-}));
-
-interface AppBarProps {
-  /** Left section component*/
-  leftSection?: React.ReactNode;
-  /** Right section component (actions, profile, etc.) */
-  rightSection?: React.ReactNode;
-  /** Center section component (workspace switcher, etc.) */
-  centerSection?: React.ReactNode;
-  /** Custom className for the AppBar */
-  className?: string;
-  /** Custom styles for the AppBar */
-  sx?: any;
-  /** Hide hamburger menu (for persistent sidebar mode) */
-  hideHamburger?: boolean;
-  /** Callback to toggle sidebar (for persistent sidebar mode on mobile) */
-  onToggleSidebar?: () => void;
-}
-
-export const AppBar: React.FC<AppBarProps> = ({
-  leftSection,
-  rightSection,
-  centerSection,
-  className = 'appHeaderV2',
-  sx = {},
-  hideHamburger = false,
-  onToggleSidebar = () => {},
-}) => {
-  const theme = useTheme();
-
-  return (
-    <AppBarContainer
-      className={className}
-      sx={{
-        ...sx,
-        justifyContent: 'space-between',
-      }}
-    >
-      {/* Left section - Hamburger + Logo (only show if not hidden) */}
-      {hideHamburger ? (
-        <Box sx={{ paddingX: '12px' }}>{leftSection}</Box>
-      ) : (
-        <Stack gap={'4px'} direction={'row'} alignItems={'center'}>
-          <IconButton
-            onClick={onToggleSidebar}
-            sx={{
-              padding: '24px',
-              [theme.breakpoints.down('md')]: {
-                padding: '20px',
-              },
-            }}
-          >
-            <HamburgerMenuIcon />
-          </IconButton>
-          <CampxIconV2 />
-        </Stack>
-      )}
-
-      {/* Center section - Custom content from props */}
-      {centerSection && (
-        <Stack
-          direction="row"
-          alignItems="center"
-          gap="12px"
-          sx={{
-            position: 'absolute',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            zIndex: 1,
-          }}
-        >
-          {centerSection}
-        </Stack>
-      )}
-
-      {/* Right section - Custom content from props */}
-      {rightSection && (
-        <Stack
-          direction="row"
-          alignItems="center"
-          gap="12px"
-          sx={{ zIndex: 2 }}
-        >
-          {rightSection}
-        </Stack>
-      )}
-    </AppBarContainer>
-  );
-};