build: switch to npm (#2246)

Author: denkristoffer

.circleci/config.yml

@@ -14,11 +14,10 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/circleci-f36-build
-      - node/install-packages:
-          pkg-manager: yarn
+      - node/install-packages
       - run:
           name: Build packages
-          command: yarn build
+          command: npm run-script build
       - persist_to_workspace:
           root: .
           paths:
@@ -37,17 +36,16 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/circleci-f36-build
-      - node/install-packages:
-          pkg-manager: yarn
+      - node/install-packages
       - run:
           name: Prettier
-          command: yarn prettier:check
+          command: npm run-script prettier:check
       - run:
           name: Lint
-          command: yarn lint
+          command: npm run-script lint
       - run:
           name: Check types
-          command: yarn tsc
+          command: npm run-script tsc
 
   test:
     docker:
@@ -58,11 +56,10 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/circleci-f36-build
-      - node/install-packages:
-          pkg-manager: yarn
+      - node/install-packages
       - run:
           name: Test
-          command: yarn test
+          command: npm run-script test
 
   check-links:
     docker:
@@ -73,21 +70,20 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/circleci-f36-build
-      - node/install-packages:
-          pkg-manager: yarn
+      - node/install-packages
       - run:
           name: Build Next.js website
-          command: yarn docs:next:build
+          command: npm run-script docs:next:build
       - run:
           name: Run production version of the website locally
-          command: yarn docs:next:start-prod
+          command: npm run-script docs:next:start-prod
           background: true
       - run:
           name: Wait for localhost:3000 to be ready
-          command: yarn wait-on http://localhost:3000
+          command: npx wait-on http://localhost:3000
       - run:
           name: Run links checker
-          command: yarn blc http://localhost:3000 -ro --exclude "https://medium.com/contentful-design" --exclude "https://github.com/contentful/forma-36" --exclude "https://www.figma.com/@contentful"
+          command: npx blc http://localhost:3000 -ro --exclude "https://medium.com/contentful-design" --exclude "https://github.com/contentful/forma-36" --exclude "https://www.figma.com/@contentful"
 
   deploy_chromatic:
     docker:
@@ -98,14 +94,13 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/circleci-f36-build
-      - node/install-packages:
-          pkg-manager: yarn
+      - node/install-packages
       - run:
           name: Storybook
-          command: yarn storybook:build
+          command: npm run-script storybook:build
       - run:
           name: Chromatic
-          command: yarn chromatic
+          command: npm run-script chromatic
 
   release:
     docker:
@@ -116,24 +111,23 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/circleci-f36-build
-      - node/install-packages:
-          pkg-manager: yarn
+      - node/install-packages
       - add_ssh_keys:
           fingerprints:
             - '2b:9f:13:79:d8:7b:f5:38:43:8f:3d:a8:7d:53:22:b2'
       - run: git config --global user.email ${GITHUB_EMAIL}
       - run: git config --global user.name ${GITHUB_USER}
       - run:
           name: Generate changelogrc
-          command: yarn changelog:gen
+          command: npm run-script changelog:gen
       - run:
           name: Generate packages changelogs
-          command: yarn changeset version
+          command: npx changeset version
       - run:
           name: Publish packages and create releases
           command: |
             npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
-            yarn run changeset:publish
+            npm run-script changeset:publish
 
   changelog:
     docker:
@@ -144,20 +138,19 @@ jobs:
       - checkout
       - attach_workspace:
           at: ~/circleci-f36-build
-      - node/install-packages:
-          pkg-manager: yarn
+      - node/install-packages
       - add_ssh_keys:
           fingerprints:
             - '2b:9f:13:79:d8:7b:f5:38:43:8f:3d:a8:7d:53:22:b2'
       - run: git config --global user.email ${GITHUB_EMAIL}
       - run: git config --global user.name ${GITHUB_USER}
       - run:
           name: Generate changelog files
-          command: yarn changelog:write
+          command: npm run-script changelog:write
       - run:
           name: Commit changelog files
           command: |
-            git add . && yarn run pretty:quick
+            git add . && npm run-script pretty:quick
             git diff --staged --quiet || git commit -am "docs: update changelog on repository and website" && git push origin ${CIRCLE_BRANCH}
 
 workflows:

.gitignore

@@ -20,7 +20,7 @@
 **/npm-debug.log*
 **/yarn-debug.log*
 **/yarn-error.log*
-**/package-lock.json
+**/yarn.lock
 **/tsconfig.tsbuildinfo
 
 **/.cache

README.md

@@ -26,32 +26,32 @@
 
 ### Creating new packages
 
-We use use [Plop](https://plopjs.com/) to create scripts that help you to scaffold new packages. In the root of the repo, you can run `yarn generate`. Then follow the steps in the CLI. Plop will generate the relevant files and add the relevant imports and exports to the main `src/index.ts` file required to make the component available when publishing the library. Read more about [contribution to Forma 36](https://f36.contentful.com/introduction/contributing).
+We use use [Plop](https://plopjs.com/) to create scripts that help you to scaffold new packages. In the root of the repo, you can run `npm run-script generate`. Then follow the steps in the CLI. Plop will generate the relevant files and add the relevant imports and exports to the main `src/index.ts` file required to make the component available when publishing the library. Read more about [contribution to Forma 36](https://f36.contentful.com/introduction/contributing).
 
 ## Development
 
-For local development, in the root of the repo run `yarn` to install all dependencies and then `yarn build` to build all packages. Now follow the instructions of the specific package you’re working on.
+For local development, in the root of the repo run `npm i` to install all dependencies and then `npm run-script build` to build all packages. Now follow the instructions of the specific package you’re working on.
 You will find each package’s instructions in their README files, check the [Packages](#packages) section for a list of all packages.
 
 > In case you are having problems to install the dependencies, try using NVM to get the same node version we use by running `nvm use` in the root of the repo
 
 ### Storybook for f36-components
 
-We use storybook with our react component library to develop components. You can start it from the root of the repo, just run `yarn storybook`
+We use storybook with our react component library to develop components. You can start it from the root of the repo, just run `npm run-script storybook`
 
 ## Commits & releases
 
-Use `yarn commit`. This uses the [Commitzen](https://github.com/commitizen/cz-cli) CLI to create a conventional commit message based on your changes. CI is setup to release all new commits on the main branch that contains a new [changeset](https://github.com/changesets/changesets).
+Use `npm run-script commit`. This uses the [Commitzen](https://github.com/commitizen/cz-cli) CLI to create a conventional commit message based on your changes. CI is setup to release all new commits on the main branch that contains a new [changeset](https://github.com/changesets/changesets).
 
 Read more about changeset [here](RELEASES.md)
 
 ## Testing with your own project locally
 
 You can test changes to a package of this monorepo in your own project locally by taking the following steps:
 
-1. Run `yarn build` in the desired package's directory to ensure your latest changes have been built
-2. Run `yarn link` in the desired package's directory
-3. Change to your local project's directory and run `yarn link NAME_OF_PACKAGE` to link to the local version of the package (e.g. `yarn link @contentful/f36-components`)
+1. Run `npm run-script build` in the desired package's directory to ensure your latest changes have been built
+2. Run `npm link` in the desired package's directory
+3. Change to your local project's directory and run `npm link NAME_OF_PACKAGE` to link to the local version of the package (e.g. `npm link @contentful/f36-components`)
 
 ## Get involved
 

RELEASES.md

@@ -13,7 +13,7 @@ But in case you want a new version to be published, you will need to add a chang
 
 ### Through CLI
 
-- run `yarn changeset` on the root of the repository.
+- run `npm run-script changeset` on the root of the repository.
 - it starts a wizard showing packages that had changes from `main` branch, and which kind of bump should be applied (major, minor or patch), and also ask for a description of the change.
 - it creates a file in the `.changeset` folder that needs to be commited to the branch.
 - `changeset-bot` will show that information in its comment on the PR.

docs/folder-structure.md

@@ -56,7 +56,7 @@ The basic folder structure of a component looks like this:
   package.json
 ```
 
-If you run `yarn generate component`, this structure will be generated for you automatically.
+If you run `npm run-script generate component`, this structure will be generated for you automatically.
 
 ### Test files