@campxdev/react-blueprint 1.1.4 → 1.1.5

package/package.json

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

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

@@ -50,6 +50,8 @@ 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 = {
@@ -61,6 +63,8 @@ export const Icons = {
   CareerIcon,
   ClogWheelIcon,
   DashBoardIcon,
+  VisibilityIcon,
+  VisibilityOffIcon,
   HelpIcon,
   HomeIcon,
   LeftIcon,

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/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: {