refactor: migrate from npm to pnpm

.eslintrc.js

@@ -30,6 +30,9 @@ module.exports = {
   rules: {
     'no-console': [0],
     'react/prop-types': [0],
+    // With the new React JSX transform (jsx: "react-jsx"), React doesn't need to be in scope
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-uses-react': 'off',
     'import/no-named-as-default': 0,
     'import/order': [
       'error',
@@ -99,6 +102,9 @@ module.exports = {
           'error',
           { functions: false, classes: true, variables: true },
         ],
+        // With the new React JSX transform (jsx: "react-jsx"), React doesn't need to be in scope
+        'react/react-in-jsx-scope': 'off',
+        'react/jsx-uses-react': 'off',
       },
     },
   ],

.github/workflows/nodejs.yml

@@ -30,23 +30,27 @@ jobs:
     if: ${{ needs.changes.outputs.cms == 'true' }}
     steps:
       - uses: actions/checkout@v3
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.19.0
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node-version }}
           check-latest: true
-          cache: 'npm'
+          cache: 'pnpm'
       - name: log versions
-        run: node --version && npm --version && yarn --version
+        run: node --version && pnpm --version
       - name: install dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
       - name: run unit tests
-        run: npm run test:ci
+        run: pnpm run test:ci
       - name: build demo site
-        run: npm run build:demo
+        run: pnpm run build:demo
       - name: run e2e tests
         if: matrix.os == 'ubuntu-latest' && matrix.node-version == '22.x'
-        run: npm run test:e2e:run-ci
+        run: pnpm run test:e2e:run-ci
         env:
           IS_FORK: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork == true || github.repository_owner != 'decaporg' }}
           CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
@@ -59,4 +63,3 @@ jobs:
           path: |
             cypress/screenshots
             cypress/videos
-

.storybook/main.js

@@ -1,7 +1,16 @@
+const {
+  dirname,
+  join
+} = require("node:path");
+
 module.exports = {
   stories: [
     '../packages/decap-cms-core/src/**/*.stories.js',
     '../packages/decap-cms-ui-default/src/**/*.stories.js',
   ],
-  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
+  addons: [getAbsolutePath("@storybook/addon-links")],
 };
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

CONTRIBUTING.md

@@ -7,20 +7,20 @@ For details on contributing to documentation, see [Website Readme](https://githu
 
 ## Setup
 
-> Install [Node.js (LTS)](https://nodejs.org/) on your system.
+> Install [Node.js (LTS)](https://nodejs.org/) and [pnpm](https://pnpm.io/) on your system.
 
 ### Install dependencies
 
 ```sh
 git clone https://github.com/decaporg/decap-cms
 cd decap-cms
-npm install
+pnpm install
 ```
 
 ### Run locally
 
 ```sh
-npm run start
+pnpm run start
 ```
 
 ## Available scripts
@@ -30,71 +30,71 @@ npm run start
 Removes all of the CMS package `dist` directories.
 
 ```sh
-npm run clean
+pnpm run clean
 ```
 
 ### reset
 
 Runs the `clean` script and removes all the `node_modules` from the CMS packages.
 
 ```sh
-npm run reset
+pnpm run reset
 ```
 
 ### build
 
 Runs the `clean` script and builds the CMS packages.
 
 ```sh
-npm run build
+pnpm run build
 ```
 
 ### build-preview
 
 Runs the `build` and `build-preview` scripts in each package and serves the resulting build locally.
 
 ```sh
-npm run build-preview
+pnpm run build-preview
 ```
 
 ### test
 
 Runs linting and Jest tests.
 
 ```sh
-npm run test
+pnpm run test
 ```
 
 ### test:all
 
 Runs linting, Jest, and Cypress tests.
 
 ```sh
-npm run test:all
+pnpm run test:all
 ```
 
 ### test:e2e
 
 Runs Cypress e2e tests.
 
 ```sh
-npm run test:e2e
+pnpm run test:e2e
 ```
 
 ### test:e2e:dev
 
 Runs Cypress e2e tests on watch mode with an open instance of Chrome.
 
 ```sh
-npm run test:e2e:dev
+pnpm run test:e2e:dev
 ```
 
 ### format
 
 Formats code and docs according to our style guidelines.
 
 ```sh
-npm run format
+pnpm run format
 ```
 
 ## Pull Requests
@@ -109,19 +109,19 @@ Decap CMS uses the [Forking Workflow](https://www.atlassian.com/git/tutorials/co
 2. Create a branch from `main`. 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 `npm run test` and ensure the test suite passes.
-6. Use `npm run format` to format and lint your code.
+5. Run `pnpm run test` and ensure the test suite passes.
+6. Use `pnpm 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
 
-`npm run start` spawns a development server and uses `dev-test/config.yml` and `dev-test/index.html` to serve the CMS.
+`pnpm 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.
 
-```js
+```yaml
 backend:
   name: github
   repo: owner-name/repo-name
@@ -145,9 +145,10 @@ backend:
   </body>
 </html>
 ```
+
 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 `npm run start`
+3. Run `pnpm run start`
 4. Open `http://localhost:8080/` in the browser and you should have access to the CMS
 
 ### Debugging Git Gateway
@@ -157,11 +158,11 @@ When debugging the CMS with Git Gateway you must:
 1. Have a Netlify site with [Git Gateway](https://docs.netlify.com/visitor-access/git-gateway/) and [Netlify Identity](https://docs.netlify.com/visitor-access/identity/) enabled. An easy way to create such a site is to use a [template](https://www.decapcms.org/docs/start-with-a-template/), for example the [Gatsby template](https://app.netlify.com/start/deploy?repository=https://github.com/decaporg/gatsby-starter-decap-cms&stack=cms)
 2. Tell the CMS the URL of your Netlify site using a local storage item. To do so:
 
-    1. Open `http://localhost:8080/` in the browser
-    2. Open the Developer Console. Write the below command and press enter: `localStorage.setItem('netlifySiteURL', 'https://yourwebsiteurl.netlify.app/')`
-    3. To be sure, you can run this command as well: `localStorage.getItem('netlifySiteURL')`
-    4. Refresh the page
-    5. You should be able to log in via your Netlify Identity email/password
+   1. Open `http://localhost:8080/` in the browser
+   2. Open the Developer Console. Write the below command and press enter: `localStorage.setItem('netlifySiteURL', 'https://yourwebsiteurl.netlify.app/')`
+   3. To be sure, you can run this command as well: `localStorage.getItem('netlifySiteURL')`
+   4. Refresh the page
+   5. You should be able to log in via your Netlify Identity email/password
 
 ### Fine tune the way you run unit tests
 

__mocks__/cleanStackMock.js

@@ -0,0 +1,5 @@
+function cleanStack(stack) {
+  return stack;
+}
+module.exports = cleanStack;
+module.exports.default = cleanStack;

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

babel.config.js

@@ -23,11 +23,11 @@ const basePlugins = [
 // REVISIT: We probably don't need any of these since we use preset-env
 const legacyPlugins = [
   'transform-export-extensions',
-  '@babel/plugin-proposal-class-properties',
-  '@babel/plugin-proposal-object-rest-spread',
+  '@babel/plugin-transform-class-properties',
+  '@babel/plugin-transform-object-rest-spread',
   '@babel/plugin-proposal-export-default-from',
-  '@babel/plugin-proposal-nullish-coalescing-operator',
-  '@babel/plugin-proposal-optional-chaining',
+  '@babel/plugin-transform-nullish-coalescing-operator',
+  '@babel/plugin-transform-optional-chaining',
   '@babel/plugin-syntax-dynamic-import',
 ];
 
@@ -48,14 +48,14 @@ const svgo = {
 
 function presets() {
   return [
-    '@babel/preset-react',
-    ...(!isESM ? [['@babel/preset-env', {}]] : []),
     [
-      '@emotion/babel-preset-css-prop',
+      '@babel/preset-react',
       {
-        autoLabel: 'always',
+        runtime: 'automatic',
+        importSource: '@emotion/react',
       },
     ],
+    ...(!isESM ? [['@babel/preset-env', {}]] : []),
     '@babel/preset-typescript',
   ];
 }
@@ -64,6 +64,7 @@ function plugins() {
   if (isESM) {
     return [
       ...defaultPlugins,
+      '@emotion/babel-plugin',
       [
         'transform-define',
         {
@@ -89,6 +90,7 @@ function plugins() {
   if (isTest) {
     return [
       ...defaultPlugins,
+      '@emotion/babel-plugin',
       [
         'inline-react-svg',
         {
@@ -99,13 +101,29 @@ function plugins() {
   }
 
   if (!isProduction) {
-    return [...defaultPlugins];
+    return [...defaultPlugins, '@emotion/babel-plugin'];
   }
 
-  return defaultPlugins;
+  return [...defaultPlugins, '@emotion/babel-plugin'];
 }
 
 module.exports = {
   presets: presets(),
   plugins: plugins(),
+  overrides: [
+    {
+      test: /slate\.spec\.js$/,
+      presets: [
+        [
+          '@babel/preset-react',
+          {
+            runtime: 'classic',
+            pragma: 'h',
+          },
+        ],
+        ...(!isESM ? [['@babel/preset-env', {}]] : []),
+        '@babel/preset-typescript',
+      ],
+    },
+  ],
 };

cypress/Readme.md

@@ -15,14 +15,14 @@ Tests for the other backends use previously [recorded data](fixtures) and stub `
 ## Run Tests Locally
 
 ```bash
-npm run test:e2e # builds the demo site and runs Cypress in headless mode with mock data
+pnpm run test:e2e # builds the demo site and runs Cypress in headless mode with mock data
 ```
 
 ## Debug Tests
 
 ```bash
-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
+pnpm run develop # starts a local dev server with the demo site
+pnpm 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
-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
+pnpm run develop # starts a local dev server with the demo site
+pnpm run mock:server:start # starts the recording proxy
+pnpm run test:e2e:record-fixtures:dev # runs Cypress in non-headless and pass data through the recording proxy
+pnpm 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.

jest.config.js

@@ -9,12 +9,16 @@ module.exports = {
     'decap-cms-widget-object': '<rootDir>/packages/decap-cms-widget-object/src/index.js',
     '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
     '^#home-directory$': 'clean-stack/home-directory.js',
+    '^clean-stack$': '<rootDir>/__mocks__/cleanStackMock.js',
+    '\\.(svg)$': '<rootDir>/__mocks__/fileMock.js',
   },
   modulePathIgnorePatterns: ['.nx', 'dist'],
   snapshotSerializers: ['@emotion/jest/serializer'],
-  transformIgnorePatterns: [
-    'node_modules/(?!copy-text-to-clipboard|clean-stack|escape-string-regexp)',
-  ],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx)$': 'babel-jest',
+  },
+  transformIgnorePatterns: ['node_modules/(?!clean-stack|escape-string-regexp|lodash)'],
   testEnvironment: 'jsdom',
   testEnvironmentOptions: {
     url: 'http://localhost:8080',