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

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

@@ -1,54 +1,55 @@
-import EditableHTML from '@pie-lib/editable-html';
+//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 { 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-tip-tap')['default'];
+  StyledEditableHTML = styled(EditableHtml)(({ theme }) => ({
+    fontFamily: theme.typography.fontFamily,
+  }));
+}
+
 const feedbackLabels = {
   default: 'Simple Feedback',
   none: 'No 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: theme.palette.grey[300],
-  padding: theme.spacing.unit,
-  marginBottom: theme.spacing.unit * 2,
+  padding: 0,
+  marginBottom: theme.spacing(2),
   borderRadius: '4px',
-  ...extras,
-});
-
-const style = (theme) => ({
-  feedbackSelector: {
-    marginBottom: theme.spacing.unit,
-  },
-  label: {
-    cursor: 'pointer',
-  },
-  inputContainerLabel: {
-    transform: 'translateY(-20%)',
-  },
-  feedbackInputContainer: {
-    paddingBottom: 0,
-  },
-  customHolder: holder(theme, {
-    background: theme.palette.grey[300],
-    padding: 0,
-  }),
-  defaultHolder: holder(theme, {
-    fontFamily: theme.typography.fontFamily,
-    padding: theme.spacing.unit * 2,
-    cursor: 'default',
-  }),
-  editor: {
-    fontFamily: theme.typography.fontFamily,
-  },
-  group: {
-    paddingTop: theme.spacing.unit,
-  },
-});
+}));
+
+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']),
@@ -59,11 +60,11 @@ export const FeedbackType = {
 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,
+    mathMlOptions: PropTypes.object,
   };
 
   changeType = (type) => {
@@ -79,44 +80,38 @@ export class FeedbackSelector extends React.Component {
   };
 
   render() {
-    const { keys, classes, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
+    const { keys, label, feedback, toolbarOpts, mathMlOptions = {} } = this.props;
 
     const feedbackKeys = keys || Object.keys(feedbackLabels);
 
     return (
-      <div className={classes.feedbackSelector}>
-        <InputContainer
-          label={label}
-          className={classes.feedbackInputContainer}
-          extraClasses={{ label: classes.inputContainerLabel }}
-        >
-          <Group
-            className={classes.group}
+      <StyledFeedbackSelector>
+        <StyledInputContainer label={label} extraClasses={{ label: { transform: 'translateY(-20%)' } }}>
+          <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,42 +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 = (theme) => ({
-  radioLabel: {
+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,
   },
-  choice: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-  choiceHolder: {
-    display: 'flex',
-    alignItems: 'center',
-  },
-});
+}));
 
 const Group = (props) => {
-  const { feedbackLabels, value, classes, className, onChange, keys } = props;
+  const { feedbackLabels, value, className, onChange, keys } = props;
 
   return (
-    <div className={classNames(classes.choiceHolder, className)}>
+    <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)}
               label={feedbackLabels[key]}
             />
-          </div>
+          </StyledChoice>
         );
       })}
-    </div>
+    </StyledChoiceHolder>
   );
 };
 
@@ -44,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,
 };
 
-export default withStyles(styles)(Group);
+export default Group;

package/src/feedback-config/index.jsx

@@ -1,27 +1,26 @@
 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',
-    flex: 1,
-    flexDirection: 'column',
-  },
-  panelDetails: {
-    paddingTop: 0,
-    paddingBottom: 0,
-  },
-};
+const StyledFeedbackContainer = styled('div')(() => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+}));
+
+const StyledAccordionDetails = styled(AccordionDetails)(() => ({
+  paddingTop: 0,
+  paddingBottom: 0,
+}));
 
 export const buildDefaults = (input) => {
   return merge(
@@ -45,7 +44,6 @@ export class FeedbackConfig extends React.Component {
       partial: PropTypes.shape(FeedbackType),
     }),
     onChange: PropTypes.func.isRequired,
-    classes: PropTypes.object.isRequired,
     toolbarOpts: PropTypes.object,
   };
 
@@ -68,17 +66,17 @@ export class FeedbackConfig extends React.Component {
   onPartialChange = this.onChange.bind(this, 'partial');
 
   render() {
-    const { classes, className, allowPartial, feedback, toolbarOpts } = this.props;
+    const { className, allowPartial, feedback, toolbarOpts } = this.props;
 
     return (
       <div className={className}>
-        <ExpansionPanel>
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography className={classes.heading}>Feedback</Typography>
-          </ExpansionPanelSummary>
+        <Accordion slotProps={{ transition: { timeout: { enter: 225, exit: 195 } } }}>
+          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+            <Typography>Feedback</Typography>
+          </AccordionSummary>
 
-          <ExpansionPanelDetails className={classes.panelDetails}>
-            <div className={classes.feedbackContainer}>
+          <StyledAccordionDetails>
+            <StyledFeedbackContainer>
               <FeedbackSelector
                 label="If correct, show"
                 feedback={feedback.correct}
@@ -101,12 +99,12 @@ export class FeedbackConfig extends React.Component {
                 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;

package/src/help.jsx

@@ -1,42 +1,34 @@
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
+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 '@material-ui/core/Button';
-import HelpIcon from '@material-ui/icons/Help';
-import IconButton from '@material-ui/core/IconButton';
+import Button from '@mui/material/Button';
+import HelpIcon from '@mui/icons-material/Help';
+import IconButton from '@mui/material/IconButton';
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { styled } from '@mui/material/styles';
 
-const RawHelpButton = ({ onClick, classes }) => (
-  <IconButton
-    classes={{
-      label: classes.icon,
-    }}
-    onClick={onClick}
-  >
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  '&:hover': {
+    color: theme.palette.grey[300],
+  },
+}));
+
+export const HelpButton = ({ onClick }) => (
+  <StyledIconButton onClick={onClick} size="large">
     <HelpIcon />
-  </IconButton>
+  </StyledIconButton>
 );
 
-RawHelpButton.propTypes = {
+HelpButton.propTypes = {
   onClick: PropTypes.func,
-  classes: PropTypes.object.isRequired,
 };
 
-export const HelpButton = withStyles((theme) => ({
-  icon: {
-    '&:hover': {
-      color: theme.palette.grey[300],
-    },
-  },
-}))(RawHelpButton);
-
 export const HelpDialog = ({ open, onClose, children, title }) => (
-  <Dialog open={open} onRequestClose={onClose}>
+  <Dialog open={open} onClose={onClose}>
     <DialogTitle>{title}</DialogTitle>
     <DialogContent>
       <DialogContentText>{children}</DialogContentText>

package/src/input.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { default as MaterialInput } from '@material-ui/core/Input';
+import { default as MaterialInput } from '@mui/material/Input';
 import { InputContainer } from '@pie-lib/render-ui';
 
 export default class Input extends React.Component {

package/src/inputs.jsx

@@ -1,14 +1,13 @@
-import Checkbox from '@material-ui/core/Checkbox';
-import Radio from '@material-ui/core/Radio';
+import Checkbox from '@mui/material/Checkbox';
+import Radio from '@mui/material/Radio';
 import { InputContainer } from '@pie-lib/render-ui';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Switch from '@material-ui/core/Switch';
-import { withStyles } from '@material-ui/core/styles';
-import classNames from 'classnames';
+import Switch from '@mui/material/Switch';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
 
 const InputTypes = {
-  classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   label: PropTypes.string,
   checked: PropTypes.bool,
@@ -17,75 +16,67 @@ const InputTypes = {
   error: PropTypes.string,
 };
 
-const RawInputSwitch = ({ classes, className, label, checked, onChange }) => {
+const StyledSwitch = styled(Switch)(() => ({
+  justifyContent: 'inherit',
+  transform: 'translate(-20%, 20%)',
+}));
+
+const InputSwitch = ({ className, label, checked, onChange }) => {
   return (
     <InputContainer className={className} label={label}>
-      <Switch className={classes.switchRoot} checked={checked} onChange={onChange} aria-label={label} />
+      <StyledSwitch checked={checked} onChange={onChange} aria-label={label} />
     </InputContainer>
   );
 };
 
-RawInputSwitch.propTypes = { ...InputTypes };
-
-const InputSwitch = withStyles({
-  switchRoot: {
-    justifyContent: 'inherit',
-    transform: 'translate(-20%, 20%)',
-  },
-})(RawInputSwitch);
+InputSwitch.propTypes = { ...InputTypes };
 
-const RawInputCheckbox = (props) => {
-  const { classes, className, label, checked, onChange, disabled, error } = props;
+const StyledCheckbox = styled(Checkbox)(({ theme, error }) => ({
+  transform: 'translate(-25%, 20%)',
+  color: `${color.tertiary()} !important`,
+  ...(error && {
+    color: `${theme.palette.error.main} !important`,
+  }),
+}));
 
+const InputCheckbox = ({ className, label, checked, onChange, disabled, error }) => {
   return (
     <InputContainer className={className} label={label}>
-      <Checkbox
-        className={classNames(classes.checkboxRoot, error && classes.error)}
+      <StyledCheckbox
         disabled={disabled}
         checked={checked}
         onChange={onChange}
         aria-label={label}
+        error={error}
       />
     </InputContainer>
   );
 };
 
-RawInputCheckbox.propTypes = { ...InputTypes };
+InputCheckbox.propTypes = { ...InputTypes };
 
-const RawInputRadio = (props) => {
-  const { classes, className, label, checked, onChange, disabled, error } = props;
+const StyledRadio = styled(Radio)(({ theme, error }) => ({
+  transform: 'translate(-20%, 20%)',
+  color: `${color.tertiary()} !important`,
+  ...(error && {
+    color: `${theme.palette.error.main} !important`,
+  }),
+}));
 
+const InputRadio = ({ className, label, checked, onChange, disabled, error }) => {
   return (
     <InputContainer className={className} label={label}>
-      <Radio
-        className={classNames(classes.radioRoot, error && classes.error)}
+      <StyledRadio
         disabled={disabled}
         checked={checked}
         onChange={onChange}
         aria-label={label}
+        error={error}
       />
     </InputContainer>
   );
 };
 
-RawInputRadio.propTypes = { ...InputTypes };
-
-const InputCheckbox = withStyles((theme) => ({
-  checkboxRoot: {
-    transform: 'translate(-25%, 20%)',
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-}))(RawInputCheckbox);
-
-const InputRadio = withStyles((theme) => ({
-  radioRoot: {
-    transform: 'translate(-20%, 20%)',
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-}))(RawInputRadio);
+InputRadio.propTypes = { ...InputTypes };
 
 export { InputSwitch, InputCheckbox, InputRadio };