Merge pull request #50 from mturley/pf5-upgrade-peer-deps-fix

chore(deps): Upgrade to PF5 and latest documentation-framework, upgrade peer dependencies and fix warnings
patternfly · Feb 13, 2024 · 143e486 · 143e486
2 parents 52253bb + bc259c5
commit 143e486
Show file tree

Hide file tree

Showing 11 changed files with 3,552 additions and 4,570 deletions.
diff --git a/.github/workflows/build-lint-test.yml b/.github/workflows/build-lint-test.yml
@@ -31,7 +31,7 @@ jobs:
           key: ${{ runner.os }}-setup-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package.json', 'packages/module/package.json') }}
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -78,7 +78,7 @@ jobs:
           key: ${{ runner.os }}-setup-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package.json', 'packages/module/package.json') }}
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -131,7 +131,7 @@ jobs:
           key: ${{ runner.os }}-setup-14-${{ secrets.CACHE_VERSION }}-${{ hashFiles('package.json', 'packages/module/package.json') }}
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -32,7 +32,7 @@ jobs:
         if: steps.setup-cache.outputs.cache-hit != 'true'
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -19,7 +19,7 @@ jobs:
         shell: bash
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

diff --git a/.recipes/default/package.json b/.recipes/default/package.json
@@ -22,11 +22,12 @@
     "serve:a11y": "yarn workspace {{ tmplr.npm_scope }}/{{ tmplr.extension_name | kebab-case }} serve:a11y"
   },
   "devDependencies": {
-    "react": "^17",
-    "react-dom": "^17",
-    "typescript": "^4.7.4",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "typescript": "^5.2.2",
+    "@types/jest": "^29.5.6",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "concurrently": "^5.3.0",
     "eslint": "^8.0.1",
     "eslint-plugin-import": "^2.25.2",
@@ -48,10 +49,10 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-flow": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "13.5.0",
-    "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/dom": "9.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/dom": "^9.3.3",
     "jest-environment-jsdom": "^29.2.2",
     "serve": "^14.1.2"
   }

diff --git a/.recipes/default/packages/module/package.json b/.recipes/default/packages/module/package.json
@@ -29,19 +29,24 @@
     "access": "public"
   },
   "dependencies": {
-    "@patternfly/react-core": "^4.276.6"
+    "@patternfly/react-core": "^5.1.1"
   },
   "peerDependencies": {
-    "react": "^16.8 || ^17 || ^18",
-    "react-dom": "^16.8 || ^17 || ^18"
+    "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^1.10.1",
-    "@patternfly/patternfly": "^4.224.2",
-    "@patternfly/react-table": "^4.112.39",
-    "@patternfly/react-code-editor": "^4.82.113",
+    "@patternfly/documentation-framework": "^5.2.20",
+    "@patternfly/patternfly": "^5.1.0",
+    "@patternfly/react-table": "^5.1.1",
+    "@patternfly/react-code-editor": "^5.1.1",
     "rimraf": "^2.6.2",
     "@patternfly/patternfly-a11y": "^4.3.1",
-    "react-monaco-editor": "^0.51.0"
+    "react-monaco-editor": "^0.51.0",
+    "monaco-editor": "^0.34.1",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-proposal-private-methods": "^7.18.6"
   }
 }
diff --git a/.recipes/default/workflows/build-lint-test.yml b/.recipes/default/workflows/build-lint-test.yml
@@ -16,7 +16,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -52,7 +52,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -89,7 +89,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps
@@ -130,7 +130,7 @@ jobs:
           fi
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

diff --git a/.recipes/default/workflows/release.yml b/.recipes/default/workflows/release.yml
@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: '14'
+          node-version: '18'
       - uses: actions/cache@v2
         id: yarn-cache
         name: Cache npm deps

diff --git a/README.md b/README.md
@@ -21,4 +21,4 @@ From there you can:
 
 Upon pushing to your remote repo GitHub Actions should run which ensure that the extension can properly build, pass all tests, pass the linter check, and pass all accessibility tests. 
 
-If you add a token to the repo with the name `NPM_TOKEN` and automation permissions on NPM it should also automatically deploy the package to NPM once it has passed the above checks.
+If you add a token to the repo with the name `NPM_TOKEN` and automation permissions on NPM it should also automatically deploy the package to NPM once it has passed the above checks.
diff --git a/packages/module/src/ExtendedButton/__tests__/ExtendedButton.test.tsx b/packages/module/src/ExtendedButton/__tests__/ExtendedButton.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import { ExtendedButton } from '../ExtendedButton';
@@ -29,16 +29,17 @@ test('Passes inherited props to the returned component', () => {
 test('Renders as a primary button initially', () => {
   render(<ExtendedButton>Test</ExtendedButton>);
 
-  expect(screen.getByRole('button')).toHaveClass('pf-c-button pf-m-primary', { exact: true });
+  expect(screen.getByRole('button')).toHaveClass('pf-v5-c-button pf-m-primary', { exact: true });
 });
 
 test('Renders as a secondary button once it has been clicked once', () => {
   render(<ExtendedButton>Test</ExtendedButton>);
-
   const button = screen.getByRole('button');
-  userEvent.click(button);
+  userEvent.click(screen.getByRole('button'));
 
-  expect(button).toHaveClass('pf-c-button pf-m-secondary', { exact: true });
+  waitFor(() => {
+    expect(button).toHaveClass('pf-v5-c-button pf-m-secondary', { exact: true });
+  });
 });
 
 test('Renders as a tertiary button once it has been clicked twice', () => {
@@ -48,7 +49,9 @@ test('Renders as a tertiary button once it has been clicked twice', () => {
   userEvent.click(button);
   userEvent.click(button);
 
-  expect(button).toHaveClass('pf-c-button pf-m-tertiary', { exact: true });
+  waitFor(() => {
+    expect(button).toHaveClass('pf-v5-c-button pf-m-tertiary', { exact: true });
+  });
 });
 
 test('Loops back to rendering a primary button again after being clicked three times', () => {
@@ -59,7 +62,7 @@ test('Loops back to rendering a primary button again after being clicked three t
   userEvent.click(button);
   userEvent.click(button);
 
-  expect(button).toHaveClass('pf-c-button pf-m-primary', { exact: true });
+  expect(button).toHaveClass('pf-v5-c-button pf-m-primary', { exact: true });
 });
 
 test('Matches expected default snapshot', () => {

diff --git a/packages/module/src/ExtendedButton/__tests__/__snapshots__/ExtendedButton.test.tsx.snap b/packages/module/src/ExtendedButton/__tests__/__snapshots__/ExtendedButton.test.tsx.snap
@@ -4,9 +4,9 @@ exports[`Matches expected default snapshot 1`] = `
 <DocumentFragment>
   <button
     aria-disabled="false"
-    class="pf-c-button pf-m-primary"
+    class="pf-v5-c-button pf-m-primary"
     data-ouia-component-id="ouiaId"
-    data-ouia-component-type="PF4/Button"
+    data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"
   >
Original file line number	Diff line number	Diff line change
Expand Up		@@ -21,4 +21,4 @@ From there you can:

		Upon pushing to your remote repo GitHub Actions should run which ensure that the extension can properly build, pass all tests, pass the linter check, and pass all accessibility tests.

		If you add a token to the repo with the name `NPM_TOKEN` and automation permissions on NPM it should also automatically deploy the package to NPM once it has passed the above checks.
		If you add a token to the repo with the name `NPM_TOKEN` and automation permissions on NPM it should also automatically deploy the package to NPM once it has passed the above checks.