@pie-lib/config-ui 13.0.4-next.31 → 13.0.4-next.34

package/src/settings/panel.jsx

@@ -0,0 +1,333 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { get, set } from 'lodash-es';
+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 '../number-text-field';
+import Checkbox from '../checkbox';
+
+const log = debug('pie-lib:config-ui:settings:panel');
+
+const labelValue = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+};
+
+const baseTypes = {
+  label: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+};
+
+const CheckboxChoice = ({ label, value, onChange }) => {
+  return (
+    <Checkbox
+      checked={value}
+      label={label}
+      onChange={(event) => {
+        onChange(event.target.checked);
+      }}
+    />
+  );
+};
+
+CheckboxChoice.propTypes = {
+  label: PropTypes.string,
+  value: PropTypes.bool,
+  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: '18px',
+    marginTop: theme.spacing(2.5),
+  },
+  '& > div': {
+    marginTop: theme.spacing(2.5),
+  },
+}));
+
+const Radio = ({ label, value, onChange, choices }) => {
+  return (
+    <StyledNChoice
+      direction="horizontal"
+      customLabel={SettingsRadioLabel}
+      value={value}
+      header={label}
+      opts={choices}
+      onChange={onChange}
+    />
+  );
+};
+
+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',
+  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 && <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>
+        ))}
+      </StyledSelect>
+    </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),
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: `0 ${theme.spacing(1)}`,
+    backgroundColor: 'transparent',
+  },
+}));
+
+const NumberField = ({ label, value, onChange = () => {}, suffix, min, max }) => {
+  return (
+    <StyledNumberTextField
+      variant={'standard'}
+      label={label || 'Label'}
+      value={value}
+      max={max}
+      min={min}
+      onChange={(ev, value) => onChange(value)}
+      suffix={suffix}
+      showErrorWhenOutsideRange
+      disableUnderline
+    />
+  );
+};
+
+NumberField.propTypes = {
+  ...baseTypes,
+  suffix: PropTypes.string,
+  min: PropTypes.number,
+  max: PropTypes.number,
+  value: PropTypes.number,
+};
+
+TextField.propTypes = {
+  ...baseTypes,
+};
+
+const ToggleWrapper = ({ disabled, label, value, onChange }) => (
+  <Toggle label={label} checked={!!value} disabled={!!disabled} toggle={onChange} />
+);
+
+ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
+
+const tagMap = {
+  toggle: ToggleWrapper,
+  radio: StyledRadio,
+  dropdown: Dropdown,
+  numberField: NumberField,
+  checkbox: CheckboxChoice,
+  textField: TextField,
+};
+
+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
+   * @param key - the key(or path) to be used to set or get from model or configuration
+   * @param innerKey - the key(or path) to be used to get from the group (used only for numberField type)
+   * @returns tag that corresponds to element type */
+  const getTag = (group, key, innerKey) => {
+    const { isConfigProperty, ...properties } = get(group, innerKey || key);
+    const value = isConfigProperty ? get(configuration, key) : get(model, key);
+    const tagProps = { ...properties, key, value };
+    const Tag = tagMap[tagProps.type];
+
+    return <Tag key={key} {...tagProps} onChange={(v) => onChange(key, v, isConfigProperty)} />;
+  };
+
+  const content = (group, key) => {
+    const currentGroup = group[key];
+
+    if (!currentGroup) {
+      return null;
+    }
+
+    const { type, label, fields, choices } = currentGroup;
+
+    if (type === 'numberFields') {
+      return (
+        <div key={`numberField-${label}`}>
+          <StyledNumberFields>{label}</StyledNumberFields>
+          {Object.keys(fields).map((fieldKey) => {
+            return getTag(group, `${key}.${fieldKey}`, `${key}.fields.${fieldKey}`);
+          })}
+        </div>
+      );
+    }
+
+    if (type === 'checkboxes') {
+      return (
+        <div key={`checkbox-${label}`}>
+          <p>{label}</p>
+          {Object.keys(choices).map((choiceKey) => {
+            return getTag(group, `${key}.${choiceKey}`, `${key}.choices.${choiceKey}`);
+          })}
+        </div>
+      );
+    }
+
+    // if type is toggle, radio, dropdown, numberField or numberText
+    return getTag(group, key);
+  };
+
+  return (
+    <StyledGroup>
+      <StyledGroupHeader>{label}</StyledGroupHeader>
+
+      {Object.keys(group).map((key) => {
+        return content(group, key);
+      })}
+    </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 = {
+    model: PropTypes.object,
+    configuration: PropTypes.object,
+    groups: PropTypes.object,
+    onChangeModel: PropTypes.func,
+    onChangeConfiguration: PropTypes.func,
+    modal: PropTypes.object,
+  };
+
+  static defaultProps = {
+    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 };
+
+    if (isConfigProperty) {
+      set(configuration, key, value);
+      onChangeConfiguration(configuration, key);
+    } else {
+      set(model, key, value);
+      onChangeModel(model, key);
+    }
+  };
+
+  render() {
+    const { groups, model, configuration, modal } = this.props;
+
+    log('render:', model);
+
+    const renderedGroups = Object.keys(groups || {}).map((group) => {
+      const showGroup = Object.entries(groups[group]).some(([, propVal]) => !!propVal);
+
+      if (showGroup) {
+        return (
+          <Group
+            label={group}
+            key={group}
+            model={model}
+            configuration={configuration}
+            group={groups[group]}
+            onChange={this.change}
+          />
+        );
+      }
+
+      return null;
+    });
+
+    return (
+      <div>
+        {renderedGroups}
+        {modal}
+      </div>
+    );
+  }
+}
+
+export default Panel;

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

@@ -0,0 +1,32 @@
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+  '& .MuiFormControlLabel-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 value={value} 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

@@ -0,0 +1,46 @@
+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 { 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': {
+    color: `${color.tertiary()} !important`,
+  },
+  '&.Mui-checked .MuiSwitch-track': {
+    backgroundColor: `${color.tertiaryLight()} !important`,
+  },
+  '& .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,
+};
+
+export default Toggle;

package/src/tabs/index.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import MuiTabs from '@mui/material/Tabs';
+import MuiTab from '@mui/material/Tab';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+
+const StyledMuiTab = styled(MuiTab)(() => ({}));
+
+export class Tabs extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    contentClassName: PropTypes.string,
+    contentStyle: PropTypes.object,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = { value: 0 };
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { value } = this.state;
+    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 ? <StyledMuiTab key={index} label={c.props.title} /> : null,
+          )}
+        </MuiTabs>
+
+        <div className={contentClassName} style={contentStyle}>
+          {children[value]}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Tabs;

package/src/tags-input/__tests__/index.test.jsx

@@ -0,0 +1,113 @@
+import { TagsInput } from '../index';
+import { Keys, pressKey, render, screen, userEvent } 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

@@ -0,0 +1,116 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import { uniq } from 'lodash-es';
+import Chip from '@mui/material/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} />;
+
+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 = {
+    tags: PropTypes.arrayOf(PropTypes.string).isRequired,
+    onChange: PropTypes.func.isRequired,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      focused: false,
+    };
+
+    this.onKeyDown = (event) => {
+      if (event.keyCode === ENTER && this.state.value !== '') {
+        const tag = this.state.value.trim();
+        const newTags = uniq(this.props.tags.concat([tag]));
+
+        if (newTags.length !== this.props.tags.length) {
+          this.props.onChange(newTags);
+          this.setState({ value: '' });
+        }
+      }
+    };
+
+    this.onChange = (event) => {
+      this.setState({ value: event.target.value });
+    };
+
+    this.deleteTag = (tag) => {
+      const { tags } = this.props;
+
+      const tagIndex = tags.indexOf(tag);
+      if (tagIndex !== -1) {
+        tags.splice(tagIndex, 1);
+        this.props.onChange(tags);
+        this.input.focus();
+      }
+    };
+  }
+
+  onFocus = () => {
+    this.setState({ focused: true });
+  };
+
+  onBlur = () => {
+    this.setState({ focused: false });
+  };
+
+  render() {
+    const { tags } = this.props;
+    return (
+      <MuiBox focused={this.state.focused}>
+        <StyledTagsInput>
+          {(tags || []).map((t, index) => (
+            <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
+          ))}
+          <StyledInput
+            ref={(r) => (this.input = r)}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onChange}
+            value={this.state.value}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            type="text"
+          />
+        </StyledTagsInput>
+      </MuiBox>
+    );
+  }
+}
+
+export default TagsInput;