@pie-element/complex-rubric 2.0.2-next.16 → 2.0.2-next.27

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/plot/utils.js

@@ -0,0 +1,156 @@
+import invariant from 'invariant';
+import range from 'lodash/range';
+import Point from '@mapbox/point-geometry';
+import head from 'lodash/head';
+import tail from 'lodash/tail';
+import isEqual from 'lodash/isEqual';
+
+export const xy = (x, y) => ({ x, y });
+
+export const buildSizeArray = (size, padding) => {
+  padding = Number.isFinite(padding) ? Math.max(padding, 0) : 0;
+  invariant(padding < size, 'padding must be less than size');
+  const half = Math.round(padding * 0.5);
+  return [half, size - half];
+};
+
+export const tickCount = (min, max, step) => {
+  invariant(min < max, 'min must be less than max');
+  const size = Math.abs(min - max);
+  return Math.round(size / step);
+};
+
+export function getInterval(domain, ticks) {
+  const { min, max } = domain;
+  const { major, minor } = ticks;
+
+  if (min >= max) {
+    throw new Error(`min is > max: ${min} > ${max}`);
+  }
+
+  const distance = max - min;
+  const minorTicks = minor > 0 ? minor + 1 : 1;
+  const normalizedMajor = major - 1;
+
+  if (isNaN(normalizedMajor)) {
+    throw new Error('Tick Frequency must be 2 or higher');
+  }
+
+  if (normalizedMajor <= 0) {
+    throw new Error('Tick Frequency must be 2 or higher');
+  }
+
+  const divider = normalizedMajor * minorTicks;
+  const raw = distance / divider;
+  return parseFloat(Number(raw).toFixed(4));
+}
+
+const mkRange = (min, max, interval) => {
+  const raw = range(min, max, interval);
+  /* Fix the last step due to rounding errors */
+  raw.splice(raw.length, 1, max);
+  return raw;
+};
+
+export function snapTo(min, max, interval, value) {
+  if (value >= max) {
+    return max;
+  }
+
+  if (value <= min) {
+    return min;
+  }
+
+  let rng = mkRange(min, max, interval);
+
+  rng = rng.filter((v) => {
+    return Math.abs(value - v) <= interval;
+  });
+
+  return (
+    rng.length &&
+    rng.reduce((prev, curr) => {
+      const currentDistance = Math.abs(curr - value);
+      const previousDistance = Math.abs(prev - value);
+      return currentDistance <= previousDistance ? curr : prev;
+    })
+  );
+}
+
+export function buildTickModel(domain, ticks, interval, scaleFn) {
+  const rng = mkRange(domain.min, domain.max, interval);
+
+  return rng.map((r, index) => {
+    const isMajor = index % (ticks.minor + 1) === 0;
+
+    return {
+      value: r,
+      major: isMajor,
+      x: scaleFn(r),
+    };
+  });
+}
+
+export const polygonToArea = (points) => {
+  const h = head(points);
+  const area = {
+    left: h.x,
+    top: h.y,
+    bottom: h.y,
+    right: h.x,
+  };
+  return tail(points).reduce((a, p) => {
+    a.left = Math.min(a.left, p.x);
+    a.top = Math.max(a.top, p.y);
+    a.bottom = Math.min(a.bottom, p.y);
+    a.right = Math.max(a.right, p.x);
+    return a;
+  }, area);
+};
+
+export const lineToArea = (from, to) => {
+  const left = Math.min(from.x, to.x);
+  const top = Math.max(from.y, to.y);
+  const bottom = Math.min(from.y, to.y);
+  const right = Math.max(from.x, to.x);
+  return { left, top, bottom, right };
+};
+
+export const bounds = (area, domain, range) => {
+  return {
+    left: domain.min - area.left,
+    right: Math.abs(area.right - domain.max),
+    top: Math.abs(area.top - range.max),
+    bottom: range.min - area.bottom,
+  };
+};
+
+export const point = (o) => new Point(o.x, o.y);
+export const getDelta = (from, to) => {
+  return point(to).sub(point(from));
+};
+
+export const bandKey = (d, index) => `${index}-${d.label || '-'}`;
+
+export const isDomainRangeEqual = (graphProps, nextGraphProps) => {
+  return isEqual(graphProps.domain, nextGraphProps.domain) && isEqual(graphProps.range, nextGraphProps.range);
+};
+
+// findLongestWord is also used in graphing
+export const findLongestWord = (label) => {
+  let longestWord = (label || '')
+    .replace(/<[^>]+>/g, '')
+    .split(' ')
+    .sort((a, b) => b.length - a.length);
+
+  return longestWord[0].length;
+};
+
+// amountToIncreaseWidth is also used in graphing
+export const amountToIncreaseWidth = (longestWord) => {
+  if (!longestWord) {
+    return 0;
+  }
+
+  return longestWord * 20;
+};

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles/index';
+import Collapse from '@material-ui/core/Collapse/index';
+import { renderMath } from '../../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}`,
+  },
+  collapsible: {
+    paddingTop: theme.spacing.unit * 2,
+  },
+}))(Collapsible);

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

@@ -0,0 +1,55 @@
+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',
+  CORRECT: green[500],
+  CORRECT_SECONDARY: green[50],
+  INCORRECT: orange[500],
+  INCORRECT_SECONDARY: red[50],
+  MISSING: red[700],
+  PRIMARY: indigo[500],
+  PRIMARY_LIGHT: indigo[200],
+  PRIMARY_DARK: indigo[800],
+  SECONDARY: pink.A400,
+  SECONDARY_LIGHT: pink[200],
+  SECONDARY_DARK: pink[900],
+  BACKGROUND: 'rgba(255,255,255,0)',
+  SECONDARY_BACKGROUND: 'rgba(241,241,241,1)',
+};
+
+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 correct = () => pv('correct', defaults.CORRECT);
+export const correctSecondary = () => pv('correct-secondary', defaults.CORRECT_SECONDARY);
+export const incorrect = () => pv('incorrect', defaults.INCORRECT);
+export const incorrectSecondary = () => pv('incorrect-secondary', defaults.INCORRECT_SECONDARY);
+export const missing = () => pv('missing', defaults.MISSING);
+
+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 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 secondaryBackground = () => pv('secondary-background', defaults.SECONDARY_BACKGROUND);

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

@@ -0,0 +1,100 @@
+/**
+ * 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',
+    fontSize: '12px',
+    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/pie-toolbox/src/code/render-ui/has-text.js

@@ -0,0 +1,14 @@
+const dp = new DOMParser();
+
+const markupToText = (s) => {
+  const root = dp.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/pie-toolbox/src/code/render-ui/html-and-math.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { renderMath } from '../math-rendering';
+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: '',
+  };
+
+  componentDidMount() {
+    if (this.node) {
+      renderMath(this.node);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.node) {
+      renderMath(this.node);
+    }
+  }
+
+  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/pie-toolbox/src/code/render-ui/index.js

@@ -0,0 +1,27 @@
+import * as indicators from './response-indicators';
+import Feedback from './feedback';
+import Collapsible from './collapsible';
+import withUndoReset from './withUndoReset';
+import PreviewLayout from './preview-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';
+
+export {
+  HtmlAndMath,
+  indicators,
+  withUndoReset,
+  Feedback,
+  PreviewLayout,
+  Collapsible,
+  InputContainer,
+  PreviewPrompt,
+  color,
+  Readable,
+  Purpose,
+  hasText,
+};

package/configure/node_modules/@pie-lib/pie-toolbox/src/code/render-ui/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/pie-toolbox/src/code/render-ui/preview-layout.jsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { withStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+
+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,
+  };
+
+  render() {
+    const { children, classes, ariaLabel, role } = this.props;
+    const accessibility = ariaLabel ? { 'aria-label': ariaLabel, role } : {};
+
+    return (
+      <div className={classes.container} {...accessibility}>
+        {children}
+      </div>
+    );
+  }
+}
+
+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;