pixelize-design-library 2.1.18 → 2.1.20

package/src/Components/Select/Select.styles.ts

@@ -0,0 +1,97 @@
+import { ComponentStyleConfig } from "@chakra-ui/react";
+
+export const Select: ComponentStyleConfig = {
+  baseStyle: {
+    field: {
+      fontWeight: 500,
+      fontSize: "0.875rem",
+      letterSpacing: "0.044rem",
+      borderRadius: "0.25rem",
+      minWidth: "0", // allow shrinking inside flex
+      width: "100%", // full container width
+      maxWidth: "100%",
+      _placeholder: {
+        fontStyle: "italic",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+      },
+    },
+    icon: {
+      width: "1.25rem",
+      height: "1.25rem",
+    },
+  },
+  sizes: {
+    sm: {
+      field: {
+        h: "2.125rem",
+        fontSize: "0.8125rem",
+        px: "0.5rem",
+        py: "0.5rem",
+      },
+    },
+    md: {
+      field: {
+        h: "2.375rem",
+        fontSize: "0.875rem",
+        px: "0.75rem",
+        py: "0.5rem",
+      },
+    },
+    lg: {
+      field: {
+        h: "2.75rem",
+        fontSize: "0.9375rem",
+        px: "1rem",
+        py: "0.5rem",
+      },
+    },
+  },
+  variants: {
+    outline: (props) => {
+      const { theme } = props;
+      const errorColor = theme.colors.semantic?.error?.[500] ?? "red.500";
+      const borderColor = theme.colors.boxborder?.[500] ?? "gray.300";
+      const shadowPrimary = theme.colors.boxShadow?.primary ?? "blue.100";
+      const shadowError = theme.colors.boxShadow?.error ?? "red.100";
+      const primary = theme.colors.primary?.[500] ?? "blue.500";
+
+      return {
+        field: {
+          bg: theme.colors.gray?.[50] ?? "gray.50",
+          border: "0.063rem solid",
+          borderColor,
+          _hover: {
+            borderColor: primary,
+            boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+          },
+          _focus: {
+            borderColor: primary,
+            boxShadow: `0 0 0 0.125rem ${shadowPrimary}`,
+          },
+          _disabled: {
+            opacity: 0.4,
+            cursor: "not-allowed",
+          },
+          _invalid: {
+            borderColor: errorColor,
+            boxShadow: `0 0 0 0.125rem ${shadowError}`,
+            _hover: {
+              borderColor: errorColor,
+              boxShadow: `0 0 0 0.125rem ${shadowError}`,
+            },
+            _focus: {
+              borderColor: errorColor,
+              boxShadow: `0 0 0 0.125rem ${shadowError}`,
+            },
+          },
+        },
+      };
+    },
+  },
+  defaultProps: {
+    variant: "outline",
+    size: "md",
+  },
+};

package/src/Components/Select/Select.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback } from "react";
+import { Select as ChakraSelect, FormControl } from "@chakra-ui/react";
+import { OptionProp, chakraSelectProps } from "./SelectProps";
+import { TextLabel } from "../Common/FormLabel";
+import ErrorMessage from "../Common/ErrorMessage";
+import HelperText from "../Common/HelperText";
+
+export default function Select({
+  placeholder = "Select Option",
+  size = "md",
+  variant = "outline",
+  icon,
+  onChange,
+  onBlur,
+  onFocus,
+  errorBorderColor,
+  isDisabled,
+  isReadOnly,
+  isRequired = false,
+  value = "",
+  colorScheme,
+  label,
+  error,
+  errorMessage,
+  helperText,
+  options = [],
+  width = 500,
+  height = "2.75rem",
+  formControlStyle,
+  isInformation = false,
+  informationMessage,
+  selectStyle,
+}: chakraSelectProps) {
+  const getOptionsList = useCallback(() => {
+    if (!options.length) return <option value="">No Options</option>;
+    return options.map((option: OptionProp) => (
+      <option key={option.id} value={option.id}>
+        {option.label}
+      </option>
+    ));
+  }, [options]);
+
+  const handleOnChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const selectedValue = event.target.value;
+    const selectedOption = options.find(
+      (option) => option.id.toString() === selectedValue.toString()
+    );
+    if (selectedOption && onChange) {
+      onChange(selectedOption);
+    }
+  };
+
+  return (
+    <FormControl isInvalid={error} style={formControlStyle} width={width}>
+      {label && (
+        <TextLabel
+          label={label}
+          isRequired={isRequired}
+          isInformation={isInformation}
+          informationMessage={informationMessage}
+        />
+      )}
+
+      <ChakraSelect
+        placeholder={placeholder}
+        size={size}
+        variant={variant}
+        icon={icon}
+        isInvalid={error}
+        value={value}
+        onChange={handleOnChange}
+        width={width}
+        onBlur={onBlur}
+        onFocus={onFocus}
+        isDisabled={isDisabled}
+        isReadOnly={isReadOnly}
+        colorScheme={colorScheme}
+        errorBorderColor={errorBorderColor}
+        style={selectStyle}
+        minH={height}
+      >
+        {getOptionsList()}
+      </ChakraSelect>
+
+      {error && <ErrorMessage errorMessage={errorMessage} />}
+      {helperText && !error && <HelperText helperText={helperText} />}
+    </FormControl>
+  );
+}

package/src/Components/Select/SelectProps.tsx

@@ -0,0 +1,37 @@
+import { SelectProps } from "@chakra-ui/react";
+export type chakraSelectProps = Pick<
+  SelectProps,
+  | "placeholder"
+  | "size"
+  | "variant"
+  | "icon"
+  | "bg"
+  | "borderColor"
+  | "color"
+  | "onBlur"
+  | "onFocus"
+  | "errorBorderColor"
+  | "isDisabled"
+  | "isReadOnly"
+  | "isRequired"
+  | "value"
+  | "colorScheme"
+> & {
+  label?: string;
+  error?: boolean;
+  errorMessage?: string;
+  helperText?: string;
+  options: OptionProp[];
+  width?: string | number;
+  height?: string | number;
+  onChange: (selectedOption: OptionProp | undefined) => void;
+  formControlStyle?: React.CSSProperties;
+  isInformation?: boolean;
+  informationMessage?: string;
+  selectStyle?: React.CSSProperties;
+};
+
+export type OptionProp = {
+  id: string | number;
+  label: string | number;
+};

package/src/Components/SelectSearch/SelectSearch.tsx

@@ -0,0 +1,447 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Box,
+  Input,
+  Spinner,
+  VStack,
+  Text,
+  InputGroup,
+  InputRightElement,
+  HStack,
+  Tag,
+  TagLabel,
+  TagCloseButton,
+  Avatar,
+  FormControl,
+} from "@chakra-ui/react";
+import { selectOptions, SelectSearchProps } from "./SelectSearchProps";
+import { TextLabel } from "../Common/FormLabel";
+import { useCustomTheme } from "../../Theme/useCustomTheme";
+import { PlusIcon } from "lucide-react";
+import ErrorMessage from "../Common/ErrorMessage";
+
+const RenderOptions = ({
+  isOptionLoading,
+  filteredOptions,
+  loadingText,
+  handleOptionClick,
+  isProfile,
+  isColorOptions,
+}: {
+  isOptionLoading: boolean | undefined;
+  filteredOptions: selectOptions[];
+  loadingText: string;
+  isProfile: boolean | undefined;
+  isColorOptions?: boolean | undefined;
+  handleOptionClick: (option: selectOptions) => void;
+}) => {
+  if (isOptionLoading) {
+    return (
+      <VStack py={2}>
+        <Spinner size="sm" color="blue.500" />
+        <Text color="blue.500">{loadingText}</Text>
+      </VStack>
+    );
+  }
+
+  if (filteredOptions?.length) {
+    return (
+      <>
+        {filteredOptions.map((option) => (
+          <Box
+            key={option.id}
+            px={4}
+            py={2}
+            cursor="pointer"
+            _hover={{ backgroundColor: "blue.50" }}
+            onClick={() => handleOptionClick(option)}
+            display={"flex"}
+            alignItems={"center"}
+            gap={"0.5rem"}
+          >
+            {isProfile && (
+              <Box>
+                <Avatar
+                  size={"sm"}
+                  name={option.label.toLocaleUpperCase()}
+                  src={option.profileUrl ? option.profileUrl : undefined}
+                />
+              </Box>
+            )}
+            {isColorOptions && (
+              <Box
+                width={"0.8rem"}
+                height={"0.8rem"}
+                content=""
+                backgroundColor={option?.color}
+                borderRadius={"50%"}
+              ></Box>
+            )}
+            <Box>
+              <Box>{option.label}</Box>
+              {option.email && (
+                <Box fontSize={12} color={"gray.400"}>
+                  {option.email}
+                </Box>
+              )}
+            </Box>
+          </Box>
+        ))}
+      </>
+    );
+  }
+
+  return (
+    <Text px={4} py={2} color="gray.500">
+      No options found
+    </Text>
+  );
+};
+
+export default function SelectSearch({
+  options,
+  initialSelectedOption,
+  onOptionSelect,
+  inputOnchange,
+  id,
+  name,
+  label,
+  dropdownStyle,
+  inputStyle,
+  isOptionLoading,
+  loadingText = "loading",
+  boxStyle,
+  placeholder = "Select Option",
+  searchQuery = null,
+  isInformation = false,
+  informationMessage,
+  rightIcon,
+  rightElementStyle,
+  isMultipleSelect = false,
+  isRequired = false,
+  onOptionMultiSelect,
+  error = false,
+  isProfile = false,
+  isBottomIcon = false,
+  errorMessage,
+
+  // BottomIconStyle,
+  BottomIcon = false,
+  BottomText,
+  handleBottomClick,
+  BottomTextColor,
+  isColorOptions,
+}: Readonly<SelectSearchProps>) {
+  const theme = useCustomTheme();
+  const [selectedOptions, setSelectedOptions] = useState<selectOptions[]>(
+    initialSelectedOption ? [initialSelectedOption] : []
+  );
+  const [inputValue, setInputValue] = useState(searchQuery);
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState<"above" | "below">("below");
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // const filteredOptions = useMemo(() => {
+  //   return options.filter((option) => {
+  //     const optionLabel = option.label || '';
+  //     const searchValue = inputValue || '';
+  //     return optionLabel.toLowerCase().includes(searchValue.toLowerCase());
+  //   });
+  // }, [options, inputValue]);
+  const filteredOptions = useMemo(() => {
+    return options.filter((option) => {
+      // First filter out already selected options
+      // const isNotSelected = !selectedOptions.some(
+      //   (selected) => selected.id === option.id
+      // );
+      const isNotSelected = isMultipleSelect
+        ? !selectedOptions.some((selected) => selected.id === option.id)
+        : true;
+
+      // Then apply the search filter
+      const optionLabel = option.label || "";
+      const searchValue = inputValue || "";
+
+      return (
+        isNotSelected &&
+        optionLabel.toLowerCase().includes(searchValue.toLowerCase())
+      );
+    });
+  }, [options, inputValue, isMultipleSelect, selectedOptions]);
+
+  // const filteredOptions = useMemo(() => {
+  //   return options.filter((option) =>
+  //     option.label?.toLowerCase().includes((inputValue ?? "")?.toLowerCase())
+  //   );
+  // }, [options, inputValue]);
+
+  //   const handleOptionClick = useCallback(
+  //     (option: selectOptions) => {
+  //       if (isMultipleSelect) {
+  //         setSelectedOptions((prev) => {
+  //           const isSelected = prev.some((selected) => selected.id === option.id);
+  //           const newSelected = isSelected
+  //             ? prev.filter((selected) => selected.id !== option.id)
+  //             : [...prev, option];
+
+  //           setInputValue("");
+  //           if (onOptionMultiSelect) {
+  //             onOptionMultiSelect(newSelected);
+  //           }
+  //           return newSelected;
+  //         });
+  //       } else {
+  //         setInputValue(option.label);
+  //         setIsOpen(false);
+  //         if (onOptionSelect) {
+  //           onOptionSelect(option);
+  //         }
+  //       }
+  //     },
+  //     [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
+  //   );
+  const handleOptionClick = useCallback(
+    (option: selectOptions) => {
+      if (isMultipleSelect) {
+        setSelectedOptions((prev) => {
+          const isSelected = prev.some((selected) => selected.id === option.id);
+          const newSelected = isSelected
+            ? prev.filter((selected) => selected.id !== option.id)
+            : [...prev, option];
+
+          // Update the input value and notify the parent
+          setInputValue("");
+          if (onOptionMultiSelect) {
+            // Call the prop to update state in the parent component
+            // Note: This should not directly set the state in SelectSearch
+            setTimeout(() => onOptionMultiSelect(newSelected), 0);
+          }
+          return newSelected;
+        });
+      } else {
+        setInputValue(option.label);
+        setIsOpen(false);
+        if (onOptionSelect) {
+          onOptionSelect(option);
+        }
+      }
+    },
+    [isMultipleSelect, onOptionSelect, onOptionMultiSelect]
+  );
+
+  const handleRemoveOption = (option: selectOptions) => {
+    setSelectedOptions((prev) =>
+      prev.filter((selected) => selected.id !== option.id)
+    );
+    if (onOptionMultiSelect) {
+      onOptionMultiSelect(
+        selectedOptions.filter((selected) => selected.id !== option.id)
+      );
+      setInputValue("");
+    }
+  };
+
+  const handleInputChange = (value: any) => {
+    setInputValue(value);
+    inputOnchange(value);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const matchingOption = options.find(
+        (option) =>
+          option.label?.toLowerCase() === (inputValue ?? "")?.toLowerCase()
+      );
+      if (matchingOption) {
+        handleOptionClick(matchingOption);
+      }
+    }
+  };
+
+  const updateDropdownPosition = () => {
+    if (inputRef.current && dropdownRef.current) {
+      const inputRect = inputRef.current.getBoundingClientRect();
+      const dropdownRect = dropdownRef.current.getBoundingClientRect();
+      const viewportHeight = window.innerHeight;
+      const spaceBelow = viewportHeight - inputRect.bottom + window.scrollY;
+      const spaceAbove = inputRect.top + window.scrollY;
+
+      if (spaceBelow >= dropdownRect.height) {
+        setPosition("below");
+      } else if (spaceAbove >= dropdownRect.height) {
+        setPosition("above");
+      } else {
+        setPosition("below");
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      updateDropdownPosition();
+    }
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        inputRef.current &&
+        dropdownRef.current &&
+        !inputRef.current.contains(event.target as Node) &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  return (
+    <>
+      <FormControl isInvalid={error}>
+        <Box
+          display="flex"
+          flexDirection="column"
+          position="relative"
+          sx={boxStyle}
+        >
+          {label && (
+            <TextLabel
+              label={label}
+              id={id}
+              isRequired={isRequired}
+              isInformation={isInformation}
+              informationMessage={informationMessage}
+            />
+          )}
+
+          {/* Display selected options as chips */}
+          {isMultipleSelect && selectedOptions.length > 0 && (
+            <HStack spacing={2} mb={2}>
+              {selectedOptions.map((option) => (
+                <Tag
+                  size="md"
+                  key={option.id}
+                  borderRadius="full"
+                  variant="solid"
+                  sx={{ backgroundColor: theme.colors.primary[500] }}
+                >
+                  <TagLabel width={"50px"}>{option.label}</TagLabel>
+                  <TagCloseButton onClick={() => handleRemoveOption(option)} />
+                </Tag>
+              ))}
+            </HStack>
+          )}
+
+          <InputGroup>
+            <Input
+              ref={inputRef}
+              border={error ? "2px solid #DC143C" : "2px solid #e2e8f0"}
+              variant="flushed"
+              value={inputValue ? inputValue : ""}
+              onClick={() => setIsOpen(true)}
+              onFocus={() => setIsOpen(true)}
+              onChange={(e) => handleInputChange(e.target.value)}
+              placeholder={placeholder}
+              onKeyDown={handleKeyDown}
+              id={id}
+              name={name}
+              cursor="pointer"
+              borderColor="gray.300"
+              _hover={{ borderColor: "blue.500" }}
+              _focus={{ borderColor: error ? "none" : "blue.500" }}
+              style={{
+                ...inputStyle,
+                backgroundColor: theme.colors.backgroundColor.main,
+                fontWeight: 600,
+                color: theme.colors.gray[700],
+                padding: "0 0.5rem",
+                fontSize: 15,
+                letterSpacing: 0.7,
+                border: error ? "2px solid #DC143C" : "1px solid #e2e8f0",
+              }}
+            />
+            {rightIcon && (
+              <InputRightElement
+                pointerEvents="none"
+                children={rightIcon}
+                style={{ ...rightElementStyle }}
+              />
+            )}
+          </InputGroup>
+
+          {isOpen && (
+            <Box
+              ref={dropdownRef}
+              marginTop={"5px"}
+              position="absolute"
+              top={position === "below" ? "100%" : "auto"}
+              bottom={position === "above" ? "100%" : "auto"}
+              left={0}
+              right={0}
+              border="1px solid"
+              borderColor="gray.300"
+              borderRadius="md"
+              bg="white"
+              maxHeight="150px"
+              overflowY="auto"
+              zIndex={10}
+            >
+              <RenderOptions
+                isOptionLoading={isOptionLoading}
+                filteredOptions={filteredOptions}
+                loadingText={loadingText}
+                handleOptionClick={handleOptionClick}
+                isProfile={isProfile}
+                isColorOptions={isColorOptions}
+              />
+              <hr></hr>
+              {isBottomIcon && (
+                <Box
+                  position={"sticky"}
+                  bottom={0}
+                  background={"white"}
+                  display={"flex"}
+                  alignItems={"center"}
+                  pl={"1rem"}
+                  cursor="pointer"
+                  onClick={handleBottomClick}
+                  borderColor={"gray.300"}
+                  zIndex={1}
+                  borderTop={"1px solid lightgray"}
+                >
+                  <Box>
+                    {BottomIcon ? BottomIcon : <PlusIcon size={"1rem"} />}
+                  </Box>
+                  <Box
+                    fontSize={"0.875rem"}
+                    color={
+                      BottomTextColor
+                        ? (BottomTextColor as string)
+                        : theme.colors.primary[500]
+                    }
+                    padding={"8px 8px"}
+                  >
+                    {BottomText || "Add New"}
+                  </Box>
+                </Box>
+              )}
+            </Box>
+          )}
+
+          {error && <ErrorMessage errorMessage={errorMessage} />}
+        </Box>
+      </FormControl>
+    </>
+  );
+}

package/src/Components/SelectSearch/SelectSearchProps.tsx

@@ -0,0 +1,43 @@
+export type SelectSearchProps = {
+  options: selectOptions[];
+  isSearchEnabled?: boolean;
+  initialSelectedOption?: selectOptions | null;
+  onOptionSelect?: (option: selectOptions) => void;
+  onOptionMultiSelect?: (option: selectOptions[]) => void;
+  inputOnchange: (value: string | number) => void;
+  id?: string;
+  name?: string;
+  label?: string;
+  inputStyle?: React.CSSProperties;
+  dropdownStyle?: React.CSSProperties;
+  boxStyle?: React.CSSProperties;
+  isOptionLoading?: boolean;
+  loadingText?: string;
+  placeholder?: string;
+  searchQuery: string | null;
+  isInformation?: boolean;
+  informationMessage?: string;
+  rightIcon?: React.ReactNode;
+  rightElementStyle?: {};
+  isMultipleSelect?: boolean;
+  isRequired?: boolean | undefined;
+  error?: boolean | undefined;
+  isProfile?: boolean | undefined;
+  isColorOptions?: boolean | undefined;
+  errorMessage?: string | undefined;
+
+  isBottomIcon?: boolean | undefined;
+  BottomIcon?: boolean | undefined | JSX.Element;
+  BottomIconStyle?: React.CSSProperties;
+  BottomText?: string | number;
+  BottomTextColor?: React.CSSProperties;
+  handleBottomClick?: () => void;
+};
+
+export type selectOptions = {
+  id: string;
+  label: string;
+  email?: string;
+  profileUrl?: string;
+  color?: string;
+};