Npm migration (#201)

* use package-lock

* Migrate tooling to use npm

* Fix some commands to use npx; add changelog

.changeset/three-pots-brush.md

@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen-react': patch
+---
+
+(Internal) Migrate from `yarn` to `npm`

.github/PULL_REQUEST_TEMPLATE.md

@@ -14,5 +14,5 @@
 
 - [ ] Read the [Contributing Guidelines](https://github.com/Shopify/hydrogen-react/blob/main/CONTRIBUTING.md)
 - [ ] Provide a description in this PR that addresses **what** the PR is solving, or reference the issue that it solves (e.g. `fixes #123`)
-- [ ] Update docs in this repository according to your change, and run `yarn build-docs` in the `packages/react` folder.
-- [ ] Run `yarn changeset add` if this PR cause a version bump based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/). If you have a breaking change, it will need to wait until the next major version release. Otherwise, use patch updates even for new features. Read [more about Hydrogen React's versioning](https://github.com/shopify/hydrogen-react/blob/main/readme.md#versioning).
+- [ ] Update docs in this repository according to your change, and run `npm run build-docs` in the `packages/react` folder.
+- [ ] Run `npx changeset add` if this PR cause a version bump based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/). If you have a breaking change, it will need to wait until the next major version release. Otherwise, use patch updates even for new features. Read [more about Hydrogen React's versioning](https://github.com/shopify/hydrogen-react/blob/main/readme.md#versioning).

.github/workflows/changesets_reminder.yml

@@ -16,5 +16,5 @@ jobs:
           changelogRegex: "\\.changeset"
           message: |
             We detected some changes in `packages/*/package.json` or `packages/*/src`, and there are no updates in the `.changeset`.
-            If the changes are user-facing and should cause a version bump, run `yarn changeset add` to track your changes and include them in the next release CHANGELOG.
+            If the changes are user-facing and should cause a version bump, run `npx changeset add` to track your changes and include them in the next release CHANGELOG.
             If you are making simple updates to examples or documentation, you do not need to add a changeset. Please also read how [Hydrogen React does versioning](https://github.com/shopify/hydrogen-react/blob/main/readme.md#versioning).

.github/workflows/releases.yml

@@ -31,17 +31,17 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: Install the packages
-        run: yarn install --frozen-lockfile --ignore-engines
+        run: npm ci
 
       - name: (latest) Create Release Pull Request or Publish
         if: env.latest == 'true'
         id: changesets
         uses: changesets/action@v1
         with:
-          publish: yarn changeset publish
+          publish: npx changeset publish
           commit: '[ci] release ${{ github.ref_name }}'
           title: '[ci] release ${{ github.ref_name }}'
         env:
@@ -53,7 +53,7 @@ jobs:
         id: changesets_legacy
         uses: changesets/action@v1
         with:
-          publish: yarn changeset publish --tag legacy
+          publish: npx changeset publish --tag legacy
           commit: '[ci] release ${{ github.ref_name }}'
           title: '[ci] release ${{ github.ref_name }}'
         env:

.github/workflows/test_and_lint.yml

@@ -34,13 +34,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'yarn'
+          cache: 'npm'
 
       - name: Install the packages
-        run: yarn install --frozen-lockfile
+        run: npm ci
 
       - name: Run CI checks
-        run: yarn ci:checks
+        run: npm run ci:checks
 
       - name: Build the code
-        run: yarn build
+        run: npm run build

CONTRIBUTING.md

@@ -3,10 +3,10 @@
 There are two ways you can develop Hydrogen React components:
 
 - Develop components in isolation (faster & easier):
-  1. Run `yarn dev:story` in the `packages/react` directory to spin up an instance of [Ladle](https://ladle.dev/)
+  1. Run `npm run dev:story` in the `packages/react` directory to spin up an instance of [Ladle](https://ladle.dev/)
   2. Edit the component or the component's story `[ComponentName].stories.tsx`
 - Develop components in a demo app (good for testing out the ecosystem support)
-  1. Run `yarn dev`
+  1. Run `npm run dev`
 
 ## Authoring Components
 
@@ -46,7 +46,7 @@ Documentation lives in the `*.doc.ts` files, and uses a Shopify library called `
 After adding or updating docs, you'll need to:
 
 1. `cd` into `packages/react` folder
-1. Run `yarn build-docs`
+1. Run `npm run build-docs`
 
 Which will update the generated output, and then will be picked up by the Shopify website on a regular cadence.
 
@@ -56,7 +56,7 @@ For most contributions, this should be enough information to work off of. Howeve
 
 ## Running CI Checks Locally
 
-Every PR must pass certain CI checks in order to be merged; you can run these checks locally yourself by running `yarn ci:checks` from the root of the repo.
+Every PR must pass certain CI checks in order to be merged; you can run these checks locally yourself by running `npm run ci:checks` from the root of the repo.
 
 ## Package Exports Notes: