@hashicorp/react-components 0.0.0

package/.circleci/config.yml

@@ -0,0 +1,8 @@
+version: 2.1
+orbs:
+  node: circleci/node@3.0.0
+workflows:
+  test:
+    jobs:
+      - node/test:
+          run-command: bootstrap && npm test

package/.github/pull_request_template.md

@@ -0,0 +1,36 @@
+🎟️ [Asana Task]()
+🔍 [Preview Link](https://react-components-git-{branch-slug}.hashicorp.vercel.app)
+
+---
+
+## Description
+
+Describe this pull request: what is it aiming to achieve? What should someone reviewing this PR know? If this PR includes visual changes, consider including before / after screenshots, or an animated gif showing interactions.
+
+## Release Information
+
+Please select one (**required**)
+
+- [ ] **Major** (This PR introduces a breaking (incompatible API) change)
+- [ ] **Minor** (This PR adds functionality but it backwards-compatible)
+- [ ] **Patch** (This PR adds a backwards-compatible bug fix)
+
+<details>
+<summary>Release Notes (<strong>required</strong>)</summary>
+<!-- This repo requires release notes on each PR in order to publish a package. Remove this comment and replace with release notes that will be reflected in the GitHub release notes. -->
+</details>
+
+---
+
+### PR Checklist 🚀
+
+Items in this checklist may not may not apply to your PR, but please consider each item carefully.
+
+- [ ] Add Asana and Preview links above.
+- [ ] Conduct thorough self-review.
+- [ ] Add or update tests as appropriate.
+- [ ] Write a useful description (above) to give reviewers appropriate context.
+- [ ] Add release notes to the appropriate section (above).
+- [ ] Conduct reasonable cross browser testing for both compatibility and responsive behavior (We have a [Cross Browser Testing](https://crossbrowsertesting.com) account for this, if you don't have access, just ask!).
+- [ ] Conduct reasonable accessibility review (use the [WAS](https://accessible.org/Web-Accessibility-Standards-WAS-2.pdf) as a guide or an [axe browser plugin](https://www.deque.com/axe/) until we establish more formal checks).
+- [ ] Identify (in the description above) and document (add Asana tasks on [this board](https://app.asana.com/0/1100423001970639/list)) any technical debt that you're aware of, but are not addressing as part of this PR.

package/.github/workflows/publish.yml

@@ -0,0 +1,181 @@
+name: HashiBot Package Publisher
+
+on:
+  pull_request:
+    branches:
+      - master
+    types: [opened, synchronize, ready_for_review, edited, closed]
+
+jobs:
+  scan_changed_packages:
+    name: Scan changed packages
+    runs-on: ubuntu-latest
+    outputs:
+      packageName: ${{ steps.parse_changed.outputs.package_name }}
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Parse changed packages
+        id: parse_changed
+        run: |
+          echo "::set-output name=package_name::$( echo $(npx lerna changed --json || echo "{}") | jq -r 'if . | length == 1 then .[0].name | tostring else "N/A" end' )"
+
+  add_comment:
+    name: Add warning comment to PR author
+    runs-on: ubuntu-latest
+    needs: scan_changed_packages
+    if: ${{ needs.scan_changed_packages.outputs.packageName == 'N/A' }}
+    steps:
+      - name: Comment on PR
+        uses: actions/github-script@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const { data: comments } = await github.issues.listComments({
+              owner: context.payload.repository.owner.login,
+              repo: context.payload.repository.name,
+              issue_number: context.payload.pull_request.number,
+            })
+            const body = "This pull request cannot be automatically published as we've detected multiple lerna packages have been affected. Please publish manually."
+            const dup = comments.find(c => c.body === body)
+            if (dup) {
+              core.warning('This comment already exists')
+              process.exit(0)
+            }
+            await github.issues.createComment({
+              owner: context.payload.repository.owner.login,
+              repo: context.payload.repository.name,
+              issue_number: context.payload.pull_request.number,
+              body
+            })
+
+  log_package:
+    name: Log package name
+    runs-on: ubuntu-latest
+    needs: scan_changed_packages
+    if: ${{ needs.scan_changed_packages.outputs.packageName != 'N/A' }}
+    steps:
+      - name: Log package name
+        env:
+          PACKAGE_NAME: ${{ needs.scan_changed_packages.outputs.packageName }}
+        run: |
+          echo "Change detected in package: $PACKAGE_NAME"
+
+  verify_description:
+    name: Verify description
+    runs-on: ubuntu-latest
+    needs: scan_changed_packages
+    outputs:
+      version: ${{ steps.version.outputs.version }}
+      releaseNotes: ${{ steps.release_notes.outputs.releaseNotes }}
+    if: ${{ needs.scan_changed_packages.outputs.packageName != 'N/A' }}
+    steps:
+      - name: Get semver keyword
+        id: version
+        uses: actions/github-script@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            // Get contents of PR description
+            const prBody = context.payload.pull_request.body
+            // Parse lines of description
+            const prBodyLines = prBody.split('\n').map(x => x.trim()).filter(Boolean)
+            // Ensure version has been selected
+            const selectedVersion = prBodyLines.filter(x => x.match(/^-\s\[x\].*(major|minor|patch).*$/i))
+            if (!selectedVersion.length) return core.setFailed('Failed to find required version information! Ensure a SemVer category is selected in the pull request description.')
+            const [version] = /(major|minor|patch)/i.exec(selectedVersion[0])
+            if (!version) return core.setFailed('There was an error parsing the version. Please ensure an appropriate version is checked in the pull request description.')
+            core.setOutput("version", version)
+      - name: Get release notes
+        id: release_notes
+        uses: actions/github-script@v2
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            // Get contents of PR description
+            const prBody = context.payload.pull_request.body
+            // Parse lines of description
+            const prBodyLines = prBody.split('\n').map(x => x.trim()).filter(Boolean)
+            // Detect Release Notes
+            const releaseNotesStartIdx = prBodyLines.findIndex(line => line.match(/^<summary>release.*$/i))
+            const releaseNotesEndIdx = prBodyLines.findIndex(line => line.match(/^\<\/details>\s*$/i))
+            if (!releaseNotesStartIdx || !releaseNotesEndIdx) core.setFailed('Unable to parse release notes. Ensure release notes are included within the pull request description.')
+            // Extract release notes
+            const releaseNotes = Array.from({
+              length: releaseNotesEndIdx - releaseNotesStartIdx - 1
+            })
+              .map((_, i) => i + releaseNotesStartIdx + 1)
+              .map(idx => prBodyLines[idx])
+              .join('\n')
+            if (!releaseNotes.length || releaseNotes.startsWith('<!--')) return core.setFailed('Cannot find release notes associated with this pull request!')
+            core.setOutput("releaseNotes", releaseNotes)
+  # release_package:
+  #   name: Publish package
+  #   runs-on: ubuntu-latest
+  #   needs: [scan_changed_packages, verify_description]
+  #   if: ${{ needs.scan_changed_packages.outputs.packageName != 'N/A' && github.event.action == 'closed' && github.event.pull_request.merged == true }}
+  #   steps:
+  #     - uses: actions/checkout@v2
+  #       with:
+  #         fetch-depth: 0
+  #     - run: git checkout master
+  #     - name: Setup Node.js
+  #       uses: actions/setup-node@v1
+  #       with:
+  #         node-version: "12.x"
+  #         registry-url: "https://registry.npmjs.org"
+  #     - run: npm ci --ignore-scripts
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+  #     - run: npm run vercel-build
+  #     - name: Configure git credentials
+  #       run: |
+  #         git config --global user.email "mktg-dev-github-bot@hashicorp.com"
+  #         git config --global user.name "HashiBot Web"
+  #     - name: Tag major version
+  #       if: ${{ needs.verify_description.outputs.version == 'Major'}}
+  #       run: |
+  #         echo 'VERSION<<EOF' >> $GITHUB_ENV
+  #         ./node_modules/.bin/lerna version major --yes | jq -Rsr 'split(" => ") | .[1] | gsub("[\\n\\t]"; "")' >> $GITHUB_ENV
+  #         echo 'EOF' >> $GITHUB_ENV
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+  #     - name: Tag minor version
+  #       if: ${{ needs.verify_description.outputs.version == 'Minor'}}
+  #       run: |
+  #         echo 'VERSION<<EOF' >> $GITHUB_ENV
+  #         ./node_modules/.bin/lerna version minor --yes | jq -Rsr 'split(" => ") | .[1] | gsub("[\\n\\t]"; "")' >> $GITHUB_ENV
+  #         echo 'EOF' >> $GITHUB_ENV
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+  #     - name: Tag patch version
+  #       if: ${{ needs.verify_description.outputs.version == 'Patch'}}
+  #       run: |
+  #         echo 'VERSION<<EOF' >> $GITHUB_ENV
+  #         ./node_modules/.bin/lerna version patch --yes | jq -Rsr 'split(" => ") | .[1] | gsub("[\\n\\t]"; "")' >> $GITHUB_ENV
+  #         echo 'EOF' >> $GITHUB_ENV
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+  #     - name: Print version
+  #       run: echo $VERSION
+  #     - name: Create GitHub release
+  #       uses: actions/github-script@v2
+  #       with:
+  #         github-token: ${{ secrets.GITHUB_TOKEN }}
+  #         script: |
+  #           github.repos.createRelease({
+  #             owner: context.payload.repository.owner.login,
+  #             repo: context.payload.repository.name,
+  #             tag_name: `${process.env.PACKAGE_NAME}@${process.env.VERSION}`,
+  #             body: process.env.RELEASE_NOTES,
+  #             draft: false,
+  #             prerelease: false,
+  #           });
+  #       env:
+  #         PACKAGE_NAME: ${{ needs.scan_changed_packages.outputs.packageName }}
+  #         RELEASE_NOTES: ${{ needs.verify_description.outputs.releaseNotes }}
+  #     - name: Publish package
+  #       run: ./node_modules/.bin/lerna publish from-package --yes
+  #       env:
+  #         NODE_AUTH_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}

package/README.md

@@ -0,0 +1,79 @@
+# HashiCorp React Components
+
+This project is a [lerna](https://github.com/lerna/lerna) monorepo containing a library of react components that are shared between multiple HashiCorp web properties. It also includes a component playground that uses [swingset](https://github.com/hashicorp/swingset) to create a space where component authors and contributors can experiment with and quickly iterate on component design and functionality.
+
+## Usage
+
+- **Getting Started:** Run `npm i` to install base-level dependencies, then follow with `npm run bootstrap` to install dependencies for each component in the `packages` directory.
+- **Running the Playground:** Run `npm start` - it will start a dev server which can be viewed at `http://localhost:3000`.
+- **Running Tests:**: Run `npm t` to execute the tests. To run watch mode on tests, `npm run test:watch` - this is helpful during development.
+
+The `packages` directory contains all the individual components. Let's talk about some of the most important files:
+
+- `index.jsx`: primary export of the component itself
+- `index.test.js`: tests for the component, run using [jest](https://jestjs.io/)
+- `docs.mdx`: documentation for the component, see [swingset docs](https://github.com/hashicorp/swingset#usage) for more details on the format
+- `props.js`: information about the component's props, see [swingset docs](https://github.com/hashicorp/swingset#props) for more details on the format
+
+## Publishing Packages
+
+We manage and distribute packages to [`npm`](https://www.npmjs.com/) using [Lerna](https://lerna.js.org/). Each component is independently published and versioned.
+
+### Prerequisites
+
+In order to publish packages, you must:
+
+1. Be added to the HashiCorp organization on `npm`
+2. [Enable 2-factor authentication](https://docs.npmjs.com/configuring-two-factor-authentication) on your npm account
+3. Log into to `npm` in your CLI with [`npm login`](https://docs.npmjs.com/cli/adduser)
+
+If you have not done any of these steps, the publish script will fail.
+
+### Publishing `--canary` releases
+
+Canary releases allow us to publish and test in-progress changes to components.
+
+```
+npm run release:canary
+```
+
+You can consume pre-releases with something like `npm install @hashicorp/react-package-name@next`. Canary releases should only be used in staging contexts, not production.
+
+By default, `npm run release:canary` will publish a pre-patch canary release. If you're working on feature changes or breaking changes, you'll likely want to run the appropriate versioning command within the package folder before running `npm run release:canary`. This also helps signal the versioning intent to reviewers.
+
+**Further details**: `npm run release:canary` will publish any changed packages and their dependencies. It tags the release with the `@next` dist-tag. It also uses [Lerna's `--canary` option](https://github.com/lerna/lerna/tree/master/commands/publish#--canary) to avoid version collisions across branches.
+
+### Publishing Production Releases
+
+Production releases should only be published off of `master`.
+
+```sh
+npm run release
+```
+
+Any production releases should be **immediately followed up by bumping the updated package** in any consuming projects.
+
+For most web-components packages, this means checking the `hashicorp-www-next` repo for Dependabot PRs to bump the package in question. You can view open Dependabot PRs on `hashicorp-www-next` using [the PR view with the `author:app/dependabot-preview` filter applied](https://github.com/hashicorp/hashicorp-www-next/pulls/app%2Fdependabot-preview).
+
+### Oh no! I got a 401 and now my packages are like half-published
+
+The current workaround is not ideal, but should completely fix the issue. Definitely reach out if you need assistance, as almost everyone on the team has run into this:
+
+1. **Remove the "Publish" commit**. The "Publish" commit will most likely be your most recent commit, in which case the command below can be used. **These commands rewrite git history, so use caution!**
+   ```sh
+   git reset --hard HEAD^ # reset the previous commit
+   git push origin master --force-with-lease # push new history
+   ```
+1. **Delete the tags** that point to the deleted publish commit
+   ```sh
+   git tag --delete {tagname} # delete the local tag
+   git push --delete origin {tagname} # delete the remote tag
+   ```
+   For example:
+   ```sh
+   git tag --delete @hashicorp/react-secondary-nav@2.1.0
+   git push --delete origin @hashicorp/react-secondary-nav@2.1.0
+   ```
+   If multiple packages were published, you'll need to delete tags for each individual package.
+
+Now everything should be reset to its state prior to the publish failure.

package/__test-helpers/expect-throw.js

@@ -0,0 +1,6 @@
+export default function expectToThrow(fn, throwResult) {
+  jest.spyOn(console, 'error')
+  console.error.mockImplementation(() => {})
+  expect(fn).toThrow(throwResult)
+  console.error.mockRestore()
+}

package/__test-helpers/extend-expect.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect'

package/__test-helpers/mocks/css-module-mock.js

@@ -0,0 +1 @@
+module.exports = {}

package/__test-helpers/mocks/graphql-fragment-mock.js

@@ -0,0 +1 @@
+module.exports = {}

package/__test-helpers/mocks/svg-mock.js

@@ -0,0 +1 @@
+module.exports = {}

package/babel.config.js

@@ -0,0 +1,5 @@
+// This is here for jest, it's not needed for nextjs as its the default
+
+module.exports = {
+  presets: ['next/babel'],
+}

package/jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  moduleNameMapper: {
+    '\\.module.css$': '<rootDir>/__test-helpers/mocks/css-module-mock.js',
+    '\\.graphql$': '<rootDir>/__test-helpers/mocks/graphql-fragment-mock.js',
+    '\\.svg(?:\\?.*)*$': '<rootDir>/__test-helpers/mocks/svg-mock.js',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!@hashicorp/react-)',
+    '\\.pnp\\.[^\\/]+$',
+  ],
+  verbose: true,
+  setupFilesAfterEnv: ['<rootDir>/__test-helpers/extend-expect.js'],
+}

package/lerna.json

@@ -0,0 +1,16 @@
+{
+  "lerna": "3.22.1",
+  "packages": ["packages/*"],
+  "version": "independent",
+  "command": {
+    "publish": {
+      "ignoreChanges": [
+        "*.test.js",
+        "props.js",
+        "docs.mdx",
+        "README.md",
+        "package-lock.json"
+      ]
+    }
+  }
+}

package/next.config.js

@@ -0,0 +1,14 @@
+const withHashicorp = require('@hashicorp/nextjs-scripts')
+const withSwingset = require('swingset')
+
+module.exports = withHashicorp({
+  transpileModules: [
+    'swingset',
+    '@hashicorp/react-.*',
+    '@hashicorp/nextjs-scripts',
+  ],
+})(
+  withSwingset({
+    componentsRoot: 'packages/*',
+  })({ svgo: { plugins: [{ removeViewBox: false }] } })
+)

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@hashicorp/react-components",
+  "version": "0.0.0",
+  "dependencies": {
+    "@hashicorp/mktg-global-styles": "^2.0.0",
+    "@hashicorp/nextjs-scripts": "^13.2.0",
+    "next": "9.5.5",
+    "next-remote-watch": "^0.2.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "swingset": "^0.4.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.1",
+    "jest": "^26.6.3",
+    "lerna": "^3.22.1",
+    "regenerator-runtime": "^0.13.7"
+  },
+  "scripts": {
+    "bootstrap": "lerna bootstrap",
+    "release": "npm run release:check-branch && npm run release:check-auth && lerna publish",
+    "release:canary": "npm run release:check-auth && lerna publish --dist-tag=next --canary",
+    "release:check-auth": "./scripts/release-check-npm-auth.sh",
+    "release:check-branch": "./scripts/release-check-branch.sh",
+    "start": "next-remote-watch \"./packages/*/{docs.mdx,props.js}\"",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "vercel-build": "npm run bootstrap && next build"
+  }
+}