From 93d8c3dfa2ce890bbfe814df0515b5c99ff62917 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rui=20Sim=C3=A3o?= <rui.daniel.simao@gmail.com>
Date: Wed, 18 Sep 2024 15:42:06 +0100
Subject: [PATCH] feat:  breakdown searchable props

---
 .../ui/src/components/Select/Select.style.tsx |   4 +-
 packages/ui/src/components/Select/Select.tsx  |   2 +-
 .../ui/src/components/Select/SelectModal.tsx  | 205 ++++++++----------
 .../src/components/Select/SelectModalList.tsx |  73 +++++++
 .../src/components/TokenInput/TokenSelect.tsx |  14 +-
 .../stories/SelectableTokenInput.stories.tsx  |  24 +-
 6 files changed, 190 insertions(+), 132 deletions(-)
 create mode 100644 packages/ui/src/components/Select/SelectModalList.tsx

diff --git a/packages/ui/src/components/Select/Select.style.tsx b/packages/ui/src/components/Select/Select.style.tsx
index 41319084..8704e504 100644
--- a/packages/ui/src/components/Select/Select.style.tsx
+++ b/packages/ui/src/components/Select/Select.style.tsx
@@ -30,7 +30,7 @@ type StyledFieldProps = {
 };
 
 type StyledModalProps = {
-  $showAutoComplete?: boolean;
+  $isSearchable?: boolean;
 };
 
 const StyledTrigger = styled.button<StyledTriggerProps>`
@@ -87,7 +87,7 @@ const StyledModalBody = styled(ModalBody)`
 `;
 
 const StyledModal = styled(Modal)<StyledModalProps>`
-  height: ${({ $showAutoComplete }) => $showAutoComplete && '700px'};
+  height: ${({ $isSearchable }) => $isSearchable && '700px'};
 `;
 
 const StyledSelectableChip = styled(Chip)`
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
index 03513c7c..fb1a90e3 100644
--- a/packages/ui/src/components/Select/Select.tsx
+++ b/packages/ui/src/components/Select/Select.tsx
@@ -30,7 +30,7 @@ type ListboxAttrs = { type?: 'listbox' };
 
 type ModalAttrs = {
   type?: 'modal';
-  modalProps?: { ref?: React.Ref<HTMLDivElement> } & Omit<SelectModalProps, 'state' | 'isOpen' | 'onClose' | 'id'>;
+  modalProps?: { ref?: ForwardedRef<HTMLInputElement> } & Omit<SelectModalProps, 'state' | 'isOpen' | 'onClose' | 'id'>;
 };
 
 type AriaAttrs<T = SelectObject> = Omit<
diff --git a/packages/ui/src/components/Select/SelectModal.tsx b/packages/ui/src/components/Select/SelectModal.tsx
index 54650e72..2f7c2f31 100644
--- a/packages/ui/src/components/Select/SelectModal.tsx
+++ b/packages/ui/src/components/Select/SelectModal.tsx
@@ -1,16 +1,18 @@
 import { mergeProps, useId } from '@react-aria/utils';
 import { SelectState } from '@react-stately/select';
-import { forwardRef, ReactNode, useRef, useState } from 'react';
-import { useFilter } from '@react-aria/i18n';
+import { ForwardedRef, forwardRef, ReactNode, useRef, useState } from 'react';
 import { useButton } from '@react-aria/button';
-import { PressEvent } from '@react-types/shared';
+import { Node, PressEvent } from '@react-types/shared';
 
 import { MagnifyingGlass } from '../../icons';
-import { ChipProps, Flex, Input, ModalHeader, ModalProps, P } from '..';
-import { ListItem, ListProps } from '../List';
+import { ChipProps, Flex, Input, ModalHeader, ModalProps } from '..';
+import { ListProps } from '../List';
 import { ModalDivider } from '../Modal';
 
-import { StyledList, StyledModal, StyledModalBody, StyledModalDivider, StyledSelectableChip } from './Select.style';
+import { StyledModal, StyledModalBody, StyledModalDivider, StyledSelectableChip } from './Select.style';
+import { SelectModalList, SelectModalListProps } from './SelectModalList';
+
+type SelectObject = Record<any, any>;
 
 const SelectableChip = ({ onPress, ...props }: ChipProps & { onPress?: (e: PressEvent) => void }) => {
   const ref = useRef(null);
@@ -19,122 +21,97 @@ const SelectableChip = ({ onPress, ...props }: ChipProps & { onPress?: (e: Press
   return <StyledSelectableChip ref={ref} borderColor='grey-300' size='lg' {...mergeProps(props, buttonProps)} />;
 };
 
-type Props = {
+type Props<T = SelectObject> = {
   state: SelectState<unknown>;
   title?: ReactNode;
-  listProps?: Omit<ListProps, 'children'>;
-  showAutoComplete?: boolean;
+  listProps?: Omit<ListProps, 'children' | 'searchable'>;
+  searchable?: SelectModalListProps<T>['searchable'];
   featuredItems?: Array<Pick<ChipProps, 'startAdornment' | 'endAdornment' | 'children'> & { value: string }>;
 };
 
 type InheritAttrs = Omit<ModalProps, keyof Props | 'children'>;
 
-type SelectModalProps = Props & InheritAttrs;
-
-const SelectModal = forwardRef<HTMLDivElement, SelectModalProps>(
-  ({ state, title, onClose, listProps, showAutoComplete, featuredItems, ...props }, ref): JSX.Element => {
-    const headerId = useId();
-
-    const [search, setSearch] = useState('');
-
-    const { contains } = useFilter({
-      sensitivity: 'base'
-    });
-
-    const handleSelectionChange: ListProps['onSelectionChange'] = (key) => {
-      const [selectedKey] = [...key];
-
-      if (!selectedKey) {
-        return onClose();
-      }
-
-      state.selectionManager.setSelectedKeys(key);
-      onClose();
-    };
-
-    const handleSearchChange = (value: string) => {
-      setSearch(value);
-    };
-
-    const handlePressChip = (value: string) => {
-      state.selectionManager.setSelectedKeys(new Set([value]));
-    };
-
-    const items = [...state.collection];
-
-    const matchedItems = items.filter((item) => contains(item.textValue, search));
-
-    const hasItems = !!items.length;
-
-    const hasFeaturedItems = !!featuredItems?.length;
-
-    return (
-      <StyledModal ref={ref} $showAutoComplete={showAutoComplete} onClose={onClose} {...props}>
-        {title && (
-          <ModalHeader id={headerId} showDivider={false} size='lg' weight='medium'>
-            {title}
-          </ModalHeader>
-        )}
-        <ModalDivider />
-        {(hasFeaturedItems || showAutoComplete) && (
-          <>
-            <StyledModalBody gap='lg'>
-              {showAutoComplete && (
-                <Input
-                  placeholder='Search'
-                  startAdornment={<MagnifyingGlass color='grey-50' />}
-                  value={search}
-                  onValueChange={handleSearchChange}
-                />
-              )}
-              {hasFeaturedItems && (
-                <Flex wrap gap='s'>
-                  {featuredItems.map(({ value, ...item }, key) => (
-                    <SelectableChip
-                      key={key}
-                      aria-label={`select ${value}`}
-                      borderColor='grey-300'
-                      size='lg'
-                      onPress={() => handlePressChip(value)}
-                      {...item}
-                    />
-                  ))}
-                </Flex>
-              )}
-            </StyledModalBody>
-            <StyledModalDivider />
-          </>
-        )}
-        {hasItems ? (
-          <StyledList
-            {...listProps}
-            aria-labelledby={headerId}
-            gap='s'
-            selectionMode='single'
-            onSelectionChange={handleSelectionChange}
-          >
-            {matchedItems.map((item) => (
-              <ListItem
-                key={item.key}
-                alignItems='center'
-                alignSelf='auto'
-                gap='xs'
-                justifyContent='space-between'
-                textValue={item.textValue}
-              >
-                {item.rendered}
-              </ListItem>
-            ))}
-          </StyledList>
-        ) : (
-          <P align='center'>No options</P>
-        )}
-      </StyledModal>
-    );
-  }
-);
+type SelectModalProps<T = SelectObject> = Props<T> & InheritAttrs;
+
+const SelectModal = <T extends SelectObject = SelectObject>(
+  { state, title, onClose, listProps, searchable, featuredItems, ...props }: SelectModalProps<T>,
+  ref: ForwardedRef<HTMLDivElement>
+): JSX.Element => {
+  const headerId = useId();
+
+  const [search, setSearch] = useState('');
+
+  const handleSelectionChange: ListProps['onSelectionChange'] = (key) => {
+    state.selectionManager.setSelectedKeys(key);
+  };
+
+  const handleSearchChange = (value: string) => {
+    setSearch(value);
+  };
+
+  const handlePressChip = (value: string) => {
+    state.selectionManager.setSelectedKeys(new Set([value]));
+  };
+
+  const isSearchable = !!searchable;
+  const hasFeaturedItems = !!featuredItems?.length;
+
+  const items = [...state.collection] as Node<T>[];
+
+  return (
+    <StyledModal ref={ref} $isSearchable={isSearchable} onClose={onClose} {...props}>
+      {title && (
+        <ModalHeader id={headerId} showDivider={false} size='lg' weight='medium'>
+          {title}
+        </ModalHeader>
+      )}
+      <ModalDivider />
+      {(hasFeaturedItems || isSearchable) && (
+        <>
+          <StyledModalBody gap='lg'>
+            {isSearchable && (
+              <Input
+                placeholder='Search'
+                startAdornment={<MagnifyingGlass color='grey-50' />}
+                value={search}
+                onValueChange={handleSearchChange}
+              />
+            )}
+            {hasFeaturedItems && !search && (
+              <Flex wrap gap='s'>
+                {featuredItems.map(({ value, ...item }, key) => (
+                  <SelectableChip
+                    key={key}
+                    aria-label={`select ${value}`}
+                    borderColor='grey-300'
+                    size='lg'
+                    onPress={() => handlePressChip(value)}
+                    {...item}
+                  />
+                ))}
+              </Flex>
+            )}
+          </StyledModalBody>
+          <StyledModalDivider />
+        </>
+      )}
+      <SelectModalList<T>
+        {...listProps}
+        aria-labelledby={headerId}
+        items={items}
+        searchTerm={search}
+        searchable={searchable}
+        onSelectionChange={handleSelectionChange}
+      />
+    </StyledModal>
+  );
+};
+
+const _SelectModal = forwardRef(SelectModal) as <T extends SelectObject = SelectObject>(
+  props: SelectModalProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> }
+) => ReturnType<typeof SelectModal>;
 
 SelectModal.displayName = 'SelectModal';
 
-export { SelectModal };
+export { _SelectModal as SelectModal };
 export type { SelectModalProps };
diff --git a/packages/ui/src/components/Select/SelectModalList.tsx b/packages/ui/src/components/Select/SelectModalList.tsx
new file mode 100644
index 00000000..3557b933
--- /dev/null
+++ b/packages/ui/src/components/Select/SelectModalList.tsx
@@ -0,0 +1,73 @@
+import { useFilter } from '@react-aria/i18n';
+import { Node } from '@react-types/shared';
+
+import { ListItem, ListProps } from '../List';
+import { P } from '../Text';
+
+import { StyledList } from './Select.style';
+
+type SelectObject = Record<any, any>;
+
+type SearchableProps<T = SelectObject> = {
+  items: Node<T>[];
+  inputValue: string;
+  onValueChange: (value: string) => void;
+};
+
+type SearchableFilter<T = SelectObject> = (value: Node<T>) => boolean;
+
+type Props<T = SelectObject> = {
+  items: Node<T>[];
+  searchable?: boolean | SearchableFilter<T> | SearchableProps<T>;
+  searchTerm?: string;
+};
+
+type InheritAttrs = Omit<ListProps, keyof Props | 'children' | 'items'>;
+
+type SelectModalListProps<T = SelectObject> = Props<T> & InheritAttrs;
+
+const SelectModalList = <T extends SelectObject = SelectObject>({
+  items: itemsProp,
+  searchable,
+  searchTerm,
+  ...props
+}: SelectModalListProps<T>): JSX.Element => {
+  const { contains } = useFilter({
+    sensitivity: 'base'
+  });
+
+  const isSearchResultList = typeof searchable === 'object';
+
+  const items = isSearchResultList
+    ? searchable.items
+    : searchable && searchTerm
+      ? [...(itemsProp || [])]?.filter(
+          typeof searchable === 'function' ? searchable : (item) => contains(item.textValue, searchTerm)
+        )
+      : itemsProp;
+
+  if (!items.length)
+    return (
+      <P align='center'>{isSearchResultList && searchTerm ? `No results found for ${searchTerm}` : 'No options'}</P>
+    );
+
+  return (
+    <StyledList {...props} gap='s' selectionMode='single'>
+      {items.map((item) => (
+        <ListItem
+          key={item.key}
+          alignItems='center'
+          alignSelf='auto'
+          gap='xs'
+          justifyContent='space-between'
+          textValue={item.textValue}
+        >
+          {item.rendered}
+        </ListItem>
+      ))}
+    </StyledList>
+  );
+};
+
+export { SelectModalList };
+export type { SelectModalListProps };
diff --git a/packages/ui/src/components/TokenInput/TokenSelect.tsx b/packages/ui/src/components/TokenInput/TokenSelect.tsx
index ebe8a1de..6894c1c1 100644
--- a/packages/ui/src/components/TokenInput/TokenSelect.tsx
+++ b/packages/ui/src/components/TokenInput/TokenSelect.tsx
@@ -1,5 +1,6 @@
 import { Currency } from '@gobob/currency';
 import { mergeProps } from '@react-aria/utils';
+import { useFilter } from '@react-aria/i18n';
 
 import { Item, ModalSelectProps, Select } from '../Select';
 import { Avatar } from '../Avatar';
@@ -20,6 +21,10 @@ type TokenSelectProps = Omit<ModalSelectProps<TokenSelectItemProps>, 'children'
 };
 
 const TokenSelect = ({ modalProps, size, featuredItems, ...props }: TokenSelectProps): JSX.Element => {
+  const { contains } = useFilter({
+    sensitivity: 'base'
+  });
+
   return (
     <Select<TokenSelectItemProps>
       {...props}
@@ -28,12 +33,17 @@ const TokenSelect = ({ modalProps, size, featuredItems, ...props }: TokenSelectP
       modalProps={mergeProps(
         {
           title: 'Select Token',
-          listProps: { maxHeight: '32rem' },
+          // TODO: handle height better
+          // listProps: { maxHeight: '32rem' },
           featuredItems: featuredItems?.map((item) => ({
             startAdornment: <Avatar size='3xl' src={item.logoUrl} />,
             children: item.currency.symbol,
             value: item.currency.symbol
-          }))
+          })),
+          // TODO: need to get current search term to compare it
+          searchable: ({ value }: { value: TokenSelectItemProps }) => {
+            return;
+          }
         },
         modalProps
       )}
diff --git a/packages/ui/src/components/TokenInput/stories/SelectableTokenInput.stories.tsx b/packages/ui/src/components/TokenInput/stories/SelectableTokenInput.stories.tsx
index d40c3f33..e278021e 100644
--- a/packages/ui/src/components/TokenInput/stories/SelectableTokenInput.stories.tsx
+++ b/packages/ui/src/components/TokenInput/stories/SelectableTokenInput.stories.tsx
@@ -8,50 +8,50 @@ import { TokenInput, TokenInputProps } from '..';
 const items = [
   {
     balance: 2,
-    currency: { symbol: 'ETH', decimals: 18 } as Currency,
+    currency: { symbol: 'ETH', name: 'Ethereum', decimals: 18 } as Currency,
     logoUrl: 'https://ethereum-optimism.github.io/data/ETH/logo.svg',
     balanceUSD: 900
   },
   {
     balance: 500,
-    currency: { symbol: 'USDT', decimals: 6 } as Currency,
+    currency: { symbol: 'USDT', name: 'USDT', decimals: 6 } as Currency,
     logoUrl: 'https://ethereum-optimism.github.io/data/USDT/logo.png',
     balanceUSD: 500
   },
   {
     balance: 100,
-    currency: { symbol: 'USDC', decimals: 6 } as Currency,
+    currency: { symbol: 'USDC', name: 'USDC', decimals: 6 } as Currency,
     logoUrl: 'https://ethereum-optimism.github.io/data/BridgedUSDC/logo.png',
     balanceUSD: 100
   },
   {
     balance: 100,
-    currency: { symbol: 'WBTC', decimals: 6 } as Currency,
+    currency: { symbol: 'WBTC', name: 'Wrapped Bitcoin', decimals: 6 } as Currency,
     logoUrl: 'https://ethereum-optimism.github.io/data/BridgedUSDC/logo.png',
     balanceUSD: 100
   },
   {
     balance: 100,
-    currency: { symbol: 'WETH', decimals: 6 } as Currency,
+    currency: { symbol: 'WETH', name: 'WETH', decimals: 6 } as Currency,
     logoUrl: 'https://ethereum-optimism.github.io/data/BridgedUSDC/logo.png',
     balanceUSD: 100
   },
   {
     balance: 100,
-    currency: { symbol: 'BTC', decimals: 6 } as Currency,
+    currency: { symbol: 'BTC', name: 'Bitcoin', decimals: 6 } as Currency,
     logoUrl: 'https://ethereum-optimism.github.io/data/BridgedUSDC/logo.png',
     balanceUSD: 100
   },
   {
     balance: 100,
-    currency: { symbol: 'QWER', decimals: 6 } as Currency,
-    logoUrl: 'https://ethereum-optimism.github.io/data/BridgedUSDC/logo.png',
+    currency: { symbol: 'stETH', name: 'Lido Staked Ether', decimals: 6 } as Currency,
+    logoUrl: 'https://coin-images.coingecko.com/coins/images/13442/large/steth_logo.png?1696513206',
     balanceUSD: 100
   },
   {
     balance: 100,
-    currency: { symbol: 'QWWR', decimals: 6 } as Currency,
-    logoUrl: 'https://ethereum-optimism.github.io/data/BridgedUSDC/logo.png',
+    currency: { symbol: 'rETH', name: 'Rocket Pool ETH', decimals: 6 } as Currency,
+    logoUrl: 'https://coin-images.coingecko.com/coins/images/20764/large/reth.png?1696520159',
     balanceUSD: 100
   }
 ];
@@ -127,8 +127,6 @@ export const SelectableErrorMessage: StoryObj<TokenInputProps> = {
 export const AutoComplete: StoryObj<TokenInputProps> = {
   args: {
     featuredItems: items.slice(0, 6),
-    selectProps: {
-      modalProps: { showAutoComplete: true }
-    }
+    selectProps: {}
   }
 };