feat(docsearch): add DocSearch for Docusaurus (#39)

Co-authored-by: eunjae-lee <[email protected]>
Co-authored-by: Shipow <[email protected]>

.eslintrc.js

@@ -28,6 +28,7 @@ module.exports = {
     '@typescript-eslint/camelcase': ['error', { allow: ['__autocomplete_id'] }],
     // Useful to call functions like `nodeItem?.scrollIntoView()`.
     'no-unused-expressions': 0,
+    complexity: 0,
   },
   overrides: [
     {

package.json

@@ -2,8 +2,7 @@
   "name": "@francoischalifour/autocomplete-monorepo",
   "private": true,
   "workspaces": [
-    "packages/*",
-    "website"
+    "packages/*"
   ],
   "scripts": {
     "prepare": "yarn run build",
@@ -13,12 +12,12 @@
     "lint": "eslint --ext .js,.ts,.tsx .",
     "storybook": "start-storybook --quiet --port 6006 --ci --static-dir .storybook/static",
     "storybook:build": "build-storybook --quiet --output-dir packages/website/build/stories --static-dir .storybook/static",
-    "build:clean": "lerna run build:clean --scope @francoischalifour/autocomplete-*",
-    "build:umd": "lerna run build:umd --scope @francoischalifour/autocomplete-*",
-    "build:esm": "lerna run build:esm --scope @francoischalifour/autocomplete-*",
-    "build:types": "lerna run build:types --scope @francoischalifour/autocomplete-*",
-    "build": "lerna run build --scope @francoischalifour/autocomplete-*",
-    "watch": "lerna run watch --parallel --scope @francoischalifour/autocomplete-*",
+    "build:clean": "lerna run build:clean --scope @francoischalifour/autocomplete-* --scope docsearch-react",
+    "build:umd": "lerna run build:umd --scope @francoischalifour/autocomplete-* --scope docsearch-react",
+    "build:esm": "lerna run build:esm --scope @francoischalifour/autocomplete-* --scope docsearch-react",
+    "build:types": "lerna run build:types --scope @francoischalifour/autocomplete-* --scope docsearch-react",
+    "build": "lerna run build --scope @francoischalifour/autocomplete-* --scope docsearch-react",
+    "watch": "lerna run watch --parallel --scope @francoischalifour/autocomplete-* --scope docsearch-react",
     "dev": "yarn build && yarn watch-and-storybook",
     "watch-and-storybook": "concurrently \"yarn run watch\" \"yarn run storybook\"",
     "type-check": "tsc --noEmit",

packages/autocomplete-core/src/onKeyDown.ts

@@ -37,7 +37,12 @@ export function onKeyDown<TItem>({
     );
     nodeItem?.scrollIntoView(false);
 
-    if (store.getState().highlightedIndex !== null) {
+    if (
+      store.getState().highlightedIndex !== null &&
+      store
+        .getState()
+        .suggestions.some(suggestion => suggestion.items.length > 0)
+    ) {
       const { item, itemValue, itemUrl, source } = getHighlightedItem({
         state: store.getState(),
       });
@@ -94,7 +99,12 @@ export function onKeyDown<TItem>({
   } else if (event.key === 'Enter') {
     // No item is selected, so we let the browser handle the native `onSubmit`
     // form event.
-    if (store.getState().highlightedIndex === null) {
+    if (
+      store.getState().highlightedIndex === null ||
+      store
+        .getState()
+        .suggestions.every(suggestion => suggestion.items.length === 0)
+    ) {
       return;
     }
 

packages/autocomplete-core/src/propGetters.ts

@@ -39,7 +39,10 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
       // This ensures a working experience on mobile because we blur the input
       // on touch devices when the user starts scrolling (`touchmove`).
       onTouchStart(event) {
-        if (store.getState().isOpen === false) {
+        if (
+          store.getState().isOpen === false ||
+          event.target === getterProps.inputElement
+        ) {
           return;
         }
 
@@ -65,10 +68,12 @@ export function getPropGetters<TItem, TEvent, TMouseEvent, TKeyboardEvent>({
       // mimic the native platform behavior where the input is blurred to
       // hide the virtual keyboard. This gives more vertical space to
       // discover all the suggestions showing up in the dropdown.
-      onTouchMove() {
+      onTouchMove(event: TouchEvent) {
         if (
           store.getState().isOpen === false ||
-          getterProps.inputElement !== props.environment.document.activeElement
+          getterProps.inputElement !==
+            props.environment.document.activeElement ||
+          event.target === getterProps.inputElement
         ) {
           return;
         }

packages/docsearch-react/babel.config.js

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-commonjs */
+
+module.exports = api => {
+  const isTest = api.env('test');
+  const modules = isTest ? 'commonjs' : false;
+  const targets = {};
+
+  if (isTest) {
+    targets.node = true;
+  } else {
+    targets.browsers = ['last 2 versions', 'ie >= 9'];
+  }
+
+  return {
+    presets: [
+      '@babel/preset-typescript',
+      [
+        '@babel/preset-env',
+        {
+          modules,
+          targets,
+        },
+      ],
+    ],
+    plugins: [['@babel/plugin-transform-react-jsx']],
+  };
+};

packages/docsearch-react/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "docsearch-react",
+  "version": "1.0.0-alpha.10",
+  "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete.js",
+  "repository": "algolia/autocomplete.js",
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist/"
+  ],
+  "source": "src/index.ts",
+  "types": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
+  "main": "dist/umd/index.js",
+  "umd:main": "dist/umd/index.js",
+  "unpkg": "dist/umd/index.js",
+  "jsdelivr": "dist/umd/index.js",
+  "scripts": {
+    "build": "yarn build:clean && yarn build:umd && yarn build:esm && yarn build:css",
+    "": "// TODO: have a proper build:css, probably including autoprefixer?",
+    "build:css": "cp src/style.css dist/esm/ && cp src/style.css dist/umd/",
+    "build:css:watch": "chokidar src/style.css --command \"yarn build:css\"",
+    "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm",
+    "build:esm:watch": "yarn build:esm --watch",
+    "build:umd": "rollup --config",
+    "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",
+    "build:types:watch": "chokidar \"**/*.ts\" \"**/*.tsx\" --command \"yarn build:types\" --ignore \"dist\"",
+    "build:clean": "rm -rf ./dist",
+    "watch": "concurrently \"yarn build:esm:watch\" \"yarn build:types:watch\" \"yarn build:css:watch\""
+  },
+  "dependencies": {
+    "@francoischalifour/autocomplete-core": "^1.0.0-alpha.10",
+    "@francoischalifour/autocomplete-preset-algolia": "^1.0.0-alpha.10",
+    "algoliasearch": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0"
+  }
+}

packages/docsearch-react/rollup.config.js

@@ -0,0 +1,20 @@
+import json from '@rollup/plugin-json';
+
+import { name } from './package.json';
+import { sharedPlugins } from '../autocomplete-core/rollup.config';
+
+export default {
+  input: 'src/index.ts',
+  external: ['react', 'react-dom'],
+  output: {
+    file: 'dist/umd/index.js',
+    format: 'umd',
+    sourcemap: true,
+    name,
+    globals: {
+      react: 'React',
+      'react-dom': 'ReactDOM',
+    },
+  },
+  plugins: [json(), ...sharedPlugins],
+};