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

package/configure/node_modules/@pie-lib/render-ui/src/preview-prompt.jsx

@@ -1,254 +0,0 @@
-import React, { Component } from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import PropTypes from 'prop-types';
-import * as color from './color';
-
-//Used these below to replace \\embed{newLine} with \\newline from prompt which will get parsed in MathJax
-const NEWLINE_BLOCK_REGEX = /\\embed\{newLine\}\[\]/g;
-const NEWLINE_LATEX = '\\newline ';
-
-export class PreviewPrompt extends Component {
-  static propTypes = {
-    classes: PropTypes.object,
-    prompt: PropTypes.string,
-    tagName: PropTypes.string,
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    defaultClassName: PropTypes.string,
-    autoplayAudioEnabled: PropTypes.bool,
-    customAudioButton: {
-      playImage: PropTypes.string,
-      pauseImage: PropTypes.string,
-    },
-  };
-
-  static defaultProps = {
-    onClick: () => {},
-  };
-
-  parsedText = (text) => {
-    const { customAudioButton } = this.props;
-    const div = document.createElement('div');
-    div.innerHTML = text;
-
-    const audio = div.querySelector('audio');
-    if (audio) {
-      const source = document.createElement('source');
-
-      source.setAttribute('type', 'audio/mp3');
-      source.setAttribute('src', audio.getAttribute('src'));
-
-      audio.removeAttribute('src');
-      audio.setAttribute('id', 'pie-prompt-audio-player');
-
-      audio.appendChild(source);
-
-      if (customAudioButton) {
-        audio.style.display = 'none';
-
-        const playButton = document.createElement('div');
-        playButton.id = 'play-audio-button';
-
-        Object.assign(playButton.style, {
-          cursor: 'pointer',
-          display: 'block',
-          width: '128px',
-          height: '128px',
-          backgroundImage: `url(${customAudioButton.pauseImage})`,
-          backgroundSize: 'cover',
-          borderRadius: '50%',
-          border: '1px solid #326295',
-        });
-
-        audio.parentNode.insertBefore(playButton, audio);
-      }
-    }
-
-    return div.innerHTML;
-  };
-
-  addCustomAudioButtonControls() {
-    const { autoplayAudioEnabled, customAudioButton } = this.props;
-    const playButton = document.getElementById('play-audio-button');
-    const audio = document.getElementById('pie-prompt-audio-player');
-
-    if (autoplayAudioEnabled && audio) {
-      audio
-        .play()
-        .then(() => {
-          if (playButton && customAudioButton) {
-            audio.addEventListener('ended', handleAudioEnded);
-          }
-        })
-        .catch((error) => {
-          console.error('Error playing audio', error);
-        });
-    }
-
-    if (!playButton || !audio || !customAudioButton) return;
-
-    const handlePlayClick = () => {
-      // if already playing, don't play again
-      if (!audio.paused) return;
-      if (playButton.style.backgroundImage.includes(customAudioButton.pauseImage)) return;
-
-      audio.play();
-    };
-
-    const handleAudioEnded = () => {
-      playButton.style.backgroundImage = `url(${customAudioButton.playImage})`;
-    };
-
-    const handleAudioPlay = () => {
-      Object.assign(playButton.style, {
-        backgroundImage: `url(${customAudioButton.pauseImage})`,
-        border: '1px solid #ccc',
-      });
-    };
-
-    const handleAudioPause = () => {
-      Object.assign(playButton.style, {
-        backgroundImage: `url(${customAudioButton.playImage})`,
-        border: '1px solid #326295',
-      });
-    };
-
-    playButton.addEventListener('click', handlePlayClick);
-    audio.addEventListener('play', handleAudioPlay);
-    audio.addEventListener('pause', handleAudioPause);
-    audio.addEventListener('ended', handleAudioEnded);
-
-    // store event handler references so they can be removed later
-    this._handlePlayClick = handlePlayClick;
-    this._handleAudioPlay = handleAudioPlay;
-    this._handleAudioPause = handleAudioPause;
-    this._handleAudioEnded = handleAudioEnded;
-  }
-
-  removeCustomAudioButtonListeners() {
-    const playButton = document.getElementById('play-audio-button');
-    const audio = document.querySelector('audio');
-
-    if (!playButton || !audio) return;
-
-    // remove event listeners using stored references
-    playButton.removeEventListener('click', this._handlePlayClick);
-    audio.removeEventListener('play', this._handleAudioPlay);
-    audio.removeEventListener('pause', this._handleAudioPause);
-    audio.removeEventListener('ended', this._handleAudioEnded);
-  }
-
-  componentDidMount() {
-    this.alignImages();
-    this.addCustomAudioButtonControls();
-  }
-
-  componentDidUpdate() {
-    this.alignImages();
-  }
-
-  componentWillUnmount() {
-    this.removeCustomAudioButtonListeners();
-  }
-
-  alignImages() {
-    const previewPrompts = document.querySelectorAll('#preview-prompt');
-
-    previewPrompts.forEach((previewPrompt) => {
-      const images = previewPrompt.getElementsByTagName('img');
-
-      if (images && images.length) {
-        for (let image of images) {
-          // check if alignment property was set
-          if (image.attributes && image.attributes.alignment && image.attributes.alignment.value) {
-            const parentNode = image.parentElement;
-
-            // check if div is not already added to dom and replace current image with wrapped image
-            if (
-              !(
-                parentNode.tagName === 'DIV' &&
-                parentNode.style.display === 'flex' &&
-                parentNode.style.width === '100%'
-              )
-            ) {
-              const div = document.createElement('div');
-              div.style.display = 'flex';
-              div.style.width = '100%';
-
-              const copyImage = image.cloneNode(true);
-              div.appendChild(copyImage);
-              parentNode.replaceChild(div, image);
-            }
-          }
-        }
-      }
-    });
-  }
-
-  render() {
-    const { prompt, classes, tagName, className, onClick, defaultClassName } = this.props;
-    const CustomTag = tagName || 'div';
-    // legend tag was added once with accessibility tasks, wee need extra style to make it work with images alignment
-    const legendClass = tagName === 'legend' ? 'legend' : '';
-    const customClasses = `${classes.promptTable} ${classes[className] || ''} ${defaultClassName || ''} ${classes[
-      legendClass
-    ] || ''}`;
-
-    return (
-      <CustomTag
-        id={'preview-prompt'}
-        onClick={onClick}
-        className={customClasses}
-        dangerouslySetInnerHTML={{
-          __html: this.parsedText(prompt || '').replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX),
-        }}
-      />
-    );
-  }
-}
-
-const styles = (theme) => ({
-  prompt: {
-    verticalAlign: 'middle',
-    color: color.text(),
-  },
-  legend: {
-    width: '100%',
-    fontSize: 'inherit  !important',
-  },
-  rationale: {
-    paddingLeft: theme.spacing.unit * 4,
-    paddingBottom: theme.spacing.unit,
-  },
-  label: {
-    color: `${color.text()} !important`, //'var(--choice-input-color, black)',
-    display: 'flex',
-    flexDirection: 'column',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-    '& > p': {
-      margin: '0 0 0 0 !important',
-    },
-  },
-  promptTable: {
-    '&:not(.MathJax) > table': {
-      borderCollapse: 'collapse',
-    },
-    '&:not(.MathJax) > table tr': {
-      '&:nth-child(2n)': {
-        backgroundColor: '#f6f8fa',
-        color: theme.palette.common.black,
-      },
-    },
-    // align table content to left as per STAR requirement PD-3687
-    '&:not(.MathJax) table td, &:not(.MathJax) table th': {
-      padding: '.6em 1em',
-      textAlign: 'left',
-    },
-    // added this to fix alignment of text in prompt imported from studio (PD-3423)
-    '&:not(.MathJax) > table td > p.kds-indent': {
-      textAlign: 'initial',
-    },
-  },
-});
-export default withStyles(styles)(PreviewPrompt);

package/configure/node_modules/@pie-lib/render-ui/src/purpose.jsx

@@ -1,17 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Purpose = (props) => {
-  return (
-    <>
-      {React.Children.map(props.children, (child) => React.cloneElement(child, { 'data-pie-purpose': props.purpose }))}
-    </>
-  );
-};
-
-Purpose.propTypes = {
-  children: PropTypes.node,
-  purpose: PropTypes.string,
-};
-
-export default Purpose;

package/configure/node_modules/@pie-lib/render-ui/src/readable.jsx

@@ -1,19 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const Readable = (props) => {
-  return (
-    <>
-      {React.Children.map(props.children, (child) =>
-        React.cloneElement(child, { 'data-pie-readable': props.false === undefined }),
-      )}
-    </>
-  );
-};
-
-Readable.propTypes = {
-  children: PropTypes.node,
-  false: PropTypes.bool,
-};
-
-export default Readable;

package/configure/node_modules/@pie-lib/render-ui/src/response-indicators.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as icons from '@pie-lib/icons';
-import Popover from '@material-ui/core/Popover';
-import { withStyles } from '@material-ui/core/styles';
-import Feedback from './feedback';
-import debug from 'debug';
-
-const log = debug('pie-libs:render-ui:response-indicators');
-
-const styles = () => ({
-  responseIndicator: {
-    cursor: 'pointer',
-  },
-  paper: {
-    padding: '0',
-    borderRadius: '4px',
-  },
-  popover: {
-    cursor: 'pointer',
-  },
-  popperClose: {
-    cursor: 'pointer',
-  },
-});
-
-const BuildIndicator = (Icon, correctness) => {
-  class RawIndicator extends React.Component {
-    constructor(props) {
-      super(props);
-      this.state = {};
-    }
-
-    handlePopoverOpen = (event) => {
-      log('[handlePopoverOpen]', event.target);
-      this.setState({ anchorEl: event.target });
-    };
-
-    handlePopoverClose = () => {
-      this.setState({ anchorEl: null });
-    };
-
-    render() {
-      const { feedback, classes } = this.props;
-      const { anchorEl } = this.state;
-      return (
-        <div className={feedback && classes.responseIndicator}>
-          <span ref={(r) => (this.icon = r)} onClick={this.handlePopoverOpen}>
-            <Icon />
-          </span>
-
-          {feedback && (
-            <Popover
-              className={classes.popover}
-              classes={{
-                paper: classes.paper,
-              }}
-              open={!!anchorEl}
-              anchorEl={anchorEl}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'left',
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'left',
-              }}
-              onClose={this.handlePopoverClose}
-            >
-              <Feedback feedback={feedback} correctness={correctness} />
-            </Popover>
-          )}
-        </div>
-      );
-    }
-  }
-
-  RawIndicator.propTypes = {
-    feedback: PropTypes.string,
-    classes: PropTypes.object.isRequired,
-  };
-
-  return withStyles(styles)(RawIndicator);
-};
-
-export const Correct = BuildIndicator(icons.Correct, 'correct');
-export const Incorrect = BuildIndicator(icons.Incorrect, 'incorrect');
-export const PartiallyCorrect = BuildIndicator(icons.PartiallyCorrect, 'partially-correct');
-export const NothingSubmitted = BuildIndicator(icons.NothingSubmitted, 'nothing-submitted');

package/configure/node_modules/@pie-lib/render-ui/src/ui-layout.jsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import AppendCSSRules from './append-css-rules';
-
-class UiLayout extends AppendCSSRules {
-  static propTypes = {
-    classes: PropTypes.object,
-    className: PropTypes.string,
-    children: PropTypes.array,
-    extraCSSRules: PropTypes.shape({
-      names: PropTypes.arrayOf(PropTypes.string),
-      rules: PropTypes.string,
-    }),
-    fontSizeFactor: PropTypes.number,
-  };
-
-  static defaultProps = {
-    extraCSSRules: {},
-    fontSizeFactor: 1,
-  };
-
-  constructor(props) {
-    super(props);
-    this.classesSheet = document.createElement('style');
-  }
-
-  computeStyle(fontSizeFactor) {
-    const getFontSize = (element) => parseFloat(getComputedStyle(element).fontSize);
-
-    const rootFontSize = getFontSize(document.documentElement);
-    const bodyFontSize = getFontSize(document.body);
-    const effectiveFontSize = Math.max(rootFontSize, bodyFontSize);
-
-    return fontSizeFactor !== 1 ? { fontSize: `${effectiveFontSize * fontSizeFactor}px` } : null;
-  }
-
-  render() {
-    const { children, className, classes, fontSizeFactor, ...rest } = this.props;
-
-    const finalClass = classNames(className, classes.extraCSSRules, classes.uiLayoutContainer);
-    const { extraCSSRules, ...restProps } = rest;
-    const style = this.computeStyle(fontSizeFactor);
-
-    return (
-      <div className={finalClass} {...restProps} {...(style && { style })}>
-        {children}
-      </div>
-    );
-  }
-}
-
-const styles = {
-  extraCSSRules: {},
-  // need this because some browsers set their own style on table
-  uiLayoutContainer: {
-    '& table, th, td': {
-      fontSize: 'inherit' /* Ensure table elements inherit font size */,
-    },
-  },
-};
-
-const Styled = withStyles(styles)(UiLayout);
-
-export default Styled;

package/configure/node_modules/@pie-lib/render-ui/src/withUndoReset.jsx

@@ -1,116 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/core/styles';
-import Restore from '@material-ui/icons/Restore';
-import Undo from '@material-ui/icons/Undo';
-
-const styles = (theme) => ({
-  wrapper: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  resetUndoContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    width: '24px',
-    height: '24px',
-    color: 'gray',
-    marginRight: theme.spacing.unit,
-  },
-  buttonContainer: {
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: theme.spacing.unit * 3,
-    marginRight: theme.spacing.unit * 3,
-  },
-});
-
-/**
- * HOC that adds undo and reset functionality for session values
- */
-const withUndoReset = (WrappedComponent) => {
-  class WithUndoReset extends React.Component {
-    static propTypes = {
-      classes: PropTypes.object,
-      session: PropTypes.object,
-      onSessionChange: PropTypes.func,
-    };
-
-    constructor(props) {
-      super(props);
-
-      this.state = {
-        sessionInitialValues: JSON.parse(JSON.stringify(props.session)),
-        session: props.session,
-        changes: [],
-      };
-    }
-
-    onSessionChange = (session) => {
-      this.setState(
-        (state) => ({ session, changes: [...state.changes, session] }),
-        () => this.props.onSessionChange(session),
-      );
-    };
-
-    onUndo = () => {
-      this.setState(
-        (state) => {
-          const newChanges = [...state.changes];
-
-          newChanges.pop();
-
-          return {
-            changes: newChanges,
-            session: newChanges.length ? newChanges[newChanges.length - 1] : state.sessionInitialValues,
-          };
-        },
-        () => this.props.onSessionChange(this.state.session),
-      );
-    };
-
-    onReset = () => {
-      this.setState(
-        (state) => ({ session: state.sessionInitialValues, changes: [] }),
-        () => this.props.onSessionChange(this.state.sessionInitialValues),
-      );
-    };
-
-    render() {
-      const { classes, ...rest } = this.props;
-      const { changes, session } = this.state;
-
-      return (
-        <div className={classes.wrapper}>
-          <div className={classes.resetUndoContainer}>
-            <Button
-              className={classes.buttonContainer}
-              color="primary"
-              disabled={changes.length === 0}
-              onClick={this.onUndo}
-            >
-              <Undo className={classes.icon} /> Undo
-            </Button>
-            <Button
-              className={classes.buttonContainer}
-              color="primary"
-              disabled={changes.length === 0}
-              onClick={this.onReset}
-            >
-              <Restore className={classes.icon} /> Start Over
-            </Button>
-          </div>
-          <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />
-        </div>
-      );
-    }
-  }
-
-  return withStyles(styles)(WithUndoReset);
-};
-
-export default withUndoReset;

package/configure/node_modules/@pie-lib/test-utils/CHANGELOG.json

@@ -1 +0,0 @@
-[]