@pie-element/categorize 0.1.0

package/src/author/design/input-header.tsx

@@ -0,0 +1,109 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/input-header.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 { getPluginProps } from './utils.js';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+
+const StyledEditableHtml: any = styled(EditableHtml)(({ theme }) => ({
+  flex: '1',
+  paddingBottom: theme.spacing(1),
+  maxWidth: '100%',
+}));
+
+const InputHeaderContainer: any = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+});
+
+export class InputHeader extends React.Component {
+  static propTypes = {
+    configuration: PropTypes.object.isRequired,
+    deleteFocusedEl: PropTypes.func,
+    disabled: PropTypes.bool,
+    focusedEl: PropTypes.number,
+    index: PropTypes.number,
+    label: PropTypes.string,
+    maxImageWidth: PropTypes.object,
+    maxImageHeight: PropTypes.object,
+    onChange: PropTypes.func,
+    onDelete: PropTypes.func,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    toolbarOpts: PropTypes.object,
+    error: PropTypes.string,
+    spellCheck: PropTypes.bool,
+  };
+
+  static defaultProps = {};
+
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    const {
+      onChange,
+      configuration,
+      label,
+      deleteFocusedEl,
+      disabled,
+      imageSupport,
+      toolbarOpts,
+      spellCheck,
+      error,
+      maxImageWidth,
+      maxImageHeight,
+      uploadSoundSupport,
+      mathMlOptions = {},
+      focusedEl,
+      index,
+    } = this.props;
+
+    const { headers, baseInputConfiguration } = configuration;
+    const shouldAutoFocus = focusedEl !== null && focusedEl !== undefined && focusedEl === index;
+
+    return (
+      <InputHeaderContainer>
+        <StyledEditableHtml
+          imageSupport={imageSupport}
+          disabled={disabled}
+          autoFocus={shouldAutoFocus}
+          autoWidthToolbar
+          label={'label'}
+          markup={label}
+          onChange={onChange}
+          pluginProps={getPluginProps(headers?.inputConfiguration, baseInputConfiguration)}
+          toolbarOpts={toolbarOpts}
+          spellCheck={spellCheck}
+          error={error}
+          maxImageWidth={maxImageWidth}
+          maxImageHeight={maxImageHeight}
+          uploadSoundSupport={uploadSoundSupport}
+          languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+          onDone={() => {
+            deleteFocusedEl && deleteFocusedEl();
+          }}
+          mathMlOptions={mathMlOptions}
+        />
+      </InputHeaderContainer>
+    );
+  }
+}
+
+export default InputHeader;

package/src/author/design/utils.ts

@@ -0,0 +1,14 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/utils.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 const getPluginProps = (props = {}, baseInputConfiguration = {}) => ({
+  ...baseInputConfiguration,
+  ...props,
+});

package/src/author/index.ts

@@ -0,0 +1,171 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/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 React from 'react';
+import { createRoot } from 'react-dom/client';
+import {
+  ModelUpdatedEvent,
+  DeleteImageEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-element/shared-configure-events';
+import { renderMath } from '@pie-element/shared-math-rendering-mathjax';
+
+import Main from './main.js';
+
+import defaults from './defaults.js';
+
+export default class CategorizeConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...defaults.model,
+    ...model,
+  });
+
+  // PD-2960: make sure we don't have alternates in model or possibility to add them (temporary solution)
+  // this function is used in controller, too
+  static disableAlternateResponses = (m) => {
+    let { correctResponse } = m || {};
+    correctResponse = correctResponse || [];
+    const mappedCorrectResponse = correctResponse.map((cr) => {
+      const { alternateResponses, ...response } = cr;
+      return response;
+    });
+    return {
+      ...m,
+      correctResponse: mappedCorrectResponse,
+      allowAlternateEnabled: false,
+    };
+  };
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = CategorizeConfigure.createDefaultModel();
+    this._configuration = defaults.configuration;
+  }
+
+  set model(m) {
+    this._model = CategorizeConfigure.createDefaultModel(m);
+
+    if (m.choices && m.choices.length >= m.maxAnswerChoices) {
+      this._model.maxAnswerChoices = m.choices.length;
+      console.warn("Max Answer Choices can't be less than choices length!");
+    }
+
+    this.render();
+  }
+
+  set configuration(c) {
+    const newConfiguration = {
+      ...defaults.configuration,
+      ...c,
+    };
+
+    this._configuration = newConfiguration;
+
+    // if language:enabled is true, then the corresponding default item model should include a language value;
+    // if it is false, then the language field should be omitted from the item model.
+    // if a default item model includes a language value (e.g., en_US) and the corresponding authoring view settings have language:settings = true,
+    // then (a) language:enabled should also be true, and (b) that default language value should be represented in languageChoices[] (as a key).
+    if (newConfiguration?.language?.enabled) {
+      if (newConfiguration?.languageChoices?.options?.length) {
+        this._model.language = newConfiguration?.languageChoices.options[0].value;
+      }
+    } else if (newConfiguration.language.settings && this._model.language) {
+      this._configuration.language.enabled = true;
+
+      if (!this._configuration.languageChoices.options || !this._configuration.languageChoices.options.length) {
+        this._configuration.languageChoices.options = [];
+      }
+
+      // check if the language is already included in the languageChoices.options array
+      // and if not, then add it.
+      if (!this._configuration.languageChoices.options.find((option) => option.value === this._model.language)) {
+        this._configuration.languageChoices.options.push({
+          value: this._model.language,
+          label: this._model.language,
+        });
+      }
+    } else {
+      delete this._model.language;
+    }
+
+    this.render();
+  }
+
+  onModelChanged(m) {
+    this._model = m;
+
+    this.render();
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, false));
+  }
+
+  onConfigurationChanged(c) {
+    this._configuration = c;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  /**
+   *
+   * @param {done, progress, file} handler
+   */
+  insertImage(handler) {
+    this.dispatchEvent(new InsertImageEvent(handler));
+  }
+
+  onDeleteImage(src, done) {
+    this.dispatchEvent(new DeleteImageEvent(src, done));
+  }
+
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
+  render() {
+    const el = React.createElement(Main, {
+      model: this._model,
+      configuration: this._configuration,
+      onModelChanged: this.onModelChanged.bind(this),
+      onConfigurationChanged: this.onConfigurationChanged.bind(this),
+      imageSupport: {
+        add: this.insertImage.bind(this),
+        delete: this.onDeleteImage.bind(this),
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
+    });
+
+    if (!this._root) {
+      this._root = createRoot(this);
+    }
+    this._root.render(el);
+
+    setTimeout(() => {
+      renderMath(this);
+    }, 0);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/src/author/main.tsx

@@ -0,0 +1,45 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/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 Design from './design/index.js';
+
+export class Main extends React.Component {
+  static propTypes = {
+    configuration: PropTypes.object,
+    onConfigurationChanged: PropTypes.func,
+    model: PropTypes.object.isRequired,
+    onModelChanged: PropTypes.func.isRequired,
+    imageSupport: PropTypes.object,
+    uploadSoundSupport: PropTypes.object,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const { model, onModelChanged, configuration, onConfigurationChanged, imageSupport, uploadSoundSupport } =
+      this.props;
+
+    return (
+      <Design
+        imageSupport={imageSupport}
+        uploadSoundSupport={uploadSoundSupport}
+        title="Design"
+        model={model}
+        configuration={configuration}
+        onChange={onModelChanged}
+        onConfigurationChanged={onConfigurationChanged}
+      />
+    );
+  }
+}
+
+export default Main;

package/src/author/utils.ts

@@ -0,0 +1,46 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/utils.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 const generateValidationMessage = (config) => {
+  let { minChoices, maxChoices, maxCategories } = config || {};
+  minChoices = minChoices || 1;
+
+  const validationMessage =
+    '\nThe choices content should ' +
+    'not be empty and should be unique.\nThere should be at least 1 ' +
+    (maxCategories ? `and at most ${maxCategories} ` : '') +
+    'category' +
+    (maxCategories ? 's' : '') +
+    ' defined.' +
+    (minChoices ? `\nThere should be at least ${minChoices} choices defined.` : '') +
+    (maxChoices ? `\nNo more than ${maxChoices} choices should be defined.` : '') +
+    '\nAt least one token should be assigned to at least one category.';
+
+  return 'Validation requirements:' + validationMessage;
+};
+
+// used in controller too, for consistency modify it there too
+export const multiplePlacements = { enabled: 'Yes', disabled: 'No', perChoice: 'Set Per Choice' };
+
+// Find the length of the largest array from an array
+export const maxLength = (array) =>
+  (array || []).reduce((max, arr) => {
+    return Math.max(max, arr.length);
+  }, 0);
+
+export const getMaxCategoryChoices = (model) => {
+  const { correctResponse = [] } = model || {};
+  return correctResponse.reduce((max, correctRes) => {
+    const correctRespLength = correctRes?.choices?.length || 0;
+    const alternates = correctRes?.alternateResponses || [];
+    const maxChoices = Math.max(correctRespLength, maxLength(alternates));
+    return maxChoices > max ? maxChoices : max;
+  }, 0);
+};

package/src/controller/defaults.ts

@@ -0,0 +1,37 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/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.
+ */
+
+import { multiplePlacements } from './utils.js';
+
+export default {
+  allowMultiplePlacementsEnabled: multiplePlacements.enabled,
+  alternates: [],
+  categories: [],
+  categoriesPerRow: 2,
+  choices: [],
+  choicesLabel: '',
+  choicesPosition: 'below',
+  correctResponse: [],
+  feedbackEnabled: false,
+  lockChoiceOrder: true,
+  maxAnswerChoices: 6,
+  maxChoicesPerCategory: 0,
+  partialScoring: true,
+  prompt: '',
+  promptEnabled: true,
+  rationale: '',
+  rationaleEnabled: true,
+  rowLabels: [''],
+  studentInstructionsEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+  toolbarEditorPosition: 'bottom',
+  minRowHeight: '80px',
+};