@pie-lib/rubric 1.0.0-beta.5 → 1.0.0-next.0

package/src/authoring.jsx

@@ -1,26 +1,27 @@
 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 { styled } from '@mui/material/styles';
+
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import Select from '@mui/material/Select';
+import FormControl from '@mui/material/FormControl';
+import MenuItem from '@mui/material/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 '@pie-lib/editable-html';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import Checkbox from '@mui/material/Checkbox';
+import FormGroup from '@mui/material/FormGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Typography from '@mui/material/Typography';
+import DragIndicator from '@mui/icons-material/DragIndicator';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import debug from 'debug';
 import takeRight from 'lodash/takeRight';
 import PointMenu from './point-menu';
-
 import range from 'lodash/range';
+import EditableHtml from '@pie-lib/editable-html';
+import { InputContainer } from '@pie-lib/config-ui';
+import { grey } from '@mui/material/colors';
+
 const log = debug('pie-lib:rubric:authoring');
 
 const reorder = (list, startIndex, endIndex) => {
@@ -37,23 +38,25 @@ export const RubricType = PropTypes.shape({
   points: PropTypes.arrayOf(PropTypes.string),
   sampleAnswers: PropTypes.arrayOf(PropTypes.string),
   maxPoints: PropTypes.number,
+  rubriclessInstruction: PropTypes.string,
 });
 
-const MaxPoints = withStyles((theme) => ({
-  formControl: {
-    minWidth: '120px',
-    margin: theme.spacing.unit,
-  },
-}))((props) => {
-  const { value, onChange, max, classes } = props;
+const MaxPoints = (props) => {
+  const { value, onChange, max } = props;
+  const labelId = 'max-points-label';
 
   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).map((v) => (
+    <FormControl sx={{ minWidth: 120, m: 1 }} variant="outlined">
+      <InputLabel id={labelId}>Max Points</InputLabel>
+      <Select
+        labelId={labelId}
+        label="Max Points"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        input={<OutlinedInput label="Max Points" />}
+        MenuProps={{ transitionDuration: { enter: 225, exit: 195 } }}
+      >
+        {range(1, max + 1).map((v) => (
           <MenuItem key={`${v}`} value={v}>
             {v}
           </MenuItem>
@@ -61,89 +64,102 @@ const MaxPoints = withStyles((theme) => ({
       </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,
-  },
-}))((props) => {
-  const { points, content, classes, sampleAnswer, mathMlOptions = {} } = props;
+const Row = styled('div')(() => ({ display: 'flex', width: '100%', position: 'relative' }));
+
+const EditorDiv = styled('div')(({ theme }) => ({ width: '100%', backgroundColor: `${theme.palette.common.white}` }));
+
+const DragIndicatorStyled = styled(DragIndicator)(({ theme }) => ({ paddingTop: theme.spacing(1), color: grey[500] }));
+
+const PointsLabel = styled(Typography)(({ theme }) => ({
+  color: grey[500],
+  paddingBottom: theme.spacing(1),
+  textTransform: 'uppercase',
+}));
+
+const SampleAnswersEditor = styled('div')(({ theme }) => ({ paddingLeft: theme.spacing(3) }));
+
+const ErrorText = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingLeft: theme.spacing(3),
+  paddingTop: theme.spacing(1),
+}));
+
+const PointMenuWrapper = styled('div')(() => ({ position: 'absolute', right: 0 }));
+
+export const PointConfig = (props) => {
+  const { points, content, sampleAnswer, mathMlOptions = {}, error, pluginOpts = {} } = 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}
-          markup={content}
-          onChange={props.onChange}
-          mathMlOptions={mathMlOptions}
-        />
-        <PointMenu
-          classes={{
-            icon: classes.pointMenu,
-          }}
-          showSampleAnswer={showSampleAnswer}
-          onChange={props.onMenuChange}
-        />
-      </div>
-
-      {!showSampleAnswer && (
-        <div className={classes.sampleAnswersEditor}>
-          <Typography variant="overline" className={classes.dragIndicator}>
-            Sample Response
-          </Typography>
+    <div>
+      <PointsLabel variant="overline">{pointsLabel}</PointsLabel>
+      <Row>
+        <DragIndicatorStyled />
+        <EditorDiv>
           <EditableHtml
-            className={classes.editor}
-            markup={sampleAnswer}
-            onChange={props.onSampleChange}
+            error={error}
+            pluginProps={pluginOpts}
+            markup={content}
+            onChange={props.onChange}
             mathMlOptions={mathMlOptions}
           />
-        </div>
+        </EditorDiv>
+        <PointMenuWrapper>
+          <PointMenu showSampleAnswer={showSampleAnswer} onChange={props.onMenuChange} />
+        </PointMenuWrapper>
+      </Row>
+      {error && <ErrorText>{error}</ErrorText>}
+      {!showSampleAnswer && (
+        <SampleAnswersEditor>
+          <DragIndicatorStyled as={Typography} variant="overline">
+            Sample Response
+          </DragIndicatorStyled>
+          <EditorDiv>
+            <EditableHtml
+              markup={sampleAnswer}
+              pluginProps={pluginOpts}
+              onChange={props.onSampleChange}
+              mathMlOptions={mathMlOptions}
+            />
+          </EditorDiv>
+        </SampleAnswersEditor>
       )}
     </div>
   );
-});
+};
+
+const Container = styled('div')(({ theme }) => ({
+  backgroundColor: grey[200],
+  borderWidth: 1,
+  borderStyle: 'solid',
+  borderColor: grey[300],
+  padding: theme.spacing(2),
+  margin: theme.spacing(1),
+}));
+const InputContainerWrapper = styled('div')(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  '& MuiFormControl-root': { width: '100%' },
+}));
+const Rubricless = styled('div')(() => ({ display: 'none' }));
+const ConfigHolder = styled('div')(({ theme }) => ({ paddingTop: theme.spacing(1), paddingBottom: theme.spacing(1) }));
+const RubricTitle = styled(Typography)(({ theme }) => ({ paddingLeft: theme.spacing(1), margin: theme.spacing(1) }));
 
 export class RawAuthoring extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
-    className: PropTypes.string,
     value: RubricType,
+    config: PropTypes.object,
+    pluginOpts: PropTypes.object,
+    rubricless: PropTypes.bool,
     onChange: PropTypes.func,
   };
 
@@ -162,8 +178,13 @@ export class RawAuthoring extends React.Component {
     onChange({ ...value, points, sampleAnswers });
   };
 
-  changeMaxPoints = (maxPoints) => {
+  changeRubriclessInstruction = (input) => {
     const { value, onChange } = this.props;
+    onChange({ ...value, rubriclessInstruction: input });
+  };
+
+  changeMaxPoints = (maxPoints) => {
+    const { value, onChange, rubricless } = this.props;
     const currentMax = value.points.length - 1;
 
     log('current', currentMax, 'new: ', maxPoints);
@@ -184,8 +205,10 @@ export class RawAuthoring extends React.Component {
       sampleAnswers = takeRight(value.sampleAnswers, maxPoints + 1);
     }
 
-    if (points) {
-      onChange({ ...value, points, sampleAnswers });
+    if (points && !rubricless) {
+      onChange({ ...value, points, sampleAnswers, maxPoints });
+    } else {
+      onChange({ ...value, maxPoints });
     }
   };
 
@@ -242,21 +265,37 @@ export class RawAuthoring extends React.Component {
   };
 
   render() {
-    const { classes, className, value, mathMlOptions = {} } = this.props;
-    let { excludeZeroEnabled = true, maxPointsEnabled = true } = value || {};
-
+    const { value, mathMlOptions = {}, config = {}, rubricless = false, pluginOpts = {} } = this.props;
+    let {
+      excludeZeroEnabled = true,
+      maxPointsEnabled = true,
+      errors = {},
+      rubriclessInstructionEnabled = false,
+      maxPoints = 10,
+    } = value || {};
+    // rubric will contain a max value for maxPoints
+    const { rubriclessInstruction = {}, maxMaxPoints = 10 } = config || {};
+    const { pointsDescriptorsErrors } = errors || {};
     if (value && Number.isFinite(value.maxPoints)) {
       // eslint-disable-next-line no-console
       console.warn('maxPoints is deprecated - remove from model');
     }
 
+    // for rubric value is computed based on points
+    const maxPointsValue = !rubricless ? value.points.length - 1 : maxPoints;
+
     return (
-      <div className={classNames(classes.class, className)}>
-        <Typography variant="h5" className={classes.rubricTitle}>
-          Rubric
-        </Typography>
+      <div>
+        <RubricTitle variant="h5">Rubric</RubricTitle>
         <FormGroup row>
-          {maxPointsEnabled && <MaxPoints max={10} value={value.points.length - 1} onChange={this.changeMaxPoints} />}
+          {maxPointsEnabled && (
+            <MaxPoints
+              max={maxMaxPoints < 100 ? maxMaxPoints : 100}
+              value={maxPointsValue}
+              onChange={this.changeMaxPoints}
+              pluginOpts={pluginOpts}
+            />
+          )}
           {excludeZeroEnabled && (
             <FormControlLabel
               label="Exclude zeros"
@@ -265,69 +304,77 @@ export class RawAuthoring extends React.Component {
           )}
         </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}
-                                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>
-                      ),
+        {rubriclessInstructionEnabled && rubricless && (
+          <InputContainerWrapper>
+            <InputContainer label={rubriclessInstruction.label}>
+              <EditableHtml
+                markup={value.rubriclessInstruction || ''}
+                onChange={this.changeRubriclessInstruction}
+                pluginProps={pluginOpts}
+                nonEmpty={false}
+                disableUnderline
+                languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+                mathMlOptions={mathMlOptions}
+              />
+            </InputContainer>
+          </InputContainerWrapper>
+        )}
+
+        <div>
+          {rubricless ? (
+            <Rubricless />
+          ) : (
+            <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) => (
+                                <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}
+                                    pluginOpts={pluginOpts}
+                                  />
+                                </ConfigHolder>
+                              )}
+                            </Draggable>
+                          ),
+                      )}
+                      {provided.placeholder}
+                    </div>
                   )}
-                  {provided.placeholder}
-                </div>
-              )}
-            </Droppable>
-          </DragDropContext>
+                </Droppable>
+              </DragDropContext>
+            </Container>
+          )}
         </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);
+// styles migrated to styled-components above
 
 const Reverse = (props) => {
+  const { rubricless = false, config = {}, pluginOpts = {} } = props || {};
   const points = Array.from(props.value.points || []).reverse();
   let sampleAnswers = Array.from(props.value.sampleAnswers || []).reverse();
 
@@ -347,11 +394,16 @@ const Reverse = (props) => {
     });
   };
 
-  return <StyledRawAuthoring value={value} onChange={onChange} />;
+  return (
+    <RawAuthoring value={value} config={config} onChange={onChange} rubricless={rubricless} pluginOpts={pluginOpts} />
+  );
 };
 
 Reverse.propTypes = {
   value: RubricType,
+  config: PropTypes.object,
+  pluginOpts: PropTypes.object,
+  rubricless: PropTypes.bool,
   getIndex: PropTypes.func,
   onChange: PropTypes.func,
 };

package/src/index.js

@@ -3,6 +3,7 @@ import Authoring from './authoring';
 const RUBRIC_TYPES = {
   SIMPLE_RUBRIC: 'simpleRubric',
   MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
+  RUBRICLESS: 'rubricless',
 };
 
 export { Authoring, RUBRIC_TYPES };

package/src/point-menu.jsx

@@ -1,8 +1,8 @@
-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 Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import IconButton from '@mui/material/IconButton';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -10,7 +10,6 @@ export class IconMenu extends React.Component {
   static propTypes = {
     opts: PropTypes.object,
     onClick: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
   };
 
   constructor(props) {
@@ -26,7 +25,7 @@ export class IconMenu extends React.Component {
   handleRequestClose = () => this.setState({ open: false });
 
   render() {
-    const { opts, onClick, classes } = this.props;
+    const { opts, onClick } = this.props;
     const { open, anchorEl } = this.state;
     const keys = Object.keys(opts) || [];
 
@@ -40,7 +39,7 @@ export class IconMenu extends React.Component {
     return (
       <div>
         <div onClick={this.handleClick}>
-          <IconButton className={classes.icon}>
+          <IconButton size="large">
             {open ? <MoreVertIcon color={iconColor} /> : <MoreHorizIcon color={iconColor} />}
           </IconButton>
         </div>
@@ -69,16 +68,11 @@ export class IconMenu extends React.Component {
 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 { onChange, showSampleAnswer } = this.props;
     const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
 
     return (
@@ -87,7 +81,6 @@ export default class PointMenu extends React.Component {
         opts={{
           sample: sampleText,
         }}
-        classes={classes}
       />
     );
   }