@campxdev/react-blueprint 0.1.28 → 0.1.29

package/src/{components/Input/OtpInput → stories/Input}/OtpInput.stories.tsx

@@ -1,6 +1,7 @@
-import React from "react";
 import { Meta } from "@storybook/react";
-import OtpInput, { OtpInputProps } from "./OtpInput";
+import OtpInput, {
+  OtpInputProps,
+} from "../../components/Input/OtpInput/OtpInput";
 
 export default {
   title: "Input/OtpInput",

package/src/{components/Input/RadioGroup → stories/Input}/RadioGroup.stories.tsx

@@ -1,7 +1,10 @@
 // Import React and other necessary elements
 
 import { Meta } from "@storybook/react";
-import { RadioGroup, RadioGroupProps } from "./RadioGroup";
+import {
+  RadioGroup,
+  RadioGroupProps,
+} from "../../components/Input/RadioGroup/RadioGroup";
 
 // Define the default export with Meta type including the component type
 export default {

package/src/{components/Input/SearchBar → stories/Input}/SearchBar.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react/*";
-import { SearchBar } from "./SearchBar";
+import { SearchBar } from "../../components/Input/SearchBar/SearchBar";
 
 const meta: Meta<typeof SearchBar> = {
   title: "Input/SearchBar",

package/src/{components/Input/SingleCheckBox → stories/Input}/SingleCheckBox.stories.tsx

@@ -1,7 +1,9 @@
 import { Meta, StoryFn } from "@storybook/react";
 import { useState } from "react";
-
-import { CheckboxProps, SingleCheckBox } from "./SIngleCheckBox";
+import {
+  CheckboxProps,
+  SingleCheckBox,
+} from "../../components/Input/SingleCheckBox/SIngleCheckBox";
 
 export default {
   title: "Input/SingleCheckBox",

package/src/{components/Input/SingleSelect → stories/Input}/SingleSelect.stories.tsx

@@ -1,9 +1,12 @@
 // Import React and other necessary elements
 import { Meta } from "@storybook/react";
+import {
+  SingleSelect,
+  SingleSelectProps,
+} from "../../components/Input/SingleSelect/SingleSelect";
 
 // Make sure your TextField import is correct
 
-import { SingleSelect, SingleSelectProps } from "./SingleSelect";
 const topFilms = [
   { label: "The Shawshank Redemption", value: 1994 },
   { label: "The Godfather", value: 1972 },

package/src/{components/Input/Switch → stories/Input}/Switch.stories.tsx

@@ -1,10 +1,9 @@
 // Import React and other necessary elements
 import { Meta } from "@storybook/react";
+import { Switch, SwitchProps } from "../../components/Input/Switch/Switch";
 
 // Make sure your TextField import is correct
 
-import { Switch, SwitchProps } from "./Switch";
-
 // Define the default export with Meta type including the component type
 export default {
   title: "Input/Switch",

package/src/{components/Input/TextField → stories/Input}/TextField.stories.tsx

@@ -2,10 +2,16 @@
 import { Meta } from "@storybook/react";
 
 // Make sure your TextField import is correct
-import { TextField, TextFieldProps } from "./TextField";
-import { ToolTipContent, Tooltip } from "../../Feedback/Tooltip/Tooltip";
 import { InputAdornment as MuiInputAdornment } from "@mui/material";
-import { InfoIcon } from "../../Icons/IconComponents/InfoIcon";
+import { Icons } from "../../components/Assets/Icons/Icons";
+import {
+  ToolTipContent,
+  Tooltip,
+} from "../../components/Feedback/Tooltip/Tooltip";
+import {
+  TextField,
+  TextFieldProps,
+} from "../../components/Input/TextField/TextField";
 
 // Define the default export with Meta type including the component type
 export default {
@@ -19,7 +25,7 @@ export default {
     },
     label: {
       control: "text",
-      description: "The label text disp layed above the input field.",
+      description: "The label text displayed above the input field.",
     },
     value: {
       control: "text",
@@ -145,8 +151,16 @@ export const InfoInput = {
     InputProps: {
       endAdornment: (
         <MuiInputAdornment position="end">
-          <Tooltip title={<ToolTipContent message={"This is the info tooltip !! This is the info tooltip !! This is the info tooltip !!"} />}>
-            <InfoIcon />
+          <Tooltip
+            title={
+              <ToolTipContent
+                message={
+                  "This is the info tooltip !! This is the info tooltip !! This is the info tooltip !!"
+                }
+              />
+            }
+          >
+            <Icons.InfoIcon />
           </Tooltip>
         </MuiInputAdornment>
       ),

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

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { AppsMenu } from "../../components/export";
+import {
+  AppHeader,
+  AppHeaderProps,
+} from "../../components/Layout/AppHeader/AppHeader";
+import { Box } from "@mui/material";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof AppHeader> = {
+  title: "Layout/AppHeader",
+  component: AppHeader,
+  tags: ["autodocs"],
+  argTypes: {
+    actions: {
+      control: "object",
+      description: "Custom actions to be displayed.",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppHeader>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: AppHeaderProps) => (
+    <Box
+      sx={{
+        width: "100%",
+        height: "300px",
+        alignContent: "center",
+        justifyContent: "center",
+      }}
+    >
+      <AppHeader {...args} />
+    </Box>
+  ),
+  args: {
+    clientName: "Anurag University",
+    actions: [<p>asdjflsf</p>],
+    // appsMenu: <AppsMenu apps={["exams", "square", "admin"]} />,
+    userFullName: "Srikanth Yellapragada",
+  },
+};
+
+// Story with no apps menu
+export const WithAppsMenu: Story = {
+  render: (args: AppHeaderProps) => (
+    <AppHeader
+      {...args}
+      appsMenu={
+        <AppsMenu
+          apps={[
+            "exams",
+            "square",
+            "admin",
+            "enroll",
+            "payments",
+            "hrms",
+            "hostels",
+            "commute_x",
+          ]}
+        />
+      }
+    />
+  ),
+};

package/src/{components/Layout/LayoutWrapper → stories/Layout}/LayoutWrapper.stories.tsx

@@ -1,10 +1,13 @@
 import { Button, Stack } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import DialogButton from "../../Navigation/DialogButton/DialogButton";
-import { Icons } from "../../export";
-import { PageContent } from "../PageContent/PageContent";
-import { SideNavigation } from "../SideNavigation/SideNavigation";
-import { LayoutWrapper, LayoutWrapperProps } from "./LayoutWrapper";
+import { Icons } from "../../components/Assets/Icons/Icons";
+import {
+  LayoutWrapper,
+  LayoutWrapperProps,
+} from "../../components/Layout/LayoutWrapper/LayoutWrapper";
+import { PageContent } from "../../components/Layout/PageContent/PageContent";
+import { SideNavigation } from "../../components/Layout/SideNavigation/SideNavigation";
+import DialogButton from "../../components/Navigation/DialogButton/DialogButton";
 
 const LayoutWrapperStory = (props: LayoutWrapperProps) => {
   return (

package/src/{components/Layout/PageContent → stories/Layout}/PageContent.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { PageContent } from "../../export";
+import { PageContent } from "../../components/Layout/PageContent/PageContent";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof PageContent> = {

package/src/{components/Layout/SideNavigation → stories/Layout}/SideNavigation.stories.tsx

@@ -1,10 +1,10 @@
 import { Typography } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { Icons } from "../../export";
+import { Icons } from "../../components/Assets/Icons/Icons";
 import {
   SideNavigation,
   SideNavigationProps,
-} from "../SideNavigation/SideNavigation";
+} from "../../components/Layout/SideNavigation/SideNavigation";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof SideNavigation> = {

package/src/{components/Navigation/DialogButton → stories/Navigation}/DialogButton.stories.tsx

@@ -1,6 +1,8 @@
 import { Box, Button, Typography } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react/*";
-import DialogButton, { DialogButtonProps } from "./DialogButton";
+import DialogButton, {
+  DialogButtonProps,
+} from "../../components/Navigation/DialogButton/DialogButton";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof DialogButton> = {

package/src/{components/Navigation/DropDownMenu → stories/Navigation}/DropDownMenu.stories.tsx

@@ -1,11 +1,14 @@
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { Icons } from "../../export";
-import { DropDownButton } from "./DropDownButton";
-import { DropDownIcon } from "./DropDownIcon";
-import { DropdownMenu, DropdownMenuProps } from "./DropDownMenu";
-import { DropdownMenuItem } from "./DropdownMenuItem";
+import { Icons } from "../../components/Assets/Icons/Icons";
+import { DropDownButton } from "../../components/Navigation/DropDownMenu/DropDownButton";
+import { DropDownIcon } from "../../components/Navigation/DropDownMenu/DropDownIcon";
+import {
+  DropdownMenu,
+  DropdownMenuProps,
+} from "../../components/Navigation/DropDownMenu/DropDownMenu";
+import { DropdownMenuItem } from "../../components/Navigation/DropDownMenu/DropdownMenuItem";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof DropdownMenu> = {

package/src/{components/Navigation/TabsContainer → stories/Navigation}/TabsContainer.stories.tsx

@@ -1,7 +1,10 @@
 import { Box } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { PageContent } from "../../Layout/PageContent/PageContent";
-import { TabsContainer, TabsContainerProps } from "./TabsContainer";
+import { PageContent } from "../../components/Layout/PageContent/PageContent";
+import {
+  TabsContainer,
+  TabsContainerProps,
+} from "../../components/Navigation/TabsContainer/TabsContainer";
 
 // Define the default export with Meta type including the component type
 const meta: Meta<typeof TabsContainer> = {

package/src/themes/colorTokens/colorPalette.tsx

@@ -0,0 +1,48 @@
+export const ColorPalette = {
+  BrandColors: {
+    Violet100: "#F0F0F5",
+    Violet200: "#E0E0E7",
+    Violet250: "#D0D0E3",
+    Violet300: "#9E9DEB",
+    Violet400: "#9E9DEB",
+    Violet450: "#7B7ACC",
+    Violet500: "#656599",
+    Violet550: "#4D508A",
+    Violet600: "#323167",
+    Violet700: "#303259",
+    Violet800: "#1E1E45",
+    Violet900: "#1D1E3B",
+    Crimson: "#D4483E",
+  },
+  GreyColors: {
+    White50: "#FFFFFF80",
+    White70: "#FFFFFFB3",
+    White: "#FFFFFF",
+    Grey100: "#F2F2F2",
+    Grey200: "#CECECE",
+    Grey500: "#333333",
+    Black50: "#12121280",
+    Black70: "#121212B3",
+    Black: "#121212",
+  },
+  BlueGreyColors: {
+    BlueGrey100: "#F7F8FA",
+    BlueGrey400: "#293640",
+    BlueGrey600: "#1D2127",
+    BlueGrey800: "#161A1D",
+  },
+  UtilityColors: {
+    Green: "#88B053",
+    Blue: "#4BAABE",
+    Orange: "#ED9035",
+    Red: "#F2353C",
+    Pink: "#EA4A6B",
+    Yellow: "#F4C100",
+    Green20: "#88B05333",
+    Blue20: "#4BAABE33",
+    Orange20: "#ED903533",
+    Red20: "#F2353C33",
+    Pink20: "#EA4A6B33",
+    LightYellow: "#F4C10033",
+  },
+};

package/src/themes/colorTokens/darkColorTokens.tsx

@@ -0,0 +1,42 @@
+import { ColorPalette } from "./colorPalette";
+
+export const DarkColorTokens = {
+  primary: {
+    main: ColorPalette.BrandColors.Violet400,
+    light: ColorPalette.BrandColors.Violet300,
+    dark: ColorPalette.BrandColors.Violet450,
+  },
+  secondary: {
+    main: ColorPalette.BrandColors.Violet700,
+    light: ColorPalette.BrandColors.Violet550,
+    dark: ColorPalette.BrandColors.Violet900,
+  },
+  tertiary: { main: ColorPalette.BrandColors.Crimson },
+  text: {
+    primary: ColorPalette.GreyColors.White,
+    secondary: ColorPalette.GreyColors.White70,
+    tertiary: ColorPalette.GreyColors.White50,
+  },
+  surface: {
+    defaultBackground: ColorPalette.BlueGreyColors.BlueGrey600,
+    paperBackground: ColorPalette.BlueGreyColors.BlueGrey800,
+    grey: ColorPalette.BlueGreyColors.BlueGrey400,
+  },
+  border: {
+    primary: ColorPalette.GreyColors.Grey500,
+  },
+  highlight: {
+    highlightGreen: ColorPalette.UtilityColors.Green,
+    highlightOrange: ColorPalette.UtilityColors.Orange,
+    highlightBlue: ColorPalette.UtilityColors.Blue,
+    highlightRed: ColorPalette.UtilityColors.Red,
+    highlightPink: ColorPalette.UtilityColors.Pink,
+    highlightYellow: ColorPalette.UtilityColors.Yellow,
+    greenBackground: ColorPalette.UtilityColors.Green20,
+    orangeBackground: ColorPalette.UtilityColors.Orange20,
+    blueBackground: ColorPalette.UtilityColors.Blue20,
+    redBackground: ColorPalette.UtilityColors.Red20,
+    pinkBackground: ColorPalette.UtilityColors.Pink20,
+    yellowBackground: ColorPalette.UtilityColors.LightYellow,
+  },
+};

package/src/themes/colorTokens/lightColorTokens.ts

@@ -0,0 +1,42 @@
+import { ColorPalette } from "./colorPalette";
+
+export const LightColorTokens = {
+  primary: {
+    main: ColorPalette.BrandColors.Violet600,
+    light: ColorPalette.BrandColors.Violet500,
+    dark: ColorPalette.BrandColors.Violet800,
+  },
+  secondary: {
+    main: ColorPalette.BrandColors.Violet200,
+    light: ColorPalette.BrandColors.Violet100,
+    dark: ColorPalette.BrandColors.Violet250,
+  },
+  tertiary: { main: ColorPalette.BrandColors.Crimson },
+  text: {
+    primary: ColorPalette.GreyColors.Black,
+    secondary: ColorPalette.GreyColors.Black70,
+    tertiary: ColorPalette.GreyColors.Black50,
+  },
+  surface: {
+    defaultBackground: ColorPalette.BlueGreyColors.BlueGrey100,
+    paperBackground: ColorPalette.GreyColors.White,
+    grey: ColorPalette.GreyColors.Grey100,
+  },
+  border: {
+    primary: ColorPalette.GreyColors.Grey200,
+  },
+  highlight: {
+    highlightGreen: ColorPalette.UtilityColors.Green,
+    highlightOrange: ColorPalette.UtilityColors.Orange,
+    highlightBlue: ColorPalette.UtilityColors.Blue,
+    highlightRed: ColorPalette.UtilityColors.Red,
+    highlightPink: ColorPalette.UtilityColors.Pink,
+    highlightYellow: ColorPalette.UtilityColors.Yellow,
+    greenBackground: ColorPalette.UtilityColors.Green20,
+    orangeBackground: ColorPalette.UtilityColors.Orange20,
+    blueBackground: ColorPalette.UtilityColors.Blue20,
+    redBackground: ColorPalette.UtilityColors.Red20,
+    pinkBackground: ColorPalette.UtilityColors.Pink20,
+    yellowBackground: ColorPalette.UtilityColors.LightYellow,
+  },
+};

package/src/themes/commonTheme.ts

@@ -1,6 +1,7 @@
 import { Components } from "@mui/material";
 import { TypographyOptions } from "@mui/material/styles/createTypography";
-import { DarkColorTokens, LightColorTokens } from "./colorTokens";
+import { DarkColorTokens } from "./colorTokens/darkColorTokens";
+import { LightColorTokens } from "./colorTokens/lightColorTokens";
 import { customCssBaseline } from "./customCssBaseline";
 
 export enum Theme {
@@ -10,10 +11,6 @@ export enum Theme {
 export const getCommonTheme = (mode: Theme) => {
   const ColorTokens = mode == Theme.DARK ? DarkColorTokens : LightColorTokens;
   return {
-    borders: {
-      primary: `1px solid ${ColorTokens.grey.main}`,
-      grayLight: `1px solid ${ColorTokens.grey.main}`,
-    },
     typography: {
       fontFamily: ["Heebo", "Poppins", "sans-serif"].join(","),
     },
@@ -79,7 +76,7 @@ export const getCommonTheme = (mode: Theme) => {
             fullWidth: true,
           },
           paper: {
-            color: ColorTokens.background.default,
+            color: ColorTokens.surface.defaultBackground,
             borderRadius: "5px",
             width: "100%",
             maxHeight: "calc(100vh - 64px)",
@@ -110,7 +107,7 @@ export const getCommonTheme = (mode: Theme) => {
               height: "0.5em",
             },
             "&::-webkit-scrollbar-thumb": {
-              backgroundColor: ColorTokens.background.paper,
+              backgroundColor: ColorTokens.surface.paperBackground,
               borderRadius: "3px",
             },
           },
@@ -130,10 +127,10 @@ export const getCommonTheme = (mode: Theme) => {
       MuiPaginationItem: {
         styleOverrides: {
           root: {
-            background: ColorTokens.background.default,
+            background: ColorTokens.surface.defaultBackground,
             "&.Mui-selected": {
-              background: ColorTokens.background.paper,
-              border: `1px solid ${ColorTokens.highlight.main}`,
+              background: ColorTokens.surface.paperBackground,
+              border: `1px solid ${ColorTokens.tertiary.main}`,
             },
           },
         },
@@ -189,14 +186,14 @@ export const getCommonTheme = (mode: Theme) => {
       MuiTooltip: {
         styleOverrides: {
           tooltip: {
-            backgroundColor: ColorTokens.background.paper,
+            backgroundColor: ColorTokens.surface.paperBackground,
             padding: "20px 30px",
             minWidth: "300px",
             boxShadow: `0px 2px 5px ${ColorTokens.secondary.main}`,
             border: `1px solid ${ColorTokens.secondary.main}`,
           },
           arrow: {
-            color: ColorTokens.background.paper,
+            color: ColorTokens.surface.paperBackground,
             "&:before": {
               border: `1px solid ${ColorTokens.secondary.main}`,
             },
@@ -216,7 +213,7 @@ export const getCommonTheme = (mode: Theme) => {
               "&.Mui-checked": {
                 transform: "translateX(18px)",
                 "& + .MuiSwitch-track": {
-                  backgroundColor: ColorTokens.grey.main,
+                  backgroundColor: ColorTokens.surface.grey,
                   opacity: 1,
                   border: 0,
                 },
@@ -233,13 +230,13 @@ export const getCommonTheme = (mode: Theme) => {
             },
             "& .MuiSwitch-thumb": {
               boxSizing: "border-box",
-              backgroundColor: ColorTokens.background.paper,
+              backgroundColor: ColorTokens.surface.paperBackground,
               width: 22,
               height: 22,
             },
             "& .MuiSwitch-track": {
               borderRadius: 13,
-              backgroundColor: ColorTokens.grey.main,
+              backgroundColor: ColorTokens.surface.grey,
               opacity: 1,
             },
             "&.Mui-disabled + .MuiSwitch-track": {
@@ -295,7 +292,7 @@ export const getCommonTheme = (mode: Theme) => {
         styleOverrides: {
           root: {
             "& .MuiTabs-flexContainer": {
-              borderBottom: `1px solid ${ColorTokens.grey.main}`,
+              borderBottom: `1px solid ${ColorTokens.border.primary}`,
             },
           },
           indicator: {
@@ -306,7 +303,7 @@ export const getCommonTheme = (mode: Theme) => {
             "& .MuiTabs-indicatorSpan": {
               borderRadius: "30px",
               width: "60%",
-              backgroundColor: ColorTokens.highlight.main,
+              backgroundColor: ColorTokens.tertiary.main,
             },
           },
         },
@@ -332,7 +329,7 @@ export const getCommonTheme = (mode: Theme) => {
       MuiAvatar: {
         styleOverrides: {
           root: {
-            background: ColorTokens.background.default,
+            background: ColorTokens.surface.defaultBackground,
             cursor: "pointer",
             border: `1px solid ${ColorTokens.primary.main}`,
             color: ColorTokens.primary.main,

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;