@pie-lib/config-ui 11.26.6-esmbeta.0 → 11.27.0-mui-update.0

package/src/feedback-config/group.jsx

@@ -1,42 +1,42 @@
 import PropTypes from 'prop-types';
 import RadioWithLabel from '../radio-with-label';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 
-const styles = (theme) => ({
-  radioLabel: {
+const StyledChoiceHolder = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledChoice = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledRadioWithLabel = styled(RadioWithLabel)(({ theme }) => ({
+  '& .MuiFormControlLabel-label': {
     fontSize: theme.typography.fontSize - 2,
   },
-  choice: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  choiceHolder: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
+}));
 
 const Group = (props) => {
-  const { feedbackLabels, value, classes, className, onChange, keys } = props;
+  const { feedbackLabels, value, className, onChange, keys } = props;
 
   return (
-    <div className={classNames(classes.choiceHolder, className)}>
+    <StyledChoiceHolder className={className}>
       {keys.map((key) => {
         return (
-          <div className={classes.choice} key={key}>
-            <RadioWithLabel
+          <StyledChoice key={key}>
+            <StyledRadioWithLabel
               value={key}
               checked={value === key}
-              classes={{ label: classes.radioLabel }}
               onChange={(e) => onChange(e.currentTarget.value)}
               label={feedbackLabels[key]}
             />
-          </div>
+          </StyledChoice>
         );
       })}
-    </div>
+    </StyledChoiceHolder>
   );
 };
 
@@ -44,9 +44,8 @@ Group.propTypes = {
   className: PropTypes.string,
   feedbackLabels: PropTypes.object.isRequired,
   value: PropTypes.string.isRequired,
-  classes: PropTypes.object.isRequired,
   keys: PropTypes.arrayOf(PropTypes.string),
   onChange: PropTypes.func,
 };
 
-export default withStyles(styles)(Group);
+export default Group;

package/src/feedback-config/index.jsx

@@ -1,27 +1,26 @@
 import FeedbackSelector, { FeedbackType } from './feedback-selector';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { styled } from '@mui/material/styles';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import merge from 'lodash/merge';
 
 export { FeedbackSelector };
 
-const style = {
-  feedbackContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-  },
-  panelDetails: {
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-};
+const StyledFeedbackContainer = styled('div')(() => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+}));
+
+const StyledAccordionDetails = styled(AccordionDetails)(() => ({
+  paddingTop: 0,
+  paddingBottom: 0,
+}));
 
 export const buildDefaults = (input) => {
   return merge(
@@ -45,7 +44,6 @@ export class FeedbackConfig extends React.Component {
       partial: PropTypes.shape(FeedbackType),
     }),
     onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
     toolbarOpts: PropTypes.object,
   };
 
@@ -68,17 +66,17 @@ export class FeedbackConfig extends React.Component {
   onPartialChange = this.onChange.bind(this, 'partial');
 
   render() {
-    const { classes, className, allowPartial, feedback, toolbarOpts } = this.props;
+    const { className, allowPartial, feedback, toolbarOpts } = this.props;
 
     return (
       <div className={className}>
-        <ExpansionPanel>
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography className={classes.heading}>Feedback</Typography>
-          </ExpansionPanelSummary>
+        <Accordion>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>Feedback</Typography>
+          </AccordionSummary>
 
-          <ExpansionPanelDetails className={classes.panelDetails}>
-            <div className={classes.feedbackContainer}>
+          <StyledAccordionDetails>
+            <StyledFeedbackContainer>
               <FeedbackSelector
                 label="If correct, show"
                 feedback={feedback.correct}
@@ -101,12 +99,12 @@ export class FeedbackConfig extends React.Component {
                 onChange={this.onIncorrectChange}
                 toolbarOpts={toolbarOpts}
               />
-            </div>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
+            </StyledFeedbackContainer>
+          </StyledAccordionDetails>
+        </Accordion>
       </div>
     );
   }
 }
 
-export default withStyles(style)(FeedbackConfig);
+export default FeedbackConfig;

package/src/form-section.jsx

@@ -1,23 +1,23 @@
 import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
 
-const styles = (theme) => ({
-  formSection: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-  },
-  label: {
-    marginBottom: theme.spacing.unit,
-  },
-});
+const StyledFormSection = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+}));
 
-export default withStyles(styles)(({ className, classes, label, children, labelExtraStyle }) => (
-  <div className={classNames(classes.formSection, className)}>
-    <Typography className={classes.label} type="subheading" style={labelExtraStyle}>
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+}));
+
+const FormSection = ({ className, label, children, labelExtraStyle }) => (
+  <StyledFormSection className={className}>
+    <StyledTypography variant="subtitle1" style={labelExtraStyle}>
       {label}
-    </Typography>
+    </StyledTypography>
     {children}
-  </div>
-));
+  </StyledFormSection>
+);
+
+export default FormSection;

package/src/help.jsx

@@ -1,42 +1,34 @@
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
 import PropTypes from 'prop-types';
 
-import Button from '@material-ui/core/Button';
-import HelpIcon from '@material-ui/icons/Help';
-import IconButton from '@material-ui/core/IconButton';
+import Button from '@mui/material/Button';
+import HelpIcon from '@mui/icons-material/Help';
+import IconButton from '@mui/material/IconButton';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const RawHelpButton = ({ onClick, classes }) => (
-  <IconButton
-    classes={{
-      label: classes.icon,
-    }}
-    onClick={onClick}
-  >
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  '&:hover': {
+    color: theme.palette.grey[300],
+  },
+}));
+
+export const HelpButton = ({ onClick }) => (
+  <StyledIconButton onClick={onClick} size="large">
     <HelpIcon />
-  </IconButton>
+  </StyledIconButton>
 );
 
-RawHelpButton.propTypes = {
+HelpButton.propTypes = {
   onClick: PropTypes.func,
-  classes: PropTypes.object.isRequired,
 };
 
-export const HelpButton = withStyles((theme) => ({
-  icon: {
-    '&:hover': {
-      color: theme.palette.grey[300],
-    },
-  },
-}))(RawHelpButton);
-
 export const HelpDialog = ({ open, onClose, children, title }) => (
-  <Dialog open={open} onRequestClose={onClose}>
+  <Dialog open={open} onClose={onClose}>
     <DialogTitle>{title}</DialogTitle>
     <DialogContent>
       <DialogContentText>{children}</DialogContentText>

package/src/input.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { default as MaterialInput } from '@material-ui/core/Input';
+import { default as MaterialInput } from '@mui/material/Input';
 import { InputContainer } from '@pie-lib/render-ui';
 
 export default class Input extends React.Component {

package/src/inputs.jsx

@@ -1,15 +1,13 @@
-import Checkbox from '@material-ui/core/Checkbox';
-import Radio from '@material-ui/core/Radio';
+import Checkbox from '@mui/material/Checkbox';
+import Radio from '@mui/material/Radio';
 import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Switch from '@material-ui/core/Switch';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import Switch from '@mui/material/Switch';
+import { styled } from '@mui/material/styles';
 import { color } from '@pie-lib/render-ui';
 
 const InputTypes = {
-  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   label: PropTypes.string,
   checked: PropTypes.bool,
@@ -18,81 +16,67 @@ const InputTypes = {
   error: PropTypes.string,
 };
 
-const RawInputSwitch = ({ classes, className, label, checked, onChange }) => {
+const StyledSwitch = styled(Switch)(() => ({
+  justifyContent: 'inherit',
+  transform: 'translate(-20%, 20%)',
+}));
+
+const InputSwitch = ({ className, label, checked, onChange }) => {
   return (
     <InputContainer className={className} label={label}>
-      <Switch className={classes.switchRoot} checked={checked} onChange={onChange} aria-label={label} />
+      <StyledSwitch checked={checked} onChange={onChange} aria-label={label} />
     </InputContainer>
   );
 };
 
-RawInputSwitch.propTypes = { ...InputTypes };
-
-const InputSwitch = withStyles({
-  switchRoot: {
-    justifyContent: 'inherit',
-    transform: 'translate(-20%, 20%)',
-  },
-})(RawInputSwitch);
+InputSwitch.propTypes = { ...InputTypes };
 
-const RawInputCheckbox = (props) => {
-  const { classes, className, label, checked, onChange, disabled, error } = props;
+const StyledCheckbox = styled(Checkbox)(({ theme, error }) => ({
+  transform: 'translate(-25%, 20%)',
+  color: `${color.tertiary()} !important`,
+  ...(error && {
+    color: `${theme.palette.error.main} !important`,
+  }),
+}));
 
+const InputCheckbox = ({ className, label, checked, onChange, disabled, error }) => {
   return (
     <InputContainer className={className} label={label}>
-      <Checkbox
-        className={classNames(classes.checkboxRoot, classes.customColor, error && classes.error)}
+      <StyledCheckbox
         disabled={disabled}
         checked={checked}
         onChange={onChange}
         aria-label={label}
+        error={error}
       />
     </InputContainer>
   );
 };
 
-RawInputCheckbox.propTypes = { ...InputTypes };
+InputCheckbox.propTypes = { ...InputTypes };
 
-const RawInputRadio = (props) => {
-  const { classes, className, label, checked, onChange, disabled, error } = props;
+const StyledRadio = styled(Radio)(({ theme, error }) => ({
+  transform: 'translate(-20%, 20%)',
+  color: `${color.tertiary()} !important`,
+  ...(error && {
+    color: `${theme.palette.error.main} !important`,
+  }),
+}));
 
+const InputRadio = ({ className, label, checked, onChange, disabled, error }) => {
   return (
     <InputContainer className={className} label={label}>
-      <Radio
-        className={classNames(classes.radioRoot, classes.customColor, error && classes.error)}
+      <StyledRadio
         disabled={disabled}
         checked={checked}
         onChange={onChange}
         aria-label={label}
+        error={error}
       />
     </InputContainer>
   );
 };
 
-RawInputRadio.propTypes = { ...InputTypes };
-
-const InputCheckbox = withStyles((theme) => ({
-  checkboxRoot: {
-    transform: 'translate(-25%, 20%)',
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`,
-  },
-}))(RawInputCheckbox);
-
-const InputRadio = withStyles((theme) => ({
-  radioRoot: {
-    transform: 'translate(-20%, 20%)',
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`,
-  },
-}))(RawInputRadio);
+InputRadio.propTypes = { ...InputTypes };
 
 export { InputSwitch, InputCheckbox, InputRadio };

package/src/langs.jsx

@@ -1,40 +1,38 @@
-import Input from '@material-ui/core/Input';
-import InputLabel from '@material-ui/core/InputLabel';
+import Input from '@mui/material/Input';
+import InputLabel from '@mui/material/InputLabel';
 import PropTypes from 'prop-types';
 import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
+import { styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
 import debug from 'debug';
 
 const log = debug('pie-elements:config-ui:langs');
 
-const styles = (theme) => ({
-  root: {
-    flexDirection: 'column',
-    alignItems: 'start',
-    display: 'flex',
-    position: 'relative',
-    paddingTop: '0px',
-    paddingRight: '0px',
-  },
-  formControl: {
-    position: 'initial',
-  },
-  inputLabel: {
-    paddingBottom: theme.spacing.unit,
-  },
-});
+const StyledRoot = styled('div')(() => ({
+  flexDirection: 'column',
+  alignItems: 'start',
+  display: 'flex',
+  position: 'relative',
+  paddingTop: '0px',
+  paddingRight: '0px',
+}));
 
-export class RawLangs extends React.Component {
+const StyledFormControl = styled(FormControl)(() => ({
+  position: 'initial',
+}));
+
+const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
+  paddingBottom: theme.spacing(1),
+}));
+
+export class Langs extends React.Component {
   static propTypes = {
     onChange: PropTypes.func,
     langs: PropTypes.array,
     selected: PropTypes.string,
     label: PropTypes.string,
-    classes: PropTypes.object.isRequired,
     uid: PropTypes.string,
   };
 
@@ -52,16 +50,16 @@ export class RawLangs extends React.Component {
   };
 
   render() {
-    let { langs, selected, label, classes } = this.props;
+    let { langs, selected, label } = this.props;
 
     log('[render] selected:', selected);
 
     return (
-      <div className={classes.root}>
-        <FormControl className={classes.formControl}>
-          <InputLabel className={classes.inputLabel} htmlFor={this.uid}>
+      <StyledRoot>
+        <StyledFormControl>
+          <StyledInputLabel htmlFor={this.uid}>
             {label}
-          </InputLabel>
+          </StyledInputLabel>
 
           <Select value={selected} onChange={this.choose} input={<Input id={this.uid} />}>
             {langs.map((l, index) => (
@@ -70,27 +68,23 @@ export class RawLangs extends React.Component {
               </MenuItem>
             ))}
           </Select>
-        </FormControl>
-      </div>
+        </StyledFormControl>
+      </StyledRoot>
     );
   }
 }
-
-const Langs = withStyles(styles, { name: 'Langs' })(RawLangs);
 export default Langs;
 
-export const LanguageControls = withStyles({
-  languageControls: {
-    display: 'grid',
-    gridAutoFlow: 'column',
-    gridAutoColumns: '1fr',
-    gridGap: '8px',
-  },
-})(({ classes, langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {
-  const names = classNames(classes.languageControls, className);
+const StyledLanguageControls = styled('div')(() => ({
+  display: 'grid',
+  gridAutoFlow: 'column',
+  gridAutoColumns: '1fr',
+  gridGap: '8px',
+}));
 
+export const LanguageControls = ({ langs, activeLang, defaultLang, onActiveLangChange, onDefaultLangChange, className }) => {
   return (
-    <div className={names}>
+    <StyledLanguageControls className={className}>
       <Langs
         label="Choose language to edit"
         langs={langs}
@@ -98,9 +92,9 @@ export const LanguageControls = withStyles({
         onChange={(l) => onActiveLangChange(l)}
       />
       <Langs label="Default language" langs={langs} selected={defaultLang} onChange={(l) => onDefaultLangChange(l)} />
-    </div>
+    </StyledLanguageControls>
   );
-});
+};
 
 LanguageControls.propTypes = {
   langs: PropTypes.array,

package/src/layout/config-layout.jsx

@@ -1,22 +1,23 @@
 import React from 'react';
 import Measure from 'react-measure';
+import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
 import { withContentRect } from 'react-measure';
-import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import LayoutContents from './layout-contents';
 import SettingsBox from './settings-box';
 import { AppendCSSRules } from '@pie-lib/render-ui';
 
-const styles = {
-  extraCSSRules: {},
-};
+const theme = createTheme({
+  typography: {
+    fontFamily: 'inherit',
+  },
+});
 
 class MeasuredConfigLayout extends AppendCSSRules {
   static propTypes = {
     children: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.element), PropTypes.element]),
     className: PropTypes.string,
-    classes: PropTypes.object,
     dimensions: PropTypes.object,
     settings: PropTypes.element,
     sidePanelMinWidth: PropTypes.number,
@@ -47,29 +48,32 @@ class MeasuredConfigLayout extends AppendCSSRules {
 
   render() {
     return (
-      <Measure bounds onResize={this.onResize}>
-        {({ measureRef }) => {
-          const { children, settings, hideSettings, dimensions, classes } = this.props;
-          const { layoutMode } = this.state;
+      <StyledEngineProvider injectFirst>(<ThemeProvider theme={theme}>
+            <Measure bounds onResize={this.onResize}>
+              {({ measureRef }) => {
+                const { children, settings, hideSettings, dimensions } = this.props;
+                const { layoutMode } = this.state;
 
-          const settingsPanel =
-            layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
-          const secondaryContent = hideSettings ? null : settingsPanel;
-          const finalClass = classNames('main-container', classes.extraCSSRules);
+                const settingsPanel =
+                  layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
+                const secondaryContent = hideSettings ? null : settingsPanel;
+                const finalClass = classNames('main-container');
 
-          return (
-            <div ref={measureRef} className={finalClass}>
-              <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
-                {children}
-              </LayoutContents>
-            </div>
-          );
-        }}
-      </Measure>
+                return (
+                  <div ref={measureRef} className={finalClass}>
+                    <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
+                      {children}
+                    </LayoutContents>
+                  </div>
+                );
+              }}
+            </Measure>
+          </ThemeProvider>)
+              </StyledEngineProvider>
     );
   }
 }
 
-const ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));
+const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
 
 export default ConfigLayout;