@campxdev/react-blueprint 0.1.15 → 0.1.16

package/src/components/Layout/SideNavigation/SideNavigation.stories.tsx

@@ -0,0 +1,57 @@
+import { Typography } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { Icons } from "../../export";
+import {
+  SideNavigation,
+  SideNavigationProps,
+} from "../SideNavigation/SideNavigation";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof SideNavigation> = {
+  title: "Layout/SideNavigation",
+  component: SideNavigation,
+  tags: ["autodocs"],
+  argTypes: {
+    menu: {
+      control: "object",
+      description: "Array of menu item props",
+    },
+    open: {
+      control: "boolean",
+      description: "State to control if the drawer is open",
+    },
+    handleDrawer: {
+      control: false,
+      description: "Function to handle drawer state",
+      type: { name: "function", required: false },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SideNavigation>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: SideNavigationProps) => <SideNavigation {...args} />,
+  args: {
+    open: true,
+    menu: [
+      { name: "Tickets", path: "/home", icon: Icons.DashBoardIcon },
+      { name: "Item 2", path: "/item2" },
+    ],
+  },
+};
+
+export const WithoutMenu: Story = {
+  render: (args: SideNavigationProps) => <SideNavigation {...args} />,
+  args: {
+    open: true,
+    children: (
+      <Typography variant="body2">
+        Vestibulum blandit viverra conv allis. Pellentesque ligula urna,
+        fermentum ut semper in, tincidunt nec dui.
+      </Typography>
+    ),
+  },
+};

package/src/components/Layout/SideNavigation/SideNavigation.tsx

@@ -1,37 +1,38 @@
 import { ListItemIcon, Stack } from "@mui/material";
+import { ReactNode } from "react";
 import { useMatch, useResolvedPath } from "react-router-dom";
-import { HomeIcon } from "../../../assets/images/icons";
 import { activeStore } from "../../../store/activeStore";
 import { Typography } from "../../Typography/Typography";
+import { Icons } from "../../export";
 import {
+  StyledBox,
+  StyledContainer,
   StyledDrawer,
   StyledLinkButton,
-  StyledList,
   StyledListItem,
   StyledListItemButton,
 } from "./styles/styles";
 
 export interface SideNavigationProps {
-  menu?: any;
+  menu?: MenuItemProps[];
+  children?: ReactNode;
   open?: any;
   handleDrawer?: any;
 }
 
 export interface MenuItemProps {
-  menuItem: {
-    name: string;
-    path: string;
-    icon: any;
-    permissionKey: string;
-    iconType: string;
-  };
-  index: number;
+  name: string;
+  path: string;
+  icon?: any;
+  permissionKey?: string;
+  iconType?: string;
 }
 
 export const SideNavigation = ({
   menu,
   open,
   handleDrawer,
+  children,
 }: SideNavigationProps) => {
   return (
     <Stack gap="20px" direction={"row"} marginTop={"10px"}>
@@ -41,17 +42,26 @@ export const SideNavigation = ({
         open={open}
         onClose={handleDrawer}
       >
-        <StyledList>
-          {menu?.map((item: any, index: number) => (
-            <MenuItem menuItem={item} index={index} key={index} />
-          ))}
-        </StyledList>
+        <StyledBox>
+          {menu &&
+            menu.length > 0 &&
+            menu?.map((item: any, index: number) => (
+              <MenuItem menuItem={item} index={index} key={index} />
+            ))}
+          <StyledContainer>{children}</StyledContainer>
+        </StyledBox>
       </StyledDrawer>
     </Stack>
   );
 };
 
-const MenuItem = ({ menuItem, index }: MenuItemProps) => {
+const MenuItem = ({
+  menuItem,
+  index,
+}: {
+  menuItem: MenuItemProps;
+  index: number;
+}) => {
   const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
 
   let resolved = useResolvedPath(path);
@@ -80,7 +90,7 @@ const MenuItem = ({ menuItem, index }: MenuItemProps) => {
               marginRight: "8px",
             }}
           >
-            {Icon ? <Icon /> : <HomeIcon />}
+            {Icon ? <Icon /> : <Icons.HomeIcon />}
           </ListItemIcon>
           <Typography variant="subtitle3">{name}</Typography>
         </StyledListItemButton>

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

@@ -1,4 +1,4 @@
-import { Drawer, List, ListItem, ListItemButton, styled } from "@mui/material";
+import { Box, Drawer, ListItem, ListItemButton, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 const drawerWidth: number = 240;
 
@@ -32,6 +32,11 @@ export const StyledListItem = styled(ListItem)<StyledListItemProps>(
     borderRadius: "5px",
   })
 );
+
+export const StyledContainer = styled(Box)(({ theme }) => ({
+  width: "auto",
+  margin: "5px 10px",
+}));
 export const StyledListItemButton = styled(ListItemButton)(() => ({
   alignItems: "center",
   display: "flex",
@@ -46,7 +51,7 @@ export const StyledLinkButton = styled(Link)({
   },
 });
 
-export const StyledList = styled(List)(({ theme }) => ({
+export const StyledBox = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.background.paper,
   height: "calc(100vh - 120px)",
   paddingTop: "20px",

package/src/components/Layout/Spinner/Spinner.css

@@ -4,7 +4,7 @@
     border-radius: 50%;
     position: relative;
     animation: rotate 1s linear infinite;
-    scale: 0.5;
+    scale: 0.4;
   }
   .spinner::before , .spinner::after {
     content: "";

package/src/components/Layout/Spinner/Spinner.stories.tsx

@@ -7,7 +7,7 @@ import { Spinner } from "./Spinner";
 
 // Define the default export with Meta type including the component type
 export default {
-  title: "Layout/Spinner",
+  title: "FeedBack/Spinner",
   component: Spinner,
   tags: ["autodocs"],
   argTypes: {},

package/src/components/Layout/Spinner/Spinner.tsx

@@ -1,5 +1,5 @@
 import "./Spinner.css";
 
 export const Spinner = () => {
-  return <div className="spinner" style={{}}></div>;
+  return <div className="spinner"></div>;
 };

package/src/components/Modals/DialogButton.tsx

@@ -13,7 +13,7 @@ import { ReactNode, forwardRef, useState } from "react";
 
 const StyledDialogHeader = styled(Box)(({ theme }) => ({
   height: "60px",
-  backgroundColor: theme.palette.grey[200],
+
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",

package/src/components/TabsContainer/TabsContainer.stories.tsx

@@ -0,0 +1,48 @@
+import { Box } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+import { PageContent } from "../Layout/PageContent/PageContent";
+import { TabsContainer, TabsContainerProps } from "./TabsContainer";
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof TabsContainer> = {
+  title: "Navigation/TabsContainer",
+  component: TabsContainer,
+  tags: ["autodocs"],
+  // argTypes: {
+  //   menu: {
+  //     control: "object",
+  //     description: "Menu items to be displayed in the side navigation.",
+  //   },
+  // },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabsContainer>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: TabsContainerProps) => (
+    <PageContent sx={{ padding: "0px" }}>
+      <TabsContainer {...args} />{" "}
+    </PageContent>
+  ),
+  args: {
+    tabs: [
+      {
+        key: "1",
+        label: "Personal Details",
+        component: <Box>First Year</Box>,
+      },
+      {
+        key: "2",
+        label: "Overview",
+        component: <>Second Year</>,
+      },
+      {
+        key: "3",
+        label: "year 3",
+        component: <>Third Year</>,
+      },
+    ],
+  },
+};

package/src/components/TabsContainer/TabsContainer.tsx

@@ -0,0 +1,58 @@
+import { Box, Tab, TabProps, Tabs, TabsProps } from "@mui/material";
+import { ChangeEvent, useEffect, useState } from "react";
+
+interface CustomTabProps extends Omit<TabProps, "component"> {
+  component: React.ReactNode;
+  highlight?: boolean;
+  key: string | number;
+}
+
+export interface TabsContainerProps {
+  tabs: CustomTabProps[];
+  onTabChange?: (tabKey: string) => void;
+  currentTabIndex?: number;
+  tabsProps: TabsProps;
+}
+
+export const TabsContainer = ({
+  tabs,
+  onTabChange,
+  currentTabIndex = 0,
+  tabsProps,
+}: TabsContainerProps) => {
+  const [currentTab, setCurrentTab] = useState(tabs[currentTabIndex]?.key);
+
+  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
+    setCurrentTab(value);
+    onTabChange && onTabChange(value);
+  };
+  useEffect(() => {
+    setCurrentTab(tabs[currentTabIndex]?.key);
+  }, []);
+
+  return (
+    <>
+      <Tabs
+        onChange={handleTabsChange}
+        value={currentTab}
+        variant="scrollable"
+        scrollButtons="auto"
+        TabIndicatorProps={{
+          children: <span className="MuiTabs-indicatorSpan" />,
+        }}
+        {...tabsProps}
+      >
+        {tabs.map(({ component, ...tab }) => (
+          <Tab
+            label={tab.label}
+            value={tab?.key}
+            icon={tab.highlight ? <span>{"."}</span> : <></>}
+            iconPosition="end"
+            {...tab}
+          />
+        ))}
+      </Tabs>
+      <Box p={2}>{tabs.find((tab) => tab?.key === currentTab)?.component}</Box>
+    </>
+  );
+};

package/src/components/export.ts

@@ -1,5 +1,6 @@
 export * from "./DropDownMenu/DropDownButton";
 export * from "./DropDownMenu/DropDownMenu";
+export * from "./Icons/export";
 export * from "./Input/Button/Button";
 export * from "./Input/SingleSelect/SingleSelect";
 export * from "./Input/Switch/Switch";

package/src/themes/commonTheme.ts

@@ -3,14 +3,6 @@ import { TypographyOptions } from "@mui/material/styles/createTypography";
 import { DarkColorTokens, LightColorTokens } from "./colorTokens";
 import { customCssBaseline } from "./customCssBaseline";
 
-declare module "@mui/material/Typography" {
-  interface TypographyPropsVariantOverrides {
-    label1: true;
-    label2: true;
-    subtitle3: true;
-  }
-}
-
 export enum Theme {
   LIGHT = "light",
   DARK = "dark",
@@ -73,13 +65,6 @@ export const getCommonTheme = (mode: Theme) => {
           list: {
             minWidth: "240px",
             padding: 0,
-            "& li": {
-              borderBottom: "1212121A",
-              minHeight: "55px",
-              // ":hover": {
-              //   backgroundColor: "rgba(0, 0, 0, 0.025)",
-              // },
-            },
             "& > :last-child": {
               borderBottom: "none",
               "& li": {
@@ -91,18 +76,40 @@ export const getCommonTheme = (mode: Theme) => {
             borderRadius: "5px",
             border: `1px solid ${ColorTokens.secondary.main}`,
             marginTop: "10px",
-            boxShadow: "0px 5px 15px #0000001A",
+            boxShadow: `0px 5px 15px ${ColorTokens.secondary.main}`,
             "&::-webkit-scrollbar": {
               width: "0.5em",
               height: "0.5em",
             },
             "&::-webkit-scrollbar-thumb": {
-              backgroundColor: "rgba(0, 0, 0, 0.15)",
+              backgroundColor: ColorTokens.background.paper,
               borderRadius: "3px",
             },
           },
         },
       },
+      MuiMenuItem: {
+        styleOverrides: {
+          root: {
+            minHeight: "50px !important",
+            padding: "10px 16px",
+          },
+        },
+      },
+      MuiPagination: {
+        styleOverrides: {},
+      },
+      MuiPaginationItem: {
+        styleOverrides: {
+          root: {
+            background: ColorTokens.background.default,
+            "&.Mui-selected": {
+              background: ColorTokens.background.paper,
+              border: `1px solid ${ColorTokens.highlight.main}`,
+            },
+          },
+        },
+      },
       MuiButton: {
         defaultProps: {},
         styleOverrides: {
@@ -110,6 +117,7 @@ export const getCommonTheme = (mode: Theme) => {
             textTransform: "none",
             padding: "5px 30px ",
             maxHeight: "40px ",
+            minWidth: "250px",
             borderRadius: "5px ",
             boxShadow: "none ",
             fontSize: "14px ",
@@ -208,6 +216,9 @@ export const getCommonTheme = (mode: Theme) => {
               maxWidth: "400px",
             },
           },
+          paper: {
+            borderRadius: "10px",
+          },
         },
       },
       MuiOutlinedInput: {
@@ -235,11 +246,41 @@ export const getCommonTheme = (mode: Theme) => {
           underline: "none",
         },
       },
-      MuiFormLabel: {
+      MuiTabs: {
+        styleOverrides: {
+          root: {
+            "& .MuiTabs-flexContainer": {
+              borderBottom: `1px solid ${ColorTokens.grey.main}`,
+            },
+          },
+          indicator: {
+            display: "flex",
+            justifyContent: "center",
+            backgroundColor: "transparent",
+            height: "3px",
+            "& .MuiTabs-indicatorSpan": {
+              borderRadius: "30px",
+              width: "60%",
+              backgroundColor: ColorTokens.highlight.main,
+            },
+          },
+        },
+      },
+      MuiTab: {
+        defaultProps: {
+          disableRipple: true,
+        },
         styleOverrides: {
           root: {
+            color: ColorTokens.text.secondary,
             fontSize: "14px",
-            color: "#959595",
+            fontWeight: "600",
+            textTransform: "initial",
+            minHeight: "50px",
+            paddingBottom: "0px",
+            "&.Mui-selected": {
+              color: ColorTokens.text.primary,
+            },
           },
         },
       },

package/src/themes/darkTheme.ts

@@ -9,9 +9,8 @@ export const darkTheme = createTheme({
     secondary: DarkColorTokens.secondary,
     background: DarkColorTokens.background,
     text: DarkColorTokens.text,
-    // highlight: {
-    //   main: "#D4483E", // Highlight color for dark mode
-    // },
+    highlight: DarkColorTokens.highlight,
+    grey: DarkColorTokens.grey,
     // defaultProfileIcon: {
     //   main: "#293640", // Default profile images and icons color for dark mode
     // },

package/src/themes/lightTheme.ts

@@ -9,9 +9,8 @@ export const lightTheme = createTheme({
     secondary: LightColorTokens.secondary,
     background: LightColorTokens.background,
     text: LightColorTokens.text,
-    // highlight: {
-    //   main: "#D4483E", // Highlight color
-    // },
+    highlight: LightColorTokens.highlight,
+    grey: LightColorTokens.grey,
     // defaultProfileIcon: {
     //   main: "#BDD6E8", // Default profile images and icons color
     // },

package/src/utils/campxAxios.ts

@@ -14,7 +14,7 @@ export const campxAxios = axios.create({
   headers: {
     "x-tenant-id": tenantCode,
     ...(!isProduction
-      ? { campx_session_key: sessionKey || "6653ed32f34cbc245f22e7c8" }
+      ? { campx_session_key: sessionKey || "6658507d9912823dcae621cf" }
       : {}),
     "x-institution-id": institutionCode,
   },

package/tsconfig.json

@@ -21,7 +21,5 @@
     "types": ["node"],
     "jsx": "react-jsx"
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src", "./types"  ]
 }

package/types/theme.d.ts

@@ -0,0 +1,38 @@
+import "@mui/material/styles";
+
+declare module "@mui/material/styles" {
+  interface Theme {
+    palette: {
+      primary: {
+        dark: string;
+        main: string;
+        light: string;
+      };
+      secondary: {
+        main: string;
+        light: string;
+        dark: string;
+      };
+      text: {
+        primary: string;
+        secondary: string;
+      };
+      background: {
+        paper: string;
+        default: string;
+      };
+      highlight: {
+        main: string;
+      };
+    };
+  }
+  export function createTheme(options?: CustomThemeOptions): CustomTheme;
+}
+
+declare module "@mui/material/Typography" {
+  interface TypographyPropsVariantOverrides {
+    label1: true;
+    label2: true;
+    subtitle3: true;
+  }
+}