@pie-lib/render-ui 6.1.1-next.1 → 6.1.1-next.37

package/src/index.js

@@ -1,35 +0,0 @@
-import * as indicators from './response-indicators';
-import Feedback from './feedback';
-import Collapsible from './collapsible';
-import withUndoReset from './withUndoReset';
-import PreviewLayout from './preview-layout';
-import UiLayout from './ui-layout';
-import HtmlAndMath from './html-and-math';
-import InputContainer from './input-container';
-import PreviewPrompt from './preview-prompt';
-import Readable from './readable';
-import Purpose from './purpose';
-import * as color from './color';
-import { hasText } from './has-text';
-import { hasMedia } from './has-media';
-import EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage';
-import { transformDataHeadings } from './transform-headings';
-
-export {
-  HtmlAndMath,
-  indicators,
-  withUndoReset,
-  Feedback,
-  UiLayout,
-  PreviewLayout,
-  Collapsible,
-  InputContainer,
-  PreviewPrompt,
-  color,
-  Readable,
-  Purpose,
-  hasText,
-  hasMedia,
-  EnableAudioAutoplayImage,
-  transformDataHeadings,
-};

package/src/input-container.jsx

@@ -1,47 +0,0 @@
-import InputLabel from '@mui/material/InputLabel';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import FormControl from '@mui/material/FormControl';
-
-const StyledFormControl = styled(FormControl)(({ theme }) => ({
-  margin: 0,
-  padding: 0,
-  flex: '1 0 auto',
-  minWidth: theme.spacing(4),
-}));
-
-const StyledInputLabel = styled(InputLabel)(() => ({
-  fontSize: 'inherit',
-  whiteSpace: 'nowrap',
-  margin: 0,
-  padding: 0,
-  alignSelf: 'flex-start',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  transformOrigin: 'top left',
-  pointerEvents: 'none',
-  // override MUI's default transform styles
-  '&.MuiInputLabel-shrink': {
-    transform: 'scale(0.75) translate(0, -0.75em)',
-  },
-  '&:not(.MuiInputLabel-shrink)': {
-    transform: 'translate(0, 0)',
-  },
-}));
-
-const InputContainer = ({ label, className, children }) => (
-  <StyledFormControl className={className}>
-    <StyledInputLabel shrink>{label}</StyledInputLabel>
-    {children}
-  </StyledFormControl>
-);
-
-InputContainer.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-};
-
-export default InputContainer;

package/src/preview-layout.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import PropTypes from 'prop-types';
-import UiLayout from './ui-layout';
-
-const StyledUiLayout = styled(UiLayout)({
-  display: 'flex',
-  flexDirection: 'column',
-  position: 'relative',
-});
-
-class PreviewLayout extends React.Component {
-  static propTypes = {
-    ariaLabel: PropTypes.string,
-    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-    role: PropTypes.string,
-    extraCSSRules: PropTypes.shape({
-      names: PropTypes.arrayOf(PropTypes.string),
-      rules: PropTypes.string,
-    }),
-    fontSizeFactor: PropTypes.number,
-  };
-
-  render() {
-    const { children, ariaLabel, role, extraCSSRules, fontSizeFactor, classes } = this.props;
-    const accessibility = ariaLabel ? { 'aria-label': ariaLabel, role } : {};
-
-    return (
-      <StyledUiLayout
-        {...accessibility}
-        extraCSSRules={extraCSSRules}
-        fontSizeFactor={fontSizeFactor}
-        classes={classes}
-      >
-        {children}
-      </StyledUiLayout>
-    );
-  }
-}
-
-export default PreviewLayout;

package/src/preview-prompt.jsx

@@ -1,280 +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',
-  },
-  // Apply vertical striping when first column is a header (th) and NOT mixed with td
-  '&: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: '#f6f8fa',
-      color: theme.palette.common.black,
-    },
-  // 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: '#f6f8fa',
-    color: theme.palette.common.black,
-  },
-  // 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 ';
-
-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: () => {},
-  };
-
-  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 = document.getElementById('preview-prompt');
-    if (container && typeof renderMath === 'function') {
-      renderMath(container);
-    }
-  }
-
-  alignImages() {
-    const previewPrompts = document.querySelectorAll('#preview-prompt');
-
-    previewPrompts.forEach((previewPrompt) => {
-      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}`.trim();
-
-    return (
-      <StyledPromptContainer
-        as={tagName || 'div'}
-        id={'preview-prompt'}
-        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;