@pie-element/categorize 0.1.0

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@pie-element/categorize",
+  "version": "0.1.0",
+  "description": "",
+  "dependencies": {
+    "@dnd-kit/core": "6.3.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/categorize": "0.1.0",
+    "@pie-lib/config-ui": "0.1.0",
+    "@pie-lib/correct-answer-toggle": "0.1.0",
+    "@pie-lib/drag": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "@pie-lib/translator": "0.1.0",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.6.1",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-element/shared-feedback": "0.1.0",
+    "@pie-element/shared-controller-utils": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "exports": {
+    ".": {
+      "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"
+    }
+  },
+  "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.ts

@@ -0,0 +1,182 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/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 { multiplePlacements } from './utils.js';
+
+export default {
+  model: {
+    allowAlternateEnabled: true,
+    allowMaxChoicesPerCategory: false,
+    allowMultiplePlacementsEnabled: multiplePlacements.enabled,
+    alternates: [],
+    categories: [],
+    categoriesPerRow: 2,
+    choices: [],
+    choicesLabel: '',
+    choicesPosition: 'below',
+    correctResponse: [],
+    feedbackEnabled: false,
+    lockChoiceOrder: true,
+    maxAnswerChoices: 6,
+    maxChoicesPerCategory: 0,
+    partialScoring: true,
+    promptEnabled: true,
+    rationaleEnabled: true,
+    rowLabels: [''],
+    studentInstructionsEnabled: true,
+    teacherInstructionsEnabled: true,
+    toolbarEditorPosition: 'bottom',
+    minRowHeight: '80px',
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
+    },
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
+    feedback: {
+      settings: true,
+      label: 'Feedback',
+      enabled: true,
+    },
+    lockChoiceOrder: {
+      settings: true,
+      label: 'Lock Choice Order',
+    },
+    choicesPosition: {
+      settings: true,
+      label: 'Choices Position',
+    },
+    allowMultiplePlacements: {
+      settings: true,
+      label: 'Allow Multiple Placements',
+    },
+    maxPlacements: {
+      settings: true,
+      label: 'Max choices per category',
+    },
+    allowAlternate: {
+      settings: true,
+      label: 'Allow Alternate Correct Answers',
+    },
+    categoriesPerRow: {
+      settings: true,
+      label: 'Categories per row',
+    },
+    partialScoring: {
+      settings: false,
+      label: 'Allow Partial Scoring',
+    },
+    prompt: {
+      settings: true,
+      label: 'Prompt',
+      required: false,
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+    },
+    rationale: {
+      settings: true,
+      label: 'Rationale',
+      required: false,
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+    },
+    scoringType: {
+      settings: false,
+      label: 'Scoring Type',
+    },
+    settingsPanelDisabled: false,
+    studentInstructions: {
+      settings: false,
+      label: 'Student Instructions',
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      required: false,
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+    },
+    headers: {
+      inputConfiguration: {
+        audio: { disabled: true },
+        video: { disabled: true },
+        image: { disabled: false },
+      },
+    },
+    rowLabels: {
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+    },
+    toolbarEditorPosition: {
+      settings: false,
+      label: 'Toolbar Editor Position',
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      rowLabel: 200,
+      categoryLabel: 260,
+      choices: 240,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+      rowLabel: 100,
+      categoryLabel: 100,
+      choices: 150,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+    minCategoriesPerRow: 1,
+    allowMaxAnswerChoices: {
+      settings: true,
+      label: 'Max answer choices',
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false,
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false,
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: [],
+    },
+  },
+};

package/src/author/design/builder.ts

@@ -0,0 +1,63 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/builder.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 { cloneDeep } from 'lodash-es';
+
+export const buildCategories = (categories, choices, correctResponse) => {
+  const clonedCategories = cloneDeep(categories);
+
+  return clonedCategories.map((category) => {
+    const cr = correctResponse.find((cr) => cr.category === category.id);
+
+    if (cr) {
+      category.choices = (cr.choices || []).map((choiceId) => {
+        const choice = choices.find((h) => h.id === choiceId);
+        if (choice) {
+          return Object.assign({}, { id: choice.id, content: choice.content });
+        }
+      });
+    }
+
+    return category;
+  });
+};
+
+const getChoices = (cat, choices, index) => {
+  if (!cat.alternateResponses || cat.alternateResponses.length === 0) {
+    return [];
+  }
+
+  return (cat.alternateResponses[index] || []).map((alt) => {
+    return choices.find((ch) => ch.id === alt);
+  });
+};
+
+export const buildAlternateResponses = (categories, choices, correctResponse) => {
+  const mostAlternates = correctResponse.reduce((mostAlt, cat) => {
+    if (cat.alternateResponses && cat.alternateResponses.length >= mostAlt) {
+      return cat.alternateResponses.length;
+    }
+
+    return mostAlt;
+  }, 0);
+  const alternatesArray = new Array(mostAlternates).fill(0);
+
+  return alternatesArray.map((val, index) => {
+    return correctResponse.map((cat, catIndex) => {
+      const currentCategory = categories[catIndex];
+
+      return {
+        id: currentCategory.id,
+        label: currentCategory.label,
+        choices: getChoices(cat, choices, index),
+      };
+    });
+  });
+};

package/src/author/design/buttons.tsx

@@ -0,0 +1,60 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/buttons.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 { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+
+const StyledAddButton: any = styled(Button)(({ theme }) => ({
+  height: theme.spacing(4),
+}));
+
+export class RawAddButton extends React.Component {
+  static propTypes = {
+    label: PropTypes.string,
+    onClick: PropTypes.func,
+    disabled: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    label: 'Add',
+  };
+
+  render() {
+    const { label, onClick, disabled } = this.props;
+    return (
+      <StyledAddButton
+        onClick={onClick}
+        disabled={disabled}
+        size="small"
+        variant="contained"
+        color="primary"
+      >
+        {label}
+      </StyledAddButton>
+    );
+  }
+}
+
+const AddButton = RawAddButton;
+
+const StyledDeleteButton: any = styled(Button)({
+  margin: 0,
+  padding: 0,
+});
+
+const DeleteButton = ({ label, onClick, disabled }) => (
+  <StyledDeleteButton onClick={onClick} size="small" color="primary" disabled={disabled}>
+    {label}
+  </StyledDeleteButton>
+);
+
+export { AddButton, DeleteButton };

package/src/author/design/categories/RowLabel.tsx

@@ -0,0 +1,91 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/RowLabel.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 { styled } from '@mui/material/styles';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import { InputContainer as InputContainerImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const InputContainer = unwrapReactInteropSymbol(InputContainerImport, 'InputContainer') || unwrapReactInteropSymbol(renderUi.InputContainer, 'InputContainer');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+const RowLabelContainer: any = styled(InputContainer)(({ theme }) => ({
+  paddingTop: theme.spacing(2),
+  width: '100%',
+}));
+
+export const RowLabel = ({
+    categoriesPerRow,
+    configuration,
+    disabled,
+    markup,
+    imageSupport,
+    onChange,
+    toolbarOpts,
+    spellCheck,
+    maxImageWidth,
+    maxImageHeight,
+    uploadSoundSupport,
+    mathMlOptions = {},
+  }) => {
+    const { rowLabels, baseInputConfiguration } = configuration;
+
+    return (
+      <div
+        style={{
+          gridColumn: `1/${categoriesPerRow + 1}`,
+          width: '100%',
+        }}
+      >
+        <RowLabelContainer label="Row Label">
+          <EditableHtml
+            disabled={disabled}
+            markup={markup}
+            onChange={onChange}
+            imageSupport={imageSupport}
+            nonEmpty={false}
+            toolbarOpts={toolbarOpts}
+            pluginProps={getPluginProps(rowLabels?.inputConfiguration, baseInputConfiguration)}
+            spellCheck={spellCheck}
+            maxImageWidth={maxImageWidth}
+            maxImageHeight={maxImageHeight}
+            uploadSoundSupport={uploadSoundSupport}
+            languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+            mathMlOptions={mathMlOptions}
+          />
+        </RowLabelContainer>
+      </div>
+    );
+  };

package/src/author/design/categories/alternateResponses.tsx

@@ -0,0 +1,127 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/alternateResponses.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 { styled } from '@mui/material/styles';
+import { removeChoiceFromAlternate } from '@pie-lib/categorize';
+
+import Category from './category.js';
+
+const CategoriesContainer: any = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(2.5),
+}));
+
+const CategoriesHolder: any = styled('div')(({ theme }) => ({
+  display: 'grid',
+  gridRowGap: `${theme.spacing(1)}px`,
+  gridColumnGap: `${theme.spacing(1)}px`,
+}));
+
+const RowLabel: any = styled('div')({
+  gridColumn: '1 / 3',
+});
+
+export class AlternateResponses extends React.Component {
+  static propTypes = {
+    altIndex: PropTypes.number.isRequired,
+    configuration: PropTypes.object,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    categories: PropTypes.array,
+    onModelChanged: PropTypes.func,
+    model: PropTypes.object.isRequired,
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    spellCheck: PropTypes.bool,
+  };
+
+
+  deleteChoiceFromCategory: any = (category, choice, choiceIndex) => {
+    const { model, altIndex, onModelChanged } = this.props;
+
+    const correctResponse = removeChoiceFromAlternate(
+      choice.id,
+      category.id,
+      choiceIndex,
+      altIndex,
+      model.correctResponse,
+    );
+
+    onModelChanged({ correctResponse });
+  };
+
+  render() {
+    const {
+      altIndex,
+      model,
+      configuration,
+      categories,
+      imageSupport,
+      spellCheck,
+      uploadSoundSupport,
+      mathMlOptions = {},
+    } = this.props;
+    const { categoriesPerRow, errors, rowLabels } = model;
+    const { duplicateAlternate } = errors || {};
+
+    const holderStyle = {
+      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`,
+    };
+    const isDuplicated = duplicateAlternate ? duplicateAlternate.index === altIndex : false;
+
+    return (
+      <CategoriesContainer>
+        <CategoriesHolder style={holderStyle}>
+          {categories.map((category, index) => {
+            const hasRowLabel = index % categoriesPerRow === 0;
+            const rowIndex = index / categoriesPerRow;
+
+            return (
+              <React.Fragment key={index}>
+                {hasRowLabel && (
+                  <RowLabel
+                    style={{
+                      gridColumn: `1/${categoriesPerRow + 1}`,
+                      width: '100%',
+                    }}
+                    dangerouslySetInnerHTML={{
+                      __html: rowLabels[rowIndex] || '',
+                    }}
+                  />
+                )}
+
+                <Category
+                  key={index}
+                  alternateResponseIndex={altIndex}
+                  imageSupport={imageSupport}
+                  isDuplicated={isDuplicated && duplicateAlternate.category === category.id}
+                  category={category}
+                  spellCheck={spellCheck}
+                  onDeleteChoice={(choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex)}
+                  uploadSoundSupport={uploadSoundSupport}
+                  mathMlOptions={mathMlOptions}
+                  configuration={configuration}
+                  isAlternate={true}
+                />
+              </React.Fragment>
+            );
+          })}
+        </CategoriesHolder>
+      </CategoriesContainer>
+    );
+  }
+}
+
+export default AlternateResponses;