feat(js-widget): add example (algolia/create-instantsearch-app#461)

* add an example * tweak spacing * update tests
algolia · Jul 23, 2021 · 27cf481 · 27cf481
1 parent 090823f
commit 27cf481
Show file tree

Hide file tree

Showing 9 changed files with 157 additions and 11 deletions.
diff --git a/e2e/__snapshots__/templates.test.js.snap b/e2e/__snapshots__/templates.test.js.snap
@@ -3361,12 +3361,16 @@ exports[`Templates InstantSearch.js widget File content: CONTRIBUTING.md 1`] = `
 
 ## Test
 
+The tests are written in \`/src/__tests__\` and use Jest.
+
 \`\`\`bash
 npm test
 # or
 yarn test
 \`\`\`
 
+An example can be found in the \`example\` directory.
+
 ## Build
 
 \`\`\`bash
@@ -3660,6 +3664,74 @@ module.exports = (api) => {
 };"
 `;
 
+exports[`Templates InstantSearch.js widget File content: example/index.css 1`] = `
+"body {
+  font-family: sans-serif;
+}
+
+[class^=ais-] {
+  font-size: 1em;
+}"
+`;
+
+exports[`Templates InstantSearch.js widget File content: example/index.html 1`] = `
+"<!DOCTYPE html>
+<html lang=\\"en\\">
+<head>
+  <meta charset=\\"UTF-8\\">
+  <meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">
+  <meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">
+  <link rel=\\"stylesheet\\" href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css\\">
+  <link rel=\\"stylesheet\\" href=\\"style.css\\">
+  <title>date-picker example</title>
+</head>
+<body>
+  <div id=\\"search-box\\"></div>
+  <div id=\\"example\\"></div>
+  <div id=\\"hits\\"></div>
+  <script src=\\"index.ts\\"></script>
+</body>
+</html>"
+`;
+
+exports[`Templates InstantSearch.js widget File content: example/index.ts 1`] = `
+"import algoliasearch from 'algoliasearch/lite';
+import instantsearch from 'instantsearch.js/es';
+import { configure, hits, searchBox } from 'instantsearch.js/es/widgets';
+
+import { datePicker } from '../src';
+
+const search = instantsearch({
+  indexName: 'instant_search',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
+});
+
+search.addWidgets([
+  datePicker({ container: '#example' }),
+
+  searchBox({ container: '#search-box' }),
+  configure({
+    attributesToSnippet: ['description:10'],
+    snippetEllipsisText: '[…]',
+  }),
+  hits({
+    container: '#hits',
+    templates: {
+      item: \`
+      <p>
+        
+      </p>
+      <small>
+        
+      </small>
+    \`,
+    },
+  }),
+]);
+
+search.start();"
+`;
+
 exports[`Templates InstantSearch.js widget File content: package.json 1`] = `
 "{
   \\"name\\": \\"@algolia/instantsearch-widget-date-picker\\",
@@ -3843,9 +3915,9 @@ export const connectDatePicker: DatePickerConnector = function connectDatePicker
 `;
 
 exports[`Templates InstantSearch.js widget File content: src/index.ts 1`] = `
-"export { datePicker } from './widget';
-export { connectDatePicker } from './connector';
-export { createDatePickerRenderer } from './renderer';"
+"export * from './widget';
+export * from './connector';
+export * from './renderer';"
 `;
 
 exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = `
@@ -3861,7 +3933,6 @@ exports[`Templates InstantSearch.js widget File content: src/renderer.ts 1`] = `
 export const createDatePickerRenderer: DatePickerRendererCreator = ({
   container,
 }) => {
-
   const containerNode: Element =
     typeof container === 'string'
       ? document.querySelector(container)!
@@ -3893,6 +3964,7 @@ export const createDatePickerRenderer: DatePickerRendererCreator = ({
       /*
        * Rendering
        */
+      // TODO: use renderOptions to create this widget's DOM
     },
     /*
      * The dispose function passed to the connector
@@ -3907,7 +3979,11 @@ export const createDatePickerRenderer: DatePickerRendererCreator = ({
 `;
 
 exports[`Templates InstantSearch.js widget File content: src/types.ts 1`] = `
-"import type { Renderer, Connector, WidgetFactory } from 'instantsearch.js';
+"import type {
+  Renderer,
+  Connector,
+  WidgetFactory,
+} from 'instantsearch.js/es/types';
 
 /*
  * Parameters send only to the widget creator function
@@ -4055,6 +4131,9 @@ Array [
   "LICENSE.md",
   "README.md",
   "babel.config.cjs",
+  "example/index.css",
+  "example/index.html",
+  "example/index.ts",
   "package.json",
   "src/connector.ts",
   "src/index.ts",

diff --git a/src/templates/InstantSearch.js widget/CONTRIBUTING.md b/src/templates/InstantSearch.js widget/CONTRIBUTING.md
@@ -2,12 +2,16 @@
 
 ## Test
 
+The tests are written in `/src/__tests__` and use Jest.
+
 ```bash
 npm test
 # or
 yarn test
 ```
 
+An example can be found in the `example` directory.
+
 ## Build
 
 ```bash

diff --git a/src/templates/InstantSearch.js widget/README.md b/src/templates/InstantSearch.js widget/README.md
@@ -1,4 +1,4 @@
-# {{name}}
+# {{ name }}
 
 {{ description }}
 

diff --git a/src/templates/InstantSearch.js widget/example/index.css b/src/templates/InstantSearch.js widget/example/index.css
@@ -0,0 +1,7 @@
+body {
+  font-family: sans-serif;
+}
+
+[class^=ais-] {
+  font-size: 1em;
+}
diff --git a/src/templates/InstantSearch.js widget/example/index.html b/src/templates/InstantSearch.js widget/example/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+  <link rel="stylesheet" href="style.css">
+  <title>{{ name }} example</title>
+</head>
+<body>
+  <div id="search-box"></div>
+  <div id="example"></div>
+  <div id="hits"></div>
+  <script src="index.ts"></script>
+</body>
+</html>
diff --git a/src/templates/InstantSearch.js widget/example/index.ts.hbs b/src/templates/InstantSearch.js widget/example/index.ts.hbs
@@ -0,0 +1,35 @@
+import algoliasearch from 'algoliasearch/lite';
+import instantsearch from 'instantsearch.js/es';
+import { configure, hits, searchBox } from 'instantsearch.js/es/widgets';
+
+import { {{ camelCaseName }} } from '../src';
+
+const search = instantsearch({
+  indexName: 'instant_search',
+  searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
+});
+
+search.addWidgets([
+  {{ camelCaseName }}({ container: '#example' }),
+
+  searchBox({ container: '#search-box' }),
+  configure({
+    attributesToSnippet: ['description:10'],
+    snippetEllipsisText: '[…]',
+  }),
+  hits({
+    container: '#hits',
+    templates: {
+      item: `
+      <p>
+        {{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}
+      </p>
+      <small>
+        {{#helpers.snippet}}{ "attribute": "description" }{{/helpers.snippet}}
+      </small>
+    `,
+    },
+  }),
+]);
+
+search.start();
diff --git a/src/templates/InstantSearch.js widget/src/index.ts.hbs b/src/templates/InstantSearch.js widget/src/index.ts.hbs
@@ -1,3 +1,3 @@
-export { {{ camelCaseName }} } from './widget';
-export { connect{{ pascalCaseName }} } from './connector';
-export { create{{ pascalCaseName }}Renderer } from './renderer';
+export * from './widget';
+export * from './connector';
+export * from './renderer';
diff --git a/src/templates/InstantSearch.js widget/src/renderer.ts.hbs b/src/templates/InstantSearch.js widget/src/renderer.ts.hbs
@@ -10,7 +10,6 @@ import type { {{ pascalCaseName }}RendererCreator } from './types';
 export const create{{ pascalCaseName }}Renderer: {{ pascalCaseName }}RendererCreator = ({
   container,
 }) => {
-
   const containerNode: Element =
     typeof container === 'string'
       ? document.querySelector(container)!
@@ -42,6 +41,7 @@ export const create{{ pascalCaseName }}Renderer: {{ pascalCaseName }}RendererCre
       /*
        * Rendering
        */
+      // TODO: use renderOptions to create this widget's DOM
     },
     /*
      * The dispose function passed to the connector

diff --git a/src/templates/InstantSearch.js widget/src/types.ts.hbs b/src/templates/InstantSearch.js widget/src/types.ts.hbs
@@ -1,4 +1,8 @@
-import type { Renderer, Connector, WidgetFactory } from 'instantsearch.js';
+import type {
+  Renderer,
+  Connector,
+  WidgetFactory,
+} from 'instantsearch.js/es/types';
 
 /*
  * Parameters send only to the widget creator function