@campxdev/react-blueprint 0.1.26 → 0.1.28

package/.storybook/main.ts

@@ -12,6 +12,7 @@ const config: StorybookConfig = {
     "@storybook/addon-interactions",
     "@storybook/addon-mdx-gfm",
     "storybook-dark-mode",
+    "@storybook/addon-designs",
   ],
 
   framework: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -10,6 +10,7 @@
     "@mui/material": "^5.14.11",
     "@mui/x-data-grid": "^7.5.1",
     "@storybook/addon-backgrounds": "^8.1.5",
+    "@storybook/addon-designs": "^8.0.2",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",

package/src/App.tsx

@@ -10,8 +10,7 @@ function App() {
         appsMenu={<AppsMenu apps={[]} />}
         clientLogo={""}
         fullName={""}
-        userBoxActions={[]}
-      />
+        userBoxActions={[]} navigationIcon={true} showActiveDevices={true}      />
     </Providers>
   );
 }

package/src/components/DataDisplay/export.ts

@@ -0,0 +1 @@
+export * from ".//DataTable/DataTable";

package/src/components/Input/Button/Button.stories.tsx

@@ -10,6 +10,12 @@ export default {
   title: "Input/Button",
   component: Button,
   tags: ["autodocs"],
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/S5t9x8kNHEuzBGv6305qLf/Srikanth-PlayGround?node-id=2-20", // Replace with your actual Figma link
+    },
+  },
   argTypes: {
     variant: {
       control: "select",

package/src/components/Input/export.ts

@@ -0,0 +1,5 @@
+export * from "./Button/Button";
+export * from "./SearchBar/SearchBar";
+export * from "./SingleSelect/SingleSelect";
+export * from "./Switch/Switch";
+export * from "./TextField/TextField";

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

@@ -109,6 +109,9 @@ export const WithActions: Story = {
     clientLogo: "https://via.placeholder.com/150",
     fullName: "John Doe",
     designation: "Head of the Department",
+    avatar:false,
+    navigationIcon:false,
+    showActiveDevices:false,
     appsMenu: (
       <AppsMenu
         apps={[

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

@@ -26,6 +26,9 @@ export interface AppHeaderProps {
   imageSx?: any;
   headerSx?: any;
   profileSx?: any;
+  avatar?: any;
+  navigationIcon:any;
+  showActiveDevices: any;
 }
 
 export const AppHeader = ({
@@ -42,6 +45,9 @@ export const AppHeader = ({
   headerSx = {},
   profileSx = {},
   imageSx = {},
+  avatar={},
+  navigationIcon={},
+  showActiveDevices={},
 }: AppHeaderProps) => {
   return (
     <StyledHeader sx={headerSx}>
@@ -55,14 +61,18 @@ export const AppHeader = ({
             customHeaderActions
           ) : (
             <HeaderActions
-              cogWheelMenu={cogWheelMenu}
-              fullName={fullName ?? ""}
-              designation={designation}
-              userBoxActions={userBoxActions}
-              profileUrl={profileUrl ?? ""}
-              actions={actions}
-              profileSx={profileSx}
-            />
+  cogWheelMenu={cogWheelMenu}
+  fullName={fullName ?? ""}
+  designation={designation}
+  userBoxActions={userBoxActions}
+  profileUrl={profileUrl ?? ""}
+  actions={actions}
+  profileSx={profileSx}
+  avatar={avatar}
+  navigationIcon={navigationIcon}
+  showActiveDevices={showActiveDevices}
+/>
+
           )}
         </StyledActionBox>
       </StyledContainer>

package/src/components/Layout/Header/HeaderActions/HeaderActions.tsx

@@ -1,3 +1,5 @@
+// HeaderActions.tsx
+
 import { Divider, Stack } from "@mui/material";
 import { ReactNode } from "react";
 import CogWheelMenu from "./CogWheelMenu";
@@ -5,26 +7,32 @@ import UserBox from "./UserBox";
 
 export interface HeaderActionsProps {
   cogWheelMenu: ReactNode[];
-  fullName: string;
+  fullName?: string;
   designation?: string;
-  userBoxActions: {
+  userBoxActions?: {
     label: ReactNode;
     icon?: ReactNode;
     onClick: any;
   }[];
-  profileUrl: string | undefined;
+  profileUrl?: string;
   actions?: ReactNode[];
-  profileSx?: any; // Making HelpButton prop optional
+  profileSx?: any;
+  avatar?: any;
+  navigationIcon:any;
+  showActiveDevices: any;
 }
 
 const HeaderActions = ({
   cogWheelMenu,
   fullName,
   designation,
-  userBoxActions,
+  userBoxActions = [],
   profileUrl = "",
   actions = [],
   profileSx = {},
+  avatar={},
+  navigationIcon={},
+  showActiveDevices={},
 }: HeaderActionsProps) => {
   return (
     <Stack direction="row" gap={1} alignItems="center">
@@ -45,13 +53,19 @@ const HeaderActions = ({
       {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
 
       {/* Render UserBox */}
-      <UserBox
-        fullName={fullName}
-        designation={designation}
-        actions={userBoxActions}
-        profileUrl={profileUrl}
-        profileSx={profileSx}
-      />
+      {fullName && (
+  <UserBox
+    fullName={fullName}
+    designation={designation}
+    actions={userBoxActions}
+    profileUrl={profileUrl}
+    profileSx={profileSx}
+    avatar={avatar}
+    navigationIcon={navigationIcon}
+    showActiveDevices={showActiveDevices}
+  />
+)}
+
     </Stack>
   );
 };

package/src/components/Layout/Header/HeaderActions/UserBox.tsx

@@ -4,20 +4,6 @@ import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
 import { DropdownMenuItem } from "../../../Navigation/DropDownMenu/DropdownMenuItem";
 import { Icons } from "../../../export";
 import { StyledAvatar, StyledTypography } from "../styles/styles";
-// import {
-//   activeDevices,
-//   changePassword,
-//   logoutIcon,
-//   profile,
-// } from '../../../../assets/images'
-
-// import logout from '../../../../utils/logout'
-// import ActiveDevices from '../../../ActiveDevices'
-// import ChangePassword from '../../../ChangePassword'
-// import DropDownButton from '../../../DropDownButton/DropDownButton'
-// import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
-// import MyProfile from '../../../MyProfile/MyProfile'
-// import { StyledAvatar } from '../styles'
 
 const getStartingLetters = (text: string) => {
   if (!text) return "";
@@ -33,6 +19,9 @@ export default function UserBox({
   actions,
   profileUrl,
   profileSx = {},
+  avatar = true, // Make avatar optional, default to true
+  navigationIcon = true, // Make navigationIcon optional, default to true
+  showActiveDevices = true, // Make active devices optional, default to true
 }: {
   fullName: string;
   designation?: string;
@@ -44,6 +33,9 @@ export default function UserBox({
 
   profileUrl?: string;
   profileSx?: any;
+  avatar?: boolean; // Define avatar as optional
+  navigationIcon?: boolean; // Define navigationIcon as optional
+  showActiveDevices?: boolean; // Define active devices as optional
 }) {
   const theme = useTheme();
 
@@ -70,31 +62,35 @@ export default function UserBox({
                 alignItems={"center"}
                 justifyContent={"space-between"}
               >
-                <Stack direction={"row"} gap={1}>
-                  <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
-                    {getStartingLetters(fullName)}
-                  </StyledAvatar>
-                  <Stack direction={"row"} justifyContent={"space-between"}>
-                    <Stack>
-                      <Typography variant="subtitle3">{fullName}</Typography>
-                      <Typography variant="caption">{designation}</Typography>
+                {avatar && (
+                  <Stack direction={"row"} gap={1}>
+                    <StyledAvatar src={profileUrl ?? ""} sx={profileSx}>
+                      {getStartingLetters(fullName)}
+                    </StyledAvatar>
+                    <Stack direction={"row"} justifyContent={"space-between"}>
+                      <Stack>
+                        <Typography variant="subtitle3">{fullName}</Typography>
+                        <Typography variant="caption">{designation}</Typography>
+                      </Stack>
                     </Stack>
                   </Stack>
-                </Stack>
-                <Icons.NavigationIcon />
+                )}
+                {navigationIcon && <Icons.NavigationIcon />}
               </Stack>
             </Stack>
           }
           onClick={() => alert("Action 1 clicked")}
         />,
-        <DropdownMenuItem
-          label={
-            <Stack gap={0.5}>
-              <Typography variant="subtitle3">Active Devices</Typography>
-            </Stack>
-          }
-          onClick={() => alert("Action 1 clicked")}
-        />,
+        showActiveDevices && (
+          <DropdownMenuItem
+            label={
+              <Stack gap={0.5}>
+                <Typography variant="subtitle3">Active Devices</Typography>
+              </Stack>
+            }
+            onClick={() => alert("Action 1 clicked")}
+          />
+        ),
         <DropdownMenuItem
           label={
             <Stack
@@ -104,7 +100,6 @@ export default function UserBox({
               width={"100%"}
             >
               <Typography variant="subtitle3">Logout</Typography>
-
               <Icons.LogoutIcon hoverColor={theme.palette.highlight.main} />
             </Stack>
           }

package/src/components/export.ts

@@ -1,8 +1,6 @@
+export * from "./DataDisplay/export";
 export * from "./Icons/export";
-export * from "./Input/Button/Button";
-export * from "./Input/SingleSelect/SingleSelect";
-export * from "./Input/Switch/Switch";
-export * from "./Input/TextField/TextField";
+export * from "./Input/export";
 export * from "./Layout/Header/AppHeader";
 export * from "./Layout/Header/AppLogo";
 export * from "./Layout/Header/AppsMenu";