@pie-element/complex-rubric 4.0.0 → 5.0.1-esmbeta.1

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/settings/panel.jsx

@@ -0,0 +1,328 @@
+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 { 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');
+
+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 (
+    <NChoice
+      className={classes.radioSettings}
+      direction="horizontal"
+      customLabel={SettingsRadioLabel}
+      value={value}
+      header={label}
+      opts={choices}
+      onChange={onChange}
+    />
+  );
+};
+
+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 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 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}
+        value={value || (choices && choices[0])}
+        onChange={({ target }) => onChange(target.value)}
+        input={<Input id={`dropdown-${label}`} />}
+        disableUnderline
+      >
+        {choices.map((l, index) => (
+          <MenuItem key={index} value={getItemValue(l)}>
+            {getItemLabel(l)}
+          </MenuItem>
+        ))}
+      </Select>
+    </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,
+    border: '2px solid lightgrey',
+    borderRadius: '4px',
+    padding: `0 ${theme.spacing.unit}px`,
+  },
+}))(({ 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
+      classes={classes}
+    />
+  );
+});
+
+NumberField.propTypes = {
+  ...baseTypes,
+  classes: PropTypes.object,
+  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 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;
+
+  /**
+   * @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, numberField or numberText
+    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,
+    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/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/settings/settings-radio-label.jsx

@@ -0,0 +1,24 @@
+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';
+import { color } from '@pie-lib/render-ui';
+
+export default withStyles((theme) => ({
+  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
+    value={value}
+    classes={{ label: classes.label }}
+    control={<Radio className={classes.customColor} checked={checked} onChange={onChange} />}
+    label={label}
+  />
+));

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/settings/toggle.jsx

@@ -0,0 +1,49 @@
+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 { 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: {
+    color: `${color.tertiary()} !important`,
+  },
+  checkedBar: {
+    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,
+        }),
+      }}
+      checked={checked}
+      disabled={disabled}
+      onChange={(e) => toggle(e.target.checked)}
+    />
+  </div>
+));
+
+Toggle.propTypes = {
+  checked: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  toggle: PropTypes.func.isRequired,
+};
+
+export default Toggle;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/tabs/index.jsx

@@ -0,0 +1,47 @@
+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,
+    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 = {}, 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} style={contentStyle}>
+          {children[value]}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(() => ({ tabRoot: {} }))(Tabs);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/tags-input/__tests__/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TagsInput snapshots renders 1`] = `
+<TagsInput
+  classes={
+    Object {
+      "tagsInput": "tagsInput",
+    }
+  }
+  onChange={[MockFunction]}
+  tags={
+    Array [
+      "foo",
+    ]
+  }
+>
+  <WithStyles(Component)
+    focused={false}
+  >
+    <Component
+      classes={
+        Object {
+          "focused": "Component-focused-2",
+          "muiBox": "Component-muiBox-1",
+        }
+      }
+      focused={false}
+    >
+      <div
+        className="Component-muiBox-1"
+      >
+        <div
+          className="tagsInput"
+        >
+          <WithStyles(Component)
+            key="0"
+            label="foo"
+            onDelete={[Function]}
+          >
+            <Component
+              classes={
+                Object {
+                  "tag": "Component-tag-3",
+                }
+              }
+              label="foo"
+              onDelete={[Function]}
+            >
+              <WithStyles(Chip)
+                className="Component-tag-3"
+                label="foo"
+                onDelete={[Function]}
+              >
+                <Chip
+                  className="Component-tag-3"
+                  classes={
+                    Object {
+                      "avatar": "MuiChip-avatar-16",
+                      "avatarChildren": "MuiChip-avatarChildren-19",
+                      "avatarColorPrimary": "MuiChip-avatarColorPrimary-17",
+                      "avatarColorSecondary": "MuiChip-avatarColorSecondary-18",
+                      "clickable": "MuiChip-clickable-7",
+                      "clickableColorPrimary": "MuiChip-clickableColorPrimary-8",
+                      "clickableColorSecondary": "MuiChip-clickableColorSecondary-9",
+                      "colorPrimary": "MuiChip-colorPrimary-5",
+                      "colorSecondary": "MuiChip-colorSecondary-6",
+                      "deletable": "MuiChip-deletable-10",
+                      "deletableColorPrimary": "MuiChip-deletableColorPrimary-11",
+                      "deletableColorSecondary": "MuiChip-deletableColorSecondary-12",
+                      "deleteIcon": "MuiChip-deleteIcon-24",
+                      "deleteIconColorPrimary": "MuiChip-deleteIconColorPrimary-25",
+                      "deleteIconColorSecondary": "MuiChip-deleteIconColorSecondary-26",
+                      "deleteIconOutlinedColorPrimary": "MuiChip-deleteIconOutlinedColorPrimary-27",
+                      "deleteIconOutlinedColorSecondary": "MuiChip-deleteIconOutlinedColorSecondary-28",
+                      "icon": "MuiChip-icon-20",
+                      "iconColorPrimary": "MuiChip-iconColorPrimary-21",
+                      "iconColorSecondary": "MuiChip-iconColorSecondary-22",
+                      "label": "MuiChip-label-23",
+                      "outlined": "MuiChip-outlined-13",
+                      "outlinedPrimary": "MuiChip-outlinedPrimary-14",
+                      "outlinedSecondary": "MuiChip-outlinedSecondary-15",
+                      "root": "MuiChip-root-4",
+                    }
+                  }
+                  color="default"
+                  component="div"
+                  label="foo"
+                  onDelete={[Function]}
+                  variant="default"
+                >
+                  <div
+                    className="MuiChip-root-4 MuiChip-deletable-10 Component-tag-3"
+                    onKeyDown={[Function]}
+                    onKeyUp={[Function]}
+                    role="button"
+                    tabIndex={0}
+                  >
+                    <span
+                      className="MuiChip-label-23"
+                    >
+                      foo
+                    </span>
+                    <pure(Cancel)
+                      className="MuiChip-deleteIcon-24"
+                      onClick={[Function]}
+                    >
+                      <Cancel
+                        className="MuiChip-deleteIcon-24"
+                        onClick={[Function]}
+                      >
+                        <WithStyles(SvgIcon)
+                          className="MuiChip-deleteIcon-24"
+                          onClick={[Function]}
+                        >
+                          <SvgIcon
+                            className="MuiChip-deleteIcon-24"
+                            classes={
+                              Object {
+                                "colorAction": "MuiSvgIcon-colorAction-32",
+                                "colorDisabled": "MuiSvgIcon-colorDisabled-34",
+                                "colorError": "MuiSvgIcon-colorError-33",
+                                "colorPrimary": "MuiSvgIcon-colorPrimary-30",
+                                "colorSecondary": "MuiSvgIcon-colorSecondary-31",
+                                "fontSizeInherit": "MuiSvgIcon-fontSizeInherit-35",
+                                "fontSizeLarge": "MuiSvgIcon-fontSizeLarge-37",
+                                "fontSizeSmall": "MuiSvgIcon-fontSizeSmall-36",
+                                "root": "MuiSvgIcon-root-29",
+                              }
+                            }
+                            color="inherit"
+                            component="svg"
+                            fontSize="default"
+                            onClick={[Function]}
+                            viewBox="0 0 24 24"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              className="MuiSvgIcon-root-29 MuiChip-deleteIcon-24"
+                              focusable="false"
+                              onClick={[Function]}
+                              role="presentation"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
+                              />
+                            </svg>
+                          </SvgIcon>
+                        </WithStyles(SvgIcon)>
+                      </Cancel>
+                    </pure(Cancel)>
+                  </div>
+                </Chip>
+              </WithStyles(Chip)>
+            </Component>
+          </WithStyles(Component)>
+          <input
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onKeyDown={[Function]}
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </Component>
+  </WithStyles(Component)>
+</TagsInput>
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/config-ui/src/tags-input/__tests__/index.test.jsx

@@ -0,0 +1,62 @@
+import { TagsInput } from '../index';
+import toJson from 'enzyme-to-json';
+import { shallow, mount } from 'enzyme';
+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('logic', () => {
+    let onChange;
+    const mkWrapper = () => {
+      onChange = jest.fn();
+      return shallow(<TagsInput onChange={onChange} classes={{}} tags={['foo']} />);
+    };
+
+    describe('onFocus', () => {
+      it('sets state.focused = true', () => {
+        const wrapper = mkWrapper();
+        wrapper.instance().onFocus();
+        expect(wrapper.state('focused')).toEqual(true);
+      });
+    });
+
+    describe('onBlur', () => {
+      it('sets state.focused = false', () => {
+        const wrapper = mkWrapper();
+        wrapper.instance().onFocus();
+        wrapper.instance().onBlur();
+        expect(wrapper.state('focused')).toEqual(false);
+      });
+    });
+
+    describe('onChange', () => {
+      it('sets state.value  ', () => {
+        const wrapper = mkWrapper();
+        wrapper.instance().onChange({ target: { value: 'boo' } });
+        expect(wrapper.state('value')).toEqual('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']);
+      });
+
+      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();
+      });
+    });
+  });
+});