chore(deps): migrate from yarn to npm (#2388)

1. Removed `yarn.lock`.
2. Ran `npm install`.
3. Replaced yarn commands in docs, scripts and workflows.

Co-authored-by: Nick Schonning <[email protected]>

.github/workflows/main.yml

@@ -14,23 +14,23 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'yarn'
+          cache: npm
 
-      - name: Install all yarn packages
-        run: yarn --frozen-lockfile
+      - name: Install all npm packages
+        run: npm ci
 
       - name: Lint JS code
-        run: yarn lint:js
+        run: npm run lint:js
 
       - name: Lint CSS code
-        run: yarn lint:css
+        run: npm run lint:css
 
       - name: Build all
-        run: yarn build
+        run: npm run build
 
       - name: Start server
         run: |
-          yarn start-server > /tmp/stdout.log 2> /tmp/stderr.log &
+          npm run start-server > /tmp/stdout.log 2> /tmp/stderr.log &
 
           sleep 3
           curl --retry-connrefused --retry 5 http://localhost:9090 > /dev/null

.github/workflows/prod-deploy.yml

@@ -23,13 +23,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'yarn'
+          cache: npm
 
-      - name: Install all yarn packages
-        run: yarn --frozen-lockfile
+      - name: Install all npm packages
+        run: npm ci
 
       - name: Build all
-        run: yarn build
+        run: npm run build
 
       - name: Deploy pages
         run: |

.github/workflows/publish-release.yml

@@ -27,15 +27,15 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: 'yarn'
+          cache: npm
 
-      - name: Install all yarn packages
+      - name: Install all npm packages
         if: needs.publish-release.outputs.release_created
-        run: yarn --frozen-lockfile
+        run: npm ci
 
       - name: Build all
         if: needs.publish-release.outputs.release_created
-        run: yarn build
+        run: npm run build
 
       - name: Deploy pages
         if: needs.publish-release.outputs.release_created

.github/workflows/stage-deploy.yml

@@ -23,13 +23,13 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: yarn
+          cache: npm
 
-      - name: Install all yarn packages
-        run: yarn --frozen-lockfile
+      - name: Install all npm packages
+        run: npm ci
 
       - name: Build all
-        run: yarn build
+        run: npm run build
 
       - name: Configure AWS credentials for stage
         uses: aws-actions/configure-aws-credentials@v1

CONTRIBUTING-HTML.md

@@ -154,7 +154,7 @@ Sometimes formal and content guidelines are at odds. For example, sometimes writ
 
 ### Formal guidelines
 
-In general: try out your example using `yarn start` and see what it looks like with a browser window width of 1000px.
+In general: try out your example using `npm start` and see what it looks like with a browser window width of 1000px.
 
 - Can the user see the whole example source without having to scroll?
 
@@ -238,7 +238,7 @@ For example, here's an example for the `<button>` element:
 
 This includes 5 different button elements. It's too long. The example should include a single element with some common attributes.
 
-Try out your example with `yarn start`. Can you immediately see the point of the example, or is the element buried in a wall of source?
+Try out your example with `npm start`. Can you immediately see the point of the example, or is the element buried in a wall of source?
 
 #### Use good practices
 

CONTRIBUTING.md

@@ -33,7 +33,7 @@ Next up, you need to fork and clone the repo to be able to contribute to it. You
 Finally, change into the new directory created by the clone and run the following command:
 
 ```bash
-yarn install
+npm install
 ```
 
 This will ensure that you have all the required development modules installed to build and test your contributions. You are now ready to contribute.
@@ -51,13 +51,13 @@ Once you've written an example you can run a local server to try it out.
 From your command line run:
 
 ```bash
-yarn run build
+npm run build
 ```
 
 Once this completes run:
 
 ```bash
-yarn start
+npm start
 ```
 
 This should give you some output including lines like:
@@ -80,7 +80,7 @@ Find your example and try it out.
 > **Note** On Linux, you might also run the automatic tests used by our continuous integration system.
 >
 > ```bash
-> yarn test
+> npm test
 > ```
 
 Once you're satisfied, the final step is to [submit your pull request](https://help.github.com/articles/creating-a-pull-request/).

CSS-Example-Style-Guide.md

@@ -75,7 +75,7 @@ Sometimes you'll want to include images with the example. If you do:
 
 ## Output width considerations
 
-On MDN pages the editor is laid out "side by side": that is with the example choices on the left and the output on the right, as it is in the local server that's started by `yarn start`. Then if the page width goes below some threshold it switches to "top and bottom", with the example choices above and the output below.
+On MDN pages the editor is laid out "side by side": that is with the example choices on the left and the output on the right, as it is in the local server that's started by `npm start`. Then if the page width goes below some threshold it switches to "top and bottom", with the example choices above and the output below.
 
 This means that ideally, the example should still work with an editor width of about 740 pixels:
 
@@ -90,11 +90,11 @@ The interactive-examples project follows the same guidelines with regards to CSS
 You can validate your example anytime by running the following npm script:
 
 ```sh
-yarn run lint:css
+npm run lint:css
 ```
 
 We've also provided the following command:
 
 ```sh
-yarn run fix:css
+npm run fix:css
 ```

JS-Example-Style-Guide.md

@@ -149,13 +149,13 @@ For example, in the comparison operators' example we have to show how the `==` o
 You can validate your example anytime by running the following npm script:
 
 ```sh
-yarn run lint:js
+npm run lint:js
 ```
 
 We've also provided the following command:
 
 ```sh
-yarn run fix:js
+npm run fix:js
 ```
 
 This runs ESLint with the `--fix` option, which tries to fix issues.