@pie-element/categorize 0.1.0

package/src/delivery/categorize/category.tsx

@@ -0,0 +1,78 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/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 Choice from './choice.js';
+import PlaceHolder from './droppable-placeholder.js';
+
+export const CategoryType = {
+  id: PropTypes.string.isRequired,
+  categoryId: PropTypes.string,
+};
+
+export class Category extends React.Component {
+  static propTypes = {
+    ...CategoryType,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    onDropChoice: PropTypes.func,
+    onRemoveChoice: PropTypes.func,
+    minRowHeight: PropTypes.string,
+  };
+
+  static defaultProps = {};
+
+  render() {
+    const {
+      className,
+      choices = [],
+      disabled,
+      onDropChoice,
+      onRemoveChoice,
+      id,
+      correct,
+      minRowHeight,
+    } = this.props;
+
+    return (
+      <StyledDiv className={className} id={id}>
+        <PlaceHolder
+          id={id}
+          onDropChoice={onDropChoice}
+          disabled={disabled}
+          correct={correct}
+          minRowHeight={minRowHeight}
+        >
+          {choices.map((c, index) => (
+            <Choice
+              onRemoveChoice={onRemoveChoice}
+              disabled={disabled}
+              key={index}
+              choiceIndex={index}
+              categoryId={id}
+              {...c}
+            />
+          ))}
+        </PlaceHolder>
+      </StyledDiv>
+    );
+  }
+}
+
+const StyledDiv: any = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 2,
+}));
+
+export default Category;

package/src/delivery/categorize/choice.tsx

@@ -0,0 +1,117 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/choice.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 debug from 'debug';
+import { styled } from '@mui/material/styles';
+import { useDraggable } from '@dnd-kit/core';
+import { uid } from '@pie-lib/drag';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import { color } from '@pie-lib/render-ui';
+
+const log = debug('@pie-ui:categorize:choice');
+
+export const ChoiceType = {
+  content: PropTypes.string.isRequired,
+  id: PropTypes.string,
+};
+
+const ChoiceContainer: any = styled('div', {
+  shouldForwardProp: (prop) => !['isDragging', 'disabled', 'correct'].includes(prop),
+})(({ isDragging, disabled, correct }) => ({
+  direction: 'initial',
+  cursor: disabled ? 'not-allowed' : isDragging ? 'move' : 'pointer',
+  width: '100%',
+  borderRadius: '6px',
+  ...(correct === true && {
+    border: `solid 2px ${color.correct()}`,
+  }),
+  ...(correct === false && {
+    border: `solid 2px ${color.incorrect()}`,
+  }),
+}));
+
+const StyledCard: any = styled(Card)({
+  color: color.text(),
+  backgroundColor: color.background(),
+  width: '100%',
+});
+
+const StyledCardContent: any = styled(CardContent)(({ theme }) => ({
+  color: color.text(),
+  backgroundColor: color.white(),
+  '&:last-child': {
+    paddingBottom: theme.spacing(2),
+  },
+  borderRadius: '4px',
+  border: '1px solid',
+  '& p': {
+    margin: '0px',
+  },
+}));
+
+export class Layout extends React.Component {
+  static propTypes = {
+    ...ChoiceType,
+    disabled: PropTypes.bool,
+    correct: PropTypes.bool,
+    isDragging: PropTypes.bool,
+  };
+  static defaultProps = {};
+  render() {
+    const { content, isDragging, disabled, correct } = this.props;
+
+    return (
+      <ChoiceContainer isDragging={isDragging} disabled={disabled} correct={correct}>
+        <StyledCard>
+          <StyledCardContent dangerouslySetInnerHTML={{ __html: content }} />
+        </StyledCard>
+      </ChoiceContainer>
+    );
+  }
+}
+
+const DraggableChoice = ({ id, content, disabled, correct, extraStyle, categoryId, choiceIndex }) => {
+  // Generate unique draggable ID for each instance
+  // If in choices board (categoryId is undefined), use 'board' suffix
+  // If in a category, include categoryId and choiceIndex to make it unique
+  const draggableId = categoryId !== undefined ? `choice-${id}-${categoryId}-${choiceIndex}` : `choice-${id}-board`;
+
+  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
+    id: draggableId,
+    data: {
+      id,
+      categoryId,
+      choiceIndex,
+      value: content,
+      itemType: 'categorize',
+      type: 'choice',
+    },
+    disabled,
+  });
+
+  return (
+    <div ref={setNodeRef} style={{ margin: '4px', ...extraStyle }} {...listeners} {...attributes}>
+      <Layout id={id} content={content} disabled={disabled} correct={correct} isDragging={isDragging} />
+    </div>
+  );
+};
+
+DraggableChoice.propTypes = {
+  ...ChoiceType,
+  extraStyle: PropTypes.object,
+  categoryId: PropTypes.string,
+  choiceIndex: PropTypes.number,
+  onRemoveChoice: PropTypes.func,
+};
+
+export default uid.withUid(DraggableChoice);

package/src/delivery/categorize/choices.tsx

@@ -0,0 +1,95 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/choices.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 Choice, { ChoiceType } from './choice.js';
+import DroppablePlaceholder from './droppable-placeholder.js';
+export { ChoiceType };
+
+const Wrapper: any = styled('div')({
+  flex: 1,
+  touchAction: 'none',
+});
+
+const LabelHolder: any = styled('div')(({ theme }) => ({
+  margin: '0 auto',
+  textAlign: 'center',
+  paddingTop: theme.spacing(1),
+}));
+
+export class Choices extends React.Component {
+  static propTypes = {
+    choices: PropTypes.arrayOf(
+      PropTypes.oneOfType([PropTypes.shape(ChoiceType), PropTypes.shape({ empty: PropTypes.bool })]),
+    ),
+    model: PropTypes.shape({
+      categoriesPerRow: PropTypes.number,
+      choicesLabel: PropTypes.string,
+    }),
+    disabled: PropTypes.bool,
+    choicePosition: PropTypes.string,
+    onDropChoice: PropTypes.func,
+    onRemoveChoice: PropTypes.func,
+    correct: PropTypes.boolean,
+  };
+
+  static defaultProps = {
+    model: {
+      categoriesPerRow: 1,
+      choicesLabel: '',
+    },
+  };
+
+  render() {
+    const { choices = [], model, disabled, onDropChoice, onRemoveChoice, choicePosition, correct } = this.props;
+
+    let style = {
+      textAlign: 'center',
+    };
+
+    if (choicePosition === 'left') {
+      style.direction = 'rtl';
+    }
+
+    return (
+      <Wrapper>
+        <DroppablePlaceholder
+          id="choices-board"
+          onDropChoice={onDropChoice}
+          onRemoveChoice={onRemoveChoice}
+          disabled={disabled}
+          style={{ background: 'none' }}
+          choiceBoard={true}
+          correct={correct}
+        >
+          {model.choicesLabel && model.choicesLabel !== '' && (
+            <LabelHolder dangerouslySetInnerHTML={{ __html: model.choicesLabel }} />
+          )}
+          {choices.map((c, index) => {
+            return c.empty ? (
+              <div key={index} />
+            ) : (
+              <Choice
+                disabled={disabled}
+                key={index}
+                extraStyle={{ maxWidth: `${95 / model.categoriesPerRow}%` }}
+                {...c}
+              />
+            );
+          })}
+        </DroppablePlaceholder>
+      </Wrapper>
+    );
+  }
+}
+
+export default Choices;

package/src/delivery/categorize/droppable-placeholder.tsx

@@ -0,0 +1,95 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/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 debug from 'debug';
+import { useTheme } from '@mui/material/styles';
+import { useDroppable } from '@dnd-kit/core';
+import { PlaceHolder } from '@pie-lib/drag';
+import { color } from '@pie-lib/render-ui';
+
+const log = debug('@pie-ui:categorize:droppable-placeholder');
+
+const DroppablePlaceholder = ({
+  children,
+  grid,
+  disabled,
+  choiceBoard,
+  minRowHeight,
+  id,
+  correct
+}) => {
+  const theme = useTheme();
+  const { setNodeRef, isOver } = useDroppable({
+    id,
+    data: {
+      itemType: 'categorize',
+      categoryId: id
+    },
+    disabled,
+  });
+
+  const extraStyles = {
+    padding: theme.spacing(0.5),
+    borderRadius: theme.spacing(0.5),
+    gridColumnGap: 0,
+    gridRowGap: 0,
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignContent: 'flex-start',
+    width: '100%',
+    height: '100%',
+    ...(correct === false && !choiceBoard && {
+      border: `solid 2px ${color.incorrect()}`,
+    }),
+    ...(correct === true && !choiceBoard && {
+      border: `solid 2px ${color.correct()}`,
+    }),
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={{
+        flex: 1,
+        minHeight: minRowHeight || '80px',
+        position: 'relative',
+        touchAction: 'none',
+      }}
+    >
+      <PlaceHolder
+        isOver={isOver}
+        grid={grid}
+        disabled={disabled}
+        choiceBoard={choiceBoard}
+        isCategorize
+        extraStyles={extraStyles}
+      >
+        {children}
+      </PlaceHolder>
+    </div>
+  );
+};
+
+DroppablePlaceholder.propTypes = {
+  choiceBoard: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+  grid: PropTypes.object,
+  disabled: PropTypes.bool,
+  minRowHeight: PropTypes.string,
+  onDropChoice: PropTypes.func,
+  id: PropTypes.string.isRequired,
+  correct: PropTypes.bool
+};
+
+export default DroppablePlaceholder;

package/src/delivery/categorize/grid-content.tsx

@@ -0,0 +1,53 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-elements/packages/categorize/src/categorize/grid-content.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';
+
+export class GridContent extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+    columns: PropTypes.number,
+    rows: PropTypes.number,
+    extraStyle: PropTypes.object,
+  };
+  static defaultProps = {
+    columns: 2,
+    rows: 2,
+  };
+
+  render() {
+    const { className, children, columns, extraStyle, rows } = this.props;
+    const style = {
+      gridTemplateColumns: `repeat(${columns}, 1fr)`,
+      gridTemplateRows: rows === 2 ? 'auto 1fr' : `repeat(${rows}, auto)`,
+      ...extraStyle,
+    };
+
+    return (
+      <StyledDiv style={style} className={className}>
+        {children}
+      </StyledDiv>
+    );
+  }
+}
+
+const StyledDiv: any = styled('div')(({ theme }) => ({
+  display: 'grid',
+  columnGap: theme.spacing(1),
+  gridColumnGap: theme.spacing(1),
+  rowGap: theme.spacing(1),
+  gridRowGap: theme.spacing(1),
+  gridAutoRows: '1fr',
+}));
+
+export default GridContent;