docs(stories): use function for all templates

algolia · Apr 7, 2023 · 456f7b8 · 456f7b8
1 parent 8edb3e4
commit 456f7b8
Show file tree

Hide file tree

Showing 22 changed files with 232 additions and 245 deletions.
diff --git a/packages/instantsearch.js/.storybook/playgrounds/default.ts b/packages/instantsearch.js/.storybook/playgrounds/default.ts
@@ -1,23 +1,22 @@
+import { HitsTemplates } from '../../src/widgets/hits/hits';
 import { Playground } from '../decorators';
 
-export const hitsItemTemplate = `
-<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>
+export const hitsItemTemplate: HitsTemplates['item'] = (
+ hit,
+ { html, components }
+) => html`
+ <div class="hits-image" style="background-image: url(${hit.image})"></div>
+ <article>
+ <header>
+ <strong>${components.Highlight({ hit, attribute: 'name' })}</strong>
+ </header>
+ <p>${components.Snippet({ hit, attribute: 'description' })}</p>
+ <footer>
+ <p>
+ <strong>${hit.price}$</strong>
+ </p>
+ </footer>
+ </article>
 `;
 
 const instantSearchPlayground: Playground = function instantSearchPlayground({
@@ -33,7 +32,7 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
  typeof instantsearch.widgets.refinementList
  >({
  templates: {
- header: 'Brands',
+ header: () => 'Brands',
  },
  })(instantsearch.widgets.refinementList);
 
@@ -49,7 +48,9 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
 
  const priceMenu = instantsearch.widgets.panel<
  typeof instantsearch.widgets.numericMenu
- >({ templates: { header: 'Price' } })(instantsearch.widgets.numericMenu);
+ >({ templates: { header: () => 'Price' } })(
+ instantsearch.widgets.numericMenu
+ );
 
  search.addWidgets([
  priceMenu({
@@ -72,7 +73,7 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
  typeof instantsearch.widgets.ratingMenu
  >({
  templates: {
- header: 'Rating',
+ header: () => 'Rating',
  },
  })(instantsearch.widgets.ratingMenu);
 
@@ -127,6 +128,14 @@ const instantSearchPlayground: Playground = function instantSearchPlayground({
  instantsearch.widgets.pagination({
  container: pagination,
  }),
+ instantsearch.widgets.hitsPerPage({
+ container: rightPanel.appendChild(document.createElement('div')),
+ items: [
+ { label: '16 per page', value: 16 },
+ { label: '32 per page', value: 32 },
+ { label: '64 per page', value: 64, default: true },
+ ],
+ }),
  ]);
 
  const insights = instantsearch.middlewares.createInsightsMiddleware({

diff --git a/packages/instantsearch.js/.storybook/playgrounds/movies.ts b/packages/instantsearch.js/.storybook/playgrounds/movies.ts
@@ -13,7 +13,7 @@ const demoQueryRulesPlayground: Playground = function demoQueryRulesPlayground({
  typeof instantsearch.widgets.refinementList
  >({
  templates: {
- header: 'Genres',
+ header: () => 'Genres',
  },
  })(instantsearch.widgets.refinementList);
 
@@ -53,16 +53,18 @@ const demoQueryRulesPlayground: Playground = function demoQueryRulesPlayground({
  instantsearch.widgets.hits({
  container: hits,
  templates: {
- item: `
-<div
- class="hits-image"
- style="background-image: url({{image}})"
-></div>
-<article>
- <header>
- <strong>{{#helpers.highlight}}{ "attribute": "title" }{{/helpers.highlight}}</strong>
- </header>
-</article>
+ item: (hit, { html, components }) => html`
+ <div
+ class="hits-image"
+ style="background-image: url(${hit.image})"
+ ></div>
+ <article>
+ <header>
+ <strong
+ >${components.Highlight({ attribute: 'title', hit })}</strong
+ >
+ </header>
+ </article>
  `,
  },
  cssClasses: {

diff --git a/packages/instantsearch.js/stories/answers.stories.ts b/packages/instantsearch.js/stories/answers.stories.ts
@@ -74,13 +74,11 @@ storiesOf('Results/Answers', module)
  queryLanguages: ['en'],
  attributesForPrediction: ['description'],
  templates: {
- header: ({ hits }) => {
- return hits.length === 0 ? '' : `<p>Answers</p>`;
- },
- loader: `loading...`,
- item: (hit) => {
- return `<p>${hit._answer.extract}</p>`;
+ header: ({ hits }, { html }) => {
+ return hits.length === 0 ? '' : html`<p>Answers</p>`;
  },
+ loader: () => `loading...`,
+ item: (hit, { html }) => html`<p>${hit._answer.extract}</p>`,
  },
  }),
  ]);
@@ -104,24 +102,22 @@ storiesOf('Results/Answers', module)
  root: 'my-Answers',
  },
  templates: {
- loader: `
- <div class="card-skeleton">
- <div class="animated-background">
- <div class="skel-mask-container">
- <div class="skel-mask skel-mask-1"></div>
- <div class="skel-mask skel-mask-2"></div>
- <div class="skel-mask skel-mask-3"></div>
+ loader: (_, { html }) => html`
+ <div class="card-skeleton">
+ <div class="animated-background">
+ <div class="skel-mask-container">
+ <div class="skel-mask skel-mask-1"></div>
+ <div class="skel-mask skel-mask-2"></div>
+ <div class="skel-mask skel-mask-3"></div>
+ </div>
  </div>
  </div>
- </div>
  `,
- item: (hit) => {
- return `
- <p class="title one-line">${hit.title}</p>
- <div class="separator"></div>
- <p class="description three-lines">${hit._answer.extract}</p>
- `;
- },
+ item: (hit, { html }) => html`
+ <p class="title one-line">${hit.title}</p>
+ <div class="separator"></div>
+ <p class="description three-lines">${hit._answer.extract}</p>
+ `,
  },
  }),
  ]);

diff --git a/packages/instantsearch.js/stories/breadcrumb.stories.ts b/packages/instantsearch.js/stories/breadcrumb.stories.ts
@@ -69,7 +69,7 @@ storiesOf('Metadata/Breadcrumb', module)
  'hierarchicalCategories.lvl2',
  ],
  templates: {
- separator: ' + ',
+ separator: () => ' + ',
  },
  }),
  ]);
@@ -105,7 +105,7 @@ storiesOf('Metadata/Breadcrumb', module)
  'hierarchicalCategories.lvl2',
  ],
  templates: {
- home: 'Home Page',
+ home: () => 'Home Page',
  },
  }),
  ]);

diff --git a/packages/instantsearch.js/stories/clear-refinements.stories.ts b/packages/instantsearch.js/stories/clear-refinements.stories.ts
@@ -32,7 +32,7 @@ storiesOf('Refinements/ClearRefinements', module)
  container,
  includedAttributes: ['query'],
  templates: {
- resetLabel: 'Clear query',
+ resetLabel: () => 'Clear query',
  },
  }),
  ]);
@@ -47,7 +47,7 @@ storiesOf('Refinements/ClearRefinements', module)
  container,
  excludedAttributes: [],
  templates: {
- resetLabel: 'Clear refinements and query',
+ resetLabel: () => 'Clear refinements and query',
  },
  }),
  ]);

diff --git a/packages/instantsearch.js/stories/configure-related-items.stories.ts b/packages/instantsearch.js/stories/configure-related-items.stories.ts
@@ -106,20 +106,18 @@ storiesOf('Basics/ConfigureRelatedItems', module).add(
  instantsearch.widgets.hits({
  container: widgetParams.container,
  templates: {
- item(item) {
- return `
- <li class="ais-RelatedHits-item">
- <div class="ais-RelatedHits-item-image">
- <img src="${item.image}" alt="${item.name}">
- </div>
-
- <div class="ais-RelatedHits-item-title">
- <h4>${item.name}</h4>
- </div>
- </li>
- `;
- },
- empty: '',
+ item: (item, { html }) => html`
+ <li class="ais-RelatedHits-item">
+ <div class="ais-RelatedHits-item-image">
+ <img src="${item.image}" alt="${item.name}" />
+ </div>
+
+ <div class="ais-RelatedHits-item-title">
+ <h4>${item.name}</h4>
+ </div>
+ </li>
+ `,
+ empty: () => '',
  },
  }),
  ]),
@@ -134,26 +132,26 @@ storiesOf('Basics/ConfigureRelatedItems', module).add(
  instantsearch.widgets.hits({
  container: productContainer,
  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>
-`,
- empty: '',
+ item: (hit, { html, components }) => html`
+ <div
+  class="hits-image"
+  style="background-image: url(${hit.image})"
+ ></div>
+ <article>
+  <header>
+  <strong>
+  ${components.Highlight({ attribute: 'name', hit })})}
+  </strong>
+  </header>
+  <p>${components.Snippet({ attribute: 'description', hit })})}</p>
+  <footer>
+  <p>
+  <strong>${hit.price}$</strong>
+  </p>
+  </footer>
+ </article>
+ `,
+ empty: () => '',
  },
  cssClasses: {
  item: 'hits-item',

diff --git a/packages/instantsearch.js/stories/current-refinements.stories.ts b/packages/instantsearch.js/stories/current-refinements.stories.ts
@@ -141,7 +141,7 @@ storiesOf('Refinements/CurrentRefinements', module)
  container: toggleRefinementContainer,
  attribute: 'free_shipping',
  templates: {
- labelText: 'Free Shipping',
+ labelText: () => 'Free Shipping',
  },
  }),
  ]);

diff --git a/packages/instantsearch.js/stories/dynamic-widgets.stories.ts b/packages/instantsearch.js/stories/dynamic-widgets.stories.ts
@@ -34,7 +34,7 @@ storiesOf('Basics/DynamicWidgets', module)
  }),
  (container) =>
  instantsearch.widgets.panel({
- templates: { header: 'hierarchy' },
+ templates: { header: () => 'hierarchy' },
  })(instantsearch.widgets.hierarchicalMenu)({
  container,
  attributes: [
@@ -79,7 +79,7 @@ storiesOf('Basics/DynamicWidgets', module)
  }),
  (container) =>
  instantsearch.widgets.panel({
- templates: { header: 'hierarchy' },
+ templates: { header: () => 'hierarchy' },
  })(instantsearch.widgets.hierarchicalMenu)({
  container,
  attributes: [