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

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

@@ -1,141 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { buildDefaults, FeedbackConfig } 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' },
-      });
-    });
-  });
-});

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

@@ -1,97 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { FeedbackSelector } from '../feedback-selector';
-
-// Mock the editable-html component to avoid window dependencies in tests
-jest.mock('@pie-lib/editable-html-tip-tap', () => {
-  return {
-    __esModule: true,
-    default: ({ markup, onChange }) => (
-      <textarea data-testid="editable-html" defaultValue={markup || ''} onChange={(e) => onChange(e.target.value)} />
-    ),
-  };
-});
-
-describe('feedback-selector', () => {
-  let onChange;
-
-  const renderComponent = (feedback = { type: 'default', default: 'hi' }) => {
-    return render(<FeedbackSelector label={'Feedback'} onChange={onChange} feedback={feedback} />);
-  };
-
-  beforeEach(() => {
-    onChange = jest.fn();
-  });
-
-  describe('rendering', () => {
-    it('renders feedback type selector', () => {
-      renderComponent();
-      expect(screen.getByText('Simple Feedback')).toBeInTheDocument();
-      expect(screen.getByText('No Feedback')).toBeInTheDocument();
-      expect(screen.getByText('Customized Feedback')).toBeInTheDocument();
-    });
-
-    it('shows default feedback text when type is default', () => {
-      renderComponent({ type: 'default', default: 'hi' });
-      expect(screen.getByText('hi')).toBeInTheDocument();
-    });
-
-    it('shows editable html when type is custom', () => {
-      renderComponent({ type: 'custom', default: 'hi', custom: 'custom text' });
-      expect(screen.getByTestId('editable-html')).toBeInTheDocument();
-      expect(screen.getByTestId('editable-html')).toHaveValue('custom text');
-    });
-
-    it('does not show default feedback when type is none', () => {
-      renderComponent({ type: 'none', default: 'hi' });
-      expect(screen.queryByText('hi')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when switching to default feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'custom', default: 'hi' });
-
-      await user.click(screen.getByLabelText('Simple Feedback'));
-
-      expect(onChange).toHaveBeenCalledWith({ type: 'default', default: 'hi' });
-    });
-
-    it('calls onChange when switching to custom feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'default', default: 'hi' });
-
-      await user.click(screen.getByLabelText('Customized Feedback'));
-
-      expect(onChange).toHaveBeenCalledWith({ type: 'custom', default: 'hi' });
-    });
-
-    it('calls onChange when switching to no feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'default', default: 'hi' });
-
-      await user.click(screen.getByLabelText('No Feedback'));
-
-      expect(onChange).toHaveBeenCalledWith({ type: 'none', default: 'hi' });
-    });
-
-    it('calls onChange with custom text when editing custom feedback', async () => {
-      const user = userEvent.setup();
-      renderComponent({ type: 'custom', default: 'hi', custom: '' });
-
-      const editor = screen.getByTestId('editable-html');
-      await user.clear(editor);
-      await user.type(editor, 'text');
-
-      // user.type triggers onChange for each character, so check that onChange was called
-      // and that the last call has 'text' in custom field
-      expect(onChange).toHaveBeenCalled();
-      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
-      expect(lastCall.type).toBe('custom');
-      expect(lastCall.custom).toBe('text');
-      expect(lastCall.default).toBe('hi');
-    });
-  });
-});

package/src/feedback-config/feedback-selector.jsx

@@ -1,112 +0,0 @@
-import EditableHtml from '@pie-lib/editable-html-tip-tap';
-import { InputContainer } from '@pie-lib/render-ui';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Group from './group';
-
-// - mathquill error window not defined
-const StyledEditableHTML = styled(EditableHtml)(({ theme }) => ({
-  fontFamily: theme.typography.fontFamily,
-}));
-
-const feedbackLabels = {
-  default: 'Simple Feedback',
-  none: 'No Feedback',
-  custom: 'Customized Feedback',
-};
-
-const StyledFeedbackSelector = styled('div')(({ theme }) => ({
-  marginBottom: theme.spacing(1),
-}));
-
-const StyledInputContainer = styled(InputContainer)(() => ({
-  paddingBottom: 0,
-}));
-
-const StyledCustomHolder = styled('div')(({ theme }) => ({
-  marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: 0,
-  marginBottom: theme.spacing(2),
-  borderRadius: '4px',
-}));
-
-const StyledDefaultHolder = styled('div')(({ theme }) => ({
-  marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: theme.spacing(2),
-  marginBottom: theme.spacing(2),
-  borderRadius: '4px',
-  fontFamily: theme.typography.fontFamily,
-  cursor: 'default',
-}));
-
-const StyledGroup = styled(Group)(({ theme }) => ({
-  paddingTop: theme.spacing(1),
-}));
-
-export const FeedbackType = {
-  type: PropTypes.oneOf(['default', 'custom', 'none']),
-  default: PropTypes.string,
-  custom: PropTypes.string,
-};
-
-export class FeedbackSelector extends React.Component {
-  static propTypes = {
-    keys: PropTypes.arrayOf(PropTypes.string),
-    label: PropTypes.string.isRequired,
-    feedback: PropTypes.shape(FeedbackType).isRequired,
-    onChange: PropTypes.func.isRequired,
-    toolbarOpts: PropTypes.object,
-    mathMlOptions: PropTypes.object,
-  };
-
-  changeType = (type) => {
-    const { onChange, feedback } = this.props;
-
-    onChange({ ...feedback, type });
-  };
-
-  changeCustom = (custom) => {
-    const { onChange, feedback } = this.props;
-
-    onChange({ ...feedback, type: 'custom', custom });
-  };
-
-  render() {
-    const { keys, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
-
-    const feedbackKeys = keys || Object.keys(feedbackLabels);
-
-    return (
-      <StyledFeedbackSelector>
-        <StyledInputContainer label={label} extraClasses={{ label: { transform: 'translateY(-20%)' } }}>
-          <StyledGroup
-            keys={feedbackKeys}
-            label={label}
-            value={feedback.type}
-            onChange={this.changeType}
-            feedbackLabels={feedbackLabels}
-          />
-        </StyledInputContainer>
-
-        {feedback.type === 'custom' && (
-          <StyledCustomHolder>
-            <StyledEditableHTML
-              onChange={this.changeCustom}
-              markup={feedback.custom || ''}
-              toolbarOpts={toolbarOpts}
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-              mathMlOptions={mathMlOptions}
-            />
-          </StyledCustomHolder>
-        )}
-
-        {feedback.type === 'default' && <StyledDefaultHolder> {feedback.default}</StyledDefaultHolder>}
-      </StyledFeedbackSelector>
-    );
-  }
-}
-
-export default FeedbackSelector;

package/src/feedback-config/group.jsx

@@ -1,51 +0,0 @@
-import PropTypes from 'prop-types';
-import RadioWithLabel from '../radio-with-label';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-
-const StyledChoiceHolder = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledChoice = styled('div')(() => ({
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledRadioWithLabel = styled(RadioWithLabel)(({ theme }) => ({
-  '& .MuiFormControlLabel-label': {
-    fontSize: theme.typography.fontSize - 2,
-  },
-}));
-
-const Group = (props) => {
-  const { feedbackLabels, value, className, onChange, keys } = props;
-
-  return (
-    <StyledChoiceHolder className={className}>
-      {keys.map((key) => {
-        return (
-          <StyledChoice key={key}>
-            <StyledRadioWithLabel
-              value={key}
-              checked={value === key}
-              onChange={(e) => onChange(e.currentTarget.value)}
-              label={feedbackLabels[key]}
-            />
-          </StyledChoice>
-        );
-      })}
-    </StyledChoiceHolder>
-  );
-};
-
-Group.propTypes = {
-  className: PropTypes.string,
-  feedbackLabels: PropTypes.object.isRequired,
-  value: PropTypes.string.isRequired,
-  keys: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func,
-};
-
-export default Group;

package/src/feedback-config/index.jsx

@@ -1,111 +0,0 @@
-import FeedbackSelector, { FeedbackType } from './feedback-selector';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { merge } from 'lodash-es';
-
-import { styled } from '@mui/material/styles';
-import Accordion from '@mui/material/Accordion';
-import AccordionSummary from '@mui/material/AccordionSummary';
-import AccordionDetails from '@mui/material/AccordionDetails';
-import Typography from '@mui/material/Typography';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-
-export { FeedbackSelector };
-
-const StyledFeedbackContainer = styled('div')(() => ({
-  display: 'flex',
-  flex: 1,
-  flexDirection: 'column',
-}));
-
-const StyledAccordionDetails = styled(AccordionDetails)(() => ({
-  paddingTop: 0,
-  paddingBottom: 0,
-}));
-
-export const buildDefaults = (input) => {
-  return merge(
-    {},
-    {
-      correct: { type: 'default', default: 'Correct' },
-      incorrect: { type: 'default', default: 'Incorrect' },
-      partial: { type: 'default', default: 'Nearly' },
-    },
-    input,
-  );
-};
-
-export class FeedbackConfig extends React.Component {
-  static propTypes = {
-    allowPartial: PropTypes.bool,
-    className: PropTypes.string,
-    feedback: PropTypes.shape({
-      correct: PropTypes.shape(FeedbackType),
-      incorrect: PropTypes.shape(FeedbackType),
-      partial: PropTypes.shape(FeedbackType),
-    }),
-    onChange: PropTypes.func.isRequired,
-    toolbarOpts: PropTypes.object,
-  };
-
-  static defaultProps = {
-    allowPartial: true,
-    feedback: buildDefaults(),
-  };
-
-  onChange(key, config) {
-    const { feedback, onChange } = this.props;
-    const update = { ...feedback, [key]: config };
-
-    onChange(update);
-  }
-
-  onCorrectChange = this.onChange.bind(this, 'correct');
-
-  onIncorrectChange = this.onChange.bind(this, 'incorrect');
-
-  onPartialChange = this.onChange.bind(this, 'partial');
-
-  render() {
-    const { className, allowPartial, feedback, toolbarOpts } = this.props;
-
-    return (
-      <div className={className}>
-        <Accordion slotProps={{ transition: { timeout: { enter: 225, exit: 195 } } }}>
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography>Feedback</Typography>
-          </AccordionSummary>
-
-          <StyledAccordionDetails>
-            <StyledFeedbackContainer>
-              <FeedbackSelector
-                label="If correct, show"
-                feedback={feedback.correct}
-                onChange={this.onCorrectChange}
-                toolbarOpts={toolbarOpts}
-              />
-
-              {allowPartial && (
-                <FeedbackSelector
-                  label="If partially correct, show"
-                  feedback={feedback.partial}
-                  onChange={this.onPartialChange}
-                  toolbarOpts={toolbarOpts}
-                />
-              )}
-
-              <FeedbackSelector
-                label="If incorrect, show"
-                feedback={feedback.incorrect}
-                onChange={this.onIncorrectChange}
-                toolbarOpts={toolbarOpts}
-              />
-            </StyledFeedbackContainer>
-          </StyledAccordionDetails>
-        </Accordion>
-      </div>
-    );
-  }
-}
-
-export default FeedbackConfig;

package/src/form-section.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Typography from '@mui/material/Typography';
-import { styled } from '@mui/material/styles';
-
-const StyledFormSection = styled('div')(({ theme }) => ({
-  marginTop: theme.spacing(2),
-  marginBottom: theme.spacing(2),
-}));
-
-const StyledTypography = styled(Typography)(({ theme }) => ({
-  marginBottom: theme.spacing(1),
-}));
-
-const FormSection = ({ className, label, children, labelExtraStyle }) => (
-  <StyledFormSection className={className}>
-    <StyledTypography variant="subtitle1" style={labelExtraStyle}>
-      {label}
-    </StyledTypography>
-    {children}
-  </StyledFormSection>
-);
-
-FormSection.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  children: PropTypes.node,
-  labelExtraStyle: PropTypes.object,
-};
-
-export default FormSection;

package/src/help.jsx

@@ -1,79 +0,0 @@
-import Dialog from '@mui/material/Dialog';
-import DialogTitle from '@mui/material/DialogTitle';
-import DialogContentText from '@mui/material/DialogContentText';
-import DialogContent from '@mui/material/DialogContent';
-import DialogActions from '@mui/material/DialogActions';
-import PropTypes from 'prop-types';
-
-import Button from '@mui/material/Button';
-import HelpIcon from '@mui/icons-material/Help';
-import IconButton from '@mui/material/IconButton';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-
-const StyledIconButton = styled(IconButton)(({ theme }) => ({
-  '&:hover': {
-    color: theme.palette.grey[300],
-  },
-}));
-
-export const HelpButton = ({ onClick }) => (
-  <StyledIconButton onClick={onClick} size="large">
-    <HelpIcon />
-  </StyledIconButton>
-);
-
-HelpButton.propTypes = {
-  onClick: PropTypes.func,
-};
-
-export const HelpDialog = ({ open, onClose, children, title }) => (
-  <Dialog open={open} onClose={onClose}>
-    <DialogTitle>{title}</DialogTitle>
-    <DialogContent>
-      <DialogContentText>{children}</DialogContentText>
-    </DialogContent>
-    <DialogActions>
-      <Button onClick={onClose} color="primary">
-        OK
-      </Button>
-    </DialogActions>
-  </Dialog>
-);
-
-HelpDialog.propTypes = {
-  open: PropTypes.bool,
-  onClose: PropTypes.func,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  title: PropTypes.string.isRequired,
-};
-
-class Help extends React.Component {
-  static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    title: PropTypes.string,
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      open: false,
-    };
-  }
-
-  render() {
-    const { children, title } = this.props;
-
-    return (
-      <div>
-        <HelpButton color="accent" onClick={() => this.setState({ open: true })} />
-
-        <HelpDialog open={this.state.open} title={title} onClose={() => this.setState({ open: false })}>
-          {children}
-        </HelpDialog>
-      </div>
-    );
-  }
-}
-
-export default Help;

package/src/index.js

@@ -1,55 +0,0 @@
-import AlertDialog from './alert-dialog';
-import FeedbackConfig, { buildDefaults as feedbackConfigDefaults, FeedbackSelector } from './feedback-config';
-import { InputCheckbox, InputRadio, InputSwitch } from './inputs';
-import Langs, { LanguageControls } from './langs';
-import Tabs from './tabs';
-import Checkbox from './checkbox';
-import FormSection from './form-section';
-import Help from './help';
-import Input from './input';
-import { InputContainer } from '@pie-lib/render-ui';
-import NumberTextField from './number-text-field';
-import NumberTextFieldCustom from './number-text-field-custom';
-import TwoChoice, { NChoice } from './two-choice';
-import TagsInput from './tags-input';
-import MuiBox from './mui-box';
-import ChoiceConfiguration from './choice-configuration';
-import * as layout from './layout';
-
-import * as choiceUtils from './choice-utils';
-import withStatefulModel from './with-stateful-model';
-import Toggle from './settings/toggle';
-import DisplaySize from './settings/display-size';
-
-import * as settings from './settings';
-
-export {
-  AlertDialog,
-  FeedbackConfig,
-  FeedbackSelector,
-  feedbackConfigDefaults,
-  InputCheckbox,
-  InputSwitch,
-  InputRadio,
-  Langs,
-  LanguageControls,
-  Tabs,
-  Checkbox,
-  FormSection,
-  Help,
-  Input,
-  InputContainer,
-  NumberTextField,
-  NumberTextFieldCustom,
-  TwoChoice,
-  NChoice,
-  TagsInput,
-  MuiBox,
-  ChoiceConfiguration,
-  layout,
-  choiceUtils,
-  withStatefulModel,
-  Toggle,
-  DisplaySize,
-  settings,
-};