@pie-lib/text-select 0.1.0

package/src/text-select.tsx

@@ -0,0 +1,89 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/text-select.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 TokenSelect from './token-select/index.js';
+import { normalize } from './tokenizer/builder.js';
+import { TokenTypes } from './token-select/token.js';
+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: any = (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}
+      />
+    );
+  }
+}

package/src/token-select/index.tsx

@@ -0,0 +1,181 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/token-select/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 Token, { TokenTypes } from './token.js';
+import { styled } from '@mui/material/styles';
+import { clone, isEqual } from 'lodash-es';
+import debug from 'debug';
+import { noSelect } from '@pie-lib/style-utils';
+
+const log = debug('@pie-lib:text-select:token-select');
+
+const StyledTokenSelect: any = styled('div')(() => ({
+  backgroundColor: 'none',
+  whiteSpace: 'pre',
+  ...noSelect(),
+  '& p': {
+    whiteSpace: 'break-spaces',
+    margin: 0,
+  },
+}));
+
+// strip HTML tags for plain text rendering
+const stripHtmlTags = (text) => {
+  if (!text) {
+    return text;
+  }
+
+  return text.replace(/<[^>]+>/g, '');
+};
+
+export class TokenSelect extends React.Component {
+  static propTypes = {
+    tokens: PropTypes.arrayOf(PropTypes.shape(TokenTypes)).isRequired,
+    className: PropTypes.string,
+    onChange: PropTypes.func.isRequired,
+    disabled: PropTypes.bool,
+    highlightChoices: PropTypes.bool,
+    animationsDisabled: PropTypes.bool,
+    maxNoOfSelections: PropTypes.number,
+  };
+
+  static defaultProps = {
+    highlightChoices: false,
+    maxNoOfSelections: 0,
+    tokens: [],
+  };
+
+  selectedCount = () => this.props.tokens.filter((t) => t.selected).length;
+
+  canSelectMore: any = (selectedCount) => {
+    const { maxNoOfSelections } = this.props;
+
+    if (maxNoOfSelections === 1) return true;
+
+    log('[canSelectMore] maxNoOfSelections: ', maxNoOfSelections, 'selectedCount: ', selectedCount);
+    return maxNoOfSelections <= 0 || (isFinite(maxNoOfSelections) && selectedCount < maxNoOfSelections);
+  };
+
+  toggleToken: any = (event) => {
+    const { target } = event;
+    const { tokens, animationsDisabled } = this.props;
+    const tokensCloned = clone(tokens);
+
+    const targetSpanWrapper = target.closest?.(`.${Token.rootClassName}`);
+    const targetedTokenIndex = targetSpanWrapper?.dataset?.indexkey;
+    const t = targetedTokenIndex !== undefined ? tokensCloned[targetedTokenIndex] : undefined;
+
+    // don't toggle if in print mode, correctness is defined, or is missing
+    if (t && t.correct === undefined && !animationsDisabled && !t.isMissing) {
+      const { onChange, maxNoOfSelections } = this.props;
+      const selected = !t.selected;
+
+      if (maxNoOfSelections === 1 && this.selectedCount() === 1) {
+        const selectedToken = (tokens || []).filter((tk) => tk.selected);
+        const updatedTokens = tokensCloned.map((token) => {
+          if (isEqual(token, selectedToken[0])) {
+            return { ...token, selected: false };
+          }
+          return { ...token, selectable: true };
+        });
+
+        const update = { ...t, selected };
+        updatedTokens.splice(targetedTokenIndex, 1, update);
+        onChange(updatedTokens);
+      } else {
+        if (selected && maxNoOfSelections > 0 && this.selectedCount() >= maxNoOfSelections) {
+          log('skip toggle max reached');
+          return;
+        }
+        const update = { ...t, selected };
+        tokensCloned.splice(targetedTokenIndex, 1, update);
+        onChange(tokensCloned);
+      }
+    }
+  };
+
+  /** Build a React tree instead of an HTML string so Emotion can inject CSS */
+  generateTokensNodes: any = () => {
+    const { tokens, disabled, highlightChoices, animationsDisabled } = this.props;
+    const selectedCount = this.selectedCount();
+
+    const isLineBreak = (text) => text === '\n';
+    const isNewParagraph = (text) => text === '\n\n';
+
+    const paragraphs = [];
+    let currentChildren = [];
+
+    const flushParagraph = () => {
+      // Always push a <p>, even if empty, to mirror previous behavior
+      paragraphs.push(<p key={`p-${paragraphs.length}`}>{currentChildren}</p>);
+      currentChildren = [];
+    };
+
+    (tokens || []).forEach((t, index) => {
+      const selectable = t.selected || (t.selectable && this.canSelectMore(selectedCount));
+      const showCorrectAnswer = t.correct !== undefined && (t.selectable || t.selected);
+
+      if (isNewParagraph(t.text)) {
+        flushParagraph();
+        return;
+      }
+
+      if (isLineBreak(t.text)) {
+        currentChildren.push(<br key={`br-${index}`} />);
+        return;
+      }
+
+      if (
+        (selectable && !disabled) ||
+        showCorrectAnswer ||
+        t.selected ||
+        t.isMissing ||
+        (animationsDisabled && t.predefined) // print mode
+      ) {
+        currentChildren.push(
+          <Token
+            key={index}
+            disabled={disabled}
+            index={index}
+            {...t}
+            text={stripHtmlTags(t.text)}
+            selectable={selectable}
+            highlight={highlightChoices}
+            animationsDisabled={animationsDisabled}
+          />,
+        );
+      } else {
+        // raw text node – React will escape as needed
+        currentChildren.push(<React.Fragment key={index}>{stripHtmlTags(t.text)}</React.Fragment>);
+      }
+    });
+
+    // flush last paragraph
+    flushParagraph();
+
+    return paragraphs;
+  };
+
+  render() {
+    const { className: classNameProp } = this.props;
+    const nodes = this.generateTokensNodes();
+
+    return (
+      <StyledTokenSelect className={classNameProp} onClick={this.toggleToken}>
+        {nodes}
+      </StyledTokenSelect>
+    );
+  }
+}
+
+export default TokenSelect;
+export { TokenTypes };

package/src/token-select/token.tsx

@@ -0,0 +1,233 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/text-select/src/token-select/token.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 classNames from 'classnames';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
+
+import { color } from '@pie-lib/render-ui';
+
+// we need to use a larger line height for the token to be more readable
+const LINE_HEIGHT_MULTIPLIER = 3.2;
+// we need a bit more space for correctness indicators
+const CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
+const CORRECTNESS_PADDING = 2;
+
+// Styled components for different token states
+const StyledToken: any = styled('span')(({ theme }) => ({
+  cursor: 'pointer',
+  textIndent: 0,
+  '&.disabled': {
+    cursor: 'inherit',
+    color: color.disabled(),
+  },
+  '&.disabledBlack': {
+    cursor: 'inherit',
+    pointerEvents: 'none',
+  },
+  '&.disabledAndSelected': {
+    backgroundColor: color.blueGrey100(),
+  },
+  [`@media (min-width: ${theme.breakpoints.values.md}px)`]: {
+    '&.selectable:hover': {
+      backgroundColor: color.blueGrey300(),
+      color: theme.palette.common.black,
+      '& > *': {
+        backgroundColor: color.blueGrey300(),
+      },
+    },
+  },
+  '&.selected': {
+    backgroundColor: color.blueGrey100(),
+    color: theme.palette.common.black,
+    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
+    border: `solid 2px ${color.blueGrey900()}`,
+    borderRadius: '4px',
+    '& > *': {
+      backgroundColor: color.blueGrey100(),
+    },
+  },
+  '&.highlight': {
+    border: `dashed 2px ${color.blueGrey600()}`,
+    borderRadius: '4px',
+    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
+  },
+  '&.print': {
+    border: `dashed 2px ${color.blueGrey600()}`,
+    borderRadius: '4px',
+    lineHeight: `${parseFloat(theme.spacing(1)) * LINE_HEIGHT_MULTIPLIER}px`,
+    color: color.text(),
+  },
+  '&.custom': {
+    display: 'initial',
+  },
+}));
+
+const StyledCommonTokenStyle: any = styled('span')(({ theme }) => ({
+  position: 'relative',
+  borderRadius: '4px',
+  color: theme.palette.common.black,
+  lineHeight: `${parseFloat(theme.spacing(1)) * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
+  padding: `${CORRECTNESS_PADDING}px`,
+}));
+
+const StyledCorrectContainer: any = styled(StyledCommonTokenStyle)(() => ({
+  border: `${color.correctTertiary()} solid 2px`,
+}));
+
+const StyledIncorrectContainer: any = styled(StyledCommonTokenStyle)(() => ({
+  border: `${color.incorrectWithIcon()} solid 2px`,
+}));
+
+const StyledMissingContainer: any = styled(StyledCommonTokenStyle)(() => ({
+  border: `${color.incorrectWithIcon()} dashed 2px`,
+}));
+
+const baseIconStyles = {
+  color: color.white(),
+  position: 'absolute',
+  top: '-8px',
+  left: '-8px',
+  borderRadius: '50%',
+  fontSize: '12px',
+  padding: '2px',
+  display: 'inline-block',
+};
+
+const StyledCorrectCheckIcon: any = styled(Check)(() => ({
+  ...baseIconStyles,
+  backgroundColor: color.correctTertiary(),
+}));
+
+const StyledIncorrectCloseIcon: any = styled(Close)(() => ({
+  ...baseIconStyles,
+  backgroundColor: color.incorrectWithIcon(),
+}));
+
+const Wrapper = ({ useWrapper, children, Container, Icon }) =>
+  useWrapper ? (
+    <Container>
+      {children}
+      {Icon ? <Icon /> : null}
+    </Container>
+  ) : (
+    children
+  );
+
+Wrapper.propTypes = {
+  useWrapper: PropTypes.bool,
+  Container: PropTypes.elementType,
+  Icon: PropTypes.elementType,
+  children: PropTypes.node,
+};
+
+export const TokenTypes = {
+  text: PropTypes.string,
+  selectable: PropTypes.bool,
+};
+
+export class Token extends React.Component {
+  static rootClassName = 'tokenRootClass';
+
+  static propTypes = {
+    ...TokenTypes,
+    text: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    disabled: PropTypes.bool,
+    highlight: PropTypes.bool,
+    correct: PropTypes.bool,
+  };
+
+  static defaultProps = {
+    selectable: false,
+    text: '',
+  };
+
+  getClassAndIconConfig: any = () => {
+    const {
+      selectable,
+      selected,
+      className: classNameProp,
+      disabled,
+      highlight,
+      correct,
+      animationsDisabled,
+      isMissing,
+    } = this.props;
+    const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    const baseClassName = Token.rootClassName;
+    let Container;
+    let Icon;
+
+    if (correct === undefined && selected && disabled) {
+      return {
+        className: classNames(baseClassName, 'selected', 'disabledBlack', classNameProp),
+        Component: StyledToken,
+      };
+    }
+
+    if (correct !== undefined) {
+      const isCorrect = correct === true;
+      return {
+        className: classNames(baseClassName, 'custom', classNameProp),
+        Component: StyledToken,
+        Container: isCorrect ? StyledCorrectContainer : StyledIncorrectContainer,
+        Icon: isCorrect ? StyledCorrectCheckIcon : StyledIncorrectCloseIcon,
+      };
+    }
+
+    if (isMissing) {
+      return {
+        className: classNames(baseClassName, 'custom', 'missing', classNameProp),
+        Component: StyledToken,
+        Container: StyledMissingContainer,
+        Icon: StyledIncorrectCloseIcon,
+      };
+    }
+
+    return {
+      className: classNames(
+        baseClassName,
+        disabled && 'disabled',
+        selectable && !disabled && !isTouchEnabled && 'selectable',
+        selected && !disabled && 'selected',
+        selected && disabled && 'disabledAndSelected',
+        highlight && selectable && !disabled && !selected && 'highlight',
+        animationsDisabled && 'print',
+        classNameProp,
+      ),
+      Component: StyledToken,
+      Container,
+      Icon,
+    };
+  };
+
+  render() {
+    const { text, index, correct, isMissing } = this.props;
+    const { className, Component, Container, Icon } = this.getClassAndIconConfig();
+
+    const TokenComponent = Component || StyledToken;
+
+    return (
+      <Wrapper useWrapper={correct !== undefined || isMissing} Container={Container} Icon={Icon}>
+        <TokenComponent
+          className={className}
+          dangerouslySetInnerHTML={{ __html: (text || '').replace(/\n/g, '<br>') }}
+          data-indexkey={index}
+        />
+      </Wrapper>
+    );
+  }
+}
+
+export default Token;