Upgrade next to v14 (#2837)

package.json

@@ -121,7 +121,9 @@
     "webpack-dev-server": "4.9.3",
     "@changesets/assemble-release-plan@^5.2.2": "patch:@changesets/assemble-release-plan@npm%3A5.2.2#./.yarn/patches/@changesets-assemble-release-plan-npm-5.2.2-11f5894b70.patch",
     "modular-scripts/rollup": "2.79.1",
-    "@salt-ds/lab": "workspace:*"
+    "@salt-ds/lab": "workspace:*",
+    "next": "^14.0.0",
+    "@next/eslint-plugin-next": "^14.0.0"
   },
   "browserslist": {
     "production": [

site/package.json

@@ -23,26 +23,26 @@
     "gen:css": "yarn node './cssGen.js'"
   },
   "dependencies": {
-    "@jpmorganchase/mosaic-cli": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-components": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-content-editor-plugin": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-layouts": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-site-components": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-site-preset-styles": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-source-git-repo": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-source-local-folder": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-standard-generator": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-store": "^0.1.0-beta.59",
-    "@jpmorganchase/mosaic-theme": "^0.1.0-beta.59",
+    "@jpmorganchase/mosaic-cli": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-components": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-content-editor-plugin": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-layouts": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-site-components": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-site-preset-styles": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-source-git-repo": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-source-local-folder": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-standard-generator": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-store": "^0.1.0-beta.60",
+    "@jpmorganchase/mosaic-theme": "^0.1.0-beta.60",
     "@philpl/buble": "^0.19.7",
     "@types/react": "^18.0.26",
     "lodash-es": "^4.17.21",
-    "next": "^13.5.2",
+    "next": "^14.0.4",
     "next-auth": "^4.23.1",
     "raw-loader": "^4.0.2"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "^13.5.2",
+    "@next/eslint-plugin-next": "^14.0.4",
     "@types/node": "^16.0.0",
     "concurrently": "^8.0.0",
     "cross-env": "^7.0.3",

site/src/components/components/LivePreview.tsx

@@ -1,4 +1,12 @@
-import { FC, ChangeEvent, useState, ReactNode, ReactElement } from "react";
+import {
+  FC,
+  ChangeEvent,
+  useState,
+  ReactNode,
+  ReactElement,
+  useEffect,
+  ElementType,
+} from "react";
 import clsx from "clsx";
 import { Switch } from "@salt-ds/core";
 import { SaltProvider } from "@salt-ds/core";
@@ -34,11 +42,34 @@ export const LivePreview: FC<LivePreviewProps> = ({
 
   const isMobileView = useIsMobileView();
 
-  const ComponentExample: () => ReactElement =
-    require(`../../examples/${componentName}`)[exampleName];
+  const [ComponentExample, setComponentExample] = useState<{
+    Example?: ElementType;
+    sourceCode: string;
+  }>({
+    Example: undefined,
+    sourceCode: "",
+  });
+  useEffect(() => {
+    async function fetchExample() {
+      const Example = (
+        (await import(`../../examples/${componentName}`)) as Record<
+          string,
+          ElementType
+        >
+      )[exampleName];
+      const sourceCode = (
+        (await import(
+          `!!raw-loader!../../examples/${componentName}/${exampleName}.tsx`
+        )) as Record<string, string>
+      ).default;
+
+      return { Example, sourceCode };
+    }
 
-  const codePreview =
-    require(`!!raw-loader!../../examples/${componentName}/${exampleName}.tsx`).default;
+    fetchExample()
+      .then((data) => setComponentExample(data))
+      .catch((e) => console.error(`Failed to load example ${exampleName}`, e));
+  }, [exampleName, componentName]);
 
   const {
     density,
@@ -75,7 +106,7 @@ export const LivePreview: FC<LivePreviewProps> = ({
             <div className={styles.exampleWithSwitch}>
               <div className={styles.example}>
                 <SaltProvider density={density}>
-                  {ComponentExample && <ComponentExample />}
+                  {ComponentExample.Example && <ComponentExample.Example />}
                 </SaltProvider>
               </div>
               <SaltProvider density="medium">
@@ -92,7 +123,7 @@ export const LivePreview: FC<LivePreviewProps> = ({
 
         {showCode && (
           <Pre className={styles.codePreview}>
-            <div className="language-tsx">{codePreview}</div>
+            <div className="language-tsx">{ComponentExample.sourceCode}</div>
           </Pre>
         )}
       </div>

site/src/components/components/PropsTable.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect } from "react";
+import { FC, useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { Table } from "../mdx/table";
 import { code, p, ul } from "../mdx";
@@ -32,21 +32,48 @@ type ComponentData = {
   props: Props;
 };
 
+type JSONData = {
+  props: Record<
+    string,
+    {
+      name: string;
+      type: { name: string };
+      description: string;
+      defaultValue?: { value: string };
+    }
+  >;
+  displayName?: string;
+};
+
 export const PropsTable: FC<PropsTableType> = ({
   packageName = "core",
   componentName,
 }) => {
-  const props: ComponentData[] = require(`../../props/${packageName}-props.json`);
-
-  const propsTableData = props.find(
-    ({ displayName }) => displayName === componentName
-  )?.props;
+  const [props, setProps] = useState({} as JSONData["props"]);
 
   useEffect(() => {
-    if (!propsTableData) {
-      console.warn(`No props were found for the ${componentName} component.`);
+    async function fetchProps() {
+      const props = (await import(`../../props/${packageName}-props.json`))
+        .default as JSONData[];
+
+      return props.find(({ displayName }) => displayName === componentName)
+        ?.props;
     }
-  }, []);
+
+    fetchProps()
+      .then((propsTableData) => {
+        if (!propsTableData) {
+          console.warn(
+            `No props were found for the ${componentName} component.`
+          );
+        } else {
+          setProps(propsTableData);
+        }
+      })
+      .catch(() => {
+        console.warn(`No props were found for the ${componentName} component.`);
+      });
+  }, [packageName, componentName]);
 
   return (
     <Table>
@@ -59,8 +86,8 @@ export const PropsTable: FC<PropsTableType> = ({
         </tr>
       </thead>
       <tbody>
-        {propsTableData &&
-          Object.values(propsTableData).map(
+        {props &&
+          Object.values(props).map(
             ({ name, type, description, defaultValue }) => (
               <tr key={name}>
                 <td>{name}</td>

site/src/components/mdx/pre/Pre.tsx

@@ -1,9 +1,12 @@
 import { FC, PropsWithChildren } from "react";
-import { components } from "@jpmorganchase/mosaic-site-components";
 import type { PreProps } from "@jpmorganchase/mosaic-components";
+import {
+  Pre as InnerPre,
+  withMarkdownSpacing,
+} from "@jpmorganchase/mosaic-components";
 import styles from "./Pre.module.css";
 
-const MosaicPre = components.pre;
+const MosaicPre = withMarkdownSpacing(InnerPre);
 
 export const Pre: FC<PropsWithChildren<PreProps>> = ({ ...props }) => (
   <div className={styles.pre}>

site/src/pages/_app.tsx

@@ -12,10 +12,11 @@ import {
   ImageProvider,
   LinkProvider,
   ThemeProvider,
+  getMarkdownComponents,
+  withMarkdownSpacing,
 } from "@jpmorganchase/mosaic-components";
 import { LayoutProvider } from "@jpmorganchase/mosaic-layouts";
 import { useCreateStore, StoreProvider } from "@jpmorganchase/mosaic-store";
-import { components as mosaicComponents } from "@jpmorganchase/mosaic-site-components";
 import { layouts as mosaicLayouts } from "@jpmorganchase/mosaic-layouts";
 import { SessionProvider } from "next-auth/react";
 import { themeClassName } from "@jpmorganchase/mosaic-theme";
@@ -40,10 +41,11 @@ import * as saltComponents from "../components";
 import { MyAppProps } from "../types/mosaic";
 
 const components = {
-  ...mosaicComponents,
+  ...getMarkdownComponents(),
   ...saltComponents,
   Homepage,
   Image,
+  img: withMarkdownSpacing(Image),
 };
 
 const layoutComponents = { ...mosaicLayouts, ...saltLayouts };