Skip to content
This repository was archived by the owner on Dec 16, 2022. It is now read-only.

Commit d91e970

Browse files
dhayabHaroenv
dhayab
and
Haroenv
authored
feat(hooks): add react instantsearch hooks template (#568)
* feat(hooks): add react instantsearch hooks template * update test snapshots * add panel component to mark clear separation between refinement lists * apply suggestions Co-authored-by: Haroen Viaene <[email protected]> * fresh new snapshots Co-authored-by: Haroen Viaene <[email protected]>
1 parent f42cf21 commit d91e970

File tree

15 files changed

+647
-3
lines changed

15 files changed

+647
-3
lines changed

‎e2e/__image_snapshots__/react-instantsearch-hooks/favicon.png-snap.png‎

1.88 KB
Loading

‎e2e/__snapshots__/templates.test.js.snap‎

Lines changed: 316 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5832,6 +5832,322 @@ Array [
58325832
]
58335833
`;
58345834

5835+
exports[`Templates React InstantSearch Hooks File content: .editorconfig 1`] = `
5836+
"root = true
5837+
5838+
[*]
5839+
indent_style = space
5840+
indent_size = 2
5841+
end_of_line = lf
5842+
insert_final_newline = true
5843+
trim_trailing_whitespace = true"
5844+
`;
5845+
5846+
exports[`Templates React InstantSearch Hooks File content: .gitignore 1`] = `
5847+
"# Logs
5848+
logs
5849+
*.log
5850+
npm-debug.log*
5851+
yarn-debug.log*
5852+
yarn-error.log*
5853+
pnpm-debug.log*
5854+
lerna-debug.log*
5855+
5856+
node_modules
5857+
dist
5858+
.parcel-cache
5859+
*.local
5860+
5861+
# Editor directories and files
5862+
.vscode
5863+
.idea
5864+
.DS_Store
5865+
*.suo
5866+
*.ntvs*
5867+
*.njsproj
5868+
*.sln
5869+
*.sw?"
5870+
`;
5871+
5872+
exports[`Templates React InstantSearch Hooks File content: .prettierrc 1`] = `
5873+
"{
5874+
\\"singleQuote\\": true,
5875+
\\"proseWrap\\": \\"never\\",
5876+
\\"trailingComma\\": \\"es5\\"
5877+
}"
5878+
`;
5879+
5880+
exports[`Templates React InstantSearch Hooks File content: README.md 1`] = `
5881+
"# react-instantsearch-hooks-app
5882+
5883+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
5884+
5885+
## Get started
5886+
5887+
To run this project locally, install the dependencies and run the local server:
5888+
5889+
\`\`\`sh
5890+
npm install
5891+
npm start
5892+
\`\`\`
5893+
5894+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
5895+
5896+
\`\`\`sh
5897+
yarn
5898+
yarn start
5899+
\`\`\`"
5900+
`;
5901+
5902+
exports[`Templates React InstantSearch Hooks File content: index.html 1`] = `
5903+
"<!DOCTYPE html>
5904+
<html lang=\\"en\\">
5905+
<head>
5906+
<meta charset=\\"utf-8\\" />
5907+
<meta
5908+
name=\\"viewport\\"
5909+
content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\"
5910+
/>
5911+
5912+
<link rel=\\"shortcut icon\\" href=\\"favicon.png\\">
5913+
5914+
<!--
5915+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
5916+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
5917+
-->
5918+
<link
5919+
rel=\\"stylesheet\\"
5920+
href=\\"https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css\\"
5921+
/>
5922+
5923+
<title>react-instantsearch-hooks-app</title>
5924+
</head>
5925+
5926+
<body>
5927+
<noscript> You need to enable JavaScript to run this app. </noscript>
5928+
5929+
<div id=\\"root\\"></div>
5930+
5931+
<script type=\\"module\\" src=\\"src/index.tsx\\"></script>
5932+
</body>
5933+
</html>"
5934+
`;
5935+
5936+
exports[`Templates React InstantSearch Hooks File content: package.json 1`] = `
5937+
"{
5938+
\\"name\\": \\"react-instantsearch-hooks-app\\",
5939+
\\"version\\": \\"1.0.0\\",
5940+
\\"private\\": true,
5941+
\\"scripts\\": {
5942+
\\"build\\": \\"parcel build index.html\\",
5943+
\\"start\\": \\"parcel index.html\\"
5944+
},
5945+
\\"partialDependencies\\": {
5946+
\\"react-instantsearch-hooks-web\\": \\"6.24.0\\"
5947+
}
5948+
}"
5949+
`;
5950+
5951+
exports[`Templates React InstantSearch Hooks File content: src/App.css 1`] = `
5952+
"body,
5953+
h1 {
5954+
margin: 0;
5955+
padding: 0;
5956+
}
5957+
5958+
body {
5959+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
5960+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
5961+
}
5962+
5963+
em {
5964+
background: cyan;
5965+
font-style: normal;
5966+
}
5967+
5968+
.header {
5969+
display: flex;
5970+
align-items: center;
5971+
min-height: 50px;
5972+
padding: 0.5rem 1rem;
5973+
background-image: linear-gradient(to right, #8e43e7, #00aeff);
5974+
color: #fff;
5975+
margin-bottom: 1rem;
5976+
}
5977+
5978+
.header a {
5979+
color: #fff;
5980+
text-decoration: none;
5981+
}
5982+
5983+
.header-title {
5984+
font-size: 1.2rem;
5985+
font-weight: normal;
5986+
}
5987+
5988+
.header-title::after {
5989+
content: ' ▸ ';
5990+
padding: 0 0.5rem;
5991+
}
5992+
5993+
.header-subtitle {
5994+
font-size: 1.2rem;
5995+
}
5996+
5997+
.container {
5998+
max-width: 1200px;
5999+
margin: 0 auto;
6000+
padding: 1rem;
6001+
}
6002+
6003+
.search-panel {
6004+
display: flex;
6005+
}
6006+
6007+
.search-panel__filters {
6008+
flex: 1;
6009+
}
6010+
6011+
.search-panel__results {
6012+
flex: 3;
6013+
}
6014+
6015+
.searchbox {
6016+
margin-bottom: 2rem;
6017+
}
6018+
6019+
.pagination {
6020+
margin: 2rem auto;
6021+
text-align: center;
6022+
}"
6023+
`;
6024+
6025+
exports[`Templates React InstantSearch Hooks File content: src/App.tsx 1`] = `
6026+
"import algoliasearch from 'algoliasearch/lite';
6027+
import {
6028+
DynamicWidgets,
6029+
Highlight,
6030+
Hits,
6031+
InstantSearch,
6032+
Pagination,
6033+
RefinementList,
6034+
SearchBox,
6035+
} from 'react-instantsearch-hooks-web';
6036+
6037+
import { Panel } from './Panel';
6038+
6039+
import type { Hit } from 'instantsearch.js';
6040+
6041+
import './App.css';
6042+
6043+
const searchClient = algoliasearch(
6044+
'appId',
6045+
'apiKey'
6046+
);
6047+
6048+
export function App() {
6049+
return (
6050+
<div>
6051+
<header className=\\"header\\">
6052+
<h1 className=\\"header-title\\">
6053+
<a href=\\"/\\">react-instantsearch-hooks-app</a>
6054+
</h1>
6055+
<p className=\\"header-subtitle\\">
6056+
using{' '}
6057+
<a href=\\"https://github.com/algolia/react-instantsearch\\">
6058+
React InstantSearch Hooks
6059+
</a>
6060+
</p>
6061+
</header>
6062+
6063+
<div className=\\"container\\">
6064+
<InstantSearch searchClient={searchClient} indexName=\\"indexName\\">
6065+
<div className=\\"search-panel\\">
6066+
<div className=\\"search-panel__filters\\">
6067+
<DynamicWidgets fallback={RefinementList}>
6068+
<Panel header=\\"facet1\\">
6069+
<RefinementList attribute=\\"facet1\\" />
6070+
</Panel>
6071+
<Panel header=\\"facet2\\">
6072+
<RefinementList attribute=\\"facet2\\" />
6073+
</Panel>
6074+
</DynamicWidgets>
6075+
</div>
6076+
6077+
<div className=\\"search-panel__results\\">
6078+
<SearchBox placeholder=\\"Search placeholder\\" className=\\"searchbox\\" />
6079+
<Hits hitComponent={Hit} />
6080+
6081+
<div className=\\"pagination\\">
6082+
<Pagination />
6083+
</div>
6084+
</div>
6085+
</div>
6086+
</InstantSearch>
6087+
</div>
6088+
</div>
6089+
);
6090+
}
6091+
6092+
type HitProps = {
6093+
hit: Hit;
6094+
};
6095+
6096+
function Hit({ hit }: HitProps) {
6097+
return (
6098+
<article>
6099+
<h1>
6100+
<Highlight attribute=\\"attribute1\\" hit={hit} />
6101+
</h1>
6102+
<p>
6103+
<Highlight attribute=\\"attribute2\\" hit={hit} />
6104+
</p>
6105+
</article>
6106+
);
6107+
}"
6108+
`;
6109+
6110+
exports[`Templates React InstantSearch Hooks File content: src/Panel.tsx 1`] = `
6111+
"type PanelProps = React.PropsWithChildren<{
6112+
header: string;
6113+
}>;
6114+
6115+
export function Panel({ header, children }: PanelProps) {
6116+
return (
6117+
<div className=\\"ais-Panel\\">
6118+
<div className=\\"ais-Panel-header\\">
6119+
<span>{header}</span>
6120+
</div>
6121+
<div className=\\"ais-Panel-body\\">{children}</div>
6122+
</div>
6123+
);
6124+
}"
6125+
`;
6126+
6127+
exports[`Templates React InstantSearch Hooks File content: src/index.tsx 1`] = `
6128+
"import ReactDOM from 'react-dom';
6129+
6130+
import { App } from './App';
6131+
6132+
ReactDOM.render(<App />, document.getElementById('root'));"
6133+
`;
6134+
6135+
exports[`Templates React InstantSearch Hooks Folder structure: contains the right files 1`] = `
6136+
Array [
6137+
".editorconfig",
6138+
".gitignore",
6139+
".prettierrc",
6140+
"README.md",
6141+
"favicon.png",
6142+
"index.html",
6143+
"package.json",
6144+
"src/App.css",
6145+
"src/App.tsx",
6146+
"src/Panel.tsx",
6147+
"src/index.tsx",
6148+
]
6149+
`;
6150+
58356151
exports[`Templates React InstantSearch Hooks Native File content: .expo-shared/assets.json.hbs 1`] = `
58366152
"{
58376153
\\"12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb\\": true,

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ exports[`Options with invalid name throws 1`] = `
66
- name can only contain URL-friendly characters"
77
`;
88

9-
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"`;
9+
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"`;
1010

11-
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"`;
11+
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"`;
1212

1313
exports[`Options without path throws 1`] = `"The option \`path\` is required."`;
1414

15-
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"`;
15+
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"`;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
end_of_line = lf
7+
insert_final_newline = true
8+
trim_trailing_whitespace = true

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
.parcel-cache
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode
17+
.idea
18+
.DS_Store
19+
*.suo
20+
*.ntvs*
21+
*.njsproj
22+
*.sln
23+
*.sw?

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"singleQuote": true,
3+
"proseWrap": "never",
4+
"trailingComma": "es5"
5+
}

0 commit comments

Comments
 (0)