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

package/src/color.js

@@ -1,151 +0,0 @@
-import { green, indigo, orange, pink, red } from '@mui/material/colors';
-
-export const defaults = {
-  TEXT: 'black',
-  DISABLED: 'grey',
-  DISABLED_SECONDARY: '#ABABAB',
-  CORRECT: green[500],
-  CORRECT_SECONDARY: green[50],
-  CORRECT_TERTIARY: '#0EA449',
-  CORRECT_WITH_ICON: '#087D38',
-  INCORRECT: orange[500],
-  INCORRECT_SECONDARY: red[50],
-  INCORRECT_WITH_ICON: '#BF0D00',
-  MISSING: red[700],
-  MISSING_WITH_ICON: '#6A78A1',
-  PRIMARY: indigo[500],
-  PRIMARY_LIGHT: indigo[200],
-  PRIMARY_DARK: indigo[800],
-  SECONDARY: pink.A400,
-  SECONDARY_LIGHT: pink[200],
-  SECONDARY_DARK: pink[900],
-  TERTIARY: '#146EB3',
-  TERTIARY_LIGHT: '#D0E2F0',
-  BACKGROUND: 'rgba(255,255,255,0)',
-  BACKGROUND_DARK: '#ECEDF1',
-  DROPDOWN_BACKGROUND: '#E0E1E6', // this is used for inline-dropdown
-  // this is only used for multi-trait-rubric, we might want to use BACKGROUND_DARK instead
-  SECONDARY_BACKGROUND: 'rgba(241,241,241,1)',
-  BORDER: '#9A9A9A',
-  BORDER_LIGHT: '#D1D1D1',
-  BORDER_DARK: '#646464',
-  BORDER_GRAY: '#7E8494',
-  // these are used for authored tables
-  TABLE_GRID: 'black',
-  TABLE_GRID_LIGHT: '#dfe2e5',
-  TABLE_STRIPE: '#f6f8fa',
-  BLACK: '#000000',
-  WHITE: '#ffffff',
-  TRANSPARENT: 'transparent',
-  // this is used for multiple-choice accessibility
-  FOCUS_CHECKED: '#BBDEFB',
-  FOCUS_CHECKED_BORDER: '#1565C0',
-  FOCUS_UNCHECKED: '#E0E0E0',
-  FOCUS_UNCHECKED_BORDER: '#757575',
-  // the keyboard focus ring on a button or toolbar control
-  BUTTON_FOCUS_OUTLINE: '#3B82F6',
-  // this is used for select text tokens
-  BLUE_GREY100: '#F3F5F7',
-  BLUE_GREY300: '#C0C3CF',
-  BLUE_GREY600: '#7E8494',
-  BLUE_GREY900: '#152452',
-  // this is used for charting
-  FADED_PRIMARY: '#DCDAFB',
-  // these are used for the math keypad buttons
-  KEYPAD_BUTTON: 'rgb(188, 194, 229)',
-  KEYPAD_BUTTON_OPERATOR: 'rgb(255, 159, 192)',
-  KEYPAD_EMPTY_PLACEHOLDER: 'rgba(245, 0, 87, 0.4)',
-  KEYPAD_BUTTON_HOVER: 'rgb(214, 218, 239)',
-  KEYPAD_BUTTON_OPERATOR_HOVER: 'rgb(255, 197, 217)',
-  KEY_BOARD_FOCUS_INDICATOR: '#2B87FF',
-  // these are used for graphing UI elements
-  BUTTON_BORDER: 'rgba(0, 0, 0, 0.23)',
-  BUTTON_HOVER_BG: 'rgba(0, 0, 0, 0.08)',
-};
-
-Object.freeze(defaults);
-
-export const v =
-  (prefix) =>
-  (...args) => {
-    const fallback = args.pop();
-    return args.reduceRight((acc, v) => {
-      return `var(--${prefix}-${v}, ${acc})`;
-    }, fallback);
-  };
-
-const pv = v('pie');
-
-export const text = () => pv('text', defaults.TEXT);
-export const disabled = () => pv('disabled', defaults.DISABLED);
-export const disabledSecondary = () => pv('disabled-secondary', defaults.DISABLED_SECONDARY);
-export const correct = () => pv('correct', defaults.CORRECT);
-export const correctSecondary = () => pv('correct-secondary', defaults.CORRECT_SECONDARY);
-export const correctTertiary = () => pv('correct-tertiary', defaults.CORRECT_TERTIARY);
-export const correctWithIcon = () => pv('correct-icon', defaults.CORRECT_WITH_ICON);
-export const incorrect = () => pv('incorrect', defaults.INCORRECT);
-export const incorrectWithIcon = () => pv('incorrect-icon', defaults.INCORRECT_WITH_ICON);
-export const incorrectSecondary = () => pv('incorrect-secondary', defaults.INCORRECT_SECONDARY);
-export const missing = () => pv('missing', defaults.MISSING);
-export const missingWithIcon = () => pv('missing-icon', defaults.MISSING_WITH_ICON);
-
-export const primary = () => pv('primary', defaults.PRIMARY);
-export const primaryLight = () => pv('primary-light', defaults.PRIMARY_LIGHT);
-export const primaryDark = () => pv('primary-dark', defaults.PRIMARY_DARK);
-export const primaryText = () => pv('primary-text', 'text', defaults.TEXT);
-export const fadedPrimary = () => pv('faded-primary', defaults.FADED_PRIMARY);
-
-export const secondary = () => pv('secondary', defaults.SECONDARY);
-export const secondaryLight = () => pv('secondary-light', defaults.SECONDARY_LIGHT);
-export const secondaryDark = () => pv('secondary-dark', defaults.SECONDARY_DARK);
-
-export const secondaryText = () => pv('secondary-text', 'text', defaults.TEXT);
-export const background = () => pv('background', defaults.BACKGROUND);
-export const backgroundDark = () => pv('background-dark', defaults.BACKGROUND_DARK);
-export const secondaryBackground = () => pv('secondary-background', defaults.SECONDARY_BACKGROUND);
-export const dropdownBackground = () => pv('dropdown-background', defaults.DROPDOWN_BACKGROUND);
-
-export const tertiary = () => pv('tertiary', defaults.TERTIARY);
-export const tertiaryLight = () => pv('tertiary-light', defaults.TERTIARY_LIGHT);
-
-export const border = () => pv('border', defaults.BORDER);
-export const borderLight = () => pv('border-light', defaults.BORDER_LIGHT);
-export const borderDark = () => pv('border-dark', defaults.BORDER_DARK);
-export const borderGray = () => pv('border-gray', defaults.BORDER_GRAY);
-
-export const tableGrid = () => pv('table-grid', 'text', defaults.TABLE_GRID);
-export const tableGridLight = () => pv('table-grid-light', 'border-light', defaults.TABLE_GRID_LIGHT);
-export const tableStripe = () => pv('table-stripe', 'background-dark', defaults.TABLE_STRIPE);
-
-export const black = () => pv('black', defaults.BLACK);
-export const white = () => pv('white', defaults.WHITE);
-export const transparent = () => defaults.TRANSPARENT;
-
-export const focusChecked = () => pv('focus-checked', defaults.FOCUS_CHECKED);
-export const focusCheckedBorder = () => pv('focus-checked-border', defaults.FOCUS_CHECKED_BORDER);
-export const focusUnchecked = () => pv('focus-unchecked', defaults.FOCUS_UNCHECKED);
-export const focusUncheckedBorder = () => pv('focus-unchecked-border', defaults.FOCUS_UNCHECKED_BORDER);
-export const buttonFocusOutline = () => pv('button-focus-outline', defaults.BUTTON_FOCUS_OUTLINE);
-
-export const blueGrey100 = () => pv('blue-grey-100', defaults.BLUE_GREY100);
-export const blueGrey300 = () => pv('blue-grey-300', defaults.BLUE_GREY300);
-export const blueGrey600 = () => pv('blue-grey-600', defaults.BLUE_GREY600);
-export const blueGrey900 = () => pv('blue-grey-900', defaults.BLUE_GREY900);
-
-export const keypadButton = () => pv('keypad-button', defaults.KEYPAD_BUTTON);
-export const keypadButtonOperator = () => pv('keypad-button-operator', defaults.KEYPAD_BUTTON_OPERATOR);
-export const keypadEmptyPlaceholder = () => pv('keypad-empty-placeholder', defaults.KEYPAD_EMPTY_PLACEHOLDER);
-export const keypadButtonHover = () => pv('keypad-button-hover', defaults.KEYPAD_BUTTON_HOVER);
-export const keypadButtonOperatorHover = () =>
-  pv('keypad-button-operator-hover', defaults.KEYPAD_BUTTON_OPERATOR_HOVER);
-export const keyBoardFocusIndicator = () => pv('keyboard-focus-indicator', defaults.KEY_BOARD_FOCUS_INDICATOR);
-export const buttonBorder = () => pv('button-border', defaults.BUTTON_BORDER);
-export const buttonHoverBg = () => pv('button-hover-bg', defaults.BUTTON_HOVER_BG);
-
-export const visualElementsColors = {
-  AXIS_LINE_COLOR: '#5A53C9',
-  ROLLOVER_FILL_BAR_COLOR: '#050F2D',
-  GRIDLINES_COLOR: '#8E88EA',
-  PLOT_FILL_COLOR: '#1463B3',
-  SHAPES_FILL_COLOR: '#7986cb',
-};

package/src/feedback.jsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import * as color from './color';
-
-const FeedbackContainer = styled('div')({
-  transformOrigin: '0% 0px 0px',
-  width: '100%',
-  display: 'block',
-  overflow: 'hidden',
-  '&.incorrect': {
-    color: '#946202',
-  },
-});
-
-const FeedbackContent = styled('div')({
-  WebkitFontSmoothing: 'antialiased',
-  backgroundColor: `var(--feedback-bg-color, ${color.disabled()})`,
-  borderRadius: '4px',
-  lineHeight: '25px',
-  margin: '0px',
-  padding: '10px',
-  verticalAlign: 'middle',
-  color: 'var(--feedback-color, white)',
-  '&.correct': {
-    backgroundColor: `var(--feedback-correct-bg-color, ${color.correct()})`,
-  },
-  '&.incorrect': {
-    backgroundColor: `var(--feedback-incorrect-bg-color, ${color.incorrect()})`,
-  },
-});
-
-const TransitionWrapper = styled('div')({
-  '&.feedback-enter': {
-    height: '1px',
-  },
-  '&.feedback-enter-active': {
-    height: '45px',
-    transition: 'height 500ms',
-  },
-  '&.feedback-exit': {
-    height: '45px',
-  },
-  '&.feedback-exit-active': {
-    height: '1px',
-    transition: 'height 200ms',
-  },
-});
-
-export class Feedback extends React.Component {
-  static propTypes = {
-    correctness: PropTypes.string,
-    feedback: PropTypes.string,
-  };
-
-  nodeRef = React.createRef();
-
-  renderFeedback() {
-    const { correctness, feedback } = this.props;
-
-    if (!correctness || !feedback) return null;
-
-    return (
-      <CSSTransition key="hasFeedback" nodeRef={this.nodeRef} timeout={{ enter: 500, exit: 200 }} classNames="feedback">
-        <TransitionWrapper ref={this.nodeRef}>
-          <FeedbackContainer>
-            <FeedbackContent className={correctness} dangerouslySetInnerHTML={{ __html: feedback }} />
-          </FeedbackContainer>
-        </TransitionWrapper>
-      </CSSTransition>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        <TransitionGroup>{this.renderFeedback()}</TransitionGroup>
-      </div>
-    );
-  }
-}
-
-export default Feedback;

package/src/has-media.js

@@ -1,16 +0,0 @@
-let parser;
-
-if (typeof window !== 'undefined') {
-  parser = new DOMParser();
-}
-
-/*
- * Check if the string contains at least one media element.
- */
-export const hasMedia = (s) => {
-  if (!s) {
-    return false;
-  }
-  const root = parser.parseFromString(s, 'text/html');
-  return !!root.body.querySelector('img') || !!root.body.querySelector('video') || !!root.body.querySelector('audio');
-};

package/src/has-text.js

@@ -1,18 +0,0 @@
-let parser;
-
-if (typeof window !== 'undefined') {
-  parser = new DOMParser();
-}
-
-const markupToText = (s) => {
-  const root = parser.parseFromString(s, 'text/html');
-  return root.body.textContent;
-};
-
-export const hasText = (s) => {
-  if (!s) {
-    return false;
-  }
-  const tc = markupToText(s);
-  return !!(tc && tc.trim());
-};

package/src/html-and-math.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default class HtmlAndMath extends React.Component {
-  static propTypes = {
-    tag: PropTypes.string,
-    className: PropTypes.string,
-    html: PropTypes.string,
-  };
-
-  static defaultProps = {
-    tag: 'div',
-    html: '',
-  };
-
-  render() {
-    const { tag, className, html } = this.props;
-    const Tag = tag || 'div';
-    return <Tag ref={(r) => (this.node = r)} className={className} dangerouslySetInnerHTML={{ __html: html }} />;
-  }
-}

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;