@pie-lib/config-ui 0.1.0

package/src/choice-configuration/feedback-menu.tsx

@@ -0,0 +1,134 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/choice-configuration/feedback-menu.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { InlineMenu as MenuImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const Menu = unwrapReactInteropSymbol(MenuImport, 'InlineMenu') || unwrapReactInteropSymbol(renderUi.InlineMenu, 'InlineMenu');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+import MenuItem from '@mui/material/MenuItem';
+import ActionFeedback from '@mui/icons-material/Feedback';
+import IconButton from '@mui/material/IconButton';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export class IconMenu extends React.Component {
+  static propTypes = {
+    opts: PropTypes.object,
+    onClick: PropTypes.func.isRequired,
+    iconButtonElement: PropTypes.any,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      anchorEl: undefined,
+      open: false,
+    };
+  }
+
+  handleClick: any = (event) => {
+    this.setState({ open: true, anchorEl: event.currentTarget });
+  };
+
+  handleRequestClose: any = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    const { opts, onClick } = this.props;
+    const keys = Object.keys(opts);
+
+    const handleMenuClick = (key) => () => {
+      onClick(key);
+      this.handleRequestClose();
+    };
+
+    return (
+      <div>
+        <div onClick={this.handleClick}>{this.props.iconButtonElement}</div>
+        <Menu
+          id="simple-menu"
+          anchorEl={this.state.anchorEl}
+          open={this.state.open}
+          onClose={this.handleRequestClose}
+          transitionDuration={{ enter: 225, exit: 195 }}
+        >
+          {keys.map((k, index) => (
+            <MenuItem key={index} onClick={handleMenuClick(k)}>
+              {opts[k]}
+            </MenuItem>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+export default class FeedbackMenu extends React.Component {
+  static propTypes = {
+    value: PropTypes.object,
+    onChange: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    classes: {},
+  };
+
+  render() {
+    const { value, onChange, classes } = this.props;
+    const t = value && value.type;
+    const iconColor = t === 'custom' || t === 'default' ? 'primary' : 'disabled';
+    const tooltip = t === 'custom' ? 'Custom Feedback' : t === 'default' ? 'Default Feedback' : 'Feedback disabled';
+
+    const icon = (
+      <IconButton className={classes.icon} aria-label={tooltip} size="large">
+        <ActionFeedback color={iconColor} />
+      </IconButton>
+    );
+
+    return (
+      <IconMenu
+        iconButtonElement={icon}
+        onClick={(key) => onChange(key)}
+        opts={{
+          none: 'No Feedback',
+          default: 'Default',
+          custom: 'Custom',
+        }}
+      />
+    );
+  }
+}

package/src/choice-configuration/index.tsx

@@ -0,0 +1,400 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/choice-configuration/index.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import ActionDelete from '@mui/icons-material/Delete';
+import ArrowRight from '@mui/icons-material/SubdirectoryArrowRight';
+import IconButton from '@mui/material/IconButton';
+import { InputContainer as InputContainerImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const InputContainer = unwrapReactInteropSymbol(InputContainerImport, 'InputContainer') || unwrapReactInteropSymbol(renderUi.InputContainer, 'InputContainer');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+// import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import { InputCheckbox, InputRadio } from '../inputs.js';
+import FeedbackMenu from './feedback-menu.js';
+
+// - mathquill error window not defined
+import EditableHtmlImport from '@pie-lib/editable-html-tip-tap';
+
+const EditableHtml = EditableHtmlImport;
+
+const StyledEditorHolder: any = styled('div')(({ theme }) => ({
+  marginTop: theme.spacing(2),
+}));
+
+const EditableHtmlContainer = ({
+  label,
+  onChange,
+  value,
+  className,
+  imageSupport,
+  disableImageAlignmentButtons,
+  disabled,
+  spellCheck,
+  nonEmpty,
+  pluginOpts,
+  toolbarOpts,
+  error,
+  maxImageWidth,
+  maxImageHeight,
+  uploadSoundSupport,
+  mathMlOptions = {},
+}) => {
+  return (
+    <InputContainer label={label} className={className}>
+      <StyledEditorHolder>
+        <EditableHtml
+          markup={value || ''}
+          disabled={disabled}
+          spellCheck={spellCheck}
+          nonEmpty={nonEmpty}
+          onChange={onChange}
+          imageSupport={imageSupport}
+          disableImageAlignmentButtons={disableImageAlignmentButtons}
+          pluginProps={pluginOpts || {}}
+          toolbarOpts={toolbarOpts}
+          error={error}
+          maxImageWidth={maxImageWidth}
+          maxImageHeight={maxImageHeight}
+          uploadSoundSupport={uploadSoundSupport}
+          languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+          mathMlOptions={mathMlOptions}
+        />
+      </StyledEditorHolder>
+    </InputContainer>
+  );
+};
+
+const StyledFeedbackContainer: any = styled('div')(() => ({
+  position: 'relative',
+}));
+
+const StyledArrowIcon: any = styled(ArrowRight)(({ theme }) => ({
+  fill: theme.palette.grey[400],
+  left: -56,
+  position: 'absolute',
+  top: 40,
+}));
+
+const StyledTextField: any = styled(TextField)(({ theme }) => ({
+  width: '100%',
+  marginTop: theme.spacing(2),
+}));
+
+const StyledEditableHtmlContainer: any = styled(EditableHtmlContainer)(({ theme }) => ({
+  width: '100%',
+  marginTop: theme.spacing(2),
+}));
+
+const Feedback = ({ value, onChange, type, correct, defaults, toolbarOpts, mathMlOptions = {} }) => {
+  if (!type || type === 'none') {
+    return null;
+  } else if (type === 'default') {
+    return (
+      <StyledFeedbackContainer>
+        <StyledArrowIcon />
+        <StyledTextField
+          label="Feedback Text"
+          value={correct ? defaults.correct : defaults.incorrect}
+          variant="standard"
+        />
+      </StyledFeedbackContainer>
+    );
+  } else {
+    return (
+      <StyledFeedbackContainer>
+        <StyledArrowIcon />
+        <StyledEditableHtmlContainer
+          label="Feedback Text"
+          value={value}
+          onChange={onChange}
+          toolbarOpts={toolbarOpts}
+          mathMlOptions={mathMlOptions}
+        />
+      </StyledFeedbackContainer>
+    );
+  }
+};
+
+const StyledIndex: any = styled('span')(({ theme }) => ({
+  paddingRight: theme.spacing(1),
+  paddingTop: theme.spacing(3),
+}));
+
+const StyledTopRow: any = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+}));
+
+const StyledToggle: any = styled('div')(({ theme }) => ({
+  flex: '0 1 auto',
+  paddingTop: theme.spacing(0.5),
+  paddingBottom: 0,
+  marginRight: 0,
+  marginLeft: theme.spacing(1),
+}));
+
+const StyledFeedback: any = styled('div')(({ theme }) => ({
+  flex: '0 1 auto',
+  paddingTop: theme.spacing(2),
+  paddingLeft: 0,
+  marginLeft: 0,
+  marginRight: theme.spacing(1),
+}));
+
+const StyledFeedbackIcon: any = styled('div')(() => ({
+  margin: 0,
+  width: 'inherit',
+}));
+
+const StyledDeleteIcon: any = styled('div')(() => ({
+  margin: 0,
+  width: 'inherit',
+}));
+
+const StyledDelete: any = styled('div')(({ theme }) => ({
+  flex: '0 1 auto',
+  paddingTop: theme.spacing(2),
+  paddingLeft: 0,
+  marginLeft: 0,
+}));
+
+const StyledMiddleColumn: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  marginRight: theme.spacing(1),
+}));
+
+const StyledErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+}));
+
+export class ChoiceConfiguration extends React.Component {
+  static propTypes = {
+    noLabels: PropTypes.bool,
+    useLetterOrdering: PropTypes.bool,
+    className: PropTypes.string,
+    error: PropTypes.string,
+    mode: PropTypes.oneOf(['checkbox', 'radio']),
+    defaultFeedback: PropTypes.object.isRequired,
+    disabled: PropTypes.bool,
+    nonEmpty: PropTypes.bool,
+    data: PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.string.isRequired,
+      correct: PropTypes.bool,
+      feedback: PropTypes.shape({
+        type: PropTypes.string,
+        value: PropTypes.string,
+      }),
+    }),
+    onDelete: PropTypes.func,
+    onChange: PropTypes.func,
+    index: PropTypes.number,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    disableImageAlignmentButtons: PropTypes.bool,
+    allowFeedBack: PropTypes.bool,
+    allowDelete: PropTypes.bool,
+    noCorrectAnswerError: PropTypes.string,
+    spellCheck: PropTypes.bool,
+    pluginOpts: PropTypes.object,
+    toolbarOpts: PropTypes.object,
+    uploadSoundSupport: PropTypes.object,
+    maxImageWidth: PropTypes.number,
+    maxImageHeight: PropTypes.number,
+  };
+
+  static defaultProps = {
+    index: -1,
+    noLabels: false,
+    useLetterOrdering: false,
+    allowFeedBack: true,
+    allowDelete: true,
+  };
+
+  _changeFn = (key) => (update) => {
+    const { data, onChange } = this.props;
+
+    if (onChange) {
+      onChange({ ...data, [key]: update });
+    }
+  };
+
+  onLabelChange = this._changeFn('label');
+
+  onCheckedChange: any = (event) => {
+    const correct = event.target.checked;
+    const { data, onChange } = this.props;
+
+    if (onChange) {
+      onChange({ ...data, correct });
+    }
+  };
+
+  onFeedbackValueChange: any = (v) => {
+    const { data, onChange } = this.props;
+
+    if (data.feedback.type !== 'custom') {
+      return;
+    }
+
+    const fb = { ...data.feedback, value: v };
+
+    if (onChange) onChange({ ...data, feedback: fb });
+  };
+
+  onFeedbackTypeChange: any = (t) => {
+    const { data, onChange } = this.props;
+    const fb = { ...data.feedback, type: t };
+
+    if (fb.type !== 'custom') {
+      fb.value = undefined;
+    }
+
+    if (onChange) onChange({ ...data, feedback: fb });
+  };
+
+  render() {
+    const {
+      data,
+      mode,
+      onDelete,
+      defaultFeedback,
+      index,
+      className,
+      noLabels,
+      useLetterOrdering,
+      imageSupport,
+      disableImageAlignmentButtons,
+      disabled,
+      spellCheck,
+      nonEmpty,
+      allowFeedBack,
+      allowDelete,
+      pluginOpts,
+      toolbarOpts,
+      error,
+      noCorrectAnswerError,
+      uploadSoundSupport,
+      maxImageWidth,
+      maxImageHeight,
+      mathMlOptions = {},
+    } = this.props;
+
+    const InputToggle = mode === 'checkbox' ? InputCheckbox : InputRadio;
+
+    return (
+      <StyledTopRow>
+        {index > 0 && (
+          <StyledIndex type="title">
+            {useLetterOrdering ? String.fromCharCode(96 + index).toUpperCase() : index}
+          </StyledIndex>
+        )}
+
+        <StyledToggle>
+          <InputToggle
+            onChange={this.onCheckedChange}
+            label={!noLabels ? 'Correct' : ''}
+            checked={!!data.correct}
+            error={noCorrectAnswerError}
+          />
+        </StyledToggle>
+
+        <StyledMiddleColumn>
+          <EditableHtmlContainer
+            label={!noLabels ? 'Label' : ''}
+            value={data.label}
+            onChange={this.onLabelChange}
+            imageSupport={imageSupport}
+            disableImageAlignmentButtons={disableImageAlignmentButtons}
+            disabled={disabled}
+            spellCheck={spellCheck}
+            nonEmpty={nonEmpty}
+            pluginOpts={pluginOpts}
+            toolbarOpts={toolbarOpts}
+            error={error}
+            uploadSoundSupport={uploadSoundSupport}
+            mathMlOptions={mathMlOptions}
+            maxImageWidth={maxImageWidth}
+            maxImageHeight={maxImageHeight}
+          />
+          {error && <StyledErrorText>{error}</StyledErrorText>}
+
+          {allowFeedBack && (
+            <Feedback
+              {...data.feedback}
+              correct={data.correct}
+              defaults={defaultFeedback}
+              onChange={this.onFeedbackValueChange}
+              toolbarOpts={toolbarOpts}
+            />
+          )}
+        </StyledMiddleColumn>
+
+        {allowFeedBack && (
+          <StyledFeedback>
+            <InputContainer label={!noLabels ? 'Feedback' : ''}>
+              <StyledFeedbackIcon>
+                <FeedbackMenu onChange={this.onFeedbackTypeChange} value={data.feedback} />
+              </StyledFeedbackIcon>
+            </InputContainer>
+          </StyledFeedback>
+        )}
+
+        {allowDelete && (
+          <StyledDelete>
+            <InputContainer label={!noLabels ? 'Delete' : ''}>
+              <StyledDeleteIcon>
+                <IconButton aria-label="delete" onClick={onDelete} size="large">
+                  <ActionDelete />
+                </IconButton>
+              </StyledDeleteIcon>
+            </InputContainer>
+          </StyledDelete>
+        )}
+      </StyledTopRow>
+    );
+  }
+}
+
+export default ChoiceConfiguration;

package/src/choice-utils.ts

@@ -0,0 +1,40 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/config-ui/src/choice-utils.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import { includes } from 'lodash-es';
+
+/**
+ * Add value to every model.choices.
+ * @param {Object} model the model to normalize
+ * @return {Object} the updated model
+ */
+export const normalizeChoices = (model) => {
+  const choices = model.choices.map((c, index) => {
+    if (!c.value) {
+      c.value = `${index}`;
+    }
+    return c;
+  });
+  return { ...model, choices };
+};
+
+/**
+ * Find the first available index.
+ * @param {string[]} values
+ * @param {number} index
+ * @return {string}
+ */
+export const firstAvailableIndex = (values, index) => {
+  if (includes(values, `${index}`)) {
+    return firstAvailableIndex(values, index + 1);
+  } else {
+    return `${index}`;
+  }
+};