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

package/src/tabs/index.jsx

@@ -1,23 +1,23 @@
 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,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
+    contentStyle: PropTypes.object,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   };
 
   constructor(props) {
     super(props);
-    this.state = {
-      value: 0
-    };
+    this.state = { value: 0 };
   }
 
   handleChange = (event, value) => {
@@ -26,26 +26,22 @@ export class Tabs extends React.Component {
 
   render() {
     const { value } = this.state;
-    const { children, className, contentClassName, classes } = this.props;
+    const { children, className, contentClassName, contentStyle = {} } = 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 ? (
-              <MuiTab classes={tabClasses} key={index} label={c.props.title} />
-            ) : null
+            c && c.props.title ? <StyledMuiTab key={index} label={c.props.title} /> : null,
           )}
         </MuiTabs>
-        <div className={contentClassName}>{children[value]}</div>
+
+        <div className={contentClassName} style={contentStyle}>
+          {children[value]}
+        </div>
       </div>
     );
   }
 }
 
-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,41 +1,60 @@
 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
+  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
+    onChange: PropTypes.func.isRequired,
   };
 
   constructor(props) {
     super(props);
     this.state = {
       value: '',
-      focused: false
+      focused: false,
     };
 
-    this.onKeyDown = event => {
+    this.onKeyDown = (event) => {
       if (event.keyCode === ENTER && this.state.value !== '') {
         const tag = this.state.value.trim();
         const newTags = uniq(this.props.tags.concat([tag]));
@@ -47,11 +66,11 @@ export class TagsInput extends React.Component {
       }
     };
 
-    this.onChange = event => {
+    this.onChange = (event) => {
       this.setState({ value: event.target.value });
     };
 
-    this.deleteTag = tag => {
+    this.deleteTag = (tag) => {
       const { tags } = this.props;
 
       const tagIndex = tags.indexOf(tag);
@@ -72,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
-            ref={r => (this.input = r)}
+          <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: 'solid 0px white',
-    display: 'flex',
-    flexWrap: 'wrap'
-  },
-  input: {
-    padding: '2px',
-    margin: '1px',
-    minWidth: '30px',
-    width: '100%',
-    flex: '1',
-    border: 'solid 0px white',
-    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: {
-    flexDirection: 'column'
-  }
-});
+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,24 +23,23 @@ class RawNChoice extends React.Component {
     value: PropTypes.string,
     onChange: PropTypes.func.isRequired,
     direction: PropTypes.oneOf(['horizontal', 'vertical']),
-    classes: PropTypes.object.isRequired
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.props.onChange(event.currentTarget.value);
   };
 
   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 => {
+    const preppedOpts = opts.map((o) => {
       return typeof o === 'string' ? { label: o, value: o } : o;
     });
     const LabelComponent = customLabel || RadioWithLabel;
 
     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 });
 
@@ -71,7 +67,7 @@ class TwoChoice extends React.Component {
     one: PropTypes.oneOfType([labelValue, PropTypes.string]),
     two: PropTypes.oneOfType([labelValue, PropTypes.string]),
     className: PropTypes.string,
-    customLabel: PropTypes.func
+    customLabel: PropTypes.func,
   };
 
   render() {
@@ -91,4 +87,4 @@ class TwoChoice extends React.Component {
   }
 }
 
-export default withStyles(styles)(TwoChoice);
+export default TwoChoice;

package/src/with-stateful-model.jsx

@@ -1,25 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const withStatefulModel = Component => {
+const withStatefulModel = (Component) => {
   class Stateful extends React.Component {
     static propTypes = {
       model: PropTypes.object.isRequired,
-      onChange: PropTypes.func.isRequired
+      onChange: PropTypes.func.isRequired,
     };
 
     constructor(props) {
       super(props);
       this.state = {
-        model: props.model
+        model: props.model,
       };
     }
 
-    componentWillReceiveProps(props) {
+    UNSAFE_componentWillReceiveProps(props) {
       this.setState({ model: props.model });
     }
 
-    onChange = model => {
+    onChange = (model) => {
       this.setState({ model }, () => {
         this.props.onChange(this.state.model);
       });

package/README.md

@@ -1,12 +0,0 @@
-# install
-
-```
-npm install
-```
-
-# demo
-
-```
-cd demo
-../node_modules/.bin/webpack-dev-server --hot --inline
-```