chore(examples): clean examples (#502)

This formats examples in a unified way and updates their dependencies.
algolia · Mar 25, 2021 · 77a092d · 77a092d
1 parent acbaf8f
commit 77a092d
Show file tree

Hide file tree

Showing 43 changed files with 198 additions and 315 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -3,13 +3,13 @@
   "buildCommand": false,
   "^": "buildCommand is false because `yarn prepare` is going to build packages anyway.",
   "sandboxes": [
-    "/examples/js",
-    "/examples/react-renderer",
-    "/examples/query-suggestions-with-rich-hits",
-    "/examples/query-suggestions",
-    "/examples/query-suggestions-with-recent-searches",
+    "/examples/playground",
     "/examples/query-suggestions-with-categories",
+    "/examples/query-suggestions-with-hits",
     "/examples/query-suggestions-with-inline-categories",
+    "/examples/query-suggestions-with-recent-searches",
+    "/examples/query-suggestions",
+    "/examples/react-renderer",
     "/examples/recently-viewed-items"
   ],
   "node": "14"

diff --git a/.github/ISSUE_TEMPLATE/Bug_report.md b/.github/ISSUE_TEMPLATE/Bug_report.md
@@ -11,7 +11,7 @@ about: Help us improve Autocomplete.
 
 <!-- Fork the sandbox, reproduce the bug and paste the URL. -->
 
-[**Preview →**](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx)
+[**Preview →**](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx)
 
 **Steps**
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -10,7 +10,7 @@ Opening an issue is very effective way to contribute because many users might al
 
 Before reporting an issue, first check that there is not an already open issue for the same topic using the [issues page](https://github.com/algolia/autocomplete/issues). Don't hesitate to thumb up an issue that corresponds to the problem you have.
 
-Another element that will help us go faster at solving the issue is to provide a reproducible test case. We recommend to [use this CodeSandbox template](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx).
+Another element that will help us go faster at solving the issue is to provide a reproducible test case. We recommend to [use this CodeSandbox template](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx).
 
 ## Code contribution
 

diff --git a/README.md b/README.md
@@ -24,15 +24,15 @@ The data that populates the autocomplete results are called [sources](https://au
 By configuring just those two required parameters ([`container`](https://autocomplete.algolia.com/docs/autocomplete-js/#container) and [`getSources`](https://autocomplete.algolia.com/docs/autocomplete-js/#getsources)) you can have an interactive autocomplete experience. **The library creates an input and provides the interactivity and accessibility attributes, but you're in full control of the DOM elements to output**.
 
 <p align="center">
-  <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx">
+  <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx">
     <img src="./media/screenshot.png" alt="Screenshot">
   </a>
   <br>
   <br>
   <strong>
   <a href="https://autocomplete.algolia.com/docs/introduction">Documentation</a> •
   <a href="https://autocomplete.algolia.com/docs/api">API</a> •
-  <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx">Playground</a>
+  <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx">Playground</a>
   </strong>
 </p>
 
@@ -86,7 +86,7 @@ The [documentation](https://autocomplete.algolia.com) offers a few ways to learn
 - Read the [**Core Concepts**](https://autocomplete.algolia.com/docs/basic-options) to learn more about underlying principles, like [**Sources**](https://autocomplete.algolia.com/docs/sources) and [**State**](https://autocomplete.algolia.com/docs/state).
 - Follow the [**Guides**](https://autocomplete.algolia.com/docs/adding-suggested-searches) to understand how to build common UX patterns.
 - Refer to [**API reference**](https://autocomplete.algolia.com/docs/api) for a comprehensive list of parameters and options.
-- Try out the [**Playground**](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx) where you can fork a basic implementation and play around.
+- Try out the [**Playground**](https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx) where you can fork a basic implementation and play around.
 
 You can find more on the [documentation](https://autocomplete.algolia.com).
 
@@ -122,7 +122,7 @@ Check out sandboxes using Autocomplete:
   <thead>
     <tr>
       <th align="center">
-        <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx">
+        <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx">
           <img src="./media/screenshot.png" alt="E-commerce" width="460">
         </a>
       </th>
@@ -137,7 +137,7 @@ Check out sandboxes using Autocomplete:
   <tbody>
     <tr>
       <td align="center">
-        <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx">
+        <a href="https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx">
           E-commerce
         </a>
       </td>

diff --git a/cypress/test-apps/js/package.json b/cypress/test-apps/js/package.json
@@ -16,10 +16,10 @@
     "@algolia/autocomplete-plugin-recent-searches": "1.0.0-alpha.44",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
     "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
-    "@algolia/client-search": "4.8.3",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7",
-    "search-insights": "1.6.3"
+    "@algolia/client-search": "4.8.6",
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13",
+    "search-insights": "1.7.1"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/examples/js/README.md → examples/playground/README.md b/examples/js/README.md → examples/playground/README.md
diff --git a/examples/js/app.tsx → examples/playground/app.tsx b/examples/js/app.tsx → examples/playground/app.tsx
diff --git a/examples/js/categoriesPlugin.tsx → examples/playground/categoriesPlugin.tsx b/examples/js/categoriesPlugin.tsx → examples/playground/categoriesPlugin.tsx
diff --git a/examples/js/darkMode.ts → examples/playground/darkMode.ts b/examples/js/darkMode.ts → examples/playground/darkMode.ts
diff --git a/examples/js/env.ts → examples/playground/env.ts b/examples/js/env.ts → examples/playground/env.ts
diff --git a/examples/js/favicon.png → examples/playground/favicon.png b/examples/js/favicon.png → examples/playground/favicon.png
diff --git a/examples/js/index.html → examples/playground/index.html b/examples/js/index.html → examples/playground/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
     <link rel="stylesheet" href="style.css" />
 
-    <title>Autocomplete JavaScript Playground</title>
+    <title>Playground | Autocomplete</title>
   </head>
 
   <body>

diff --git a/examples/js/package.json → examples/playground/package.json b/examples/js/package.json → examples/playground/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/js-example",
-  "description": "Autocomplete JavaScript Sandbox",
+  "name": "@algolia/autocomplete-example-playground",
+  "description": "Autocomplete playground",
   "version": "1.0.0-alpha.44",
   "private": true,
   "license": "MIT",
@@ -16,10 +16,10 @@
     "@algolia/autocomplete-plugin-recent-searches": "1.0.0-alpha.44",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
     "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
-    "@algolia/client-search": "4.8.3",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7",
-    "search-insights": "1.6.3"
+    "@algolia/client-search": "4.8.6",
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13",
+    "search-insights": "1.7.1"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/examples/js/shortcutsPlugin.tsx → examples/playground/shortcutsPlugin.tsx b/examples/js/shortcutsPlugin.tsx → examples/playground/shortcutsPlugin.tsx
diff --git a/examples/js/style.css → examples/playground/style.css b/examples/js/style.css → examples/playground/style.css
diff --git a/examples/js/types/Highlighted.tsx → examples/playground/types/Highlighted.tsx b/examples/js/types/Highlighted.tsx → examples/playground/types/Highlighted.tsx
diff --git a/examples/js/types/ProductHit.tsx → examples/playground/types/ProductHit.tsx b/examples/js/types/ProductHit.tsx → examples/playground/types/ProductHit.tsx
diff --git a/examples/js/types/index.tsx → examples/playground/types/index.tsx b/examples/js/types/index.tsx → examples/playground/types/index.tsx
diff --git a/examples/query-suggestions-with-categories/index.html b/examples/query-suggestions-with-categories/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
     <link rel="stylesheet" href="style.css" />
 
-    <title>Autocomplete Query Suggestions with categories</title>
+    <title>Query Suggestions with categories | Autocomplete</title>
   </head>
 
   <body>

diff --git a/examples/query-suggestions-with-categories/package.json b/examples/query-suggestions-with-categories/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/query-suggestion-with-categories",
-  "description": "Autocomplete Query Suggestions with categories",
+  "name": "@algolia/autocomplete-example-query-suggestion-with-categories",
+  "description": "Autocomplete example with Query Suggestions with categories",
   "version": "1.0.0-alpha.44",
   "private": true,
   "license": "MIT",
@@ -13,8 +13,8 @@
     "@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",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7"
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/...uery-suggestions-with-rich-hits/README.md → ...les/query-suggestions-with-hits/README.md b/...uery-suggestions-with-rich-hits/README.md → ...les/query-suggestions-with-hits/README.md
diff --git a/.../query-suggestions-with-rich-hits/app.tsx → examples/query-suggestions-with-hits/app.tsx b/.../query-suggestions-with-rich-hits/app.tsx → examples/query-suggestions-with-hits/app.tsx
diff --git a/...s/query-suggestions-with-rich-hits/env.ts → examples/query-suggestions-with-hits/env.ts b/...s/query-suggestions-with-rich-hits/env.ts → examples/query-suggestions-with-hits/env.ts
diff --git a/...ry-suggestions-with-rich-hits/favicon.png → ...s/query-suggestions-with-hits/favicon.png b/...ry-suggestions-with-rich-hits/favicon.png → ...s/query-suggestions-with-hits/favicon.png
diff --git a/...ery-suggestions-with-rich-hits/index.html → ...es/query-suggestions-with-hits/index.html b/...ery-suggestions-with-rich-hits/index.html → ...es/query-suggestions-with-hits/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
     <link rel="stylesheet" href="style.css" />
 
-    <title>Query Suggestions with Rich Hits Sandbox</title>
+    <title>Query Suggestions with hits | Autocomplete</title>
   </head>
 
   <body>

diff --git a/...y-suggestions-with-rich-hits/package.json → .../query-suggestions-with-hits/package.json b/...y-suggestions-with-rich-hits/package.json → .../query-suggestions-with-hits/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/query-suggestions-with-rich-hits-example",
-  "description": "Autocomplete Query Suggestions With Rich Hits Sandbox",
+  "name": "@algolia/autocomplete-example-query-suggestions-with-hits",
+  "description": "Autocomplete example with Query Suggestions and hits",
   "version": "1.0.0-alpha.44",
   "private": true,
   "license": "MIT",
@@ -11,15 +11,15 @@
   },
   "dependencies": {
     "@algolia/autocomplete-js": "1.0.0-alpha.44",
-    "@algolia/autocomplete-plugin-algolia-insights": "^1.0.0-alpha.44",
+    "@algolia/autocomplete-plugin-algolia-insights": "1.0.0-alpha.44",
     "@algolia/autocomplete-plugin-query-suggestions": "1.0.0-alpha.44",
     "@algolia/autocomplete-plugin-recent-searches": "1.0.0-alpha.44",
     "@algolia/autocomplete-preset-algolia": "1.0.0-alpha.44",
     "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
-    "@algolia/client-search": "4.8.3",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7",
-    "search-insights": "1.6.3"
+    "@algolia/client-search": "4.8.6",
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13",
+    "search-insights": "1.7.1"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/...uery-suggestions-with-rich-hits/style.css → ...les/query-suggestions-with-hits/style.css b/...uery-suggestions-with-rich-hits/style.css → ...les/query-suggestions-with-hits/style.css
diff --git a/examples/query-suggestions-with-inline-categories/index.html b/examples/query-suggestions-with-inline-categories/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
     <link rel="stylesheet" href="style.css" />
 
-    <title>Autocomplete Query Suggestions with Categories inlined</title>
+    <title>Query Suggestions with inline categories | Autocomplete</title>
   </head>
 
   <body>

diff --git a/examples/query-suggestions-with-inline-categories/package.json b/examples/query-suggestions-with-inline-categories/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/qs-with-inline-categories-example",
-  "description": "Autocomplete Query Suggestions with inline categories",
+  "name": "@algolia/autocomplete-example-query-suggestions-with-inline-categories",
+  "description": "Autocomplete example with Query Suggestions with inline categories",
   "version": "1.0.0-alpha.44",
   "private": true,
   "license": "MIT",
@@ -13,8 +13,8 @@
     "@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",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7"
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/examples/query-suggestions-with-recent-searches/index.html b/examples/query-suggestions-with-recent-searches/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
     <link rel="stylesheet" href="style.css" />
 
-    <title>Query Suggestions with Recent Searches Sandbox</title>
+    <title>Query Suggestions with Recent Searches | Autocomplete</title>
   </head>
 
   <body>

diff --git a/examples/query-suggestions-with-recent-searches/package.json b/examples/query-suggestions-with-recent-searches/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/qs-with-rs-example",
-  "description": "Autocomplete Query Suggestions with Recent Searches Sandbox",
+  "name": "@algolia/autocomplete-example-query-suggestions-with-recent-searches",
+  "description": "Autocomplete example with Query Suggestions and Recent Searches",
   "version": "1.0.0-alpha.44",
   "private": true,
   "license": "MIT",
@@ -14,8 +14,8 @@
     "@algolia/autocomplete-plugin-query-suggestions": "1.0.0-alpha.44",
     "@algolia/autocomplete-plugin-recent-searches": "1.0.0-alpha.44",
     "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7"
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/examples/query-suggestions/index.html b/examples/query-suggestions/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
     <link rel="stylesheet" href="style.css" />
 
-    <title>Query Suggestions Examples</title>
+    <title>Query Suggestions | Autocomplete</title>
   </head>
 
   <body>

diff --git a/examples/query-suggestions/package.json b/examples/query-suggestions/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/query-suggestions-example",
-  "description": "Autocomplete Query Suggestions Sandbox",
+  "name": "@algolia/autocomplete-example-query-suggestions",
+  "description": "Autocomplete example with Query Suggestions",
   "version": "1.0.0-alpha.44",
   "private": true,
   "license": "MIT",
@@ -13,8 +13,8 @@
     "@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",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7"
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/examples/react-renderer/package.json b/examples/react-renderer/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/react-renderer-example",
-  "description": "Autocomplete React Renderer example",
+  "name": "@algolia/autocomplete-example-react-renderer",
+  "description": "Autocomplete example with React Renderer",
   "version": "1.0.0-alpha.44",
   "private": true,
   "dependencies": {

diff --git a/examples/react-renderer/public/index.html b/examples/react-renderer/public/index.html
@@ -8,10 +8,12 @@
       name="description"
       content="Web site created using create-react-app"
     />
+
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>Autocomplete React Renderer</title>
+
+    <title>React Renderer | Autocomplete</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/examples/recently-viewed-items/index.html b/examples/recently-viewed-items/index.html
@@ -6,7 +6,7 @@
     <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
     <link rel="stylesheet" href="style.css" />
 
-    <title>Recently Viewed Items Sandbox</title>
+    <title>Recently Viewed Items | Autocomplete</title>
   </head>
 
   <body>

diff --git a/examples/recently-viewed-items/package.json b/examples/recently-viewed-items/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@algolia/recently-viewed-items-example",
-  "description": "Autocomplete Recently Viewed Items Sandbox",
+  "name": "@algolia/autocomplete-example-recently-viewed-items",
+  "description": "Autocomplete example with Recently Viewed Items",
   "version": "1.0.0-alpha.44",
   "private": true,
   "license": "MIT",
@@ -13,9 +13,9 @@
     "@algolia/autocomplete-js": "1.0.0-alpha.44",
     "@algolia/autocomplete-plugin-recent-searches": "1.0.0-alpha.44",
     "@algolia/autocomplete-theme-classic": "1.0.0-alpha.44",
-    "@algolia/client-search": "4.8.3",
-    "algoliasearch": "4.8.3",
-    "preact": "10.5.7"
+    "@algolia/client-search": "4.8.6",
+    "algoliasearch": "4.8.6",
+    "preact": "10.5.13"
   },
   "devDependencies": {
     "parcel-bundler": "1.12.4"

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "format": "prettier --write .",
     "lint:css": "stylelint packages/*/src/**/*.scss",
     "lint": "eslint --ext .js,.ts,.tsx .",
-    "playground:start": "yarn workspace @algolia/js-example start",
+    "playground:start": "yarn workspace @algolia/autocomplete-example-playground start",
     "prepare": "lerna run prepare --no-private",
     "release": "shipjs prepare",
     "start": "yarn run watch",
@@ -55,7 +55,7 @@
     "@types/react-dom": "^17.0.0",
     "@typescript-eslint/eslint-plugin": "2.19.0",
     "@typescript-eslint/parser": "2.19.0",
-    "algoliasearch": "4.8.3",
+    "algoliasearch": "4.8.6",
     "autoprefixer": "10.0.4",
     "babel-eslint": "10.1.0",
     "babel-loader": "8.2.2",

diff --git a/packages/autocomplete-plugin-query-suggestions/package.json b/packages/autocomplete-plugin-query-suggestions/package.json
@@ -37,7 +37,7 @@
     "@algolia/autocomplete-shared": "1.0.0-alpha.44"
   },
   "devDependencies": {
-    "@algolia/client-search": "4.8.3",
+    "@algolia/client-search": "4.8.6",
     "algoliasearch": "4.8.3"
   },
   "peerDependencies": {

diff --git a/packages/autocomplete-preset-algolia/package.json b/packages/autocomplete-preset-algolia/package.json
@@ -34,7 +34,7 @@
     "@algolia/autocomplete-shared": "1.0.0-alpha.44"
   },
   "devDependencies": {
-    "@algolia/client-search": "4.8.3",
+    "@algolia/client-search": "4.8.6",
     "algoliasearch": "4.8.3"
   },
   "peerDependencies": {

diff --git a/packages/website/docs/getting-started.mdx b/packages/website/docs/getting-started.mdx
@@ -22,7 +22,7 @@ This documentation offers a few ways to learn about the Autocomplete library:
 - Read the [**Core Concepts**](basic-options) to learn more about underlying principles, like [**Sources**](sources) and [**State**](state).
 - Follow the [**Guides**](adding-suggested-searches) to understand how to build common UX patterns.
 - Refer to [**API reference**](api) for a comprehensive list of parameters and options.
-- Try out the [**Playground**](https://codesandbox.io/s/github/algolia/autocomplete.js/tree/next/examples/js?file=/app.tsx) where you can fork a basic implementation and play around.
+- Try out the [**Playground**](https://codesandbox.io/s/github/algolia/autocomplete.js/tree/next/examples/playground?file=/app.tsx) where you can fork a basic implementation and play around.
 
 Keep reading to see how to install Autocomplete and build a basic implementation with Algolia.
 

diff --git a/packages/website/docusaurus.config.js b/packages/website/docusaurus.config.js
@@ -23,7 +23,7 @@ module.exports = {
         {
           label: 'Playground',
           to:
-            'https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/js?file=/app.tsx',
+            'https://codesandbox.io/s/github/algolia/autocomplete/tree/next/examples/playground?file=/app.tsx',
           position: 'right',
         },
         {