@pie-element/complex-rubric 0.0.2-next.4424 → 0.1.0

package/package.json

@@ -1,25 +1,74 @@
 {
   "name": "@pie-element/complex-rubric",
-  "version": "0.0.2-next.4424+ce6d4a4ed",
-  "main": "lib/index.js",
-  "module": "src/index.js",
+  "version": "0.1.0",
   "description": "Complex Rubric Scoring Interaction",
-  "repository": "pie-framework/pie-elements",
-  "publishConfig": {
-    "access": "public"
-  },
   "dependencies": {
-    "@material-ui/core": "^3.9.2",
-    "@pie-lib/rubric": "^0.4.39",
-    "prop-types": "^15.7.2"
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-element/multi-trait-rubric": "0.1.0",
+    "@pie-element/rubric": "0.1.0",
+    "@pie-lib/rubric": "0.1.0",
+    "classnames": "^2.2.5",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.7.2",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-lib/config-ui": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0"
   },
-  "author": "pie framework developers",
-  "license": "ISC",
-  "gitHead": "ce6d4a4edb0b355d57f7843d29a98bb620230c93",
-  "scripts": {
-    "postpublish": "../../scripts/postpublish"
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "exports": {
-    ".": "./src/index.js"
+    ".": {
+      "development": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./delivery": {
+      "development": "./src/delivery/index.ts",
+      "types": "./dist/delivery/index.d.ts",
+      "default": "./dist/delivery/index.js"
+    },
+    "./author": {
+      "development": "./src/author/index.ts",
+      "types": "./dist/author/index.d.ts",
+      "default": "./dist/author/index.js"
+    },
+    "./controller": {
+      "development": "./src/controller/index.ts",
+      "types": "./dist/controller/index.d.ts",
+      "default": "./dist/controller/index.js"
+    },
+    "./print": {
+      "development": "./src/print/index.ts",
+      "types": "./dist/print/index.d.ts",
+      "default": "./dist/print/index.js"
+    }
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "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"
+  },
+  "scripts": {
+    "build": "bun x vite build && 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"
   }
 }

package/src/author/defaults.tsx

@@ -0,0 +1,223 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/complex-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.
+ */
+
+import { RUBRIC_TYPES } from '@pie-lib/rubric';
+
+const multiTraitDefaultModel = {
+  description: false,
+  excludeZero: false,
+  halfScoring: false,
+  pointLabels: true,
+  scales: [],
+  standards: false,
+  visibleToStudent: true,
+};
+
+const rubricDefaultModel = {
+  points: ['', '', '', ''],
+  sampleAnswers: [null, null, null, null],
+  maxPoints: 3,
+  excludeZero: false,
+};
+
+const rubriclessDefaultModel = {
+  maxPoints: 100,
+  excludeZero: false,
+  rubriclessInstructionEnabled: true,
+};
+
+const multiTraitDefaultConfiguration = {
+  baseInputConfiguration: {
+    h3: { disabled: true },
+    audio: { disabled: false },
+    video: { disabled: false },
+    image: { disabled: false },
+    textAlign: { disabled: true },
+    showParagraphs: { disabled: false },
+  },
+  expandedInput: {
+    inputConfiguration: {
+      math: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+    },
+  },
+  labelInput: {
+    inputConfiguration: {
+      math: { disabled: true },
+      audio: { disabled: true },
+      video: { disabled: true },
+      image: { disabled: true },
+    },
+  },
+  settingsPanelDisabled: false,
+  excludeZeroDialogBoxContent: {
+    title: 'Exclude 0 (Zero) from Score Point Values.',
+    text: `<div>
+        You are about to exclude 0 from score point values.
+        <br/>
+        Some of the existing data has to be changed.
+        <br/>
+        Please choose if you want to:
+        <ul>
+          <li>
+            shift Labels and Descriptions to the left
+          </li>
+          <li>
+            remove 0 column with its Label and Description
+          </li>
+        </ul>
+      </div>`,
+  },
+  includeZeroDialogBoxContent: {
+    title: 'Include 0 (Zero) in Score Point Values.',
+    text: `<div>
+        You are about to include 0 in score point values.
+        <br/>
+        Some of the existing data has to be changed.
+        <br/>
+        Please choose if you want to:
+        <ul>
+          <li>
+            shift Labels and Descriptions to the right
+          </li>
+          <li>
+            add 0 column with empty Label and Descriptions
+          </li>
+        </ul>
+      </div>`,
+  },
+  deleteScaleDialogBoxContent: {
+    title: 'Delete Scale',
+    text: 'Are you sure you want to delete this scale?',
+  },
+  maxPointsDialogBoxContent: {
+    title: 'Decreasing Max Points.',
+    text: ` You are about to decrease max score point value.
+        <br/>
+        All the Labels and Descriptions for scores above Max Point will be deleted.`,
+  },
+  spellCheck: {
+    label: 'Spellcheck',
+    settings: false,
+    enabled: true,
+  },
+  showExcludeZero: {
+    settings: true,
+    label: 'Exclude Zero',
+  },
+  showScorePointLabels: {
+    settings: true,
+    label: 'Show Score Point Labels',
+  },
+  showDescription: {
+    settings: true,
+    label: 'Show Description',
+  },
+  showVisibleToStudent: {
+    settings: true,
+    label: 'Visible to Student',
+  },
+  showHalfScoring: {
+    settings: true,
+    label: 'Half Scoring',
+  },
+  // commenting this in order to use the dynamic width if the width was not set by the client (PD-3203)
+  // width: '900px',
+  // these should not be set to true (should not be used) for now
+  showStandards: {
+    settings: false,
+    label: 'Show Standards',
+  },
+  showLevelTagInput: {
+    settings: false,
+    label: 'Show Level Tag Input',
+    enabled: false,
+  },
+  dragAndDrop: {
+    settings: true,
+    label: 'Enable Drag and Drop',
+    enabled: false,
+  },
+  maxMaxPoints: 9,
+};
+
+const rubricDefaultConfiguration = {
+  baseInputConfiguration: {
+    h3: { disabled: true },
+    audio: { disabled: false },
+    video: { disabled: false },
+    image: { disabled: false },
+    textAlign: { disabled: true },
+    showParagraphs: { disabled: false },
+  },
+  showExcludeZero: {
+    settings: true,
+    label: 'Ability to exclude zero',
+  },
+  showMaxPoint: {
+    settings: true,
+    label: 'Show max points dropdown',
+  },
+  settingsPanelDisabled: false,
+  maxMaxPoints: 9,
+};
+
+const rubriclessDefaultConfiguration = {
+  baseInputConfiguration: {
+    h3: { disabled: true },
+    audio: { disabled: false },
+    video: { disabled: false },
+    image: { disabled: false },
+    textAlign: { disabled: true },
+    showParagraphs: { disabled: false },
+  },
+  showExcludeZero: {
+    settings: true,
+    label: 'Ability to exclude zero',
+  },
+  showMaxPoint: {
+    settings: true,
+    label: 'Show max points dropdown',
+  },
+  settingsPanelDisabled: false,
+  // shows us if it simple rubric or rubricless(simple rubric with less structure)
+  rubricless: true,
+  // scoring instruction for rubricless
+  rubriclessInstruction: {
+    settings: true,
+    label: 'Instruction',
+    inputConfiguration: {
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+    },
+  },
+  maxMaxPoints: 100,
+};
+
+export default {
+  model: {
+    rubricType: 'simpleRubric',
+    rubrics: {
+      [RUBRIC_TYPES.SIMPLE_RUBRIC]: rubricDefaultModel,
+      [RUBRIC_TYPES.MULTI_TRAIT_RUBRIC]: multiTraitDefaultModel,
+      [RUBRIC_TYPES.RUBRICLESS]: rubriclessDefaultModel,
+    },
+  },
+  configuration: {
+    // width: '770px',
+    rubricOptions: ['simpleRubric', 'multiTraitRubric', 'rubricless'],
+    [RUBRIC_TYPES.MULTI_TRAIT_RUBRIC]: multiTraitDefaultConfiguration,
+    [RUBRIC_TYPES.SIMPLE_RUBRIC]: rubricDefaultConfiguration,
+    [RUBRIC_TYPES.RUBRICLESS]: rubriclessDefaultConfiguration,
+  },
+};

package/{configure/src/index.js → src/author/index.ts}

@@ -1,20 +1,31 @@
-import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/complex-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.
+ */
+
+import { ModelUpdatedEvent } from '@pie-element/shared-configure-events';
 import React from 'react';
-import ReactDOM from 'react-dom';
-import RubricConfigure from '@pie-element/rubric/configure/lib';
-import MultiTraitRubricConfigure from '@pie-element/multi-trait-rubric/configure/lib';
+import { createRoot } from 'react-dom/client';
+import RubricConfigure from '@pie-element/rubric/author';
+import MultiTraitRubricConfigure from '@pie-element/multi-trait-rubric/author';
 import debug from 'debug';
-import defaults from 'lodash/defaults';
-import Main from '@pie-element/complex-rubric-configure/src/main';
-
-import sensibleDefaults from './defaults';
+import { defaults } from 'lodash-es';
+import Main from './main.js';
+import sensibleDefaults from './defaults.js';
 
 const MODEL_UPDATED = ModelUpdatedEvent.TYPE;
 const RUBRIC_TAG_NAME = 'rubric-configure';
 const MULTI_TRAIT_RUBRIC_TAG_NAME = 'multi-trait-rubric-configure';
 
 class ComplexSimpleRubricConfigure extends RubricConfigure {}
-class ComplexMTRConfigure extends MultiTraitRubricConfigure {}
+
+class ComplexMTRConfigure extends MultiTraitRubricConfigure {
+}
 
 const defineComplexRubric = () => {
   if (!customElements.get(RUBRIC_TAG_NAME)) {
@@ -29,42 +40,63 @@ defineComplexRubric();
 
 const prepareCustomizationObject = (config, model) => {
   const configuration = defaults(config, sensibleDefaults.configuration);
-  configuration.settingsPanelDisabled = true;
 
   return {
     configuration,
-    model
+    model,
   };
 };
 
 export default class ComplexRubricConfigureElement extends HTMLElement {
-  static createDefaultModel = ({ rubrics: { simpleRubric = {}, multiTraitRubric = {} } = { simpleRubric: {}, multiTraitRubric: {}}, ...model } = {}, defaults = {}) => ({
-    ...defaults,
-    ...model,
+  static createDefaultModel = (
+    {
+      rubrics: { simpleRubric = {}, rubricless = {}, multiTraitRubric = {} } = { simpleRubric: {}, rubricless: {}, multiTraitRubric: {} },
+      ...model
+    } = {},
+    currentModel = {},
+  ) =>
+  {
+    const pieDefaults = sensibleDefaults?.model || {}
+    return {
+      ...pieDefaults,
+      ...currentModel,
+      ...model,
     rubrics: {
       simpleRubric: {
-        ...(defaults.rubrics || {}).simpleRubric,
-        ...simpleRubric
+        ...(sensibleDefaults?.model?.rubrics || {}).simpleRubric,
+        ...(currentModel.rubrics || {}).simpleRubric,
+        ...simpleRubric,
       },
       multiTraitRubric: {
-        ...(defaults.rubrics || {}).multiTraitRubric,
-        ...multiTraitRubric
-      }
+        ...(sensibleDefaults?.model?.rubrics || {}).multiTraitRubric,
+        ...(currentModel.rubrics || {}).multiTraitRubric,
+        ...multiTraitRubric,
+      },
+      rubricless: {
+        ...(sensibleDefaults?.model?.rubrics || {}).rubricless,
+        ...(currentModel.rubrics || {}).rubricless,
+        ...rubricless,
+      },
     },
-  });
+  }};
 
   constructor() {
     super();
+    this._root = null;
+    this.canUpdateModel = false;
+
     debug.log('constructor called');
-    this._model = ComplexRubricConfigureElement.createDefaultModel();
 
+    this._model = ComplexRubricConfigureElement.createDefaultModel();
     this._configuration = sensibleDefaults.configuration;
+
     this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
   }
 
   set model(m) {
     this._model = ComplexRubricConfigureElement.createDefaultModel(m, this._model);
 
+    this.canUpdateModel = true;
     this._render();
   }
 
@@ -74,10 +106,11 @@ export default class ComplexRubricConfigureElement extends HTMLElement {
     this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
   }
 
-  onModelChanged = (m, reset) => {
+  onModelChanged: any = (m, reset) => {
     this._model = ComplexRubricConfigureElement.createDefaultModel(m, this._model);
 
     this.dispatchModelUpdated(reset);
+
     this._render();
   };
 
@@ -98,7 +131,7 @@ export default class ComplexRubricConfigureElement extends HTMLElement {
     this._render();
   }
 
-  onModelUpdated = e => {
+  onModelUpdated: any = (e) => {
     if (e.target === this) {
       return;
     }
@@ -122,17 +155,25 @@ export default class ComplexRubricConfigureElement extends HTMLElement {
     this._render();
   }
 
-  disconnectedCallback() {
-    this.removeEventListener(MODEL_UPDATED, this.onModelUpdated);
-  }
-
   _render() {
     let element = React.createElement(Main, {
       model: this._model,
       configuration: this._configuration,
       onModelChanged: this.onModelChanged,
       onConfigurationChanged: this.onConfigurationChanged,
+      canUpdateModel: this.canUpdateModel
     });
-    ReactDOM.render(element, this);
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(element);
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener(MODEL_UPDATED, this.onModelUpdated);
+    if (this._root) {
+      this._root.unmount();
+    }
   }
 }

package/src/author/main.tsx

@@ -0,0 +1,172 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/complex-rubric/configure/src/main.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 { RUBRIC_TYPES } from '@pie-lib/rubric';
+import { layout } from '@pie-lib/config-ui';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+
+const StyledFormControlLabel: any = styled(FormControlLabel)({
+  '&.MuiFormControlLabel-root': {
+    width: 'fit-content',
+    paddingRight: '24px',
+    boxSizing: 'border-box',
+    '&:hover': {
+      background: 'var(--pie-secondary-background, rgba(241,241,241,1))',
+    },
+  },
+});
+
+const StyledRadio: any = styled(Radio)({
+  '&.MuiRadio-root': {
+    color: `${color.tertiary()} !important`,
+  },
+});
+
+const rubricLabels = {
+  [RUBRIC_TYPES.MULTI_TRAIT_RUBRIC]: 'Multi Trait Rubric',
+  [RUBRIC_TYPES.SIMPLE_RUBRIC]: 'Simple Rubric',
+  [RUBRIC_TYPES.RUBRICLESS]: 'Rubricless',
+};
+
+export class Main extends React.Component {
+  static propTypes = {
+    canUpdateModel: PropTypes.bool,
+    configuration: PropTypes.object,
+    model: PropTypes.object,
+    onModelChanged: PropTypes.func,
+    onConfigurationChanged: PropTypes.func,
+  };
+
+  onModelChanged: any = (model) => {
+    const { onModelChanged } = this.props;
+
+    return onModelChanged(model);
+  };
+
+  onChangeRubricType: any = (e) => {
+    const { model } = this.props;
+
+    const rubricType = e.target.value;
+    this.onModelChanged({ ...model, rubricType });
+  };
+
+  render() {
+    const { model, configuration, canUpdateModel } = this.props;
+
+    const { extraCSSRules, rubrics = {} } = model || {};
+    let { rubricType } = model;
+    const {
+      contentDimensions = {},
+      rubricOptions = [],
+      multiTraitRubric,
+      simpleRubric,
+      rubricless,
+      width,
+    } = configuration;
+    let rubricTag = '';
+
+    if (!rubricType) {
+      rubricType = RUBRIC_TYPES.SIMPLE_RUBRIC;
+    }
+
+    const isRubricTypeAvailable = rubricOptions.indexOf(rubricType) > -1;
+
+    if (canUpdateModel) {
+      switch (rubricType) {
+        case RUBRIC_TYPES.SIMPLE_RUBRIC:
+        default:
+          rubricTag = (
+            <rubric-configure
+              id="simpleRubric"
+              key="simple-rubric"
+              ref={(ref) => {
+                if (ref) {
+                  this.simpleRubric = ref;
+                  this.simpleRubric.model = { ...rubrics.simpleRubric, errors: model.errors || {} };
+                  this.simpleRubric.configuration = { ...simpleRubric, width };
+                }
+              }}
+            />
+          );
+          break;
+
+        case RUBRIC_TYPES.MULTI_TRAIT_RUBRIC:
+          rubricTag = (
+            <multi-trait-rubric-configure
+              id="multiTraitRubric"
+              key="multi-trait-rubric"
+              ref={(ref) => {
+                if (ref) {
+                  this.multiTraitRubric = ref;
+
+                  this.multiTraitRubric.model = { ...rubrics.multiTraitRubric, errors: model.errors || {} };
+                  this.multiTraitRubric.configuration = { ...multiTraitRubric, width: width || multiTraitRubric.width };
+                }
+              }}
+            />
+          );
+          break;
+
+        case RUBRIC_TYPES.RUBRICLESS:
+          rubricTag = (
+            <rubric-configure
+              id="rubricless"
+              key="rubricless"
+              ref={(ref) => {
+                if (ref) {
+                  this.rubricless = ref;
+
+                  this.rubricless.model = rubrics.rubricless;
+                  this.rubricless.configuration = { ...rubricless, width };
+                }
+              }}
+            />
+          );
+          break;
+      }
+    }
+
+    return (
+      <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
+        dimensions={contentDimensions}
+        hideSettings={true}
+        settings={null}
+      >
+        <RadioGroup
+          aria-label="rubric-type"
+          name="rubricType"
+          value={model.rubricType}
+          onChange={this.onChangeRubricType}
+        >
+          {rubricOptions.length > 1 &&
+            rubricOptions.map((availableRubric, i) => (
+              <StyledFormControlLabel
+                key={i}
+                value={availableRubric}
+                control={<StyledRadio checked={rubricType === availableRubric} />}
+                label={rubricLabels[availableRubric]}
+              />
+            ))}
+        </RadioGroup>
+
+        {isRubricTypeAvailable && rubricTag}
+      </layout.ConfigLayout>
+    );
+  }
+}
+
+export default Main;

package/src/controller/defaults.ts

@@ -0,0 +1,49 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/complex-rubric/controller/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.
+ */
+
+// todo the import from pie-lib/rubric WILL break pslb
+//  so don't use it unless you also test "yarn build"
+const RUBRIC_TYPES = {
+  SIMPLE_RUBRIC: 'simpleRubric',
+  MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
+  'rubricless': 'rubricless',
+};
+
+const multiTraitDefaultModel = {
+  description: false,
+  excludeZero: false,
+  halfScoring: false,
+  pointLabels: true,
+  scales: [],
+  standards: false,
+  visibleToStudent: true,
+};
+
+const rubricDefaultModel = {
+  points: ['', '', '', ''],
+  sampleAnswers: [null, null, null, null],
+  maxPoints: 3,
+  excludeZero: false,
+};
+
+const rubriclessDefaultModel = {
+  maxPoints: 100,
+  excludeZero: false,
+  rubriclessInstructionEnabled: true,
+};
+
+export default {
+  rubricType: 'simpleRubric',
+  rubrics: {
+    [RUBRIC_TYPES.SIMPLE_RUBRIC]: rubricDefaultModel,
+    [RUBRIC_TYPES.MULTI_TRAIT_RUBRIC]: multiTraitDefaultModel,
+    [RUBRIC_TYPES.RUBRICLESS]: rubriclessDefaultModel,
+  },
+};