mainstack-design-system 0.0.0

package/src/components/InputFields/MarkdownEditor.tsx

@@ -0,0 +1,246 @@
+/** @format */
+import { useMemo, useRef } from "react";
+import ReactQuill from "react-quill";
+import { Box, Text, Flex, FormLabel } from "@chakra-ui/react";
+import { AutoFixIcon } from "icons";
+import Colors from "components/styleGuide/Colors";
+import "react-quill/dist/quill.snow.css";
+import "assets/styles/index.css";
+// import { ClipLoader } from "react-spinners";
+
+interface IMarkdownEditor {
+  onChange: (val: string) => void;
+  border?: string;
+  placeholder?: string;
+  onHandleFile: (e: File) => void;
+  label?: string;
+}
+
+type MarkdownEditorWithExclusiveValues =
+  | (IMarkdownEditor & { value?: string; defaultValue?: never })
+  | (IMarkdownEditor & { defaultValue?: string; value?: never });
+
+interface ICustomtoolBar {
+  setValue: (e: any) => void;
+  handleGenerateAiDescription?: () => void;
+  isLoading?: boolean;
+}
+
+const CustomToolbar = ({
+  setValue,
+  handleGenerateAiDescription,
+  isLoading,
+}: ICustomtoolBar) => {
+  return (
+    <div id="toolbar">
+      <span className="ql-formats">
+        <span className="ql-hello">
+          <Box borderRight={`1px solid ${Colors.gray100}`} pr={"4px"}>
+            <Flex
+              justifyContent={"center"}
+              alignItems={"center"}
+              borderRadius={"100px"}
+              px={"12px"}
+              py={"6px"}
+              bg={Colors.purple50}
+              gap={"8px"}
+              cursor={isLoading ? "not-allowed" : "pointer"}
+              className="aiBtn"
+              onClick={handleGenerateAiDescription}
+              minWidth={{ md: "150px", base: "auto" }}
+            >
+              {isLoading ? (
+                // <ClipLoader
+                //   size={pixel2rem(20)}
+                //   color={Colors.purple400 || ""}
+                // />
+                <></>
+              ) : (
+                <>
+                  <Text
+                    color={Colors.purple400}
+                    fontFamily={"Degular"}
+                    fontSize={"0.875rem"}
+                    fontWeight={600}
+                    lineHeight={"1rem"}
+                    letterSpacing={"-0.4px"}
+                    display={{ md: "block", base: "none" }}
+                  >
+                    Generate with AI
+                  </Text>
+                  <AutoFixIcon
+                    color={Colors.purple400}
+                    boxSize={"20px"}
+                    mt={1}
+                    className="aiBtn__icon"
+                  />
+                </>
+              )}
+            </Flex>
+          </Box>
+        </span>
+      </span>
+      <span className="ql-formats">
+        <select
+          className="ql-header"
+          defaultValue={""}
+          onChange={(e) => e.persist()}
+        >
+          <option value="1" />
+          <option value="2" />
+          <option value="3" />
+          <option value="4" />
+          <option value="5" />
+          <option value="6" />
+          <option selected />
+        </select>
+      </span>
+
+      <span className="ql-formats">
+        <button className="ql-bold"></button>
+        <button className="ql-italic"></button>
+        <button className="ql-underline"></button>
+        <button className="ql-strike"></button>
+      </span>
+      <span className="ql-formats">
+        <button className="ql-blockquote"></button>
+        <button className="ql-code-block"></button>
+      </span>
+      <span className="ql-formats">
+        <button className="ql-list" value="ordered"></button>
+        <button className="ql-list" value="bullet"></button>
+      </span>
+      <span className="ql-formats">
+        <button className="ql-script" value="sub"></button>
+        <button className="ql-script" value="super"></button>
+      </span>
+      <span className="ql-formats">
+        <button className="ql-indent" value="-1"></button>
+        <button className="ql-indent" value="+1"></button>
+      </span>
+      <span className="ql-formats">
+        <button className="ql-direction" value="rtl"></button>
+      </span>
+      <span className="ql-formats">
+        <button className="ql-link"></button>
+        <button className="ql-image"></button>
+        <button className="ql-video"></button>
+      </span>
+      <span className="ql-formats">
+        <button className="ql-clean"></button>
+      </span>
+    </div>
+  );
+};
+
+export const MarkdownEditor = ({
+  defaultValue,
+  onChange,
+  border,
+  placeholder = "Type your message here...",
+  value,
+  onHandleFile,
+  label,
+}: MarkdownEditorWithExclusiveValues) => {
+  const quillRef = useRef<any>(null);
+
+  const fileToDataUri = (file: File) =>
+    new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        resolve(event?.target?.result);
+      };
+      reader.readAsDataURL(file);
+    });
+
+  const imageHandler = () => {
+    const input = document.createElement("input");
+    const editor = quillRef.current.getEditor();
+
+    input.setAttribute("type", "file");
+    input.setAttribute("accept", "image/*");
+    input.click();
+
+    input.onchange = () => {
+      const file: File | null = input && input.files && input.files[0];
+      if (file) {
+        onHandleFile(file);
+        // 	if (/^image\//.test(file.type)) {
+        //   fileToDataUri(file).then(async (dataURL) => {
+        //     const data = {
+        //       images: [
+        //         {
+        //           alt: "",
+        //           buffer: dataURL,
+        //         },
+        //       ],
+        //     };
+
+        //     const res = await Request.post(
+        //       `/upload-images?account_id=${account_id}`,
+        //       data
+        //     );
+
+        //     const url = res.data && res?.data[0]?.path;
+        //     editor.insertEmbed(editor.getSelection(), "image", url);
+        //   });
+        // } else {
+        //   customToast("You can only upload an image.", ToastType.error);
+        // }
+      }
+    };
+  };
+
+  const modules = useMemo(
+    () => ({
+      toolbar: {
+        container: "#toolbar",
+        handlers: {
+          image: imageHandler,
+        },
+      },
+    }),
+    // eslint-disable-next-line
+    []
+  );
+
+  return (
+    <Box w="full" fontFamily={"Degular"} fontWeight={500}>
+      {label && (
+        <FormLabel
+          fontSize={"1rem"}
+          lineHeight="1.25rem"
+          fontWeight={600}
+          fontFamily="Degular"
+          letterSpacing="-0.004rem"
+          mb="12px"
+        >
+          {label}
+        </FormLabel>
+      )}
+      <Box
+        border={border ?? `1px solid ${Colors.gray50}`}
+        borderRadius="12px"
+        className="markdown-container"
+        p="16px"
+        _hover={{
+          background: Colors.gray50,
+          border: `3px solid ${Colors.black300}`,
+        }}
+        transition={"all 0.2s ease-in-out"}
+      >
+        <CustomToolbar setValue={onChange} />
+        <ReactQuill
+          modules={modules}
+          theme="snow"
+          onChange={onChange}
+          defaultValue={value}
+          ref={quillRef}
+          placeholder={placeholder}
+          style={{ fontSize: "20px" }}
+          value={value}
+        />
+      </Box>
+    </Box>
+  );
+};

package/src/components/InputFields/SearchInput.tsx

@@ -0,0 +1,80 @@
+/** @format */
+
+import {
+  Input as ChakraInput,
+  InputGroup,
+  InputLeftElement,
+  InputProps,
+  InputRightElement,
+} from "@chakra-ui/react";
+import Colors from "components/styleGuide/Colors";
+// This will change when we build icon components
+import { ReactComponent as CloseIcon } from "assets/svgs/close-circle.svg";
+import { ReactComponent as SearchIcon } from "assets/svgs/search-normal.svg";
+
+export interface ISearchInput extends InputProps {
+  name: string;
+  value?: string;
+  id: string;
+  onChange?: (e?: any) => void;
+  defaultValue?: any;
+  placeholder?: any;
+  error?: boolean;
+  errorMessage?: string;
+  success?: boolean;
+  successMessage?: string;
+  hint?: string;
+  onClear?: any;
+}
+
+const SearchInput = ({
+  name,
+  id,
+  value,
+  onChange,
+  defaultValue,
+  placeholder,
+  onClear,
+}: ISearchInput) => {
+  return (
+    <InputGroup>
+      <InputLeftElement py="12px" ml="4px">
+        <SearchIcon />
+      </InputLeftElement>
+      {value && (
+        <InputRightElement py="12px" mr="8px" onClick={onClear}>
+          <CloseIcon />
+        </InputRightElement>
+      )}
+
+      <ChakraInput
+        name={name}
+        id={id}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={onChange}
+        placeholder={placeholder || "Search..."}
+        bg={Colors.gray50}
+        borderRadius="100px"
+        border="none"
+        fontFamily={"Degular"}
+        fontSize={"16px"}
+        lineHeight={"24px"}
+        letterSpacing={"-0.2px"}
+        fontWeight={500}
+        _focus={{
+          outline: `none !important`,
+        }}
+        _focusVisible={{
+          outline: `none !important`,
+        }}
+        py="12px"
+        px="16px"
+        type="text"
+        _placeholder={{ color: `${Colors.gray200}` }}
+      />
+    </InputGroup>
+  );
+};
+
+export default SearchInput;

package/src/components/InputFields/SelectInput/CountrySelect.tsx

@@ -0,0 +1,142 @@
+/** @format */
+
+import { Box, Circle, Flex, FormLabel, Text } from "@chakra-ui/react";
+import AsyncSelect from "react-select/async";
+import countries_flag from "utils/countries-flag.json";
+import {
+  DropdownIndicator,
+  ISelectInputProps,
+  OptionType,
+  selectStyles,
+} from "./SelectInput";
+import { useRef } from "react";
+// eslint-disable-next-line import/named
+import { GroupBase } from "react-select";
+import Select from "react-select/dist/declarations/src/Select";
+
+const CustomOption = ({
+  value,
+  flag,
+  abr,
+}: {
+  value: string;
+  flag: string;
+  abr: string;
+}) => {
+  return (
+    <Flex alignItems="center" cursor={"pointer"} gap="12px">
+      {flag && (
+        <Circle
+          bg={`url(${flag})`}
+          bgSize="cover"
+          bgPosition="center"
+          bgRepeat="no-repeat"
+          size="20px"
+        ></Circle>
+      )}
+      <Text
+        fontSize="17px"
+        lineHeight={"120%"}
+        fontWeight={600}
+        fontFamily="Degular Display"
+        letterSpacing="0.1px"
+      >
+        {value}
+      </Text>
+    </Flex>
+  );
+};
+
+const countries = countries_flag
+  ?.sort((a, b) => a.name.localeCompare(b.name))
+  ?.map((i) => ({
+    value: i.name,
+    label: i.name,
+    flag: i.flag,
+    // @ts-ignore
+    abr: i.alpha3Code,
+    code: i.alpha2Code,
+  }));
+
+export interface ICountrySelectProps {
+  valueType?: "full" | "code";
+  options?: any;
+  label?: string;
+  placeholder?: string;
+  onChange?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  value?: any;
+}
+
+const CountrySelect = ({
+  value,
+  onChange,
+  label = "Country",
+  valueType = "full",
+  placeholder = "Select your country",
+  options = countries,
+}: ICountrySelectProps) => {
+  const loadOptions = (
+    searchValue: string,
+    callBack: (options: any[]) => void
+  ) => {
+    const filteredOptions = options?.filter((option: OptionType) =>
+      option.label.toLowerCase().includes(searchValue.toLowerCase())
+    );
+    callBack(filteredOptions);
+  };
+
+  const selectRef = useRef<Select<any, boolean, GroupBase<any>> | null>(null);
+
+  return (
+    <Box w="full" fontFamily={"Degular"} fontWeight={500}>
+      {label && (
+        <FormLabel
+          fontSize={"1rem"}
+          lineHeight="1.25rem"
+          fontWeight={600}
+          fontFamily="Degular"
+          letterSpacing="-0.004rem"
+          mb="12px"
+          htmlFor={"country"}
+        >
+          {label}
+        </FormLabel>
+      )}
+
+      <AsyncSelect
+        components={{
+          DropdownIndicator,
+          IndicatorSeparator: () => null,
+          // Option: CustomOption,
+        }}
+        loadOptions={loadOptions}
+        cacheOptions
+        defaultOptions={options}
+        id="country"
+        placeholder={placeholder}
+        styles={selectStyles}
+        formatOptionLabel={CustomOption}
+        name="country"
+        onChange={(e: any) => {
+          if (onChange) {
+            onChange(valueType === "code" ? e : e?.value);
+            selectRef?.current?.blur();
+          }
+        }}
+        ref={selectRef}
+        value={
+          value
+            ? {
+                value,
+                abr: options?.find((i: any) => i?.value === value)?.abr,
+                flag: options?.find((i: any) => i?.value === value)?.flag,
+              }
+            : null
+        }
+      />
+    </Box>
+  );
+};
+
+export default CountrySelect;

package/src/components/InputFields/SelectInput/PhoneNumberInput.tsx

@@ -0,0 +1,89 @@
+/** @format */
+
+import {
+  Box,
+  FormControl,
+  FormErrorMessage,
+  FormLabel,
+} from "@chakra-ui/react";
+import Paragraph from "components/Typography/Paragraph";
+import Colors from "components/styleGuide/Colors";
+import { useEffect } from "react";
+import PhoneInput from "react-phone-input-2";
+import "react-phone-input-2/lib/style.css";
+import "assets/styles/index.css";
+
+export interface IPhoneNumberInputProps {
+  value?: string;
+  onChange?: (value: string) => void;
+  enableSearch?: boolean;
+  placeholder?: string;
+  label?: string;
+  id?: string;
+  subtext?: string;
+}
+
+const PhoneNumberInput = ({
+  value,
+  onChange,
+  enableSearch,
+  placeholder,
+  label,
+  id,
+  subtext,
+}: IPhoneNumberInputProps) => {
+  const dropdown = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+	<mask id="mask0_1047_15277" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+	<rect width="20" height="20" fill="#C4C4C4"/>
+	</mask>
+	<g mask="url(#mask0_1047_15277)">
+	<path d="M9.99942 13.0211C9.8789 13.0211 9.76673 13.0019 9.66289 12.9634C9.55904 12.925 9.46032 12.8589 9.36674 12.7653L4.87252 8.27112C4.73405 8.13267 4.66322 7.95864 4.66002 7.74902C4.6568 7.53941 4.72763 7.36217 4.87252 7.2173C5.01738 7.07243 5.19302 7 5.39942 7C5.60582 7 5.78145 7.07243 5.92632 7.2173L9.99942 11.2904L14.0725 7.2173C14.211 7.07885 14.385 7.00802 14.5946 7.0048C14.8042 7.0016 14.9814 7.07243 15.1263 7.2173C15.2712 7.36217 15.3436 7.53781 15.3436 7.74422C15.3436 7.95062 15.2712 8.12626 15.1263 8.27112L10.6321 12.7653C10.5385 12.8589 10.4398 12.925 10.3359 12.9634C10.2321 13.0019 10.1199 13.0211 9.99942 13.0211Z" fill="#131316"/>
+	</g>
+	</svg>`;
+  useEffect(() => {
+    if (window) {
+      const el = document.querySelector(".phone_container_class .arrow");
+      if (el) {
+        // @ts-ignore
+        el.innerHTML = dropdown;
+      }
+    }
+  }, []);
+
+  return (
+    <Box w="full" fontFamily={"Degular"} fontWeight={500}>
+      {label && (
+        <FormLabel
+          fontSize={"1rem"}
+          lineHeight="1.25rem"
+          fontWeight={600}
+          fontFamily="Degular"
+          letterSpacing="-0.004rem"
+          mb="12px"
+          htmlFor={id ?? ""}
+        >
+          {label}
+        </FormLabel>
+      )}
+      <PhoneInput
+        enableSearch={enableSearch}
+        countryCodeEditable={false}
+        value={value}
+        onChange={onChange}
+        containerClass={`phone-input-container phone_container_class`}
+        placeholder={placeholder}
+        inputClass="phone_input"
+        buttonClass="phone_country_button"
+        dropdownClass="phone_country_dropdown"
+      />
+
+      {subtext && (
+        <Paragraph size={"xxs"} color={Colors.gray400} mt={"8px"}>
+          {subtext}
+        </Paragraph>
+      )}
+    </Box>
+  );
+};
+
+export default PhoneNumberInput;