@pie-element/rubric 8.1.2-next.2 → 8.1.2

package/package.json

@@ -1,99 +1,37 @@
 {
   "name": "@pie-element/rubric",
-  "version": "8.1.2-next.2",
+  "repository": "pie-framework/pie-elements",
+  "version": "8.1.2",
+  "main": "lib/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "default": "./lib/index.js"
+    },
+    "./print": "./src/print.js",
+    "./configure/lib": {
+      "require": "./configure/lib/index.js",
+      "default": "./configure/lib/index.js"
+    }
+  },
   "description": "Rubric Scoring Interaction",
+  "publishConfig": {
+    "access": "public"
+  },
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/style": "^0.8.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/render-ui": "6.1.1-next.37",
-    "prop-types": "^15.8.1",
-    "@pie-element/shared-configure-events": "0.1.0",
-    "debug": "^4.4.3",
-    "@pie-lib/rubric": "2.0.4-next.30",
-    "@pie-lib/config-ui": "13.0.4-next.30",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.1-next.0",
-    "@pie-element/shared-lodash": "0.1.1-next.0"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
-  },
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./delivery": {
-      "types": "./dist/delivery/index.d.ts",
-      "default": "./dist/delivery/index.js"
-    },
-    "./browser/delivery": {
-      "default": "./dist/browser/delivery/index.js"
-    },
-    "./author": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./browser/author": {
-      "default": "./dist/browser/author/index.js"
-    },
-    "./configure": {
-      "types": "./dist/author/index.d.ts",
-      "default": "./dist/author/index.js"
-    },
-    "./controller": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./controller.js": {
-      "types": "./dist/controller/index.d.ts",
-      "default": "./dist/controller/index.js"
-    },
-    "./browser/controller": {
-      "default": "./dist/browser/controller/index.js"
-    },
-    "./print": {
-      "types": "./dist/print/index.d.ts",
-      "default": "./dist/print/index.js"
-    },
-    "./browser/print": {
-      "default": "./dist/browser/print/index.js"
-    },
-    "./runtime-support": {
-      "types": "./dist/runtime-support.d.ts",
-      "default": "./dist/runtime-support.js"
-    }
-  },
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "configure.js",
-    "controller.js",
-    "dist"
-  ],
-  "sideEffects": false,
-  "devDependencies": {
-    "vite": "^8.0.1",
-    "typescript": "^5.9.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0"
+    "@pie-lib/math-rendering": "5.0.2",
+    "@pie-lib/render-ui": "6.1.1",
+    "prop-types": "^15.8.1"
   },
+  "author": "pie framework developers",
+  "license": "ISC",
+  "gitHead": "206ff17a94e8e197744d059f97ad2b9a1bc9145d",
   "scripts": {
-    "build": "bun x vite build && bun x vite build --config ../../../tools/vite/element-browser.config.ts && bun x vite build --config vite.config.iife.ts && bun x tsc --emitDeclarationOnly",
-    "dev": "bun x vite",
-    "demo": "bun x vite --mode demo",
-    "test": "bun x vitest run"
-  },
-  "pie": {
-    "controller": "@pie-element/rubric/controller",
-    "configure": "@pie-element/rubric/configure",
-    "browserSharedDependencies": {
-      "react": "18.2.0",
-      "react-dom": "18.2.0"
-    }
+    "postpublish": "../../scripts/postpublish"
   }
 }

package/src/__tests__/rubric-view.test.jsx

@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import Rubric from '../main';
+
+describe('rubric viewer', () => {
+    const wrapper = (extras) => {
+        const props = {
+            value: {
+                points: ['nothing right', 'a teeny bit right', 'mostly right', 'bingo'],
+                sampleAnswers: [null, 'just right', 'not left', null],
+                excludeZero: false,
+                ...extras,
+            },
+        };
+
+        return render(<Rubric {...props} />);
+    };
+
+    describe('exclude zeros', () => {
+        it('renders correctly with excluded zeroes', async () => {
+            let result = wrapper({
+                excludeZero: true,
+                points: ['a teeny bit right', 'mostly right', 'bingo'],
+                sampleAnswers: ['just right', 'not left', null]
+            });
+            let toggle = result.container.querySelector('#rubric-toggle');
+            await userEvent.click(toggle);
+            expect(result.container.querySelectorAll('li').length).toEqual(5);
+
+            result = wrapper({excludeZero: false});
+            toggle = result.container.querySelector('#rubric-toggle');
+            await userEvent.click(toggle);
+            expect(result.container.querySelectorAll('li').length).toEqual(6);
+        });
+    });
+});

package/src/index.js

@@ -0,0 +1,48 @@
+import Rubric from './main';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import debug from 'debug';
+import { renderMath } from '@pie-lib/math-rendering';
+
+export default class RubricRender extends HTMLElement {
+  constructor() {
+    super();
+    debug.log('constructor called');
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this._root = null;
+  }
+
+  set model(s) {
+    this._model = s;
+    this._render();
+  }
+
+  onModelChanged(m) {
+    this._model = m;
+    this._render();
+  }
+
+  connectedCallback() {
+    this._render();
+  }
+
+  _render() {
+    if (this._model) {
+      const el = React.createElement(Rubric, { value: this._model });
+
+      if (!this._root) {
+        this._root = createRoot(this);
+      }
+      this._root.render(el);
+      queueMicrotask(() => {
+        renderMath(this);
+      });
+    }
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/src/main.jsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import { styled } from '@mui/material/styles';
+import ListItem from '@mui/material/ListItem';
+import List from '@mui/material/List';
+import Collapse from '@mui/material/Collapse';
+import { color, UiLayout } from '@pie-lib/render-ui';
+import PropTypes from 'prop-types';
+
+const StyledUiLayout = styled(UiLayout)({
+  color: color.text(),
+  backgroundColor: color.background(),
+  // apply styles to tables to match the rest of the UI
+  '&:not(.MathJax) table': {
+    borderCollapse: 'collapse',
+  },
+  '&:not(.MathJax) table td, &:not(.MathJax) table th': {
+    padding: '8px 12px',
+    textAlign: 'left',
+  },
+  // reset paragraph margins and line-height inside lists to override client styles
+  '& ul p, & ol p': {
+    marginBottom: 0,
+    marginTop: 0,
+    lineHeight: 'normal',
+  },
+});
+
+const StyledListItem = styled(ListItem)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  padding: '12px 0px',
+});
+
+const Text = styled('div')({
+  color: color.text(),
+});
+
+const TitleText = styled('h3')({
+  color: color.text(),
+  fontSize: '16px',
+  fontWeight: '700',
+  margin: 0,
+  paddingBottom: '6px',
+});
+
+const SampleTitleText = styled('h4')({
+  color: color.text(),
+  fontSize: '16px',
+  fontWeight: 'normal',
+  margin: 0,
+  paddingBottom: '6px',
+});
+
+const RubricToggle = styled('h2')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  cursor: 'pointer',
+  userSelect: 'none',
+  fontSize: theme.typography.fontSize,
+  fontWeight: '500',
+  color: color.tertiary(),
+  margin: 0,
+}));
+
+const ChevronStyle = styled('span')({
+  display: 'inline-flex',
+  transition: 'transform 0.2s',
+  marginLeft: 2,
+  alignSelf: 'center',
+});
+
+const HiddenScreenReader = styled('h2')({
+  position: 'absolute',
+  width: '1px',
+  height: '1px',
+  padding: 0,
+  margin: '-1px',
+  overflow: 'hidden',
+  clip: 'rect(0,0,0,0)',
+  border: 0,
+  whiteSpace: 'nowrap',
+});
+
+export const RubricType = PropTypes.shape({
+  excludeZero: PropTypes.bool,
+  points: PropTypes.arrayOf(PropTypes.string),
+  sampleAnswers: PropTypes.arrayOf(PropTypes.string),
+  animationsDisabled: PropTypes.bool,
+});
+
+class Rubric extends React.Component {
+  dudUrl = 'javascript:;';
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      rubricOpen: false,
+      linkPrefix: 'Show',
+    };
+    this.toggleRubric = this.toggleRubric.bind(this);
+  }
+
+  static propTypes = {
+    model: PropTypes.object.isRequired,
+    animationsDisabled: PropTypes.bool,
+    value: RubricType,
+  };
+
+  toggleRubric() {
+    this.setState({ rubricOpen: !this.state.rubricOpen });
+    this.setState({ linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide' });
+  }
+
+  shouldRenderPoint = (index, value) => {
+    if (!value.excludeZero) {
+      return true;
+    } else {
+      return index !== 0;
+    }
+  };
+
+  render() {
+    const { model, value } = this.props;
+    let { animationsDisabled } = this.props;
+    animationsDisabled = animationsDisabled || value.animationsDisabled;
+
+    if (value && value.points) {
+      const { extraCSSRules } = model || {};
+      const { points, sampleAnswers } = value;
+
+      const rubricList = (
+        <List component="nav">
+          {points
+            .slice(0)
+            .reverse()
+            .map((desc, index) => {
+              index = points.length - index - 1;
+              const pointsLabel = value.excludeZero ? index + 1 : index;
+
+              return (
+                <React.Fragment key={index}>
+                  <StyledListItem key={`P${index}`}>
+                    <TitleText>
+                      {pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`}
+                    </TitleText>
+                    <Text dangerouslySetInnerHTML={{ __html: desc }} />
+                  </StyledListItem>
+
+                  {sampleAnswers && sampleAnswers[index] && (
+                    <StyledListItem key={`S${index}`}>
+                      <SampleTitleText>
+                        Sample Answer
+                      </SampleTitleText>
+                      <Text dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />
+                    </StyledListItem>
+                  )}
+                </React.Fragment>
+              );
+            })}
+        </List>
+      );
+
+      return (
+        <StyledUiLayout extraCSSRules={extraCSSRules}>
+          {/* screen reader only heading for navigation as per PD-5057 */}
+          <HiddenScreenReader>Rubric</HiddenScreenReader>
+          {!animationsDisabled ? (
+            <React.Fragment>
+              <RubricToggle
+                id={'rubric-toggle'}
+                tabIndex={0}
+                role="button"
+                aria-expanded={this.state.rubricOpen}
+                onClick={this.toggleRubric}
+                onKeyPress={(e) => {
+                  if (e.key === 'Enter' || e.key === ' ') this.toggleRubric();
+                }}
+              >
+                {this.state.linkPrefix} Rubric
+                <ChevronStyle aria-hidden="true">
+                  {this.state.rubricOpen ? (
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="18 15 12 9 6 15"></polyline>
+                    </svg>
+                  ) : (
+                    <svg
+                      width="20"
+                      height="20"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    >
+                      <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                  )}
+                </ChevronStyle>
+              </RubricToggle>
+              <Collapse in={this.state.rubricOpen} timeout={{ enter: 225, exit: 195 }}>
+                {rubricList}
+              </Collapse>
+            </React.Fragment>
+          ) : (
+            rubricList
+          )}
+        </StyledUiLayout>
+      );
+    } else {
+      return null;
+    }
+  }
+}
+
+export default Rubric;

package/src/print.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { debounce } from 'lodash-es';
+import Main from './main';
+import { renderMath } from '@pie-lib/math-rendering';
+import debug from 'debug';
+
+const log = debug('pie-element:rubric:print');
+
+const preparePrintModel = (model, opts) => {
+  const instr = opts.role === 'instructor';
+
+  if (!instr) {
+    return {};
+  }
+
+  model.value = { ...model };
+  model.mode = 'evaluate';
+  model.animationsDisabled = true;
+
+  return model;
+};
+
+export default class RubricPrint extends HTMLElement {
+  constructor() {
+    super();
+    this._options = null;
+    this._model = null;
+    this._session = [];
+    this._root = null;
+    this._rerender = debounce(
+      () => {
+        if (this._model && this._session) {
+          const printModel = preparePrintModel(this._model, this._options);
+
+          const element =
+            this._options &&
+            React.createElement(Main, {
+              ...printModel,
+            });
+
+          if (!this._root) {
+            this._root = createRoot(this);
+          }
+          this._root.render(element);
+          queueMicrotask(() => {
+            log('render complete - render math');
+            renderMath(this);
+          });
+        } else {
+          log('skip');
+        }
+      },
+      50,
+      { leading: false, trailing: true },
+    );
+  }
+  set options(o) {
+    this._options = o;
+  }
+
+  set model(s) {
+    this._model = s;
+    this._rerender();
+  }
+
+  connectedCallback() {}
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/configure.js

@@ -1,2 +0,0 @@
-export { default } from './dist/author/index.js';
-export * from './dist/author/index.js';

package/controller.js

@@ -1 +0,0 @@
-export * from './dist/controller/index.js';

package/dist/author/defaults.d.ts

@@ -1,71 +0,0 @@
-/**
- * @synced-from pie-elements/packages/rubric/configure/src/defaults.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.
- */
-declare const _default: {
-    model: {
-        points: string[];
-        sampleAnswers: null[];
-        maxPoints: number;
-        excludeZero: boolean;
-        excludeZeroEnabled: boolean;
-        maxPointsEnabled: boolean;
-    };
-    configuration: {
-        baseInputConfiguration: {
-            h3: {
-                disabled: boolean;
-            };
-            audio: {
-                disabled: boolean;
-            };
-            video: {
-                disabled: boolean;
-            };
-            image: {
-                disabled: boolean;
-            };
-            textAlign: {
-                disabled: boolean;
-            };
-            showParagraphs: {
-                disabled: boolean;
-            };
-            separateParagraphs: {
-                disabled: boolean;
-            };
-        };
-        rubriclessInstruction: {
-            inputConfiguration: {
-                audio: {
-                    disabled: boolean;
-                };
-                video: {
-                    disabled: boolean;
-                };
-                image: {
-                    disabled: boolean;
-                };
-            };
-        };
-        showExcludeZero: {
-            settings: boolean;
-            label: string;
-        };
-        showMaxPoint: {
-            settings: boolean;
-            label: string;
-        };
-        settingsPanelDisabled: boolean;
-        mathMlOptions: {
-            mmlOutput: boolean;
-            mmlEditing: boolean;
-        };
-        maxMaxPoints: number;
-    };
-};
-export default _default;

package/dist/author/defaults.js

@@ -1,53 +0,0 @@
-//#region src/author/defaults.ts
-var e = {
-	model: {
-		points: [
-			"",
-			"",
-			"",
-			""
-		],
-		sampleAnswers: [
-			null,
-			null,
-			null,
-			null
-		],
-		maxPoints: 3,
-		excludeZero: !1,
-		excludeZeroEnabled: !0,
-		maxPointsEnabled: !0
-	},
-	configuration: {
-		baseInputConfiguration: {
-			h3: { disabled: !0 },
-			audio: { disabled: !1 },
-			video: { disabled: !1 },
-			image: { disabled: !1 },
-			textAlign: { disabled: !0 },
-			showParagraphs: { disabled: !1 },
-			separateParagraphs: { disabled: !0 }
-		},
-		rubriclessInstruction: { inputConfiguration: {
-			audio: { disabled: !1 },
-			video: { disabled: !1 },
-			image: { disabled: !1 }
-		} },
-		showExcludeZero: {
-			settings: !0,
-			label: "Ability to exclude zero"
-		},
-		showMaxPoint: {
-			settings: !0,
-			label: "Show max points dropdown"
-		},
-		settingsPanelDisabled: !1,
-		mathMlOptions: {
-			mmlOutput: !1,
-			mmlEditing: !1
-		},
-		maxMaxPoints: 9
-	}
-};
-//#endregion
-export { e as default };

package/dist/author/index.d.ts

@@ -1,21 +0,0 @@
-/**
- * @synced-from pie-elements/packages/rubric/configure/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.
- */
-export default class RubricElement extends HTMLElement {
-    constructor();
-    updateModelAccordingToReceivedProps: any;
-    set model(m: any);
-    set configuration(c: any);
-    onModelChanged(m: any): void;
-    onConfigurationChanged: any;
-    insertImage(handler: any): void;
-    onDeleteImage(src: any, done: any): void;
-    connectedCallback(): void;
-    _render(): void;
-    disconnectedCallback(): void;
-}