Refactor MUI integration: remove deprecated @mui/styles in climatemap…

…ped, update component snapshots

apps/climatemappedafrica/package.json

@@ -37,13 +37,14 @@
     "@commons-ui/core": "workspace:*",
     "@commons-ui/next": "workspace:*",
     "@commons-ui/payload": "workspace:*",
+    "@emotion/cache": "catalog:",
     "@emotion/react": "catalog:",
     "@emotion/styled": "catalog:",
+    "@emotion/server": "catalog:",
     "@hurumap/core": "workspace:*",
     "@hurumap/next": "workspace:*",
-    "@mui/material": "catalog:mui-styles",
-    "@mui/styles": "catalog:mui-styles",
-    "@mui/utils": "catalog:mui-styles",
+    "@mui/material": "catalog:",
+    "@mui/utils": "catalog:",
     "@mui/x-tree-view": "catalog:",
     "@next/env": "catalog:",
     "@payloadcms/bundler-webpack": "catalog:",

apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js

@@ -9,7 +9,7 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hjtrpa-MuiContainer-root"
     >
       <h4
-        class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-h4 css-7i7a1w-MuiTypography-root"
       >
         About Team
       </h4>

apps/climatemappedafrica/src/components/Card/Card.snap.js

@@ -3,7 +3,8 @@
 exports[`<Card /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-s2nibj-MuiPaper-root-MuiCard-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation0 MuiCard-root css-1mxzk6x-MuiPaper-root-MuiCard-root"
+    style="--Paper-shadow: none;"
   />
 </div>
 `;

apps/climatemappedafrica/src/components/DataIndicators/DataIndicators.snap.js

@@ -40,7 +40,7 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item css-18bgkre-MuiGrid-root"
           >
             <button
-              class="MuiButtonBase-root css-72d9li-MuiButtonBase-root"
+              class="MuiButtonBase-root css-58ah25-MuiButtonBase-root"
               tabindex="0"
               type="button"
             >
@@ -55,13 +55,10 @@ exports[`<DataIndicators /> renders unchanged 1`] = `
                 />
               </div>
               <p
-                class="MuiTypography-root MuiTypography-body1 css-1eogcpa-MuiTypography-root"
+                class="MuiTypography-root MuiTypography-body1 css-1euzdtt-MuiTypography-root"
               >
                 Overview
               </p>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
             </button>
           </div>
         </div>

apps/climatemappedafrica/src/components/DropdownSearch/DropdownSearch.snap.js

@@ -7,34 +7,36 @@ exports[`<DropdownSearch /> renders unchanged 1`] = `
     id="location-search"
   >
     <p
-      class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
     >
       Search for a location
     </p>
     <div
-      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-wn8n2y-MuiInputBase-root"
+      class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-19ymigm-MuiInputBase-root"
     >
       <input
         aria-label="search"
-        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+        class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
         placeholder="Search for a location"
         type="text"
         value=""
       />
       <button
-        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+        class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+        id=":r0:"
+        root="[object Object]"
         tabindex="0"
         type="button"
       >
+        <span
+          class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+        />
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
           focusable="false"
           viewBox="0 0 48 48"
         />
-        <span
-          class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-        />
       </button>
     </div>
     <div

apps/climatemappedafrica/src/components/HURUmap/TreeView/TreeView.snap.js

@@ -7,33 +7,33 @@ exports[`<TreeView /> renders unchanged 1`] = `
   >
     <ul
       aria-multiselectable="false"
-      class="MuiSimpleTreeView-root css-rejl51-MuiSimpleTreeView-root"
+      class="MuiSimpleTreeView-root css-1o8c9x7-MuiSimpleTreeView-root"
       id="mui-tree-view-1"
       role="tree"
       style="--TreeView-itemChildrenIndentation: 12px;"
     >
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-annual-temperature"
         role="treeitem"
         tabindex="0"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Annual Temperature
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>
@@ -42,25 +42,25 @@ exports[`<TreeView /> renders unchanged 1`] = `
       <li
         aria-expanded="false"
         aria-selected="false"
-        class="css-1uhp40g-MuiTreeItem2-root"
+        class="css-ezfdyn-MuiTreeItem2-root"
         id="mui-tree-view-1-temperature-variation"
         role="treeitem"
         tabindex="-1"
       >
         <div
-          class="content css-tbaszv-MuiTreeItem2-content"
+          class="content css-df642v-MuiTreeItem2-content"
         >
           <div
-            class="css-d6m21r-MuiTreeItem2-label"
+            class="css-13p7y6r-MuiTreeItem2-label"
           >
             Temperature Variation
           </div>
           <div
-            class="css-19d0qwr-MuiTreeItem2-iconContainer"
+            class="css-1qa0aux-MuiTreeItem2-iconContainer"
           >
             <div
               aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ahhuu0-MuiSvgIcon-root"
+              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1vb28ga-MuiSvgIcon-root"
               focusable="false"
             />
           </div>

apps/climatemappedafrica/src/components/Hero/Hero.snap.js

@@ -20,7 +20,7 @@ exports[`<Hero /> renders unchanged 1`] = `
       class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1hqp65g-MuiContainer-root"
     >
       <div
-        class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"
+        class="MuiGrid-root MuiGrid-container css-15wb4z1-MuiGrid-root"
       >
         <div
           class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-direction-xs-column MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-1kvfo90-MuiGrid-root"
@@ -62,34 +62,36 @@ exports[`<Hero /> renders unchanged 1`] = `
                 id="location-search"
               >
                 <p
-                  class="MuiTypography-root MuiTypography-body1 css-1yh8kls-MuiTypography-root"
+                  class="MuiTypography-root MuiTypography-body1 css-1miz5wq-MuiTypography-root"
                 >
                   Search for a location
                 </p>
                 <div
-                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-14f5sin-MuiInputBase-root"
+                  class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1c0cgss-MuiInputBase-root"
                 >
                   <input
                     aria-label="search"
-                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
+                    class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yimnyd-MuiInputBase-input"
                     placeholder="Search for a location"
                     type="text"
                     value=""
                   />
                   <button
-                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-14movjq-MuiButtonBase-root-MuiIconButton-root"
+                    class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-15uzaf9-MuiButtonBase-root-MuiIconButton-root"
+                    id=":r0:"
+                    root="[object Object]"
                     tabindex="0"
                     type="button"
                   >
+                    <span
+                      class="MuiIconButton-loadingIndicator css-165vu30-MuiIconButton-loadingIndicator"
+                    />
                     <svg
                       aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1nqw60y-MuiSvgIcon-root"
                       focusable="false"
                       viewBox="0 0 48 48"
                     />
-                    <span
-                      class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                    />
                   </button>
                 </div>
                 <div

apps/climatemappedafrica/src/components/Summary/Summary.snap.js

@@ -15,12 +15,12 @@ exports[`<Summary /> renders unchanged 1`] = `
           class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-lg-4 css-u2oqkr-MuiGrid-root"
         >
           <h2
-            class="MuiTypography-root MuiTypography-h2 css-yrv1vq-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h2 css-1vtq9iq-MuiTypography-root"
           >
             History
           </h2>
           <h5
-            class="MuiTypography-root MuiTypography-h5 css-1fb4hg2-MuiTypography-root"
+            class="MuiTypography-root MuiTypography-h5 css-z49wvx-MuiTypography-root"
           >
             The ClimateMapped.AFRICA project by the CfA Datalab team is a data storytelling initiative designed to make 120 years of climate sampling data accessible to experts, journalists, concerned citizens, and researchers. This project chronicles Africa's climate history, using data storytelling techniques to present temperature trends and analysis at both national and sub-national levels
           </h5>

apps/climatemappedafrica/src/pages/_app.js

@@ -1,6 +1,5 @@
 import { CssBaseline } from "@mui/material";
 import { ThemeProvider, StyledEngineProvider } from "@mui/material/styles";
-import { ThemeProvider as StyledThemeProvider } from "@mui/styles";
 import { useRouter } from "next/router";
 import { DefaultSeo } from "next-seo";
 import PropTypes from "prop-types";
@@ -45,11 +44,9 @@ export default function MyApp(props) {
       <DefaultSeo {...SEO} />
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
-          <StyledThemeProvider theme={theme}>
-            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
-            <CssBaseline />
-            <Component {...pageProps} />
-          </StyledThemeProvider>
+          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+          <CssBaseline />
+          <Component {...pageProps} />
         </ThemeProvider>
       </StyledEngineProvider>
     </>

apps/climatemappedafrica/src/pages/_document.js

@@ -1,9 +1,14 @@
-import ServerStyleSheets from "@mui/styles/ServerStyleSheets";
+import createCache from "@emotion/cache";
+import createEmotionServer from "@emotion/server/create-instance";
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import React from "react";
 
 import theme from "@/climatemappedafrica/theme";
 
+function createEmotionCache() {
+  return createCache({ key: "css", prepend: true });
+}
+
 export default class MyDocument extends Document {
   render() {
     return (
@@ -80,22 +85,32 @@ MyDocument.getInitialProps = async (ctx) => {
   // 4. page.render
 
   // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets();
+  const cache = createEmotionCache();
+  const { extractCriticalToChunks } = createEmotionServer(cache);
   const originalRenderPage = ctx.renderPage;
 
   ctx.renderPage = () =>
     originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+      enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,
     });
 
   const initialProps = await Document.getInitialProps(ctx);
 
+  const emotionStyles = extractCriticalToChunks(initialProps.html);
+  const emotionStyleTags = emotionStyles.styles.map((style) => (
+    <style
+      data-emotion={`${style.key} ${style.ids.join(" ")}`}
+      key={style.key}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: style.css }}
+    />
+  ));
   return {
     ...initialProps,
     // Styles fragment is rendered after the app and page rendering finish.
     styles: [
       ...React.Children.toArray(initialProps.styles),
-      sheets.getStyleElement(),
+      ...emotionStyleTags,
     ],
   };
 };