Switch from mui/styles to emotion

ProjectMirador · Mar 15, 2024 · 8d88064 · 8d88064
1 parent b077630
commit 8d88064
Show file tree

Hide file tree

Showing 5 changed files with 112 additions and 98 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -69,6 +69,25 @@ module.exports = (api) => ({
         ignoreFilenames: ['node_modules'],
         removeImport: true,
       },
+    ],
+    [
+      "@emotion",
+      {
+        importMap: {
+          "@mui/system": {
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/system", "styled"]
+            }
+          },
+          "@mui/material/styles": {
+            styled: {
+              canonicalImport: ["@emotion/styled", "default"],
+              styledBaseImport: ["@mui/material/styles", "styled"]
+            }
+          }
+        }
+      }
     ]
   ].filter(Boolean)
 });
diff --git a/package.json b/package.json
@@ -22,16 +22,16 @@
     "test:watch": "jest --watch"
   },
   "dependencies": {
+    "@emotion/babel-plugin": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6"
   },
   "peerDependencies": {
+    "@mui/material": "^5.x",
     "mirador": "^4.0.0-alpha.1",
     "react": "18.x",
-    "react-dom": "18.x",
-    "@mui/material": "^5.x",
-    "@mui/styles": "^5.x"
+    "react-dom": "18.x"
   },
   "devDependencies": {
     "@babel/core": "^7.17.7",
@@ -44,7 +44,6 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@mui/material": "^5.13.5",
-    "@mui/styles": "^5.13.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
     "@testing-library/dom": "^9.2.0",
     "@testing-library/jest-dom": "^6.1.5",

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,3 @@
-import withTheme from '@mui/styles/withTheme';
 import * as actions from 'mirador/dist/es/src/state/actions';
 import { getWindowConfig, getViewer, getContainerId } from 'mirador/dist/es/src/state/selectors';
 import MiradorImageTools from './plugins/MiradorImageTools';
@@ -19,7 +18,7 @@ export const miradorImageToolsPlugin = [
       viewConfig: getViewer(state, { windowId }) || {},
     }),
     mode: 'add',
-    component: withTheme(MiradorImageTools),
+    component: MiradorImageTools,
     config: {
       translations,
     },

diff --git a/src/plugins/ImageTool.js b/src/plugins/ImageTool.js
@@ -1,35 +1,41 @@
 import React, { Component } from 'react';
-import compose from 'lodash/flowRight';
 import PropTypes from 'prop-types';
 import MiradorMenuButton from 'mirador/dist/es/src/containers/MiradorMenuButton';
 import Slider from '@mui/material/Slider';
-import { alpha } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 
-import withStyles from '@mui/styles/withStyles';
+const SliderContainer = styled('div')(({ small, theme: { palette } }) => ({
+  backgroundColor: alpha(palette.shades.main, 0.8),
+  borderRadius: 25,
+  top: 48,
+  marginTop: 2,
+  position: 'absolute',
+  height: 150,
+  zIndex: 100,
+  marginLeft: 2,
+  padding: [[2, 7, 2, 7]],
+  ...(small && {
+    top: 'auto',
+    right: 48,
+    width: 150,
+    height: 'auto',
+    marginTop: -46,
+    marginBottom: 2,
+    padding: [[4, 2, 4, 2]],
+  }),
+}));
 
-/** Styles for withStyles HOC */
-const styles = ({ palette, breakpoints }) => ({
-  slider: {
-    backgroundColor: alpha(palette.shades.main, 0.8),
-    borderRadius: 25,
-    top: 48,
-    marginTop: 2,
-    position: 'absolute',
-    height: 150,
-    zIndex: 100,
-    marginLeft: 2,
-    padding: [[2, 7, 2, 7]],
-    [breakpoints.down('sm')]: {
-      top: 'auto',
-      right: 48,
-      width: 150,
-      height: 'auto',
-      marginTop: -46,
-      marginBottom: 2,
-      padding: [[4, 2, 4, 2]],
-    },
-  },
-});
+const ImageToolToggleButton = styled(MiradorMenuButton)(({
+  theme: { palette },
+  ownerState: { open, toggled },
+}) => ({
+  ...(toggled && {
+    backgroundColor: `${alpha(palette.getContrastText(palette.shades.main), 0.25)} !important`,
+  }),
+  ...(open && {
+    backgroundColor: `${alpha(palette.getContrastText(palette.shades.main), 0.1)} !important`,
+  }),
+}));
 
 class ImageTool extends Component {
   constructor(props) {
@@ -61,38 +67,33 @@ class ImageTool extends Component {
 
   render() {
     const {
-      children, label, max, min, value, type, variant, windowId,
-      foregroundColor, classes, small,
+      children, label, max, min, value, type, variant, windowId, small,
     } = this.props;
     const { open } = this.state;
 
     const toggled = variant === 'toggle' && value > 0;
 
     const id = `${windowId}-${type}`;
 
-    let bubbleBg;
-    if (open || toggled) {
-      bubbleBg = alpha(foregroundColor, open ? 0.1 : 0.25);
-    }
-
     return (
       <div style={{ display: 'inline-block' }}>
-        <MiradorMenuButton
+        <ImageToolToggleButton
           id={`${id}-label`}
           aria-label={label}
           onClick={this.handleClick}
           aria-expanded={open}
           aria-controls={id}
-          style={{ backgroundColor: bubbleBg }}
+          ownerState={{ toggled, open }}
         >
           {children}
-        </MiradorMenuButton>
+        </ImageToolToggleButton>
 
         {open && (
-        <div
+        <SliderContainer
           id={id}
           aria-labelledby={`${id}-label`}
-          className={`MuiPaper-elevation4 ${classes.slider}`}
+          className="MuiPaper-elevation4"
+          small={small}
         >
           <Slider
             orientation={small ? 'horizontal' : 'vertical'}
@@ -101,7 +102,7 @@ class ImageTool extends Component {
             value={value}
             onChange={this.handleChange}
           />
-        </div>
+        </SliderContainer>
         )}
       </div>
     );
@@ -110,9 +111,6 @@ class ImageTool extends Component {
 
 ImageTool.propTypes = {
   children: PropTypes.node.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  classes: PropTypes.object.isRequired,
-  foregroundColor: PropTypes.string,
   label: PropTypes.string.isRequired,
   min: PropTypes.number,
   max: PropTypes.number,
@@ -126,12 +124,11 @@ ImageTool.propTypes = {
 };
 
 ImageTool.defaultProps = {
-  foregroundColor: 'rgb(0, 0, 0)',
   min: 0,
   max: 100,
   open: false,
   small: false,
   variant: 'slider',
 };
 
-export default compose(withStyles(styles))(ImageTool);
+export default ImageTool;