chore: update from yarn to npm (#1641)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jonathan Zempel <[email protected]>

.circleci/config.yml

@@ -25,19 +25,17 @@ jobs:
     steps:
       - checkout
       - node/install-packages:
-          pkg-manager: yarn
-          override-ci-command: yarn --frozen-lockfile --ignore-scripts
           cache-version: '{{ .Environment.CACHE_VERSION }}'
-      - run: yarn lerna bootstrap
-      - run: yarn lerna run build --concurrency=2 # prevent out-of-memory
+      - run: npm exec -- lerna bootstrap
+      - run: npm exec -- lerna run build --concurrency=1 # prevent out-of-memory
       - *persist_to_workspace
 
   test:
     <<: *executor
     steps:
       - *attach_workspace
-      - run: yarn test:ci --runInBand
-      - run: '[ $COVERALLS_REPO_TOKEN ] && yarn coveralls < .cache/coverage/lcov.info || true'
+      - run: npm run test:ci -- --runInBand
+      - run: '[ $COVERALLS_REPO_TOKEN ] && npm exec -- coveralls < .cache/coverage/lcov.info || true'
       - *persist_to_workspace
 
   deploy:
@@ -46,15 +44,15 @@ jobs:
       NODE_DEBUG: gh-pages
     steps:
       - *attach_workspace
-      - run: yarn build:demo
+      - run: npm run build:demo
       - run: utils/scripts/deploy.mjs
 
   publish:
     <<: *executor
     steps:
       - *attach_workspace
       - run: npm set //registry.npmjs.org/:_authToken=$NPM_TOKEN
-      - run: yarn lerna publish from-git --ignore-scripts --no-verify-access --yes
+      - run: npm exec -- lerna publish from-git --ignore-scripts --no-verify-access --yes
 
 workflows:
   main:

.github/CONTRIBUTING.md

@@ -20,7 +20,7 @@ includes:
 - `└── packages/` – the folder that contains individual `@zendeskgarden`
   packages which are published to the registry.<br>
   &nbsp;&nbsp;&nbsp;&nbsp;`├── .template/` – a special template package
-  referenced by `yarn new` to generate a component.<br>
+  referenced by `npm run new` to generate a component.<br>
   &nbsp;&nbsp;&nbsp;&nbsp;`├── buttons/`<br>
   &nbsp;&nbsp;&nbsp;&nbsp;`├── tabs/`<br>
   &nbsp;&nbsp;&nbsp;&nbsp;`├── theming/`<br>
@@ -43,25 +43,25 @@ merged.
 
 ## Development Workflow
 
-Before you start, be sure [yarn](https://yarnpkg.com/en/) is installed
-on your system. After you clone this repo, run `yarn` to install
+Before you start, be sure [npm](https://www.npmjs.com/package/npm) is installed
+on your system. After you clone this repo, run `npm install` to install
 dependencies needed for development. After installation, the following
 commands are available:
 
-- `yarn start` to launch Storybook with live reload.
-- `yarn test` to run Jest testing.
-- `yarn lint` to enforce consistent JavaScript, CSS, and
+- `npm start` to launch Storybook with live reload.
+- `npm test` to run Jest testing.
+- `npm run lint` to enforce consistent JavaScript, CSS, and
   markdown code conventions across all component packages. Note this is
   run as a git `pre-commit` hook.
-- `yarn format` to enforce code style with opinionated
+- `npm run format` to enforce code style with opinionated
   formats across all component packages. Note this is run as a git
   `pre-commit` hook.
-- `yarn build` to rebuild distributions across all packages.
+- `npm run build` to rebuild distributions across all packages.
   The build runs as part of the initial install. Operates as a facade
   over a Lerna command; operation may be modified using option
   [flags](https://github.com/lerna/lerna#flags) (i.e. `scope`, `since`,
   or `ignore`).
-- `yarn new` to generate a new React component based on a package
+- `npm run new` to generate a new React component based on a package
   template.
 
 See Garden's [development documentation](/docs/development.md) for package

.github/PULL_REQUEST_TEMPLATE.md

@@ -23,9 +23,9 @@
      strikethrough any item text that does not apply to this PR. -->
 
 - [ ] :ok_hand: design updates will be Garden Designer approved (add the designer as a reviewer)
-- [ ] :globe_with_meridians: demo is up-to-date (`yarn start`)
+- [ ] :globe_with_meridians: demo is up-to-date (`npm start`)
 - [ ] :arrow_left: renders as expected with reversed (RTL) direction
 - [ ] :metal: renders as expected with Bedrock CSS (`?bedrock`)
-- [ ] :guardsman: includes new unit tests. Maintain [existing coverage](https://coveralls.io/github/zendeskgarden/react-components?branch=main) (always >= 96%)
-- [ ] :wheelchair: tested for [WCAG 2.1 AA](https://www.w3.org/WAI/WCAG21/quickref/?currentsidebar=%23col_customize&levels=aaa) accessibility compliance
+- [ ] :guardsman: includes new unit tests. Maintain existing coverage (always >= 96%)
+- [ ] :wheelchair: tested for WCAG 2.1 AA accessibility compliance
 - [ ] :memo: tested in Chrome, Firefox, Safari, and Edge

.github/renovate.json

@@ -4,7 +4,7 @@
   "ignorePaths": ["**/node_modules/**"],
   "schedule": ["on Monday every 9 weeks of the year starting on the 5th week"],
   "labels": ["PR: Internal :seedling:"],
-  "postUpdateOptions": ["yarnDedupeHighest"],
+  "postUpdateOptions": ["npmDedupe"],
   "packageRules": [
     {
       "matchFiles": ["package.json"],

.gitignore

@@ -1,15 +1,10 @@
-# General ignores
-node_modules
-*.log
+.cache
 .changelog
-.vscode
-.netlify
 .env
-.cache
-
-# Package specific
-packages/**/dist
-package-lock.json
-
-# Demo specific
+.netlify
+.vscode
+node_modules
+yarn.lock
+*.log
 demo/**/*
+packages/**/dist

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged && yarn build --since HEAD --exclude-dependents && git add packages/**/.size-snapshot.json
+npm exec lint-staged && npm run build -- --since HEAD --exclude-dependents && git add packages/**/.size-snapshot.json

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

docs/api.md

@@ -4,7 +4,7 @@ The API for Garden components is based on a Container-View-Element
 architecture. This architecture provides a separation of concerns, advancing
 [development](development.md) with an approach that is repeatable,
 consistent, and reliable. The component parts of the architecture are explained
-in more detail below. Use the `yarn new`
+in more detail below. Use the `npm run new`
 [command](development.md#package-creation) to generate starter code that
 satisfies API rules for Garden components.
 

docs/demo.md

@@ -1,7 +1,7 @@
 # Garden demos
 
 Garden leverages [Storybook](https://storybook.js.org/) for generating component
-demos with story controls. Run `yarn start` to build and serve package demos in
+demos with story controls. Run `npm start` to build and serve package demos in
 development mode (with hot reloading).
 
 The development goal for demos is to render components in isolation with the
@@ -42,8 +42,8 @@ The following list of dos and don'ts outline demo code expectations.
 ## Conventions
 
 Stick to the following conventions for authoring demo stories that are
-consistent with the existing codebase. You may find that running `yarn new` is
-helpful for auto-generating component demo scaffolding.
+consistent with the existing codebase. You may find that running `npm run new`
+is helpful for auto-generating component demo scaffolding.
 
 ### Structure
 

docs/development.md

@@ -8,10 +8,10 @@ along with versioning, development, and PR workflows.
 ## Package creation
 
 One of the best ways to get familiar with Garden's package structure is to
-create your own. Garden makes this simple by providing a `yarn new` command.
+create your own. Garden makes this simple by providing a `npm run new` command.
 This command will prompt you to enter a name (e.g. `test`). The new package
 will be generated under `/packages` and you can view the results by running
-the `yarn start` command (e.g. `yarn start --scope @zendeskgarden/react-test`).
+the `npm start` command.
 
 Unless you are a member of the core team, it is unlikely that we'll accept
 brand new package PRs. However, a new package provides the simplified sandbox
@@ -44,7 +44,7 @@ architecture, along with rules that apply to each component type. See Garden's
 ## Package demos
 
 Package demo code is generated via [Storybook](https://storybook.js.org/). Run
-`yarn start` to build and serve package documentation in development mode (with
+`npm start` to build and serve package documentation in development mode (with
 hot reloading). See [demo documentation](/docs/demo.md) for development
 information.
 
@@ -99,4 +99,5 @@ Garden packages are built using [Rollup](https://rollupjs.org/). Package distrib
 - ES module bundle (the package `module` entry)
 - type definitions
 
-Run a full repo build using `yarn build` or a package-scoped build with `yarn build --scope @zendeskgarden/react-[package]`.
+Run a full repo build using `npm run build` or a package-scoped build with
+`npm run build -- --scope @zendeskgarden/react-[package]`.

lerna.json

@@ -1,7 +1,5 @@
 {
   "version": "8.73.0",
-  "npmClient": "yarn",
-  "npmClientArgs": ["--frozen-lockfile"],
   "useNx": false,
   "changelog": {
     "repo": "zendeskgarden/react-components",