fix: @mui/base breaking rename (#566)

This is caused by mui/material-ui#36873. Signed-off-by: tison <wander4096@gmail.com>
apache · May 9, 2023 · d458ab2 · d458ab2
1 parent 3e03a41
commit d458ab2
Show file tree

Hide file tree

Showing 6 changed files with 247 additions and 224 deletions.
diff --git a/package.json b/package.json
@@ -20,11 +20,12 @@
     "@docusaurus/plugin-client-redirects": "2.4.0",
     "@docusaurus/plugin-google-analytics": "2.4.0",
     "@docusaurus/preset-classic": "2.4.0",
-    "@emotion/react": "^11.7.1",
-    "@emotion/styled": "^11.6.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^1.6.22",
-    "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.2.5",
+    "@mui/base": "^5.0.0-alpha.128",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.12.3",
     "@svgr/webpack": "^6.1.2",
     "bootstrap": "^3.3.7",
     "chokidar": "^3.5.3",

diff --git a/src/pages/case-studies.js b/src/pages/case-studies.js
@@ -2,11 +2,11 @@ import React, { useState } from "react";
 import Layout from "@theme/Layout";
 import CaseStudyCards from "../components/CaseStudyCards";
 import PropTypes from 'prop-types';
-import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled';
-import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+import Select, { selectClasses } from '@mui/base/Select';
+import Option, { optionClasses } from '@mui/base/Option';
+import Popper from '@mui/base/Popper';
 import { styled } from '@mui/system';
-const csObj = 
+const csObj =
   {
 
     financial_services:  [
@@ -281,7 +281,7 @@ const csObj =
         description: "Apache Pulsar has attracted our attention with its excellent features and great architecture."
       },
     ]
-  
+
 };
 
 let allArr = [];
@@ -331,11 +331,11 @@ const StyledButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
 
-  &.${selectUnstyledClasses.focusVisible} {
+  &.${selectClasses.focusVisible} {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 
-  &.${selectUnstyledClasses.expanded} {
+  &.${selectClasses.expanded} {
     &::after {
       content: '▴';
     }
@@ -365,7 +365,7 @@ const StyledListbox = styled('ul')(
   `,
 );
 
-const StyledOption = styled(OptionUnstyled)(
+const StyledOption = styled(Option)(
   ({ theme }) => `
   list-style: none;
   padding: 8px;
@@ -376,33 +376,33 @@ const StyledOption = styled(OptionUnstyled)(
     border-bottom: none;
   }
 
-  &.${optionUnstyledClasses.selected} {
+  &.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.${optionUnstyledClasses.highlighted} {
+  &.${optionClasses.highlighted} {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
+  &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.${optionUnstyledClasses.disabled} {
+  &.${optionClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
 
-  &:hover:not(.${optionUnstyledClasses.disabled}) {
+  &:hover:not(.${optionClasses.disabled}) {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
   `,
 );
 
-const StyledPopper = styled(PopperUnstyled)`
+const StyledPopper = styled(Popper)`
   z-index: 10;
 `;
 
@@ -423,7 +423,7 @@ function CustomSelect(props) {
     ...props.components,
   };
 
-  return <SelectUnstyled {...props} components={components} />;
+  return <Select {...props} components={components} />;
 }
 
 CustomSelect.propTypes = {

diff --git a/src/pages/ecosystem.js b/src/pages/ecosystem.js
@@ -1,14 +1,12 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
 import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import EcoCards from "../components/EcoCards";
-import TabsUnstyled from '@mui/base/TabsUnstyled';
 import ecoObj from '@site/data/ecosystem.js';
 import PropTypes from 'prop-types';
-import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled';
-import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
-import PopperUnstyled from '@mui/base/PopperUnstyled';
-import { styled } from '@mui/system';
+import Select, {selectClasses} from '@mui/base/Select';
+import Option, {optionClasses} from '@mui/base/Option';
+import Popper from '@mui/base/Popper';
+import {styled} from '@mui/system';
 
 
 // create combine the arrays from each category.
@@ -67,11 +65,11 @@ const StyledButton = styled('button')(
     border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
 
-  &.${selectUnstyledClasses.focusVisible} {
+  &.${selectClasses.focusVisible} {
     outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[100]};
   }
 
-  &.${selectUnstyledClasses.expanded} {
+  &.${selectClasses.expanded} {
     &::after {
       content: '▴';
     }
@@ -101,7 +99,7 @@ const StyledListbox = styled('ul')(
   `,
 );
 
-const StyledOption = styled(OptionUnstyled)(
+const StyledOption = styled(Option)(
   ({ theme }) => `
   list-style: none;
   padding: 8px;
@@ -112,33 +110,33 @@ const StyledOption = styled(OptionUnstyled)(
     border-bottom: none;
   }
 
-  &.${optionUnstyledClasses.selected} {
+  &.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.${optionUnstyledClasses.highlighted} {
+  &.${optionClasses.highlighted} {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.${optionUnstyledClasses.highlighted}.${optionUnstyledClasses.selected} {
+  &.${optionClasses.highlighted}.${optionClasses.selected} {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.${optionUnstyledClasses.disabled} {
+  &.${optionClasses.disabled} {
     color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
   }
 
-  &:hover:not(.${optionUnstyledClasses.disabled}) {
+  &:hover:not(.${optionClasses.disabled}) {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
   `,
 );
 
-const StyledPopper = styled(PopperUnstyled)`
+const StyledPopper = styled(Popper)`
   z-index: 10;
 `;
 
@@ -159,7 +157,7 @@ function CustomSelect(props) {
     ...props.components,
   };
 
-  return <SelectUnstyled {...props} components={components} />;
+  return <Select {...props} components={components} />;
 }
 
 CustomSelect.propTypes = {

diff --git a/src/pages/events.js b/src/pages/events.js
@@ -1,10 +1,10 @@
 import * as React from "react";
 import Layout from "@theme/Layout";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import TabsUnstyled from '@mui/base/TabsUnstyled';
-import TabsListUnstyled from '@mui/base/TabsListUnstyled';
-import TabPanelUnstyled from '@mui/base/TabPanelUnstyled';
-import TabUnstyled from '@mui/base/TabUnstyled';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import Tab from '@mui/base/Tab';
 import EventCards from "../components/EventCards";
 import FeaturedEvent from "../components/FeaturedEvent";
 const resObj = require("../../data/events.js");
@@ -62,41 +62,41 @@ export default function Events() {
           </div>
         </section>
         <section className="main-content waves-bg pt-12 pb-48 mb-24">
-          <TabsUnstyled
+          <Tabs
             defaultValue={0}
             className="tabs tabs--resources block my-24 relative z-5"
           >
-            <TabsListUnstyled className="block text--center tabs-bar py-8 px-4">
-              <TabUnstyled className="mx-2">Meetups</TabUnstyled>
-              <TabUnstyled className="mx-2">Playlists</TabUnstyled>
+            <TabsList className="block text--center tabs-bar py-8 px-4">
+              <Tab className="mx-2">Meetups</Tab>
+              <Tab className="mx-2">Playlists</Tab>
               {futureEvents.length && (
-                <TabUnstyled className="mx-2">Upcoming Events</TabUnstyled>
+                <Tab className="mx-2">Upcoming Events</Tab>
               )}
 
-              <TabUnstyled className="mx-2">Past Events</TabUnstyled>
-            </TabsListUnstyled>
-            <TabPanelUnstyled value={0}>
+              <Tab className="mx-2">Past Events</Tab>
+            </TabsList>
+            <TabPanel value={0}>
               <EventCards type="meetups" events={resObj.meetups} />
-            </TabPanelUnstyled>
-            <TabPanelUnstyled value={1}>
+            </TabPanel>
+            <TabPanel value={1}>
               <EventCards type="playlists" events={resObj.playlists} />
-            </TabPanelUnstyled>
+            </TabPanel>
             {futureEvents.length ? (
               <>
-                <TabPanelUnstyled value={2}>
+                <TabPanel value={2}>
                   {" "}
                   <EventCards type="upcoming events" events={futureEvents} />
-                </TabPanelUnstyled>
-                <TabPanelUnstyled value={3}>
+                </TabPanel>
+                <TabPanel value={3}>
                   <EventCards type="past events" events={pastEvents} />
-                </TabPanelUnstyled>
+                </TabPanel>
               </>
             ) : (
-              <TabPanelUnstyled value={2}>
+              <TabPanel value={2}>
                 <EventCards type="past events" events={pastEvents} />
-              </TabPanelUnstyled>
+              </TabPanel>
             )}
-          </TabsUnstyled>
+          </Tabs>
         </section>
       </div>
     </Layout>

diff --git a/src/pages/resources.js b/src/pages/resources.js
@@ -1,10 +1,10 @@
 import React, { useState } from "react";
 import Layout from "@theme/Layout";
 import ResourceCards from "../components/ResourceCards";
-import TabsUnstyled from '@mui/base/TabsUnstyled';
-import TabsListUnstyled from '@mui/base/TabsListUnstyled';
-import TabPanelUnstyled from '@mui/base/TabPanelUnstyled';
-import TabUnstyled from '@mui/base/TabUnstyled';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import Tab from '@mui/base/Tab';
 import resObj from '../../data/resources.js';
 
 // this file contains the resource data needed to fill the cards.
@@ -16,7 +16,7 @@ export default function Resources() {
     <Layout
       title={`Resources`}
       description="Learn about the basics of using Apache Pulsar"
-    >    
+    >
       <div className="page-wrap tailwind">
         <section className="hero">
           <div className="inner text--left">
@@ -30,20 +30,20 @@ export default function Resources() {
           </div>
         </section>
         <section className="main-content waves-bg py-12 mb-24">
-          
-          <TabsUnstyled defaultValue={0} className="tabs tabs--resources block my-24 relative z-5">
-            <TabsListUnstyled className="block text--center tabs-bar py-8 px-4">
-              <TabUnstyled className="mx-2">Articles</TabUnstyled>
-              <TabUnstyled className="mx-2">Presentations</TabUnstyled>
-            </TabsListUnstyled>
+
+          <Tabs defaultValue={0} className="tabs tabs--resources block my-24 relative z-5">
+            <TabsList className="block text--center tabs-bar py-8 px-4">
+              <Tab className="mx-2">Articles</Tab>
+              <Tab className="mx-2">Presentations</Tab>
+            </TabsList>
             <form className="search-form relative z10 text--center">
               <label className="block mb-4">Search by keyword, presenter, forum, or tag: </label>
               <input type="text" className="ml-2 px-2" name="search" value={searchString} onChange={e => setSearch(e.target.value)} />
               <div className="inline-block px-4 cursor-pointer ml-4 underline underline-offset-1 text-sm font-light" onClick={e => setSearch('')} >Clear Search</div>
             </form>
-            <TabPanelUnstyled value={0}><ResourceCards search={searchString} type="Article" resources={resObj.articles} /></TabPanelUnstyled>
-            <TabPanelUnstyled value={1}><ResourceCards search={searchString} type="Presentation" resources={resObj.presentations} /></TabPanelUnstyled>
-          </TabsUnstyled>
+            <TabPanel value={0}><ResourceCards search={searchString} type="Article" resources={resObj.articles} /></TabPanel>
+            <TabPanel value={1}><ResourceCards search={searchString} type="Presentation" resources={resObj.presentations} /></TabPanel>
+          </Tabs>
         </section>
       </div>
     </Layout>