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:

.stylelintrc.json

@@ -13,7 +13,9 @@
   "rules": {
     "order/properties-alphabetical-order": true,
     "no-descending-specificity": null,
-    "selector-class-pattern": ["^aa-[A-Za-z0-9-]*$"],
+    "selector-class-pattern": [
+      "^aa-(?:[A-Z][a-z]+)+(?:--[a-z]+(?:[A-Z][a-z]+)?)?$"
+    ],
     "prettier/prettier": true,
     "max-nesting-depth": null,
     "rule-empty-line-before": [

bundlesize.config.json

@@ -6,7 +6,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "14.50 kB"
+      "maxSize": "14.75 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",
@@ -23,6 +23,14 @@
     {
       "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 kB"
+    },
+    {
+      "path": "packages/autocomplete-theme-classic/dist/theme.css",
+      "maxSize": "4 kB"
     }
   ]
 }

cypress/test-apps/js/app.tsx

@@ -129,7 +129,7 @@ type ProductItemProps = {
 function ProductItem({ hit, insights }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
+      <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
       <div className="aa-ItemContent">

cypress/test-apps/js/categoriesPlugin.tsx

@@ -55,7 +55,7 @@ export function createCategoriesPlugin({
             item({ item }) {
               return (
                 <Fragment>
-                  <div className="aa-ItemIcon aa-ItemIcon--no-border">
+                  <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                     <svg
                       viewBox="0 0 24 24"
                       width="18"

examples/js/app.tsx

@@ -120,7 +120,7 @@ type ProductItemProps = {
 function ProductItem({ hit, insights }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
+      <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
       <div className="aa-ItemContent">

examples/js/categoriesPlugin.tsx

@@ -59,7 +59,7 @@ export function createCategoriesPlugin({
             item({ item }) {
               return (
                 <Fragment>
-                  <div className="aa-ItemIcon aa-ItemIcon--no-border">
+                  <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                     <svg
                       viewBox="0 0 24 24"
                       width="18"

examples/layouts/app.tsx

@@ -0,0 +1,58 @@
+/** @jsx h */
+import { autocomplete } from '@algolia/autocomplete-js';
+import {
+  NavigationCommandsLayout,
+  SearchByAlgoliaLayout,
+} 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],
+  render({ sections, createElement, Fragment }, root) {
+    render(
+      <Fragment>
+        <div className="aa-PanelLayout">{sections}</div>
+        <footer className="aa-PanelFooter">
+          {NavigationCommandsLayout({
+            createElement,
+            Fragment,
+            translations: {
+              toClose: 'pour fermer',
+              toNavigate: 'pour naviguer',
+              toSelect: 'pour sélectionner',
+            },
+          })}
+          {SearchByAlgoliaLayout({
+            createElement,
+            Fragment,
+            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/layouts-example",
+  "description": "Autocomplete Layouts Sandbox",
+  "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.3",
+    "preact": "10.5.7"
+  },
+  "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%;
+}

examples/query-suggestions-with-inline-categories/app.tsx

@@ -33,7 +33,7 @@ const querySuggestionsPlugin = createQuerySuggestionsPlugin({
         item({ item, createElement }) {
           return (
             <Fragment>
-              <div className="aa-ItemIcon aa-ItemIcon--no-border">
+              <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                 <svg
                   viewBox="0 0 24 24"
                   width="18"

examples/query-suggestions-with-rich-hits/app.tsx

@@ -112,7 +112,7 @@ type ProductItemProps = {
 function ProductItem({ hit, insights }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
+      <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
       <div className="aa-ItemContent">

examples/recently-viewed-items/app.tsx

@@ -87,7 +87,7 @@ type ProductItemProps = {
 function AutocompleteProductItem({ hit }: ProductItemProps) {
   return (
     <Fragment>
-      <div className="aa-ItemIcon aa-ItemIcon--align-top">
+      <div className="aa-ItemIcon aa-ItemIcon--alignTop">
         <img src={hit.image} alt={hit.name} width="40" height="40" />
       </div>
       <div className="aa-ItemContent">

examples/recently-viewed-items/recentlyViewedItemsPlugin.tsx

@@ -80,7 +80,7 @@ export function createLocalStorageRecentlyViewedItems<
                     <img src={item.image} alt={item.label} />
                   </div>
                 ) : (
-                  <div className="aa-ItemIcon aa-ItemIcon--no-border">
+                  <div className="aa-ItemIcon aa-ItemIcon--noBorder">
                     <svg
                       viewBox="0 0 24 24"
                       width="18"

packages/autocomplete-js/src/__tests__/render.test.ts

@@ -1,6 +1,7 @@
 import { fireEvent, waitFor } from '@testing-library/dom';
 import {
   createElement as preactCreateElement,
+  Fragment,
   Fragment as PreactFragment,
   render,
 } from 'preact';
@@ -358,16 +359,24 @@ describe('render', () => {
           },
         ];
       },
-      render({ createElement, children }, root) {
+      render({ createElement, children, sections }, root) {
         expect(children).toEqual(
           expect.objectContaining({
-            type: 'div',
+            type: Fragment,
             props: {
-              className: expect.any(String),
-              children: expect.arrayContaining([
-                expect.any(Object),
-                expect.any(Object),
-              ]),
+              children: [
+                expect.objectContaining({
+                  props: {
+                    className: 'aa-PanelLayout aa-Panel--scrollable',
+                    children: sections,
+                  },
+                }),
+                expect.objectContaining({
+                  props: {
+                    className: 'aa-GradientBottom',
+                  },
+                }),
+              ],
             },
           })
         );

packages/autocomplete-js/src/autocomplete.ts

@@ -228,7 +228,7 @@ export function autocomplete<TItem extends BaseItem>(
       // results come in) so that users don't have to.
       if (state.query !== prevState.query) {
         const scrollablePanels = document.querySelectorAll(
-          '.aa-Panel--Scrollable'
+          '.aa-Panel--scrollable'
         );
         scrollablePanels.forEach((scrollablePanel) => {
           if (scrollablePanel.scrollTop !== 0) {
@@ -272,7 +272,7 @@ export function autocomplete<TItem extends BaseItem>(
 
     function toggleModalClassname(isActive: boolean) {
       dom.value.detachedContainer.classList.toggle(
-        'aa-DetachedContainer--Modal',
+        'aa-DetachedContainer--modal',
         isActive
       );
     }

packages/autocomplete-js/src/render.tsx

@@ -166,7 +166,10 @@ export function renderPanel<TItem extends BaseItem>(
   ));
 
   const children = (
-    <div className="aa-PanelLayout aa-Panel--Scrollable">{sections}</div>
+    <Fragment>
+      <div className="aa-PanelLayout aa-Panel--scrollable">{sections}</div>
+      <div className="aa-GradientBottom" />
+    </Fragment>
   );
   const elements = sections.reduce((acc, current) => {
     acc[current.props['data-autocomplete-source-id']] = current;

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)