From 112a0fc980c0d0de188ab02305a8861c292c4c1a Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 1 Jun 2023 15:28:51 -0700 Subject: [PATCH 01/33] Implement basic search and styles --- _docs-sources/iac/reference/index.md | 8 +- docs/iac/reference/index.md | 9 +- package.json | 1 + src/components/SearchArea.module.css | 77 ++++++++++++++++ src/components/SearchArea.tsx | 97 ++++++++++++++++++++ yarn.lock | 129 ++++++++++++++++++++++++++- 6 files changed, 315 insertions(+), 6 deletions(-) create mode 100644 src/components/SearchArea.module.css create mode 100644 src/components/SearchArea.tsx diff --git a/_docs-sources/iac/reference/index.md b/_docs-sources/iac/reference/index.md index 0b2d8a653b..9268a0a2e5 100644 --- a/_docs-sources/iac/reference/index.md +++ b/_docs-sources/iac/reference/index.md @@ -1,7 +1,11 @@ +import SearchArea from "/src/components/SearchArea" + # Library Reference -The Library Reference serves as the definitive index for all actively maintained Modules and Services within the Gruntwork Infrastructure as Code Library. This comprehensive reference provides a dedicated page for each module and service providing descriptions, detailed information on input and output variables, and sample code to help you get started. +The Library Reference provides a complete listing of the modules, services, and tools included in the Gruntwork IaC Library. Find one that suits your needs, or suggest a module if you need something we’re missing. If you're already familiar with the IaC Library and are ready to dive right in, you can find the full Service Catalog and Module catalog reference in the left sidebar. -For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/overview) page. This page introduces the concept of Modules and Services, clarifies their respective purposes, and offers guidance on when and how to effectively utilize them. The overview is a great starting point for understanding what the library can offer and how to best navigate it. \ No newline at end of file +For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/overview) page. This page introduces the concept of Modules and Services, clarifies their respective purposes, and offers guidance on when and how to effectively utilize them. The overview is a great starting point for understanding what the library can offer and how to best navigate it. + + diff --git a/docs/iac/reference/index.md b/docs/iac/reference/index.md index d1be2d7937..4c8595f025 100644 --- a/docs/iac/reference/index.md +++ b/docs/iac/reference/index.md @@ -1,14 +1,19 @@ +import SearchArea from "/src/components/SearchArea" + # Library Reference -The Library Reference serves as the definitive index for all actively maintained Modules and Services within the Gruntwork Infrastructure as Code Library. This comprehensive reference provides a dedicated page for each module and service providing descriptions, detailed information on input and output variables, and sample code to help you get started. +The Library Reference provides a complete listing of the modules, services, and tools included in the Gruntwork IaC Library. Find one that suits your needs, or suggest a module if you need something we’re missing. If you're already familiar with the IaC Library and are ready to dive right in, you can find the full Service Catalog and Module catalog reference in the left sidebar. For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/overview) page. This page introduces the concept of Modules and Services, clarifies their respective purposes, and offers guidance on when and how to effectively utilize them. The overview is a great starting point for understanding what the library can offer and how to best navigate it. + + + diff --git a/package.json b/package.json index 6f0e80fc1f..4a3f397ffd 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "raw-loader": "^4.0.2", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-instantsearch-hooks-web": "^6.44.1", "react-modal": "^3.14.4", "ts-jest": "^27.1.3", "url-loader": "^4.1.1" diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css new file mode 100644 index 0000000000..a57d078113 --- /dev/null +++ b/src/components/SearchArea.module.css @@ -0,0 +1,77 @@ +/* BASIC STRUCTURE */ + +.container { + max-width: 600px; + margin-top: 4rem; +} + +.card_container_max_width { + max-width: 400px; + max-height: 200px; + margin: 0 auto; +} + +.card_result { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 50ch; +} + +.SearchContainerItem { + width: 400px; +} + +.SearchContainerItemHeader { + font-size: x-small; + align-items: start; + font-weight: 600; + color: rgba(40, 40, 40, 0.628); + margin-bottom: 0; +} + +.SearchInput { + align-items: center; + background: rgb(252, 252, 252); + border: 0; + border-radius: 5px; + color: rgba(40, 40, 40, 0.628); + display: flex; + font-weight: 500; + height: 36px; + justify-content: space-between; + padding: 0 8px; + -webkit-user-select: none; + user-select: none; + width: 100%; + outline: 1px solid rgb(148, 148, 148); +} + +input:focus-visible { + outline: 2px solid rgb(112, 212, 245); + outline: 2px solid rgb(112, 212, 245); + border-radius: 3px; +} + +.FacetListInput { + border-radius: 5px; + display: flex; + height: 36px; + background: rgb(252, 252, 252); + color: rgba(40, 40, 40, 0.628); + outline: 1px solid rgb(148, 148, 148); + border-radius: 5px; +} + +.SearchSubmit { + display: none; +} + +.SearchReset { + display: none; +} + +.searchModal { + width: 50%; + height: 400px; +} diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx new file mode 100644 index 0000000000..be6b99de63 --- /dev/null +++ b/src/components/SearchArea.tsx @@ -0,0 +1,97 @@ +import algoliasearch from "algoliasearch/lite" +import React, { PropsWithChildren } from "react" +import { + Configure, + InstantSearch, + RefinementList, + SearchBox, + UseHitsProps, + useHits +} from "react-instantsearch-hooks-web" +import { Card } from "./Card" +import { CardGroup } from "./CardGroup" + +import styles from "./SearchArea.module.css" +import Grid from "./Grid" + +interface SearchAreaProps { + name: string + requirement?: "required" | "optional" + type: string +} + +function CustomHits(props: UseHitsProps) { + const { hits, results, sendEvent } = useHits(props) + + /* + Don't display search results where the module has been deprecated. We prefix the friendly name for these + modules with [DEPRECATED], so we filter for all hits where there is not a match for the prefix. + */ + const activeHits = hits.filter((hit: any) => !hit.moduleFriendlyName.startsWith('[DEPRECATED]')) + + /* + Don't display modules where the description contains a note. + These modules all state they are not intended to be used directly. + */ + const onlyUseableModules = activeHits.filter((hit: any) => hit.moduleDescription.toLowerCase().indexOf("note") === -1) + + return ( + + {onlyUseableModules.map((hit: any) => { + return ( + +
+ + ) + })} + + ) +} + +export const SearchArea: React.FunctionComponent< + PropsWithChildren +> = ({ name, requirement, type, children }) => { + const algoliaAppId: string = "7AWZHGNJE2" + // This key is for search only. It is safe to check in. + const algoliaSearchKey: string = "a976ea48057ceaa662656ec8f4f591af" + + const searchClient = algoliasearch(algoliaAppId, algoliaSearchKey) + + return ( +
+ + + + +
+

SEARCH

+ +
+
+

TOPIC

+ +
+
+

TYPE

+ +
+ + + +
+ ) +} + +export default SearchArea diff --git a/yarn.lock b/yarn.lock index 4cad00a819..f9ab1a207c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -338,6 +338,19 @@ "@algolia/logger-common" "4.17.1" "@algolia/requester-common" "4.17.1" +"@algolia/ui-components-highlight-vdom@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@algolia/ui-components-highlight-vdom/-/ui-components-highlight-vdom-1.2.1.tgz#c430c9f090ef8c68477ef4b685324ed231ce0c13" + integrity sha512-IlYgIaCUEkz9ezNbwugwKv991oOHhveyq6nzL0F1jDzg1p3q5Yj/vO4KpNG910r2dwGCG3nEm5GtChcLnarhFA== + dependencies: + "@algolia/ui-components-shared" "1.2.1" + "@babel/runtime" "^7.0.0" + +"@algolia/ui-components-shared@1.2.1", "@algolia/ui-components-shared@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@algolia/ui-components-shared/-/ui-components-shared-1.2.1.tgz#62e3a04fc11623f149312942cd764d4528dd994c" + integrity sha512-a7mYHf/GVQfhAx/HRiMveKkFvHspQv/REdG+C/FIOosiSmNZxX7QebDwJkrGSmDWdXO12D0Qv1xn3AytFcEDlQ== + "@ampproject/remapping@^2.1.0": version "2.2.0" resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d" @@ -2344,6 +2357,13 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.11" +"@babel/runtime@^7.0.0": + version "7.22.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb" + integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.8.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" @@ -3872,6 +3892,11 @@ dependencies: "@types/node" "*" +"@types/dom-speech-recognition@^0.0.1": + version "0.0.1" + resolved "https://registry.yarnpkg.com/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.1.tgz#e326761a04b4a49c0eec2ac7948afc1c6aa12baa" + integrity sha512-udCxb8DvjcDKfk1WTBzDsxFbLgYxmQGKrE/ricoMqHRNjSlSUCcamVTA5lIQqzY10mY5qCY0QDwBfFEwhfoDPw== + "@types/eslint-scope@^3.7.3": version "3.7.4" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" @@ -3936,6 +3961,11 @@ "@types/qs" "*" "@types/serve-static" "*" +"@types/google.maps@^3.45.3": + version "3.53.2" + resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.53.2.tgz#ba921cc7900b72d4f58538a770a99bfadd9952a2" + integrity sha512-rgTa3R5DyFTcjX4hmuGs0XR+kD4M5tZ14lcyYzDDJGr5h0JYj7DbbNZRZNJKDzZOGH3fOXWpIbZGj3BxZbpmjw== + "@types/graceful-fs@^4.1.2": version "4.1.5" resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15" @@ -3960,6 +3990,11 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== +"@types/hogan.js@^3.0.0": + version "3.0.1" + resolved "https://registry.yarnpkg.com/@types/hogan.js/-/hogan.js-3.0.1.tgz#64c54407b30da359763e14877f5702b8ae85d61c" + integrity sha512-D03i/2OY7kGyMq9wdQ7oD8roE49z/ZCZThe/nbahtvuqCNZY9T2MfedOWyeBdbEpY2W8Gnh/dyJLdFtUCOkYbg== + "@types/html-minifier-terser@^6.0.0": version "6.0.0" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.0.0.tgz#563c1c6c132cd204e71512f9c0b394ff90d3fae7" @@ -4085,7 +4120,7 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df" integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ== -"@types/qs@*": +"@types/qs@*", "@types/qs@^6.5.3": version "6.9.7" resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== @@ -4358,6 +4393,11 @@ abab@^2.0.3, abab@^2.0.5: resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a" integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q== +abbrev@1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" + integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== + accepts@~1.3.4, accepts@~1.3.5: version "1.3.7" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd" @@ -4488,6 +4528,13 @@ algoliasearch-helper@^3.10.0: dependencies: "@algolia/events" "^4.0.1" +algoliasearch-helper@^3.13.0: + version "3.13.0" + resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.13.0.tgz#1ccca7056fd27c2b0b5c92dd5c0abf4314bec3b8" + integrity sha512-kV3c1jMQCvkARtGsSDvAwuht4PAMSsQILqPiH4WFiARoa3jXJ/r1TQoBWAjWyWF48rsNYCv7kzxgB4LTxrvvuw== + dependencies: + "@algolia/events" "^4.0.1" + algoliasearch@^4.0.0: version "4.11.0" resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.11.0.tgz#234befb3ac355c094077f0edf3777240b1ee013c" @@ -7190,6 +7237,14 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" +hogan.js@^3.0.2: + version "3.0.2" + resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd" + integrity sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg== + dependencies: + mkdirp "0.3.0" + nopt "1.0.10" + hoist-non-react-statics@^3.1.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -7207,6 +7262,11 @@ hpack.js@^2.1.6: readable-stream "^2.0.1" wbuf "^1.1.0" +htm@^3.0.0: + version "3.1.1" + resolved "https://registry.yarnpkg.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78" + integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ== + html-encoding-sniffer@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3" @@ -7482,6 +7542,25 @@ inline-style-parser@0.1.1: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== +instantsearch.js@4.56.1: + version "4.56.1" + resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.56.1.tgz#ddff17fea5ed8d8a0e14e66a977f107f7143adef" + integrity sha512-4BQdnMEDWP9IRF12xninO/yR1f7F+mE935X0eVKuhUqitZF7GvUsL93MysXxHyPJnrbC6o0Aofc3kNcTKteKWw== + dependencies: + "@algolia/events" "^4.0.1" + "@algolia/ui-components-highlight-vdom" "^1.2.1" + "@algolia/ui-components-shared" "^1.2.1" + "@types/dom-speech-recognition" "^0.0.1" + "@types/google.maps" "^3.45.3" + "@types/hogan.js" "^3.0.0" + "@types/qs" "^6.5.3" + algoliasearch-helper "^3.13.0" + hogan.js "^3.0.2" + htm "^3.0.0" + preact "^10.10.0" + qs "^6.5.1 < 6.10" + search-insights "^2.6.0" + internal-slot@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c" @@ -8958,6 +9037,11 @@ minimist@^1.2.6: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== +mkdirp@0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e" + integrity sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew== + mkdirp@~0.5.1: version "0.5.5" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" @@ -9075,6 +9159,13 @@ node-releases@^2.0.6: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.8.tgz#0f349cdc8fcfa39a92ac0be9bc48b7706292b9ae" integrity sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A== +nopt@1.0.10: + version "1.0.10" + resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" + integrity sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg== + dependencies: + abbrev "1" + normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" @@ -9818,6 +9909,11 @@ posthog-docusaurus@^1.0.3: resolved "https://registry.yarnpkg.com/posthog-docusaurus/-/posthog-docusaurus-1.0.3.tgz#bd49dd7f425bb6bce81ac49d3c251f8b0f9cd9d9" integrity sha512-gvvHpKmOIcO7Sj68T2/vfYR/VfZmYoTaZO6kDZTJXQ309jdrhlrDncPr/Gjy+C0W9zaVlrOT6vvC7SdBBmvbdg== +preact@^10.10.0: + version "10.15.1" + resolved "https://registry.yarnpkg.com/preact/-/preact-10.15.1.tgz#a1de60c9fc0c79a522d969c65dcaddc5d994eede" + integrity sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g== + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -9961,6 +10057,11 @@ qs@6.11.0: dependencies: side-channel "^1.0.4" +"qs@^6.5.1 < 6.10": + version "6.9.7" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe" + integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw== + querystring@0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620" @@ -10098,6 +10199,25 @@ react-helmet-async@*, react-helmet-async@^1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" +react-instantsearch-hooks-web@^6.44.1: + version "6.44.1" + resolved "https://registry.yarnpkg.com/react-instantsearch-hooks-web/-/react-instantsearch-hooks-web-6.44.1.tgz#79706bf83fd70cef1c5cd534fcafc2eba4e65b3b" + integrity sha512-QZwBakRfBEAhla18YMk2te988p7BN6DA2G6DpXKvOCUSBUR72Lp5+DH8OAO0M7jGtH9xzFcCWVMD50hKhK8yaQ== + dependencies: + "@babel/runtime" "^7.1.2" + instantsearch.js "4.56.1" + react-instantsearch-hooks "6.44.1" + +react-instantsearch-hooks@6.44.1: + version "6.44.1" + resolved "https://registry.yarnpkg.com/react-instantsearch-hooks/-/react-instantsearch-hooks-6.44.1.tgz#10483bd27b0c399d3297d055421572914694e653" + integrity sha512-2WZd+Q8iA8J2tSvxNhGg7FOHgng+IE34tfIksoGyxjn6N7AW42VGdL0Wdpm+J98eJemCEiJ3/seTJaOHq3a+YA== + dependencies: + "@babel/runtime" "^7.1.2" + algoliasearch-helper "^3.13.0" + instantsearch.js "4.56.1" + use-sync-external-store "^1.0.0" + react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -10653,6 +10773,11 @@ schema-utils@^4.0.0: ajv-formats "^2.1.1" ajv-keywords "^5.0.0" +search-insights@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.6.0.tgz#bb8771a73b83c4a0f1f207c2f64fea01acd3e7d0" + integrity sha512-vU2/fJ+h/Mkm/DJOe+EaM5cafJv/1rRTZpGJTuFPf/Q5LjzgMDsqPdSaZsAe+GAWHHsfsu+rQSAn6c8IGtBEVw== + section-matter@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167" @@ -11768,7 +11893,7 @@ use-latest@^1.0.0: dependencies: use-isomorphic-layout-effect "^1.0.0" -use-sync-external-store@^1.2.0: +use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== From 22dc3a546c67d173d14e85343a7dc240dcaa2062 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Fri, 2 Jun 2023 08:36:00 -0700 Subject: [PATCH 02/33] add no results found markup --- src/components/SearchArea.module.css | 11 +++++++ src/components/SearchArea.tsx | 49 ++++++++++++++++++---------- 2 files changed, 42 insertions(+), 18 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index a57d078113..714e90d708 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -22,6 +22,17 @@ width: 400px; } +.NoResultsContainer { + max-width: 600px; + align-items: center; +} + +.NoResults { + font-size: large; + color: rgba(40, 40, 40, 0.628); + font-style: italic; +} + .SearchContainerItemHeader { font-size: x-small; align-items: start; diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index be6b99de63..6bd5a052bc 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -20,24 +20,9 @@ interface SearchAreaProps { type: string } -function CustomHits(props: UseHitsProps) { - const { hits, results, sendEvent } = useHits(props) - - /* - Don't display search results where the module has been deprecated. We prefix the friendly name for these - modules with [DEPRECATED], so we filter for all hits where there is not a match for the prefix. - */ - const activeHits = hits.filter((hit: any) => !hit.moduleFriendlyName.startsWith('[DEPRECATED]')) - - /* - Don't display modules where the description contains a note. - These modules all state they are not intended to be used directly. - */ - const onlyUseableModules = activeHits.filter((hit: any) => hit.moduleDescription.toLowerCase().indexOf("note") === -1) - - return ( - - {onlyUseableModules.map((hit: any) => { +function ResultCardGroup(hits: any) { + return ( + {hits.map((hit: any) => { return ( +

No results found, please try another search

+ + ) +} + +function CustomHits(props: UseHitsProps) { + const { hits, results, sendEvent } = useHits(props) + + /* + Don't display search results where the module has been deprecated. We prefix the friendly name for these + modules with [DEPRECATED], so we filter for all hits where there is not a match for the prefix. + */ + const activeHits = hits.filter((hit: any) => !hit.moduleFriendlyName.startsWith('[DEPRECATED]')) + + /* + Don't display modules where the description contains a note. + These modules all state they are not intended to be used directly, and the module description breaks out of the card + */ + const onlyUseableModules = activeHits.filter((hit: any) => hit.moduleDescription.toLowerCase().indexOf("note") === -1) + + return ( + onlyUseableModules.length > 0 ? ResultCardGroup(onlyUseableModules) : NoResults() + ) +} + export const SearchArea: React.FunctionComponent< PropsWithChildren > = ({ name, requirement, type, children }) => { From 94e6fe31af9a6efd5617099987a3a85705bcc3e9 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Fri, 2 Jun 2023 13:35:00 -0700 Subject: [PATCH 03/33] incremental checkin --- src/components/SearchArea.module.css | 24 +----- src/components/SearchArea.tsx | 107 +++++++++++++++++++++------ 2 files changed, 87 insertions(+), 44 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 714e90d708..0e06b3cc23 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -64,25 +64,7 @@ input:focus-visible { border-radius: 3px; } -.FacetListInput { - border-radius: 5px; - display: flex; - height: 36px; - background: rgb(252, 252, 252); - color: rgba(40, 40, 40, 0.628); - outline: 1px solid rgb(148, 148, 148); - border-radius: 5px; -} - -.SearchSubmit { - display: none; -} - -.SearchReset { - display: none; -} - -.searchModal { - width: 50%; - height: 400px; +.FacetList { + padding-left: 0pt; + list-style-type: none; } diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 6bd5a052bc..aa73417799 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -1,13 +1,6 @@ import algoliasearch from "algoliasearch/lite" -import React, { PropsWithChildren } from "react" -import { - Configure, - InstantSearch, - RefinementList, - SearchBox, - UseHitsProps, - useHits -} from "react-instantsearch-hooks-web" +import React, { PropsWithChildren, useEffect, useState } from "react" + import { Card } from "./Card" import { CardGroup } from "./CardGroup" @@ -50,14 +43,14 @@ function NoResults() { ) } -function CustomHits(props: UseHitsProps) { - const { hits, results, sendEvent } = useHits(props) +function CustomHits(hits: any[]) { + let newHits = hits["hits"]["searchHits"]; /* Don't display search results where the module has been deprecated. We prefix the friendly name for these modules with [DEPRECATED], so we filter for all hits where there is not a match for the prefix. */ - const activeHits = hits.filter((hit: any) => !hit.moduleFriendlyName.startsWith('[DEPRECATED]')) + const activeHits = newHits.filter((hit: any) => !hit.moduleFriendlyName.startsWith('[DEPRECATED]')) /* Don't display modules where the description contains a note. @@ -70,6 +63,7 @@ function CustomHits(props: UseHitsProps) { ) } + export const SearchArea: React.FunctionComponent< PropsWithChildren > = ({ name, requirement, type, children }) => { @@ -78,31 +72,98 @@ export const SearchArea: React.FunctionComponent< const algoliaSearchKey: string = "a976ea48057ceaa662656ec8f4f591af" const searchClient = algoliasearch(algoliaAppId, algoliaSearchKey) + const index = searchClient.initIndex("dev_docs_sourcer-modules"); + + const [repoTitleDropdownVisible, setRepoTitleDropdownVisible] = useState(false); + const [typeDropdownVisible, setTypeDropdownVisible] = useState(false); + + const [searchTerm, setSearchTerm] = useState(""); + const [facetFilters, setFacetFilters] = useState(["type:module"]) + + const [searchHits, setSearchHits] = useState([]); + const [searchRepoFacets, setSearchRepoFacets] = useState([]); + const [searchTypeFacets, setSearchTypeFacets] = useState([]) + + const handleSearchFacets = (facets: {}): Object[] => { + const facetArray = [] + + for (const k in facets) { + let v = facets[k]; + facetArray.push({key: k, value: v}); + } + + return facetArray + } + + const loadSearchHits = async () => { + await index.search(searchTerm, {facets: ["mainRepoTitle", "type"], facetFilters: facetFilters}).then(resp => { + setSearchHits(resp["hits"]); + setSearchRepoFacets(handleSearchFacets(resp["facets"]["mainRepoTitle"])); + setSearchTypeFacets(handleSearchFacets(resp["facets"]["type"])); + }); + } + + useEffect(() => { + loadSearchHits() + }, []) + + const onSearch = async (event: React.ChangeEvent) => { + setSearchTerm(event.target.value); + loadSearchHits() + } + + const handleTypeFacetDropdownEvent = () => { + setTypeDropdownVisible(!typeDropdownVisible) + } + + const handleRepoTitleFacetDropdownEvent = () => { + setRepoTitleDropdownVisible(!repoTitleDropdownVisible) + } return (
- - -

SEARCH

- +

TOPIC

- +
+ + {repoTitleDropdownVisible && +
    + {searchRepoFacets.map(f => { + return
  • + + {f["key"]} {f["value"]} +
    • + })} +
} +

TYPE

- +
+ + {typeDropdownVisible && +
    + {searchTypeFacets.map(f => { + return
  • + + {f["key"]} {f["value"]} +
    • + })} +
} +
- - + + {/* */}
) } From bbdf1d4b362e23b688f77fc74cf57c98f240d1ce Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Fri, 2 Jun 2023 15:18:54 -0700 Subject: [PATCH 04/33] friday afternoon checkin --- src/components/SearchArea.module.css | 31 ++++++++++++++ src/components/SearchArea.tsx | 60 ++++++++++++++++++---------- 2 files changed, 71 insertions(+), 20 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 0e06b3cc23..e31529cca6 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -67,4 +67,35 @@ input:focus-visible { .FacetList { padding-left: 0pt; list-style-type: none; + background: rgb(252, 252, 252); + border: 0; + border-radius: 5px; +} + +.FacetDropdownButton { + background: rgb(252, 252, 252); + border: 0; + border-radius: 5px; + color: rgba(40, 40, 40, 0.628); + display: flex; + height: 36px; + justify-content: space-between; + padding: 0 8px; + -webkit-user-select: none; + user-select: none; + width: 100%; + outline: 1px solid rgb(148, 148, 148); +} + +.FacetButtonText { + align-items: center; + color: rgba(40, 40, 40, 0.628); + display: flex; + font-weight: 500; + height: 36px; + justify-content: space-between; + padding: 0 8px; + -webkit-user-select: none; + user-select: none; + width: 100%; } diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index aa73417799..2de32e49f8 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -46,6 +46,10 @@ function NoResults() { function CustomHits(hits: any[]) { let newHits = hits["hits"]["searchHits"]; + if (newHits.length === 0) { + return NoResults() + } + /* Don't display search results where the module has been deprecated. We prefix the friendly name for these modules with [DEPRECATED], so we filter for all hits where there is not a match for the prefix. @@ -74,7 +78,7 @@ export const SearchArea: React.FunctionComponent< const searchClient = algoliasearch(algoliaAppId, algoliaSearchKey) const index = searchClient.initIndex("dev_docs_sourcer-modules"); - const [repoTitleDropdownVisible, setRepoTitleDropdownVisible] = useState(false); + const [repoTitleDropdownVisible, setTitleDropdownVisible] = useState(false); const [typeDropdownVisible, setTypeDropdownVisible] = useState(false); const [searchTerm, setSearchTerm] = useState(""); @@ -98,8 +102,12 @@ export const SearchArea: React.FunctionComponent< const loadSearchHits = async () => { await index.search(searchTerm, {facets: ["mainRepoTitle", "type"], facetFilters: facetFilters}).then(resp => { setSearchHits(resp["hits"]); - setSearchRepoFacets(handleSearchFacets(resp["facets"]["mainRepoTitle"])); - setSearchTypeFacets(handleSearchFacets(resp["facets"]["type"])); + + // Only load the facets once - when the page loads + if (searchRepoFacets.length === 0 && searchTypeFacets.length == 0) { + setSearchRepoFacets(handleSearchFacets(resp["facets"]["mainRepoTitle"])); + setSearchTypeFacets(handleSearchFacets(resp["facets"]["type"])); + } }); } @@ -107,17 +115,35 @@ export const SearchArea: React.FunctionComponent< loadSearchHits() }, []) - const onSearch = async (event: React.ChangeEvent) => { + useEffect(() => { + loadSearchHits(); + }, [searchTerm]); + + useEffect(() => { + loadSearchHits(); + }, [facetFilters]); + + const onSearch = (event: React.ChangeEvent) => { + console.log(event.target.value); setSearchTerm(event.target.value); - loadSearchHits() + } + + const selectRepoTitleFacet = (facetName: string) => { + if (`mainRepoTitle:${facetName}` === facetFilters[0]) { + // Unset + setFacetFilters(["type:module"]) + } else { + setFacetFilters([`mainRepoTitle:${facetName}`]); + } + setTitleDropdownVisible(false); } const handleTypeFacetDropdownEvent = () => { - setTypeDropdownVisible(!typeDropdownVisible) + setTypeDropdownVisible(!typeDropdownVisible); } - const handleRepoTitleFacetDropdownEvent = () => { - setRepoTitleDropdownVisible(!repoTitleDropdownVisible) + const handleRepoFacetDropdownEvent = () => { + setTitleDropdownVisible(!repoTitleDropdownVisible); } return ( @@ -130,16 +156,13 @@ export const SearchArea: React.FunctionComponent<

TOPIC

- {repoTitleDropdownVisible &&
    {searchRepoFacets.map(f => { - return
  • - - {f["key"]} {f["value"]} -
    • + return
  • selectRepoTitleFacet(f["key"])} key={f["key"]}>{f["key"]}
    • })}
}
@@ -147,16 +170,13 @@ export const SearchArea: React.FunctionComponent<

TYPE

- {typeDropdownVisible &&
    {searchTypeFacets.map(f => { - return
  • - - {f["key"]} {f["value"]} -
    • + return
  • {f["key"]}
    • })}
}
From cbacbf07dbd9a9bd16e28ae4ef582fd798a84774 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Mon, 5 Jun 2023 12:43:22 -0700 Subject: [PATCH 05/33] incremental checkin --- package.json | 1 - src/components/SearchArea.module.css | 19 +++- src/components/SearchArea.tsx | 28 +++--- yarn.lock | 129 +-------------------------- 4 files changed, 33 insertions(+), 144 deletions(-) diff --git a/package.json b/package.json index 4a3f397ffd..6f0e80fc1f 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "raw-loader": "^4.0.2", "react": "^17.0.1", "react-dom": "^17.0.1", - "react-instantsearch-hooks-web": "^6.44.1", "react-modal": "^3.14.4", "ts-jest": "^27.1.3", "url-loader": "^4.1.1" diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index e31529cca6..75c8e3e1be 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -64,19 +64,30 @@ input:focus-visible { border-radius: 3px; } -.FacetList { +.FacetListContainer { padding-left: 0pt; - list-style-type: none; background: rgb(252, 252, 252); - border: 0; border-radius: 5px; + position:absolute; + box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); +} + +.FacetList { + padding-left: 10px; + padding-right: 10px; + border-radius: 5px; + list-style-type: none; +} + +.FacetListItem { + color:rgba(40, 40, 40, 0.628); } .FacetDropdownButton { background: rgb(252, 252, 252); - border: 0; border-radius: 5px; color: rgba(40, 40, 40, 0.628); + border: 0; display: flex; height: 36px; justify-content: space-between; diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 2de32e49f8..2f0b903bf6 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -155,16 +155,18 @@ export const SearchArea: React.FunctionComponent<

TOPIC

-
+
{repoTitleDropdownVisible && -
    - {searchRepoFacets.map(f => { - return
  • selectRepoTitleFacet(f["key"])} key={f["key"]}>{f["key"]}
    • - })} -
} +
+
    + {searchRepoFacets.map(f => { + return
  • selectRepoTitleFacet(f["key"])} key={f["key"]}>{f["key"]}
    • + })} +
+
}
@@ -174,11 +176,13 @@ export const SearchArea: React.FunctionComponent<

Module

{typeDropdownVisible && -
    - {searchTypeFacets.map(f => { - return
  • {f["key"]}
    • - })} -
} +
+
    + {searchTypeFacets.map(f => { + return
  • {f["key"]}
    • + })} +
+
}
diff --git a/yarn.lock b/yarn.lock index f9ab1a207c..4cad00a819 100644 --- a/yarn.lock +++ b/yarn.lock @@ -338,19 +338,6 @@ "@algolia/logger-common" "4.17.1" "@algolia/requester-common" "4.17.1" -"@algolia/ui-components-highlight-vdom@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@algolia/ui-components-highlight-vdom/-/ui-components-highlight-vdom-1.2.1.tgz#c430c9f090ef8c68477ef4b685324ed231ce0c13" - integrity sha512-IlYgIaCUEkz9ezNbwugwKv991oOHhveyq6nzL0F1jDzg1p3q5Yj/vO4KpNG910r2dwGCG3nEm5GtChcLnarhFA== - dependencies: - "@algolia/ui-components-shared" "1.2.1" - "@babel/runtime" "^7.0.0" - -"@algolia/ui-components-shared@1.2.1", "@algolia/ui-components-shared@^1.2.1": - version "1.2.1" - resolved "https://registry.yarnpkg.com/@algolia/ui-components-shared/-/ui-components-shared-1.2.1.tgz#62e3a04fc11623f149312942cd764d4528dd994c" - integrity sha512-a7mYHf/GVQfhAx/HRiMveKkFvHspQv/REdG+C/FIOosiSmNZxX7QebDwJkrGSmDWdXO12D0Qv1xn3AytFcEDlQ== - "@ampproject/remapping@^2.1.0": version "2.2.0" resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d" @@ -2357,13 +2344,6 @@ core-js-pure "^3.25.1" regenerator-runtime "^0.13.11" -"@babel/runtime@^7.0.0": - version "7.22.3" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb" - integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ== - dependencies: - regenerator-runtime "^0.13.11" - "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.13", "@babel/runtime@^7.8.4": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" @@ -3892,11 +3872,6 @@ dependencies: "@types/node" "*" -"@types/dom-speech-recognition@^0.0.1": - version "0.0.1" - resolved "https://registry.yarnpkg.com/@types/dom-speech-recognition/-/dom-speech-recognition-0.0.1.tgz#e326761a04b4a49c0eec2ac7948afc1c6aa12baa" - integrity sha512-udCxb8DvjcDKfk1WTBzDsxFbLgYxmQGKrE/ricoMqHRNjSlSUCcamVTA5lIQqzY10mY5qCY0QDwBfFEwhfoDPw== - "@types/eslint-scope@^3.7.3": version "3.7.4" resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.4.tgz#37fc1223f0786c39627068a12e94d6e6fc61de16" @@ -3961,11 +3936,6 @@ "@types/qs" "*" "@types/serve-static" "*" -"@types/google.maps@^3.45.3": - version "3.53.2" - resolved "https://registry.yarnpkg.com/@types/google.maps/-/google.maps-3.53.2.tgz#ba921cc7900b72d4f58538a770a99bfadd9952a2" - integrity sha512-rgTa3R5DyFTcjX4hmuGs0XR+kD4M5tZ14lcyYzDDJGr5h0JYj7DbbNZRZNJKDzZOGH3fOXWpIbZGj3BxZbpmjw== - "@types/graceful-fs@^4.1.2": version "4.1.5" resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.5.tgz#21ffba0d98da4350db64891f92a9e5db3cdb4e15" @@ -3990,11 +3960,6 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64" integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA== -"@types/hogan.js@^3.0.0": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@types/hogan.js/-/hogan.js-3.0.1.tgz#64c54407b30da359763e14877f5702b8ae85d61c" - integrity sha512-D03i/2OY7kGyMq9wdQ7oD8roE49z/ZCZThe/nbahtvuqCNZY9T2MfedOWyeBdbEpY2W8Gnh/dyJLdFtUCOkYbg== - "@types/html-minifier-terser@^6.0.0": version "6.0.0" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.0.0.tgz#563c1c6c132cd204e71512f9c0b394ff90d3fae7" @@ -4120,7 +4085,7 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df" integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ== -"@types/qs@*", "@types/qs@^6.5.3": +"@types/qs@*": version "6.9.7" resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== @@ -4393,11 +4358,6 @@ abab@^2.0.3, abab@^2.0.5: resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a" integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q== -abbrev@1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" - integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== - accepts@~1.3.4, accepts@~1.3.5: version "1.3.7" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.7.tgz#531bc726517a3b2b41f850021c6cc15eaab507cd" @@ -4528,13 +4488,6 @@ algoliasearch-helper@^3.10.0: dependencies: "@algolia/events" "^4.0.1" -algoliasearch-helper@^3.13.0: - version "3.13.0" - resolved "https://registry.yarnpkg.com/algoliasearch-helper/-/algoliasearch-helper-3.13.0.tgz#1ccca7056fd27c2b0b5c92dd5c0abf4314bec3b8" - integrity sha512-kV3c1jMQCvkARtGsSDvAwuht4PAMSsQILqPiH4WFiARoa3jXJ/r1TQoBWAjWyWF48rsNYCv7kzxgB4LTxrvvuw== - dependencies: - "@algolia/events" "^4.0.1" - algoliasearch@^4.0.0: version "4.11.0" resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.11.0.tgz#234befb3ac355c094077f0edf3777240b1ee013c" @@ -7237,14 +7190,6 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" -hogan.js@^3.0.2: - version "3.0.2" - resolved "https://registry.yarnpkg.com/hogan.js/-/hogan.js-3.0.2.tgz#4cd9e1abd4294146e7679e41d7898732b02c7bfd" - integrity sha512-RqGs4wavGYJWE07t35JQccByczmNUXQT0E12ZYV1VKYu5UiAU9lsos/yBAcf840+zrUQQxgVduCR5/B8nNtibg== - dependencies: - mkdirp "0.3.0" - nopt "1.0.10" - hoist-non-react-statics@^3.1.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" @@ -7262,11 +7207,6 @@ hpack.js@^2.1.6: readable-stream "^2.0.1" wbuf "^1.1.0" -htm@^3.0.0: - version "3.1.1" - resolved "https://registry.yarnpkg.com/htm/-/htm-3.1.1.tgz#49266582be0dc66ed2235d5ea892307cc0c24b78" - integrity sha512-983Vyg8NwUE7JkZ6NmOqpCZ+sh1bKv2iYTlUkzlWmA5JD2acKoxd4KVxbMmxX/85mtfdnDmTFoNKcg5DGAvxNQ== - html-encoding-sniffer@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz#42a6dc4fd33f00281176e8b23759ca4e4fa185f3" @@ -7542,25 +7482,6 @@ inline-style-parser@0.1.1: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== -instantsearch.js@4.56.1: - version "4.56.1" - resolved "https://registry.yarnpkg.com/instantsearch.js/-/instantsearch.js-4.56.1.tgz#ddff17fea5ed8d8a0e14e66a977f107f7143adef" - integrity sha512-4BQdnMEDWP9IRF12xninO/yR1f7F+mE935X0eVKuhUqitZF7GvUsL93MysXxHyPJnrbC6o0Aofc3kNcTKteKWw== - dependencies: - "@algolia/events" "^4.0.1" - "@algolia/ui-components-highlight-vdom" "^1.2.1" - "@algolia/ui-components-shared" "^1.2.1" - "@types/dom-speech-recognition" "^0.0.1" - "@types/google.maps" "^3.45.3" - "@types/hogan.js" "^3.0.0" - "@types/qs" "^6.5.3" - algoliasearch-helper "^3.13.0" - hogan.js "^3.0.2" - htm "^3.0.0" - preact "^10.10.0" - qs "^6.5.1 < 6.10" - search-insights "^2.6.0" - internal-slot@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c" @@ -9037,11 +8958,6 @@ minimist@^1.2.6: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== -mkdirp@0.3.0: - version "0.3.0" - resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.3.0.tgz#1bbf5ab1ba827af23575143490426455f481fe1e" - integrity sha512-OHsdUcVAQ6pOtg5JYWpCBo9W/GySVuwvP9hueRMW7UqshC0tbfzLv8wjySTPm3tfUZ/21CE9E1pJagOA91Pxew== - mkdirp@~0.5.1: version "0.5.5" resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def" @@ -9159,13 +9075,6 @@ node-releases@^2.0.6: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.8.tgz#0f349cdc8fcfa39a92ac0be9bc48b7706292b9ae" integrity sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A== -nopt@1.0.10: - version "1.0.10" - resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee" - integrity sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg== - dependencies: - abbrev "1" - normalize-path@^3.0.0, normalize-path@~3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" @@ -9909,11 +9818,6 @@ posthog-docusaurus@^1.0.3: resolved "https://registry.yarnpkg.com/posthog-docusaurus/-/posthog-docusaurus-1.0.3.tgz#bd49dd7f425bb6bce81ac49d3c251f8b0f9cd9d9" integrity sha512-gvvHpKmOIcO7Sj68T2/vfYR/VfZmYoTaZO6kDZTJXQ309jdrhlrDncPr/Gjy+C0W9zaVlrOT6vvC7SdBBmvbdg== -preact@^10.10.0: - version "10.15.1" - resolved "https://registry.yarnpkg.com/preact/-/preact-10.15.1.tgz#a1de60c9fc0c79a522d969c65dcaddc5d994eede" - integrity sha512-qs2ansoQEwzNiV5eAcRT1p1EC/dmEzaATVDJNiB3g2sRDWdA7b7MurXdJjB2+/WQktGWZwxvDrnuRFbWuIr64g== - prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -10057,11 +9961,6 @@ qs@6.11.0: dependencies: side-channel "^1.0.4" -"qs@^6.5.1 < 6.10": - version "6.9.7" - resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe" - integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw== - querystring@0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620" @@ -10199,25 +10098,6 @@ react-helmet-async@*, react-helmet-async@^1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-instantsearch-hooks-web@^6.44.1: - version "6.44.1" - resolved "https://registry.yarnpkg.com/react-instantsearch-hooks-web/-/react-instantsearch-hooks-web-6.44.1.tgz#79706bf83fd70cef1c5cd534fcafc2eba4e65b3b" - integrity sha512-QZwBakRfBEAhla18YMk2te988p7BN6DA2G6DpXKvOCUSBUR72Lp5+DH8OAO0M7jGtH9xzFcCWVMD50hKhK8yaQ== - dependencies: - "@babel/runtime" "^7.1.2" - instantsearch.js "4.56.1" - react-instantsearch-hooks "6.44.1" - -react-instantsearch-hooks@6.44.1: - version "6.44.1" - resolved "https://registry.yarnpkg.com/react-instantsearch-hooks/-/react-instantsearch-hooks-6.44.1.tgz#10483bd27b0c399d3297d055421572914694e653" - integrity sha512-2WZd+Q8iA8J2tSvxNhGg7FOHgng+IE34tfIksoGyxjn6N7AW42VGdL0Wdpm+J98eJemCEiJ3/seTJaOHq3a+YA== - dependencies: - "@babel/runtime" "^7.1.2" - algoliasearch-helper "^3.13.0" - instantsearch.js "4.56.1" - use-sync-external-store "^1.0.0" - react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -10773,11 +10653,6 @@ schema-utils@^4.0.0: ajv-formats "^2.1.1" ajv-keywords "^5.0.0" -search-insights@^2.6.0: - version "2.6.0" - resolved "https://registry.yarnpkg.com/search-insights/-/search-insights-2.6.0.tgz#bb8771a73b83c4a0f1f207c2f64fea01acd3e7d0" - integrity sha512-vU2/fJ+h/Mkm/DJOe+EaM5cafJv/1rRTZpGJTuFPf/Q5LjzgMDsqPdSaZsAe+GAWHHsfsu+rQSAn6c8IGtBEVw== - section-matter@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/section-matter/-/section-matter-1.0.0.tgz#e9041953506780ec01d59f292a19c7b850b84167" @@ -11893,7 +11768,7 @@ use-latest@^1.0.0: dependencies: use-isomorphic-layout-effect "^1.0.0" -use-sync-external-store@^1.0.0, use-sync-external-store@^1.2.0: +use-sync-external-store@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a" integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA== From 476ef648f58119e9d4d05b75dcfe72a982068484 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Mon, 5 Jun 2023 15:27:23 -0700 Subject: [PATCH 06/33] improve styling --- package.json | 1 + src/components/SearchArea.module.css | 71 +++-------- src/components/SearchArea.tsx | 178 +++++++++++++++------------ 3 files changed, 117 insertions(+), 133 deletions(-) diff --git a/package.json b/package.json index 6f0e80fc1f..11c85c8517 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "react": "^17.0.1", "react-dom": "^17.0.1", "react-modal": "^3.14.4", + "react-select": "^5.7.3", "ts-jest": "^27.1.3", "url-loader": "^4.1.1" }, diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 75c8e3e1be..752b0fec88 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -22,6 +22,10 @@ width: 400px; } +.SearchContainerDropdown { + width: 400px; +} + .NoResultsContainer { max-width: 600px; align-items: center; @@ -43,70 +47,33 @@ .SearchInput { align-items: center; - background: rgb(252, 252, 252); - border: 0; - border-radius: 5px; - color: rgba(40, 40, 40, 0.628); + background: rgb(255, 255, 255); + border-width: 0; + border-radius: 3px; + color: hsl(0, 0%, 20%); display: flex; font-weight: 500; - height: 36px; + height: 38px; justify-content: space-between; padding: 0 8px; -webkit-user-select: none; user-select: none; width: 100%; - outline: 1px solid rgb(148, 148, 148); + outline: 1px solid hsl(0, 0%, 80%); + margin: 2px; + padding-bottom: 2px; + padding-top: 2px; } input:focus-visible { - outline: 2px solid rgb(112, 212, 245); - outline: 2px solid rgb(112, 212, 245); - border-radius: 3px; -} - -.FacetListContainer { - padding-left: 0pt; - background: rgb(252, 252, 252); - border-radius: 5px; - position:absolute; - box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); -} - -.FacetList { - padding-left: 10px; - padding-right: 10px; - border-radius: 5px; - list-style-type: none; + outline: 2px solid #2684FF; + border-radius: 4px; } -.FacetListItem { - color:rgba(40, 40, 40, 0.628); -} - -.FacetDropdownButton { - background: rgb(252, 252, 252); - border-radius: 5px; - color: rgba(40, 40, 40, 0.628); - border: 0; - display: flex; - height: 36px; - justify-content: space-between; - padding: 0 8px; - -webkit-user-select: none; - user-select: none; - width: 100%; - outline: 1px solid rgb(148, 148, 148); +input:hover{ + outline: 1px solid hsl(0, 0%, 70%);; } -.FacetButtonText { - align-items: center; - color: rgba(40, 40, 40, 0.628); - display: flex; - font-weight: 500; - height: 36px; - justify-content: space-between; - padding: 0 8px; - -webkit-user-select: none; - user-select: none; - width: 100%; +.FacetListContainer { + position:absolute; } diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 2f0b903bf6..f055786031 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -1,5 +1,6 @@ import algoliasearch from "algoliasearch/lite" import React, { PropsWithChildren, useEffect, useState } from "react" +import Select from "react-select" import { Card } from "./Card" import { CardGroup } from "./CardGroup" @@ -14,7 +15,8 @@ interface SearchAreaProps { } function ResultCardGroup(hits: any) { - return ( + return ( + {hits.map((hit: any) => { return (
) @@ -38,13 +45,15 @@ function ResultCardGroup(hits: any) { function NoResults() { return (
-

No results found, please try another search

+

+ No results found, please try another search +

) } function CustomHits(hits: any[]) { - let newHits = hits["hits"]["searchHits"]; + let newHits = hits["hits"]["searchHits"] if (newHits.length === 0) { return NoResults() @@ -54,19 +63,22 @@ function CustomHits(hits: any[]) { Don't display search results where the module has been deprecated. We prefix the friendly name for these modules with [DEPRECATED], so we filter for all hits where there is not a match for the prefix. */ - const activeHits = newHits.filter((hit: any) => !hit.moduleFriendlyName.startsWith('[DEPRECATED]')) + const activeHits = newHits.filter( + (hit: any) => !hit.moduleFriendlyName.startsWith("[DEPRECATED]") + ) /* Don't display modules where the description contains a note. These modules all state they are not intended to be used directly, and the module description breaks out of the card */ - const onlyUseableModules = activeHits.filter((hit: any) => hit.moduleDescription.toLowerCase().indexOf("note") === -1) - - return ( - onlyUseableModules.length > 0 ? ResultCardGroup(onlyUseableModules) : NoResults() + const onlyUseableModules = activeHits.filter( + (hit: any) => hit.moduleDescription.toLowerCase().indexOf("note") === -1 ) -} + return onlyUseableModules.length > 0 + ? ResultCardGroup(onlyUseableModules) + : NoResults() +} export const SearchArea: React.FunctionComponent< PropsWithChildren @@ -76,39 +88,43 @@ export const SearchArea: React.FunctionComponent< const algoliaSearchKey: string = "a976ea48057ceaa662656ec8f4f591af" const searchClient = algoliasearch(algoliaAppId, algoliaSearchKey) - const index = searchClient.initIndex("dev_docs_sourcer-modules"); + const index = searchClient.initIndex("dev_docs_sourcer-modules") - const [repoTitleDropdownVisible, setTitleDropdownVisible] = useState(false); - const [typeDropdownVisible, setTypeDropdownVisible] = useState(false); - - const [searchTerm, setSearchTerm] = useState(""); + const [searchTerm, setSearchTerm] = useState("") const [facetFilters, setFacetFilters] = useState(["type:module"]) - const [searchHits, setSearchHits] = useState([]); - const [searchRepoFacets, setSearchRepoFacets] = useState([]); + const [searchHits, setSearchHits] = useState([]) + const [searchRepoFacets, setSearchRepoFacets] = useState([]) const [searchTypeFacets, setSearchTypeFacets] = useState([]) const handleSearchFacets = (facets: {}): Object[] => { const facetArray = [] for (const k in facets) { - let v = facets[k]; - facetArray.push({key: k, value: v}); + let v = facets[k] + facetArray.push({ key: k, value: v }) } return facetArray } const loadSearchHits = async () => { - await index.search(searchTerm, {facets: ["mainRepoTitle", "type"], facetFilters: facetFilters}).then(resp => { - setSearchHits(resp["hits"]); - - // Only load the facets once - when the page loads - if (searchRepoFacets.length === 0 && searchTypeFacets.length == 0) { - setSearchRepoFacets(handleSearchFacets(resp["facets"]["mainRepoTitle"])); - setSearchTypeFacets(handleSearchFacets(resp["facets"]["type"])); - } - }); + await index + .search(searchTerm, { + facets: ["mainRepoTitle", "type"], + facetFilters: facetFilters, + }) + .then((resp) => { + setSearchHits(resp["hits"]) + + // Only load the facets once - when the page loads + if (searchRepoFacets.length === 0 && searchTypeFacets.length == 0) { + setSearchRepoFacets( + handleSearchFacets(resp["facets"]["mainRepoTitle"]) + ) + setSearchTypeFacets(handleSearchFacets(resp["facets"]["type"])) + } + }) } useEffect(() => { @@ -116,77 +132,77 @@ export const SearchArea: React.FunctionComponent< }, []) useEffect(() => { - loadSearchHits(); - }, [searchTerm]); + loadSearchHits() + }, [searchTerm]) useEffect(() => { - loadSearchHits(); - }, [facetFilters]); + loadSearchHits() + }, [facetFilters]) const onSearch = (event: React.ChangeEvent) => { - console.log(event.target.value); - setSearchTerm(event.target.value); + setSearchTerm(event.target.value) } - const selectRepoTitleFacet = (facetName: string) => { - if (`mainRepoTitle:${facetName}` === facetFilters[0]) { + const selectRepoTitleFacet = (facetName: any) => { + if (!facetName) { // Unset setFacetFilters(["type:module"]) } else { - setFacetFilters([`mainRepoTitle:${facetName}`]); + setFacetFilters([`mainRepoTitle:${facetName.value}`]) } - setTitleDropdownVisible(false); - } - - const handleTypeFacetDropdownEvent = () => { - setTypeDropdownVisible(!typeDropdownVisible); } - const handleRepoFacetDropdownEvent = () => { - setTitleDropdownVisible(!repoTitleDropdownVisible); + const selectTypeFacet = (facetName: any) => { + if (!facetName) { + // Unset + setFacetFilters(["type:module"]) + } else { + setFacetFilters([`type:${facetName.value}`]) + } } return (
- -
-

SEARCH

- -
-
-

TOPIC

-
- - {repoTitleDropdownVisible && -
-
    - {searchRepoFacets.map(f => { - return
  • selectRepoTitleFacet(f["key"])} key={f["key"]}>{f["key"]}
    • - })} -
-
} -
+ +
+

SEARCH

+ +
+
+

TOPIC

+
+ selectTypeFacet(value)} + isClearable={true} + isSearchable={true} + options={searchTypeFacets.map((f) => { + return { value: f["key"], label: f["key"] } + })} + />
- - +
+ + {/* */}
) From be142a1082e76f2fe303c4206b67fde1cef84940 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Mon, 5 Jun 2023 15:30:20 -0700 Subject: [PATCH 07/33] increase hits per page --- src/components/SearchArea.tsx | 1 + yarn.lock | 212 +++++++++++++++++++++++++++++++++- 2 files changed, 210 insertions(+), 3 deletions(-) diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index f055786031..12f3e3f5c6 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -113,6 +113,7 @@ export const SearchArea: React.FunctionComponent< .search(searchTerm, { facets: ["mainRepoTitle", "type"], facetFilters: facetFilters, + hitsPerPage: 300, }) .then((resp) => { setSearchHits(resp["hits"]) diff --git a/yarn.lock b/yarn.lock index 4cad00a819..2d82c5b877 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2351,6 +2351,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.12.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7": + version "7.22.3" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.22.3.tgz#0a7fce51d43adbf0f7b517a71f4c3aaca92ebcbb" + integrity sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ== + dependencies: + regenerator-runtime "^0.13.11" + "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.6": version "7.20.7" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd" @@ -2948,6 +2955,106 @@ url-loader "^4.1.1" webpack "^5.73.0" +"@emotion/babel-plugin@^11.11.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" + integrity sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ== + dependencies: + "@babel/helper-module-imports" "^7.16.7" + "@babel/runtime" "^7.18.3" + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/serialize" "^1.1.2" + babel-plugin-macros "^3.1.0" + convert-source-map "^1.5.0" + escape-string-regexp "^4.0.0" + find-root "^1.1.0" + source-map "^0.5.7" + stylis "4.2.0" + +"@emotion/cache@^11.11.0", "@emotion/cache@^11.4.0": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.11.0.tgz#809b33ee6b1cb1a625fef7a45bc568ccd9b8f3ff" + integrity sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ== + dependencies: + "@emotion/memoize" "^0.8.1" + "@emotion/sheet" "^1.2.2" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + stylis "4.2.0" + +"@emotion/hash@^0.9.1": + version "0.9.1" + resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43" + integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ== + +"@emotion/memoize@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17" + integrity sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA== + +"@emotion/react@^11.8.1": + version "11.11.0" + resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.0.tgz#408196b7ef8729d8ad08fc061b03b046d1460e02" + integrity sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw== + dependencies: + "@babel/runtime" "^7.18.3" + "@emotion/babel-plugin" "^11.11.0" + "@emotion/cache" "^11.11.0" + "@emotion/serialize" "^1.1.2" + "@emotion/use-insertion-effect-with-fallbacks" "^1.0.1" + "@emotion/utils" "^1.2.1" + "@emotion/weak-memoize" "^0.3.1" + hoist-non-react-statics "^3.3.1" + +"@emotion/serialize@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.2.tgz#017a6e4c9b8a803bd576ff3d52a0ea6fa5a62b51" + integrity sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA== + dependencies: + "@emotion/hash" "^0.9.1" + "@emotion/memoize" "^0.8.1" + "@emotion/unitless" "^0.8.1" + "@emotion/utils" "^1.2.1" + csstype "^3.0.2" + +"@emotion/sheet@^1.2.2": + version "1.2.2" + resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.2.tgz#d58e788ee27267a14342303e1abb3d508b6d0fec" + integrity sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA== + +"@emotion/unitless@^0.8.1": + version "0.8.1" + resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.1.tgz#182b5a4704ef8ad91bde93f7a860a88fd92c79a3" + integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ== + +"@emotion/use-insertion-effect-with-fallbacks@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.0.1.tgz#08de79f54eb3406f9daaf77c76e35313da963963" + integrity sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw== + +"@emotion/utils@^1.2.1": + version "1.2.1" + resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.1.tgz#bbab58465738d31ae4cb3dbb6fc00a5991f755e4" + integrity sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg== + +"@emotion/weak-memoize@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6" + integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww== + +"@floating-ui/core@^1.2.6": + version "1.2.6" + resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.2.6.tgz#d21ace437cc919cdd8f1640302fa8851e65e75c0" + integrity sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg== + +"@floating-ui/dom@^1.0.1": + version "1.2.9" + resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.2.9.tgz#b9ed1c15d30963419a6736f1b7feb350dd49c603" + integrity sha512-sosQxsqgxMNkV3C+3UqTS6LxP7isRLwX8WMepp843Rb3/b0Wz8+MdUkxJksByip3C2WwLugLHN1b4ibn//zKwQ== + dependencies: + "@floating-ui/core" "^1.2.6" + "@hapi/hoek@^9.0.0": version "9.2.1" resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.2.1.tgz#9551142a1980503752536b5050fd99f4a7f13b17" @@ -4130,6 +4237,13 @@ "@types/history" "*" "@types/react" "*" +"@types/react-transition-group@^4.4.0": + version "4.4.6" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.6.tgz#18187bcda5281f8e10dfc48f0943e2fdf4f75e2e" + integrity sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew== + dependencies: + "@types/react" "*" + "@types/react@*": version "17.0.33" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.33.tgz#e01ae3de7613dac1094569880bb3792732203ad5" @@ -4800,6 +4914,15 @@ babel-plugin-jest-hoist@^27.4.0: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" +babel-plugin-macros@^3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1" + integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg== + dependencies: + "@babel/runtime" "^7.12.5" + cosmiconfig "^7.0.0" + resolve "^1.19.0" + babel-plugin-polyfill-corejs2@^0.2.2: version "0.2.2" resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz#e9124785e6fd94f94b618a7954e5693053bf5327" @@ -5550,6 +5673,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0: dependencies: safe-buffer "~5.1.1" +convert-source-map@^1.5.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" + integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== + cookie-signature@1.0.6: version "1.0.6" resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c" @@ -6078,6 +6206,14 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" +dom-helpers@^5.0.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" + integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== + dependencies: + "@babel/runtime" "^7.8.7" + csstype "^3.0.2" + dom-serializer@0: version "0.2.2" resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" @@ -6693,6 +6829,11 @@ find-cache-dir@^3.3.1: make-dir "^3.0.2" pkg-dir "^4.1.0" +find-root@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" + integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng== + find-up@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73" @@ -7190,7 +7331,7 @@ history@^4.9.0: tiny-warning "^1.0.0" value-equal "^1.0.1" -hoist-non-react-statics@^3.1.0: +hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -7575,6 +7716,13 @@ is-ci@^2.0.0: dependencies: ci-info "^2.0.0" +is-core-module@^2.11.0: + version "2.12.1" + resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.12.1.tgz#0c0b6885b6f80011c71541ce15c8d66cf5a4f9fd" + integrity sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg== + dependencies: + has "^1.0.3" + is-core-module@^2.2.0: version "2.8.0" resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.0.tgz#0321336c3d0925e497fd97f5d95cb114a5ccd548" @@ -8810,6 +8958,11 @@ memfs@^3.4.3: dependencies: fs-monkey "^1.0.3" +memoize-one@^6.0.0: + version "6.0.0" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045" + integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw== + merge-descriptors@1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61" @@ -9885,6 +10038,15 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" +prop-types@^15.6.0: + version "15.8.1" + resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" + integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== + dependencies: + loose-envify "^1.4.0" + object-assign "^4.1.1" + react-is "^16.13.1" + prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" @@ -10098,7 +10260,7 @@ react-helmet-async@*, react-helmet-async@^1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" -react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: +react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -10175,6 +10337,21 @@ react-router@5.3.4, react-router@^5.3.3: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" +react-select@^5.7.3: + version "5.7.3" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.7.3.tgz#fa0dc9a23cad6ff3871ad3829f6083a4b54961a2" + integrity sha512-z8i3NCuFFWL3w27xq92rBkVI2onT0jzIIPe480HlBjXJ3b5o6Q+Clp4ydyeKrj9DZZ3lrjawwLC5NGl0FSvUDg== + dependencies: + "@babel/runtime" "^7.12.0" + "@emotion/cache" "^11.4.0" + "@emotion/react" "^11.8.1" + "@floating-ui/dom" "^1.0.1" + "@types/react-transition-group" "^4.4.0" + memoize-one "^6.0.0" + prop-types "^15.6.0" + react-transition-group "^4.3.0" + use-isomorphic-layout-effect "^1.1.2" + react-textarea-autosize@^8.3.2: version "8.3.3" resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8" @@ -10184,6 +10361,16 @@ react-textarea-autosize@^8.3.2: use-composed-ref "^1.0.0" use-latest "^1.0.0" +react-transition-group@^4.3.0: + version "4.4.5" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1" + integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react@^17.0.1: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -10509,6 +10696,15 @@ resolve@^1.1.6, resolve@^1.14.2, resolve@^1.3.2: is-core-module "^2.2.0" path-parse "^1.0.6" +resolve@^1.19.0: + version "1.22.2" + resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.2.tgz#0ed0943d4e301867955766c9f3e1ae6d01c6845f" + integrity sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g== + dependencies: + is-core-module "^2.11.0" + path-parse "^1.0.7" + supports-preserve-symlinks-flag "^1.0.0" + resolve@^1.20.0: version "1.22.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" @@ -10922,7 +11118,7 @@ source-map-support@~0.5.20: buffer-from "^1.0.0" source-map "^0.6.0" -source-map@^0.5.0: +source-map@^0.5.0, source-map@^0.5.7: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= @@ -11136,6 +11332,11 @@ stylehacks@^5.1.1: browserslist "^4.21.4" postcss-selector-parser "^6.0.4" +stylis@4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.2.0.tgz#79daee0208964c8fe695a42fcffcac633a211a51" + integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw== + supports-color@^5.3.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -11761,6 +11962,11 @@ use-isomorphic-layout-effect@^1.0.0: resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz#7bb6589170cd2987a152042f9084f9effb75c225" integrity sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ== +use-isomorphic-layout-effect@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb" + integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA== + use-latest@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.0.tgz#a44f6572b8288e0972ec411bdd0840ada366f232" From 0469f5dc8e13b88d6b563428cb4704f37cb6402f Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Tue, 6 Jun 2023 08:23:20 -0700 Subject: [PATCH 08/33] Fix font styles for search input --- src/components/SearchArea.module.css | 12 +++++++----- src/components/SearchArea.tsx | 4 ++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 752b0fec88..b983488c96 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -52,7 +52,7 @@ border-radius: 3px; color: hsl(0, 0%, 20%); display: flex; - font-weight: 500; + font-weight: 400; height: 38px; justify-content: space-between; padding: 0 8px; @@ -65,15 +65,17 @@ padding-top: 2px; } +input[type="text"] +{ + font-size:15px; + font-family: "Source Sans Pro"; +} + input:focus-visible { outline: 2px solid #2684FF; border-radius: 4px; } -input:hover{ - outline: 1px solid hsl(0, 0%, 70%);; -} - .FacetListContainer { position:absolute; } diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 12f3e3f5c6..f957246e8b 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -146,7 +146,7 @@ export const SearchArea: React.FunctionComponent< const selectRepoTitleFacet = (facetName: any) => { if (!facetName) { - // Unset + // Unset - we always want to be scoped to modules setFacetFilters(["type:module"]) } else { setFacetFilters([`mainRepoTitle:${facetName.value}`]) @@ -155,7 +155,7 @@ export const SearchArea: React.FunctionComponent< const selectTypeFacet = (facetName: any) => { if (!facetName) { - // Unset + // Unset - we always want to be scoped to modules setFacetFilters(["type:module"]) } else { setFacetFilters([`type:${facetName.value}`]) From afb061598833a56f4e60cd565da6113bed524fcc Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Tue, 6 Jun 2023 08:25:20 -0700 Subject: [PATCH 09/33] simplify css --- src/components/SearchArea.module.css | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index b983488c96..8caee6cb15 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -63,12 +63,8 @@ margin: 2px; padding-bottom: 2px; padding-top: 2px; -} - -input[type="text"] -{ - font-size:15px; - font-family: "Source Sans Pro"; + font-size:15px; + font-family: "Source Sans Pro"; } input:focus-visible { From 9fb120d3c8ff031946c49a9e60f74a580669fdf5 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Tue, 6 Jun 2023 09:57:26 -0700 Subject: [PATCH 10/33] touch up styles --- src/components/SearchArea.module.css | 31 +++++++++++++++++++++++----- src/components/SearchArea.tsx | 17 +++++++++++++-- 2 files changed, 41 insertions(+), 7 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 8caee6cb15..bda9758759 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -6,24 +6,25 @@ } .card_container_max_width { - max-width: 400px; + max-width: 300px; max-height: 200px; margin: 0 auto; } .card_result { white-space: nowrap; - overflow: hidden; text-overflow: ellipsis; - max-width: 50ch; + overflow: hidden; + overflow-wrap: break-word; + max-width: 100%; } .SearchContainerItem { - width: 400px; + width: 300px; } .SearchContainerDropdown { - width: 400px; + width: 300px; } .NoResultsContainer { @@ -75,3 +76,23 @@ input:focus-visible { .FacetListContainer { position:absolute; } + +@media only screen and (max-width: 640px) { + .card_container_max_width { + width: 100%; + max-width: unset; + } + .container { + width: 100% + } + .SearchContainerItem { + width: 100% + } + .SearchContainerDropdown { + width: 100% + } + .FacetListContainer { + width: 100%; + padding-right: 1.7rem; + } +} diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index f957246e8b..dc827486b8 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -80,6 +80,18 @@ function CustomHits(hits: any[]) { : NoResults() } +/* +Given a string, return the same string with the first letter capitalized. + +This is used to capitalize labels for the type facet dropdown, +because they are currently not capitalized. + +e.g. word -> Word +*/ +function capitalize(str: string) { + return str.charAt(0).toUpperCase() + str.slice(1) +} + export const SearchArea: React.FunctionComponent< PropsWithChildren > = ({ name, requirement, type, children }) => { @@ -133,7 +145,8 @@ export const SearchArea: React.FunctionComponent< }, []) useEffect(() => { - loadSearchHits() + const timeOutId = setTimeout(() => loadSearchHits(), 500) + return () => clearTimeout(timeOutId) }, [searchTerm]) useEffect(() => { @@ -197,7 +210,7 @@ export const SearchArea: React.FunctionComponent< isClearable={true} isSearchable={true} options={searchTypeFacets.map((f) => { - return { value: f["key"], label: f["key"] } + return { value: f["key"], label: capitalize(f["key"]) } })} />
From 5a45849bc2bfad307f77013a2db4c1683ee89f0a Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Tue, 6 Jun 2023 09:57:58 -0700 Subject: [PATCH 11/33] remove commented out code --- src/components/SearchArea.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index dc827486b8..c1c90a517c 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -217,7 +217,6 @@ export const SearchArea: React.FunctionComponent<
- {/* */} ) } From 98dc50f7025ce3754d97e1478dfa9e45e54e7581 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Tue, 6 Jun 2023 12:37:42 -0700 Subject: [PATCH 12/33] address PR feedback --- _docs-sources/iac/reference/index.md | 2 +- docs/iac/reference/index.md | 4 +-- src/components/SearchArea.module.css | 26 +++++++++----- src/components/SearchArea.tsx | 52 ++++++---------------------- 4 files changed, 31 insertions(+), 53 deletions(-) diff --git a/_docs-sources/iac/reference/index.md b/_docs-sources/iac/reference/index.md index 9268a0a2e5..d28d909567 100644 --- a/_docs-sources/iac/reference/index.md +++ b/_docs-sources/iac/reference/index.md @@ -1,6 +1,6 @@ import SearchArea from "/src/components/SearchArea" -# Library Reference +# Find a module The Library Reference provides a complete listing of the modules, services, and tools included in the Gruntwork IaC Library. Find one that suits your needs, or suggest a module if you need something we’re missing. diff --git a/docs/iac/reference/index.md b/docs/iac/reference/index.md index 4c8595f025..156d3abb99 100644 --- a/docs/iac/reference/index.md +++ b/docs/iac/reference/index.md @@ -1,6 +1,6 @@ import SearchArea from "/src/components/SearchArea" -# Library Reference +# Find a module The Library Reference provides a complete listing of the modules, services, and tools included in the Gruntwork IaC Library. Find one that suits your needs, or suggest a module if you need something we’re missing. @@ -14,6 +14,6 @@ For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/ diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index bda9758759..62946b975b 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -46,31 +46,41 @@ margin-bottom: 0; } +.SearchInputContainer { + height: 40.40px; + margin-top: 1px; + padding-bottom: 2px; + padding-right: 2px; +} + .SearchInput { align-items: center; background: rgb(255, 255, 255); border-width: 0; - border-radius: 3px; + border-radius: 4px; + padding-top: 0px; color: hsl(0, 0%, 20%); display: flex; font-weight: 400; - height: 38px; justify-content: space-between; - padding: 0 8px; + padding: 2px 8px; -webkit-user-select: none; user-select: none; width: 100%; + height: 100%; outline: 1px solid hsl(0, 0%, 80%); - margin: 2px; - padding-bottom: 2px; - padding-top: 2px; - font-size:15px; + margin-left: 1px; + margin-top: 0px; + font-size: 15px; font-family: "Source Sans Pro"; } +input:hover { + outline: 1px solid hsl(0, 0%, 70%);; +} + input:focus-visible { outline: 2px solid #2684FF; - border-radius: 4px; } .FacetListContainer { diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index c1c90a517c..28595a117b 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -80,18 +80,6 @@ function CustomHits(hits: any[]) { : NoResults() } -/* -Given a string, return the same string with the first letter capitalized. - -This is used to capitalize labels for the type facet dropdown, -because they are currently not capitalized. - -e.g. word -> Word -*/ -function capitalize(str: string) { - return str.charAt(0).toUpperCase() + str.slice(1) -} - export const SearchArea: React.FunctionComponent< PropsWithChildren > = ({ name, requirement, type, children }) => { @@ -100,7 +88,7 @@ export const SearchArea: React.FunctionComponent< const algoliaSearchKey: string = "a976ea48057ceaa662656ec8f4f591af" const searchClient = algoliasearch(algoliaAppId, algoliaSearchKey) - const index = searchClient.initIndex("dev_docs_sourcer-modules") + const index = searchClient.initIndex("dev_docs_sourcer-modules") // TODO: Get this from config const [searchTerm, setSearchTerm] = useState("") const [facetFilters, setFacetFilters] = useState(["type:module"]) @@ -166,26 +154,20 @@ export const SearchArea: React.FunctionComponent< } } - const selectTypeFacet = (facetName: any) => { - if (!facetName) { - // Unset - we always want to be scoped to modules - setFacetFilters(["type:module"]) - } else { - setFacetFilters([`type:${facetName.value}`]) - } - } - return (

SEARCH

- +
+ +

TOPIC

@@ -201,20 +183,6 @@ export const SearchArea: React.FunctionComponent< />
-
-

TYPE

-
- selectRepoTitleFacet(value)} isClearable={true} isSearchable={true} - options={searchRepoFacets.map((f) => { + options={searchTypeFacets.map((f) => { return { value: f["key"], label: f["key"] } })} styles={selectStyles} From 9b0dbdf9a052802425c3926cdc7ab1557cc6950d Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Wed, 7 Jun 2023 14:46:00 -0700 Subject: [PATCH 17/33] remove unused state --- src/components/SearchArea.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 2652f2fac5..af30b6c5c1 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -107,7 +107,6 @@ export const SearchArea: React.FunctionComponent< const [facetFilters, setFacetFilters] = useState([]) const [searchHits, setSearchHits] = useState([]) - const [searchRepoFacets, setSearchRepoFacets] = useState([]) const [searchTypeFacets, setSearchTypeFacets] = useState([]) const handleSearchFacets = (facets: {}): Object[] => { From 469a05ea4ae113a7fd27fe61f40afb77d683c354 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Wed, 7 Jun 2023 15:25:29 -0700 Subject: [PATCH 18/33] update indexes for search --- scripts/update-search-index.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/update-search-index.sh b/scripts/update-search-index.sh index 9b51c79171..54ff82a8b9 100755 --- a/scripts/update-search-index.sh +++ b/scripts/update-search-index.sh @@ -84,7 +84,7 @@ function index_docs() { echo "Updating search index with docs-sourcer using prefix: $index_prefix..." # Update Algolia index using docs-sourcer. This is the new method of indexing. # In order to add plugins to this list just space separate them. - ALGOLIA_APP_ID="$ALGOLIA_APPLICATION_ID" ALGOLIA_API_KEY="$api_key" ALGOLIA_INDEX_PREFIX="$index_prefix" yarn regenerate --plugins docs-indexer + ALGOLIA_APP_ID="$ALGOLIA_APPLICATION_ID" ALGOLIA_API_KEY="$api_key" ALGOLIA_INDEX_PREFIX="$index_prefix" yarn regenerate --plugins docs-indexer module-catalog-api-index service-catalog-api-index # Update Algolia index using docsearch-scraper. This is the old method of indexing. We are temporarily running this # alongside the docs-sourcer index. From 93e4f8e2bfdbb4a9df4f59d2040e23c52215c783 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Wed, 7 Jun 2023 15:31:43 -0700 Subject: [PATCH 19/33] start work on config for index --- docusaurus.config.js | 1 + src/components/SearchArea.tsx | 10 +++++++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 8b3257cc00..08017b16f7 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -291,6 +291,7 @@ const config = { // Public API key: safe to commit, but still sourced from config apiKey: algoliaConfig.apiKey, indexName: algoliaConfig.indexName, + libraryIndexName: algoliaConfig.libraryIndexName, contextualSearch: true, } : undefined, diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index af30b6c5c1..185d273e6d 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -96,12 +96,20 @@ const selectStyles = { export const SearchArea: React.FunctionComponent< PropsWithChildren > = ({ name, requirement, type, children }) => { + // TODO: Make using a configuration work here + // const { algoliaAppId, algoliaSearchKey, indexName } = config.get<{ + // appId: string; + // apiKey: string; + // libraryIndexName: string; + // }>("themeConfig.algolia"); + const algoliaAppId: string = "7AWZHGNJE2" // This key is for search only. It is safe to check in. const algoliaSearchKey: string = "a976ea48057ceaa662656ec8f4f591af" + const indexName: string = "dev_docs_sourcer-library-reference" const searchClient = algoliasearch(algoliaAppId, algoliaSearchKey) - const index = searchClient.initIndex("dev_docs_sourcer-library-reference") // TODO: Get this from config + const index = searchClient.initIndex(indexName) const [searchTerm, setSearchTerm] = useState("") const [facetFilters, setFacetFilters] = useState([]) From e4760d22cbfb305c14df61bd8832453c75763086 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 08:49:13 -0700 Subject: [PATCH 20/33] make it beautiful --- src/components/SearchArea.module.css | 8 +++++--- src/components/SearchArea.tsx | 18 ++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 79a3346685..5dd76efaa3 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -6,17 +6,19 @@ } .card_container_max_width { + min-width: 300px; max-width: 300px; max-height: 200px; margin: 0 auto; } .card_result { - white-space: nowrap; text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; overflow: hidden; - overflow-wrap: break-word; - max-width: 100%; + font-size: 13px; } .SearchContainerItem { diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 185d273e6d..1283bb753e 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -29,10 +29,7 @@ function ResultCardGroup(hits: any) {
@@ -86,12 +83,12 @@ const selectStyles = { fontSize: "16px", borderColor: state.isFocused ? "#6f5bd7" : base.borderColor, boxShadow: state.isFocused ? "0 0 0 1px #6f5bd7" : base.borderColor, - '&:hover': { - borderColor: state.isFocused ? '##6f5bd7' : base.borderColor, + "&:hover": { + borderColor: state.isFocused ? "#6f5bd7" : base.borderColor, boxShadow: state.isFocused ? "0 0 0 1px #6f5bd7" : base.boarderColor, - } - }) -}; + }, + }), +} export const SearchArea: React.FunctionComponent< PropsWithChildren @@ -165,7 +162,7 @@ export const SearchArea: React.FunctionComponent< const selectRepoTitleFacet = (type: any) => { if (!type) { // Unset - we always want to be scoped to modules - setFacetFilters([]); + setFacetFilters([]) } else { setFacetFilters([`type:${type.value}`]) } @@ -197,6 +194,7 @@ export const SearchArea: React.FunctionComponent< options={searchTypeFacets.map((f) => { return { value: f["key"], label: f["key"] } })} + placeholder="All" styles={selectStyles} />
From 9c6038b0d0ef98815e9f6df8be0d692a52e9de4b Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 09:54:53 -0700 Subject: [PATCH 21/33] prefer config from docusaurus context --- config/custom-environment-variables.yaml | 1 + config/default.yaml | 1 + docusaurus.config.js | 4 +++- src/components/SearchArea.tsx | 15 +++++---------- 4 files changed, 10 insertions(+), 11 deletions(-) diff --git a/config/custom-environment-variables.yaml b/config/custom-environment-variables.yaml index 55951dd77e..a6a69f231c 100644 --- a/config/custom-environment-variables.yaml +++ b/config/custom-environment-variables.yaml @@ -18,6 +18,7 @@ algolia: appId: ALGOLIA_APP_ID apiKey: ALGOLIA_API_KEY indexName: ALGOLIA_INDEX_NAME + libraryIndexName: ALGOLIA_LIBRARY_INDEX_NAME # Posthog Analytics tracking config posthog: diff --git a/config/default.yaml b/config/default.yaml index cd817e3dfa..d1b00e0fae 100644 --- a/config/default.yaml +++ b/config/default.yaml @@ -4,6 +4,7 @@ algolia: appId: 7AWZHGNJE2 apiKey: f799a6e9a302535bd92bbfab65fb6311 # This is a search only API key. It's safe to check in. indexName: docs_site_dev + libraryIndexName: dev_docs_sourcer-library-reference googleAnalytics: trackingID: UA-154792164-4 diff --git a/docusaurus.config.js b/docusaurus.config.js index 08017b16f7..c1bcfddb51 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -47,7 +47,9 @@ const config = { stylesheets: [ "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap", ], - + customFields: { + libraryIndexName: algoliaConfig ? algoliaConfig.libraryIndexName : undefined + }, presets: [ [ "@docusaurus/preset-classic", diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 1283bb753e..5f3883d6cd 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -4,9 +4,9 @@ import Select from "react-select" import { Card } from "./Card" import { CardGroup } from "./CardGroup" - import styles from "./SearchArea.module.css" import Grid from "./Grid" +import useDocusaurusContext from "@docusaurus/useDocusaurusContext" interface SearchAreaProps { name: string @@ -93,17 +93,12 @@ const selectStyles = { export const SearchArea: React.FunctionComponent< PropsWithChildren > = ({ name, requirement, type, children }) => { - // TODO: Make using a configuration work here - // const { algoliaAppId, algoliaSearchKey, indexName } = config.get<{ - // appId: string; - // apiKey: string; - // libraryIndexName: string; - // }>("themeConfig.algolia"); - - const algoliaAppId: string = "7AWZHGNJE2" + const {siteConfig} = useDocusaurusContext(); + // This key is for search only. It is safe to check in. + const algoliaAppId: string = siteConfig.themeConfig.algolia.appId const algoliaSearchKey: string = "a976ea48057ceaa662656ec8f4f591af" - const indexName: string = "dev_docs_sourcer-library-reference" + const indexName: string = siteConfig.themeConfig.algolia.libraryIndexName const searchClient = algoliasearch(algoliaAppId, algoliaSearchKey) const index = searchClient.initIndex(indexName) From c40defc15507549f5b681d6af9b08fc25700efbd Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 10:36:19 -0700 Subject: [PATCH 22/33] address search card size --- src/components/SearchArea.module.css | 2 +- src/components/SearchArea.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 5dd76efaa3..e6db03e65e 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -8,7 +8,7 @@ .card_container_max_width { min-width: 300px; max-width: 300px; - max-height: 200px; + max-height: 240px; margin: 0 auto; } diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 5f3883d6cd..7b50fa9968 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -95,8 +95,8 @@ export const SearchArea: React.FunctionComponent< > = ({ name, requirement, type, children }) => { const {siteConfig} = useDocusaurusContext(); - // This key is for search only. It is safe to check in. const algoliaAppId: string = siteConfig.themeConfig.algolia.appId + // This key is for search only. It is safe to check in. const algoliaSearchKey: string = "a976ea48057ceaa662656ec8f4f591af" const indexName: string = siteConfig.themeConfig.algolia.libraryIndexName From 78ac2b6405e923feb75126d7ec3f5e4ca92c699c Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 10:50:12 -0700 Subject: [PATCH 23/33] Add library to build --- .circleci/config.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.circleci/config.yml b/.circleci/config.yml index 81d3fe154f..60d8bed67e 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -48,6 +48,7 @@ references: export AWS_SECRET_ACCESS_KEY=`echo ${CREDENTIALS} | jq -r '.Credentials.SecretAccessKey'` export AWS_SESSION_TOKEN=`echo ${CREDENTIALS} | jq -r '.Credentials.SessionToken'` export AWS_EXPIRATION=`echo ${CREDENTIALS} | jq -r '.Credentials.Expiration'` + export ALGOLIA_LIBRARY_INDEX_NAME="stage_docs_sourcer-library-reference" ./scripts/push-to-s3-stage.sh deploy_to_prod: &deploy-to-prod @@ -60,6 +61,7 @@ references: export AWS_SECRET_ACCESS_KEY=`echo ${CREDENTIALS} | jq -r '.Credentials.SecretAccessKey'` export AWS_SESSION_TOKEN=`echo ${CREDENTIALS} | jq -r '.Credentials.SessionToken'` export AWS_EXPIRATION=`echo ${CREDENTIALS} | jq -r '.Credentials.Expiration'` + export ALGOLIA_LIBRARY_INDEX_NAME="prod_docs_sourcer-library-reference" ./scripts/push-to-s3-prod.sh notify_slack_staging: ¬ify_slack_staging From 9c79371a9dac7ffd8f1f2d5cb0fed64f67279aeb Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 11:56:37 -0700 Subject: [PATCH 24/33] Address PR feedback --- _docs-sources/iac/reference/index.md | 6 +----- docs/guides/stay-up-to-date/index.md | 21 +++------------------ src/components/SearchArea.tsx | 6 +++--- 3 files changed, 7 insertions(+), 26 deletions(-) diff --git a/_docs-sources/iac/reference/index.md b/_docs-sources/iac/reference/index.md index d28d909567..454b725356 100644 --- a/_docs-sources/iac/reference/index.md +++ b/_docs-sources/iac/reference/index.md @@ -2,10 +2,6 @@ import SearchArea from "/src/components/SearchArea" # Find a module -The Library Reference provides a complete listing of the modules, services, and tools included in the Gruntwork IaC Library. Find one that suits your needs, or suggest a module if you need something we’re missing. - -If you're already familiar with the IaC Library and are ready to dive right in, you can find the full Service Catalog and Module catalog reference in the left sidebar. - -For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/overview) page. This page introduces the concept of Modules and Services, clarifies their respective purposes, and offers guidance on when and how to effectively utilize them. The overview is a great starting point for understanding what the library can offer and how to best navigate it. +This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our IaC Library docs. If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io. diff --git a/docs/guides/stay-up-to-date/index.md b/docs/guides/stay-up-to-date/index.md index a332f9130e..d6d6f16e0b 100644 --- a/docs/guides/stay-up-to-date/index.md +++ b/docs/guides/stay-up-to-date/index.md @@ -16,22 +16,7 @@ import CardGroup from "/src/components/CardGroup" - - - - - - - - - - - - - - - - + @@ -113,7 +98,7 @@ href="/guides/stay-up-to-date/cis/cis-1.5.0" diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 7b50fa9968..4172b5baf2 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -20,8 +20,8 @@ function ResultCardGroup(hits: any) { {hits.map((hit: any) => { return ( { return { value: f["key"], label: f["key"] } })} - placeholder="All" + placeholder="Any" styles={selectStyles} />
From 63c47b814a4c12f958a2b916802e2c1e9779e065 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 12:02:17 -0700 Subject: [PATCH 25/33] fixes --- docs/guides/stay-up-to-date/index.md | 21 ++++++++++++++++++--- docs/iac/reference/index.md | 8 ++------ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/docs/guides/stay-up-to-date/index.md b/docs/guides/stay-up-to-date/index.md index d6d6f16e0b..a332f9130e 100644 --- a/docs/guides/stay-up-to-date/index.md +++ b/docs/guides/stay-up-to-date/index.md @@ -16,7 +16,22 @@ import CardGroup from "/src/components/CardGroup" - + + + + + + + + + + + + + + + + @@ -98,7 +113,7 @@ href="/guides/stay-up-to-date/cis/cis-1.5.0" diff --git a/docs/iac/reference/index.md b/docs/iac/reference/index.md index 156d3abb99..0329d18211 100644 --- a/docs/iac/reference/index.md +++ b/docs/iac/reference/index.md @@ -2,11 +2,7 @@ import SearchArea from "/src/components/SearchArea" # Find a module -The Library Reference provides a complete listing of the modules, services, and tools included in the Gruntwork IaC Library. Find one that suits your needs, or suggest a module if you need something we’re missing. - -If you're already familiar with the IaC Library and are ready to dive right in, you can find the full Service Catalog and Module catalog reference in the left sidebar. - -For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/overview) page. This page introduces the concept of Modules and Services, clarifies their respective purposes, and offers guidance on when and how to effectively utilize them. The overview is a great starting point for understanding what the library can offer and how to best navigate it. +This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our IaC Library docs. If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io. @@ -14,6 +10,6 @@ For an introduction to the Gruntwork IaC Library, check out the [Overview](/iac/ From e61e3a16f97e6958a06f9c104c2e803e59192a41 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 12:24:11 -0700 Subject: [PATCH 26/33] update docs-sourcer version --- package.json | 2 +- yarn.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 11c85c8517..a198e8197b 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "yargs": "^17.4.0" }, "optionalDependencies": { - "docs-sourcer": "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.16", + "docs-sourcer": "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.18", "ts-commons": "gruntwork-io/ts-commons#v3.2.1" }, "browserslist": { diff --git a/yarn.lock b/yarn.lock index 2d82c5b877..db520e8f47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6164,9 +6164,9 @@ dns-packet@^5.2.2: dependencies: "@leichtgewicht/ip-codec" "^2.0.1" -"docs-sourcer@git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.16": +"docs-sourcer@git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#v0.18": version "0.0.1" - resolved "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#0d62dd97825231acc2c41c6766cdd546507e95f2" + resolved "git+ssh://git@github.com/gruntwork-io/docs-sourcer.git#446e90c41679f5e93bdf2c289b21316f095dabb8" dependencies: "@octokit/auth-app" "^3.6.1" "@octokit/plugin-retry" "^3.0.9" From 0d5d17838bae542c900df771196f2df3b262cea4 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 12:36:50 -0700 Subject: [PATCH 27/33] fix border radius on safari --- src/components/SearchArea.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index e6db03e65e..7c7e5132a8 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -60,6 +60,7 @@ background: rgb(255, 255, 255); border-width: 0; border-radius: 3px; + -webkit-border-radius: 3px; padding-top: 0px; color: hsl(0, 0%, 20%); display: flex; From b0d15ae2805c3e9dcd6bd6985920b6e2dd351da6 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 13:09:00 -0700 Subject: [PATCH 28/33] fix border radius on safari --- src/components/SearchArea.module.css | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 7c7e5132a8..3b5eb3965b 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -51,14 +51,13 @@ .SearchInputContainer { height: 40.40px; margin-top: 1px; - padding-bottom: 2px; - padding-right: 2px; + padding-bottom: 1px; + padding-right: 1px; } .SearchInput { align-items: center; background: rgb(255, 255, 255); - border-width: 0; border-radius: 3px; -webkit-border-radius: 3px; padding-top: 0px; @@ -71,7 +70,7 @@ user-select: none; width: 100%; height: 100%; - outline: 1px solid hsl(0, 0%, 80%); + border: 1px solid hsl(0, 0%, 80%); margin-left: 1px; margin-top: 0px; font-size: 15px; @@ -79,7 +78,9 @@ } .SearchInput:focus-visible { - outline: 2px solid #6f5bd7; + outline: unset; + border-color: #6f5bd7; + box-shadow: 0 0 0 1px #6f5bd7; } .FacetListContainer { From 76e120e285f7f5a852479245cf6007bd0b69b93b Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 13:38:40 -0700 Subject: [PATCH 29/33] fix colours --- src/components/SearchArea.module.css | 18 +++++++++++++++--- src/components/SearchArea.tsx | 18 ++++++++++++------ 2 files changed, 27 insertions(+), 9 deletions(-) diff --git a/src/components/SearchArea.module.css b/src/components/SearchArea.module.css index 3b5eb3965b..7d77aa0cde 100644 --- a/src/components/SearchArea.module.css +++ b/src/components/SearchArea.module.css @@ -58,8 +58,11 @@ .SearchInput { align-items: center; background: rgb(255, 255, 255); - border-radius: 3px; - -webkit-border-radius: 3px; + border-width: 1px; + border-style: solid; + border-color: #CCCCCC; + border-radius: 4px; + -webkit-border-radius: 4px; padding-top: 0px; color: hsl(0, 0%, 20%); display: flex; @@ -70,7 +73,6 @@ user-select: none; width: 100%; height: 100%; - border: 1px solid hsl(0, 0%, 80%); margin-left: 1px; margin-top: 0px; font-size: 15px; @@ -83,6 +85,16 @@ box-shadow: 0 0 0 1px #6f5bd7; } + +.SearchInput::-webkit-input-placeholder { + color: #969faf; + opacity: unset; +} + +.SearchInput::placeholder { + color: #969faf; +} + .FacetListContainer { position:absolute; } diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 4172b5baf2..83db7b6bc8 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -29,7 +29,7 @@ function ResultCardGroup(hits: any) {
@@ -78,14 +78,20 @@ function CustomHits(hits: any[]) { } const selectStyles = { + placeholder: (base) => { + return { + ...base, + color: "#969faf", + } + }, control: (base, state) => ({ ...base, fontSize: "16px", - borderColor: state.isFocused ? "#6f5bd7" : base.borderColor, - boxShadow: state.isFocused ? "0 0 0 1px #6f5bd7" : base.borderColor, + borderColor: state.isFocused ? "#6f5bd7" : "#CCCCCC", + boxShadow: state.isFocused ? "0 0 0 1px #6f5bd7" : "#CCCCCC", "&:hover": { - borderColor: state.isFocused ? "#6f5bd7" : base.borderColor, - boxShadow: state.isFocused ? "0 0 0 1px #6f5bd7" : base.boarderColor, + borderColor: state.isFocused ? "#6f5bd7" : "#CCCCCC", + boxShadow: state.isFocused ? "0 0 0 1px #6f5bd7" : "#CCCCCC", }, }), } @@ -93,7 +99,7 @@ const selectStyles = { export const SearchArea: React.FunctionComponent< PropsWithChildren > = ({ name, requirement, type, children }) => { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext() const algoliaAppId: string = siteConfig.themeConfig.algolia.appId // This key is for search only. It is safe to check in. From e7d88713bfac1cc89cfa715f869f101097fe1e2f Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 15:05:12 -0700 Subject: [PATCH 30/33] add link to find a module intro --- _docs-sources/iac/reference/index.md | 2 +- docs/iac/reference/index.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_docs-sources/iac/reference/index.md b/_docs-sources/iac/reference/index.md index 454b725356..c667410b7c 100644 --- a/_docs-sources/iac/reference/index.md +++ b/_docs-sources/iac/reference/index.md @@ -2,6 +2,6 @@ import SearchArea from "/src/components/SearchArea" # Find a module -This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our IaC Library docs. If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io. +This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our [IaC Library docs](../overview/index.md). If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io. diff --git a/docs/iac/reference/index.md b/docs/iac/reference/index.md index 0329d18211..4075c73ace 100644 --- a/docs/iac/reference/index.md +++ b/docs/iac/reference/index.md @@ -2,7 +2,7 @@ import SearchArea from "/src/components/SearchArea" # Find a module -This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our IaC Library docs. If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io. +This section contains a complete list of the modules, services, and tools included in the Gruntwork IaC Library, along with reference documentation for each. For general information on the structure and usage of the Library, refer to our [IaC Library docs](../overview/index.md). If you can't find a module or service that suits your needs, let us know at feedback@gruntwork.io. @@ -10,6 +10,6 @@ This section contains a complete list of the modules, services, and tools includ From 8f54bcefff030ce403d3d2560421fe34930212b0 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 15:19:15 -0700 Subject: [PATCH 31/33] fix issue with keys --- src/components/SearchArea.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index 83db7b6bc8..b893031762 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -21,7 +21,7 @@ function ResultCardGroup(hits: any) { return ( Date: Thu, 8 Jun 2023 15:29:11 -0700 Subject: [PATCH 32/33] dont show no results when page loading --- src/components/SearchArea.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index b893031762..d77fde700f 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -115,6 +115,8 @@ export const SearchArea: React.FunctionComponent< const [searchHits, setSearchHits] = useState([]) const [searchTypeFacets, setSearchTypeFacets] = useState([]) + const [isLoading, setIsLoading] = useState(true) + const handleSearchFacets = (facets: {}): Object[] => { const facetArray = [] @@ -127,6 +129,8 @@ export const SearchArea: React.FunctionComponent< } const loadSearchHits = async () => { + setIsLoading(true) + await index .search(searchTerm, { facets: ["type"], @@ -147,6 +151,10 @@ export const SearchArea: React.FunctionComponent< loadSearchHits() }, []) + useEffect(() => { + setIsLoading(false) + }, [searchHits]) + useEffect(() => { const timeOutId = setTimeout(() => loadSearchHits(), 200) return () => clearTimeout(timeOutId) @@ -201,7 +209,7 @@ export const SearchArea: React.FunctionComponent< - + {isLoading && searchHits.length === 0 ?
: }
) } From 1d170987c1ff3cdc395fe97e417c4f00908d0340 Mon Sep 17 00:00:00 2001 From: Maxwell Moon Date: Thu, 8 Jun 2023 15:59:30 -0700 Subject: [PATCH 33/33] fix autofocus when navigating to page --- sidebars/library-reference.js | 2 +- src/components/SearchArea.tsx | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/sidebars/library-reference.js b/sidebars/library-reference.js index 06e2ef03e2..56ae73c9d8 100644 --- a/sidebars/library-reference.js +++ b/sidebars/library-reference.js @@ -5,7 +5,7 @@ const sidebar = [ collapsible: false, items: [ { - label: "Library Reference", + label: "Find a module", type: "doc", id: "iac/reference/index", }, diff --git a/src/components/SearchArea.tsx b/src/components/SearchArea.tsx index d77fde700f..969f5ef841 100644 --- a/src/components/SearchArea.tsx +++ b/src/components/SearchArea.tsx @@ -1,5 +1,5 @@ import algoliasearch from "algoliasearch/lite" -import React, { PropsWithChildren, useEffect, useState } from "react" +import React, { PropsWithChildren, useEffect, useRef, useState } from "react" import Select from "react-select" import { Card } from "./Card" @@ -177,6 +177,14 @@ export const SearchArea: React.FunctionComponent< } } + const inputElement = useRef(null); + useEffect(() => { + if (inputElement.current) { + inputElement.current.focus(); + } + }, []); + + return (
@@ -185,6 +193,7 @@ export const SearchArea: React.FunctionComponent<