@pie-element/categorize 0.1.0

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

@@ -0,0 +1,161 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/category.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 Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+
+import InputHeader from '../input-header.js';
+import { DeleteButton } from '../buttons.js';
+import PlaceHolder from './droppable-placeholder.js';
+
+const StyledCard: any = styled(Card, {
+  shouldForwardProp: (prop) => prop !== 'isDuplicated',
+})(({ theme, isDuplicated }) => ({
+  minWidth: '196px',
+  padding: theme.spacing(1),
+  overflow: 'visible',
+  ...(isDuplicated && {
+    border: '1px solid red',
+  }),
+}));
+
+const StyledCardActions: any = styled(CardActions)(({ theme }) => ({
+  padding: 0,
+  paddingBottom: 0,
+  paddingTop: theme.spacing(1),
+}));
+
+const CategoryHeader: any = styled('div')(({ theme }) => ({
+  padding: theme.spacing(2),
+  '& p': {
+    margin: 0,
+  },
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingBottom: theme.spacing(1),
+}));
+
+export class Category extends React.Component {
+  static propTypes = {
+    alternateResponseIndex: PropTypes.number,
+    category: PropTypes.object.isRequired,
+    configuration: PropTypes.object.isRequired,
+    defaultImageMaxHeight: PropTypes.number,
+    defaultImageMaxWidth: PropTypes.number,
+    deleteFocusedEl: PropTypes.func,
+    focusedEl: PropTypes.number,
+    index: PropTypes.number,
+    error: PropTypes.string,
+    isDuplicated: PropTypes.bool,
+    maxImageWidth: PropTypes.object,
+    maxImageHeight: PropTypes.object,
+    onChange: PropTypes.func,
+    onDelete: PropTypes.func,
+    onDeleteChoice: PropTypes.func,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    toolbarOpts: PropTypes.object,
+    spellCheck: PropTypes.bool,
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    isAlternate: PropTypes.bool,
+  };
+
+  static defaultProps = {};
+
+  changeLabel: any = (l) => {
+    const { category, onChange } = this.props;
+    category.label = l;
+    onChange(category);
+  };
+
+  render() {
+    const {
+      alternateResponseIndex,
+      category,
+      configuration,
+      deleteFocusedEl,
+      focusedEl,
+      index,
+      error,
+      isDuplicated,
+      onDelete,
+      onDeleteChoice,
+      imageSupport,
+      spellCheck,
+      toolbarOpts,
+      maxImageWidth,
+      maxImageHeight,
+      uploadSoundSupport,
+      mathMlOptions = {},
+    } = this.props;
+    const isCategoryHeaderDisabled = !!alternateResponseIndex || alternateResponseIndex === 0;
+    
+    return (
+      <StyledCard isDuplicated={isDuplicated}>
+        <span>
+          {!isCategoryHeaderDisabled ? (
+            <InputHeader
+              label={category.label}
+              focusedEl={focusedEl}
+              deleteFocusedEl={deleteFocusedEl}
+              index={index}
+              disabled={!!alternateResponseIndex || alternateResponseIndex === 0}
+              error={error}
+              onChange={this.changeLabel}
+              onDelete={onDelete}
+              imageSupport={imageSupport}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheck}
+              maxImageWidth={maxImageWidth}
+              maxImageHeight={maxImageHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              mathMlOptions={mathMlOptions}
+              configuration={configuration}
+            />
+          ) : (
+            <CategoryHeader
+              dangerouslySetInnerHTML={{
+                __html: category.label,
+              }}
+            />
+          )}
+          {error && <ErrorText>{error}</ErrorText>}
+        </span>
+        <PlaceHolder
+          alternateResponseIndex={alternateResponseIndex}
+          category={category}
+          choices={category.choices}
+          onDeleteChoice={onDeleteChoice}
+          categoryId={category.id}
+          extraStyles={{ minHeight: '100px', }}
+          isAlternate={this.props.isAlternate}
+        />
+        {onDelete && (
+          <StyledCardActions>
+            <DeleteButton label={'delete'} onClick={onDelete} />
+          </StyledCardActions>
+        )}
+      </StyledCard>
+    );
+  }
+}
+
+export default Category;

package/src/author/design/categories/choice-preview.tsx

@@ -0,0 +1,112 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/choice-preview.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 { DraggableChoice } from '@pie-lib/drag';
+import IconButton from '@mui/material/IconButton';
+import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
+import { HtmlAndMath as HtmlAndMathImport } 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 HtmlAndMath = unwrapReactInteropSymbol(HtmlAndMathImport, 'HtmlAndMath') || unwrapReactInteropSymbol(renderUi.HtmlAndMath, 'HtmlAndMath');
+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 { color } from '@pie-lib/render-ui';
+
+const ChoicePreviewContainer: any = styled('div')({
+  position: 'relative',
+  overflow: 'auto',
+  touchAction: 'none',
+});
+
+const DeleteIconButton: any = styled(IconButton)({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  color: `${color.tertiary()} !important`,
+});
+
+export class ChoicePreview extends React.Component {
+  static propTypes = {
+    alternateResponseIndex: PropTypes.number,
+    category: PropTypes.object,
+    choice: PropTypes.object.isRequired,
+    choiceIndex: PropTypes.number,
+    onDelete: PropTypes.func,
+  };
+  static defaultProps = {
+    onDelete: () => {},
+  };
+
+  delete: any = () => {
+    const { onDelete, choice } = this.props;
+    onDelete(choice);
+  };
+
+  render() {
+    const { alternateResponseIndex, category, choice, choiceIndex } = this.props;
+
+    // Generate unique ID for each instance to distinguish multiple instances of the same choice
+    const categoryId = category && category.id;
+    const uniqueId =
+      alternateResponseIndex !== undefined
+        ? `${choice.id}-${categoryId}-${choiceIndex}-alt-${alternateResponseIndex}`
+        : `${choice.id}-${categoryId}-${choiceIndex}`;
+
+    return (
+      <ChoicePreviewContainer>
+        {choice ? (
+          <DraggableChoice
+            alternateResponseIndex={alternateResponseIndex}
+            category={category}
+            choice={choice}
+            choiceIndex={choiceIndex}
+            onRemoveChoice={this.delete}
+            type={'choice-preview'}
+            id={uniqueId}
+            categoryId={categoryId}
+          >
+            <HtmlAndMath html={choice?.content} />
+          </DraggableChoice>
+        ) : null}
+        <DeleteIconButton aria-label="delete" onClick={this.delete} size="large">
+          <RemoveCircleOutlineIcon />
+        </DeleteIconButton>
+      </ChoicePreviewContainer>
+    );
+  }
+}
+
+export default ChoicePreview;

package/src/author/design/categories/droppable-placeholder.tsx

@@ -0,0 +1,114 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/droppable-placeholder.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 ChoicePreview from './choice-preview.js';
+import { useDroppable } from '@dnd-kit/core';
+import { uid, PlaceHolder } from '@pie-lib/drag';
+import debug from 'debug';
+
+const log = debug('@pie-element:categorize:configure');
+
+const HelperText: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  fontSize: theme.typography.fontSize - 2,
+  color: `rgba(${theme.palette.common.black}, 0.4)`,
+  width: '100%',
+  height: '100%',
+}));
+
+const Helper = () => <HelperText>Drag your correct answers here</HelperText>;
+
+const DroppablePlaceholderContainer: any = styled('div')({
+  minHeight: '100px',
+});
+
+const Previews = ({ alternateResponseIndex, category, choices, onDeleteChoice }) => (
+  <React.Fragment>
+    {(choices || []).map((c, index) =>
+      c && (
+        <ChoicePreview
+          alternateResponseIndex={alternateResponseIndex}
+          category={category}
+          choice={c}
+          key={index}
+          choiceIndex={index}
+          onDelete={(choice) => onDeleteChoice(choice, index)}
+        />
+      )
+    )}
+  </React.Fragment>
+);
+
+Previews.propTypes = {
+  alternateResponseIndex: PropTypes.number,
+  category: PropTypes.object,
+  choices: PropTypes.array,
+  onDeleteChoice: PropTypes.func,
+};
+
+const DroppablePlaceHolder = ({
+  alternateResponseIndex,
+  category,
+  choices,
+  onDeleteChoice,
+  categoryId,
+  isAlternate
+}) => {
+  const { setNodeRef, isOver } = useDroppable({
+    id: `${categoryId}-${isAlternate ? 'alternate' : 'standard'}`,
+    data: {
+      accepts: ['choice', 'choice-preview'],
+      alternateResponseIndex,
+      categoryId,
+      type: isAlternate ? 'category-alternate' : 'category',
+      id: categoryId,
+    },
+  });
+
+  return (
+    <div ref={setNodeRef}>
+      <DroppablePlaceholderContainer>
+        <PlaceHolder
+          isOver={isOver}
+          extraStyles={{
+            width: '100%',
+            minHeight: '100px',
+            height: 'auto',
+          }}>
+          {(choices || []).length === 0 ? (
+            <Helper />
+          ) : (
+            <Previews
+              alternateResponseIndex={alternateResponseIndex}
+              category={category}
+              choices={choices}
+              onDeleteChoice={onDeleteChoice}
+            />
+          )}
+        </PlaceHolder>
+      </DroppablePlaceholderContainer>
+    </div>
+  );
+};
+
+DroppablePlaceHolder.propTypes = {
+  alternateResponseIndex: PropTypes.number,
+  category: PropTypes.object,
+  choices: PropTypes.array,
+  onDeleteChoice: PropTypes.func,
+  categoryId: PropTypes.string.isRequired,
+  isAlternate: PropTypes.bool,
+};
+
+export default uid.withUid(DroppablePlaceHolder);

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

@@ -0,0 +1,254 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/configure/src/design/categories/index.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 { choiceUtils as utils } from '@pie-lib/config-ui';
+import Info from '@mui/icons-material/Info';
+import Tooltip from '@mui/material/Tooltip';
+import {
+  removeCategory,
+  removeChoiceFromCategory,
+} from '@pie-lib/categorize';
+
+import Category from './category.js';
+import Header from '../header.js';
+import { generateValidationMessage } from '../../utils.js';
+import { RowLabel } from './RowLabel.js';
+
+const CategoriesContainer: any = styled('div')(({ theme }) => ({
+  marginBottom: theme.spacing(3),
+}));
+
+const CategoriesHolder: any = styled('div')(({ theme }) => ({
+  display: 'grid',
+  gridRowGap: `${theme.spacing(1)}px`,
+  gridColumnGap: `${theme.spacing(1)}px`,
+}));
+
+const StyledTooltip: any = styled(Tooltip)(({ theme }) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+}));
+
+const ErrorText: any = styled('div')(({ theme }) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(0.5),
+}));
+
+export class Categories extends React.Component {
+  static propTypes = {
+    defaultImageMaxHeight: PropTypes.number,
+    defaultImageMaxWidth: PropTypes.number,
+    imageSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    uploadSoundSupport: PropTypes.shape({
+      add: PropTypes.func.isRequired,
+      delete: PropTypes.func.isRequired,
+    }),
+    categories: PropTypes.array,
+    onModelChanged: PropTypes.func,
+    model: PropTypes.object.isRequired,
+    configuration: PropTypes.object.isRequired,
+    toolbarOpts: PropTypes.object,
+    spellCheck: PropTypes.bool,
+  };
+
+  state = {
+    focusedEl: null,
+  };
+
+  add: any = () => {
+    const { model, categories: oldCategories } = this.props;
+    const { categoriesPerRow, correctResponse, allowAlternateEnabled } = model;
+
+    const id = utils.firstAvailableIndex(
+      model.categories.map((a) => a.id),
+      1,
+    );
+    const data = { id, label: 'Category ' + id };
+    const addRowLabel = model.categories.length % categoriesPerRow === 0;
+    const rowLabels = [...model.rowLabels];
+
+    if (addRowLabel) {
+      rowLabels.push('');
+    }
+
+    this.setState(
+      {
+        focusedEl: oldCategories.length,
+      },
+      () => {
+        this.props.onModelChanged({
+          rowLabels,
+          categories: model.categories.concat([data]),
+          correctResponse: allowAlternateEnabled
+            ? [...correctResponse, { category: id, choices: [], alternateResponses: [] }]
+            : correctResponse,
+        });
+      },
+    );
+  };
+
+  deleteFocusedEl: any = () => {
+    this.setState({
+      focusedEl: null,
+    });
+  };
+
+  delete: any = (category) => {
+    const { model, onModelChanged } = this.props;
+    const index = model.categories.findIndex((a) => a.id === category.id);
+
+    if (index !== -1) {
+      model.categories.splice(index, 1);
+      model.correctResponse = removeCategory(category.id, model.correctResponse);
+      onModelChanged(model);
+    }
+  };
+
+  change: any = (c) => {
+    const { categories } = this.props;
+    const index = categories.findIndex((a) => a.id === c.id);
+
+    if (index !== -1) {
+      categories.splice(index, 1, c);
+      this.props.onModelChanged({ categories });
+    }
+  };
+
+  deleteChoiceFromCategory: any = (category, choice, choiceIndex) => {
+    const { model, onModelChanged } = this.props;
+    const correctResponse = removeChoiceFromCategory(choice.id, category.id, choiceIndex, model.correctResponse);
+
+    onModelChanged({ correctResponse });
+  };
+
+  changeRowLabel: any = (val, index) => {
+    const { model } = this.props;
+    const { rowLabels } = model;
+    const newRowLabels = [...rowLabels];
+
+    if (newRowLabels.length < index) {
+      newRowLabels.push(val);
+    } else {
+      newRowLabels[index] = val;
+    }
+
+    this.props.onModelChanged({
+      rowLabels: newRowLabels,
+    });
+  };
+
+  render() {
+    const {
+      model,
+      categories,
+      imageSupport,
+      uploadSoundSupport,
+      toolbarOpts,
+      spellCheck,
+      configuration,
+      defaultImageMaxHeight,
+      defaultImageMaxWidth,
+      mathMlOptions = {},
+    } = this.props;
+
+    const { categoriesPerRow, rowLabels, errors } = model;
+    const { associationError, categoriesError, categoriesErrors } = errors || {};
+    const { maxCategories, maxImageWidth = {}, maxImageHeight = {} } = configuration || {};
+    const holderStyle = {
+      gridTemplateColumns: `repeat(${categoriesPerRow}, 1fr)`,
+    };
+
+    const validationMessage = generateValidationMessage(configuration);
+
+    return (
+      <CategoriesContainer>
+        <Header
+          label="Categories"
+          buttonLabel="ADD A CATEGORY"
+          onAdd={this.add}
+          info={
+            <StyledTooltip
+              disableFocusListener
+              disableTouchListener
+              placement={'right'}
+              title={validationMessage}
+            >
+              <Info fontSize={'small'} color={'primary'} style={{ marginLeft: '5px' }} />
+            </StyledTooltip>
+          }
+          buttonDisabled={maxCategories && categories && maxCategories === categories.length}
+        />
+
+        <CategoriesHolder style={holderStyle}>
+          {categories.map((category, index) => {
+            const hasRowLabel = index % categoriesPerRow === 0;
+            const rowIndex = index / categoriesPerRow;
+
+            return (
+              <React.Fragment key={index}>
+                {hasRowLabel && (
+                  <RowLabel
+                    categoriesPerRow={categoriesPerRow}
+                    disabled={false}
+                    rowIndex={rowIndex}
+                    markup={rowLabels[rowIndex] || ''}
+                    onChange={(val) => this.changeRowLabel(val, rowIndex)}
+                    imageSupport={imageSupport}
+                    toolbarOpts={toolbarOpts}
+                    spellCheck={spellCheck}
+                    maxImageWidth={(maxImageWidth && maxImageWidth.rowLabel) || defaultImageMaxWidth}
+                    maxImageHeight={(maxImageHeight && maxImageHeight.rowLabel) || defaultImageMaxHeight}
+                    uploadSoundSupport={uploadSoundSupport}
+                    mathMlOptions={mathMlOptions}
+                    configuration={configuration}
+                  />
+                )}
+
+                <Category
+                  imageSupport={imageSupport}
+                  focusedEl={this.state.focusedEl}
+                  deleteFocusedEl={this.deleteFocusedEl}
+                  index={index}
+                  category={category}
+                  error={categoriesErrors && categoriesErrors[category.id]}
+                  onChange={this.change}
+                  onDelete={() => this.delete(category)}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheck}
+                  onDeleteChoice={(choice, choiceIndex) => this.deleteChoiceFromCategory(category, choice, choiceIndex)}
+                  maxImageWidth={(maxImageWidth && maxImageWidth.categoryLabel) || defaultImageMaxWidth}
+                  maxImageHeight={(maxImageHeight && maxImageHeight.categoryLabel) || defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  configuration={configuration}
+                  alternateResponseIndex={undefined}
+                />
+              </React.Fragment>
+            );
+          })}
+        </CategoriesHolder>
+
+        {associationError && <ErrorText>{associationError}</ErrorText>}
+        {categoriesError && <ErrorText>{categoriesError}</ErrorText>}
+      </CategoriesContainer>
+    );
+  }
+}
+
+export default Categories;