mainstack-design-system 0.0.7 → 0.0.8

package/src/components/Uploader/ImageUploader.tsx

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

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

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

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