@pie-element/multi-trait-rubric 0.1.0

package/src/author/trait.tsx

@@ -0,0 +1,305 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/configure/src/trait.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 debug from 'debug';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash-es';
+import { useDraggable, useDroppable } from '@dnd-kit/core';
+
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+
+import { Block, BlockWidth, ExpandedInput, PrimaryBlock, Row, SecondaryBlock, UnderlinedInput } from './common.js';
+
+import IconButton from '@mui/material/IconButton';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { InlineMenu as Menu } from '@pie-lib/render-ui';
+import MenuItem from '@mui/material/MenuItem';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+const log = debug('@pie-element:placement-ordering:configure:trait-tile');
+
+const ActionsIcon: any = styled(DragIndicatorIcon)({
+  color: color.text(),
+});
+
+const StyledPrimaryBlock: any = styled(PrimaryBlock)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  marginBottom: theme.spacing(5),
+  touchAction: 'none',
+}));
+
+const Controls: any = styled('div')({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  cursor: 'pointer',
+});
+
+const Options: any = styled(IconButton)({
+  marginLeft: 'auto',
+});
+
+const RemoveLabel: any = styled('div')({
+  display: 'flex',
+  whiteSpace: 'break-spaces',
+});
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingBottom: theme.spacing(1),
+}));
+
+function TraitTile({
+  error,
+  trait: { name, standards, description, scorePointsDescriptors },
+  traitLabel,
+  scorePointsValues,
+  showStandards,
+  showDescription,
+  enableDragAndDrop,
+  currentPosition,
+  secondaryBlockWidth,
+  spellCheck,
+  maxPoints,
+  uploadSoundSupport,
+  mathMlOptions = {},
+  expandedPluginProps = {},
+  labelPluginProps = {},
+  imageSupport = {},
+  index,
+  onTraitChanged,
+  onTraitRemoved,
+  onTraitDropped,
+}) {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const secondaryBlockRef = React.useRef(null);
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDragRef,
+    transform,
+    isDragging,
+  } = useDraggable({
+    id: `trait-${index}`,
+    data: {
+      type: 'trait',
+      index,
+      name,
+    },
+  });
+
+  const { setNodeRef: setDropRef } = useDroppable({
+    id: `trait-drop-${index}`,
+    data: {
+      type: 'trait',
+      index,
+    },
+  });
+
+  React.useLayoutEffect(() => {
+    if (
+      currentPosition !== undefined &&
+      secondaryBlockRef.current
+    ) {
+      secondaryBlockRef.current.scrollTo({ left: currentPosition });
+    }
+  }, [currentPosition]);
+
+  const onTraitChangedHandler = (params) => {
+    if (isEmpty(params)) return;
+
+    const updatedTrait = { ...{ name, standards, description, scorePointsDescriptors }, ...params };
+    onTraitChanged(updatedTrait);
+  };
+
+  const onScorePointDescriptorChange = ({ descriptor, value }) => {
+    if (value < 0 || value >= scorePointsDescriptors.length) return;
+
+    const newDescriptors = [...scorePointsDescriptors];
+    newDescriptors[value] = descriptor;
+
+    onTraitChangedHandler({ scorePointsDescriptors: newDescriptors });
+  };
+
+  const handleClick = (event) => setAnchorEl(event.currentTarget);
+
+  const handleClose = () => setAnchorEl(null);
+
+  const openMenu = () => {
+    onTraitRemoved();
+    handleClose();
+  };
+
+  const dragStyle = transform
+    ? {
+        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
+        opacity: isDragging ? 0.5 : 1,
+      }
+    : {};
+
+  return (
+    <div ref={setDropRef} style={dragStyle}>
+      <Row>
+        <StyledPrimaryBlock>
+          <Controls>
+            {enableDragAndDrop && (
+              <span ref={setDragRef} {...attributes} {...listeners}>
+                <ActionsIcon />
+              </span>
+            )}
+
+            <Options
+              aria-label="more"
+              aria-controls="long-menu"
+              aria-haspopup="true"
+              onClick={handleClick}
+              size="large"
+            >
+              <MoreVertIcon />
+            </Options>
+
+            <Menu
+              id="long-menu"
+              anchorEl={anchorEl}
+              keepMounted
+              open={!!anchorEl}
+              onClose={handleClose}
+              transitionDuration={{ enter: 225, exit: 195 }}
+            >
+              <MenuItem onClick={openMenu}>
+                <RemoveLabel dangerouslySetInnerHTML={{ __html: `Remove ${name || traitLabel}` }} />
+              </MenuItem>
+            </Menu>
+          </Controls>
+
+          <UnderlinedInput
+            markup={name}
+            error={error?.name || ''}
+            onChange={(name) => onTraitChangedHandler({ name })}
+            pluginProps={labelPluginProps}
+            placeholder={`Enter ${traitLabel}`}
+            spellCheck={spellCheck}
+            uploadSoundSupport={uploadSoundSupport}
+            mathMlOptions={mathMlOptions}
+            imageSupport={imageSupport}
+          />
+          {error && <ErrorText>{error.name || ''}</ErrorText>}
+        </StyledPrimaryBlock>
+
+        <SecondaryBlock
+          setRef={(ref) => {
+            secondaryBlockRef.current = ref;
+          }}
+          width={`${secondaryBlockWidth}px`}
+        >
+          {showStandards && standards && (
+            <Block>
+              <ExpandedInput
+                placeholder="Standards"
+                markup={standards.join(',')}
+                onChange={(standards) => onTraitChangedHandler({ standards: standards.split(',') })}
+                pluginProps={expandedPluginProps}
+                spellCheck={spellCheck}
+                uploadSoundSupport={uploadSoundSupport}
+                mathMlOptions={mathMlOptions}
+                imageSupport={imageSupport}
+              />
+            </Block>
+          )}
+
+          {showDescription && (
+            <Block>
+              <ExpandedInput
+                placeholder="Enter Description"
+                markup={description}
+                error={error?.description || ''}
+                onChange={(description) => onTraitChangedHandler({ description })}
+                pluginProps={expandedPluginProps}
+                spellCheck={spellCheck}
+                uploadSoundSupport={uploadSoundSupport}
+                mathMlOptions={mathMlOptions}
+                imageSupport={imageSupport}
+              />
+              {error && <ErrorText>{error.description || ''}</ErrorText>}
+            </Block>
+          )}
+
+          {(scorePointsValues || []).map((scorePointsValue, scoreIndex) => {
+            const adjustedBlockWidth = BlockWidth + 2 * 8; // 8 is padding
+            const remainingSpace = secondaryBlockWidth - adjustedBlockWidth * scoreIndex + currentPosition - 98;
+            const value = scorePointsValues.length - scoreIndex - 1;
+            let scoreDescriptor;
+
+            try {
+              scoreDescriptor = scorePointsDescriptors[value] || '';
+            } catch (e) {
+              scoreDescriptor = '';
+            }
+
+            return (
+              <Block key={`key-key-${scoreIndex}`}>
+                <ExpandedInput
+                  placeholder="Enter Descriptor"
+                  markup={scoreDescriptor}
+                  onChange={(descriptor) => onScorePointDescriptorChange({ descriptor, value })}
+                  pluginProps={expandedPluginProps}
+                  alignToRight={remainingSpace < 296 && scorePointsValue < maxPoints} // 296 is the space required for the toolbar
+                  spellCheck={spellCheck}
+                  uploadSoundSupport={uploadSoundSupport}
+                  mathMlOptions={mathMlOptions}
+                  imageSupport={imageSupport}
+                />
+              </Block>
+            );
+          })}
+        </SecondaryBlock>
+      </Row>
+    </div>
+  );
+}
+
+TraitTile.propTypes = {
+  error: PropTypes.object,
+  index: PropTypes.number.isRequired,
+  onTraitChanged: PropTypes.func.isRequired,
+  onTraitRemoved: PropTypes.func.isRequired,
+  onTraitDropped: PropTypes.func,
+  trait: PropTypes.shape({
+    name: PropTypes.string,
+    standards: PropTypes.arrayOf(PropTypes.string),
+    scorePointsDescriptors: PropTypes.arrayOf(PropTypes.string),
+    description: PropTypes.string,
+  }),
+  traitLabel: PropTypes.string,
+  scorePointsValues: PropTypes.arrayOf(PropTypes.number),
+  showStandards: PropTypes.bool,
+  showDescription: PropTypes.bool,
+  maxPoints: PropTypes.number,
+  enableDragAndDrop: PropTypes.bool,
+  currentPosition: PropTypes.number,
+  secondaryBlockWidth: PropTypes.number,
+  spellCheck: PropTypes.bool,
+  uploadSoundSupport: PropTypes.object,
+  mathMlOptions: PropTypes.object,
+  expandedPluginProps: PropTypes.object,
+  labelPluginProps: PropTypes.object,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+};
+
+export default TraitTile;

package/src/author/traitsHeader.tsx

@@ -0,0 +1,301 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/configure/src/traitsHeader.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';
+
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import { InlineMenu as MenuImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const Menu = unwrapReactInteropSymbol(MenuImport, 'InlineMenu') || unwrapReactInteropSymbol(renderUi.InlineMenu, 'InlineMenu');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import MenuItem from '@mui/material/MenuItem';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import { color } from '@pie-lib/render-ui';
+
+import {
+  Block,
+  BlockWidth,
+  PrimaryBlockWidth,
+  SecondaryBlock,
+  ScorePoint,
+  MaxPointsPicker,
+  SimpleInput,
+  ScaleSettings,
+  HeaderHeight,
+  HeaderHeightLarge,
+} from './common.js';
+
+const Label: any = styled('div')({
+  width: '140px',
+  border: 'none',
+  padding: '10px 0',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-around',
+});
+
+const GreyHeaderRow: any = styled('div')(({ height, theme }) => ({
+  background: color.secondaryBackground(),
+  borderRadius: '4px',
+  position: 'relative',
+  marginBottom: theme.spacing(2),
+  display: 'flex',
+  height: height,
+}));
+
+const PrimaryBlockGreyHeader: any = styled('div')(({ theme }) => ({
+  width: `${PrimaryBlockWidth}px`,
+  minWidth: `${PrimaryBlockWidth}px`,
+  position: 'relative',
+  padding: '0 10px',
+  boxSizing: 'border-box',
+  paddingTop: theme.spacing(1.5),
+  alignSelf: 'center'
+}));
+
+const ScorePointErrorText: any = styled('div')(({ theme }) => ({
+  position: 'absolute',
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(0.5),
+}));
+
+export class TraitsHeaderTile extends React.Component {
+  static propTypes = {
+    maxPointsEnabled: PropTypes.bool,
+    spellCheck: PropTypes.bool,
+    errors: PropTypes.object,
+  };
+
+  state = {
+    anchorEl: null,
+  };
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.currentPosition !== this.props.currentPosition) {
+      this.scrollToPosition(nextProps.currentPosition);
+    }
+  }
+
+  onScorePointLabelChange: any = ({ scorePointLabel, value }) => {
+    const { scorePointsLabels, onScaleChange } = this.props;
+
+    if (value < 0 || value >= scorePointsLabels.length) return;
+
+    scorePointsLabels[value] = scorePointLabel;
+
+    onScaleChange({ scorePointsLabels });
+  };
+
+  handleClick = (event) => this.setState({ anchorEl: event.currentTarget });
+
+  handleClose = () => this.setState({ anchorEl: null });
+
+  scrollToPosition: any = (position) => {
+    if (this.secondaryBlock) {
+      this.secondaryBlock.scrollTo({ left: position });
+    }
+  };
+
+  openMenu: any = () => {
+    this.props.showDeleteScaleModal();
+    this.handleClose();
+  };
+
+  render() {
+    const {
+      scorePointsValues,
+      scorePointsLabels,
+      traitLabel,
+      currentPosition,
+      showStandards,
+      onTraitLabelChange,
+      showDescription,
+      showLevelTagInput,
+      maxPoints,
+      updateMaxPointsFieldValue,
+      scaleIndex,
+      showScorePointLabels,
+      secondaryBlockWidth,
+      setSecondaryBlockRef,
+      spellCheck,
+      uploadSoundSupport,
+      maxPointsEnabled,
+      mathMlOptions = {},
+      errors = {},
+      maxMaxPoints,
+      labelPluginProps = {},
+      imageSupport = {},
+    } = this.props;
+    const { anchorEl } = this.state;
+
+    return (
+      <GreyHeaderRow height={showLevelTagInput ? HeaderHeightLarge : HeaderHeight}>
+        <PrimaryBlockGreyHeader>
+          {showLevelTagInput && (
+            <SimpleInput
+              markup={traitLabel || 'Trait'}
+              onChange={onTraitLabelChange}
+              pluginProps={labelPluginProps}
+              spellCheck={spellCheck}
+              label="Level Label"
+              uploadSoundSupport={uploadSoundSupport}
+              mathMlOptions={mathMlOptions}
+              imageSupport={imageSupport}
+            />
+          )}
+
+          <ScaleSettings>
+            <div>Scale {scaleIndex + 1}</div>
+
+            {maxPointsEnabled && (
+              <MaxPointsPicker maxPoints={maxPoints} maxMaxPoints={maxMaxPoints} onChange={updateMaxPointsFieldValue} />
+            )}
+
+            <div>
+              <IconButton
+                aria-label="more"
+                aria-controls="long-menu"
+                aria-haspopup="true"
+                onClick={this.handleClick}
+                size="large">
+                <MoreVertIcon />
+              </IconButton>
+              <Menu
+                id="long-menu"
+                anchorEl={anchorEl}
+                keepMounted
+                open={!!anchorEl}
+                onClose={this.handleClose}
+                transitionDuration={{ enter: 225, exit: 195 }}
+              >
+                {['Remove Scale'].map((option) => (
+                  <MenuItem key={option} onClick={this.openMenu}>
+                    {option}
+                  </MenuItem>
+                ))}
+              </Menu>
+            </div>
+          </ScaleSettings>
+        </PrimaryBlockGreyHeader>
+        <SecondaryBlock
+          setRef={(ref) => {
+            if (ref) {
+              this.secondaryBlock = ref;
+              setSecondaryBlockRef(ref);
+            }
+          }}
+          width={`${secondaryBlockWidth}px`}
+        >
+          {showStandards && (
+            <Block>
+              <Label>Standard(s)</Label>
+            </Block>
+          )}
+
+          {showDescription && (
+            <Block>
+              <Label>Description</Label>
+            </Block>
+          )}
+
+          {scorePointsValues.map((scorePointsValue, index) => {
+            const adjustedBlockWidth = BlockWidth + 2 * 8; // 8 is padding
+            const remainingSpace = secondaryBlockWidth - adjustedBlockWidth * index + currentPosition - 128;
+            const value = scorePointsValues.length - index - 1;
+            let scoreDescriptor;
+            let error;
+
+            try {
+              scoreDescriptor = scorePointsLabels[value] || '';
+              error = errors[value] || '';
+            } catch (e) {
+              scoreDescriptor = '';
+            }
+
+            return (
+              <Block key={`secondary-block-part-${index}`}>
+                <ScorePoint
+                  scorePointsValue={scorePointsValue}
+                  error={error}
+                  scoreDescriptor={scoreDescriptor}
+                  pluginProps={labelPluginProps}
+                  showScorePointLabels={showScorePointLabels}
+                  onChange={(scorePointLabel) => this.onScorePointLabelChange({ scorePointLabel, value })}
+                  alignToRight={remainingSpace < 296 && scorePointsValue < maxPoints} // 296 is the space required for the toolbar
+                  spellCheck={spellCheck}
+                  uploadSoundSupport={uploadSoundSupport}
+                  mathMlOptions={mathMlOptions}
+                  imageSupport={imageSupport}
+                />
+                {error && <ScorePointErrorText>{error}</ScorePointErrorText>}
+              </Block>
+            );
+          })}
+        </SecondaryBlock>
+      </GreyHeaderRow>
+    );
+  }
+}
+
+TraitsHeaderTile.propTypes = {
+  onTraitLabelChange: PropTypes.func,
+  onScaleChange: PropTypes.func,
+  scorePointsValues: PropTypes.arrayOf(PropTypes.number),
+  scorePointsLabels: PropTypes.arrayOf(PropTypes.string),
+  traitLabel: PropTypes.string,
+  showStandards: PropTypes.bool,
+  showLevelTagInput: PropTypes.bool,
+  showDescription: PropTypes.bool,
+  maxPoints: PropTypes.number,
+  updateMaxPointsFieldValue: PropTypes.func,
+  scaleIndex: PropTypes.number,
+  currentPosition: PropTypes.number,
+  secondaryBlockWidth: PropTypes.number,
+  showDeleteScaleModal: PropTypes.func,
+  showScorePointLabels: PropTypes.bool,
+  setSecondaryBlockRef: PropTypes.func,
+  uploadSoundSupport: PropTypes.object,
+  maxMaxPoints: PropTypes.number,
+  labelPluginProps: PropTypes.object,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+};
+
+export default TraitsHeaderTile;

package/src/author/utils.ts

@@ -0,0 +1,83 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/configure/src/utils.js
+ * @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 { DEFAULT_PLUGINS } from '@pie-lib/editable-html-tip-tap';
+import { excludeZeroTypes } from './modals.js';
+
+export const filteredDefaultPlugins = (DEFAULT_PLUGINS || []).filter(
+  (p) => p !== 'table' && p !== 'bulleted-list' && p !== 'numbered-list',
+);
+
+export const addOrRemoveScaleColumn = (scales, excludeZeroType) => {
+  if (!scales || !scales.length) {
+    return [];
+  }
+
+  return scales.reduce((acc, scale) => {
+    let { scorePointsLabels, traits } = scale || {};
+
+    if (scorePointsLabels.length < 1) {
+      return acc;
+    }
+
+    switch (excludeZeroType) {
+      case excludeZeroTypes.remove0: {
+        // removes column 0
+        scorePointsLabels = scorePointsLabels.slice(1);
+        traits = traits.map(({ scorePointsDescriptors, ...trait }) => ({
+          ...trait,
+          scorePointsDescriptors: scorePointsDescriptors.slice(1),
+        }));
+
+        break;
+      }
+
+      case excludeZeroTypes.add0: {
+        // adds empty column at start
+        scorePointsLabels = ['', ...scorePointsLabels];
+        traits = traits.map(({ scorePointsDescriptors, ...trait }) => ({
+          ...trait,
+          scorePointsDescriptors: ['', ...scorePointsDescriptors],
+        }));
+
+        break;
+      }
+
+      case excludeZeroTypes.shiftLeft: {
+        // removes last column
+        scorePointsLabels = scorePointsLabels.slice(0, -1);
+        traits = traits.map(({ scorePointsDescriptors, ...trait }) => ({
+          ...trait,
+          scorePointsDescriptors: scorePointsDescriptors.slice(0, -1),
+        }));
+
+        break;
+      }
+
+      case excludeZeroTypes.shiftRight: {
+        // adds empty column at end
+        scorePointsLabels = [...scorePointsLabels, ''];
+        traits = traits.map(({ scorePointsDescriptors, ...trait }) => ({
+          ...trait,
+          scorePointsDescriptors: [...scorePointsDescriptors, ''],
+        }));
+
+        break;
+      }
+
+      default:
+        break;
+    }
+
+    acc.push({ ...scale, scorePointsLabels, traits });
+
+    return acc;
+  }, []);
+};

package/src/controller/defaults.ts

@@ -0,0 +1,21 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/controller/src/defaults.js
+ * @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.
+ */
+
+export default {
+  addScaleEnabled: true,
+  description: false,
+  excludeZero: false,
+  halfScoring: false,
+  maxPointsEnabled: true,
+  pointLabels: true,
+  scales: [],
+  standards: false,
+  visibleToStudent: true,
+};