From dfee0b731db4f1fc7c8e956fb1b097c907a75c25 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        | 89 ++++++++++++++++-------
 components/search/forms/styles.module.css | 74 +++++++++++++++++++
 design.config.js                          | 26 +++++++
 package.json                              |  2 +-
 pages/index.jsx                           |  4 +-
 5 files changed, 168 insertions(+), 27 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..37d7d2b9f 100644
--- a/components/search/forms/simple.jsx
+++ b/components/search/forms/simple.jsx
@@ -1,24 +1,60 @@
-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,
@@ -26,10 +62,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..f0fbaf183
--- /dev/null
+++ b/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);
+}
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/package.json b/package.json
index 0726b0a70..6e04cb204 100644
--- a/package.json
+++ b/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"
   }
diff --git a/pages/index.jsx b/pages/index.jsx
index 5106ebeac..6464b4444 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>