@pie-element/ebsr 11.0.0 → 12.0.1-esmbeta.1

package/configure/node_modules/@pie-lib/render-ui/src/collapsible/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles/index';
+import Collapse from '@material-ui/core/Collapse/index';
+import { renderMath } from '@pie-lib/math-rendering';
+import PropTypes from 'prop-types';
+
+export class Collapsible extends React.Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    children: PropTypes.object,
+    labels: PropTypes.shape({
+      visible: PropTypes.string,
+      hidden: PropTypes.string,
+    }),
+  };
+
+  static defaultProps = {
+    labels: {},
+  };
+
+  state = {
+    expanded: false,
+  };
+
+  toggleExpanded = () => {
+    this.setState((state) => ({ expanded: !state.expanded }));
+  };
+
+  componentDidMount() {
+    renderMath(this.root);
+  }
+
+  componentDidUpdate() {
+    renderMath(this.root);
+  }
+
+  render() {
+    const { classes, labels, children, className } = this.props;
+    const title = this.state.expanded ? labels.visible || 'Hide' : labels.hidden || 'Show';
+
+    return (
+      <div className={className} ref={(r) => (this.root = r)}>
+        <div onClick={this.toggleExpanded}>
+          <span className={classes.title}>{title}</span>
+        </div>
+        <Collapse in={this.state.expanded} timeout="auto" unmountOnExit className={classes.collapsible}>
+          {children}
+        </Collapse>
+      </div>
+    );
+  }
+}
+
+export default withStyles((theme) => ({
+  title: {
+    color: theme.palette.primary.light,
+    borderBottom: `1px dotted ${theme.palette.primary.light}`,
+    cursor: 'pointer',
+  },
+  collapsible: {
+    paddingTop: theme.spacing.unit * 2,
+  },
+}))(Collapsible);

package/configure/node_modules/@pie-lib/render-ui/src/color.js

@@ -0,0 +1,121 @@
+import green from '@material-ui/core/colors/green';
+import orange from '@material-ui/core/colors/orange';
+import pink from '@material-ui/core/colors/pink';
+import indigo from '@material-ui/core/colors/indigo';
+import red from '@material-ui/core/colors/red';
+
+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',
+};
+
+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 visualElementsColors = {
+  AXIS_LINE_COLOR: '#5A53C9',
+  ROLLOVER_FILL_BAR_COLOR: '#050F2D',
+  GRIDLINES_COLOR: '#8E88EA',
+  PLOT_FILL_COLOR: '#1463B3',
+};

package/configure/node_modules/@pie-lib/render-ui/src/feedback.jsx

@@ -0,0 +1,99 @@
+/**
+ * Lifted from multiple-choice - TODO: create a shared package for it.
+ */
+import { withStyles } from '@material-ui/core/styles';
+
+import React from 'react';
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import * as color from './color';
+
+const styleSheet = {
+  corespringFeedback: {
+    transformOrigin: '0% 0px 0px',
+    width: '100%',
+    display: 'block',
+    overflow: 'hidden',
+    '&:.incorrect': {
+      color: '#946202',
+    },
+  },
+  content: {
+    '-webkit-font-smoothing': 'antialiased',
+    backgroundColor: `var(--feedback-bg-color, ${color.disabled()})`,
+    borderRadius: '4px',
+    fontFamily: '"Roboto", "Noto", sans-serif',
+    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()})`,
+  },
+  feedbackEnter: {
+    height: '1px',
+  },
+  feedbackEnterActive: {
+    height: '45px',
+    transition: 'height 500ms',
+  },
+  feedbackLeave: {
+    height: '45px',
+  },
+  feedbackLeaveActive: {
+    height: '1px',
+    transition: 'height 200ms',
+  },
+};
+
+export class Feedback extends React.Component {
+  static propTypes = {
+    correctness: PropTypes.string,
+    feedback: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+  };
+
+  render() {
+    const { correctness, feedback, classes } = this.props;
+
+    function chooseFeedback(correctness) {
+      if (correctness && feedback) {
+        return (
+          <CSSTransition
+            classNames={{
+              enter: classes.feedbackEnter,
+              enterActive: classes.feedbackEnterActive,
+              leave: classes.feedbackLeave,
+              leaveActive: classes.feedbackLeaveActive,
+            }}
+            key="hasFeedback"
+            timeout={{ enter: 500, exit: 300 }}
+          >
+            <div className={classes.corespringFeedback}>
+              <div
+                className={classNames(classes.content, classes[correctness])}
+                dangerouslySetInnerHTML={{ __html: feedback }}
+              />
+            </div>
+          </CSSTransition>
+        );
+      } else {
+        return null;
+      }
+    }
+
+    return (
+      <div>
+        <TransitionGroup>{chooseFeedback(correctness)}</TransitionGroup>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styleSheet, { name: 'Feedback' })(Feedback);

package/configure/node_modules/@pie-lib/render-ui/src/has-media.js

@@ -0,0 +1,16 @@
+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/configure/node_modules/@pie-lib/render-ui/src/has-text.js

@@ -0,0 +1,18 @@
+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/configure/node_modules/@pie-lib/render-ui/src/html-and-math.js

@@ -0,0 +1,21 @@
+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/configure/node_modules/@pie-lib/render-ui/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 AppendCSSRules from './append-css-rules';
+
+export {
+  AppendCSSRules,
+  HtmlAndMath,
+  indicators,
+  withUndoReset,
+  Feedback,
+  UiLayout,
+  PreviewLayout,
+  Collapsible,
+  InputContainer,
+  PreviewPrompt,
+  color,
+  Readable,
+  Purpose,
+  hasText,
+  hasMedia,
+  EnableAudioAutoplayImage,
+};

package/configure/node_modules/@pie-lib/render-ui/src/input-container.jsx

@@ -0,0 +1,41 @@
+import InputLabel from '@material-ui/core/InputLabel';
+import PropTypes from 'prop-types';
+import React from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import FormControl from '@material-ui/core/FormControl';
+
+const RawInputContainer = (props) => {
+  const { label, className, children, classes } = props;
+  const names = classNames(classes.formControl, className);
+
+  return (
+    <FormControl className={names}>
+      <InputLabel className={classes.label} shrink={true}>
+        {label}
+      </InputLabel>
+      {children}
+    </FormControl>
+  );
+};
+
+RawInputContainer.propTypes = {
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
+  className: PropTypes.string,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles((theme) => ({
+  formControl: {
+    marginLeft: 0,
+    marginRight: 0,
+    paddingBottom: theme.spacing.unit,
+    flex: '1 0 auto',
+    minWidth: theme.spacing.unit * 4,
+  },
+  label: {
+    fontSize: 'inherit',
+    whiteSpace: 'nowrap',
+  },
+}))(RawInputContainer);

package/configure/node_modules/@pie-lib/render-ui/src/preview-layout.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import UiLayout from './ui-layout';
+
+class PreviewLayout extends React.Component {
+  static propTypes = {
+    ariaLabel: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    classes: PropTypes.object,
+    role: PropTypes.string,
+    extraCSSRules: PropTypes.shape({
+      names: PropTypes.arrayOf(PropTypes.string),
+      rules: PropTypes.string,
+    }),
+    fontSizeFactor: PropTypes.number,
+  };
+
+  render() {
+    const { children, classes, ariaLabel, role, extraCSSRules, fontSizeFactor } = this.props;
+    const accessibility = ariaLabel ? { 'aria-label': ariaLabel, role } : {};
+
+    return (
+      <UiLayout
+        className={classes.container}
+        {...accessibility}
+        extraCSSRules={extraCSSRules}
+        fontSizeFactor={fontSizeFactor}
+      >
+        {children}
+      </UiLayout>
+    );
+  }
+}
+
+const styles = () => ({
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+  },
+});
+
+const theme = createMuiTheme({
+  typography: {
+    useNextVariants: true,
+  },
+  palette: {
+    action: {
+      disabled: 'rgba(0, 0, 0, 0.54);',
+    },
+  },
+  overrides: {
+    MuiRadio: {
+      root: {
+        '&$checked': {
+          color: '#3f51b5 !important',
+        },
+      },
+    },
+    MuiCheckbox: {
+      root: {
+        '&$checked': {
+          color: '#3f51b5 !important',
+        },
+      },
+    },
+    MuiTabs: {
+      root: {
+        borderBottom: '1px solid #eee',
+      },
+    },
+    MuiSwitch: {
+      root: {
+        '&$checked': {
+          color: '#3f51b5 !important',
+          '& + $bar': {
+            backgroundColor: '#3f51b5 !important',
+            opacity: 0.5,
+          },
+        },
+      },
+    },
+  },
+});
+
+const Styled = withStyles(styles)(PreviewLayout);
+
+const RootElem = (props) => (
+  <MuiThemeProvider theme={theme}>
+    <Styled {...props} />
+  </MuiThemeProvider>
+);
+
+export default RootElem;