mainstack-design-system 0.0.0

package/src/components/Uploader/ImageUploader.tsx

@@ -0,0 +1,311 @@
+/** @format */
+
+import {
+  Box,
+  Center,
+  Circle,
+  Flex,
+  Grid,
+  GridItem,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  SimpleGrid,
+  Text,
+  useMediaQuery,
+} from "@chakra-ui/react";
+import Button from "components/Button";
+import Paragraph from "components/Typography/Paragraph";
+import Subtitle from "components/Typography/Subtitle";
+import Colors from "components/styleGuide/Colors";
+import {
+  AddIcon,
+  MoreHorizontalIcon,
+  PhotoIcon,
+  PhotoLibraryIcon,
+  TrashDeleteBinIcon,
+} from "icons";
+import { ChangeEvent, useRef } from "react";
+
+export interface IImageUpload {
+  onHandleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  imageArray: string[];
+  multiple?: boolean;
+  coverImageIndex?: number;
+  multiImagePopover?: React.ReactNode;
+  handleDeleteImage?: (e: any) => void;
+  handleChangeCoverImage?: (e: any) => void;
+  accept?: string;
+}
+
+const ImageUploader = ({
+  multiple = false,
+  onHandleChange,
+  imageArray,
+  coverImageIndex,
+  handleDeleteImage,
+  handleChangeCoverImage,
+  multiImagePopover,
+  accept,
+  ...props
+}: IImageUpload) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isMobile] = useMediaQuery("(max-width: 767px)");
+
+  return (
+    <>
+      <Grid templateColumns={"repeat(5, 1fr)"} gap="16px">
+        {imageArray.length > 0 ? (
+          <GridItem colSpan={5}>
+            <Flex
+              bgImage={imageArray[coverImageIndex ?? 0]}
+              bgSize={"cover"}
+              bgPosition={"center"}
+              bgRepeat={"no-repeat"}
+              direction={"column"}
+              align={"center"}
+              justify={"center"}
+              outline={"1px solid"}
+              outlineColor={Colors.gray100}
+              borderRadius={"16px"}
+              p="24px"
+              aspectRatio={764 / 574}
+              position={"relative"}
+              {...props}
+            >
+              {!multiple ? (
+                <Flex position={"absolute"} bottom={"24px"} gap="12px">
+                  <Button
+                    size="medium"
+                    bgColor={Colors.white100}
+                    variant="link"
+                    textColor={Colors.black300}
+                    label={
+                      <Flex align="center" gap="4px">
+                        <PhotoLibraryIcon />
+                        <Subtitle size={"6xs"} lineHeight={"20px"}>
+                          Change image
+                        </Subtitle>
+                      </Flex>
+                    }
+                    onClick={(e) => {
+                      e.preventDefault();
+                      fileInputRef.current?.click();
+                    }}
+                  />
+                  <Button
+                    size="medium"
+                    bgColor={Colors.white100}
+                    variant="link"
+                    textColor={Colors.black300}
+                    label={
+                      <Flex align="center" gap="4px">
+                        <TrashDeleteBinIcon />
+                        <Subtitle size={"6xs"} lineHeight={"20px"}>
+                          Delete image
+                        </Subtitle>
+                      </Flex>
+                    }
+                    onClick={handleDeleteImage}
+                  />
+                </Flex>
+              ) : (
+                <Center
+                  bg={Colors.white100}
+                  px="12px"
+                  py="8px"
+                  borderRadius={"100px"}
+                  position={"absolute"}
+                  top={"20px"}
+                  right={"20px"}
+                >
+                  <Text
+                    fontFamily={"Degular"}
+                    fontSize={"14px"}
+                    fontWeight={600}
+                    lineHeight={"16px"}
+                    letterSpacing={"-0.4px"}
+                    m="0"
+                  >
+                    Cover image
+                  </Text>
+                </Center>
+              )}
+            </Flex>
+          </GridItem>
+        ) : (
+          <GridItem colSpan={5}>
+            <Flex
+              direction={"column"}
+              align={"center"}
+              justify={"center"}
+              outline={"1px dashed"}
+              outlineColor={Colors.gray100}
+              borderRadius={"16px"}
+              _hover={{
+                outline: "3px solid",
+                outlineColor: Colors.black300,
+                bgColor: Colors.gray50,
+              }}
+              p={isMobile ? "16px" : "24px"}
+              aspectRatio={764 / 574}
+              position={"relative"}
+              onClick={(e) => {
+                e.preventDefault();
+                fileInputRef.current?.click();
+              }}
+              {...props}
+            >
+              <Center boxSize={isMobile ? "24px" : "40px"}>
+                <PhotoLibraryIcon fontSize={isMobile ? "24px" : "40px"} />
+              </Center>
+              <Subtitle
+                size={isMobile ? "5xs" : "4xs"}
+                mt={isMobile ? "12px" : "24px"}
+              >
+                Drop your product images here.
+              </Subtitle>
+              <Paragraph
+                size={isMobile ? "xxs" : "xs"}
+                color={Colors.gray400}
+                textAlign={"center"}
+                mt="10px"
+              >
+                1600 *1200 (4:3) recommended, up to 10MB each. You can add up-to
+                5 photos
+              </Paragraph>
+
+              <Box position={"absolute"} bottom={isMobile ? "16px" : "24px"}>
+                <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>
+                  }
+                />
+              </Box>
+            </Flex>
+          </GridItem>
+        )}
+      </Grid>
+      {multiple && (
+        <SimpleGrid
+          minChildWidth={isMobile ? "100%" : "140px"}
+          gap={isMobile ? "8px" : "16px"}
+          mt={isMobile ? "8px" : "16px"}
+        >
+          {[1, 2, 3, 4, 5].map((item, index) => (
+            <>
+              <Center
+                borderRadius={isMobile ? "16px" : "12px"}
+                key={index}
+                aspectRatio={764 / 574}
+                bgImage={imageArray[index]}
+                outline={imageArray[index] ? "1px solid" : "1px dashed"}
+                outlineColor={Colors.gray50}
+                bgSize={"cover"}
+                bgPosition={"center"}
+                bgRepeat={"no-repeat"}
+                position={"relative"}
+                _hover={{
+                  outline: "3px solid",
+                  outlineColor: imageArray[index]
+                    ? Colors.white100
+                    : Colors.black300,
+                  bgColor: imageArray[index] ? Colors.white100 : Colors.gray50,
+                }}
+              >
+                {imageArray[index] ? (
+                  <Box position={"absolute"} top={"8px"} right={"8px"}>
+                    <Popover placement="bottom-end">
+                      <PopoverTrigger>
+                        <Circle
+                          bg={Colors.white100}
+                          size={isMobile ? "24px" : "32px"}
+                          cursor={"pointer"}
+                        >
+                          <MoreHorizontalIcon />
+                        </Circle>
+                      </PopoverTrigger>
+                      <PopoverContent
+                        bg={"#fff"}
+                        borderRadius={"12px"}
+                        boxShadow={"none"}
+                        w="fit-content"
+                        p="8px 12px"
+                      >
+                        <PopoverBody p="0">
+                          <Flex
+                            cursor={"pointer"}
+                            alignItems={"center"}
+                            gap="8px"
+                            p="14px"
+                            onClick={() =>
+                              handleChangeCoverImage &&
+                              handleChangeCoverImage(index)
+                            }
+                          >
+                            <Center>
+                              <PhotoIcon fill={"red"} />
+                            </Center>
+                            <Subtitle size={"6xs"}>Make cover image</Subtitle>
+                          </Flex>
+                          <Flex
+                            cursor={"pointer"}
+                            alignItems={"center"}
+                            gap="8px"
+                            p="14px"
+                            onClick={() => {
+                              if (handleChangeCoverImage && handleDeleteImage) {
+                                handleChangeCoverImage(0);
+                                handleDeleteImage(index);
+                              }
+                            }}
+                          >
+                            <TrashDeleteBinIcon />
+                            <Subtitle size={"6xs"} color={Colors.red400}>
+                              Delete image
+                            </Subtitle>
+                          </Flex>
+                        </PopoverBody>
+                      </PopoverContent>
+                    </Popover>
+                  </Box>
+                ) : (
+                  <Center
+                    cursor={"pointer"}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      fileInputRef.current?.click();
+                    }}
+                  >
+                    <AddIcon fontSize={"24px"} />
+                  </Center>
+                )}
+              </Center>
+            </>
+          ))}
+        </SimpleGrid>
+      )}
+
+      <input
+        type="file"
+        accept={accept || "image/*"}
+        multiple={multiple}
+        id="inputFile"
+        style={{ display: "none" }}
+        ref={fileInputRef}
+        onChange={onHandleChange}
+      />
+    </>
+  );
+};
+
+export default ImageUploader;

package/src/components/controls/Chip.tsx

@@ -0,0 +1,78 @@
+/** @format */
+
+import { Flex, Text, FlexProps } from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+import RadioButton from "./RadioButton";
+interface Props extends FlexProps {
+  isChecked: boolean;
+  label: string;
+  hasRadio?: boolean;
+}
+const Chip = ({ isChecked, label, hasRadio, ...rest }: Props) => {
+  return (
+    <Flex
+      pl={hasRadio ? "16px" : "16px"}
+      py={hasRadio ? "12px" : "16px"}
+      pr={hasRadio ? "12px" : "16px"}
+      justifyContent={"center"}
+      alignItems={"center"}
+      borderRadius={"360px"}
+      width={"fit-content"}
+      minWidth={hasRadio ? "97px" : "67px"}
+      height={"48px"}
+      cursor={"pointer"}
+      bg={Colors.white100}
+      boxSizing="border-box"
+      position={"relative"}
+      _hover={{
+        bg: Colors.gray50,
+        transition: "border 0.1s ease-in-out, background 0.1s ease-in-out",
+        ".radio": {
+          bg: isChecked ? "" : Colors.gray50,
+          transition: "border 0.1s ease-in-out, background 0.1s ease-in-out",
+        },
+        _before: {
+          border: `3px solid ${Colors.black300}`,
+          transition: "border 0.2s ease-in-out, background 0.2s ease-in-out",
+        },
+      }}
+      {...rest}
+      _before={{
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        border: isChecked
+          ? `3px solid ${Colors.black300}`
+          : `1px solid ${Colors.gray50}`,
+        borderRadius: "360px",
+      }}
+    >
+      <Flex justifyContent={"space-between"} alignItems={"center"} gap={"10px"}>
+        <Text
+          color={isChecked ? Colors.black300 : Colors.gray400}
+          fontFamily={"Degular"}
+          fontSize={"16px"}
+          fontWeight={600}
+          lineHeight={"16px"}
+          letterSpacing={"-0.4px"}
+          flex={1}
+          margin={0}
+        >
+          {label}
+        </Text>
+        {hasRadio && (
+          <RadioButton
+            isChecked={isChecked}
+            isDisabled={!isChecked}
+            className="radio"
+          />
+        )}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Chip;

package/src/components/controls/DoubleTab.tsx

@@ -0,0 +1,80 @@
+/** @format */
+
+import {
+  Tabs as DefaultTabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  TabProps,
+} from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+export interface DoubleTabProps extends TabProps {
+  items: {
+    name: string;
+    element: any;
+  }[];
+}
+const DoubleTab = ({ items }: DoubleTabProps) => {
+  return (
+    <DefaultTabs>
+      <TabList
+        h={"52px"}
+        background={Colors.gray50}
+        alignItems="center"
+        borderRadius={"100px"}
+        p={"4px"}
+        borderBottom="unset"
+        fontFamily="Degular"
+        fontSize={"16px"}
+        lineHeight={"18px"}
+        gap={"4px"}
+        w={["100%", "max-content"]}
+        borderColor={Colors.gray50}
+        overflowX={["scroll", "auto"]}
+      >
+        {items.map((item, index) => (
+          <Tab
+            w="fit-content"
+            h="100%"
+            display="flex"
+            fontFamily={"Degular"}
+            fontSize={"16px"}
+            justifyContent="center"
+            border="none"
+            marginBottom="0"
+            cursor="pointer"
+            fontWeight={600}
+            color={Colors.gray400}
+            letterSpacing={"-0.4px"}
+            lineHeight={"16px"}
+            transition={"all ease-in-out .4s"}
+            _selected={{
+              color: `${Colors.black300} !important`,
+              borderColor: "unset !important",
+              backgroundColor: Colors.white100,
+              borderRadius: "100px",
+              transition: "all ease-in-out .4s",
+              boxShadow: "0px 1px 2px 0px rgba(86, 97, 107, 0.10)",
+            }}
+            px={"24px"}
+            py={"14px"}
+            key={index}
+          >
+            {item.name}
+          </Tab>
+        ))}
+      </TabList>
+
+      <TabPanels>
+        {items.map((item, index) => (
+          <TabPanel padding={"0"} key={index}>
+            {item.element}
+          </TabPanel>
+        ))}
+      </TabPanels>
+    </DefaultTabs>
+  );
+};
+
+export default DoubleTab;

package/src/components/controls/Pagination.tsx

@@ -0,0 +1,164 @@
+/** @format */
+
+import { Flex, Select, Show } from "@chakra-ui/react";
+import Button from "components/Button";
+import IconButton from "components/Button/IconButton";
+import Colors from "components/styleGuide/Colors";
+import ChevronLeftIcon from "icons/ChevronLeftIcon";
+import ChevronRightIcon from "icons/ChevronRightIcon";
+
+export interface PaginationProps {
+  limit: number;
+  setLimit: any;
+  page: number;
+  setPage: any;
+  total?: number;
+  options?: any;
+}
+
+const Pagination = ({
+  limit,
+  setLimit,
+  page,
+  setPage,
+  total = 3,
+  options,
+}: PaginationProps) => {
+  const totalPages = Math.ceil(total / limit);
+
+  return (
+    <>
+      <Flex
+        alignItems={"center"}
+        justifyContent={{ base: "space-between", md: "flex-end" }}
+        columnGap={"12px"}
+        width="100%"
+        mt={"24px"}
+        mb={["55px", 0]}
+        border={"none"}
+      >
+        <Show above="md">
+          <Select
+            bg={Colors.gray50}
+            borderRadius="100px"
+            border={"none"}
+            _focus={{
+              outline: `2px solid ${Colors.gray50}`,
+              outlineOffset: "0px",
+              bg: Colors.white100,
+            }}
+            _focusVisible={{
+              outline: `2px solid ${Colors.gray50}`,
+              outlineOffset: "0px",
+              bg: Colors.white100,
+            }}
+            fontWeight={"600"}
+            fontFamily="Degular"
+            fontSize={"16px"}
+            width="182px"
+            height={"40px"}
+            onChange={(e) => {
+              setLimit(parseInt(e?.target?.value));
+              setPage(1);
+            }}
+            value={limit}
+            cursor="pointer"
+          >
+            {options ?? (
+              <>
+                <option value={10}>10 items per page</option>
+                <option value={20}>20 items per page</option>
+                <option value={50}>50 items per page</option>
+                <option value={100}>100 items per page</option>
+              </>
+            )}
+          </Select>
+        </Show>
+
+        <Show above="md">
+          <Button
+            label={"Previous"}
+            size="medium"
+            variant="tertiary"
+            onClick={() => {
+              setPage(Math.max(page - 1, 1));
+            }}
+            isDisabled={page === 1}
+            bg={Colors.gray50}
+          />
+        </Show>
+
+        <Show below="md">
+          <IconButton
+            size="medium"
+            variant="tertiary"
+            onClick={() => setPage(Math.max(page - 1, 1))}
+            isDisabled={page === 1}
+          >
+            <ChevronLeftIcon color={Colors.black300} fontSize={"24px"} />
+          </IconButton>
+        </Show>
+
+        <Flex columnGap={"12px"}>
+          {Array.from({ length: Math.min(totalPages, 3) })?.map(
+            (val, index) => (
+              <IconButton
+                key={index}
+                size="medium"
+                boxSize={"40px"}
+                variant={
+                  page ===
+                  (index === 2
+                    ? totalPages
+                    : index === 1 && page > 2
+                    ? Math.min(page, totalPages - 1)
+                    : index + 1)
+                    ? "tertiary"
+                    : "outline"
+                }
+                onClick={() =>
+                  setPage(
+                    index === 2
+                      ? totalPages
+                      : index === 1 && page > 2
+                      ? Math.min(page, totalPages - 1)
+                      : index + 1
+                  )
+                }
+              >
+                {index === 2
+                  ? totalPages
+                  : index === 1 && page > 2
+                  ? Math.min(page, totalPages - 1)
+                  : index + 1}
+              </IconButton>
+            )
+          )}
+        </Flex>
+
+        <Show above="md">
+          <Button
+            label={"Next"}
+            size="medium"
+            variant="tertiary"
+            onClick={() => setPage(page + 1)}
+            isDisabled={page === totalPages}
+          />
+        </Show>
+
+        <Show below="md">
+          <IconButton
+            size="medium"
+            variant="tertiary"
+            onClick={() => setPage(page + 1)}
+            isDisabled={page === totalPages}
+          >
+            <ChevronRightIcon color={Colors.black300} fontSize={"24px"} />
+          </IconButton>
+        </Show>
+      </Flex>
+    </>
+  );
+};
+
+export default Pagination;