@pie-lib/config-ui 11.30.1 → 11.31.0-mui-update.0

package/src/settings/panel.jsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import get from 'lodash/get';
 import set from 'lodash/set';
-import Select from '@material-ui/core/Select';
-import Input from '@material-ui/core/Input';
-import MenuItem from '@material-ui/core/MenuItem';
+import { styled } from '@mui/material/styles';
+import Select from '@mui/material/Select';
+import Input from '@mui/material/Input';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 import debug from 'debug';
 
 import Toggle from './toggle';
@@ -13,7 +14,6 @@ import { NChoice } from '../two-choice';
 import SettingsRadioLabel from './settings-radio-label';
 import NumberTextField from '../number-text-field';
 import Checkbox from '../checkbox';
-import Typography from '@material-ui/core/Typography';
 
 const log = debug('pie-lib:config-ui:settings:panel');
 
@@ -46,10 +46,23 @@ CheckboxChoice.propTypes = {
   onChange: PropTypes.func,
 };
 
-const Radio = ({ classes, label, value, onChange, choices }) => {
+const StyledNChoice = styled(NChoice)(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+  paddingBottom: theme.spacing(0.5),
+  width: '100%',
+  '& > label': {
+    color: 'rgba(0, 0, 0, 0.89)',
+    transform: 'translate(0, 10px) scale(1)',
+    fontSize: '14px',
+  },
+  '& > div': {
+    marginTop: theme.spacing(2.5),
+  },
+}));
+
+const Radio = ({ label, value, onChange, choices }) => {
   return (
-    <NChoice
-      className={classes.radioSettings}
+    <StyledNChoice
       direction="horizontal"
       customLabel={SettingsRadioLabel}
       value={value}
@@ -62,103 +75,85 @@ const Radio = ({ classes, label, value, onChange, choices }) => {
 
 Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
 
-const StyledRadio = withStyles((theme) => ({
-  radioSettings: {
-    marginTop: theme.spacing.unit / 2,
-    paddingBottom: theme.spacing.unit / 2,
-    width: '100%',
-    '& > label': {
-      color: 'rgba(0, 0, 0, 0.89)',
-      transform: 'translate(0, 10px) scale(1)',
-      fontSize: '14px',
-    },
-    '& > div': {
-      marginTop: theme.spacing.unit * 2.5,
-    },
-  },
-  label: {
-    display: 'none',
-  },
-}))(Radio);
+const StyledRadio = Radio;
 
-const Dropdown = withStyles((theme) => ({
-  label: {
-    margin: 0,
-    fontSize: theme.typography.fontSize,
-  },
-  wrapper: {
-    marginTop: theme.spacing.unit / 2,
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: `0 ${theme.spacing.unit}px`,
-  },
-}))(({ classes, label, value, onChange, choices = [] }) => {
+const StyledLabel = styled('p')(({ theme }) => ({
+  margin: 0,
+  fontSize: theme.typography.fontSize,
+}));
+
+const StyledSelect = styled(Select)(({ theme }) => ({
+  marginTop: theme.spacing(0.5),
+  border: '2px solid lightgrey',
+  padding: `0 ${theme.spacing(1)}`,
+  borderRadius: '4px',
+}));
+
+const Dropdown = ({ label, value, onChange, choices = [] }) => {
   const getItemLabel = (l) => (typeof l === 'string' ? l : l.label);
   const getItemValue = (l) => (typeof l === 'string' ? l : l.value);
   return (
     <div>
-      {label && <p className={classes.label}>{label}</p>}
-      <Select
-        className={classes.wrapper}
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <StyledSelect
         value={value || (choices && choices[0])}
         onChange={({ target }) => onChange(target.value)}
         input={<Input id={`dropdown-${label}`} />}
         disableUnderline
+        MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
       >
         {choices.map((l, index) => (
           <MenuItem key={index} value={getItemValue(l)}>
             {getItemLabel(l)}
           </MenuItem>
         ))}
-      </Select>
+      </StyledSelect>
     </div>
   );
-});
+};
 
 Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
 
-const TextField = withStyles((theme) => ({
-  field: {
-    marginRight: theme.spacing.unit * 3,
-    marginTop: theme.spacing.unit,
-  },
-}))(({ classes, label }) => {
-  return <Typography className={classes.field}>{label}</Typography>;
-});
-
-const NumberField = withStyles((theme) => ({
-  field: {
-    width: '35%',
-    marginRight: theme.spacing.unit * 3,
-    marginTop: theme.spacing.unit,
-  },
-  wrapper: {
-    marginTop: theme.spacing.unit / 2,
+const StyledTypography = styled(Typography)(({ theme }) => ({
+  marginRight: theme.spacing(3),
+  marginTop: theme.spacing(1),
+}));
+
+const TextField = ({ label }) => {
+  return <StyledTypography>{label}</StyledTypography>;
+};
+
+const StyledNumberTextField = styled(NumberTextField)(({ theme }) => ({
+  width: '35%',
+  marginRight: theme.spacing(3),
+  marginTop: theme.spacing(1),
+  '& .MuiInputBase-root': {
+    marginTop: theme.spacing(0.5),
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: `0 ${theme.spacing.unit}px`,
+    padding: `0 ${theme.spacing(1)}`,
+    backgroundColor: 'transparent',
   },
-}))(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
+}));
+
+const NumberField = ({ label, value, onChange = () => {}, suffix, min, max }) => {
   return (
-    <NumberTextField
+    <StyledNumberTextField
+      variant={'standard'}
       label={label || 'Label'}
       value={value}
       max={max}
       min={min}
       onChange={(ev, value) => onChange(value)}
       suffix={suffix}
-      className={classes.field}
       showErrorWhenOutsideRange
-      inputClassName={classes.wrapper}
       disableUnderline
-      classes={classes}
     />
   );
-});
+};
 
 NumberField.propTypes = {
   ...baseTypes,
-  classes: PropTypes.object,
   suffix: PropTypes.string,
   min: PropTypes.number,
   max: PropTypes.number,
@@ -184,22 +179,24 @@ const tagMap = {
   textField: TextField,
 };
 
-const Group = withStyles((theme) => ({
-  group: {
-    margin: `0 0 ${theme.spacing.unit * 2}px 0`,
-  },
-  groupHeader: {
-    color: '#495B8F',
-    fontSize: theme.typography.fontSize + 2,
-    fontWeight: 600,
-    marginBottom: theme.spacing.unit,
-  },
-  numberFields: {
-    fontSize: theme.typography.fontSize,
-    marginBottom: 0,
-  },
-}))((props) => {
-  const { classes, model, label, group, configuration, onChange } = props;
+const StyledGroup = styled('div')(({ theme }) => ({
+  margin: `0 0 ${theme.spacing(2)} 0`,
+}));
+
+const StyledGroupHeader = styled('div')(({ theme }) => ({
+  color: '#495B8F',
+  fontSize: theme.typography.fontSize + 2,
+  fontWeight: 600,
+  marginBottom: theme.spacing(1),
+}));
+
+const StyledNumberFields = styled('p')(({ theme }) => ({
+  fontSize: theme.typography.fontSize,
+  marginBottom: 0,
+}));
+
+const Group = (props) => {
+  const { model, label, group, configuration, onChange } = props;
 
   /**
    * @param group - the group of settings
@@ -227,7 +224,7 @@ const Group = withStyles((theme) => ({
     if (type === 'numberFields') {
       return (
         <div key={`numberField-${label}`}>
-          <p className={classes.numberFields}>{label}</p>
+          <StyledNumberFields>{label}</StyledNumberFields>
           {Object.keys(fields).map((fieldKey) => {
             return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
           })}
@@ -251,15 +248,15 @@ const Group = withStyles((theme) => ({
   };
 
   return (
-    <div className={classes.group}>
-      <div className={classes.groupHeader}>{label}</div>
+    <StyledGroup>
+      <StyledGroupHeader>{label}</StyledGroupHeader>
 
       {Object.keys(group).map((key) => {
         return content(group, key);
       })}
-    </div>
+    </StyledGroup>
   );
-});
+};
 
 export class Panel extends React.Component {
   static propTypes = {

package/src/settings/settings-radio-label.jsx

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

package/src/settings/toggle.jsx

@@ -1,44 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import InputLabel from '@material-ui/core/InputLabel';
-import { withStyles } from '@material-ui/core/styles';
-import Switch from '@material-ui/core/Switch';
-import classNames from 'classnames';
+import InputLabel from '@mui/material/InputLabel';
+import { styled } from '@mui/material/styles';
+import Switch from '@mui/material/Switch';
 import { color } from '@pie-lib/render-ui';
 
-const Toggle = withStyles((theme) => ({
-  toggle: {
-    display: 'flex',
-    width: '100%',
-    justifyContent: 'space-between',
-  },
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: theme.typography.fontSize,
-    paddingTop: theme.spacing.unit * 2,
-  },
-  checkedThumb: {
+const StyledToggle = styled('div')(() => ({
+  display: 'flex',
+  width: '100%',
+  justifyContent: 'space-between',
+}));
+
+const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
+  color: 'rgba(0, 0, 0, 0.89)',
+  fontSize: theme.typography.fontSize,
+  paddingTop: theme.spacing(2),
+}));
+
+const StyledSwitch = styled(Switch)(({ checked }) => ({
+  '&.Mui-checked .MuiSwitch-thumb': {
     color: `${color.tertiary()} !important`,
   },
-  checkedBar: {
+  '&.Mui-checked .MuiSwitch-track': {
     backgroundColor: `${color.tertiaryLight()} !important`,
   },
-}))(({ checked, disabled, label, toggle, classes }) => (
-  <div className={classes.toggle}>
-    <InputLabel className={classes.label}>{label}</InputLabel>
-    <Switch
-      classes={{
-        checked: classNames(classes.checkedThumb),
-        bar: classNames({
-          [classes.checkedBar]: checked,
-        }),
-      }}
+  '& .MuiSwitch-track': {
+    backgroundColor: checked ? `${color.tertiaryLight()} !important` : undefined,
+  },
+}));
+
+const Toggle = ({ checked, disabled, label, toggle }) => (
+  <StyledToggle>
+    <StyledInputLabel>{label}</StyledInputLabel>
+    <StyledSwitch
       checked={checked}
       disabled={disabled}
       onChange={(e) => toggle(e.target.checked)}
     />
-  </div>
-));
+  </StyledToggle>
+);
 
 Toggle.propTypes = {
   checked: PropTypes.bool,

package/src/tabs/index.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
-import MuiTabs from '@material-ui/core/Tabs';
-import MuiTab from '@material-ui/core/Tab';
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core';
+import { styled } from '@mui/material/styles';
+
+const StyledMuiTab = styled(MuiTab)(() => ({}));
 
 export class Tabs extends React.Component {
   static propTypes = {
-    classes: PropTypes.object,
     className: PropTypes.string,
     contentClassName: PropTypes.string,
     contentStyle: PropTypes.object,
@@ -25,14 +26,13 @@ export class Tabs extends React.Component {
 
   render() {
     const { value } = this.state;
-    const { children, className, contentClassName, contentStyle = {}, classes } = this.props;
-    const tabClasses = { root: classes.tabRoot };
+    const { children, className, contentClassName, contentStyle = {} } = this.props;
 
     return (
       <div className={className}>
         <MuiTabs indicatorColor="primary" value={value} onChange={this.handleChange}>
           {React.Children.map(children, (c, index) =>
-            c && c.props.title ? <MuiTab classes={tabClasses} key={index} label={c.props.title} /> : null,
+            c && c.props.title ? <StyledMuiTab key={index} label={c.props.title} /> : null,
           )}
         </MuiTabs>
 
@@ -44,4 +44,4 @@ export class Tabs extends React.Component {
   }
 }
 
-export default withStyles(() => ({ tabRoot: {} }))(Tabs);
+export default Tabs;

package/src/tags-input/index.jsx

@@ -1,27 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import uniq from 'lodash/uniq';
-import Chip from '@material-ui/core/Chip';
+import Chip from '@mui/material/Chip';
 import MuiBox from '../mui-box';
 
 const ENTER = 13;
 
-const Tag = withStyles(() => ({
-  tag: {
-    padding: '0px',
-    margin: '1px',
-  },
-}))(({ classes, label, onDelete }) => <Chip className={classes.tag} label={label} onDelete={onDelete} />);
+const StyledChip = styled(Chip)(() => ({
+  padding: '0px',
+  margin: '1px',
+}));
+
+const Tag = ({ label, onDelete }) => <StyledChip label={label} onDelete={onDelete} />;
 
 Tag.propTypes = {
   label: PropTypes.string.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 
+const StyledTagsInput = styled('div')(({ theme }) => ({
+  border: `0px solid ${theme.palette.background.paper}`,
+  display: 'flex',
+  flexWrap: 'wrap',
+}));
+
+const StyledInput = styled('input')(({ theme }) => ({
+  padding: '2px',
+  margin: '1px',
+  minWidth: '30px',
+  width: '100%',
+  flex: '1',
+  border: `0px solid ${theme.palette.background.paper}`,
+  height: '28px',
+  fontSize: theme.typography.fontSize,
+  fontFamily: theme.typography.fontFamily,
+  outline: 'none',
+  '&:focus': {
+    outline: 'none',
+  },
+}));
+
 export class TagsInput extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     tags: PropTypes.arrayOf(PropTypes.string).isRequired,
     onChange: PropTypes.func.isRequired,
   };
@@ -70,50 +91,26 @@ export class TagsInput extends React.Component {
   };
 
   render() {
-    const { classes, tags } = this.props;
+    const { tags } = this.props;
     return (
       <MuiBox focused={this.state.focused}>
-        <div className={classes.tagsInput}>
+        <StyledTagsInput>
           {(tags || []).map((t, index) => (
             <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
           ))}
-          <input
+          <StyledInput
             ref={(r) => (this.input = r)}
             onKeyDown={this.onKeyDown}
             onChange={this.onChange}
-            className={classes.input}
             value={this.state.value}
             onFocus={this.onFocus}
             onBlur={this.onBlur}
             type="text"
           />
-        </div>
+        </StyledTagsInput>
       </MuiBox>
     );
   }
 }
 
-const styles = (theme) => ({
-  tagsInput: {
-    border: `0px solid ${theme.palette.background.paper}`,
-    display: 'flex',
-    flexWrap: 'wrap',
-  },
-  input: {
-    padding: '2px',
-    margin: '1px',
-    minWidth: '30px',
-    width: '100%',
-    flex: '1',
-    border: `0px solid ${theme.palette.background.paper}`,
-    height: '28px',
-    fontSize: theme.typography.fontSize,
-    fontFamily: theme.typography.fontFamily,
-    outline: 'none',
-    '&:focus': {
-      outline: 'none',
-    },
-  },
-});
-
-export default withStyles(styles)(TagsInput);
+export default TagsInput;

package/src/two-choice.jsx

@@ -2,22 +2,19 @@ import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import RadioWithLabel from './radio-with-label';
 import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const styles = (theme) => ({
-  group: {
-    display: 'flex',
-    flexWrap: 'wrap',
-    paddingLeft: 0,
-    marginTop: theme.spacing.unit,
-  },
-  vertical: {
+const StyledGroup = styled('div')(({ theme, direction }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  paddingLeft: 0,
+  marginTop: theme.spacing(1),
+  ...(direction === 'vertical' && {
     flexDirection: 'column',
-  },
-});
+  }),
+}));
 
-class RawNChoice extends React.Component {
+class NChoice extends React.Component {
   static propTypes = {
     header: PropTypes.string.isRequired,
     className: PropTypes.string,
@@ -26,7 +23,6 @@ class RawNChoice extends React.Component {
     value: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
-    classes: PropTypes.object.isRequired,
   };
 
   handleChange = (event) => {
@@ -34,7 +30,7 @@ class RawNChoice extends React.Component {
   };
 
   render() {
-    const { header, className, classes, customLabel, opts, value, direction } = this.props;
+    const { header, className, customLabel, opts, value, direction } = this.props;
 
     const preppedOpts = opts.map((o) => {
       return typeof o === 'string' ? { label: o, value: o } : o;
@@ -43,7 +39,7 @@ class RawNChoice extends React.Component {
 
     return (
       <InputContainer label={header} className={className}>
-        <div className={classNames(classes.group, classes[direction])}>
+        <StyledGroup direction={direction}>
           {preppedOpts.map((o, index) => (
             <LabelComponent
               value={o.value}
@@ -53,13 +49,13 @@ class RawNChoice extends React.Component {
               label={o.label}
             />
           ))}
-        </div>
+        </StyledGroup>
       </InputContainer>
     );
   }
 }
 
-export const NChoice = withStyles(styles)(RawNChoice);
+export { NChoice };
 
 const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
 
@@ -91,4 +87,4 @@ class TwoChoice extends React.Component {
   }
 }
 
-export default withStyles(styles)(TwoChoice);
+export default TwoChoice;