@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/docs-sidenav/index.js

@@ -1,457 +0,0 @@
-import React, { useState, useMemo } from 'react'
-import LinkWrap from '@hashicorp/react-link-wrap'
-import MenuIcon from './menu-icon'
-import ChevronIcon from './chevron-icon'
-import fuzzysearch from 'fuzzysearch'
-
-export default function DocsSidenav({
-  data,
-  order,
-  currentPage,
-  category,
-  Link,
-  product,
-  disableFilter = false
-}) {
-  const [open, setOpen] = useState(false)
-  const [filterInput, setFilterInput] = useState('')
-
-  // we memoize here as the page matching is a pure, expensive calculation that
-  // does not need to re-run every render
-  const allContent = useMemo(
-    () => matchOrderToData(currentPage, order, calculatePath(data, category)),
-    [order, data, category, currentPage]
-  )
-  const [content, setContent] = useState(allContent)
-
-  // remove leading slash and base level "docs"/"api"/etc
-  const current = currentPage.split('/').slice(1 + category.split('/').length)
-
-  return (
-    <div
-      className={`g-docs-sidenav${open ? ' open' : ''}${
-        product ? ` theme-${product}` : ''
-      }`}
-      data-testid='root'
-    >
-      <div
-        className='toggle'
-        onClick={() => setOpen(!open)}
-        data-testid='mobile-menu'
-      >
-        <span>
-          <MenuIcon /> Documentation Menu
-        </span>
-      </div>
-      <ul className='nav docs-nav'>
-        <div className='mobile-close' onClick={() => setOpen(!open)}>
-          &times;
-        </div>
-        {!disableFilter && (
-          <input
-            className='filter'
-            placeholder='Filter...'
-            onChange={filterInputChange.bind(
-              null,
-              setFilterInput,
-              JSON.parse(JSON.stringify(allContent)), // deep clone
-              setContent
-            )}
-            value={filterInput}
-          />
-        )}
-        {renderNavTree(category, content, current, filterInput, Link)}
-      </ul>
-    </div>
-  )
-}
-
-// Filter nav items
-function filterInputChange(setFilterInput, allContent, setContent, e) {
-  setFilterInput(e.target.value)
-  setContent(findContent(allContent, e.target.value.toLowerCase()))
-}
-
-function findContent(content, value) {
-  // if there's no search value we short-circuit and return everything
-  if (!value) return content
-
-  return content.reduce((acc, item) => {
-    // recurse on content, depth-first
-    if (item.content) item.content = findContent(item.content, value)
-
-    // here we check for conditions on a branch node
-    // first, if a branch has children, that means at least one of the leaf nodes has
-    // matched, so we push the branch so that the leaf is displayed
-    const hasContent = item.content && item.content.length
-    // second, we check to see if a branch's title matches against the query, if so we
-    // push the branch because it matched directly
-    const categoryTitleMatches =
-      item.indexData &&
-      fuzzysearch(value, item.indexData.page_title.toLowerCase())
-    if (hasContent || categoryTitleMatches) {
-      if (categoryTitleMatches) {
-        item.matchedFilter = true
-      }
-      acc.push(item)
-    }
-
-    // now we check against content on leaf nodes
-    if (item.page_title && fuzzysearch(value, item.page_title.toLowerCase())) {
-      item.matchedFilter = true
-      acc.push(item)
-    }
-
-    // and that's all!
-    return acc
-  }, [])
-}
-
-// Given a set of front matter data, adds a `path` variable formatted for correct links
-function calculatePath(pageData, category) {
-  return pageData.map(p => {
-    p.path = p.__resourcePath
-      .split('/')
-      .slice(category.split('/').length)
-      .join('/')
-      .replace(/\.mdx$/, '')
-    return p
-  })
-}
-
-// Matches up user-defined navigation hierarcy with front matter from the correct pages.
-//
-// For context, the user-defined nav hierarchy is called "content" in this function, and
-// the shape of its data is as such:
-// [{
-//   category: 'foo',
-//   content: ['bar', 'baz']
-// },
-// '--------------',
-// {
-//   category: 'quux'
-// }]
-//
-// The front matter data is structured as such:
-// {
-//   __resourcePath: '/docs/foo/bar.mdx',
-//   path: 'foo/bar',
-//   ...frontMatterObject
-// }
-function matchOrderToData(currentPage, order, pageData, stack = []) {
-  // go through each item in the user-established order
-  return order.map(item => {
-    if (typeof item === 'string') {
-      // if a string like '-----' is given, we render a divider
-      if (item.match(/^-+$/)) return item
-
-      // if we have a string, that's a terminal page. we match it with
-      // the provided page data and return the enhanced object
-      const itemData = pageData.filter(page => {
-        // break down the full path and strip the html extension
-        const pageDataPath = page.path.split('/')
-        // copy the stack and push the item as the file path
-        const contentPath = [...stack, item]
-        // match them up!
-        return pageDataPath.join('/') === contentPath.join('/')
-      })[0]
-
-      // If we don't have a match here, the user has defined a page that doesn't exist, so let's give them
-      // a very clear error message on how to resolve this situation.
-      if (!itemData) {
-        const pageCategory = currentPage.split('/')[1]
-        const missingPath = `${pageCategory}/${stack.join('/')}/${item}.mdx`
-        const cat = `${stack.join('/')}`
-        throw new Error(
-          `The page "${item}" was not found within the category "${cat}". Please double-check to ensure that "${missingPath}" exists. If this page was never intended to exist, remove the key "${item}" from the category "${cat}" in "data/${pageCategory}-navigation.js"`
-        )
-      }
-
-      return itemData
-    } else if (item.title && item.href) {
-      // this is the syntax for direct links, we can return them directly
-      return item
-    } else {
-      // catch errors where direct links are formatted incorrectly
-      if (item.title || item.href) {
-        throw new Error(
-          `Malformed direct sidebar link:\n\n ${JSON.stringify(
-            item
-          )}\n\nDirect links must have a "href" and a "title" property.`
-        )
-      }
-
-      // this method mutates the object, which causes an error on subsequent renders,
-      // so we clone it first.
-      const _item = Object.assign({}, item)
-
-      // keep track of all parent categories
-      _item.stack = stack.concat(_item.category)
-
-      // using a category without content is not allowed
-      if (_item.category && !_item.content) {
-        const topLevelCategory = currentPage.split('/')[1]
-        throw new Error(
-          `The item "${_item.stack.join(
-            '/'
-          )}" within "data/${topLevelCategory}-navigation.js" has a category but no content, indicating that there is a folder that contains only an "index.mdx" file, which is not allowed. To fix this, move and rename "pages/${topLevelCategory}/${_item.stack.join(
-            '/'
-          ) + '/index.mdx'}" to "pages/${topLevelCategory}/${_item.stack.join(
-            '/'
-          ) + '.mdx'}", then change the value from "{ category: '${
-            _item.category
-          }' }" to just "${item.category}"`
-        )
-      }
-
-      // grab the index page, as it can contain data about the top level link
-      pageData.some(page => {
-        const pageDataPath = page.path.split('/')
-
-        const depthLevelsMatch = _item.stack.length === pageDataPath.length - 1
-        const pathItemsMatch = _item.stack.every(
-          (s, i) => s === pageDataPath[i]
-        )
-        const isIndexFile = pageDataPath[pageDataPath.length - 1] === 'index'
-
-        if (depthLevelsMatch && pathItemsMatch && isIndexFile) {
-          _item.indexData = page
-          // now that we know its an index page, we can remove it from the path, as
-          // its not necessary for links
-          _item.indexData.path = _item.indexData.path.replace(/\/index$/, '')
-          return true
-        }
-      })
-
-      // error handling for nav nesting mistakes
-      if (!_item.indexData && !_item.name) {
-        throw new Error(
-          `An index page or "name" property is required for all categories.\nIf you would like an index page for this category, please add an index file at the path "${_item.stack.join(
-            '/'
-          )}/index.mdx".\nIf you do not want an index page for this category, please add a "name" property to the category object to specify the category's human-readable title.\n\nItem:\n${JSON.stringify(
-            _item,
-            null,
-            2
-          )}`
-        )
-      }
-
-      // using "name" and manually adding an "overview" page is silly. let's prevent that.
-      if (_item.name && _item.content.includes('overview')) {
-        throw new Error(`The category "${_item.stack.join(
-          '/'
-        )}" is using a "name" property to indicate that it has no index, but also has a manually added "overview" page. This can be fixed with the following steps:
-
-- Change the "overview.mdx" page to be "index.mdx"
-- Remove the "name" property from the "${
-          _item.category
-        }" data, instead indicate the category's name using the frontmatter on the new "index.mdx" page`)
-      }
-
-      // otherwise, it's a nested category. if the category has content, we
-      // recurse, passing in that category's content, and the matching
-      // subsection of page data from middleman
-      if (_item.content) {
-        _item.content = matchOrderToData(
-          currentPage,
-          _item.content,
-          filterData(pageData, _item.category),
-          _item.stack
-        )
-      }
-
-      return _item
-    }
-  })
-}
-
-// Recursively renders the markup for the nested navigation
-function renderNavTree(category, content, currentPath, filterInput, Link) {
-  return content.map((item, idx) => {
-    // dividers are the only items left as strings
-    // This array is stable, so we can use index as key
-    // eslint-disable-next-line react/no-array-index-key
-    if (typeof item === 'string') return <hr key={idx} />
-
-    // if the link property has been set to true, we're rendering a direct link
-    // rather than a link to a docs page
-    if (item.title && item.href) {
-      return (
-        <li
-          // This array is stable, so we can use index as key
-          // eslint-disable-next-line react/no-array-index-key
-          key={idx}
-          data-testid={item.href}
-          className={item.href.match(/^http[s]*:\/\//) ? 'external' : ''}
-        >
-          <LinkWrap
-            Link={Link}
-            href={item.href}
-            dangerouslySetInnerHTML={{ __html: item.title }}
-          />
-        </li>
-      )
-    }
-
-    if (item.path) {
-      // if the item has a path, it's a leaf node so we render a link to the page
-      let className = ''
-      if (
-        fileMatch(
-          item.path.split('/').filter(x => x),
-          currentPath.filter(x => x)
-        )
-      )
-        className += 'active '
-      if (item.matchedFilter) className += 'matched'
-
-      return (
-        <li
-          // This array is stable, so we can use index as key
-          // eslint-disable-next-line react/no-array-index-key
-          key={idx}
-          className={className}
-          data-testid={`/${category}/${item.path}`}
-        >
-          <LinkWrap
-            Link={Link}
-            href={`/${category}/${item.path}`}
-            dangerouslySetInnerHTML={{
-              __html: item.sidebar_title || item.page_title
-            }}
-          />
-        </li>
-      )
-    } else {
-      // if not, its an index page in a folder, so we render it as an expandable category
-      // alternately its a folder with no index page, in which case we skip the "overview" link
-
-      // here we search for the sidebar title. if the category has an index page, we look on this
-      // first, preferring sidebar_title and falling back to page_title. next we look for name, which
-      // is the standard for categories without index files, and all else failing, we use the raw
-      // folder name itself
-      const title = item.indexData
-        ? item.indexData.sidebar_title || item.indexData.page_title
-        : item.name || item.category
-
-      // we need to know the path of the category/folder itself, which we can get from the stack
-      const folderPath = item.stack.join('/')
-
-      // now we test whether the current url is a match for the category and the page
-      const categoryMatches = categoryMatch(folderPath.split('/'), currentPath)
-      const fileMatches = fileMatch(
-        folderPath.split('/').filter(x => x),
-        currentPath.filter(x => x)
-      )
-        ? 'active'
-        : ''
-      const containsFilterMatches = findFilterMatches(item)
-
-      let className = ''
-      if (item.content) className += 'dir '
-      if (categoryMatches) className += 'open active '
-      if (containsFilterMatches) className += 'open '
-      if (item.matchedFilter && !item.content) className += 'matched'
-
-      // and finally, we can render the folder
-      return (
-        <li
-          className={className}
-          data-testid={`/${category}/${folderPath}`}
-          // This array is stable, so we can use index as key
-          // eslint-disable-next-line react/no-array-index-key
-          key={idx}
-        >
-          <span>
-            {/* Note: this is rendered as a link, but with no href. We should test to see if */}
-            {/* a button element would be more semantically appropriate for a11y. */}
-            <a
-              onClick={item.content && toggleNav}
-              data-testid={`/${category}/${folderPath} - link`}
-            >
-              {item.content ? (
-                <>
-                  <ChevronIcon />{' '}
-                  {
-                    <span
-                      dangerouslySetInnerHTML={{
-                        __html: title
-                      }}
-                    ></span>
-                  }
-                </>
-              ) : (
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: title
-                  }}
-                ></span>
-              )}
-            </a>
-          </span>
-
-          {/* if the item has content, we need to recurse */}
-          {item.content && (
-            <ul className='nav' key={folderPath}>
-              {!item.name && (!filterInput || item.matchedFilter) && (
-                <li
-                  className={`${fileMatches ? 'active ' : ''}${
-                    item.matchedFilter ? 'matched' : ''
-                  }`}
-                  data-testid={`/${category}/${folderPath}/index`}
-                >
-                  {/* hide "overview" links if there's no overview (aka there is a name), or while searching */}
-
-                  <LinkWrap Link={Link} href={`/${category}/${folderPath}`}>
-                    Overview
-                  </LinkWrap>
-                </li>
-              )}
-              {renderNavTree(
-                category,
-                item.content,
-                currentPath,
-                filterInput,
-                Link
-              )}
-            </ul>
-          )}
-        </li>
-      )
-    }
-  })
-}
-
-// Given a single item, returns whether it or any of its children have the
-// `matchedFilter` property.
-function findFilterMatches(item) {
-  if (item.matchedFilter) return true
-  return (
-    item.content &&
-    item.content.map(child => findFilterMatches(child)).some(x => x)
-  )
-}
-
-// Given an array of pages, returns only pages whose paths contain the given category.
-function filterData(data, category) {
-  return data.filter(d => d.path.split('/').indexOf(category) > -1)
-}
-
-// If the nav item category is entirely contained by the current page's path,
-// this means we're inside that category and should mark it as open.
-function categoryMatch(navItemPath, currentPath) {
-  return navItemPath.every((item, i) => item === currentPath[i])
-}
-
-// If the current page's path exactly matches the passed in nav item's path,
-// we have a match and can highlight the currently active page.
-function fileMatch(navItemPath, currentPath) {
-  if (currentPath.length !== navItemPath.length) return false
-  return currentPath.every((item, i) => item === navItemPath[i])
-}
-
-// Opens and closes a given nav category, the easy way
-function toggleNav(e) {
-  e.preventDefault()
-  e.currentTarget.parentElement.parentElement.classList.toggle('open')
-}

package/packages/docs-sidenav/menu-icon.js

@@ -1,14 +0,0 @@
-import React from 'react'
-
-export default function MenuIcon() {
-  return (
-    <svg width="20" height="20" fill="none" viewBox="0 0 20 20">
-      <path
-        fill="black"
-        fillRule="evenodd"
-        d="M3.08268 14.4112C3.00768 14.3362 2.91602 14.2695 2.81602 14.2278C2.66602 14.1695 2.49935 14.1528 2.33268 14.1862C2.28268 14.1945 2.22435 14.2112 2.17435 14.2278C2.12435 14.2528 2.08268 14.2778 2.03268 14.3112C1.99018 14.3362 1.94935 14.3695 1.90768 14.4112C1.83268 14.4862 1.77435 14.5778 1.72435 14.6778C1.68268 14.7862 1.66602 14.8862 1.66602 15.0028C1.66602 15.0528 1.66602 15.1112 1.68268 15.1612C1.69102 15.2195 1.70768 15.2695 1.72435 15.3195C1.74852 15.3695 1.77435 15.4195 1.80768 15.4612C1.83268 15.5112 1.87435 15.5528 1.90768 15.5862C1.94935 15.6278 1.99018 15.6612 2.03268 15.6945C2.08268 15.7195 2.12435 15.7528 2.17435 15.7695C2.22435 15.7862 2.28268 15.8028 2.33268 15.8195C2.39102 15.8278 2.44018 15.8362 2.49935 15.8362C2.60768 15.8362 2.71602 15.8112 2.81602 15.7695C2.91602 15.7278 3.00768 15.6695 3.08268 15.5862C3.12435 15.5528 3.15768 15.5112 3.19102 15.4612C3.21602 15.4195 3.24935 15.3695 3.26602 15.3195C3.29102 15.2695 3.30768 15.2195 3.31602 15.1612C3.32435 15.1112 3.33268 15.0528 3.33268 15.0028C3.33268 14.8862 3.30768 14.7862 3.26602 14.6778C3.22435 14.5778 3.16602 14.4862 3.08268 14.4112ZM3.08268 9.41118C3.00768 9.33618 2.91602 9.26951 2.81602 9.22785C2.66602 9.16951 2.49935 9.15284 2.33268 9.18618C2.28268 9.19451 2.22435 9.21118 2.17435 9.22785C2.12435 9.25284 2.08268 9.27784 2.03268 9.31118C1.99018 9.33618 1.94935 9.36951 1.90768 9.41118C1.74852 9.56951 1.66602 9.77784 1.66602 10.0028C1.66602 10.1112 1.68268 10.2195 1.72435 10.3195C1.77435 10.4195 1.83268 10.5112 1.90768 10.5862C1.94935 10.6278 1.99018 10.6612 2.03268 10.6945C2.08268 10.7195 2.12435 10.7445 2.17435 10.7695C2.22435 10.7862 2.28268 10.8028 2.33268 10.8195C2.39102 10.8278 2.44018 10.8362 2.49935 10.8362C2.60768 10.8362 2.71602 10.8112 2.81602 10.7695C2.91602 10.7278 3.00768 10.6695 3.08268 10.5862C3.16602 10.5112 3.22435 10.4195 3.26602 10.3195C3.30768 10.2195 3.33268 10.1112 3.33268 10.0028C3.33268 9.88618 3.30768 9.78618 3.26602 9.67785C3.22435 9.57785 3.16602 9.48618 3.08268 9.41118ZM3.08268 4.41128C3.00768 4.33628 2.91602 4.26961 2.81602 4.22795C2.66602 4.16128 2.49935 4.15295 2.33268 4.18628C2.28268 4.19461 2.22435 4.21128 2.17435 4.22795C2.12435 4.25295 2.08268 4.27795 2.03268 4.31128C1.99018 4.33628 1.94935 4.36961 1.90768 4.41128C1.74852 4.56961 1.66602 4.78628 1.66602 5.00295C1.66602 5.11128 1.68268 5.21961 1.72435 5.31961C1.77435 5.41961 1.83268 5.51128 1.90768 5.58628C1.94935 5.62795 1.99018 5.66128 2.03268 5.69461C2.08268 5.71961 2.12435 5.74461 2.17435 5.76961C2.22435 5.78628 2.28268 5.80295 2.33268 5.81961C2.39102 5.82795 2.44018 5.83628 2.49935 5.83628C2.60768 5.83628 2.71602 5.81128 2.81602 5.76961C2.91602 5.72795 3.00768 5.66961 3.08268 5.58628C3.16602 5.51128 3.22435 5.41961 3.26602 5.31961C3.30768 5.21961 3.33268 5.11128 3.33268 5.00295C3.33268 4.89461 3.30768 4.78628 3.26602 4.67795C3.22435 4.57795 3.16602 4.48628 3.08268 4.41128ZM17.4967 14.167H6.66341C6.20258 14.167 5.83008 14.5395 5.83008 15.0003C5.83008 15.4603 6.20258 15.8337 6.66341 15.8337H17.4967C17.9576 15.8337 18.3301 15.4603 18.3301 15.0003C18.3301 14.5395 17.9576 14.167 17.4967 14.167ZM17.4967 9.16699H6.66341C6.20258 9.16699 5.83008 9.53949 5.83008 10.0003C5.83008 10.4603 6.20258 10.8337 6.66341 10.8337H17.4967C17.9576 10.8337 18.3301 10.4603 18.3301 10.0003C18.3301 9.53949 17.9576 9.16699 17.4967 9.16699ZM18.3301 5.00033C18.3301 5.46033 17.9576 5.83366 17.4967 5.83366H6.66341C6.20258 5.83366 5.83008 5.46033 5.83008 5.00033C5.83008 4.53949 6.20258 4.16699 6.66341 4.16699H17.4967C17.9576 4.16699 18.3301 4.53949 18.3301 5.00033Z"
-        clipRule="evenodd"
-      />
-    </svg>
-  )
-}

package/packages/docs-sidenav/package-lock.json

@@ -1,26 +0,0 @@
-{
-  "name": "@hashicorp/react-docs-sidenav",
-  "version": "6.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@hashicorp/react-link-wrap": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-link-wrap/-/react-link-wrap-0.0.3.tgz",
-      "integrity": "sha512-BLH7SLMJZee8md+YU7seiOh0zpa7y8sEhEATYpK2ieFanXAQEgU58lNSC/V3ZdkSXrfyplftYuOj0E3APtE1pg==",
-      "requires": {
-        "is-absolute-url": "^3.0.3"
-      }
-    },
-    "fuzzysearch": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fuzzysearch/-/fuzzysearch-1.0.3.tgz",
-      "integrity": "sha1-3/yA9tawQiPyImqnndGUIxCW0Ag="
-    },
-    "is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q=="
-    }
-  }
-}

package/packages/docs-sidenav/package.json

@@ -1,21 +0,0 @@
-{
-  "name": "@hashicorp/react-docs-sidenav",
-  "description": "Sidebar used for navigation HashiCorp docs",
-  "version": "6.0.0",
-  "author": "HashiCorp",
-  "contributors": [
-    "Jeff Escalante"
-  ],
-  "dependencies": {
-    "@hashicorp/react-link-wrap": "^0.0.3",
-    "fuzzysearch": "1.0.3"
-  },
-  "license": "MPL-2.0",
-  "peerDependencies": {
-    "react": "^16.9.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "c47c50a8419f6278073505ebbe25c9fbe4faab07"
-}