@pie-element/complex-rubric 2.1.2-next.69 → 2.1.2-next.72

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/rubric/authoring.jsx

@@ -1,377 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
-import OutlinedInput from '@material-ui/core/OutlinedInput';
-import InputLabel from '@material-ui/core/InputLabel';
-import Select from '@material-ui/core/Select';
-import FormControl from '@material-ui/core/FormControl';
-import MenuItem from '@material-ui/core/MenuItem';
-import times from 'lodash/times';
-import Checkbox from '@material-ui/core/Checkbox';
-import FormGroup from '@material-ui/core/FormGroup';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import grey from '@material-ui/core/colors/grey';
-import Typography from '@material-ui/core/Typography';
-import DragIndicator from '@material-ui/icons/DragIndicator';
-import EditableHtml from '../editable-html';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import debug from 'debug';
-import takeRight from 'lodash/takeRight';
-import PointMenu from './point-menu';
-
-import range from 'lodash/range';
-const log = debug('pie-lib:rubric:authoring');
-
-const reorder = (list, startIndex, endIndex) => {
-  const result = Array.from(list);
-  const [removed] = result.splice(startIndex, 1);
-
-  result.splice(endIndex, 0, removed);
-
-  return result;
-};
-
-export const RubricType = PropTypes.shape({
-  excludeZero: PropTypes.bool,
-  points: PropTypes.arrayOf(PropTypes.string),
-  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
-  maxPoints: PropTypes.number,
-});
-
-const MaxPoints = withStyles((theme) => ({
-  formControl: {
-    minWidth: '120px',
-    margin: theme.spacing.unit,
-  },
-}))((props) => {
-  const { value, onChange, max, classes } = props;
-
-  return (
-    <FormControl className={classes.formControl} variant="outlined">
-      <InputLabel width={100} htmlFor="...">
-        Max Points
-      </InputLabel>
-      <Select value={value} onChange={(e) => onChange(e.target.value)} input={<OutlinedInput labelWidth={80} />}>
-        {range(1, max + 1).map((v) => (
-          <MenuItem key={`${v}`} value={v}>
-            {v}
-          </MenuItem>
-        ))}
-      </Select>
-    </FormControl>
-  );
-});
-
-// if the value is null or 'null', the Sample Answer input field for that point will not be dispalyed
-// if the value is '', the Sample Answer input field will be empty
-const checkSampleAnswer = (sampleAnswer) => sampleAnswer === null || sampleAnswer === 'null';
-
-export const PointConfig = withStyles((theme) => ({
-  pointConfig: {},
-  row: {
-    display: 'flex',
-    width: '100%',
-    position: 'relative',
-  },
-  editor: {
-    width: '100%',
-    backgroundColor: `${theme.palette.common.white} !important`,
-  },
-  dragIndicator: {
-    paddingTop: theme.spacing.unit,
-    color: grey[500],
-  },
-  pointsLabel: {
-    color: grey[500],
-    paddingBottom: theme.spacing.unit,
-    textTransform: 'uppercase',
-  },
-  sampleAnswersEditor: {
-    paddingLeft: theme.spacing.unit * 3,
-  },
-  pointMenu: {
-    position: 'absolute',
-    right: 0,
-  },
-  errorText: {
-    fontSize: theme.typography.fontSize - 2,
-    color: theme.palette.error.main,
-    paddingLeft: theme.spacing.unit * 3,
-    paddingTop: theme.spacing.unit,
-  },
-}))((props) => {
-  const { points, content, classes, sampleAnswer, mathMlOptions = {}, error } = props;
-  const pointsLabel = `${points} ${points <= 1 ? 'pt' : 'pts'}`;
-  const showSampleAnswer = checkSampleAnswer(sampleAnswer);
-
-  return (
-    <div className={classes.pointConfig}>
-      <Typography variant="overline" className={classes.pointsLabel}>
-        {pointsLabel}
-      </Typography>
-
-      <div className={classes.row}>
-        <DragIndicator className={classes.dragIndicator} />
-        <EditableHtml
-          className={classes.editor}
-          error={error}
-          markup={content}
-          onChange={props.onChange}
-          mathMlOptions={mathMlOptions}
-        />
-        <PointMenu
-          classes={{
-            icon: classes.pointMenu,
-          }}
-          showSampleAnswer={showSampleAnswer}
-          onChange={props.onMenuChange}
-        />
-      </div>
-      {error && <div className={classes.errorText}>{error}</div>}
-      {!showSampleAnswer && (
-        <div className={classes.sampleAnswersEditor}>
-          <Typography variant="overline" className={classes.dragIndicator}>
-            Sample Response
-          </Typography>
-          <EditableHtml
-            className={classes.editor}
-            markup={sampleAnswer}
-            onChange={props.onSampleChange}
-            mathMlOptions={mathMlOptions}
-          />
-        </div>
-      )}
-    </div>
-  );
-});
-
-export class RawAuthoring extends React.Component {
-  static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
-    value: RubricType,
-    onChange: PropTypes.func,
-    maxMaxPoints: PropTypes.number,
-  };
-
-  static defaultProps = {};
-
-  dragEnd = (result) => {
-    if (!result.destination) {
-      return;
-    }
-
-    const { value, onChange } = this.props;
-
-    const points = reorder(value.points, result.source.index, result.destination.index);
-    const sampleAnswers = reorder(value.sampleAnswers, result.source.index, result.destination.index);
-
-    onChange({ ...value, points, sampleAnswers });
-  };
-
-  changeMaxPoints = (maxPoints) => {
-    const { value, onChange } = this.props;
-    const currentMax = value.points.length - 1;
-
-    log('current', currentMax, 'new: ', maxPoints);
-
-    let points, sampleAnswers;
-    if (maxPoints > currentMax) {
-      points = times(maxPoints - currentMax)
-        .map(() => '')
-        .concat(value.points);
-      sampleAnswers = times(maxPoints - currentMax)
-        .map(() => null)
-        .concat(value.sampleAnswers);
-    }
-
-    if (maxPoints < currentMax) {
-      log('less than');
-      points = takeRight(value.points, maxPoints + 1);
-      sampleAnswers = takeRight(value.sampleAnswers, maxPoints + 1);
-    }
-
-    if (points) {
-      onChange({ ...value, points, sampleAnswers });
-    }
-  };
-
-  changeContent = (index, content, type) => {
-    // type could be 'points' or 'sampleAnswers'
-    log(`changeModel[${type}]:`, index, content);
-
-    if (type !== 'points' && type !== 'sampleAnswers') {
-      return;
-    }
-
-    const { value, onChange } = this.props;
-    const items = value[type] && Array.from(value[type]);
-
-    items.splice(index, 1, content);
-    log(`changeModel[${type}]:`, items);
-
-    onChange({ ...value, [type]: items });
-  };
-
-  excludeZeros = () => {
-    const { value, onChange } = this.props;
-
-    onChange({ ...value, excludeZero: !value.excludeZero });
-  };
-
-  shouldRenderPoint = (index, value) => {
-    if (!value.excludeZero) {
-      return true;
-    } else {
-      if (index < value.points.length - 1) {
-        return true;
-      } else if (index === value.points.length - 1) {
-        return false;
-      }
-
-      return true;
-    }
-  };
-
-  onPointMenuChange = (index, clickedItem) => {
-    if (clickedItem === 'sample') {
-      const { value } = this.props;
-      const sampleAnswers = Array.from(value.sampleAnswers || []);
-
-      if (checkSampleAnswer(sampleAnswers[index])) {
-        // an empty string will display an empty Sample Answer input field
-        this.changeContent(index, '', 'sampleAnswers');
-      } else {
-        // when the content is null or 'null', the Sample Answer input field will not be displayed
-        this.changeContent(index, null, 'sampleAnswers');
-      }
-    }
-  };
-
-  render() {
-    const { classes, className, value, mathMlOptions = {}, maxMaxPoints } = this.props;
-    let { excludeZeroEnabled = true, maxPointsEnabled = true, errors = {} } = value || {};
-    const { pointsDescriptorsErrors } = errors || {};
-    if (value && Number.isFinite(value.maxPoints)) {
-      // eslint-disable-next-line no-console
-      console.warn('maxPoints is deprecated - remove from model');
-    }
-
-    return (
-      <div className={classNames(classes.class, className)}>
-        <Typography variant="h5" className={classes.rubricTitle}>
-          Rubric
-        </Typography>
-        <FormGroup row>
-          {maxPointsEnabled && (
-            <MaxPoints
-              max={maxMaxPoints < 100 ? maxMaxPoints : 100}
-              value={value.points.length - 1}
-              onChange={this.changeMaxPoints}
-            />
-          )}
-          {excludeZeroEnabled && (
-            <FormControlLabel
-              label="Exclude zeros"
-              control={<Checkbox checked={value.excludeZero} onChange={this.excludeZeros} />}
-            />
-          )}
-        </FormGroup>
-
-        <div className={classes.container}>
-          <DragDropContext onDragEnd={this.dragEnd}>
-            <Droppable droppableId="droppable">
-              {(provided) => (
-                <div {...provided.droppableProps} ref={provided.innerRef}>
-                  {value.points.map(
-                    (p, index) =>
-                      this.shouldRenderPoint(index, value) && (
-                        <Draggable key={`${p.points}-${index}`} index={index} draggableId={index.toString()}>
-                          {(provided) => (
-                            <div
-                              className={classes.configHolder}
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                            >
-                              <PointConfig
-                                points={value.points.length - 1 - index}
-                                content={p}
-                                error={
-                                  pointsDescriptorsErrors && pointsDescriptorsErrors[value.points.length - 1 - index]
-                                }
-                                sampleAnswer={value.sampleAnswers && value.sampleAnswers[index]}
-                                onChange={(content) => this.changeContent(index, content, 'points')}
-                                onSampleChange={(content) => this.changeContent(index, content, 'sampleAnswers')}
-                                onMenuChange={(clickedItem) => this.onPointMenuChange(index, clickedItem)}
-                                mathMlOptions={mathMlOptions}
-                              />
-                            </div>
-                          )}
-                        </Draggable>
-                      ),
-                  )}
-                  {provided.placeholder}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
-        </div>
-      </div>
-    );
-  }
-}
-
-const styles = (theme) => ({
-  container: {
-    backgroundColor: grey[200],
-    borderWidth: 1,
-    borderStyle: 'solid',
-    borderColor: grey[300],
-    padding: theme.spacing.unit * 2,
-    margin: theme.spacing.unit,
-  },
-  configHolder: {
-    paddingTop: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-  },
-  rubricTitle: {
-    paddingLeft: theme.spacing.unit,
-    margin: theme.spacing.unit,
-  },
-});
-
-const StyledRawAuthoring = withStyles(styles)(RawAuthoring);
-
-const Reverse = (props) => {
-  const points = Array.from(props.value.points || []).reverse();
-  let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
-
-  if (points.length > sampleAnswers.length) {
-    sampleAnswers = times(points.length - sampleAnswers.length)
-      .map(() => null)
-      .concat(sampleAnswers);
-  }
-
-  const value = { ...props.value, points, sampleAnswers };
-
-  const onChange = (value) => {
-    props.onChange({
-      ...value,
-      points: Array.from(value.points || []).reverse(),
-      sampleAnswers: Array.from(value.sampleAnswers || []).reverse(),
-    });
-  };
-
-  return <StyledRawAuthoring value={value} onChange={onChange} maxMaxPoints={props.maxMaxPoints} />;
-};
-
-Reverse.propTypes = {
-  value: RubricType,
-  getIndex: PropTypes.func,
-  onChange: PropTypes.func,
-  maxMaxPoints: PropTypes.number,
-};
-
-export default Reverse;

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/rubric/index.js

@@ -1,8 +0,0 @@
-import Authoring from './authoring';
-
-const RUBRIC_TYPES = {
-  SIMPLE_RUBRIC: 'simpleRubric',
-  MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
-};
-
-export { Authoring, RUBRIC_TYPES };

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/rubric/point-menu.jsx

@@ -1,94 +0,0 @@
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
-import IconButton from '@material-ui/core/IconButton';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export class IconMenu extends React.Component {
-  static propTypes = {
-    opts: PropTypes.object,
-    onClick: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      anchorEl: undefined,
-      open: false,
-    };
-  }
-
-  handleClick = (event) => this.setState({ open: true, anchorEl: event.currentTarget });
-
-  handleRequestClose = () => this.setState({ open: false });
-
-  render() {
-    const { opts, onClick, classes } = this.props;
-    const { open, anchorEl } = this.state;
-    const keys = Object.keys(opts) || [];
-
-    const handleMenuClick = (key) => () => {
-      onClick(key);
-      this.handleRequestClose();
-    };
-
-    const iconColor = open ? 'inherit' : 'disabled';
-
-    return (
-      <div>
-        <div onClick={this.handleClick}>
-          <IconButton className={classes.icon}>
-            {open ? <MoreVertIcon color={iconColor} /> : <MoreHorizIcon color={iconColor} />}
-          </IconButton>
-        </div>
-        <Menu
-          id="point-menu"
-          anchorEl={anchorEl}
-          open={open}
-          onClose={this.handleRequestClose}
-          style={{ transform: 'translate(-15px, -15px)' }}
-          transformOrigin={{
-            vertical: 'center',
-            horizontal: 'right',
-          }}
-        >
-          {keys.map((k, index) => (
-            <MenuItem key={index} onClick={handleMenuClick(k)}>
-              {opts[k]}
-            </MenuItem>
-          ))}
-        </Menu>
-      </div>
-    );
-  }
-}
-
-export default class PointMenu extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-    showSampleAnswer: PropTypes.bool.isRequired,
-  };
-
-  static defaultProps = {
-    classes: {},
-  };
-
-  render() {
-    const { onChange, classes, showSampleAnswer } = this.props;
-    const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
-
-    return (
-      <IconMenu
-        onClick={(key) => onChange(key)}
-        opts={{
-          sample: sampleText,
-        }}
-        classes={classes}
-      />
-    );
-  }
-}

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/scoring-config/index.jsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import Checkbox from '@material-ui/core/Checkbox';
-import { withStyles } from '@material-ui/core/styles';
-import PropTypes from 'prop-types';
-
-export class PartialScoringConfig extends React.Component {
-  static propTypes = {
-    label: PropTypes.string,
-    partialScoring: PropTypes.bool,
-    classes: PropTypes.object.isRequired,
-    onChange: PropTypes.func,
-  };
-
-  state = {
-    checked: false,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const { partialScoring } = props;
-
-    this.state.checked = partialScoring;
-  }
-
-  onCheckboxChanged = () => {
-    const checked = !this.state.checked;
-    const { onChange } = this.props;
-
-    this.setState({
-      checked,
-    });
-    onChange(checked);
-  };
-
-  render() {
-    const { classes, label } = this.props;
-    const { checked } = this.state;
-    const textLabel = label || 'Each correct response is worth 1/X where X is the number of correct answer selections.';
-
-    return (
-      <div className={classes.scoringConfig}>
-        <Typography type="subheading">Partial Scoring Rules</Typography>
-        <br />
-        <Typography>{textLabel}</Typography>
-        <Checkbox checked={checked} onChange={this.onCheckboxChanged} label={''} />
-      </div>
-    );
-  }
-}
-
-export default withStyles((theme) => ({
-  scoringConfig: {
-    paddingTop: theme.spacing.unit,
-  },
-}))(PartialScoringConfig);

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/style-utils/index.js

@@ -1,10 +0,0 @@
-/**
- *  disable text selection
- */
-export const noSelect = () => ({
-  cursor: 'default',
-  '-webkit-user-select': 'none',
-  '-moz-user-select': 'none',
-  '-ms-user-select': 'none',
-  'user-select': 'none',
-});

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/test-utils/index.js

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { shallow } from 'enzyme';
-
-export function shallowChild(Component, defaultProps = {}, nestLevel) {
-  return function innerRender(props = {}) {
-    let rendered = shallow(<Component {...defaultProps} {...props} />);
-
-    if (nestLevel) {
-      let repeat = nestLevel;
-
-      while (repeat--) {
-        rendered = rendered.first().shallow();
-      }
-    }
-
-    return rendered;
-  };
-}

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/text-select/index.js

@@ -1,8 +0,0 @@
-import Tokenizer from './tokenizer';
-import TokenSelect, { TokenTypes } from './token-select';
-import TextSelect from './text-select';
-import { Legend } from './legend';
-import Token from './token-select/token';
-import { prepareText } from './utils';
-
-export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/text-select/legend.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Check from '@material-ui/icons/Check';
-import Close from '@material-ui/icons/Close';
-import Remove from '@material-ui/icons/Remove';
-import { color } from '../render-ui';
-import Translator from '../translator';
-
-const { translator } = Translator;
-
-export const Legend = withStyles((theme) => ({
-  flexContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: `${2 * theme.spacing.unit}px`,
-    borderBottom: '1px solid lightgrey',
-    borderTop: '1px solid lightgrey',
-    paddingBottom: theme.spacing.unit,
-    paddingTop: theme.spacing.unit,
-    marginBottom: theme.spacing.unit,
-  },
-  container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: `${theme.spacing.unit / 2}px`,
-    alignItems: 'center',
-  },
-  correct: {
-    fontSize: 'larger',
-    color: color.correct(),
-    backgroundColor: color.correctSecondary(),
-    border: `2px solid ${color.correct()}`,
-  },
-  incorrect: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px solid ${color.missing()}`,
-  },
-  missing: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px dashed ${color.missing()}`,
-  },
-}))(({ classes, language }) => {
-  const icons = [
-    {
-      iconName: Check,
-      label: translator.t('selectText.correctAnswerSelected', { lng: language }),
-      className: classes.correct,
-    },
-    {
-      iconName: Remove,
-      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
-      className: classes.missing,
-    },
-    {
-      iconName: Close,
-      label: translator.t('selectText.incorrectSelection', { lng: language }),
-      className: classes.incorrect,
-    },
-  ];
-
-  return (
-    <div className={classes.flexContainer}>
-      {icons.map((icon, index) => {
-        const Icon = icon.iconName;
-        return (
-          <div key={index} className={classes.container}>
-            <Icon className={icon.className} width={'19px'} height={'19px'}></Icon>
-            <span>{icon.label}</span>
-          </div>
-        );
-      })}
-    </div>
-  );
-});