@campxdev/react-blueprint 0.1.32 → 0.1.34

package/package.json

@@ -1,23 +1,16 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "^5.14.11",
-    "@mui/material": "^5.14.11",
+    "@mui/icons-material": "^5.15.20",
+    "@mui/material": "^5.15.20",
     "@mui/x-data-grid": "^7.5.1",
     "@storybook/addon-backgrounds": "^8.1.5",
     "@storybook/addon-designs": "^8.0.2",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
     "axios": "^1.7.2",
     "framer-motion": "^11.2.9",
     "js-cookie": "^3.0.5",
@@ -26,10 +19,10 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^3.1.4",
-    "react-router-dom": "^6.4.2",
-    "react-scripts": "5.0.1",
+    "react-router-dom": "^6.24.0",
+    "react-scripts": "^5.0.1",
     "storybook-dark-mode": "^4.0.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.2",
     "web-vitals": "^2.1.0"
   },
   "scripts": {
@@ -73,6 +66,9 @@
     "@storybook/react-webpack5": "^8.1.5",
     "@storybook/test": "^8.1.5",
     "@types/js-cookie": "^3.0.5",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.3.0",
+    "@types/react-router-dom": "^5.3.3",
     "eslint-plugin-storybook": "^0.8.0",
     "prop-types": "^15.8.1",
     "storybook": "^8.1.5",

package/src/App.tsx

@@ -10,6 +10,7 @@ function App() {
         actions={[<p>asdjflsf</p>]}
         appsMenu={<AppsMenu apps={["exams", "square", "admin"]} />}
         userFullName="Srikanth Yellapragada"
+        collapsed={false}
       />
     </Providers>
   );

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

@@ -15,6 +15,7 @@ export interface AppHeaderProps {
   clientLogoUrl?: string;
   clientName: string;
   userFullName: string;
+  collapsed: boolean;
 }
 
 export const AppHeader = ({
@@ -23,9 +24,10 @@ export const AppHeader = ({
   clientLogoUrl,
   clientName,
   userFullName,
+  collapsed,
 }: AppHeaderProps) => {
   return (
-    <StyledHeader>
+    <StyledHeader collapsed={collapsed}>
       <Typography variant={"subtitle2"}>{clientName}</Typography>
       <Stack alignItems={"center"} gap={"12px"} flexDirection={"row"}>
         <StyledIconButton

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

@@ -1,19 +1,27 @@
 import { Box, styled } from "@mui/material";
 import { Link } from "react-router-dom";
 
-export const StyledHeader = styled("header")(({ theme }) => ({
-  display: "flex",
-  flexDirection: "row",
-  alignItems: "center",
-  width: "100%",
-  position: "fixed",
-  top: "12px",
-  height: "60px",
-  backgroundColor: theme.palette.background.paper,
-  justifyContent: "space-between",
-  padding: "0 32px",
-  borderRadius: "8px",
-}));
+const sidebarWidth = { collapsed: "60px", expanded: "240px" };
+
+export const StyledHeader = styled("header")(
+  ({ theme, collapsed }: { theme?: any; collapsed: boolean }) => ({
+    display: "flex",
+    position: "fixed",
+    flexDirection: "row",
+    alignItems: "center",
+    width:
+      "calc(100% - 12px - " +
+      (collapsed ? sidebarWidth.collapsed : sidebarWidth.expanded) +
+      ")",
+    top: "12px",
+    left: collapsed ? sidebarWidth.collapsed : sidebarWidth.expanded,
+    height: "60px",
+    backgroundColor: theme.palette.background.paper,
+    justifyContent: "space-between",
+    padding: "0 32px",
+    borderRadius: "8px",
+  })
+);
 
 export const StyledActionBox = styled(Box)(({ theme }) => ({
   marginRight: "20px",

package/src/components/export.ts

@@ -4,8 +4,6 @@ export * from "./Input/export";
 export * from "./Layout/AppHeader/AppHeader";
 
 export * from "./Layout/AppHeader/AppsMenu";
-export * from "./Layout/LayoutWrapper/LayoutWrapper";
 export * from "./Layout/PageContent/PageContent";
-export * from "./Layout/SideNavigation/SideNavigation";
 export * from "./Navigation/exports";
 export * from "./Feedback/exports";

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

@@ -41,28 +41,6 @@ export const Primary: Story = {
     actions: [<p>asdjflsf</p>],
     // appsMenu: <AppsMenu apps={["exams", "square", "admin"]} />,
     userFullName: "Srikanth Yellapragada",
+    collapsed: false,
   },
 };
-
-// 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/LayoutWrapper.tsx

@@ -1,73 +0,0 @@
-import { Box, IconButton, Stack, Typography } from "@mui/material";
-
-import MenuIcon from "@mui/icons-material/Menu";
-import { ReactNode, useState } from "react";
-import { activeStore } from "../../../store/activeStore";
-import { Icons } from "../../export";
-import { Main, StyledLayoutContainer, StyledMainContainer } from "./styles";
-
-export interface LayoutWrapperProps {
-  title?: string;
-  actionButtons?: ReactNode[];
-  children: ReactNode;
-  sideBar: (props: {
-    open: boolean;
-    handleClick: (e: any) => void;
-  }) => ReactNode;
-}
-
-export const LayoutWrapper = ({
-  children,
-  title,
-  sideBar,
-}: LayoutWrapperProps) => {
-  const [isHovered, setIsHovered] = useState<boolean>(false);
-  const { open } = activeStore.useState((s) => s);
-
-  const handleClick = () => {
-    activeStore.update((s) => {
-      s.open = !open;
-    });
-  };
-
-  return (
-    <StyledLayoutContainer>
-      <StyledMainContainer>
-        <Box>
-          <Stack
-            direction={"row"}
-            width={"100%"}
-            justifyContent={"space-between"}
-          >
-            <Stack direction={"row"} alignItems={"center"}>
-              <IconButton
-                color="inherit"
-                aria-label="open drawer"
-                onClick={handleClick}
-                edge="start"
-                sx={{ mr: 0.5, padding: "6px", marginLeft: "0px" }}
-                onMouseEnter={() => setIsHovered(true)}
-                onMouseLeave={() => setIsHovered(false)}
-              >
-                {open && isHovered ? (
-                  <Icons.LeftIcon />
-                ) : !open && isHovered ? (
-                  <Icons.RightIcon />
-                ) : (
-                  <MenuIcon />
-                )}
-              </IconButton>
-              <Typography variant="subtitle1" noWrap>
-                {title ? title : ""}
-              </Typography>
-            </Stack>
-          </Stack>
-
-          {sideBar({ open: open, handleClick: handleClick })}
-        </Box>
-
-        <Main open={open}>{children}</Main>
-      </StyledMainContainer>
-    </StyledLayoutContainer>
-  );
-};

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

@@ -1,52 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-const drawerWidth: number = 240;
-
-export const Main = styled("main", {
-  shouldForwardProp: (prop) => prop !== "open",
-})<{
-  open?: boolean;
-}>(({ theme, open }) => ({
-  padding: "0px 25px",
-  transition: theme.transitions.create("margin", {
-    easing: theme.transitions.easing.sharp,
-    duration: theme.transitions.duration.leavingScreen,
-  }),
-  marginLeft: `-${drawerWidth}px`,
-  ...(open && {
-    transition: theme.transitions.create("margin", {
-      easing: theme.transitions.easing.easeOut,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    marginLeft: 0,
-  }),
-  width: "100%",
-  overflowY: "auto",
-  borderRadius: "5px",
-  "&::-webkit-scrollbar": {
-    width: "0.4em",
-    height: "0.4em",
-  },
-
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderRadius: "3px",
-  },
-  "@media (max-width: 1024px)": {
-    marginLeft: "-50px",
-  },
-}));
-
-export const StyledLayoutContainer = styled(Box)(({ theme }) => ({
-  width: "100%",
-  position: "fixed",
-  top: "60px",
-  backgroundColor: theme.palette.surface.defaultBackground,
-}));
-
-export const StyledMainContainer = styled("main")(() => ({
-  // width: "90%",
-  margin: "auto",
-  overflowY: "auto",
-  display: "flex",
-}));

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

@@ -1,93 +0,0 @@
-import { ListItemIcon, Stack } from "@mui/material";
-import { ReactNode } from "react";
-import { useMatch, useResolvedPath } from "react-router-dom";
-import { activeStore } from "../../../store/activeStore";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { Icons } from "../../export";
-import {
-  StyledBox,
-  StyledContainer,
-  StyledDrawer,
-  StyledLinkButton,
-  StyledListItem,
-  StyledListItemButton,
-} from "./styles/styles";
-
-export interface SideNavigationProps {
-  menu?: MenuItemProps[];
-  children?: ReactNode;
-  open?: any;
-  handleDrawer?: any;
-}
-
-export interface MenuItemProps {
-  name: string;
-  path: string;
-  icon?: any;
-  permissionKey?: string;
-  iconType?: string;
-}
-
-export const SideNavigation = ({
-  menu,
-  open,
-  handleDrawer,
-  children,
-}: SideNavigationProps) => {
-  return (
-    <StyledDrawer
-      variant={window.innerWidth > 1024 ? "persistent" : "temporary"}
-      anchor="left"
-      open={open}
-      onClose={handleDrawer}
-    >
-      <StyledBox>
-        {menu &&
-          menu.length > 0 &&
-          menu?.map((item: any, index: number) => (
-            <MenuItem menuItem={item} index={index} key={index} />
-          ))}
-        <StyledContainer>{children}</StyledContainer>
-      </StyledBox>
-    </StyledDrawer>
-  );
-};
-
-const MenuItem = ({
-  menuItem,
-  index,
-}: {
-  menuItem: MenuItemProps;
-  index: number;
-}) => {
-  const { path, icon: Icon, name, permissionKey, iconType } = menuItem;
-
-  let resolved = useResolvedPath(path);
-  let match = useMatch({ path: resolved.pathname, end: false });
-
-  return (
-    <StyledListItem key={path} disablePadding match={match}>
-      <StyledLinkButton
-        to={path}
-        style={{ width: "100%" }}
-        onClick={() =>
-          activeStore.update((s) => {
-            s.active = index;
-          })
-        }
-      >
-        <StyledListItemButton>
-          <ListItemIcon
-            sx={{
-              minWidth: "16px",
-              marginRight: "8px",
-            }}
-          >
-            {Icon ? <Icon /> : <Icons.HomeIcon />}
-          </ListItemIcon>
-          <Typography variant="subtitle3">{name}</Typography>
-        </StyledListItemButton>
-      </StyledLinkButton>
-    </StyledListItem>
-  );
-};

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

@@ -1,58 +0,0 @@
-import { Box, Drawer, ListItem, ListItemButton, styled } from "@mui/material";
-import { Link } from "react-router-dom";
-const drawerWidth: number = 240;
-
-export const StyledDrawer = styled(Drawer)(() => ({
-  width: drawerWidth,
-  flexShrink: 0,
-  "& .MuiDrawer-paper": {
-    width: drawerWidth,
-    boxSizing: "border-box",
-    position: "unset",
-    transition: "none !important",
-    borderRight: "none !important",
-    borderRadius: "5px",
-  },
-  "@media (max-width: 1024px)": {
-    "& .MuiDrawer-paper": {
-      borderRadius: "0px",
-    },
-  },
-}));
-
-interface StyledListItemProps {
-  match: any;
-}
-
-export const StyledListItem = styled(ListItem)<StyledListItemProps>(
-  ({ theme, match }) => ({
-    backgroundColor: match ? theme.palette.secondary.main : "none",
-    width: "auto",
-    margin: "5px 8px",
-    borderRadius: "5px",
-  })
-);
-
-export const StyledContainer = styled(Box)(({ theme }) => ({
-  width: "auto",
-  margin: "5px 10px",
-}));
-export const StyledListItemButton = styled(ListItemButton)(() => ({
-  alignItems: "center",
-  display: "flex",
-  paddingBottom: "5px",
-  paddingTop: "5px",
-}));
-
-export const StyledLinkButton = styled(Link)({
-  textDecoration: "none",
-  "&:hover": {
-    color: "unset",
-  },
-});
-
-export const StyledBox = styled(Box)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  height: "calc(100vh - 120px)",
-  paddingTop: "20px",
-}));

package/src/stories/Layout/LayoutWrapper.stories.tsx

@@ -1,99 +0,0 @@
-import { Button, Stack } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-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 (
-    <div style={{ minHeight: "500px" }}>
-      <LayoutWrapper {...props} />
-    </div>
-  );
-};
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof LayoutWrapperStory> = {
-  title: "Layout/LayoutWrapper",
-  component: LayoutWrapperStory,
-  tags: ["autodocs"],
-  argTypes: {
-    title: {
-      control: "text",
-      description: "The title of the component",
-      type: { name: "string", required: false },
-    },
-    actionButtons: {
-      control: "object",
-      description: "Array of React nodes for action buttons",
-      // type: { name: "ReactNode[]", required: false },
-    },
-    children: {
-      control: "object",
-      description: "The content of the component",
-    },
-    sideBar: {
-      control: false,
-      description:
-        "A function that returns a ReactNode, with props for open and handleClick",
-      type: {
-        name: "function",
-        required: true,
-      },
-    },
-
-    // menu: {
-    //   control: "object",
-    //   description:
-    //     "Menu configuration object, which may include items or other menu-related settings.",
-    // },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof LayoutWrapperStory>;
-
-// Primary story
-export const Primary: Story = {
-  render: (args: LayoutWrapperProps) => <LayoutWrapperStory {...args} />,
-  args: {
-    sideBar: ({ open, handleClick }: any) => (
-      <SideNavigation
-        open={open}
-        handleDrawer={handleClick}
-        menu={[
-          {
-            name: "Self Service Portal",
-            path: "/home",
-            icon: Icons.DashBoardIcon,
-          },
-          { name: "Self Service Portal", path: "/item2" },
-        ]}
-      />
-    ),
-    children: (
-      <>
-        <Stack alignItems={"flex-end"}>
-          <Button variant="contained">Add Tickets</Button>
-        </Stack>
-        <PageContent>Mahesh</PageContent>
-      </>
-    ),
-    actionButtons: [
-      <DialogButton
-        anchor={({ open }) => (
-          <Button variant="contained" onClick={open}>
-            Create
-          </Button>
-        )}
-        content={({ close }) => <Button onClick={close}>Click Me</Button>}
-        title="Dialog Title"
-      />,
-    ],
-  },
-};

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

@@ -1,57 +0,0 @@
-import { Typography } from "@mui/material";
-import { Meta, StoryObj } from "@storybook/react";
-import { Icons } from "../../components/Assets/Icons/Icons";
-import {
-  SideNavigation,
-  SideNavigationProps,
-} from "../../components/Layout/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>
-    ),
-  },
-};