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

Commit 1ce212b

Browse files
francoischalifourfrancoischalifour
authored
feat(templates): update Autocomplete.js template to Satellite (#450)
1 parent 51c5f3c commit 1ce212b

File tree

7 files changed

+121
-88
lines changed

7 files changed

+121
-88
lines changed

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

Lines changed: 52 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1041,6 +1041,11 @@ exports[`Templates Autocomplete.js File content: index.html 1`] = `
10411041
10421042
<link rel=\\"stylesheet\\" href=\\"./src/index.css\\">
10431043
<link rel=\\"stylesheet\\" href=\\"./src/app.css\\">
1044+
<!--
1045+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
1046+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
1047+
-->
1048+
<link rel=\\"stylesheet\\" href=\\"https://unpkg.com/instantsearch.css@7/themes/satellite-min.css\\" />
10441049
10451050
<title>autocomplete.js-app</title>
10461051
</head>
@@ -1057,9 +1062,9 @@ exports[`Templates Autocomplete.js File content: index.html 1`] = `
10571062
10581063
<div class=\\"container\\">
10591064
<div class=\\"container-app\\">
1060-
<div id=\\"searchBox\\">
1061-
<form role=\\"search\\">
1062-
<input type=\\"search\\" placeholder=\\"Search placeholder\\" />
1065+
<div id=\\"searchBox\\" class=\\"ais-SearchBox\\">
1066+
<form role=\\"search\\" class=\\"ais-SearchBox-form\\">
1067+
<input type=\\"search\\" placeholder=\\"Search placeholder\\" class=\\"ais-SearchBox-input\\" />
10631068
</form>
10641069
</div>
10651070
</div>
@@ -1098,8 +1103,7 @@ exports[`Templates Autocomplete.js File content: package.json 1`] = `
10981103
\\"scripts\\": {
10991104
\\"start\\": \\"parcel index.html --port 3000\\",
11001105
\\"build\\": \\"parcel build index.html\\",
1101-
\\"lint\\": \\"eslint .\\",
1102-
\\"lint:fix\\": \\"npm run lint -- --fix\\"
1106+
\\"lint\\": \\"eslint .\\"
11031107
},
11041108
\\"partialDependencies\\": {
11051109
\\"autocomplete.js\\": \\"0.0.1\\"
@@ -1109,13 +1113,13 @@ exports[`Templates Autocomplete.js File content: package.json 1`] = `
11091113
11101114
exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
11111115
".header {
1112-
display: flex;
11131116
align-items: center;
1114-
min-height: 50px;
1115-
padding: 0.5rem 1rem;
11161117
background-image: linear-gradient(73deg, #3369e7, #1cc7d0);
11171118
color: #fff;
1119+
display: flex;
11181120
margin-bottom: 1rem;
1121+
min-height: 50px;
1122+
padding: 0.5rem 1rem;
11191123
}
11201124
11211125
.header a {
@@ -1128,7 +1132,7 @@ exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
11281132
font-weight: normal;
11291133
}
11301134
1131-
.header-title::after {
1135+
.header-subtitle::before {
11321136
content: ' ▸ ';
11331137
padding: 0 0.5rem;
11341138
}
@@ -1138,15 +1142,23 @@ exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
11381142
}
11391143
11401144
.container {
1141-
max-width: 1200px;
11421145
margin: 0 auto;
1146+
max-width: 460px;
11431147
padding: 1rem;
11441148
}
11451149
11461150
#searchBox {
11471151
margin-bottom: 2rem;
11481152
}
11491153
1154+
.ais-SearchBox-form:before {
1155+
z-index: 1;
1156+
}
1157+
1158+
.ais-SearchBox-input {
1159+
min-height: 2.5rem;
1160+
}
1161+
11501162
.algolia-autocomplete {
11511163
width: 100%;
11521164
}
@@ -1156,38 +1168,34 @@ exports[`Templates Autocomplete.js File content: src/app.css 1`] = `
11561168
width: 100%;
11571169
}
11581170
1159-
.algolia-autocomplete .aa-input {
1160-
padding: 12px;
1161-
font: inherit;
1162-
border-radius: 2px;
1163-
border: 1px solid rgba(150, 150, 150, 0.16);
1164-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
1165-
}
1166-
11671171
.algolia-autocomplete .aa-hint {
11681172
color: #999;
11691173
}
11701174
11711175
.algolia-autocomplete .aa-dropdown-menu {
1172-
width: 100%;
11731176
background-color: #fff;
11741177
border: 1px solid rgba(150, 150, 150, 0.16);
1175-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
1178+
border-radius: 3px;
1179+
box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
1180+
0 8px 16px -4px rgba(35, 38, 59, 0.25);
1181+
margin-top: 5px;
1182+
width: 100%;
11761183
}
11771184
11781185
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
1179-
font-weight: bold;
1186+
color: #23263b;
11801187
cursor: pointer;
1181-
padding: 12px;
1188+
font-weight: bold;
1189+
padding: 0.5rem 1rem;
11821190
}
11831191
11841192
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
1185-
font-weight: normal;
11861193
font-style: normal;
1194+
font-weight: normal;
11871195
}
11881196
11891197
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
1190-
background-color: rgba(150, 150, 150, 0.16);
1198+
background-color: #f5f5fa;
11911199
}"
11921200
`;
11931201
@@ -1198,31 +1206,36 @@ import autocomplete from 'autocomplete.js';
11981206
const client = algoliasearch('appId', 'apiKey');
11991207
const index = client.initIndex('indexName');
12001208
1201-
autocomplete('#searchBox input[type=search]', { hint: false }, [
1209+
autocomplete(
1210+
'#searchBox input[type=search]',
12021211
{
1203-
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
1204-
displayKey: 'attribute1',
1205-
templates: {
1206-
suggestion(suggestion) {
1207-
return suggestion._highlightResult.attribute1.value;
1212+
hint: false,
1213+
debug: process.env.NODE_ENV === 'development',
1214+
},
1215+
[
1216+
{
1217+
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
1218+
displayKey: 'attribute1',
1219+
templates: {
1220+
suggestion(suggestion) {
1221+
return suggestion._highlightResult.attribute1.value;
1222+
},
12081223
},
12091224
},
1210-
},
1211-
]).on('autocomplete:selected', (event, suggestion, dataset) => {
1225+
]
1226+
).on('autocomplete:selected', (event, suggestion, dataset) => {
1227+
// eslint-disable-next-line no-console
12121228
console.log({ suggestion, dataset });
12131229
});"
12141230
`;
12151231
12161232
exports[`Templates Autocomplete.js File content: src/index.css 1`] = `
1217-
"body,
1218-
h1 {
1219-
margin: 0;
1220-
padding: 0;
1221-
}
1222-
1223-
body {
1233+
"body {
1234+
background-color: #fcfcfd;
1235+
color: #333;
12241236
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
12251237
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
1238+
margin: 0;
12261239
}"
12271240
`;
12281241

‎scripts/release-templates.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,14 @@ async function build() {
7070
(await getLatestLibraryVersion({ libraryName, supportedVersion })),
7171
appId: 'latency',
7272
apiKey: '6be0576ff61c053d5f9a3225e2a90f76',
73-
indexName: 'instant_search',
74-
attributesToDisplay: ['name', 'description'],
73+
indexName:
74+
libraryName === 'autocomplete.js'
75+
? 'instant_search_demo_query_suggestions'
76+
: 'instant_search',
77+
attributesToDisplay:
78+
libraryName === 'autocomplete.js'
79+
? ['query']
80+
: ['name', 'description'],
7581
attributesForFaceting: ['brand'],
7682
installation: false,
7783
silent: true,

‎src/templates/Autocomplete.js/index.html.hbs‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111

1212
<link rel="stylesheet" href="./src/index.css">
1313
<link rel="stylesheet" href="./src/app.css">
14+
<!--
15+
Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
16+
https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-style
17+
-->
18+
<link rel="stylesheet" href="https://unpkg.com/instantsearch.css@7/themes/satellite-min.css" />
1419

1520
<title>{{name}}</title>
1621
</head>
@@ -27,9 +32,9 @@
2732

2833
<div class="container">
2934
<div class="container-app">
30-
<div id="searchBox">
31-
<form role="search">
32-
<input type="search" placeholder="{{searchPlaceholder}}" />
35+
<div id="searchBox" class="ais-SearchBox">
36+
<form role="search" class="ais-SearchBox-form">
37+
<input type="search" placeholder="{{searchPlaceholder}}" class="ais-SearchBox-input" />
3338
</form>
3439
</div>
3540
</div>

‎src/templates/Autocomplete.js/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,20 @@
66
"scripts": {
77
"start": "parcel index.html --port 3000",
88
"build": "parcel build index.html",
9-
"lint": "eslint .",
10-
"lint:fix": "npm run lint -- --fix"
9+
"lint": "eslint ."
1110
},
1211
"dependencies": {
13-
"algoliasearch": "3.30.0",
12+
"algoliasearch": "3.35.1",
1413
"autocomplete.js": "{{libraryVersion}}"
1514
},
1615
"devDependencies": {
1716
"babel-eslint": "10.0.2",
18-
"eslint": "5.7.0",
19-
"eslint-config-algolia": "13.2.3",
20-
"eslint-config-prettier": "3.6.0",
21-
"eslint-plugin-import": "2.19.1",
17+
"eslint": "6.8.0",
18+
"eslint-config-algolia": "15.0.0",
19+
"eslint-config-prettier": "6.10.0",
20+
"eslint-plugin-import": "2.20.1",
2221
"eslint-plugin-prettier": "3.1.2",
22+
"eslint-plugin-eslint-comments": "3.1.2",
2323
"parcel-bundler": "1.12.4",
2424
"prettier": "1.19.1"
2525
}

‎src/templates/Autocomplete.js/src/app.css‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.header {
2-
display: flex;
32
align-items: center;
4-
min-height: 50px;
5-
padding: 0.5rem 1rem;
63
background-image: linear-gradient(73deg, #3369e7, #1cc7d0);
74
color: #fff;
5+
display: flex;
86
margin-bottom: 1rem;
7+
min-height: 50px;
8+
padding: 0.5rem 1rem;
99
}
1010

1111
.header a {
@@ -18,7 +18,7 @@
1818
font-weight: normal;
1919
}
2020

21-
.header-title::after {
21+
.header-subtitle::before {
2222
content: ' ▸ ';
2323
padding: 0 0.5rem;
2424
}
@@ -28,15 +28,23 @@
2828
}
2929

3030
.container {
31-
max-width: 1200px;
3231
margin: 0 auto;
32+
max-width: 460px;
3333
padding: 1rem;
3434
}
3535

3636
#searchBox {
3737
margin-bottom: 2rem;
3838
}
3939

40+
.ais-SearchBox-form:before {
41+
z-index: 1;
42+
}
43+
44+
.ais-SearchBox-input {
45+
min-height: 2.5rem;
46+
}
47+
4048
.algolia-autocomplete {
4149
width: 100%;
4250
}
@@ -46,36 +54,32 @@
4654
width: 100%;
4755
}
4856

49-
.algolia-autocomplete .aa-input {
50-
padding: 12px;
51-
font: inherit;
52-
border-radius: 2px;
53-
border: 1px solid rgba(150, 150, 150, 0.16);
54-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
55-
}
56-
5757
.algolia-autocomplete .aa-hint {
5858
color: #999;
5959
}
6060

6161
.algolia-autocomplete .aa-dropdown-menu {
62-
width: 100%;
6362
background-color: #fff;
6463
border: 1px solid rgba(150, 150, 150, 0.16);
65-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
64+
border-radius: 3px;
65+
box-shadow: 0 0 0 1px rgba(35, 38, 59, 0.05),
66+
0 8px 16px -4px rgba(35, 38, 59, 0.25);
67+
margin-top: 5px;
68+
width: 100%;
6669
}
6770

6871
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion {
69-
font-weight: bold;
72+
color: #23263b;
7073
cursor: pointer;
71-
padding: 12px;
74+
font-weight: bold;
75+
padding: 0.5rem 1rem;
7276
}
7377

7478
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion em {
75-
font-weight: normal;
7679
font-style: normal;
80+
font-weight: normal;
7781
}
7882

7983
.algolia-autocomplete .aa-dropdown-menu .aa-suggestion.aa-cursor {
80-
background-color: rgba(150, 150, 150, 0.16);
84+
background-color: #f5f5fa;
8185
}

‎src/templates/Autocomplete.js/src/app.js.hbs‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,28 @@ import autocomplete from 'autocomplete.js';
44
const client = algoliasearch('{{appId}}', '{{apiKey}}');
55
const index = client.initIndex('{{indexName}}');
66

7-
autocomplete('#searchBox input[type=search]', { hint: false }, [
7+
autocomplete(
8+
'#searchBox input[type=search]',
89
{
9-
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
10-
displayKey: '{{attributesToDisplay.[0]}}',
11-
templates: {
12-
suggestion(suggestion) {
13-
{{#if attributesToDisplay.[0]}}
14-
return suggestion._highlightResult.{{attributesToDisplay.[0]}}.value;
15-
{{else}}
16-
return JSON.stringify(suggestion);
17-
{{/if}}
10+
hint: false,
11+
debug: process.env.NODE_ENV === 'development',
12+
},
13+
[
14+
{
15+
source: autocomplete.sources.hits(index, { hitsPerPage: 5 }),
16+
displayKey: '{{attributesToDisplay.[0]}}',
17+
templates: {
18+
suggestion(suggestion) {
19+
{{#if attributesToDisplay.[0]}}
20+
return suggestion._highlightResult.{{attributesToDisplay.[0]}}.value;
21+
{{else}}
22+
return JSON.stringify(suggestion);
23+
{{/if}}
24+
},
1825
},
1926
},
20-
},
21-
]).on('autocomplete:selected', (event, suggestion, dataset) => {
27+
]
28+
).on('autocomplete:selected', (event, suggestion, dataset) => {
29+
// eslint-disable-next-line no-console
2230
console.log({ suggestion, dataset });
2331
});

0 commit comments

Comments
 (0)