WIP: Add autocompletion

components/search/forms/simple.jsx

@@ -1,35 +1,89 @@
-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.searchBox}
+      clearButtonClassName={styles.clearButton}
+      selectMenuClassName={styles.selectMenu}
+      changeOnBlur={false}
+      {...passProps}
+    >
+      {suggestions.map(el => (
+        <Select.Option
+          key={el.id}
+          id={el.id}
+          value={el.value}
+          icon={el.icon}
+          className={styles.option}
+        >
+          {el.value}
+        </Select.Option>
+      ))}
+      {value !== '' && (
+        <Select.Option
+          key={6}
+          id={6}
+          value={value}
+          icon="#magnify"
+          className={`${styles.option} ${styles.lastOption}`}
+        >
+          {`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,64 @@
+.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(--gray-700);
+
+  border-bottom: 1px solid transparent;
+}
+
+.search-box:focus-within {
+  --form-control-color: var(--gray-700);
+  --form-control-padding-x: 0rem;
+}
+
+.search-box:focus-within input,
+.search-box:focus-within .option span:nth-child(2){
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.search-box:focus-within,
+.search-box .option {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.search-box:focus-within div:nth-child(2) {
+  border-bottom: 1px solid var(--primary);
+}
+
+.search-box:focus-within .clear-button{
+  margin-right: -0.5rem;
+  margin-left: -0.5rem;
+}
+
+.search-box:focus-within div:nth-child(2) span,
+.search-box:focus-within .option 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 .select-menu {
+  color: var(--gray-500)
+}
+
+.search-box:focus-within .last-option {
+  position: relative;
+}
+.search-box:focus-within .last-option::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

next.config.js

@@ -18,33 +18,38 @@ const nextConfig = {
     // This is the array of webpack rules that:
     // - is inside a 'oneOf' block
     // - contains a rule that matches 'file.css'
-    const styleRules = (
-      rules.find(
-        m => m.oneOf && m.oneOf.find(({ test: reg }) => reg.test('file.scss'))
-      ) || {}
-    ).oneOf
-    if (!styleRules) return config
-    // Find all the webpack rules that handle CSS modules
-    // Look for rules that match '.module.css'
-    // but aren't being used to generate
-    // error messages.
-    const cssModuleRules = [
-      styleRules.find(
-        ({ test: reg, use }) =>
-          reg.test('file.module.scss') && use.loader !== 'error-loader'
-      ),
-    ].filter(n => n) // remove 'undefined' values
-    // Add the 'localsConvention' config option to the CSS loader config
-    // in each of these rules.
-    cssModuleRules.forEach(cmr => {
-      // Find the item inside the 'use' list that defines css-loader
-      const cssLoaderConfig = cmr.use.find(({ loader }) =>
-        loader.includes('css-loader')
-      )
-      if (cssLoaderConfig && cssLoaderConfig.options) {
-        // Patch it with the new config
-        cssLoaderConfig.options.localsConvention = 'camelCase'
-      }
+    const suffixes = ['css', 'scss']
+    suffixes.forEach(suffix => {
+      const styleRules = (
+        rules.find(
+          m =>
+            m.oneOf &&
+            m.oneOf.find(({ test: reg }) => reg.test(`file.${suffix}`))
+        ) || {}
+      ).oneOf
+      if (!styleRules) return
+      // Find all the webpack rules that handle CSS modules
+      // Look for rules that match '.module.css'
+      // but aren't being used to generate
+      // error messages.
+      const cssModuleRules = [
+        styleRules.find(
+          ({ test: reg, use }) =>
+            reg.test(`file.module.${suffix}`) && use.loader !== 'error-loader'
+        ),
+      ].filter(n => n) // remove 'undefined' values
+      // Add the 'localsConvention' config option to the CSS loader config
+      // in each of these rules.
+      cssModuleRules.forEach(cmr => {
+        // Find the item inside the 'use' list that defines css-loader
+        const cssLoaderConfig = cmr.use.find(({ loader }) =>
+          loader.includes('css-loader')
+        )
+        if (cssLoaderConfig && cssLoaderConfig.options) {
+          // Patch it with the new config
+          cssLoaderConfig.options.localsConvention = 'camelCase'
+        }
+      })
     })
 
     Object.assign(config.resolve.alias, {

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>