@pie-element/hotspot 11.0.5-esm.1 → 11.1.0-next.0

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

@@ -1,328 +0,0 @@
-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-lib/config-ui/src/settings/settings-radio-label.jsx

@@ -1,24 +0,0 @@
-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-lib/config-ui/src/settings/toggle.jsx

@@ -1,49 +0,0 @@
-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-lib/config-ui/src/tabs/index.jsx

@@ -1,47 +0,0 @@
-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-lib/config-ui/src/tags-input/__tests__/__snapshots__/index.test.jsx.snap

@@ -1,170 +0,0 @@
-// 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-lib/config-ui/src/tags-input/__tests__/index.test.jsx

@@ -1,62 +0,0 @@
-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();
-      });
-    });
-  });
-});