chore(storybook): migrate dev-novel to storybook (algolia#3376)

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-options/register';
+import '@storybook/addon-actions/register';

.storybook/config.js

@@ -0,0 +1,18 @@
+import { addDecorator, configure } from '@storybook/html';
+import { withOptions } from '@storybook/addon-options';
+import './style.css';
+
+addDecorator(
+  withOptions({
+    name: 'instantsearch.js',
+    url: 'https://github.com/algolia/instantsearch.js',
+  })
+);
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach(filename => req(filename));
+}
+
+configure(loadStories, module);

.storybook/decorators.js

@@ -0,0 +1,186 @@
+import { action } from '@storybook/addon-actions';
+import algoliasearch from 'algoliasearch/lite';
+import instantsearch from '../src/index';
+
+export const withHits = (storyFn, searchOptions = {}) => () => {
+  const {
+    appId = 'latency',
+    apiKey = '6be0576ff61c053d5f9a3225e2a90f76',
+    indexName = 'instant_search',
+    searchParameters = {},
+    ...instantsearchOptions
+  } = searchOptions;
+
+  const urlLogger = action('Routing state');
+  const search = instantsearch({
+    indexName,
+    searchClient: algoliasearch(appId, apiKey),
+    searchParameters: {
+      hitsPerPage: 4,
+      attributesToSnippet: ['description:15'],
+      snippetEllipsisText: '[…]',
+      ...searchParameters,
+    },
+    routing: {
+      router: {
+        write: routeState => {
+          urlLogger(JSON.stringify(routeState, null, 2));
+        },
+        read: () => ({}),
+        createURL: () => '',
+        onUpdate: () => {},
+      },
+    },
+    ...instantsearchOptions,
+  });
+
+  const containerElement = document.createElement('div');
+
+  // Add the preview container to add the stories in
+  const previewElement = document.createElement('div');
+  previewElement.classList.add('container', 'container-preview');
+  containerElement.appendChild(previewElement);
+
+  // Add the playground container to add widgets into
+  const playgroundElement = document.createElement('div');
+  playgroundElement.classList.add('container', 'container-playground');
+  containerElement.appendChild(playgroundElement);
+
+  const leftPanelPlaygroundElement = document.createElement('div');
+  leftPanelPlaygroundElement.classList.add('panel-left');
+  playgroundElement.appendChild(leftPanelPlaygroundElement);
+
+  const rightPanelPlaygroundElement = document.createElement('div');
+  rightPanelPlaygroundElement.classList.add('panel-right');
+  playgroundElement.appendChild(rightPanelPlaygroundElement);
+
+  // Add widgets to the playground
+  const refinementList = document.createElement('div');
+  leftPanelPlaygroundElement.appendChild(refinementList);
+
+  const brandList = instantsearch.widgets.panel({
+    templates: {
+      header: 'Brands',
+    },
+  })(instantsearch.widgets.refinementList);
+
+  search.addWidget(
+    brandList({
+      container: refinementList,
+      attribute: 'brand',
+    })
+  );
+
+  const numericMenu = document.createElement('div');
+  leftPanelPlaygroundElement.appendChild(numericMenu);
+
+  const priceMenu = instantsearch.widgets.panel({
+    templates: {
+      header: 'Price',
+    },
+  })(instantsearch.widgets.numericMenu);
+
+  search.addWidget(
+    priceMenu({
+      container: numericMenu,
+      attribute: 'price',
+      items: [
+        { label: 'All' },
+        { label: '≤ 10$', end: 10 },
+        { label: '10–100$', start: 10, end: 100 },
+        { label: '100–500$', start: 100, end: 500 },
+        { label: '≥ 500$', start: 500 },
+      ],
+    })
+  );
+
+  const ratingMenu = document.createElement('div');
+  leftPanelPlaygroundElement.appendChild(ratingMenu);
+
+  const ratingList = instantsearch.widgets.panel({
+    templates: {
+      header: 'Rating',
+    },
+  })(instantsearch.widgets.ratingMenu);
+
+  search.addWidget(
+    ratingList({
+      container: ratingMenu,
+      attribute: 'rating',
+    })
+  );
+
+  const searchBox = document.createElement('div');
+  searchBox.classList.add('searchbox');
+  rightPanelPlaygroundElement.appendChild(searchBox);
+
+  search.addWidget(
+    instantsearch.widgets.searchBox({
+      container: searchBox,
+      placeholder: 'Search here…',
+    })
+  );
+
+  const stats = document.createElement('div');
+  stats.classList.add('stats');
+  rightPanelPlaygroundElement.appendChild(stats);
+
+  search.addWidget(
+    instantsearch.widgets.stats({
+      container: stats,
+    })
+  );
+
+  const hits = document.createElement('div');
+  hits.classList.add('hits');
+  rightPanelPlaygroundElement.appendChild(hits);
+
+  search.addWidget(
+    instantsearch.widgets.hits({
+      container: hits,
+      templates: {
+        item: `
+<div
+  class="hits-image"
+  style="background-image: url({{image}})"
+></div>
+<article>
+  <header>
+    <strong>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</strong>
+  </header>
+  <p>
+    {{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}}
+  </p>
+  <footer>
+    <p>
+      <strong>{{price}}$</strong>
+    </p>
+  </footer>
+</article>
+          `,
+      },
+      cssClasses: {
+        item: 'hits-item',
+      },
+    })
+  );
+
+  const pagination = document.createElement('div');
+  rightPanelPlaygroundElement.appendChild(pagination);
+
+  search.addWidget(
+    instantsearch.widgets.pagination({
+      container: pagination,
+    })
+  );
+
+  storyFn({
+    container: previewElement,
+    instantsearch,
+    search,
+  });
+
+  search.start();
+
+  return containerElement;
+};

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/algolia.min.css">

storybook/style.css → .storybook/style.css

@@ -1,53 +1,104 @@
-/* Layout */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
+    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 14px;
+  margin: 10px;
+}
+
+.container {
+  position: relative;
+  padding: 50px 40px 40px;
+}
 
-#widget-display {
+.container::after {
+  font-size: 13px;
+  top: 0;
+  left: 0;
+  color: #999999;
+  padding: 4px 6px;
+  line-height: 1em;
+  position: absolute;
+  background-color: #f3f3f3;
   border: solid 1px #e4e4e4;
-  border-radius: 5px 5px 0 0;
-  border-bottom: none;
-  margin: 5px 5px 0 5px;
-  min-height: 200px;
-  padding: 50px 40px;
+  margin: -1px 0px 0px -1px;
 }
 
-#results-display {
+/* Preview */
+
+.container-preview {
   border: solid 1px #e4e4e4;
-  border-radius: 0 0 5px 5px;
-  display: flex;
-  flex-direction: column;
-  margin: 0 5px 5px 5px;
-  min-height: 200px;
-  padding: 50px 40px 40px;
+  border-radius: 5px 5px 0px 0px;
 }
 
-/* Hit */
+.container-preview::after {
+  content: 'Preview';
+  border-radius: 4px 0 0;
+}
 
-.hit {
-  align-items: center;
+/* Playground */
+
+.container-playground {
+  border-left: solid 1px #e4e4e4;
+  border-right: solid 1px #e4e4e4;
+  border-bottom: solid 1px #e4e4e4;
   display: flex;
-  padding: 5px 0;
 }
 
-.hit:hover {
-  cursor: pointer;
+.container-playground::after {
+  content: 'Playground';
 }
 
-.hit--active {
-  background-color: #3369e7;
-  color: white;
+.panel-left {
+  min-width: 160px;
+  margin-right: 20px;
 }
 
-.hit .hit-picture img {
-  height: auto;
-  width: 80px;
+.panel-right {
+  flex: 1;
 }
 
-.hit .hit-content {
-  padding: 0 10px;
+.stats {
+  margin-top: 0.5rem;
+  font-style: italic;
 }
 
-.hit .hit-type {
-  color: #888;
-  font-size: 13px;
+.hits {
+  list-style: none;
+  padding: 0;
+  margin: 25px 0;
+}
+
+.hits-item {
+  display: flex;
+  align-items: center;
+  border: none;
+  box-shadow: none;
+  width: 100%;
+  min-height: 155px;
+}
+
+.hits-item:not(:last-of-type) {
+  border-bottom: 1px solid #eee;
+}
+
+.hits-item:last-child {
+  margin-bottom: 0;
+}
+
+.hits-image {
+  width: 100px;
+  height: 100px;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: 50% 50%;
+  flex-shrink: 0;
+  margin-right: 1rem;
+}
+
+/* Panel */
+
+.ais-Panel {
+  margin-bottom: 25px;
 }
 
 /* GeoSearch */