♻️ refactor: adjust style and refactor to a new component

2024-02-24 11:41:55 +07:00 · 2024-02-24 11:41:55 +07:00 · 100e03b7a4
commit 100e03b7a4
parent 5d0dd93271
3 changed files with 116 additions and 282 deletions
--- a/packages/frontend/src/components/shared/Select/Select.theme.ts
+++ b/packages/frontend/src/components/shared/Select/Select.theme.ts
@ -23,17 +23,6 @@ export const selectTheme = tv({
      'disabled:border-none',
    ],
    input: ['outline-none'],
-    inputValue: [
-      'flex',
-      'items-center',
-      'gap-1',
-      'pl-2',
-      'pr-2',
-      'rounded-md',
-      'text-elements-mid-em',
-      'bg-base-bg-emphasized',
-      'hover:bg-base-bg-emphasized/80',
-    ],
    iconContainer: [
      'absolute',
      'inset-y-0',
@ -53,7 +42,7 @@ export const selectTheme = tv({
      'py-1',
      'flex-col',
      'gap-0.5',
-      'w-full',
+      'min-w-full',
      'bg-surface-floating',
      'shadow-dropdown',
      'w-auto',
@ -63,46 +52,22 @@ export const selectTheme = tv({
      'border-gray-200',
      'rounded-xl',
    ],
-    item: [
-      'p-2',
-      'gap-3',
-      'flex',
-      'items-start',
-      'justify-between',
-      'rounded-lg',
-      'group',
-      'data-[disabled]:cursor-not-allowed',
-    ],
-    itemContent: ['flex', 'flex-1', 'whitespace-nowrap'],
-    itemLabel: [
-      'text-sm',
-      'text-elements-high-em',
-      'tracking-[-0.006em]',
-      'data-[disabled]:text-elements-disabled',
-    ],
-    itemDescription: [
-      'text-xs',
-      'text-elements-low-em',
-      'data-[disabled]:text-elements-disabled',
-    ],
-    itemIcon: ['h-4.5', 'w-4.5', 'text-elements-high-em'],
  },
  variants: {
    orientation: {
      horizontal: {
-        item: ['items-center'],
-        itemContent: ['flex-row', 'items-center', 'gap-2'],
+        container: [],
      },
      vertical: {
-        itemContent: ['flex-col', 'gap-0.5'],
+        container: [],
      },
    },
    variant: {
      default: {
-        item: [],
+        container: [],
      },
      danger: {
-        item: [],
+        container: [],
      },
    },
    state: {
@ -147,19 +112,9 @@ export const selectTheme = tv({
        popover: ['hidden'],
      },
    },
-    selected: {
-      true: {
-        item: ['bg-base-bg-emphasized', 'data-[disabled]:bg-transparent'],
-      },
-    },
    hasValue: {
      true: '',
    },
-    multiple: {
-      true: {
-        inputValue: ['pr-1'],
-      },
-    },
    searchable: {
      true: '',
      false: {
--- a/packages/frontend/src/components/shared/Select/Select.tsx
+++ b/packages/frontend/src/components/shared/Select/Select.tsx
@ -10,41 +10,91 @@ import React, {
 } from 'react';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import { SelectTheme, selectTheme } from './Select.theme';
-import { Button } from '../Button';
 import {
-  CheckRadioIcon,
  ChevronDownIcon,
  CrossIcon,
  WarningIcon,
-} from '../CustomIcon';
+} from 'components/shared/CustomIcon';
 import { cloneIcon } from 'utils/cloneIcon';
 import { cn } from 'utils/classnames';
+import { SelectItem } from './SelectItem';
+import { SelectValue } from './SelectValue';

-export type DropdownItem = {
+export type SelectOption = {
+  /**
+   * The value of the option
+   */
  value: string;
+  /**
+   * The label of the option
+   */
  label: string;
+  /**
+   * The description of the option
+   */
  description?: string;
+  /**
+   * Custom left icon for the option
+   */
  leftIcon?: ReactNode;
+  /**
+   * Custom right icon for the option
+   */
  rightIcon?: ReactNode;
+  /**
+   * Whether the option is disabled
+   */
  disabled?: boolean;
 };

-interface MultiSelectProps
+/**
+ * The orientation of the select
+ */
+export type SelectOrientation = 'horizontal' | 'vertical';
+
+interface SelectProps
  extends Omit<ComponentPropsWithoutRef<'input'>, 'size'>,
    SelectTheme {
-  items: DropdownItem[];
+  /**
+   * The options of the select
+   */
+  options: SelectOption[];
+  /**
+   * The label of the select
+   */
  label?: string;
+  /**
+   * The description of the select
+   */
  description?: string;
+  /**
+   * Wheter the select is multiple or not
+   */
  multiple?: boolean;
+  /**
+   * Wheter the select is searchable or not
+   */
  searchable?: boolean;
+  /**
+   * Wheter the select is clearable or not
+   */
  clearable?: boolean;
+  /**
+   * Custom left icon for the select
+   */
  leftIcon?: ReactNode;
+  /**
+   * Custom right icon for the select
+   */
  rightIcon?: ReactNode;
+  /**
+   * The helper text of the select
+   */
  helperText?: string;
 }

-export const MultiSelect: React.FC<MultiSelectProps> = ({
-  items,
+export const Select = ({
+  options,
  multiple = false,
  searchable = false,
  clearable,
@ -58,11 +108,11 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
  rightIcon,
  helperText,
  placeholder: placeholderProp = 'Select an option',
-}) => {
+}: SelectProps) => {
  const theme = selectTheme({ size, state, variant, orientation });

  const [inputValue, setInputValue] = useState('');
-  const [selectedItem, setSelectedItem] = useState<DropdownItem | null>(null);
+  const [selectedItem, setSelectedItem] = useState<SelectOption | null>(null);
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const [dropdownPosition, setDropdownPosition] = useState<'top' | 'bottom'>(
    'bottom',
@ -74,11 +124,11 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
  useEffect(() => {
    if (dropdownOpen && popoverRef.current && inputWrapperRef.current) {
      const popover = popoverRef.current;
-      // @ts-expect-error – we know it's not null
+      // @ts-expect-error – we know it's not null lol
      const input = inputWrapperRef.current.getBoundingClientRect();
      const spaceBelow = window.innerHeight - input.bottom;
      const spaceAbove = input.top;
-      // @ts-expect-error – we know it's not null
+      // @ts-expect-error – we know it's not null lol
      const popoverHeight = popover.offsetHeight;

      // Determine if there's enough space below
@ -93,7 +143,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
    }
  }, [dropdownOpen]); // Re-calculate whenever the dropdown is opened

-  const handleSelectedItemChange = (selectedItem: DropdownItem | null) => {
+  const handleSelectedItemChange = (selectedItem: SelectOption | null) => {
    setSelectedItem(selectedItem);
    setInputValue(selectedItem ? selectedItem.label : '');
  };
@ -105,7 +155,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
    removeSelectedItem,
    selectedItems,
    reset,
-  } = useMultipleSelection<DropdownItem>({
+  } = useMultipleSelection<SelectOption>({
    onSelectedItemsChange: multiple
      ? undefined
      : ({ selectedItems }) => {
@ -115,15 +165,15 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({

  const filteredItems = useMemo(() => {
    // Show all items if the dropdown is not multiple and not searchable
-    if (!multiple && !searchable) return items;
+    if (!multiple && !searchable) return options;
    // Show only the items that match the input value
    if (!multiple && searchable) {
-      return items.filter((item) =>
+      return options.filter((item) =>
        item.label.toLowerCase().includes(inputValue.toLowerCase()),
      );
    }
    // Show only the items that match the input value and are not already selected
-    return items.filter(
+    return options.filter(
      (item) =>
        item.label.toLowerCase().includes(inputValue.toLowerCase()) &&
        !(
@ -132,7 +182,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
            : []
        ).includes(item),
    );
-  }, [items, inputValue, selectedItem, selectedItems, multiple, searchable]);
+  }, [options, inputValue, selectedItem, selectedItems, multiple, searchable]);

  const {
    isOpen,
@ -172,7 +222,7 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
  });

  const isSelected = useCallback(
-    (item: DropdownItem) =>
+    (item: SelectOption) =>
      multiple ? selectedItems.includes(item) : selectedItem === item,
    [selectedItems, selectedItem, multiple],
  );
@ -233,44 +283,45 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
    [cloneIcon, state, theme, helperText],
  );

+  const isMultipleHasValue = multiple && selectedItems.length > 0;
  const isMultipleHasValueButNotSearchable =
    multiple && !searchable && selectedItems.length > 0;
  const placeholder = isMultipleHasValueButNotSearchable ? '' : placeholderProp;

  return (
    <div className={theme.container()}>
+      {/* Label & description */}
      {renderLabels}
+
+      {/* Input */}
      <div
        ref={inputWrapperRef}
        className={theme.inputWrapper({
-          hasValue: multiple && selectedItems.length > 0,
+          hasValue: isMultipleHasValue,
        })}
        onClick={() => !dropdownOpen && openMenu()}
      >
+        {/* Left icon */}
        {leftIcon && renderLeftIcon}
-        {multiple &&
-          selectedItems.length > 0 &&
+
+        {/* Multiple input values */}
+        {isMultipleHasValue &&
          selectedItems.map((item, index) => (
-            <span
+            <SelectValue
              key={`selected-item-${index}`}
              {...getSelectedItemProps({ selectedItem: item, index })}
-              className={theme.inputValue({ multiple })}
-            >
-              {item.label}
-              <Button
-                onClick={() => removeSelectedItem(item)}
-                iconOnly
-                variant="unstyled"
-                size="xs"
-              >
-                <CrossIcon size={14} />
-              </Button>
-            </span>
+              option={item}
+              size={size}
+              onDelete={removeSelectedItem}
+            />
          ))}
+
+        {/* Single input value or searchable area */}
        <input
          {...getInputProps(getDropdownProps())}
          placeholder={placeholder}
-          readOnly={!searchable} // Control readOnly based on searchable
+          // Control readOnly based on searchable
+          readOnly={!searchable}
          className={cn(theme.input({ searchable }), {
            // Make the input width smaller because we don't need it (not searchable)
            'w-6': isMultipleHasValueButNotSearchable,
@ -278,58 +329,43 @@ export const MultiSelect: React.FC<MultiSelectProps> = ({
            'ml-6': isMultipleHasValueButNotSearchable && clearable,
          })}
        />
+
+        {/* Right icon */}
        {renderRightIcon}
      </div>
+
+      {/* Helper text */}
      {renderHelperText}
+
+      {/* Popover */}
      <ul
        {...getMenuProps()}
        id="popover"
        ref={popoverRef}
        className={cn(theme.popover({ isOpen }), {
-          'top-1/4': dropdownPosition === 'bottom',
-          'bottom-[95%]': dropdownPosition === 'top',
+          // Position the popover based on the dropdown position
+          'top-[12.5%]': dropdownPosition === 'bottom' && !label,
+          'top-[35%]': dropdownPosition === 'bottom' && label,
+          'top-[42.5%]': dropdownPosition === 'bottom' && label && description,
+          'bottom-[92.5%]': dropdownPosition === 'top' && !label,
+          'bottom-[75%]': dropdownPosition === 'top' && label,
+          'bottom-[65%]': dropdownPosition === 'top' && label && description,
        })}
      >
-        {isOpen && filteredItems.length !== 0 ? (
+        {isOpen &&
+          filteredItems.length !== 0 &&
          filteredItems.map((item, index) => (
-            <li
+            <SelectItem
              {...getItemProps({ item, index })}
              key={item.value}
-              className={theme.item({
-                selected: highlightedIndex === index,
-              })}
-              data-disabled={item.disabled}
-            >
-              {item.leftIcon &&
-                cloneIcon(item.leftIcon, { className: theme.itemIcon() })}
-              <div className={theme.itemContent()}>
-                <p className={theme.itemLabel()} data-disabled={item.disabled}>
-                  {item.label}
-                </p>
-                {orientation === 'horizontal' && (
-                  <span className="h-1 w-1 rounded-full bg-border-interactive-hovered/[0.14]" />
-                )}
-                {item.description && (
-                  <p
-                    className={theme.itemDescription()}
-                    data-disabled={item.disabled}
-                  >
-                    {item.description}
-                  </p>
-                )}
-              </div>
-              {item.rightIcon
-                ? cloneIcon(item.rightIcon, { className: theme.itemIcon() })
-                : isSelected(item) && (
-                    <CheckRadioIcon
-                      className={cn(theme.itemIcon(), 'text-controls-primary')}
-                    />
-                  )}
-            </li>
-          ))
-        ) : (
-          <li className={theme.item()}>{'No results found'}</li>
-        )}
+              selected={isSelected(item)}
+              option={item}
+              hovered={highlightedIndex === index}
+              orientation={orientation}
+              empty={filteredItems.length === 0}
+              variant={variant}
+            />
+          ))}
      </ul>
    </div>
  );
--- a/packages/frontend/src/components/shared/Select/SelectBackup.tsx
+++ b/packages/frontend/src/components/shared/Select/SelectBackup.tsx
@ -1,157 +0,0 @@
-import React, { useState } from 'react';
-import { useMultipleSelection, useCombobox } from 'downshift';
-import { SelectTheme, selectTheme } from './Select.theme';
-import { Button } from '../Button';
-import { CrossIcon } from '../CustomIcon';
-
-type Item = {
-  value: string;
-  label: string;
-};
-
-interface MultiSelectProps extends SelectTheme {
-  items: Item[];
-  multiple?: boolean;
-  searchable?: boolean;
-}
-
-export const MultiSelect: React.FC<MultiSelectProps> = ({
-  items,
-  multiple = false,
-  searchable: searchableProp,
-  size,
-  state,
-}) => {
-  const searchable = multiple ? true : searchableProp || false;
-  const [inputValue, setInputValue] = useState('');
-  const [selectedItem, setSelectedItem] = useState<Item | null>(null);
-  const [dropdownOpen, setDropdownOpen] = useState(false); // Track dropdown open state
-
-  const {
-    container,
-    inputWrapper,
-    input: inputClass,
-    inputValue: inputValueClass,
-    popover,
-    item: itemClass,
-  } = selectTheme({ size, state });
-
-  const getFilteredItems = () => {
-    if (!multiple && !searchable) {
-      return items;
-    }
-    return items.filter(
-      (item) =>
-        item.label.toLowerCase().includes(inputValue.toLowerCase()) &&
-        !(
-          multiple ? selectedItems : selectedItem ? [selectedItem] : []
-        ).includes(item),
-    );
-  };
-
-  const {
-    getSelectedItemProps,
-    getDropdownProps,
-    addSelectedItem,
-    removeSelectedItem,
-    selectedItems,
-  } = useMultipleSelection<Item>({
-    onSelectedItemsChange: multiple
-      ? undefined
-      : ({ selectedItems }) => {
-          setSelectedItem(selectedItems?.[0] || null);
-        },
-  });
-
-  const {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-    openMenu,
-  } = useCombobox({
-    items: getFilteredItems(),
-    onInputValueChange: ({ inputValue = '' }) => setInputValue(inputValue),
-    onSelectedItemChange: ({ selectedItem }) => {
-      if (!multiple && selectedItem) {
-        setSelectedItem(selectedItem);
-        if (searchable) {
-          setInputValue(''); // Clear input value for searchable when an item is selected
-        } else {
-          setInputValue(selectedItem.label); // Set input value to selectedItem's label if searchable is off
-        }
-      } else if (multiple && selectedItem) {
-        addSelectedItem(selectedItem);
-        setInputValue('');
-      }
-    },
-    onIsOpenChange: ({ isOpen }) => {
-      // @ts-expect-error - isOpen is not defined in Downshift's types
-      setDropdownOpen(isOpen);
-      if (!isOpen) {
-        // Reset input value to selected item's label when dropdown is closed and it's not multiple
-        if (!multiple && selectedItem && searchable) {
-          setInputValue('');
-        }
-      } else if (isOpen && !multiple && selectedItem && searchable) {
-        // Clear input value and show selectedItem's label as placeholder when dropdown opens
-        setInputValue('');
-      }
-    },
-    selectedItem: multiple ? null : selectedItem,
-    itemToString: (item) => (item && !multiple ? item.label : ''),
-  });
-
-  return (
-    <div className={container()}>
-      <div
-        className={inputWrapper({
-          hasValue: multiple && selectedItems.length > 0,
-        })}
-        onClick={() => !dropdownOpen && openMenu()}
-      >
-        {multiple &&
-          selectedItems.length > 0 &&
-          selectedItems.map((item, index) => (
-            <span
-              key={`selected-item-${index}`}
-              {...getSelectedItemProps({ selectedItem: item, index })}
-              className={inputValueClass({ multiple })}
-            >
-              {item.label}
-              <Button
-                onClick={() => removeSelectedItem(item)}
-                iconOnly
-                variant="unstyled"
-                size="xs"
-              >
-                <CrossIcon size={14} />
-              </Button>
-            </span>
-          ))}
-        <input
-          {...getInputProps(getDropdownProps())}
-          placeholder="Select an option..."
-          readOnly={!searchable} // Control readOnly based on searchable
-          className={inputClass({ searchable })}
-        />
-      </div>
-      <ul {...getMenuProps()} className={popover({ isOpen })}>
-        {isOpen && (getFilteredItems().length !== 0 || !searchable) ? (
-          getFilteredItems().map((item, index) => (
-            <li
-              {...getItemProps({ item, index })}
-              key={item.value}
-              className={itemClass({ selected: highlightedIndex === index })}
-            >
-              {item.label}
-            </li>
-          ))
-        ) : (
-          <li className={itemClass()}>{'No results found'}</li>
-        )}
-      </ul>
-    </div>
-  );
-};