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 <[email protected]>
Co-authored-by: François Chalifour <[email protected]>
Co-authored-by: Dhaya <[email protected]>

Author: 4 people

.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:

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) |

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"

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 [email protected]: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.
+

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,
+                },
+              },
+            ],
+          });
+        },
+      },
+    ];
+  },
+});

examples/redirect-url/capture.png

@@ -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;

examples/redirect-url/env.ts

@@ -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>

examples/redirect-url/favicon.png

@@ -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"
+  ]
+}