@campxdev/react-blueprint 0.1.38 → 0.1.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "main": "./export.ts",
   "private": false,
   "dependencies": {

package/src/App.tsx

@@ -1,5 +1,5 @@
 import "./App.css";
-import { AppHeader, AppsMenu } from "./components/export";
+import { AppHeader } from "./components/export";
 import Providers from "./contexts/Providers";
 
 function App() {
@@ -8,7 +8,6 @@ function App() {
       <AppHeader
         clientName="Anurag University"
         actions={[<p>asdjflsf</p>]}
-        appsMenu={<AppsMenu apps={["exams", "square", "admin"]} />}
         userFullName="Srikanth Yellapragada"
         collapsed={false}
       />

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

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

package/src/components/Navigation/Sidebar/Sidebar.tsx

@@ -65,7 +65,7 @@ export const Sidebar = ({
   };
 
   return (
-    <StyledSidebarContainer direction="column" spacing={2}>
+    <StyledSidebarContainer direction="column" spacing="12px">
       <StyledLogoArea collapsed={collapsed}>
         {collapsed ? <CampxIcon /> : <CampxFullLogoIcon />}
       </StyledLogoArea>

package/src/components/Navigation/Sidebar/styles.tsx

@@ -11,10 +11,9 @@ import { Link } from "react-router-dom";
 export const createSidebarStyles = (collapsed: boolean) => {
   const StyledSidebarContainer = styled(Stack)(({ theme }) => {
     return {
-      height: "100vh",
-      marginLeft: "12px",
-      marginTop: "12px",
+      height: "calc(100vh - 24px)",
       width: collapsed ? "60px" : "240px",
+      margin: "12px",
       backgroundColor: theme.palette.surface.defaultBackground,
     };
   });
@@ -41,10 +40,8 @@ export const createSidebarStyles = (collapsed: boolean) => {
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    padding: theme.spacing(2),
     borderRadius: "8px",
     backgroundColor: theme.palette.surface.paperBackground,
-    transition: "max-height 0.3s ease-out",
     height: "60px",
   }));
   interface StyledListItemProps {

package/src/components/export.ts

@@ -3,7 +3,5 @@ export * from "./DataDisplay/export";
 export * from "./Input/export";
 export * from "./Layout/AppHeader/AppHeader";
 
-export * from "./Layout/AppHeader/AppsMenu";
-export * from "./Layout/PageContent/PageContent";
-export * from "./Navigation/exports";
 export * from "./Feedback/exports";
+export * from "./Navigation/exports";

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

@@ -1,10 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { AppsMenu } from "../../components/export";
+
+import { Box } from "@mui/material";
 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> = {

package/src/stories/Layout/FloatingSidebar.stories.tsx

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from "@storybook/react";
 import { Box } from "@mui/material";
-import { FloatingSidebar, Icons } from "../../components/export";
+import { Meta, StoryObj } from "@storybook/react";
+import { Icons, Sidebar } from "../../components/export";
 
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof FloatingSidebar> = {
+// Define the default export Sidebar Meta type including the component type
+const meta: Meta<typeof Sidebar> = {
   title: "Navigation/FloatingSidebar",
-  component: FloatingSidebar,
+  component: Sidebar,
   decorators: [
     (Story) => (
       <Box
@@ -28,11 +28,11 @@ const meta: Meta<typeof FloatingSidebar> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof FloatingSidebar>;
+type Story = StoryObj<typeof Sidebar>;
 
 // Primary story
 export const Primary: Story = {
-  render: (args) => <FloatingSidebar {...args} />,
+  render: (args) => <Sidebar {...args} />,
   args: {
     menu: [
       { name: "Home", path: "/home", icon: Icons.DashBoardIcon },

package/src/stories/Navigation/TabsContainer.stories.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { PageContent } from "../../components/Layout/PageContent/PageContent";
+
 import {
   TabsContainer,
   TabsContainerProps,
@@ -24,11 +24,7 @@ type Story = StoryObj<typeof TabsContainer>;
 
 // Primary story
 export const Primary: Story = {
-  render: (args: TabsContainerProps) => (
-    <PageContent sx={{ padding: "0px" }}>
-      <TabsContainer {...args} />{" "}
-    </PageContent>
-  ),
+  render: (args: TabsContainerProps) => <TabsContainer {...args} />,
   args: {
     tabs: [
       {

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

@@ -1,159 +0,0 @@
-import AppsOutageIcon from "@mui/icons-material/AppsOutage";
-import { Box, IconButton, Link, Menu, Typography, styled } from "@mui/material";
-import { useState } from "react";
-import { applications } from "../../../utils/applications";
-import { institutionKey, urlTenantKey } from "../../../utils/constants";
-import { Icons } from "../../export";
-
-export const AppsMenu = ({ apps }: { apps: string[] }) => {
-  const [anchorEl, setAnchorEl] = useState<any>(null);
-  const open = Boolean(anchorEl);
-  const applicationList = applications?.filter((item) =>
-    apps.includes(item.key)
-  );
-
-  const handleClick = (event: any) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <StyledIconButton onClick={handleClick}>
-        <Icons.AppsIcon />
-      </StyledIconButton>
-      <Menu
-        transitionDuration={150}
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        TransitionProps={{
-          unmountOnExit: false,
-        }}
-        sx={{
-          "& .MuiPaper-root": {
-            "&>:last-child": {
-              paddingBottom: "0px",
-            },
-          },
-        }}
-      >
-        {applicationList.length !== 0 ? (
-          <>
-            <Box sx={{ padding: "0.3rem 1rem" }}>
-              <Typography variant="body2">Switch to</Typography>
-            </Box>
-            <Box>
-              {applicationList.map((item, index) => {
-                return (
-                  <Link
-                    href={item.path + `/${urlTenantKey}/${institutionKey}`}
-                    key={index}
-                  >
-                    <StyledMenuItemContainer
-                      key={index}
-                      onClick={() => {
-                        window.location.href = item.path;
-                        handleClose();
-                      }}
-                    >
-                      <MenuItem item={item} />
-                    </StyledMenuItemContainer>
-                  </Link>
-                );
-              })}
-            </Box>
-          </>
-        ) : (
-          <StyledNoAppContainer>
-            <AppsOutageIcon sx={{ width: "40px", height: "40px" }} />
-            <Typography variant="body2">
-              No Application have been assigned
-            </Typography>
-          </StyledNoAppContainer>
-        )}
-      </Menu>
-    </>
-  );
-};
-
-const MenuItem = ({ item }: any) => {
-  return (
-    <StyledMenuItem>
-      <StyledImageBox>
-        <img
-          src={item.icon}
-          style={{ width: "20px", height: "20px" }}
-          alt="icon"
-        />
-      </StyledImageBox>
-      <Box>
-        <Typography variant="subtitle2">{item?.title}</Typography>
-        <Typography variant="caption">{item?.description}</Typography>
-      </Box>
-    </StyledMenuItem>
-  );
-};
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  padding: "18px",
-  backgroundColor: "black",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "0px",
-  height: "60px",
-  width: "60px",
-  border: `1px solid ${theme.palette.background.default}`,
-}));
-
-const StyledMenuItemContainer = styled(Box)(({ theme }) => ({
-  cursor: "pointer",
-  padding: "5px 0px",
-}));
-
-const StyledMenuItem = styled(Box)({
-  height: "68px",
-  width: "380px",
-  padding: "40px 20px",
-  transition: "background ease 0.3s",
-  "&:hover": {
-    background: "rgba(0, 0, 0, 0.03)",
-  },
-  display: "flex",
-  alignItems: "center",
-  gap: "20px",
-});
-
-const StyledImageBox = styled(Box)(() => ({
-  height: "40px",
-  width: "40px",
-  boxShadow: "0px 5px 5px 0px rgba(48, 62, 99,0.1) ",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  borderRadius: "5px",
-}));
-
-const StyledNoAppContainer = styled(Box)({
-  width: "300px",
-  height: "300px",
-  display: "flex",
-  alignItems: "center",
-  flexDirection: "column",
-  justifyContent: "center",
-  gap: "10px",
-});

package/src/components/Layout/PageContent/PageContent.tsx

@@ -1,32 +0,0 @@
-import { Box, styled } from "@mui/material";
-
-export const StyledContainer = styled(Box)(({ theme }) => ({
-  width: "100%",
-  height: "calc(100vh - 120px)",
-  overflowY: "auto",
-  backgroundColor: theme.palette.background.paper,
-  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: 0,
-  },
-  padding: "20px",
-  marginTop: "10px",
-}));
-
-export const PageContent = ({
-  children,
-  sx,
-}: {
-  children: React.ReactNode;
-  sx?: any;
-}) => {
-  return <StyledContainer sx={sx}> {children}</StyledContainer>;
-};

package/src/stories/Layout/PageContent.stories.tsx

@@ -1,26 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { PageContent } from "../../components/Layout/PageContent/PageContent";
-
-// Define the default export with Meta type including the component type
-const meta: Meta<typeof PageContent> = {
-  title: "Layout/PageContent",
-  component: PageContent,
-  tags: ["autodocs"],
-  argTypes: {
-    children: {
-      control: "object",
-      description: "The content of the component",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof PageContent>;
-
-// Primary story
-export const Primary: Story = {
-  render: (args: any) => <PageContent {...args} />,
-  args: {
-    children: <>Tickets</>,
-  },
-};