pixelize-design-library 2.1.20 → 2.1.21

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

@@ -1,97 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,447 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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;
-};