docs(examples): add panel-placement example (#549)

* docs(examples): add panel-placement example

Co-authored-by: François Chalifour <[email protected]>

Author: shortcuts

.codesandbox/ci.json

@@ -12,6 +12,7 @@
     "/examples/query-suggestions-with-recent-searches-and-categories",
     "/examples/query-suggestions-with-recent-searches",
     "/examples/query-suggestions",
+    "/examples/panel-placement",
     "/examples/react-renderer",
     "/examples/recently-viewed-items",
     "/examples/starter-algolia",

examples/panel-placement/README.md

@@ -0,0 +1,114 @@
+/** @jsx h */
+import {
+  autocomplete,
+  AutocompleteComponents,
+  AutocompleteOptions,
+  getAlgoliaResults,
+  GetSources,
+} from '@algolia/autocomplete-js';
+import { Hit } from '@algolia/client-search';
+import algoliasearch from 'algoliasearch';
+import { h } from 'preact';
+
+import '@algolia/autocomplete-theme-classic';
+
+const appId = 'latency';
+const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
+const searchClient = algoliasearch(appId, apiKey);
+
+type AutocompleteItem = Hit<{
+  brand: string;
+  categories: string[];
+  description: string;
+  image: string;
+  name: string;
+  price: number;
+  rating: number;
+  type: string;
+  url: string;
+}>;
+
+const getSources: GetSources<AutocompleteItem> = ({ query }) => {
+  return [
+    {
+      sourceId: 'products',
+      getItems() {
+        return getAlgoliaResults<AutocompleteItem>({
+          searchClient,
+          queries: [
+            {
+              indexName: 'instant_search',
+              query,
+            },
+          ],
+        });
+      },
+      templates: {
+        item({ item, components }) {
+          return <ProductItem item={item} components={components} />;
+        },
+        noResults() {
+          return 'No products matching.';
+        },
+      },
+    },
+  ];
+};
+
+const search = autocomplete<AutocompleteItem>({
+  container: '#autocomplete',
+  placeholder: 'Search',
+  getSources,
+});
+
+const searchLeft = autocomplete<AutocompleteItem>({
+  container: '#autocomplete-left',
+  placeholder: 'Search',
+  getSources,
+});
+
+const searchRight = autocomplete<AutocompleteItem>({
+  container: '#autocomplete-right',
+  placeholder: 'Search',
+  getSources,
+});
+
+type ProductItemProps = {
+  item: AutocompleteItem;
+  components: AutocompleteComponents;
+};
+
+const ProductItem = ({ item, components }: ProductItemProps) => (
+  <a href={item.url} className="aa-ItemLink">
+    <div className="aa-ItemContent">
+      <div className="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
+        <img src={item.image} alt={item.name} width="40" height="40" />
+      </div>
+
+      <div className="aa-ItemContentBody">
+        <div className="aa-ItemContentTitle">
+          <components.ReverseHighlight hit={item} attribute="name" />
+        </div>
+        <div className="aa-ItemContentDescription">
+          By <strong>{item.brand}</strong> in{' '}
+          <strong>{item.categories[0]}</strong>
+        </div>
+      </div>
+    </div>
+  </a>
+);
+
+document
+  .querySelectorAll<HTMLInputElement>('input[name="placement"]')
+  .forEach((radio) => {
+    radio.addEventListener('change', (event) => {
+      const target = event.target as HTMLInputElement;
+      const panelPlacement = target.value as Required<
+        AutocompleteOptions<AutocompleteItem>['panelPlacement']
+      >;
+
+      search.update({ panelPlacement });
+      searchLeft.update({ panelPlacement });
+      searchRight.update({ panelPlacement });
+    });
+  });

examples/panel-placement/app.tsx

@@ -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/panel-placement/env.ts

@@ -0,0 +1,39 @@
+<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>Panel placement | Autocomplete</title>
+  </head>
+
+  <body>
+    <form>
+      Panel placement:
+      <input
+        type="radio"
+        value="input-wrapper-width"
+        name="placement"
+        checked
+      />
+      <label for="input-wrapper-width">input-wrapper-width</label>
+      <input type="radio" value="start" name="placement" />
+      <label for="start">start</label>
+      <input type="radio" value="end" name="placement" />
+      <label for="end">end</label>
+      <input type="radio" value="full-width" name="placement" />
+      <label for="full-width">full-width</label>
+    </form>
+
+    <div class="container">
+      <div id="autocomplete-left"></div>
+      <div id="autocomplete"></div>
+      <div id="autocomplete-right"></div>
+    </div>
+
+    <script src="env.ts"></script>
+    <script src="app.tsx"></script>
+  </body>
+</html>

examples/panel-placement/favicon.png

@@ -0,0 +1,27 @@
+{
+  "name": "@algolia/autocomplete-example-panel-placement",
+  "description": "Autocomplete panel placement example",
+  "version": "1.0.0-alpha.46",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "parcel build index.html",
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "@algolia/autocomplete-js": "1.0.0-alpha.46",
+    "@algolia/autocomplete-core": "1.0.0-alpha.46",
+    "@algolia/autocomplete-theme-classic": "1.0.0-alpha.46",
+    "algoliasearch": "4.9.0",
+    "preact": "10.5.13"
+  },
+  "devDependencies": {
+    "@algolia/client-search": "4.9.0",
+    "parcel": "2.0.0-beta.2"
+  },
+  "keywords": [
+    "algolia",
+    "autocomplete",
+    "javascript"
+  ]
+}

examples/panel-placement/index.html

@@ -0,0 +1,26 @@
+* {
+  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;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 400px 1fr 400px;
+  grid-gap: 10px;
+}
+
+.action {
+  align-content: center;
+}