Lerna -> nx, yarn -> npm (#6959)

* chore: yarn to npm

* feat: run project with nx

* chore: add most build and test scripts, use npm in CI

* chore: add all npm scripts

* fix: remove invalid cache seetting from nodejs.yml

* fix: test:ci correct usage

* fix: more scripts

* fix: add npm install to cypress ci

* chore: add changeset cli for versioning

* docs(npm): update setup instructions and readmes

* style(): cleanup

* chore: remove changesets and upgrade lerna for versioning

* fix: lock npm version for lerna

* fix: use npm 9 to support node 16 build

* chore: update scripts of aws cognito

* chore: update workflow to use node 20 instead of 16

Author: demshy

.github/workflows/nodejs.yml

@@ -27,7 +27,7 @@ jobs:
     strategy:
       matrix:
         os: [macos-latest, windows-latest, ubuntu-latest]
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
     steps:
       - uses: actions/checkout@v3
         if: ${{ needs.changes.outputs.cms == 'true' }}
@@ -40,17 +40,17 @@ jobs:
       - name: log versions
         run: node --version && npm --version && yarn --version
         if: ${{ needs.changes.outputs.cms == 'true' }}
-      - name: install dependencies
-        run: yarn --frozen-lockfile --network-timeout 1000000 && yarn bootstrap
+      - name: install dependecies
+        run: npm install
         if: ${{ needs.changes.outputs.cms == 'true' }}
       - name: run unit tests
-        run: yarn test:ci
+        run: npm run test:ci
         env:
           CI: true
           NODE_OPTIONS: --max-old-space-size=4096
         if: ${{ needs.changes.outputs.cms == 'true' }}
       - name: build demo site
-        run: yarn build:demo
+        run: npm run build:demo
         env:
           NODE_OPTIONS: --max-old-space-size=4096
         if: ${{ needs.changes.outputs.cms == 'true' }}
@@ -66,7 +66,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x]
+        node-version: [18.x, 20.x]
       fail-fast: false
 
     steps:
@@ -77,7 +77,6 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
           check-latest: true
-          cache: yarn
         if: ${{ needs.changes.outputs.cms == 'true' }}
       - uses: actions/download-artifact@master
         with:
@@ -89,11 +88,11 @@ jobs:
           node --version
           npm --version
           yarn --version
-          yarn --frozen-lockfile
+          npm install
         if: ${{ needs.changes.outputs.cms == 'true' }}
       - name: e2e test
         run: |
-          yarn test:e2e:run-ci
+          npm run test:e2e:run-ci
         env:
           IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}

.gitignore

@@ -20,3 +20,4 @@ coverage/
 .env
 .temp/
 storybook-static/
+.nx/cache

.npmrc

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

.prettierignore

@@ -5,3 +5,5 @@ public/
 packages/decap-cms-backend-github/src/fragmentTypes.js
 packages/decap-cms-backend-gitlab/src/AuthenticationPage.js
 packages/decap-cms-backend-proxy/src/implementation.ts
+
+/.nx/cache

CONTRIBUTING.md

@@ -7,121 +7,94 @@ For details on contributing to documentation, see [Website Directory Readme](htt
 
 ## Setup
 
-> Install [Node.js (LTS)](https://nodejs.org/) and [yarn](https://yarnpkg.com/en/docs/install) on your system.
+> Install [Node.js (LTS)](https://nodejs.org/) on your system.
 
 ### Install dependencies
 
-> Only required on the first run, subsequent runs can use `yarn start` to both bootstrap and run the development server.
-
 ```sh
 git clone https://github.com/decaporg/decap-cms
 cd decap-cms
-yarn
-yarn bootstrap
+npm install
 ```
 
 ### Run locally
 
 ```sh
-yarn start
+npm run start
 ```
 
 ## Available scripts
 
-### bootstrap
-
-Bootstraps the monorepo.
-
-```sh
-yarn bootstrap
-```
-
-### watch
-
-Watches all CMS packages and transpiles them on change.
-
-```sh
-yarn watch
-```
-
-### start
-
-Starts the development server. This task runs both the `bootstrap` and `watch` scripts.
-
-```sh
-yarn start
-```
-
 ### clean
 
 Removes all of the CMS package `dist` directories.
 
 ```sh
-yarn clean
+npm run clean
 ```
 
 ### reset
 
 Runs the `clean` script and removes all the `node_modules` from the CMS packages.
 
 ```sh
-yarn reset
+npm run reset
 ```
 
 ### build
 
 Runs the `clean` script and builds the CMS packages.
 
 ```sh
-yarn build
+npm run build
 ```
 
 ### build-preview
 
 Runs the `build` and `build-preview` scripts in each package and serves the resulting build locally.
 
 ```sh
-yarn build-preview
+npm run build-preview
 ```
 
 ### test
 
 Runs linting and Jest tests.
 
 ```sh
-yarn test
+npm run test
 ```
 
 ### test:all
 
 Runs linting, Jest, and Cypress tests.
 
 ```sh
-yarn test:all
+npm run test:all
 ```
 
 ### test:e2e
 
 Runs Cypress e2e tests.
 
 ```sh
-yarn test:e2e
+npm run test:e2e
 ```
 
 ### test:e2e:dev
 
 Runs Cypress e2e tests on watch mode with an open instance of Chrome.
 
 ```sh
-yarn test:e2e:dev
+npm run test:e2e:dev
 ```
 
 ### format
 
 Formats code and docs according to our style guidelines.
 
 ```sh
-yarn format
+npm run format
 ```
 
 ## Pull Requests
@@ -136,14 +109,14 @@ Decap CMS uses the [Forking Workflow](https://www.atlassian.com/git/tutorials/co
 2. Create a branch from `master`. If you're addressing a specific issue, prefix your branch name with the issue number.
 3. If you've added code that should be tested, add tests.
 4. If you've changed APIs, update the documentation.
-5. Run `yarn test` and ensure the test suite passes.
-6. Use `yarn format` to format and lint your code.
+5. Run `npm run test` and ensure the test suite passes.
+6. Use `npm run format` to format and lint your code.
 7. PR's must be rebased before merge (feel free to ask for help).
 8. PR should be reviewed by two maintainers prior to merging.
 
 ## Debugging
 
-`yarn start` spawns a development server and uses `dev-test/config.yml` and `dev-test/index.html` to serve the CMS.
+`npm run start` spawns a development server and uses `dev-test/config.yml` and `dev-test/index.html` to serve the CMS.
 In order to debug a specific issue follow the next steps:
 
 1. Replace `dev-test/config.yml` with the relevant `config.yml`. If you want to test the backend, make sure that the `backend` property of the config indicates which backend you use (GitHub, Gitlab, Bitbucket etc) and path to the repo.
@@ -174,7 +147,7 @@ backend:
 ```
 The most important thing is to make sure that Decap CMS is loaded from the `dist` folder. This way, every time you make changes to the source code, they will be compiled and reflected immediately on `localhost`.
 
-3. Run `yarn start`
+3. Run `npm run start`
 4. Open `http://localhost:8080/` in the browser and you should have access to the CMS
 
 ### Debugging Git Gateway
@@ -197,25 +170,25 @@ There are situations where you would want to run a specific test file, or tests
 To run all the tests for a specific file, use this command:
 
 ```
-yarn jest <filename or file path>
+npx jest <filename or file path>
 ```
 
-The first part of the command, `yarn jest` means running the locally installed version of `jest`. It is equivalent to running `node_modules/.bin/jest`.
+The first part of the command, `npx jest` means running the locally installed version of `jest`. It is equivalent to running `node_modules/.bin/jest`.
 
-Example for running all the tests for the file `gitlab.spec.js`: `yarn jest gitlab.spec.js`
+Example for running all the tests for the file `gitlab.spec.js`: `npx jest gitlab.spec.js`
 
 Some test files like `API.spec.js` is available in several packages. You can pass a regexp pattern instead of file path to narrow down files.
 
 Example for running all the tests for the file `API.spec.js` in the `decap-cms-backend-gitlab` package:
 
-`yarn jest ".+backend-gitlab/.+/API.spec.js`
+`npx jest ".+backend-gitlab/.+/API.spec.js`
 
 To run a specific test in a file, add the flag `--testNamePattern`, or `-t` for short followed by a regexp to match your test name.
 
 Example for running the test "should return true on project access_level >= 30" in the API.spec.js in `decap-cms-backend-gitlab` package:
 
 ```
-yarn jest -t "true on p" ".+backend-gitlab/.+/API.spec.js"
+npx jest -t "true on p" ".+backend-gitlab/.+/API.spec.js"
 ```
 
 For more information about running tests exactly the way you want, check out the official documentation for [Jest CLI](https://jestjs.io/docs/cli).

cypress/Readme.md

@@ -15,14 +15,14 @@ Tests for the other backends use previously [recorded data](fixtures) and stub `
 ## Run Tests Locally
 
 ```bash
-yarn test:e2e # builds the demo site and runs Cypress in headless mode with mock data
+npm run test:e2e # builds the demo site and runs Cypress in headless mode with mock data
 ```
 
 ## Debug Tests
 
 ```bash
-yarn develop # starts a local dev server with the demo site
-yarn test:e2e:exec # runs Cypress in non-headless mode with mock data
+npm run develop # starts a local dev server with the demo site
+npm run test:e2e:exec # runs Cypress in non-headless mode with mock data
 ```
 
 ## Recording Tests Data
@@ -54,10 +54,10 @@ NETLIFY_INSTALLATION_ID=netlifyGitHubInstallationId
 To start a recording run the following commands:
 
 ```bash
-yarn develop # starts a local dev server with the demo site
-yarn mock:server:start # starts the recording proxy
-yarn test:e2e:record-fixtures:dev # runs Cypress in non-headless and pass data through the recording proxy
-yarn mock:server:stop # stops the recording proxy
+npm run develop # starts a local dev server with the demo site
+npm run mock:server:start # starts the recording proxy
+npm run test:e2e:record-fixtures:dev # runs Cypress in non-headless and pass data through the recording proxy
+npm run mock:server:stop # stops the recording proxy
 ```
 
 > During the recorded process a clone of the relevant repo will be created under `.temp` and reset between tests.

cypress/plugins/index.js

@@ -12,7 +12,7 @@
 // the project's config changing)
 require('dotenv').config();
 const { merge } = require('lodash');
-const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
+const { addMatchImageSnapshotPlugin } = require('@simonsmith/cypress-image-snapshot/plugin');
 
 const {
   setupGitHub,

cypress/support/e2e.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 import 'cypress-plugin-tab';
 import 'cypress-jest-adapter';
-import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+import { addMatchImageSnapshotCommand } from '@simonsmith/cypress-image-snapshot/command';
 
 addMatchImageSnapshotCommand({
   failureThreshold: 0.01,

lerna.json

@@ -1,9 +1,7 @@
 {
-  "lerna": "2.11.0",
   "packages": ["packages/*"],
   "version": "independent",
-  "npmClient": "yarn",
-  "useWorkspaces": true,
+  "npmClient": "npm",
   "loglevel": "success",
   "command": {
     "version": {
@@ -14,9 +12,6 @@
       "message": "chore(release): publish"
     }
   },
-  "ignoreChanges": [
-    "**/__fixtures__/**",
-    "**/__tests__/**",
-    "**/*.md"
-  ]
+  "ignoreChanges": ["**/__fixtures__/**", "**/__tests__/**", "**/*.md"],
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }

nx.json

@@ -0,0 +1,20 @@
+{
+  "targetDefaults": {
+    "build:esm": {
+      "cache": true
+    },
+    "build": {
+      "cache": true
+    }
+  },
+  "namedInputs": {
+    "default": [
+      "{projectRoot}/**/*",
+      "sharedGlobals"
+    ],
+    "sharedGlobals": [],
+    "production": [
+      "default"
+    ]
+  }
+}