mainstack-design-system 0.0.0

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

@@ -0,0 +1,395 @@
+/** @format */
+
+/* eslint-disable import/named */
+import { Box, FormLabel } from "@chakra-ui/react";
+import Paragraph from "components/Typography/Paragraph";
+import Colors from "components/styleGuide/Colors";
+import { motion } from "framer-motion";
+import { CancelFilledIcon, CloseIcon, ExpandMoreIcon } from "icons";
+import { useRef, useState } from "react";
+import Select, {
+  ClearIndicatorProps,
+  DropdownIndicatorProps,
+  GroupBase,
+  IndicatorSeparatorProps,
+  IndicatorsContainerProps,
+  MultiValueProps,
+  MultiValueRemoveProps,
+  OptionProps,
+  StylesConfig,
+  components,
+} from "react-select";
+import CreatableSelect from "react-select/creatable";
+import SelectType from "react-select/dist/declarations/src/Select";
+
+export const selectStyles: StylesConfig<any, boolean, GroupBase<any>> = {
+  control: (styles, state) => ({
+    // ...styles,
+    display: "flex",
+    height: "auto",
+    fontFamily: "Degular",
+    fontWeight: 500,
+    fontSize: "1rem",
+    lineHeight: "24px",
+    letterSpacing: "-0.2px",
+    padding: "0 16px 0 0px",
+    backgroundColor: Colors.white100,
+    borderRadius: "12px",
+    // borderColor: state.isFocused ? Colors.black300 : "#FFFFFF",
+    border: state.isFocused
+      ? `3px solid  ${Colors.black300}`
+      : `1px solid ${Colors.gray50}`,
+    boxShadow: "none",
+    outlineOffset: "0px",
+    transition: "all 100ms ease-in-out",
+    ":hover": {
+      border: `3px solid  ${Colors.black300}`,
+      boxShadow: "none",
+      cursor: "text",
+      backgroundColor: Colors.gray50,
+      transition: "all 100ms ease-in-out",
+    },
+  }),
+  singleValue: (styles) => ({
+    ...styles,
+    margin: "0px",
+    color: Colors.black300,
+    p: {
+      margin: "0px",
+      fontSize: "1rem",
+    },
+  }),
+  valueContainer: (styles, state) => ({
+    ...styles,
+    padding: `${
+      state.isMulti && state.hasValue ? "8px 16px 8px 8px" : "12px 16px"
+    }`,
+    gap: "8px",
+  }),
+  multiValue: (styles) => ({
+    // ...styles,
+    display: "flex",
+    alignItems: "center",
+    backgroundColor: Colors.black300,
+    borderRadius: "100px",
+    color: Colors.white100,
+    padding: "6px 12px 6px 20px",
+  }),
+
+  multiValueLabel: (styles) => ({
+    fontFamily: "Degular",
+    fontWeight: 500,
+    fontSize: "0.875rem",
+    letterSpacing: "-0.0125rem",
+    lineHeight: "1rem",
+    Color: Colors.white100,
+  }),
+
+  multiValueRemove: (styles) => ({
+    ...styles,
+    color: Colors.white100,
+    cursor: "pointer",
+    marginTop: "2px",
+    ":hover": {
+      backgroundColor: Colors.black300,
+      color: Colors.white100,
+    },
+  }),
+  menu: (styles) => ({
+    ...styles,
+    backgroundColor: Colors.white100,
+    boxShadow:
+      "0px 2px 4px 0px rgba(45, 59, 67, 0.05), 0px 2px 6px 0px rgba(45, 59, 67, 0.06)",
+    backdropFilter: "blur(8px)",
+    borderRadius: "12px",
+    position: "absolute",
+    top: "100%",
+    zIndex: 10000000000000,
+  }),
+  menuList: (styles) => ({
+    ...styles,
+    maxHeight: "264px",
+  }),
+  option: () => ({
+    padding: "14px",
+    margin: `0rem 8px`,
+    fontSize: `16px`,
+    fontWeight: 600,
+    borderRadius: "12px",
+    ":hover": {
+      backgroundColor: "#EFF1F6",
+    },
+    cursor: "pointer",
+    p: {
+      margin: "0px",
+    },
+  }),
+  placeholder: (styles) => ({
+    ...styles,
+    margin: "0px",
+    color: Colors.black300,
+  }),
+  input: (styles) => ({
+    ...styles,
+    margin: "0px",
+    padding: "0px",
+  }),
+  indicatorsContainer: (styles) => ({
+    ...styles,
+    margin: "0px",
+    padding: "0px",
+  }),
+};
+
+export type OptionType = {
+  value: string;
+  label: string;
+};
+export interface ISelectInputProps {
+  label: string;
+  id: string;
+  name: string;
+  placeholder?: string;
+  onChange?: (e: any) => void;
+  onBlur?: (e: any) => void;
+  options: Array<OptionType>;
+  value?: any;
+  defaultValue?: string;
+  isMulti?: boolean;
+  hideSelectedOptions?: boolean;
+  CustomOption?: React.ComponentType<OptionProps<any, boolean, GroupBase<any>>>;
+  CustomMultiValue?: React.ComponentType<
+    MultiValueProps<any, boolean, GroupBase<any>>
+  >;
+}
+
+export const DropdownIndicator = (props: DropdownIndicatorProps) => {
+  return (
+    <>
+      {props.isMulti ? (
+        <></>
+      ) : (
+        <components.DropdownIndicator {...props}>
+          <motion.div animate={{ rotate: props.isFocused ? "180deg" : "0deg" }}>
+            <ExpandMoreIcon boxSize={"20px"} />
+          </motion.div>
+        </components.DropdownIndicator>
+      )}
+    </>
+  );
+};
+
+const ClearIndicator = (props: ClearIndicatorProps) => {
+  return (
+    <components.ClearIndicator {...props}>
+      <CancelFilledIcon boxSize={"20px"} color={Colors.black300} />
+    </components.ClearIndicator>
+  );
+};
+
+const IndicatorSeparator = ({ innerProps }: IndicatorSeparatorProps) => {
+  return <></>;
+};
+
+const MultiValueRemove = (props: MultiValueRemoveProps) => {
+  return (
+    <components.MultiValueRemove {...props}>
+      <CloseIcon boxSize={"20px"} />
+    </components.MultiValueRemove>
+  );
+};
+
+export const SelectInput = ({
+  label,
+  id,
+  name,
+  placeholder,
+  onBlur,
+  onChange,
+  value,
+  defaultValue,
+  options,
+  isMulti,
+  hideSelectedOptions,
+  CustomOption,
+  CustomMultiValue,
+}: ISelectInputProps) => {
+  const customComponents: Record<string, React.ComponentType<any>> = {};
+  if (isMulti) {
+    const Option = CustomOption;
+    const MultiValue = CustomMultiValue;
+    if (Option) {
+      customComponents.Option = Option;
+    }
+    if (MultiValue) {
+      customComponents.MultiValue = MultiValue;
+    }
+  }
+
+  const selectRef = useRef<SelectType<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={id}
+        >
+          {label}
+        </FormLabel>
+      )}
+      <Select
+        isMulti={isMulti}
+        isClearable={isMulti}
+        defaultInputValue={defaultValue}
+        value={value}
+        onChange={(e: any) => {
+          if (onChange) {
+            onChange(e);
+            selectRef?.current?.blur();
+          }
+        }}
+        ref={selectRef}
+        onBlur={(e: any) => onBlur && onBlur(e)}
+        components={{
+          ClearIndicator,
+          DropdownIndicator,
+          IndicatorSeparator,
+          MultiValueRemove,
+          // IndicatorsContainer,
+          ...customComponents,
+        }}
+        id={id}
+        options={options}
+        styles={selectStyles}
+        name={name}
+        placeholder={placeholder}
+        hideSelectedOptions={hideSelectedOptions}
+        closeMenuOnSelect={!isMulti}
+      />
+    </Box>
+  );
+};
+
+export const CreatableSelectInput = ({
+  label,
+  id,
+  name,
+  placeholder,
+  onBlur,
+  onChange,
+  value,
+  defaultValue,
+  options,
+  isMulti,
+  hideSelectedOptions,
+  CustomOption,
+  CustomMultiValue,
+}: ISelectInputProps) => {
+  const [optionsState, setOptions] = useState<OptionType[]>(options);
+  const customComponents: Record<string, React.ComponentType<any>> = {};
+  if (isMulti) {
+    const Option = CustomOption;
+    const MultiValue = CustomMultiValue;
+    if (Option) {
+      customComponents.Option = Option;
+    }
+    if (MultiValue) {
+      customComponents.MultiValue = MultiValue;
+    }
+  }
+
+  const handleCreate = (inputValue: string) => {
+    const newOption = {
+      label: inputValue,
+      value: inputValue.toLowerCase().replace(/\W/g, ""),
+    };
+    setOptions((prev) => [...prev, newOption]);
+    if (onChange) {
+      if (isMulti) {
+        onChange([...value, newOption]);
+      } else onChange(newOption);
+    }
+  };
+
+  const onKeyDown = (e: any) => {
+    if (e.keyCode === 188) {
+      e.preventDefault();
+      handleCreate(e.target.value);
+
+      // if (this.state.inputValue !== "") {
+      //   this.handleCreate(this.selectRef.state.inputValue.slice(0, -1));
+      // }
+    }
+  };
+
+  const selectRef = useRef<SelectType<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={id}
+        >
+          {label}
+        </FormLabel>
+      )}
+
+      <CreatableSelect
+        isMulti={isMulti}
+        isClearable
+        onChange={(e: any) => {
+          if (onChange) {
+            if (isMulti) {
+              onChange(e);
+              selectRef?.current?.blur();
+            } else {
+              onChange(e);
+              selectRef?.current?.blur();
+            }
+          }
+        }}
+        ref={selectRef}
+        onBlur={(e: any) => onBlur && onBlur(e)}
+        onKeyDown={onKeyDown}
+        onCreateOption={handleCreate}
+        options={options}
+        value={value}
+        id={id}
+        styles={selectStyles}
+        name={name}
+        placeholder={placeholder}
+        hideSelectedOptions={hideSelectedOptions}
+        closeMenuOnSelect={!isMulti}
+        components={{
+          ClearIndicator,
+          DropdownIndicator,
+          IndicatorSeparator,
+          MultiValueRemove,
+          ...customComponents,
+        }}
+      />
+
+      {isMulti && (
+        <Paragraph size={"xxs"} color={Colors.gray400} mt={"8px"}>
+          Comma seperated
+        </Paragraph>
+      )}
+    </Box>
+  );
+};

package/src/components/InputFields/SelectInput/index.ts

@@ -0,0 +1,9 @@
+/** @format */
+
+export { SelectInput } from "./SelectInput";
+export { CreatableSelectInput } from "./SelectInput";
+export type { ISelectInputProps } from "./SelectInput";
+export { default as CountrySelect } from "./CountrySelect";
+export type { ICountrySelectProps } from "./CountrySelect";
+export { default as PhoneNumberInput } from "./PhoneNumberInput";
+export type { IPhoneNumberInputProps } from "./PhoneNumberInput";

package/src/components/InputFields/TextArea.tsx

@@ -0,0 +1,150 @@
+/** @format */
+
+import {
+  Box,
+  Textarea as ChakraTextarea,
+  Flex,
+  Text,
+  TextareaProps,
+} from "@chakra-ui/react";
+import Paragraph from "components/Typography/Paragraph";
+import Colors from "components/styleGuide/Colors";
+import { useState } from "react";
+// This will change when we build icon components
+import { ReactComponent as ErrorIcon } from "assets/svgs/error_message_icon.svg";
+
+interface ITextArea extends TextareaProps {
+  label: string;
+  name: string;
+  value?: any;
+  id: string;
+  onChange?: () => void;
+  defaultValue?: any;
+  placeholder?: any;
+  error?: boolean;
+  errorMessage?: string;
+  hint?: string;
+  textLimit?: number;
+  height?: string;
+  width?: string;
+}
+
+const TextArea = ({
+  label,
+  name,
+  id,
+  value,
+  onChange,
+  defaultValue,
+  placeholder,
+  error,
+  errorMessage,
+  textLimit,
+  height,
+  width,
+}: ITextArea) => {
+  const [count, setCount] = useState<number>(0);
+  const [exceedLimit, setExceedLimit] = useState<boolean>(false);
+
+  const handleTextLimit = (e: any) => {
+    const textValue = e?.target?.value;
+    setCount(textValue.length);
+    if (textValue.length > (textLimit || 200)) {
+      setExceedLimit(true);
+    } else setExceedLimit(false);
+  };
+
+  return (
+    <Box w={width || "full"} position={"relative"}>
+      <Text
+        fontFamily={"Degular"}
+        fontSize={"16px"}
+        lineHeight={"20px"}
+        letterSpacing={"-0.064px"}
+        fontWeight={600}
+        mb="10px"
+        mt="0"
+      >
+        {label}
+      </Text>
+      <Box
+        w="fit-content"
+        right={"20px"}
+        top={"38px"}
+        position="absolute"
+        zIndex={10}
+      >
+        <Paragraph color={Colors.gray200} size={"xxs"}>
+          {count}/{textLimit || 200}
+        </Paragraph>
+      </Box>
+      <ChakraTextarea
+        name={name}
+        id={id}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={(e) => {
+          handleTextLimit(e);
+          if (onChange) {
+            onChange();
+          }
+        }}
+        placeholder={placeholder || "Type something..."}
+        bg={Colors.white100}
+        borderRadius="12px"
+        border="none"
+        fontFamily={"Degular"}
+        fontSize={"16px"}
+        lineHeight={"24px"}
+        letterSpacing={"-0.2px"}
+        fontWeight={500}
+        outlineOffset={"none"}
+        outline={error || exceedLimit ? "2px solid" : "1px solid"}
+        _placeholder={{ color: `${Colors.gray200}` }}
+        outlineColor={error || exceedLimit ? Colors.red500 : Colors.gray50}
+        _focus={{
+          outline: `3px solid ${
+            error || exceedLimit ? Colors.red500 : Colors.black300
+          }`,
+          background: `${Colors.white100}`,
+        }}
+        _focusVisible={{
+          outline: `3px solid ${
+            error || exceedLimit ? Colors.red500 : Colors.black300
+          }`,
+          background: `${Colors.white100}`,
+        }}
+        _hover={{
+          outline: `3px solid ${
+            error || exceedLimit ? Colors.red500 : Colors.black300
+          }`,
+          background: `${Colors.gray50}`,
+        }}
+        h={height || "120px"}
+        w="full"
+        px="16px"
+        pt="30px"
+        resize={"none"}
+      />
+      <Box mt="8px">
+        {error && errorMessage ? (
+          <Flex alignItems={"center"} gap="6px">
+            <ErrorIcon />
+            <Paragraph color={Colors.red500} size={"xxs"}>
+              {errorMessage}
+            </Paragraph>
+          </Flex>
+        ) : exceedLimit ? (
+          <Flex alignItems={"center"} gap="6px">
+            <ErrorIcon />
+            <Paragraph color={Colors.red500} size={"xxs"}>
+              Text cannot be more than {textLimit || 200} characters long.
+            </Paragraph>
+          </Flex>
+        ) : null}
+      </Box>
+    </Box>
+  );
+};
+
+export default TextArea;

package/src/components/InputFields/UsernameInput.tsx

@@ -0,0 +1,145 @@
+/** @format */
+
+// import React from "react";
+import {
+  Input as ChakraInput,
+  Flex,
+  InputGroup,
+  InputProps,
+  InputLeftElement,
+  InputRightElement,
+  Spinner,
+  Text,
+  Box,
+} 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 ErrorIcon } from "assets/svgs/error_message_icon.svg";
+import { ReactComponent as SuccessIcon } from "assets/svgs/check_circle.svg";
+
+interface IInput extends InputProps {
+  label: string;
+  name: string;
+  value?: any;
+  id: string;
+  onChange?: () => void;
+  defaultValue?: any;
+  placeholder?: any;
+  type?: "text";
+  errorMessage?: string;
+  inputLeftMargin?: string;
+  isChecking?: boolean;
+  isAvailable?: boolean;
+  isNotAvailable?: boolean;
+  width?: string;
+}
+const UsernameInput = ({
+  label,
+  name,
+  id,
+  value,
+  onChange,
+  defaultValue,
+  placeholder,
+  inputLeftMargin,
+  isChecking,
+  isAvailable,
+  isNotAvailable,
+  errorMessage,
+  width,
+}: IInput) => {
+  const usernameprefix = "username";
+  return (
+    <Box w={width || "full"}>
+      <Text
+        fontFamily={"Degular"}
+        fontSize={"16px"}
+        lineHeight={"20px"}
+        letterSpacing={"-0.064px"}
+        fontWeight={600}
+        mb="10px"
+        mt="0"
+      >
+        {label}
+      </Text>
+      <InputGroup position={"relative"}>
+        <InputLeftElement w={"fit-content"} py="24px" ml="16px">
+          <Paragraph color={Colors.gray200} size={"xs"}>
+            {usernameprefix}/
+          </Paragraph>
+        </InputLeftElement>
+        <InputRightElement py="24px">
+          {isChecking && <Spinner size={"sm"} />}
+          {isAvailable && <SuccessIcon />}
+        </InputRightElement>
+        <ChakraInput
+          name={name}
+          id={id}
+          value={value}
+          defaultValue={defaultValue}
+          onChange={onChange}
+          placeholder={placeholder}
+          type="text"
+          _placeholder={{ color: `${Colors.gray200}` }}
+          bg={Colors.white100}
+          borderRadius="12px"
+          border="none"
+          fontFamily={"Degular"}
+          fontSize={"16px"}
+          lineHeight={"24px"}
+          letterSpacing={"-0.2px"}
+          fontWeight={500}
+          px="16px"
+          py="24px"
+          outlineOffset={"none"}
+          outline={isNotAvailable ? "2px solid" : "1px solid"}
+          outlineColor={isNotAvailable ? Colors.red500 : Colors.gray50}
+          _focus={{
+            outline: `3px solid ${
+              isNotAvailable
+                ? Colors.red500
+                : isAvailable
+                ? Colors.green600
+                : Colors.black300
+            }`,
+            background: `${Colors.white100}`,
+          }}
+          _focusVisible={{
+            outline: `3px solid ${
+              isNotAvailable
+                ? Colors.red500
+                : isAvailable
+                ? Colors.green600
+                : Colors.black300
+            }`,
+            background: `${Colors.white100}`,
+          }}
+          _hover={{
+            outline: `3px solid ${
+              isNotAvailable
+                ? Colors.red500
+                : isAvailable
+                ? Colors.green600
+                : Colors.black300
+            }`,
+            background: `${Colors.gray50}`,
+          }}
+          pl={inputLeftMargin || `${11 * "username".length}px`}
+        />
+      </InputGroup>
+      <Box mt="8px">
+        {isNotAvailable && errorMessage && (
+          <Flex alignItems={"center"} gap="6px">
+            <ErrorIcon />
+            <Paragraph color={Colors.red500} size={"xxs"}>
+              {errorMessage}
+            </Paragraph>
+          </Flex>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+export default UsernameInput;