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

package/src/settings/panel.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
 import get from 'lodash/get';
 import set from 'lodash/set';
-import Select from '@mui/material/Select';
-import Input from '@mui/material/Input';
-import MenuItem from '@mui/material/MenuItem';
+import Select from '@material-ui/core/Select';
+import Input from '@material-ui/core/Input';
+import MenuItem from '@material-ui/core/MenuItem';
 import debug from 'debug';
 
 import Toggle from './toggle';
@@ -13,7 +13,7 @@ import { NChoice } from '../two-choice';
 import SettingsRadioLabel from './settings-radio-label';
 import NumberTextField from '../number-text-field';
 import Checkbox from '../checkbox';
-import Typography from '@mui/material/Typography';
+import Typography from '@material-ui/core/Typography';
 
 const log = debug('pie-lib:config-ui:settings:panel');
 
@@ -46,23 +46,10 @@ CheckboxChoice.propTypes = {
   onChange: PropTypes.func,
 };
 
-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 }) => {
+const Radio = ({ classes, label, value, onChange, choices }) => {
   return (
-    <StyledNChoice
+    <NChoice
+      className={classes.radioSettings}
       direction="horizontal"
       customLabel={SettingsRadioLabel}
       value={value}
@@ -75,27 +62,44 @@ const Radio = ({ label, value, onChange, choices }) => {
 
 Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
 
-const StyledRadio = Radio;
-
-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',
-  borderRadius: '4px',
-  padding: `0 ${theme.spacing(1)}px`,
-}));
+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 Dropdown = ({ label, value, onChange, choices = [] }) => {
+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 getItemLabel = (l) => (typeof l === 'string' ? l : l.label);
   const getItemValue = (l) => (typeof l === 'string' ? l : l.value);
   return (
     <div>
-      {label && <StyledLabel>{label}</StyledLabel>}
-      <StyledSelect
+      {label && <p className={classes.label}>{label}</p>}
+      <Select
+        className={classes.wrapper}
         value={value || (choices && choices[0])}
         onChange={({ target }) => onChange(target.value)}
         input={<Input id={`dropdown-${label}`} />}
@@ -106,51 +110,55 @@ const Dropdown = ({ label, value, onChange, choices = [] }) => {
             {getItemLabel(l)}
           </MenuItem>
         ))}
-      </StyledSelect>
+      </Select>
     </div>
   );
-};
+});
 
 Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
 
-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),
+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,
     border: '2px solid lightgrey',
     borderRadius: '4px',
-    padding: `0 ${theme.spacing(1)}px`,
+    padding: `0 ${theme.spacing.unit}px`,
   },
-}));
-
-const NumberField = ({ label, value, onChange = () => {}, suffix, min, max }) => {
+}))(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
   return (
-    <StyledNumberTextField
+    <NumberTextField
       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,
@@ -176,24 +184,22 @@ const tagMap = {
   textField: TextField,
 };
 
-const StyledGroup = styled('div')(({ theme }) => ({
-  margin: `0 0 ${theme.spacing(2)}px 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;
+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;
 
   /**
    * @param group - the group of settings
@@ -221,7 +227,7 @@ const Group = (props) => {
     if (type === 'numberFields') {
       return (
         <div key={`numberField-${label}`}>
-          <StyledNumberFields>{label}</StyledNumberFields>
+          <p className={classes.numberFields}>{label}</p>
           {Object.keys(fields).map((fieldKey) => {
             return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
           })}
@@ -245,15 +251,15 @@ const Group = (props) => {
   };
 
   return (
-    <StyledGroup>
-      <StyledGroupHeader>{label}</StyledGroupHeader>
+    <div className={classes.group}>
+      <div className={classes.groupHeader}>{label}</div>
 
       {Object.keys(group).map((key) => {
         return content(group, key);
       })}
-    </StyledGroup>
+    </div>
   );
-};
+});
 
 export class Panel extends React.Component {
   static propTypes = {

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

@@ -1,28 +1,24 @@
-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)(({ theme }) => ({
-  '& .MuiFormControlLabel-label': {
+export default withStyles((theme) => ({
+  label: {
     color: 'rgba(0, 0, 0, 0.89)',
     fontSize: theme.typography.fontSize - 2,
     left: '-5px',
     position: 'relative',
   },
-}));
-
-const StyledRadio = styled(Radio)(() => ({
-  color: `${color.tertiary()} !important`,
-}));
-
-const SettingsRadioLabel = ({ 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 SettingsRadioLabel;
+));

package/src/settings/toggle.jsx

@@ -1,44 +1,44 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import InputLabel from '@mui/material/InputLabel';
-import { styled } from '@mui/material/styles';
-import Switch from '@mui/material/Switch';
+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 { color } from '@pie-lib/render-ui';
 
-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': {
+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: {
     color: `${color.tertiary()} !important`,
   },
-  '&.Mui-checked .MuiSwitch-track': {
+  checkedBar: {
     backgroundColor: `${color.tertiaryLight()} !important`,
   },
-  '& .MuiSwitch-track': {
-    backgroundColor: checked ? `${color.tertiaryLight()} !important` : undefined,
-  },
-}));
-
-const Toggle = ({ checked, disabled, label, toggle }) => (
-  <StyledToggle>
-    <StyledInputLabel>{label}</StyledInputLabel>
-    <StyledSwitch
+}))(({ 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,
+        }),
+      }}
       checked={checked}
       disabled={disabled}
       onChange={(e) => toggle(e.target.checked)}
     />
-  </StyledToggle>
-);
+  </div>
+));
 
 Toggle.propTypes = {
   checked: PropTypes.bool,

package/src/tabs/index.jsx

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

package/src/tags-input/index.jsx

@@ -1,48 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
+import { withStyles } from '@material-ui/core/styles';
 import uniq from 'lodash/uniq';
-import Chip from '@mui/material/Chip';
+import Chip from '@material-ui/core/Chip';
 import MuiBox from '../mui-box';
 
 const ENTER = 13;
 
-const StyledChip = styled(Chip)(() => ({
-  padding: '0px',
-  margin: '1px',
-}));
-
-const Tag = ({ label, onDelete }) => <StyledChip label={label} onDelete={onDelete} />;
+const Tag = withStyles(() => ({
+  tag: {
+    padding: '0px',
+    margin: '1px',
+  },
+}))(({ classes, label, onDelete }) => <Chip className={classes.tag} 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,
   };
@@ -91,26 +70,50 @@ export class TagsInput extends React.Component {
   };
 
   render() {
-    const { tags } = this.props;
+    const { classes, tags } = this.props;
     return (
       <MuiBox focused={this.state.focused}>
-        <StyledTagsInput>
+        <div className={classes.tagsInput}>
           {(tags || []).map((t, index) => (
             <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
           ))}
-          <StyledInput
+          <input
             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"
           />
-        </StyledTagsInput>
+        </div>
       </MuiBox>
     );
   }
 }
 
-export default TagsInput;
+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);

package/src/two-choice.jsx

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

package/LICENSE.md

@@ -1,5 +0,0 @@
-Copyright 2019 CoreSpring Inc
-
-Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/NEXT.CHANGELOG.json

@@ -1 +0,0 @@
-[]