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

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/keys/statistics.js

@@ -0,0 +1,38 @@
+import { mkSet } from './utils';
+
+const set = mkSet('statistics');
+export const xBar = set({
+  name: 'X Bar',
+  label: 'x̄',
+  latex: '\\overline{x}',
+  write: '\\overline{x}',
+});
+
+export const yBar = set({
+  name: 'Y Bar',
+  latex: '\\overline{y}',
+  write: '\\overline{y}',
+});
+
+export const mu = set({
+  name: 'mu',
+  label: 'mu',
+  latex: '\\mu',
+  write: '\\mu',
+});
+
+export const sigma = set({
+  name: 'Sigma',
+  ariaLabel: 'Uppercase Sigma',
+  label: '\\Sigma',
+  latex: '\\Sigma',
+  write: '\\Sigma',
+});
+
+export const smallSigma = set({
+  name: 'sigma',
+  ariaLabel: 'Lowercase Sigma',
+  label: '\\sigma',
+  latex: '\\sigma',
+  write: '\\sigma',
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/keys/sub-sup.js

@@ -0,0 +1,15 @@
+import { mkSet } from './utils';
+
+const set = mkSet('sub-sup');
+
+export const superscript = set({
+  name: 'Superscript',
+  latex: 'x^{}',
+  command: '^',
+});
+
+export const subscript = set({
+  name: 'Subscript',
+  latex: 'x_{}',
+  command: '_',
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/keys/trigonometry.js

@@ -0,0 +1,15 @@
+import { mkSet } from './utils';
+
+const set = mkSet('trigonometry');
+
+export const sin = set({ name: 'sine', label: 'sin', command: '\\sin', latex: '\\sin' });
+
+export const cos = set({ name: 'cosine', label: 'cos', command: '\\cos', latex: '\\cos' });
+
+export const tan = set({ name: 'tanget', label: 'tan', command: '\\tan', latex: '\\tan' });
+
+export const sec = set({ name: 'secant', label: 'sec', command: '\\sec', latex: '\\sec' });
+
+export const csc = set({ name: 'cosecant', label: 'csc', command: '\\csc', latex: '\\csc' });
+
+export const cot = set({ name: 'cotangent', label: 'cot', command: '\\cot', latex: '\\cot' });

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/keys/utils.js

@@ -0,0 +1,71 @@
+import _ from 'lodash';
+
+export const mkSet = (category) => (o) => ({ ...o, category });
+
+export const toArray = (o) => Object.keys(o).map((k) => o[k]);
+
+export const toKey = (category) => (v) => {
+  if (typeof v === 'string') {
+    return {
+      name: v,
+      label: v,
+      category,
+      write: v,
+    };
+  } else {
+    return {
+      ...v,
+      category,
+    };
+  }
+};
+
+export const transformToKeySetStructure = (data = []) => {
+  const structure = [];
+
+  _.times(5, () => {
+    structure.push([]);
+  });
+
+  let ln = data.length;
+  let i = 0;
+  let j = 0;
+
+  while (j < ln) {
+    structure[i++].push(data[j++]);
+
+    if (i === 5) {
+      i = 0;
+    }
+  }
+
+  return structure;
+};
+
+const latexAndNameDontExist = (base) => (k) => {
+  const flattened = _.flatten(base);
+  const latexExists = flattened.some((b) => b.latex === k.latex);
+  const nameExists = flattened.some((b) => b.name === k.name);
+  return !latexExists && !nameExists;
+};
+
+export const extendKeySet = (base = [], keySetData = []) => {
+  keySetData = keySetData.filter(latexAndNameDontExist(base));
+
+  const final = [];
+
+  _.times(5 - base.length, () => {
+    base.push([]);
+  });
+  _.times(5, () => {
+    final.push([]);
+  });
+
+  const extra = transformToKeySetStructure(keySetData);
+
+  for (let i = 0; i < 5; i++) {
+    final[i] = [...base[i], ...extra[i]];
+  }
+
+  return final;
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/keys/vars.js

@@ -0,0 +1,19 @@
+import { mkSet } from './utils';
+
+const set = mkSet('vars');
+
+export const x = set({
+  name: 'X',
+  latex: 'x',
+  write: 'x',
+});
+export const y = set({
+  name: 'Y',
+  latex: 'y',
+  write: 'y',
+});
+export const theta = set({
+  name: 'Theta',
+  latex: '\\theta',
+  write: '\\theta',
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/math-input.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'classnames';
+import * as mq from './mq';
+import { baseSet } from './keys';
+import KeyPad from './keypad';
+import debug from 'debug';
+
+const log = debug('pie-lib:math-input');
+
+export class MathInput extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    keyset: PropTypes.array,
+    displayMode: PropTypes.oneOf(['block', 'block-on-focus']),
+    latex: PropTypes.string,
+    onChange: PropTypes.func,
+  };
+
+  static defaultProps = {
+    keyset: [],
+    displayMode: 'block',
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      focused: false,
+    };
+  }
+
+  keypadPress = (key) => {
+    log('[keypadPress] key:', key);
+
+    if (!this.input) {
+      return;
+    }
+
+    if (key.latex && !key.command) {
+      this.input.write(key.latex);
+    } else if (key.write) {
+      this.input.write(key.write);
+    } else if (key.command) {
+      this.input.command(key.command);
+    } else if (key.keystroke) {
+      this.input.keystroke(key.keystroke);
+    }
+  };
+
+  inputFocus = () => {
+    this.setState({ focused: true });
+  };
+
+  inputBlur = () => {
+    this.setState({ focused: false });
+  };
+
+  changeLatex = (l) => {
+    const { onChange } = this.props;
+
+    if (onChange && l !== this.props.latex) {
+      log('[changeLatex]', l, this.props.latex);
+      onChange(l);
+    }
+  };
+
+  render() {
+    const { classes, className, keyset, latex } = this.props;
+    const { focused } = this.state;
+
+    const showKeypad = true; // TODO: add support for different displayModes - displayMode === 'block' || focused;
+
+    return (
+      <div className={classNames(classes.mathInput, className, focused && classes.focused)}>
+        <mq.Input
+          className={classes.mqInput}
+          innerRef={(r) => (this.input = r)}
+          onFocus={this.inputFocus}
+          onBlur={this.inputBlur}
+          latex={latex}
+          onChange={this.changeLatex}
+        />
+        {showKeypad && (
+          <div className={classes.pad}>
+            <KeyPad baseSet={baseSet} additionalKeys={keyset} onPress={this.keypadPress} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+const grey = 'rgba(0, 0, 0, 0.23)';
+const styles = (theme) => ({
+  formGroup: {
+    display: 'flex',
+    textAlign: 'right',
+    float: 'right',
+  },
+  pad: {
+    width: '100%',
+    display: 'flex',
+  },
+  mathInput: {
+    borderRadius: '4px',
+    border: `solid 1px ${grey}`,
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+    transition: 'border 200ms linear',
+  },
+  focused: {
+    border: `solid 1px ${theme.palette.primary.main}`,
+  },
+  mqInput: {
+    width: '100%',
+    border: `solid 0px ${theme.palette.primary.light}`,
+    transition: 'border 200ms linear',
+    padding: theme.spacing.unit,
+    '&.mq-focused': {
+      outline: 'none',
+      boxShadow: 'none',
+      border: `solid 0px ${theme.palette.primary.dark}`,
+    },
+  },
+});
+export default withStyles(styles)(MathInput);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/mq/__tests__/__snapshots__/input.test.jsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Input snapshot renders 1`] = `
+<span
+  className="className"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+/>
+`;

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/mq/__tests__/input.test.jsx

@@ -0,0 +1,92 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Input } from '../input';
+
+describe('Input', () => {
+  let w;
+  let onChange;
+
+  beforeEach(() => {
+    onChange = jest.fn();
+  });
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+    };
+    const props = { ...defaults, ...extras };
+    const out = shallow(<Input {...props} />);
+
+    out.mathField = () => out.instance().mathField;
+    return out;
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('logic', () => {
+    beforeEach(() => {
+      w = wrapper();
+    });
+    describe('clear', () => {
+      it('calls latex', () => {
+        w.instance().clear();
+        expect(w.mathField().latex).toHaveBeenCalledWith('');
+      });
+    });
+    describe('blur', () => {
+      it('calls blur', () => {
+        w.instance().blur();
+        expect(w.mathField().blur).toHaveBeenCalled();
+      });
+    });
+    describe('focus', () => {
+      it('calls focus', () => {
+        w.instance().focus();
+        expect(w.mathField().focus).toHaveBeenCalled();
+      });
+    });
+    describe('command', () => {
+      it('calls cmd', () => {
+        w.instance().command('foo');
+        expect(w.mathField().cmd).toHaveBeenCalledWith('foo');
+      });
+      it('calls cmd if passed an array', () => {
+        w.instance().command(['foo', 'bar']);
+        expect(w.mathField().cmd).toHaveBeenCalledWith('foo');
+        expect(w.mathField().cmd).toHaveBeenCalledWith('bar');
+      });
+    });
+
+    describe('keystroke', () => {
+      beforeEach(() => {
+        w.instance().keystroke('9');
+      });
+      it('calls keystroke', () => expect(w.mathField().keystroke).toHaveBeenCalledWith('9'));
+      it('calls focus', () => expect(w.mathField().focus).toHaveBeenCalled());
+      it('calls latex', () => expect(w.mathField().latex).toHaveBeenCalled());
+    });
+
+    describe('write', () => {
+      beforeEach(() => {
+        w.instance().write('hi');
+      });
+      it('calls write', () => expect(w.mathField().write).toHaveBeenCalledWith('hi'));
+      it('calls focus', () => expect(w.mathField().focus).toHaveBeenCalled());
+      it('calls latex', () => expect(w.mathField().latex).toHaveBeenCalled());
+    });
+
+    describe('onInputEdit', () => {
+      it('calls onChange', () => {
+        w = wrapper();
+        w.mathField().latex.mockReturnValue('foo');
+        w.instance().onInputEdit();
+        expect(onChange).toHaveBeenCalledWith('foo');
+      });
+    });
+  });
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/mq/__tests__/static.test.jsx

@@ -0,0 +1,57 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Static from '../static';
+
+const Mathquill = require('@pie-framework/mathquill');
+
+jest.mock('@pie-framework/mathquill', () => ({
+  StaticMath: jest.fn().mockReturnValue({
+    latex: jest.fn(),
+    parseLatex: jest.fn(),
+  }),
+  getInterface: jest.fn().mockReturnThis(),
+}));
+
+describe('static', () => {
+  let w;
+  describe('mount', () => {
+    beforeEach(() => {
+      w = shallow(<Static latex="foo" />, {
+        disableLifecycleMethods: true,
+      });
+
+      w.instance().input = {};
+      w.instance().componentDidMount();
+    });
+
+    it('set the html', () => {
+      expect(Mathquill.getInterface().StaticMath().latex).toBeCalledWith('foo');
+    });
+
+    it('calls MQ.StaticMath', () => {
+      expect(Mathquill.getInterface().StaticMath).toHaveBeenCalled();
+    });
+  });
+
+  describe('shouldComponentUpdate', () => {
+    it('returns false if there is an error', () => {
+      w = shallow(<Static latex="foo" />, { disableLifecycleMethods: true });
+      w.instance().mathField = {
+        parseLatex: jest.fn((e) => {
+          throw new Error('boom');
+        }),
+      };
+      expect(w.instance().shouldComponentUpdate({ latex: '\\abs{}' })).toEqual(false);
+    });
+
+    it('returns true if ??', () => {
+      w = shallow(<Static latex="foo" />, { disableLifecycleMethods: true });
+      w.instance().mathField = {
+        latex: jest.fn().mockReturnValue('foo'),
+        parseLatex: jest.fn().mockReturnValue('foo'),
+        innerFields: ['field1', 'field2'],
+      };
+      expect(w.instance().shouldComponentUpdate({ latex: '\\abs{}' })).toEqual(true);
+    });
+  });
+});

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/mq/common-mq-styles.js

@@ -0,0 +1,105 @@
+export const commonMqFontStyles = {
+  fontFamily: 'MJXZERO, MJXTEX !important',
+  '-webkit-font-smoothing': 'antialiased !important',
+
+  '& .mq-math-mode > span > var': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important',
+  },
+  '& .mq-math-mode span var': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important',
+  },
+  '& .mq-math-mode .mq-nonSymbola': {
+    fontFamily: 'MJXZERO, MJXTEX-I !important',
+  },
+  '& .mq-math-mode > span > var.mq-operator-name': {
+    fontFamily: 'MJXZERO, MJXTEX !important',
+  },
+};
+
+export const longdivStyles = {
+  '& .mq-longdiv-inner': {
+    marginTop: '-1px',
+    marginLeft: '5px !important;',
+
+    '& > .mq-empty': {
+      padding: '0 !important',
+      marginLeft: '0px !important',
+      marginTop: '2px',
+    },
+  },
+
+  '& .mq-math-mode .mq-longdiv': {
+    display: 'inline-flex !important',
+  },
+};
+
+export const supsubStyles = {
+  '& .mq-math-mode sup.mq-nthroot': {
+    fontSize: '70% !important',
+    verticalAlign: '0.5em !important',
+    paddingRight: '0.15em',
+  },
+  '& .mq-math-mode .mq-supsub': {
+    fontSize: '70.7% !important',
+  },
+  '& .mq-supsub ': {
+    fontSize: '70.7%',
+  },
+  '& .mq-math-mode .mq-supsub.mq-sup-only': {
+    verticalAlign: '-0.1em !important',
+
+    '& .mq-sup': {
+      marginBottom: '0px !important',
+    },
+  },
+  /* But when the base is a fraction, move it higher */
+  '& .mq-math-mode .mq-fraction + .mq-supsub.mq-sup-only': {
+    verticalAlign: '0.4em !important',
+  },
+
+  '& .mq-math-mode .mq-supsub.mq-sup-only.mq-after-fraction-group': {
+    verticalAlign: '0.4em !important',
+  },
+};
+
+export const commonMqKeyboardStyles = {
+  '& *': {
+    ...commonMqFontStyles,
+    ...longdivStyles,
+    '& .mq-math-mode .mq-sqrt-prefix': {
+      top: '0 !important',
+    },
+
+    '& .mq-math-mode .mq-empty': {
+      padding: '9px 1px !important',
+    },
+
+    '& .mq-math-mode .mq-supsub': {
+      fontSize: '70.7% !important',
+    },
+
+    '& .mq-math-mode .mq-sqrt-stem': {
+      marginTop: '-5px',
+      paddingTop: '4px',
+    },
+
+    '& .mq-math-mode .mq-paren': {
+      verticalAlign: 'middle !important',
+    },
+
+    '& .mq-math-mode .mq-overarrow .mq-overarrow-inner .mq-empty': {
+      padding: '0 !important',
+    },
+
+    '& .mq-math-mode .mq-overline .mq-overline-inner .mq-empty ': {
+      padding: '0 !important',
+    },
+  },
+};
+
+export default {
+  commonMqFontStyles,
+  longdivStyles,
+  supsubStyles,
+  commonMqKeyboardStyles,
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/mq/custom-elements.js

@@ -0,0 +1,11 @@
+const registerLineBreak = function(MQ) {
+  MQ.registerEmbed('newLine', () => {
+    return {
+      htmlString: '<div class="newLine"></div>',
+      text: () => 'testText',
+      latex: () => '\\embed{newLine}[]',
+    };
+  });
+};
+
+export { registerLineBreak };

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/math-input/src/mq/index.js

@@ -0,0 +1,5 @@
+import Input from './input';
+import Static from './static';
+import CommonMqStyles from './common-mq-styles';
+
+export { Input, Static, CommonMqStyles };