Merge pull request #844 from prezly/feature/dev-19203-migrate-theme-k…

…it-to-pnpm-and-upgrade-react-and-next [DEV-19203] Migrate theme-kit to PNPM, Upgrade React & Next
prezly · Jan 29, 2025 · 6238178 · 6238178
2 parents 0d60ac8 + 97656d5
commit 6238178
Show file tree

Hide file tree

Showing 78 changed files with 19,316 additions and 362 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -14,20 +14,30 @@ jobs:
         # Operating System
         runs-on: ubuntu-latest
 
+        strategy:
+          matrix:
+            node-version: [ 20.x ]
+
         # Job steps
         steps:
             - uses: actions/checkout@v3
               with:
                   fetch-depth: 0 # 👈 Required to retrieve git history
 
+            - name: Setup Environment
+              uses: prezly/setup-github-actions@v1
+              with:
+                node: ${{ matrix.node-version }}
+                pnpm: "9.15.4"
+
             - name: Install dependencies
-              run: npm ci
+              run: pnpm install --frozen-lockfile
 
             - name: Build packages
-              run: npm run build
+              run: pnpm build
 
             - name: Install Chromatic
-              run: npm install --save-dev chromatic
+              run: pnpm install chromatic
               working-directory: ./packages/ui
 
             #👇 Adds Chromatic as a step in the workflow

diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -11,28 +11,14 @@ jobs:
             - name: Check out Git repository
               uses: actions/checkout@v3
 
-            - name: Use Node.js
-              uses: actions/setup-node@v3
+            - name: Setup environment
+              uses: prezly/setup-github-actions@v1
               with:
-                node-version-file: '.nvmrc'
-
-            - name: Cache node modules
-              uses: actions/cache@v3
-              env:
-                cache-name: cache-node-modules
-              with:
-                path: "**/node_modules"
-                key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-                restore-keys: |
-                  ${{ runner.os }}-build-${{ env.cache-name }}-
-                  ${{ runner.os }}-build-
-                  ${{ runner.os }}-
+                pnpm: 9.15.4
+                node: 20
 
             - name: Install Node.js dependencies
-              run: npm ci
+              run: pnpm install --frozen-lockfile
 
             - name: Run ESLint
-              uses: wearerequired/[email protected]
-              with:
-                  eslint: true
-                  eslint_extensions: 'ts,tsx'
+              run: pnpm lint
diff --git a/.github/workflows/playwright.shared.yml b/.github/workflows/playwright.shared.yml
@@ -22,18 +22,25 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
-    - uses: actions/setup-node@v3
+
+    - name: Setup environment
+      uses: prezly/setup-github-actions@v1
       with:
-        node-version: 16
+        pnpm: 9.15.4
+        node: 20
+
     - name: Install dependencies
-      run: npm ci
+      run: pnpm install --frozen-lockfile
+
     - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
+      run: pnpm dlx playwright install --with-deps
+
     - name: Run Playwright tests
-      run: npx playwright test
+      run: pnpm exec playwright test
       env:
         TESTS_BASE_URL: ${{ github.event.deployment_status.target_url }}
         TESTS_NEWSROOM_NAME: ${{ inputs.site-name }}
+
     - uses: actions/upload-artifact@v3
       if: always()
       with:

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -11,28 +11,17 @@ jobs:
       - name: Check out Git repository
         uses: actions/checkout@v3
 
-      - name: Use Node.js
-        uses: actions/setup-node@v3
+      - name: Setup environment
+        uses: prezly/setup-github-actions@v1
         with:
-          node-version-file: '.nvmrc'
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        env:
-          cache-name: cache-node-modules
-        with:
-          path: "**/node_modules"
-          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-build-${{ env.cache-name }}-
-            ${{ runner.os }}-build-
-            ${{ runner.os }}-
+          pnpm: 9.15.4
+          node: 20
 
       - name: Install Node.js dependencies
-        run: npm ci
+        run: pnpm install --frozen-lockfile
 
       - name: Run tests
-        run: npm test
+        run: pnpm test
 
       - name: Check modified intl artifacts
         run: |
@@ -43,4 +32,4 @@ jobs:
             echo "Modified files detected." && false
           else
             echo "All good."
-          fi
+          fi
diff --git a/.github/workflows/typecheck.yml b/.github/workflows/typecheck.yml
@@ -10,25 +10,14 @@ jobs:
     steps:
     - uses: actions/checkout@v3
 
-    - name: Cache node modules
-      uses: actions/cache@v3
-      env:
-        cache-name: cache-node-modules
-      with:
-        path: "**/node_modules"
-        key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
-        restore-keys: |
-          ${{ runner.os }}-build-${{ env.cache-name }}-
-          ${{ runner.os }}-build-
-          ${{ runner.os }}-
-
-    - name: Use Node.js
-      uses: actions/setup-node@v3
+    - name: Setup environment
+      uses: prezly/setup-github-actions@v1
       with:
-        node-version-file: '.nvmrc'
+        pnpm: 9.15.4
+        node: 20
 
-    - run: npm ci
+    - run: pnpm install --frozen-lockfile
 
-    - run: npm run typecheck
+    - run: pnpm typecheck
       env:
         CI: true
diff --git a/.gitignore b/.gitignore
@@ -46,4 +46,4 @@ storybook-static/
 
 # Test
 coverage/
-.nx/cache
+.nx/
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v18
+v20
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ See individual package READMEs for more information:
 
 ### Getting started
 
-After pulling the repo, run `npm i` to install the dependencies. This will install the root dependencies, as well as dependencies for individual packages.
+After pulling the repo, run `pnpm i` to install the dependencies. This will install the root dependencies, as well as dependencies for individual packages.
 
 ### NPM scripts
 
@@ -44,9 +44,9 @@ GitHub Actions are set up with a version matrix to ensure compatibility with all
 
 To keep versions in sync, releasing new packages should only be done from the root directory.
 
-To publish a production version, run `npm run release`. Make sure you're on the `main` branch and don't have any uncommitted files before running the command. After the script finishes, a new GitHub release draft will open in your browser. Please make sure to fill it in a similar manner to previous releases (hitting "Auto-generate release notes" usually produces a nicer output than Lerna's default).
+To publish a production version, run `pnpm release`. Make sure you're on the `main` branch and don't have any uncommitted files before running the command. After the script finishes, a new GitHub release draft will open in your browser. Please make sure to fill it in a similar manner to previous releases (hitting "Auto-generate release notes" usually produces a nicer output than Lerna's default).
 
-To publish a preview version (e.g. for testing), run `npm run release:preview`. This command can be executed on any branch, but you still need to have no uncommitted files. Please make sure to use a pre-release version to not conflict with production versions.
+To publish a preview version (e.g. for testing), run `pnpm release:preview`. This command can be executed on any branch, but you still need to have no uncommitted files. Please make sure to use a pre-release version to not conflict with production versions.
 
 ----
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,29 @@
+import prezly from '@prezly/eslint-config/nextjs';
+
+export default [
+    ...prezly,
+    {
+        files: ['./**/*.{ts,tsx,jsx,js,mjs}'],
+        languageOptions: {
+            parserOptions: {
+                project: ['./tsconfig.json'],
+            },
+        },
+        rules: {
+            'import/no-default-export': 'off',
+            'no-restricted-exports': 'off',
+            'func-style': 'off',
+            'import/no-cycle': 'off',
+            'react/jsx-props-no-spreading': 'off',
+            'no-underscore-dangle': 'off',
+            '@typescript-eslint/no-use-before-define': ['error', { functions: false }],
+            '@typescript-eslint/no-namespace': 'off',
+            '@typescript-eslint/ban-ts-comment': 'off',
+            'react-hooks/exhaustive-deps': 'warn',
+            '@typescript-eslint/no-explicit-any': 'off',
+            '@typescript-eslint/no-non-null-asserted-optional-chain': 'off',
+            '@typescript-eslint/no-unsafe-function-type': 'off',
+            'react-refresh/only-export-components': 'off',
+        },
+    },
+];
diff --git a/lerna.json b/lerna.json
@@ -2,6 +2,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "9.8.2",
-  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
+  "version": "10.0.4-alpha.0",
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json",
+  "npmClient": "pnpm"
 }
diff --git a/package.json b/package.json
@@ -2,37 +2,30 @@
   "name": "@prezly/theme-kit-js-monorepo",
   "version": "0.0.0",
   "private": true,
-  "workspaces": [
-    "packages/core",
-    "packages/intl",
-    "packages/react",
-    "packages/nextjs",
-    "packages/ui"
-  ],
   "scripts": {
-    "build": "npx lerna run build",
-    "dev:core": "npx lerna run dev --scope=@prezly/theme-kit-core",
-    "dev:nextjs": "npx lerna run dev --scope=@prezly/theme-kit-nextjs",
-    "dev:ui": "npx lerna run dev --scope=@prezly/theme-kit-ui",
-    "lint": "npx lerna run lint",
-    "lint:fix": "npx lerna run lint -- --fix",
+    "build": "pnpm exec lerna run build",
+    "dev:core": "pnpm exec lerna run dev --scope=@prezly/theme-kit-core",
+    "dev:nextjs": "pnpm exec lerna run dev --scope=@prezly/theme-kit-nextjs",
+    "dev:ui": "pnpm exec lerna run dev --scope=@prezly/theme-kit-ui",
+    "lint": "pnpm exec lerna run lint",
+    "lint:fix": "pnpm exec lerna run lint -- --fix",
     "prettier": "prettier --check './packages/**/*.(js|ts|tsx)'",
-    "prettier:fix": "npm run prettier -- --write --no-list-different",
-    "test": "npx lerna run test",
-    "typecheck": "npx lerna run typecheck",
-    "check": "npx lerna run lint,typecheck,test",
-    "release": "npm run release:prepare && npm run release:publish",
-    "release:preview": "npm run release:prepare && npm run release:publish:preview",
-    "release:prepare": "npx lerna run lint,test,build",
+    "prettier:fix": "pnpm prettier -- --write --no-list-different",
+    "test": "pnpm exec lerna run test",
+    "typecheck": "pnpm exec lerna run typecheck",
+    "check": "pnpm exec lerna run lint,typecheck,test",
+    "release": "pnpm release:prepare && pnpm release:publish",
+    "release:preview": "pnpm release:prepare && pnpm release:publish:preview",
+    "release:prepare": "pnpm exec lerna run lint,test,build",
     "release:publish": "lerna publish --no-private",
     "release:preview-tag": "./release-preview-tag.sh",
     "release:next-tag": "./release-next-tag.sh",
     "sync-package-versions": "node ./sync-package-versions.mjs"
   },
   "dependencies": {
-    "next": "^14.0.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "^15.1.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@babel/cli": "7.26.4",
@@ -42,30 +35,27 @@
     "@babel/preset-typescript": "7.26.0",
     "@dr.pogodin/babel-preset-svgr": "1.9.0",
     "@playwright/test": "1.49.1",
-    "@prezly/eslint-config": "5.3.2",
+    "@prezly/eslint-config": "6.0.0",
     "@prezly/sdk": "23.6.0",
     "@types/jest": "29.5.14",
-    "@types/node": "20.17.16",
-    "@types/react": "18.3.18",
-    "@types/react-dom": "18.3.5",
+    "@types/node": "22.10.7",
+    "@types/react": "19.0.7",
+    "@types/react-dom": "19.0.3",
     "babel-plugin-add-import-extension": "1.6.0",
     "babel-plugin-auto-import": "1.1.0",
     "babel-plugin-transform-remove-imports": "1.8.0",
-    "concurrently": "7.6.0",
-    "eslint": "8.57.1",
-    "eslint-config-next": "14.2.23",
+    "concurrently": "9.1.2",
+    "eslint": "9.18.0",
+    "eslint-config-next": "15.1.5",
     "jest": "29.7.0",
     "lerna": "8.1.9",
     "prettier": "3.4.2",
-    "rimraf": "5.0.10",
+    "rimraf": "6.0.1",
     "ts-jest": "29.2.5",
-    "typescript": "5.3.3"
+    "typescript": "5.7.3"
   },
   "sync-package-versions": {
     "workspace": true,
-    "packages": [
-      "@prezly/sdk",
-      "@prezly/uploadcare"
-    ]
+    "packages": ["@prezly/sdk", "@prezly/uploadcare"]
   }
 }
diff --git a/packages/core/.eslintrc.cjs b/packages/core/.eslintrc.cjs
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,4 +46,4 @@ storybook-static/ @@
     # Test
     coverage/
-    .nx/cache
+    .nx/