[BD-46] [WIP] docs: upgrade gatsby to v5

example/package.json

@@ -20,8 +20,8 @@
     "@edx/frontend-platform": "^4.2.0",
     "@faker-js/faker": "^7.6.0",
     "core-js": "^3.22.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {

icons/package.json

@@ -21,6 +21,6 @@
     "bootstrap-icons": "^1.10.5"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.2"
+    "react": "^16.8.6 || ^17.0.2 || ^18.0.0"
   }
 }

package.json

@@ -33,15 +33,15 @@
     "prepublishOnly": "npm run build",
     "semantic-release": "semantic-release",
     "snapshot": "jest --updateSnapshot",
-    "start": "npm start --workspace=www",
+    "start": "NODE_OPTIONS=--max-old-space-size=8192 npm start --workspace=www",
     "test": "jest --coverage",
     "test:watch": "npm run test -- --watch",
     "generate-component": "npm start --workspace=component-generator",
     "example:start": "npm start --workspace=example",
     "example:start:with-theme": "npm run start:with-theme --workspace=example",
     "generate-changelog": "node generate-changelog.js",
     "i18n_compile": "formatjs compile-folder --format transifex ./src/i18n/messages ./src/i18n/messages",
-    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --format transifex",
+    "i18n_extract": "formatjs extract 'src/**/*.{jsx,js,tsx,ts}' --out-file ./src/i18n/transifex_input.json --ignore='**/*.d.ts' --format transifex",
     "type-check": "tsc --noEmit && tsc --project www --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "build-types": "tsc --emitDeclarationOnly",
@@ -79,9 +79,8 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17.0.0",
-    "react-dom": "^16.8.6 || ^17.0.0",
-    "react-intl": "^5.25.1 || ^6.4.0"
+    "react": "^16.8.6 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.6 || ^17.0.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.16.8",
@@ -99,20 +98,19 @@
     "@formatjs/cli": "^5.0.2",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/git": "^10.0.1",
-    "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.0",
-    "@types/react": "17.0.0",
-    "@types/react-dom": "17.0.11",
-    "@types/react-test-renderer": "^18.0.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.7",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
+    "@types/react-test-renderer": "^18.0.5",
     "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "axios": "^0.27.2",
     "axios-mock-adapter": "^1.21.1",
-    "babel-jest": "^28.1.2",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.2.4",
     "commander": "^9.3.0",
     "eslint": "8.18.0",
@@ -124,19 +122,19 @@
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.3",
-    "jest-cli": "^28.1.2",
-    "jest-environment-jsdom": "^28.1.2",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "markdown-loader-jest": "^0.1.1",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-test-renderer": "^17.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.13.9",
     "sass": "^1.32.13",
     "semantic-release": "^20.1.3",
     "stylelint": "^14.7.1",
     "stylelint-config-standard-scss": "^4.0.0",
-    "ts-jest": "^28.0.7",
+    "ts-jest": "^29.1.1",
     "typescript": "^4.7.4"
   },
   "jest": {

src/ActionRow/README.md

@@ -32,7 +32,7 @@ ActionRow assumes that its last child is the primary action and lays out actions
 
 ## Usage with a Spacer
 
-ActionRow can also be used with a helper component ``ActionRow.Spacer`` to insert empty space between children
+ActionRow can also be used with a helper component `ActionRow.Spacer` to insert empty space between children
 
 ```jsx live
 <ActionRow>

src/DataTable/dataviews.mdx

@@ -110,17 +110,10 @@ It displays the data provided by the `DataTableContext` as an html table.
 </DataTable>
 ```
 
-<PropsTable displayName="Table" content='The DataTable.Table component expects to receive a react-table instance from the DataTableContext.' />
-
 ## Table Subcomponents
 
 Subcomponents of `DataTable.Table` can be used independently of the main component. They are designed for use with a `react-table` instance.
 
-<PropsTable displayName="TableRow" />
-<PropsTable displayName="TableCell" />
-<PropsTable displayName="TableHeaderCell" />
-<PropsTable displayName="TableHeaderRow" />
-
 ## CardView and alternate table components
 
 You may choose to use any table component by using the following code in your display component:

src/Dropzone/README.md

@@ -15,9 +15,9 @@ The `Dropzone` allows users to upload files via drag and drop, or by clicking th
 
 You will also need to provide upload logic yourself via `onProcessUpload` prop which accepts function that should take care of uploading the file to the backend (i.e. send HTTP request). 
 This function accepts an object with following content as its only argument:
-- {object} fileData - Metadata about the uploaded file.
-- {object} requestConfig - Config to pass to `axios` call (this is required to display progress bar and hande cancel action).
-- {function} handleError - Function to communicate to `Dropzone` that file upload resulted in failure, expects `Error` object as its only argument.
+- `{object}` fileData - Metadata about the uploaded file.
+- `{object}` requestConfig - Config to pass to `axios` call (this is required to display progress bar and hande cancel action).
+- `{function}` handleError - Function to communicate to `Dropzone` that file upload resulted in failure, expects `Error` object as its only argument.
 
 Each example below implements such a function.
 

www/gatsby-config.js → www/gatsby-config.mjs

@@ -1,8 +1,15 @@
-require('dotenv').config({
+import { fileURLToPath } from 'url';
+import { dirname } from 'path';
+import dotenv from 'dotenv';
+import rehypeSlugPlugin from 'rehype-slug';
+import rehypeAutolinkHeadingsPlugin from 'rehype-autolink-headings';
+import rehypeMdxCodeProps from 'rehype-mdx-code-props';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+dotenv.config({
   path: `.env.${process.env.NODE_ENV}`,
 });
-const rehypeSlugPlugin = require('rehype-slug');
-const rehypeAutolinkHeadingsPlugin = require('rehype-autolink-headings');
 
 const segmentPlugin = {
   resolve: 'gatsby-plugin-segment-js',
@@ -33,7 +40,7 @@ const plugins = [
       },
     },
   },
-  'gatsby-plugin-react-helmet',
+  'gatsby-plugin-mdx-source-name',
   {
     resolve: 'gatsby-plugin-manifest',
     options: {
@@ -45,59 +52,69 @@ const plugins = [
     resolve: 'gatsby-source-filesystem',
     options: {
       path: `${__dirname}/../src`,
+      ignore: ['**/*.(snap|test.jsx)'],
       name: 'components',
     },
   },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
-      path: `${__dirname}/../CHANGELOG.md`,
-      name: 'changelog',
+      path: `${__dirname}/src/pages`,
+      name: 'pages',
     },
   },
+  // {
+  //   resolve: 'gatsby-source-filesystem',
+  //   options: {
+  //     path: `${__dirname}/../CHANGELOG.md`,
+  //     name: 'changelog',
+  //   },
+  // },
   // Note this will throw a warning about conflicting field types during build, but it is O.K.
   // https://github.com/gatsbyjs/gatsby/issues/7027
   'gatsby-transformer-react-docgen',
   {
     resolve: 'gatsby-plugin-mdx',
     options: {
       extensions: ['.mdx', '.md'],
-      defaultLayouts: {
-        components: require.resolve(
-          './src/templates/component-page-template.tsx',
-        ),
-        default: require.resolve(
-          './src/templates/default-mdx-page-template.tsx',
-        ),
-      },
-      rehypePlugins: [
-        rehypeSlugPlugin,
-        [
-          rehypeAutolinkHeadingsPlugin,
-          {
-            behavior: 'append',
-            content: {
-              type: 'element',
-              tagName: 'span',
-              properties: {
-                className: 'pgn-doc__anchor',
+      mdxOptions: {
+        rehypePlugins: [
+          [
+            rehypeMdxCodeProps,
+            {
+              tagName: 'code'
+            },
+          ],
+          rehypeSlugPlugin,
+          [
+            rehypeAutolinkHeadingsPlugin,
+            {
+              behavior: 'append',
+              content: {
+                type: 'element',
+                tagName: 'span',
+                properties: {
+                  className: 'pgn-doc__anchor',
+                },
+                children: [
+                  {type: 'text', value: '#'},
+                ],
               },
-              children: [
-                { type: 'text', value: '#' },
-              ],
             },
-          },
+          ]
         ],
-      ],
+      }
     },
   },
   {
     resolve: 'gatsby-plugin-page-creator',
     options: {
       path: `${__dirname}/src/pages`,
-      ignore: ['insights.tsx'],
+      ignore: ['insights.tsx', '**/*.(md|mdx)'],
     },
   },
+  'gatsby-plugin-perf-budgets',
+  'gatsby-plugin-webpack-bundle-analyser-v2'
 ];
 
 if (process.env && process.env.SEGMENT_KEY) {
@@ -108,7 +125,7 @@ if (process.env && process.env.FEATURE_ENABLE_AXE) {
   plugins.push(axePlugin);
 }
 
-module.exports = {
+const config = {
   siteMetadata: {
     title: 'Paragon Design System',
     description: 'Technical documentation for the Paragon Design System.',
@@ -118,3 +135,5 @@ module.exports = {
   pathPrefix: process.env.PATH_PREFIX || '',
   plugins,
 };
+
+export default config;

www/package.json

@@ -5,41 +5,41 @@
   "dependencies": {
     "@docsearch/react": "^3.1.0",
     "@edx/brand-edx.org": "^2.1.2",
-    "@openedx/brand-openedx": "^1.2.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@mdx-js/mdx": "^1.6.22",
-    "@mdx-js/react": "^1.6.22",
+    "@mdx-js/mdx": "^2.3.0",
+    "@mdx-js/react": "^2.3.0",
+    "@openedx/brand-openedx": "^1.2.2",
     "analytics-node": "^6.0.0",
     "axios": "^0.27.2",
     "classnames": "^2.3.1",
     "color": "^4.2.3",
-    "gatsby": "^4.23.1",
-    "gatsby-plugin-manifest": "^4.17.0",
-    "gatsby-plugin-mdx": "^3.17.0",
+    "gatsby": "^5.12.9",
+    "gatsby-plugin-manifest": "^5.12.3",
+    "gatsby-plugin-mdx": "^5.12.3",
+    "gatsby-plugin-mdx-source-name": "^1.0.1",
     "gatsby-plugin-react-axe": "^0.5.0",
-    "gatsby-plugin-react-helmet": "^5.17.0",
-    "gatsby-plugin-sass": "^5.17.0",
-    "gatsby-plugin-segment-js": "^3.7.1",
-    "gatsby-source-filesystem": "^4.17.0",
-    "gatsby-transformer-react-docgen": "^7.17.0",
+    "gatsby-plugin-sass": "^6.12.3",
+    "gatsby-plugin-segment-js": "^5.0.0",
+    "gatsby-source-filesystem": "^5.12.1",
+    "gatsby-transformer-react-docgen": "^8.12.0",
     "localforage": "^1.10.0",
     "lodash.debounce": "^4.0.8",
     "prism-react-renderer": "^1.3.3",
     "prop-types": "^15.8.1",
     "query-string": "^8.1.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-docgen": "^5.4.2",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-focus-on": "^3.6.0",
-    "react-helmet": "^6.1.0",
-    "react-intl": "^5.25.1",
+    "react-intl": "6.5.1",
     "react-live": "^2.4.1",
     "rehype-autolink-headings": "^5.1.0",
+    "rehype-mdx-code-props": "^2.0.0",
     "rehype-slug": "^4.0.1",
     "sass": "^1.53.0",
     "sass-loader": "12.6.0",
-    "uuid": "^9.0.0",
-    "slugify": "^1.6.5"
+    "slugify": "^1.6.5",
+    "uuid": "^9.0.0"
   },
   "keywords": [
     "paragon",
@@ -52,7 +52,7 @@
   "scripts": {
     "build": "gatsby build --prefix-paths && npm run build-themes && playroom build",
     "clean": "gatsby clean",
-    "develop": "npm run build-themes && gatsby develop",
+    "develop": "npm run build-themes && gatsby develop --verbose",
     "develop:with-theme": "npm run develop",
     "lint": "eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "start": "npm run develop",
@@ -73,11 +73,12 @@
     "@types/color": "^3.0.3",
     "@types/mdx": "^2.0.3",
     "@types/mdx-js__react": "^1.5.5",
-    "@types/react-helmet": "^6.1.6",
     "css": "^3.0.0",
     "eslint": "8.18.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "file-loader": "6.2.0",
+    "gatsby-plugin-perf-budgets": "^0.0.18",
+    "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.31",
     "playroom": "^0.31.0"
   },
   "repository": {

www/src/components/ComponentsList.tsx

@@ -6,13 +6,8 @@ import { ComponentNavItem, IComponentNavItem } from './Menu';
 const componentsQuery = graphql`
   query componentsQuery {
     components: allMdx(
-      filter: {
-        parent: {
-          internal: { owner: { nin: "gatsby-transformer-react-docgen" } }
-        }
-        frontmatter: { type: {} }
-      }
-      sort: { fields: frontmatter___title }
+      filter: { parent: { internal: { owner: { nin: "gatsby-transformer-react-docgen" } } }, frontmatter: { type: {} } }
+      sort: { frontmatter: { title: ASC } }
     ) {
       all: nodes {
         ...ComponentPage