mainstack-design-system 0.0.7 → 0.0.8

package/src/components/notifications/Banner.tsx

@@ -1,175 +0,0 @@
-/** @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

@@ -1,108 +0,0 @@
-/** @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

@@ -1,34 +0,0 @@
-/** @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

@@ -1,138 +0,0 @@
-/** @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

@@ -1,176 +0,0 @@
-/** @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

@@ -1,78 +0,0 @@
-/** @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,
-  };
-};