@campxdev/react-blueprint 0.1.35 → 0.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.35",
+  "version": "0.1.37",
   "main": "./export.ts",
   "private": false,
   "dependencies": {
@@ -14,6 +14,14 @@
     "axios": "^1.7.2",
     "framer-motion": "^11.2.9",
     "js-cookie": "^3.0.5",
+    "@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.3.0",
+    "@types/react-router-dom": "^5.3.3",
     "lodash": "^4.17.21",
     "pullstate": "^1.24.0",
     "react": "^18.3.1",
@@ -66,9 +74,6 @@
     "@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/components/Input/Chips/Chips.tsx

@@ -1,5 +1,4 @@
-import { Chip } from "@mui/material";
-import { styled } from "@mui/material/styles";
+import { Chip, styled } from "@mui/material";
 import { Typography } from "../../DataDisplay/Typography/Typography";
 import { Icons } from "../../export";
 

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

@@ -1,13 +1,10 @@
-import { Box, Divider, IconButton, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
 import { ReactNode } from "react";
-import { StyledHeader } from "./styles/styles";
-import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import UserBox from "./AppHeaderActions/UserBox";
 import { HelpIcon } from "../../Assets/Icons/IconComponents/HelpIcon";
-import { AdministratorIcon } from "../../Assets/Icons/IconComponents/AdministratorIcon";
-import { TicketsIcon } from "../../Assets/Icons/IconComponents/TicketsIcon";
+import { Typography } from "../../DataDisplay/Typography/Typography";
 import { StyledIconButton } from "../../Navigation/DropDownMenu/styles";
+import UserBox from "./AppHeaderActions/UserBox";
+import { StyledHeader } from "./styles/styles";
 
 export interface AppHeaderProps {
   actions?: ReactNode[];

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

@@ -6,15 +6,8 @@ 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",

package/src/components/Layout/AppLayout/AppLayout.tsx

@@ -0,0 +1,42 @@
+import { Grid, Stack, useTheme } from "@mui/material";
+import { useState } from "react";
+import { FloatingSidebar, Icons } from "../../export";
+import { AppHeader } from "../AppHeader/AppHeader";
+
+export const AppLayout = () => {
+  const theme = useTheme();
+  const [collapsed, setCollapsed] = useState(false);
+  const menu = [
+    { name: "Home", path: "/home", icon: Icons.DashBoardIcon },
+    { name: "Self Service Portal", path: "/item2" },
+    { name: "hrms", path: "/hrms" },
+  ];
+  return (
+    <Grid
+      container
+      spacing={3}
+      sx={{
+        backgroundColor: theme.palette.surface.defaultBackground,
+        minHeight: "80vh",
+      }}
+    >
+      <Grid item xs={collapsed ? 1 : 3}>
+        <FloatingSidebar
+          menu={menu}
+          collapsed={collapsed}
+          setCollapsed={setCollapsed}
+        />
+      </Grid>
+      <Grid item xs={collapsed ? 11 : 9}>
+        <Stack>
+          <AppHeader
+            clientName="Anurag University"
+            userFullName="Srikanth Yellapragada"
+            actions={[]}
+            collapsed={true}
+          />
+        </Stack>
+      </Grid>
+    </Grid>
+  );
+};

package/src/components/Navigation/FloatingSidebar/FloatingSidebar.tsx

@@ -1,13 +1,12 @@
-import React, { useState } from "react";
-import { IconButton, ListItemIcon } from "@mui/material";
-import { RightIcon } from "../../Assets/Icons/IconComponents/RightIcon";
-import { LeftIcon } from "../../Assets/Icons/IconComponents/LeftIcon";
-import { createSidebarStyles } from "./styles";
+import { IconButton } from "@mui/material";
 import { useMatch, useResolvedPath } from "react-router-dom";
-import { Icons } from "../../export";
-import { Typography } from "../../DataDisplay/Typography/Typography";
-import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
 import { CampxFullLogoIcon } from "../../Assets/Icons/IconComponents/CampxFullLogoIcon";
+import { CampxIcon } from "../../Assets/Icons/IconComponents/CampxIcon";
+import { LeftIcon } from "../../Assets/Icons/IconComponents/LeftIcon";
+import { RightIcon } from "../../Assets/Icons/IconComponents/RightIcon";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Icons } from "../../export";
+import { createSidebarStyles } from "./styles";
 
 export interface MenuItemProps {
   name: string;
@@ -17,8 +16,15 @@ export interface MenuItemProps {
   iconType?: string;
 }
 
-export const FloatingSidebar = ({ menu }: { menu: MenuItemProps[] }) => {
-  const [collapsed, setCollapsed] = useState(false);
+export const FloatingSidebar = ({
+  menu,
+  collapsed,
+  setCollapsed,
+}: {
+  menu: MenuItemProps[];
+  collapsed: boolean;
+  setCollapsed: any;
+}) => {
   const {
     StyledSidebarContainer,
     StyledLogoArea,

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

@@ -10,16 +10,10 @@ import { Link } from "react-router-dom";
 
 export const createSidebarStyles = (collapsed: boolean) => {
   const StyledSidebarContainer = styled(Stack)(({ theme }) => {
-    console.log(theme);
     return {
       height: "100vh",
       width: collapsed ? "60px" : "240px",
       backgroundColor: theme.palette.surface.defaultBackground,
-      position: "fixed",
-      left: "12px",
-      top: "12px",
-      bottom: "12px",
-      zIndex: 1000,
     };
   });
 

package/src/stories/Layout/AppLayout.stories.tsx

@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { AppLayout } from "../../components/Layout/AppLayout/AppLayout";
+
+
+// Define the default export with Meta type including the component type
+const meta: Meta<typeof AppLayout> = {
+  title: "Layout/AppLayout",
+  component: AppLayout,
+  tags: ["autodocs"],
+  argTypes: {
+    actions: {
+      control: "object",
+      description: "Custom actions to be displayed.",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppLayout>;
+
+// Primary story
+export const Primary: Story = {
+  render: (args: any) => (
+
+      <AppLayout {...args} />
+
+  ),
+  args: {
+
+  },
+};

package/src/App.test.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});