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

package/src/index.js

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,41 @@
+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

@@ -0,0 +1,280 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,82 @@
+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/{dist/transform-headings.d.ts → src/transform-headings.js}

@@ -1,11 +1,3 @@
-/**
- * @synced-from pie-lib/packages/render-ui/src/transform-headings.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.
- */
 /**
  * transformDataHeadings
  *
@@ -26,4 +18,33 @@
  * // baseLevel=2, data-heading="heading2" → <h3 data-heading="heading2">…</h3>
  * // baseLevel=3, data-heading="heading1" → <h3 data-heading="heading1">…</h3>
  */
-export declare function transformDataHeadings(html?: string, baseLevel?: number): string;
+export function transformDataHeadings(html = '', baseLevel = 2) {
+  if (!html) return html;
+
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+
+  doc.body.querySelectorAll('[data-heading]').forEach((el) => {
+    const raw = el.getAttribute('data-heading') || '';
+    const n = parseInt(raw.replace('heading', ''), 10);
+
+    if (!Number.isFinite(n)) return; // skip malformed values
+
+    const level = Math.min(6, Math.max(1, baseLevel + n - 1));
+    const heading = doc.createElement(`h${level}`);
+
+    heading.setAttribute('data-heading', raw);
+
+    // Copy all other attributes (class, id, style, …)
+    Array.from(el.attributes).forEach((attr) => {
+      if (attr.name !== 'data-heading') {
+        heading.setAttribute(attr.name, attr.value);
+      }
+    });
+
+    heading.innerHTML = el.innerHTML;
+    el.replaceWith(heading);
+  });
+
+  return doc.body.innerHTML;
+}

package/src/ui-layout.jsx

@@ -0,0 +1,96 @@
+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;