Merge branch 'main' into release/server-side-scoring

.changeset/chilled-turtles-drive.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Internal: add and pass regression tests for `PerseusItem` parser.

.changeset/chilly-carrots-wink.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Remove use of findDOMNode in number-input component

.changeset/few-jokes-travel.md

@@ -0,0 +1,8 @@
+---
+"@khanacademy/kas": patch
+"@khanacademy/perseus": patch
+"@khanacademy/perseus-editor": patch
+"@khanacademy/simple-markdown": patch
+---
+
+Fix some file-wide error suppressions

.changeset/giant-tables-impress.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Remove usage of findDOMNode in text-input component

.changeset/lazy-geckos-suffer.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+update moveable point component and use control point method to have optional params

.changeset/mighty-rules-talk.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Switch two corner usages of deprecated @khanacademy/wonder-blocks-spacing to @khanacademy/wonder-blocks-tokens

.changeset/rotten-peaches-move.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Internal: remove unused fields from `answerArea` when parsing `PerseusItem`s.

.changeset/seven-owls-explain.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Internal: Inline widget version into Expression widget parser.

.changeset/two-feet-care.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Add tests for propUpgrades functions (and remove underscore usage)

.changeset/yellow-ducks-march.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Internal: Migrate expression widget options to the latest version in parseAndTypecheckPerseusItem (not yet used in production).

.eslintrc.js

@@ -172,6 +172,11 @@ module.exports = {
         "no-invalid-this": "off",
         "@typescript-eslint/no-this-alias": "off",
         "no-unused-expressions": "off",
+        "no-restricted-imports": [
+            "error",
+            "@khanacademy/wonder-blocks-color",
+            "@khanacademy/wonder-blocks-spacing",
+        ],
         "object-curly-spacing": "off",
         semi: "off",
 

.github/dependabot.yml

@@ -10,3 +10,15 @@ updates:
       allow:
           - dependency-name: "@khanacademy/eslint-config"
           - dependency-name: "@khanacademy/eslint-plugin"
+      assignees:
+          - "@Khan/perseus"
+
+      # Grouped updates for Wonder Blocks and Wonder Stuff releases.
+      # This helps us to stay in sync with the latest releases of these packages.
+      groups:
+          wonder-stuff:
+              patterns:
+                  - "@khanacademy/wonder-stuff-*"
+          wonder-blocks:
+              patterns:
+                  - "@khanacademy/wonder-blocks-*"

config/test/test-setup.ts

@@ -35,7 +35,6 @@ if (typeof window !== "undefined") {
     // Override the window.location implementation to mock out assign()
     // We need to access window.location.assign to verify that we're
     // redirecting to the right place.
-    /* eslint-disable no-restricted-syntax */
     const oldLocation = window.location;
     // @ts-expect-error - TS2790 - The operand of a 'delete' operator must be optional.
     delete window.location;

packages/kas/src/nodes.ts

@@ -1,7 +1,7 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable import/order */
 /* TODO(charlie): fix these lint errors (http://eslint.org/docs/rules): */
-/* eslint-disable indent, no-undef, no-var, one-var, no-dupe-keys, no-new-func, no-redeclare, @typescript-eslint/no-unused-vars, comma-dangle, max-len, prefer-spread, space-infix-ops, space-unary-ops */
+/* eslint-disable indent, no-undef, no-var, no-dupe-keys, no-new-func, no-redeclare, comma-dangle, max-len, prefer-spread, space-infix-ops, space-unary-ops */
 import _ from "underscore";
 
 import {unitParser} from "./__genfiles__/unitparser";
@@ -1414,7 +1414,6 @@ export class Mul extends Seq {
                 rational = rational.addHint("fraction");
             }
 
-            var result;
             if (num.n < 0 && right.n < 0) {
                 rational.d = -rational.d;
                 return left.replace(num, [NumNeg, rational]);

packages/perseus-editor/src/__stories__/item-editor.stories.tsx

@@ -10,7 +10,6 @@ import "../styles/perseus-editor.less";
 type Props = React.ComponentProps<typeof ItemExtrasEditor>;
 
 const Wrapper = (props: Props) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {onChange, ...rest} = props;
     const [extras, setExtras] =
         React.useState<Partial<typeof ItemExtrasEditor.defaultProps>>(rest);
@@ -19,7 +18,7 @@ const Wrapper = (props: Props) => {
         <ItemExtrasEditor
             {...extras}
             onChange={(e) => {
-                props.onChange?.(e); // to register action in storybook
+                onChange?.(e); // to register action in storybook
                 setExtras((prevExtras) => ({...prevExtras, ...e}));
             }}
         />

packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx

@@ -1,5 +1,4 @@
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {color} from "@khanacademy/wonder-blocks-tokens";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import DeviceFramer from "../device-framer";
 
@@ -21,7 +20,7 @@ const SampleContent = () => {
                 color: color.offWhite,
                 width: "90%",
                 height: "300px",
-                padding: Spacing.medium_16,
+                padding: spacing.medium_16,
             }}
         >
             The DeviceFramer controls the size of the content inside the frame.

packages/perseus-editor/src/components/widget-editor.tsx

@@ -8,8 +8,8 @@ import {
 } from "@khanacademy/perseus";
 import {useUniqueIdWithMock} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
 import Switch from "@khanacademy/wonder-blocks-switch";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import * as React from "react";
 import _ from "underscore";
 
@@ -241,7 +241,7 @@ function LabeledSwitch(props: {
     return (
         <>
             <label htmlFor={id}>{label}</label>
-            <Strut size={Spacing.xxSmall_6} />
+            <Strut size={spacing.xxSmall_6} />
             <Switch id={id} {...switchProps} />
         </>
     );

packages/perseus-editor/src/multirenderer-editor.tsx

@@ -31,8 +31,7 @@ import type {
 
     // Multi-item item types
     Item,
-    // ItemTree is used below, the linter is confused.
-    ItemTree, // eslint-disable-line @typescript-eslint/no-unused-vars
+    ItemTree,
     ItemObjectNode,
     ItemArrayNode,
     ContentNode,

packages/perseus-editor/src/widgets/interactive-graph-editor/locked-figures/locked-function-settings.test.tsx

@@ -5,9 +5,6 @@ import * as React from "react";
 
 import {flags} from "../../../__stories__/flags-for-api-options";
 
-// Disabling the following linting error because the import is needed for mocking purposes.
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import examples from "./locked-function-examples";
 import LockedFunctionSettings from "./locked-function-settings";
 import {
     getDefaultFigureForType,

packages/perseus-editor/src/widgets/orderer-editor.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable one-var, react/forbid-prop-types */
+/* eslint-disable react/forbid-prop-types */
 import {components} from "@khanacademy/perseus";
 import PropTypes from "prop-types";
 import * as React from "react";
 import _ from "underscore";
 
 const {InfoTip, TextListEditor} = components;
 
-const NORMAL = "normal",
-    AUTO = "auto",
-    HORIZONTAL = "horizontal",
-    VERTICAL = "vertical";
+const NORMAL = "normal";
+const AUTO = "auto";
+const HORIZONTAL = "horizontal";
+const VERTICAL = "vertical";
 
 type Props = any;
 

packages/perseus/src/components/number-input.tsx

@@ -1,10 +1,8 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
 import {number as knumber} from "@khanacademy/kmath";
+import {Errors, PerseusError} from "@khanacademy/perseus-core";
 import classNames from "classnames";
-import $ from "jquery";
 import PropTypes from "prop-types";
 import * as React from "react";
-import ReactDOM from "react-dom";
 import _ from "underscore";
 
 import Util from "../util";
@@ -40,6 +38,7 @@ const getNumericFormat = KhanMath.getNumericFormat;
 class NumberInput extends React.Component<any, any> {
     static contextType = PerseusI18nContext;
     declare context: React.ContextType<typeof PerseusI18nContext>;
+    inputRef = React.createRef<HTMLInputElement>();
 
     static propTypes = {
         value: PropTypes.number,
@@ -71,20 +70,27 @@ class NumberInput extends React.Component<any, any> {
         }
     }
 
+    _getInput: () => HTMLInputElement = () => {
+        if (!this.inputRef.current) {
+            throw new PerseusError(
+                "Input ref accessed before set",
+                Errors.Internal,
+            );
+        }
+
+        return this.inputRef.current;
+    };
+
     /* Return the current "value" of this input
      * If empty, it returns the placeholder (if it is a number) or null
      */
     getValue: () => any = () => {
-        return this.parseInputValue(
-            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-            ReactDOM.findDOMNode(this.refs.input).value, // eslint-disable-line react/no-string-refs
-        );
+        return this.parseInputValue(this._getInput().value);
     };
 
     /* Return the current string value of this input */
     getStringValue: () => string = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'value' does not exist on type 'Element | Text'.
-        return ReactDOM.findDOMNode(this.refs.input).value.toString(); // eslint-disable-line react/no-string-refs
+        return this._getInput().toString();
     };
 
     parseInputValue: (arg1: any) => any = (value) => {
@@ -98,36 +104,28 @@ class NumberInput extends React.Component<any, any> {
 
     /* Set text input focus to this input */
     focus: () => void = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.input).focus(); // eslint-disable-line react/no-string-refs
+        this._getInput().focus();
         this._handleFocus();
     };
 
     blur: () => void = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this.refs.input).blur(); // eslint-disable-line react/no-string-refs
+        this._getInput().blur();
         this._handleBlur();
     };
 
-    setSelectionRange: (arg1: number, arg2: number) => any = (
+    setSelectionRange: (arg1: number, arg2: number) => void = (
         selectionStart,
         selectionEnd,
     ) => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'setSelectionRange' does not exist on type 'Element | Text'.
-        ReactDOM.findDOMNode(this).setSelectionRange(
-            selectionStart,
-            selectionEnd,
-        );
+        this._getInput().setSelectionRange(selectionStart, selectionEnd);
     };
 
-    getSelectionStart: () => number = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionStart' does not exist on type 'Element | Text'.
-        return ReactDOM.findDOMNode(this).selectionStart;
+    getSelectionStart: () => number | null = () => {
+        return this._getInput().selectionStart;
     };
 
-    getSelectionEnd: () => number = () => {
-        // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'selectionEnd' does not exist on type 'Element | Text'.
-        return ReactDOM.findDOMNode(this).selectionEnd;
+    getSelectionEnd: () => number | null = () => {
+        return this._getInput().selectionEnd;
     };
 
     _checkValidity: (arg1: any) => boolean = (value) => {
@@ -203,11 +201,7 @@ class NumberInput extends React.Component<any, any> {
     };
 
     _setValue: (arg1: number, arg2: MathFormat) => void = (val, format) => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2769 - No overload matches this call. | TS2339 - Property 'val' does not exist on type 'JQueryStatic'.
-        $(ReactDOM.findDOMNode(this.refs.input)).val(
-            toNumericString(val, format),
-        );
+        this._getInput().value = toNumericString(val, format);
     };
 
     render(): React.ReactNode {
@@ -237,8 +231,7 @@ class NumberInput extends React.Component<any, any> {
                 {...restProps}
                 className={classes}
                 type="text"
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
+                ref={this.inputRef}
                 onChange={this._handleChange}
                 onFocus={this._handleFocus}
                 onBlur={this._handleBlur}