mainstack-design-system 0.0.0

package/src/components/Tiles/index.tsx

@@ -0,0 +1,95 @@
+/** @format */
+
+import { Box, Center, Flex, Text } from "@chakra-ui/react";
+import Paragraph from "components/Typography/Paragraph";
+import RadioButton from "components/controls/RadioButton";
+import Colors from "components/styleGuide/Colors";
+
+export interface TileProps {
+  isSelected?: boolean;
+  title: string;
+  subText?: string;
+  icon?: JSX.Element;
+  iconPosition?: "leading" | "trailing" | "top";
+  hasRadioButton?: boolean;
+  onClick?: () => void;
+}
+
+const Tile = ({
+  icon,
+  iconPosition,
+  hasRadioButton,
+  isSelected,
+  title,
+  subText,
+  onClick,
+}: TileProps) => {
+  return (
+    <Flex
+      alignItems={"center"}
+      cursor={"pointer"}
+      outline={isSelected ? "3px solid" : "1px solid"}
+      outlineColor={isSelected ? Colors.black300 : Colors.gray50}
+      borderRadius="16px"
+      boxSizing="border-box"
+      py="20px"
+      px={iconPosition === "trailing" ? "24px" : "20px"}
+      width="100%"
+      maxW={"370px"}
+      gap={iconPosition === "leading" ? "12px" : "16px"}
+      _hover={{
+        outline: "3px solid",
+        outlineColor: Colors.black300,
+        bg: Colors.gray50,
+      }}
+      onClick={onClick}
+    >
+      {icon && iconPosition === "leading" && <Box w="28px">{icon}</Box>}
+      <Box w="100%">
+        {icon && iconPosition === "top" && (
+          <Flex alignItems={"center"} w="100%">
+            <Center boxSize="28px" mb="12px">
+              {icon}
+            </Center>
+            {hasRadioButton && (
+              <Center boxSize="28px" mb="12px" ml="auto">
+                <RadioButton
+                  isChecked={isSelected || false}
+                  onClick={onClick}
+                />
+              </Center>
+            )}
+          </Flex>
+        )}
+        <Text
+          fontFamily={"Degular"}
+          fontSize="16px"
+          fontWeight={600}
+          lineHeight={"20px"}
+          letterSpacing={"-0.064px"}
+          mb="4px"
+          mt="0"
+        >
+          {title || "Title"}
+        </Text>
+
+        {subText && (
+          <Paragraph color={Colors.gray400} size={"xxs"}>
+            {subText}
+          </Paragraph>
+        )}
+      </Box>
+
+      {icon && iconPosition === "trailing" ? (
+        <Box w="28px">{icon}</Box>
+      ) : (icon && iconPosition === "leading" && hasRadioButton) ||
+        (!icon && hasRadioButton) ? (
+        <Box w="28px">
+          <RadioButton isChecked={isSelected || false} />
+        </Box>
+      ) : null}
+    </Flex>
+  );
+};
+
+export default Tile;

package/src/components/Typography/Display.tsx

@@ -0,0 +1,84 @@
+/** @format */
+
+import { Text, TextProps } from "@chakra-ui/react";
+
+const DisplayVariant = {
+  "3xl": {
+    fontSize: "72px",
+    lineHeight: "96px",
+  },
+  xxl: {
+    fontSize: "64px",
+    lineHeight: "88px",
+  },
+  xl: {
+    fontSize: "56px",
+    lineHeight: "72px",
+  },
+  l: {
+    fontSize: "48px",
+    lineHeight: "64px",
+  },
+  m: {
+    fontSize: "40px",
+    lineHeight: "56px",
+  },
+};
+
+type DefaultType = "3xl" | "xxl" | "xl" | "l" | "m";
+
+type ResponsiveType = {
+  xl?: DefaultType;
+  lg?: DefaultType;
+  md?: DefaultType;
+  sm?: DefaultType;
+  base?: DefaultType;
+};
+
+interface IDisplay extends TextProps {
+  children: any;
+  color?: string;
+  size: DefaultType | ResponsiveType;
+}
+
+const getResponsiveValues = (size_obj: ResponsiveType, property: any) => {
+  const sizes: ResponsiveType = {};
+  Object.entries(size_obj).forEach(([key, value]) => {
+    // @ts-ignore
+    sizes[key] = DisplayVariant[value][property];
+  });
+  return sizes;
+};
+
+const Display = ({ size, color, children, ...props }: IDisplay) => {
+  return (
+    <Text
+      as="h1"
+      color={color || "#000000"}
+      fontFamily="Degular Display"
+      fontSize={
+        typeof size === "string"
+          ? DisplayVariant[size].fontSize
+          : {
+              ...getResponsiveValues(size, "fontSize"),
+            }
+      }
+      fontWeight={800}
+      fontStyle="normal"
+      lineHeight={
+        typeof size === "string"
+          ? DisplayVariant[size].lineHeight
+          : {
+              ...getResponsiveValues(size, "lineHeight"),
+            }
+      }
+      letterSpacing="0.3px"
+      m="0"
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default Display;

package/src/components/Typography/Heading.tsx

@@ -0,0 +1,136 @@
+/** @format */
+
+import { Text, TextProps } from "@chakra-ui/react";
+
+const HeadingVariant = {
+  "3xl": {
+    fontSize: "72px",
+    lineHeight: "96px",
+    letterSpacing: "-3px",
+  },
+  xxl: {
+    fontSize: "64px",
+    lineHeight: "88px",
+    letterSpacing: "-3px",
+  },
+  xl: {
+    fontSize: "56px",
+    lineHeight: "72px",
+    letterSpacing: "-2px",
+  },
+  l: {
+    fontSize: "48px",
+    lineHeight: "64px",
+    letterSpacing: "-2px",
+  },
+  m: {
+    fontSize: "40px",
+    lineHeight: "56px",
+    letterSpacing: "-1.5px",
+  },
+  s: {
+    fontSize: "36px",
+    lineHeight: "48px",
+    letterSpacing: "-1.5px",
+  },
+  xs: {
+    fontSize: "32px",
+    lineHeight: "40px",
+    letterSpacing: "-1.5px",
+  },
+  xxs: {
+    fontSize: "28px",
+    lineHeight: "40px",
+    letterSpacing: "-0.6px",
+  },
+  "3xs": {
+    fontSize: "24px",
+    lineHeight: "32px",
+    letterSpacing: "-0.6px",
+  },
+  "4xs": {
+    fontSize: "22px",
+    lineHeight: "32px",
+    letterSpacing: "-0.6px",
+  },
+  "5xs": {
+    fontSize: "20px",
+    lineHeight: "24px",
+    letterSpacing: "-0.6px",
+  },
+};
+
+type DefaultType =
+  | "3xl"
+  | "xxl"
+  | "xl"
+  | "l"
+  | "m"
+  | "s"
+  | "xs"
+  | "xxs"
+  | "3xs"
+  | "4xs"
+  | "5xs";
+
+type ResponsiveType = {
+  xl?: DefaultType;
+  lg?: DefaultType;
+  md?: DefaultType;
+  sm?: DefaultType;
+  base?: DefaultType;
+};
+
+interface IHeading extends TextProps {
+  children: any;
+  color?: string;
+  size: DefaultType | ResponsiveType;
+}
+
+const getResponsiveValues = (size_obj: ResponsiveType, property: any) => {
+  const sizes: ResponsiveType = {};
+  Object.entries(size_obj).forEach(([key, value]) => {
+    // @ts-ignore
+    sizes[key] = HeadingVariant[value][property];
+  });
+  return sizes;
+};
+
+const Heading = ({ size, color, children, ...props }: IHeading) => {
+  return (
+    <Text
+      as="h1"
+      color={color || "#000000"}
+      fontFamily="Degular"
+      fontSize={
+        typeof size === "string"
+          ? HeadingVariant[size].fontSize
+          : {
+              ...getResponsiveValues(size, "fontSize"),
+            }
+      }
+      fontWeight={700}
+      fontStyle="normal"
+      lineHeight={
+        typeof size === "string"
+          ? HeadingVariant[size].lineHeight
+          : {
+              ...getResponsiveValues(size, "lineHeight"),
+            }
+      }
+      letterSpacing={
+        typeof size === "string"
+          ? HeadingVariant[size].letterSpacing
+          : {
+              ...getResponsiveValues(size, "letterSpacing"),
+            }
+      }
+      m="0"
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default Heading;

package/src/components/Typography/Paragraph.tsx

@@ -0,0 +1,105 @@
+/** @format */
+
+import { Text, TextProps } from "@chakra-ui/react";
+
+const ParagraphVariant = {
+  xl: {
+    fontSize: "28px",
+    lineHeight: "40px",
+    letterSpacing: "-0.3px",
+  },
+  l: {
+    fontSize: "24px",
+    lineHeight: "32px",
+    letterSpacing: "-0.3px",
+  },
+  m: {
+    fontSize: "20px",
+    lineHeight: "26px",
+    letterSpacing: "-0.2px",
+  },
+  s: {
+    fontSize: "18px",
+    lineHeight: "24px",
+    letterSpacing: "-0.2px",
+  },
+  xs: {
+    fontSize: "16px",
+    lineHeight: "24px",
+    letterSpacing: "-0.2px",
+  },
+  xxs: {
+    fontSize: "14px",
+    lineHeight: "16px",
+    letterSpacing: "-0.2px",
+  },
+  "3xs": {
+    fontSize: "12px",
+    lineHeight: "16px",
+    letterSpacing: "-0.024px",
+  },
+};
+
+type DefaultType = "xl" | "l" | "m" | "s" | "xs" | "xxs" | "3xs";
+
+type ResponsiveType = {
+  xl?: DefaultType;
+  lg?: DefaultType;
+  md?: DefaultType;
+  sm?: DefaultType;
+  base?: DefaultType;
+};
+
+interface IParagraph extends TextProps {
+  children: any;
+  color?: string;
+  size: DefaultType | ResponsiveType;
+}
+
+const getResponsiveValues = (size_obj: ResponsiveType, property: any) => {
+  const sizes: ResponsiveType = {};
+  Object.entries(size_obj).forEach(([key, value]) => {
+    // @ts-ignore
+    sizes[key] = ParagraphVariant[value][property];
+  });
+  return sizes;
+};
+
+const Paragraph = ({ size, color, children, ...props }: IParagraph) => {
+  return (
+    <Text
+      as="p"
+      color={color || "#000000"}
+      fontFamily="Degular"
+      fontSize={
+        typeof size === "string"
+          ? ParagraphVariant[size].fontSize
+          : {
+              ...getResponsiveValues(size, "fontSize"),
+            }
+      }
+      fontWeight={500}
+      fontStyle="normal"
+      lineHeight={
+        typeof size === "string"
+          ? ParagraphVariant[size].lineHeight
+          : {
+              ...getResponsiveValues(size, "lineHeight"),
+            }
+      }
+      letterSpacing={
+        typeof size === "string"
+          ? ParagraphVariant[size].letterSpacing
+          : {
+              ...getResponsiveValues(size, "letterSpacing"),
+            }
+      }
+      m="0"
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default Paragraph;

package/src/components/Typography/Subtitle.tsx

@@ -0,0 +1,148 @@
+/** @format */
+
+import { Text, TextProps } from "@chakra-ui/react";
+
+const SubtitleVariant = {
+  "3xl": {
+    fontSize: "72px",
+    lineHeight: "96px",
+    letterSpacing: "-3px",
+  },
+  xxl: {
+    fontSize: "64px",
+    lineHeight: "88px",
+    letterSpacing: "-3px",
+  },
+  xl: {
+    fontSize: "56px",
+    lineHeight: "72px",
+    letterSpacing: "-2px",
+  },
+  l: {
+    fontSize: "48px",
+    lineHeight: "64px",
+    letterSpacing: "-2px",
+  },
+  m: {
+    fontSize: "40px",
+    lineHeight: "56px",
+    letterSpacing: "-1.5px",
+  },
+  s: {
+    fontSize: "36px",
+    lineHeight: "48px",
+    letterSpacing: "-1.5px",
+  },
+  xs: {
+    fontSize: "32px",
+    lineHeight: "40px",
+    letterSpacing: "-1.5px",
+  },
+  xxs: {
+    fontSize: "28px",
+    lineHeight: "38px",
+    letterSpacing: "-1px",
+  },
+  "3xs": {
+    fontSize: "24px",
+    lineHeight: "32px",
+    letterSpacing: "-0.6px",
+  },
+  "4xs": {
+    fontSize: "20px",
+    lineHeight: "26px",
+    letterSpacing: "-0.4px",
+  },
+  "5xs": {
+    fontSize: "18px",
+    lineHeight: "24px",
+    letterSpacing: "-0.6px",
+  },
+  "6xs": {
+    fontSize: "16px",
+    lineHeight: "24px",
+    letterSpacing: "-0.4px",
+  },
+  "7xs": {
+    fontSize: "14px",
+    lineHeight: "16px",
+    letterSpacing: "-0.4px",
+  },
+};
+
+type DefaultType =
+  | "3xl"
+  | "xxl"
+  | "xl"
+  | "l"
+  | "m"
+  | "s"
+  | "xs"
+  | "xxs"
+  | "3xs"
+  | "4xs"
+  | "5xs"
+  | "6xs"
+  | "7xs";
+
+type ResponsiveType = {
+  xl?: DefaultType;
+  lg?: DefaultType;
+  md?: DefaultType;
+  sm?: DefaultType;
+  base?: DefaultType;
+};
+
+interface ISubtitle extends TextProps {
+  children: any;
+  color?: string;
+  size: DefaultType | ResponsiveType;
+}
+
+const getResponsiveValues = (size_obj: ResponsiveType, property: any) => {
+  const sizes: ResponsiveType = {};
+  Object.entries(size_obj).forEach(([key, value]) => {
+    // @ts-ignore
+    sizes[key] = SubtitleVariant[value][property];
+  });
+  return sizes;
+};
+
+const Subtitle = ({ size, color, children, ...props }: ISubtitle) => {
+  return (
+    <Text
+      as="h2"
+      color={color || "#000000"}
+      fontFamily="Degular"
+      fontSize={
+        typeof size === "string"
+          ? SubtitleVariant[size].fontSize
+          : {
+              ...getResponsiveValues(size, "fontSize"),
+            }
+      }
+      fontWeight={600}
+      fontStyle="normal"
+      lineHeight={
+        typeof size === "string"
+          ? SubtitleVariant[size].lineHeight
+          : {
+              ...getResponsiveValues(size, "lineHeight"),
+            }
+      }
+      letterSpacing={
+        typeof size === "string"
+          ? SubtitleVariant[size].letterSpacing
+          : {
+              ...getResponsiveValues(size, "letterSpacing"),
+            }
+      }
+      m="0"
+      {...props}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export default Subtitle;

package/src/components/Uploader/FileUploader.tsx

@@ -0,0 +1,132 @@
+/** @format */
+
+import { Box, Center, Flex, useMediaQuery } from "@chakra-ui/react";
+import { FilePresentIcon, MoreHorizontalIcon, PhotoLibraryIcon } from "icons";
+import Colors from "components/styleGuide/Colors";
+import Button from "components/Button";
+import { ChangeEvent, useRef } from "react";
+import Paragraph from "components/Typography/Paragraph";
+import Subtitle from "components/Typography/Subtitle";
+
+export interface IFileUpload {
+  file?: File | undefined;
+  onHandleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  sizeLimit?: number;
+  fileActionPopover?: React.ReactNode;
+  accept?: string;
+  fileTypeIcon?: JSX.Element;
+  headerText?: string;
+  subtitleText?: string;
+}
+
+const FileUploader = ({
+  file,
+  onHandleChange,
+  sizeLimit = 100,
+  fileActionPopover,
+  accept,
+  fileTypeIcon,
+  headerText,
+  subtitleText,
+}: IFileUpload) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isMobile] = useMediaQuery("(max-width: 768px)");
+
+  const getFileSize = (filesize: number) => {
+    const size = filesize / 1000;
+    if (size > 1000) {
+      return `${(size / 1000).toFixed(2)} MB`;
+    } else {
+      return `${size.toFixed(2)} KB`;
+    }
+  };
+
+  return (
+    <>
+      {file ? (
+        <Box>
+          <Flex mt="12px" gap="16px" alignItems={"center"}>
+            <Center boxSize={"48px"} bg={Colors.gray50} borderRadius={"6px"}>
+              {fileTypeIcon}
+            </Center>
+            <Box>
+              <Paragraph size={"xs"}>{file?.name}</Paragraph>
+              <Paragraph size={"xxs"} color={Colors.gray400} mt="4px">
+                {getFileSize(file?.size)}
+              </Paragraph>
+            </Box>
+            {fileActionPopover ? (
+              <>{fileActionPopover}</>
+            ) : (
+              <Center ml="auto" boxSize={"24px"} cursor={"pointer"}>
+                <MoreHorizontalIcon fontSize={"24px"} />
+              </Center>
+            )}
+          </Flex>
+        </Box>
+      ) : (
+        <Flex
+          cursor={"pointer"}
+          direction={"column"}
+          align={"center"}
+          outline={"1px dashed"}
+          outlineColor={Colors.gray100}
+          borderRadius={"16px"}
+          _hover={{
+            outline: "3px solid",
+            outlineColor: Colors.black300,
+            bgColor: Colors.gray50,
+          }}
+          p="24px"
+          w="full"
+          onClick={(e) => {
+            e.preventDefault();
+            fileInputRef.current?.click();
+          }}
+        >
+          <Center boxSize={"40px"}>
+            <FilePresentIcon fontSize={"40px"} />
+          </Center>
+          <Subtitle
+            size={isMobile ? "5xs" : "4xs"}
+            mt={isMobile ? "12px" : "24px"}
+          >
+            {headerText ?? "Drop your file here"}
+          </Subtitle>
+          <Paragraph
+            size={isMobile ? "xxs" : "xs"}
+            color={Colors.gray400}
+            textAlign={"center"}
+            m="10px 0 28px 0"
+          >
+            {subtitleText ?? `${sizeLimit}MB total limit.`}
+          </Paragraph>
+          <Button
+            size="small"
+            bg={Colors.white100}
+            variant="outline"
+            label={
+              <Flex align="center" gap="4px">
+                <PhotoLibraryIcon />
+                <Subtitle size={"6xs"} lineHeight={"20px"}>
+                  Click to browse
+                </Subtitle>
+              </Flex>
+            }
+          />
+        </Flex>
+      )}
+
+      <input
+        type="file"
+        accept={accept ? accept : "*"}
+        id="inputFile"
+        style={{ display: "none" }}
+        ref={fileInputRef}
+        onChange={onHandleChange}
+      />
+    </>
+  );
+};
+
+export default FileUploader;