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

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

@@ -1,125 +1,82 @@
-import { Box, Stack, styled, useMediaQuery, useTheme } from '@mui/material';
-import { motion } from 'framer-motion';
-import React, { useState } from 'react';
-import { AppBar } from './components/AppBar';
-import { FloatingHelpDocs } from './components/FloatingHelpDocs';
+import { FileText } from 'lucide-react';
+import React from 'react';
+import { useMediaQuery } from '../../../hooks/useMediaQuery';
+import { Button } from '../../Input/Button/Button';
 import { Sidebar } from './components/Sidebar/Sidebar';
+import { SidebarProvider, useSidebar } from './context/SidebarContext';
 import { AppLayoutProps } from './types';
 
 export const AppLayout: React.FC<AppLayoutProps> = ({
   children,
   menu,
-  leftSection,
-  rightSection,
-  centerSection,
-  mainContainerSx = {},
+  actions,
+  mainContainerClassName = '',
   helpDocsConfig,
   initialCollapsed,
   userProfileParams,
 }) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
 
-  // State for persistent sidebar
-  const [collapsed, setCollapsed] = useState(isSmallScreen ?? initialCollapsed);
-
-  // Get help docs actions for current route
-  const getCurrentRouteHelpActions = () => {
-    if (!helpDocsConfig) return [];
-
-    const fullPath = window.location.pathname;
-    const pathSegments = fullPath.split('/').filter(Boolean);
-    const actualPath = pathSegments.slice(1).join('/');
-    const normalizedPath = actualPath.replace(/\/\d+/g, '/:id');
-
-    return helpDocsConfig[`/${normalizedPath}`]?.actions || [];
-  };
-
-  const helpDocsActions = getCurrentRouteHelpActions();
-
-  const toggleSidebar = () => {
-    setCollapsed(!collapsed);
-  };
+  return (
+    <SidebarProvider initialCollapsed={isSmallScreen ?? initialCollapsed}>
+      <AppLayoutContent
+        menu={menu}
+        actions={actions}
+        mainContainerClassName={mainContainerClassName}
+        helpDocsConfig={helpDocsConfig}
+        userProfileParams={userProfileParams}
+      >
+        {children}
+      </AppLayoutContent>
+    </SidebarProvider>
+  );
+};
 
-  // Calculate main content width for persistent sidebar
-  const getMainWidth = () => {
-    if (isSmallScreen) return '100%';
-    return collapsed ? 'calc(100% - 64px)' : 'calc(100% - 250px)';
-  };
+const AppLayoutContent: React.FC<AppLayoutProps> = ({
+  children,
+  menu,
+  actions,
+  mainContainerClassName = '',
+  helpDocsConfig,
+  userProfileParams,
+}) => {
+  const { collapsed, setCollapsed } = useSidebar();
 
   return (
-    <AppLayoutContainer>
+    <div
+      className="flex flex-row bg-default-background"
+      style={{ height: '100vh', overflow: 'hidden' }}
+    >
       {/* Persistent Sidebar */}
       <Sidebar
         menu={menu}
         collapsed={collapsed}
         setCollapsed={setCollapsed}
         userProfileParams={userProfileParams}
+        actions={
+          typeof actions === 'function' ? actions({ collapsed }) : actions
+        }
       />
 
-      {/* Main Content Area with dynamic width */}
-      <motion.div
-        animate={{
-          width: getMainWidth(),
-        }}
-        transition={{ duration: 0.3, ease: [0.32, 0.72, 0, 1] }}
+      <Button
+        className="bg-gradient-to-r from-[#573DAB] to-[#846AD6] rounded-[32px] fixed bottom-4 right-4 z-[999] p-2"
+        onClick={() => window.open('https://docs.campx.in/', '_blank')}
+      >
+        <FileText className="w-8 h-8 text-white" />
+      </Button>
+
+      {/* Main Content */}
+      <div
         style={{
-          flexDirection: 'column',
           height: '100vh',
           overflow: 'hidden',
+          display: 'flex',
+          flexDirection: 'column',
         }}
+        className={`w-full p-0 ${mainContainerClassName}`}
       >
-        {/* AppBar - Top of main content area */}
-        <AppBar
-          leftSection={leftSection}
-          rightSection={rightSection}
-          centerSection={centerSection}
-          hideHamburger={!isSmallScreen}
-          onToggleSidebar={toggleSidebar}
-        />
-
-        {/* Main Content */}
-        <MainContent
-          sx={{
-            ...mainContainerSx,
-            height: `calc(100vh - 90px)`,
-            overflow: 'scroll',
-          }}
-        >
-          {children}
-        </MainContent>
-
-        {/* Floating Help Docs - Route-aware contextual help */}
-        {helpDocsActions.length > 0 && (
-          <FloatingHelpDocs actions={helpDocsActions} />
-        )}
-      </motion.div>
-    </AppLayoutContainer>
+        {children}
+      </div>
+    </div>
   );
 };
-
-const AppLayoutContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
-  flexDirection: 'row',
-  backgroundColor: theme.palette.surface.paperBackground,
-  height: '100vh',
-  overflow: 'hidden',
-}));
-
-const MainContent = styled(Box)(({ theme }: { theme?: any }) => ({
-  flex: 1,
-  maxWidth: '1440px', // Max width for content
-  width: '100%',
-  margin: '12px auto', // Center the content horizontally
-  // Remove background and borders for clean layout
-  overflow: 'scroll',
-
-  // Hide scrollbars but keep functionality
-  scrollbarWidth: 'none', // Firefox
-  msOverflowStyle: 'none', // IE and Edge
-  '&::-webkit-scrollbar': {
-    display: 'none', // Safari and Chrome
-  },
-  [theme.breakpoints.down('md')]: {
-    padding: '0 8px',
-  },
-}));

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

@@ -0,0 +1,30 @@
+import { Menu } from 'lucide-react';
+import React from 'react';
+import { useMediaQuery } from '../../../../hooks/export';
+import { Button } from '../../../Input/Button/Button';
+import { useSidebar } from '../context/SidebarContext';
+
+interface MenuToggleButtonProps {
+  /** Custom className */
+  className?: string;
+}
+
+export const MenuToggleButton: React.FC<MenuToggleButtonProps> = ({
+  className = '',
+}) => {
+  const { toggleSidebar } = useSidebar();
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
+
+  if (!isSmallScreen) return <></>;
+
+  return (
+    <Button
+      onClick={toggleSidebar}
+      className={className}
+      aria-label="Toggle menu"
+      variant={'link'}
+    >
+      <Menu />
+    </Button>
+  );
+};

package/src/components/Layout/AppLayout/components/Sidebar/MenuBar.tsx

@@ -1,10 +1,10 @@
-import { Typography } from '@mui/material';
+import { cn } from '@/lib/utils';
 import { motion } from 'framer-motion';
-
-import { Icons } from '../../../../export';
-import { MenuItem } from './MenuItem';
+import { Undo2 } from 'lucide-react';
+import { Typography } from '../../../../DataDisplay/Typography/Typography';
 import { MenuBarProps } from './interfaces';
-import { MenuBarContainer, MenuHeaderContainer } from './styles';
+import { MenuItem } from './MenuItem';
+import { MenuBarContainer, MenuHeaderContainer } from './StyledComponents';
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -19,7 +19,6 @@ const containerVariants = {
 
 export const MenuBar: React.FC<MenuBarProps> = ({
   currentMenuState,
-  menuPosition,
   internalMenuClickHandler,
   previousMenuClickHandler,
   onClose,
@@ -28,17 +27,22 @@ export const MenuBar: React.FC<MenuBarProps> = ({
 }) => {
   return (
     <MenuBarContainer
-      sx={{ ':hover': { cursor: collapsed ? 'e-resize' : 'default' } }}
+      className={cn(
+        collapsed ? 'hover:cursor-e-resize' : 'hover:cursor-default',
+      )}
     >
       {currentMenuState.title && (
         <MenuHeaderContainer
-          direction="row"
-          justifyContent={collapsed ? 'center' : 'flex-start'}
+          className={cn(
+            'flex-row',
+            collapsed ? 'justify-center' : 'justify-start',
+            'hover:bg-muted',
+          )}
           onClick={previousMenuClickHandler}
         >
-          <Icons.ArrowBackIcon size={20} />
+          <Undo2 size={18} />
           {!collapsed && (
-            <Typography variant="button1" sx={{ ml: 1 }}>
+            <Typography className="ml-2" variant={'small'}>
               {currentMenuState.title}
             </Typography>
           )}

package/src/components/Layout/AppLayout/components/Sidebar/MenuItem.tsx

@@ -1,9 +1,11 @@
-import { Stack, Tooltip, Typography } from '@mui/material';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { useMatch, useResolvedPath } from 'react-router-dom';
 
-import { Icons } from '../../../../export';
+import { cn } from '@/lib/utils';
+import { Minus, Plus, Undo2 } from 'lucide-react';
+import { Typography } from '../../../../DataDisplay/Typography/Typography';
+import { Tooltip } from '../../../../Feedback/Tooltip/Tooltip';
 import { MenuItemProps } from './interfaces';
 import {
   HoverIcon,
@@ -13,7 +15,7 @@ import {
   MenuLink,
   SubMenuContainer,
   SubMenuItemContainer,
-} from './styles';
+} from './StyledComponents';
 
 export const MenuItem: React.FC<MenuItemProps> = ({
   index,
@@ -60,30 +62,29 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   // Internal menu item (has nested menu)
   if (internalMenu && internalMenu.length > 0) {
     const content = (
-      <MenuItemContainer disablePadding>
+      <MenuItemContainer>
         <SubMenuContainer
           match={!!match}
           onClick={handleInternalMenuClick}
-          sx={{ width: collapsed ? 'max-content' : '100%' }}
+          className={`${collapsed ? 'w-max' : 'w-full'}`}
         >
           <MenuItemButton
-            sx={{
-              justifyContent: collapsed ? 'center' : 'flex-start',
-              padding: collapsed ? '8px' : '5px 8px',
-            }}
+            className={cn(
+              collapsed ? 'justify-center p-2' : 'justify-start py-[5px] px-2',
+            )}
           >
             {collapsed ? (
-              <MenuItemIcon sx={{ margin: 0 }}>{icon}</MenuItemIcon>
+              <MenuItemIcon className="m-0">{icon}</MenuItemIcon>
             ) : (
-              <Stack direction="row" alignItems="center" width="100%">
-                <Stack direction="row" alignItems="center" flex={1}>
+              <div className="flex flex-row items-center w-full">
+                <div className="flex flex-row items-center flex-1">
                   <MenuItemIcon>{icon}</MenuItemIcon>
-                  <Typography variant="button1">{name}</Typography>
-                </Stack>
+                  <Typography variant={'small'}>{name}</Typography>
+                </div>
                 <HoverIcon className="hoverIcon">
-                  <Icons.RedoIcon size={18} />
+                  <Undo2 size={18} />
                 </HoverIcon>
-              </Stack>
+              </div>
             )}
           </MenuItemButton>
         </SubMenuContainer>
@@ -99,7 +100,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
       >
         {collapsed ? (
           <Tooltip title={name} placement="right">
-            {content}
+            <div>{content}</div>
           </Tooltip>
         ) : (
           content
@@ -112,35 +113,31 @@ export const MenuItem: React.FC<MenuItemProps> = ({
   if (subMenu && subMenu.length > 0) {
     const content = (
       <>
-        <MenuItemContainer disablePadding>
+        <MenuItemContainer>
           <SubMenuContainer
             match={!!match}
             onClick={handleSubMenuToggle}
-            sx={{ width: collapsed ? 'max-content' : '100%' }}
+            className={cn(collapsed ? 'w-max' : 'w-full')}
           >
             <MenuItemButton
-              sx={{
-                justifyContent: collapsed ? 'center' : 'flex-start',
-                padding: collapsed ? '8px' : '5px 8px',
-              }}
+              className={cn(
+                collapsed
+                  ? 'justify-center p-2'
+                  : 'justify-start py-[5px] px-2',
+              )}
             >
               {collapsed ? (
-                <MenuItemIcon sx={{ margin: 0 }}>{icon}</MenuItemIcon>
+                <MenuItemIcon className="m-0">{icon}</MenuItemIcon>
               ) : (
-                <Stack
-                  direction="row"
-                  alignItems="center"
-                  width="100%"
-                  justifyContent="space-between"
-                >
-                  <Stack direction="row" alignItems="center">
+                <div className="flex flex-row items-center w-full justify-between">
+                  <div className="flex flex-row items-center ">
                     <MenuItemIcon>{icon}</MenuItemIcon>
-                    <Typography variant="button1">{name}</Typography>
-                  </Stack>
-                  <Stack>
-                    {expanded ? <Icons.CollapseIcon /> : <Icons.ExpandIcon />}
-                  </Stack>
-                </Stack>
+                    <Typography variant={'small'}>{name}</Typography>
+                  </div>
+                  <div className="flex flex-col">
+                    {expanded ? <Minus /> : <Plus />}
+                  </div>
+                </div>
               )}
             </MenuItemButton>
           </SubMenuContainer>
@@ -189,25 +186,25 @@ export const MenuItem: React.FC<MenuItemProps> = ({
 
   // Regular menu item (direct link)
   const regularContent = (
-    <MenuItemContainer disablePadding>
+    <MenuItemContainer>
       <MenuLink
         to={newPath}
         match={match}
         onClick={handleNavigationClick}
-        sx={{ width: collapsed ? 'max-content' : '100%' }}
+        className={collapsed ? 'w-max' : 'w-full'}
       >
         <MenuItemButton
-          sx={{
-            justifyContent: collapsed ? 'center' : 'flex-start',
-            padding: collapsed ? '8px' : '5px 8px',
-          }}
+          className={cn(
+            'gap-0',
+            collapsed ? 'justify-center p-2' : 'justify-start py-[5px] px-2',
+          )}
         >
           {collapsed ? (
-            <MenuItemIcon sx={{ margin: 0 }}>{icon}</MenuItemIcon>
+            <MenuItemIcon className="m-0">{icon}</MenuItemIcon>
           ) : (
             <>
               <MenuItemIcon>{icon}</MenuItemIcon>
-              <Typography variant="button1">{name}</Typography>
+              <Typography variant={'small'}>{name}</Typography>
             </>
           )}
         </MenuItemButton>
@@ -224,7 +221,7 @@ export const MenuItem: React.FC<MenuItemProps> = ({
     >
       {collapsed ? (
         <Tooltip title={name} placement="right">
-          {regularContent}
+          <div>{regularContent}</div>
         </Tooltip>
       ) : (
         regularContent
@@ -254,15 +251,15 @@ const SubMenuItem: React.FC<{
   };
 
   return (
-    <MenuItemContainer key={index} disablePadding>
+    <MenuItemContainer key={index}>
       <MenuLink
         to={newPath}
         match={match}
-        sx={{ margin: '5px 8px 5px 16px' }}
         onClick={handleSubMenuNavigationClick}
+        className="mr-[8px] ml-[16px]"
       >
         <MenuItemButton>
-          <Typography variant="button1">{name}</Typography>
+          <Typography variant={'small'}>{name}</Typography>
         </MenuItemButton>
       </MenuLink>
     </MenuItemContainer>

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

@@ -1,16 +1,10 @@
-import {
-  Box,
-  IconButton,
-  Stack,
-  styled,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
 import { AnimatePresence, motion } from 'framer-motion';
-import React, { useState } from 'react';
-import { CampxFullLogoIconV2 } from '../../../../Assets/Icons/IconComponents/CampxFullLogoIconV2';
-import { CampxIconV2 } from '../../../../Assets/Icons/IconComponents/CampxIconV2';
-import { Icons } from '../../../../export';
+import { PanelLeftClose, PanelLeftOpen } from 'lucide-react';
+import React, { ReactNode, useState } from 'react';
+import { useMediaQuery } from '../../../../../hooks/useMediaQuery';
+import { CampxFullLogoIcon } from '../../../../Assets/Icons/IconComponents/CampxFullLogoIcon';
+import { CampxIcon } from '../../../../Assets/Icons/IconComponents/CampxIcon';
+import { Button } from '../../../../Input/Button/Button';
 import { UserProfilePopup, UserProfilePopupProps } from '../UserProfilePopup';
 import { SideMenuItemProps } from './interfaces';
 import { MenuBar } from './MenuBar';
@@ -25,6 +19,8 @@ interface SidebarProps {
   collapsed: boolean;
   /** Function to toggle sidebar collapse state */
   setCollapsed: any;
+
+  actions: ReactNode;
 }
 
 export const Sidebar: React.FC<SidebarProps> = ({
@@ -32,10 +28,10 @@ export const Sidebar: React.FC<SidebarProps> = ({
   userProfileParams,
   collapsed,
   setCollapsed,
+  actions,
 }) => {
-  const theme = useTheme();
-  const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
   const [hovered, setHovered] = useState(false);
+  const isSmallScreen = useMediaQuery('(max-width: 768px)');
   // Use the navigation hook
   const navigation = useSidebarNavigation(menu);
 
@@ -53,15 +49,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.2 }}
-            style={{
-              position: 'fixed',
-              top: 0,
-              left: 0,
-              right: 0,
-              bottom: 0,
-              backgroundColor: 'rgba(0, 0, 0, 0.5)',
-              zIndex: 1299,
-            }}
+            className="fixed inset-0 bg-black/50 z-[1299]"
             onClick={onToggle}
           />
         )}
@@ -74,63 +62,48 @@ export const Sidebar: React.FC<SidebarProps> = ({
           x: isSmallScreen && collapsed ? '-100%' : '0%',
         }}
         transition={{ duration: 0.3, ease: [0.32, 0.72, 0, 1] }}
-        style={{
-          position: isSmallScreen ? 'fixed' : 'relative',
-          zIndex: isSmallScreen ? 1300 : 1,
-          height: '100vh',
-          flexShrink: 0,
-        }}
+        className={`${
+          isSmallScreen ? 'fixed' : 'relative'
+        } h-screen flex-shrink-0 ${isSmallScreen ? 'z-[1300]' : 'z-1'}`}
       >
         <SidebarContainer>
           {/* Sidebar Header */}
-          <Stack
-            direction="row"
-            justifyContent="space-between"
-            alignItems="center"
-            sx={{
-              height: '64px',
-              padding: collapsed ? '0' : '0 16px',
-              [theme.breakpoints.down('md')]: {
-                height: '54px',
-              },
-            }}
+          <div
+            className={`flex flex-row justify-between items-center h-16  ${
+              collapsed ? '' : 'px-4'
+            } md:h-[54px]`}
           >
             {/* Logo - Show icon when collapsed, full logo when expanded */}
             {collapsed ? (
-              <IconButton
+              <div
                 onClick={() => {
                   setHovered(false);
                   onToggle();
                 }}
                 onMouseEnter={() => setHovered(true)}
                 onMouseLeave={() => setHovered(false)}
-                sx={{
-                  width: '64px',
-                  height: '64px',
-                  borderRadius: 0,
-                  [theme.breakpoints.down('md')]: {
-                    height: '54px',
-                    width: '54px',
-                  },
-                  ':hover': { cursor: 'e-resize' },
-                }}
+                className="w-full hover:cursor-ew-resize flex justify-center"
               >
-                {hovered ? <Icons.RightIcon size={24} /> : <CampxIconV2 />}
-              </IconButton>
+                {hovered ? (
+                  <PanelLeftOpen size={20} />
+                ) : (
+                  <CampxIcon size={32} />
+                )}
+              </div>
             ) : (
               <>
-                <CampxFullLogoIconV2 />
-                <IconButton
+                <CampxFullLogoIcon />
+                <Button
                   onClick={onToggle}
-                  sx={{
-                    ':hover': { cursor: 'e-resize' },
-                  }}
+                  variant="ghost"
+                  size="icon-sm"
+                  className="hover:cursor-ew-resize"
                 >
-                  <Icons.LeftIcon size={20} />
-                </IconButton>
+                  <PanelLeftClose size={20} />
+                </Button>
               </>
             )}
-          </Stack>
+          </div>
 
           {/* Menu Content */}
           <motion.div
@@ -141,10 +114,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
               duration: 0.3,
               ease: navigation.menuPosition ? 'circOut' : 'circIn',
             }}
-            style={{
-              height: `calc(100% - 116px)`,
-              width: '100%',
-            }}
+            className="h-[calc(100%-165px)] w-full"
             onClick={() => setCollapsed(false)}
           >
             <MenuBar
@@ -157,7 +127,8 @@ export const Sidebar: React.FC<SidebarProps> = ({
               setCollapsed={setCollapsed}
             />
           </motion.div>
-          <Box sx={{ position: 'fixed', bottom: 0, left: 0 }}>
+          <div className="fixed bottom-0 left-0 border-t border-border">
+            {actions}
             <UserProfilePopup
               userFullName={userProfileParams?.userFullName}
               email={userProfileParams?.email}
@@ -166,17 +137,15 @@ export const Sidebar: React.FC<SidebarProps> = ({
               profileActions={userProfileParams?.profileActions}
               collapsed={collapsed}
             />
-          </Box>
+          </div>
         </SidebarContainer>
       </motion.div>
     </>
   );
 };
 
-const SidebarContainer = styled(Stack)(({ theme }: { theme?: any }) => ({
-  height: '100%',
-  backgroundColor: theme.palette.surface.paperBackground,
-  flexDirection: 'column',
-  overflow: 'hidden',
-  borderRight: `1px solid ${theme.palette.divider}`,
-}));
+const SidebarContainer = ({ children }: { children: React.ReactNode }) => (
+  <div className="h-full bg-background flex flex-col overflow-hidden border-r border-border">
+    {children}
+  </div>
+);