create-instantsearch-app 5.2.2 → 6.2.0

package/README.md

@@ -162,11 +162,9 @@ Create InstantSearch App is [MIT licensed](LICENSE).
 
 [version-svg]: https://img.shields.io/npm/v/create-instantsearch-app.svg?style=flat-square
 [package-url]: https://npmjs.org/package/create-instantsearch-app
-[ci-svg]: https://img.shields.io/travis/algolia/create-instantsearch-app/master.svg?style=flat-square
-[ci-url]: https://travis-ci.org/algolia/create-instantsearch-app
 [ci-svg]: https://img.shields.io/circleci/project/github/algolia/create-instantsearch-app.svg?style=flat-square
 [ci-url]: https://circleci.com/gh/algolia/create-instantsearch-app
-[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
+[license-image]: https://img.shields.io/badge/license-MIT-green.svg?style=flat-square
 [license-url]: LICENSE
 
 <!-- Links -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-instantsearch-app",
-  "version": "5.2.2",
+  "version": "6.2.0",
   "license": "MIT",
   "description": "⚡️ Build InstantSearch apps at the speed of thought",
   "keywords": [
@@ -15,7 +15,7 @@
   },
   "scripts": {
     "start": "node src/cli/index.js",
-    "test": "jest src",
+    "test": "jest --no-color src",
     "test:e2e:templates": "jest e2e/templates.test.js",
     "test:e2e:installs": "jest e2e/installs.test.js",
     "test:e2e": "yarn run test:e2e:templates && yarn run test:e2e:installs",
@@ -25,8 +25,7 @@
     "doctoc": "doctoc --maxlevel 3 README.md CONTRIBUTING.md docs/",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "release-templates": "node ./scripts/release-templates",
-    "release": "release-it",
-    "release:beta": "release-it --preRelease=beta"
+    "release": "shipjs prepare"
   },
   "files": [
     "index.js",
@@ -67,7 +66,7 @@
     "eslint-plugin-prettier": "3.1.2",
     "jest": "25.1.0",
     "jest-image-snapshot": "2.12.0",
-    "release-it": "10.4.5",
+    "shipjs": "0.24.4",
     "walk-sync": "2.0.2"
   }
 }

package/src/api/__tests__/__snapshots__/index.test.js.snap

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Options with invalid name throws 1`] = `
-"Could not create a project called \\"./WrongNpmName\\" because of npm naming restrictions.
+"Could not create a project called \\"./WrongNpmName\\" because of npm naming restrictions.
   - name cannot start with a period
   - name can only contain URL-friendly characters"
 `;
 
-exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
+exports[`Options with unknown template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
 
-exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
+exports[`Options with wrong template path throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
 
 exports[`Options without path throws 1`] = `"The option \`path\` is required."`;
 
-exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;
+exports[`Options without template throws 1`] = `"The template directory must contain a configuration file \`.template.js\` or must be one of those: Angular InstantSearch, Autocomplete, Autocomplete.js 0, InstantSearch Android, InstantSearch iOS, InstantSearch.js, InstantSearch.js 2, InstantSearch.js widget, JavaScript Client, JavaScript Helper, JavaScript Helper 2, React InstantSearch, React InstantSearch Hooks, React InstantSearch Hooks Native, React InstantSearch Native, React InstantSearch widget, Vue InstantSearch, Vue InstantSearch 1, Vue InstantSearch 2, Vue InstantSearch with Vue 3"`;

package/src/templates/Angular InstantSearch/src/app/app.component.html.hbs

@@ -12,11 +12,14 @@
 
 <div class="container">
   <ais-instantsearch [config]="config">
+    <ais-configure [searchParameters]="{ hitsPerPage: 8 }"></ais-configure>
     <div class="search-panel">
       {{#if attributesForFaceting}}
       <div class="search-panel__filters">
         {{#each attributesForFaceting}}
-        <ais-refinement-list attribute="{{this}}"></ais-refinement-list>
+        <ais-panel header="{{this}}">
+          <ais-refinement-list attribute="{{this}}"></ais-refinement-list>
+        </ais-panel>
         {{/each}}
       </div>
 

package/src/templates/InstantSearch.js/index.html.hbs

@@ -6,10 +6,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <meta name="theme-color" content="#000000">
 
-  <link rel="manifest" href="./manifest.webmanifest">
   <link rel="shortcut icon" href="./favicon.png">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
   <link rel="stylesheet" href="./src/index.css">
   <link rel="stylesheet" href="./src/app.css">
 
@@ -44,10 +43,9 @@
       <div class="search-panel__results">
         <div id="searchbox"></div>
         <div id="hits"></div>
+        <div id="pagination"></div>
       </div>
     </div>
-
-    <div id="pagination"></div>
   </div>
 
   <script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.10.5/dist/algoliasearch-lite.umd.js"></script>

package/src/templates/InstantSearch.js/package.json

@@ -2,22 +2,16 @@
   "name": "{{name}}",
   "version": "1.0.0",
   "private": true,
-  "main": "src/app.js",
   "scripts": {
     "start": "parcel index.html --port 3000",
     "build": "parcel build index.html",
-    "lint": "eslint .",
-    "lint:fix": "npm run lint -- --fix"
+    "lint": "eslint . && prettier --check .",
+    "lint:fix": "eslint . --fix && prettier --write ."
   },
   "devDependencies": {
-    "babel-eslint": "10.0.3",
-    "eslint": "5.7.0",
-    "eslint-config-algolia": "13.2.3",
-    "eslint-config-prettier": "3.6.0",
-    "eslint-plugin-import": "2.19.1",
-    "eslint-plugin-prettier": "3.1.2",
-    "parcel-bundler": "1.12.5",
-    "prettier": "1.19.1"
+    "eslint": "8.15.0",
+    "parcel": "2.0.1",
+    "prettier": "2.6.2"
   },
   "dependencies": {
     "algoliasearch": "4",

package/src/templates/InstantSearch.js/src/app.js.hbs

@@ -31,22 +31,26 @@ search.addWidgets([
     },
     {{/if}}
   }),
-  {{#if flags.dynamicWidgets}}
   instantsearch.widgets.configure({
-    facets: ['*'],
-    maxValuesPerFacet: 20,
+    hitsPerPage: 8,
   }),
+  {{#if flags.dynamicWidgets}}
   instantsearch.widgets.dynamicWidgets({
     container: '#dynamic-widgets',
     fallbackWidget({ container, attribute }) {
-      return instantsearch.widgets.refinementList({
+      return instantsearch.widgets.panel({ templates: { header: attribute } })(
+        instantsearch.widgets.refinementList
+      )({
         container,
         attribute,
       });
     },
     widgets: [
       {{#each attributesForFaceting}}
-      container => instantsearch.widgets.refinementList({
+      container =>
+        instantsearch.widgets.panel({
+          templates: { header: '{{this}}' },
+        })(instantsearch.widgets.refinementList)({
           container,
           attribute: '{{this}}',
         }),
@@ -55,7 +59,9 @@ search.addWidgets([
   }),
   {{else}}
   {{#each attributesForFaceting}}
-  instantsearch.widgets.refinementList({
+  instantsearch.widgets.panel({
+    templates: { header: '{{this}}' },
+  })(instantsearch.widgets.refinementList)({
     container: '#{{this}}-list',
     attribute: '{{this}}',
   }),

package/src/templates/React InstantSearch/package.json

@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "algoliasearch": "4",
-    "react": "16.12.0",
-    "react-dom": "16.12.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-instantsearch-dom": "{{libraryVersion}}",
     "react-scripts": "2.1.1"
   },

package/src/templates/React InstantSearch/public/index.html

@@ -13,7 +13,7 @@
     Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
     https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
   -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/algolia-min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css">
 
   <title>{{name}}</title>
 </head>

package/src/templates/React InstantSearch/src/App.js.hbs

@@ -2,14 +2,16 @@ import React from 'react';
 import algoliasearch from 'algoliasearch/lite';
 import {
   InstantSearch,
+  Configure,
   Hits,
   SearchBox,
   {{#if flags.dynamicWidgets}}
-  Configure,
   DynamicWidgets,
+  Panel,
   RefinementList,
   {{else}}
   {{#if attributesForFaceting}}
+  Panel,
   RefinementList,
   {{/if}}
   {{/if}}
@@ -40,18 +42,22 @@ function App() {
 
       <div className="container">
         <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
+          <Configure hitsPerPage={8} />
           <div className="search-panel">
             <div className="search-panel__filters">
               {{#if flags.dynamicWidgets}}
-              <Configure facets={['*']} maxValuesPerFacet={20} />
               <DynamicWidgets fallbackWidget={RefinementList}>
                 {{#each attributesForFaceting}}
-                <RefinementList attribute="{{this}}" />
+                <Panel header="{{this}}">
+                  <RefinementList attribute="{{this}}" />
+                </Panel>
                 {{/each}}
               </DynamicWidgets>
               {{else}}
               {{#each attributesForFaceting}}
-              <RefinementList attribute="{{this}}" />
+              <Panel header="{{this}}">
+                <RefinementList attribute="{{this}}" />
+              </Panel>
               {{/each}}
               {{/if}}
             </div>

package/src/templates/React InstantSearch/src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+createRoot(document.getElementById('root')).render(<App />);

package/src/templates/React InstantSearch Hooks/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/src/templates/React InstantSearch Hooks/.gitignore.template

@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+.parcel-cache
+*.local
+
+# Editor directories and files
+.vscode
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/src/templates/React InstantSearch Hooks/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "proseWrap": "never",
+  "trailingComma": "es5"
+}

package/src/templates/React InstantSearch Hooks/.template.js

@@ -0,0 +1,24 @@
+const install = require('../../tasks/node/install');
+const teardown = require('../../tasks/node/teardown');
+
+module.exports = {
+  category: 'Web',
+  libraryName: 'react-instantsearch-hooks-web',
+  supportedVersion: '>= 6.0.0 < 7.0.0',
+  flags: {
+    dynamicWidgets: '>=6.16',
+  },
+  templateName: 'react-instantsearch-hooks',
+  appName: 'react-instantsearch-hooks-app',
+  keywords: [
+    'algolia',
+    'InstantSearch',
+    'React',
+    'Hooks',
+    'react-instantsearch-hooks',
+  ],
+  tasks: {
+    install,
+    teardown,
+  },
+};

package/src/templates/React InstantSearch Hooks/README.md

@@ -0,0 +1,19 @@
+# {{name}}
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```

package/src/templates/React InstantSearch Hooks/index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <link rel="shortcut icon" href="favicon.png">
+
+    <!--
+    Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+    https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
+    -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+
+    <title>{{name}}</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+
+    <div id="root"></div>
+
+    <script type="module" src="src/index.tsx"></script>
+  </body>
+</html>

package/src/templates/React InstantSearch Hooks/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "{{name}}",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "parcel build index.html",
+    "start": "parcel index.html"
+  },
+  "dependencies": {
+    "algoliasearch": "4",
+    "instantsearch.js": "4.43.1",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-instantsearch-hooks-web": "{{libraryVersion}}"
+  },
+  "devDependencies": {
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "parcel": "2.5.0",
+    "typescript": "4.7.4"
+  }
+}

package/src/templates/React InstantSearch Hooks/src/App.css

@@ -0,0 +1,71 @@
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+em {
+  background: cyan;
+  font-style: normal;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(to right, #8e43e7, #00aeff);
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.header a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.header-title {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.header-title::after {
+  content: ' ▸ ';
+  padding: 0 0.5rem;
+}
+
+.header-subtitle {
+  font-size: 1.2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
+}
+
+.searchbox {
+  margin-bottom: 2rem;
+}
+
+.pagination {
+  margin: 2rem auto;
+  text-align: center;
+}

package/src/templates/React InstantSearch Hooks/src/App.tsx.hbs

@@ -0,0 +1,111 @@
+import React from 'react';
+import algoliasearch from 'algoliasearch/lite';
+import {
+  Configure,
+  {{#if flags.dynamicWidgets}}
+  DynamicWidgets,
+  {{#unless attributesForFaceting}}
+  RefinementList,
+  {{/unless}}
+  {{/if}}
+  {{#if attributesToDisplay}}
+  Highlight,
+  {{/if}}
+  Hits,
+  InstantSearch,
+  Pagination,
+  {{#if attributesForFaceting}}
+  RefinementList,
+  {{/if}}
+  SearchBox,
+} from 'react-instantsearch-hooks-web';
+
+import { Panel } from './Panel';
+
+import type { Hit } from 'instantsearch.js';
+
+import './App.css';
+
+const searchClient = algoliasearch(
+  '{{appId}}',
+  '{{apiKey}}'
+);
+
+export function App() {
+  return (
+    <div>
+      <header className="header">
+        <h1 className="header-title">
+          <a href="/">{{name}}</a>
+        </h1>
+        <p className="header-subtitle">
+          using{' '}
+          <a href="https://github.com/algolia/react-instantsearch">
+            React InstantSearch Hooks
+          </a>
+        </p>
+      </header>
+
+      <div className="container">
+        <InstantSearch searchClient={searchClient} indexName="{{indexName}}">
+          <Configure hitsPerPage={8} />
+          <div className="search-panel">
+            <div className="search-panel__filters">
+              {{#if flags.dynamicWidgets}}
+              <DynamicWidgets fallback={RefinementList}>
+                {{#each attributesForFaceting}}
+                <Panel header="{{this}}">
+                  <RefinementList attribute="{{this}}" />
+                </Panel>
+                {{/each}}
+              </DynamicWidgets>
+              {{else}}
+              {{#each attributesForFaceting}}
+              <Panel header="{{this}}">
+                <RefinementList attribute="{{this}}" />
+              </Panel>
+              {{/each}}
+              {{/if}}
+            </div>
+
+            <div className="search-panel__results">
+              <SearchBox placeholder="{{searchPlaceholder}}" className="searchbox" />
+              <Hits hitComponent={Hit} />
+
+              <div className="pagination">
+                <Pagination />
+              </div>
+            </div>
+          </div>
+        </InstantSearch>
+      </div>
+    </div>
+  );
+}
+
+type HitProps = {
+  hit: Hit;
+};
+
+function Hit({ hit }: HitProps) {
+  return (
+    <article>
+      {{#if attributesToDisplay}}
+      <h1>
+        <Highlight attribute="{{attributesToDisplay.[0]}}" hit={hit} />
+      </h1>
+      {{#each attributesToDisplay}}
+      {{#unless @first}}
+      <p>
+        <Highlight attribute="{{this}}" hit={hit} />
+      </p>
+      {{/unless}}
+      {{/each}}
+      {{else}}
+      <p>
+        <code>{JSON.stringify(hit).slice(0, 100)}...</code>
+      </p>
+      {{/if}}
+    </article>
+  );
+}

package/src/templates/React InstantSearch Hooks/src/Panel.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+type PanelProps = React.PropsWithChildren<{
+  header: string;
+}>;
+
+export function Panel({ header, children }: PanelProps) {
+  return (
+    <div className="ais-Panel">
+      <div className="ais-Panel-header">
+        <span>{header}</span>
+      </div>
+      <div className="ais-Panel-body">{children}</div>
+    </div>
+  );
+}

package/src/templates/React InstantSearch Hooks/src/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+
+import { App } from './App';
+
+createRoot(document.getElementById('root')!).render(<App />);

package/src/templates/React InstantSearch widget/README.md

@@ -19,8 +19,8 @@ yarn add {{ packageName }}
 ### Usage
 
 ```jsx
-import instantsearch from 'instantsearch.js';
 import algoliasearch from 'algoliasearch/lite';
+import { InstantSearch } from 'react-instantsearch-dom';
 import { {{ pascalCaseName }} } from '{{ packageName }}';
 
 const searchClient = algoliasearch('appId', 'apiKey');

package/src/templates/React InstantSearch widget/package.json.hbs

@@ -42,7 +42,7 @@
     "algoliasearch": "4",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
-    "react-instantsearch-dom": "^6.11.0"
+    "react-instantsearch-dom": "^6.26.0"
   },
   "devDependencies": {
     "@babel/core": "7.14.3",
@@ -54,6 +54,7 @@
     "@types/node": "15.3.0",
     "@types/react": "17.0.0",
     "@types/react-dom": "17.0.0",
+    "@types/react-instantsearch-core": "6.26.0",
     "@types/react-instantsearch-dom": "6.10.0",
     "@typescript-eslint/eslint-plugin": "4.24.0",
     "@typescript-eslint/parser": "4.24.0",