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

package/src/settings/panel.jsx

@@ -1,19 +1,19 @@
 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 { NChoice } from '../two-choice';
 import SettingsRadioLabel from './settings-radio-label';
-import { NumberTextField } from '../index';
+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,24 @@ 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: '18px',
+    marginTop: theme.spacing(2.5),
+  },
+  '& > 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,102 +76,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
     />
   );
-});
+};
 
 NumberField.propTypes = {
   ...baseTypes,
-  classes: PropTypes.object,
   suffix: PropTypes.string,
   min: PropTypes.number,
   max: PropTypes.number,
@@ -168,7 +165,9 @@ TextField.propTypes = {
   ...baseTypes,
 };
 
-const ToggleWrapper = ({ label, value, onChange }) => <Toggle label={label} checked={!!value} toggle={onChange} />;
+const ToggleWrapper = ({ disabled, label, value, onChange }) => (
+  <Toggle label={label} checked={!!value} disabled={!!disabled} toggle={onChange} />
+);
 
 ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
 
@@ -181,22 +180,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
@@ -224,7 +225,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}`);
           })}
@@ -248,15 +249,23 @@ 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>
   );
-});
+};
+
+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 = {
@@ -269,8 +278,8 @@ export class Panel extends React.Component {
   };
 
   static defaultProps = {
-    onChangeModel: () => {},
-    onChangeConfiguration: () => {},
+    onChangeModel: () => { },
+    onChangeConfiguration: () => { },
   };
 
   change = (key, value, isConfigProperty = false) => {

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((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',
   },
-}))(({ label, value, checked, onChange, classes }) => (
-  <FormControlLabel
+}));
+
+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,29 +1,48 @@
 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`,
   },
-  label: {
-    color: 'rgba(0, 0, 0, 0.89)',
-    fontSize: theme.typography.fontSize,
-    paddingTop: theme.spacing.unit * 2,
+  '&.Mui-checked .MuiSwitch-track': {
+    backgroundColor: `${color.tertiaryLight()} !important`,
   },
-}))(({ 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,
 };

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/__tests__/index.test.jsx

@@ -0,0 +1,113 @@
+import { TagsInput } from '../index';
+import { render, screen, userEvent, pressKey, Keys } from '@pie-lib/test-utils';
+import React from 'react';
+
+describe('TagsInput', () => {
+  describe('rendering', () => {
+    it('renders existing tags as chips', () => {
+      render(<TagsInput tags={['foo', 'bar']} onChange={jest.fn()} />);
+
+      expect(screen.getByText('foo')).toBeInTheDocument();
+      expect(screen.getByText('bar')).toBeInTheDocument();
+    });
+
+    it('renders input field', () => {
+      render(<TagsInput tags={['foo']} onChange={jest.fn()} />);
+
+      const input = screen.getByRole('textbox');
+      expect(input).toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    let onChange;
+    const renderComponent = (tags = ['foo']) => {
+      onChange = jest.fn();
+      return render(<TagsInput onChange={onChange} tags={tags} />);
+    };
+
+    describe('focus behavior', () => {
+      it('allows user to focus the input', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+
+        const input = screen.getByRole('textbox');
+        await user.click(input);
+
+        expect(input).toHaveFocus();
+      });
+
+      it('allows user to blur the input', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+
+        const input = screen.getByRole('textbox');
+        await user.click(input);
+        expect(input).toHaveFocus();
+
+        await user.tab();
+        expect(input).not.toHaveFocus();
+      });
+    });
+
+    describe('typing in input', () => {
+      it('updates input value when user types', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+
+        const input = screen.getByRole('textbox');
+        await user.type(input, 'boo');
+
+        expect(input).toHaveValue('boo');
+      });
+    });
+
+    describe('adding tags', () => {
+      it('adds new tag when user presses Enter', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+
+        const input = screen.getByRole('textbox');
+        await user.type(input, 'banana');
+        pressKey(input, Keys.ENTER);
+
+        expect(onChange).toHaveBeenCalledWith(['foo', 'banana']);
+      });
+
+      it('does not add duplicate tags', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+
+        const input = screen.getByRole('textbox');
+        await user.type(input, 'foo');
+        pressKey(input, Keys.ENTER);
+
+        expect(onChange).not.toHaveBeenCalled();
+      });
+
+      it('clears input after adding tag', async () => {
+        const user = userEvent.setup();
+        renderComponent();
+
+        const input = screen.getByRole('textbox');
+        await user.type(input, 'banana');
+        pressKey(input, Keys.ENTER);
+
+        expect(input).toHaveValue('');
+      });
+    });
+
+    describe('deleting tags', () => {
+      it('removes tag when user clicks delete button', async () => {
+        const user = userEvent.setup();
+        renderComponent(['foo', 'bar']);
+
+        // Find the delete button for 'foo' tag
+        const deleteButtons = screen.getAllByTestId('CancelIcon');
+        await user.click(deleteButtons[0]);
+
+        expect(onChange).toHaveBeenCalledWith(['bar']);
+      });
+    });
+  });
+});

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;