@pie-element/complex-rubric 3.3.6-next.0 → 3.3.6-next.9

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

@@ -1,27 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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: 0,
-    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

@@ -1,84 +0,0 @@
-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 = {
-    ariaLabel: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    classes: PropTypes.object,
-    role: PropTypes.string,
-  };
-
-  render() {
-    const { children, classes, ariaLabel, role } = this.props;
-    const accessibility = ariaLabel ? { 'aria-label': ariaLabel, role } : {};
-
-    return (
-      <div className={classes.container} {...accessibility}>
-        {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

@@ -1,130 +0,0 @@
-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;
-  };
-
-  componentDidUpdate() {
-    // set image parent style so it can be horizontally aligned
-    const previewPrompt = document.querySelector('#preview-prompt');
-    const images = previewPrompt && previewPrompt.getElementsByTagName('img');
-
-    if (images && images.length) {
-      for (let image of images) {
-        // check if alignment property was set
-        if (image.attributes && image.attributes.alignment && image.attributes.alignment.value) {
-          const parentNode = image.parentElement;
-
-          // check if div is not already added to dom and replace current image with wrapped image
-          if (
-            !(parentNode.tagName === 'DIV' && parentNode.style.display === 'flex' && parentNode.style.width === '100%')
-          ) {
-            const div = document.createElement('div');
-            div.style.display = 'flex';
-            div.style.width = '100%';
-
-            const copyImage = image.cloneNode(true);
-            div.appendChild(copyImage);
-            parentNode.replaceChild(div, image);
-          }
-        }
-      }
-    }
-  }
-
-  render() {
-    const { prompt, classes, tagName, className, onClick, defaultClassName } = this.props;
-    const CustomTag = tagName || 'div';
-    // legend tag was added once with accessibility tasks, wee need extra style to make it work with images alignment
-    const legendClass = tagName === 'legend' ? 'legend' : '';
-    const customClasses = `${classes.promptTable} ${classes[className] || ''} ${defaultClassName || ''} ${classes[
-      legendClass
-    ] || ''}`;
-
-    return (
-      <CustomTag
-        id={'preview-prompt'}
-        onClick={onClick}
-        className={customClasses}
-        dangerouslySetInnerHTML={{
-          __html: this.parsedText(prompt || '').replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX),
-        }}
-      />
-    );
-  }
-}
-
-const styles = (theme) => ({
-  prompt: {
-    verticalAlign: 'middle',
-    color: color.text(),
-  },
-  legend: {
-    width: '100%',
-    fontSize: 'inherit  !important',
-  },
-  rationale: {
-    paddingLeft: theme.spacing.unit * 4,
-    paddingBottom: theme.spacing.unit,
-  },
-  label: {
-    color: `${color.text()} !important`, //'var(--choice-input-color, black)',
-    display: 'inline-block',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-    '& > p': {
-      margin: '0 0 0 0 !important',
-    },
-  },
-  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

@@ -1,17 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,116 +0,0 @@
-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;