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

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 { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
 
-const StyledChoiceHolder = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledChoice = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledRadioWithLabel = styled(RadioWithLabel)(({ theme }) => ({
-  '& .MuiFormControlLabel-label': {
+const styles = (theme) => ({
+  radioLabel: {
     fontSize: theme.typography.fontSize - 2,
   },
-}));
+  choice: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  choiceHolder: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
 
 const Group = (props) => {
-  const { feedbackLabels, value, className, onChange, keys } = props;
+  const { feedbackLabels, value, classes, className, onChange, keys } = props;
 
   return (
-    <StyledChoiceHolder className={className}>
+    <div className={classNames(classes.choiceHolder, className)}>
       {keys.map((key) => {
         return (
-          <StyledChoice key={key}>
-            <StyledRadioWithLabel
+          <div className={classes.choice} key={key}>
+            <RadioWithLabel
               value={key}
               checked={value === key}
+              classes={{ label: classes.radioLabel }}
               onChange={(e) => onChange(e.currentTarget.value)}
               label={feedbackLabels[key]}
             />
-          </StyledChoice>
+          </div>
         );
       })}
-    </StyledChoiceHolder>
+    </div>
   );
 };
 
@@ -44,8 +44,9 @@ 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 Group;
+export default withStyles(styles)(Group);

package/src/feedback-config/index.jsx

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

package/src/form-section.jsx

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

package/src/help.jsx

@@ -1,34 +1,42 @@
-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 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 PropTypes from 'prop-types';
 
-import Button from '@mui/material/Button';
-import HelpIcon from '@mui/icons-material/Help';
-import IconButton from '@mui/material/IconButton';
+import Button from '@material-ui/core/Button';
+import HelpIcon from '@material-ui/icons/Help';
+import IconButton from '@material-ui/core/IconButton';
 import React from 'react';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
 
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  '&:hover': {
-    color: theme.palette.grey[300],
-  },
-}));
-
-export const HelpButton = ({ onClick }) => (
-  <StyledIconButton onClick={onClick} size="large">
+const RawHelpButton = ({ onClick, classes }) => (
+  <IconButton
+    classes={{
+      label: classes.icon,
+    }}
+    onClick={onClick}
+  >
     <HelpIcon />
-  </StyledIconButton>
+  </IconButton>
 );
 
-HelpButton.propTypes = {
+RawHelpButton.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} onClose={onClose}>
+  <Dialog open={open} onRequestClose={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 '@mui/material/Input';
+import { default as MaterialInput } from '@material-ui/core/Input';
 import { InputContainer } from '@pie-lib/render-ui';
 
 export default class Input extends React.Component {

package/src/inputs.jsx

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

package/src/langs.jsx

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

package/src/layout/config-layout.jsx

@@ -1,15 +1,22 @@
 import React from 'react';
 import Measure from 'react-measure';
-import { createTheme, ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/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 theme = createTheme({
+const styles = {
+  extraCSSRules: {},
+};
+
+const theme = createMuiTheme({
   typography: {
+    // In MUI v3, this opts into the h1–h6 variants; otherwise use display1/headline/etc.
+    useNextVariants: true,
     fontFamily: 'inherit',
   },
 });
@@ -18,6 +25,7 @@ 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,
@@ -43,38 +51,41 @@ class MeasuredConfigLayout extends AppendCSSRules {
     const layoutMode =
       bounds.width > sidePanelMinWidth && (maxWidth ? maxWidth > sidePanelMinWidth : true) ? 'inline' : 'tabbed';
 
-    this.setState({ layoutMode });
+    // Only update state (and cause a re-render) if the computed layoutMode changed.
+    if (layoutMode !== this.state.layoutMode) {
+      this.setState({ layoutMode });
+    }
   };
 
   render() {
     return (
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <Measure bounds onResize={this.onResize}>
-            {({ measureRef }) => {
-              const { children, settings, hideSettings, dimensions } = this.props;
-              const { layoutMode } = this.state;
+      // TODO: REVIEW MuiThemeProvider usage
+      // Different theme object identities will force theme consumers to re-render.
+      <MuiThemeProvider theme={theme}>
+        <Measure bounds onResize={this.onResize}>
+          {({ measureRef }) => {
+            const { children, settings, hideSettings, dimensions, classes } = 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');
+            const settingsPanel =
+              layoutMode === 'inline' ? <SettingsBox className="settings-box">{settings}</SettingsBox> : settings;
+            const secondaryContent = hideSettings ? null : settingsPanel;
+            const finalClass = classNames('main-container', classes.extraCSSRules);
 
-              return (
-                <div ref={measureRef} className={finalClass}>
-                  <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
-                    {children}
-                  </LayoutContents>
-                </div>
-              );
-            }}
-          </Measure>
-        </ThemeProvider>
-      </StyledEngineProvider>
+            return (
+              <div ref={measureRef} className={finalClass}>
+                <LayoutContents mode={layoutMode} secondary={secondaryContent} dimensions={dimensions}>
+                  {children}
+                </LayoutContents>
+              </div>
+            );
+          }}
+        </Measure>
+      </MuiThemeProvider>
     );
   }
 }
 
-const ConfigLayout = withContentRect('bounds')(MeasuredConfigLayout);
+const ConfigLayout = withStyles(styles)(withContentRect('bounds')(MeasuredConfigLayout));
 
 export default ConfigLayout;