@campxdev/react-blueprint 0.1.28 → 0.1.30

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

@@ -1,210 +0,0 @@
-import { IconButton } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-import { DropdownMenuItem } from "../../Navigation/DropDownMenu/DropdownMenuItem";
-import { Icons } from "../../export";
-import { AppHeader, AppHeaderProps } from "./AppHeader";
-import { AppsMenu } from "./AppsMenu";
-import HelpButton from "../../Input/HelpButton/HelpButton";
-
-// 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.",
-    },
-    designation: {
-      control: "text",
-      description: "The Designation 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",
-    designation: "Head of the Department",
-    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") },
-    ],
-  },
-};
-
-// Story with no apps menu
-export const WithNoAppsMenu: Story = {
-  render: (args: AppHeaderProps) => <AppHeader {...args} />,
-  args: {
-    clientLogo: "https://via.placeholder.com/150",
-    fullName: "John Doe",
-    designation: "Head of the Department",
-    appsMenu: <AppsMenu apps={[]} />,
-    userBoxActions: [
-      { label: "Action 1", onClick: () => alert("Action 1 clicked") },
-      { label: "Action 2", onClick: () => alert("Action 2 clicked") },
-    ],
-  },
-};
-
-// Story with actions
-export const WithActions: Story = {
-  render: (args: AppHeaderProps) => <AppHeader {...args} />,
-  args: {
-    clientLogo: "https://via.placeholder.com/150",
-    fullName: "John Doe",
-    designation: "Head of the Department",
-    avatar:false,
-    navigationIcon:false,
-    showActiveDevices:false,
-    appsMenu: (
-      <AppsMenu
-        apps={[
-          "exams",
-          "square",
-          "admin",
-          "enroll",
-          "payments",
-          "hrms",
-          "hostels",
-          "commute_x",
-        ]}
-      />
-    ),
-    actions: [
-      <IconButton>
-        <Icons.CareerIcon />
-      </IconButton>,
-      <IconButton>
-        <Icons.ExamResultIcon />
-      </IconButton>,
-      <HelpButton />,
-    ],
-    userBoxActions: [
-      { label: "Action 1", onClick: () => alert("Action 1 clicked") },
-      { label: "Action 2", onClick: () => alert("Action 2 clicked") },
-    ],
-  },
-};
-
-export const WithCustomHeaderActions: Story = {
-  render: (args: AppHeaderProps) => <AppHeader {...args} />,
-  args: {
-    clientLogo: "https://via.placeholder.com/150",
-    fullName: "John Doe",
-    designation: "Head of the Department",
-    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") },
-    ],
-  },
-};
-
-// Story with clog wheel actions
-export const WithClogWheel: Story = {
-  render: (args: AppHeaderProps) => <AppHeader {...args} />,
-  args: {
-    clientLogo: "https://via.placeholder.com/150",
-    fullName: "John Doe",
-    designation: "Head of the Department",
-    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: [
-      <DropdownMenuItem
-        label={"Student Payments"}
-        onClick={() => {
-          window.open("/payment", "_blank");
-        }}
-      />,
-    ],
-    // headerSx: {
-    //   position: "relative",
-    // },
-  },
-};

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

@@ -1,81 +0,0 @@
-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;
-  designation?: string;
-  profileUrl?: string;
-  userBoxActions?: {
-    label: ReactNode;
-    icon?: ReactNode;
-    onClick: any;
-  }[];
-  containerSx?: any;
-  imageSx?: any;
-  headerSx?: any;
-  profileSx?: any;
-  avatar?: any;
-  navigationIcon:any;
-  showActiveDevices: any;
-}
-
-export const AppHeader = ({
-  actions = [],
-  appsMenu,
-  clientLogo,
-  designation,
-  cogWheelMenu = [],
-  customHeaderActions,
-  fullName,
-  profileUrl,
-  userBoxActions = [],
-  containerSx = {},
-  headerSx = {},
-  profileSx = {},
-  imageSx = {},
-  avatar={},
-  navigationIcon={},
-  showActiveDevices={},
-}: 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 ?? ""}
-  designation={designation}
-  userBoxActions={userBoxActions}
-  profileUrl={profileUrl ?? ""}
-  actions={actions}
-  profileSx={profileSx}
-  avatar={avatar}
-  navigationIcon={navigationIcon}
-  showActiveDevices={showActiveDevices}
-/>
-
-          )}
-        </StyledActionBox>
-      </StyledContainer>
-    </StyledHeader>
-  );
-};

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

@@ -1,51 +0,0 @@
-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;
-}
-
-export 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>
-  );
-};

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

@@ -1,69 +0,0 @@
-import { Avatar, Box, Typography, styled } from "@mui/material";
-import { Link } from "react-router-dom";
-
-export const StyledContainer = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  height: "60px",
-  margin: "auto",
-  width: "90%",
-}));
-
-export const StyledHeader = styled("header")(({ theme }) => ({
-  width: "100%",
-  position: "fixed",
-  top: 0,
-  left: 0,
-  backgroundColor: theme.palette.background.paper,
-}));
-
-export const StyledActionBox = styled(Box)(({ theme }) => ({
-  marginRight: "20px",
-  display: "flex",
-  alignItems: "center",
-  gap: "14px",
-}));
-
-export const StyledRouterLink = styled(Link)(() => ({
-  textDecoration: "none",
-}));
-
-export const StyledLogosWrapper = styled(Box)(() => ({
-  display: "flex",
-  alignItems: "center",
-  gap: "10px",
-  padding: "10px",
-  transition: "background ease 0.3s",
-  borderRadius: "5px",
-  "&:hover": {
-    background: "rgba(0, 0, 0, 0.05)",
-  },
-}));
-
-export const StyledImageWrapper = styled(Box)(() => ({
-  width: "auto",
-  height: "22px",
-  display: "flex",
-  img: {
-    width: "100%",
-    height: "25px",
-    objectFit: "contain",
-  },
-}));
-
-export const StyledAvatar = styled(Avatar)(({ theme }) => ({
-  background: theme.palette.background.default,
-  cursor: "pointer",
-  height: "42px",
-  width: "42px",
-  border: `1px solid ${theme.palette.primary.main}`,
-  fontSize: "1rem",
-  fontWeight: "600",
-  color: theme.palette.primary.main,
-}));
-
-export const StyledTypography = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.secondary,
-}));

package/src/themes/colorTokens.ts

@@ -1,77 +0,0 @@
-export const LightColorTokens = {
-  primary: {
-    main: "#323167",
-    light: "#5C5E8C",
-    dark: "#1F1E4A",
-  },
-  secondary: {
-    main: "#E0E0E7",
-    light: "#F0F0F5",
-    dark: "#CBCBD9",
-  },
-  background: {
-    default: "#F7F8FA",
-    paper: "#FFFFFF",
-  },
-  text: {
-    primary: "#121212",
-    secondary: "#595959",
-  },
-  success: {
-    main: "#88B053",
-  },
-  error: {
-    main: "#F2353C",
-  },
-  warning: {
-    main: "#ED9035",
-  },
-  info: {
-    main: "#4BAABE",
-  },
-  highlight: {
-    main: "#D4483E",
-  },
-  grey: {
-    main: "#F2F2F2",
-  },
-};
-
-export const DarkColorTokens = {
-  primary: {
-    main: "#9FA8DA",
-    light: "#C5CAE9",
-    dark: "#5C6BC0",
-  },
-  secondary: {
-    main: "#2F3151",
-    light: "#4B4D72",
-    dark: "#1C1D2F",
-  },
-  background: {
-    default: "#1D2127",
-    paper: "#161A1D",
-  },
-  text: {
-    primary: "#FFFFFF",
-    secondary: "#B9BBBB",
-  },
-  success: {
-    main: "#88B053",
-  },
-  error: {
-    main: "#F2353C",
-  },
-  warning: {
-    main: "#ED9035",
-  },
-  info: {
-    main: "#4BAABE",
-  },
-  highlight: {
-    main: "#D4483E",
-  },
-  grey: {
-    main: "#293640",
-  },
-};