@pie-element/multi-trait-rubric 0.1.0

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

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

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/now.js

@@ -0,0 +1,7 @@
+import e from "./_root.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/now.js
+var t = function() {
+	return e.Date.now();
+};
+//#endregion
+export { t 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/toNumber.js

@@ -0,0 +1,19 @@
+import e from "./isSymbol.js";
+import t from "./_baseTrim.js";
+import n from "./isObject.js";
+//#region ../../../node_modules/.bun/lodash-es@4.17.23/node_modules/lodash-es/toNumber.js
+var r = NaN, i = /^[-+]0x[0-9a-f]+$/i, a = /^0b[01]+$/i, o = /^0o[0-7]+$/i, s = parseInt;
+function c(c) {
+	if (typeof c == "number") return c;
+	if (e(c)) return r;
+	if (n(c)) {
+		var l = typeof c.valueOf == "function" ? c.valueOf() : c;
+		c = n(l) ? l + "" : l;
+	}
+	if (typeof c != "string") return c === 0 ? c : +c;
+	c = t(c);
+	var u = a.test(c);
+	return u || o.test(c) ? s(c.slice(2), u ? 2 : 8) : i.test(c) ? r : +c;
+}
+//#endregion
+export { c as default };

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@pie-element/multi-trait-rubric",
+  "version": "0.1.0",
+  "description": "React implementation of multi-trait-rubric element synced from pie-elements",
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/render-ui": "0.1.0",
+    "clsx": "^1.1.1",
+    "prop-types": "^15.6.1",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-element/shared-configure-events": "0.1.0",
+    "@pie-lib/config-ui": "0.1.0",
+    "@pie-lib/drag": "0.1.0",
+    "@pie-element/shared-player-events": "0.1.0",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
+    "@dnd-kit/core": "6.3.1",
+    "debug": "^4.1.1",
+    "lodash-es": "^4.17.21"
+  },
+  "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/common.tsx

@@ -0,0 +1,473 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/multi-trait-rubric/configure/src/common.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 { styled } from '@mui/material/styles';
+import EditableHtml from '@pie-lib/editable-html-tip-tap';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
+import InputBase from '@mui/material/InputBase';
+import { color, 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;
+import { grey } from '@mui/material/colors';
+
+import { filteredDefaultPlugins } from './utils.js';
+
+const InputHeight = '120px';
+export const BlockWidth = 200;
+export const PrimaryBlockWidth = 200;
+export const DragHandleSpace = 32;
+export const HeaderHeight = '100px';
+export const HeaderHeightLarge = '160px';
+const greyBorder = `solid 1px ${grey[400]}`;
+const Padding = '8px 4px';
+
+// global styles for EditableHtml components
+const GlobalStyles: any = styled('div')(({ theme }) => ({
+  fontFamily: 'Cerebri',
+  
+  '& .editable-label': {
+    textAlign: 'left',
+    flex: 1,
+    border: 'none',
+
+    '& div:not(.tiptap)': {
+      padding: 0,
+      border: 'none',
+    },
+
+    '& > div:first-of-type': {
+      borderLeft: greyBorder,
+      borderRadius: 0,
+      padding: Padding,
+    },
+  },
+
+  '& .editable-level': {
+    background: theme.palette.common.white,
+    width: '60%',
+  },
+
+  '& .underlined-editable-level': {
+    background: theme.palette.common.white,
+    width: '100%',
+    padding: 0,
+    border: 'none',
+
+    '& > div:first-of-type': {
+      borderBottom: greyBorder,
+      borderRadius: 0,
+      padding: Padding,
+    },
+  },
+
+  '& .expanded-input-prompt': {
+    border: 'none',
+    margin: '10px',
+    marginTop: 0,
+    '& > div:first-of-type': {
+      border: greyBorder,
+      borderRadius: '4px',
+      padding: Padding,
+    },
+
+    '& .tiptap': {
+      fontFamily: 'Cerebri',
+      height: InputHeight,
+      padding: 0
+    }
+  },
+}));
+
+const StyledButton: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize + 2,
+  textAlign: 'right',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+  width: '114px',
+  background: color.secondaryBackground(),
+  borderRadius: '4px',
+  justifyContent: 'space-around',
+  color: color.text(),
+  cursor: 'pointer',
+}));
+
+export const MultiTraitButton = ({ children, onClick }) => (
+  <StyledButton onClick={onClick}>
+    <strong>+</strong>
+    <div>{children}</div>
+  </StyledButton>
+);
+
+export const PrimaryBlock: any = styled('div')({
+  width: `${PrimaryBlockWidth}px`,
+  minWidth: `${PrimaryBlockWidth}px`,
+  position: 'relative',
+  padding: '0 10px',
+  boxSizing: 'border-box',
+});
+
+export const Block: any = styled('div')(({ theme }) => ({
+  width: `${BlockWidth}px`,
+  minWidth: `${BlockWidth}px`,
+  '& ul, ol': {
+    marginBlockStart: 0,
+    paddingInlineStart: theme.spacing(2),
+  },
+}));
+
+const StyledSecondaryBlock: any = styled('div')({
+  display: 'flex',
+  overflowX: 'hidden',
+  overflowY: 'hidden',
+  alignItems: 'flex-end',
+  // this is needed to show the editor toolbar!!!
+  paddingBottom: '30px',
+});
+
+export const SecondaryBlock = ({ children, setRef, width }) => (
+  <StyledSecondaryBlock style={{ width: width }} ref={setRef}>
+    {children}
+  </StyledSecondaryBlock>
+);
+
+export const Row = (({ children, height }) => (
+  <div
+    style={{
+      display: 'flex',
+      height,
+    }}
+  >
+    {children}
+  </div>
+));
+
+const ScorePointBoxWrapper: any = styled('div')({
+  padding: '0 10px',
+});
+
+const ScorePointBox: any = styled('div')({
+  display: 'flex',
+  borderRadius: '4px',
+  background: 'white',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  border: greyBorder,
+});
+
+const ScorePointBoxDisabled: any = styled('div')({
+  display: 'flex',
+  borderRadius: '4px',
+  background: 'none',
+  flexDirection: 'row',
+  alignItems: 'center',
+  justifyContent: 'center',
+  border: '0',
+});
+
+const SubLabel: any = styled('div')({
+  width: '24px',
+  textAlign: 'center',
+});
+
+export const ScorePoint = ({
+  error = '',
+  scorePointsValue,
+  scoreDescriptor,
+  pluginProps,
+  onChange,
+  showScorePointLabels,
+  alignToRight,
+  spellCheck,
+  uploadSoundSupport,
+  imageSupport = {},
+  mathMlOptions = {},
+}) => {
+  const ScorePointBoxComponent = showScorePointLabels ? ScorePointBox : ScorePointBoxDisabled;
+
+  return (
+    <GlobalStyles>
+      <ScorePointBoxWrapper>
+        <ScorePointBoxComponent>
+          <SubLabel>{scorePointsValue}</SubLabel>
+
+          {showScorePointLabels ? (
+            <EditableHtml
+              className="editable-label"
+              error={error}
+              markup={scoreDescriptor}
+              placeholder=" Enter Label"
+              onChange={onChange}
+              pluginProps={pluginProps}
+              activePlugins={filteredDefaultPlugins}
+              spellCheck={spellCheck}
+              toolbarOpts={alignToRight ? { alignment: 'right' } : {}}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+              imageSupport={imageSupport}
+              autoWidthToolbar
+            />
+          ) : null}
+        </ScorePointBoxComponent>
+      </ScorePointBoxWrapper>
+    </GlobalStyles>
+  );
+};
+
+const StyledBootstrapInput: any = styled(InputBase)(({ theme }) => ({
+  '&.MuiInputBase-root': {
+    background: theme.palette.common.white,
+    marginTop: theme.spacing(1),
+    'label + &': {
+      width: '80px',
+    },
+  },
+  '& .MuiInputBase-input': {
+    borderRadius: '4px',
+    position: 'relative',
+    border: greyBorder,
+    fontSize: theme.typography.fontSize,
+    fontFamily: 'Cerebri Sans',
+    padding: `${theme.spacing(1)} ${theme.spacing(1.5)}`,
+
+    '&:focus': {
+      borderRadius: '4px',
+    },
+  },
+}));
+
+const createMaxScoreOptions = (maxMaxPoints) => Array.from({ length: maxMaxPoints }, (_, i) => i + 1);
+
+export const MaxPointsPicker = ({ maxPoints, onChange, maxMaxPoints }) => (
+  <InputContainer label="Max Points">
+    <Select
+      value={maxPoints}
+      onChange={onChange}
+      input={<StyledBootstrapInput />}
+      MenuProps={{
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      }}
+    >
+      {createMaxScoreOptions(maxMaxPoints).map((maxScore) => (
+        <MenuItem key={`menu-item-${maxScore}`} value={maxScore}>
+          {maxScore}
+        </MenuItem>
+      ))}
+    </Select>
+  </InputContainer>
+);
+
+const SimpleInputWrapper: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  margin: `${theme.spacing(1.5)} 0`,
+}));
+
+export const SimpleInput = ({
+  markup,
+  onChange,
+  pluginProps,
+  label,
+  spellCheck,
+  uploadSoundSupport,
+  mathMlOptions = {},
+  imageSupport = {},
+}) => (
+  <GlobalStyles>
+    <SimpleInputWrapper>
+      {label && <div>{label}</div>}
+
+      <EditableHtml
+        className="editable-level"
+        markup={markup}
+        onChange={onChange}
+        placeholder="Trait Label"
+        pluginProps={pluginProps}
+        activePlugins={filteredDefaultPlugins}
+        spellCheck={spellCheck}
+        uploadSoundSupport={uploadSoundSupport}
+        languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+        mathMlOptions={mathMlOptions}
+        imageSupport={imageSupport}
+        autoWidthToolbar
+      />
+    </SimpleInputWrapper>
+  </GlobalStyles>
+);
+
+const UnderlinedInputWrapper: any = styled('div')({
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const UnderlinedInput = ({
+  error,
+  markup,
+  onChange,
+  pluginProps,
+  label,
+  placeholder,
+  spellCheck,
+  uploadSoundSupport,
+  imageSupport = {},
+  mathMlOptions = {},
+}) => (
+  <GlobalStyles>
+    <UnderlinedInputWrapper>
+      {label && <div>{label}</div>}
+
+      <EditableHtml
+        className="underlined-editable-level"
+        error={error}
+        markup={markup}
+        onChange={onChange}
+        placeholder={placeholder}
+        pluginProps={pluginProps}
+        activePlugins={filteredDefaultPlugins}
+        spellCheck={spellCheck}
+        uploadSoundSupport={uploadSoundSupport}
+        languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+        mathMlOptions={mathMlOptions}
+        imageSupport={imageSupport}
+        autoWidthToolbar
+      />
+    </UnderlinedInputWrapper>
+  </GlobalStyles>
+);
+
+export const ExpandedInput = ({
+  error,
+  markup,
+  onChange,
+  pluginProps,
+  placeholder,
+  alignToRight,
+  spellCheck,
+  uploadSoundSupport,
+  mathMlOptions = {},
+  imageSupport = {},
+}) => (
+  <GlobalStyles>
+    <EditableHtml
+      className="expanded-input-prompt"
+      error={error}
+      markup={markup}
+      onChange={onChange}
+      placeholder={placeholder}
+      pluginProps={pluginProps}
+      toolbarOpts={alignToRight ? { alignment: 'right' } : {}}
+      spellCheck={spellCheck}
+      uploadSoundSupport={uploadSoundSupport}
+      languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+      autoWidthToolbar
+      mathMlOptions={mathMlOptions}
+      imageSupport={imageSupport}
+    />
+  </GlobalStyles>
+);
+
+export const ScaleSettings: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'flex-end',
+  paddingBottom: '18px',
+  gap: theme.spacing(0.25),
+}));
+
+const StyledArrow: any = styled('div')(({ theme }) => ({
+  position: 'absolute',
+  zIndex: 10,
+  cursor: 'pointer',
+  right: 0,
+  alignItems: 'flex-start',
+  justifyContent: 'center',
+  background: `linear-gradient(to left, ${theme.palette.common.white}, ${color.background()})`,
+  boxSizing: 'border-box',
+}));
+
+const StyledInnerGrey: any = styled('div')(({ theme }) => ({
+  position: 'absolute',
+  zIndex: 11,
+  cursor: 'pointer',
+  right: 0,
+  alignItems: 'flex-start',
+  justifyContent: 'center',
+  background: `linear-gradient(to left, ${theme.palette.common.white}, ${color.background()})`,
+  boxSizing: 'border-box',
+  '& svg': {
+    position: 'absolute',
+    bottom: '-24px',
+  },
+}));
+
+export const Arrow = ({ children, show, width, onClick, left, showLevelTagInput }) => (
+  <StyledArrow
+    style={{
+      height: '-webkit-fill-available',
+      display: show ? 'flex' : 'none',
+      width: width,
+      left: left,
+      background: left ? `linear-gradient(to right, white, ${color.background()})` : undefined,
+    }}
+    onClick={onClick}
+  >
+    <StyledInnerGrey
+      style={{
+        display: show ? 'flex' : 'none',
+        width: width,
+        height: showLevelTagInput ? HeaderHeightLarge : HeaderHeight,
+        left: 0,
+        background: left
+          ? `linear-gradient(to right, ${color.secondaryBackground()}, ${color.background()})`
+          : undefined,
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </StyledInnerGrey>
+  </StyledArrow>
+);