@campxdev/react-blueprint 1.1.3 → 1.1.5

package/package.json

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

package/src/components/Assets/Icons/IconComponents/ArrowBackIcon.tsx

@@ -8,7 +8,7 @@ export const ArrowBackIcon = ({ size = 16 }) => {
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox="0 0 16 17"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/Assets/Icons/IconComponents/CollapseIcon.tsx

@@ -8,7 +8,7 @@ export const CollapseIcon = ({ size = 16 }) => {
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/Assets/Icons/IconComponents/ExpandIcon.tsx

@@ -8,7 +8,7 @@ export const ExpandIcon = ({ size = 16 }) => {
     <svg
       width={size}
       height={size}
-      viewBox={`0 0 ${size} ${size}`}
+      viewBox="0 0 16 16"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path

package/src/components/Assets/Icons/IconComponents/RedoIcon.tsx

@@ -0,0 +1,29 @@
+import { useTheme } from "@mui/material";
+
+export const RedoIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox={`0 0 20 20`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12.612 4.01719H5.94531C5.75303 4.01719 5.56862 4.09357 5.43266 4.22954C5.2967 4.3655 5.22031 4.54991 5.22031 4.74219C5.22031 4.93447 5.2967 5.11888 5.43266 5.25484C5.56862 5.3908 5.75303 5.46719 5.94531 5.46719H12.612C13.5248 5.46719 14.4002 5.82979 15.0456 6.47523C15.691 7.12067 16.0536 7.99607 16.0536 8.90885C16.0536 9.82164 15.691 10.697 15.0456 11.3425C14.4002 11.9879 13.5248 12.3505 12.612 12.3505H3.44531C3.25303 12.3505 3.06862 12.4269 2.93266 12.5629C2.7967 12.6988 2.72031 12.8832 2.72031 13.0755C2.72031 13.2678 2.7967 13.4522 2.93266 13.5882C3.06862 13.7241 3.25303 13.8005 3.44531 13.8005H12.612C13.9093 13.8005 15.1535 13.2851 16.0709 12.3678C16.9883 11.4504 17.5036 10.2062 17.5036 8.90885C17.5036 7.6115 16.9883 6.36729 16.0709 5.44992C15.1535 4.53256 13.9093 4.01719 12.612 4.01719Z"
+        fill={color}
+        stroke="#323167"
+        stroke-width="0.2"
+      />
+      <path
+        d="M5.35888 10.2672C5.26348 10.2668 5.16895 10.2854 5.08082 10.3219C4.99263 10.3584 4.91261 10.4122 4.84543 10.48C4.84537 10.4801 4.84531 10.4801 4.84524 10.4802L2.71227 12.6131L2.71185 12.6136C2.57712 12.7499 2.50156 12.9339 2.50156 13.1255C2.50156 13.3172 2.57712 13.5012 2.71185 13.6375L2.71227 13.6379L4.845 15.7706C4.91172 15.8396 4.99146 15.8946 5.07961 15.9325C5.16804 15.9706 5.26317 15.9906 5.35943 15.9915C5.4557 15.9924 5.55117 15.9741 5.64029 15.9377C5.7294 15.9013 5.81038 15.8475 5.87848 15.7794C5.94659 15.7114 6.00046 15.6305 6.03695 15.5414C6.07345 15.4523 6.09184 15.3569 6.09105 15.2606C6.09026 15.1643 6.0703 15.0692 6.03235 14.9807C5.99451 14.8925 5.93953 14.8127 5.87061 14.7459L4.25024 13.1255L5.87119 11.5046L5.87161 11.5042C6.00634 11.3678 6.0819 11.1839 6.0819 10.9922C6.0819 10.8005 6.00634 10.6166 5.87161 10.4802L5.87155 10.4802C5.80445 10.4124 5.72452 10.3586 5.63643 10.3221C5.54846 10.2856 5.45412 10.2669 5.35888 10.2672ZM5.35888 10.2672C5.35902 10.2672 5.35916 10.2672 5.35931 10.2672L5.35881 10.3672L5.35846 10.2672C5.3586 10.2672 5.35874 10.2672 5.35888 10.2672Z"
+        fill={color}
+        stroke="#323167"
+        stroke-width="0.2"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/VisibiityOffIcon.tsx

@@ -0,0 +1,27 @@
+import { useTheme } from "@mui/material";
+
+export const VisibilityOffIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 16"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g opacity="0.5">
+        <path
+          d="M14.1191 6.7759C14.5889 6.38566 14.9815 5.98185 15.3013 5.60619C15.5012 5.3713 15.4682 5.022 15.2289 4.82702L15.2289 4.82702C14.9909 4.63308 14.6375 4.66423 14.4386 4.89781L14.4386 4.89781C13.3705 6.15247 11.437 7.7143 8.39892 7.7143C5.36076 7.7143 3.42726 6.15246 2.35914 4.8978L2.35914 4.8978C2.16029 4.66422 1.80691 4.63307 1.56886 4.827L14.1191 6.7759ZM14.1191 6.7759C14.1264 6.78787 14.1333 6.8002 14.1398 6.81287L14.1398 6.81293L15.3724 9.22448L15.3724 9.22448C15.5126 9.49877 15.398 9.83078 15.1206 9.96648L15.1206 9.96649C14.8443 10.1016 14.507 9.99292 14.3675 9.71997L14.4565 9.67445L14.3675 9.71996L13.2046 7.44464C12.4682 7.91518 11.5948 8.32026 10.5743 8.56629L11.1071 11.1722C11.1687 11.4734 10.9687 11.7631 10.6657 11.8224C10.3634 11.8816 10.0661 11.6901 10.0047 11.3896L10.0047 11.3896L9.46705 8.76005C9.12496 8.79822 8.76899 8.8186 8.39892 8.8186C8.02879 8.8186 7.67281 8.79822 7.33066 8.76004L6.79308 11.3896L6.69511 11.3696L6.79308 11.3896C6.73164 11.6901 6.43433 11.8816 6.13201 11.8224C5.82908 11.7631 5.62907 11.4734 5.69064 11.1722L5.78862 11.1922L5.69064 11.1722L6.22341 8.56623C5.38442 8.36396 4.64476 8.05415 3.99891 7.68879L2.37696 9.80438L2.37695 9.80439C2.19035 10.0477 1.83898 10.0963 1.59134 9.91461L1.59132 9.9146C1.34241 9.73191 1.29105 9.38484 1.47868 9.14007L1.47869 9.14006L3.06069 7.0766C2.41767 6.59736 1.89937 6.0794 1.4965 5.60618C1.29654 5.37129 1.32953 5.02199 1.56886 4.827L14.1191 6.7759Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.2"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/IconComponents/VisibilityIcon.tsx

@@ -0,0 +1,33 @@
+import { useTheme } from "@mui/material";
+
+export const VisibilityIcon = ({ size = 16 }) => {
+  const theme = useTheme();
+  const color = theme.palette.text.primary;
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 17 16"
+      style={{
+        fill: color,
+        stroke: color,
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g opacity="0.5">
+        <path
+          d="M11.3848 7.99974V7.99968C11.3848 7.40903 11.2096 6.83164 10.8815 6.34053C10.5533 5.84942 10.0869 5.46664 9.54121 5.24061C8.99552 5.01458 8.39505 4.95543 7.81575 5.07067C7.23644 5.1859 6.70432 5.47032 6.28666 5.88798C5.869 6.30563 5.58458 6.83776 5.46935 7.41706C5.35412 7.99637 5.41326 8.59684 5.63929 9.14253C5.86532 9.68822 6.2481 10.1546 6.73921 10.4828C7.23032 10.8109 7.80771 10.9861 8.39836 10.9861H8.39842C9.19031 10.9856 9.94965 10.6709 10.5096 10.1109C11.0696 9.55096 11.3843 8.79163 11.3848 7.99974ZM7.40606 6.51406C7.69973 6.31773 8.04503 6.21287 8.39828 6.21275C8.87197 6.21329 9.32612 6.40167 9.66112 6.73657C9.99612 7.07149 10.1846 7.52559 10.1853 7.99929C10.1853 8.35254 10.0805 8.69785 9.88427 8.99157C9.688 9.28533 9.40903 9.5143 9.08264 9.64952C8.75625 9.78474 8.39709 9.82015 8.05057 9.75126C7.70406 9.68237 7.38575 9.51229 7.1359 9.2625C6.88605 9.01272 6.71587 8.69446 6.64688 8.34797C6.5779 8.00147 6.6132 7.6423 6.74833 7.31587C6.88346 6.98944 7.11235 6.71041 7.40606 6.51406Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.2"
+        />
+        <path
+          d="M1.81217 10.0492L1.81206 10.0492L1.81477 10.0535C3.45532 12.6219 5.8504 14.113 8.39878 14.113C10.9408 14.113 13.3359 12.6218 14.9764 10.0535L14.9765 10.0536L14.979 10.0492C15.3349 9.42477 15.5221 8.71841 15.5221 7.99966C15.5221 7.28091 15.3349 6.57455 14.979 5.95014L14.9791 5.95007L14.9764 5.94583C13.3359 3.37748 10.9403 1.88633 8.39878 1.88633C5.85728 1.88633 3.46174 3.37748 1.81487 5.94568L1.81475 5.94561L1.81217 5.95014C1.45621 6.57455 1.26902 7.28091 1.26902 7.99966C1.26902 8.71841 1.45621 9.42477 1.81217 10.0492ZM2.83152 6.5904C4.25818 4.35317 6.28873 3.08633 8.39878 3.08633C10.5088 3.08633 12.5394 4.35317 13.966 6.59039C14.2029 7.02223 14.3271 7.50683 14.3271 7.99939C14.3271 8.49196 14.2029 8.97656 13.966 9.4084C12.5394 11.6456 10.5088 12.9125 8.39878 12.9125C6.28872 12.9125 4.25817 11.6461 2.83153 9.4084C2.59466 8.97656 2.47048 8.49196 2.47048 7.99939C2.47048 7.50683 2.59466 7.02223 2.83152 6.5904Z"
+          fill="#121212"
+          stroke="#121212"
+          stroke-width="0.2"
+        />
+      </g>
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -40,6 +40,7 @@ import { InfoFilledIcon } from "./IconComponents/InfoFilledIcon";
 import { PeoplexIcon } from "./IconComponents/PeoplexIcon";
 import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
+import { RedoIcon } from "./IconComponents/RedoIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
 import { SaveIcon } from "./IconComponents/SaveIcon";
 import { SearchIcon } from "./IconComponents/SearchIcon";
@@ -49,9 +50,12 @@ import { TicketsIcon } from "./IconComponents/TicketsIcon";
 import { UmsIcon } from "./IconComponents/UmsIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
+import { VisibilityOffIcon } from "./IconComponents/VisibiityOffIcon";
+import { VisibilityIcon } from "./IconComponents/VisibilityIcon";
 import { WarningFilledIcon } from "./IconComponents/WarningFilledIcon";
 
 export const Icons = {
+  RedoIcon,
   ArrowBackIcon,
   CollapseIcon,
   ExpandIcon,
@@ -59,6 +63,8 @@ export const Icons = {
   CareerIcon,
   ClogWheelIcon,
   DashBoardIcon,
+  VisibilityIcon,
+  VisibilityOffIcon,
   HelpIcon,
   HomeIcon,
   LeftIcon,

package/src/components/DataDisplay/Typography/Typography.tsx

@@ -5,6 +5,14 @@ import {
 
 export type TypographyProps = {} & MuiTypographyProps;
 
-export const Typography = ({ variant, children }: TypographyProps) => {
-  return <MuiTypography variant={variant}>{children}</MuiTypography>;
+export const Typography = ({
+  variant,
+  children,
+  ...props
+}: TypographyProps) => {
+  return (
+    <MuiTypography variant={variant} {...props}>
+      {children}
+    </MuiTypography>
+  );
 };

package/src/components/Input/PasswordField/PasswordField.tsx

@@ -0,0 +1,67 @@
+import {
+  IconButton,
+  InputAdornment,
+  TextField as MuiTextField,
+  TextFieldProps as MuiTextFieldProps,
+  StackProps,
+} from "@mui/material";
+import { useState } from "react";
+import { VisibilityOffIcon } from "../../Assets/Icons/IconComponents/VisibiityOffIcon";
+import { VisibilityIcon } from "../../Assets/Icons/IconComponents/VisibilityIcon";
+import { Typography } from "../../export";
+import { LabelWrapper } from "../LabelWrapper/LabelWrapper";
+
+export type PasswordFieldProps = {
+  containerProps?: StackProps;
+  description?: string;
+} & MuiTextFieldProps;
+
+export const PasswordField = ({
+  name,
+  label,
+  value,
+  onChange,
+  required = false,
+  containerProps,
+  description,
+  type = "text",
+  ...rest
+}: PasswordFieldProps) => {
+  const [showPassword, setShowPassword] = useState(false);
+  const handleClickShowPassword = () => {
+    setShowPassword((prev) => !prev);
+  };
+  return (
+    <LabelWrapper
+      label={label}
+      required={required}
+      name={name}
+      containerProps={containerProps}
+    >
+      <MuiTextField
+        required={required}
+        id={name}
+        value={value}
+        label={label}
+        name={name}
+        onChange={onChange}
+        type={!showPassword ? "password" : "text"}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton
+                aria-label="toggle password visibility"
+                onClick={handleClickShowPassword}
+                edge="end"
+              >
+                {showPassword ? <VisibilityIcon /> : <VisibilityOffIcon />}
+              </IconButton>
+            </InputAdornment>
+          ),
+        }}
+        {...rest}
+      />
+      <Typography variant="caption">{description}</Typography>
+    </LabelWrapper>
+  );
+};

package/src/components/Input/export.ts

@@ -1,5 +1,6 @@
 export * from "./Button/Button";
 export * from "./MultiCheckBox/MultiCheckBox";
+export * from "./PasswordField/PasswordField";
 export * from "./SearchBar/SearchBar";
 export * from "./SingleCheckBox/SIngleCheckBox";
 export * from "./SingleSelect/SingleSelect";

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

@@ -0,0 +1,34 @@
+import { useMatch, useResolvedPath } from "react-router-dom";
+import { Typography } from "../../export";
+import { DropdownMenuItem } from "./interfaces";
+import { createSidebarStyles } from "./styles";
+
+export const SidebarDropdownItem = ({
+  dropdownItem,
+  collapsed,
+  index,
+}: {
+  dropdownItem: DropdownMenuItem;
+  collapsed: boolean;
+  index: number;
+}) => {
+  const { name, path, permissionKey } = dropdownItem;
+
+  let resolved = useResolvedPath(path);
+  let match = useMatch({ path: resolved.pathname, end: false });
+
+  const { StyledListItem, StyledLinkButton, StyledListItemButton } =
+    createSidebarStyles(collapsed);
+
+  return (
+    <StyledListItem key={index} disablePadding className="listItem">
+      <StyledLinkButton to={path} match={match}>
+        {!collapsed && (
+          <StyledListItemButton collapsed={collapsed}>
+            <Typography variant="button1">{name}</Typography>
+          </StyledListItemButton>
+        )}
+      </StyledLinkButton>
+    </StyledListItem>
+  );
+};

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

@@ -3,6 +3,7 @@ import { motion } from "framer-motion";
 import { useState } from "react";
 import { useMatch, useResolvedPath } from "react-router-dom";
 import { Icons, Tooltip, Typography } from "../../export";
+import { SidebarDropdownItem } from "./DropdownItem";
 import { MenuItemProps } from "./interfaces";
 import { createSidebarStyles } from "./styles";
 
@@ -10,13 +11,11 @@ export const SideBarMenuItem = ({
   menuItem,
   index,
   collapsed,
-  isDropdownMenuItem = false,
   newMenuClickHandler,
 }: {
   menuItem: MenuItemProps;
   index: number;
   collapsed: boolean;
-  isDropdownMenuItem?: boolean;
   newMenuClickHandler: (newMenu: MenuItemProps[], newMenuTitle: string) => void;
 }) => {
   const {
@@ -28,7 +27,8 @@ export const SideBarMenuItem = ({
     HoverIcon,
   } = createSidebarStyles(collapsed);
 
-  const { path, icon: Icon, name, menu: newMenu, dropdownMenu } = menuItem;
+  const { name, path, icon: Icon, menu: newMenu, dropdownMenu } = menuItem;
+
   let resolved = useResolvedPath(path);
   let match = useMatch({ path: resolved.pathname, end: false });
 
@@ -61,7 +61,7 @@ export const SideBarMenuItem = ({
             <Typography variant="button1">{name}</Typography>
           </Stack>
           <HoverIcon display={"flex"} className="hoverIcon">
-            <Icons.ClogWheelIcon />
+            <Icons.RedoIcon size={18} />
           </HoverIcon>
         </Stack>
       </StyledListItemButton>
@@ -94,9 +94,7 @@ export const SideBarMenuItem = ({
   const DefaultTile = () => {
     return (
       <StyledListItemButton collapsed={collapsed}>
-        {!isDropdownMenuItem && (
-          <StyledListItemIcon collapsed={collapsed}>{Icon}</StyledListItemIcon>
-        )}
+        <StyledListItemIcon collapsed={collapsed}>{Icon}</StyledListItemIcon>
         <Typography variant="button1">{name}</Typography>
       </StyledListItemButton>
     );
@@ -132,13 +130,10 @@ export const SideBarMenuItem = ({
       {expanded && dropdownMenu && dropdownMenu.length > 0 && (
         <Stack>
           {dropdownMenu?.map((item: any, index: number) => (
-            <SideBarMenuItem
-              menuItem={item}
-              index={index}
-              key={index}
+            <SidebarDropdownItem
+              dropdownItem={item}
               collapsed={collapsed}
-              isDropdownMenuItem={true}
-              newMenuClickHandler={newMenuClickHandler}
+              index={index}
             />
           ))}
         </Stack>

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

@@ -62,7 +62,7 @@ export const Sidebar = ({
     StyledMenuBar,
     StyledCollapsibleSection,
     StyledMenuHeaderButton,
-  } = useMemo(() => createSidebarStyles(collapsed), [collapsed, currentMenu]);
+  } = useMemo(() => createSidebarStyles(collapsed), [collapsed]);
 
   return (
     <motion.div

package/src/components/Navigation/Sidebar/interfaces.ts

@@ -6,7 +6,13 @@ export interface MenuItemProps {
   icon: ReactElement;
   permissionKey?: string;
   menu?: MenuItemProps[];
-  dropdownMenu?: MenuItemProps[];
+  dropdownMenu?: DropdownMenuItem[];
+}
+
+export interface DropdownMenuItem {
+  name: string;
+  path: string;
+  permissionKey?: string;
 }
 
 export interface MenuHistory {

package/src/stories/Input/Password.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta } from "@storybook/react";
+import {
+  PasswordField,
+  PasswordFieldProps,
+} from "../../components/Input/PasswordField/PasswordField";
+
+export default {
+  title: "Input/PasswordField",
+  component: PasswordField,
+  tags: ["autodocs"],
+  argTypes: {},
+} as Meta<typeof PasswordField>;
+
+export const Default = {
+  render: (args: PasswordFieldProps) => <PasswordField {...args} />,
+  args: {
+    label: "Password",
+    required: true,
+    value: "KAHPS9888B",
+    helperText: "Password should be alpha-numeric with special character",
+  },
+};

package/src/stories/Input/TextField.stories.tsx

@@ -132,17 +132,6 @@ export const WarningInput = {
   },
 };
 
-export const PassowrdInput = {
-  render: (args: TextFieldProps) => <TextField {...args} />,
-  args: {
-    label: "Password",
-    type: "password",
-    required: true,
-    value: "KAHPS9888B",
-    helperText: "Password should be alpha-numeric with special character",
-  },
-};
-
 export const InfoInput = {
   render: (args: TextFieldProps) => <TextField {...args} />,
   args: {

package/src/themes/commonTheme.ts

@@ -328,6 +328,13 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiFormHelperText: {
+        styleOverrides: {
+          root: {
+            marginLeft: "0px",
+          },
+        },
+      },
       MuiSnackbar: {
         defaultProps: {
           anchorOrigin: {