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

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

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

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

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

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

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

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

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

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