@khanacademy/perseus 4.0.2 → 6.0.0

package/src/components/highlighting/ui/selection-tracker.tsx

@@ -22,7 +22,7 @@ export type TrackedSelection = {
     proposedHighlight: DOMHighlight;
 };
 
-type SelectionTrackerProps = {
+type Props = {
     // A function that builds a DOMHighlight from the given DOMRange, if
     // possible. If it would not currently be valid to add a highlight over the
     // given DOMRange, returns null.
@@ -38,7 +38,7 @@ type SelectionTrackerProps = {
     enabled: boolean;
 };
 
-type SelectionTrackerState = {
+type State = {
     // The current state of the mouse button. We distinguish between down,
     // down and the selection has changed since going down, and up.
     mouseState: "down" | "down-and-selecting" | "up";
@@ -46,11 +46,8 @@ type SelectionTrackerState = {
     trackedSelection: TrackedSelection | null | undefined;
 };
 
-class SelectionTracker extends React.PureComponent<
-    SelectionTrackerProps,
-    SelectionTrackerState
-> {
-    state: SelectionTrackerState = {
+class SelectionTracker extends React.PureComponent<Props, State> {
+    state: State = {
         mouseState: "up",
         trackedSelection: null,
     };
@@ -59,7 +56,7 @@ class SelectionTracker extends React.PureComponent<
         this._updateListeners(false, this.props.enabled);
     }
 
-    componentDidUpdate(prevProps: SelectionTrackerProps) {
+    componentDidUpdate(prevProps: Props) {
         if (this.props.buildHighlight !== prevProps.buildHighlight) {
             // The highlight-building function changed, so the
             // proposedHighlight we built with it might be different, or no

package/src/components/highlighting/word-indexer.tsx

@@ -18,7 +18,7 @@ import {PerseusError} from "../../perseus-error";
 
 import type {DOMRange} from "./types";
 
-type WordIndexerProps = {
+type Props = {
     // The content to display and traverse in search of words.
     children?: React.ReactElement<any>;
     // After each mount and update, this callback is called with the list of
@@ -26,7 +26,7 @@ type WordIndexerProps = {
     onWordsUpdate: (wordRanges: ReadonlyArray<DOMRange>) => unknown;
 };
 
-class WordIndexer extends React.PureComponent<WordIndexerProps> {
+class WordIndexer extends React.PureComponent<Props> {
     _container: HTMLElement | null | undefined;
     /* eslint-enable react/sort-comp */
 

package/src/components/hud.tsx

@@ -1,127 +1,116 @@
 import {StyleSheet, css} from "aphrodite";
-import PropTypes from "prop-types";
 import * as React from "react";
 
 import * as constants from "../styles/constants";
 
-class HUD extends React.Component<any> {
-    static propTypes = {
-        message: PropTypes.string.isRequired,
-        enabled: PropTypes.bool.isRequired,
-        onClick: PropTypes.func.isRequired,
-        fixedPosition: PropTypes.bool,
-    };
+// Displays a stylized open eye: lint warnings are visible
+const VisibleIcon = () => (
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        className={css(styles.icon)}
+    >
+        <defs>
+            <path
+                id="a"
+                d={
+                    "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " +
+                    "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " +
+                    "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " +
+                    "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" +
+                    "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " +
+                    "0 0 0 0 6z"
+                }
+            />
+        </defs>
+        <g fill="none" fillRule="evenodd">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <mask id="b" fill="#fff">
+                <use href="#a" />
+            </mask>
+            <use fill="#fff" fillRule="nonzero" href="#a" />
+            <g fill="#fff" mask="url(#b)">
+                <path d="M0 0h24v24H0z" />
+            </g>
+        </g>
+    </svg>
+);
 
-    static defaultProps: any = {
-        fixedPosition: true,
-    };
+// Displays a stylized eye with a line through it: I don't want to see lint
+const HiddenIcon = () => (
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        className={css(styles.icon)}
+    >
+        <defs>
+            <path
+                id="a"
+                d={
+                    "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " +
+                    "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " +
+                    "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." +
+                    "604.401 1.268.401 1.966 0 1.02-.305 " +
+                    "1.967-.828 2.757l2.535 2.536a1 1 0 0 " +
+                    "1-1.414 1.414l-12-12a1 1 0 0 1 " +
+                    "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " +
+                    "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " +
+                    "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " +
+                    "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " +
+                    "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " +
+                    "2.363-3.085 3.929-4z"
+                }
+            />
+        </defs>
+        <g fill="none" fillRule="evenodd">
+            <path fill="none" d="M0 0h24v24H0z" />
+            <mask id="b" fill="#fff">
+                <use href="#a" />
+            </mask>
+            <use fill="#fff" fillRule="nonzero" href="#a" />
+            <g fill="#fff" mask="url(#b)">
+                <path d="M0 0h24v24H0z" />
+            </g>
+        </g>
+    </svg>
+);
 
-    // Displays a stylized open eye: lint warnings are visible
-    renderVisibleIcon: () => React.ReactElement = () => {
-        return (
-            <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                className={css(styles.icon)}
-            >
-                <defs>
-                    <path
-                        id="a"
-                        d={
-                            "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " +
-                            "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " +
-                            "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " +
-                            "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" +
-                            "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " +
-                            "0 0 0 0 6z"
-                        }
-                    />
-                </defs>
-                <g fill="none" fillRule="evenodd">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <mask id="b" fill="#fff">
-                        <use href="#a" />
-                    </mask>
-                    <use fill="#fff" fillRule="nonzero" href="#a" />
-                    <g fill="#fff" mask="url(#b)">
-                        <path d="M0 0h24v24H0z" />
-                    </g>
-                </g>
-            </svg>
-        );
-    };
+type Props = {
+    message: string;
+    enabled: boolean;
+    onClick: () => void;
+    fixedPosition?: boolean;
+};
 
-    // Displays a stylized eye with a line through it: I don't want to see lint
-    renderHiddenIcon: () => React.ReactElement = () => {
-        return (
-            <svg
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                className={css(styles.icon)}
-            >
-                <defs>
-                    <path
-                        id="a"
-                        d={
-                            "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " +
-                            "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " +
-                            "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." +
-                            "604.401 1.268.401 1.966 0 1.02-.305 " +
-                            "1.967-.828 2.757l2.535 2.536a1 1 0 0 " +
-                            "1-1.414 1.414l-12-12a1 1 0 0 1 " +
-                            "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " +
-                            "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " +
-                            "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " +
-                            "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " +
-                            "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " +
-                            "2.363-3.085 3.929-4z"
-                        }
-                    />
-                </defs>
-                <g fill="none" fillRule="evenodd">
-                    <path fill="none" d="M0 0h24v24H0z" />
-                    <mask id="b" fill="#fff">
-                        <use href="#a" />
-                    </mask>
-                    <use fill="#fff" fillRule="nonzero" href="#a" />
-                    <g fill="#fff" mask="url(#b)">
-                        <path d="M0 0h24v24H0z" />
-                    </g>
-                </g>
-            </svg>
-        );
-    };
-
-    render(): React.ReactNode {
-        let state;
-        let icon;
-        if (this.props.enabled) {
-            state = styles.enabled;
-            icon = this.renderVisibleIcon();
-        } else {
-            state = styles.disabled;
-            icon = this.renderHiddenIcon();
-        }
-
-        return (
-            <button
-                className={css(
-                    styles.hud,
-                    this.props.fixedPosition && styles.hudFixedPosition,
-                    state,
-                )}
-                onClick={(e) => {
-                    this.props.onClick();
-                }}
-            >
-                {icon}
-                {this.props.message}
-            </button>
-        );
+const HUD = ({message, enabled, onClick, fixedPosition = true}: Props) => {
+    let state;
+    let icon;
+    if (enabled) {
+        state = styles.enabled;
+        icon = <VisibleIcon />;
+    } else {
+        state = styles.disabled;
+        icon = <HiddenIcon />;
     }
-}
+
+    return (
+        <button
+            className={css(
+                styles.hud,
+                fixedPosition && styles.hudFixedPosition,
+                state,
+            )}
+            onClick={(e) => {
+                onClick();
+            }}
+        >
+            {icon}
+            {message}
+        </button>
+    );
+};
 
 const styles = StyleSheet.create({
     hud: {

package/src/components/inline-icon.tsx

@@ -1,4 +1,18 @@
-/* eslint-disable react/forbid-prop-types */
+import * as React from "react";
+
+type InlineIconProps = {
+    // An SVG path to render.
+    path: string;
+    // The path's viewBox dimensions.
+    // We set the viewport height to 1em and scale the width accordingly.
+    height: number;
+    width: number;
+    style?: React.CSSProperties;
+    // A11y description for this icon. If absent, icon is marked
+    // aria-hidden=true
+    title?: string;
+};
+
 /**
  * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
  * inline like Font Awesome did.
@@ -23,16 +37,13 @@
  *   <InlineIcon {...editIcon} />
  *
  */
-import PropTypes from "prop-types";
-import * as React from "react";
-
-const InlineIcon: React.FC<InlineIconProps> = ({
+const InlineIcon = ({
     path,
     width,
     height,
     style = {},
     title,
-}): React.ReactElement => (
+}: InlineIconProps): React.ReactElement => (
     <svg
         role="img"
         aria-hidden={!title}
@@ -46,32 +57,4 @@ const InlineIcon: React.FC<InlineIconProps> = ({
     </svg>
 );
 
-InlineIcon.propTypes = {
-    // An SVG path to render.
-    path: PropTypes.string.isRequired,
-
-    // The path's viewBox dimensions.
-    // We set the viewport height to 1em and scale the width accordingly.
-    height: PropTypes.number.isRequired,
-    width: PropTypes.number.isRequired,
-
-    style: PropTypes.object,
-
-    // A11y description for this icon. If absent, icon is marked
-    // aria-hidden=true
-    title: PropTypes.string,
-};
-export type InlineIconProps = {
-    // An SVG path to render.
-    path: string;
-    // The path's viewBox dimensions.
-    // We set the viewport height to 1em and scale the width accordingly.
-    height: number;
-    width: number;
-    style?: any;
-    // A11y description for this icon. If absent, icon is marked
-    // aria-hidden=true
-    title?: string;
-};
-
 export default InlineIcon;

package/src/components/input-with-examples.tsx

@@ -10,7 +10,7 @@ import Util from "../util";
 import MathInput from "./math-input";
 import MathOutput from "./math-output";
 import TextInput from "./text-input";
-import Tooltip from "./tooltip";
+import Tooltip, {HorizontalDirection, VerticalDirection} from "./tooltip";
 
 import type {LinterContextProps} from "../types";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
@@ -184,9 +184,9 @@ class InputWithExamples extends React.Component<Props, State> {
                 // eslint-disable-next-line react/no-string-refs
                 ref="tooltip"
                 className="perseus-formats-tooltip preview-measure"
-                horizontalPosition="left"
-                horizontalAlign="left"
-                verticalPosition="bottom"
+                horizontalPosition={HorizontalDirection.Left}
+                horizontalAlign={HorizontalDirection.Left}
+                verticalPosition={VerticalDirection.Bottom}
                 arrowSize={10}
                 borderColor="#ccc"
                 show={showExamples}

package/src/components/lint.tsx

@@ -1,3 +1,47 @@
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import * as constants from "../styles/constants";
+
+import InlineIcon from "./inline-icon";
+
+const exclamationIcon = {
+    path: "M6 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1z",
+    height: 12,
+    width: 12,
+} as const;
+
+enum Severity {
+    Error = 1,
+    Warning = 2,
+    Recommendation = 3,
+    OfflineReportingOnly = 4,
+}
+
+type Props = {
+    // The children are the linty content we're highlighting
+    children: React.ReactNode;
+    // Inline lint is highlighted differently than block lint.
+    inline?: boolean;
+    // This is the text that appears in the tooltip
+    message: string;
+    // This is used as the fragment id (hash) in the URL of the link
+    ruleName: string;
+    // Lint warnings inside tables are handled specially
+    insideTable: boolean;
+    // Should lint highlighting be rendered as a block to the left of
+    // the lint instead of on the right gutter?
+    blockHighlight?: boolean;
+    // How important this lint message is for the editor. Severity goes
+    // from 1 (indicating an error) to 4 (offline reporting only)
+    severity?: Severity;
+};
+
+type State = {
+    tooltipAbove: boolean;
+};
+
 /**
  * This component renders "lint" nodes in a markdown parse tree. Lint nodes
  * are inserted into the tree by the Perseus linter (see
@@ -20,45 +64,8 @@
  * that has a right margin (like anything blockquoted) the circle will appear
  * to the left of where it belongs.  And if there is more
  **/
-import {StyleSheet, css} from "aphrodite";
-import PropTypes from "prop-types";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import * as constants from "../styles/constants";
-
-import InlineIcon from "./inline-icon";
-
-const exclamationIcon = {
-    path: "M6 11a1 1 0 1 1 0-2 1 1 0 0 1 0 2zm0-9a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1z",
-    height: 12,
-    width: 12,
-} as const;
-
-type Props = any;
-type State = any;
-
 class Lint extends React.Component<Props, State> {
-    _positionTimeout: number | null | undefined;
-
-    static propTypes = {
-        // The children are the linty content we're highlighting
-        children: PropTypes.node,
-        // Inline lint is highlighted differently than block lint.
-        inline: PropTypes.bool,
-        // This is the text that appears in the tooltip
-        message: PropTypes.string.isRequired,
-        // This is used as the fragment id (hash) in the URL of the link
-        ruleName: PropTypes.string.isRequired,
-        // Lint warnings inside tables are handled specially
-        insideTable: PropTypes.bool.isRequired,
-        // Should lint highlighting be rendered as a block to the left of
-        // the lint instead of on the right gutter?
-        blockHighlight: PropTypes.bool,
-        // How important this lint message is for the editor. Severity goes
-        // from 1 (indicating an error) to 4 (offline reporting only)
-        severity: PropTypes.number,
-    };
+    _positionTimeout: number | undefined;
 
     state: State = {
         tooltipAbove: true,
@@ -73,7 +80,6 @@ class Lint extends React.Component<Props, State> {
     componentWillUnmount() {
         // TODO(somewhatabstract): Use WB timing
         // eslint-disable-next-line no-restricted-syntax
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
         window.clearTimeout(this._positionTimeout);
     }
 
@@ -98,11 +104,11 @@ class Lint extends React.Component<Props, State> {
         let severityStyle;
         let warningText;
         let warningTextStyle;
-        if (this.props.severity === 1) {
+        if (this.props.severity === Severity.Error) {
             severityStyle = styles.indicatorError;
             warningText = "Error";
             warningTextStyle = styles.publishBlockingError;
-        } else if (this.props.severity === 2) {
+        } else if (this.props.severity === Severity.Warning) {
             severityStyle = styles.indicatorWarning;
             warningText = "Warning";
             warningTextStyle = styles.warning;

package/src/components/math-output.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable react/sort-comp */
 import $ from "jquery";
-import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
@@ -11,22 +10,29 @@ import TexWrangler from "../tex-wrangler";
 
 const ModifyTex = TexWrangler.modifyTex;
 
-class MathOutput extends React.Component<any, any> {
-    static propTypes = {
-        value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        className: PropTypes.string,
-        labelText: PropTypes.string,
-        onFocus: PropTypes.func,
-        onBlur: PropTypes.func,
-    };
+type Props = {
+    value: string | number;
+    className?: string;
+    labelText?: string;
+    onFocus: () => void;
+    onBlur: () => void;
+};
+
+type DefaultProps = Pick<Props, "value" | "onFocus" | "onBlur">;
+
+type State = {
+    focused: boolean;
+    selectorNamespace: string;
+};
 
-    static defaultProps: any = {
+class MathOutput extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
         value: "",
         onFocus: function () {},
         onBlur: function () {},
     };
 
-    state: any = {
+    state: State = {
         focused: false,
         selectorNamespace: _.uniqueId("math-output"),
     };

package/src/components/simple-keypad-input.tsx

@@ -10,13 +10,15 @@
 
 import {
     KeypadInput,
-    KeypadTypes,
+    KeypadType,
     keypadElementPropType,
 } from "@khanacademy/math-input";
 import PropTypes from "prop-types";
 import * as React from "react";
 
 export default class SimpleKeypadInput extends React.Component<any> {
+    _isMounted = false;
+
     componentDidMount() {
         // TODO(scottgrant): This is a hack to remove the deprecated call to
         // this.isMounted() but is still considered an anti-pattern.
@@ -27,8 +29,6 @@ export default class SimpleKeypadInput extends React.Component<any> {
         this._isMounted = false;
     }
 
-    _isMounted = false;
-
     focus() {
         // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
         this.refs.input.focus(); // eslint-disable-line react/no-string-refs
@@ -61,7 +61,7 @@ export default class SimpleKeypadInput extends React.Component<any> {
                     if (keypadElement) {
                         keypadElement.configure(
                             {
-                                keypadType: KeypadTypes.FRACTION,
+                                keypadType: KeypadType.FRACTION,
                             },
                             () => {
                                 if (_this._isMounted) {