@pie-lib/config-ui 12.0.0-beta.4 → 12.0.0-next.0

package/src/settings/index.js

@@ -2,13 +2,20 @@ import Panel from './panel';
 
 export { Panel };
 
-export const toggle = (label, isConfigProperty = false) => ({
+export const textField = (label, isConfigProperty = true) => ({
+  label,
+  type: 'textField',
+  isConfigProperty,
+});
+
+export const toggle = (label, isConfigProperty = false, disabled = false) => ({
   type: 'toggle',
   label,
-  isConfigProperty
+  isConfigProperty,
+  disabled,
 });
 
-const toChoice = opt => {
+const toChoice = (opt) => {
   if (typeof opt === 'string') {
     return { label: opt, value: opt };
   } else {
@@ -19,11 +26,12 @@ const toChoice = opt => {
 export const radio = function() {
   const args = Array.prototype.slice.call(arguments);
   const [label, choices, isConfigProperty = false] = args;
+
   return {
     type: 'radio',
     label,
-    choices: choices && choices.map(o => toChoice(o)),
-    isConfigProperty
+    choices: choices && choices.map((o) => toChoice(o)),
+    isConfigProperty,
   };
 };
 
@@ -32,7 +40,7 @@ export const dropdown = (label, choices, isConfigProperty = false) => {
     type: 'dropdown',
     label,
     choices,
-    isConfigProperty
+    isConfigProperty,
   };
 };
 
@@ -40,18 +48,18 @@ export const numberField = (label, options, isConfigProperty = false) => ({
   ...options,
   label,
   type: 'numberField',
-  isConfigProperty
+  isConfigProperty,
 });
 
 export const numberFields = (label, fields, isConfigProperty = false) => {
-  Object.keys(fields).map(key => {
+  Object.keys(fields).map((key) => {
     fields[key] = numberField(fields[key].label, fields[key], isConfigProperty);
   });
 
   return {
     type: 'numberFields',
     label,
-    fields
+    fields,
   };
 };
 
@@ -59,17 +67,17 @@ export const checkbox = (label, settings, isConfigProperty = false) => ({
   ...settings,
   label,
   type: 'checkbox',
-  isConfigProperty
+  isConfigProperty,
 });
 
 export const checkboxes = (label, choices, isConfigProperty = false) => {
-  Object.keys(choices).map(key => {
+  Object.keys(choices).map((key) => {
     choices[key] = checkbox(choices[key].label, choices[key], isConfigProperty);
   });
 
   return {
     type: 'checkboxes',
     label,
-    choices
+    choices,
   };
 };

package/src/settings/panel.jsx

@@ -1,30 +1,31 @@
 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';
-import TwoChoice from '../two-choice';
+import { NChoice } from '../two-choice';
 import SettingsRadioLabel from './settings-radio-label';
-import { NumberTextField } from '../index';
+import NumberTextField from '../number-text-field';
 import Checkbox from '../checkbox';
 
 const log = debug('pie-lib:config-ui:settings:panel');
 
 const labelValue = {
   label: PropTypes.string,
-  value: PropTypes.string
+  value: PropTypes.string,
 };
 
 const baseTypes = {
   label: PropTypes.string,
   value: PropTypes.string,
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
 const CheckboxChoice = ({ label, value, onChange }) => {
@@ -32,7 +33,7 @@ const CheckboxChoice = ({ label, value, onChange }) => {
     <Checkbox
       checked={value}
       label={label}
-      onChange={event => {
+      onChange={(event) => {
         onChange(event.target.checked);
       }}
     />
@@ -42,19 +43,32 @@ const CheckboxChoice = ({ label, value, onChange }) => {
 CheckboxChoice.propTypes = {
   label: PropTypes.string,
   value: PropTypes.bool,
-  onChange: PropTypes.func
+  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: '18px',
+    marginTop: theme.spacing(2.5),
+  },
+  '& > div': {
+    marginTop: theme.spacing(2.5),
+  },
+}));
+
+const Radio = ({ label, value, onChange, choices }) => {
   return (
-    <TwoChoice
-      className={classes.radioSettings}
-      direction="vertical"
+    <StyledNChoice
+      direction="horizontal"
       customLabel={SettingsRadioLabel}
       value={value}
       header={label}
-      one={choices[0]}
-      two={choices[1]}
+      opts={choices}
       onChange={onChange}
     />
   );
@@ -62,99 +76,97 @@ const Radio = ({ classes, label, value, onChange, choices }) => {
 
 Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
 
-const StyledRadio = withStyles({
-  radioSettings: {
-    marginTop: '4px',
-    paddingBottom: '4px',
-    width: '100%',
-    '& > label': {
-      color: 'rgba(0, 0, 0, 0.89)',
-      transform: 'translate(0, 10px) scale(1)',
-      fontSize: '14px'
-    },
-    '& > div': {
-      marginTop: '20px'
-    }
-  },
-  label: {
-    display: 'none'
-  }
-})(Radio);
+const StyledRadio = Radio;
 
-const Dropdown = withStyles({
-  label: {
-    margin: 0,
-    fontSize: '14px'
-  },
-  wrapper: {
-    marginTop: '4px',
-    border: '2px solid lightgrey',
-    borderRadius: '4px',
-    padding: '0 8px'
-  }
-})(({ 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={l}>
-            {l}
+          <MenuItem key={index} value={getItemValue(l)}>
+            {getItemLabel(l)}
           </MenuItem>
         ))}
-      </Select>
+      </StyledSelect>
     </div>
   );
-});
+};
 
 Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
 
-const NumberField = withStyles({
-  field: {
-    width: '35%',
-    marginRight: '24px',
-    marginTop: '8px'
-  },
-  wrapper: {
-    marginTop: '4px',
+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 8px'
-  }
-})(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
+    padding: `0 ${theme.spacing(1)}`,
+    backgroundColor: 'transparent',
+  },
+}));
+
+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
     />
   );
-});
+};
 
 NumberField.propTypes = {
   ...baseTypes,
-  classes: PropTypes.object,
   suffix: PropTypes.string,
   min: PropTypes.number,
   max: PropTypes.number,
-  value: PropTypes.number
+  value: PropTypes.number,
 };
 
-const ToggleWrapper = ({ label, value, onChange }) => (
-  <Toggle label={label} checked={!!value} toggle={onChange} />
+TextField.propTypes = {
+  ...baseTypes,
+};
+
+const ToggleWrapper = ({ disabled, label, value, onChange }) => (
+  <Toggle label={label} checked={!!value} disabled={!!disabled} toggle={onChange} />
 );
 
 ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
@@ -164,25 +176,28 @@ const tagMap = {
   radio: StyledRadio,
   dropdown: Dropdown,
   numberField: NumberField,
-  checkbox: CheckboxChoice
+  checkbox: CheckboxChoice,
+  textField: TextField,
 };
 
-const Group = withStyles(() => ({
-  group: {
-    margin: '0 0 25px 0'
-  },
-  groupHeader: {
-    color: '#495B8F',
-    fontSize: '16px',
-    fontWeight: 600,
-    marginBottom: '8px'
-  },
-  numberFields: {
-    fontSize: '0.85rem',
-    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
@@ -195,7 +210,7 @@ const Group = withStyles(() => ({
     const tagProps = { ...properties, key, value };
     const Tag = tagMap[tagProps.type];
 
-    return <Tag key={key} {...tagProps} onChange={v => onChange(key, v, isConfigProperty)} />;
+    return <Tag key={key} {...tagProps} onChange={(v) => onChange(key, v, isConfigProperty)} />;
   };
 
   const content = (group, key) => {
@@ -210,8 +225,8 @@ const Group = withStyles(() => ({
     if (type === 'numberFields') {
       return (
         <div key={`numberField-${label}`}>
-          <p className={classes.numberFields}>{label}</p>
-          {Object.keys(fields).map(fieldKey => {
+          <StyledNumberFields>{label}</StyledNumberFields>
+          {Object.keys(fields).map((fieldKey) => {
             return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
           })}
         </div>
@@ -222,27 +237,35 @@ const Group = withStyles(() => ({
       return (
         <div key={`checkbox-${label}`}>
           <p>{label}</p>
-          {Object.keys(choices).map(choiceKey => {
+          {Object.keys(choices).map((choiceKey) => {
             return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);
           })}
         </div>
       );
     }
 
-    // if type is toggle, radio, dropdown or numberField
+    // if type is toggle, radio, dropdown, numberField or numberText
     return getTag(group, key);
   };
 
   return (
-    <div className={classes.group}>
-      <div className={classes.groupHeader}>{label}</div>
+    <StyledGroup>
+      <StyledGroupHeader>{label}</StyledGroupHeader>
 
-      {Object.keys(group).map(key => {
+      {Object.keys(group).map((key) => {
         return content(group, key);
       })}
-    </div>
+    </StyledGroup>
   );
-});
+};
+
+Group.propTypes = {
+  model: PropTypes.object,
+  label: PropTypes.string,
+  group: PropTypes.object,
+  configuration: PropTypes.object,
+  onChange: PropTypes.func,
+};
 
 export class Panel extends React.Component {
   static propTypes = {
@@ -250,16 +273,18 @@ export class Panel extends React.Component {
     configuration: PropTypes.object,
     groups: PropTypes.object,
     onChangeModel: PropTypes.func,
-    onChangeConfiguration: PropTypes.func
+    onChangeConfiguration: PropTypes.func,
+    modal: PropTypes.object,
   };
 
   static defaultProps = {
-    onChangeModel: () => {},
-    onChangeConfiguration: () => {}
+    onChangeModel: () => { },
+    onChangeConfiguration: () => { },
   };
 
   change = (key, value, isConfigProperty = false) => {
     log('[changeModel]', key, value);
+
     const { onChangeModel, onChangeConfiguration } = this.props;
     const model = { ...this.props.model };
     const configuration = { ...this.props.configuration };
@@ -274,21 +299,33 @@ export class Panel extends React.Component {
   };
 
   render() {
-    const { groups, model, configuration } = this.props;
+    const { groups, model, configuration, modal } = this.props;
+
     log('render:', model);
 
-    return (
-      <div>
-        {Object.keys(groups).map(g => (
+    const renderedGroups = Object.keys(groups || {}).map((group) => {
+      const showGroup = Object.entries(groups[group]).some(([, propVal]) => !!propVal);
+
+      if (showGroup) {
+        return (
           <Group
-            label={g}
-            key={g}
+            label={group}
+            key={group}
             model={model}
             configuration={configuration}
-            group={groups[g]}
+            group={groups[group]}
             onChange={this.change}
           />
-        ))}
+        );
+      }
+
+      return null;
+    });
+
+    return (
+      <div>
+        {renderedGroups}
+        {modal}
       </div>
     );
   }

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

@@ -1,20 +1,36 @@
-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 PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
 
-export default withStyles({
-  label: {
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+  '& .MuiFormControlLabel-label': {
     color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: '12px',
+    fontSize: theme.typography.fontSize - 2,
     left: '-5px',
-    position: 'relative'
-  }
-})(({ label, value, checked, onChange, classes }) => (
-  <FormControlLabel
+    position: 'relative',
+  },
+}));
+
+const StyledRadio = styled(Radio)(() => ({
+  color: `${color.tertiary()} !important`,
+}));
+
+const SettingsRadioLabel = ({ label, value, checked, onChange }) => (
+  <StyledFormControlLabel
     value={value}
-    classes={classes}
-    control={<Radio checked={checked} onChange={onChange} />}
+    control={<StyledRadio checked={checked} onChange={onChange} />}
     label={label}
   />
-));
+);
+
+SettingsRadioLabel.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default SettingsRadioLabel;

package/src/settings/toggle.jsx

@@ -1,31 +1,50 @@
 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 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'
+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`,
+  },
+  '&.Mui-checked .MuiSwitch-track': {
+    backgroundColor: `${color.tertiaryLight()} !important`,
   },
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: '14px',
-    paddingTop: theme.spacing.unit * 2
-  }
-}))(({ checked, label, toggle, classes }) => (
-  <div className={classes.toggle}>
-    <InputLabel className={classes.label}>{label}</InputLabel>
-    <Switch checked={checked} onChange={e => toggle(e.target.checked)} />
-  </div>
-));
+  '& .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)}
+    />
+  </StyledToggle>
+);
 
 Toggle.propTypes = {
   checked: PropTypes.bool,
+  disabled: PropTypes.bool,
   label: PropTypes.string.isRequired,
-  toggle: PropTypes.func.isRequired
+  toggle: PropTypes.func.isRequired,
 };
 
 export default Toggle;