get openAPI component working

.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/OpenAPI/SwaggerUi.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/index.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/index.ts

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

packages/site-components/src/AppHeaderTabs/index.tsx

@@ -64,7 +64,6 @@ export function AppHeaderTabs({ menu = [] }: { menu: TabsMenu }) {
 
   useEffect(() => {
     if (pathname && size?.width) {
-      console.log('UPDATING');
       updateSelection(pathname);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps

packages/site-preset-styles/src/index.js

@@ -10,4 +10,6 @@ import '@jpmorganchase/mosaic-site-components/index.css';
 import '@jpmorganchase/mosaic-components/index.css';
 import '@jpmorganchase/mosaic-mdx-components/index.css';
 import '@jpmorganchase/mosaic-content-editor-plugin/index.css';
+import '@jpmorganchase/mosaic-open-api-component/index.css';
+
 import 'prismjs/themes/prism.css';

packages/site/public/search-data-condensed.json

@@ -1 +1 @@
-[{"title":"Mosaic","route":"/mosaic/index"},{"title":"Aliases","route":"/mosaic/author/aliases"},{"title":"Fragments","route":"/mosaic/author/fragments"},{"title":"Frontmatter","route":"/mosaic/author/frontmatter"},{"title":"Author","route":"/mosaic/author/index"},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax"},{"title":"Refs","route":"/mosaic/author/refs"},{"title":"Sidebar Configuration","route":"/mosaic/author/sidebars"},{"title":"Tags","route":"/mosaic/author/tags"},{"title":"UI Components","route":"/mosaic/author/ui-components"},{"title":"Configure","route":"/mosaic/configure/index"},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment"},{"title":"Fragments","route":"/mosaic/fragments/index"},{"title":"Tile A","route":"/mosaic/fragments/tile-a"},{"title":"Tile B","route":"/mosaic/fragments/tile-b"},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site"},{"title":"Getting Started","route":"/mosaic/getting-started/index"},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws"},{"title":"Publish","route":"/mosaic/publish/index"},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws"},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel"},{"title":"Test","route":"/mosaic/test/index"},{"title":"Admin","route":"/mosaic/configure/admin/index"},{"title":"Detail Highlight","route":"/mosaic/configure/layouts/detail-highlight"},{"title":"Detail Overview","route":"/mosaic/configure/layouts/detail-overview"},{"title":"Detail Technical","route":"/mosaic/configure/layouts/detail-technical"},{"title":"Layouts","route":"/mosaic/configure/layouts/index"},{"title":"Landing Layout","route":"/mosaic/configure/layouts/landing"},{"title":"Product Discover Layout","route":"/mosaic/configure/layouts/product-discover"},{"title":"Product Preview Layout","route":"/mosaic/configure/layouts/product-preview"},{"title":"Active mode","route":"/mosaic/configure/modes/active"},{"title":"Modes of operation","route":"/mosaic/configure/modes/index"},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file"},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3"},{"title":"$AliasPlugin","route":"/mosaic/configure/plugins/alias-plugin"},{"title":"BreadcrumbsPlugin","route":"/mosaic/configure/plugins/breadcrumbs-plugin"},{"title":"BrokenLinksPlugin","route":"/mosaic/configure/plugins/broken-links-plugin"},{"title":"$CodeModPlugin","route":"/mosaic/configure/plugins/codemod-plugin"},{"title":"Plugins","route":"/mosaic/configure/plugins/index"},{"title":"LazyPagePlugin","route":"/mosaic/configure/plugins/lazy-page-plugin"},{"title":"PagesWithoutFileExtPlugin","route":"/mosaic/configure/plugins/pages-wthout-extensions-plugin"},{"title":"PublicAssetsPlugin","route":"/mosaic/configure/plugins/public-assets-plugin"},{"title":"ReadingTimePlugin","route":"/mosaic/configure/plugins/reading-time-plugin"},{"title":"$RefPlugin","route":"/mosaic/configure/plugins/ref-plugin"},{"title":"SearchIndexPlugin","route":"/mosaic/configure/plugins/search-index-plugin"},{"title":"SharedConfigPlugin","route":"/mosaic/configure/plugins/shared-config-plugin"},{"title":"SidebarPlugin","route":"/mosaic/configure/plugins/sidebar-plugin"},{"title":"SiteMapPlugin","route":"/mosaic/configure/plugins/site-map-plugin"},{"title":"$TagPlugin","route":"/mosaic/configure/plugins/tag-plugin"},{"title":"TableOfContentsPlugin","route":"/mosaic/configure/plugins/toc-plugin"},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source"},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source"},{"title":"Sources","route":"/mosaic/configure/sources/index"},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source"},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules"},{"title":"Figma Source","route":"/mosaic/configure/sources/storybook-figma"},{"title":"Readme Source","route":"/mosaic/configure/sources/storybook-readme"},{"title":"Storybook Source","route":"/mosaic/configure/sources/storybook-source"},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components"},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css"},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index"},{"title":"Aliases Test","route":"/mosaic/test/aliases/index"},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight"},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview"},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical"},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit"},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width"},{"title":"Layouts","route":"/mosaic/test/layouts/index"},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing"},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter"},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover"},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview"},{"title":"Refs Data","route":"/mosaic/test/refs/data"},{"title":"Refs Test","route":"/mosaic/test/refs/index"},{"title":"Tags Test","route":"/mosaic/test/tags/index"},{"title":"$afterSource","route":"/mosaic/configure/plugins/lifecycle/after-source"},{"title":"afterUpdate","route":"/mosaic/configure/plugins/lifecycle/after-update"},{"title":"$beforeSend","route":"/mosaic/configure/plugins/lifecycle/before-send"},{"title":"Lifecycle Events","route":"/mosaic/configure/plugins/lifecycle/index"},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/lifecycle/should-clear-cache"},{"title":"shouldUpdateNamespaceSources","route":"/mosaic/configure/plugins/lifecycle/should-update-namespace-sources"},{"title":"Product A","route":"/mosaic/products/producta"},{"title":"Product B","route":"/mosaic/products/productb"}]
+[{"title":"Mosaic","route":"/mosaic/index"},{"title":"Aliases","route":"/mosaic/author/aliases"},{"title":"Fragments","route":"/mosaic/author/fragments"},{"title":"Frontmatter","route":"/mosaic/author/frontmatter"},{"title":"Author","route":"/mosaic/author/index"},{"title":"Markdown Syntax","route":"/mosaic/author/markdown-syntax"},{"title":"Refs","route":"/mosaic/author/refs"},{"title":"Sidebar Configuration","route":"/mosaic/author/sidebars"},{"title":"Tags","route":"/mosaic/author/tags"},{"title":"UI Components","route":"/mosaic/author/ui-components"},{"title":"Configure","route":"/mosaic/configure/index"},{"title":"Content Fragment","route":"/mosaic/fragments/content-fragment"},{"title":"Fragments","route":"/mosaic/fragments/index"},{"title":"Tile A","route":"/mosaic/fragments/tile-a"},{"title":"Tile B","route":"/mosaic/fragments/tile-b"},{"title":"Create a Site","route":"/mosaic/getting-started/create-a-site"},{"title":"Getting Started","route":"/mosaic/getting-started/index"},{"title":"Publish a site to AWS","route":"/mosaic/getting-started/publish-site-to-aws"},{"title":"Publish","route":"/mosaic/publish/index"},{"title":"Publish a site to AWS","route":"/mosaic/publish/publish-site-to-aws"},{"title":"Publish a site to Vercel","route":"/mosaic/publish/publish-site-to-vercel"},{"title":"Test","route":"/mosaic/test/index"},{"title":"Admin","route":"/mosaic/configure/admin/index"},{"title":"Detail Highlight","route":"/mosaic/configure/layouts/detail-highlight"},{"title":"Detail Overview","route":"/mosaic/configure/layouts/detail-overview"},{"title":"Detail Technical","route":"/mosaic/configure/layouts/detail-technical"},{"title":"Layouts","route":"/mosaic/configure/layouts/index"},{"title":"Landing Layout","route":"/mosaic/configure/layouts/landing"},{"title":"Product Discover Layout","route":"/mosaic/configure/layouts/product-discover"},{"title":"Product Preview Layout","route":"/mosaic/configure/layouts/product-preview"},{"title":"Active mode","route":"/mosaic/configure/modes/active"},{"title":"Modes of operation","route":"/mosaic/configure/modes/index"},{"title":"Snapshot file mode","route":"/mosaic/configure/modes/snapshot-file"},{"title":"Snapshot AWS/S3 mode","route":"/mosaic/configure/modes/snapshot-s3"},{"title":"$AliasPlugin","route":"/mosaic/configure/plugins/alias-plugin"},{"title":"BreadcrumbsPlugin","route":"/mosaic/configure/plugins/breadcrumbs-plugin"},{"title":"BrokenLinksPlugin","route":"/mosaic/configure/plugins/broken-links-plugin"},{"title":"$CodeModPlugin","route":"/mosaic/configure/plugins/codemod-plugin"},{"title":"Plugins","route":"/mosaic/configure/plugins/index"},{"title":"LazyPagePlugin","route":"/mosaic/configure/plugins/lazy-page-plugin"},{"title":"PagesWithoutFileExtPlugin","route":"/mosaic/configure/plugins/pages-wthout-extensions-plugin"},{"title":"PublicAssetsPlugin","route":"/mosaic/configure/plugins/public-assets-plugin"},{"title":"ReadingTimePlugin","route":"/mosaic/configure/plugins/reading-time-plugin"},{"title":"$RefPlugin","route":"/mosaic/configure/plugins/ref-plugin"},{"title":"SearchIndexPlugin","route":"/mosaic/configure/plugins/search-index-plugin"},{"title":"SharedConfigPlugin","route":"/mosaic/configure/plugins/shared-config-plugin"},{"title":"SidebarPlugin","route":"/mosaic/configure/plugins/sidebar-plugin"},{"title":"SiteMapPlugin","route":"/mosaic/configure/plugins/site-map-plugin"},{"title":"$TagPlugin","route":"/mosaic/configure/plugins/tag-plugin"},{"title":"TableOfContentsPlugin","route":"/mosaic/configure/plugins/toc-plugin"},{"title":"Git Repo Source","route":"/mosaic/configure/sources/git-repo-source"},{"title":"HTTP Source","route":"/mosaic/configure/sources/http-source"},{"title":"Sources","route":"/mosaic/configure/sources/index"},{"title":"Local Folder Source","route":"/mosaic/configure/sources/local-folder-source"},{"title":"Source Schedules","route":"/mosaic/configure/sources/schedules"},{"title":"Figma Source","route":"/mosaic/configure/sources/storybook-figma"},{"title":"Readme Source","route":"/mosaic/configure/sources/storybook-readme"},{"title":"Storybook Source","route":"/mosaic/configure/sources/storybook-source"},{"title":"Custom Components","route":"/mosaic/configure/theme/custom-components"},{"title":"Custom CSS","route":"/mosaic/configure/theme/custom-css"},{"title":"Theming Your Site","route":"/mosaic/configure/theme/index"},{"title":"Aliases Test","route":"/mosaic/test/aliases/index"},{"title":"Detail Highlight Test Page","route":"/mosaic/test/layouts/detail-highlight"},{"title":"Detail Overview Test Page","route":"/mosaic/test/layouts/detail-overview"},{"title":"Detail Technical Test Page","route":"/mosaic/test/layouts/detail-technical"},{"title":"Edit Layout","route":"/mosaic/test/layouts/edit"},{"title":"Full Width Layout","route":"/mosaic/test/layouts/full-width"},{"title":"Layouts","route":"/mosaic/test/layouts/index"},{"title":"Landing Layout Test Page","route":"/mosaic/test/layouts/landing"},{"title":"Newsletter Test Page","route":"/mosaic/test/layouts/newsletter"},{"title":"Product Discover Test Page","route":"/mosaic/test/layouts/product-discover"},{"title":"Product Preview Test Page","route":"/mosaic/test/layouts/product-preview"},{"title":"Open API component","route":"/mosaic/test/open-api/index"},{"title":"Refs Data","route":"/mosaic/test/refs/data"},{"title":"Refs Test","route":"/mosaic/test/refs/index"},{"title":"Tags Test","route":"/mosaic/test/tags/index"},{"title":"$afterSource","route":"/mosaic/configure/plugins/lifecycle/after-source"},{"title":"afterUpdate","route":"/mosaic/configure/plugins/lifecycle/after-update"},{"title":"$beforeSend","route":"/mosaic/configure/plugins/lifecycle/before-send"},{"title":"Lifecycle Events","route":"/mosaic/configure/plugins/lifecycle/index"},{"title":"shouldClearCache","route":"/mosaic/configure/plugins/lifecycle/should-clear-cache"},{"title":"shouldUpdateNamespaceSources","route":"/mosaic/configure/plugins/lifecycle/should-update-namespace-sources"},{"title":"Product A","route":"/mosaic/products/producta"},{"title":"Product B","route":"/mosaic/products/productb"}]

scripts/bundle.mjs

@@ -38,7 +38,11 @@ const esbuildConfig = {
   minify: true,
   format: 'esm',
   target: ['es2022'],
-  plugins: [nodeExternalsPlugin(), vanillaExtractPlugin({}), buildEndPlugin()],
+  plugins: [
+    nodeExternalsPlugin({ allowList: ['swagger-ui-react/swagger-ui.css'] }),
+    vanillaExtractPlugin({}),
+    buildEndPlugin()
+  ],
   external: ['react', 'react-dom', 'next/*', '@jpmorganchase/mosaic-*'],
   platform: packageName === '@jpmorganchase/mosaic-site-components-next' ? 'node' : 'browser'
 };