Skip to content

Commit fe9a51c

Browse files
francoischalifourfrancoischalifour
authored
feat(templates): Add Autocomplete.js template (#80)
* feat(templates): Add Autocomplete.js template * test(snapshots): Update template snapshots * test(snapshots): Update test snapshots
1 parent a04e9c6 commit fe9a51c

File tree

17 files changed

+582
-3
lines changed

17 files changed

+582
-3
lines changed

‎scripts/__image_snapshots__/autocomplete.js/favicon.png-snap.png

5.02 KB
Loading

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

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -945,6 +945,314 @@ Array [
945945
]
946946
`;
947947
948+
exports[`Templates Autocomplete.js File content: .editorconfig 1`] = `
949+
"root = true
950+
951+
[*]
952+
charset = utf-8
953+
indent_style = space
954+
indent_size = 2
955+
end_of_line = lf
956+
insert_final_newline = true
957+
trim_trailing_whitespace = true"
958+
`;
959+
960+
exports[`Templates Autocomplete.js File content: .eslintignore 1`] = `
961+
"/node_modules
962+
/dist
963+
/.cache"
964+
`;
965+
966+
exports[`Templates Autocomplete.js File content: .eslintrc.js 1`] = `
967+
"module.exports = {
968+
extends: 'algolia',
969+
};"
970+
`;
971+
972+
exports[`Templates Autocomplete.js File content: .gitignore 1`] = `
973+
"# See https://help.github.com/ignore-files/ for more about ignoring files.
974+
975+
# dependencies
976+
/node_modules
977+
978+
# testing
979+
/coverage
980+
981+
# production
982+
/dist
983+
/.cache
984+
985+
# misc
986+
.DS_Store
987+
.env.local
988+
.env.development.local
989+
.env.test.local
990+
.env.production.local
991+
992+
npm-debug.log*
993+
yarn-debug.log*
994+
yarn-error.log*"
995+
`;
996+
997+
exports[`Templates Autocomplete.js File content: .prettierrc 1`] = `
998+
"{
999+
\\"singleQuote\\": true,
1000+
\\"proseWrap\\": \\"never\\",
1001+
\\"trailingComma\\": \\"es5\\"
1002+
}"
1003+
`;
1004+
1005+
exports[`Templates Autocomplete.js File content: README.md 1`] = `
1006+
"# autocomplete.js-app
1007+
1008+
_This project was generated with [create-instantsearch-app](https://github.com/algolia/create-instantsearch-app) by [Algolia](https://algolia.com)._
1009+
1010+
## Get started
1011+
1012+
To run this project locally, install the dependencies and run the local server:
1013+
1014+
\`\`\`sh
1015+
npm install
1016+
npm start
1017+
\`\`\`
1018+
1019+
Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
1020+
1021+
\`\`\`sh
1022+
yarn
1023+
yarn start
1024+
\`\`\`"
1025+
`;
1026+
1027+
exports[`Templates Autocomplete.js File content: index.html 1`] = `
1028+
"<!DOCTYPE html>
1029+
<html lang=\\"en\\">
1030+
1031+
<head>
1032+
<meta charset=\\"utf-8\\">
1033+
<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1, shrink-to-fit=no\\">
1034+
<meta name=\\"theme-color\\" content=\\"#000000\\">
1035+
1036+
<link rel=\\"manifest\\" href=\\"./manifest.webmanifest\\">
1037+
<link rel=\\"shortcut icon\\" href=\\"./favicon.png\\">
1038+
1039+
<link rel=\\"stylesheet\\" href=\\"./src/index.css\\">
1040+
<link rel=\\"stylesheet\\" href=\\"./src/app.css\\">
1041+
1042+
<title>autocomplete.js-app</title>
1043+
</head>
1044+
1045+
<body>
1046+
<header class=\\"header\\">
1047+
<h1 class=\\"header-title\\">
1048+
<a href=\\"/\\">autocomplete.js-app</a>
1049+
</h1>
1050+
<p class=\\"header-subtitle\\">using
1051+
<a href=\\"https://github.com/algolia/autocomplete.js\\">Autocomplete.js</a>
1052+
</p>
1053+
</header>
1054+
1055+
<div class=\\"container\\">
1056+
<div class=\\"container-app\\">
1057+
<div id=\\"searchBox\\">
1058+
<form role=\\"search\\">
1059+
<input type=\\"search\\" placeholder=\\"Search placeholder\\" />
1060+
</form>
1061+
</div>
1062+
</div>
1063+
</div>
1064+
1065+
<script src=\\"./src/app.js\\"></script>
1066+
</body>
1067+
1068+
</html>"
1069+
`;
1070+
1071+
exports[`Templates Autocomplete.js File content: manifest.webmanifest 1`] = `
1072+
"{
1073+
\\"short_name\\": \\"autocomplete.js-app\\",
1074+
\\"name\\": \\"autocomplete.js-app Sample\\",
1075+
\\"icons\\": [
1076+
{
1077+
\\"src\\": \\"favicon.png\\",
1078+
\\"sizes\\": \\"64x64 32x32 24x24 16x16\\",
1079+
\\"type\\": \\"image/x-icon\\"
1080+
}
1081+
],
1082+
\\"start_url\\": \\"./index.html\\",
1083+
\\"display\\": \\"standalone\\",
1084+
\\"theme_color\\": \\"#000000\\",
1085+
\\"background_color\\": \\"#ffffff\\"
1086+
}"
1087+
`;
1088+
1089+
exports[`Templates Autocomplete.js File content: package.json 1`] = `
1090+
"{
1091+
\\"name\\": \\"autocomplete.js-app\\",
1092+
\\"version\\": \\"1.0.0\\",
1093+
\\"private\\": true,
1094+
\\"scripts\\": {
1095+
\\"start\\": \\"parcel index.html --port 3000\\",
1096+
\\"build\\": \\"parcel build index.html\\",
1097+
\\"lint\\": \\"eslint .\\",
1098+
\\"lint:fix\\": \\"npm run lint -- --fix\\"
1099+
},
1100+
\\"dependencies\\": {
1101+
\\"algoliasearch\\": \\"3.29.0\\",
1102+
\\"autocomplete.js\\": \\"1.0.0\\"
1103+
},
1104+
\\"devDependencies\\": {
1105+
\\"babel-eslint\\": \\"8.2.5\\",
1106+
\\"eslint\\": \\"4.19.1\\",
1107+
\\"eslint-config-algolia\\": \\"13.1.0\\",
1108+
\\"eslint-config-prettier\\": \\"2.9.0\\",
1109+
\\"eslint-plugin-import\\": \\"2.13.0\\",
1110+
\\"eslint-plugin-prettier\\": \\"2.6.1\\",
1111+
\\"parcel-bundler\\": \\"1.9.4\\",
1112+
\\"prettier\\": \\"1.13.7\\"
1113+
}
1114+
}"
1115+
`;
1116+
1117+
exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
1118+
".header {
1119+
display: flex;
1120+
align-items: center;
1121+
min-height: 50px;
1122+
padding: 0.5rem 1rem;
1123+
background-image: linear-gradient(73deg, #3369e7, #1cc7d0);
1124+
color: #fff;
1125+
margin-bottom: 1rem;
1126+
}
1127+
1128+
.header a {
1129+
color: #fff;
1130+
text-decoration: none;
1131+
}
1132+
1133+
.header-title {
1134+
font-size: 1.2rem;
1135+
font-weight: normal;
1136+
}
1137+
1138+
.header-title::after {
1139+
content: ' ▸ ';
1140+
padding: 0 0.5rem;
1141+
}
1142+
1143+
.header-subtitle {
1144+
font-size: 1.2rem;
1145+
}
1146+
1147+
.container {
1148+
max-width: 1200px;
1149+
margin: 0 auto;
1150+
padding: 1rem;
1151+
}
1152+
1153+
#searchBox {
1154+
margin-bottom: 2rem;
1155+
}
1156+
1157+
.algolia-autocomplete {
1158+
width: 100%;
1159+
}
1160+
1161+
.algolia-autocomplete .aa-input,
1162+
.algolia-autocomplete .aa-hint {
1163+
width: 100%;
1164+
}
1165+
1166+
.algolia-autocomplete .aa-input {
1167+
padding: 12px;
1168+
font: inherit;
1169+
border-radius: 2px;
1170+
border: 1px solid rgba(150, 150, 150, 0.16);
1171+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
1172+
}
1173+
1174+
.algolia-autocomplete .aa-hint {
1175+
color: #999;
1176+
}
1177+
1178+
.algolia-autocomplete .aa-dropdown-menu {
1179+
width: 100%;
1180+
background-color: #fff;
1181+
border: 1px solid rgba(150, 150, 150, 0.16);
1182+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
1183+
}
1184+
1185+
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
1186+
font-weight: bold;
1187+
cursor: pointer;
1188+
padding: 12px;
1189+
}
1190+
1191+
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
1192+
font-weight: normal;
1193+
font-style: normal;
1194+
}
1195+
1196+
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
1197+
background-color: rgba(150, 150, 150, 0.16);
1198+
}"
1199+
`;
1200+
1201+
exports[`Templates Autocomplete.js File content: src/app.js 1`] = `
1202+
"import algoliasearch from 'algoliasearch';
1203+
import autocomplete from 'autocomplete.js';
1204+
1205+
const client = algoliasearch('appId', 'apiKey');
1206+
const index = client.initIndex('indexName');
1207+
1208+
const $hits = document.querySelector('#hits');
1209+
1210+
autocomplete('#searchBox input[type=search]', { hint: false }, [
1211+
{
1212+
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
1213+
displayKey: 'mainAttribute',
1214+
templates: {
1215+
suggestion(suggestion) {
1216+
return suggestion._highlightResult.mainAttribute.value;
1217+
},
1218+
},
1219+
},
1220+
]).on('autocomplete:selected', (event, suggestion, dataset) => {
1221+
console.log({ suggestion, dataset });
1222+
});"
1223+
`;
1224+
1225+
exports[`Templates Autocomplete.js File content: src/index.css 1`] = `
1226+
"body,
1227+
h1 {
1228+
margin: 0;
1229+
padding: 0;
1230+
}
1231+
1232+
body {
1233+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
1234+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
1235+
}"
1236+
`;
1237+
1238+
exports[`Templates Autocomplete.js Folder structure: contains the right files 1`] = `
1239+
Array [
1240+
".editorconfig",
1241+
".eslintignore",
1242+
".eslintrc.js",
1243+
".gitignore",
1244+
".prettierrc",
1245+
"README.md",
1246+
"favicon.png",
1247+
"index.html",
1248+
"manifest.webmanifest",
1249+
"package.json",
1250+
"src/app.css",
1251+
"src/app.js",
1252+
"src/index.css",
1253+
]
1254+
`;
1255+
9481256
exports[`Templates InstantSearch Android File content: .gitignore 1`] = `
9491257
"# IDE Files
9501258
*.iml

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

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, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
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.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
44

55
exports[`Options with unvalid name throws 1`] = `
66
"Could not create a project called \\"./WrongNpmName\\" because of npm naming restrictions.
77
- name cannot start with a period
88
- name can only contain URL-friendly characters"
99
`;
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, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
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.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
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, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;
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.js, InstantSearch Android, InstantSearch iOS, InstantSearch.js, React InstantSearch, React InstantSearch Native, Vue InstantSearch"`;

‎src/templates/Autocomplete.js/.editorconfig

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

‎src/templates/Autocomplete.js/.eslintignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/node_modules
2+
/dist
3+
/.cache

‎src/templates/Autocomplete.js/.eslintrc.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
extends: 'algolia',
3+
};

‎src/templates/Autocomplete.js/.gitignore.template

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# See https://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
6+
# testing
7+
/coverage
8+
9+
# production
10+
/dist
11+
/.cache
12+
13+
# misc
14+
.DS_Store
15+
.env.local
16+
.env.development.local
17+
.env.test.local
18+
.env.production.local
19+
20+
npm-debug.log*
21+
yarn-debug.log*
22+
yarn-error.log*

‎src/templates/Autocomplete.js/.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+
}

‎src/templates/Autocomplete.js/.template.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const install = require('../../tasks/node/install');
2+
const teardown = require('../../tasks/node/teardown');
3+
4+
module.exports = {
5+
libraryName: 'autocomplete.js',
6+
templateName: 'autocomplete.js',
7+
appName: 'autocomplete.js-app',
8+
keywords: ['algolia', 'Autocomplete', 'autocomplete.js'],
9+
tasks: {
10+
install,
11+
teardown,
12+
},
13+
};

0 commit comments

Comments
 (0)