@pie-lib/config-ui 11.30.0-mui-update.0 → 11.30.1-beta-1

package/src/layout/layout-contents.jsx

@@ -1,37 +1,16 @@
 import React from 'react';
+import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core';
 import Tabs from '../tabs';
 import classNames from 'classnames';
 
-const StyledContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-}));
-
-const StyledFlow = styled('div')(() => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-}));
-
-const StyledContentContainer = styled('div')(({ theme }) => ({
-  padding: `${theme.spacing(2)}px 0`,
-}));
-
-const StyledConfigContainer = styled('div')(() => ({
-  flex: '1',
-}));
-
-const StyledSettingsContainer = styled('div')(({ theme }) => ({
-  marginLeft: theme.spacing(2),
-}));
-
 class RawLayoutContents extends React.Component {
   static propTypes = {
     mode: PropTypes.oneOf(['tabbed', 'inline']),
     secondary: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    classes: PropTypes.object,
     dimensions: PropTypes.object,
   };
 
@@ -68,7 +47,7 @@ class RawLayoutContents extends React.Component {
   // }
 
   render() {
-    const { mode, secondary, children, dimensions } = this.props;
+    const { mode, secondary, children, classes, dimensions } = this.props;
     const { minHeight, minWidth, maxHeight, maxWidth } = dimensions || {};
     const configuration = this.getConfiguration();
 
@@ -86,18 +65,18 @@ class RawLayoutContents extends React.Component {
     }
 
     return (
-      <StyledContainer style={{ minHeight, minWidth, maxHeight, maxWidth }}>
+      <div className={classes.container} style={{ minHeight, minWidth, maxHeight, maxWidth }}>
         {mode === 'inline' && (
-          <StyledFlow>
-            <StyledConfigContainer className="design-container">{children}</StyledConfigContainer>
+          <div className={classnames(classes.flow, classes.contentContainer)}>
+            <div className={classnames(classes.configContainer, 'design-container')}>{children}</div>
             {hasSettingsPanel && (
-              <StyledSettingsContainer className="settings-container">{secondary}</StyledSettingsContainer>
+              <div className={classnames(classes.settingsContainer, 'settings-container')}>{secondary}</div>
             )}
-          </StyledFlow>
+          </div>
         )}
 
         {mode === 'tabbed' && hasSettingsPanel && (
-          <Tabs onChange={this.onTabsChange} contentClassName="content-container" indicatorColor="primary">
+          <Tabs onChange={this.onTabsChange} contentClassName={classes.contentContainer} indicatorColor="primary">
             <div title="Design" className="design-container">
               {children}
             </div>
@@ -108,11 +87,32 @@ class RawLayoutContents extends React.Component {
         )}
 
         {mode === 'tabbed' && !hasSettingsPanel && (
-          <StyledContentContainer className="design-container">{children}</StyledContentContainer>
+          <div className={classNames(classes.contentContainer, 'design-container')}>{children}</div>
         )}
-      </StyledContainer>
+      </div>
     );
   }
 }
 
-export default RawLayoutContents;
+const styles = (theme) => ({
+  flow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
+  contentContainer: {
+    padding: `${theme.spacing.unit * 2}px 0`,
+  },
+  configContainer: {
+    flex: '1',
+  },
+  settingsContainer: {
+    marginLeft: theme.spacing.unit * 2,
+  },
+});
+
+export default withStyles(styles)(RawLayoutContents);

package/src/layout/settings-box.jsx

@@ -1,21 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-
-const StyledSettingsBox = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.background.paper,
-  border: `2px solid ${theme.palette.grey[200]}`,
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'flex-start',
-  minWidth: '275px',
-  maxWidth: '300px',
-  padding: '20px 4px 4px 20px',
-  zIndex: 99,
-}));
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
 
 export class SettingsBox extends React.Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   };
@@ -23,10 +13,23 @@ export class SettingsBox extends React.Component {
   static defaultProps = {};
 
   render() {
-    const { className, children } = this.props;
+    const { classes, className, children } = this.props;
 
-    return <StyledSettingsBox className={className}>{children}</StyledSettingsBox>;
+    return <div className={classNames(classes.settingsBox, className)}>{children}</div>;
   }
 }
+const styles = (theme) => ({
+  settingsBox: {
+    backgroundColor: theme.palette.background.paper,
+    border: `2px solid ${theme.palette.grey[200]}`,
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'flex-start',
+    minWidth: '275px',
+    maxWidth: '300px',
+    padding: '20px 4px 4px 20px',
+    zIndex: 99,
+  },
+});
 
-export default SettingsBox;
+export default withStyles(styles)(SettingsBox);

package/src/mui-box/index.jsx

@@ -1,52 +1,60 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
 import debug from 'debug';
+import classNames from 'classnames';
 
 const log = debug('pie-elements:config-ui:mui-box');
 
-const StyledMuiBox = styled('div')(({ theme, focused }) => {
-  const light = theme.palette.mode === 'light';
+const MuiBox = withStyles((theme) => {
+  const light = theme.palette.type === 'light';
   const bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
 
-  log(theme.palette.primary[theme.palette.mode || 'light']);
+  log(theme.palette.primary[theme.palette.type || 'light']);
 
   return {
-    paddingTop: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    position: 'relative',
-    '&:before': {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      height: '1px',
-      content: '""',
-      position: 'absolute',
-      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: bottomLineColor,
+    muiBox: {
+      paddingTop: theme.spacing.unit,
+      paddingBottom: theme.spacing.unit,
+      position: 'relative',
+      '&:before': {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: '1px',
+        content: '""',
+        position: 'absolute',
+        transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+        pointerEvents: 'none',
+        backgroundColor: bottomLineColor,
+      },
+      '&:hover:before': {
+        height: '2px',
+      },
+      '&:after': {
+        left: 0,
+        right: 0,
+        bottom: 0,
+        height: '2px',
+        content: '""',
+        position: 'absolute',
+        transform: 'scaleX(0)',
+        transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
+        pointerEvents: 'none',
+        backgroundColor: theme.palette.primary[theme.palette.type], //'#304ffe'
+      },
     },
-    '&:hover:before': {
-      height: '2px',
-    },
-    '&:after': {
-      left: 0,
-      right: 0,
-      bottom: 0,
-      height: '2px',
-      content: '""',
-      position: 'absolute',
-      transform: focused ? 'scaleX(1)' : 'scaleX(0)',
-      transition: 'transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms',
-      pointerEvents: 'none',
-      backgroundColor: theme.palette.primary[theme.palette.mode], //'#304ffe'
+    focused: {
+      '&:after': {
+        transform: 'scaleX(1)',
+      },
     },
   };
-});
+})(({ children, classes, focused }) => {
+  const names = classNames(classes.muiBox, focused && classes.focused);
 
-const MuiBox = ({ children, focused }) => {
-  return <StyledMuiBox focused={focused}>{children}</StyledMuiBox>;
-};
+  return <div className={names}>{children}</div>;
+});
 
 MuiBox.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,

package/src/number-text-field-custom.jsx

@@ -1,31 +1,33 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import TextField from '@mui/material/TextField';
-import { styled } from '@mui/material/styles';
+import TextField from '@material-ui/core/TextField';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
 import isFinite from 'lodash/isFinite';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import Remove from '@mui/icons-material/Remove';
-import Add from '@mui/icons-material/Add';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import Remove from '@material-ui/icons/Remove';
+import Add from '@material-ui/icons/Add';
 import * as math from 'mathjs';
 
-const StyledTextField = styled(TextField)(() => ({
-  '& input[type=number]': {
-    MozAppearance: 'textfield',
+const styles = () => ({
+  input: {
+    '& input[type=number]': {
+      '-moz-appearance': 'textfield',
+    },
+    '& input[type=number]::-webkit-outer-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0,
+    },
+    '& input[type=number]::-webkit-inner-spin-button': {
+      '-webkit-appearance': 'none',
+      margin: 0,
+    },
   },
-  '& input[type=number]::-webkit-outer-spin-button': {
-    WebkitAppearance: 'none',
-    margin: 0,
+  iconButton: {
+    padding: '2px',
   },
-  '& input[type=number]::-webkit-inner-spin-button': {
-    WebkitAppearance: 'none',
-    margin: 0,
-  },
-}));
-
-const StyledIconButton = styled(IconButton)(() => ({
-  padding: '2px',
-}));
+});
 
 const fallbackNumber = (min, max) => {
   if (!isFinite(min) && !isFinite(max)) {
@@ -43,6 +45,7 @@ const fallbackNumber = (min, max) => {
 
 export class NumberTextFieldCustom extends React.Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     customValues: PropTypes.array,
     disabled: PropTypes.bool,
@@ -239,6 +242,7 @@ export class NumberTextFieldCustom extends React.Component {
   render() {
     const {
       className,
+      classes,
       label,
       disabled,
       error,
@@ -253,7 +257,7 @@ export class NumberTextFieldCustom extends React.Component {
       type = 'number',
     } = this.props;
     const { value } = this.state;
-    const names = className;
+    const names = classNames(className, classes.input);
     //Logic to disable the increment and decrement buttons
     let disabledStart = false;
     let disabledEnd = false;
@@ -266,7 +270,7 @@ export class NumberTextFieldCustom extends React.Component {
     }
 
     return (
-      <StyledTextField
+      <TextField
         variant={variant}
         inputRef={(ref) => (this.inputRef = ref)}
         disabled={disabled}
@@ -299,22 +303,24 @@ export class NumberTextFieldCustom extends React.Component {
           disableUnderline: disableUnderline,
           startAdornment: (
             <InputAdornment position="start">
-              <StyledIconButton
+              <IconButton
+                className={classes.iconButton}
                 disabled={disabled ? disabled : disabledStart}
                 onClick={(e) => this.changeValue(e, -1, true)}
-                size="large">
+              >
                 <Remove fontSize="small" />
-              </StyledIconButton>
+              </IconButton>
             </InputAdornment>
           ),
           endAdornment: (
             <InputAdornment position="end">
-              <StyledIconButton
+              <IconButton
+                className={classes.iconButton}
                 disabled={disabled ? disabled : disabledEnd}
                 onClick={(e) => this.changeValue(e, 1, true)}
-                size="large">
+              >
                 <Add fontSize="small" />
-              </StyledIconButton>
+              </IconButton>
             </InputAdornment>
           ),
         }}
@@ -328,4 +334,4 @@ export class NumberTextFieldCustom extends React.Component {
   }
 }
 
-export default NumberTextFieldCustom;
+export default withStyles(styles)(NumberTextFieldCustom);

package/src/number-text-field.jsx

@@ -1,18 +1,21 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import TextField from '@mui/material/TextField';
-import { styled } from '@mui/material/styles';
+import TextField from '@material-ui/core/TextField';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
 import debug from 'debug';
 import isFinite from 'lodash/isFinite';
-import InputAdornment from '@mui/material/InputAdornment';
+import InputAdornment from '@material-ui/core/InputAdornment';
 const log = debug('@pie-lib:config-ui:number-text-field');
 
-const StyledTextField = styled(TextField)(({ theme }) => ({
-  marginRight: theme.spacing(1),
-  '& label': {
-    width: 'max-content',
+const styles = (theme) => ({
+  root: {
+    marginRight: theme.spacing.unit,
+    '& label': {
+      width: 'max-content',
+    },
   },
-}));
+});
 
 const fallbackNumber = (min, max) => {
   if (!isFinite(min) && !isFinite(max)) {
@@ -30,6 +33,7 @@ const fallbackNumber = (min, max) => {
 export class NumberTextField extends React.Component {
   static propTypes = {
     disabled: PropTypes.bool,
+    classes: PropTypes.object.isRequired,
     className: PropTypes.string,
     inputClassName: PropTypes.string,
     onChange: PropTypes.func.isRequired,
@@ -142,6 +146,7 @@ export class NumberTextField extends React.Component {
   render() {
     const {
       className,
+      classes,
       label,
       disabled,
       suffix,
@@ -152,11 +157,12 @@ export class NumberTextField extends React.Component {
       showErrorWhenOutsideRange,
       variant,
     } = this.props;
+    const names = classNames(classes.root, className);
 
     const error = showErrorWhenOutsideRange && this.getError();
     return (
-      <StyledTextField
-        variant={disableUnderline ? 'filled' : (variant || 'standard')}
+      <TextField
+        variant={variant || 'standard'}
         inputRef={(ref) => {
           this.inputRef = ref;
         }}
@@ -167,23 +173,25 @@ export class NumberTextField extends React.Component {
         helperText={error}
         onChange={this.onChange}
         onBlur={this.onBlur}
-        onKeyDown={(e) => {
+        onKeyPress={(e) => {
           // once the Enter key is pressed, we force input blur
           if (e.key === 'Enter' && this.inputRef) {
             this.inputRef.blur();
           }
         }}
         type="number"
-        className={className}
-        slotProps={{
-          input: {
-            endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
-            className: inputClassName,
-            inputProps: {
-              min,
-              max,
-            },
-          },
+        className={names}
+        InputLabelProps={{
+          shrink: true,
+        }}
+        InputProps={{
+          endAdornment: suffix && <InputAdornment position="end">{suffix}</InputAdornment>,
+          className: inputClassName,
+          disableUnderline: disableUnderline,
+        }}
+        inputProps={{
+          min,
+          max,
         }}
         margin="normal"
       />
@@ -191,4 +199,4 @@ export class NumberTextField extends React.Component {
   }
 }
 
-export default NumberTextField;
+export default withStyles(styles)(NumberTextField);

package/src/radio-with-label.jsx

@@ -1,26 +1,22 @@
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Radio from '@mui/material/Radio';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
 import { color } from '@pie-lib/render-ui';
 
-const StyledFormControlLabel = styled(FormControlLabel)(() => ({
-  '& .MuiFormControlLabel-label': {
+export default withStyles({
+  label: {
     left: '-5px',
     position: 'relative',
   },
-}));
-
-const StyledRadio = styled(Radio)(() => ({
-  color: `${color.tertiary()} !important`,
-}));
-
-const RadioWithLabel = ({ label, value, checked, onChange }) => (
-  <StyledFormControlLabel
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
+})(({ label, value, checked, onChange, classes }) => (
+  <FormControlLabel
     value={value}
-    control={<StyledRadio checked={checked} onChange={onChange} />}
+    classes={{ label: classes.label }}
+    control={<Radio className={classes.customColor} checked={checked} onChange={onChange} />}
     label={label}
   />
-);
-
-export default RadioWithLabel;
+));

package/src/settings/display-size.jsx

@@ -1,23 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
+import Typography from '@material-ui/core/Typography';
+import { withStyles } from '@material-ui/core/styles';
 import NumberTextField from '../number-text-field';
 
-const StyledDisplaySize = styled('div')(({ theme }) => ({
-  display: 'flex',
-  paddingTop: theme.spacing(1),
-}));
-
-const DisplaySize = ({ size, label, onChange }) => {
+const DisplaySize = withStyles((theme) => ({
+  displaySize: {
+    display: 'flex',
+    paddingTop: theme.spacing.unit,
+  },
+}))(({ size, label, classes, onChange }) => {
   const updateSize = (key, v) => {
     onChange({ ...size, [key]: v });
   };
-  
   return (
     <div>
       <Typography>{label}</Typography>
-      <StyledDisplaySize>
+      <div className={classes.displaySize}>
         <NumberTextField
           label="Width"
           type="number"
@@ -36,10 +35,10 @@ const DisplaySize = ({ size, label, onChange }) => {
           value={size.height}
           onChange={(e, v) => updateSize('height', v)}
         />
-      </StyledDisplaySize>
+      </div>
     </div>
   );
-};
+});
 
 DisplaySize.propTypes = {
   size: PropTypes.shape({