get openAPI component working

Author: DavieReid

.github/workflows/e2e.yml

@@ -28,7 +28,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/[email protected]
         with:
-          node-version: '16.10.0'
+          node-version: '20.11.0'
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn --frozen-lockfile

.github/workflows/release.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Use Node.js
         uses: actions/[email protected]
         with:
-          node-version: '16.10.0'
+          node-version: '20.11.0'
           registry-url: https://registry.npmjs.org/
           cache: 'yarn'
 

.github/workflows/test.yml

@@ -18,7 +18,7 @@ jobs:
       fail-fast: false
       matrix:
         os: [ubuntu-latest]
-        node-version: ['16.10.0']
+        node-version: ['20.11.0']
 
     steps:
       - uses: actions/checkout@v3
@@ -59,7 +59,7 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '16.10.0'
+          node-version: '20.11.0'
           cache: 'yarn'
       - name: Install Dependencies
         run: yarn --frozen-lockfile

package.json

@@ -57,6 +57,8 @@
     "@types/jest": "^29.1.2",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.0.0",
+    "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
     "@vanilla-extract/esbuild-plugin": "^2.3.1",
@@ -99,6 +101,7 @@
   "resolutions": {
     "@braintree/sanitize-url": "^6.0.0",
     "@types/react": "^18.2.46",
+    "@types/react-dom": "^18.2.18",
     "commander": "^9.4.0",
     "json5": "^1.0.2",
     "@salt-ds/lab": "1.0.0-alpha.25"

packages/mdx-components/src/BlockQuote/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import classnames from 'clsx';
 
-import { P2 } from '@jpmorganchase/mosaic-components';
 import styles from './index.css';
 
 export interface BlockQuoteProps extends React.HTMLProps<HTMLDivElement> {}
@@ -15,7 +14,7 @@ export const BlockQuote: React.FC<React.PropsWithChildren<BlockQuoteProps>> = ({
   return (
     <div className={classnames(className, styles.root)}>
       <div className={styles.watermark} />
-      <P2>{rawChildren}</P2>
+      <span>{rawChildren}</span>
     </div>
   );
 };

packages/open-api-component/package.json

@@ -23,6 +23,9 @@
       "default": "./dist/index.js"
     }
   },
+  "engines": {
+    "node": ">=20.0.0"
+  },
   "scripts": {
     "build": "npm-run-all --parallel build:*",
     "build:bundle": "node ../../scripts/bundle.mjs",
@@ -42,7 +45,7 @@
     "@vanilla-extract/sprinkles": "^1.6.1",
     "@vanilla-extract/recipes": "^0.5.1",
     "@types/swagger-ui-react": "^4.18.0",
-    "swagger-ui-react": "^5.0.0",
+    "swagger-ui-react": "^5.11.0",
     "clsx": "^2.0.0",
     "deepmerge": "^2.0.1",
     "lodash-es": "^4.17.21",

packages/open-api-component/src/IsomorphicSuspense.tsx

@@ -1,7 +1,13 @@
+'use client';
+
 /**
  * Keep this separate.
  * We want this to be loaded on the client and not the server to prevent
  * issues with swagger-ui-react dependencies.
+ *
+ * Also, swagger-ui-react needs node 20 to work
+ * See --> https://github.com/swagger-api/swagger-ui/issues/8245#issuecomment-1707703135
+ *
  */
 
 import SwaggerUI from 'swagger-ui-react';

packages/open-api-component/src/OpenAPI/SwaggerUi.tsx

@@ -1,6 +1,4 @@
-import React, { lazy } from 'react';
-
-import { IsomorphicSuspense } from '../IsomorphicSuspense';
+import React, { lazy, Suspense } from 'react';
 
 export interface OpenAPIProps {
   /** Additional class name for root class override */
@@ -12,7 +10,7 @@ export interface OpenAPIProps {
 const LazySwagger = lazy(() => import('./SwaggerUi'));
 
 export const OpenAPI: React.FC<React.PropsWithChildren<OpenAPIProps>> = ({ url }) => (
-  <IsomorphicSuspense fallback={<span>Loading Swagger component...</span>}>
+  <Suspense fallback={<span>Loading Swagger component...</span>}>
     <LazySwagger url={url} />
-  </IsomorphicSuspense>
+  </Suspense>
 );

packages/open-api-component/src/OpenAPI/index.tsx

@@ -0,0 +1,4 @@
+import './styles.css';
+import 'swagger-ui-react/swagger-ui.css';
+
+export * from './OpenAPI/index';