@campxdev/react-blueprint 1.5.3 → 1.5.5

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@mui/x-data-grid": "^7.22.1",

package/src/components/Assets/Icons/IconComponents/QuizIcon.tsx

@@ -1,36 +1,32 @@
 import { useTheme } from '@mui/material';
 
-const QuizIcon = ({ size = 16 }) => {
+const QuizIcon = ({ color, size = 16 }: { color?: string; size?: number }) => {
   const theme = useTheme();
-  const color = theme.palette.text.black;
+  color = color ?? theme.palette.text.black;
   return (
     <svg
       width={size}
       height={size}
       viewBox="0 0 20 20"
-      style={{
-        fill: color,
-        stroke: color,
-      }}
       xmlns="http://www.w3.org/2000/svg"
     >
       <g clip-path="url(#clip0_1305_893)">
         <path
           d="M12.3096 16.4603H7.7179C7.51336 16.479 7.30713 16.457 7.11116 16.3955C6.91519 16.334 6.73337 16.2342 6.57624 16.1019C6.46443 15.9727 6.38135 15.8211 6.3325 15.6574C6.28366 15.4936 6.27016 15.3213 6.2929 15.1519V14.4103C5.26513 13.736 4.41298 12.8263 3.80717 11.7567C3.20136 10.6871 2.85937 9.48848 2.80957 8.26026C2.81002 7.1756 3.05511 6.10501 3.52659 5.12818C3.99806 4.15135 4.68378 3.29344 5.53271 2.6183C6.38164 1.94316 7.37191 1.46819 8.4298 1.22873C9.4877 0.98928 10.586 0.991511 11.6429 1.23526C12.6713 1.46117 13.6368 1.91246 14.4697 2.55661C15.3027 3.20076 15.9823 4.02171 16.4596 4.96026C17.223 6.59945 17.3686 8.45929 16.8694 10.1973C16.3702 11.9353 15.2599 13.4344 13.7429 14.4186V15.0436C13.7641 15.229 13.7461 15.4168 13.6901 15.5948C13.6341 15.7728 13.5414 15.937 13.4179 16.0769C13.2675 16.2107 13.0922 16.3134 12.902 16.3791C12.7118 16.4449 12.5105 16.4725 12.3096 16.4603ZM7.53457 15.2019C7.57624 15.2019 7.63457 15.2103 7.70957 15.2103H12.3096C12.3684 15.2115 12.4271 15.2059 12.4846 15.1936V14.0578C12.4847 13.9506 12.5124 13.8453 12.5649 13.7519C12.6175 13.6585 12.6931 13.5802 12.7846 13.5244C14.1296 12.7417 15.135 11.4862 15.6048 10.0027C16.0747 8.51911 15.9754 6.91375 15.3262 5.49943C14.9332 4.72743 14.3734 4.05251 13.6873 3.52356C13.0013 2.9946 12.2061 2.62486 11.3596 2.4411C10.4778 2.24003 9.56198 2.24051 8.6804 2.44251C7.79882 2.64451 6.97418 3.04281 6.2679 3.60776C5.5715 4.16587 5.00982 4.87375 4.62461 5.67878C4.23941 6.48382 4.04058 7.36532 4.0429 8.25776C4.09807 9.33118 4.41752 10.3743 4.97286 11.2946C5.52821 12.2148 6.30226 12.9837 7.22624 13.5328C7.31821 13.588 7.39424 13.6662 7.44684 13.7597C7.49943 13.8532 7.5268 13.9588 7.52624 14.0661V15.1911C7.53457 15.1936 7.53457 15.1936 7.53457 15.2019Z"
-          fill="white"
-          stroke="white"
+          fill={color}
+          stroke={color}
           stroke-width="0.4"
         />
         <path
           d="M12.9178 18.9614C12.8586 18.9613 12.7997 18.9529 12.7428 18.9364C10.9487 18.4198 9.04522 18.4198 7.25112 18.9364C7.09092 18.9803 6.91992 18.9594 6.77496 18.8783C6.63 18.7973 6.52268 18.6625 6.47612 18.5031C6.45352 18.4238 6.44681 18.3407 6.45637 18.2588C6.46594 18.1769 6.49158 18.0976 6.53184 18.0256C6.5721 17.9536 6.62619 17.8903 6.69098 17.8392C6.75578 17.7882 6.83002 17.7504 6.90945 17.7281C8.92763 17.1531 11.0663 17.1531 13.0844 17.7281C13.2445 17.7737 13.3799 17.8809 13.4612 18.0261C13.5424 18.1714 13.5627 18.3429 13.5178 18.5031C13.4832 18.6355 13.4054 18.7525 13.2967 18.8355C13.1879 18.9186 13.0546 18.9629 12.9178 18.9614Z"
-          fill="white"
-          stroke="white"
+          fill={color}
+          stroke={color}
           stroke-width="0.4"
         />
         <path
           d="M11.774 7.21543C11.8342 7.56943 11.784 7.93337 11.6304 8.25791C11.4767 8.58245 11.2268 8.85188 10.9148 9.02959C10.4631 9.32709 10.3648 9.50959 10.344 9.57209C10.3196 9.64324 10.2737 9.705 10.2126 9.74889C10.1515 9.79279 10.0783 9.81661 10.0031 9.81705C9.96395 9.81763 9.925 9.81118 9.88813 9.79792C9.79778 9.76736 9.72325 9.70222 9.68091 9.61675C9.63857 9.53129 9.63188 9.43249 9.6623 9.34209C9.83981 8.9528 10.1402 8.63253 10.5173 8.43043C10.7126 8.33072 10.871 8.17136 10.9696 7.97552C11.0682 7.77967 11.1018 7.55751 11.0656 7.34126C11.0104 7.08191 10.8619 6.85181 10.6484 6.69459C10.4349 6.53737 10.1711 6.46395 9.90705 6.48819C9.64299 6.51243 9.39701 6.63266 9.21567 6.82612C9.03434 7.01959 8.93025 7.27283 8.92314 7.53789C8.92314 7.63337 8.88521 7.725 8.8177 7.79251C8.75019 7.86003 8.65861 7.8979 8.56313 7.8979C8.46765 7.8979 8.37608 7.86003 8.30856 7.79251C8.24105 7.725 8.20313 7.63337 8.20312 7.53789C8.20355 7.27426 8.2618 7.01394 8.37377 6.77526C8.48574 6.53658 8.6487 6.32532 8.85117 6.15647C9.05363 5.98761 9.29066 5.86527 9.54557 5.79799C9.80047 5.7307 10.067 5.72014 10.3265 5.76706C10.6858 5.8341 11.0163 6.00832 11.2747 6.26684C11.5331 6.52536 11.7071 6.85609 11.774 7.21543ZM10.4963 11.348C10.4963 11.4429 10.4682 11.5357 10.4154 11.6146C10.3627 11.6935 10.2877 11.7551 10.2 11.7914C10.1123 11.8277 10.0158 11.8373 9.92269 11.8188C9.82958 11.8003 9.74405 11.7545 9.67692 11.6873C9.60979 11.6202 9.56409 11.5347 9.54557 11.4416C9.52705 11.3485 9.53655 11.252 9.57288 11.1643C9.60921 11.0766 9.67072 11.0016 9.74965 10.9488C9.82859 10.8961 9.92139 10.8679 10.0163 10.8679C10.1436 10.8682 10.2655 10.9189 10.3555 11.0088C10.4455 11.0988 10.4961 11.2208 10.4963 11.348Z"
-          fill="white"
-          stroke="white"
+          fill={color}
+          stroke={color}
           stroke-width="0.8"
         />
       </g>
@@ -39,7 +35,7 @@ const QuizIcon = ({ size = 16 }) => {
           <rect
             width="20"
             height="20"
-            fill="white"
+            fill={color}
             transform="translate(0.000976562)"
           />
         </clipPath>

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

@@ -15,6 +15,7 @@ export interface AppHeaderProps {
   collapsed: boolean;
   institutionsData?: any[];
   profileSx?: any;
+  onLogoutClick?: any;
   showActiveDevices?: boolean;
 }
 
@@ -22,6 +23,7 @@ export const AppHeader = ({
   actions = [],
   profileSx = {},
   clientLogoUrl,
+  onLogoutClick,
   designation = '',
   clientName,
   userFullName,
@@ -69,6 +71,7 @@ export const AppHeader = ({
           profileSx={profileSx}
           designation={designation}
           showActiveDevices={showActiveDevices}
+          onLogoutClick={onLogoutClick}
         />
       </Stack>
     </StyledHeader>

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

@@ -1,6 +1,5 @@
 import { Avatar, Box, Stack, Typography, useTheme } from '@mui/material';
 import { ReactNode } from 'react';
-import logout from '../../../../utils/logout';
 import DialogButton from '../../../Navigation/DialogButton/DialogButton';
 import { DropdownMenu } from '../../../Navigation/DropDownMenu/DropDownMenu';
 import { DropdownMenuItem } from '../../../Navigation/DropDownMenu/DropdownMenuItem';
@@ -18,6 +17,7 @@ const getStartingLetters = (text: string) => {
 
 export default function UserBox({
   fullName,
+  onLogoutClick,
   designation = '',
   actions,
   profileUrl,
@@ -35,7 +35,7 @@ export default function UserBox({
     icon?: ReactNode;
     onClick: any;
   }[];
-
+  onLogoutClick?: any;
   profileUrl?: string;
   profileSx?: any;
   avatar?: boolean; // Define avatar as optional
@@ -137,7 +137,7 @@ export default function UserBox({
                 />
               </Stack>
             }
-            onClick={logout}
+            onClick={onLogoutClick}
           />,
         ]}
       />

package/src/components/Navigation/Sidebar/styles.tsx

@@ -35,6 +35,7 @@ export const createSidebarStyles = (collapsed: boolean) => {
     borderRadius: '8px',
     backgroundColor: theme.palette.surface.paperBackground,
     overflowY: 'auto',
+    overflowX: 'hidden',
     '&::-webkit-scrollbar': {
       width: '0.3em',
       height: '0.2em',

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

@@ -1,72 +0,0 @@
-// HeaderActions.tsx
-
-import { Divider, Stack } from '@mui/material';
-import { ReactNode } from 'react';
-import CogWheelMenu from './CogWheelMenu';
-import UserBox from './UserBox';
-
-export interface HeaderActionsProps {
-  cogWheelMenu: ReactNode[];
-  fullName?: string;
-  designation?: string;
-  userBoxActions?: {
-    label: ReactNode;
-    icon?: ReactNode;
-    onClick: any;
-  }[];
-  profileUrl?: string;
-  actions?: ReactNode[];
-  profileSx?: any;
-  avatar?: any;
-  navigationIcon: any;
-  showActiveDevices: any;
-}
-
-const HeaderActions = ({
-  cogWheelMenu,
-  fullName,
-  designation,
-  userBoxActions = [],
-  profileUrl = '',
-  actions = [],
-  profileSx = {},
-  avatar = {},
-  navigationIcon = {},
-  showActiveDevices = {},
-}: HeaderActionsProps) => {
-  return (
-    <Stack direction="row" gap={1} alignItems="center">
-      {/* Render other actions */}
-      {actions.map((action, index) => (
-        <>
-          {action}
-          <Divider
-            orientation="vertical"
-            variant="middle"
-            flexItem
-            sx={{ height: '20px' }}
-          />
-        </>
-      ))}
-
-      {/* Render cogWheelMenu if provided */}
-      {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
-
-      {/* Render UserBox */}
-      {fullName && (
-        <UserBox
-          fullName={fullName}
-          designation={designation}
-          actions={userBoxActions}
-          profileUrl={profileUrl}
-          profileSx={profileSx}
-          avatar={avatar}
-          navigationIcon={navigationIcon}
-          showActiveDevices={showActiveDevices}
-        />
-      )}
-    </Stack>
-  );
-};
-
-export default HeaderActions;