From af3bc4d303ab8926bdbdf3dc3ba0459c8b13ddfe Mon Sep 17 00:00:00 2001
From: Jozef Harag <32jojo32@gmail.com>
Date: Tue, 25 Aug 2020 14:24:55 +0200
Subject: [PATCH] WIP: Add autocompletion

---
 components/search/forms/simple.jsx        | 84 ++++++++++++++++-------
 components/search/forms/styles.module.css | 17 +++++
 design.config.js                          | 26 +++++++
 pages/index.jsx                           |  4 +-
 4 files changed, 105 insertions(+), 26 deletions(-)
 create mode 100644 components/search/forms/styles.module.css
 create mode 100644 design.config.js

diff --git a/components/search/forms/simple.jsx b/components/search/forms/simple.jsx
index 6088018d5..3415c5e16 100644
--- a/components/search/forms/simple.jsx
+++ b/components/search/forms/simple.jsx
@@ -1,24 +1,55 @@
-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('')
+
+  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>
+  )
+}
 
 const SearchForm = ({
   action,
@@ -26,10 +57,13 @@ const SearchForm = ({
   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
diff --git a/components/search/forms/styles.module.css b/components/search/forms/styles.module.css
new file mode 100644
index 000000000..401cab1fe
--- /dev/null
+++ b/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;
+}
diff --git a/design.config.js b/design.config.js
new file mode 100644
index 000000000..e83b2602a
--- /dev/null
+++ b/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
diff --git a/pages/index.jsx b/pages/index.jsx
index 74b287c76..7737addf5 100644
--- a/pages/index.jsx
+++ b/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>