@campxdev/react-blueprint 0.1.0

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

@@ -0,0 +1,209 @@
+import { IconButton } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { CareerIcon, ExamResultIcon } from "../../../assets/images/icons";
+import MenuItemButton from "../../DropDownMenu/MenuItemButton";
+import AppHeader, { AppHeaderProps } from "./AppHeader";
+import AppsMenu from "./AppsMenu";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof AppHeader> = {
+  title: "Layout/AppHeader",
+  component: AppHeader,
+  tags: ["autodocs"],
+  argTypes: {
+    clientLogo: {
+      control: "text",
+      description: "The logo of the client.",
+    },
+    fullName: {
+      control: "text",
+      description: "The full name of the user.",
+    },
+    profileUrl: {
+      control: "text",
+      description: "The URL of the user's profile photo.",
+    },
+    userBoxActions: {
+      control: "object",
+      description: "Actions for the user box.",
+    },
+    actions: {
+      control: "object",
+      description: "Custom actions to be displayed.",
+    },
+
+    containerSx: {
+      control: "object",
+      description: "Styles applied to the container.",
+    },
+    imageSx: {
+      control: "object",
+      description: "Styles applied to the client logo image.",
+    },
+    profileSx: {
+      control: "object",
+      description: "Styles applied to the profile section.",
+    },
+    headerSx: {
+      control: "object",
+      description: "Styles applied to the profile section.",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppHeader>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: AppHeaderProps) => <AppHeader {...args} />,
+  args: {
+    clientLogo: "https://via.placeholder.com/150",
+    fullName: "John Doe",
+    appsMenu: (
+      <AppsMenu
+        apps={[
+          "exams",
+          "square",
+          "admin",
+          "enroll",
+          "payments",
+          "hrms",
+          "hostels",
+          "commute_x",
+        ]}
+      />
+    ),
+    userBoxActions: [
+      { label: "Action 1", onClick: () => alert("Action 1 clicked") },
+      { label: "Action 2", onClick: () => alert("Action 2 clicked") },
+    ],
+    headerSx: {
+      position: "relative",
+    },
+  },
+};
+
+// Story with no apps menu
+export const WithNoAppsMenu: Story = {
+  render: (args: AppHeaderProps) => <AppHeader {...args} />,
+  args: {
+    clientLogo: "https://via.placeholder.com/150",
+    fullName: "John Doe",
+    appsMenu: <AppsMenu apps={[]} />,
+    userBoxActions: [
+      { label: "Action 1", onClick: () => alert("Action 1 clicked") },
+      { label: "Action 2", onClick: () => alert("Action 2 clicked") },
+    ],
+    headerSx: {
+      position: "relative",
+    },
+  },
+};
+
+// Story with actions
+export const WithActions: Story = {
+  render: (args: AppHeaderProps) => <AppHeader {...args} />,
+  args: {
+    clientLogo: "https://via.placeholder.com/150",
+    fullName: "John Doe",
+    appsMenu: (
+      <AppsMenu
+        apps={[
+          "exams",
+          "square",
+          "admin",
+          "enroll",
+          "payments",
+          "hrms",
+          "hostels",
+          "commute_x",
+        ]}
+      />
+    ),
+    actions: [
+      <IconButton>
+        <CareerIcon />
+      </IconButton>,
+      <IconButton>
+        <ExamResultIcon />
+      </IconButton>,
+    ],
+    userBoxActions: [
+      { label: "Action 1", onClick: () => alert("Action 1 clicked") },
+      { label: "Action 2", onClick: () => alert("Action 2 clicked") },
+    ],
+    headerSx: {
+      position: "relative",
+    },
+  },
+};
+
+// Story with custom header actions
+export const WithCustomHeaderActions: Story = {
+  render: (args: AppHeaderProps) => <AppHeader {...args} />,
+  args: {
+    clientLogo: "https://via.placeholder.com/150",
+    fullName: "John Doe",
+    appsMenu: (
+      <AppsMenu
+        apps={[
+          "exams",
+          "square",
+          "admin",
+          "enroll",
+          "payments",
+          "hrms",
+          "hostels",
+          "commute_x",
+        ]}
+      />
+    ),
+    customHeaderActions: <div>Custom Header Actions</div>,
+    userBoxActions: [
+      { label: "Action 1", onClick: () => alert("Action 1 clicked") },
+      { label: "Action 2", onClick: () => alert("Action 2 clicked") },
+    ],
+    headerSx: {
+      position: "relative",
+    },
+  },
+};
+
+// Story with clog wheel actions
+export const WithClogWheel: Story = {
+  render: (args: AppHeaderProps) => <AppHeader {...args} />,
+  args: {
+    clientLogo: "https://via.placeholder.com/150",
+    fullName: "John Doe",
+    appsMenu: (
+      <AppsMenu
+        apps={[
+          "exams",
+          "square",
+          "admin",
+          "enroll",
+          "payments",
+          "hrms",
+          "hostels",
+          "commute_x",
+        ]}
+      />
+    ),
+    userBoxActions: [
+      { label: "Action 1", onClick: () => alert("Action 1 clicked") },
+      { label: "Action 2", onClick: () => alert("Action 2 clicked") },
+    ],
+    cogWheelMenu: [
+      <MenuItemButton
+        label={"Student Payments"}
+        onClick={() => {
+          window.open("/payment", "_blank");
+        }}
+      />,
+    ],
+    // headerSx: {
+    //   position: "relative",
+    // },
+  },
+};

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

@@ -0,0 +1,70 @@
+import { Stack } from "@mui/material";
+import { ReactNode } from "react";
+import AppLogo from "./AppLogo";
+import HeaderActions from "./HeaderActions/HeaderActions";
+import {
+  StyledActionBox,
+  StyledContainer,
+  StyledHeader,
+} from "./styles/styles";
+
+export interface AppHeaderProps {
+  actions?: ReactNode[];
+  appsMenu: ReactNode;
+  clientLogo: string;
+  cogWheelMenu?: ReactNode[];
+  customHeaderActions?: ReactNode;
+  fullName: string;
+  profileUrl?: string;
+  userBoxActions: {
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: any;
+  }[];
+  containerSx?: any;
+  imageSx?: any;
+  headerSx?: any;
+  profileSx?: any;
+}
+
+const AppHeader = ({
+  actions = [],
+  appsMenu,
+  clientLogo,
+  cogWheelMenu = [],
+  customHeaderActions,
+  fullName,
+  profileUrl,
+  userBoxActions = [],
+  containerSx = {},
+  headerSx = {},
+  profileSx = {},
+  imageSx = {},
+}: AppHeaderProps) => {
+  return (
+    <StyledHeader sx={headerSx}>
+      <StyledContainer sx={containerSx}>
+        <Stack alignItems={"center"} gap={"10px"} flexDirection={"row"}>
+          {appsMenu}
+          <AppLogo clientLogo={clientLogo} imageSx={imageSx} />
+        </Stack>
+        <StyledActionBox>
+          {customHeaderActions ? (
+            customHeaderActions
+          ) : (
+            <HeaderActions
+              cogWheelMenu={cogWheelMenu}
+              fullName={fullName}
+              userBoxActions={userBoxActions}
+              profileUrl={profileUrl}
+              actions={actions}
+              profileSx={profileSx}
+            />
+          )}
+        </StyledActionBox>
+      </StyledContainer>
+    </StyledHeader>
+  );
+};
+
+export default AppHeader;

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

@@ -0,0 +1,53 @@
+import { Divider, Typography } from "@mui/material";
+import { applications } from "../../../utils/applications";
+import { isDevelopment } from "../../../utils/constants";
+import { imageMap } from "../../../utils/imageMap";
+import {
+  StyledImageWrapper,
+  StyledLogosWrapper,
+  StyledRouterLink,
+} from "./styles/styles";
+
+export interface AppLogoProps {
+  clientLogo: string;
+  imageSx?: any;
+}
+
+const AppLogo = ({ clientLogo, imageSx }: AppLogoProps) => {
+  const originSubdomain =
+    window.location.host.split(".")?.slice(-3)[0] ?? "ums";
+  const currentApp: string =
+    applications.find((item) => item.domainName === originSubdomain)
+      ?.domainName ?? "admin";
+
+  return (
+    <StyledRouterLink to={"/"}>
+      <StyledLogosWrapper>
+        <StyledImageWrapper sx={imageSx}>
+          <img src={imageMap[currentApp]} alt="logo" />
+        </StyledImageWrapper>
+        <Divider
+          orientation="vertical"
+          variant="middle"
+          flexItem
+          sx={{ height: "20px" }}
+        />
+        <StyledImageWrapper sx={{ height: "auto" }}>
+          {isDevelopment ? (
+            <Typography variant="subtitle1">Developer</Typography>
+          ) : (
+            <img
+              src={clientLogo}
+              onError={(e: any) => {
+                e.target.src = imageMap.campx;
+              }}
+              alt="campx"
+            />
+          )}
+        </StyledImageWrapper>
+      </StyledLogosWrapper>
+    </StyledRouterLink>
+  );
+};
+
+export default AppLogo;

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

@@ -0,0 +1,162 @@
+import AppsOutageIcon from "@mui/icons-material/AppsOutage";
+import { Box, IconButton, Link, Menu, Typography, styled } from "@mui/material";
+import { useState } from "react";
+import { AppsIcon } from "../../../assets/images/icons";
+import { applications } from "../../../utils/applications";
+import { institutionKey, urlTenantKey } from "../../../utils/constants";
+
+export const AppsMenu = ({ apps }: { apps: string[] }) => {
+  const [anchorEl, setAnchorEl] = useState<any>(null);
+  const open = Boolean(anchorEl);
+  const applicationList = applications?.filter((item) =>
+    apps.includes(item.key)
+  );
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <StyledIconButton onClick={handleClick}>
+        <AppsIcon />
+      </StyledIconButton>
+
+      <Menu
+        transitionDuration={150}
+        elevation={2}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "left",
+        }}
+        TransitionProps={{
+          unmountOnExit: false,
+        }}
+        sx={{
+          "& .MuiPaper-root": {
+            "&>:last-child": {
+              paddingBottom: "0px",
+            },
+          },
+        }}
+      >
+        {applicationList.length !== 0 ? (
+          <>
+            <Box sx={{ padding: "0.3rem 1rem" }}>
+              <Typography variant="body2">Switch to</Typography>
+            </Box>
+            <Box>
+              {applicationList.map((item, index) => {
+                return (
+                  <Link
+                    href={item.path + `/${urlTenantKey}/${institutionKey}`}
+                    key={index}
+                  >
+                    <StyledMenuItemContainer
+                      key={index}
+                      onClick={() => {
+                        window.location.href = item.path;
+                        handleClose();
+                      }}
+                    >
+                      <MenuItem item={item} />
+                    </StyledMenuItemContainer>
+                  </Link>
+                );
+              })}
+            </Box>
+          </>
+        ) : (
+          <StyledNoAppContainer>
+            <AppsOutageIcon sx={{ width: "40px", height: "40px" }} />
+            <Typography variant="body2">
+              No Application have been assigned
+            </Typography>
+          </StyledNoAppContainer>
+        )}
+      </Menu>
+    </>
+  );
+};
+
+const MenuItem = ({ item }: any) => {
+  return (
+    <StyledMenuItem>
+      <StyledImageBox>
+        <img
+          src={item.icon}
+          style={{ width: "20px", height: "20px" }}
+          alt="icon"
+        />
+      </StyledImageBox>
+      <Box>
+        <Typography variant="subtitle2">{item?.title}</Typography>
+        <Typography variant="caption">{item?.description}</Typography>
+      </Box>
+    </StyledMenuItem>
+  );
+};
+
+export default AppsMenu;
+
+export const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  padding: "18px",
+  backgroundColor: "black",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "0px",
+  height: "60px",
+  width: "60px",
+  border: `1px solid ${theme.palette.background.default}`,
+}));
+
+export const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
+  cursor: "pointer",
+  padding: "5px 0px",
+}));
+
+export const StyledMenuItem = styled(Box)({
+  height: "68px",
+  width: "380px",
+  padding: "40px 20px",
+  transition: "background ease 0.3s",
+  "&:hover": {
+    background: "rgba(0, 0, 0, 0.03)",
+  },
+  display: "flex",
+  alignItems: "center",
+  gap: "20px",
+});
+
+export const StyledImageBox = styled(Box)(() => ({
+  height: "40px",
+  width: "40px",
+  boxShadow: "0px 5px 5px 0px rgba(48, 62, 99,0.1) ",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "5px",
+}));
+
+export const StyledNoAppContainer = styled(Box)({
+  width: "300px",
+  height: "300px",
+  display: "flex",
+  alignItems: "center",
+  flexDirection: "column",
+  justifyContent: "center",
+  gap: "10px",
+});

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

@@ -0,0 +1,30 @@
+import { Divider, IconButton } from "@mui/material";
+import { ReactNode } from "react";
+import { ClogWheelIcon } from "../../../../assets/images/icons";
+import DropDownMenu from "../../../DropDownMenu/DropDownMenu";
+// import { clogWheel } from "../../../../assets/images";
+// import DropDownButton from "../../../DropDownButton/DropDownButton";
+
+const CogWheelMenu = ({ menu }: { menu: ReactNode[] }) => {
+  return (
+    <>
+      <Divider
+        orientation="vertical"
+        variant="middle"
+        flexItem
+        sx={{ height: "20px" }}
+      />
+
+      <DropDownMenu
+        anchor={({ open }) => (
+          <IconButton color="secondary" onClick={open}>
+            <ClogWheelIcon />
+          </IconButton>
+        )}
+        menu={menu}
+      />
+    </>
+  );
+};
+
+export default CogWheelMenu;

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

@@ -0,0 +1,63 @@
+import { Divider, IconButton, Stack } from "@mui/material";
+import { ReactNode } from "react";
+// import { IMenuItemProps } from '../../../DropDownButton/DropdownMenuItem'
+// import InstitutionsDropDown from '../../../Institutions/InstitutionsDropdown'
+import { HelpIcon } from "../../../../assets/images/icons";
+import CogWheelMenu from "./CogWheelMenu";
+import UserBox from "./UserBox";
+
+export interface HeaderActionsProps {
+  cogWheelMenu: ReactNode[];
+  fullName: string;
+  userBoxActions: {
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: any;
+  }[];
+  profileUrl: string | undefined;
+  actions?: ReactNode[];
+  profileSx?: any;
+}
+
+const HeaderActions = ({
+  cogWheelMenu,
+  fullName,
+  userBoxActions,
+  profileUrl = "",
+  actions = [],
+  profileSx = {},
+}: HeaderActionsProps) => {
+  return (
+    <Stack direction="row" gap={6}>
+      <Stack direction="row" gap={1}>
+        <IconButton
+          href={"https://campx.atlassian.net/servicedesk/customer/portal/2"}
+          target="_blank"
+        >
+          <HelpIcon />
+        </IconButton>
+
+        {actions.map((action, index) => (
+          <>
+            <Divider
+              orientation="vertical"
+              variant="middle"
+              flexItem
+              sx={{ height: "25px" }}
+            />
+            {action}
+          </>
+        ))}
+        {cogWheelMenu?.length ? <CogWheelMenu menu={cogWheelMenu} /> : null}
+        <UserBox
+          fullName={fullName}
+          actions={userBoxActions}
+          profileUrl={profileUrl}
+          profileSx={profileSx}
+        />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default HeaderActions;

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

@@ -0,0 +1,117 @@
+import { ReactNode } from "react";
+import DropDownMenu from "../../../DropDownMenu/DropDownMenu";
+import { StyledAvatar } 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 "";
+  return text
+    .split(" ")
+    ?.map((w) => w[0])
+    ?.join("");
+};
+
+export default function UserBox({
+  fullName,
+  actions,
+  profileUrl,
+  profileSx = {},
+}: {
+  fullName: string;
+  actions: {
+    label: ReactNode;
+    icon?: ReactNode;
+    onClick: any;
+  }[];
+
+  profileUrl?: string;
+  profileSx?: any;
+}) {
+  return (
+    <DropDownMenu
+      anchor={({ open }) => (
+        <StyledAvatar src={profileUrl ?? ""} onClick={open} sx={profileSx}>
+          {getStartingLetters(fullName)}
+        </StyledAvatar>
+      )}
+      menu={[]} // menu={
+      //   customActions?.length
+      //     ? customActions
+      //     : [
+      //         ...actions,
+      //         {
+      //           label: "My Profile",
+      //           actionType: "dialog",
+      //           icon: (
+      //             <img style={{ marginRight: "10px" }} src={profile.default} />
+      //           ),
+      //           content: ({ close }) => <MyProfile close={close} />,
+      //           dialogProps: {
+      //             maxWidth: "xl",
+      //             PaperProps: {
+      //               sx: {
+      //                 padding: 0,
+      //               },
+      //             },
+      //           },
+      //         },
+      //         {
+      //           label: "Active Devices",
+      //           actionType: "dialog",
+      //           icon: (
+      //             <img
+      //               style={{ marginRight: "10px" }}
+      //               src={activeDevices.default}
+      //             />
+      //           ),
+      //           content: ({ close }) => <ActiveDevices close={close} />,
+      //           contentTitle: "Active Devices",
+      //           dialogProps: {
+      //             maxWidth: "lg",
+      //             PaperProps: {
+      //               sx: {
+      //                 padding: 0,
+      //               },
+      //             },
+      //           },
+      //         },
+      //         {
+      //           label: "Change Password",
+      //           actionType: "dialog",
+      //           icon: (
+      //             <img
+      //               style={{ marginRight: "10px" }}
+      //               src={changePassword.default}
+      //             />
+      //           ),
+      //           content: ({ close }) => <ChangePassword close={close} />,
+      //           contentTitle: "Change Password",
+      //         },
+      //         {
+      //           label: "Logout",
+      //           icon: (
+      //             <img
+      //               style={{ marginRight: "10px" }}
+      //               src={logoutIcon.default}
+      //             />
+      //           ),
+      //           onClick: logout,
+      //         },
+      //       ]
+      // }
+    />
+  );
+}