@pie-element/image-cloze-association 0.1.0

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSet.js

@@ -0,0 +1,7 @@
+import e from "./_baseUnary.js";
+import t from "./_nodeUtil.js";
+import n from "./_baseIsSet.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSet.js
+var r = t && t.isSet, i = r ? e(r) : n;
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSymbol.js

@@ -0,0 +1,9 @@
+import e from "./_baseGetTag.js";
+import t from "./isObjectLike.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isSymbol.js
+var n = "[object Symbol]";
+function r(r) {
+	return typeof r == "symbol" || t(r) && e(r) == n;
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isTypedArray.js

@@ -0,0 +1,7 @@
+import e from "./_baseIsTypedArray.js";
+import t from "./_baseUnary.js";
+import n from "./_nodeUtil.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/isTypedArray.js
+var r = n && n.isTypedArray, i = r ? t(r) : e;
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keys.js

@@ -0,0 +1,9 @@
+import e from "./isArrayLike.js";
+import t from "./_arrayLikeKeys.js";
+import n from "./_baseKeys.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keys.js
+function r(r) {
+	return e(r) ? t(r) : n(r);
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keysIn.js

@@ -0,0 +1,9 @@
+import e from "./isArrayLike.js";
+import t from "./_arrayLikeKeys.js";
+import n from "./_baseKeysIn.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/keysIn.js
+function r(r) {
+	return e(r) ? t(r, !0) : n(r);
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/map.js

@@ -0,0 +1,10 @@
+import e from "./_arrayMap.js";
+import t from "./isArray.js";
+import n from "./_baseIteratee.js";
+import r from "./_baseMap.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/map.js
+function i(i, a) {
+	return (t(i) ? e : r)(i, n(a, 3));
+}
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/memoize.js

@@ -0,0 +1,16 @@
+import e from "./_MapCache.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/memoize.js
+var t = "Expected a function";
+function n(r, i) {
+	if (typeof r != "function" || i != null && typeof i != "function") throw TypeError(t);
+	var a = function() {
+		var e = arguments, t = i ? i.apply(this, e) : e[0], n = a.cache;
+		if (n.has(t)) return n.get(t);
+		var o = r.apply(this, e);
+		return a.cache = n.set(t, o) || n, o;
+	};
+	return a.cache = new (n.Cache || e)(), a;
+}
+n.Cache = e;
+//#endregion
+export { n as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/property.js

@@ -0,0 +1,10 @@
+import e from "./_isKey.js";
+import t from "./_toKey.js";
+import n from "./_baseProperty.js";
+import r from "./_basePropertyDeep.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/property.js
+function i(i) {
+	return e(i) ? n(t(i)) : r(i);
+}
+//#endregion
+export { i as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/shuffle.js

@@ -0,0 +1,9 @@
+import e from "./isArray.js";
+import t from "./_arrayShuffle.js";
+import n from "./_baseShuffle.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/shuffle.js
+function r(r) {
+	return (e(r) ? t : n)(r);
+}
+//#endregion
+export { r as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubArray.js

@@ -0,0 +1,6 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubArray.js
+function e() {
+	return [];
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubFalse.js

@@ -0,0 +1,6 @@
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/stubFalse.js
+function e() {
+	return !1;
+}
+//#endregion
+export { e as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/toString.js

@@ -0,0 +1,7 @@
+import e from "./_baseToString.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/toString.js
+function t(t) {
+	return t == null ? "" : e(t);
+}
+//#endregion
+export { t as default };

package/dist/node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/values.js

@@ -0,0 +1,8 @@
+import e from "./keys.js";
+import t from "./_baseValues.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/values.js
+function n(n) {
+	return n == null ? [] : t(n, e(n));
+}
+//#endregion
+export { n as default };

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@pie-element/image-cloze-association",
+  "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/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",
+    "classnames": "^2.2.6",
+    "humps": "^2.0.1",
+    "prop-types": "^15.8.1",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-lib/config-ui": "0.1.0",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-element/shared-controller-utils": "0.1.0",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.21",
+    "react-transition-group": "^2.3.1"
+  },
+  "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,69 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/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.
+ */
+
+export default {
+  model: {
+    rationale: '',
+    rationaleEnabled: true,
+    studentInstructionsEnabled: true,
+    teacherInstructions: '',
+    teacherInstructionsEnabled: true,
+  },
+  configuration: {
+    baseInputConfiguration: {
+      h3: { disabled: true },
+      audio: { disabled: false },
+      video: { disabled: false },
+      image: { disabled: false },
+      textAlign: { disabled: true },
+      showParagraphs: { disabled: false },
+      separateParagraphs: { disabled: true },
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
+    teacherInstructions: {
+      settings: true,
+      label: 'Teacher Instructions',
+      inputConfiguration: {
+        audio: { disabled: false },
+        video: { disabled: false },
+        image: { disabled: false },
+      },
+      required: false,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+    mathMlOptions: {
+      mmlOutput: false,
+      mmlEditing: false,
+    },
+    language: {
+      settings: false,
+      label: 'Specify Language',
+      enabled: false,
+    },
+    languageChoices: {
+      label: 'Language Choices',
+      options: [],
+    },
+  },
+};

package/src/author/index.ts

@@ -0,0 +1,124 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/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,
+  DeleteImageEvent,
+  InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
+} from '@pie-element/shared-configure-events';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import debug from 'debug';
+
+import Root from './root.js';
+import sensibleDefaults from './defaults.js';
+
+const log = debug('image-cloze-association:configure');
+
+export default class ImageClozeAssociationConfigure extends HTMLElement {
+  static createDefaultModel = (model = {}) => ({
+    ...sensibleDefaults.model,
+    ...model,
+  });
+
+  constructor() {
+    super();
+    this._root = null;
+    this._model = ImageClozeAssociationConfigure.createDefaultModel();
+    this.onModelChanged = this.onModelChanged.bind(this);
+    this._configuration = sensibleDefaults.configuration;
+  }
+
+  set model(s) {
+    this._model = ImageClozeAssociationConfigure.createDefaultModel(s);
+    this._render();
+  }
+
+  set configuration(c) {
+    this._configuration = c;
+    this._render();
+  }
+
+  set disableSidePanel(s) {
+    this._disableSidePanel = s;
+    this._render();
+  }
+
+  dispatchModelUpdated(reset) {
+    const resetValue = !!reset;
+
+    this.dispatchEvent(new ModelUpdatedEvent(this._model, resetValue));
+  }
+
+  onModelChanged(m, reset) {
+    this._model = m;
+    this.dispatchModelUpdated(reset);
+    this._render();
+  }
+
+  onConfigurationChanged(config) {
+    this._configuration = config;
+    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() {
+    log('_render');
+
+    let element = React.createElement(Root, {
+      disableSidePanel: this._disableSidePanel,
+      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(element);
+  }
+
+  disconnectedCallback() {
+    if (this._root) {
+      this._root.unmount();
+    }
+  }
+}

package/src/author/root.tsx

@@ -0,0 +1,126 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/configure/src/root.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 { settings, layout, InputContainer } from '@pie-lib/config-ui';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import { styled } from '@mui/material/styles';
+
+const { Panel, toggle, dropdown } = settings;
+
+const StyledInputContainer: any = styled(InputContainer)(({ theme }) => ({
+  width: '100%',
+  paddingTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1),
+}));
+
+export class Root extends React.Component {
+  onTeacherInstructionsChanged: any = (teacherInstructions) => {
+    this.props.onModelChanged({ ...this.props.model, teacherInstructions });
+  };
+
+  render() {
+    const { model, configuration, onModelChanged, onConfigurationChanged, imageSupport, uploadSoundSupport } =
+      this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {},
+    } = configuration || {};
+    const { errors = {}, extraCSSRules, spellCheckEnabled } = model || {};
+    const { teacherInstructions: teacherInstructionsError } = errors;
+
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),
+    };
+
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props,
+    });
+
+    return (
+      <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
+        dimensions={contentDimensions}
+        hideSettings={settingsPanelDisabled}
+        settings={
+          <Panel
+            model={model}
+            configuration={configuration}
+            onChangeModel={(model) => onModelChanged(model)}
+            onChangeConfiguration={(config) => onConfigurationChanged(config)}
+            groups={{
+              Properties: panelProperties,
+            }}
+          />
+        }
+      >
+        {model && model.teacherInstructionsEnabled && (
+          <StyledInputContainer label={teacherInstructions.label}>
+            <EditableHtml
+              markup={model.teacherInstructions || ''}
+              onChange={this.onTeacherInstructionsChanged}
+              imageSupport={imageSupport}
+              nonEmpty={false}
+              error={teacherInstructionsError}
+              spellCheck={spellCheckEnabled}
+              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}
+              maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions}
+              maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+            />
+            {teacherInstructionsError && <ErrorText>{teacherInstructionsError}</ErrorText>}
+          </StyledInputContainer>
+        )}
+
+        <div>Image cloze association</div>
+      </layout.ConfigLayout>
+    );
+  }
+}
+
+Root.propTypes = {
+  onModelChanged: PropTypes.func,
+  onConfigurationChanged: PropTypes.func,
+  model: PropTypes.object.isRequired,
+  configuration: PropTypes.object.isRequired,
+  imageSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func.isRequired,
+    delete: PropTypes.func.isRequired,
+  }),
+};
+
+export default Root;

package/src/controller/defaults.ts

@@ -0,0 +1,17 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/image-cloze-association/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.
+ */
+
+export default {
+  rationale: '',
+  rationaleEnabled: true,
+  studentInstructionsEnabled: true,
+  teacherInstructions: '',
+  teacherInstructionsEnabled: true,
+};