mainstack-design-system 0.0.0

package/src/components/notifications/Banner.tsx

@@ -0,0 +1,175 @@
+/** @format */
+
+import { Flex, Text } from "@chakra-ui/react";
+import { useState } from "react";
+import Colors from "components/styleGuide/Colors";
+import "assets/styles/index.css";
+import { CloseIcon, InfoFilledIcon, InfoGradientFilledIcon } from "icons";
+import Button from "components/Button";
+
+interface Props {
+  variant:
+    | "blue"
+    | "red"
+    | "green"
+    | "yellow"
+    | "purple"
+    | "orange"
+    | "gradient";
+  onProceed: () => void;
+  message: string;
+  buttonText?: string;
+  hasProceedButton?: boolean;
+  hasCloseButton?: boolean;
+}
+const Banner = ({
+  variant,
+  onProceed,
+  message,
+  buttonText,
+  hasProceedButton = true,
+  hasCloseButton = true,
+}: Props) => {
+  const [isHidden, setIsHidden] = useState(false);
+  const variants = {
+    blue: {
+      bgColor: Colors.blue50,
+      iconColor: Colors.blue900,
+      textColor: Colors.blue900,
+      closeButtonColor: Colors.blue900,
+      button: {
+        color: Colors.blue50,
+        bgColor: Colors.blue900,
+      },
+    },
+    red: {
+      bgColor: Colors.red50,
+      iconColor: Colors.red900,
+      textColor: Colors.red900,
+      closeButtonColor: Colors.red900,
+      button: {
+        color: Colors.red50,
+        bgColor: Colors.red900,
+      },
+    },
+    green: {
+      bgColor: Colors.green50,
+      iconColor: Colors.green900,
+      textColor: Colors.green900,
+      closeButtonColor: Colors.green900,
+      button: {
+        color: Colors.green50,
+        bgColor: Colors.green900,
+      },
+    },
+    yellow: {
+      bgColor: Colors.yellow50,
+      iconColor: Colors.yellow900,
+      textColor: Colors.yellow900,
+      closeButtonColor: Colors.yellow900,
+      button: {
+        color: Colors.yellow50,
+        bgColor: Colors.yellow900,
+      },
+    },
+    purple: {
+      bgColor: Colors.purple50,
+      iconColor: Colors.purple900,
+      textColor: Colors.purple900,
+      closeButtonColor: Colors.purple900,
+      button: {
+        color: Colors.purple50,
+        bgColor: Colors.purple900,
+      },
+    },
+    orange: {
+      bgColor: Colors.orange50,
+      iconColor: Colors.orange900,
+      textColor: Colors.orange900,
+      closeButtonColor: Colors.orange900,
+      button: {
+        color: Colors.orange50,
+        bgColor: Colors.orange900,
+      },
+    },
+    gradient: {
+      bgColor: Colors.white100,
+      iconColor: Colors.polychromeTealPinkPurple,
+      textColor: Colors.black300,
+      closeButtonColor: Colors.black300,
+      button: {
+        color: Colors.white100,
+        bgColor: Colors.black300,
+      },
+    },
+  };
+  return (
+    <Flex
+      px={"16px"}
+      py={"10px"}
+      borderRadius={"12px"}
+      className={variant === "gradient" ? `border-gradient` : "none"}
+      bg={variant === "gradient" ? "" : variants[variant].bgColor}
+      justifyContent={"start"}
+      alignItems={"center"}
+      gap={"16px"}
+      hidden={isHidden}
+      width="full"
+    >
+      <Flex
+        py={"6px"}
+        gap={"12px"}
+        justifyContent={"start"}
+        alignItems={"center"}
+        flex={1}
+      >
+        {variant === "gradient" ? (
+          <InfoGradientFilledIcon fontSize={20} />
+        ) : (
+          <InfoFilledIcon color={variants[variant].iconColor} fontSize={20} />
+        )}
+
+        <Text
+          color={variants[variant].textColor}
+          fontFamily={"Degular"}
+          fontSize={"14px"}
+          fontWeight={500}
+          lineHeight={"16px"}
+          letterSpacing={"-0.2px"}
+        >
+          {message}
+        </Text>
+      </Flex>
+
+      <Flex justifyContent={"center"} alignItems={"center"} gap={"16px"}>
+        {hasProceedButton && (
+          <Button
+            label={buttonText || "Button"}
+            variant="tertiary"
+            size="small"
+            bgColor={variants[variant].button.bgColor}
+            color={variants[variant].button.color}
+            onClick={() => {
+              setIsHidden(true);
+              onProceed();
+            }}
+            _hover={{
+              color: variants[variant].button.color,
+              bg: variants[variant].button.bgColor,
+            }}
+          />
+        )}
+        {hasCloseButton && (
+          <CloseIcon
+            color={variants[variant].iconColor}
+            fontSize={20}
+            onClick={() => setIsHidden(true)}
+            cursor="pointer"
+          />
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Banner;

package/src/components/notifications/ClickTooltip.tsx

@@ -0,0 +1,108 @@
+/** @format */
+
+import {
+  Box,
+  Heading,
+  Button,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Text,
+} from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+export interface ICustomTooltip {
+  triggerComponent: JSX.Element;
+  body: string;
+  label: string;
+  hasSpecialArrow?: boolean;
+}
+import "assets/styles/index.css";
+
+const CickTooltip = ({
+  label,
+  body,
+  hasSpecialArrow,
+  triggerComponent,
+}: ICustomTooltip) => {
+  return (
+    <Popover closeOnBlur={false} placement="bottom">
+      {({ onClose }) => (
+        <>
+          <PopoverTrigger>
+            <Box>{triggerComponent}</Box>
+          </PopoverTrigger>
+          <PopoverContent
+            bg={Colors.black300}
+            border={"none"}
+            outline={"none"}
+            outlineOffset={"0px"}
+            borderRadius={"16px"}
+            p={"20px"}
+            right={{ base: "5px", md: "0px" }}
+            className={`custom-balance-tooltip ${
+              hasSpecialArrow ? "special-inset" : ""
+            }`}
+            _focus={{
+              boxShadow: "none",
+            }}
+          >
+            <PopoverArrow bg={Colors.black300} />
+            <PopoverBody p={0}>
+              <Box color={Colors.white100}>
+                <Text
+                  fontSize="22px"
+                  fontFamily={"Degular"}
+                  fontWeight={700}
+                  lineHeight="32px"
+                  letterSpacing={"-0.6px"}
+                >
+                  {label}
+                </Text>
+                <Text
+                  fontSize="16px"
+                  fontFamily={"Degular"}
+                  fontWeight={500}
+                  lineHeight="24px"
+                  letterSpacing={"-0.2px"}
+                  mt="6px"
+                  mb="20px"
+                >
+                  {body}
+                </Text>
+                <Button
+                  display={"flex"}
+                  justifyContent={"center"}
+                  alignItems={"center"}
+                  bg={Colors.gray50}
+                  color={Colors.black300}
+                  px={"12px"}
+                  py={"8px"}
+                  borderRadius={"100px"}
+                  fontFamily={"Degular"}
+                  fontSize={"14px"}
+                  fontWeight={600}
+                  lineHeight={"16px"}
+                  letterSpacing={"-0.4px"}
+                  onClick={() => {
+                    onClose();
+                  }}
+                  _hover={{
+                    color: Colors.black300,
+                    bg: Colors.gray50,
+                  }}
+                  w={"full"}
+                >
+                  Okay
+                </Button>
+              </Box>
+            </PopoverBody>
+          </PopoverContent>
+        </>
+      )}
+    </Popover>
+  );
+};
+
+export default CickTooltip;

package/src/components/notifications/HoverTooltip.tsx

@@ -0,0 +1,34 @@
+/** @format */
+
+import { Tooltip as DefaultTooltip, TooltipProps } from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+export interface ITooltip extends TooltipProps {
+  label: string;
+}
+
+const HoverTooltip = ({ label, children, placement, ...rest }: ITooltip) => {
+  return (
+    <DefaultTooltip
+      hasArrow
+      label={label}
+      placement={placement}
+      borderRadius={"10px"}
+      px={"12px"}
+      py={"9px"}
+      justifyContent="center"
+      alignItems="center"
+      display="flex"
+      fontFamily={"Degular"}
+      fontSize={"16px"}
+      fontWeight={600}
+      lineHeight="160%"
+      letterSpacing="-0.32px"
+      background={Colors.black300}
+      {...rest}
+    >
+      {children}
+    </DefaultTooltip>
+  );
+};
+
+export default HoverTooltip;

package/src/components/notifications/Snackbar.tsx

@@ -0,0 +1,138 @@
+/** @format */
+
+import { Flex, Text, Box } from "@chakra-ui/react";
+import { toast, ToastOptions, Slide, TypeOptions } from "react-toastify";
+import Colors from "components/styleGuide/Colors";
+import Button from "components/Button";
+import IconButton from "components/Button/IconButton";
+
+import {
+  CloseIcon,
+  ErrorFilledIcon,
+  WarningFilledIcon,
+  CheckCircleFilledIcon,
+} from "icons";
+
+interface SnackbarProps {
+  subtext?: string;
+  title: string;
+  type: TypeOptions;
+  showUndoButton?: boolean;
+  handleUndo?: () => void;
+}
+
+// eslint-disable-next-line no-shadow
+export enum SnackbarType {
+  info = "info",
+  success = "success",
+  warning = "warning",
+  error = "error",
+  default = "default",
+}
+
+const ToastUI: React.FC<SnackbarProps> = ({
+  title,
+  type,
+  subtext,
+  showUndoButton,
+  handleUndo,
+}) => {
+  const stateIcon = {
+    [SnackbarType.success]: (
+      <CheckCircleFilledIcon fontSize={24} color={Colors.green600} />
+    ),
+    [SnackbarType.warning]: (
+      <WarningFilledIcon fontSize={24} color={Colors.amber600} />
+    ),
+    [SnackbarType.error]: (
+      <ErrorFilledIcon fontSize={24} color={Colors.red600} />
+    ),
+    [SnackbarType.default]: "",
+    [SnackbarType.info]: "",
+  };
+
+  return (
+    <Flex
+      width={"546px"}
+      borderRadius="12px"
+      border={"1px solid"}
+      borderColor={
+        type === SnackbarType.default || type === SnackbarType.info
+          ? Colors.gray50
+          : type === SnackbarType.error
+          ? Colors.red100
+          : type === SnackbarType.warning
+          ? Colors.amber100
+          : Colors.green100
+      }
+      bg={Colors.white100}
+      alignItems="center"
+      px={"14px"}
+      py={subtext && subtext !== "" ? "14px" : "8px"}
+      justifyContent="start"
+      gap={"10px"}
+    >
+      <Box>{stateIcon[type]}</Box>
+      <Flex flexDir="column" justifyContent="space-between" flex={1}>
+        <Text
+          color={Colors.black300}
+          fontSize={"16px"}
+          fontFamily={"Degular"}
+          fontWeight={600}
+          lineHeight={"24px"}
+          letterSpacing={"-0.4px"}
+        >
+          {title}
+        </Text>
+        <Text
+          color={Colors.gray400}
+          fontSize={"14px"}
+          fontFamily={"Degular"}
+          fontWeight={500}
+          lineHeight={"16px"}
+          letterSpacing={"-0.2px"}
+        >
+          {subtext}
+        </Text>
+      </Flex>
+
+      {showUndoButton && (
+        <Button label="Undo" variant="link" size="small" onClick={handleUndo} />
+      )}
+      <IconButton variant="link" size="small">
+        <CloseIcon fontSize={20} color={Colors.black300} />
+      </IconButton>
+    </Flex>
+  );
+};
+
+const toastOptions: ToastOptions = {
+  autoClose: 3000,
+  hideProgressBar: true,
+  closeOnClick: true,
+  pauseOnHover: false,
+  draggable: false,
+  progress: undefined,
+  transition: Slide,
+  rtl: false,
+  closeButton: false,
+};
+
+export default function customSnackbar(
+  title: string,
+  type: TypeOptions,
+  subtext?: string,
+  showUndoButton?: boolean,
+  handleUndo?: () => void
+) {
+  toast(
+    <ToastUI
+      title={title}
+      type={type}
+      subtext={subtext}
+      showUndoButton={showUndoButton}
+      handleUndo={handleUndo}
+    />,
+    toastOptions
+  );
+}

package/src/components/styleGuide/Colors.tsx

@@ -0,0 +1,176 @@
+/** @format */
+
+const Colors = {
+  amber900: "#332600",
+  amber800: "#664C00",
+  amber700: "#805F00",
+  amber600: "#997300",
+  amber500: "#C90",
+  amber400: "#FFBF00",
+  amber300: "#FFD24D",
+  amber200: "#FFDF80",
+  amber100: "#FFECB2",
+  amber50: "#FFF9E5",
+  black300: "#131316",
+  black200: "#1D1D1F",
+  black100: "#262628",
+  black50: "#363637",
+  blue900: "#00264D",
+  blue800: "#004080",
+  blue700: "#004D99",
+  blue600: "#005AB2",
+  blue500: "#0073E5",
+  blue400: "#0080FF",
+  blue300: "#4DA6FF",
+  blue200: "#80BFFF",
+  blue100: "#B2D9FF",
+  blue50: "#E5F2FF",
+  green900: "#031",
+  green800: "#062",
+  green700: "#00802B",
+  green600: "#00B23C",
+  green500: "#0C4",
+  green400: "#0F5",
+  green300: "#4DFF88",
+  green200: "#80FFAA",
+  green100: "#B2FFCC",
+  green50: "#E5FFEE",
+  gray500: "#31373D",
+  gray400: "#56616B",
+  gray300: "#888F95",
+  gray200: "#A6ABAF",
+  gray100: "#E6E9EF",
+  gray50: "#EFF1F6",
+  lime900: "#1D3300",
+  lime800: "#345C00",
+  lime700: "#488000",
+  lime600: "#65B200",
+  lime500: "#74CC00",
+  lime400: "#90FE00",
+  lime300: "#B5FF4D",
+  lime200: "#CAFF80",
+  lime100: "#DFFFB2",
+  lime50: "#F4FFE5",
+  magenta900: "#330028",
+  magenta800: "#570F43",
+  magenta700: "#851471",
+  magenta600: "#AC208C",
+  magenta500: "#C61F9F",
+  magenta400: "#FF00BF",
+  magenta300: "#FF4DD2",
+  magenta200: "#FF80DF",
+  magenta100: "#FFB2EC",
+  magenta50: "#FFE5F9",
+  orange900: "#331500",
+  orange800: "#662A00",
+  orange700: "#994000",
+  orange600: "#B24A00",
+  orange500: "#E55F00",
+  orange400: "#F73",
+  orange300: "#FF974D",
+  orange200: "#FFB480",
+  orange100: "#FFD2B2",
+  orange50: "#FFF0E5",
+  pink900: "#330015",
+  pink800: "#66002A",
+  pink700: "#800035",
+  pink600: "#B2004A",
+  pink500: "#C05",
+  pink400: "#FF006A",
+  pink300: "#FF4D97",
+  pink200: "#FF80B4",
+  pink100: "#FFB2D2",
+  pink50: "#FFE5F0",
+  purple900: "#150033",
+  purple800: "#20004D",
+  purple700: "#350080",
+  purple600: "#4A00B2",
+  purple500: "#50C",
+  purple400: "#6A00FF",
+  purple300: "#83F",
+  purple200: "#A666FF",
+  purple100: "#D2B2FF",
+  purple50: "#F0E5FF",
+  red900: "#33000F",
+  red800: "#4D0016",
+  red700: "#800025",
+  red600: "#99002C",
+  red500: "#CC003A",
+  red400: "#FF0049",
+  red300: "#FF6692",
+  red200: "#FFB2C8",
+  red100: "#FFCCDB",
+  red50: "#FFE5ED",
+  teal900: "#002A33",
+  teal800: "#056",
+  teal700: "#007F99",
+  teal600: "#0094B2",
+  teal500: "#0AC",
+  teal400: "#00D4FF",
+  teal300: "#4DE1FF",
+  teal200: "#80E9FF",
+  teal100: "#B2F2FF",
+  teal50: "#E5FBFF",
+  white100: "#FFF",
+  white50: "#FAFAFA",
+  yellow900: "#330",
+  yellow800: "#660",
+  yellow700: "#990",
+  yellow600: "#CC0",
+  yellow500: "#E5E500",
+  yellow400: "#FF0",
+  yellow300: "#FFE51F",
+  yellow200: "#FFFF80",
+  yellow100: "#FFFFB2",
+  yellow50: "#FFFFE5",
+  monochromeOrange: "linear-gradient(139deg, #FF974D 2.33%, #FF6A00 96.28%)",
+  monochromeSoftOrange:
+    "linear-gradient(139deg, #FFF0E5 2.33%, #FFB480 96.28%)",
+  monochromeLime: "linear-gradient(139deg, #B5FF4D 2.33%, #74CC00 96.28%)",
+  monochromeSoftLime: "linear-gradient(139deg, #F4FFE5 2.33%, #CAFF80 96.28%)",
+  monochromeGreen: "linear-gradient(139deg, #4DFF88 2.33%, #0C4 96.28%)",
+  monochromeSoftGreen: "linear-gradient(139deg, #E5FFEE 2.33%, #80FFAA 96.28%)",
+  monochromeTeal: "linear-gradient(139deg, #80E9FF 2.33%, #00D4FF 96.28%)",
+  monochromeSoftTeal: "linear-gradient(139deg, #E5FBFF 2.33%, #80E9FF 96.28%)",
+  monochromeRoyalBlue: "linear-gradient(139deg, #80BFFF 2.33%, #0080FF 96.28%)",
+  monochromeSoftRoyalBlue:
+    "linear-gradient(139deg, #E5F2FF 2.33%, #80BFFF 96.28%)",
+  monochromeLightBlue: "linear-gradient(139deg, #64CCED 2.33%, #0D92F2 96.28%)",
+  monochromePurple: "linear-gradient(139deg, #A666FF 2.33%, #6A00FF 96.28%)",
+  monochromeSoftPurple:
+    "linear-gradient(139deg, #F0E5FF 2.33%, #A666FF 96.28%)",
+  monochromeMagenta: "linear-gradient(139deg, #FF80DF 2.33%, #C61F9F 96.28%)",
+  monochromeSoftMagenta:
+    "linear-gradient(139deg, #FFE5F9 2.33%, #FF80DF 96.28%)",
+  monochromeRed: "linear-gradient(139deg, #FF6692 2.33%, #CC003A 96.28%)",
+  monochromeSoftRed: "linear-gradient(139deg, #FFE5ED 2.33%, #FFB2C8 96.28%)",
+  monochromeAmber: "linear-gradient(139deg, #FFDF80 2.33%, #FFBF00 96.28%)",
+  monochromeSoftAmber:
+    " linear-gradient(139deg, #FFFAD2 2.33%, #FFEE6A 96.28%)",
+  monochromeYellow: "linear-gradient(139deg, #FF0 2.33%, #CC0 96.28%)",
+  monochromeSoftYellow:
+    "linear-gradient(139deg, #FFFFE5 2.33%, #FFFF80 96.28%)",
+  monochromeWhite: "linear-gradient(139deg, #F6F7F9 2.33%, #DBDEE5 96.28%)",
+  monochromegray: "linear-gradient(139deg, #D7D9DB 2.33%, #808D99 96.28%)",
+  monochromeBlack: "linear-gradient(139deg, #5C6670 2.33%, #131316 96.28%)",
+  monochromeCyan: "linear-gradient(139deg, #99F3FF 2.33%, #00CCC0 96.28%)",
+  polychromeAmberRed: "linear-gradient(137deg, #FFBF00 0%, #FF0049 96.86%)",
+  polychromePurpleRed: "linear-gradient(137deg, #83F 0%, #FF0049 96.86%)",
+  polychromeBluePurple: "linear-gradient(137deg, #0080FF 0%, #A666FF 96.86%)",
+  polychromeTealPurple: "linear-gradient(137deg, #00D4FF 0%, #83F 96.86%)",
+  polychromeBlueMagenta: "linear-gradient(137deg, #266EF1 0%, #C61F9F 96.86%)",
+  polychromeOrangeMagenta: "linear-gradient(137deg, #F73 0%, #C61F9F 96.86%)",
+  polychromeOrangeMainMagenta:
+    "linear-gradient(137deg, #F73 36.56%, #C61F9F 96.86%)",
+  polychromeTealPinkPurple:
+    "linear-gradient(137deg, #4DE1FF 0%, #6A00FF 48.43%, #FF00BF 96.86%)",
+  polychromeAmberPinkPurple:
+    "linear-gradient(137deg, #FFD24D 0%, #FF006A 48.43%, #A666FF 96.86%)",
+  polychromeMagentaOrange: "linear-gradient(137deg, #FF00BF 0%, #F73 96.86%)",
+  polychromeLimeTeal: "linear-gradient(137deg, #00B23C 0%, #0AC 96.86%)",
+  polychromePinkOrange: "linear-gradient(137deg, #FF006A 0%, #FF974D 96.86%)",
+  polychromeTealDarkBlue: "linear-gradient(137deg, #4DE1FF 0%, #005AB2 96.86%)",
+  polychromeOrangePurple: "linear-gradient(137deg, #F5440C 0%, #8F00FF 96.86%)",
+};
+
+export default Colors;

package/src/hooks/useImageUpload.ts

@@ -0,0 +1,78 @@
+/** @format */
+
+import { ChangeEvent, useState } from "react";
+
+interface UploadProps {
+  multiple?: boolean;
+}
+
+export const useImageUpload = ({ multiple = false }: UploadProps) => {
+  const [coverImageIndex, setCoverImageIndex] = useState<number>(0);
+  const [fileArray, setFileArray] = useState<File[]>([]);
+  const [imageArray, setImageArray] = useState<string[]>([]);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    e.preventDefault();
+    if (e.target.files) {
+      if (multiple) {
+        const imageFiles = e.target.files;
+        const selectedFiles = Array.from(imageFiles);
+
+        if (selectedFiles.length + imageArray.length > 5) {
+          return;
+        }
+
+        setFileArray([...fileArray, ...selectedFiles]);
+        const imgArr: string[] = [];
+
+        selectedFiles.forEach((item) => {
+          const imageFile = item;
+          const reader = new FileReader();
+
+          reader.onloadend = () => {
+            imgArr.push(reader.result as string);
+            setImageArray([...imageArray, ...imgArr]);
+          };
+
+          reader.readAsDataURL(imageFile);
+        });
+      } else {
+        const imageFile = e.target.files;
+        const selectedFile = Array.from(imageFile);
+        setFileArray(selectedFile);
+
+        const image = selectedFile[0];
+        const reader = new FileReader();
+
+        reader.onloadend = () => {
+          setImageArray([reader.result as string]);
+        };
+
+        reader.readAsDataURL(image);
+      }
+    }
+  };
+
+  const handleDelete = (id: number) => {
+    if (multiple) {
+      imageArray.splice(id, 1);
+      setImageArray([...imageArray]);
+    } else setImageArray([]);
+  };
+
+  const changeCoverImage = (id: number) => {
+    setCoverImageIndex(id);
+  };
+
+  return {
+    coverImageIndex,
+    setCoverImageIndex,
+    fileArray,
+    setFileArray,
+    imageArray,
+    setImageArray,
+    handleChange,
+    handleDelete,
+    changeCoverImage,
+  };
+};