@pie-element/ebsr 7.0.22 → 7.0.24-next.2

package/configure/node_modules/@pie-lib/render-ui/src/html-and-math.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { renderMath } from '@pie-lib/math-rendering';
+import PropTypes from 'prop-types';
+
+export default class HtmlAndMath extends React.Component {
+  static propTypes = {
+    tag: PropTypes.string,
+    className: PropTypes.string,
+    html: PropTypes.string
+  };
+
+  static defaultProps = {
+    tag: 'div',
+    html: ''
+  };
+
+  componentDidMount() {
+    if (this.node) {
+      renderMath(this.node);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.node) {
+      renderMath(this.node);
+    }
+  }
+
+  render() {
+    const { tag, className, html } = this.props;
+    const Tag = tag || 'div';
+    return (
+      <Tag
+        ref={r => (this.node = r)}
+        className={className}
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  }
+}

package/configure/node_modules/@pie-lib/render-ui/src/index.js

@@ -0,0 +1,27 @@
+import * as indicators from './response-indicators';
+import Feedback from './feedback';
+import Collapsible from './collapsible';
+import withUndoReset from './withUndoReset';
+import PreviewLayout from './preview-layout';
+import HtmlAndMath from './html-and-math';
+import InputContainer from './input-container';
+import PreviewPrompt from './preview-prompt';
+import Readable from './readable';
+import Purpose from './purpose';
+import * as color from './color';
+import { hasText } from './has-text';
+
+export {
+  HtmlAndMath,
+  indicators,
+  withUndoReset,
+  Feedback,
+  PreviewLayout,
+  Collapsible,
+  InputContainer,
+  PreviewPrompt,
+  color,
+  Readable,
+  Purpose,
+  hasText
+};

package/configure/node_modules/@pie-lib/render-ui/src/input-container.jsx

@@ -0,0 +1,41 @@
+import InputLabel from '@material-ui/core/InputLabel';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+
+const RawInputContainer = props => {
+  const { label, className, children, classes } = props;
+  const names = classNames(classes.formControl, className);
+
+  return (
+    <FormControl className={names}>
+      <InputLabel className={classes.label} shrink={true}>
+        {label}
+      </InputLabel>
+      {children}
+    </FormControl>
+  );
+};
+
+RawInputContainer.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  classes: PropTypes.object.isRequired
+};
+
+export default withStyles(theme => ({
+  formControl: {
+    marginLeft: 0,
+    marginRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    flex: '1 0 auto',
+    minWidth: theme.spacing.unit * 4
+  },
+  label: {
+    fontSize: 'inherit',
+    whiteSpace: 'nowrap'
+  }
+}))(RawInputContainer);

package/configure/node_modules/@pie-lib/render-ui/src/preview-layout.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+class PreviewLayout extends React.Component {
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    classes: PropTypes.object
+  };
+
+  render() {
+    const { children, classes } = this.props;
+
+    return <div className={classes.container}>{children}</div>;
+  }
+}
+
+const styles = () => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative'
+  }
+});
+
+const theme = createMuiTheme({
+  typography: {
+    useNextVariants: true
+  },
+  palette: {
+    action: {
+      disabled: 'rgba(0, 0, 0, 0.54);'
+    }
+  },
+  overrides: {
+    MuiRadio: {
+      root: {
+        '&$checked': {
+          color: '#3f51b5 !important'
+        }
+      }
+    },
+    MuiCheckbox: {
+      root: {
+        '&$checked': {
+          color: '#3f51b5 !important'
+        }
+      }
+    },
+    MuiTabs: {
+      root: {
+        borderBottom: '1px solid #eee'
+      }
+    },
+    MuiSwitch: {
+      root: {
+        '&$checked': {
+          color: '#3f51b5 !important',
+          '& + $bar': {
+            backgroundColor: '#3f51b5 !important',
+            opacity: 0.5
+          }
+        }
+      }
+    }
+  }
+});
+
+const Styled = withStyles(styles)(PreviewLayout);
+
+const RootElem = props => (
+  <MuiThemeProvider theme={theme}>
+    <Styled {...props} />
+  </MuiThemeProvider>
+);
+
+export default RootElem;

package/configure/node_modules/@pie-lib/render-ui/src/preview-prompt.jsx

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import * as color from './color';
+
+//Used these below to replace \\embed{newLine} with \\newline from prompt which will get parsed in MathJax
+const NEWLINE_BLOCK_REGEX = /\\embed\{newLine\}\[\]/g;
+const NEWLINE_LATEX = '\\newline ';
+
+export class PreviewPrompt extends Component {
+  static propTypes = {
+    classes: PropTypes.object,
+    prompt: PropTypes.string,
+    tagName: PropTypes.string,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    defaultClassName: PropTypes.string
+  };
+
+  static defaultProps = {
+    onClick: () => {}
+  };
+
+  parsedText = text => {
+    // fix imported audio content for Safari PD-1419
+    const div = document.createElement('div');
+    div.innerHTML = text;
+
+    const audio = div.querySelector('audio');
+    if (audio) {
+      const source = document.createElement('source');
+
+      source.setAttribute('type', 'audio/mp3');
+      source.setAttribute('src', audio.getAttribute('src'));
+
+      audio.removeAttribute('src');
+      audio.appendChild(source);
+    }
+
+    return div.innerHTML;
+  };
+
+  render() {
+    const { prompt, classes, tagName, className, onClick, defaultClassName } = this.props;
+    const CustomTag = tagName || 'div';
+    const customClasses = `${classes.promptTable} ${classes[className] || ''} ${defaultClassName ||
+      ''}`;
+
+    return (
+      <CustomTag
+        onClick={onClick}
+        className={customClasses}
+        dangerouslySetInnerHTML={{
+          __html: this.parsedText(prompt || '').replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX)
+        }}
+      />
+    );
+  }
+}
+
+const styles = theme => ({
+  prompt: {
+    verticalAlign: 'middle',
+    color: color.text()
+  },
+  rationale: {
+    paddingLeft: theme.spacing.unit * 16
+  },
+  label: {
+    color: `${color.text()} !important`, //'var(--choice-input-color, black)',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    cursor: 'pointer'
+  },
+  promptTable: {
+    '&:not(.MathJax) > table': {
+      borderCollapse: 'collapse'
+    },
+    '&:not(.MathJax) > table tr': {
+      '&:nth-child(2n)': {
+        backgroundColor: '#f6f8fa'
+      }
+    },
+    '&:not(.MathJax) > table td, &:not(.MathJax) > table th': {
+      padding: '.6em 1em',
+      textAlign: 'center'
+    }
+  }
+});
+export default withStyles(styles)(PreviewPrompt);

package/configure/node_modules/@pie-lib/render-ui/src/purpose.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Purpose = props => {
+  return (
+    <>
+      {React.Children.map(props.children, child =>
+        React.cloneElement(child, { 'data-pie-purpose': props.purpose })
+      )}
+    </>
+  );
+};
+
+Purpose.propTypes = {
+  children: PropTypes.node,
+  purpose: PropTypes.string
+};
+
+export default Purpose;

package/configure/node_modules/@pie-lib/render-ui/src/readable.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const Readable = props => {
+  return (
+    <>
+      {React.Children.map(props.children, child =>
+        React.cloneElement(child, { 'data-pie-readable': props.false === undefined })
+      )}
+    </>
+  );
+};
+
+Readable.propTypes = {
+  children: PropTypes.node,
+  false: PropTypes.bool
+};
+
+export default Readable;

package/configure/node_modules/@pie-lib/render-ui/src/response-indicators.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as icons from '@pie-lib/icons';
+import Popover from '@material-ui/core/Popover';
+import { withStyles } from '@material-ui/core/styles';
+import Feedback from './feedback';
+import debug from 'debug';
+
+const log = debug('pie-libs:render-ui:response-indicators');
+
+const styles = () => ({
+  responseIndicator: {
+    cursor: 'pointer'
+  },
+  paper: {
+    padding: '0',
+    borderRadius: '4px'
+  },
+  popover: {
+    cursor: 'pointer'
+  },
+  popperClose: {
+    cursor: 'pointer'
+  }
+});
+
+const BuildIndicator = (Icon, correctness) => {
+  class RawIndicator extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {};
+    }
+
+    handlePopoverOpen = event => {
+      log('[handlePopoverOpen]', event.target);
+      this.setState({ anchorEl: event.target });
+    };
+
+    handlePopoverClose = () => {
+      this.setState({ anchorEl: null });
+    };
+
+    render() {
+      const { feedback, classes } = this.props;
+      const { anchorEl } = this.state;
+      return (
+        <div className={feedback && classes.responseIndicator}>
+          <span ref={r => (this.icon = r)} onClick={this.handlePopoverOpen}>
+            <Icon />
+          </span>
+
+          {feedback && (
+            <Popover
+              className={classes.popover}
+              classes={{
+                paper: classes.paper
+              }}
+              open={!!anchorEl}
+              anchorEl={anchorEl}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left'
+              }}
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left'
+              }}
+              onClose={this.handlePopoverClose}
+            >
+              <Feedback feedback={feedback} correctness={correctness} />
+            </Popover>
+          )}
+        </div>
+      );
+    }
+  }
+
+  RawIndicator.propTypes = {
+    feedback: PropTypes.string,
+    classes: PropTypes.object.isRequired
+  };
+
+  return withStyles(styles)(RawIndicator);
+};
+
+export const Correct = BuildIndicator(icons.Correct, 'correct');
+export const Incorrect = BuildIndicator(icons.Incorrect, 'incorrect');
+export const PartiallyCorrect = BuildIndicator(icons.PartiallyCorrect, 'partially-correct');
+export const NothingSubmitted = BuildIndicator(icons.NothingSubmitted, 'nothing-submitted');

package/configure/node_modules/@pie-lib/render-ui/src/withUndoReset.jsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import Button from '@material-ui/core/Button';
+import { withStyles } from '@material-ui/core/styles';
+import Restore from '@material-ui/icons/Restore';
+import Undo from '@material-ui/icons/Undo';
+
+const styles = theme => ({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  resetUndoContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon: {
+    width: '24px',
+    height: '24px',
+    color: 'gray',
+    marginRight: theme.spacing.unit
+  },
+  buttonContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    marginLeft: theme.spacing.unit * 3,
+    marginRight: theme.spacing.unit * 3
+  }
+});
+
+/**
+ * HOC that adds undo and reset functionality for session values
+ */
+const withUndoReset = WrappedComponent => {
+  class WithUndoReset extends React.Component {
+    static propTypes = {
+      classes: PropTypes.object,
+      session: PropTypes.object,
+      onSessionChange: PropTypes.func
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        sessionInitialValues: JSON.parse(JSON.stringify(props.session)),
+        session: props.session,
+        changes: []
+      };
+    }
+
+    onSessionChange = session => {
+      this.setState(
+        state => ({ session, changes: [...state.changes, session] }),
+        () => this.props.onSessionChange(session)
+      );
+    };
+
+    onUndo = () => {
+      this.setState(
+        state => {
+          const newChanges = [...state.changes];
+
+          newChanges.pop();
+
+          return {
+            changes: newChanges,
+            session: newChanges.length
+              ? newChanges[newChanges.length - 1]
+              : state.sessionInitialValues
+          };
+        },
+        () => this.props.onSessionChange(this.state.session)
+      );
+    };
+
+    onReset = () => {
+      this.setState(
+        state => ({ session: state.sessionInitialValues, changes: [] }),
+        () => this.props.onSessionChange(this.state.sessionInitialValues)
+      );
+    };
+
+    render() {
+      const { classes, ...rest } = this.props;
+      const { changes, session } = this.state;
+
+      return (
+        <div className={classes.wrapper}>
+          <div className={classes.resetUndoContainer}>
+            <Button
+              className={classes.buttonContainer}
+              color="primary"
+              disabled={changes.length === 0}
+              onClick={this.onUndo}
+            >
+              <Undo className={classes.icon} /> Undo
+            </Button>
+            <Button
+              className={classes.buttonContainer}
+              color="primary"
+              disabled={changes.length === 0}
+              onClick={this.onReset}
+            >
+              <Restore className={classes.icon} /> Start Over
+            </Button>
+          </div>
+          <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />
+        </div>
+      );
+    }
+  }
+
+  return withStyles(styles)(WithUndoReset);
+};
+
+export default withUndoReset;

package/configure/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@pie-element/ebsr-configure",
   "private": true,
-  "version": "7.0.22",
+  "version": "7.0.20",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
   "author": "",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-element/multiple-choice": "^6.3.0",
+    "@pie-element/multiple-choice": "^6.3.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.12.1",
+    "@pie-lib/config-ui": "^10.13.2",
     "lodash": "^4.17.15",
     "prop-types": "^15.6.2",
     "react": "^16.8.1",

package/configure/src/__tests__/index.test.js

@@ -79,7 +79,8 @@ const model = createDefaultModel(defaults.model, {
       }
     ],
     choicePrefix: 'numbers',
-    prompt: `prompt ${PART_A}`
+    prompt: `prompt ${PART_A}`,
+    errors: {}
   },
   partB: {
     choiceMode: 'radio',
@@ -102,7 +103,8 @@ const model = createDefaultModel(defaults.model, {
       }
     ],
     choicePrefix: 'numbers',
-    prompt: `prompt ${PART_B}`
+    prompt: `prompt ${PART_B}`,
+    errors: {}
   }
 });
 

package/configure/src/main.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { settings, layout } from '@pie-lib/config-ui';
 import { withStyles } from '@material-ui/core/styles';
-import cloneDeep from 'lodash/cloneDeep';
 
 const { Panel, toggle, radio, dropdown } = settings;
 
@@ -208,7 +207,10 @@ export class Main extends React.Component {
                   if (ref) {
                     // do not use destructuring to get model from props
                     this.partA = ref;
-                    this.partA._model = cloneDeep(this.props.model.partA);
+                    this.partA._model = {
+                      ...this.props.model.partA,
+                      errors: this.props.model.errors && this.props.model.errors.partA || {}
+                    };
                     this.partA.configuration = {
                       ...partA,
                       ...generalConfiguration
@@ -227,7 +229,10 @@ export class Main extends React.Component {
                   if (ref) {
                     // do not use destructuring to get model from props
                     this.partB = ref;
-                    this.partB._model = cloneDeep(this.props.model.partB);
+                    this.partB._model ={
+                      ...this.props.model.partB,
+                      errors: this.props.model.errors && this.props.model.errors.partB || {}
+                    };
                     this.partB.configuration = {
                       ...partB,
                       ...generalConfiguration