feat: created the search component

style: added spec styles

fix: fixed font color on search input

style: added box-shadow to the search component

feat: added local search functionality to the search component

feat: integrated search component into the transactions page

feat: allow multiple filter selection on the search component

fix: let the user select only one filter for each type

feat: added chips for the selected filters on the transactions page

feat: added the remove function on the filter chips

style: styled items according to spec

refactor: simplified search component (moved logic to the outside)

feat: added transaction filters to the gql query

feat: added a 'clear all filters' button

feat: added a filters query

feat: added a gql query for the transaction filters

fix: fixed the transactions gql query so it haves the same options as
the transaction filters

feat: added a 'loading' feature to the search box (shown while loading
the filters)

fix: fetch transactions and filters separately in the transactions page

fix: style export

fix: packages

fix: transaction conflicts

new-lamassu-admin/src/components/SearchBox.js

@@ -0,0 +1,91 @@
+import InputBase from '@material-ui/core/InputBase'
+import Paper from '@material-ui/core/Paper'
+import { makeStyles } from '@material-ui/core/styles'
+import MAutocomplete from '@material-ui/lab/Autocomplete'
+import classnames from 'classnames'
+import React, { memo, useState, useEffect } from 'react'
+
+import { P } from 'src/components/typography'
+import { ReactComponent as SearchIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'
+
+import styles from './SearchBox.styles'
+
+const useStyles = makeStyles(styles)
+
+const SearchBox = memo(
+  ({
+    loading = false,
+    filters = [],
+    options = [],
+    inputPlaceholder = '',
+    size,
+    onChange,
+    ...props
+  }) => {
+    const classes = useStyles({ size })
+
+    const [popupOpen, setPopupOpen] = useState(false)
+
+    const inputClasses = {
+      [classes.input]: true,
+      [classes.inputWithPopup]: popupOpen
+    }
+
+    const innerOnChange = filters => onChange(filters)
+
+    // eslint-disable-next-line
+    useEffect(() => innerOnChange(filters), [filters])
+
+    return (
+      <MAutocomplete
+        loading={loading}
+        classes={{ option: classes.autocomplete }}
+        value={filters}
+        options={options}
+        getOptionLabel={it => it.value}
+        renderOption={it => (
+          <div className={classes.item}>
+            <P className={classes.itemLabel}>{it.value}</P>
+            <P className={classes.itemType}>{it.type}</P>
+          </div>
+        )}
+        autoHighlight
+        disableClearable
+        clearOnEscape
+        multiple
+        filterSelectedOptions
+        getOptionSelected={(option, value) => option.type === value.type}
+        PaperComponent={({ children }) => (
+          <Paper elevation={0} className={classes.popup}>
+            <div className={classes.separator} />
+            {children}
+          </Paper>
+        )}
+        renderInput={params => {
+          return (
+            <InputBase
+              ref={params.InputProps.ref}
+              {...params}
+              className={classnames(inputClasses)}
+              startAdornment={<SearchIcon className={classes.iconButton} />}
+              placeholder={inputPlaceholder}
+              inputProps={{
+                className: classes.bold,
+                classes: {
+                  root: classes.size
+                },
+                ...params.inputProps
+              }}
+            />
+          )
+        }}
+        onOpen={() => setPopupOpen(true)}
+        onClose={() => setPopupOpen(false)}
+        onChange={(_, filters) => innerOnChange(filters)}
+        {...props}
+      />
+    )
+  }
+)
+
+export default SearchBox