@pie-lib/render-ui 0.1.0

package/src/color.ts

@@ -0,0 +1,147 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/color.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.
+ */
+
+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',
+  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',
+  // 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)',
+  // 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 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 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 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.tsx

@@ -0,0 +1,94 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/feedback.jsx
+ * @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.
+ */
+
+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.js';
+
+const FeedbackContainer: any = styled('div')({
+  transformOrigin: '0% 0px 0px',
+  width: '100%',
+  display: 'block',
+  overflow: 'hidden',
+  '&.incorrect': {
+    color: '#946202',
+  },
+});
+
+const FeedbackContent: any = 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: any = 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.ts

@@ -0,0 +1,26 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/has-media.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.
+ */
+
+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.ts

@@ -0,0 +1,28 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/has-text.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.
+ */
+
+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.tsx

@@ -0,0 +1,31 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/html-and-math.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.
+ */
+
+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.ts

@@ -0,0 +1,45 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/index.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.
+ */
+
+import * as indicators from './response-indicators.js';
+import Feedback from './feedback.js';
+import Collapsible from './collapsible/index.js';
+import withUndoReset from './withUndoReset.js';
+import PreviewLayout from './preview-layout.js';
+import UiLayout from './ui-layout.js';
+import HtmlAndMath from './html-and-math.js';
+import InputContainer from './input-container.js';
+import PreviewPrompt from './preview-prompt.js';
+import Readable from './readable.js';
+import Purpose from './purpose.js';
+import * as color from './color.js';
+import { hasText } from './has-text.js';
+import { hasMedia } from './has-media.js';
+import EnableAudioAutoplayImage from './assets/enableAudioAutoplayImage.js';
+
+export {
+  HtmlAndMath,
+  indicators,
+  withUndoReset,
+  Feedback,
+  UiLayout,
+  PreviewLayout,
+  Collapsible,
+  InputContainer,
+  PreviewPrompt,
+  color,
+  Readable,
+  Purpose,
+  hasText,
+  hasMedia,
+  EnableAudioAutoplayImage,
+};
+// Non-synced pie-elements-ng exports
+export { InlineMenu } from './inline-menu.js';

package/src/inline-menu.tsx

@@ -0,0 +1,62 @@
+// @ts-nocheck
+/**
+ * InlineMenu - A wrapper around MUI's Menu component for inline contexts
+ *
+ * This component fixes the issue where MUI's Menu creates a modal overlay
+ * that covers the entire screen with a white background. It's designed for
+ * use in inline contexts like dropdowns within text or other UI elements.
+ *
+ * Key differences from standard MUI Menu:
+ * - No backdrop (hideBackdrop)
+ * - Transparent modal root (doesn't block UI)
+ * - No scroll locking (disableScrollLock)
+ * - Menu itself remains interactive
+ *
+ * This file is NOT synced from upstream - it's specific to pie-elements-ng.
+ */
+
+import React from 'react';
+import Menu, { MenuProps } from '@mui/material/Menu';
+
+/**
+ * InlineMenu component that wraps MUI Menu without the blocking backdrop
+ *
+ * @example
+ * ```tsx
+ * <InlineMenu
+ *   anchorEl={anchorEl}
+ *   open={Boolean(anchorEl)}
+ *   onClose={handleClose}
+ * >
+ *   <MenuItem onClick={handleOption1}>Option 1</MenuItem>
+ *   <MenuItem onClick={handleOption2}>Option 2</MenuItem>
+ * </InlineMenu>
+ * ```
+ */
+export const InlineMenu: React.FC<MenuProps> = ({ slotProps, ...props }) => {
+  return (
+    <Menu
+      {...props}
+      disableScrollLock
+      hideBackdrop
+      slotProps={{
+        ...slotProps,
+        root: {
+          ...slotProps?.root,
+          style: {
+            backgroundColor: 'transparent',
+            pointerEvents: 'none',
+            ...slotProps?.root?.style,
+          },
+        },
+        paper: {
+          ...slotProps?.paper,
+          style: {
+            pointerEvents: 'auto',
+            ...slotProps?.paper?.style,
+          },
+        },
+      }}
+    />
+  );
+};

package/src/input-container.tsx

@@ -0,0 +1,57 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/input-container.jsx
+ * @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.
+ */
+
+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: any = styled(FormControl)(({ theme }) => ({
+  margin: 0,
+  padding: 0,
+  flex: '1 0 auto',
+  minWidth: theme.spacing(4),
+}));
+
+const StyledInputLabel: any = 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.tsx

@@ -0,0 +1,51 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/render-ui/src/preview-layout.jsx
+ * @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.
+ */
+
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import PropTypes from 'prop-types';
+import UiLayout from './ui-layout.js';
+
+const StyledUiLayout: any = 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;