@pie-lib/rubric 2.1.0-beta.9 → 3.0.0-next.36

package/dist/authoring.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @synced-from pie-lib/packages/rubric/src/authoring.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';
+export declare const RubricType: PropTypes.Requireable<PropTypes.InferProps<{
+    excludeZero: PropTypes.Requireable<boolean>;
+    points: PropTypes.Requireable<(string | null | undefined)[]>;
+    sampleAnswers: PropTypes.Requireable<(string | null | undefined)[]>;
+    maxPoints: PropTypes.Requireable<number>;
+    rubriclessInstruction: PropTypes.Requireable<string>;
+}>>;
+export declare const PointConfig: (props: any) => React.JSX.Element;
+export declare class RawAuthoring extends React.Component {
+    static propTypes: {
+        value: PropTypes.Requireable<PropTypes.InferProps<{
+            excludeZero: PropTypes.Requireable<boolean>;
+            points: PropTypes.Requireable<(string | null | undefined)[]>;
+            sampleAnswers: PropTypes.Requireable<(string | null | undefined)[]>;
+            maxPoints: PropTypes.Requireable<number>;
+            rubriclessInstruction: PropTypes.Requireable<string>;
+        }>>;
+        config: PropTypes.Requireable<object>;
+        pluginOpts: PropTypes.Requireable<object>;
+        rubricless: PropTypes.Requireable<boolean>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    static defaultProps: {};
+    dragEnd: any;
+    changeRubriclessInstruction: any;
+    changeMaxPoints: any;
+    changeContent: any;
+    excludeZeros: any;
+    getPointForIndex: any;
+    getMaxPoint: (value: any) => any;
+    shouldRenderPoint: any;
+    onPointMenuChange: any;
+    render(): React.JSX.Element;
+}
+declare const Reverse: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        value: PropTypes.Requireable<PropTypes.InferProps<{
+            excludeZero: PropTypes.Requireable<boolean>;
+            points: PropTypes.Requireable<(string | null | undefined)[]>;
+            sampleAnswers: PropTypes.Requireable<(string | null | undefined)[]>;
+            maxPoints: PropTypes.Requireable<number>;
+            rubriclessInstruction: PropTypes.Requireable<string>;
+        }>>;
+        config: PropTypes.Requireable<object>;
+        pluginOpts: PropTypes.Requireable<object>;
+        rubricless: PropTypes.Requireable<boolean>;
+        getIndex: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+};
+export default Reverse;

package/dist/authoring.js

@@ -0,0 +1,298 @@
+import e from "./point-menu.js";
+import t from "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import i from "@mui/material/InputLabel";
+import a from "@mui/material/OutlinedInput";
+import o from "@mui/material/Select";
+import s from "@mui/material/FormControl";
+import c from "@mui/material/MenuItem";
+import { range as l, takeRight as u, times as d } from "@pie-element/shared-lodash";
+import f from "@mui/material/Checkbox";
+import p from "@mui/material/FormGroup";
+import m from "@mui/material/FormControlLabel";
+import h from "@mui/material/Typography";
+import g from "@mui/icons-material/DragIndicator";
+import { DragDropContext as _, Draggable as v, Droppable as y } from "@hello-pangea/dnd";
+import b from "debug";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+import C from "@pie-lib/editable-html-tip-tap";
+import { InputContainer as w } from "@pie-lib/config-ui";
+import { grey as T } from "@mui/material/colors";
+//#region src/authoring.tsx
+var E = b("pie-lib:rubric:authoring"), D = (e, t, n) => {
+	let r = Array.from(e), [i] = r.splice(t, 1);
+	return r.splice(n, 0, i), r;
+}, O = n.shape({
+	excludeZero: n.bool,
+	points: n.arrayOf(n.string),
+	sampleAnswers: n.arrayOf(n.string),
+	maxPoints: n.number,
+	rubriclessInstruction: n.string
+}), k = (e) => {
+	let { value: t, onChange: n, max: r } = e, u = "max-points-label";
+	return /* @__PURE__ */ S(s, {
+		sx: {
+			minWidth: 120,
+			m: 1
+		},
+		variant: "outlined",
+		children: [/* @__PURE__ */ x(i, {
+			id: u,
+			children: "Max Points"
+		}), /* @__PURE__ */ x(o, {
+			labelId: u,
+			label: "Max Points",
+			value: t,
+			onChange: (e) => n(e.target.value),
+			input: /* @__PURE__ */ x(a, { label: "Max Points" }),
+			MenuProps: { transitionDuration: {
+				enter: 225,
+				exit: 195
+			} },
+			children: l(1, r + 1).map((e) => /* @__PURE__ */ x(c, {
+				value: e,
+				children: e
+			}, `${e}`))
+		})]
+	});
+}, A = (e) => e === null || e === "null", j = r("div")(() => ({
+	display: "flex",
+	width: "100%",
+	position: "relative"
+})), M = r("div")(({ theme: e }) => ({
+	width: "100%",
+	backgroundColor: `${e.palette.common.white}`
+})), N = r(g)(({ theme: e }) => ({
+	paddingTop: e.spacing(1),
+	color: T[500]
+})), P = r(h)(({ theme: e }) => ({
+	color: T[500],
+	paddingBottom: e.spacing(1),
+	textTransform: "uppercase"
+})), F = r("div")(({ theme: e }) => ({ paddingLeft: e.spacing(3) })), I = r("div")(({ theme: e }) => ({
+	fontSize: e.typography.fontSize - 2,
+	color: e.palette.error.main,
+	paddingLeft: e.spacing(3),
+	paddingTop: e.spacing(1)
+})), L = r("div")(() => ({
+	position: "absolute",
+	right: 0
+})), R = (t) => {
+	let { points: n, content: r, sampleAnswer: i, mathMlOptions: a = {}, error: o, pluginOpts: s = {} } = t, c = `${n} ${n <= 1 ? "pt" : "pts"}`, l = A(i);
+	return /* @__PURE__ */ S("div", { children: [
+		/* @__PURE__ */ x(P, {
+			variant: "overline",
+			children: c
+		}),
+		/* @__PURE__ */ S(j, { children: [
+			/* @__PURE__ */ x(N, {}),
+			/* @__PURE__ */ x(M, { children: /* @__PURE__ */ x(C, {
+				error: o,
+				pluginProps: s,
+				markup: r,
+				onChange: t.onChange,
+				mathMlOptions: a
+			}) }),
+			/* @__PURE__ */ x(L, { children: /* @__PURE__ */ x(e, {
+				showSampleAnswer: l,
+				onChange: t.onMenuChange
+			}) })
+		] }),
+		o && /* @__PURE__ */ x(I, { children: o }),
+		!l && /* @__PURE__ */ S(F, { children: [/* @__PURE__ */ x(N, {
+			as: h,
+			variant: "overline",
+			children: "Sample Response"
+		}), /* @__PURE__ */ x(M, { children: /* @__PURE__ */ x(C, {
+			markup: i,
+			pluginProps: s,
+			onChange: t.onSampleChange,
+			mathMlOptions: a
+		}) })] })
+	] });
+}, z = r("div")(({ theme: e }) => ({
+	backgroundColor: T[200],
+	borderWidth: 1,
+	borderStyle: "solid",
+	borderColor: T[300],
+	padding: e.spacing(2),
+	margin: e.spacing(1)
+})), B = r(w)(({ theme: e }) => ({
+	width: "100%",
+	paddingTop: e.spacing(2.5),
+	marginBottom: e.spacing(2),
+	marginTop: e.spacing(1),
+	"& .MuiFormControl-root": { width: "100%" },
+	"& > .MuiFormLabel-root.MuiInputLabel-shrink": {
+		fontSize: e.typography.fontSize + 2,
+		transform: "translate(0, 1.5px) scale(0.75)"
+	}
+})), V = r("div")(() => ({ display: "none" })), H = r("div")(({ theme: e }) => ({
+	paddingTop: e.spacing(1),
+	paddingBottom: e.spacing(1)
+})), U = r(h)(({ theme: e }) => ({
+	paddingLeft: e.spacing(1),
+	margin: e.spacing(1)
+})), W = class extends t.Component {
+	static propTypes = {
+		value: O,
+		config: n.object,
+		pluginOpts: n.object,
+		rubricless: n.bool,
+		onChange: n.func
+	};
+	static defaultProps = {};
+	dragEnd = (e) => {
+		if (!e.destination) return;
+		let { value: t, onChange: n } = this.props, r = D(t.points, e.source.index, e.destination.index), i = D(t.sampleAnswers, e.source.index, e.destination.index);
+		n({
+			...t,
+			points: r,
+			sampleAnswers: i
+		});
+	};
+	changeRubriclessInstruction = (e) => {
+		let { value: t, onChange: n } = this.props;
+		n({
+			...t,
+			rubriclessInstruction: e
+		});
+	};
+	changeMaxPoints = (e) => {
+		let { value: t, onChange: n, rubricless: r } = this.props, i = t.points.length - 1;
+		E("current", i, "new: ", e);
+		let a, o;
+		e > i && (a = d(e - i).map(() => "").concat(t.points), o = d(e - i).map(() => null).concat(t.sampleAnswers)), e < i && (E("less than"), a = u(t.points, e + 1), o = u(t.sampleAnswers, e + 1)), n(a && !r ? {
+			...t,
+			points: a,
+			sampleAnswers: o,
+			maxPoints: e
+		} : {
+			...t,
+			maxPoints: e
+		});
+	};
+	changeContent = (e, t, n) => {
+		if (E(`changeModel[${n}]:`, e, t), n !== "points" && n !== "sampleAnswers") return;
+		let { value: r, onChange: i } = this.props, a = r[n] && Array.from(r[n]);
+		a.splice(e, 1, t), E(`changeModel[${n}]:`, a), i({
+			...r,
+			[n]: a
+		});
+	};
+	excludeZeros = () => {
+		let { value: e, onChange: t } = this.props;
+		t({
+			...e,
+			excludeZero: !e.excludeZero
+		});
+	};
+	getPointForIndex = (e, t) => (t.excludeZero ? t.points.length - 1 + 1 : t.points.length - 1) - e;
+	getMaxPoint = (e) => e.excludeZero ? e.points.length : e.points.length - 1;
+	shouldRenderPoint = (e, t) => this.getPointForIndex(e, t) > 0 || !t.excludeZero;
+	onPointMenuChange = (e, t) => {
+		if (t === "sample") {
+			let { value: t } = this.props;
+			A(Array.from(t.sampleAnswers || [])[e]) ? this.changeContent(e, "", "sampleAnswers") : this.changeContent(e, null, "sampleAnswers");
+		}
+	};
+	render() {
+		let { value: e, mathMlOptions: t = {}, config: n = {}, rubricless: r = !1, pluginOpts: i = {} } = this.props, { excludeZeroEnabled: a = !0, maxPointsEnabled: o = !0, errors: s = {}, rubriclessInstructionEnabled: c = !1, maxPoints: l = 10 } = e || {}, { rubriclessInstruction: u = {}, maxMaxPoints: d = 10 } = n || {}, { pointsDescriptorsErrors: h } = s || {};
+		e && Number.isFinite(e.maxPoints) && console.warn("maxPoints is deprecated - remove from model");
+		let g = r ? l : e.excludeZero ? e.points.length : e.points.length - 1;
+		return /* @__PURE__ */ S("div", { children: [
+			/* @__PURE__ */ x(U, {
+				variant: "h5",
+				children: "Rubric"
+			}),
+			/* @__PURE__ */ S(p, {
+				row: !0,
+				children: [o && /* @__PURE__ */ x(k, {
+					max: d < 100 ? d : 100,
+					value: g,
+					onChange: this.changeMaxPoints,
+					pluginOpts: i
+				}), a && /* @__PURE__ */ x(m, {
+					label: "Exclude zeros",
+					control: /* @__PURE__ */ x(f, {
+						checked: e.excludeZero,
+						onChange: this.excludeZeros
+					})
+				})]
+			}),
+			c && r && /* @__PURE__ */ x(B, {
+				label: u.label,
+				children: /* @__PURE__ */ x(C, {
+					markup: e.rubriclessInstruction || "",
+					onChange: this.changeRubriclessInstruction,
+					pluginProps: i,
+					nonEmpty: !1,
+					disableUnderline: !0,
+					languageCharactersProps: [{ language: "spanish" }, { language: "special" }],
+					mathMlOptions: t,
+					autoWidthToolbar: !0
+				})
+			}),
+			/* @__PURE__ */ x("div", { children: r ? /* @__PURE__ */ x(V, {}) : /* @__PURE__ */ x(z, { children: /* @__PURE__ */ x(_, {
+				onDragEnd: this.dragEnd,
+				children: /* @__PURE__ */ x(y, {
+					droppableId: "droppable",
+					children: (n) => /* @__PURE__ */ S("div", {
+						...n.droppableProps,
+						ref: n.innerRef,
+						children: [e.points.map((n, r) => this.shouldRenderPoint(r, e) && /* @__PURE__ */ x(v, {
+							index: r,
+							draggableId: r.toString(),
+							children: (a) => /* @__PURE__ */ x(H, {
+								ref: a.innerRef,
+								...a.draggableProps,
+								...a.dragHandleProps,
+								children: /* @__PURE__ */ x(R, {
+									points: this.getPointForIndex(r, e),
+									content: n,
+									error: h && h[e.points.length - 1 - r],
+									sampleAnswer: e.sampleAnswers && e.sampleAnswers[r],
+									onChange: (e) => this.changeContent(r, e, "points"),
+									onSampleChange: (e) => this.changeContent(r, e, "sampleAnswers"),
+									onMenuChange: (e) => this.onPointMenuChange(r, e),
+									mathMlOptions: t,
+									pluginOpts: i
+								})
+							})
+						}, `${n.points}-${r}`)), n.placeholder]
+					})
+				})
+			}) }) })
+		] });
+	}
+}, G = (e) => {
+	let { rubricless: t = !1, config: n = {}, pluginOpts: r = {} } = e || {}, i = Array.from(e.value.points || []).reverse(), a = Array.from(e.value.sampleAnswers || []).reverse();
+	return i.length > a.length && (a = d(i.length - a.length).map(() => null).concat(a)), /* @__PURE__ */ x(W, {
+		value: {
+			...e.value,
+			points: i,
+			sampleAnswers: a
+		},
+		config: n,
+		onChange: (t) => {
+			e.onChange({
+				...t,
+				points: Array.from(t.points || []).reverse(),
+				sampleAnswers: Array.from(t.sampleAnswers || []).reverse()
+			});
+		},
+		rubricless: t,
+		pluginOpts: r
+	});
+};
+G.propTypes = {
+	value: O,
+	config: n.object,
+	pluginOpts: n.object,
+	rubricless: n.bool,
+	getIndex: n.func,
+	onChange: n.func
+};
+//#endregion
+export { R as PointConfig, W as RawAuthoring, O as RubricType, G as default };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-lib/packages/rubric/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 Authoring from './authoring.js';
+declare const RUBRIC_TYPES: {
+    SIMPLE_RUBRIC: string;
+    MULTI_TRAIT_RUBRIC: string;
+    RUBRICLESS: string;
+};
+export { Authoring, RUBRIC_TYPES };

package/dist/index.js

@@ -0,0 +1,9 @@
+import e from "./authoring.js";
+//#region src/index.ts
+var t = {
+	SIMPLE_RUBRIC: "simpleRubric",
+	MULTI_TRAIT_RUBRIC: "multiTraitRubric",
+	RUBRICLESS: "rubricless"
+};
+//#endregion
+export { e as Authoring, t as RUBRIC_TYPES };

package/dist/point-menu.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-lib/packages/rubric/src/point-menu.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 PropTypes from 'prop-types';
+import React from 'react';
+export declare class IconMenu extends React.Component {
+    static propTypes: {
+        opts: PropTypes.Requireable<object>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+    };
+    constructor(props: any);
+    handleClick: (event: any) => void;
+    handleRequestClose: () => void;
+    render(): React.JSX.Element;
+}
+export default class PointMenu extends React.Component {
+    static propTypes: {
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        showSampleAnswer: PropTypes.Validator<boolean>;
+    };
+    render(): React.JSX.Element;
+}

package/dist/point-menu.js

@@ -0,0 +1,73 @@
+import e from "react";
+import t from "prop-types";
+import n from "@mui/material/MenuItem";
+import * as r from "@pie-lib/render-ui";
+import { InlineMenu as i } from "@pie-lib/render-ui";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/icons-material/MoreVert";
+import c from "@mui/icons-material/MoreHoriz";
+import l from "@mui/material/IconButton";
+//#region src/point-menu.tsx
+function u(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function d(e, t) {
+	return !e || u(e) ? e : u(e.default) ? e.default : t && u(e[t]) ? e[t] : t && u(e[t]?.default) ? e[t].default : e;
+}
+var f = d(i, "InlineMenu") || d(h.InlineMenu, "InlineMenu"), p = r, m = p.default, h = m && typeof m == "object" ? m : p, g = class extends e.Component {
+	static propTypes = {
+		opts: t.object,
+		onClick: t.func.isRequired
+	};
+	constructor(e) {
+		super(e), this.state = {
+			anchorEl: void 0,
+			open: !1
+		};
+	}
+	handleClick = (e) => this.setState({
+		open: !0,
+		anchorEl: e.currentTarget
+	});
+	handleRequestClose = () => this.setState({ open: !1 });
+	render() {
+		let { opts: e, onClick: t } = this.props, { open: r, anchorEl: i } = this.state, u = Object.keys(e) || [], d = (e) => () => {
+			t(e), this.handleRequestClose();
+		}, p = r ? "inherit" : "disabled";
+		return /* @__PURE__ */ o("div", { children: [/* @__PURE__ */ a("div", {
+			onClick: this.handleClick,
+			children: /* @__PURE__ */ a(l, {
+				size: "large",
+				children: a(r ? s : c, { color: p })
+			})
+		}), /* @__PURE__ */ a(f, {
+			id: "point-menu",
+			anchorEl: i,
+			open: r,
+			onClose: this.handleRequestClose,
+			style: { transform: "translate(-15px, -15px)" },
+			transformOrigin: {
+				vertical: "center",
+				horizontal: "right"
+			},
+			children: u.map((t, r) => /* @__PURE__ */ a(n, {
+				onClick: d(t),
+				children: e[t]
+			}, r))
+		})] });
+	}
+}, _ = class extends e.Component {
+	static propTypes = {
+		onChange: t.func.isRequired,
+		showSampleAnswer: t.bool.isRequired
+	};
+	render() {
+		let { onChange: e, showSampleAnswer: t } = this.props;
+		return /* @__PURE__ */ a(g, {
+			onClick: (t) => e(t),
+			opts: { sample: t ? "Provide Sample Response" : "Remove Sample Response" }
+		});
+	}
+};
+//#endregion
+export { g as IconMenu, _ as default };

package/package.json

@@ -1,24 +1,45 @@
 {
   "name": "@pie-lib/rubric",
-  "version": "2.1.0-beta.9",
-  "publishConfig": {
-    "access": "public"
+  "version": "3.0.0-next.36",
+  "description": "React implementation of @pie-lib/rubric synced from pie-lib",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pie-framework/pie-elements-ng.git",
+    "directory": "packages/lib-react/rubric"
   },
-  "main": "lib/index.js",
-  "module": "src/index.js",
-  "repository": "pie-framework/pie-lib",
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@hello-pangea/dnd": "^18.0.1",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/editable-html-tip-tap": "^2.2.0-beta.9",
+    "@pie-lib/editable-html-tip-tap": "3.0.0-next.36",
     "debug": "^4.1.1",
-    "lodash-es": "^4.17.23",
     "prop-types": "^15.7.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@pie-element/shared-lodash": "0.1.1-next.1",
+    "@pie-lib/config-ui": "14.0.0-next.36",
+    "@pie-lib/render-ui": "6.2.0-next.42"
   },
-  "gitHead": "433bcb776c2975739e7417f133d31cd996164116"
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  }
 }

package/CHANGELOG.json

@@ -1 +0,0 @@
-[]