feat: add redirect url plugin (#1082)

The new Redirect URL plugin is used in conjunction with the dashboard / merchandising studio rule consequence "redirect to a url". It adds an item visually when a redirect matches, and a handler for onSubmit + onSelect to navigate to that URL. Co-authored-by: Haroen Viaene <hello@haroen.me> Co-authored-by: François Chalifour <francoischalifour@users.noreply.github.com> Co-authored-by: Dhaya <154633+dhayab@users.noreply.github.com>
algolia · Feb 9, 2023 · a4f112d · a4f112d
1 parent 8048442
commit a4f112d
Show file tree

Hide file tree

Showing 45 changed files with 1,403 additions and 39 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -29,6 +29,7 @@ aliases:
       mkdir -p packages/autocomplete-preset-algolia/dist
       mkdir -p packages/autocomplete-plugin-algolia-insights/dist
       mkdir -p packages/autocomplete-plugin-recent-searches/dist
+      mkdir -p packages/autocomplete-plugin-redirect-url/dist
       mkdir -p packages/autocomplete-plugin-query-suggestions/dist
       mkdir -p packages/autocomplete-plugin-tags/dist
 
@@ -38,6 +39,7 @@ aliases:
       cp -R /tmp/workspace/packages/autocomplete-preset-algolia/dist packages/autocomplete-preset-algolia
       cp -R /tmp/workspace/packages/autocomplete-plugin-algolia-insights/dist packages/autocomplete-plugin-algolia-insights
       cp -R /tmp/workspace/packages/autocomplete-plugin-recent-searches/dist packages/autocomplete-plugin-recent-searches
+      cp -R /tmp/workspace/packages/autocomplete-plugin-redirect-url/dist packages/autocomplete-plugin-redirect-url
       cp -R /tmp/workspace/packages/autocomplete-plugin-query-suggestions/dist packages/autocomplete-plugin-query-suggestions
       cp -R /tmp/workspace/packages/autocomplete-plugin-tags/dist packages/autocomplete-plugin-tags
 
@@ -83,6 +85,7 @@ jobs:
             mkdir -p /tmp/workspace/packages/autocomplete-preset-algolia/dist
             mkdir -p /tmp/workspace/packages/autocomplete-plugin-algolia-insights/dist
             mkdir -p /tmp/workspace/packages/autocomplete-plugin-recent-searches/dist
+            mkdir -p /tmp/workspace/packages/autocomplete-plugin-redirect-url/dist
             mkdir -p /tmp/workspace/packages/autocomplete-plugin-query-suggestions/dist
             mkdir -p /tmp/workspace/packages/autocomplete-plugin-tags/dist
 
@@ -92,6 +95,7 @@ jobs:
             cp -R packages/autocomplete-preset-algolia/dist /tmp/workspace/packages/autocomplete-preset-algolia
             cp -R packages/autocomplete-plugin-algolia-insights/dist /tmp/workspace/packages/autocomplete-plugin-algolia-insights
             cp -R packages/autocomplete-plugin-recent-searches/dist /tmp/workspace/packages/autocomplete-plugin-recent-searches
+            cp -R packages/autocomplete-plugin-redirect-url/dist /tmp/workspace/packages/autocomplete-plugin-redirect-url
             cp -R packages/autocomplete-plugin-query-suggestions/dist /tmp/workspace/packages/autocomplete-plugin-query-suggestions
             cp -R packages/autocomplete-plugin-tags/dist /tmp/workspace/packages/autocomplete-plugin-tags
       - persist_to_workspace:

diff --git a/README.md b/README.md
@@ -101,6 +101,7 @@ You can find more on the [documentation](https://www.algolia.com/doc/ui-librarie
 | [`autocomplete-plugin-recent-searches`](packages/autocomplete-plugin-recent-searches) | A plugin to add recent searches to Autocomplete | [Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-recent-searches) |
 | [`autocomplete-plugin-query-suggestions`](packages/autocomplete-plugin-query-suggestions) | A plugin to add query suggestions to Autocomplete | [Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-query-suggestions) |
 | [`autocomplete-plugin-algolia-insights`](packages/autocomplete-plugin-algolia-insights) | A plugin to add Algolia Insights to Autocomplete | [Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-algolia-insights) |
+| [`autocomplete-plugin-redirect-url`](packages/autocomplete-plugin-redirect-url) | A plugin to enable redirect URLs | [Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-redirect-url) |
 | [`autocomplete-plugin-tags`](packages/autocomplete-plugin-tags) | A plugin to manage and display a list of tags in Autocomplete | [Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-plugin-tags) |
 | [`autocomplete-preset-algolia`](packages/autocomplete-preset-algolia) | Presets to use Algolia features with Autocomplete | [Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-preset-algolia) |
 | [`autocomplete-theme-classic`](packages/autocomplete-theme-classic) | Classic theme for Autocomplete | [Documentation](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic) |

diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "packages/autocomplete-core/dist/umd/index.production.js",
-      "maxSize": "6.25 kB"
+      "maxSize": "6.5 kB"
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "17.75 kB"
+      "maxSize": "18 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
@@ -16,6 +16,10 @@
       "path": "packages/autocomplete-plugin-algolia-insights/dist/umd/index.production.js",
       "maxSize": "2 kB"
     },
+    {
+      "path": "packages/autocomplete-plugin-redirect-url/dist/umd/index.production.js",
+      "maxSize": "2 kB"
+    },
     {
       "path": "packages/autocomplete-plugin-recent-searches/dist/umd/index.production.js",
       "maxSize": "3 kB"

diff --git a/examples/redirect-url/README.md b/examples/redirect-url/README.md
@@ -0,0 +1,38 @@
+# Autocomplete Redirect URL example
+
+This example helps you quickly bootstrap a basic Autocomplete with redirect functionality enabled.
+
+<p align="center"><img src="capture.png?raw=true" alt="A capture of the Autocomplete redirect URL example" /></p>
+
+## Demo
+
+[Access the demo](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/redirect-url)
+
+## How to run this example locally
+
+### 1. Clone this repository
+
+```sh
+git clone git@github.com:algolia/autocomplete.git
+```
+
+### 2. Install the dependencies and run the server
+
+```sh
+yarn
+yarn workspace @algolia/autocomplete-example-redirect-url start
+```
+
+Alternatively, you may use npm:
+
+```sh
+cd examples/redirect-url
+npm install
+npm start
+```
+
+Open <http://localhost:1234> to see your app.
+
+## Additional resources
+Learn more [how to get started with Autocomplete](https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/getting-started/) in the Algolia documentation.
+
diff --git a/examples/redirect-url/app.tsx b/examples/redirect-url/app.tsx
@@ -0,0 +1,47 @@
+import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js';
+import { createRedirectUrlPlugin } from '@algolia/autocomplete-plugin-redirect-url';
+import algoliasearch from 'algoliasearch/lite';
+
+import '@algolia/autocomplete-theme-classic';
+
+const appId = 'latency';
+const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
+const searchClient = algoliasearch(appId, apiKey);
+
+autocomplete<{ name: string }>({
+  container: '#autocomplete',
+  placeholder: 'Search',
+  openOnFocus: true,
+  plugins: [createRedirectUrlPlugin()],
+  getSources({ query }) {
+    return [
+      {
+        sourceId: 'demo-source',
+        templates: {
+          item(params) {
+            const { item, html } = params;
+            return html`<a class="aa-ItemLink">${item.name}</a>`;
+          },
+        },
+        getItemInputValue({ item }) {
+          return item.name;
+        },
+        getItems() {
+          return getAlgoliaResults({
+            searchClient,
+            queries: [
+              {
+                indexName: 'instant_search',
+                query,
+                params: {
+                  ruleContexts: ['enable-redirect-url'], // note: only needed for this demo data
+                  hitsPerPage: 10,
+                },
+              },
+            ],
+          });
+        },
+      },
+    ];
+  },
+});
diff --git a/examples/redirect-url/capture.png b/examples/redirect-url/capture.png
diff --git a/examples/redirect-url/env.ts b/examples/redirect-url/env.ts
@@ -0,0 +1,10 @@
+import * as preact from 'preact';
+
+// Parcel picks the `source` field of the monorepo packages and thus doesn't
+// apply the Babel config. We therefore need to manually override the constants
+// in the app, as well as the React pragmas.
+// See https://twitter.com/devongovett/status/1134231234605830144
+(global as any).__DEV__ = process.env.NODE_ENV !== 'production';
+(global as any).__TEST__ = false;
+(global as any).h = preact.h;
+(global as any).React = preact;
diff --git a/examples/redirect-url/favicon.png b/examples/redirect-url/favicon.png
diff --git a/examples/redirect-url/index.html b/examples/redirect-url/index.html
@@ -0,0 +1,20 @@
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+  <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
+  <link rel="stylesheet" href="style.css" />
+
+  <title>Redirect URL | Autocomplete</title>
+</head>
+
+<body>
+<div class="container">
+  <div id="autocomplete"></div>
+</div>
+
+<script type="module" src="env.ts"></script>
+<script type="module" src="app.tsx"></script>
+</body>
+</html>
diff --git a/examples/redirect-url/package.json b/examples/redirect-url/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "@algolia/autocomplete-example-redirect-url",
+  "description": "Autocomplete example for Redirect URL plugin",
+  "version": "1.7.4",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "parcel build index.html",
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "1.7.4",
+    "@algolia/autocomplete-plugin-redirect-url": "1.7.4",
+    "@algolia/autocomplete-theme-classic": "1.7.4",
+    "algoliasearch": "4.14.3",
+    "preact": "10.5.13"
+  },
+  "devDependencies": {
+    "parcel": "2.8.2"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "javascript"
+  ]
+}
diff --git a/examples/redirect-url/style.css b/examples/redirect-url/style.css
@@ -0,0 +1,20 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  background-color: rgb(244, 244, 249);
+  color: rgb(65, 65, 65);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  padding: 1rem;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 640px;
+  width: 100%;
+}
diff --git a/packages/autocomplete-core/src/__tests__/createAutocomplete.test.ts b/packages/autocomplete-core/src/__tests__/createAutocomplete.test.ts
@@ -13,6 +13,7 @@ describe('createAutocomplete', () => {
       getListProps: expect.any(Function),
       getPanelProps: expect.any(Function),
       getRootProps: expect.any(Function),
+      navigator: expect.any(Object),
       refresh: expect.any(Function),
       setCollections: expect.any(Function),
       setContext: expect.any(Function),
@@ -30,7 +31,9 @@ describe('createAutocomplete', () => {
     expect(plugin.subscribe).toHaveBeenCalledTimes(1);
     expect(plugin.subscribe).toHaveBeenLastCalledWith({
       onActive: expect.any(Function),
+      onResolve: expect.any(Function),
       onSelect: expect.any(Function),
+      navigator: expect.any(Object),
       refresh: autocomplete.refresh,
       setCollections: autocomplete.setCollections,
       setContext: autocomplete.setContext,