feat(layout): introduce Layout API

.circleci/config.yml

@@ -30,6 +30,7 @@ aliases:
       mkdir -p packages/autocomplete-plugin-algolia-insights/dist
       mkdir -p packages/autocomplete-plugin-recent-searches/dist
       mkdir -p packages/autocomplete-plugin-query-suggestions/dist
+      mkdir -p packages/autocomplete-layout-classic/dist
 
       cp -R /tmp/workspace/packages/autocomplete-shared/dist packages/autocomplete-shared
       cp -R /tmp/workspace/packages/autocomplete-core/dist packages/autocomplete-core
@@ -38,6 +39,7 @@ aliases:
       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-query-suggestions/dist packages/autocomplete-plugin-query-suggestions
+      cp -R /tmp/workspace/packages/autocomplete-layout-classic/dist packages/autocomplete-layout-classic
 
 defaults: &defaults
   working_directory: ~/autocomplete
@@ -82,6 +84,7 @@ jobs:
             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-query-suggestions/dist
+            mkdir -p /tmp/workspace/packages/autocomplete-layout-classic/dist
 
             cp -R packages/autocomplete-shared/dist /tmp/workspace/packages/autocomplete-shared
             cp -R packages/autocomplete-core/dist /tmp/workspace/packages/autocomplete-core
@@ -90,6 +93,7 @@ jobs:
             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-query-suggestions/dist /tmp/workspace/packages/autocomplete-plugin-query-suggestions
+            cp -R packages/autocomplete-layout-classic/dist /tmp/workspace/packages/autocomplete-layout-classic
       - persist_to_workspace:
           root: *workspace_root
           paths:

.codesandbox/ci.json

@@ -4,6 +4,7 @@
   "^": "buildCommand is false because `yarn prepare` is going to build packages anyway.",
   "sandboxes": [
     "/examples/github-repositories-custom-plugin",
+    "/examples/layouts",
     "/examples/playground",
     "/examples/query-suggestions-with-categories",
     "/examples/query-suggestions-with-hits",

bundlesize.config.json

@@ -24,6 +24,10 @@
       "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",
       "maxSize": "4 kB"
     },
+    {
+      "path": "packages/autocomplete-layout-classic/dist/umd/index.production.js",
+      "maxSize": "4.25 kB"
+    },
     {
       "path": "packages/autocomplete-theme-classic/dist/theme.css",
       "maxSize": "4.25 kB"

examples/layouts/app.tsx

@@ -0,0 +1,58 @@
+/** @jsx h */
+import { autocomplete } from '@algolia/autocomplete-js';
+import {
+  NavigationCommands,
+  SearchByAlgolia,
+} from '@algolia/autocomplete-layout-classic';
+import { createQuerySuggestionsPlugin } from '@algolia/autocomplete-plugin-query-suggestions';
+import algoliasearch from 'algoliasearch/lite';
+import { h, render } from 'preact';
+
+import '@algolia/autocomplete-theme-classic';
+
+const appId = 'latency';
+const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
+const searchClient = algoliasearch(appId, apiKey);
+
+const querySuggestionsPlugin = createQuerySuggestionsPlugin({
+  searchClient,
+  indexName: 'instant_search_demo_query_suggestions',
+  getSearchParams() {
+    return {
+      hitsPerPage: 10,
+    };
+  },
+});
+
+autocomplete({
+  container: '#autocomplete',
+  placeholder: 'Search',
+  openOnFocus: true,
+  plugins: [querySuggestionsPlugin],
+  components: {
+    NavigationCommands,
+    SearchByAlgolia,
+  },
+  render({ sections, Fragment, components }, root) {
+    render(
+      <Fragment>
+        <div className="aa-PanelLayout aa-Panel--scrollable">{sections}</div>
+        <footer className="aa-PanelFooter">
+          <components.NavigationCommands
+            translations={{
+              toClose: 'pour fermer',
+              toNavigate: 'pour naviguer',
+              toSelect: 'pour sélectionner',
+            }}
+          />
+          <components.SearchByAlgolia
+            translations={{
+              searchBy: 'Recherche par',
+            }}
+          />
+        </footer>
+      </Fragment>,
+      root
+    );
+  },
+});

examples/layouts/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 to replace our `__DEV__` global expression.
+// We therefore need to manually override it in the example app.
+// 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/layouts/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>Layouts Examples</title>
+  </head>
+
+  <body>
+    <div class="container">
+      <div id="autocomplete"></div>
+    </div>
+
+    <script src="env.ts"></script>
+    <script src="app.tsx"></script>
+  </body>
+</html>

examples/layouts/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@algolia/autocomplete-example-layouts",
+  "description": "Autocomplete layouts example",
+  "version": "1.0.0-alpha.44",
+  "private": true,
+  "license": "MIT",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build index.html",
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "1.0.0-alpha.44",
+    "@algolia/autocomplete-plugin-query-suggestions": "1.0.0-alpha.44",
+    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
+    "@algolia/autocomplete-layout-classic": "1.0.0-alpha.44",
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13"
+  },
+  "devDependencies": {
+    "parcel-bundler": "1.12.4"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "javascript"
+  ]
+}

examples/layouts/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%;
+}

packages/autocomplete-layout-classic/README.md

@@ -0,0 +1,15 @@
+# @algolia/autocomplete-layout-classic
+
+Classic layout for Algolia Autocomplete.
+
+## Installation
+
+```sh
+yarn add @algolia/autocomplete-layout-classic@alpha
+# or
+npm install @algolia/autocomplete-layout-classic@alpha
+```
+
+## Documentation
+
+[Read documentation →](https://autocomplete.algolia.com/docs/autocomplete-layout-classic)

packages/autocomplete-layout-classic/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@algolia/autocomplete-layout-classic",
+  "description": "Classic layout for Algolia Autocomplete.",
+  "version": "1.0.0-alpha.44",
+  "license": "MIT",
+  "homepage": "https://github.com/algolia/autocomplete",
+  "repository": "algolia/autocomplete",
+  "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.production.js",
+  "umd:main": "dist/umd/index.production.js",
+  "unpkg": "dist/umd/index.production.js",
+  "jsdelivr": "dist/umd/index.production.js",
+  "scripts": {
+    "build:clean": "rm -rf ./dist",
+    "build:esm": "babel src --root-mode upward --extensions '.ts,.tsx' --out-dir dist/esm --ignore '**/*/__tests__/'",
+    "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/esm",
+    "build:umd": "rollup --config",
+    "build": "yarn build:clean && yarn build:umd && yarn build:esm && yarn build:types",
+    "on:change": "concurrently \"yarn build:esm\" \"yarn build:types\"",
+    "prepare": "yarn build:esm && yarn build:types",
+    "watch": "watch \"yarn on:change\" --ignoreDirectoryPattern \"/dist/\""
+  },
+  "dependencies": {
+    "preact": "^10.0.0"
+  },
+  "devDependencies": {
+    "@algolia/autocomplete-js": "1.0.0-alpha.44"
+  }
+}

packages/autocomplete-layout-classic/rollup.config.js

@@ -0,0 +1,5 @@
+import { createRollupConfigs } from '../../scripts/rollup/config';
+
+import pkg from './package.json';
+
+export default createRollupConfigs({ pkg });

packages/autocomplete-layout-classic/src/NavigationCommands.d.ts

@@ -0,0 +1,7 @@
+import { NavigationCommandsProps } from './NavigationCommands';
+
+declare module '@algolia/autocomplete-js' {
+  export interface AutocompleteComponents {
+    NavigationCommands: (props: NavigationCommandsProps) => JSX.Element;
+  }
+}

packages/autocomplete-layout-classic/src/NavigationCommands.tsx

@@ -0,0 +1,109 @@
+/** @jsx createElement */
+import type { AutocompleteRenderer } from '@algolia/autocomplete-js';
+import {
+  createElement as preactCreateElement,
+  Fragment as PreactFragment,
+} from 'preact';
+
+type NavigationCommandsTranslations = {
+  toSelect: string;
+  toNavigate: string;
+  toClose: string;
+};
+
+const defaultTranslations: NavigationCommandsTranslations = {
+  toSelect: 'to select',
+  toNavigate: 'to navigate',
+  toClose: 'to close',
+};
+
+export type NavigationCommandsProps = {
+  translations?: NavigationCommandsTranslations;
+};
+
+export function createNavigationCommandsComponent({
+  createElement,
+}: AutocompleteRenderer) {
+  return function NavigationCommands({
+    translations = defaultTranslations,
+  }: NavigationCommandsProps): JSX.Element {
+    return (
+      <div className="aa-NavigationCommands">
+        <ul className="aa-NavigationCommandList">
+          <li className="aa-NavigationCommandListItem">
+            <span className="aa-Key">
+              <svg width="15" height="15">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.2"
+                >
+                  <path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" />
+                </g>
+              </svg>
+            </span>
+            <span className="aa-NavigationCommandLabel">
+              {translations.toSelect}
+            </span>
+          </li>
+          <li className="aa-NavigationCommandListItem">
+            <span className="aa-Key">
+              <svg width="15" height="15">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.2"
+                >
+                  <path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" />
+                </g>
+              </svg>
+            </span>
+            <span className="aa-Key">
+              <svg width="15" height="15">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.2"
+                >
+                  <path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" />
+                </g>
+              </svg>
+            </span>
+            <span className="aa-NavigationCommandLabel">
+              {translations.toNavigate}
+            </span>
+          </li>
+          <li className="aa-NavigationCommandListItem">
+            <span className="aa-Key">
+              <svg width="15" height="15">
+                <g
+                  fill="none"
+                  stroke="currentColor"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="1.2"
+                >
+                  <path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" />
+                </g>
+              </svg>
+            </span>
+            <span className="aa-NavigationCommandLabel">
+              {translations.toClose}
+            </span>
+          </li>
+        </ul>
+      </div>
+    );
+  };
+}
+
+export const NavigationCommands = createNavigationCommandsComponent({
+  createElement: preactCreateElement,
+  Fragment: PreactFragment,
+});

packages/autocomplete-layout-classic/src/SearchByAlgolia.d.ts

@@ -0,0 +1,7 @@
+import { SearchByAlgoliaProps } from './SearchByAlgolia';
+
+declare module '@algolia/autocomplete-js' {
+  export interface AutocompleteComponents {
+    SearchByAlgolia: (props: SearchByAlgoliaProps) => JSX.Element;
+  }
+}