chore(stories): add categories (#4154)

algolia · Oct 7, 2019 · bdc84e9 · bdc84e9
1 parent f594bba
commit bdc84e9
Show file tree

Hide file tree

Showing 34 changed files with 499 additions and 399 deletions.
diff --git a/.storybook/config.ts b/.storybook/config.ts
@@ -1,13 +1,35 @@
 import { addParameters, configure } from '@storybook/html';
 import { create } from '@storybook/theming';
 
+// List of categories to sort the stories in the order of the InstantSearch.js
+// API reference.
+// See https://www.algolia.com/doc/api-reference/widgets/js/
+const categories = [
+  'Basics',
+  'Results',
+  'Refinements',
+  'Pagination',
+  'Metadata',
+  'Sorting',
+];
+
 addParameters({
   options: {
     theme: create({
       base: 'light',
       brandTitle: 'InstantSearch.js',
       brandUrl: 'https://github.com/algolia/instantsearch.js',
     }),
+    storySort(a: any[], b: any[]) {
+      const categoryA = a[1].kind.split('|')[0];
+      const categoryB = b[1].kind.split('|')[0];
+
+      if (categories.indexOf(categoryA) === categories.indexOf(categoryB)) {
+        return 0;
+      }
+
+      return categories.indexOf(categoryA) - categories.indexOf(categoryB);
+    },
   },
 });
 

diff --git a/package.json b/package.json
@@ -68,9 +68,9 @@
     "@babel/preset-env": "7.5.5",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.3.3",
-    "@storybook/addon-actions": "5.1.11",
-    "@storybook/html": "5.1.11",
-    "@storybook/theming": "5.1.11",
+    "@storybook/addon-actions": "5.2.3",
+    "@storybook/html": "5.2.3",
+    "@storybook/theming": "5.2.3",
     "@types/algoliasearch": "3.30.16",
     "@types/classnames": "^2.2.7",
     "@types/enzyme": "^3.1.15",

diff --git a/stories/analytics.stories.js b/stories/analytics.stories.js
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('Analytics', module).add(
+storiesOf('Metadata|Analytics', module).add(
   'default',
   withHits(({ search, container, instantsearch }) => {
     const description = document.createElement('p');

diff --git a/stories/autocomplete.stories.ts b/stories/autocomplete.stories.ts
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('Autocomplete', module).add(
+storiesOf('Basics|Autocomplete', module).add(
   'default',
   withHits(({ search, container, instantsearch }) => {
     const instantSearchAutocomplete = document.createElement('div');

diff --git a/stories/breadcrumb.stories.js b/stories/breadcrumb.stories.js
@@ -13,7 +13,7 @@ const virtualHierarchicalMenu = (args = {}) =>
     ...args,
   });
 
-storiesOf('Breadcrumb', module)
+storiesOf('Metadata|Breadcrumb', module)
   .add(
     'default',
     withHits(

diff --git a/stories/clear-refinements.stories.js b/stories/clear-refinements.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('ClearRefinements', module)
+storiesOf('Refinements|ClearRefinements', module)
   .add(
     'default',
     withHits(

diff --git a/stories/configure.stories.js b/stories/configure.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 
-storiesOf('Configure', module)
+storiesOf('Basics|Configure', module)
   .add(
     'Force 1 hit per page',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/current-refinements.stories.js b/stories/current-refinements.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('CurrentRefinements', module)
+storiesOf('Refinements|CurrentRefinements', module)
   .add(
     'default',
     withHits(

diff --git a/stories/geo-search.stories.js b/stories/geo-search.stories.js
@@ -34,7 +34,7 @@ const injectGoogleMaps = fn => {
   );
 };
 
-const stories = storiesOf('GeoSearch', module);
+const stories = storiesOf('Results|GeoSearch', module);
 const initialZoom = 12;
 const initialPosition = {
   lat: 40.71,

diff --git a/stories/hierarchical-menu.stories.js b/stories/hierarchical-menu.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 
-storiesOf('HierarchicalMenu', module)
+storiesOf('Refinements|HierarchicalMenu', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/hits-per-page.stories.js b/stories/hits-per-page.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 
-storiesOf('HitsPerPage', module)
+storiesOf('Pagination|HitsPerPage', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/hits.stories.js b/stories/hits.stories.js
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { withHits } from '../.storybook/decorators';
 import insights from '../src/helpers/insights';
 
-storiesOf('Hits', module)
+storiesOf('Results|Hits', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/index.stories.ts b/stories/index.stories.ts
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 import { hitsItemTemplate } from '../.storybook/playgrounds/default';
 
-storiesOf('Index', module)
+storiesOf('Basics|Index', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/infinite-hits.stories.js b/stories/infinite-hits.stories.js
@@ -3,7 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { withHits } from '../.storybook/decorators';
 import insights from '../src/helpers/insights';
 
-storiesOf('InfiniteHits', module)
+storiesOf('Results|InfiniteHits', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/instantsearch.stories.js b/stories/instantsearch.stories.js
@@ -1,9 +1,9 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('InstantSearch', module)
+storiesOf('Basics|InstantSearch', module)
   .add(
-    'with searchfunction to prevent search',
+    'with searchFunction to prevent search',
     withHits(() => {}, {
       searchFunction: helper => {
         const query = helper.state.query;
@@ -27,4 +27,20 @@ storiesOf('InstantSearch', module)
         },
       },
     })
+  )
+  .add(
+    'with refresh to reload',
+    withHits(({ search, container, instantsearch }) => {
+      const button = document.createElement('button');
+      button.addEventListener('click', () => search.refresh());
+      button.innerHTML = 'Refresh InstantSearch';
+      const searchBoxContainer = document.createElement('div');
+
+      search.addWidget(
+        instantsearch.widgets.searchBox({ container: searchBoxContainer })
+      );
+
+      container.appendChild(button);
+      container.appendChild(searchBoxContainer);
+    })
   );
diff --git a/stories/menu-select.stories.js b/stories/menu-select.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 
-storiesOf('MenuSelect', module)
+storiesOf('Refinements|MenuSelect', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/menu.stories.js b/stories/menu.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 
-storiesOf('Menu', module)
+storiesOf('Refinements|Menu', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/numeric-menu.stories.js b/stories/numeric-menu.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('NumericMenu', module)
+storiesOf('Refinements|NumericMenu', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/pagination.stories.js b/stories/pagination.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('Pagination', module)
+storiesOf('Pagination|Pagination', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/panel.stories.js b/stories/panel.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('Panel', module)
+storiesOf('Basics|Panel', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/powered-by.stories.js b/stories/powered-by.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('PoweredBy', module)
+storiesOf('Metadata|PoweredBy', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/query-rule-context.stories.ts b/stories/query-rule-context.stories.ts
@@ -17,7 +17,7 @@ const searchOptions = {
   playground: moviesPlayground,
 };
 
-storiesOf('QueryRuleContext', module)
+storiesOf('Metadata|QueryRuleContext', module)
   .add(
     'default',
     withHits(({ search, container }) => {

diff --git a/stories/query-rule-custom-data.stories.ts b/stories/query-rule-custom-data.stories.ts
@@ -16,7 +16,7 @@ const searchOptions = {
   playground: moviesPlayground,
 };
 
-storiesOf('QueryRuleCustomData', module)
+storiesOf('Metadata|QueryRuleCustomData', module)
   .add(
     'default',
     withHits(({ search, container }) => {

diff --git a/stories/range-input.stories.js b/stories/range-input.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('RangeInput', module)
+storiesOf('Refinements|RangeInput', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/range-slider.stories.js b/stories/range-slider.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('RangeSlider', module)
+storiesOf('Refinements|RangeSlider', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/rating-menu.stories.js b/stories/rating-menu.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('RatingMenu', module)
+storiesOf('Refinements|RatingMenu', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/refinement-list.stories.js b/stories/refinement-list.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('RefinementList', module)
+storiesOf('Refinements|RefinementList', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/reload.stories.js b/stories/reload.stories.js
diff --git a/stories/search-box.stories.js b/stories/search-box.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('SearchBox', module)
+storiesOf('Basics|SearchBox', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/sort-by.stories.js b/stories/sort-by.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 
-storiesOf('SortBy', module)
+storiesOf('Sorting|SortBy', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/stats.stories.js b/stories/stats.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 
-storiesOf('Stats', module).add(
+storiesOf('Metadata|Stats', module).add(
   'default',
   withHits(({ search, container, instantsearch }) => {
     search.addWidgets([instantsearch.widgets.stats({ container })]);

diff --git a/stories/toggleRefinement.stories.js b/stories/toggleRefinement.stories.js
@@ -1,7 +1,7 @@
 import { storiesOf } from '@storybook/html';
 import { withHits, withLifecycle } from '../.storybook/decorators';
 
-storiesOf('ToggleRefinement', module)
+storiesOf('Refinements|ToggleRefinement', module)
   .add(
     'default',
     withHits(({ search, container, instantsearch }) => {

diff --git a/stories/voice-search.stories.ts b/stories/voice-search.stories.ts
@@ -2,7 +2,7 @@ import { storiesOf } from '@storybook/html';
 import { withHits } from '../.storybook/decorators';
 import voiceSearch from '../src/widgets/voice-search/voice-search';
 
-storiesOf('VoiceSearch', module)
+storiesOf('Basics|VoiceSearch', module)
   .add(
     'default',
     withHits(({ search, container }) => {