UX-789 Replace Lerna with Changesets & NPM Workspaces (#1088)

* chore: uninstall lerna, temporarily remove all eslint deps

* chore: Add workspaces to package

* fix: CSS build

* fix: builds

* fix: resolve icons src types not dist

* chore: update libby to latest

* chore: update gh workflows

* fix: downgrade to react 17 for enzyme

* fix: temporary react-18 bridge

* chore: Add linting, Revert react-18 bridge

* chore: Remove unused packages

* chore: Update libby

* chore: remove stylelint, add changesets

* docs: update readme

* docs: update readme

* chore: revert react 18 in next template

* docs: update readme & pr template

* build: add turbo

* chore: hide vscode directories

* docs: add changeset

* build: update linting rules

* chore: package-lock update

* chore(deps): update libby with hmr fix

.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/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/warm-dolphins-protect.md

@@ -0,0 +1,7 @@
+---
+'@sparkpost/matchbox': patch
+'@sparkpost/matchbox-icons': patch
+---
+
+- Adds support for React 18
+- Updates a few util function types

.eslintignore

@@ -5,3 +5,6 @@ packages/matchbox-icons/*
 !packages/matchbox-icons/src
 
 packages/next-template-matchbox/*
+
+**/*.test.js
+**/dist/**

.eslintrc.json

@@ -0,0 +1,32 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "rules": {
+    "react/prop-types": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }],
+    "@typescript-eslint/ban-ts-comment": 0
+  },
+  "ignorePatterns": ["**/scripts/*", "**/design-tokens/*.js"]
+}

.github/pull_request_template.md

@@ -1,21 +1,16 @@
-<!-- Give your PR a recognizable title. For example: "FE-123: Add new prop to component" or "Resolve Issue #123: Fix bug in component" -->
-<!-- Your PR title will be visible in changelogs -->
-
 ### What Changed
 
-<!--
-What changes does this PR propose?
-Provide screenshots or [screen recordings](https://getkap.co/) for any visual changes.
--->
+<!-- What changes does this PR propose? -->
 
-### How To Test or Verify
+### How To Verify
 
 <!--
 Describe any steps that may help reviewers verify changes.
 Anything beyond basic unit testing, such as assistive tech usage, or special interactions.
 -->
 
-### PR Checklist
+#### If your PR contains package changes:
 
-- [ ] Add the correct `type` label
-- [ ] Pull request approval from #uxfe or #design-guild
+1. Create a changeset with `npx changeset`
+1. Ensure the changeset in the `.changeset` directory includes a descriptive summary
+1. Commit the changeset to your pull request

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/e2e.yml

@@ -13,16 +13,16 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+      - name: Install
+        run: npm ci
       - name: Prepare tests
         run: npm run pretest:ci
       - name: E2E tests

.github/workflows/libby.yml

@@ -13,7 +13,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2

.github/workflows/regression.yml

@@ -12,16 +12,16 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+      - name: Install
+        run: npm ci
       - name: Prepare tests
         run: npm run pretest:ci
       - name: Visual Regression tests

.github/workflows/unit.yml

@@ -13,16 +13,16 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x]
+        node-version: [16.x]
 
     steps:
       - uses: actions/checkout@v2
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v1
         with:
           node-version: ${{ matrix.node-version }}
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
+      - name: Install
+        run: npm ci
       - name: Prepare tests
         run: npm run pretest:ci
       - name: Unit tests

.gitignore

@@ -30,4 +30,5 @@ storybook-static
 .changelog
 .temp_changes.md
 
-dist
+dist
+.turbo

.vscode/settings.json

@@ -1,4 +1,11 @@
 {
+  "files.exclude": {
+    "**/.git": true,
+    "**/.DS_Store": true,
+    "**/dist": true,
+    "**/node_modules": true,
+    "**/.turbo": true
+  },
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
 }

README.md

@@ -1,11 +1,8 @@
 # Matchbox
 
-Matchbox is an open source design system and React component library, built for
-[SparkPost's UI](https://github.com/SparkPost/2web2ui).
+Matchbox is an open source design system and React component library, built for [SparkPost's UI](https://github.com/SparkPost/2web2ui).
 
-![Build](https://img.shields.io/github/workflow/status/SparkPost/matchbox/Build?label=Build&style=flat-square)
-![Tests](https://img.shields.io/github/workflow/status/SparkPost/matchbox/Unit%20and%20Cypress%20Tests?label=Tests&style=flat-square)
-![Codecov](https://img.shields.io/codecov/c/gh/SparkPost/matchbox?label=Coverage&style=flat-square)
+![Build](https://img.shields.io/github/workflow/status/SparkPost/matchbox/Build?label=Build&style=flat-square) ![Tests](https://img.shields.io/github/workflow/status/SparkPost/matchbox/Unit%20and%20Cypress%20Tests?label=Tests&style=flat-square)
 
 ---
 
@@ -19,20 +16,6 @@ Looking for documentation? See:
 
 - [Design System Website](https://design.sparkpost.com)
 
-### Collaborating on Matchbox
-
-Matchbox uses [Lerna](https://github.com/lerna/lerna) to manage packages.
-
-First install `lerna` globally, then run the following commands to get started:
-
-```bash
-npm i -g lerna
-git clone [email protected]:SparkPost/matchbox.git
-cd matchbox
-npm i
-lerna bootstrap
-```
-
 ### Root Repo Scripts
 
 ```bash
@@ -52,37 +35,14 @@ npm run build             # Builds all packages
 
 ### Releases
 
-Our release process isn't perfect, and requires some manual work.
-
-We use `lerna` to handle versioning and publishing to NPM. Before publishing, ensure you are logged
-into SparkPost's NPM account locally via the NPM CLI. Reach out to #UXFE or #design-guild on Slack
-if you need access.
+We use `changesets` to handle versioning and publishing to NPM. Before publishing, ensure you are logged into SparkPost's NPM account locally via the NPM CLI. We recommend reviewing the following steps and [changeset's documentation](https://github.com/changesets/changesets/blob/main/docs/intro-to-using-changesets.md) before proceeding.
 
 **Publishing Steps**
 
-1. Merge all pull requests you wish to release to `main`.
-1. Before publishing for the first time, set up your github auth token in `.env`. In order to run
-   `changelog` you'll need to create a personal access token with the `public_repo` permissions and
-   copy it to a `GITHUB_AUTH` variable in an `.env` file.
-1. On the `main` branch, run `npm run changelog`. This generates a markdown changelog in
-   `CHANGELOG.md`.
-1. Open and edit `CHANGELOG.md` with correct title and version number of your release.
-1. Push these changes to `main` if you have permissions, or on a new branch.
-1. Run `lerna version --force-publish`. The Lerna CLI will prompt you for version numbers. The
-   `force-publish` flag will force all packages to be bumped to the same version. See
-   https://github.com/lerna/lerna/tree/master/commands/version.
-1. Run `lerna publish from-package`. The Lerna CLI will prompt you for a one time password from your
-   authenticator. See https://github.com/lerna/lerna/tree/master/commands/publish.
-
-**What the commands look like:**
-
-```bash
-npm run changelog
-# Open the changelog file and edit
-git add CHANGELOG.md
-git commit -m "Update CHANGELOG.md"
-git push
-lerna version --force-publish
-lerna publish from-package
-# That's it!
-```
+1. Run `npx changset` in your pull request. This will let you select which packages you'd like to include and to which version. Hint: use `space` to select options, and `enter` to proceed. Don't worry about the summary, this is editable later on.
+1. Ensure the changeset you just created has an accurate summary, located in the `.changeset` directory.
+1. Commit your changset to your pull request. The remaining steps should be taken after merging to `main`.
+1. Run `npx changeset version`. This will consume any changesets previously created, bump the packages, and update changelogs.
+1. Run `npm run build` to build all packages.
+1. Run `npx changeset publish`. This will publish all bumped packages to NPM. You will be required to enter your NPM OTP.
+1. Lastly, double check the git tags were pushed to this repo in the releases section. If not, push the tags manually.