mainstack-design-system 0.0.0

package/src/components/Accordion/index.tsx

@@ -0,0 +1,111 @@
+/** @format */
+
+import {
+  AccordionButton,
+  AccordionItem,
+  AccordionItemProps,
+  AccordionPanel,
+  Box,
+  Center,
+  Flex,
+} from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+import ToggleButton from "components/controls/ToggleButton";
+import { DragIndicatorIcon, ExpandMoreIcon, TrashDeleteBinIcon } from "icons";
+import { motion } from "framer-motion";
+import Subtitle from "components/Typography/Subtitle";
+
+export interface IAccordionItem extends AccordionItemProps {
+  children?: React.ReactNode;
+  title: string;
+  subtitle?: React.ReactNode;
+  isDraggable?: boolean;
+  type: "has-toggle" | "has-delete" | "normal";
+  error?: boolean;
+  handleDelete?: () => void;
+  handleToggle?: () => void;
+}
+
+const AccordionItemComponent = ({
+  children,
+  title,
+  subtitle,
+  isDraggable,
+  type,
+  error,
+  handleDelete,
+  handleToggle,
+  ...props
+}: IAccordionItem) => {
+  return (
+    <>
+      <AccordionItem
+        w="537px"
+        border={"none !important"}
+        borderRadius={"16px"}
+        {...props}
+      >
+        {({ isExpanded }) => (
+          <Box
+            outline={
+              isExpanded ? "3px solid" : `${error ? "3px solid" : "1px solid"}`
+            }
+            _hover={{
+              bg: isExpanded ? "none" : Colors.gray50,
+              outline: "3px solid",
+              outlineColor: error ? Colors.red500 : Colors.black300,
+            }}
+            outlineColor={
+              isExpanded
+                ? `${error ? Colors.red500 : Colors.black300}`
+                : `${error ? Colors.red500 : Colors.gray50}`
+            }
+            borderRadius={"16px"}
+            px="20px"
+            py="22px"
+          >
+            <AccordionButton
+              border={"none"}
+              bg="none"
+              _hover={{ bg: "none" }}
+              px="0"
+              py="0"
+              m="0"
+              cursor={"pointer"}
+            >
+              <Flex alignItems={"center"} w="100%">
+                {isDraggable ? (
+                  <Center cursor={"grabbing"} boxSize="24px" mr="8px">
+                    <DragIndicatorIcon fontSize={"24px"} />
+                  </Center>
+                ) : null}
+                <Box textAlign={"left"}>
+                  <Subtitle size={"6xs"}>{title}</Subtitle>
+                  {subtitle && <Box mt="4px">{subtitle}</Box>}
+                </Box>
+                <Flex alignItems={"center"} ml="auto">
+                  {type === "has-toggle" ? (
+                    <ToggleButton onClick={handleToggle} />
+                  ) : type === "has-delete" ? (
+                    <TrashDeleteBinIcon
+                      fontSize={"16px"}
+                      onClick={handleDelete}
+                    />
+                  ) : null}
+                  <motion.div animate={{ rotateX: isExpanded ? 180 : 0 }}>
+                    <Center boxSize={"28px"} ml="16px">
+                      <ExpandMoreIcon fontSize={"28px"} />
+                    </Center>
+                  </motion.div>
+                </Flex>
+              </Flex>
+            </AccordionButton>
+            <AccordionPanel>{children}</AccordionPanel>
+          </Box>
+        )}
+      </AccordionItem>
+    </>
+  );
+};
+
+export default AccordionItemComponent;

package/src/components/Avatars/index.tsx

@@ -0,0 +1,111 @@
+/** @format */
+
+import { Circle, Image, Text } from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+import { ReactComponent as DPIcon } from "assets/svgs/personal_profile_avatar.svg";
+import { ReactComponent as StoreIcon } from "assets/svgs/store_avatar.svg";
+
+const Variant = {
+  xs: {
+    size: "32px",
+    fontSize: "14px",
+    lineHeight: "16px",
+    letterSpacing: "-0.4px",
+  },
+  sm: {
+    size: "40px",
+    fontSize: "17.5px",
+    lineHeight: "16px",
+    letterSpacing: "-0.4px",
+  },
+  md: {
+    size: "48px",
+    fontSize: "21px",
+    lineHeight: "16px",
+    letterSpacing: "-0.4px",
+  },
+  lg: {
+    size: "56px",
+    fontSize: "24.5px",
+    lineHeight: "16px",
+    letterSpacing: "-0.4px",
+  },
+  xl: {
+    size: "64px",
+    fontSize: "28px",
+    lineHeight: "16px",
+    letterSpacing: "-0.4px",
+  },
+};
+
+export interface AvatarProp {
+  size: "xs" | "sm" | "md" | "lg" | "xl";
+}
+
+interface ImageAvatarProp extends AvatarProp {
+  src?: string;
+  type: "image";
+  fallback: "store" | "picture";
+}
+
+interface InitialsAvatarProp extends AvatarProp {
+  name: string;
+  type: "initials";
+}
+
+const InitialsAvatar = ({ size, name }: InitialsAvatarProp) => {
+  const getInitials = () => {
+    return `${name.split(" ")[0][0]}${
+      name.split(" ")[1] ? name.split(" ")[1][0] : ""
+    }`;
+  };
+
+  return (
+    <Circle bg={Colors.monochromeBlack} size={Variant[size].size}>
+      <Text
+        color={Colors.white100}
+        fontFamily={"Degular"}
+        fontSize={Variant[size].fontSize}
+        fontWeight={600}
+        lineHeight={Variant[size].lineHeight}
+        letterSpacing={Variant[size].letterSpacing}
+      >
+        {getInitials()}
+      </Text>
+    </Circle>
+  );
+};
+
+const Avatar = (props: ImageAvatarProp | InitialsAvatarProp) => {
+  return (
+    <>
+      {props.type === "image" ? (
+        <Image
+          src={props?.src}
+          borderRadius={"100%"}
+          width={Variant[props.size].size}
+          height={Variant[props.size].size}
+          fallback={
+            props?.fallback === "store" ? (
+              <StoreIcon
+                width={Variant[props.size].size}
+                height={Variant[props.size].size}
+              />
+            ) : props?.fallback === "picture" ? (
+              <DPIcon
+                width={Variant[props.size].size}
+                height={Variant[props.size].size}
+              />
+            ) : (
+              <></>
+            )
+          }
+        />
+      ) : props.type === "initials" ? (
+        <InitialsAvatar size={props.size} name={props.name} type={props.type} />
+      ) : null}
+    </>
+  );
+};
+
+export default Avatar;

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,119 @@
+/** @format */
+
+import {
+  Button as DefaultButton,
+  ButtonProps,
+  Box,
+  Flex,
+} from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+import { ButtonVariant } from ".";
+
+/** @format */
+
+enum EButtonSize {
+  small = "40px",
+  medium = "48px",
+  large = "56px",
+}
+
+export interface IconButtonProps extends ButtonProps {
+  children: React.ReactNode;
+  size: "small" | "medium" | "large";
+  bgColor?: string;
+  textColor?: string;
+  variant: "primary" | "secondary" | "tertiary" | "outline" | "link";
+  disabled?: boolean;
+}
+
+const IconButton = ({
+  children,
+  size,
+  bgColor,
+  variant,
+  disabled,
+  textColor,
+  onClick,
+}: IconButtonProps) => {
+  return (
+    <DefaultButton
+      width={EButtonSize[size]}
+      height={EButtonSize[size]}
+      fontWeight={"600"}
+      fontFamily={"Degular"}
+      lineHeight={"1.25rem"}
+      letterSpacing={"-0.004rem"}
+      borderRadius="1.875rem"
+      bg={bgColor ?? ButtonVariant[variant].bgColor}
+      border={
+        ButtonVariant[variant]?.border
+          ? `1px solid ${ButtonVariant[variant]?.border}`
+          : "none"
+      }
+      color={textColor ?? ButtonVariant[variant].color}
+      transition={"all 400ms ease-in-out"}
+      isDisabled={disabled}
+      _hover={{
+        background: ButtonVariant[variant].hoverColor,
+        _after: {
+          opacity: 1,
+        },
+      }}
+      _active={{
+        boxShadow: `0px 0px 0px 3px ${ButtonVariant[variant].activeBorderColor}`,
+        transition: "all 100ms ease-in-out",
+        outline: "0px",
+        outlineOffset: "0px",
+      }}
+      outline={"0px"}
+      outlineOffset={"0px"}
+      boxShadow={"0px 0px 1.875rem 3px rgba(0,0,0,0)"}
+      _disabled={{
+        background: Colors.gray200,
+        color: Colors.gray50,
+        border: "none",
+        cursor: "not-allowed",
+        _before: {
+          background: Colors.gray200,
+          color: Colors.gray50,
+          border: "none",
+        },
+        _after: {
+          background: Colors.gray200,
+          color: Colors.gray50,
+          border: "none",
+        },
+      }}
+      _before={{
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        borderRadius: "1.875rem",
+        background: bgColor ?? ButtonVariant[variant].bgColor,
+      }}
+      _after={{
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        borderRadius: "1.875rem",
+        opacity: 0,
+        transition: "all 400ms ease-in-out",
+        background: ButtonVariant[variant].hoverColor,
+      }}
+      onClick={onClick}
+    >
+      <Flex
+        position={"relative"}
+        zIndex={2}
+        alignItems={"center"}
+        justifyContent={"center"}
+      >
+        {children}
+      </Flex>
+    </DefaultButton>
+  );
+};
+
+export default IconButton;

package/src/components/Button/index.tsx

@@ -0,0 +1,173 @@
+/** @format */
+
+import {
+  Button as DefaultButton,
+  ButtonProps,
+  Box,
+  Flex,
+  Text,
+} from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+
+/** @format */
+
+enum EButtonSize {
+  small = "10px",
+  medium = "14px",
+  large = "16px",
+}
+
+export type ButtonVariantType = {
+  bgColor: string;
+  color: string;
+  hoverColor: string;
+  activeBorderColor: string;
+  border?: string;
+};
+
+export const ButtonVariant: Record<string, ButtonVariantType> = {
+  primary: {
+    bgColor: Colors.black300,
+    color: Colors.white100,
+    hoverColor: Colors.polychromeOrangeMagenta,
+    activeBorderColor: Colors.magenta50,
+  },
+  secondary: {
+    bgColor: Colors.polychromeOrangeMagenta,
+    color: Colors.white100,
+    hoverColor: Colors.polychromeOrangeMainMagenta,
+    activeBorderColor: Colors.magenta50,
+  },
+  tertiary: {
+    bgColor: Colors.gray50,
+    color: Colors.black300,
+    hoverColor: Colors.gray100,
+    activeBorderColor: Colors.gray50,
+  },
+  outline: {
+    bgColor: Colors.white100,
+    color: Colors.black300,
+    hoverColor: Colors.gray100,
+    activeBorderColor: Colors.gray50,
+    border: Colors.gray50,
+  },
+  link: {
+    bgColor: Colors.white100,
+    color: Colors.black300,
+    hoverColor: Colors.gray100,
+    activeBorderColor: Colors.gray50,
+    border: Colors.white100,
+  },
+};
+
+export interface IButtonProps extends ButtonProps {
+  // hasIcons?: boolean;
+  label?: string | React.ReactNode;
+  size: "small" | "medium" | "large";
+  bgColor?: string;
+  textColor?: string;
+  variant: "primary" | "secondary" | "tertiary" | "outline" | "link";
+  disabled?: boolean;
+}
+
+interface IButtonPropsWithIcons extends IButtonProps {
+  hasIcons: true;
+  icon: React.ReactNode;
+  iconType: "leading" | "trailing";
+}
+
+const Button = ({
+  label,
+  size,
+  bgColor,
+  variant,
+  disabled,
+  textColor,
+  onClick,
+  ...props
+}: IButtonProps | IButtonPropsWithIcons) => {
+  const isLeadingIcon = "icon" in props && props.iconType === "leading";
+  const isTrailingIcon = "icon" in props && props.iconType === "trailing";
+  return (
+    <DefaultButton
+      py={EButtonSize[size]}
+      px="24px"
+      pr={isLeadingIcon ? "32px" : "24px"}
+      pl={isTrailingIcon ? "32px" : "24px"}
+      fontWeight={"600"}
+      fontSize={"1rem"}
+      fontFamily={"Degular"}
+      lineHeight={"1.25rem"}
+      letterSpacing={"-0.004rem"}
+      borderRadius="1.875rem"
+      bg={bgColor ?? ButtonVariant[variant].bgColor}
+      border={
+        ButtonVariant[variant]?.border
+          ? `1px solid ${ButtonVariant[variant]?.border}`
+          : "none"
+      }
+      color={textColor ?? ButtonVariant[variant].color}
+      transition={"all 400ms ease-in-out"}
+      isDisabled={disabled}
+      _hover={{
+        background: ButtonVariant[variant].hoverColor,
+        _after: {
+          opacity: 1,
+        },
+      }}
+      _active={{
+        boxShadow: `0px 0px 0px 3px ${ButtonVariant[variant].activeBorderColor}`,
+        transition: "all 100ms ease-in-out",
+        outline: "0px",
+        outlineOffset: "0px",
+      }}
+      outline={"0px"}
+      outlineOffset={"0px"}
+      boxShadow={"0px 0px 1.875rem 3px rgba(0,0,0,0)"}
+      _disabled={{
+        background: Colors.gray200,
+        color: Colors.gray50,
+        border: "none",
+        cursor: "not-allowed",
+        _before: {
+          background: Colors.gray200,
+          color: Colors.gray50,
+          border: "none",
+        },
+        _after: {
+          background: Colors.gray200,
+          color: Colors.gray50,
+          border: "none",
+        },
+      }}
+      _before={{
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        borderRadius: "1.875rem",
+        background: bgColor ?? ButtonVariant[variant].bgColor,
+      }}
+      _after={{
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        borderRadius: "1.875rem",
+        opacity: 0,
+        transition: "all 400ms ease-in-out",
+        background: ButtonVariant[variant].hoverColor,
+      }}
+      onClick={onClick}
+      {...props}
+    >
+      <Flex alignItems={"center"} gap="4px" position="relative" zIndex={2}>
+        <> {isLeadingIcon && props.icon} </>
+        {label}
+        <> {isTrailingIcon && props.icon}</>
+      </Flex>
+    </DefaultButton>
+  );
+};
+
+export default Button;

package/src/components/InputFields/Input.tsx

@@ -0,0 +1,177 @@
+/** @format */
+
+// import React from "react";
+import {
+  Box,
+  Input as ChakraInput,
+  Flex,
+  InputGroup,
+  InputProps,
+  InputRightElement,
+  Text,
+} from "@chakra-ui/react";
+import Paragraph from "components/Typography/Paragraph";
+import Colors from "components/styleGuide/Colors";
+// This will change when we build icon components
+import { ReactComponent as ViewIcon } from "assets/svgs/viewIcon.svg";
+import { ReactComponent as ViewOffIcon } from "assets/svgs/viewOffIcon.svg";
+import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
+import { ReactComponent as SuccessIcon } from "assets/svgs/check_circle.svg";
+import { useState } from "react";
+
+export interface IInput extends InputProps {
+  label: string;
+  name: string;
+  value?: any;
+  id: string;
+  onChange?: () => void;
+  defaultValue?: any;
+  placeholder?: string;
+  type: "text" | "number" | "password";
+  error?: boolean;
+  errorMessage?: string;
+  success?: boolean;
+  successMessage?: string;
+  hint?: string;
+  width?: string;
+}
+const Input = ({
+  label,
+  name,
+  id,
+  value,
+  onChange,
+  defaultValue,
+  placeholder,
+  error,
+  errorMessage,
+  success,
+  successMessage,
+  hint,
+  type,
+  width,
+}: IInput) => {
+  const [show, setShow] = useState(false);
+  return (
+    <Box w={width || "full"}>
+      <Text
+        fontFamily={"Degular"}
+        fontSize={"16px"}
+        lineHeight={"20px"}
+        letterSpacing={"-0.064px"}
+        fontWeight={600}
+        mb="10px"
+        mt="0"
+      >
+        {label}
+      </Text>
+      <InputGroup>
+        {type === "password" && (
+          <InputRightElement py="12px">
+            <Box onClick={() => setShow((prevState) => !prevState)}>
+              {show ? (
+                <ViewIcon
+                  style={{
+                    fill: "#56616B",
+                    cursor: "pointer",
+                  }}
+                />
+              ) : (
+                <ViewOffIcon
+                  style={{
+                    fill: "#56616B",
+                    cursor: "pointer",
+                  }}
+                />
+              )}
+            </Box>
+          </InputRightElement>
+        )}
+        <ChakraInput
+          name={name}
+          id={id}
+          value={value}
+          defaultValue={defaultValue}
+          onChange={onChange}
+          placeholder={placeholder}
+          bg={Colors.white100}
+          borderRadius="12px"
+          border="none"
+          fontFamily={"Degular"}
+          fontSize={"16px"}
+          lineHeight={"24px"}
+          letterSpacing={"-0.2px"}
+          fontWeight={500}
+          outlineOffset={"none"}
+          outline={error || success ? "2px solid" : "1px solid"}
+          outlineColor={
+            error ? Colors.red500 : success ? Colors.green600 : Colors.gray50
+          }
+          _focus={{
+            outline: `3px solid ${
+              error
+                ? Colors.red500
+                : success
+                ? Colors.green600
+                : Colors.black300
+            }`,
+            background: `${Colors.white100}`,
+          }}
+          _focusVisible={{
+            outline: `3px solid ${
+              error
+                ? Colors.red500
+                : success
+                ? Colors.green600
+                : Colors.black300
+            }`,
+            background: `${Colors.white100}`,
+          }}
+          _hover={{
+            outline: `3px solid ${
+              error
+                ? Colors.red500
+                : success
+                ? Colors.green600
+                : Colors.black300
+            }`,
+            background: `${Colors.gray50}`,
+          }}
+          py="24px"
+          px="16px"
+          type={
+            type === "password" && !show
+              ? "password"
+              : type === "password" && show
+              ? "text"
+              : type
+          }
+          _placeholder={{ color: `${Colors.gray200}` }}
+        />
+      </InputGroup>
+      <Box mt="8px">
+        {success && successMessage ? (
+          <Flex alignItems={"center"} gap="6px">
+            <SuccessIcon />
+            <Paragraph color={Colors.green600} size={"xxs"}>
+              {successMessage}
+            </Paragraph>
+          </Flex>
+        ) : error && errorMessage ? (
+          <Flex alignItems={"center"} gap="6px">
+            <ErrorIcon />
+            <Paragraph color={Colors.red500} size={"xxs"}>
+              {errorMessage}
+            </Paragraph>
+          </Flex>
+        ) : hint ? (
+          <Paragraph color={Colors.gray400} size={"xxs"}>
+            {hint}
+          </Paragraph>
+        ) : null}
+      </Box>
+    </Box>
+  );
+};
+
+export default Input;