WIP: Add autocompletion

components/search/forms/simple.jsx

@@ -1,35 +1,74 @@
-import React from 'react'
-import { Button, InputGroup, InputGroupAddon, Input } from 'reactstrap'
+import React, { useRef } from 'react'
+import { Select } from '@oacore/design'
 
-const SearchField = ({
-  size = '',
-  id = 'search-form-field',
-  label = 'Search in CORE',
-  ...fieldProps
-}) => (
-  <>
-    <label className="sr-only" htmlFor={id}>
-      {label}
-    </label>
-    <InputGroup size={size}>
-      <Input type="search" id={id} {...fieldProps} />
-      <InputGroupAddon addonType="append">
-        <Button color="primary">Search</Button>
-      </InputGroupAddon>
-    </InputGroup>
-  </>
-)
+import styles from './styles.module.css'
+
+const options = [
+  { id: 1, icon: '#magnify', value: 'Option A' },
+  { id: 2, icon: '#magnify', value: 'Option B' },
+  { id: 3, icon: '#magnify', value: 'Option C' },
+  { id: 4, icon: '#magnify', value: 'Option D' },
+  { id: 5, icon: '#magnify', value: 'Option E' },
+]
+
+const SearchAutocompletion = ({ formRef, ...passProps }) => {
+  const [suggestions, setSuggestions] = React.useState(options)
+  const [value, setValue] = React.useState('jojo')
+
+  const handleOnChange = data => {
+    if (data.value === '') return
+    // formRef.current.submit()
+  }
+
+  const handleOnInput = data => {
+    // if id doesn't exists it means user type own text
+    // and didn't use suggestion
+    if (!data.id) {
+      setSuggestions(
+        options.slice(0, Math.max(0, options.length - data.value.length))
+      )
+    }
+
+    setValue(data.value)
+  }
+
+  return (
+    <Select
+      id="search-select"
+      value={value}
+      onChange={handleOnChange}
+      onInput={handleOnInput}
+      prependIcon="#magnify"
+      className={styles['search-box']}
+      {...passProps}
+    >
+      {suggestions.map(el => (
+        <Select.Option key={el.id} id={el.id} value={el.value} icon={el.icon}>
+          {el.value}
+        </Select.Option>
+      ))}
+      {
+        <Select.Option key={6} id={6} value={value} icon="#magnify">
+          {`All results for "${value}"`}
+        </Select.Option>
+      }
+    </Select>
+  )
+}
 
 const SearchForm = ({
   action,
   method,
   onSubmit,
   id = 'search-form',
   ...fieldProps
-}) => (
-  <form id={id} action={action} method={method} onSubmit={onSubmit}>
-    <SearchField id={`${id}-field`} size="lg" {...fieldProps} />
-  </form>
-)
+}) => {
+  const ref = useRef(null)
+  return (
+    <form ref={ref} id={id} action={action} method={method} onSubmit={onSubmit}>
+      <SearchAutocompletion id={`${id}-field`} {...fieldProps} formRef={ref} />
+    </form>
+  )
+}
 
 export default SearchForm

components/search/forms/styles.module.css

@@ -0,0 +1,74 @@
+.search-box {
+  --form-control-corner-radius: 0.3rem;
+  --form-control-color: var(--gray-500);
+  --form-label-color: var(--gray-500);
+  --select-option-color: var(--gray-700);
+  --select-option-icon-color: var(--black);
+
+  border-bottom: 1px solid transparent;
+}
+
+.search-box:focus-within {
+  --form-control-color: var(--primary);
+  --form-control-padding-x: 0rem;
+}
+
+.search-box:focus-within input,
+.search-box:focus-within ul li span:nth-child(2){
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.search-box:focus-within,
+.search-box ul > * {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.search-box:focus-within div:nth-child(2) {
+  border-bottom: 1px solid var(--primary);
+}
+
+.search-box div:nth-child(2) span:nth-child(2) {
+  padding: 0;
+}
+
+.search-box div:nth-child(2) span button {
+  margin: 0.25rem;
+  padding: calc(var(--form-control-padding-y) - var(--form-control-border-width) - 0.25rem) calc(0.75rem - var(--form-control-border-width) - 0.25rem);
+  border-radius: 2rem;
+}
+
+.search-box:focus-within div:nth-child(2) span button {
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.search-box:focus-within div:nth-child(2) span,
+.search-box:focus-within ul li span:first-child{
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+}
+
+.search-box:focus-within {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.25);
+}
+
+.search-box:focus-within div:nth-child(2) > * {
+  border-color: transparent;
+}
+
+.search-box:focus-within ul {
+  color: var(--gray-500)
+}
+
+.search-box:focus-within ul > li:last-child {
+  position: relative;
+}
+.search-box:focus-within ul > li:last-child::after {
+  content: '';
+  left: 1rem;
+  right: 1rem;
+  position: absolute;
+  border-top: 1px solid var(--gray-300);
+}

design.config.js

@@ -0,0 +1,26 @@
+const path = require('path')
+
+const icons = ['magnify']
+
+const iconsRoot = path.join(
+  path.dirname(require.resolve('@mdi/svg/package.json')),
+  './svg'
+)
+
+const config = {
+  icons: {
+    path: iconsRoot,
+    files: icons,
+  },
+
+  output: {
+    path: path.join(__dirname, 'public/design'),
+    publicPath: '/design',
+    icons: {
+      files: 'icons',
+      sprite: 'icons.svg',
+    },
+  },
+}
+
+module.exports = config

package.json

@@ -72,7 +72,7 @@
     "test-staging": "blc https://${CORE_STAGING_AREA}core.ac.uk -ro --exclude='/browse' --exclude='/search' --exclude='/public'",
     "test": "npm run test-dev",
     "dev": "next",
-    "build": "next build",
+    "build": "node ./node_modules/.bin/design build icons && next build",
     "export": "next build && next export",
     "start": "next start"
   }

pages/index.jsx

@@ -85,7 +85,9 @@ const IndexPage = () => (
         <SearchForm
           action="/search"
           name="q"
-          placeholder={patchStats(page.searchPlaceholder, page.statistics)}
+          label={patchStats(page.searchPlaceholder, page.statistics)}
+          placeholder="e.g. article title or author name"
+          variant="pure"
         />
         <SearchIntro>
           <Markdown>{page.covid19Notice}</Markdown>