@campxdev/react-blueprint 0.1.22 → 0.1.23

package/src/components/Layout/Header/HeaderActions/UserBox.tsx

@@ -1,7 +1,7 @@
 import { Stack, Typography, useTheme } from "@mui/material";
 import { ReactNode } from "react";
-import { DropdownMenu } from "../../../DropDownMenu/DropDownMenu";
-import { DropdownMenuItem } from "../../../DropDownMenu/DropdownMenuItem";
+import { DropdownMenu } from "../../../Navigation/DropDownMenu/DropDownMenu";
+import { DropdownMenuItem } from "../../../Navigation/DropDownMenu/DropdownMenuItem";
 import { Icons } from "../../../export";
 import { StyledAvatar, StyledTypography } from "../styles/styles";
 // import {

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

@@ -33,7 +33,7 @@ export const Main = styled("main", {
     borderRadius: "3px",
   },
   "@media (max-width: 1024px)": {
-    marginLeft: 0,
+    marginLeft: "-50px",
   },
 }));
 

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

@@ -2,7 +2,7 @@ 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 "../../Typography/Typography";
+import { Typography } from "../../DataDisplay/Typography/Typography";
 import { Icons } from "../../export";
 import {
   StyledBox,

package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropDownButton.tsx

@@ -1,5 +1,5 @@
 import { KeyboardArrowDown } from "@mui/icons-material";
-import { Button, ButtonProps } from "../Input/Button/Button";
+import { Button, ButtonProps } from "../../Input/Button/Button";
 
 export const DropDownButton = (props: ButtonProps) => {
   return (

package/src/components/{DropDownMenu → Navigation/DropDownMenu}/DropDownMenu.stories.tsx

@@ -1,7 +1,7 @@
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import { IconButton } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { Icons } from "../export";
+import { Icons } from "../../export";
 import { DropDownButton } from "./DropDownButton";
 import { DropDownIcon } from "./DropDownIcon";
 import { DropdownMenu, DropdownMenuProps } from "./DropDownMenu";

package/src/components/{TabsContainer → Navigation/TabsContainer}/TabsContainer.stories.tsx

@@ -1,6 +1,6 @@
 import { Box } from "@mui/material";
 import { Meta, StoryObj } from "@storybook/react";
-import { PageContent } from "../Layout/PageContent/PageContent";
+import { PageContent } from "../../Layout/PageContent/PageContent";
 import { TabsContainer, TabsContainerProps } from "./TabsContainer";
 
 // Define the default export with Meta type including the component type

package/src/components/export.ts

@@ -1,6 +1,3 @@
-export * from "../utils/campxAxios";
-export * from "./DropDownMenu/DropDownButton";
-export * from "./DropDownMenu/DropDownMenu";
 export * from "./Icons/export";
 export * from "./Input/Button/Button";
 export * from "./Input/SingleSelect/SingleSelect";
@@ -12,3 +9,5 @@ export * from "./Layout/Header/AppsMenu";
 export * from "./Layout/LayoutWrapper/LayoutWrapper";
 export * from "./Layout/PageContent/PageContent";
 export * from "./Layout/SideNavigation/SideNavigation";
+export * from "./Navigation/DropDownMenu/DropDownButton";
+export * from "./Navigation/DropDownMenu/DropDownMenu";

package/src/themes/darkTheme.ts

@@ -11,6 +11,7 @@ export const darkTheme = createTheme({
     text: DarkColorTokens.text,
     highlight: DarkColorTokens.highlight,
     grey: DarkColorTokens.grey,
+    info: DarkColorTokens.info,
     // defaultProfileIcon: {
     //   main: "#293640", // Default profile images and icons color for dark mode
     // },

package/src/themes/lightTheme.ts

@@ -11,6 +11,7 @@ export const lightTheme = createTheme({
     text: LightColorTokens.text,
     highlight: LightColorTokens.highlight,
     grey: LightColorTokens.grey,
+    info: LightColorTokens.info,
     // defaultProfileIcon: {
     //   main: "#BDD6E8", // Default profile images and icons color
     // },

package/src/themes/typography.stories.tsx

@@ -1,6 +1,6 @@
 // src/stories/Typography.stories.jsx
 import { Stack } from "@mui/material";
-import { Typography } from "../components/Typography/Typography";
+import { Typography } from "../components/DataDisplay/Typography/Typography";
 // Update path as necessary
 
 export default {

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "cSpell.words": ["Heebo"]
-}

package/src/components/Input/CheckBox/CheckBox.tsx

@@ -1,72 +0,0 @@
-import {
-  FormControlLabel,
-  Checkbox as MuiCheckbox,
-  CheckboxProps as MuiCheckboxProps,
-  styled,
-} from "@mui/material";
-import { ReactNode } from "react";
-
-export type CheckboxProps = {
-  label: ReactNode;
-} & MuiCheckboxProps;
-
-export const CheckBox = ({
-  checked,
-  label,
-  onChange,
-  ...rest
-}: CheckboxProps) => {
-  return (
-    <FormControlLabel
-      control={
-        <MuiCheckbox
-          checked={checked}
-          checkedIcon={<BpCheckedIcon />}
-          icon={<BpIcon />}
-          onChange={onChange}
-          {...rest}
-        />
-      }
-      label={label}
-    />
-  );
-};
-
-export const BpIcon = styled("span")(({ theme }) => ({
-  borderRadius: 3,
-  width: 20,
-  height: 20,
-  marginLeft: "2px",
-  border: `1px solid ${theme.palette.secondary.main}`,
-  backgroundColor: theme.palette.background.paper,
-  ".Mui-focusVisible &": {
-    outline: `2px auto ${theme.palette.secondary.main}`,
-    outlineOffset: 2,
-  },
-  "input:hover ~ &": {
-    backgroundColor: theme.palette.background.paper,
-  },
-  "input:disabled ~ &": {
-    boxShadow: "none",
-    background: theme.palette.secondary.main,
-  },
-}));
-
-export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  border: `1px solid ${theme.palette.primary.main}`,
-  display: "flex",
-  justifyContent: "center",
-  alignItems: "center",
-  "&:before": {
-    content: '""',
-    display: "block",
-    width: 8,
-    height: 8,
-    padding: 5,
-    background: theme.palette.primary.main,
-  },
-  "input:hover ~ &": {
-    backgroundColor: theme.palette.background.paper,
-  },
-}));

package/src/components/Layout/Spinner/Spinner.css

@@ -1,32 +0,0 @@
-.spinner {
-    width: 40px;
-    height: 40px;
-    border-radius: 50%;
-    position: relative;
-    animation: rotate 1s linear infinite;
-    scale: 0.4;
-  }
-  .spinner::before , .spinner::after {
-    content: "";
-    box-sizing: border-box;
-    position: absolute;
-    inset: 0px;
-    border-radius: 50%;
-    border: 5px solid #7D60D9;
-    animation: prixClipFix 1.5s linear infinite ;
-  }
-  .spinner::after{
-    transform: rotate3d(90, 90, 0, 180deg );
-    border-color: #FF3D00;
-  }
-
-  @keyframes rotate {
-    0%   {transform: rotate(0deg)}
-    100%   {transform: rotate(360deg)}
-  }
-
-  @keyframes prixClipFix {
-      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
-      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
-      75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
-  }