@pie-lib/config-ui 13.1.0-beta.7 → 14.0.0-next.35

package/src/settings/panel.jsx

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

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

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

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

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

@@ -1,116 +0,0 @@
-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;