@pie-lib/config-ui 12.0.0-beta.4 → 12.0.0-next.0

package/src/choice-configuration/index.jsx

@@ -1,110 +1,181 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
-import TextField from '@material-ui/core/TextField';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import ActionDelete from '@mui/icons-material/Delete';
+import ArrowRight from '@mui/icons-material/SubdirectoryArrowRight';
+import IconButton from '@mui/material/IconButton';
 import { InputContainer } from '@pie-lib/render-ui';
-import EditableHtml from '@pie-lib/editable-html';
+// import EditableHtml from '@pie-lib/editable-html';
 import { InputCheckbox, InputRadio } from '../inputs';
 import FeedbackMenu from './feedback-menu';
-import ActionDelete from '@material-ui/icons/Delete';
-import ArrowRight from '@material-ui/icons/SubdirectoryArrowRight';
-import IconButton from '@material-ui/core/IconButton';
-
-const EditableHtmlContainer = withStyles(theme => ({
-  labelContainer: {},
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2
-  }
-}))(
-  ({
-     label,
-     classes,
-     onChange,
-     value,
-     className,
-     imageSupport,
-     disabled,
-     spellCheck,
-     nonEmpty,
-     toolbarOpts,
-     error,
-     maxImageWidth,
-     maxImageHeight
-   }) => {
-    const names = classNames(classes.labelContainer, className);
 
-    return (
-      <InputContainer label={label} className={names}>
-        <div className={classes.editorHolder}>
-          <EditableHtml
-            markup={value || ''}
-            disabled={disabled}
-            spellCheck={spellCheck}
-            nonEmpty={nonEmpty}
-            onChange={onChange}
-            imageSupport={imageSupport}
-            className={classes.editor}
-            toolbarOpts={toolbarOpts}
-            error={error}
-            maxImageWidth={maxImageWidth}
-            maxImageHeight={maxImageHeight}
-          />
-        </div>
-      </InputContainer>
-    );
-  }
-);
-
-const Feedback = withStyles(() => ({
-  text: {
-    width: '100%'
-  },
-  feedbackContainer: {
-    position: 'relative'
-  },
-  arrowIcon: {
-    fill: '#ccc',
-    left: -56,
-    position: 'absolute',
-    top: 20
-  }
-}))(({ value, onChange, type, correct, classes, defaults, toolbarOpts }) => {
+// - mathquill error window not defined
+let EditableHtml;
+if (typeof window !== 'undefined') {
+  EditableHtml = require('@pie-lib/editable-html')['default'];
+}
+
+const StyledEditorHolder = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+}));
+
+const EditableHtmlContainer = ({
+  label,
+  onChange,
+  value,
+  className,
+  imageSupport,
+  disableImageAlignmentButtons,
+  disabled,
+  spellCheck,
+  nonEmpty,
+  pluginOpts,
+  toolbarOpts,
+  error,
+  maxImageWidth,
+  maxImageHeight,
+  uploadSoundSupport,
+  mathMlOptions = {},
+}) => {
+
+  return (
+    <InputContainer label={label} className={className}>
+      <StyledEditorHolder>
+        <EditableHtml
+          markup={value || ''}
+          disabled={disabled}
+          spellCheck={spellCheck}
+          nonEmpty={nonEmpty}
+          onChange={onChange}
+          imageSupport={imageSupport}
+          disableImageAlignmentButtons={disableImageAlignmentButtons}
+          pluginProps={pluginOpts || {}}
+          toolbarOpts={toolbarOpts}
+          error={error}
+          maxImageWidth={maxImageWidth}
+          maxImageHeight={maxImageHeight}
+          uploadSoundSupport={uploadSoundSupport}
+          languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+          mathMlOptions={mathMlOptions}
+        />
+      </StyledEditorHolder>
+    </InputContainer>
+  );
+};
+
+const StyledFeedbackContainer = styled('div')(() => ({
+  position: 'relative',
+}));
+
+const StyledArrowIcon = styled(ArrowRight)(({ theme }) => ({
+  fill: theme.palette.grey[400],
+  left: -56,
+  position: 'absolute',
+  top: 40,
+}));
+
+const StyledTextField = styled(TextField)(({ theme }) => ({
+  width: '100%',
+  marginTop: theme.spacing(2),
+}));
+
+const StyledEditableHtmlContainer = styled(EditableHtmlContainer)(({ theme }) => ({
+  width: '100%',
+  marginTop: theme.spacing(2),
+}));
+
+const Feedback = ({ value, onChange, type, correct, defaults, toolbarOpts, mathMlOptions = {} }) => {
   if (!type || type === 'none') {
     return null;
   } else if (type === 'default') {
     return (
-      <div className={classes.feedbackContainer}>
-        <ArrowRight className={classes.arrowIcon} />
-        <TextField
-          className={classes.text}
+      <StyledFeedbackContainer>
+        <StyledArrowIcon />
+        <StyledTextField
           label="Feedback Text"
           value={correct ? defaults.correct : defaults.incorrect}
+          variant="standard"
         />
-      </div>
+      </StyledFeedbackContainer>
     );
   } else {
     return (
-      <div className={classes.feedbackContainer}>
-        <ArrowRight className={classes.arrowIcon} />
-        <EditableHtmlContainer
-          className={classes.text}
+      <StyledFeedbackContainer>
+        <StyledArrowIcon />
+        <StyledEditableHtmlContainer
           label="Feedback Text"
           value={value}
           onChange={onChange}
           toolbarOpts={toolbarOpts}
+          mathMlOptions={mathMlOptions}
         />
-      </div>
+      </StyledFeedbackContainer>
     );
   }
-});
+};
+
+const StyledIndex = styled('span')(({ theme }) => ({
+  paddingRight: theme.spacing(1),
+  paddingTop: theme.spacing(3),
+}));
+
+const StyledTopRow = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledToggle = styled('div')(({ theme }) => ({
+  flex: '0 1 auto',
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: 0,
+  marginRight: 0,
+  marginLeft: theme.spacing(1),
+}));
+
+const StyledFeedback = styled('div')(({ theme }) => ({
+  flex: '0 1 auto',
+  paddingTop: theme.spacing(2),
+  paddingLeft: 0,
+  marginLeft: 0,
+  marginRight: theme.spacing(1),
+}));
+
+const StyledFeedbackIcon = styled('div')(() => ({
+  margin: 0,
+  width: 'inherit',
+}));
+
+const StyledDeleteIcon = styled('div')(() => ({
+  margin: 0,
+  width: 'inherit',
+}));
+
+const StyledDelete = styled('div')(({ theme }) => ({
+  flex: '0 1 auto',
+  paddingTop: theme.spacing(2),
+  paddingLeft: 0,
+  marginLeft: 0,
+}));
+
+const StyledMiddleColumn = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  marginRight: theme.spacing(1),
+}));
+
+const StyledErrorText = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+}));
 
 export class ChoiceConfiguration extends React.Component {
   static propTypes = {
-    classes: PropTypes.object.isRequired,
     noLabels: PropTypes.bool,
     useLetterOrdering: PropTypes.bool,
     className: PropTypes.string,
+    error: PropTypes.string,
     mode: PropTypes.oneOf(['checkbox', 'radio']),
     defaultFeedback: PropTypes.object.isRequired,
     disabled: PropTypes.bool,
@@ -115,19 +186,26 @@ export class ChoiceConfiguration extends React.Component {
       correct: PropTypes.bool,
       feedback: PropTypes.shape({
         type: PropTypes.string,
-        value: PropTypes.string
-      })
+        value: PropTypes.string,
+      }),
     }),
     onDelete: PropTypes.func,
     onChange: PropTypes.func,
     index: PropTypes.number,
     imageSupport: PropTypes.shape({
       add: PropTypes.func.isRequired,
-      delete: PropTypes.func.isRequired
+      delete: PropTypes.func.isRequired,
     }),
+    disableImageAlignmentButtons: PropTypes.bool,
     allowFeedBack: PropTypes.bool,
     allowDelete: PropTypes.bool,
-    toolbarOpts: PropTypes.object
+    noCorrectAnswerError: PropTypes.string,
+    spellCheck: PropTypes.bool,
+    pluginOpts: PropTypes.object,
+    toolbarOpts: PropTypes.object,
+    uploadSoundSupport: PropTypes.object,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
   };
 
   static defaultProps = {
@@ -135,11 +213,12 @@ export class ChoiceConfiguration extends React.Component {
     noLabels: false,
     useLetterOrdering: false,
     allowFeedBack: true,
-    allowDelete: true
+    allowDelete: true,
   };
 
-  _changeFn = key => update => {
+  _changeFn = (key) => (update) => {
     const { data, onChange } = this.props;
+
     if (onChange) {
       onChange({ ...data, [key]: update });
     }
@@ -147,7 +226,7 @@ export class ChoiceConfiguration extends React.Component {
 
   onLabelChange = this._changeFn('label');
 
-  onCheckedChange = event => {
+  onCheckedChange = (event) => {
     const correct = event.target.checked;
     const { data, onChange } = this.props;
 
@@ -156,7 +235,7 @@ export class ChoiceConfiguration extends React.Component {
     }
   };
 
-  onFeedbackValueChange = v => {
+  onFeedbackValueChange = (v) => {
     const { data, onChange } = this.props;
 
     if (data.feedback.type !== 'custom') {
@@ -168,9 +247,10 @@ export class ChoiceConfiguration extends React.Component {
     if (onChange) onChange({ ...data, feedback: fb });
   };
 
-  onFeedbackTypeChange = t => {
+  onFeedbackTypeChange = (t) => {
     const { data, onChange } = this.props;
     const fb = { ...data.feedback, type: t };
+
     if (fb.type !== 'custom') {
       fb.value = undefined;
     }
@@ -181,7 +261,6 @@ export class ChoiceConfiguration extends React.Component {
   render() {
     const {
       data,
-      classes,
       mode,
       onDelete,
       defaultFeedback,
@@ -190,46 +269,60 @@ export class ChoiceConfiguration extends React.Component {
       noLabels,
       useLetterOrdering,
       imageSupport,
+      disableImageAlignmentButtons,
       disabled,
       spellCheck,
       nonEmpty,
       allowFeedBack,
       allowDelete,
+      pluginOpts,
       toolbarOpts,
       error,
-      noCorrectAnswerError
+      noCorrectAnswerError,
+      uploadSoundSupport,
+      maxImageWidth,
+      maxImageHeight,
+      mathMlOptions = {},
     } = this.props;
 
     const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
-    const names = classNames(classes.choiceConfiguration, className);
+
     return (
-      <div className={names}>
-        <div className={classes.topRow}>
+        <StyledTopRow>
           {index > 0 && (
-            <span className={classes.index} type="title">
+            <StyledIndex type="title">
               {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
-            </span>
+            </StyledIndex>
           )}
-          <InputToggle
-            className={classes.toggle}
-            onChange={this.onCheckedChange}
-            label={!noLabels ? 'Correct' : ''}
-            checked={!!data.correct}
-            error={noCorrectAnswerError}
-          />
-          <div className={classes.middleColumn}>
-            <EditableHtmlContainer
-              label={!noLabels ? 'Label' : ''}
-              value={data.label}
-              onChange={this.onLabelChange}
-              imageSupport={imageSupport}
-              disabled={disabled}
-              spellCheck={spellCheck}
-              nonEmpty={nonEmpty}
-              toolbarOpts={toolbarOpts}
-              error={error}
+
+          <StyledToggle>
+            <InputToggle
+              onChange={this.onCheckedChange}
+              label={!noLabels ? 'Correct' : ''}
+              checked={!!data.correct}
+              error={noCorrectAnswerError}
             />
-            {error && <div className={classes.errorText}>{error}</div>}
+          </StyledToggle>
+
+          <StyledMiddleColumn>
+              <EditableHtmlContainer
+                label={!noLabels ? 'Label' : ''}
+                value={data.label}
+                onChange={this.onLabelChange}
+                imageSupport={imageSupport}
+                disableImageAlignmentButtons={disableImageAlignmentButtons}
+                disabled={disabled}
+                spellCheck={spellCheck}
+                nonEmpty={nonEmpty}
+                pluginOpts={pluginOpts}
+                toolbarOpts={toolbarOpts}
+                error={error}
+                uploadSoundSupport={uploadSoundSupport}
+                mathMlOptions={mathMlOptions}
+                maxImageWidth={maxImageWidth}
+                maxImageHeight={maxImageHeight}
+              />
+            {error && <StyledErrorText>{error}</StyledErrorText>}
 
             {allowFeedBack && (
               <Feedback
@@ -240,80 +333,38 @@ export class ChoiceConfiguration extends React.Component {
                 toolbarOpts={toolbarOpts}
               />
             )}
-          </div>
+          </StyledMiddleColumn>
+
           {allowFeedBack && (
-            <InputContainer className={classes.feedback} label={!noLabels ? 'Feedback' : ''}>
-              <FeedbackMenu
-                onChange={this.onFeedbackTypeChange}
-                value={data.feedback}
-                classes={{
-                  icon: classes.feedbackIcon
-                }}
-              />
-            </InputContainer>
+            <StyledFeedback>
+              <InputContainer label={!noLabels ? 'Feedback' : ''}>
+                <StyledFeedbackIcon>
+                  <FeedbackMenu
+                    onChange={this.onFeedbackTypeChange}
+                    value={data.feedback}
+                  />
+                </StyledFeedbackIcon>
+              </InputContainer>
+            </StyledFeedback>
           )}
+
           {allowDelete && (
-            <InputContainer className={classes.delete} label={!noLabels ? 'Delete' : ''}>
-              <IconButton aria-label="delete" className={classes.deleteIcon} onClick={onDelete}>
-                <ActionDelete />
-              </IconButton>
-            </InputContainer>
+            <StyledDelete>
+              <InputContainer label={!noLabels ? 'Delete' : ''}>
+                <StyledDeleteIcon>
+                  <IconButton
+                    aria-label="delete"
+                    onClick={onDelete}
+                    size="large">
+                    <ActionDelete />
+                  </IconButton>
+                </StyledDeleteIcon>
+              </InputContainer>
+            </StyledDelete>
           )}
-        </div>
-      </div>
+        </StyledTopRow>
     );
   }
 }
 
-const styles = theme => ({
-  index: {
-    padding: '24px 10px 0 0'
-  },
-  choiceConfiguration: {},
-  topRow: {
-    display: 'flex'
-  },
-  value: {
-    flex: '0.5',
-    paddingRight: theme.spacing.unit
-  },
-  editorHolder: {
-    marginTop: theme.spacing.unit * 2
-  },
-  toggle: {
-    flex: '0 1 auto'
-  },
-  feedback: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit,
-    paddingLeft: 0,
-    marginLeft: 0,
-    paddingRight: theme.spacing.unit * 3
-  },
-  feedbackIcon: {
-    margin: 0,
-    paddingLeft: 0,
-    width: 'inherit'
-  },
-  deleteIcon: {
-    margin: 0,
-    width: 'inherit'
-  },
-  delete: {
-    flex: '0 1 auto',
-    paddingTop: theme.spacing.unit,
-    paddingLeft: 0,
-    marginLeft: 0
-  },
-  middleColumn: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column'
-  },
-  errorText: {
-    fontSize: '12px',
-    color: 'red'
-  }
-});
-
-export default withStyles(styles)(ChoiceConfiguration);
+export default ChoiceConfiguration;

package/src/choice-utils.js

@@ -5,7 +5,7 @@ import includes from 'lodash/includes';
  * @param {Object} model the model to normalize
  * @return {Object} the updated model
  */
-export const normalizeChoices = model => {
+export const normalizeChoices = (model) => {
   const choices = model.choices.map((c, index) => {
     if (!c.value) {
       c.value = `${index}`;

package/src/feedback-config/__tests__/feedback-config.test.jsx

@@ -0,0 +1,141 @@
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { FeedbackConfig, buildDefaults } from '../index';
+
+// Mock FeedbackSelector to simplify testing
+jest.mock('../feedback-selector', () => {
+  return function FeedbackSelector({ label, feedback, onChange }) {
+    return (
+      <div data-testid="feedback-selector">
+        <label>{label}</label>
+        <select
+          aria-label={label}
+          value={feedback.type}
+          onChange={(e) => onChange({ ...feedback, type: e.target.value })}
+        >
+          <option value="default">Default</option>
+          <option value="custom">Custom</option>
+          <option value="none">None</option>
+        </select>
+      </div>
+    );
+  };
+});
+
+describe('FeedbackConfig', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders with default feedback types', () => {
+      const feedback = buildDefaults();
+
+      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
+
+      expect(screen.getByText('Feedback')).toBeInTheDocument();
+      expect(screen.getByText('If correct, show')).toBeInTheDocument();
+      expect(screen.getByText('If partially correct, show')).toBeInTheDocument();
+      expect(screen.getByText('If incorrect, show')).toBeInTheDocument();
+    });
+
+    it('renders all three feedback selectors by default', () => {
+      const feedback = buildDefaults();
+
+      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
+
+      const selectors = screen.getAllByTestId('feedback-selector');
+      expect(selectors).toHaveLength(3);
+    });
+
+    it('does not render partial feedback selector when allowPartial is false', () => {
+      const feedback = buildDefaults();
+
+      render(<FeedbackConfig allowPartial={false} feedback={feedback} onChange={onChange} />);
+
+      expect(screen.getByText('If correct, show')).toBeInTheDocument();
+      expect(screen.queryByText('If partially correct, show')).not.toBeInTheDocument();
+      expect(screen.getByText('If incorrect, show')).toBeInTheDocument();
+
+      const selectors = screen.getAllByTestId('feedback-selector');
+      expect(selectors).toHaveLength(2);
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange when correct feedback type changes', async () => {
+      const user = userEvent.setup();
+      const feedback = buildDefaults();
+
+      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
+
+      const correctSelect = screen.getByLabelText('If correct, show');
+      await user.selectOptions(correctSelect, 'custom');
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          correct: expect.objectContaining({ type: 'custom' }),
+        }),
+      );
+    });
+
+    it('calls onChange when incorrect feedback type changes', async () => {
+      const user = userEvent.setup();
+      const feedback = buildDefaults();
+
+      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
+
+      const incorrectSelect = screen.getByLabelText('If incorrect, show');
+      await user.selectOptions(incorrectSelect, 'none');
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          incorrect: expect.objectContaining({ type: 'none' }),
+        }),
+      );
+    });
+
+    it('calls onChange when partial feedback type changes', async () => {
+      const user = userEvent.setup();
+      const feedback = buildDefaults();
+
+      render(<FeedbackConfig feedback={feedback} onChange={onChange} />);
+
+      const partialSelect = screen.getByLabelText('If partially correct, show');
+      await user.selectOptions(partialSelect, 'custom');
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          partial: expect.objectContaining({ type: 'custom' }),
+        }),
+      );
+    });
+  });
+
+  describe('buildDefaults helper', () => {
+    it('returns default feedback configuration', () => {
+      const defaults = buildDefaults();
+
+      expect(defaults).toEqual({
+        correct: { type: 'default', default: 'Correct' },
+        incorrect: { type: 'default', default: 'Incorrect' },
+        partial: { type: 'default', default: 'Nearly' },
+      });
+    });
+
+    it('merges custom values with defaults', () => {
+      const defaults = buildDefaults({
+        correct: { type: 'custom', custom: 'Great job!' },
+      });
+
+      expect(defaults).toEqual({
+        correct: { type: 'custom', default: 'Correct', custom: 'Great job!' },
+        incorrect: { type: 'default', default: 'Incorrect' },
+        partial: { type: 'default', default: 'Nearly' },
+      });
+    });
+  });
+});