@campxdev/react-blueprint 1.0.13 → 1.0.15

package/package.json

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

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

@@ -0,0 +1,21 @@
+export const AlertFilledIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        marginTop: "4px",
+      }}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M18.6663 10.5202C18.6663 15.3067 14.7861 19.1868 9.99967 19.1868C5.21321 19.1868 1.33301 15.3067 1.33301 10.5202C1.33301 5.73371 5.21321 1.85352 9.99967 1.85352C14.7861 1.85352 18.6663 5.73371 18.6663 10.5202ZM13.8747 15.3643C14.1319 15.3643 14.3789 15.2633 14.5624 15.083C14.7428 14.8996 14.8439 14.6526 14.8439 14.3954C14.8439 14.1381 14.7428 13.8911 14.5624 13.7077L11.375 10.5204L14.5624 7.33303C14.6527 7.24272 14.7243 7.13551 14.7732 7.01752C14.822 6.89953 14.8472 6.77307 14.8472 6.64536C14.8472 6.51765 14.822 6.39119 14.7732 6.2732C14.7243 6.15521 14.6527 6.048 14.5624 5.95769C14.4721 5.86739 14.3648 5.79575 14.2469 5.74688C14.1289 5.69801 14.0024 5.67285 13.8747 5.67285C13.747 5.67285 13.6205 5.69801 13.5025 5.74688C13.3845 5.79575 13.2773 5.86739 13.187 5.95769L9.99969 9.14503L6.81236 5.95769C6.62998 5.77531 6.38261 5.67285 6.12469 5.67285C5.86676 5.67285 5.6194 5.77531 5.43702 5.95769C5.25464 6.14007 5.15218 6.38743 5.15218 6.64536C5.15218 6.90329 5.25464 7.15065 5.43702 7.33303L8.62436 10.5204L5.43702 13.7077C5.34672 13.798 5.27508 13.9052 5.22621 14.0232C5.17734 14.1412 5.15218 14.2677 5.15218 14.3954C5.15218 14.5231 5.17734 14.6495 5.22621 14.7675C5.27508 14.8855 5.34672 14.9927 5.43702 15.083C5.52733 15.1733 5.63454 15.245 5.75253 15.2938C5.87052 15.3427 5.99698 15.3679 6.12469 15.3679C6.2524 15.3679 6.37886 15.3427 6.49685 15.2938C6.61484 15.245 6.72205 15.1733 6.81236 15.083L9.99969 11.8957L13.187 15.083C13.3705 15.2633 13.6175 15.3643 13.8747 15.3643Z"
+        fill="#F2353C"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,16 @@
+export const CrossIcon2 = () => {
+  return (
+    <svg
+      width="12"
+      height="13"
+      viewBox="0 0 12 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.05767 6.76985L11.7713 11.4836C11.8429 11.5527 11.8999 11.6354 11.9392 11.7268C11.9784 11.8182 11.9991 11.9165 12 12.0159C12.0008 12.1154 11.9819 12.214 11.9442 12.3061C11.9066 12.3981 11.8509 12.4818 11.7806 12.5521C11.7103 12.6224 11.6266 12.678 11.5346 12.7157C11.4425 12.7534 11.3439 12.7723 11.2444 12.7715C11.145 12.7706 11.0467 12.7499 10.9553 12.7107C10.8639 12.6714 10.7812 12.6143 10.7121 12.5428L5.99831 7.8292L1.28467 12.5428C1.14368 12.6807 0.953997 12.7574 0.756788 12.7563C0.55958 12.7553 0.370757 12.6764 0.231295 12.537C0.0918334 12.3976 0.0129869 12.2088 0.011866 12.0116C0.010745 11.8143 0.0874404 11.6247 0.225308 11.4836L4.93914 6.76985L0.225308 2.05605C0.154479 1.98678 0.098096 1.90414 0.0594234 1.81293C0.0207508 1.72171 0.000556967 1.62374 1.13598e-05 1.52466C-0.000534247 1.42559 0.0185792 1.3274 0.0562448 1.23577C0.0939104 1.14413 0.14938 1.06088 0.219441 0.990831C0.289503 0.920783 0.372765 0.865328 0.464406 0.827679C0.556047 0.79003 0.654246 0.770933 0.753318 0.771496C0.85239 0.772058 0.950365 0.792271 1.04157 0.830959C1.13278 0.869648 1.21541 0.926044 1.28467 0.996885L5.99831 5.7105L10.7121 0.996885C10.8584 0.850633 11.0502 0.777412 11.2417 0.777412C11.4333 0.777412 11.6253 0.850633 11.7713 0.996885C11.9117 1.13735 11.9906 1.32784 11.9906 1.52647C11.9906 1.72509 11.9117 1.91558 11.7713 2.05605L7.05767 6.76985Z"
+        fill="#121212"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,31 @@
+export const InfoFilledIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        marginTop: "4px",
+      }}
+    >
+      <mask
+        id="mask0_194_1775"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="21"
+      >
+        <path d="M20 0.5H0V20.5H20V0.5Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_194_1775)">
+        <path
+          d="M10.1517 1.83301C8.40751 1.83301 6.70251 2.35021 5.25229 3.31922C3.80207 4.28823 2.67176 5.66552 2.00429 7.27692C1.33683 8.88832 1.16219 10.6615 1.50246 12.3721C1.84273 14.0828 2.68263 15.6541 3.91594 16.8874C5.14925 18.1207 6.72059 18.9606 8.43124 19.3009C10.1419 19.6412 11.915 19.4665 13.5264 18.7991C15.1378 18.1316 16.5151 17.0013 17.4841 15.5511C18.4531 14.1008 18.9703 12.3958 18.9703 10.6517C18.9703 8.31282 18.0412 6.06976 16.3874 4.41594C14.7336 2.76211 12.4905 1.83301 10.1517 1.83301ZM10.1517 6.24234C10.3698 6.24234 10.583 6.30701 10.7643 6.42817C10.9456 6.54934 11.087 6.72155 11.1704 6.92304C11.2539 7.12452 11.2757 7.34623 11.2332 7.56013C11.1906 7.77402 11.0856 7.9705 10.9314 8.12471C10.7772 8.27892 10.5807 8.38394 10.3668 8.42649C10.1529 8.46903 9.93119 8.4472 9.72971 8.36374C9.52822 8.28028 9.35601 8.13895 9.23484 7.95762C9.11368 7.77628 9.04901 7.56309 9.04901 7.34501C9.04901 7.05256 9.16518 6.7721 9.37197 6.5653C9.57876 6.35851 9.85923 6.24234 10.1517 6.24234ZM11.805 15.061H8.49835C8.35212 15.061 8.21189 15.0029 8.10849 14.8995C8.0051 14.7961 7.94701 14.6559 7.94701 14.5097C7.94701 14.3635 8.0051 14.2232 8.10849 14.1198C8.21189 14.0164 8.35212 13.9583 8.49835 13.9583H9.04968V10.6517H8.49835C8.35212 10.6517 8.21189 10.5936 8.10849 10.4902C8.0051 10.3868 7.94701 10.2466 7.94701 10.1003C7.94701 9.95412 8.0051 9.81389 8.10849 9.71049C8.21189 9.6071 8.35212 9.54901 8.49835 9.54901H10.703C10.8492 9.54901 10.9895 9.6071 11.0929 9.71049C11.1963 9.81389 11.2543 9.95412 11.2543 10.1003V13.9583H11.8057C11.9519 13.9583 12.0921 14.0164 12.1955 14.1198C12.2989 14.2232 12.357 14.3635 12.357 14.5097C12.357 14.6559 12.2989 14.7961 12.1955 14.8995C12.0921 15.0029 11.9512 15.061 11.805 15.061Z"
+          fill="#4BAABE"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -0,0 +1,21 @@
+export const SuccessFilledIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        marginTop: "4px",
+      }}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M10.0039 1.69824C11.7457 1.69824 13.4484 2.21474 14.8967 3.18243C16.3449 4.15012 17.4737 5.52554 18.1402 7.13474C18.8068 8.74395 18.9812 10.5147 18.6414 12.223C18.3016 13.9313 17.4628 15.5005 16.2312 16.7322C14.9996 17.9638 13.4304 18.8025 11.722 19.1424C10.0137 19.4822 8.24297 19.3078 6.63377 18.6412C5.02456 17.9747 3.64915 16.8459 2.68146 15.3976C1.71377 13.9494 1.19727 12.2467 1.19727 10.5049C1.19762 8.16934 2.12558 5.92954 3.77707 4.27805C5.42856 2.62655 7.66837 1.6986 10.0039 1.69824ZM8.17527 13.3649L6.0186 11.2076C5.85141 11.0288 5.76022 10.7921 5.7643 10.5474C5.76838 10.3027 5.8674 10.0692 6.04046 9.89611C6.21352 9.72305 6.44707 9.62402 6.69178 9.61994C6.93648 9.61586 7.1732 9.70705 7.35193 9.87424L8.87193 11.3956L12.6526 7.61291C12.8313 7.44571 13.068 7.35453 13.3128 7.35861C13.5575 7.36269 13.791 7.46172 13.9641 7.63477C14.1371 7.80783 14.2362 8.04138 14.2402 8.28609C14.2443 8.53079 14.1531 8.76751 13.9859 8.94624L9.53927 13.3969C9.36204 13.5729 9.12239 13.6717 8.8726 13.6717C8.62281 13.6717 8.38315 13.5729 8.20593 13.3969L8.17593 13.3656L8.17527 13.3649Z"
+        fill="#88B053"
+      />
+    </svg>
+  );
+};

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

@@ -0,0 +1,33 @@
+export const WarningFilledIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        marginTop: "4px",
+      }}
+    >
+      <mask
+        id="mask0_194_1734"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="20"
+        height="21"
+      >
+        <path d="M20 0.5H0V20.5H20V0.5Z" fill="white" />
+      </mask>
+      <g mask="url(#mask0_194_1734)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8.67604 2.57149L0.492704 16.7448C0.344646 17.0009 0.266662 17.2914 0.266602 17.5871C0.266542 17.8829 0.344408 18.1735 0.492362 18.4296C0.640315 18.6857 0.853133 18.8983 1.10938 19.0459C1.36564 19.1936 1.65628 19.2712 1.95204 19.2708H18.3167C18.6123 19.2709 18.9026 19.1931 19.1586 19.0454C19.4146 18.8976 19.6271 18.6851 19.7749 18.4292C19.9227 18.1732 20.0005 17.8828 20.0004 17.5873C20.0004 17.2917 19.9225 17.0014 19.7747 16.7455L11.592 2.57149C11.4443 2.3155 11.2318 2.10292 10.9759 1.95511C10.7199 1.80731 10.4296 1.72949 10.134 1.72949C9.83849 1.72949 9.54814 1.80731 9.29221 1.95511C9.03627 2.10292 8.82376 2.3155 8.67604 2.57149ZM11.1914 7.10489C11.1914 6.52021 10.7175 6.04622 10.133 6.04622C9.54854 6.04622 9.07471 6.52021 9.07471 7.10489V11.4396C9.07471 12.0242 9.54854 12.4982 10.133 12.4982C10.7175 12.4982 11.1914 12.0242 11.1914 11.4396V7.10489ZM11.192 15.0476C11.192 15.6323 10.7181 16.1063 10.1334 16.1063C9.54869 16.1063 9.07471 15.6323 9.07471 15.0476C9.07471 14.4629 9.54869 13.9889 10.1334 13.9889C10.7181 13.9889 11.192 14.4629 11.192 15.0476Z"
+          fill="#ED9035"
+        />
+      </g>
+    </svg>
+  );
+};

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

@@ -30,17 +30,22 @@ import { NotificationIcon } from "./IconComponents/NotificationIcon";
 import { PayxIcon } from "./IconComponents/PayxIcon";
 
 import { AdminIcon } from "./IconComponents/AdminIcon";
+import { AlertFilledIcon } from "./IconComponents/AlertFilledIcon";
 import { CampxFullLogoIcon } from "./IconComponents/CampxFullLogoIcon";
+import { CrossIcon2 } from "./IconComponents/CrossIcon2";
+import { InfoFilledIcon } from "./IconComponents/InfoFilledIcon";
 import { PeoplexIcon } from "./IconComponents/PeoplexIcon";
 import { ProductFeaturesIcon } from "./IconComponents/ProductFeaturesIcon";
 import { ProfileIcon } from "./IconComponents/ProfileIcon";
 import { RightIcon } from "./IconComponents/RightIcon";
+import { SaveIcon } from "./IconComponents/SaveIcon";
+import { ShareIcon } from "./IconComponents/ShareIcon";
+import { SuccessFilledIcon } from "./IconComponents/SuccessFilledIcon";
 import { TicketsIcon } from "./IconComponents/TicketsIcon";
 import { UmsIcon } from "./IconComponents/UmsIcon";
 import { UnCheckedCheckboxIcon } from "./IconComponents/UncheckCheckBoxIcon";
 import { UnCheckedRadioIcon } from "./IconComponents/UncheckedRadioIcon";
-import { ShareIcon } from "./IconComponents/ShareIcon";
-import { SaveIcon } from "./IconComponents/SaveIcon";
+import { WarningFilledIcon } from "./IconComponents/WarningFilledIcon";
 
 export const Icons = {
   AppsIcon,
@@ -53,6 +58,11 @@ export const Icons = {
   ExamResultIcon,
   NotificationIcon,
   RightIcon,
+  SuccessFilledIcon,
+  InfoFilledIcon,
+  WarningFilledIcon,
+  AlertFilledIcon,
+  CrossIcon2,
   LogoutIcon,
   TicketsIcon,
   FilterIcon,

package/src/components/DataDisplay/export.ts

@@ -1,6 +1,5 @@
-import { Accordion } from "./Accordion/Accordion";
-import { DataTable } from "./DataTable/DataTable";
-
-export * from "./Card/Card";
+export * from "./Accordion/Accordion";
 export * from "./Avatar/Avatar";
-export { Accordion, DataTable };
+export * from "./Card/Card";
+export * from "./DataTable/DataTable";
+export * from "./Typography/Typography";

package/src/components/Feedback/Snackbar/Snackbar.tsx

@@ -0,0 +1,108 @@
+import {
+  Box,
+  IconButton,
+  Snackbar as MuiSnackbar,
+  SnackbarProps as MuiSnackbarProps,
+  Stack,
+  useTheme,
+} from "@mui/material";
+import { Typography } from "../../DataDisplay/Typography/Typography";
+import { Icons } from "../../export";
+
+export type Variant = "success" | "info" | "warning" | "alert";
+
+export type SnackbarProps = {
+  variant: Variant;
+  message: string;
+} & MuiSnackbarProps;
+
+export const Snackbar = ({ ...props }: SnackbarProps) => {
+  const theme = useTheme();
+  const getColor = (variant: Variant) => {
+    switch (variant) {
+      case "success":
+        return theme.palette.highlight.highlightGreen;
+      case "alert":
+        return theme.palette.highlight.highlightRed;
+      case "info":
+        return theme.palette.highlight.highlightBlue;
+      case "warning":
+        return theme.palette.highlight.highlightOrange;
+      default:
+        return theme.palette.highlight.highlightGreen;
+    }
+  };
+  const getBackGroundColor = (variant: Variant) => {
+    switch (variant) {
+      case "success":
+        return theme.palette.highlight.greenBackground;
+      case "alert":
+        return theme.palette.highlight.redBackground;
+      case "info":
+        return theme.palette.highlight.blueBackground;
+      case "warning":
+        return theme.palette.highlight.orangeBackground;
+      default:
+        return theme.palette.highlight.greenBackground;
+    }
+  };
+
+  const getIcon = (variant: Variant) => {
+    switch (variant) {
+      case "success":
+        return <Icons.SuccessFilledIcon />;
+      case "alert":
+        return <Icons.AlertFilledIcon />;
+      case "info":
+        return <Icons.InfoFilledIcon />;
+      case "warning":
+        return <Icons.WarningFilledIcon />;
+    }
+  };
+
+  const handleClose = (event: React.SyntheticEvent<any> | Event) => {
+    if (props.onClose) {
+      props.onClose(event, "clickaway");
+    }
+  };
+
+  return (
+    <MuiSnackbar open={props.open} onClose={props.onClose} {...props}>
+      <Stack
+        direction="row"
+        borderRadius="5px"
+        justifyContent="space-between"
+        alignItems="flex-start"
+        gap={1}
+        sx={{
+          height: "90px",
+          width: "480px",
+          backgroundColor: getBackGroundColor(props.variant),
+        }}
+      >
+        <Box
+          sx={{
+            width: "10px",
+            height: "100%",
+            backgroundColor: getColor(props.variant),
+            borderRadius: "5px 0px 0px 5px",
+          }}
+        />
+        <Stack width="100%" height="100%" direction={"row"} alignItems="center">
+          <Stack direction="row" gap={1} justifyContent="space-evenly">
+            {getIcon(props.variant)}
+            <Stack direction={"column"}>
+              <Typography variant="subtitle2">
+                {props.variant.toUpperCase()}
+              </Typography>
+              <Typography variant="body2">{props.message}</Typography>
+            </Stack>
+          </Stack>
+        </Stack>
+        <IconButton sx={{ margin: "5px" }} onClick={handleClose}>
+          <Icons.CrossIcon2 />
+        </IconButton>
+      </Stack>
+    </MuiSnackbar>
+  );
+};

package/src/components/Feedback/exports.ts

@@ -1,3 +1,4 @@
+export * from "./Snackbar/Snackbar";
 export * from "./Spinner/Spinner";
 export * from "./Tooltip/Tooltip";
 export * from "./Tutorial/Tutorial";

package/src/stories/Feedback/Snackbar.stories.tsx

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Snackbar } from "../../components/Feedback/Snackbar/Snackbar";
+
+export default {
+  title: "Feedback/Snackbar",
+  component: Snackbar,
+  tags: ["autodocs"],
+  argTypes: {
+    severity: {
+      control: {
+        type: "select",
+        options: ["success", "info", "warning", "error"],
+      },
+    },
+    message: { control: "text" },
+    open: { control: "boolean" },
+    onClose: { action: "closed" },
+  },
+} as Meta<typeof Snackbar>;
+
+export const SnackbarSuccess: StoryObj<typeof Snackbar> = {
+  render: (args) => <Snackbar {...args} />,
+  args: {
+    variant: "success",
+    message: "Success or error or info or warning",
+    open: true,
+  },
+};

package/src/themes/commonTheme.ts

@@ -196,6 +196,7 @@ export const getCommonTheme = (mode: Theme) => {
             fontSize: "14px ",
             fontFamily: "Poppins",
             fontWeight: 600,
+            maxWidth: "350px",
             "&:hover": {
               boxShadow: "none ",
               "@media (hover: none )": {
@@ -210,6 +211,12 @@ export const getCommonTheme = (mode: Theme) => {
             },
             "&$disabled": { boxShadow: "none" },
           },
+          text: {
+            padding: "0px",
+            "&:hover": {
+              backgroundColor: "transparent",
+            },
+          },
         },
       },
       MuiTextField: {
@@ -228,7 +235,11 @@ export const getCommonTheme = (mode: Theme) => {
                 display: "none",
               },
             },
+            "& input:-webkit-autofill": {
+              height: "7px",
+            },
             minWidth: "200px",
+            width: "350px",
             margin: "5px 0px",
           },
         },
@@ -296,6 +307,14 @@ export const getCommonTheme = (mode: Theme) => {
           },
         },
       },
+      MuiSnackbar: {
+        defaultProps: {
+          anchorOrigin: {
+            vertical: "bottom",
+            horizontal: "right",
+          },
+        },
+      },
       MuiAutocomplete: {
         styleOverrides: {
           root: {