@pie-lib/render-ui 7.0.2 → 8.0.0-next.20261002094057

package/src/preview-prompt.jsx

@@ -1,300 +0,0 @@
-import React, { Component } from 'react';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import * as color from './color';
-import { renderMath } from '@pie-lib/math-rendering';
-
-const StyledPromptContainer = styled('div')(({ theme, tagName }) => ({
-  // presentation tables should not have any custom style
-  // Base promptTable styles
-  '&:not(.MathJax) > table:not([role="presentation"])': {
-    borderCollapse: 'collapse',
-  },
-  /*
-   * The editor writes border="1", and the UA answers it with `border-style: outset`
-   * on the table and `inset` on the cells -- which browsers paint as synthesized 3D
-   * shades rather than the colour the border resolves to, so the grid comes out grey
-   * on every scheme (1.19:1 on black-on-violet). `solid` is what removes the
-   * shading; without it, setting the colour has no effect.
-   */
-  '&:not(.MathJax) table[border]:not([role="presentation"]), &:not(.MathJax) table[border]:not([role="presentation"]) td, &:not(.MathJax) table[border]:not([role="presentation"]) th':
-    {
-      borderStyle: 'solid',
-      borderColor: color.tableGrid(),
-    },
-  // Apply vertical striping when first column is a header (th) and NOT mixed with td.
-  // Ink stays at 5.44:1 or better on tableStripe in every scheme, so the cell inherits
-  // its text colour rather than pinning the `color: black` this used to carry.
-  '&:not(.MathJax) > table:not([role="presentation"]):has(tbody tr > th:first-child):not(:has(tbody tr > td:first-child)) tbody td:nth-child(even)':
-    {
-      backgroundColor: color.tableStripe(),
-    },
-  // Apply horizontal striping for tables where first element is a data cell (td)
-  '&:not(.MathJax) > table:not([role="presentation"]):has(tbody tr > td:first-child) tbody tr:nth-child(even) td': {
-    backgroundColor: color.tableStripe(),
-  },
-  // align table content to left as per STAR requirement PD-3687
-  '&:not(.MathJax) table:not([role="presentation"]) td, &:not(.MathJax) table:not([role="presentation"]) 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',
-  },
-
-  // Conditional styles based on class names
-  '&.prompt': {
-    verticalAlign: 'middle',
-    color: color.text(),
-  },
-  '&.legend': {
-    width: '100%',
-    fontSize: 'inherit !important',
-  },
-  '&.rationale': {
-    paddingLeft: theme.spacing(4),
-    paddingBottom: theme.spacing(1),
-  },
-  '&.prompt-label': {
-    color: `${color.text()} !important`,
-    display: 'flex',
-    flexDirection: 'column',
-    verticalAlign: 'middle',
-    cursor: 'pointer',
-    '& > p': {
-      margin: '0 0 0 0 !important',
-    },
-  },
-}));
-
-//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 ';
-
-// stable hook for 'is this node inside a prompt' checks - a class rather than an id,
-// so it stays valid when a page renders more than one prompt
-const PROMPT_CLASS = 'preview-prompt';
-
-export class PreviewPrompt extends Component {
-  static propTypes = {
-    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: () => {},
-  };
-
-  promptRef = React.createRef();
-
-  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();
-    this.setupMathRendering();
-  }
-
-  componentDidUpdate(prevProps) {
-    this.alignImages();
-
-    if (prevProps.prompt !== this.props.prompt) {
-      this.renderMathContent();
-    }
-  }
-
-  componentWillUnmount() {
-    this.removeCustomAudioButtonListeners();
-  }
-
-  setupMathRendering() {
-    this.renderMathContent();
-  }
-
-  renderMathContent() {
-    const container = this.promptRef.current;
-    if (container && typeof renderMath === 'function') {
-      renderMath(container);
-    }
-  }
-
-  alignImages() {
-    const previewPrompt = this.promptRef.current;
-
-    if (!previewPrompt) {
-      return;
-    }
-
-    const images = previewPrompt.getElementsByTagName('img');
-
-    if (images && images.length) {
-      for (let image of images) {
-        if (image.attributes && image.attributes.alignment && image.attributes.alignment.value) {
-          const alignment = image.attributes.alignment.value;
-          const justifyContent =
-            alignment === 'center' ? 'center' : alignment === 'right' ? 'flex-end' : 'flex-start';
-
-          const parentNode = image.parentElement;
-
-          if (
-            parentNode.tagName === 'DIV' &&
-            parentNode.style.display === 'flex' &&
-            parentNode.style.width === '100%'
-          ) {
-            parentNode.style.justifyContent = justifyContent;
-          } else {
-            const div = document.createElement('div');
-            div.style.display = 'flex';
-            div.style.width = '100%';
-            div.style.justifyContent = justifyContent;
-
-            const copyImage = image.cloneNode(true);
-            div.appendChild(copyImage);
-            parentNode.replaceChild(div, image);
-          }
-        }
-      }
-    }
-  }
-
-  render() {
-    const { prompt, tagName, className, onClick, defaultClassName } = this.props;
-    // legend tag was added once with accessibility tasks, we need extra style to make it work with images alignment
-    const legendClass = tagName === 'legend' ? 'legend' : '';
-    const customClasses = `${className || ''} ${defaultClassName || ''} ${legendClass} ${PROMPT_CLASS}`.trim();
-
-    return (
-      <StyledPromptContainer
-        as={tagName || 'div'}
-        ref={this.promptRef}
-        onClick={onClick}
-        className={customClasses}
-        tagName={tagName}
-        dangerouslySetInnerHTML={{
-          __html: this.parsedText(prompt || '').replace(NEWLINE_BLOCK_REGEX, NEWLINE_LATEX),
-        }}
-      />
-    );
-  }
-}
-
-export default PreviewPrompt;

package/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/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/src/response-indicators.jsx

@@ -1,82 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import * as icons from '@pie-lib/icons';
-import Popover from '@mui/material/Popover';
-import { styled } from '@mui/material/styles';
-import Feedback from './feedback';
-import debug from 'debug';
-
-const log = debug('pie-libs:render-ui:response-indicators');
-
-const ResponseIndicatorContainer = styled('div')(({ hasFeedback }) => ({
-  cursor: hasFeedback ? 'pointer' : 'default',
-}));
-
-const StyledPopover = styled(Popover)({
-  cursor: 'pointer',
-});
-
-const PopoverPaper = styled('div')({
-  padding: '0',
-  borderRadius: '4px',
-});
-
-const BuildIndicator = (Icon, correctness) => {
-  class Indicator 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 } = this.props;
-      const { anchorEl } = this.state;
-      return (
-        <ResponseIndicatorContainer hasFeedback={!!feedback}>
-          <span ref={(r) => (this.icon = r)} onClick={this.handlePopoverOpen}>
-            <Icon />
-          </span>
-
-          {feedback && (
-            <StyledPopover
-              PaperComponent={PopoverPaper}
-              open={!!anchorEl}
-              anchorEl={anchorEl}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'left',
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'left',
-              }}
-              onClose={this.handlePopoverClose}
-            >
-              <Feedback feedback={feedback} correctness={correctness} />
-            </StyledPopover>
-          )}
-        </ResponseIndicatorContainer>
-      );
-    }
-  }
-
-  Indicator.propTypes = {
-    feedback: PropTypes.string,
-  };
-
-  return Indicator;
-};
-
-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/src/ui-layout.jsx

@@ -1,96 +0,0 @@
-import React from 'react';
-import { createTheme, styled, StyledEngineProvider, ThemeProvider } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-
-const theme = createTheme({
-  typography: {
-    fontFamily: 'inherit',
-  },
-  palette: {
-    action: {
-      disabled: 'rgba(0, 0, 0, 0.54);',
-    },
-  },
-  components: {
-    MuiTypography: {
-      styleOverrides: {
-        root: { fontFamily: 'inherit' },
-      },
-    },
-    MuiButton: {
-      styleOverrides: {
-        contained: {
-          backgroundColor: '#e0e0e0',
-          color: '#000000',
-          '&:hover': {
-            backgroundColor: '#bdbdbd',
-          },
-        },
-      },
-    },
-  },
-});
-
-const StyledContainer = styled('div')({
-  // need this because some browsers set their own style on table
-  '& table, th, td': {
-    fontSize: 'inherit' /* Ensure table elements inherit font size */,
-  },
-});
-
-class UiLayout extends React.Component {
-  static propTypes = {
-    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);
-
-    // Handle null, undefined, or invalid values by defaulting to 1
-    const factor = fontSizeFactor != null && typeof fontSizeFactor === 'number' ? fontSizeFactor : 1;
-    return factor !== 1 ? { fontSize: `${effectiveFontSize * factor}px` } : null;
-  }
-
-  render() {
-    const { children, className, fontSizeFactor, ...rest } = this.props;
-
-    const { extraCSSRules, ...restProps } = rest;
-    const style = this.computeStyle(fontSizeFactor);
-
-    return (
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          {extraCSSRules?.rules ? (
-            <style dangerouslySetInnerHTML={{ __html: `.extraCSSRules { ${extraCSSRules.rules} }` }} />
-          ) : null}
-
-          <StyledContainer className={`${className} extraCSSRules`} {...restProps} {...(style && { style })}>
-            {children}
-          </StyledContainer>
-        </ThemeProvider>
-      </StyledEngineProvider>
-    );
-  }
-}
-
-export default UiLayout;

package/src/withUndoReset.jsx

@@ -1,114 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import Button from '@mui/material/Button';
-import { styled } from '@mui/material/styles';
-import Restore from '@mui/icons-material/Restore';
-import Undo from '@mui/icons-material/Undo';
-
-const Wrapper = styled('div')({
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-const ResetUndoContainer = styled('div')({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-});
-
-const StyledIcon = styled('div')(({ theme }) => ({
-  width: '24px',
-  height: '24px',
-  color: 'gray',
-  marginRight: theme.spacing(1),
-  display: 'flex',
-  alignItems: 'center',
-}));
-
-const StyledButton = styled(Button)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  marginLeft: theme.spacing(3),
-  marginRight: theme.spacing(3),
-}));
-
-/**
- * HOC that adds undo and reset functionality for session values
- */
-const withUndoReset = (WrappedComponent) => {
-  class WithUndoReset extends React.Component {
-    static propTypes = {
-      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 { ...rest } = this.props;
-      const { changes, session } = this.state;
-
-      return (
-        <Wrapper>
-          <ResetUndoContainer>
-            <StyledButton color="primary" disabled={changes.length === 0} onClick={this.onUndo}>
-              <StyledIcon>
-                <Undo />
-              </StyledIcon>
-              Undo
-            </StyledButton>
-            <StyledButton color="primary" disabled={changes.length === 0} onClick={this.onReset}>
-              <StyledIcon>
-                <Restore />
-              </StyledIcon>
-              Start Over
-            </StyledButton>
-          </ResetUndoContainer>
-          <WrappedComponent {...rest} session={session} onSessionChange={this.onSessionChange} />
-        </Wrapper>
-      );
-    }
-  }
-
-  return WithUndoReset;
-};
-
-export default withUndoReset;