@pie-lib/text-select 3.0.3-next.36 → 3.0.3-next.38

package/src/__tests__/legend.test.jsx

@@ -1,211 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { Legend } from '../legend';
-
-jest.mock('@pie-lib/translator', () => ({
-  __esModule: true,
-  default: {
-    translator: {
-      t: jest.fn((key) => {
-        const translations = {
-          'selectText.key': 'Key',
-          'selectText.correctAnswerSelected': 'Correct answer selected',
-          'selectText.incorrectSelection': 'Incorrect selection',
-          'selectText.correctAnswerNotSelected': 'Correct answer not selected',
-        };
-        return translations[key] || key;
-      }),
-    },
-  },
-}));
-
-describe('Legend', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('rendering', () => {
-    it('renders without crashing', () => {
-      const { container } = render(<Legend />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders the Key label', () => {
-      const { getByText } = render(<Legend />);
-      expect(getByText('Key')).toBeInTheDocument();
-    });
-
-    it('renders all three legend items by default', () => {
-      const { getByText } = render(<Legend />);
-
-      expect(getByText('Correct answer selected')).toBeInTheDocument();
-      expect(getByText('Incorrect selection')).toBeInTheDocument();
-      expect(getByText('Correct answer not selected')).toBeInTheDocument();
-    });
-
-    it('renders with custom language', () => {
-      const Translator = require('@pie-lib/translator').default;
-      const { container } = render(<Legend language="es" />);
-
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.key', { lng: 'es' });
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('showOnlyCorrect prop', () => {
-    it('shows all three items when showOnlyCorrect is false', () => {
-      const { getByText } = render(<Legend showOnlyCorrect={false} />);
-
-      expect(getByText('Correct answer selected')).toBeInTheDocument();
-      expect(getByText('Incorrect selection')).toBeInTheDocument();
-      expect(getByText('Correct answer not selected')).toBeInTheDocument();
-    });
-
-    it('shows only correct item when showOnlyCorrect is true', () => {
-      const { getByText, queryByText } = render(<Legend showOnlyCorrect={true} />);
-
-      expect(getByText('Correct answer selected')).toBeInTheDocument();
-      expect(queryByText('Incorrect selection')).not.toBeInTheDocument();
-      expect(queryByText('Correct answer not selected')).not.toBeInTheDocument();
-    });
-
-    it('shows only correct item when showOnlyCorrect is undefined', () => {
-      const { getByText } = render(<Legend showOnlyCorrect={undefined} />);
-
-      expect(getByText('Correct answer selected')).toBeInTheDocument();
-      expect(getByText('Incorrect selection')).toBeInTheDocument();
-      expect(getByText('Correct answer not selected')).toBeInTheDocument();
-    });
-  });
-
-  describe('icons', () => {
-    it('renders check icons for correct answers', () => {
-      const { container } = render(<Legend />);
-      const checkIcons = container.querySelectorAll('svg[data-testid="CheckIcon"]');
-      expect(checkIcons.length).toBeGreaterThan(0);
-    });
-
-    it('renders close icons for incorrect answers', () => {
-      const { container } = render(<Legend />);
-      const closeIcons = container.querySelectorAll('svg[data-testid="CloseIcon"]');
-      expect(closeIcons.length).toBeGreaterThan(0);
-    });
-
-    it('renders correct number of icons when showOnlyCorrect is true', () => {
-      const { container } = render(<Legend showOnlyCorrect={true} />);
-      const checkIcons = container.querySelectorAll('svg[data-testid="CheckIcon"]');
-      const closeIcons = container.querySelectorAll('svg[data-testid="CloseIcon"]');
-
-      expect(checkIcons.length).toBe(1);
-      expect(closeIcons.length).toBe(0);
-    });
-  });
-
-  describe('styled containers', () => {
-    it('renders containers for each legend item', () => {
-      const { container } = render(<Legend />);
-      const spans = container.querySelectorAll('span');
-
-      expect(spans.length).toBeGreaterThanOrEqual(4);
-    });
-
-    it('applies correct styling classes', () => {
-      const { container } = render(<Legend />);
-
-      expect(container.firstChild).toBeInTheDocument();
-      expect(container.firstChild).toHaveStyle({ display: 'flex' });
-    });
-  });
-
-  describe('translation integration', () => {
-    it('calls translator with correct keys for all items', () => {
-      const Translator = require('@pie-lib/translator').default;
-      render(<Legend />);
-
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.key', { lng: undefined });
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.correctAnswerSelected', { lng: undefined });
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.incorrectSelection', { lng: undefined });
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.correctAnswerNotSelected', { lng: undefined });
-    });
-
-    it('passes language prop to all translation calls', () => {
-      const Translator = require('@pie-lib/translator').default;
-      render(<Legend language="fr" />);
-
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.key', { lng: 'fr' });
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.correctAnswerSelected', { lng: 'fr' });
-    });
-
-    it('handles missing language prop gracefully', () => {
-      const Translator = require('@pie-lib/translator').default;
-      render(<Legend />);
-
-      expect(Translator.translator.t).toHaveBeenCalledWith('selectText.key', { lng: undefined });
-    });
-  });
-
-  describe('legend items structure', () => {
-    it('renders items with correct structure', () => {
-      const { container } = render(<Legend />);
-
-      const legendItems = container.querySelectorAll('div > div');
-      expect(legendItems.length).toBeGreaterThanOrEqual(3);
-    });
-
-    it('renders items in correct order', () => {
-      const { container } = render(<Legend />);
-      const spans = Array.from(container.querySelectorAll('span')).map((s) => s.textContent);
-
-      expect(spans).toContain('Correct answer selected');
-      expect(spans).toContain('Incorrect selection');
-      expect(spans).toContain('Correct answer not selected');
-    });
-
-    it('maintains order when showOnlyCorrect is true', () => {
-      const { container } = render(<Legend showOnlyCorrect={true} />);
-      const spans = Array.from(container.querySelectorAll('span')).map((s) => s.textContent);
-
-      expect(spans).toContain('Correct answer selected');
-      expect(spans).not.toContain('Incorrect selection');
-    });
-  });
-
-  describe('prop combinations', () => {
-    it('handles both language and showOnlyCorrect props together', () => {
-      const { getByText, queryByText } = render(<Legend language="de" showOnlyCorrect={true} />);
-
-      expect(getByText('Correct answer selected')).toBeInTheDocument();
-      expect(queryByText('Incorrect selection')).not.toBeInTheDocument();
-    });
-
-    it('renders correctly with no props', () => {
-      const { container } = render(<Legend />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders correctly with empty language string', () => {
-      const { container } = render(<Legend language="" />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  describe('accessibility', () => {
-    it('renders semantic HTML structure', () => {
-      const { container } = render(<Legend />);
-
-      const divs = container.querySelectorAll('div');
-      const spans = container.querySelectorAll('span');
-
-      expect(divs.length).toBeGreaterThan(0);
-      expect(spans.length).toBeGreaterThan(0);
-    });
-
-    it('includes text labels for each icon', () => {
-      const { getByText } = render(<Legend />);
-
-      expect(getByText('Correct answer selected')).toBeVisible();
-      expect(getByText('Incorrect selection')).toBeVisible();
-      expect(getByText('Correct answer not selected')).toBeVisible();
-    });
-  });
-});

package/src/__tests__/text-select.test.jsx

@@ -1,44 +0,0 @@
-import TextSelect from '../text-select';
-import React from 'react';
-import { render } from '@testing-library/react';
-
-describe('text-select', () => {
-  const defaultProps = {
-    text: 'foo',
-    tokens: [],
-    selectedTokens: [],
-    onChange: jest.fn(),
-  };
-
-  describe('rendering', () => {
-    it('renders with default props', () => {
-      const { container } = render(<TextSelect {...defaultProps} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with maxNoOfSelections', () => {
-      const { container } = render(<TextSelect {...defaultProps} maxNoOfSelections={4} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with tokens', () => {
-      const tokens = [
-        { start: 0, end: 1, text: 'f' },
-        { start: 1, end: 2, text: 'o' },
-      ];
-      const { container } = render(<TextSelect {...defaultProps} tokens={tokens} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-
-    it('renders with selectedTokens', () => {
-      const selectedTokens = [{ start: 0, end: 1, text: 'f' }];
-      const { container } = render(<TextSelect {...defaultProps} selectedTokens={selectedTokens} />);
-      expect(container.firstChild).toBeInTheDocument();
-    });
-  });
-
-  // Note: Tests for internal method (change) are implementation details and cannot
-  // be directly tested with RTL. The original test used wrapper.instance().change()
-  // to test internal logic, which tests implementation rather than user-facing behavior.
-  // Token selection behavior should be tested through integration/e2e tests.
-});

package/src/__tests__/utils.test.jsx

@@ -1,27 +0,0 @@
-import { prepareText } from '../utils';
-
-describe('logic', () => {
-  it('returns text if no html elements', () => {
-    const formattedText = prepareText(`foo bar`);
-
-    expect(formattedText).toEqual('foo bar');
-  });
-
-  it('replaces br with new lines', () => {
-    const formattedText = prepareText(`<p>foo<br>bar</p>`);
-
-    expect(formattedText).toEqual('foo\nbar');
-  });
-
-  it('replaces p with 2 new lines', () => {
-    const formattedText = prepareText(`<p>foo<br>bar</p><p>bar<br>foo</p>`);
-
-    expect(formattedText).toEqual('foo\nbar\n\nbar\nfoo');
-  });
-
-  it('adds p if there are no paragraphs', () => {
-    const formattedText = prepareText(`foo<br>bar<br>foo`);
-
-    expect(formattedText).toEqual('foo\nbar\nfoo');
-  });
-});

package/src/index.js

@@ -1,8 +0,0 @@
-import Tokenizer from './tokenizer';
-import TokenSelect, { TokenTypes } from './token-select';
-import TextSelect from './text-select';
-import { Legend } from './legend';
-import Token from './token-select/token';
-import { prepareText } from './utils';
-
-export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/src/legend.js

@@ -1,102 +0,0 @@
-import React from 'react';
-import { styled } from '@mui/material/styles';
-import Check from '@mui/icons-material/Check';
-import Close from '@mui/icons-material/Close';
-import { color } from '@pie-lib/render-ui';
-import Translator from '@pie-lib/translator';
-
-const { translator } = Translator;
-
-const StyledFlexContainer = styled('div')(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  gap: theme.spacing(2),
-  borderBottom: '1px solid lightgrey',
-  borderTop: '1px solid lightgrey',
-  paddingBottom: theme.spacing(1),
-  paddingTop: theme.spacing(1),
-  marginBottom: theme.spacing(1),
-}));
-
-const StyledKey = styled('span')(({ theme }) => ({
-  fontSize: '14px',
-  fontWeight: 'bold',
-  color: color.black(),
-  marginLeft: theme.spacing(1),
-}));
-
-const StyledContainer = styled('div')(() => ({
-  position: 'relative',
-  padding: '4px',
-  fontSize: '14px',
-  borderRadius: '4px',
-}));
-
-const StyledCorrectContainer = styled(StyledContainer)(() => ({
-  border: `${color.correctTertiary()} solid 2px`,
-}));
-
-const StyledIncorrectContainer = styled(StyledContainer)(() => ({
-  border: `${color.incorrectWithIcon()} solid 2px`,
-}));
-
-const StyledMissingContainer = styled(StyledContainer)(() => ({
-  border: `${color.incorrectWithIcon()} dashed 2px`,
-}));
-
-const baseIconStyles = {
-  color: color.white(),
-  position: 'absolute',
-  top: '-8px',
-  left: '-8px',
-  borderRadius: '50%',
-  fontSize: '12px',
-  padding: '2px',
-};
-
-const StyledCorrectCheckIcon = styled(Check)(() => ({
-  ...baseIconStyles,
-  backgroundColor: color.correctTertiary(),
-}));
-
-const StyledIncorrectCloseIcon = styled(Close)(() => ({
-  ...baseIconStyles,
-  backgroundColor: color.incorrectWithIcon(),
-}));
-
-export const Legend = ({ language, showOnlyCorrect }) => {
-  const legendItems = [
-    {
-      Icon: StyledCorrectCheckIcon,
-      label: translator.t('selectText.correctAnswerSelected', { lng: language }),
-      Container: StyledCorrectContainer,
-    },
-    {
-      Icon: StyledIncorrectCloseIcon,
-      label: translator.t('selectText.incorrectSelection', { lng: language }),
-      Container: StyledIncorrectContainer,
-    },
-    {
-      Icon: StyledIncorrectCloseIcon,
-      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
-      Container: StyledMissingContainer,
-    },
-  ];
-
-  if (showOnlyCorrect) {
-    legendItems.splice(1, 2);
-  }
-
-  return (
-    <StyledFlexContainer>
-      <StyledKey>{translator.t('selectText.key', { lng: language })}</StyledKey>
-      {legendItems.map(({ Icon, label, Container }, idx) => (
-        <Container key={idx}>
-          <Icon />
-          <span>{label}</span>
-        </Container>
-      ))}
-    </StyledFlexContainer>
-  );
-};

package/src/text-select.jsx

@@ -1,79 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import TokenSelect from './token-select';
-import { normalize } from './tokenizer/builder';
-import { TokenTypes } from './token-select/token';
-import debug from 'debug';
-
-const log = debug('@pie-lib:text-select');
-/**
- * Built on TokenSelect uses build.normalize to build the token set.
- */
-export default class TextSelect extends React.Component {
-  static propTypes = {
-    onChange: PropTypes.func,
-    disabled: PropTypes.bool,
-    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
-    selectedTokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
-    text: PropTypes.string.isRequired,
-    className: PropTypes.string,
-    highlightChoices: PropTypes.bool,
-    animationsDisabled: PropTypes.bool,
-    maxNoOfSelections: PropTypes.number,
-  };
-
-  change = (tokens) => {
-    const { onChange } = this.props;
-
-    if (!onChange) {
-      return;
-    }
-    const out = tokens.filter((t) => t.selected).map((t) => ({ start: t.start, end: t.end }));
-
-    onChange(out);
-  };
-
-  render() {
-    const {
-      text,
-      disabled,
-      tokens,
-      selectedTokens,
-      className,
-      highlightChoices,
-      maxNoOfSelections,
-      animationsDisabled,
-    } = this.props;
-
-    const normalized = normalize(text, tokens);
-    log('normalized: ', normalized);
-    const prepped = normalized.map((t) => {
-      const selectedIndex = selectedTokens.findIndex((s) => {
-        return s.start === t.start && s.end === t.end;
-      });
-      const selected = selectedIndex !== -1;
-      const correct = selected ? t.correct : undefined;
-      const isMissing = t.isMissing;
-      return {
-        ...t,
-        selectable: !disabled && t.predefined,
-        selected,
-        correct,
-        isMissing,
-      };
-    });
-
-    return (
-      <TokenSelect
-        highlightChoices={!disabled && highlightChoices}
-        className={className}
-        tokens={prepped}
-        disabled={disabled}
-        onChange={this.change}
-        maxNoOfSelections={maxNoOfSelections}
-        animationsDisabled={animationsDisabled}
-      />
-    );
-  }
-}