Merge pull request #2195 from appbaseio/searchbox-examples

fix(web): searchbox examples changes
appbaseio · Mar 13, 2023 · a0a0ff2 · a0a0ff2
2 parents 7e44127 + bcd37e7
commit a0a0ff2
Show file tree

Hide file tree

Showing 14 changed files with 220 additions and 120 deletions.
diff --git a/packages/web/examples/RichSnippets/package.json b/packages/web/examples/RichSnippets/package.json
@@ -6,9 +6,9 @@
 	"license": "Apache-2.0",
 	"dependencies": {
 		"@appbaseio/reactivesearch": "4.0.0-rc.1",
-		"react": "^17.0.0",
-		"react-dom": "^17.0.0",
-		"react-scripts": "3.0.1"
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-scripts": "5.0.1"
 	},
 	"scripts": {
 		"start": "react-scripts start",

diff --git a/packages/web/examples/SearchBoxWithAutosuggestions/src/index.css b/packages/web/examples/SearchBoxWithAutosuggestions/src/index.css
@@ -15,11 +15,11 @@ body {
 .col {
 	flex: 1;
 	padding: 15px;
+	max-width: 100%;
 }
 
 .row > .col:first-child {
 	border-right: 1px solid #ccc;
-	max-width: 400px;
 }
 
 .row > .col:last-child {
@@ -70,11 +70,6 @@ body {
 .authors-list {
 	color: #9d9d9d;
 	font-weight: bold;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
 }
 
 .ratings-list {
@@ -151,3 +146,12 @@ body {
 .col .meetup-list-image {
 	background-size: cover;
 }
+.authors-list {
+	color: #9d9d9d;
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
diff --git a/packages/web/examples/SearchBoxWithAutosuggestions/src/index.js b/packages/web/examples/SearchBoxWithAutosuggestions/src/index.js
@@ -15,6 +15,7 @@ const Main = () => (
 	>
 		<div className="row">
 			<div className="col">
+				{' '}
 				<SearchBox
 					title="SearchBox"
 					dataField={['original_title', 'original_title.search']}
@@ -37,15 +38,13 @@ const Main = () => (
 					enableRecentSuggestions
 					recentSuggestionsConfig={{
 						size: 5,
-						minHits: 5,
+						minHits: 2,
 						minChars: 3,
 						index: 'movies-demo-app', // further restrict the index to search on
 						sectionLabel: '<b>Recent suggestions 🙌🏻</b>',
 					}}
 				/>
-			</div>
-
-			<div className="col">
+				<br />
 				<ReactiveList
 					componentId="SearchResult"
 					dataField="original_title"

diff --git a/packages/web/examples/SearchBoxWithInstantSearch/src/index.css b/packages/web/examples/SearchBoxWithInstantSearch/src/index.css
@@ -15,11 +15,11 @@ body {
 .col {
 	flex: 1;
 	padding: 15px;
+	max-width: 100%;
 }
 
 .row > .col:first-child {
 	border-right: 1px solid #ccc;
-	max-width: 400px;
 }
 
 .row > .col:last-child {
@@ -70,11 +70,6 @@ body {
 .authors-list {
 	color: #9d9d9d;
 	font-weight: bold;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
 }
 
 .ratings-list {
@@ -151,3 +146,12 @@ body {
 .col .meetup-list-image {
 	background-size: cover;
 }
+.authors-list {
+	color: #9d9d9d;
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
diff --git a/packages/web/examples/SearchBoxWithInstantSearch/src/index.js b/packages/web/examples/SearchBoxWithInstantSearch/src/index.js
@@ -12,14 +12,13 @@ const Main = () => (
 		<div className="row">
 			<div className="col">
 				<SearchBox
-					title="SearchBox"
+					title="SearchBox with InstantSearch"
 					dataField={['original_title', 'original_title.search']}
 					componentId="MoviesSensor"
 					autosuggest={false}
+					showFocusShortcutsIcon={false}
 				/>
-			</div>
-
-			<div className="col">
+				<br />
 				<ReactiveList
 					componentId="SearchResult"
 					dataField="original_title"

diff --git a/packages/web/examples/SearchBoxWithKeyboardShortcuts/src/index.css b/packages/web/examples/SearchBoxWithKeyboardShortcuts/src/index.css
@@ -15,11 +15,11 @@ body {
 .col {
 	flex: 1;
 	padding: 15px;
+	max-width: 100%;
 }
 
 .row > .col:first-child {
 	border-right: 1px solid #ccc;
-	max-width: 400px;
 }
 
 .row > .col:last-child {
@@ -70,11 +70,6 @@ body {
 .authors-list {
 	color: #9d9d9d;
 	font-weight: bold;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
 }
 
 .ratings-list {
@@ -151,3 +146,12 @@ body {
 .col .meetup-list-image {
 	background-size: cover;
 }
+.authors-list {
+	color: #9d9d9d;
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
diff --git a/packages/web/examples/SearchBoxWithKeyboardShortcuts/src/index.js b/packages/web/examples/SearchBoxWithKeyboardShortcuts/src/index.js
@@ -12,14 +12,12 @@ const Main = () => (
 		<div className="row">
 			<div className="col">
 				<SearchBox
-					title="SearchBox"
+					title="SearchBox with keyboard shortcuts"
 					dataField={['original_title', 'original_title.search']}
 					componentId="MoviesSensor"
-					focusShortcuts={['SHIFT+Y']}
+					focusShortcuts={['⌘ + K']}
 				/>
-			</div>
-
-			<div className="col">
+				<br />
 				<ReactiveList
 					componentId="SearchResult"
 					dataField="original_title"

diff --git a/packages/web/examples/SearchBoxWithPillSuggestions/src/index.css b/packages/web/examples/SearchBoxWithPillSuggestions/src/index.css
@@ -15,11 +15,11 @@ body {
 .col {
 	flex: 1;
 	padding: 15px;
+	max-width: 100%;
 }
 
 .row > .col:first-child {
 	border-right: 1px solid #ccc;
-	max-width: 400px;
 }
 
 .row > .col:last-child {
@@ -152,6 +152,7 @@ body {
 	display: flex;
 	gap: 10px;
 	overflow: auto;
+	margin-top: 10px;
 }
 .pill-wrapper::-webkit-scrollbar {
 	height: 0px;

diff --git a/packages/web/examples/SearchBoxWithPillSuggestions/src/index.js b/packages/web/examples/SearchBoxWithPillSuggestions/src/index.js
@@ -20,7 +20,7 @@ const Main = () => {
 			<div className="row">
 				<div className="col">
 					<SearchBox
-						title="SearchBox"
+						title="SearchBox with pill suggestions"
 						defaultValue={'Free Guy'}
 						dataField={['original_title', 'original_title.search']}
 						componentId="MoviesSensor"
@@ -34,7 +34,7 @@ const Main = () => {
 							error,
 							data,
 							value,
-							downshiftProps: { isOpen, getItemProps },
+							downshiftProps: { getItemProps },
 						}) => {
 							if (loading) {
 								return <div>Fetching Suggestions.</div>;
@@ -46,7 +46,7 @@ const Main = () => {
 									</div>
 								);
 							}
-							return isOpen && Boolean(value.length) ? (
+							return Boolean(value.length) ? (
 								<div className="pill-wrapper">
 									{data.map((suggestion, index) => (
 										<button
@@ -63,9 +63,7 @@ const Main = () => {
 							) : null;
 						}}
 					/>
-				</div>
-
-				<div className="col">
+					<br />
 					<ReactiveList
 						componentId="SearchResult"
 						dataField="original_title"

diff --git a/packages/web/examples/SearchBoxWithTags/src/index.css b/packages/web/examples/SearchBoxWithTags/src/index.css
@@ -15,11 +15,11 @@ body {
 .col {
 	flex: 1;
 	padding: 15px;
+	max-width: 100%;
 }
 
 .row > .col:first-child {
 	border-right: 1px solid #ccc;
-	max-width: 400px;
 }
 
 .row > .col:last-child {
@@ -70,11 +70,6 @@ body {
 .authors-list {
 	color: #9d9d9d;
 	font-weight: bold;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
 }
 
 .ratings-list {
@@ -151,3 +146,12 @@ body {
 .col .meetup-list-image {
 	background-size: cover;
 }
+.authors-list {
+	color: #9d9d9d;
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
diff --git a/packages/web/examples/SearchBoxWithTags/src/index.js b/packages/web/examples/SearchBoxWithTags/src/index.js
@@ -12,14 +12,13 @@ const Main = () => (
 		<div className="row">
 			<div className="col">
 				<SearchBox
+					defaultValue={['shock and awe', 'Great Expectations']}
 					title="SearchBox"
 					dataField={['original_title', 'original_title.search']}
 					componentId="MoviesSensor"
 					mode={'tag'}
 				/>
-			</div>
-
-			<div className="col">
+				<br />
 				<ReactiveList
 					componentId="SearchResult"
 					dataField="original_title"

diff --git a/packages/web/examples/SearchBoxWithVoiceSearch/src/index.css b/packages/web/examples/SearchBoxWithVoiceSearch/src/index.css
@@ -15,11 +15,11 @@ body {
 .col {
 	flex: 1;
 	padding: 15px;
+	max-width: 100%;
 }
 
 .row > .col:first-child {
 	border-right: 1px solid #ccc;
-	max-width: 400px;
 }
 
 .row > .col:last-child {
@@ -70,11 +70,6 @@ body {
 .authors-list {
 	color: #9d9d9d;
 	font-weight: bold;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	display: -webkit-box;
-	-webkit-line-clamp: 2;
-	-webkit-box-orient: vertical;
 }
 
 .ratings-list {
@@ -151,3 +146,59 @@ body {
 .col .meetup-list-image {
 	background-size: cover;
 }
+
+.pill-wrapper {
+	width: 100%;
+	max-width: 100%;
+	display: flex;
+	gap: 10px;
+	overflow: auto;
+	margin-top: 10px;
+}
+.pill-wrapper::-webkit-scrollbar {
+	height: 0px;
+}
+
+.pill-wrapper:hover::-webkit-scrollbar {
+	height: 2px;
+}
+
+.pill-wrapper::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
+}
+
+.pill-wrapper::-webkit-scrollbar-thumb {
+	background-color: darkgrey;
+	outline: 1px solid slategrey;
+}
+
+.pill-btn {
+	background-color: #ddd;
+	border: none;
+	color: black;
+	padding: 10px 20px;
+	text-align: center;
+	text-decoration: none;
+	display: inline-block;
+	margin: 4px 2px;
+	cursor: pointer;
+	border-radius: 16px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex: 0 0 fit-content;
+	max-width: 250px;
+}
+
+.pill-btn:hover {
+	filter: brightness(0.8);
+}
+.authors-list {
+	color: #9d9d9d;
+	font-weight: bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}