@pie-element/hotspot 11.0.5-esm.0 → 11.1.0-next.0

package/configure/node_modules/@pie-lib/config-ui/src/feedback-config/feedback-selector.jsx

@@ -1,122 +0,0 @@
-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 Group from './group';
-
-const feedbackLabels = {
-  default: 'Simple Feedback',
-  none: 'No Feedback',
-  custom: 'Customized Feedback',
-};
-
-const holder = (theme, extras) => ({
-  marginTop: '0px',
-  background: theme.palette.grey[300],
-  padding: theme.spacing.unit,
-  marginBottom: theme.spacing.unit * 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,
-  },
-});
-
-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),
-    classes: PropTypes.object.isRequired,
-    label: PropTypes.string.isRequired,
-    feedback: PropTypes.shape(FeedbackType).isRequired,
-    onChange: PropTypes.func.isRequired,
-    toolbarOpts: 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, classes, 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}
-            keys={feedbackKeys}
-            label={label}
-            value={feedback.type}
-            onChange={this.changeType}
-            feedbackLabels={feedbackLabels}
-          />
-        </InputContainer>
-
-        {feedback.type === 'custom' && (
-          <div className={classes.customHolder}>
-            <EditableHTML
-              className={classes.editor}
-              onChange={this.changeCustom}
-              markup={feedback.custom || ''}
-              toolbarOpts={toolbarOpts}
-              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-              mathMlOptions={mathMlOptions}
-            />
-          </div>
-        )}
-
-        {feedback.type === 'default' && <div className={classes.defaultHolder}> {feedback.default}</div>}
-      </div>
-    );
-  }
-}
-
-export default withStyles(style)(FeedbackSelector);

package/configure/node_modules/@pie-lib/config-ui/src/feedback-config/group.jsx

@@ -1,52 +0,0 @@
-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';
-
-const styles = (theme) => ({
-  radioLabel: {
-    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;
-
-  return (
-    <div className={classNames(classes.choiceHolder, className)}>
-      {keys.map((key) => {
-        return (
-          <div className={classes.choice} key={key}>
-            <RadioWithLabel
-              value={key}
-              checked={value === key}
-              classes={{ label: classes.radioLabel }}
-              onChange={(e) => onChange(e.currentTarget.value)}
-              label={feedbackLabels[key]}
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-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);

package/configure/node_modules/@pie-lib/config-ui/src/feedback-config/index.jsx

@@ -1,112 +0,0 @@
-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 merge from 'lodash/merge';
-
-export { FeedbackSelector };
-
-const style = {
-  feedbackContainer: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-  },
-  panelDetails: {
-    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,
-    classes: PropTypes.object.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 { classes, className, allowPartial, feedback, toolbarOpts } = this.props;
-
-    return (
-      <div className={className}>
-        <ExpansionPanel>
-          <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
-            <Typography className={classes.heading}>Feedback</Typography>
-          </ExpansionPanelSummary>
-
-          <ExpansionPanelDetails className={classes.panelDetails}>
-            <div className={classes.feedbackContainer}>
-              <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}
-              />
-            </div>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-      </div>
-    );
-  }
-}
-
-export default withStyles(style)(FeedbackConfig);

package/configure/node_modules/@pie-lib/config-ui/src/form-section.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import Typography from '@material-ui/core/Typography';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = (theme) => ({
-  formSection: {
-    marginTop: theme.spacing.unit * 2,
-    marginBottom: theme.spacing.unit * 2,
-  },
-  label: {
-    marginBottom: theme.spacing.unit,
-  },
-});
-
-export default withStyles(styles)(({ className, classes, label, children, labelExtraStyle }) => (
-  <div className={classNames(classes.formSection, className)}>
-    <Typography className={classes.label} type="subheading" style={labelExtraStyle}>
-      {label}
-    </Typography>
-    {children}
-  </div>
-));

package/configure/node_modules/@pie-lib/config-ui/src/help.jsx

@@ -1,87 +0,0 @@
-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 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 React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-
-const RawHelpButton = ({ onClick, classes }) => (
-  <IconButton
-    classes={{
-      label: classes.icon,
-    }}
-    onClick={onClick}
-  >
-    <HelpIcon />
-  </IconButton>
-);
-
-RawHelpButton.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}>
-    <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/configure/node_modules/@pie-lib/config-ui/src/index.js

@@ -1,55 +0,0 @@
-import AlertDialog from './alert-dialog';
-import FeedbackConfig, { FeedbackSelector, buildDefaults as feedbackConfigDefaults } from './feedback-config';
-import { InputCheckbox, InputSwitch, InputRadio } 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,
-};

package/configure/node_modules/@pie-lib/config-ui/src/input.jsx

@@ -1,72 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { default as MaterialInput } from '@material-ui/core/Input';
-import { InputContainer } from '@pie-lib/render-ui';
-
-export default class Input extends React.Component {
-  static propTypes = {
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    onChange: PropTypes.func.isRequired,
-    label: PropTypes.string,
-    type: PropTypes.string.isRequired,
-    error: PropTypes.func,
-    noModelUpdateOnError: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    type: 'text',
-    error: (value, type) => (type === 'number' ? !value || isNaN(value) : !value),
-    noModelUpdateOnError: false,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      value: props.value,
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(newProps) {
-    this.setState({
-      value: newProps.value,
-    });
-  }
-
-  onChange = (event) => {
-    const { type, onChange, error } = this.props;
-    const value = event.target.value;
-
-    if (error(value, type)) {
-      this.setState({
-        error: true,
-        value: event.target.value,
-      });
-    } else {
-      this.setState({
-        error: false,
-        value: event.target.value,
-      });
-
-      onChange(event);
-    }
-  };
-
-  render() {
-    const {
-      label,
-      type,
-      noModelUpdateOnError, // eslint-disable-line no-unused-vars
-      ...rest
-    } = this.props;
-    const { value, error } = this.state;
-
-    return label ? (
-      <InputContainer label={label}>
-        <MaterialInput type={type} {...rest} value={value} onChange={this.onChange} error={error} />
-      </InputContainer>
-    ) : (
-      <MaterialInput type={type} {...rest} value={value} onChange={this.onChange} error={error} />
-    );
-  }
-}

package/configure/node_modules/@pie-lib/config-ui/src/inputs.jsx

@@ -1,98 +0,0 @@
-import Checkbox from '@material-ui/core/Checkbox';
-import Radio from '@material-ui/core/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 { color } from '@pie-lib/render-ui';
-
-const InputTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  label: PropTypes.string,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  error: PropTypes.string,
-};
-
-const RawInputSwitch = ({ classes, className, label, checked, onChange }) => {
-  return (
-    <InputContainer className={className} label={label}>
-      <Switch className={classes.switchRoot} checked={checked} onChange={onChange} aria-label={label} />
-    </InputContainer>
-  );
-};
-
-RawInputSwitch.propTypes = { ...InputTypes };
-
-const InputSwitch = withStyles({
-  switchRoot: {
-    justifyContent: 'inherit',
-    transform: 'translate(-20%, 20%)',
-  },
-})(RawInputSwitch);
-
-const RawInputCheckbox = (props) => {
-  const { classes, className, label, checked, onChange, disabled, error } = props;
-
-  return (
-    <InputContainer className={className} label={label}>
-      <Checkbox
-        className={classNames(classes.checkboxRoot, classes.customColor, error && classes.error)}
-        disabled={disabled}
-        checked={checked}
-        onChange={onChange}
-        aria-label={label}
-      />
-    </InputContainer>
-  );
-};
-
-RawInputCheckbox.propTypes = { ...InputTypes };
-
-const RawInputRadio = (props) => {
-  const { classes, className, label, checked, onChange, disabled, error } = props;
-
-  return (
-    <InputContainer className={className} label={label}>
-      <Radio
-        className={classNames(classes.radioRoot, classes.customColor, error && classes.error)}
-        disabled={disabled}
-        checked={checked}
-        onChange={onChange}
-        aria-label={label}
-      />
-    </InputContainer>
-  );
-};
-
-RawInputRadio.propTypes = { ...InputTypes };
-
-const InputCheckbox = withStyles((theme) => ({
-  checkboxRoot: {
-    transform: 'translate(-25%, 20%)',
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`,
-  },
-}))(RawInputCheckbox);
-
-const InputRadio = withStyles((theme) => ({
-  radioRoot: {
-    transform: 'translate(-20%, 20%)',
-  },
-  error: {
-    color: theme.palette.error.main,
-  },
-  customColor: {
-    color: `${color.tertiary()} !important`,
-  },
-}))(RawInputRadio);
-
-export { InputSwitch, InputCheckbox, InputRadio };