@khanacademy/perseus 13.2.0 → 15.0.0

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";
@@ -16,10 +16,10 @@ import FixedToResponsive from "./fixed-to-responsive";
 import Graphie from "./graphie";
 import ImageLoader from "./image-loader";
 
+import type {ImageProps} from "./image-loader";
 import type {Coord} from "../interactive2/types";
 import type {Size} from "../perseus-types";
 import type {Alignment, Dimensions} from "../types";
-import type {ImageProps} from "./image-loader";
 
 // Minimum image width to make an image appear as zoomable.
 const ZOOMABLE_THRESHOLD = 700;
@@ -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/hints-renderer.tsx

@@ -59,6 +59,7 @@ class HintsRenderer extends React.Component<Props, State> {
         this._cacheHintImages();
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: Props) {
         // @ts-expect-error - TS2532 - Object is possibly 'undefined'. | TS2532 - Object is possibly 'undefined'.
         if (nextProps.hintsVisible - this.props.hintsVisible > 1) {

package/src/index.ts

@@ -14,7 +14,6 @@ export {default as itemVersion} from "./item-version";
  * Renderers
  */
 export {default as ArticleRenderer} from "./article-renderer";
-export {default as ItemRenderer} from "./item-renderer";
 export {default as ServerItemRenderer} from "./server-item-renderer";
 export {default as HintsRenderer} from "./hints-renderer";
 export {default as HintRenderer} from "./hint-renderer";

package/src/multi-items/item-types.ts

@@ -8,8 +8,8 @@
  *             interface, so it's compatible with our tree traversal functions.
  * - And the various types of nodes that compose a tree.
  */
-import type {WidgetDict, ImageDict} from "../types";
 import type {Tree, ArrayNode, ObjectNode} from "./tree-types";
+import type {WidgetDict, ImageDict} from "../types";
 
 export type ContentNode = {
     // TODO(mdr): When we first drafted the multi-item feature, we named

package/src/multi-items/multi-renderer.tsx

@@ -50,6 +50,10 @@ import Util from "../util";
 import {itemToTree} from "./items";
 import {buildMapper} from "./trees";
 
+import type {Item, ContentNode, HintNode, TagsNode} from "./item-types";
+import type {Shape, ArrayShape} from "./shape-types";
+import type {Tree} from "./tree-types";
+import type {TreeMapper, ContentMapper, HintMapper, Path} from "./trees";
 import type {Widget} from "../renderer";
 import type {
     APIOptions,
@@ -57,10 +61,6 @@ import type {
     PerseusDependenciesV2,
     PerseusScore,
 } from "../types";
-import type {Item, ContentNode, HintNode, TagsNode} from "./item-types";
-import type {Shape, ArrayShape} from "./shape-types";
-import type {Tree} from "./tree-types";
-import type {TreeMapper, ContentMapper, HintMapper, Path} from "./trees";
 import type {PropsFor} from "@khanacademy/wonder-blocks-core";
 
 type Hint = any; // TODO(mdr)

package/src/perseus-api.tsx

@@ -100,11 +100,6 @@ export const ApiOptions = {
         // Indicates whether or not to use mobile styling.
         isMobile: PropTypes.bool,
 
-        // Whether to use v1 (Legacy) Keypad for MathInput mobile or
-        // use the new v2 Keypad
-        // TODO [LC-1088]: remove after v2 release
-        useV2Keypad: PropTypes.bool,
-
         // A function, called with a bool indicating whether use of the
         // drawing area (scratchpad) should be allowed/disallowed.
         // Previously handled by `Khan.scratchpad.enable/disable`
@@ -150,7 +145,6 @@ export const ApiOptions = {
     defaults: {
         isArticle: false,
         isMobile: false,
-        useV2Keypad: false,
         onInputError: function () {},
         onFocusChange: function () {},
         GroupMetadataEditor: StubTagEditor,

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/server-item-renderer.tsx

@@ -20,7 +20,6 @@ import {ApiOptions} from "./perseus-api";
 import Renderer from "./renderer";
 import Util from "./util";
 
-import type {KeypadProps} from "./mixins/provide-keypad";
 import type {APIOptions, FocusPath, PerseusDependenciesV2} from "./types";
 import type {KeypadAPI} from "@khanacademy/math-input";
 import type {
@@ -31,19 +30,18 @@ import type {
 
 const {mapObject} = Objective;
 
-type OwnProps = // These props are used by the ProvideKeypad mixin.
-    KeypadProps & {
-        apiOptions: APIOptions;
-        hintsVisible?: number;
-        item: {
-            hints: ReadonlyArray<any>;
-            question: any;
-        };
-        problemNum?: number;
-        reviewMode?: boolean;
-        keypadElement?: KeypadAPI | null | undefined;
-        dependencies: PerseusDependenciesV2;
+type OwnProps = {
+    apiOptions: APIOptions;
+    hintsVisible?: number;
+    item: {
+        hints: ReadonlyArray<any>;
+        question: any;
     };
+    problemNum?: number;
+    reviewMode?: boolean;
+    keypadElement?: KeypadAPI | null | undefined;
+    dependencies: PerseusDependenciesV2;
+};
 
 type HOCProps = {
     onRendered: (isRendered: boolean) => void;
@@ -104,6 +102,7 @@ export class ServerItemRenderer
         this._fullyRendered = false;
     }
 
+    // eslint-disable-next-line react/no-unsafe
     UNSAFE_componentWillReceiveProps(nextProps: Props) {
         this.setState({
             questionHighlightedWidgets: [],

package/src/types.ts

@@ -185,10 +185,6 @@ export type APIOptions = Readonly<{
     // from the math-input repo instead of the existing perseus math
     // input components.
     customKeypad?: boolean;
-    // Whether to use v1 (Legacy) Keypad for MathInput mobile or
-    // use the new v2 Keypad
-    // TODO [LC-1088]: remove after v2 release
-    useV2Keypad?: boolean;
     // If this is provided, it is called instead of appending an instance
     // of `math-input`'s keypad to the body. This is used by the native
     // apps so they can have the keypad be defined on the native side.
@@ -362,7 +358,6 @@ export type APIOptionsWithDefaults = Readonly<
         inModal: NonNullable<APIOptions["inModal"]>;
         isArticle: NonNullable<APIOptions["isArticle"]>;
         isMobile: NonNullable<APIOptions["isMobile"]>;
-        useV2Keypad: NonNullable<APIOptions["useV2Keypad"]>;
         onFocusChange: NonNullable<APIOptions["onFocusChange"]>;
         onInputError: NonNullable<APIOptions["onInputError"]>;
         readOnly: NonNullable<APIOptions["readOnly"]>;

package/src/util.ts

@@ -3,8 +3,8 @@ import _ from "underscore";
 
 import {Errors} from "./logging/log";
 import {PerseusError} from "./perseus-error";
-import * as GraphieUtil from "./util.graphie";
 import KhanAnswerTypes from "./util/answer-types";
+import * as GraphieUtil from "./util.graphie";
 
 import type {Range} from "./perseus-types";
 import type {Widget, PerseusScore} from "./types";

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

@@ -46,7 +46,6 @@ const WrappedKeypadContext = ({
                             apiOptions={{
                                 isMobile: isMobile,
                                 customKeypad: customKeypad,
-                                useV2Keypad: true,
                             }}
                         />
                     );

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,
+        },
+    };
+};