CP-9931: Move SearchBar to k2-alpine (#2328)

Author: ruijialin-avalabs

packages/core-mobile/app/new/routes/(signedIn)/(modals)/tokenManagement/addCustomToken.tsx

@@ -1,6 +1,7 @@
 import {
   Button,
   Icons,
+  SearchBar,
   Text,
   TouchableOpacity,
   useTheme,
@@ -12,7 +13,6 @@ import useAddCustomToken from 'screens/tokenManagement/hooks/useAddCustomToken'
 import { GlobalLoadingState } from 'common/components/GlobalLoadingState'
 import { LocalTokenWithBalance } from 'store/balance'
 import { useLocalSearchParams, useRouter } from 'expo-router'
-import { SearchBar } from 'features/portfolio/assets/components/SearchBar'
 import { LogoWithNetwork } from 'features/portfolio/assets/components/LogoWithNetwork'
 
 const AddCustomTokenScreen = (): JSX.Element => {
@@ -86,7 +86,7 @@ const AddCustomTokenScreen = (): JSX.Element => {
             onTextChanged={setTokenAddress}
             searchText={tokenAddress}
             placeholder="Token contract address"
-            rightIconWhenBlur={
+            rightComponent={
               <TouchableOpacity
                 onPress={goToScanQrCode}
                 hitSlop={16}

packages/core-mobile/app/new/routes/(signedIn)/(modals)/tokenManagement/index.tsx

@@ -3,6 +3,7 @@ import { ListRenderItemInfo } from 'react-native'
 import { LocalTokenWithBalance } from 'store/balance/types'
 import {
   Icons,
+  SearchBar,
   Text,
   TouchableOpacity,
   useTheme,
@@ -14,7 +15,6 @@ import { TokenType } from '@avalabs/vm-module-types'
 import { useRouter } from 'expo-router'
 import { useSearchableTokenList } from 'common/hooks/useSearchableTokenList'
 import { FlatList } from 'react-native-gesture-handler'
-import { SearchBar } from 'features/portfolio/assets/components/SearchBar'
 import TokenManagementItem from 'features/portfolio/assets/components/TokenManagementItem'
 
 const TokenManagementScreen = (): JSX.Element => {

packages/core-mobile/package.json

@@ -116,6 +116,7 @@
     "jail-monkey": "2.8.0",
     "jimp": "1.6.0",
     "jsc-android": "294992.0.0",
+    "lodash.debounce": "4.0.8",
     "lodash.isempty": "4.4.0",
     "lodash.isstring": "4.0.1",
     "lodash.merge": "4.6.2",

packages/k2-alpine/package.json

@@ -24,6 +24,7 @@
     "expo-linear-gradient": "12.7.2",
     "expo-splash-screen": "0.27.6",
     "expo-status-bar": "1.12.1",
+    "lodash.debounce": "4.0.8",
     "react": "18.3.1",
     "react-content-loader": "6.2.0",
     "react-native": "0.73.7",
@@ -57,6 +58,7 @@
     "@storybook/addon-ondevice-backgrounds": "7.6.20",
     "@storybook/addon-ondevice-controls": "7.6.20",
     "@storybook/react-native": "7.6.20",
+    "@types/lodash.debounce": "4.0.9",
     "@types/react": "18.3.11",
     "@types/tinycolor2": "1.4.5",
     "babel-loader": "9.2.1",

packages/k2-alpine/src/components/SearchBar/SearchBar.stories.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react'
+import { ScrollView, TouchableOpacity, View } from '../Primitives'
+import { Icons, showAlert } from '../..'
+import { SearchBar } from './SearchBar'
+
+export default {
+  title: 'SearchBar'
+}
+
+export const All = (): JSX.Element => {
+  const [value, setValue] = useState('')
+  const [value1, setValue1] = useState('')
+
+  return (
+    <ScrollView
+      style={{ width: '100%', backgroundColor: 'transparent' }}
+      contentContainerStyle={{ padding: 16 }}>
+      <View
+        style={{
+          marginBottom: 20,
+          gap: 20
+        }}>
+        <SearchBar
+          onTextChanged={setValue}
+          searchText={value}
+          placeholder="SearchBar with custom icon"
+          rightComponent={
+            <TouchableOpacity
+              onPress={() =>
+                showAlert({
+                  title: 'custom icon pressed',
+                  buttons: [{ text: 'OK' }]
+                })
+              }
+              hitSlop={16}>
+              <Icons.Custom.QRCodeScanner />
+            </TouchableOpacity>
+          }
+        />
+        <SearchBar
+          onTextChanged={setValue1}
+          searchText={value1}
+          placeholder="SearchBar without custom icon"
+        />
+      </View>
+    </ScrollView>
+  )
+}

packages/core-mobile/app/new/features/portfolio/assets/components/SearchBar.tsx renamed to packages/k2-alpine/src/components/SearchBar/SearchBar.tsx

@@ -8,7 +8,9 @@ import {
 } from 'react-native'
 import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
 import debounce from 'lodash.debounce'
-import { Icons, TouchableOpacity, View, useTheme } from '@avalabs/k2-alpine'
+import { TouchableOpacity, View } from '../Primitives'
+import { useTheme } from '../../hooks'
+import { Icons } from '../../theme/tokens/Icons'
 
 interface Props extends Omit<TextInputProps, 'value' | 'onChangeText'> {
   onTextChanged: (value: string) => void
@@ -20,25 +22,27 @@ interface Props extends Omit<TextInputProps, 'value' | 'onChangeText'> {
   testID?: string
   setSearchBarFocused?: (value: boolean) => void
   containerStyle?: ViewStyle
-  rightIconWhenBlur?: JSX.Element
+  rightComponent?: JSX.Element
 }
 
 const SCREEN_WIDTH = Dimensions.get('window').width
 const INPUT_SIZE = SCREEN_WIDTH - 106
 const DEFAULT_DEBOUNCE_MILLISECONDS = 150
+const HEIGHT = 40
 
 /**
  * SearchBar component. Text state is handled outside the
  * component except for when the text is cleared.
  *
- * Shows QRCodeScanner button when search bar has no search text.
+ * Shows custom right component when search bar has no search text and a right component is provided.
  * Shows Clear button when search bar has search text.
  *
  * @param onTextChanged callback to implementing view
  * @param searchText current search text
  * @param placeholder defaults to 'Search'
  * @param debounce if true, will delay calling 'onTextChanged' by default ms
  * @param textColor
+ * @param rightComponent custom right component to show when search text is empty
  * @param rest all other props
  * @constructor
  */
@@ -51,7 +55,7 @@ export const SearchBar: FC<Props> = ({
   textColor,
   setSearchBarFocused,
   containerStyle,
-  rightIconWhenBlur,
+  rightComponent,
   ...rest
 }) => {
   const textInputRef = useRef<TextInput>(null)
@@ -85,15 +89,35 @@ export const SearchBar: FC<Props> = ({
     }
   }
 
+  const renderRightComponent = (): React.JSX.Element | undefined => {
+    if (searchText.length > 0) {
+      return (
+        <TouchableOpacity onPress={clearText} hitSlop={16}>
+          <Icons.Action.Clear color={colors.$textSecondary} />
+        </TouchableOpacity>
+      )
+    }
+    if (
+      (searchText === undefined || searchText.length === 0) &&
+      rightComponent
+    ) {
+      return rightComponent
+    }
+  }
+
   return (
     <View
       style={[
-        { backgroundColor: colors.$surfaceSecondary, borderRadius: 1000 },
+        {
+          backgroundColor: colors.$surfaceSecondary,
+          borderRadius: 1000,
+          height: HEIGHT,
+          justifyContent: 'center'
+        },
         containerStyle
       ]}>
       <View
         style={{
-          alignItems: 'center',
           flexDirection: 'row',
           paddingHorizontal: 12,
           marginVertical: Platform.OS === 'ios' ? 11 : 0
@@ -129,13 +153,7 @@ export const SearchBar: FC<Props> = ({
             {...rest}
           />
         </View>
-        {searchText && searchText.length > 0 ? (
-          <TouchableOpacity onPress={clearText} hitSlop={16}>
-            <Icons.Action.Clear color={colors.$textSecondary} />
-          </TouchableOpacity>
-        ) : (
-          rightIconWhenBlur
-        )}
+        {renderRightComponent()}
       </View>
     </View>
   )

packages/k2-alpine/src/components/index.ts

@@ -23,3 +23,4 @@ export * from './Dropdown/usePopoverAnchor'
 export * from './Toggle/Toggle'
 export * from './Animated/AnimatedText'
 export * from './Animated/AnimatedPressable'
+export * from './SearchBar/SearchBar'

yarn.lock

@@ -304,6 +304,7 @@ __metadata:
     jimp: 1.6.0
     jsc-android: 294992.0.0
     json-stringify-pretty-compact: 4.0.0
+    lodash.debounce: 4.0.8
     lodash.isempty: 4.4.0
     lodash.isstring: 4.0.1
     lodash.merge: 4.6.2
@@ -504,6 +505,7 @@ __metadata:
     "@storybook/addon-ondevice-backgrounds": 7.6.20
     "@storybook/addon-ondevice-controls": 7.6.20
     "@storybook/react-native": 7.6.20
+    "@types/lodash.debounce": 4.0.9
     "@types/react": 18.3.11
     "@types/tinycolor2": 1.4.5
     babel-loader: 9.2.1
@@ -518,6 +520,7 @@ __metadata:
     expo-splash-screen: 0.27.6
     expo-status-bar: 1.12.1
     json-stringify-pretty-compact: 4.0.0
+    lodash.debounce: 4.0.8
     patch-package: 8.0.0
     react: 18.3.1
     react-content-loader: 6.2.0
@@ -27100,7 +27103,7 @@ react-native-webview@ava-labs/react-native-webview:
   peerDependencies:
     react: "*"
     react-native: "*"
-  checksum: 869028a5bb7a4a8a125d274753b703c2b3579b5efc7bb82db136a186fd88a11c5a4696505ebcd976d20fcdd41111abe229ae0e19c27c50bb30fe4f52bb6383bc
+  checksum: ae658f8c94177d1b419ffb73d26bd70474b6c688af507daaabc11451f983f77a906b2aafcdfdd09c96cab846d9722dcaf26a7c22ee7d19fb4cf70578c8812ac5
   languageName: node
   linkType: hard