@pie-element/complex-rubric 7.1.1 → 7.1.2-next.0

package/configure/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "@pie-element/complex-rubric-configure",
-  "private": true,
-  "version": "5.1.1",
-  "description": "Complex Rubric authoring view",
-  "main": "lib/index.js",
-  "module": "src/index.js",
-  "author": "Pie Framework Authors",
-  "dependencies": {
-    "@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": "^8.1.1",
-    "@pie-element/rubric": "^8.1.1",
-    "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "13.0.4",
-    "@pie-lib/render-ui": "6.1.0",
-    "@pie-lib/rubric": "2.0.4",
-    "debug": "^4.1.1",
-    "lodash-es": "^4.17.23",
-    "prop-types": "^15.6.2",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
-  },
-  "license": "ISC"
-}

package/configure/src/__tests__/index.test.js

@@ -1,94 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-
-import defaults from '../defaults';
-
-jest.mock('@pie-lib/rubric', () => ({
-  RUBRIC_TYPES: {
-    SIMPLE_RUBRIC: 'simpleRubric',
-    MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
-    RUBRICLESS: 'rubricless',
-  },
-}));
-
-jest.mock('@pie-lib/config-ui', () => ({
-  settings: {
-    Panel: (props) => <div {...props} />,
-    toggle: jest.fn(),
-    radio: jest.fn(),
-  },
-}));
-
-jest.mock('@pie-lib/render-ui', () => ({
-  color: {
-    text: jest.fn(() => '#000000'),
-    background: jest.fn(() => '#ffffff'),
-    primaryLight: jest.fn(() => '#e3f2fd'),
-    primary: jest.fn(() => '#1976d2'),
-    secondary: jest.fn(() => '#888'),
-    tertiary: jest.fn(() => '#146EB3'),
-    disabled: jest.fn(() => '#999999'),
-    correct: jest.fn(() => '#00c853'),
-    incorrect: jest.fn(() => '#d32f2f'),
-  },
-  Collapsible: (props) => <div data-testid="collapsible">{props.children}</div>,
-  Readable: (props) => <div data-testid="readable">{props.children}</div>,
-  Feedback: (props) => <div data-testid="feedback">{props.children}</div>,
-  PreviewPrompt: (props) => <div data-testid="preview-prompt">{props.children}</div>,
-  UiLayout: (props) => <div data-testid="ui-layout">{props.children}</div>,
-  hasText: jest.fn(),
-  hasMedia: jest.fn(),
-}));
-
-jest.mock('@pie-element/rubric/configure/lib', () => {
-  class MockRubricConfigure {
-    constructor() {}
-  }
-  return MockRubricConfigure;
-});
-
-jest.mock('@pie-element/multi-trait-rubric/configure/lib', () => {
-  class MockMultiTraitRubricConfigure {
-    constructor() {}
-  }
-  return MockMultiTraitRubricConfigure;
-});
-
-const model = () => ({ ...defaults.model });
-
-const mockRender = jest.fn();
-const mockUnmount = jest.fn();
-jest.mock('react-dom/client', () => ({
-  createRoot: jest.fn(() => ({
-    render: mockRender,
-    unmount: mockUnmount,
-  })),
-}));
-
-describe('index', () => {
-  let Def;
-  let el;
-  let onModelChanged = jest.fn();
-  let initialModel = model();
-
-  beforeAll(() => {
-    Def = require('../index').default;
-    // Register the custom element for testing
-    if (!customElements.get('complex-rubric-configure-test')) {
-      customElements.define('complex-rubric-configure-test', Def);
-    }
-  });
-
-  beforeEach(() => {
-    el = document.createElement('complex-rubric-configure-test');
-    el.model = initialModel;
-    el.onModelChanged = onModelChanged;
-  });
-
-  describe('set model', () => {
-    it('calls ReactDOM.render', () => {
-      expect(createRoot).toHaveBeenCalled();
-      expect(mockRender).toHaveBeenCalled();
-    });
-  });
-});

package/configure/src/__tests__/main.test.jsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { Main } from '../main';
-
-import defaults from '../defaults';
-
-jest.mock('@pie-lib/config-ui', () => ({
-  layout: {
-    ConfigLayout: (props) => <div>{props.children}</div>,
-  },
-}));
-
-jest.mock('@pie-lib/render-ui', () => ({
-  color: {
-    tertiary: jest.fn(() => '#146EB3'),
-    text: jest.fn(() => '#000000'),
-    background: jest.fn(() => '#ffffff'),
-    primaryLight: jest.fn(() => '#e3f2fd'),
-    primary: jest.fn(() => '#1976d2'),
-    disabled: jest.fn(() => '#999999'),
-    correct: jest.fn(() => '#00c853'),
-    incorrect: jest.fn(() => '#d32f2f'),
-  },
-}));
-
-jest.mock('@pie-lib/rubric', () => ({
-  RUBRIC_TYPES: {
-    SIMPLE_RUBRIC: 'simpleRubric',
-    MULTI_TRAIT_RUBRIC: 'multiTraitRubric',
-    RUBRICLESS: 'rubricless',
-  },
-}));
-
-const theme = createTheme();
-
-const model = (extras) => ({
-  id: '1',
-  element: 'complex-rubric',
-  ...defaults.model,
-  ...extras,
-});
-
-describe('Main', () => {
-  const onModelChanged = jest.fn();
-  const onConfigurationChanged = jest.fn();
-
-  const renderMain = (extras) => {
-    const defaultProps = {
-      onModelChanged,
-      onConfigurationChanged,
-      classes: {},
-      model: model(extras),
-      configuration: {
-        rubricOptions: ['simpleRubric', 'multiTraitRubric', 'rubricless'],
-        multiTraitRubric: {
-          width: 600,
-          showStandards: {
-            settings: false,
-            label: 'Show Standards',
-            enabled: false,
-          },
-          showExcludeZero: {
-            settings: true,
-            label: 'Exclude Zero',
-            enabled: false,
-          },
-          showScorePointLabels: {
-            settings: true,
-            label: 'Show Score Point Labels',
-            enabled: false,
-          },
-          showLevelTagInput: {
-            settings: true,
-            label: 'Show Level Tag Input',
-            enabled: false,
-          },
-          showDescription: {
-            settings: true,
-            label: 'Show Description',
-            enabled: false,
-          },
-          showVisibleToStudent: {
-            settings: true,
-            label: 'Visible to Student',
-            enabled: false,
-          },
-          showHalfScoring: {
-            settings: true,
-            label: 'Half Scoring',
-            enabled: false,
-          },
-          dragAndDrop: {
-            settings: false,
-            label: 'Enable Drag and Drop',
-            enabled: false,
-          },
-        },
-      },
-      canUpdateModel: true,
-    };
-
-    return render(
-      <ThemeProvider theme={theme}>
-        <Main {...defaultProps} />
-      </ThemeProvider>
-    );
-  };
-
-  beforeEach(() => {
-    onModelChanged.mockClear();
-    onConfigurationChanged.mockClear();
-  });
-
-  describe('render', () => {
-    it('renders without crashing', () => {
-      const { container } = renderMain();
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with simple rubric', () => {
-      const { container } = renderMain({ rubricType: 'simpleRubric' });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with multi trait rubric', () => {
-      const { container } = renderMain({ rubricType: 'multiTraitRubric' });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with rubricless', () => {
-      const { container } = renderMain({ rubricType: 'rubricless' });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  // Note: Tests for internal methods (onChangeRubricType) are implementation details
-  // and cannot be directly tested with RTL. These should be tested through
-  // user interactions with radio buttons in integration tests.
-});

package/configure/src/defaults.js

@@ -1,213 +0,0 @@
-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

@@ -1,169 +0,0 @@
-import { ModelUpdatedEvent } from '@pie-framework/pie-configure-events';
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import RubricConfigure from '@pie-element/rubric/configure/lib';
-import MultiTraitRubricConfigure from '@pie-element/multi-trait-rubric/configure/lib';
-import debug from 'debug';
-import { defaults } from 'lodash-es';
-import Main from './main';
-import sensibleDefaults from './defaults';
-
-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 {
-}
-
-const defineComplexRubric = () => {
-  if (!customElements.get(RUBRIC_TAG_NAME)) {
-    customElements.define(RUBRIC_TAG_NAME, ComplexSimpleRubricConfigure);
-  }
-  if (!customElements.get(MULTI_TRAIT_RUBRIC_TAG_NAME)) {
-    customElements.define(MULTI_TRAIT_RUBRIC_TAG_NAME, ComplexMTRConfigure);
-  }
-};
-
-defineComplexRubric();
-
-const prepareCustomizationObject = (config, model) => {
-  const configuration = defaults(config, sensibleDefaults.configuration);
-
-  return {
-    configuration,
-    model,
-  };
-};
-
-export default class ComplexRubricConfigureElement extends HTMLElement {
-  static createDefaultModel = (
-    {
-      rubrics: { simpleRubric = {}, rubricless = {}, multiTraitRubric = {} } = { simpleRubric: {}, rubricless: {}, multiTraitRubric: {} },
-      ...model
-    } = {},
-    currentModel = {},
-  ) =>
-  {
-    const pieDefaults = sensibleDefaults?.model || {}
-    return {
-      ...pieDefaults,
-      ...currentModel,
-      ...model,
-    rubrics: {
-      simpleRubric: {
-        ...(sensibleDefaults?.model?.rubrics || {}).simpleRubric,
-        ...(currentModel.rubrics || {}).simpleRubric,
-        ...simpleRubric,
-      },
-      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._configuration = sensibleDefaults.configuration;
-
-    this.onConfigurationChanged = this.onConfigurationChanged.bind(this);
-  }
-
-  set model(m) {
-    this._model = ComplexRubricConfigureElement.createDefaultModel(m, this._model);
-
-    this.canUpdateModel = true;
-    this._render();
-  }
-
-  dispatchModelUpdated(reset) {
-    const resetValue = !!reset;
-
-    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
-  }
-
-  onModelChanged = (m, reset) => {
-    this._model = ComplexRubricConfigureElement.createDefaultModel(m, this._model);
-
-    this.dispatchModelUpdated(reset);
-
-    this._render();
-  };
-
-  set configuration(c) {
-    const info = prepareCustomizationObject(c, this._model);
-    this._configuration = info.configuration;
-
-    this._render();
-  }
-
-  onConfigurationChanged(c) {
-    this._configuration = prepareCustomizationObject(c, this._model).configuration;
-
-    if (this._model) {
-      this.onModelChanged(this._model);
-    }
-
-    this._render();
-  }
-
-  onModelUpdated = (e) => {
-    if (e.target === this) {
-      return;
-    }
-
-    e.preventDefault();
-    e.stopImmediatePropagation();
-
-    const id = e.target && e.target.getAttribute('id');
-
-    if (id) {
-      if (e.update) {
-        this._model.rubrics[id] = e.update;
-      }
-
-      this.dispatchEvent(new ModelUpdatedEvent(this._model));
-    }
-  };
-
-  connectedCallback() {
-    this.addEventListener(MODEL_UPDATED, this.onModelUpdated);
-    this._render();
-  }
-
-  _render() {
-    let element = React.createElement(Main, {
-      model: this._model,
-      configuration: this._configuration,
-      onModelChanged: this.onModelChanged,
-      onConfigurationChanged: this.onConfigurationChanged,
-      canUpdateModel: this.canUpdateModel
-    });
-
-    if (!this._root) {
-      this._root = createRoot(this);
-    }
-    this._root.render(element);
-  }
-
-  disconnectedCallback() {
-    this.removeEventListener(MODEL_UPDATED, this.onModelUpdated);
-    if (this._root) {
-      this._root.unmount();
-    }
-  }
-}