@campxdev/react-blueprint 0.1.27 → 0.1.29

package/src/themes/darkTheme.ts

@@ -1,20 +1,12 @@
 import { createTheme } from "@mui/material/styles";
-import { DarkColorTokens } from "./colorTokens";
-import { getCommonTheme, Theme } from "./commonTheme";
+
+import { DarkColorTokens } from "./colorTokens/darkColorTokens";
+import { Theme, getCommonTheme } from "./commonTheme";
 
 export const darkTheme = createTheme({
   palette: {
     mode: "dark",
-    primary: DarkColorTokens.primary,
-    secondary: DarkColorTokens.secondary,
-    background: DarkColorTokens.background,
-    text: DarkColorTokens.text,
-    highlight: DarkColorTokens.highlight,
-    grey: DarkColorTokens.grey,
-    info: DarkColorTokens.info,
-    // defaultProfileIcon: {
-    //   main: "#293640", // Default profile images and icons color for dark mode
-    // },
+    ...DarkColorTokens,
   },
   ...getCommonTheme(Theme.DARK),
 });

package/src/themes/lightTheme.ts

@@ -1,20 +1,11 @@
 import { createTheme } from "@mui/material/styles";
-import { LightColorTokens } from "./colorTokens";
+import { LightColorTokens } from "./colorTokens/lightColorTokens";
 import { Theme, getCommonTheme } from "./commonTheme";
 
 export const lightTheme = createTheme({
   palette: {
     mode: "light",
-    primary: LightColorTokens.primary,
-    secondary: LightColorTokens.secondary,
-    background: LightColorTokens.background,
-    text: LightColorTokens.text,
-    highlight: LightColorTokens.highlight,
-    grey: LightColorTokens.grey,
-    info: LightColorTokens.info,
-    // defaultProfileIcon: {
-    //   main: "#BDD6E8", // Default profile images and icons color
-    // },
+    ...LightColorTokens,
   },
   ...getCommonTheme(Theme.LIGHT),
 });

package/types/theme.d.ts

@@ -14,25 +14,35 @@ declare module "@mui/material/styles" {
         light: string;
         dark: string;
       };
+      tertiary: {
+        main: string;
+      };
       text: {
         primary: string;
         secondary: string;
+        tertiary: string;
       };
-      background: {
-        paper: string;
-        default: string;
-      };
-      highlight: {
-        main: string;
+      surface: {
+        defaultBackground: string;
+        paperBackground: string;
+        grey: string;
       };
-      info: {
+      border: {
         main: string;
       };
-      grey: {
-        main: string;
-      };
-      info: {
-        main: string;
+      highlight: {
+        highlightGreen: string;
+        highlightOrange: string;
+        highlightBlue: string;
+        highlightRed: string;
+        highlightPink: string;
+        highlightYellow: string;
+        greenBackground: string;
+        orangeBackground: string;
+        blueBackground: string;
+        redBackground: string;
+        pinkBackground: string;
+        yellowBackground: string;
       };
     };
   }

package/src/components/Icons/Icons.tsx

@@ -1,14 +0,0 @@
-import { Stack } from "@mui/material";
-import { Icons } from "./export";
-
-export const IconsStory = () => {
-  return (
-    <Stack gap={2} direction={"row"}>
-      {Object.values(Icons).map((Icon) => (
-        <Icon />
-      ))}
-    </Stack>
-  );
-};
-
-export default IconsStory;

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

@@ -1,207 +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",
-    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,71 +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;
-}
-
-export const AppHeader = ({
-  actions = [],
-  appsMenu,
-  clientLogo,
-  designation,
-  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 ?? ""}
-              designation={designation}
-              userBoxActions={userBoxActions}
-              profileUrl={profileUrl ?? ""}
-              actions={actions}
-              profileSx={profileSx}
-            />
-          )}
-        </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",
-  },
-};