feat: InstantSearch.js v3

CONTRIBUTING.md

@@ -177,9 +177,9 @@ Here are the main files and folders of the project.
   ▸ components/       << The pReact components for the UI of our widgets (UI)
   ▸ connectors/       << The source of all the connectors (UX without UI)
   ▸ css/              << The source of the themes (reset / algolia theme)
-  ▸ decorators/       << Preact HoC that factorize some behaviour of the widgets
   ▸ lib/              << The core of the library, instantsearch, url
   ▸ widgets/          << The source of the widgets (UX + UI)
+  ▸ helpers/          << The source of the method helpers
 ```
 
 ### The documentation source
@@ -211,13 +211,10 @@ Here are the main files and folders of the project.
 ```
 ▾ dev/
   ▾ app/                      << the source of the dev app
-    ▸ custom-widgets/         << the source of the custom widgets to validate the connector API
-    ▸ templates/              << templates used for the common widgets
+    ▸ builtin/                << templates used for built-in widgets
+    ▸ utils/                  << utility functions to build stories
       index.js                << main script of the dev app
-      init-builtin-widgets.js << initialization of the IS.js app with built-in widgets
-      init-jquery-widgets.js  << initialization of the IS.js app with custom widget / jQuery
-      init-vanilla-widgets.js << initialization of the IS.js app with other custom widgets
-      wrap-with-hits.js       << utility source that adds a hits and searchbox for each story
+      init-unmount-widgets.js << initialization of the IS.js app with unmountable widgets
     style.css
     template.html
     webpack.config.js
@@ -312,7 +309,7 @@ yarn lint
 ```
 
 The JS files are validated using a combination of prettier (strict syntax form) and eslint rules (for
-common mistakes and patterns). The scss linter uses sass-lint.
+common mistakes and patterns).
 
 ## Release 🛳
 

README.md

@@ -4,7 +4,7 @@
   </a>
 
   <p align="center">
-    InstantSearch.js is a library for building blazing fast search-as-you-type search UIs with <a href="https://www.algolia.com">Algolia</a>.
+    InstantSearch.js is a JavaScript library for building performant and instant search experiences with <a href="https://www.algolia.com/?utm_source=instantsearch.js&utm_campaign=repository">Algolia</a>.
   </p>
 </p>
 
@@ -25,6 +25,7 @@ InstantSearch.js is a vanilla JavaScript library that lets you create an instant
 
 - [Why](#why)
 - [Getting started](#getting-started)
+- [Installation](#installation)
 - [Documentation](#documentation)
 - [Demos](#demos)
 - [Playground](#playground)
@@ -52,9 +53,8 @@ Using InstantSearch.js is as simple as adding this JavaScript code to your page:
 ```javascript
 // 1. Instantiate the search
 const search = instantsearch({
-  appId: 'latency',
-  apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
   indexName: 'instant_search',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
 });
 
 // 2. Create an interactive search box
@@ -79,7 +79,7 @@ search.addWidget(
 search.addWidget(
   instantsearch.widgets.refinementList({
     container: document.querySelector('#brand'),
-    attributeName: 'brand',
+    attribute: 'brand',
   })
 );
 
@@ -97,6 +97,14 @@ search.start();
 
 To learn more about the library, follow the [getting started](https://community.algolia.com/instantsearch.js/v2/getting-started.html) guide or check how to [add it to your own project](https://community.algolia.com/instantsearch.js/v2/guides/usage.html).
 
+## Installation
+
+```sh
+npm install instantsearch.js algoliasearch
+# or
+yarn add instantsearch.js algoliasearch
+```
+
 ## Documentation
 
 The documentation is available at [community.algolia.com/instantsearch.js](https://community.algolia.com/instantsearch.js).
@@ -163,7 +171,7 @@ InstantSearch.js is [MIT licensed][license-url].
 
 <!-- Links -->
 
-[algolia-website]: https://algolia.com
+[algolia-website]: https://www.algolia.com/?utm_source=instantsearch.js&utm_campaign=repository
 [react-instantsearch-github]: https://github.com/algolia/react-instantsearch/
 [vue-instantsearch-github]: https://github.com/algolia/vue-instantsearch
 [instantsearch-android-github]: https://github.com/algolia/instantsearch-android

dev/app/builtin/init-stories.js

@@ -1,55 +1,53 @@
 import initAnalyticsStories from './stories/analytics.stories';
 import initBreadcrumbStories from './stories/breadcrumb.stories.js';
-import initClearAllStories from './stories/clear-all.stories';
-import initCurrentRefinedValuesStories from './stories/current-refined-values.stories';
+import initClearRefinementsStories from './stories/clear-refinements.stories';
+import initCurrentRefinementsStories from './stories/current-refinements.stories';
 import initGeoSearch from './stories/geo-search.stories';
 import initHierarchicalMenu from './stories/hierarchical-menu.stories';
 import initHitsStories from './stories/hits.stories';
-import initHitsPerPageSelectorStories from './stories/hits-per-page-selector.stories';
+import initHitsPerPageStories from './stories/hits-per-page.stories';
 import initInfiniteHitsStories from './stories/infinite-hits.stories';
 import initInstantSearchStories from './stories/instantsearch.stories';
 import initMenuStories from './stories/menu.stories';
 import initMenuSelectStories from './stories/menu-select.stories';
-import initNumericRefinementListStories from './stories/numeric-refinement-list.stories';
-import initNumericSelectorStories from './stories/numeric-selector.stories';
+import initNumericMenuStories from './stories/numeric-menu.stories';
 import initPaginationStories from './stories/pagination.stories';
-import initPriceRangesStories from './stories/price-ranges.stories';
 import initRangeInputStories from './stories/range-input.stories.js';
 import initRangeSliderStories from './stories/range-slider.stories';
 import initRefinementListStories from './stories/refinement-list.stories';
 import initReloadStories from './stories/reload.stories';
 import initSearchBoxStories from './stories/search-box.stories';
-import initSortBySelectorStories from './stories/sort-by-selector.stories';
-import initStarRatingStories from './stories/star-rating.stories';
+import initSortByStories from './stories/sort-by.stories';
+import initRatingMenuStories from './stories/rating-menu.stories';
 import initStatsStories from './stories/stats.stories';
-import initToggleStories from './stories/toggle.stories';
+import initToggleStories from './stories/toggleRefinement.stories';
 import initConfigureStories from './stories/configure.stories';
+import initPoweredByStories from './stories/powered-by.stories';
 
 export default () => {
   initAnalyticsStories();
   initBreadcrumbStories();
-  initClearAllStories();
-  initCurrentRefinedValuesStories();
+  initClearRefinementsStories();
+  initCurrentRefinementsStories();
   initGeoSearch();
   initHierarchicalMenu();
   initHitsStories();
-  initHitsPerPageSelectorStories();
+  initHitsPerPageStories();
   initInfiniteHitsStories();
   initInstantSearchStories();
   initMenuStories();
   initMenuSelectStories();
-  initNumericRefinementListStories();
-  initNumericSelectorStories();
+  initNumericMenuStories();
   initPaginationStories();
-  initPriceRangesStories();
   initRangeInputStories();
   initRangeSliderStories();
   initRefinementListStories();
   initReloadStories();
   initSearchBoxStories();
-  initSortBySelectorStories();
+  initSortByStories();
   initStatsStories();
-  initStarRatingStories();
+  initRatingMenuStories();
   initToggleStories();
   initConfigureStories();
+  initPoweredByStories();
 };

dev/app/builtin/stories/breadcrumb.stories.js

@@ -37,6 +37,39 @@ export default () => {
         });
       })
     )
+    .add(
+      'With custom separators',
+      wrapWithHits(container => {
+        container.innerHTML = `
+        <div id="hierarchicalMenu"></div>
+        <div id="breadcrumb"></div>
+      `;
+
+        window.search.addWidget(
+          instantsearch.widgets.breadcrumb({
+            container: '#breadcrumb',
+            templates: {
+              separator: ' + ',
+            },
+            attributes: [
+              'hierarchicalCategories.lvl0',
+              'hierarchicalCategories.lvl1',
+              'hierarchicalCategories.lvl2',
+            ],
+          })
+        );
+
+        // Custom Widget to toggle refinement
+        window.search.addWidget({
+          init({ helper }) {
+            helper.toggleRefinement(
+              'hierarchicalCategories.lvl0',
+              'Cameras & Camcorders > Digital Cameras'
+            );
+          },
+        });
+      })
+    )
     .add(
       'with custom home label',
       wrapWithHits(container => {

dev/app/builtin/stories/clear-all.stories.js → dev/app/builtin/stories/clear-refinements.stories.js

@@ -4,7 +4,7 @@ import { storiesOf } from 'dev-novel';
 import instantsearch from '../../../../index';
 import { wrapWithHits } from '../../utils/wrap-with-hits.js';
 
-const stories = storiesOf('ClearAll');
+const stories = storiesOf('ClearRefinements');
 
 export default () => {
   stories
@@ -13,9 +13,8 @@ export default () => {
       wrapWithHits(
         container => {
           window.search.addWidget(
-            instantsearch.widgets.clearAll({
+            instantsearch.widgets.clearRefinements({
               container,
-              autoHideContainer: false,
             })
           );
         },
@@ -31,9 +30,8 @@ export default () => {
       'with nothing to clear',
       wrapWithHits(container => {
         window.search.addWidget(
-          instantsearch.widgets.clearAll({
+          instantsearch.widgets.clearRefinements({
             container,
-            autoHideContainer: false,
           })
         );
       })
@@ -43,9 +41,8 @@ export default () => {
       wrapWithHits(
         container => {
           window.search.addWidget(
-            instantsearch.widgets.clearAll({
+            instantsearch.widgets.clearRefinements({
               container,
-              autoHideContainer: false,
               clearsQuery: true,
               templates: {
                 link: 'Clear refinements and query',