@hashicorp/react-components 0.0.0

package/packages/search/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@hashicorp/react-search",
+  "description": "Algolia-powered search component",
+  "version": "2.1.3",
+  "author": "HashiCorp",
+  "contributors": [
+    "Kevin Pruett",
+    "Jimmy Merritello"
+  ],
+  "dependencies": {
+    "@hashicorp/react-inline-svg": "^1.0.2",
+    "@hashicorp/remark-plugins": "^3.0.0",
+    "algoliasearch": "^4.4.0",
+    "dotenv": "^8.2.0",
+    "glob": "^7.1.6",
+    "gray-matter": "^4.0.2",
+    "react-instantsearch-dom": "^6.7.0",
+    "remark": "^12.0.1",
+    "search-insights": "^1.6.0",
+    "unist-util-visit": "^2.0.3"
+  },
+  "license": "MPL-2.0",
+  "peerDependencies": {
+    "react": "^16.9.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/search/provider.js

@@ -0,0 +1,81 @@
+import { useState, createContext, useContext } from 'react'
+import search from 'algoliasearch'
+import aa from 'search-insights'
+
+const SearchContext = createContext()
+
+export const useSearch = () => {
+  if (
+    !process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ||
+    !process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY ||
+    !process.env.NEXT_PUBLIC_ALGOLIA_INDEX
+  ) {
+    throw new Error(`Missing required environment variables. Ensure the following are present in your environment:
+- NEXT_PUBLIC_ALGOLIA_APP_ID
+- NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY
+- NEXT_PUBLIC_ALGOLIA_INDEX
+`)
+  }
+  return useContext(SearchContext)
+}
+
+const algoliaClient = search(
+  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
+  process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY
+)
+
+const client = {
+  search(requests) {
+    return algoliaClient.search(
+      requests.map((request) => {
+        //  instantsearch fires an empty query on page load to ensure results are immediately available
+        //  we exclude that result from our analytics to keep our clickthrough rate clean
+        //  ref: https://www.algolia.com/doc/guides/getting-insights-and-analytics/search-analytics/out-of-the-box-analytics/how-to/how-to-remove-empty-search-from-analytics/
+        if (!request.params.query || request.params.query.length === 0) {
+          request.params.analytics = false
+        }
+
+        return request
+      })
+    )
+  },
+}
+
+function initAlgoliaInsights() {
+  aa('init', {
+    appId: process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
+    apiKey: process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_ONLY_API_KEY,
+  })
+}
+
+function logClick(hit) {
+  return aa('clickedObjectIDsAfterSearch', {
+    eventName: 'CLICK_HIT',
+    index: process.env.NEXT_PUBLIC_ALGOLIA_INDEX,
+    queryID: hit.__queryID,
+    objectIDs: [hit.objectID],
+    positions: [hit.__position],
+  })
+}
+
+export default function SearchProvider({ children }) {
+  const [query, setQuery] = useState('')
+  const [isCancelled, setCancelled] = useState(false)
+
+  return (
+    <SearchContext.Provider
+      value={{
+        client,
+        indexName: process.env.NEXT_PUBLIC_ALGOLIA_INDEX,
+        initAlgoliaInsights,
+        isCancelled,
+        logClick,
+        query,
+        setCancelled,
+        setQuery,
+      }}
+    >
+      {children}
+    </SearchContext.Provider>
+  )
+}

package/packages/search/search-box.js

@@ -0,0 +1,139 @@
+import { useEffect, useRef } from 'react'
+import { connectSearchBox } from 'react-instantsearch-dom'
+import IconMagGlass from './img/search.svg.js'
+import IconX from './img/search-x.svg.js'
+import IconSlash from './img/slash-search-toggle.js'
+
+function SearchBox({
+  /* Props provided from connector */
+  isSearchStalled,
+  refine,
+  /* Props passed explicity */
+  handleEscape,
+  placeholder,
+  query,
+  setCancelled,
+  setQuery,
+}) {
+  const searchBoxRef = useRef(null)
+
+  useEffect(() => {
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  function onKeyDown(e) {
+    const elt = e.target || e.srcElement
+    const tagName = elt.tagName
+    if (
+      elt.isContentEditable ||
+      tagName === 'INPUT' ||
+      tagName === 'SELECT' ||
+      tagName === 'TEXTAREA'
+    ) {
+      // Already in an input
+      return
+    }
+
+    // Bind to the `/` key
+    if (e.keyCode !== 191) return
+
+    searchBoxRef.current?.focus()
+    e.stopPropagation()
+    e.preventDefault()
+  }
+
+  function onSearchBoxKeyDown(e) {
+    if (!query) return
+    // Regain active search if previously cancelled
+    setCancelled(false)
+    if (e.keyCode === 27) return handleEscape()
+  }
+
+  function onChange(e) {
+    const val = e.target.value
+    refine(val)
+    setQuery(val)
+  }
+
+  function onReset() {
+    setQuery('')
+  }
+
+  return (
+    <div className="c-search-box">
+      <form noValidate action="" role="search">
+        <input
+          className="g-type-body-strong"
+          ref={searchBoxRef}
+          type="search"
+          placeholder={placeholder}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          spellCheck="false"
+          maxLength="512"
+          required
+          value={query}
+          onChange={onChange}
+          onKeyDown={onSearchBoxKeyDown}
+        />
+        <button
+          type="submit"
+          title="Submit your search query."
+          className="btn-submit"
+          dangerouslySetInnerHTML={{
+            __html: IconMagGlass,
+          }}
+        />
+        <button
+          type="reset"
+          title="Clear the search query."
+          className="btn-reset"
+          onClick={onReset}
+          dangerouslySetInnerHTML={{
+            __html: IconX,
+          }}
+        />
+        {/*
+         * Show a spinner when search stalled (`isSearchStalled`). Default: 200ms
+         * Configurable: https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/#widget-param-stalledsearchdelay
+         */}
+        {isSearchStalled && (
+          <div className="icon-loading">
+            <svg
+              width="18"
+              height="18"
+              viewBox="0 0 38 38"
+              xmlns="http://www.w3.org/2000/svg"
+              stroke="#444"
+            >
+              <g fill="none" fillRule="evenodd">
+                <g transform="translate(1 1)" strokeWidth="2">
+                  <circle strokeOpacity=".5" cx="18" cy="18" r="18"></circle>
+                  <path
+                    d="M36 18c0-9.94-8.06-18-18-18"
+                    transform="rotate(296.263 18 18)"
+                  >
+                    <animateTransform
+                      attributeName="transform"
+                      type="rotate"
+                      from="0 18 18"
+                      to="360 18 18"
+                      dur="1s"
+                      repeatCount="indefinite"
+                    ></animateTransform>
+                  </path>
+                </g>
+              </g>
+            </svg>
+          </div>
+        )}
+        {/* Visual indicator to user of '/' focus shortcut  */}
+        <IconSlash />
+      </form>
+    </div>
+  )
+}
+
+export default connectSearchBox(SearchBox)

package/packages/search/style.css

@@ -0,0 +1,366 @@
+.g-search {
+  --search-bar-height: 40px;
+  --search-bar-focus-outline: rgba(220, 221, 224, 0.45);
+  --legend-height: 40px;
+  --mobile-margin: 24px;
+  --mobile-margin-negative: -24px;
+  --nav-height: 64px;
+  /* Allow focus ring to be fully visible on Safari */
+  padding-top: 3px;
+  width: 100%;
+
+  @media (min-width: 768px) and (max-width: 939px) {
+    margin: 0 0.5rem;
+  }
+
+  /* Remove non-standard clear `X` buttons */
+  & input::-webkit-search-cancel-button {
+    display: none;
+  }
+
+  /* Ensure iOS does not round corners */
+  & input,
+  & [type='search'],
+  & input[type='search'] {
+    border-radius: 2px !important;
+    -webkit-appearance: none !important;
+  }
+}
+
+/* SearchBox */
+.g-search .c-search-box {
+  display: flex;
+
+  & form {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  & input {
+    width: 100%;
+    color: var(--gray-4);
+    border: 1px solid var(--gray-7);
+    background: var(--gray-7);
+    padding: 0 8px 0 40px;
+    height: var(--search-bar-height);
+    transition: width 0.2s ease-in-out;
+    cursor: text;
+
+    &:placeholder-shown,
+    &::placeholder {
+      opacity: 1;
+    }
+
+    &:focus,
+    &:active,
+    &:focus-visible {
+      color: var(--black);
+      border-color: var(--black);
+      outline: 3px solid var(--search-bar-focus-outline);
+      box-shadow: 0 0 3pt 2pt var(--search-bar-focus-outline);
+    }
+  }
+
+  /* Input styles when search query present */
+  & input[value]:not([value='']) {
+    color: var(--black);
+    border-color: var(--black);
+    outline: 3px solid var(--search-bar-focus-outline);
+    box-shadow: 0 0 3pt 2pt var(--search-bar-focus-outline);
+  }
+
+  & .btn-submit {
+    position: absolute;
+    left: 0;
+    background: transparent;
+    border: 0;
+    height: 100%;
+    width: 40px;
+    padding: 0;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    & > svg {
+      width: 18px;
+
+      /* Nudge */
+      position: relative;
+      top: 1px;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: 1px dotted var(--black);
+    }
+  }
+
+  /* Submit button styles when search query present */
+  & input[value]:not([value='']) ~ .btn-submit > svg path {
+    stroke: var(--black);
+  }
+
+  & .btn-reset {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    width: 40px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    opacity: 0;
+    pointer-events: none;
+
+    & > svg {
+      width: 10px;
+    }
+
+    &:focus,
+    &:focus-visible {
+      outline: 1px dotted var(--black);
+    }
+  }
+
+  /* Reset button styles when search query present */
+  & input[value]:not([value='']) ~ .btn-reset {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  & .icon-loading {
+    position: absolute;
+    right: 40px;
+    display: flex;
+    justify-content: center;
+  }
+
+  /* Remove unwanted loading flash when no query is present */
+  & input[value=''] ~ .icon-loading {
+    display: none;
+  }
+
+  & .icon-slash {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    height: 60%;
+    pointer-events: none;
+    display: none;
+    margin: 0; /* reset for generic styles applied to all img */
+
+    @media (--medium-up) {
+      width: 24px;
+      height: 24px;
+      display: block;
+    }
+  }
+
+  /* Reset button styles when search query present */
+  & input[value]:not([value='']) ~ .icon-slash {
+    opacity: 0;
+  }
+}
+
+/* Hits */
+.g-search .c-hits {
+  position: relative;
+  z-index: 890;
+
+  & .no-hits {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    color: #323339;
+    background: var(--white);
+    margin: 0;
+    padding: 0.5rem 1rem;
+    box-shadow: 0 4px 5px rgba(37, 38, 45, 0.12);
+
+    & .title,
+    & .message {
+      width: 100%;
+    }
+
+    & .title {
+      font-size: 15px;
+      font-weight: var(--font-weight-bold);
+    }
+
+    & .message {
+      color: var(--gray-3);
+      font-size: 0.75rem;
+    }
+  }
+
+  & .hits {
+    position: absolute;
+    width: 100%;
+    box-shadow: 0 4px 5px rgba(37, 38, 45, 0.12);
+  }
+
+  & .hits-list {
+    list-style: none;
+    overflow-y: scroll;
+    background: var(--white);
+    margin: 0;
+    padding: 0;
+    max-height: 45vh;
+
+    & .hit-link-wrapper {
+      width: 100%;
+      height: 100%;
+      scroll-behavior: smooth;
+
+      &.active > .hit,
+      &:focus > .hit,
+      & > .hit:hover {
+        background: var(--gray-7);
+
+        & .icon-return {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  & .hit-item {
+    margin: 0;
+  }
+
+  & .hit {
+    pointer-events: inherit;
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 8px 16px;
+
+    @media (--small) {
+      padding-left: var(--mobile-margin);
+    }
+  }
+
+  & .icon-return {
+    max-width: 30px;
+    display: flex;
+    align-items: center;
+    opacity: 0;
+  }
+
+  & .hit-content {
+    pointer-events: inherit;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    color: #323339;
+    flex-wrap: wrap;
+    width: 100%;
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+
+    & .name {
+      font-size: 15px;
+      font-weight: var(--font-weight-bold);
+      padding-right: 0.5rem;
+    }
+
+    & .category {
+      display: flex;
+      justify-content: flex-start;
+    }
+
+    & .description {
+      color: var(--gray-3);
+      font-size: 0.75rem;
+      margin-bottom: 0.5rem;
+      width: 100%;
+    }
+
+    & .badge-group {
+      display: flex;
+      padding: 0;
+      margin: 5px 0;
+      justify-content: flex-start;
+    }
+
+    & .badge {
+      font-size: 0.65rem;
+      display: block;
+      padding: 0 0.5rem;
+      border-radius: 2px;
+      margin-right: 0.25rem;
+      border: 1px solid var(--gray-6);
+      color: var(--gray-4);
+    }
+
+    & .product-name {
+      margin-right: 0.5rem;
+      position: relative;
+      color: var(--gray-3);
+    }
+  }
+
+  & .ais-Highlight-highlighted {
+    background-color: rgba(102, 162, 255, 0.47);
+  }
+}
+
+/* Legend */
+.g-search .c-search-legend {
+  display: none;
+  width: 100%;
+  height: var(--legend-height);
+  margin: 0;
+  padding: 0 1rem;
+  background: var(--white);
+  border-bottom: 1px solid var(--gray-6);
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  @media (--medium-up) {
+    display: flex;
+  }
+
+  & .legend-item {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    height: var(--legend-height);
+
+    & > div {
+      height: 24px;
+    }
+  }
+
+  & .g-type-tag-label {
+    font-size: 13px;
+    color: var(--gray-4);
+    padding-left: 8px;
+  }
+
+  & .visually-hidden {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+  }
+}