@pie-lib/mask-markup 3.0.4-next.3 → 3.0.4-next.32

package/src/__tests__/utils.js

@@ -1 +0,0 @@
-export const choice = (v, id) => ({ label: v, value: v, id });

package/src/__tests__/with-mask.test.js

@@ -1,76 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { withMask } from '../with-mask';
-
-describe('WithMask', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    markup: '<p>Foo bar {{0}} over the moon;</p>',
-    value: {
-      0: 'blank',
-    },
-    onChange,
-  };
-
-  const Masked = withMask('foo', (props) => (node) => {
-    const dataset = node.data ? node.data.dataset || {} : {};
-
-    if (dataset.component === 'foo') {
-      return <input type="text" data-testid="masked-input" defaultValue="Foo" onChange={props.onChange} />;
-    }
-  });
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders with default props', () => {
-      const { container } = render(<Masked {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders markup content', () => {
-      render(<Masked {...defaultProps} />);
-      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
-    });
-
-    it('renders paragraph content', () => {
-      const { container } = render(<Masked {...defaultProps} />);
-      // Paragraph is rendered as a styled div, not a <p> tag
-      expect(container.firstChild).toBeInTheDocument();
-      expect(screen.getByText(/Foo bar/)).toBeInTheDocument();
-    });
-  });
-
-  describe('onChange handler', () => {
-    it('calls onChange when value changes', async () => {
-      const user = userEvent.setup();
-      render(<Masked {...defaultProps} />);
-
-      const input = screen.queryByTestId('masked-input');
-      if (input) {
-        await user.clear(input);
-        await user.type(input, 'ceva');
-
-        expect(onChange).toHaveBeenCalled();
-      }
-    });
-
-    it('passes event to onChange', async () => {
-      const user = userEvent.setup();
-      render(<Masked {...defaultProps} />);
-
-      const input = screen.queryByTestId('masked-input');
-      if (input) {
-        await user.clear(input);
-        await user.type(input, 'test');
-
-        expect(onChange).toHaveBeenCalled();
-        const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
-        expect(lastCall).toHaveProperty('target');
-      }
-    });
-  });
-});

package/src/choices/__tests__/index.test.js

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import Choice from '../choice';
-import { choice } from '../../__tests__/utils';
-import Choices from '../index';
-
-// Mock @dnd-kit hooks to avoid DndContext requirement
-jest.mock('@dnd-kit/core', () => ({
-  useDraggable: jest.fn(() => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: jest.fn(),
-    isDragging: false,
-  })),
-  useDroppable: jest.fn(() => ({
-    setNodeRef: jest.fn(),
-    isOver: false,
-    active: null,
-  })),
-}));
-
-describe('index', () => {
-  describe('Choices', () => {
-    const defaultProps = {
-      disabled: false,
-      choices: [choice('Jumped', '0'), choice('Laughed', '1'), choice('Spoon', '2')],
-      choicePosition: 'below',
-      instanceId: 'test-instance',
-    };
-
-    it('renders correctly with default props', () => {
-      const { container } = render(<Choices {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-      expect(screen.getByText('Jumped')).toBeInTheDocument();
-      expect(screen.getByText('Laughed')).toBeInTheDocument();
-      expect(screen.getByText('Spoon')).toBeInTheDocument();
-    });
-
-    it('renders correctly with disabled prop as true', () => {
-      const { container } = render(<Choices {...defaultProps} disabled={true} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders without duplicates', () => {
-      const { container } = render(<Choices {...defaultProps} duplicates={undefined} value={{ 0: '0', 1: '1' }} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with duplicates', () => {
-      const { container } = render(<Choices {...defaultProps} duplicates={true} value={{ 0: '0', 1: '1' }} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('Choice', () => {
-    const defaultProps = {
-      disabled: false,
-      choice: choice('Label', '1'),
-      instanceId: 'test-instance',
-    };
-
-    describe('render', () => {
-      it('renders correctly with default props', () => {
-        const { container } = render(<Choice {...defaultProps} />);
-        expect(container.firstChild).toBeInTheDocument();
-        expect(screen.getByText('Label')).toBeInTheDocument();
-      });
-
-      it('renders correctly with disabled prop as true', () => {
-        const { container } = render(<Choice {...defaultProps} disabled={true} />);
-        expect(container.firstChild).toBeInTheDocument();
-      });
-    });
-  });
-});

package/src/choices/choice.jsx

@@ -1,97 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useDraggable } from '@dnd-kit/core';
-import { styled } from '@mui/material/styles';
-import Chip from '@mui/material/Chip';
-import { renderMath } from '@pie-lib/math-rendering';
-import { color } from '@pie-lib/render-ui';
-
-export const DRAG_TYPE = 'MaskBlank';
-
-const StyledChoice = styled('span')(({ theme, disabled }) => ({
-  border: `solid 0px ${theme.palette.primary.main}`,
-  borderRadius: theme.spacing(2),
-  margin: theme.spacing(0.5),
-  transform: 'translate(0, 0)',
-  display: 'inline-flex',
-  ...(disabled && {}),
-}));
-
-const StyledChip = styled(Chip)(() => ({
-  backgroundColor: color.white(),
-  border: `1px solid ${color.text()}`,
-  color: color.text(),
-  alignItems: 'center',
-  display: 'inline-flex',
-  height: 'initial',
-  minHeight: '32px',
-  fontSize: 'inherit',
-  whiteSpace: 'pre-wrap',
-  maxWidth: '374px',
-  // Added for touch devices, for image content.
-  // This will prevent the context menu from appearing and not allowing other interactions with the image.
-  // If interactions with the image in the token will be requested we should handle only the context Menu.
-  pointerEvents: 'none',
-  borderRadius: '3px',
-  paddingTop: '12px',
-  paddingBottom: '12px',
-
-  '&.Mui-disabled': {
-    opacity: 1,
-  },
-}));
-
-const StyledChipLabel = styled('span')(() => ({
-  whiteSpace: 'normal',
-  '& img': {
-    display: 'block',
-    padding: '2px 0',
-  },
-  '& mjx-frac': {
-    fontSize: '120% !important',
-  },
-}));
-
-export default function Choice({ choice, disabled, instanceId }) {
-  const rootRef = useRef(null);
-
-  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
-    id: `choice-${choice.id}`,
-    data: { choice, instanceId, fromChoice: true, type: DRAG_TYPE },
-    disabled,
-  });
-
-  useEffect(() => {
-    renderMath(rootRef.current);
-  }, [choice.value]);
-
-  return (
-    <StyledChoice
-      ref={setNodeRef}
-      style={
-        isDragging
-          ? {
-              width: rootRef.current?.offsetWidth,
-              height: rootRef.current?.offsetHeight,
-            }
-          : {}
-      }
-      disabled={disabled}
-      {...listeners}
-      {...attributes}
-    >
-      <StyledChip
-        clickable={false}
-        disabled={disabled}
-        ref={rootRef}
-        label={<StyledChipLabel dangerouslySetInnerHTML={{ __html: choice.value }} />}
-      />
-    </StyledChoice>
-  );
-}
-
-Choice.propTypes = {
-  choice: PropTypes.object.isRequired,
-  disabled: PropTypes.bool,
-  instanceId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-};

package/src/choices/index.jsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { findKey } from 'lodash-es';
-import Choice from './choice';
-import { DragDroppablePlaceholder } from '@pie-lib/drag';
-
-export default class Choices extends React.Component {
-  static propTypes = {
-    disabled: PropTypes.bool,
-    duplicates: PropTypes.bool,
-    choices: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.string })),
-    value: PropTypes.object,
-    choicePosition: PropTypes.string.isRequired,
-    instanceId: PropTypes.string, // Added for drag isolation
-  };
-
-  getStyleForWrapper = () => {
-    const { choicePosition } = this.props;
-
-    switch (choicePosition) {
-      case 'above':
-        return {
-          margin: '0 0 40px 0',
-        };
-
-      case 'below':
-        return {
-          margin: '40px 0 0 0',
-        };
-
-      case 'right':
-        return {
-          margin: '0 0 0 40px',
-        };
-
-      default:
-        return {
-          margin: '0 40px 0 0',
-        };
-    }
-  };
-
-  render() {
-    const { disabled, duplicates, choices, value, instanceId } = this.props;
-    const filteredChoices = choices.filter((c) => {
-      if (duplicates === true) {
-        return true;
-      }
-      const foundChoice = findKey(value, (v) => v === c.id);
-      return foundChoice === undefined;
-    });
-    const elementStyle = { ...this.getStyleForWrapper(), minWidth: '100px' };
-
-    return (
-      <div style={elementStyle}>
-        <DragDroppablePlaceholder disabled={disabled} instanceId={instanceId}>
-          {filteredChoices.map((c, index) => (
-            <Choice key={`${c.value}-${index}`} disabled={disabled} choice={c} instanceId={instanceId} />
-          ))}
-        </DragDroppablePlaceholder>
-      </div>
-    );
-  }
-}

package/src/componentize.js

@@ -1,13 +0,0 @@
-const REGEX = /\{\{(\d+)\}\}/g;
-
-export default (s, t) => {
-  if (!s) {
-    return { markup: '' };
-  }
-
-  const markup = s.replace(REGEX, (match, g) => {
-    return `<span data-component="${t}" data-id="${g}"></span>`;
-  });
-
-  return { markup };
-};

package/src/components/__tests__/blank.test.js

@@ -1,169 +0,0 @@
-import * as React from 'react';
-import { render, screen, act } from '@testing-library/react';
-import Blank from '../blank';
-
-// Mock @dnd-kit hooks to avoid DndContext requirement
-jest.mock('@dnd-kit/core', () => ({
-  useDraggable: jest.fn(() => ({
-    attributes: {},
-    listeners: {},
-    setNodeRef: jest.fn(),
-    transform: null,
-    isDragging: false,
-  })),
-  useDroppable: jest.fn(() => ({
-    setNodeRef: jest.fn(),
-    isOver: false,
-    active: null,
-  })),
-}));
-
-jest.mock('@dnd-kit/utilities', () => ({
-  CSS: {
-    Translate: {
-      toString: jest.fn(() => 'translate3d(0, 0, 0)'),
-    },
-  },
-}));
-
-describe('Blank', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    disabled: false,
-    choice: { value: 'Cow' },
-    isOver: false,
-    dragItem: {},
-    correct: false,
-    onChange,
-  };
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders with default props', () => {
-      const { container } = render(<Blank {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('displays the value when provided', () => {
-      render(<Blank {...defaultProps} />);
-      expect(screen.getByText('Cow')).toBeInTheDocument();
-    });
-
-    it('renders as disabled when disabled prop is true', () => {
-      render(<Blank {...defaultProps} disabled={true} />);
-      // Check that delete button is not present when disabled
-      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
-    });
-
-    it('renders with dragged item preview', () => {
-      render(<Blank {...defaultProps} dragItem={{ choice: { value: 'Dog' } }} />);
-      // Blank component should render
-      expect(screen.getByText('Cow')).toBeInTheDocument();
-    });
-
-    it('shows hover state when isOver is true', () => {
-      const { container } = render(<Blank {...defaultProps} dragItem={{ choice: { value: 'Dog' } }} isOver={true} />);
-      // Component should have hover styling
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('shows correct state when correct is true', () => {
-      const { container } = render(<Blank {...defaultProps} correct={true} />);
-      // Component should indicate correctness
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('delete functionality', () => {
-    it('does not show delete button when disabled', () => {
-      render(<Blank {...defaultProps} disabled={true} />);
-      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
-    });
-
-    it('does not show delete button when no value is set', () => {
-      render(<Blank {...defaultProps} choice={undefined} />);
-      expect(screen.queryByRole('button', { name: /delete/i })).not.toBeInTheDocument();
-    });
-
-    it('shows delete button when value is present and not disabled', () => {
-      render(<Blank {...defaultProps} />);
-      // If delete button is present, it should be clickable
-      const deleteButton = screen.queryByRole('button');
-      if (deleteButton) {
-        expect(deleteButton).toBeInTheDocument();
-      }
-    });
-  });
-
-  describe('dimensions', () => {
-    it('renders with custom dimensions when provided', () => {
-      const { container } = render(
-        <Blank {...defaultProps} emptyResponseAreaHeight={100} emptyResponseAreaWidth={200} />,
-      );
-      const element = container.firstChild;
-      expect(element).toBeInTheDocument();
-    });
-
-    it('renders with min dimensions by default', () => {
-      const { container } = render(<Blank {...defaultProps} />);
-      const element = container.firstChild;
-      expect(element).toBeInTheDocument();
-      // Component should have minimum dimensions applied
-    });
-
-    it('handles non-numeric dimension props gracefully', () => {
-      const { container } = render(
-        <Blank {...defaultProps} emptyResponseAreaHeight="non-numeric" emptyResponseAreaWidth="non-numeric" />,
-      );
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('computes chip dimensions based on content when no emptyResponseArea size is provided', () => {
-      jest.useFakeTimers();
-      // Mock getBoundingClientRect to simulate measured content size
-      const rectSpy = jest
-        .spyOn(HTMLElement.prototype, 'getBoundingClientRect')
-        .mockReturnValue({ width: 100, height: 20, top: 0, left: 0, right: 100, bottom: 20 });
-
-      const { container } = render(
-        <Blank
-          {...defaultProps}
-          // Force measurement path that uses getMeasureNode / updateDimensions
-          emptyResponseAreaHeight={0}
-          emptyResponseAreaWidth={0}
-        />,
-      );
-
-      // Let the internal timeout in handleElements / updateDimensions run
-      act(() => {
-        jest.runAllTimers();
-      });
-
-      const wrapper = container.firstChild; // StyledContent
-      const chip = wrapper && wrapper.firstChild; // StyledChip (rootRef)
-
-      // Width and height should include padding (24px) around measured content
-      expect(chip.style.width).toBe('124px');
-      expect(chip.style.height).toBe('44px');
-
-      rectSpy.mockRestore();
-      jest.useRealTimers();
-    });
-  });
-
-  describe('drag and drop', () => {
-    it('accepts drag item when not disabled', () => {
-      render(<Blank {...defaultProps} isOver={true} dragItem={{ choice: { value: 'Dog' } }} />);
-      expect(screen.getByText('Cow')).toBeInTheDocument();
-    });
-
-    it('shows drag preview when dragging over', () => {
-      const { container } = render(<Blank {...defaultProps} isOver={true} dragItem={{ choice: { value: 'Dog' } }} />);
-      expect(container.firstChild).toBeInTheDocument();
-      // Should show visual feedback for drag over
-    });
-  });
-});

package/src/components/__tests__/correct-input.test.js

@@ -1,90 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import CorrectInput from '../correct-input';
-
-describe('CorrectInput', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    disabled: false,
-    correct: false,
-    variant: 'outlined',
-    value: 'Cow',
-    onChange,
-  };
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders input with default props', () => {
-      render(<CorrectInput {...defaultProps} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-      expect(input).toHaveValue('Cow');
-    });
-
-    it('renders as disabled when disabled prop is true', () => {
-      render(<CorrectInput {...defaultProps} disabled={true} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeDisabled();
-    });
-
-    it('renders with correct state as false', () => {
-      const { container } = render(<CorrectInput {...defaultProps} correct={false} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-
-    it('renders with correct state as true', () => {
-      const { container } = render(<CorrectInput {...defaultProps} correct={true} />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-      // Should show visual indication of correctness
-    });
-
-    it('renders with outlined variant', () => {
-      render(<CorrectInput {...defaultProps} variant="outlined" />);
-      const input = screen.getByRole('textbox');
-      expect(input).toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when user types', async () => {
-      const user = userEvent.setup();
-      render(<CorrectInput {...defaultProps} />);
-
-      const input = screen.getByRole('textbox');
-      await user.clear(input);
-      await user.type(input, '1');
-
-      expect(onChange).toHaveBeenCalled();
-    });
-
-    it('calls onChange with event object', async () => {
-      const user = userEvent.setup();
-      render(<CorrectInput {...defaultProps} value="" />);
-
-      const input = screen.getByRole('textbox');
-      await user.type(input, 'test');
-
-      expect(onChange).toHaveBeenCalled();
-      // Check that onChange receives an event-like object
-      const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1][0];
-      expect(lastCall).toHaveProperty('target');
-    });
-
-    it('updates value when user changes input', async () => {
-      const user = userEvent.setup();
-      render(<CorrectInput {...defaultProps} />);
-
-      const input = screen.getByRole('textbox');
-      await user.clear(input);
-      await user.type(input, 'Dog');
-
-      expect(onChange).toHaveBeenCalled();
-    });
-  });
-});

package/src/components/__tests__/dropdown.test.js

@@ -1,93 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { choice } from '../../__tests__/utils';
-import Dropdown from '../dropdown';
-
-describe('Dropdown', () => {
-  const onChange = jest.fn();
-  const defaultProps = {
-    onChange,
-    id: '1',
-    correct: false,
-    disabled: false,
-    value: 'Jumped',
-    choices: [choice('Jumped'), choice('Laughed'), choice('Smiled')],
-  };
-
-  beforeEach(() => {
-    onChange.mockClear();
-  });
-
-  describe('rendering', () => {
-    it('renders dropdown with default props', () => {
-      render(<Dropdown {...defaultProps} />);
-      const button = screen.getByRole('combobox');
-      expect(button).toBeInTheDocument();
-      // Button displays the selected value
-      expect(button).toHaveTextContent('Jumped');
-    });
-
-    it('renders with all choices as options when opened', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} />);
-
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      // Options should now be visible - find them by role
-      const options = screen.getAllByRole('option');
-      expect(options).toHaveLength(3);
-      // Verify the text content of options using specific elements
-      expect(options[0]).toHaveTextContent('Jumped');
-      expect(options[1]).toHaveTextContent('Laughed');
-      expect(options[2]).toHaveTextContent('Smiled');
-    });
-
-    it('renders as disabled when disabled prop is true', () => {
-      render(<Dropdown {...defaultProps} disabled={true} />);
-      const button = screen.getByRole('combobox');
-      expect(button).toBeDisabled();
-    });
-
-    it('shows correct state when correct is true', () => {
-      const { container } = render(<Dropdown {...defaultProps} correct={true} />);
-      const button = screen.getByRole('combobox');
-      expect(button).toBeInTheDocument();
-    });
-  });
-
-  describe('user interactions', () => {
-    it('calls onChange when user selects a different option', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} />);
-
-      // Click button to open menu
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      // Find the option by getting all options and selecting the one with "Laughed" text
-      const options = screen.getAllByRole('option');
-      const laughedOption = options.find((opt) => opt.textContent.includes('Laughed'));
-      await user.click(laughedOption);
-
-      expect(onChange).toHaveBeenCalledWith('1', 'Laughed');
-    });
-
-    it('calls onChange with correct value', async () => {
-      const user = userEvent.setup();
-      render(<Dropdown {...defaultProps} />);
-
-      // Click button to open menu
-      const button = screen.getByRole('combobox');
-      await user.click(button);
-
-      // Find the option by getting all options and selecting the one with "Smiled" text
-      const options = screen.getAllByRole('option');
-      const smiledOption = options.find((opt) => opt.textContent.includes('Smiled'));
-      await user.click(smiledOption);
-
-      expect(onChange).toHaveBeenCalledWith('1', 'Smiled');
-    });
-  });
-});