Upgrade React and Babel for Next.js 16 compatibility (#1156)

* Initial plan

* Upgrade React and Babel to fix Next.js 16 peer dependency errors

Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

* Update Node.js version to 20 in CI workflow

* Upgrade Node.js version from 18 to 20 in CI

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Author: Copilot

.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - run: yarn
       - name: Building
         run: yarn build
@@ -30,7 +30,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - uses: actions/download-artifact@v4
         with:
           name: octicons-build
@@ -52,7 +52,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - uses: actions/download-artifact@v4
         with:
           name: octicons-build
@@ -76,7 +76,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - uses: actions/download-artifact@v4
         with:
           name: octicons-build

lib/octicons_react/__tests__/tree-shaking.test.js

@@ -50,5 +50,5 @@ test('tree shaking single export', async () => {
   })
 
   const bundleSize = Buffer.byteLength(output[0].code.trim()) / 1000
-  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.292kB"`)
+  expect(`${bundleSize}kB`).toMatchInlineSnapshot(`"6.084kB"`)
 })

lib/octicons_react/package.json

@@ -40,20 +40,20 @@
     "primer"
   ],
   "devDependencies": {
-    "@babel/core": "7.19.1",
-    "@babel/generator": "7.19.0",
-    "@babel/preset-env": "7.19.1",
-    "@babel/preset-react": "7.18.6",
-    "@babel/types": "7.19.0",
+    "@babel/core": "^7.22.0",
+    "@babel/generator": "^7.22.0",
+    "@babel/preset-env": "^7.22.0",
+    "@babel/preset-react": "^7.22.0",
+    "@babel/types": "^7.22.0",
     "@github/prettier-config": "0.0.4",
     "@primer/components": "27.0.0",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "14.1.0",
     "@rollup/plugin-virtual": "2.1.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@types/react": "^18.0.20",
+    "@testing-library/react": "^13.4.0",
+    "@types/react": "^18.2.0",
     "babel-jest": "29.0.3",
     "eslint": "^6.5.1",
     "eslint-plugin-github": "4.1.3",
@@ -64,8 +64,8 @@
     "jest": "^29.0.3",
     "jest-environment-jsdom": "29.0.3",
     "next": "^16.1.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "3.0.2",
     "rollup": "^2.79.0",
     "styled-components": "^4.2.0",

lib/octicons_react/pages/index.js

@@ -4,7 +4,7 @@ import pkg from '../package.json'
 // eslint-disable-next-line import/no-namespace
 import * as Octicons from '../'
 
-// eslint-disable-next-line no-unused-vars
+// eslint-disable-next-line no-unused-vars, import/namespace
 const {default: _Octicon, ...iconsByName} = Octicons
 
 export default function App() {