Adding changesets workflow

.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/main/docs/common-questions.md)

.changeset/config.json

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

.changeset/metal-keys-invite.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Adding changesets workflow to the repository for managing releases.

.github/workflows/release.yml

@@ -0,0 +1,49 @@
+name: Release
+on:
+  push:
+    branches:
+      - 'main'
+jobs:
+  release:
+    name: Final
+    if: ${{ github.repository == 'primer/view_components' }}
+
+    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: 16.x
+
+      - name: Setup Ruby
+        uses: actions/setup-ruby@v1
+        with:
+          ruby-version: 3.0.x
+
+      - name: Install dependencies
+        run: |
+          yarn
+
+      - name: Create release pull request or publish to npm
+        id: changesets
+        uses: changesets/action@master
+        with:
+          title: Release Tracking
+          version: yarn changeset:version
+          publish: |
+            # Get the current version
+            PACKAGE_VERSION=$(jq '.version' --raw-output ./package.json)
+
+            # Check if the remote has the current version as a git tag
+            # If it doesn't, we echo "New tag:" which is what the changeset action expects https://github.com/changesets/action/blob/b98cec97583b917ff1dc6179dd4d230d3e439894/src/run.ts#L123
+            git ls-remote --exit-code --tags origin "v$PACKAGE_VERSION" || echo "New tag:"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}
+          NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

CHANGELOG.md

@@ -1,35 +1,5 @@
 # CHANGELOG
 
-<!--
-Authoring changelog entries
-
-This file holds all the changes made in previous versions of Primer View Components and the ones coming to the next version.
-To add yours, you need to find in which category to write it under the `main` section. `Main` is the first section on top of the document.
-There are six categories currently in use, `New`, `Updates`, `Bug fixes`, `Breaking changes`, `Deprecations` and `Misc`.
-
-- New
-Category for new components, system behaviours, options and arguments changes
-
-- Updates
-Every non-breaking change to the source code go there.
-
-- Bug Fixes
-Non-breaking bug fixes to existing code.
-
-- Breaking Changes
-The category for changes creating incompatibilities to code written with previous versions.
-It includes any changes to components name, signature and behaviour. Also, include removing tags options or changing file location.
-If you are not sure you made breaking changes, ask us in your pull request.
-
-- Deprecations
-For changes that explicitly deprecate part of the code base.
-
-- Misc
-The category for changes related to documentation, testing and tooling. Also, for pull requests that can't fit in other sections.
--->
-
-## main
-
 ## 0.0.73
 
 ### Bug

app/components/primer/alpha/tool-tip-element.ts

@@ -1,3 +1,4 @@
+// eslint-disable-next-line prettier/prettier
 import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
 import {getAnchoredPosition} from '@primer/behaviors'
 
@@ -42,7 +43,7 @@ class ToolTipElement extends HTMLElement {
         white-space: normal;
         width: max-content;
       }
-      
+
       :host:before{
         position: absolute;
         z-index: 1000001;
@@ -51,7 +52,7 @@ class ToolTipElement extends HTMLElement {
         border: 6px solid transparent;
         opacity: 0
       }
-      
+
       @keyframes tooltip-appear {
         from {
           opacity: 0
@@ -60,7 +61,7 @@ class ToolTipElement extends HTMLElement {
           opacity: 1
         }
       }
-      
+
       :host:after{
         position: absolute;
         display: block;
@@ -69,7 +70,7 @@ class ToolTipElement extends HTMLElement {
         height: 12px;
         content: ""
       }
-      
+
       :host(.${TOOLTIP_OPEN_CLASS}),
       :host(.${TOOLTIP_OPEN_CLASS}):before {
         animation-name: tooltip-appear;
@@ -78,7 +79,7 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
         animation-delay: .4s
       }
-      
+
       :host(.tooltip-s):before,
       :host(.tooltip-n):before {
         right: 50%;
@@ -91,46 +92,46 @@ class ToolTipElement extends HTMLElement {
         bottom: 100%;
         border-bottom-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-s):after,
       :host(.tooltip-se):after,
       :host(.tooltip-sw):after {
         bottom: 100%
       }
-      
+
       :host(.tooltip-n):before,
       :host(.tooltip-ne):before,
       :host(.tooltip-nw):before {
         top: 100%;
         border-top-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-n):after,
       :host(.tooltip-ne):after,
       :host(.tooltip-nw):after {
         top: 100%
       }
-      
+
       :host(.tooltip-se):before,
       :host(.tooltip-ne):before {
         left: 0;
         margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-      
+
       :host(.tooltip-sw):before,
       :host(.tooltip-nw):before {
         right: 0;
         margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
       }
-      
+
       :host(.tooltip-w):before {
         top: 50%;
         bottom: 50%;
         left: 100%;
         margin-top: -6px;
         border-left-color: var(--color-neutral-emphasis-plus)
       }
-      
+
       :host(.tooltip-e):before {
         top: 50%;
         right: 100%;

app/components/primer/clipboard_copy_component.ts

@@ -32,7 +32,7 @@ function showCheck(button: HTMLElement) {
 
 const clipboardCopyElementTimers = new WeakMap<HTMLElement, number>()
 
-document.addEventListener('clipboard-copy', function ({target}) {
+document.addEventListener('clipboard-copy', function({target}) {
   if (!(target instanceof HTMLElement)) return
   if (!target.hasAttribute('data-view-component')) return
 

contributor-docs/releasing.md

@@ -20,11 +20,21 @@ For [npm](https://www.npmjs.com/) create an account with your personal email and
 
 ### Preparing a release
 
-Run `script/release` to prepare a release. This will check you're on the latest version of the `main` branch, bump the gem and npm package versions, tag the Changelog, and open a pull request with the changes. Even if no changes have been made to the JavaScript package we make a release anyway so the version numbers are always in sync. Once the tests have passed you can merge this pull request.
+Releases are managed by 🦋 [Changesets](https://github.com/atlassian/changesets#documentation) which is a great tool for managing major/minor/patch bumps and changelogs. More info can be found in our [how we work docs](https://github.com/github/design-infrastructure/blob/main/how-we-work/engineering/changesets.md#using-changesets-to-prepare-and-publish-a-release).
+
+We have the [changeset-bot comment on new pull requests](https://github.com/changesets/bot#readme) asking contributors or maintainers to add a changeset file, which will become the markdown supported changelog entry for the change.
+
+When creating the changeset always commit into the working branch (pull request branch), not `main`.
+
+When a pull request is approved merge it into the `main` branch. The changeset action will then create a Release pull request that includes this new pull request.
+
+Once maintainers have agreed and are satisfied with the release. Merge the Release pull request. Changesets will then publish a new GitHub release to the repository with the changelog and new version number.
 
 ### Publishing a release
 
-When the release pull request is merged into `main`, pull the changes and run `script/publish` to publish the library on rubygems and npm. This will also open a pre-filled release on GitHub, if you’re happy with the release notes hit ‘Publish’.
+When the release pull request is merged into `main`, pull the changes and run `script/publish` to publish the library on rubygems and npm.
+
+🎉 Congratulations! The new release has been published.
 
 ## Revert plan
 

docs/content/contributing.md

@@ -139,7 +139,4 @@ The Rails storybook is currently deployed via GitHub Actions using [this workflo
 To publish a release, you must have an account on [rubygems](https://rubygems.org/) and [npmjs](https://www.npmjs.com/). Additionally, you must have been added as a maintainer
 to the project. Please verify that you have 2FA enabled on both accounts.
 
-1. Make sure you are on the main branch and have pulled in the latest changes.
-1. Run `script/release` and follow the instructions.
-1. Once your release PR has been approved and merged, run `script/publish`. You may be prompted to log into your rubygem and npm account.
-1. Lastly, draft a new release from the [releases page](https://github.com/primer/view_components/releases). The tag version should be updated to the newest version. The description should be updated to the relevant CHANGELOG descriptions. Press the `Publish release` button and you're good to go!
+1. Once the changesets release PR has been approved and merged, run `script/publish`. This will build and publish the packages. You may be prompted to log into your rubygem and npm account.

package.json

@@ -28,7 +28,8 @@
     "build:docs:preview": "cd docs && yarn gatsby build",
     "prepare": "tsc && rollup -c",
     "lint": "eslint 'app/components/**/*.ts' demo/.storybook",
-    "lint:fix": "eslint 'app/components/**/*.ts' demo/.storybook --fix"
+    "lint:fix": "eslint 'app/components/**/*.ts' demo/.storybook --fix",
+    "changeset:version": "changeset version && script/version"
   },
   "dependencies": {
     "@github/auto-complete-element": "^3.1.0",
@@ -40,6 +41,8 @@
     "@primer/behaviors": "^1.1.2"
   },
   "devDependencies": {
+    "@changesets/changelog-github": "^0.4.4",
+    "@changesets/cli": "^2.22.0",
     "@github/prettier-config": "0.0.4",
     "@primer/css": "^20.0.0",
     "@primer/primitives": "^7.1.0",

script/publish

@@ -4,7 +4,7 @@
 require "thor"
 require_relative "../lib/primer/view_components/version"
 
-# Publishes `primer_view_components` gem and npm package, and creates a new GitHub release.
+# Publishes `primer_view_components` gem and npm package.
 #
 # Usage:
 #
@@ -16,35 +16,13 @@ class PublishCLI < Thor::Group
     false
   end
 
-  def tools_are_installed
-    raise "The gh CLI tool couldn't be found on your PATH. Please install it and run `gh auth login` before continuing." unless run("which gh")
-  end
-
   def release_gem
     run("bundle exec rake release")
   end
 
   def release_npm
     run("npm publish --access public")
   end
-
-  def github_release
-    run("gh release create v#{version} -n '#{release_notes}'")
-  end
-
-  private
-
-  def release_notes
-    changelog.gsub(/.*## #{version}/m, "").gsub(/^## .*/m, "").strip
-  end
-
-  def version
-    Primer::ViewComponents::VERSION::STRING
-  end
-
-  def changelog
-    File.read("CHANGELOG.md")
-  end
 end
 
 PublishCLI.start(ARGV)