@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/search/package.json

@@ -1,29 +0,0 @@
-{
-  "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

@@ -1,81 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,366 +0,0 @@
-.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;
-  }
-}