@pie-lib/config-ui 13.1.0-beta.7 → 14.0.0-next.35

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

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

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

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

@@ -1,30 +0,0 @@
-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}`;
-  }
-};