Add autocomplete search

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, {