@campxdev/react-blueprint 0.1.36 → 0.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "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/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,20 +6,14 @@ 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",
+    marginTop: "12px",
   })
 );
 

package/src/components/Navigation/{FloatingSidebar/FloatingSidebar.tsx → Sidebar/Sidebar.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 Sidebar = ({
+  menu,
+  collapsed,
+  setCollapsed,
+}: {
+  menu: MenuItemProps[];
+  collapsed: boolean;
+  setCollapsed: any;
+}) => {
   const {
     StyledSidebarContainer,
     StyledLogoArea,
@@ -79,4 +85,4 @@ export const FloatingSidebar = ({ menu }: { menu: MenuItemProps[] }) => {
   );
 };
 
-export default FloatingSidebar;
+export default Sidebar;

package/src/components/Navigation/{FloatingSidebar → Sidebar}/styles.tsx

@@ -12,13 +12,10 @@ export const createSidebarStyles = (collapsed: boolean) => {
   const StyledSidebarContainer = styled(Stack)(({ theme }) => {
     return {
       height: "100vh",
+      marginLeft: "12px",
+      marginTop: "12px",
       width: collapsed ? "60px" : "240px",
       backgroundColor: theme.palette.surface.defaultBackground,
-      position: "fixed",
-      left: "12px",
-      top: "12px",
-      bottom: "12px",
-      zIndex: 1000,
     };
   });
 
@@ -83,8 +80,6 @@ export const createSidebarStyles = (collapsed: boolean) => {
 
   const StyledListItemIcon = styled(ListItemIcon)(
     ({ collapsed }: { collapsed: boolean }) => ({
-      minWidth: "auto",
-      paddingRight: collapsed ? "0px" : "8px",
       display: "flex",
       justifyContent: "center",
     })

package/src/components/Navigation/exports.ts

@@ -1,17 +1,17 @@
 import { CustomDialog } from "./DialogButton/DialogButton";
 import { DropDownButton } from "./DropDownMenu/DropDownButton";
-import { DropdownMenu } from "./DropDownMenu/DropDownMenu";
 import { DropDownIcon } from "./DropDownMenu/DropDownIcon";
+import { DropdownMenu } from "./DropDownMenu/DropDownMenu";
 import { DropdownMenuItem } from "./DropDownMenu/DropdownMenuItem";
+import { Sidebar } from "./Sidebar/Sidebar";
 import { TabsContainer } from "./TabsContainer/TabsContainer";
-import { FloatingSidebar } from "./FloatingSidebar/FloatingSidebar";
 
 export {
   CustomDialog,
   DropDownButton,
-  DropdownMenu,
   DropDownIcon,
+  DropdownMenu,
   DropdownMenuItem,
+  Sidebar,
   TabsContainer,
-  FloatingSidebar,
 };

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();
-});