WIP: Add autocompletion

Author: Joozty

components/search/forms/simple.jsx

@@ -1,24 +1,56 @@
 import React from 'react'
-import { Button, InputGroup, InputGroupAddon, Input } from 'reactstrap'
+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 SelectExample = ({ ...passProps }) => {
+  const [suggestions, setSuggestions] = React.useState(options)
+  const [value, setValue] = React.useState('')
+
+  const handleOnChange = data => {
+    // eslint-disable-next-line no-console
+    console.log(data)
+    // trigger search here
+  }
+
+  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>
+  )
+}
 
 const SearchForm = ({
   action,
@@ -28,7 +60,7 @@ const SearchForm = ({
   ...fieldProps
 }) => (
   <form id={id} action={action} method={method} onSubmit={onSubmit}>
-    <SearchField id={`${id}-field`} size="lg" {...fieldProps} />
+    <SelectExample id={`${id}-field`} {...fieldProps} />
   </form>
 )
 

components/search/forms/styles.module.css

@@ -0,0 +1,17 @@
+.search-box {
+  --form-control-corner-radius: 0.3rem;
+  --form-control-color: var(--gray-500);
+  --form-label-color: var(--gray-500);
+}
+
+.search-box:focus-within {
+  --form-control-color: var(--primary);
+}
+
+.search-box:focus-within div:nth-child(2){
+  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;
+}

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

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>