feat: implement suggestions list

Author: isekovanic

package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx

@@ -3,8 +3,8 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
-import { Lightning } from '../../icons/Lightning';
 import { Smile } from '../../icons/Smile';
+import { primitives } from '../../theme';
 
 export type AutoCompleteSuggestionHeaderProps = {
   queryText?: string;
@@ -14,7 +14,7 @@ export type AutoCompleteSuggestionHeaderProps = {
 export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () => {
   const {
     theme: {
-      colors: { accent_blue, grey },
+      semantics,
       messageInput: {
         suggestions: {
           header: { container, title },
@@ -25,8 +25,10 @@ export const CommandsHeader: React.FC<AutoCompleteSuggestionHeaderProps> = () =>
 
   return (
     <View style={[styles.container, container]}>
-      <Lightning fill={accent_blue} size={32} />
-      <Text style={[styles.title, { color: grey }, title]} testID='commands-header-title'>
+      <Text
+        style={[styles.title, { color: semantics.textTertiary }, title]}
+        testID='commands-header-title'
+      >
         {'Instant Commands'}
       </Text>
     </View>
@@ -107,7 +109,9 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   title: {
-    fontSize: 14,
+    fontSize: primitives.typographyFontSizeSm,
+    lineHeight: primitives.typographyLineHeightNormal,
+    fontWeight: primitives.typographyFontWeightMedium,
     paddingLeft: 8,
   },
 });

package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx

@@ -7,7 +7,6 @@ import { AutoCompleteSuggestionCommandIcon } from './AutoCompleteSuggestionComma
 
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { AtMentions } from '../../icons/AtMentions';
 import { primitives } from '../../theme';
 import type { Emoji } from '../../types/types';
 
@@ -22,7 +21,7 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
   const { id, name, online } = item;
   const {
     theme: {
-      colors: { accent_blue, black },
+      colors: { black },
       messageInput: {
         suggestions: {
           mention: { column, container: mentionContainer, name: nameStyle },
@@ -40,7 +39,6 @@ export const MentionSuggestionItem = (item: UserSuggestion) => {
           {name || id}
         </Text>
       </View>
-      <AtMentions pathFill={accent_blue} />
     </View>
   );
 };
@@ -203,8 +201,9 @@ const useStyles = () => {
           paddingVertical: primitives.spacingXs,
         },
         name: {
-          fontSize: 14,
-          fontWeight: 'bold',
+          fontSize: primitives.typographyFontSizeMd,
+          lineHeight: primitives.typographyLineHeightNormal,
+          color: semantics.textPrimary,
           paddingBottom: 2,
         },
         tag: {

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
-import { FlatList, StyleSheet, View } from 'react-native';
+import { FlatList, StyleSheet } from 'react-native';
+
+import Animated, { LinearTransition, ZoomIn, ZoomOut } from 'react-native-reanimated';
 
 import { SearchSourceState, TextComposerState, TextComposerSuggestion } from 'stream-chat';
 
@@ -12,7 +14,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { useStateStore } from '../../hooks/useStateStore';
 
-export const DEFAULT_LIST_HEIGHT = 200;
+export const DEFAULT_LIST_HEIGHT = 208;
 
 export type AutoCompleteSuggestionListProps = Partial<
   Pick<MessageInputContextValue, 'AutoCompleteSuggestionHeader' | 'AutoCompleteSuggestionItem'>
@@ -63,10 +65,10 @@ export const AutoCompleteSuggestionList = ({
       colors: { black, white },
       messageInput: {
         container: { maxHeight },
-        suggestionsListContainer: { flatlist },
       },
     },
   } = useTheme();
+  const styles = useStyles();
 
   const renderItem = useCallback(
     ({ item }: { item: TextComposerSuggestion }) => {
@@ -90,7 +92,12 @@ export const AutoCompleteSuggestionList = ({
   }
 
   return (
-    <View style={[styles.container]}>
+    <Animated.View
+      entering={ZoomIn.duration(200)}
+      exiting={ZoomOut.duration(200)}
+      layout={LinearTransition.duration(200)}
+      style={styles.container}
+    >
       <FlatList
         data={items}
         keyboardShouldPersistTaps='always'
@@ -99,33 +106,47 @@ export const AutoCompleteSuggestionList = ({
         onEndReached={loadMore}
         onEndReachedThreshold={0.1}
         renderItem={renderItem}
-        style={[
-          styles.flatlist,
-          flatlist,
-          { backgroundColor: white, maxHeight, shadowColor: black },
-        ]}
+        style={[styles.flatlist, { backgroundColor: white, maxHeight, shadowColor: black }]}
         testID={'auto-complete-suggestion-list'}
       />
-    </View>
+    </Animated.View>
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    maxHeight: DEFAULT_LIST_HEIGHT,
-  },
-  flatlist: {
-    borderRadius: 8,
-    elevation: 3,
-    marginHorizontal: 8,
-    shadowOffset: {
-      height: 1,
-      width: 0,
+const useStyles = () => {
+  const {
+    theme: {
+      semantics,
+      messageInput: {
+        suggestionsListContainer: { flatlist },
+      },
     },
-    shadowOpacity: 0.22,
-    shadowRadius: 2.22,
-  },
-});
+  } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          maxHeight: DEFAULT_LIST_HEIGHT,
+          backgroundColor: semantics.composerBg,
+          borderTopWidth: 1,
+          borderColor: semantics.borderCoreDefault,
+        },
+        flatlist: {
+          borderRadius: 8,
+          elevation: 3,
+          marginHorizontal: 8,
+          shadowOffset: {
+            height: 1,
+            width: 0,
+          },
+          shadowOpacity: 0.22,
+          shadowRadius: 2.22,
+          ...flatlist,
+        },
+      }),
+    [semantics, flatlist],
+  );
+};
 
 AutoCompleteSuggestionList.displayName =
   'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';

package/src/components/MessageInput/MessageInput.tsx

@@ -4,8 +4,6 @@ import { Modal, StyleSheet, TextInput, TextInputProps, View } from 'react-native
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, {
   Extrapolation,
-  FadeIn,
-  FadeOut,
   interpolate,
   LinearTransition,
   useAnimatedStyle,
@@ -133,6 +131,7 @@ const useStyles = () => {
         shadowRadius: 12,
       },
       suggestionsListContainer: {
+        backgroundColor: semantics.composerBg,
         position: 'absolute',
         width: '100%',
       },
@@ -454,14 +453,9 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
         <MessageComposerTrailingView />
       )}
 
-      <Animated.View
-        entering={FadeIn.duration(200)}
-        exiting={FadeOut.duration(200)}
-        layout={LinearTransition.duration(200)}
-        style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}
-      >
+      <View style={[styles.suggestionsListContainer, { bottom: height }, suggestionListContainer]}>
         <AutoCompleteSuggestionList />
-      </Animated.View>
+      </View>
 
       {showPollCreationDialog ? (
         <View style={styles.pollModalWrapper}>

package/src/icons/AtMentions.tsx

@@ -4,7 +4,6 @@ export * from './Archive';
 export * from './ArrowRight';
 export * from './ArrowLeft';
 export * from './ArrowUp';
-export * from './AtMentions';
 export * from './Attach';
 export * from './Audio';
 export * from './Camera';