@campxdev/react-blueprint 0.1.37 → 0.1.39

package/package.json

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

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

@@ -13,6 +13,7 @@ export const StyledHeader = styled("header")(
     justifyContent: "space-between",
     padding: "0 32px",
     borderRadius: "8px",
+    marginTop: "12px",
   })
 );
 

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

@@ -16,7 +16,7 @@ export interface MenuItemProps {
   iconType?: string;
 }
 
-export const FloatingSidebar = ({
+export const Sidebar = ({
   menu,
   collapsed,
   setCollapsed,
@@ -85,4 +85,4 @@ export const FloatingSidebar = ({
   );
 };
 
-export default FloatingSidebar;
+export default Sidebar;

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

@@ -12,6 +12,8 @@ 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,
     };
@@ -78,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/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/components/Layout/AppLayout/AppLayout.tsx

@@ -1,42 +0,0 @@
-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/stories/Layout/AppLayout.stories.tsx

@@ -1,31 +0,0 @@
-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: {
-
-  },
-};