@pie-lib/config-ui 9.0.3-next.2 → 10.0.0-beta.1

package/src/settings/panel.jsx

@@ -0,0 +1,297 @@
+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 debug from 'debug';
+
+import Toggle from './toggle';
+import TwoChoice from '../two-choice';
+import SettingsRadioLabel from './settings-radio-label';
+import { NumberTextField } from '../index';
+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 Radio = ({ classes, label, value, onChange, choices }) => {
+  return (
+    <TwoChoice
+      className={classes.radioSettings}
+      direction="vertical"
+      customLabel={SettingsRadioLabel}
+      value={value}
+      header={label}
+      one={choices[0]}
+      two={choices[1]}
+      onChange={onChange}
+    />
+  );
+};
+
+Radio.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.shape(labelValue)) };
+
+const StyledRadio = withStyles({
+  radioSettings: {
+    marginTop: '4px',
+    paddingBottom: '4px',
+    width: '100%',
+    '& > label': {
+      color: 'rgba(0, 0, 0, 0.89)',
+      transform: 'translate(0, 10px) scale(1)',
+      fontSize: '14px'
+    },
+    '& > div': {
+      marginTop: '20px'
+    }
+  },
+  label: {
+    display: 'none'
+  }
+})(Radio);
+
+const Dropdown = withStyles({
+  label: {
+    margin: 0,
+    fontSize: '14px'
+  },
+  wrapper: {
+    marginTop: '4px',
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: '0 8px'
+  }
+})(({ classes, label, value, onChange, choices = [] }) => {
+  return (
+    <div>
+      {label && <p className={classes.label}>{label}</p>}
+      <Select
+        className={classes.wrapper}
+        value={value || (choices && choices[0])}
+        onChange={({ target }) => onChange(target.value)}
+        input={<Input id={`dropdown-${label}`} />}
+        disableUnderline
+      >
+        {choices.map((l, index) => (
+          <MenuItem key={index} value={l}>
+            {l}
+          </MenuItem>
+        ))}
+      </Select>
+    </div>
+  );
+});
+
+Dropdown.propTypes = { ...baseTypes, choices: PropTypes.arrayOf(PropTypes.string) };
+
+const NumberField = withStyles({
+  field: {
+    width: '35%',
+    marginRight: '24px',
+    marginTop: '8px'
+  },
+  wrapper: {
+    marginTop: '4px',
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: '0 8px'
+  }
+})(({ classes, label, value, onChange = () => {}, suffix, min, max }) => {
+  return (
+    <NumberTextField
+      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,
+  value: PropTypes.number
+};
+
+const ToggleWrapper = ({ label, value, onChange }) => (
+  <Toggle label={label} checked={!!value} toggle={onChange} />
+);
+
+ToggleWrapper.propTypes = { ...baseTypes, value: PropTypes.bool };
+
+const tagMap = {
+  toggle: ToggleWrapper,
+  radio: StyledRadio,
+  dropdown: Dropdown,
+  numberField: NumberField,
+  checkbox: CheckboxChoice
+};
+
+const Group = withStyles(() => ({
+  group: {
+    margin: '0 0 25px 0'
+  },
+  groupHeader: {
+    color: '#495B8F',
+    fontSize: '16px',
+    fontWeight: 600,
+    marginBottom: '8px'
+  },
+  numberFields: {
+    fontSize: '0.85rem',
+    marginBottom: 0
+  }
+}))(props => {
+  const { classes, 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}`}>
+          <p className={classes.numberFields}>{label}</p>
+          {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 or numberField
+    return getTag(group, key);
+  };
+
+  return (
+    <div className={classes.group}>
+      <div className={classes.groupHeader}>{label}</div>
+
+      {Object.keys(group).map(key => {
+        return content(group, key);
+      })}
+    </div>
+  );
+});
+
+export class Panel extends React.Component {
+  static propTypes = {
+    model: PropTypes.object,
+    configuration: PropTypes.object,
+    groups: PropTypes.object,
+    onChangeModel: PropTypes.func,
+    onChangeConfiguration: PropTypes.func
+  };
+
+  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 } = this.props;
+    log('render:', model);
+
+    return (
+      <div>
+        {Object.keys(groups).map(g => (
+          <Group
+            label={g}
+            key={g}
+            model={model}
+            configuration={configuration}
+            group={groups[g]}
+            onChange={this.change}
+          />
+        ))}
+      </div>
+    );
+  }
+}
+
+export default Panel;

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

@@ -0,0 +1,20 @@
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+export default withStyles({
+  label: {
+    color: 'rgba(0, 0, 0, 0.89)',
+    fontSize: '12px',
+    left: '-5px',
+    position: 'relative'
+  }
+})(({ label, value, checked, onChange, classes }) => (
+  <FormControlLabel
+    value={value}
+    classes={classes}
+    control={<Radio checked={checked} onChange={onChange} />}
+    label={label}
+  />
+));

package/src/settings/toggle.jsx

@@ -0,0 +1,31 @@
+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';
+
+const Toggle = withStyles(theme => ({
+  toggle: {
+    display: 'flex',
+    width: '100%',
+    justifyContent: 'space-between'
+  },
+  label: {
+    color: 'rgba(0, 0, 0, 0.89)',
+    fontSize: '14px',
+    paddingTop: theme.spacing.unit * 2
+  }
+}))(({ checked, label, toggle, classes }) => (
+  <div className={classes.toggle}>
+    <InputLabel className={classes.label}>{label}</InputLabel>
+    <Switch checked={checked} onChange={e => toggle(e.target.checked)} />
+  </div>
+));
+
+Toggle.propTypes = {
+  checked: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired
+};
+
+export default Toggle;

package/src/tabs/index.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import MuiTabs from '@material-ui/core/Tabs';
+import MuiTab from '@material-ui/core/Tab';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core';
+
+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
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0
+    };
+  }
+
+  handleChange = (event, value) => {
+    this.setState({ value });
+  };
+
+  render() {
+    const { value } = this.state;
+    const { children, className, contentClassName, classes } = 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
+          )}
+        </MuiTabs>
+        <div className={contentClassName}>{children[value]}</div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(() => ({
+  tabRoot: {}
+}))(Tabs);

package/src/tags-input/index.jsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import uniq from 'lodash/uniq';
+import Chip from '@material-ui/core/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} />
+));
+
+Tag.propTypes = {
+  label: PropTypes.string.isRequired,
+  onDelete: PropTypes.func.isRequired
+};
+
+export class TagsInput extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    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 { classes, tags } = this.props;
+    return (
+      <MuiBox focused={this.state.focused}>
+        <div className={classes.tagsInput}>
+          {(tags || []).map((t, index) => (
+            <Tag key={index} label={t} onDelete={() => this.deleteTag(t)} />
+          ))}
+          <input
+            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>
+      </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);

package/src/two-choice.jsx

@@ -0,0 +1,94 @@
+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';
+
+const styles = theme => ({
+  group: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    paddingLeft: 0,
+    marginTop: theme.spacing.unit
+  },
+  vertical: {
+    flexDirection: 'column'
+  }
+});
+
+class RawNChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    customLabel: PropTypes.func,
+    opts: PropTypes.array.isRequired,
+    value: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    direction: PropTypes.oneOf(['horizontal', 'vertical']),
+    classes: PropTypes.object.isRequired
+  };
+
+  handleChange = event => {
+    this.props.onChange(event.currentTarget.value);
+  };
+
+  render() {
+    const { header, className, classes, customLabel, opts, value, direction } = this.props;
+
+    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])}>
+          {preppedOpts.map((o, index) => (
+            <LabelComponent
+              value={o.value}
+              key={index}
+              checked={o.value === value}
+              onChange={this.handleChange}
+              label={o.label}
+            />
+          ))}
+        </div>
+      </InputContainer>
+    );
+  }
+}
+
+export const NChoice = withStyles(styles)(RawNChoice);
+
+const labelValue = PropTypes.shape({ label: PropTypes.string, value: PropTypes.string });
+
+class TwoChoice extends React.Component {
+  static propTypes = {
+    header: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    one: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    two: PropTypes.oneOfType([labelValue, PropTypes.string]),
+    className: PropTypes.string,
+    customLabel: PropTypes.func
+  };
+
+  render() {
+    const { one, two, header, className, customLabel, value, onChange } = this.props;
+    const opts = [one, two];
+
+    return (
+      <NChoice
+        customLabel={customLabel}
+        header={header}
+        className={className}
+        opts={opts}
+        value={value}
+        onChange={onChange}
+      />
+    );
+  }
+}
+
+export default withStyles(styles)(TwoChoice);

package/src/with-stateful-model.jsx

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

package/NEXT.CHANGELOG.json

@@ -1 +0,0 @@
-[]

package/__mocks__/@pie-lib/editable-html.jsx

@@ -1,3 +0,0 @@
-import React from 'react';
-
-export default () => <div>EditableHtml</div>;