Switching from yarn dependency to npm (#1388)

* Replace root project scripts with npm

* switch node version

* Updating demo folder to npm

* after package_phase

* Remove yarn from devcontainer

* adding npm package

* Converting docs directory

* Lint fixes

* Update after merge

* Get npm package

* remove version for now

* use INSTALL

* npmpackage

* Fix quotes

.devcontainer/Dockerfile

@@ -45,9 +45,6 @@ RUN if [ "${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/l
 ARG BUNDLER_VERSION=2.2.11
 RUN gem install bundler:${BUNDLER_VERSION} solargraph
 
-# Install yarn
-RUN npm install -g yarn
-
 # Install chrome
 RUN curl --silent --show-error --location --fail --retry 3 --output /tmp/google-chrome-stable_current_amd64.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb \
       && (sudo dpkg -i /tmp/google-chrome-stable_current_amd64.deb || sudo apt-get -fy install)  \

.github/workflows/ci.yml

@@ -62,10 +62,10 @@ jobs:
         key: gems-build-rails-${{ matrix.rails_version }}-ruby-${{ matrix.ruby_version }}-${{ hashFiles('**/Gemfile.lock') }}
     - uses: actions/setup-node@v2
       with:
-        node-version: 14
+        node-version: 16
     - run: |
-        yarn
-        cd demo && yarn
+        npm i
+        cd demo && npm i
     - name: Build and test with Rake
       run: |
         gem install bundler:2.2.9
@@ -112,10 +112,10 @@ jobs:
         ruby-version: 2.7.x
     - uses: actions/setup-node@v2
       with:
-        node-version: 14
+        node-version: 16
     - run: |
-        yarn
-        cd demo && yarn
+        npm i
+        cd demo && npm i
     - name: Build and test with Rake
       run: |
         gem install bundler:2.2.9

.github/workflows/docs-build.yml

@@ -21,8 +21,8 @@ jobs:
           ruby-version: 2.7.x
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
-      - run: yarn
+          node-version: 16
+      - run: npm i
       - uses: actions/cache@v2
         with:
           path: vendor/bundle

.github/workflows/docs-preview-deploy.yml

@@ -26,19 +26,19 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
-          cache: 'yarn'
+          node-version: 16
+          cache: 'npm'
           cache-dependency-path: |
-            yarn.lock
-            docs/yarn.lock
+            package-lock.json
+            docs/package-lock.json
 
       - uses: actions/cache@v2
         with:
           path: vendor/bundle
           key: gems-deploy-preview-${{ hashFiles('**/Gemfile.lock') }}
 
       - name: Install dependencies
-        run: yarn && cd docs && yarn && cd ..
+        run: npm i && cd docs && npm i && cd ..
 
       - name: Generate static files
         run: |
@@ -50,7 +50,7 @@ jobs:
           bundle exec rake static:dump
 
       - name: Build
-        run: yarn build:docs:preview
+        run: npm run build:docs:preview
 
       - name: Archive build output
         run: 'tar --dereference --directory docs/public -cvf artifact.tar .'

.github/workflows/docs-production-deploy.yml

@@ -27,11 +27,11 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v2
         with:
-          node-version: 14
-          cache: 'yarn'
+          node-version: 16
+          cache: 'npm'
           cache-dependency-path: |
-            yarn.lock
-            docs/yarn.lock
+            package-lock.json
+            docs/package-lock.json
 
       - name: Cache dependencies
         uses: actions/cache@v2
@@ -42,7 +42,7 @@ jobs:
             ${{ runner.os }}-node-
 
       - name: Install dependencies
-        run: yarn && cd docs && yarn && cd ..
+        run: npm i && cd docs && npm i && cd ..
 
       - name: Generate static files
         run: |
@@ -54,7 +54,7 @@ jobs:
           bundle exec rake static:dump
 
       - name: Build
-        run: yarn build:docs
+        run: npm run build:docs
 
       - name: Archive build output
         run: 'tar --dereference --directory docs/public -cvf artifact.tar .'

.github/workflows/lint.yml

@@ -17,7 +17,7 @@ jobs:
     - uses: actions/cache@v2
       with:
         path: node_modules
-        key: node-modules-main-${{ hashFiles('yarn.lock') }}
+        key: node-modules-main-${{ hashFiles('package-lock.json') }}
     - name: Get specific changed files
       id: changed-files
       uses: tj-actions/changed-files@v29.0.3
@@ -30,8 +30,8 @@ jobs:
     - name: Lint with Markdownlint
       if: steps.changed-files.outputs.any_changed == 'true'
       run: |
-        yarn
-        yarn markdownlint ${{ steps.changed-files.outputs.all_changed_files }}
+        npm i
+        npx markdownlint ${{ steps.changed-files.outputs.all_changed_files }}
 
   rubocop:
     runs-on: ubuntu-latest
@@ -99,7 +99,7 @@ jobs:
     - uses: actions/cache@v2
       with:
         path: node_modules
-        key: node-modules-main-${{ hashFiles('yarn.lock') }}
+        key: node-modules-main-${{ hashFiles('package-lock.json') }}
     - name: Get changed files
       id: changed-files
       uses: tj-actions/changed-files@v29.0.3
@@ -109,5 +109,5 @@ jobs:
     - name: Lint with ESLint
       if: steps.changed-files.outputs.any_changed == 'true'
       run: |
-        yarn
-        yarn eslint --quiet ${{ steps.changed-files.outputs.all_changed_files }}
+        npm i
+        npx eslint --quiet ${{ steps.changed-files.outputs.all_changed_files }}

.github/workflows/publish.yml

@@ -36,9 +36,9 @@ jobs:
           EOF
         env:
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
-      - name: Yarn install
+      - name: NPM install
         run: |
-          yarn
+          npm i
       - name: Publish Gem
         run: bundle exec rake release
       - name: Publish NPM

.github/workflows/release-canary.yml

@@ -10,7 +10,7 @@ jobs:
     if: ${{ github.repository == 'primer/view_components' }}
     uses: primer/.github/.github/workflows/release_canary.yml@main
     with:
-      install: yarn
+      install: npm i
     secrets:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
       npm_token: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}

.github/workflows/release.yml

@@ -29,15 +29,15 @@ jobs:
 
       - name: Install dependencies
         run: |
-          yarn
+          npm i
           bundle install
 
       - name: Create release pull request or publish to npm
         id: changesets
         uses: changesets/action@master
         with:
           title: Release Tracking
-          version: yarn changeset:version
+          version: npm run changeset:version
           publish: script/changeset-publish
         env:
           GITHUB_TOKEN: ${{ secrets.GPR_AUTH_TOKEN_SHARED }}

.gitignore

@@ -1,9 +1,9 @@
-# Generated from yarn prepare
+# Generated from npm prepare
 app/components/**/*.js
 app/components/**/*.d.ts
 app/assets/
 
-# Generated by demo yarn post-install
+# Generated by demo npm post-install
 demo/app/assets/stylesheets/primer*
 
 # Generated by lib/tasks/docs.rake

.vscode/tasks.json

@@ -138,10 +138,10 @@
       "problemMatcher": []
     },
     {
-      "label": "yarn: build assets",
+      "label": "build assets",
       "type": "shell",
       "group": "build",
-      "command": "yarn",
+      "command": "npm",
       "presentation": {
         "reveal": "always",
         "panel": "dedicated"
@@ -155,7 +155,7 @@
       "label": "lint:fix: fix eslint errors",
       "type": "shell",
       "group": "build",
-      "command": "yarn lint:fix",
+      "command": "npm run lint:fix",
       "presentation": {
         "reveal": "always",
         "panel": "dedicated"

Procfile

@@ -1,3 +1,3 @@
 rails: cd demo; bin/rails s -p 4000
-doctocat: cd docs; yarn develop
-assets: yarn run chokidar "app/components/**/*.pcss" "app/components/**/*.ts" -c "yarn build:css && yarn build:js"
+doctocat: cd docs; npm run develop
+assets: npx chokidar "app/components/**/*.pcss" "app/components/**/*.ts" -c "npm run build:css && npm run build:js"

component_generator.thor

@@ -77,7 +77,7 @@ class ComponentGenerator < Thor::Group
   end
 
   def install_js_package
-    run "yarn add #{js_package_name}" if js_package_name
+    run "npm i --save #{js_package_name}" if js_package_name
   end
 
   private

contributor-docs/setup.md

@@ -5,7 +5,7 @@ The easiest way to get started contributing to Primer ViewComponents is with [Co
 ## Setup for local development
 
 1. Clone `git@github.com:primer/view_components.git`
-2. Install [Overmind](https://github.com/DarthSim/overmind) and [Yarn](https://classic.yarnpkg.com/lang/en/docs/install)
+2. Install [Overmind](https://github.com/DarthSim/overmind)
 3. Run `script/setup` to install dependencies
 4. Run `script/dev`, this will run the documentation site on [localhost:5400](localhost:5400) and Lookbook on [localhost:4000](localhost:5000)
 

contributor-docs/styling.md

@@ -6,26 +6,6 @@ All the styling for Primer ViewComponents comes from [Primer CSS](https://githu
 
 Currently Primer CSS is in a separate repository so the workflow for making changes to Primer ViewComponents and CSS is not straightforward. You can choose between a local setup with hot reloading or use snapshot releases.
 
-### Hot reloading (local only)
-
-This setup leverages [yarn link](https://classic.yarnpkg.com/en/docs/cli/link) to hot reload any changes in Primer CSS. It links the Primer CSS dependency on the documentation site and demo app to the `/dist` folder in your local installation of Primer CSS.
-
-1. [Set up Primer ViewComponents](./setup.md) and [Primer CSS](https://github.com/primer/css) for local development.
-
-2. On the Primer CSS folder, run `yarn link`. This will register `@primer/css` as a source.
-
-3. Run `yarn link "@primer/css"` in the Primer ViewComponents root, `/docs` and `/demo` folders.
-
-4. Run `yarn dist:watch` on your Primer CSS folder. This process will keep the /dist folder up to date with your CSS changes.
-
-5. Run `script/dev` on your Primer ViewComponents folder.
-
-The Primer ViewComponents documentation site and Demo will hot reload any changes to Primer CSS after a few seconds. Once you are done testing we recommend using the snapshot release method below for the pull request review.
-
-To reverse this process follow the [yarn unlink instructions](https://classic.yarnpkg.com/en/docs/cli/unlink).
-
-_Note: Hot reloading doesn’t work on the demo app; run `yarn postinstall` on the `/demo` folder and refresh to see CSS changes._
-
 ### Snapshot releases (local or Codespaces)
 
 As part of its actions workflow Primer CSS makes [snapshot releases](https://github.com/changesets/changesets/blob/main/docs/snapshot-releases.md) which you can use to test your changes in Primer ViewComponents. Develop your changes in Primer CSS and make a draft pull request. Once the checks have been completed you can get the snapshot release version from the check description:

demo/.dockerignore

@@ -27,6 +27,3 @@ config/master.key
 public/packs
 public/packs-test
 node_modules
-yarn-error.log
-**/yarn-debug.log*
-**/.yarn-integrity

demo/bin/setup

@@ -19,9 +19,6 @@ FileUtils.chdir APP_ROOT do
   system! "gem install bundler --conservative"
   system("bundle check") || system!("bundle install --path vendor/bundle")
 
-  # Install JavaScript dependencies
-  # system('bin/yarn')
-
   # puts "\n== Copying sample files =="
   # unless File.exist?('config/database.yml')
   #   FileUtils.cp 'config/database.yml.sample', 'config/database.yml'

demo/config/initializers/assets.rb

@@ -7,7 +7,7 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
-# Add Yarn node_modules folder to the asset load path.
+# Add node_modules folder to the asset load path.
 Rails.application.config.assets.paths << Rails.root.join("node_modules")
 
 # Precompile additional assets.