@khanacademy/perseus 7.2.0 → 8.0.0

package/src/util/math.ts

@@ -38,7 +38,7 @@ const KhanMath = {
             // TODO(kevinb): rewrite using rest args instead of arguments
             // eslint-disable-next-line prefer-rest-params
             const rest = [].slice.call(arguments, 1);
-            // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+            // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
             return KhanMath.getGCD(a, KhanMath.getGCD(...rest));
         }
         let mod;
@@ -60,7 +60,7 @@ const KhanMath = {
             // TODO(kevinb): rewrite using rest args instead of arguments
             // eslint-disable-next-line prefer-rest-params
             const rest = [].slice.call(arguments, 1);
-            // @ts-expect-error [FEI-5003] - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
+            // @ts-expect-error - TS2556 - A spread argument must either have a tuple type or be passed to a rest parameter.
             return KhanMath.getLCM(a, KhanMath.getLCM(...rest));
         }
         return Math.abs(a * b) / KhanMath.getGCD(a, b);
@@ -91,7 +91,7 @@ const KhanMath = {
 
         return true;
     },
-    // @ts-expect-error [FEI-5003] - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
+    // @ts-expect-error - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
     getPrimeFactorization: function (number: number): ReadonlyArray<number> {
         if (number === 1) {
             return [];
@@ -121,7 +121,7 @@ const KhanMath = {
     // Round a number to a certain number of decimal places
     roundTo: function (precision: number, num: number): number {
         const factor = Math.pow(10, precision).toFixed(5);
-        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'number'. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
+        // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'number'. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type. | TS2363 - The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
         return Math.round((num * factor).toFixed(5)) / factor;
     },
 

package/src/util/react-render.tsx

@@ -8,7 +8,7 @@ export default function render<ElementType extends React.ElementType>(
     callback?: () => void,
 ): React.ElementRef<ElementType> {
     // TODO(LP-11406): Replace this, or callers, with React Portal
-    // @ts-expect-error [FEI-5003] - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
+    // @ts-expect-error - TS2322 - Type 'void' is not assignable to type 'ElementRef<ElementType>'.
     // eslint-disable-next-line no-restricted-syntax
     return ReactDOM.render(
         /**

package/src/util/scroll-utils.ts

@@ -4,7 +4,7 @@
 
 // Polyfill scrollTo if it doesn't exist
 if (typeof HTMLElement !== "undefined" && !HTMLElement.prototype.scrollTo) {
-    // @ts-expect-error [FEI-5003] - TS2322 - Type '(left: number, top: any) => void' is not assignable to type '{ (options?: ScrollToOptions | undefined): void; (x: number, y: number): void; }'.
+    // @ts-expect-error - TS2322 - Type '(left: number, top: any) => void' is not assignable to type '{ (options?: ScrollToOptions | undefined): void; (x: number, y: number): void; }'.
     HTMLElement.prototype.scrollTo = function (left, top: any) {
         this.scrollLeft = left;
         this.scrollTop = top;
@@ -44,7 +44,7 @@ const scrollElementToOffset = (
     const startPosition =
         elementOrWindow === window
             ? window.pageYOffset
-            : // @ts-expect-error [FEI-5003] - TS2551 - Property 'scrollTop' does not exist on type 'HTMLElement | Window'. Did you mean 'scrollTo'?
+            : // @ts-expect-error - TS2551 - Property 'scrollTop' does not exist on type 'HTMLElement | Window'. Did you mean 'scrollTo'?
               elementOrWindow.scrollTop;
     const endPosition = offset;
     const scrollDistance = endPosition - startPosition;

package/src/util/tex.ts

@@ -79,11 +79,11 @@ export default {
             if (text == null) {
                 if ($elem.attr("data-math-formula")) {
                     // The old typeset formula
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
+                    // @ts-expect-error - TS2322 - Type 'string | undefined' is not assignable to type 'string'.
                     text = $elem.attr("data-math-formula");
                 } else if (script) {
                     // The contents of the <script> tag
-                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'text' does not exist on type 'HTMLElement'.
+                    // @ts-expect-error - TS2339 - Property 'text' does not exist on type 'HTMLElement'.
                     text = script.text || script.textContent;
                 }
             }
@@ -130,7 +130,7 @@ export default {
                 }
             }
 
-            // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+            // @ts-expect-error - TS2769 - No overload matches this call.
             $elem.text($elem.attr("data-math-formula"));
             $elem.attr("data-math-formula", null);
             $elem.attr("data-math-type", null);

package/src/util.ts

@@ -58,9 +58,9 @@ const nestedMap = function <T, M>(
     context: unknown,
 ): M | ReadonlyArray<M> {
     if (Array.isArray(children)) {
-        // @ts-expect-error [FEI-5003] - TS2322 - Type '(M | readonly M[])[]' is not assignable to type 'M | readonly M[]'.
+        // @ts-expect-error - TS2322 - Type '(M | readonly M[])[]' is not assignable to type 'M | readonly M[]'.
         return _.map(children, function (child) {
-            // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 2.
             return nestedMap(child, func);
         });
     }
@@ -149,9 +149,9 @@ function shuffle<T>(
             const newEnd = Math.floor(random() * top),
                 temp = shuffled[newEnd];
 
-            // @ts-expect-error [FEI-5003] - TS2542 - Index signature in type 'readonly T[]' only permits reading.
+            // @ts-expect-error - TS2542 - Index signature in type 'readonly T[]' only permits reading.
             shuffled[newEnd] = shuffled[top - 1];
-            // @ts-expect-error [FEI-5003] - TS2542 - Index signature in type 'readonly T[]' only permits reading.
+            // @ts-expect-error - TS2542 - Index signature in type 'readonly T[]' only permits reading.
             shuffled[top - 1] = temp;
         }
     } while (ensurePermuted && _.isEqual(array, shuffled));
@@ -179,14 +179,14 @@ const split: (str: string, r: RegExp) => ReadonlyArray<string> = "x".split(
 
           while ((match = r.exec(str))) {
               const m = match;
-              // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
+              // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
               output.push(str.slice(lastIndex, m.index));
-              // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
+              // @ts-expect-error - TS2345 - Argument of type 'any' is not assignable to parameter of type 'never'.
               output.push(...m.slice(1));
               lastIndex = m.index + m[0].length;
           }
 
-          // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
+          // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
           output.push(str.slice(lastIndex));
           return output;
       };
@@ -287,7 +287,7 @@ function keScoreFromPerseusScore(
         };
     }
     throw new PerseusError(
-        // @ts-expect-error [FEI-5003] - TS2339 - Property 'type' does not exist on type 'never'.
+        // @ts-expect-error - TS2339 - Property 'type' does not exist on type 'never'.
         "Invalid score type: " + score.type,
         Errors.InvalidInput,
         {
@@ -375,7 +375,7 @@ function getGridStep(
     step: Coordinates,
     boxSize: number,
 ): Coordinates {
-    // @ts-expect-error [FEI-5003] - TS2322 - Type '(number | null | undefined)[]' is not assignable to type 'Coordinates'.
+    // @ts-expect-error - TS2322 - Type '(number | null | undefined)[]' is not assignable to type 'Coordinates'.
     return _(2).times(function (i) {
         const scale = scaleFromExtent(range[i], boxSize);
         const gridStep = gridStepFromTickStep(step[i], scale);
@@ -542,9 +542,9 @@ const DeprecationMixin: any = {
         _.each(
             this.deprecatedProps,
             function (func, prop) {
-                // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                 if (_.has(this.props, prop)) {
-                    // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                    // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
                     _.extend(newProps, func(this.props));
                 }
             },
@@ -605,11 +605,11 @@ function deepEq<T>(x: T, y: T): boolean {
         return (
             x === y ||
             (_.all(x, function (v, k) {
-                // @ts-expect-error [FEI-5003] - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
+                // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
                 return deepEq(y[k], v);
             }) &&
                 _.all(y, function (v, k) {
-                    // @ts-expect-error [FEI-5003] - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
+                    // @ts-expect-error - TS2536 - Type 'CollectionKey<T>' cannot be used to index type 'T'.
                     return deepEq(x[k], v);
                 }))
         );
@@ -813,9 +813,9 @@ const supportsPassiveEvents: () => boolean = () => {
                 supportsPassive = true;
             },
         });
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        // @ts-expect-error - TS2769 - No overload matches this call.
         window.addEventListener("testPassive", null, opts);
-        // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
+        // @ts-expect-error - TS2769 - No overload matches this call.
         window.removeEventListener("testPassive", null, opts);
     } catch (e: any) {
         // Intentionally left empty!

package/src/widget-container.tsx

@@ -45,7 +45,7 @@ class WidgetContainer extends React.Component<Props, State> {
         // Only relay size class changes for mobile right now.  We may want to
         // this for desktop as well at some point in the future.
         if (this.state.widgetProps.apiOptions.isMobile) {
-            // @ts-expect-error [FEI-5003] - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element | Text'.
+            // @ts-expect-error - TS2531 - Object is possibly 'null'. | TS2339 - Property 'offsetWidth' does not exist on type 'Element | Text'.
             const containerWidth = ReactDOM.findDOMNode(this).offsetWidth;
 
             // NOTE(benkomalo): in the common case, this won't change anything.

package/src/widgets/__stories__/plotter.stories.tsx

@@ -0,0 +1,27 @@
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {question1} from "../__testdata__/plotter.testdata";
+
+import type {PerseusRenderer} from "../../perseus-types";
+
+export default {
+    title: "Perseus/Widgets/Plotter",
+};
+
+type StoryArgs = Record<any, any>;
+
+const Template = (props: {question: PerseusRenderer}): React.ReactElement => (
+    <View
+        style={{
+            paddingLeft: 20,
+        }}
+    >
+        <RendererWithDebugUI question={props.question} />
+    </View>
+);
+
+export const Basic = (args: StoryArgs): React.ReactElement => {
+    return <Template question={question1} />;
+};

package/src/widgets/__stories__/test-keypad-context-wrapper.tsx

@@ -33,13 +33,13 @@ const TestKeypadContextWrapper = (props: Props): React.ReactElement => {
     return (
         <KeypadContext.Provider
             value={{
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
+                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setKeypadElement,
                 keypadElement,
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
+                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setRenderer,
                 renderer,
-                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
+                // @ts-expect-error - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setScrollableElement,
                 scrollableElement,
             }}

package/src/widgets/__testdata__/numeric-input.testdata.ts

@@ -70,7 +70,7 @@ export const percentageProblem: PerseusRenderer = {
     content: "$5008 \\div 4 =$ [[\u2603 numeric-input 1]] ",
     images: {},
     widgets: {
-        // @ts-expect-error [FEI-5003] - TS2352 - Conversion of type '{ graded: true; version: { major: number; minor: number; }; static: false; type: "numeric-input"; options: { coefficient: false; static: false; answers: { status: string; maxError: null; strict: false; value: string; simplify: string; message: string; }[]; labelText: string; size: string; }; alignment: string; }' to type 'NumericInputWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
+        // @ts-expect-error - TS2352 - Conversion of type '{ graded: true; version: { major: number; minor: number; }; static: false; type: "numeric-input"; options: { coefficient: false; static: false; answers: { status: string; maxError: null; strict: false; value: string; simplify: string; message: string; }[]; labelText: string; size: string; }; alignment: string; }' to type 'NumericInputWidget' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
         "numeric-input 1": {
             graded: true,
             version: {

package/src/widgets/__testdata__/plotter.testdata.ts

@@ -0,0 +1,36 @@
+import type {PerseusRenderer} from "../../perseus-types";
+
+export const question1: PerseusRenderer = {
+    content:
+        "The elementary school principal asked teachers to report the number of students absent in each grade during the past week.\n\n**Create a bar graph to show how many students were absent in each grade.**\n\nSchool grade | Number of absent students  \n:- | :-: \n$1^{\\text{st}} \\text{ grade}$ | $15$ \n$2^{\\text{nd}} \\text{ grade}$ |$25$ \n$3^{\\text{rd}} \\text{ grade}$ | $5$  \n$4^{\\text{th}} \\text{ grade}$ | $10$  \n$5^{\\text{th}} \\text{ grade}$ | $10$  \n\n[[☃ plotter 1]]\n\n",
+    images: {},
+    widgets: {
+        // This is the actual problem from the server
+        // I don't know why the type is incorrect
+        // @ts-expect-error - TS2322
+        "plotter 1": {
+            alignment: "default",
+            graded: true,
+            options: {
+                categories: [
+                    "$1^{\\text{st}} \\text{}$",
+                    "$2^{\\text{nd}} \\text{}$",
+                    "$3^{\\text{rd}} \\text{}$",
+                    "$4^{\\text{th}} \\text{}$",
+                    "$5^{\\text{th}} \\text{}$",
+                ],
+                correct: [15, 25, 5, 10, 10],
+                labelInterval: 1,
+                labels: ["School grade", "Number of absent students"],
+                maxY: 30,
+                scaleY: 5,
+                snapsPerLine: 1,
+                starting: [0, 0, 0, 0, 0],
+                type: "bar",
+            },
+            static: false,
+            type: "plotter",
+            version: {major: 0, minor: 0},
+        },
+    },
+};