@pie-lib/rubric 2.0.4-next.31 → 2.0.4-next.34

package/src/authoring.jsx

@@ -0,0 +1,413 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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 { range, takeRight, times } from 'lodash-es';
+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, Draggable, Droppable } from '@hello-pangea/dnd';
+import debug from 'debug';
+import PointMenu from './point-menu';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+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) => {
+  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,
+  rubriclessInstruction: PropTypes.string,
+});
+
+const MaxPoints = (props) => {
+  const { value, onChange, max } = props;
+  const labelId = 'max-points-label';
+
+  return (
+    <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>
+        ))}
+      </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';
+
+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>
+      <PointsLabel variant="overline">{pointsLabel}</PointsLabel>
+      <Row>
+        <DragIndicatorStyled />
+        <EditorDiv>
+          <EditableHtml
+            error={error}
+            pluginProps={pluginOpts}
+            markup={content}
+            onChange={props.onChange}
+            mathMlOptions={mathMlOptions}
+          />
+        </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 StyledInputContainer = styled(InputContainer)(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2.5),
+  marginBottom: theme.spacing(2),
+  marginTop: theme.spacing(1),
+  '& .MuiFormControl-root': { width: '100%' },
+  '& > .MuiFormLabel-root.MuiInputLabel-shrink': {
+    fontSize: theme.typography.fontSize + 2,
+    transform: 'translate(0, 1.5px) scale(0.75)',
+  },
+}));
+
+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 = {
+    value: RubricType,
+    config: PropTypes.object,
+    pluginOpts: PropTypes.object,
+    rubricless: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+
+  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 });
+  };
+
+  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);
+
+    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 && !rubricless) {
+      onChange({ ...value, points, sampleAnswers, maxPoints });
+    } else {
+      onChange({ ...value, maxPoints });
+    }
+  };
+
+  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 });
+  };
+
+  getPointForIndex = (index, value) => {
+    const maxPoint = value.excludeZero ? value.points.length - 1 + 1 : value.points.length - 1;
+    return maxPoint - index;
+  };
+
+  getMaxPoint = (value) => (value.excludeZero ? value.points.length : value.points.length - 1);
+
+  shouldRenderPoint = (index, value) => {
+    const point = this.getPointForIndex(index, value);
+    return point > 0 || !value.excludeZero;
+  };
+
+  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 { 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 ? maxPoints : value.excludeZero ? value.points.length : value.points.length - 1;
+
+    return (
+      <div>
+        <RubricTitle variant="h5">Rubric</RubricTitle>
+        <FormGroup row>
+          {maxPointsEnabled && (
+            <MaxPoints
+              max={maxMaxPoints < 100 ? maxMaxPoints : 100}
+              value={maxPointsValue}
+              onChange={this.changeMaxPoints}
+              pluginOpts={pluginOpts}
+            />
+          )}
+          {excludeZeroEnabled && (
+            <FormControlLabel
+              label="Exclude zeros"
+              control={<Checkbox checked={value.excludeZero} onChange={this.excludeZeros} />}
+            />
+          )}
+        </FormGroup>
+
+        {rubriclessInstructionEnabled && rubricless && (
+          <StyledInputContainer label={rubriclessInstruction.label}>
+            <EditableHtml
+              markup={value.rubriclessInstruction || ''}
+              onChange={this.changeRubriclessInstruction}
+              pluginProps={pluginOpts}
+              nonEmpty={false}
+              disableUnderline
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+              autoWidthToolbar
+            />
+          </StyledInputContainer>
+        )}
+
+        <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={this.getPointForIndex(index, value)}
+                                    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>
+                  )}
+                </Droppable>
+              </DragDropContext>
+            </Container>
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+// 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();
+
+  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 (
+    <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,
+};
+
+export default Reverse;

package/src/index.js

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

@@ -0,0 +1,87 @@
+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';
+
+export class IconMenu extends React.Component {
+  static propTypes = {
+    opts: PropTypes.object,
+    onClick: PropTypes.func.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 } = 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 size="large">
+            {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,
+    showSampleAnswer: PropTypes.bool.isRequired,
+  };
+
+  render() {
+    const { onChange, showSampleAnswer } = this.props;
+    const sampleText = showSampleAnswer ? 'Provide Sample Response' : 'Remove Sample Response';
+
+    return (
+      <IconMenu
+        onClick={(key) => onChange(key)}
+        opts={{
+          sample: sampleText,
+        }}
+      />
+    );
+  }
+}

package/dist/_virtual/_rolldown/runtime.js

@@ -1,7 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), t = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
-//#endregion
-export { e as __commonJSMin, t as __require };

package/dist/authoring.d.ts

@@ -1,62 +0,0 @@
-/**
- * @synced-from pie-lib/packages/rubric/src/authoring.jsx
- * @auto-generated
- *
- * This file is automatically synced from pie-elements and converted to TypeScript.
- * Manual edits will be overwritten on next sync.
- * To make changes, edit the upstream JavaScript file and run sync again.
- */
-import React from 'react';
-import PropTypes from 'prop-types';
-export declare const RubricType: PropTypes.Requireable<PropTypes.InferProps<{
-    excludeZero: PropTypes.Requireable<boolean>;
-    points: PropTypes.Requireable<(string | null | undefined)[]>;
-    sampleAnswers: PropTypes.Requireable<(string | null | undefined)[]>;
-    maxPoints: PropTypes.Requireable<number>;
-    rubriclessInstruction: PropTypes.Requireable<string>;
-}>>;
-export declare const PointConfig: (props: any) => React.JSX.Element;
-export declare class RawAuthoring extends React.Component {
-    static propTypes: {
-        value: PropTypes.Requireable<PropTypes.InferProps<{
-            excludeZero: PropTypes.Requireable<boolean>;
-            points: PropTypes.Requireable<(string | null | undefined)[]>;
-            sampleAnswers: PropTypes.Requireable<(string | null | undefined)[]>;
-            maxPoints: PropTypes.Requireable<number>;
-            rubriclessInstruction: PropTypes.Requireable<string>;
-        }>>;
-        config: PropTypes.Requireable<object>;
-        pluginOpts: PropTypes.Requireable<object>;
-        rubricless: PropTypes.Requireable<boolean>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {};
-    dragEnd: any;
-    changeRubriclessInstruction: any;
-    changeMaxPoints: any;
-    changeContent: any;
-    excludeZeros: any;
-    getPointForIndex: any;
-    getMaxPoint: (value: any) => any;
-    shouldRenderPoint: any;
-    onPointMenuChange: any;
-    render(): React.JSX.Element;
-}
-declare const Reverse: {
-    (props: any): React.JSX.Element;
-    propTypes: {
-        value: PropTypes.Requireable<PropTypes.InferProps<{
-            excludeZero: PropTypes.Requireable<boolean>;
-            points: PropTypes.Requireable<(string | null | undefined)[]>;
-            sampleAnswers: PropTypes.Requireable<(string | null | undefined)[]>;
-            maxPoints: PropTypes.Requireable<number>;
-            rubriclessInstruction: PropTypes.Requireable<string>;
-        }>>;
-        config: PropTypes.Requireable<object>;
-        pluginOpts: PropTypes.Requireable<object>;
-        rubricless: PropTypes.Requireable<boolean>;
-        getIndex: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-};
-export default Reverse;