@pie-lib/config-ui 11.9.25-next.0 → 11.10.0-beta.1

package/src/__tests__/__snapshots__/two-choice.test.js.snap

@@ -0,0 +1,171 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NChoice renders n choice radio buttons vertical correctly 1`] = `
+<div
+  className="MuiFormControl-root-5 RawInputContainer-formControl-3"
+>
+  <label
+    className="MuiFormLabel-root-20 MuiInputLabel-root-9 MuiInputLabel-formControl-14 MuiInputLabel-animated-17 MuiInputLabel-shrink-16 RawInputContainer-label-4"
+    data-shrink={true}
+  >
+    n-choice-vertical
+  </label>
+  <div
+    className="RawNChoice-group-1 RawNChoice-vertical-2"
+  >
+    <label
+      className="MuiFormControlLabel-root-29"
+    >
+      <span
+        className="MuiButtonBase-root-50 MuiIconButton-root-44 MuiPrivateSwitchBase-root-40 MuiRadio-root-35 MuiRadio-colorSecondary-39 MuiPrivateSwitchBase-checked-41 MuiRadio-checked-36 Component-customColor-28"
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={null}
+      >
+        <span
+          className="MuiIconButton-label-49"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-53"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+          <input
+            checked={true}
+            className="MuiPrivateSwitchBase-input-43"
+            disabled={false}
+            onChange={[Function]}
+            type="radio"
+            value="left"
+          />
+        </span>
+        <span
+          className="MuiTouchRipple-root-98"
+        />
+      </span>
+      <span
+        className="MuiTypography-root-62 MuiTypography-body1-71 MuiFormControlLabel-label-34 Component-label-27"
+      >
+        left
+      </span>
+    </label>
+    <label
+      className="MuiFormControlLabel-root-29"
+    >
+      <span
+        className="MuiButtonBase-root-50 MuiIconButton-root-44 MuiPrivateSwitchBase-root-40 MuiRadio-root-35 MuiRadio-colorSecondary-39 Component-customColor-28"
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={null}
+      >
+        <span
+          className="MuiIconButton-label-49"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-53"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+          <input
+            checked={false}
+            className="MuiPrivateSwitchBase-input-43"
+            disabled={false}
+            onChange={[Function]}
+            type="radio"
+            value="center"
+          />
+        </span>
+        <span
+          className="MuiTouchRipple-root-98"
+        />
+      </span>
+      <span
+        className="MuiTypography-root-62 MuiTypography-body1-71 MuiFormControlLabel-label-34 Component-label-27"
+      >
+        center
+      </span>
+    </label>
+    <label
+      className="MuiFormControlLabel-root-29"
+    >
+      <span
+        className="MuiButtonBase-root-50 MuiIconButton-root-44 MuiPrivateSwitchBase-root-40 MuiRadio-root-35 MuiRadio-colorSecondary-39 Component-customColor-28"
+        onBlur={[Function]}
+        onContextMenu={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={null}
+      >
+        <span
+          className="MuiIconButton-label-49"
+        >
+          <svg
+            aria-hidden="true"
+            className="MuiSvgIcon-root-53"
+            focusable="false"
+            role="presentation"
+            viewBox="0 0 24 24"
+          >
+            <path
+              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+            />
+          </svg>
+          <input
+            checked={false}
+            className="MuiPrivateSwitchBase-input-43"
+            disabled={false}
+            onChange={[Function]}
+            type="radio"
+            value="right"
+          />
+        </span>
+        <span
+          className="MuiTouchRipple-root-98"
+        />
+      </span>
+      <span
+        className="MuiTypography-root-62 MuiTypography-body1-71 MuiFormControlLabel-label-34 Component-label-27"
+      >
+        right
+      </span>
+    </label>
+  </div>
+</div>
+`;

package/src/__tests__/choice-utils.test.js

@@ -0,0 +1,12 @@
+import { firstAvailableIndex } from '../choice-utils';
+
+describe('firstAvailableIndex', () => {
+  const assert = (values, index, expected) => {
+    it(`[${values.join(',')}], ${index} ==> ${expected}`, () => {
+      expect(firstAvailableIndex(['0'], 0)).toEqual('1');
+    });
+  };
+  assert(['0'], 0, '1');
+  assert(['0', '1', '2'], 0, '3');
+  assert(['0', '1', '2'], 100, '100');
+});

package/src/__tests__/langs.test.jsx

@@ -0,0 +1,37 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { RawLangs } from '../langs';
+
+describe('langs', () => {
+  let onChange;
+  const wrapper = (extras) => {
+    const defaults = {
+      uid: '1',
+      onChange,
+      classes: {},
+      langs: ['en-US', 'es-ES'],
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawLangs {...props} />);
+  };
+
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      expect(wrapper()).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('choose', () => {
+      it('calls onChange', () => {
+        const w = wrapper();
+        w.instance().choose({ target: { value: 'en-US' } });
+        expect(onChange).toBeCalledWith('en-US');
+      });
+    });
+  });
+});

package/src/__tests__/number-text-field.test.jsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { NumberTextField } from '../number-text-field';
+import TextField from '@material-ui/core/TextField';
+
+describe('NumberTextField', () => {
+  describe('render', () => {
+    let value = 1;
+    let onChange, component, textField, onBlur;
+    let min = 1;
+    let max = 10;
+
+    describe('TextField', () => {
+      beforeEach(() => {
+        onChange = jest.fn();
+        onBlur = jest.fn();
+        component = shallow(
+          <NumberTextField value={value} min={min} max={max} classes={{}} onChange={onChange} onBlur={onBlur} />,
+        );
+        textField = component.find(TextField);
+      });
+
+      it('should render mui TextField', () => {
+        expect(textField.length).toEqual(1);
+      });
+
+      describe('props', () => {
+        let props;
+
+        beforeEach(() => {
+          props = textField.props();
+        });
+
+        it('should contain value', () => {
+          expect(props.value).toEqual(value);
+        });
+      });
+
+      describe('logic', () => {
+        describe('clamp', () => {
+          const assertClamp = (input, expected) => {
+            it(`${input} => ${expected}`, () => {
+              const result = component.instance().clamp(input);
+              expect(result).toEqual(expected);
+            });
+          };
+
+          assertClamp('foo', 1);
+          assertClamp(1, 1);
+          assertClamp(2, 2);
+          assertClamp(0, 1);
+          assertClamp(-1, 1);
+          assertClamp(10, 10);
+          assertClamp(11, 10);
+        });
+
+        describe('onBlur', () => {
+          const event = (value) => ({
+            target: { value },
+          });
+
+          describe('called with valid string representation of int', () => {
+            it('should be called with parsed int', () => {
+              const e = event('1');
+
+              textField.simulate('change', e);
+
+              expect(component.state('value')).toEqual('1');
+
+              e.target.value = '100';
+
+              textField.simulate('change', e);
+
+              expect(component.state('value')).toEqual('100');
+
+              const beforeMax = (max - 1).toString();
+              e.target.value = beforeMax;
+
+              textField.simulate('blur', e);
+
+              expect(component.state('value')).toEqual(beforeMax);
+            });
+          });
+
+          describe('called with invalid string representation of int', () => {
+            it('should be called with min value', () => {
+              const e = event('aa');
+
+              textField.simulate('change', e);
+
+              expect(component.state('value')).toEqual('aa');
+
+              textField.simulate('blur', e);
+
+              expect(component.state('value')).toEqual(min.toString());
+            });
+          });
+
+          describe('called with empty string', () => {
+            it('should be called with min value', () => {
+              const e = event('');
+
+              textField.simulate('change', e);
+
+              expect(component.state('value')).toEqual('');
+
+              textField.simulate('blur', e);
+
+              expect(component.state('value')).toEqual(min.toString());
+            });
+          });
+
+          describe('string int less than min', () => {
+            const value = (min - 1).toString();
+
+            it('should be called with value of min', () => {
+              const e = event(value);
+
+              textField.simulate('change', e);
+
+              expect(component.state('value')).toEqual(value);
+
+              textField.simulate('blur', e);
+
+              expect(component.state('value')).toEqual(min.toString());
+            });
+          });
+
+          describe('string int exceeds max', () => {
+            const value = (max + 1).toString();
+
+            it('should be called with value of max', () => {
+              const e = event(value);
+
+              textField.simulate('change', e);
+
+              expect(component.state('value')).toEqual(value);
+
+              textField.simulate('blur', e);
+
+              expect(component.state('value')).toEqual(max.toString());
+            });
+          });
+        });
+      });
+    });
+  });
+});

package/src/__tests__/settings-panel.test.js

@@ -0,0 +1,204 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Panel } from '../settings/panel';
+import { toggle, radio, dropdown, numberField, numberFields } from '../settings';
+
+describe('Settings Panel', () => {
+  let w;
+  let onChange = jest.fn();
+  let configure = {
+    orientationLabel: 'Orientation',
+
+    settingsOrientation: true,
+    editChoiceLabel: false,
+  };
+  let model = {
+    choiceAreaLayout: 'vertical',
+  };
+
+  let groups = ({ configure }) => ({
+    'Group 1': {
+      choiceAreaLayout: configure.settingsOrientation && {
+        type: 'radio',
+        label: configure.orientationLabel,
+        choices: [
+          { label: 'opt1', value: 'opt1' },
+          { label: 'opt2', value: 'opt2' },
+        ],
+        equationEditor: dropdown('Dropdown', ['geometry', 'advanced-algebra', 'statistics', 'miscellaneous']),
+        graph: numberFields('Graph Display Size', {
+          domain: {
+            label: 'Domain',
+            suffix: 'px',
+          },
+          range: {
+            label: 'Range',
+            suffix: 'px',
+          },
+          width: {
+            label: 'Width',
+            suffix: 'px',
+            min: 50,
+            max: 250,
+          },
+        }),
+      },
+      editChoiceLabel: { type: 'toggle', label: 'Edit choice label', isConfigProperty: true },
+    },
+  });
+
+  const wrapper = (extras) => {
+    return shallow(
+      <Panel
+        model={model}
+        configuration={configure}
+        onChangeModel={onChange}
+        onChangeConfiguration={onChange}
+        groups={groups({ configure })}
+        {...extras}
+      />,
+    );
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+
+      expect(w).toMatchSnapshot();
+    });
+
+    it('does not render radio buttons', () => {
+      w = wrapper({
+        groups: groups({
+          configure: {
+            ...configure,
+            settingsOrientation: false,
+          },
+        }),
+      });
+
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('onChange gets called', () => {
+      it('updates model props', () => {
+        w.instance().change('test', false);
+
+        expect(onChange).toBeCalledWith(
+          {
+            ...model,
+            test: false,
+          },
+          'test',
+        );
+      });
+
+      it('updates configuration props', () => {
+        w.instance().change('test.test', true, true);
+
+        expect(onChange).toBeCalledWith(
+          {
+            ...configure,
+            test: {
+              test: true,
+            },
+          },
+          'test.test',
+        );
+      });
+    });
+  });
+});
+
+describe('toggle', () => {
+  it('returns a toggle type object', () => {
+    const setting = toggle('Label');
+
+    expect(setting).toEqual({
+      label: 'Label',
+      type: 'toggle',
+      isConfigProperty: false,
+      disabled: false,
+    });
+  });
+});
+
+describe('radio', () => {
+  it('returns a radio type object', () => {
+    const setting = radio('Radio', ['one', 'two']);
+
+    expect(setting).toEqual({
+      label: 'Radio',
+      type: 'radio',
+      isConfigProperty: false,
+      choices: [
+        {
+          label: 'one',
+          value: 'one',
+        },
+        {
+          label: 'two',
+          value: 'two',
+        },
+      ],
+    });
+  });
+});
+
+describe('dropdown', () => {
+  it('returns a dropdown type object', () => {
+    const setting = dropdown('Dropdown', ['one', 'two']);
+
+    expect(setting).toEqual({
+      label: 'Dropdown',
+      type: 'dropdown',
+      isConfigProperty: false,
+      choices: ['one', 'two'],
+    });
+  });
+});
+
+describe('numberField', () => {
+  it('returns a numberField type object', () => {
+    const setting = numberField('Number Field', { max: 12 }, true);
+
+    expect(setting).toEqual({
+      label: 'Number Field',
+      type: 'numberField',
+      isConfigProperty: true,
+      max: 12,
+    });
+  });
+});
+
+describe('numberFields', () => {
+  it('returns a numberFields type object', () => {
+    const setting = numberFields('Number Fields', {
+      one: {
+        label: 'One',
+      },
+      two: {
+        label: 'Two',
+      },
+    });
+
+    expect(setting).toEqual({
+      label: 'Number Fields',
+      type: 'numberFields',
+      fields: {
+        one: {
+          type: 'numberField',
+          label: 'One',
+          isConfigProperty: false,
+        },
+        two: {
+          type: 'numberField',
+          label: 'Two',
+          isConfigProperty: false,
+        },
+      },
+    });
+  });
+});

package/src/__tests__/two-choice.test.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { NChoice } from '../two-choice';
+
+describe('NChoice', () => {
+  it('renders n choice radio buttons vertical correctly', () => {
+    const tree = renderer
+      .create(
+        <NChoice
+          direction="vertical"
+          header="n-choice-vertical"
+          value={'left'}
+          onChange={jest.fn()}
+          opts={[
+            { label: 'left', value: 'left' },
+            { label: 'center', value: 'center' },
+            { label: 'right', value: 'right' },
+          ]}
+        />,
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/alert-dialog.jsx

@@ -1,36 +1,56 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@material-ui/core';
+import { withStyles } from '@material-ui/core/styles';
 
-const AlertDialog = ({ text, title, onClose, onConfirm, open }) => (
+const AlertDialog = ({ text, title, onClose, onConfirm, open, onCloseText, onConfirmText, classes }) => (
   <Dialog open={open} onClose={onClose}>
-    {title && <DialogTitle>{title}</DialogTitle>}
+    {title && <DialogTitle className={classes.heading}>{title}</DialogTitle>}
     {text && (
       <DialogContent>
-        <DialogContentText>{text}</DialogContentText>
+        <DialogContentText className={classes.subheading}>{text}</DialogContentText>
       </DialogContent>
     )}
     <DialogActions>
       {onClose && (
         <Button onClick={onClose} color="primary">
-          CANCEL
+          {onCloseText}
         </Button>
       )}
       {onConfirm && (
         <Button autoFocus onClick={onConfirm} color="primary">
-          OK
+          {onConfirmText}
         </Button>
       )}
     </DialogActions>
   </Dialog>
 );
 
+AlertDialog.defaultProps = {
+  onCloseText: 'CANCEL',
+  onConfirmText: 'OK',
+};
+
 AlertDialog.propTypes = {
-  text: PropTypes.string,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   title: PropTypes.string,
   onClose: PropTypes.func,
   onConfirm: PropTypes.func,
   open: PropTypes.bool,
+  onConfirmText: PropTypes.string,
+  onCloseText: PropTypes.string,
+  classes: PropTypes.object,
 };
 
-export default AlertDialog;
+const styles = () => ({
+  heading: {
+    '& h2': {
+      fontSize: 'max(1.25rem, 18px)',
+    },
+  },
+  subheading: {
+    fontSize: 'max(1rem, 14px)',
+  },
+});
+
+export default withStyles(styles)(AlertDialog);

package/src/checkbox.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 import grey from '@material-ui/core/colors/grey';
+import { color } from '@pie-lib/render-ui';
 
 const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) => (
   <FormControlLabel
@@ -17,7 +18,10 @@ const Checkbox = ({ mini, checked, onChange, value, label, classes, error }) =>
         checked={checked}
         onChange={onChange}
         value={value}
-        className={classNames({ [classes.miniCheckbox]: mini, [classes.error]: error })}
+        className={classNames(classes.customColor, {
+          [classes.miniCheckbox]: mini,
+          [classes.error]: error,
+        })}
       />
     }
     label={label}
@@ -63,4 +67,7 @@ export default withStyles((theme) => ({
   error: {
     color: theme.palette.error.main,
   },
+  customColor: {
+    color: `${color.tertiary()} !important`,
+  },
 }))(Checkbox);