@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

package/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/master/docs/common-questions.md)

package/.changeset/config.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@1.4.0/schema.json",
+  "changelog": ["@changesets/changelog-github", {"repo": "primer/react"}],
+  "commit": false,
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

package/.devcontainer/devcontainer.json

@@ -0,0 +1,8 @@
+{
+  "name": "Primer Components",
+  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:14",
+  "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"],
+  "forwardPorts": [8000],
+  "postCreateCommand": ["/bin/bash", "-c", "pushd docs && npm install && popd && npm install"],
+  "remoteUser": "node"
+}

package/.eslintrc.json

@@ -0,0 +1,137 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:prettier/recommended",
+    "plugin:github/recommended",
+    "plugin:github/browser",
+    "plugin:primer-react/recommended"
+  ],
+  "ignorePatterns": [
+    "node_modules",
+    ".cache",
+    "coverage/**/*",
+    "docs/public/**/*",
+    "dist/**/*",
+    "lib/**/*",
+    "lib-*/**/*",
+    "types/**/*"
+  ],
+  "globals": {
+    "__DEV__": "readonly"
+  },
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  // rules which apply to JS, TS, etc.
+  "rules": {
+    "react/prop-types": 0,
+    "react/display-name": 0,
+    "react-hooks/exhaustive-deps": "error",
+    "jsx-a11y/label-has-for": [
+      2,
+      {
+        "components": []
+      }
+    ],
+    "camelcase": [
+      "error",
+      {
+        "allow": ["dark_dimmed"]
+      }
+    ],
+    "primer-react/no-deprecated-colors": ["warn", {"checkAllStrings": true}]
+  },
+  "overrides": [
+    // rules which apply only to JS
+    {
+      "files": ["**/*.{js,jsx}"],
+      "rules": {
+        "eslint-comments/no-use": 0,
+        "import/no-namespace": 0,
+        "no-shadow": 0,
+        "no-unused-vars": [
+          "error",
+          {
+            "ignoreRestSiblings": true
+          }
+        ]
+      }
+    },
+    // rules which apply only to TS
+    {
+      "parserOptions": {
+        "project": "tsconfig.json"
+      },
+      "files": ["**/*.{ts,tsx}"],
+      "extends": ["plugin:@typescript-eslint/recommended"],
+      "rules": {
+        "@typescript-eslint/no-explicit-any": 2,
+        "@typescript-eslint/no-unnecessary-condition": 2,
+        "@typescript-eslint/explicit-module-boundary-types": 0,
+        "@typescript-eslint/no-unused-vars": [
+          "error",
+          {
+            "argsIgnorePattern": "^_"
+          }
+        ]
+      }
+    },
+    // rules which apply only to Markdown
+    {
+      "files": ["**/*.{md,mdx}"],
+      "extends": ["plugin:mdx/recommended"],
+      "settings": {
+        "mdx/code-blocks": true
+      },
+      "rules": {
+        "prettier/prettier": 0
+      }
+    },
+    // rules which apply only to Markdown code blocks
+    {
+      "files": ["**/*.{md,mdx}/**"],
+      "parserOptions": {
+        "project": false
+      },
+      "rules": {
+        "camelcase": 0,
+        "no-constant-condition": 0,
+        "no-console": 0,
+        "no-empty-pattern": 0,
+        "no-unused-vars": 0,
+        "no-undef": 0,
+        "react/no-unescaped-entities": 0,
+        "react/react-in-jsx-scope": 0,
+        "react/jsx-no-undef": 0,
+        "react/jsx-key": 0,
+        "react/jsx-no-comment-textnodes": 0,
+        "import/no-anonymous-default-export": 0,
+        "prettier/prettier": 0,
+        // These a11y rules should eventually be re-enabled
+        "jsx-a11y/anchor-is-valid": 0,
+        "jsx-a11y/accessible-emoji": 0,
+        "jsx-a11y/label-has-for": 0,
+        "@typescript-eslint/no-unnecessary-condition": 0,
+        "@typescript-eslint/no-unused-vars": 0,
+        "primer-react/no-deprecated-colors": ["error", {"skipImportCheck": true}]
+      }
+    }
+  ]
+}

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve Primer React Components
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**Note:** As this is a public repo, please be careful not to include details or screenshots from unreleased GitHub products or features. In most cases, a good bug report should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private [Design Systems repo](https://github.com/github/design-systems/issues/new/choose) and link to it here.
+
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md

@@ -0,0 +1,41 @@
+---
+name: Component Proposal
+about: Propose a new component
+---
+
+## Description
+
+Please describe the proposed component as thoroughly as possible - including Figma links for design, screenshots, historical context, any required functionality, optional/nice to have functionality, proposed component API design, etc. The more detail the better!
+
+**Note:** As this is a public repo, please be careful not to include details about GitHub products or features that have not been released. In most cases, a good component proposal should be able to describe the new component without including business logic or feature details, but if you must discuss context relating to an unreleased feature, please open an issue in the private [Design Systems repo](https://github.com/github/design-systems/issues/new/choose) and link to it here.
+
+### Design
+
+- [ ] Design is finalized. Link to mockups/prototypes:
+- [ ] Design is being finalized by feature team. Link to any in progress mockups:
+- [ ] Assistance requested in finalizing design
+
+### Component API
+
+Optional: If you have an idea of the intended component structure, please describe here. This can include what props will be available, if there will be any nested components or subcomponents, how this component might interact with other components, any behavior Hooks that will need to be built, etc.
+
+### Usage
+
+Describe how the component should be used, and/or link to usage guidelines.
+
+## Implementation
+
+Please describe how you would like this component to be built. Design systems is happy to help with the implementation of new components (as time/roadmap allows) but also recognizes that sometimes feature teams prefer to implement components themselves.
+
+- [ ] Feature team would like to implement this component
+- [ ] Feature team would like the Design Systems team to implement this component
+- [ ] This component is already built, feature team requests assistance moving it to Primer React Components from outside application
+- [ ] Other: (please describe below)
+
+## Timeline
+
+Please describe any deadlines or context around prioritization that would be helpful for us to use when building our roadmap.
+
+#### What to expect next
+
+A Design Systems engineer will read through your component proposal and get in touch! We'll gather any additional information needed and set up a Zoom call only if necessary. Once we have all relevant information, we'll add the component to our [Primer React Components Roadmap](https://github.com/primer/react/projects/3). If you opt to build the component yourself, we are happy to help with pairing, brainstorming, etc. Generally, component work requested from internal feature teams receives higher priority over general (non-requested) improvements to the library.

package/.github/dependabot.yml

@@ -0,0 +1,18 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: 'npm'
+    directory: '/'
+    schedule:
+      interval: 'daily'
+
+  - package-ecosystem: 'npm'
+    directory: '/docs'
+    schedule:
+      interval: 'daily'
+    allow:
+      - dependency-name: '@primer/gatsby-theme-doctocat'

package/.github/pull_request_template.md

@@ -0,0 +1,18 @@
+Describe your changes here.
+
+Closes # (type the issue number after # if applicable; otherwise remove this line)
+
+### Screenshots
+
+Please provide before/after screenshots for any visual changes
+
+### Merge checklist
+
+- [ ] Added/updated tests
+- [ ] Added/updated documentation
+- [ ] Tested in Chrome
+- [ ] Tested in Firefox
+- [ ] Tested in Safari
+- [ ] Tested in Edge
+
+Take a look at the [What we look for in reviews](https://github.com/primer/react/blob/main/contributor-docs/CONTRIBUTING.md#what-we-look-for-in-reviews) section of the contributing guidelines for more information on how we review PRs.

package/.github/workflows/check_for_changeset.yml

@@ -0,0 +1,25 @@
+name: Check for changeset
+
+on:
+  pull_request:
+    types:
+      # On by default if you specify no types.
+      - "opened"
+      - "reopened"
+      - "synchronize"
+      # For `skip-label` only.
+      - "labeled"
+      - "unlabeled"
+
+jobs:
+  check-for-changeset:
+    name: Check for changeset
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: "Check for changeset"
+        uses: brettcannon/check-for-changed-files@v1
+        with:
+          file-pattern: ".changeset/*.md"
+          skip-label: "skip changeset"
+          failure-message: "No changeset found. If these changes should not result in a new version, apply the ${skip-label} label to this pull request. If these changes should result in a version bump, please add a changeset https://git.io/J6QvQ"

package/.github/workflows/ci.yml

@@ -0,0 +1,31 @@
+name: CI
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  ci:
+    name: CI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Build
+        run: npm run build
+
+      - name: Test
+        run: npm run test

package/.github/workflows/deploy_preview.yml

@@ -0,0 +1,47 @@
+name: Deploy
+on:
+  push:
+    branches-ignore:
+      - 'main'
+
+jobs:
+  deploy-preview:
+    if: ${{ github.repository == 'primer/react' }}
+    name: Preview
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Create GitHub deployment
+        uses: chrnorm/deployment-action@v1.2.0
+        id: deployment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment: Preview
+
+      - name: Deploy with Vercel
+        uses: amondnet/vercel-action@v20
+        id: vercel-action
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
+          github-comment: false
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+
+      - name: Update deployment status (success)
+        if: success()
+        uses: chrnorm/deployment-status@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment_url: ${{ steps.vercel-action.outputs.preview-url }}
+          state: 'success'
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+
+      - name: Update deployment status (failure)
+        if: failure()
+        uses: chrnorm/deployment-status@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          state: 'failure'
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}

package/.github/workflows/deploy_production.yml

@@ -0,0 +1,70 @@
+name: Deploy
+on:
+  push:
+    branches:
+      - 'main'
+jobs:
+  guard:
+    name: Guard
+    runs-on: ubuntu-latest
+    outputs:
+      # To avoid deploying documentation for unrelease changes, we check the number of changeset files.
+      # If it's 0, we deploy.
+      should_deploy: ${{ steps.changeset-count.outputs.change_count == 0 }}
+    steps:
+      - uses: actions/checkout@v2
+
+      - id: changeset-count
+        run: echo "::set-output name=change_count::$(ls .changeset/*.md | grep -v README | wc -l | xargs)"
+        
+      # Log changeset count for debugging purposes
+      - name: Log changeset count
+        run: echo ${{ steps.changeset-count.outputs.change_count }}
+
+  deploy:
+    name: Production
+    needs: [guard]
+    #if: ${{ needs.guard.outputs.should_deploy == true }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      
+      # Log guard output for debugging purposes
+      - name: Log guard output
+        run: echo ${{ needs.guard.outputs.should_deploy }}
+
+      - name: Create GitHub deployment
+        uses: chrnorm/deployment-action@v1.2.0
+        id: deployment
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment: Production
+
+      - name: Deploy with Vercel
+        if: ${{ steps.changeset-count.outputs.CHANGE_COUNT == 0 }}
+        uses: amondnet/vercel-action@v20
+        id: vercel-action
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          vercel-token: ${{ secrets.VERCEL_TOKEN_SHARED }}
+          vercel-args: '--prod'
+          github-comment: false
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID_SHARED }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+
+      - name: Update deployment status (success)
+        if: success()
+        uses: chrnorm/deployment-status@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          environment_url: ${{ steps.vercel-action.outputs.preview-url }}
+          state: 'success'
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}
+
+      - name: Update deployment status (failure)
+        if: failure()
+        uses: chrnorm/deployment-status@v1.0.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          state: 'failure'
+          deployment_id: ${{ steps.deployment.outputs.deployment_id }}

package/.github/workflows/release.yml

@@ -0,0 +1,35 @@
+name: Release
+on:
+  push:
+    branches:
+      - main
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create release pull request or publish to npm
+        id: changesets
+        uses: changesets/action@master
+        with:
+          title: Release Tracking
+          # This expects you to have a script called release which does a build for your packages and calls changeset publish
+          publish: npm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

package/.github/workflows/release_canary.yml

@@ -0,0 +1,70 @@
+name: Release
+on:
+  push:
+    branches-ignore:
+      - 'main'
+      - 'changeset-release/main'
+    # To avoid unnecessary noise, we don't create canary releases when these paths change:
+    paths-ignore:
+      - '.changeset/**'
+      - '.devcontainer/**'
+      - '.github/**'
+      - '.storybook/**'
+      - '.vscode/**'
+      - 'docs/**'
+
+jobs:
+  release-canary:
+    name: Canary
+    if: ${{ github.repository == 'primer/react' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+
+      - name: Publish canary version
+        run: |
+          echo "$( jq '.version = "0.0.0"' package.json )" > package.json
+          echo -e "---\n'@primer/components': patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
+          yarn changeset version --snapshot
+          yarn changeset publish --tag canary
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Output canary version number
+        uses: actions/github-script@v4.0.2
+        with:
+          script: |
+            const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
+            github.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: context.sha,
+              state: 'success',
+              context: `Published ${package.name}`,
+              description: package.version,
+              target_url: `https://unpkg.com/${package.name}@${package.version}/`
+            })

package/.github/workflows/release_candidate.yml

@@ -0,0 +1,60 @@
+name: Release
+on:
+  push:
+    branches:
+      - 'changeset-release/main'
+
+jobs:
+  release-candidate:
+    name: Candidate
+    if: ${{ github.repository == 'primer/react' }}
+
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14.x
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Create .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
+
+      - name: Publish release candidate
+        run: |
+          version=$(jq -r .version package.json)
+          echo "$( jq ".version = \"$(echo $version)-rc.$(git rev-parse --short HEAD)\"" package.json )" > package.json
+          yarn publish --tag next
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Output release candidate version number
+        uses: actions/github-script@v4.0.2
+        with:
+          script: |
+            const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
+            github.repos.createCommitStatus({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              sha: context.sha,
+              state: 'success',
+              context: `Published ${package.name}`,
+              description: package.version,
+              target_url: `https://unpkg.com/${package.name}@${package.version}/`
+            })

package/.github/workflows/size.yml

@@ -0,0 +1,13 @@
+name: Size
+on: [pull_request]
+jobs:
+  size:
+    name: Size
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+    steps:
+      - uses: actions/checkout@v1
+      - uses: andresz1/size-limit-action@v1
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}

package/.github/workflows/stale.yml

@@ -0,0 +1,26 @@
+name: Stale
+on:
+  schedule:
+    - cron: '0 * * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v4
+        with:
+          
+          # General settings
+          days-before-stale: 60
+          days-before-close: 7
+          enable-statistics: true
+          operations-per-run: 100
+          remove-stale-when-updated: true
+          
+          # PR specific settings
+          delete-branch: true
+          stale-pr-message: "Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days."
+          
+          # Issue specific settings
+          days-before-issue-stale: 180
+          stale-issue-message: "Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days."

package/.gitignore

@@ -0,0 +1,10 @@
+.test
+node_modules
+.DS_Store
+.idea
+coverage/
+dist/
+lib/
+lib-esm/
+public/
+stats.html