@khanacademy/perseus 13.2.0 → 14.0.0

package/package.json

@@ -3,7 +3,7 @@
     "description": "Core Perseus API (includes renderers and widgets)",
     "author": "Khan Academy",
     "license": "MIT",
-    "version": "13.2.0",
+    "version": "14.0.0",
     "publishConfig": {
         "access": "public"
     },
@@ -24,7 +24,7 @@
     "dependencies": {
         "@khanacademy/kas": "^0.3.5",
         "@khanacademy/kmath": "^0.1.6",
-        "@khanacademy/math-input": "^15.1.0",
+        "@khanacademy/math-input": "^16.0.0",
         "@khanacademy/perseus-core": "1.3.0",
         "@khanacademy/perseus-linter": "^0.3.8",
         "@khanacademy/pure-markdown": "^0.2.11",

package/src/__tests__/article-renderer.test.tsx

@@ -1,6 +1,7 @@
 import {
     StatefulKeypadContextProvider,
     KeypadContext,
+    MobileKeypad,
 } from "@khanacademy/math-input";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import {screen, render, fireEvent, waitFor} from "@testing-library/react";
@@ -11,7 +12,6 @@ import {
     testDependencies,
     testDependenciesV2,
 } from "../../../../testing/test-dependencies";
-import KeypadSwitch from "../../../math-input/src/components/keypad-switch";
 import {articleWithExpression} from "../__testdata__/article-renderer.testdata";
 import ArticleRenderer from "../article-renderer";
 import * as Dependencies from "../dependencies";
@@ -24,11 +24,10 @@ function KeypadWithContext() {
         <KeypadContext.Consumer>
             {({setKeypadElement}) => {
                 return (
-                    <KeypadSwitch
+                    <MobileKeypad
                         onElementMounted={setKeypadElement}
                         onDismiss={() => {}}
                         onAnalyticsEvent={async () => {}}
-                        useV2Keypad
                     />
                 );
             }}

package/src/components/graph.tsx

@@ -5,6 +5,7 @@ import * as React from "react";
 import ReactDOM from "react-dom";
 import _ from "underscore";
 
+import AssetContext from "../asset-context";
 import {interactiveSizes} from "../styles/constants";
 import Util from "../util";
 import GraphUtils from "../util/graph-utils";
@@ -395,14 +396,19 @@ class Graph extends React.Component<Props> {
         if (imageData.url) {
             const scale = this.props.box[0] / interactiveSizes.defaultBoxSize;
             image = (
-                // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
-                <SvgImage
-                    src={imageData.url}
-                    width={imageData.width}
-                    height={imageData.height}
-                    scale={scale}
-                    responsive={false}
-                />
+                <AssetContext.Consumer>
+                    {({setAssetStatus}) => (
+                        <SvgImage
+                            // @ts-expect-error - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; responsive: false; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
+                            src={imageData.url}
+                            width={imageData.width}
+                            height={imageData.height}
+                            scale={scale}
+                            responsive={false}
+                            setAssetStatus={setAssetStatus}
+                        />
+                    )}
+                </AssetContext.Consumer>
             );
         } else {
             image = null;

package/src/components/svg-image.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable no-useless-escape, react/no-unsafe */
+/* eslint-disable react/no-unsafe */
 import {CircularSpinner} from "@khanacademy/wonder-blocks-progress-spinner";
 import classNames from "classnames";
 import $ from "jquery";
@@ -79,7 +79,7 @@ const doJSONP = function (url: string, options) {
 // system (with file://). We replace urls that start with `web+graphie`
 // in the perseus json with this `file+graphie` prefix to indicate that
 // they should have the `file://` protocol instead of `https://`.
-const svgLocalLabelsRegex = /^file\+graphie\:/;
+const svgLocalLabelsRegex = /^file\+graphie:/;
 const hashRegex = /\/([^/]+)$/;
 
 function isImageProbablyPhotograph(imageUrl) {
@@ -180,6 +180,16 @@ type Props = {
     setAssetStatus: (assetKey: string, loaded: boolean) => void;
 };
 
+type DefaultProps = {
+    constrainHeight: NonNullable<Props["constrainHeight"]>;
+    onUpdate: NonNullable<Props["onUpdate"]>;
+    responsive: NonNullable<Props["responsive"]>;
+    scale: NonNullable<Props["scale"]>;
+    setAssetStatus: NonNullable<Props["setAssetStatus"]>;
+    src: NonNullable<Props["src"]>;
+    zoomToFullSizeOnMobile: NonNullable<Props["zoomToFullSizeOnMobile"]>;
+};
+
 type Label = {
     coordinates: ReadonlyArray<any>;
     content: string;
@@ -212,15 +222,7 @@ type State = {
 class SvgImage extends React.Component<Props, State> {
     _isMounted: boolean;
 
-    static defaultProps: {
-        constrainHeight: boolean;
-        onUpdate: () => void;
-        responsive: boolean;
-        scale: number;
-        setAssetStatus: (src: string, status: boolean) => void;
-        src: string;
-        zoomToFullSizeOnMobile: boolean;
-    } = {
+    static defaultProps: DefaultProps = {
         constrainHeight: false,
         onUpdate: () => {},
         responsive: true,

package/src/mixins/provide-keypad.tsx

@@ -102,7 +102,6 @@ const ProvideKeypad = {
                     }}
                     // @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly propTypes: { readonly apiOptions: React.PropType<{ customKeypad?: boolean | undefined; nativeKeypadProxy?: ((...a: readonly any[]) => unknown) | undefined; }>; readonly keypadStyle: Requireable<any>; }; readonly getInitialState: () => { ...; }; readonly componentDidMount: () => void; readonly componentWil...'.
                     style={_this.props.keypadStyle}
-                    useV2Keypad={apiOptions.useV2Keypad}
                     onAnalyticsEvent={async () => {
                         // Intentionally left empty. This component is
                         // deprecated and so we don't want/need to instrument

package/src/perseus-types.ts

@@ -534,7 +534,7 @@ export type PerseusInteractiveGraphWidgetOptions = {
     showTooltips?: boolean;
     // The unit to show on the ruler.  e.g. "mm", "cm",  "m", "km", "in", "ft", "yd", "mi"
     rulerLabel: string;
-    // How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16
+    // How many ticks to show on the ruler.  e.g. 1, 2, 4, 8, 10, 16. Must be an integer.
     rulerTicks: number;
     // The X and Y coordinate ranges for the view of the graph.  default: [[-10, 10], [-10, 10]]
     // NOTE(kevinb): perseus_data.go defines this as Array<Array<number>>
@@ -577,6 +577,7 @@ export type PerseusGraphTypeAngle = {
     snapDegrees?: number;
     // How to match the answer. If missing, defaults to exact matching.
     match?: "congruent";
+    // must have 3 coords - ie [Coord, Coord, Coord]
     coords?: ReadonlyArray<Coord>;
 };
 
@@ -588,11 +589,13 @@ export type PerseusGraphTypeCircle = {
 
 export type PerseusGraphTypeLinear = {
     type: "linear";
+    // expects 2 coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeLinearSystem = {
     type: "linear-system";
+    // expects 2 sets of 2 coords
     coords?: ReadonlyArray<ReadonlyArray<Coord>>;
 } & PerseusGraphTypeCommon;
 
@@ -620,6 +623,7 @@ export type PerseusGraphTypePolygon = {
 
 export type PerseusGraphTypeQuadratic = {
     type: "quadratic";
+    // expects a list of 3 coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
@@ -627,18 +631,19 @@ export type PerseusGraphTypeSegment = {
     type: "segment";
     // The number of segments if a "segment" type. default: 1.  Max: 6
     numSegments?: number;
-    // A list of segments (each segment is a list of coordinates).
-    // Length should match the `numSegments` value.
+    // Expects a list of Coord tuples. Length should match the `numSegments` value.
     coords?: ReadonlyArray<ReadonlyArray<Coord>>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeSinusoid = {
     type: "sinusoid";
+    // Expects a list of 2 Coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 
 export type PerseusGraphTypeRay = {
     type: "ray";
+    // Expects a list of 2 Coords
     coords?: ReadonlyArray<Coord>;
 } & PerseusGraphTypeCommon;
 

package/src/widgets/__stories__/random-widgets.stories.tsx

@@ -0,0 +1,59 @@
+import Button from "@khanacademy/wonder-blocks-button";
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {randomCategorizerGenerator} from "../__testdata__/categorizer.testdata";
+import {randomDropdownGenerator} from "../__testdata__/dropdown.testdata";
+import {randomExplanationGenerator} from "../__testdata__/explanation.testdata";
+import {randomExpressionGenerator} from "../__testdata__/expression.testdata";
+import {randomInteractiveGraphGenerator} from "../__testdata__/interactive-graph-random.testdata";
+import {randomRadioGenerator} from "../__testdata__/radio.testdata";
+
+import type {PerseusRenderer} from "@khanacademy/perseus";
+
+export default {
+    title: "Perseus/Randomized Widgets",
+};
+
+const RandomizedWidgetContainer = (
+    randomizer: () => PerseusRenderer,
+): React.ReactElement => {
+    const [question, setQuestion] = React.useState(randomizer());
+    const randomize = () => {
+        setQuestion(randomizer());
+    };
+
+    return (
+        <div>
+            <Button size="small" style={{marginBottom: 24}} onClick={randomize}>
+                Randomize
+            </Button>
+
+            <RendererWithDebugUI question={question} />
+        </div>
+    );
+};
+
+export const RandomCategorizer = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomCategorizerGenerator);
+};
+
+export const RandomDropdown = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomDropdownGenerator);
+};
+
+export const RandomExplanation = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomExplanationGenerator);
+};
+
+export const RandomExpression = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomExpressionGenerator);
+};
+
+export const RandomInteractiveGraph = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomInteractiveGraphGenerator);
+};
+
+export const RandomRadio = (): React.ReactElement => {
+    return RandomizedWidgetContainer(randomRadioGenerator);
+};

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

@@ -17,7 +17,6 @@ const Footer = (): React.ReactElement => {
                         onElementMounted={setKeypadElement}
                         onDismiss={() => renderer && renderer.blur()}
                         style={styles.keypad}
-                        useV2Keypad={true}
                         onAnalyticsEvent={async (e) => {
                             action("onAnalyticsEvent")(e);
                         }}

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

@@ -1,3 +1,10 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomInteger,
+    randomSentence,
+} from "./randomizers";
+
 import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
@@ -47,3 +54,36 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const randomCategorizerGenerator = (): PerseusRenderer => {
+    const questionText = randomSentence(35);
+    const numItems = randomInteger(2, 7);
+    const numCategories = randomInteger(2, 6);
+
+    return {
+        content: `${questionText}\n\n\n[[\u2603 categorizer 1]]`,
+        images: {},
+        widgets: {
+            "categorizer 1": {
+                version: {major: 0, minor: 0},
+                type: "categorizer",
+                graded: randomBoolean(),
+                alignment: "default",
+                options: {
+                    items: arrayOfLength(numItems).map(() =>
+                        randomSentence(12),
+                    ),
+                    values: arrayOfLength(numItems).map(() =>
+                        randomInteger(0, numCategories - 1),
+                    ),
+                    randomizeItems: randomBoolean(),
+                    categories: arrayOfLength(numCategories).map(() =>
+                        randomSentence(7),
+                    ),
+                    highlightLint: randomBoolean(),
+                    static: randomBoolean(0.05),
+                },
+            },
+        },
+    };
+};

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

@@ -1,3 +1,10 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomInteger,
+    randomSentence,
+} from "./randomizers";
+
 import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
@@ -31,3 +38,34 @@ export const question1: PerseusRenderer = {
         },
     },
 };
+
+export const randomDropdownGenerator = (): PerseusRenderer => {
+    const numChoices = randomInteger(2, 16);
+    const correctIndex = randomInteger(0, numChoices - 1);
+    return {
+        content: `${randomSentence(20)} [[☃ dropdown 1]] ${randomSentence(10)}`,
+        images: {},
+        widgets: {
+            "dropdown 1": {
+                type: "dropdown",
+                alignment: "default",
+                static: randomBoolean(0.05),
+                graded: randomBoolean(),
+                options: {
+                    static: randomBoolean(0.05),
+                    placeholder: randomSentence(10),
+                    choices: arrayOfLength(numChoices).map((_, i) => {
+                        return {
+                            content: randomSentence(10),
+                            correct: i === correctIndex,
+                        };
+                    }),
+                },
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+            },
+        },
+    };
+};

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

@@ -1,3 +1,5 @@
+import {randomBoolean, randomSentence} from "./randomizers";
+
 import type {PerseusRenderer} from "../../perseus-types";
 
 export const question1: PerseusRenderer = {
@@ -53,3 +55,31 @@ export const question2: PerseusRenderer = {
         },
     },
 };
+
+export const randomExplanationGenerator = (): PerseusRenderer => {
+    return {
+        content: `${randomSentence(
+            50,
+        )}\n[[\u2603 explanation 1]]\n${randomSentence(50)}`,
+        images: {},
+        widgets: {
+            "explanation 1": {
+                graded: randomBoolean(),
+                version: {
+                    major: 0,
+                    minor: 0,
+                },
+                static: randomBoolean(0.05),
+                type: "explanation",
+                options: {
+                    hidePrompt: `${randomSentence(20)}`,
+                    widgets: {},
+                    explanation: `${randomSentence(50)}`,
+                    static: randomBoolean(0.05),
+                    showPrompt: `${randomSentence(7)}`,
+                },
+                alignment: "default",
+            },
+        },
+    };
+};

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

@@ -1,7 +1,19 @@
+import {
+    arrayOfLength,
+    randomBoolean,
+    randomElement,
+    randomInteger,
+    randomLetter,
+    randomSentence,
+    randomWord,
+} from "./randomizers";
+
 import type {
     PerseusExpressionWidgetOptions,
     Version,
     PerseusItem,
+    PerseusRenderer,
+    ExpressionWidget,
 } from "../../perseus-types";
 
 const createItemJson = (
@@ -96,3 +108,73 @@ export const expressionItem3: PerseusItem = createItemJson(
         minor: 0,
     },
 );
+
+export const randomExpressionGenerator = (): PerseusRenderer => {
+    const randomButtonSet = [
+        "basic",
+        "basic+div",
+        "trig",
+        "prealgebra",
+        "logarithms",
+        "basic relations",
+        "advanced relations",
+    ]
+        .sort(() => {
+            return randomBoolean() ? 1 : -1;
+        })
+        .slice(0, randomInteger(1, 6));
+
+    const randomFunctionSet = arrayOfLength(randomInteger(0, 6)).map(
+        randomLetter,
+    );
+
+    return {
+        content: `${randomSentence(20)} [[☃ expression 1]]`,
+        images: {},
+        widgets: {
+            "expression 1": {
+                type: "expression",
+                graded: randomBoolean(),
+                version: {
+                    major: 1,
+                    minor: 0,
+                },
+                static: randomBoolean(0.05),
+                options: {
+                    answerForms: [
+                        {
+                            considered: randomElement([
+                                "correct",
+                                "wrong",
+                                "ungraded",
+                            ]),
+                            form: randomBoolean(),
+                            simplify: randomBoolean(),
+                            value: randomWord(),
+                        },
+                        {
+                            considered: randomElement([
+                                "correct",
+                                "wrong",
+                                "ungraded",
+                            ]),
+                            form: randomBoolean(),
+                            simplify: randomBoolean(),
+                            value: randomWord(),
+                        },
+                    ],
+                    times: randomBoolean(),
+                    buttonSets: randomButtonSet,
+                    functions: randomFunctionSet,
+                    buttonsVisible: randomElement([
+                        "always",
+                        "never",
+                        "focused",
+                        undefined,
+                    ]),
+                    alignment: "default",
+                },
+            } as ExpressionWidget,
+        },
+    };
+};