@pie-lib/config-ui 11.30.2 → 11.30.3-next.155

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,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,103 +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
-      classes={classes}
     />
   );
-});
+};
 
 NumberField.propTypes = {
   ...baseTypes,
-  classes: PropTypes.object,
   suffix: PropTypes.string,
   min: PropTypes.number,
   max: PropTypes.number,
@@ -184,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
@@ -227,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}`);
           })}
@@ -251,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 = {
@@ -272,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,24 +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',
   },
-  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}
   />
-));
+);
+
+SettingsRadioLabel.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+export default SettingsRadioLabel;

package/src/settings/toggle.jsx

@@ -1,47 +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 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,
+  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

@@ -1,61 +1,112 @@
 import { TagsInput } from '../index';
-import toJson from 'enzyme-to-json';
-import { shallow, mount } from 'enzyme';
+import { render, screen, userEvent, pressKey, Keys } from '@pie-lib/test-utils';
 import React from 'react';
 
 describe('TagsInput', () => {
-  describe('snapshots', () => {
-    it('renders', () => {
-      const wrapper = mount(<TagsInput classes={{ tagsInput: 'tagsInput' }} tags={['foo']} onChange={jest.fn()} />);
-      expect(toJson(wrapper)).toMatchSnapshot();
+  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('logic', () => {
+  describe('user interactions', () => {
     let onChange;
-    const mkWrapper = () => {
+    const renderComponent = (tags = ['foo']) => {
       onChange = jest.fn();
-      return shallow(<TagsInput onChange={onChange} classes={{}} tags={['foo']} />);
+      return render(<TagsInput onChange={onChange} tags={tags} />);
     };
 
-    describe('onFocus', () => {
-      it('sets state.focused = true', () => {
-        const wrapper = mkWrapper();
-        wrapper.instance().onFocus();
-        expect(wrapper.state('focused')).toEqual(true);
+    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();
       });
-    });
 
-    describe('onBlur', () => {
-      it('sets state.focused = false', () => {
-        const wrapper = mkWrapper();
-        wrapper.instance().onFocus();
-        wrapper.instance().onBlur();
-        expect(wrapper.state('focused')).toEqual(false);
+      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('onChange', () => {
-      it('sets state.value  ', () => {
-        const wrapper = mkWrapper();
-        wrapper.instance().onChange({ target: { value: 'boo' } });
-        expect(wrapper.state('value')).toEqual('boo');
+    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('onKeyDown', () => {
-      it('calls onChange on enter', () => {
-        const wrapper = mkWrapper();
-        wrapper.setState({ value: 'banana' });
-        wrapper.instance().onKeyDown({ keyCode: 13 });
-        expect(onChange).toBeCalledWith(['foo', 'banana']);
+    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]);
 
-      it('doesnt calls onChange on enter if the value is the same as a value in tags', () => {
-        const wrapper = mkWrapper();
-        wrapper.setState({ value: 'foo' });
-        wrapper.instance().onKeyDown({ keyCode: 13 });
-        expect(onChange).not.toBeCalled();
+        expect(onChange).toHaveBeenCalledWith(['bar']);
       });
     });
   });