feat(autocomplete): add two complete widget examples (#542)

Author: shaejaz

.circleci/config.yml

@@ -73,6 +73,10 @@ jobs:
       - checkout
       - build_project:
           path: 'react-instantsearch/algolia-insights'
+      - build_project:
+          path: 'react-instantsearch/autocomplete'
+      - build_project:
+          path: 'react-instantsearch/autocomplete-mentions'
       - build_project:
           path: 'react-instantsearch/conditional-debouncing'
       - build_project:
@@ -104,6 +108,10 @@ jobs:
     executor: node14
     steps:
       - checkout
+      - build_project:
+          path: 'instantsearch.js/autocomplete'
+      - build_project:
+          path: 'instantsearch.js/autocomplete-mentions'
       - build_project:
           path: 'instantsearch.js/autocomplete-results-page'
       - build_project:

instantsearch.js/autocomplete-mentions/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

instantsearch.js/autocomplete-mentions/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+/.cache

instantsearch.js/autocomplete-mentions/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'algolia',
+};

instantsearch.js/autocomplete-mentions/.gitignore

@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/dist
+/.cache
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

instantsearch.js/autocomplete-mentions/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}

instantsearch.js/autocomplete-mentions/README.md

@@ -0,0 +1,23 @@
+# autocomplete-mentions
+
+[![Edit autocomplete-mentions](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/instantsearch.js/autocomplete-mentions)
+
+A headless "@" mentions text box built with the `connectAutocomplete` connector: type "@" followed by a few letters to search the `autocomplete_twitter_accounts` index and complete a handle, Twitter-style.
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```
+
+Open http://localhost:3000 to see your app.

instantsearch.js/autocomplete-mentions/favicon.png

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="theme-color" content="#000000">
+
+  <link rel="manifest" href="./manifest.webmanifest">
+  <link rel="shortcut icon" href="./favicon.png">
+
+  <link rel="stylesheet" href="./src/index.css">
+  <link rel="stylesheet" href="./src/app.css">
+
+  <title>InstantSearch.js - Autocomplete mentions</title>
+</head>
+
+<body>
+  <main class="page">
+    <h1 class="page-title">Headless mentions</h1>
+    <p class="page-subtitle">
+      A custom text box with "@" mention suggestions, built with the
+      <code>connectAutocomplete</code> connector. Type "@" followed by a few
+      letters.
+    </p>
+
+    <div class="compose">
+      <textarea id="compose" placeholder="What's happening?" maxlength="280"></textarea>
+      <ul id="mentions-panel" hidden></ul>
+    </div>
+  </main>
+
+  <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.104.0"></script>
+  <script src="./src/app.js"></script>
+</body>
+
+</html>

instantsearch.js/autocomplete-mentions/index.html

@@ -0,0 +1,15 @@
+{
+  "short_name": "autocomplete-mentions",
+  "name": "autocomplete-mentions Sample",
+  "icons": [
+    {
+      "src": "favicon.png",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}