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

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

@@ -0,0 +1,107 @@
+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', () => {
+  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,116 +1,121 @@
-import EditableHTML from '@pie-lib/editable-html';
+//import EditableHTML from '@pie-lib/editable-html';
 import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 import Group from './group';
 
+
+// - mathquill error window not defined
+let EditableHtml;
+let StyledEditableHTML;
+if (typeof window !== 'undefined') {
+  EditableHtml = require('@pie-lib/editable-html')['default'];
+  StyledEditableHTML = styled(EditableHtml)(({ theme }) => ({
+    fontFamily: theme.typography.fontFamily,
+  }));
+}
+
 const feedbackLabels = {
   default: 'Simple Feedback',
   none: 'No Feedback',
-  custom: 'Customized Feedback'
+  custom: 'Customized Feedback',
 };
 
-const holder = (theme, extras) => ({
+const StyledFeedbackSelector = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(1),
+}));
+
+const StyledInputContainer = styled(InputContainer)(() => ({
+  paddingBottom: 0,
+}));
+
+const StyledCustomHolder = styled('div')(({ theme }) => ({
   marginTop: '0px',
-  background: '#e0dee0',
-  padding: theme.spacing.unit * 0.9,
-  marginBottom: theme.spacing.unit * 2,
-  ...extras
-});
-
-const style = theme => ({
-  feedbackSelector: {
-    marginBottom: theme.spacing.unit
-  },
-  label: {
-    cursor: 'pointer'
-  },
-  inputContainerLabel: {
-    transform: 'translateY(-20%)'
-  },
-  feedbackInputContainer: {
-    paddingBottom: 0
-  },
-  customHolder: holder(theme, {
-    background: '#e0dee0',
-    padding: 0
-  }),
-  defaultHolder: holder(theme, {
-    fontFamily: theme.typography.fontFamily,
-    cursor: 'default'
-  }),
-  editor: {
-    fontFamily: theme.typography.fontFamily
-  },
-  group: {
-    paddingTop: theme.spacing.unit
-  }
-});
+  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
+  custom: PropTypes.string,
 };
 
 export class FeedbackSelector extends React.Component {
   static propTypes = {
     keys: PropTypes.arrayOf(PropTypes.string),
-    classes: PropTypes.object.isRequired,
     label: PropTypes.string.isRequired,
     feedback: PropTypes.shape(FeedbackType).isRequired,
     onChange: PropTypes.func.isRequired,
-    toolbarOpts: PropTypes.object
+    toolbarOpts: PropTypes.object,
+    mathMlOptions: PropTypes.object,
   };
 
-  changeType = type => {
+  changeType = (type) => {
     const { onChange, feedback } = this.props;
+
     onChange({ ...feedback, type });
   };
 
-  changeCustom = custom => {
+  changeCustom = (custom) => {
     const { onChange, feedback } = this.props;
+
     onChange({ ...feedback, type: 'custom', custom });
   };
 
   render() {
-    const { keys, classes, label, feedback, toolbarOpts } = this.props;
+    const { keys, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
 
     const feedbackKeys = keys || Object.keys(feedbackLabels);
 
     return (
-      <div className={classes.feedbackSelector}>
-        <InputContainer
+      <StyledFeedbackSelector>
+        <StyledInputContainer
           label={label}
-          className={classes.feedbackInputContainer}
-          extraClasses={{ label: classes.inputContainerLabel }}
+          extraClasses={{ label: { transform: 'translateY(-20%)' } }}
         >
-          <Group
-            className={classes.group}
+          <StyledGroup
             keys={feedbackKeys}
             label={label}
             value={feedback.type}
             onChange={this.changeType}
             feedbackLabels={feedbackLabels}
           />
-        </InputContainer>
+        </StyledInputContainer>
+
         {feedback.type === 'custom' && (
-          <div className={classes.customHolder}>
-            <EditableHTML
-              className={classes.editor}
+          <StyledCustomHolder>
+            <StyledEditableHTML
               onChange={this.changeCustom}
               markup={feedback.custom || ''}
               toolbarOpts={toolbarOpts}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
             />
-          </div>
+          </StyledCustomHolder>
         )}
-        {feedback.type === 'default' && (
-          <div className={classes.defaultHolder}> {feedback.default}</div>
-        )}
-      </div>
+
+        {feedback.type === 'default' && <StyledDefaultHolder> {feedback.default}</StyledDefaultHolder>}
+      </StyledFeedbackSelector>
     );
   }
 }
 
-export default withStyles(style)(FeedbackSelector);
+export default FeedbackSelector;

package/src/feedback-config/group.jsx

@@ -1,44 +1,42 @@
 import PropTypes from 'prop-types';
 import RadioWithLabel from '../radio-with-label';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import { styled } from '@mui/material/styles';
 
-const styles = () => ({
-  radioLabel: {
-    fontSize: '12px'
-  },
-  choice: {
-    display: 'flex',
-    alignItems: 'center'
+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,
   },
-  choiceHolder: {
-    display: 'flex',
-    alignItems: 'center'
-  }
-});
+}));
 
-const Group = props => {
-  const { feedbackLabels, value, classes, className, onChange, keys } = props;
+const Group = (props) => {
+  const { feedbackLabels, value, className, onChange, keys } = props;
 
   return (
-    <div className={classNames(classes.choiceHolder, className)}>
-      {keys.map(key => {
+    <StyledChoiceHolder className={className}>
+      {keys.map((key) => {
         return (
-          <div className={classes.choice} key={key}>
-            <RadioWithLabel
+          <StyledChoice key={key}>
+            <StyledRadioWithLabel
               value={key}
               checked={value === key}
-              classes={{
-                label: classes.radioLabel
-              }}
-              onChange={e => onChange(e.currentTarget.value)}
+              onChange={(e) => onChange(e.currentTarget.value)}
               label={feedbackLabels[key]}
             />
-          </div>
+          </StyledChoice>
         );
       })}
-    </div>
+    </StyledChoiceHolder>
   );
 };
 
@@ -46,9 +44,8 @@ Group.propTypes = {
   className: PropTypes.string,
   feedbackLabels: PropTypes.object.isRequired,
   value: PropTypes.string.isRequired,
-  classes: PropTypes.object.isRequired,
   keys: PropTypes.arrayOf(PropTypes.string),
-  onChange: PropTypes.func
+  onChange: PropTypes.func,
 };
 
-export default withStyles(styles)(Group);
+export default Group;

package/src/feedback-config/index.jsx

@@ -1,98 +1,110 @@
 import FeedbackSelector, { FeedbackType } from './feedback-selector';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import Typography from '@material-ui/core/Typography';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+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';
 import merge from 'lodash/merge';
 
 export { FeedbackSelector };
 
-const style = {
-  feedbackContainer: {
-    display: 'flex',
-    flexDirection: 'column'
-  }
-};
+const StyledFeedbackContainer = styled('div')(() => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+}));
+
+const StyledAccordionDetails = styled(AccordionDetails)(() => ({
+  paddingTop: 0,
+  paddingBottom: 0,
+}));
 
-export const buildDefaults = input => {
+export const buildDefaults = (input) => {
   return merge(
     {},
     {
       correct: { type: 'default', default: 'Correct' },
       incorrect: { type: 'default', default: 'Incorrect' },
-      partial: { type: 'default', default: 'Nearly' }
+      partial: { type: 'default', default: 'Nearly' },
     },
-    input
+    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)
+      partial: PropTypes.shape(FeedbackType),
     }),
     onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
-    toolbarOpts: PropTypes.object
+    toolbarOpts: PropTypes.object,
   };
 
   static defaultProps = {
     allowPartial: true,
-    feedback: buildDefaults()
+    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 { classes, allowPartial, feedback, toolbarOpts } = this.props;
+    const { className, allowPartial, feedback, toolbarOpts } = this.props;
 
     return (
-      <ExpansionPanel>
-        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-          <Typography className={classes.heading}>Feedback</Typography>
-        </ExpansionPanelSummary>
-        <ExpansionPanelDetails>
-          <div className={classes.feedbackContainer}>
-            <FeedbackSelector
-              label="If correct, show"
-              feedback={feedback.correct}
-              onChange={this.onCorrectChange}
-              toolbarOpts={toolbarOpts}
-            />
-            {allowPartial && (
+      <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 partially correct, show"
-                feedback={feedback.partial}
-                onChange={this.onPartialChange}
+                label="If incorrect, show"
+                feedback={feedback.incorrect}
+                onChange={this.onIncorrectChange}
                 toolbarOpts={toolbarOpts}
               />
-            )}
-            <FeedbackSelector
-              label="If incorrect, show"
-              feedback={feedback.incorrect}
-              onChange={this.onIncorrectChange}
-              toolbarOpts={toolbarOpts}
-            />
-          </div>
-        </ExpansionPanelDetails>
-      </ExpansionPanel>
+            </StyledFeedbackContainer>
+          </StyledAccordionDetails>
+        </Accordion>
+      </div>
     );
   }
 }
 
-export default withStyles(style)(FeedbackConfig);
+export default FeedbackConfig;

package/src/form-section.jsx

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