@pie-lib/config-ui 13.0.4-next.31 → 13.0.4-next.36

package/src/choice-configuration/__tests__/index.test.jsx

@@ -0,0 +1,234 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ChoiceConfiguration } from '../index';
+
+jest.mock('@pie-lib/editable-html-tip-tap', () => ({
+  __esModule: true,
+  default: ({ markup, onChange, disabled }) => (
+    <textarea
+      data-testid="editable-html"
+      defaultValue={markup || ''}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+    />
+  ),
+}));
+
+const defaultFeedback = {
+  correct: 'Correct',
+  incorrect: 'Incorrect',
+};
+
+const data = {
+  correct: true,
+  value: 'foo',
+  label: 'Foo',
+  feedback: {
+    type: 'custom',
+  },
+};
+
+const classes = {
+  choiceConfiguration: 'choiceConfiguration',
+};
+
+describe('ChoiceConfiguration', () => {
+  const onChange = jest.fn();
+
+  beforeEach(() => {
+    onChange.mockClear();
+  });
+
+  describe('rendering', () => {
+    it('renders correctly with default props', () => {
+      const { container } = render(
+        <ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} onChange={onChange} />,
+      );
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it('renders with checked state', () => {
+      render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={data}
+          onChange={onChange}
+          mode="checkbox"
+        />,
+      );
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeChecked();
+    });
+
+    it('renders without feedback when allowFeedBack is false', () => {
+      render(
+        <ChoiceConfiguration
+          allowFeedBack={false}
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={data}
+          onChange={onChange}
+        />,
+      );
+      expect(screen.queryByRole('button', { name: /feedback/i })).not.toBeInTheDocument();
+    });
+
+    it('renders without delete button when allowDelete is false', () => {
+      render(
+        <ChoiceConfiguration
+          allowDelete={false}
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={data}
+          onChange={onChange}
+        />,
+      );
+      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
+    });
+  });
+
+  describe('user interactions', () => {
+    it('calls onChange when label is edited', async () => {
+      const user = userEvent.setup();
+      render(
+        <ChoiceConfiguration classes={classes} defaultFeedback={defaultFeedback} data={data} onChange={onChange} />,
+      );
+
+      const editableHtmlElements = screen.getAllByTestId('editable-html');
+      const editableHtml = editableHtmlElements[0];
+      await user.clear(editableHtml);
+      await user.type(editableHtml, 'new label');
+
+      expect(onChange).toHaveBeenCalled();
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          label: expect.stringContaining('new label'),
+        }),
+      );
+    });
+
+    it('calls onChange when checkbox is toggled', async () => {
+      const user = userEvent.setup();
+      render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={{ ...data, correct: false }}
+          onChange={onChange}
+          mode="checkbox"
+        />,
+      );
+
+      const checkbox = screen.getByRole('checkbox');
+      await user.click(checkbox);
+
+      expect(onChange).toHaveBeenCalledWith(
+        expect.objectContaining({
+          correct: true,
+        }),
+      );
+    });
+  });
+
+  describe('prop variations', () => {
+    it('renders with radio mode instead of checkbox', () => {
+      render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={data}
+          onChange={onChange}
+          mode="radio"
+        />,
+      );
+      const radio = screen.getByRole('radio');
+      expect(radio).toBeInTheDocument();
+    });
+
+    it('renders with disabled state', () => {
+      render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={data}
+          onChange={onChange}
+          disabled={true}
+          mode="checkbox"
+        />,
+      );
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).toBeInTheDocument();
+    });
+
+    it('renders with custom feedback type', () => {
+      render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={{ ...data, feedback: { type: 'custom' } }}
+          onChange={onChange}
+          mode="checkbox"
+        />,
+      );
+      const editableElements = screen.getAllByTestId('editable-html');
+      expect(editableElements.length).toBeGreaterThan(0);
+    });
+
+    it('renders with incorrect answer', () => {
+      render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={{ ...data, correct: false }}
+          onChange={onChange}
+          mode="checkbox"
+        />,
+      );
+      const checkbox = screen.getByRole('checkbox');
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('handles data with empty label', () => {
+      render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={{ ...data, label: '' }}
+          onChange={onChange}
+        />,
+      );
+      const editableElements = screen.getAllByTestId('editable-html');
+      expect(editableElements.length).toBeGreaterThan(0);
+    });
+
+    it('handles multiple feedback types', () => {
+      const { rerender } = render(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={{ ...data, feedback: { type: 'default' } }}
+          onChange={onChange}
+        />,
+      );
+
+      let editableElements = screen.getAllByTestId('editable-html');
+      expect(editableElements.length).toBeGreaterThan(0);
+
+      rerender(
+        <ChoiceConfiguration
+          classes={classes}
+          defaultFeedback={defaultFeedback}
+          data={{ ...data, feedback: { type: 'custom' } }}
+          onChange={onChange}
+        />,
+      );
+
+      editableElements = screen.getAllByTestId('editable-html');
+      expect(editableElements.length).toBeGreaterThan(0);
+    });
+  });
+});

package/src/choice-configuration/feedback-menu.jsx

@@ -0,0 +1,96 @@
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ActionFeedback from '@mui/icons-material/Feedback';
+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,
+    iconButtonElement: PropTypes.any,
+  };
+
+  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 keys = Object.keys(opts);
+
+    const handleMenuClick = (key) => () => {
+      onClick(key);
+      this.handleRequestClose();
+    };
+
+    return (
+      <div>
+        <div onClick={this.handleClick}>{this.props.iconButtonElement}</div>
+        <Menu
+          id="simple-menu"
+          anchorEl={this.state.anchorEl}
+          open={this.state.open}
+          onClose={this.handleRequestClose}
+          transitionDuration={{ enter: 225, exit: 195 }}
+        >
+          {keys.map((k, index) => (
+            <MenuItem key={index} onClick={handleMenuClick(k)}>
+              {opts[k]}
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default class FeedbackMenu extends React.Component {
+  static propTypes = {
+    value: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    classes: {},
+  };
+
+  render() {
+    const { value, onChange, classes } = this.props;
+    const t = value && value.type;
+    const iconColor = t === 'custom' || t === 'default' ? 'primary' : 'disabled';
+    const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
+
+    const icon = (
+      <IconButton className={classes.icon} aria-label={tooltip} size="large">
+        <ActionFeedback color={iconColor} />
+      </IconButton>
+    );
+
+    return (
+      <IconMenu
+        iconButtonElement={icon}
+        onClick={(key) => onChange(key)}
+        opts={{
+          none: 'No Feedback',
+          default: 'Default',
+          custom: 'Custom',
+        }}
+      />
+    );
+  }
+}

package/src/choice-configuration/index.jsx

@@ -0,0 +1,357 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+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-tip-tap';
+import { InputCheckbox, InputRadio } from '../inputs';
+import FeedbackMenu from './feedback-menu';
+
+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 (
+      <StyledFeedbackContainer>
+        <StyledArrowIcon />
+        <StyledTextField
+          label="Feedback Text"
+          value={correct ? defaults.correct : defaults.incorrect}
+          variant="standard"
+        />
+      </StyledFeedbackContainer>
+    );
+  } else {
+    return (
+      <StyledFeedbackContainer>
+        <StyledArrowIcon />
+        <StyledEditableHtmlContainer
+          label="Feedback Text"
+          value={value}
+          onChange={onChange}
+          toolbarOpts={toolbarOpts}
+          mathMlOptions={mathMlOptions}
+        />
+      </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 = {
+    noLabels: PropTypes.bool,
+    useLetterOrdering: PropTypes.bool,
+    className: PropTypes.string,
+    error: PropTypes.string,
+    mode: PropTypes.oneOf(['checkbox', 'radio']),
+    defaultFeedback: PropTypes.object.isRequired,
+    disabled: PropTypes.bool,
+    nonEmpty: PropTypes.bool,
+    data: PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      correct: PropTypes.bool,
+      feedback: PropTypes.shape({
+        type: 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,
+    }),
+    disableImageAlignmentButtons: PropTypes.bool,
+    allowFeedBack: PropTypes.bool,
+    allowDelete: PropTypes.bool,
+    noCorrectAnswerError: PropTypes.string,
+    spellCheck: PropTypes.bool,
+    pluginOpts: PropTypes.object,
+    toolbarOpts: PropTypes.object,
+    uploadSoundSupport: PropTypes.object,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
+  };
+
+  static defaultProps = {
+    index: -1,
+    noLabels: false,
+    useLetterOrdering: false,
+    allowFeedBack: true,
+    allowDelete: true,
+  };
+
+  _changeFn = (key) => (update) => {
+    const { data, onChange } = this.props;
+
+    if (onChange) {
+      onChange({ ...data, [key]: update });
+    }
+  };
+
+  onLabelChange = this._changeFn('label');
+
+  onCheckedChange = (event) => {
+    const correct = event.target.checked;
+    const { data, onChange } = this.props;
+
+    if (onChange) {
+      onChange({ ...data, correct });
+    }
+  };
+
+  onFeedbackValueChange = (v) => {
+    const { data, onChange } = this.props;
+
+    if (data.feedback.type !== 'custom') {
+      return;
+    }
+
+    const fb = { ...data.feedback, value: v };
+
+    if (onChange) onChange({ ...data, feedback: fb });
+  };
+
+  onFeedbackTypeChange = (t) => {
+    const { data, onChange } = this.props;
+    const fb = { ...data.feedback, type: t };
+
+    if (fb.type !== 'custom') {
+      fb.value = undefined;
+    }
+
+    if (onChange) onChange({ ...data, feedback: fb });
+  };
+
+  render() {
+    const {
+      data,
+      mode,
+      onDelete,
+      defaultFeedback,
+      index,
+      className,
+      noLabels,
+      useLetterOrdering,
+      imageSupport,
+      disableImageAlignmentButtons,
+      disabled,
+      spellCheck,
+      nonEmpty,
+      allowFeedBack,
+      allowDelete,
+      pluginOpts,
+      toolbarOpts,
+      error,
+      noCorrectAnswerError,
+      uploadSoundSupport,
+      maxImageWidth,
+      maxImageHeight,
+      mathMlOptions = {},
+    } = this.props;
+
+    const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
+
+    return (
+      <StyledTopRow>
+        {index > 0 && (
+          <StyledIndex type="title">
+            {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
+          </StyledIndex>
+        )}
+
+        <StyledToggle>
+          <InputToggle
+            onChange={this.onCheckedChange}
+            label={!noLabels ? 'Correct' : ''}
+            checked={!!data.correct}
+            error={noCorrectAnswerError}
+          />
+        </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
+              {...data.feedback}
+              correct={data.correct}
+              defaults={defaultFeedback}
+              onChange={this.onFeedbackValueChange}
+              toolbarOpts={toolbarOpts}
+            />
+          )}
+        </StyledMiddleColumn>
+
+        {allowFeedBack && (
+          <StyledFeedback>
+            <InputContainer label={!noLabels ? 'Feedback' : ''}>
+              <StyledFeedbackIcon>
+                <FeedbackMenu onChange={this.onFeedbackTypeChange} value={data.feedback} />
+              </StyledFeedbackIcon>
+            </InputContainer>
+          </StyledFeedback>
+        )}
+
+        {allowDelete && (
+          <StyledDelete>
+            <InputContainer label={!noLabels ? 'Delete' : ''}>
+              <StyledDeleteIcon>
+                <IconButton aria-label="delete" onClick={onDelete} size="large">
+                  <ActionDelete />
+                </IconButton>
+              </StyledDeleteIcon>
+            </InputContainer>
+          </StyledDelete>
+        )}
+      </StyledTopRow>
+    );
+  }
+}
+
+export default ChoiceConfiguration;

package/src/choice-utils.js

@@ -0,0 +1,30 @@
+import { includes } from 'lodash-es';
+
+/**
+ * Add value to every model.choices.
+ * @param {Object} model the model to normalize
+ * @return {Object} the updated model
+ */
+export const normalizeChoices = (model) => {
+  const choices = model.choices.map((c, index) => {
+    if (!c.value) {
+      c.value = `${index}`;
+    }
+    return c;
+  });
+  return { ...model, choices };
+};
+
+/**
+ * Find the first available index.
+ * @param {string[]} values
+ * @param {number} index
+ * @return {string}
+ */
+export const firstAvailableIndex = (values, index) => {
+  if (includes(values, `${index}`)) {
+    return firstAvailableIndex(values, index + 1);
+  } else {
+    return `${index}`;
+  }
+};