Replace MUI dependencies in TableSearchBar with Oasis UI Library

.changelog/2247.internal.md

@@ -0,0 +1 @@
+Replace MUI dependencies in TableSearchBar with Oasis UI Library

src/app/components/Search/TableSearchBar.tsx

@@ -1,68 +1,28 @@
-import { FC, KeyboardEventHandler, useCallback, useEffect, useState } from 'react'
-import TextField from '@mui/material/TextField'
-import SearchIcon from '@mui/icons-material/Search'
-import HighlightOffIcon from '@mui/icons-material/HighlightOff'
-import InputAdornment from '@mui/material/InputAdornment'
-import { COLORS } from '../../../styles/theme/colors'
-import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
-import { useScreenSize } from '../../hooks/useScreensize'
-import WarningIcon from '@mui/icons-material/WarningAmber'
-import { typingDelay } from '../../../styles/theme'
-import Typography from '@mui/material/Typography'
+import { FC, KeyboardEventHandler, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import MuiButton from '@mui/material/Button'
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
 import { CardEmptyState } from '../CardEmptyState'
-import { inputBaseClasses } from '@mui/material/InputBase'
-
-type SearchBarSize = 'small' | 'medium' | 'large'
+import { SearchInput } from '@oasisprotocol/ui-library/src/components/input'
 
 export interface TableSearchBarProps {
+  className?: string
   placeholder: string
   warning?: string
   value: string
-  /**
-   * Should we go 100% width?
-   */
-  fullWidth?: boolean
-
-  /**
-   * Width of the whole component
-   *
-   * Note: fullWidth overrides this.
-   */
-  width?: string | number
-
   onChange: (value: string) => void
   onEnter?: () => void
-  size?: SearchBarSize
   autoFocus?: boolean
 }
 
 export const TableSearchBar: FC<TableSearchBarProps> = ({
+  className,
   value,
   onChange,
   placeholder,
   warning,
-  fullWidth,
   autoFocus,
   onEnter,
-  width = 190,
 }) => {
-  const { isTablet } = useScreenSize()
-
-  const [isWarningFresh, setIsWarningFresh] = useState(false)
-
-  useEffect(() => {
-    if (warning) {
-      const timeout = setTimeout(() => {
-        setIsWarningFresh(false)
-      }, typingDelay)
-      return () => clearTimeout(timeout)
-    } else {
-      setIsWarningFresh(true)
-    }
-  }, [warning])
-
   const handleKeyPress: KeyboardEventHandler<HTMLInputElement> = useCallback(
     event => {
       if (event.key === 'Enter') {
@@ -72,106 +32,25 @@ export const TableSearchBar: FC<TableSearchBarProps> = ({
     [onEnter],
   )
 
-  const startAdornment = (
-    <InputAdornment
-      position="start"
-      disablePointerEvents // Pass clicks through, so it focuses the input
-    >
-      <SearchIcon sx={{ color: COLORS.grayDark, ml: -3 }} />
-    </InputAdornment>
-  )
-
-  const onClearValue = () => onChange('')
-
-  const endAdornment = (
-    <InputAdornment position="end">
-      {value ? (
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={onClearValue}
-          className="hover:bg-black/[0.04] rounded-full -my-2 -ml-0.5"
-        >
-          <HighlightOffIcon />
-        </Button>
-      ) : (
-        <span style={{ width: '38px' }} />
-      )}
-    </InputAdornment>
-  )
-
-  const helperText = isWarningFresh ? undefined : (
-    <Typography
-      component="span"
-      sx={{
-        display: 'inline-flex',
-        color: COLORS.warningColor,
-        fontSize: 12,
-        lineHeight: 2,
-        alignItems: 'center',
-        verticalAlign: 'middle',
-        mt: 3,
-        mb: 4,
-        width: fullWidth ? '100%' : isTablet ? '160px' : undefined,
-      }}
-    >
-      <WarningIcon sx={{ mr: 3 }} />
-      {warning}
-    </Typography>
-  )
-
   return (
-    <TextField
-      sx={{
-        backgroundColor: COLORS.white,
-        '&:focus-within': {
-          boxShadow: '3px 3px 3px 3px rgb(0, 0, 98, 0.125) !important',
-        },
-        [`.${inputBaseClasses.root}`]: {
-          border: '1px solid',
-          borderColor: COLORS.inactiveStroke,
-        },
-        ...(helperText
-          ? {
-              border: '1px solid',
-              borderColor: COLORS.inactiveStroke,
-              marginBottom: isTablet ? '-99px' : '-50px',
-            }
-          : {}),
-        zIndex: 10,
-        ...(fullWidth ? { width: '100%' } : {}),
-      }}
-      variant={'outlined'}
-      value={value}
-      onChange={e => onChange(e.target.value)}
+    <SearchInput
+      className={className}
+      autoFocus={autoFocus}
+      hint={warning}
+      onChange={onChange}
       onKeyDown={handleKeyPress}
-      InputProps={{
-        inputProps: {
-          sx: {
-            p: 2,
-            width: fullWidth ? '100%' : width,
-            margin: 2,
-            marginLeft: 0,
-            paddingLeft: 0,
-            fontSize: '14px',
-          },
-          autoFocus,
-        },
-        startAdornment,
-        endAdornment,
-      }}
       placeholder={placeholder}
-      helperText={helperText}
+      value={value}
     />
   )
 }
 
 export const NoMatchingDataMaybeClearFilters: FC<{ clearFilters: () => void }> = ({ clearFilters }) => {
   const { t } = useTranslation()
   const clearButton = (
-    <MuiButton variant={'text'} onClick={() => clearFilters()}>
+    <Button size="sm" variant="link" onClick={() => clearFilters()}>
       {t('tableSearch.clearFilters')}
-    </MuiButton>
+    </Button>
   )
   return <CardEmptyState label={t('tableSearch.noMatchingResults')} action={clearButton} />
 }

src/app/pages/ProposalDetailsPage/ProposalVotesCard.tsx

@@ -17,7 +17,6 @@ import Box from '@mui/material/Box'
 import { NoMatchingDataMaybeClearFilters, TableSearchBar } from '../../components/Search/TableSearchBar'
 import { CardEmptyState } from '../../components/CardEmptyState'
 import { WithHighlightPattern } from '../../components/PatternHighlightingContext'
-import { useScreenSize } from '../../hooks/useScreensize'
 
 type ProposalVotesProps = {
   isLoading: boolean
@@ -120,7 +119,6 @@ export const ProposalVotesView: FC = () => {
 
 export const ProposalVotesCard: FC = () => {
   const { t } = useTranslation()
-  const { isTablet } = useScreenSize()
 
   const { wantedType, setWantedType, wantedNameInput, setWantedNameInput, nameError } = useVoteFiltering()
 
@@ -138,8 +136,6 @@ export const ProposalVotesCard: FC = () => {
             onChange={setWantedNameInput}
             placeholder={t('networkProposal.searchForVoter')}
             warning={nameError}
-            size={'small'}
-            fullWidth={isTablet}
           />
         </div>
       </div>

src/app/pages/RoflAppsPage/index.tsx

@@ -83,7 +83,6 @@ export const RoflAppsPage: FC = () => {
       onChange={setWantedNameInput}
       placeholder={t('rofl.searchByNameOrKeyword')}
       warning={nameError}
-      fullWidth={isMobile}
       autoFocus={!isMobile}
       onEnter={jumpToSingleResult}
     />