@khanacademy/perseus 19.1.4 → 19.1.6

package/src/__tests__/tex-wrangler.test.ts

@@ -1,82 +0,0 @@
-import TexWrangler from "../tex-wrangler";
-
-const {parseTex, modifyTex} = TexWrangler;
-
-const whitespaceRegex = /\s/g;
-
-const assertWrangled = (toWrangle: string, check: string) => {
-    // We ignore whitespace when comparing
-    const wrangled = modifyTex(toWrangle).replace(whitespaceRegex, "");
-    const checkNoSpace = check.replace(whitespaceRegex, "");
-    expect(wrangled).toBe(checkNoSpace);
-};
-
-const assertParsed = (toParse: undefined | string, check: string) => {
-    // We ignore whitespace when comparing
-    // @ts-expect-error - TS2345 - Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
-    const parsed = parseTex(toParse).replace(whitespaceRegex, "");
-    const checkNoSpace = check.replace(whitespaceRegex, "");
-    expect(parsed).toBe(checkNoSpace);
-};
-
-describe("modifyTex", () => {
-    it("should not touch single fractions", () => {
-        assertWrangled("\\frac{3}{4}", "\\frac{3}{4}");
-    });
-
-    it("should make big single fractions small", () => {
-        assertWrangled("\\dfrac{3}{4}", "\\frac{3}{4}");
-    });
-
-    it("should make outer fractions big", () => {
-        assertWrangled("\\frac{1}{\\frac{2}{3}}", "\\dfrac{1}{\\frac{2}{3}}");
-        assertWrangled("\\frac{\\frac{1}{2}}{3}", "\\dfrac{\\frac{1}{2}}{3}");
-    });
-
-    it("should make inner fractions small", () => {
-        assertWrangled("\\dfrac{1}{\\dfrac{2}{3}}", "\\dfrac{1}{\\frac{2}{3}}");
-        assertWrangled("\\dfrac{\\dfrac{1}{2}}{3}", "\\dfrac{\\frac{1}{2}}{3}");
-    });
-
-    it("should parse mutliple fractions", () => {
-        assertWrangled(
-            "\\dfrac{1}{2} + \\dfrac{3}{4}",
-            "\\frac{1}{2} + \\frac{3}{4}",
-        );
-    });
-
-    it("shouldn't touch things before fractions", () => {
-        assertWrangled("1 + \\dfrac{2}{3}", "1 + \\frac{2}{3}");
-    });
-
-    it("shouldn't touch things after fractions", () => {
-        assertWrangled("\\dfrac{1}{2} + 3", "\\frac{1}{2} + 3");
-    });
-
-    it("shouldn't touch things that wrap fractions", () => {
-        assertWrangled("\\sqrt{\\dfrac{1}{2}}", "\\sqrt{\\frac{1}{2}}");
-    });
-
-    it("should have sane failure modes", () => {
-        assertWrangled("\\dfrac{3}{4", "\\frac{3}{4}");
-        // This could maybe be better, but if someone gives us this and it
-        // doesn't work then that's their fault. :)
-        assertWrangled("\\dfrac{3}{4}}", "\\frac{3}{4}}");
-    });
-});
-
-describe("parseTex", () => {
-    it("should replace single fractions", () => {
-        assertParsed("\\dfrac{3}{4}", "3 / 4");
-    });
-
-    it("should remove blackslash-escapes for percent signs", () => {
-        assertParsed("3\\%", "3%");
-        assertParsed("3.5\\%", "3.5%");
-        assertParsed("\\dfrac{3\\%}{4}", "3% / 4");
-    });
-
-    it("should not throw error when input is undefined", () => {
-        assertParsed(undefined, "");
-    });
-});

package/src/__tests__/util.test.ts

@@ -1,40 +0,0 @@
-import Util from "../util";
-
-describe("#constrainedTickStepsFromTickSteps", () => {
-    it("should not changes the tick steps if there are fewer than (or exactly) 10 steps", () => {
-        const result = Util.constrainedTickStepsFromTickSteps(
-            [1, 1],
-            [
-                [0, 10],
-                [0, 10],
-            ],
-        );
-
-        expect(result).toEqual([1, 1]);
-    });
-
-    it("should should double the tick step size if there are more than 10 but fewer than (or exactly) 20 steps", () => {
-        const result = Util.constrainedTickStepsFromTickSteps(
-            [1, 1],
-            [
-                [0, 20],
-                [0, 20],
-            ],
-        );
-
-        expect(result).toEqual([2, 2]);
-    });
-
-    it("should use the value returned by tickStepFromNumTicks", () => {
-        jest.spyOn(Util, "tickStepFromNumTicks").mockReturnValue(5);
-        const result = Util.constrainedTickStepsFromTickSteps(
-            [1, 1],
-            [
-                [0, 50],
-                [0, 50],
-            ],
-        );
-
-        expect(result).toEqual([5, 5]);
-    });
-});

package/src/__tests__/widget-container.test.tsx

@@ -1,126 +0,0 @@
-import "@testing-library/jest-dom"; // Joyous side-effects
-import {render, screen} from "@testing-library/react";
-import * as React from "react";
-
-import {testDependencies} from "../../../../testing/test-dependencies";
-import * as Dependencies from "../dependencies";
-import WidgetContainer from "../widget-container";
-import {registerWidget} from "../widgets";
-import PassageWidget from "../widgets/passage";
-
-import type {WidgetExports} from "../types";
-
-const MockWidgetComponent = ({
-    text,
-    fail = false,
-}: {
-    text: string;
-    fail: boolean;
-}) => {
-    if (fail) {
-        throw new Error("MockWidget failed to render");
-    }
-
-    return <div>{text}</div>;
-};
-
-const MockWidget: WidgetExports<typeof MockWidgetComponent> = {
-    name: "mock-widget",
-    displayName: "Mock Widget",
-    widget: MockWidgetComponent,
-};
-
-describe("widget-container", () => {
-    it("should render nothing when requested widget not registered", () => {
-        // Arrange
-        const warnMock = jest.spyOn(console, "warn").mockImplementation();
-
-        // Act
-        render(
-            <WidgetContainer
-                type="invalid-widget"
-                id="invalid-widget 1"
-                shouldHighlight={false}
-                initialProps={{apiOptions: {isMobile: false}}}
-            />,
-        );
-
-        // Assert
-        expect(warnMock).toHaveBeenCalledWith(
-            "Widget type 'invalid-widget' not found!",
-        );
-    });
-
-    it("should render the requested widget", async () => {
-        // Arrange
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-
-        registerWidget("passage", PassageWidget);
-
-        // Act
-        render(
-            <WidgetContainer
-                type="passage"
-                id="passage 1"
-                shouldHighlight={false}
-                initialProps={{
-                    passageTitle: "Greeting",
-                    passageText: "Hello world!",
-                    footnotes: null,
-                    showLineNumbers: true,
-
-                    findWidgets: () => [],
-
-                    apiOptions: {isMobile: false},
-                }}
-            />,
-        );
-
-        // Assert
-        expect(await screen.findByText("Greeting")).toBeInTheDocument();
-        expect(await screen.findByText("Hello world")).toBeInTheDocument();
-    });
-
-    it("should send analytics even when widget rendering errors", () => {
-        // Arrange
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue(
-            testDependencies,
-        );
-        jest.spyOn(console, "error").mockImplementation(() => {});
-
-        const onAnalyticsEventSpy = jest.fn();
-        const depsV2 = {analytics: {onAnalyticsEvent: onAnalyticsEventSpy}};
-
-        registerWidget("mock-widget", MockWidget);
-
-        // Act
-        render(
-            <Dependencies.DependenciesContext.Provider value={depsV2}>
-                <WidgetContainer
-                    type="mock-widget"
-                    id="mock-widget 1"
-                    shouldHighlight={false}
-                    initialProps={{
-                        text: "Hello world!",
-                        fail: true,
-
-                        findWidgets: () => [],
-
-                        apiOptions: {isMobile: false},
-                    }}
-                />
-            </Dependencies.DependenciesContext.Provider>,
-        );
-
-        // Assert
-        expect(onAnalyticsEventSpy).toHaveBeenCalledWith({
-            type: "perseus:widget-rendering-error",
-            payload: {
-                widgetType: "mock-widget",
-                widgetId: "mock-widget 1",
-            },
-        });
-    });
-});

package/src/__tests__/widgets.test.ts

@@ -1,91 +0,0 @@
-import {testDependencies} from "../../../../testing/test-dependencies";
-import {setDependencies} from "../dependencies";
-import {registerAllWidgetsForTesting} from "../util/register-all-widgets-for-testing";
-import * as Widgets from "../widgets";
-
-describe("Widget API support", () => {
-    beforeAll(() => {
-        registerAllWidgetsForTesting();
-    });
-
-    // This verifies a known list of widgets to ensure they provide the static
-    // validate function. Not all widgets support this function so even though
-    // this list looks exhaustive, it's not!
-    it.each([
-        "deprecated-standin",
-        "radio",
-        "input-number",
-        "numeric-input",
-        "expression",
-        "categorizer",
-        "cs-program",
-        "dropdown",
-        "explanation",
-        "definition",
-        "grapher",
-        "iframe",
-        "image",
-        "interaction",
-        "interactive-graph",
-        "label-image",
-        "matrix",
-        "matcher",
-        "measurer",
-        "number-line",
-        "orderer",
-        "passage",
-        "passage-ref",
-        "passage-ref-target",
-        "plotter",
-        "simulator",
-        "sorter",
-        "table",
-        "unit-input",
-        "video",
-    ])("%s widget should provide static validate function", (widgetType) => {
-        expect(Widgets.getWidget(widgetType)).toHaveProperty("validate");
-    });
-
-    // This list is mirrored in Khan Academy's webapp for the coach reports.
-    // If you change this, be sure to double-check that consuming applications
-    // agree on this list of supported widgets.
-    it.each([
-        "categorizer",
-        "expression",
-        "grapher",
-        "input-number",
-        "interactive-graph",
-        "numeric-input",
-        "radio",
-    ])(
-        "%s widget should provide static getUserInputFromProps function",
-        (widgetType) => {
-            const Widget = Widgets.getWidget(widgetType);
-            expect(Widget).toHaveProperty("getUserInputFromProps");
-        },
-    );
-
-    it.each(["expression", "input-number", "numeric-input"])(
-        "%s widget should provide static getOneCorrectAnswerFromRubric function",
-        (widgetType) => {
-            const Widget = Widgets.getWidget(widgetType);
-            expect(Widget).toHaveProperty("getOneCorrectAnswerFromRubric");
-        },
-    );
-});
-
-describe("replaceWidget", () => {
-    beforeEach(() => {
-        setDependencies(testDependencies);
-        registerAllWidgetsForTesting();
-    });
-
-    it("replaces an existing widget", () => {
-        Widgets.replaceWidget("transformer", "radio");
-        expect(Widgets.getWidget("transformer")?.name).toBe("Radio");
-    });
-
-    it("Throws when the replacement isn't available", () => {
-        expect(() => Widgets.replaceWidget("radio", "dog-cat")).toThrow();
-    });
-});

package/src/a11y.ts

@@ -1,45 +0,0 @@
-/**
- * Identifies whether or not a given perseus item requires the use of a mouse
- * or screen, based on the widgets it contains.
- */
-
-import _ from "underscore";
-
-import MultiItems from "./multi-items";
-import {traverse} from "./traversal";
-import * as Widgets from "./widgets";
-
-const {findContentNodesInItem, inferItemShape} = MultiItems;
-
-// Iterate over a single Perseus renderer, mutating `widgets` by appending
-// violating widget types discovered in this item.
-function traverseRenderer(itemData, widgets: Array<any>) {
-    traverse(itemData, null, function (info) {
-        if (info.type && !Widgets.isAccessible(info)) {
-            widgets.push(info.type);
-        }
-    });
-}
-
-// Returns a list of widgets that cause a given perseus item to require
-// the use of a screen or mouse.
-//
-// For now we'll just check the `accessible` field on each of the widgets
-// in the item data, but in the future we may specify accessibility on
-// each widget with higher granularity.
-export function violatingWidgets(itemData: any): any {
-    // TODO(jordan): Hints as well
-    const widgets = [];
-
-    if (itemData._multi) {
-        const shape = inferItemShape(itemData);
-        findContentNodesInItem(itemData, shape, (content) =>
-            traverseRenderer(content, widgets),
-        );
-    } else {
-        traverseRenderer(itemData.question, widgets);
-    }
-
-    // Uniquify the list of widgets (by type)
-    return _.uniq(widgets);
-}

package/src/all-widgets.ts

@@ -1,9 +0,0 @@
-import basicWidgets from "./basic-widgets";
-import extraWidgets from "./extra-widgets";
-
-import type {WidgetExports} from "./types";
-
-export default [
-    ...basicWidgets,
-    ...extraWidgets,
-] as ReadonlyArray<WidgetExports>;

package/src/article-renderer.tsx

@@ -1,237 +0,0 @@
-/**
- * An article renderer. Articles are long-form pieces of content,
- * composed of multiple (Renderer) sections concatenated together.
- */
-
-import * as PerseusLinter from "@khanacademy/perseus-linter";
-import classNames from "classnames";
-import * as React from "react";
-
-import {DependenciesContext} from "./dependencies";
-import {ClassNames as ApiClassNames, ApiOptions} from "./perseus-api";
-import Renderer from "./renderer";
-import Util from "./util";
-
-import type {PerseusRenderer} from "./perseus-types";
-import type {APIOptions, PerseusDependenciesV2} from "./types";
-import type {KeypadAPI} from "@khanacademy/math-input";
-import type {KeypadContextRendererInterface} from "@khanacademy/perseus-core";
-import type {LinterContextProps} from "@khanacademy/perseus-linter";
-
-type Props = Partial<React.ContextType<typeof DependenciesContext>> & {
-    apiOptions: APIOptions;
-    json: PerseusRenderer | ReadonlyArray<PerseusRenderer>;
-    // Whether to use the new Bibliotron styles for articles
-    /**
-     * @deprecated Does nothing
-     */
-    useNewStyles: boolean;
-    linterContext: LinterContextProps;
-    legacyPerseusLint?: ReadonlyArray<string>;
-    keypadElement?: KeypadAPI | null | undefined;
-    dependencies: PerseusDependenciesV2;
-};
-
-type DefaultProps = {
-    apiOptions: Props["apiOptions"];
-    useNewStyles: Props["useNewStyles"];
-    linterContext: Props["linterContext"];
-};
-
-class ArticleRenderer
-    extends React.Component<Props>
-    implements KeypadContextRendererInterface
-{
-    _currentFocus: any;
-    sectionRenderers: Array<Renderer> = [];
-
-    static defaultProps: DefaultProps = {
-        apiOptions: ApiOptions.defaults,
-        useNewStyles: false,
-        linterContext: PerseusLinter.linterContextDefault,
-    };
-
-    constructor(props: Props) {
-        super(props);
-    }
-
-    componentDidMount() {
-        this._currentFocus = null;
-    }
-
-    shouldComponentUpdate(nextProps: Props): boolean {
-        return nextProps !== this.props;
-    }
-
-    _handleFocusChange: (arg1: any, arg2: any) => void = (
-        newFocusPath,
-        oldFocusPath,
-    ) => {
-        // TODO(charlie): DRY this up--some of this logic is repeated in
-        // ItemRenderer.
-        if (newFocusPath) {
-            this._setCurrentFocus(newFocusPath);
-        } else {
-            this._onRendererBlur(oldFocusPath);
-        }
-    };
-
-    _setCurrentFocus: (arg1: any) => void = (newFocusPath) => {
-        const {keypadElement, apiOptions} = this.props;
-        const {isMobile} = apiOptions;
-
-        const prevFocusPath = this._currentFocus;
-        this._currentFocus = newFocusPath;
-
-        // Use the section prefix to extract the relevant Renderer's input
-        // paths, so as to check whether the focused path represents an
-        // input.
-        let didFocusInput = false;
-        let focusedInput;
-
-        if (this._currentFocus) {
-            const [sectionIndex, ...focusPath] = this._currentFocus;
-
-            const inputPaths =
-                this.sectionRenderers[sectionIndex].getInputPaths();
-
-            didFocusInput = inputPaths.some((inputPath) => {
-                return Util.inputPathsEqual(inputPath, focusPath);
-            });
-            focusedInput =
-                this.sectionRenderers[sectionIndex].getDOMNodeForPath(
-                    focusPath,
-                );
-        }
-
-        const {onFocusChange} = this.props.apiOptions;
-        if (onFocusChange) {
-            // Wait for the keypad to mount before getting the height
-            setTimeout(() => {
-                const keypadDomNode =
-                    keypadElement?.getDOMNode() as HTMLElement;
-                const keypadHeight =
-                    keypadDomNode && didFocusInput
-                        ? keypadDomNode.getBoundingClientRect().height
-                        : 0;
-
-                onFocusChange(
-                    this._currentFocus,
-                    prevFocusPath,
-                    keypadHeight,
-                    didFocusInput ? focusedInput : null,
-                );
-            }, 0);
-        }
-
-        if (keypadElement && isMobile) {
-            if (didFocusInput) {
-                keypadElement.activate();
-            } else {
-                keypadElement.dismiss();
-            }
-        }
-    };
-
-    _onRendererBlur: (arg1: any) => void = (blurPath) => {
-        const blurringFocusPath = this._currentFocus;
-
-        // Failsafe: abort if ID is different, because focus probably happened
-        // before blur.
-        if (!Util.inputPathsEqual(blurPath, blurringFocusPath)) {
-            return;
-        }
-
-        // Wait until after any new focus events fire this tick before declaring
-        // that nothing is focused, since if there were a focus change across
-        // sections, we could receive the blur before the focus.
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-        // eslint-disable-next-line no-restricted-syntax
-        setTimeout(() => {
-            if (Util.inputPathsEqual(this._currentFocus, blurringFocusPath)) {
-                this._setCurrentFocus(null);
-            }
-        });
-    };
-
-    blur: () => void = () => {
-        if (this._currentFocus) {
-            const [sectionIndex, ...inputPath] = this._currentFocus;
-            this.sectionRenderers[sectionIndex].blurPath(inputPath);
-        }
-    };
-
-    _sections: () => any = () => {
-        return Array.isArray(this.props.json)
-            ? this.props.json
-            : [this.props.json];
-    };
-
-    render(): React.ReactNode {
-        const apiOptions = {
-            ...ApiOptions.defaults,
-            ...this.props.apiOptions,
-            isArticle: true,
-        } as const;
-
-        const classes = classNames({
-            "framework-perseus": true,
-            "perseus-article": true,
-            // NOTE(charlie): For exercises, this is applied outside of Perseus
-            // (in webapp).
-            [ApiClassNames.MOBILE]: apiOptions.isMobile,
-        });
-
-        // TODO(alex): Add mobile api functions and pass them down here
-        // We're using the index as the key here because we don't have a unique
-        // identifier for each section. This should be fine as we never remove
-        // or reorder sections.
-        const sections = this._sections().map((section, sectionIndex) => {
-            return (
-                <div key={sectionIndex} className="clearfix">
-                    <Renderer
-                        {...section}
-                        ref={(elem) => {
-                            if (elem) {
-                                this.sectionRenderers[sectionIndex] = elem;
-                            }
-                        }}
-                        key={sectionIndex}
-                        key_={sectionIndex}
-                        keypadElement={this.props.keypadElement}
-                        apiOptions={{
-                            ...apiOptions,
-                            onFocusChange: (newFocusPath, oldFocusPath) => {
-                                // Prefix the paths with the relevant section index,
-                                // so as to allow us to distinguish between
-                                // equivalently-named inputs across Renderers.
-                                this._handleFocusChange(
-                                    newFocusPath &&
-                                        [sectionIndex].concat(newFocusPath),
-                                    oldFocusPath &&
-                                        [sectionIndex].concat(oldFocusPath),
-                                );
-                            },
-                        }}
-                        linterContext={PerseusLinter.pushContextStack(
-                            this.props.linterContext,
-                            "article",
-                        )}
-                        legacyPerseusLint={this.props.legacyPerseusLint}
-                        {...this.props.dependencies}
-                    />
-                </div>
-            );
-        });
-
-        return (
-            <div className={classes}>
-                <DependenciesContext.Provider value={this.props.dependencies}>
-                    {sections}
-                </DependenciesContext.Provider>
-            </div>
-        );
-    }
-}
-
-export default ArticleRenderer;

package/src/asset-context.ts

@@ -1,30 +0,0 @@
-/**
- * A React context for keeping track of whether an component is fully
- * loaded.  This is used to know when SvgImage and (Zoomable)TeX are finished
- * renderering.
- */
-
-import * as React from "react";
-
-type Context = {
-    // A dictionary of asset statues.  See server-item-renderer.jsx for
-    // an example of its definition.
-    assetStatuses: {
-        [assetKey: string]: boolean;
-    };
-    // setAssetStatus(key, false) must be called in the constructor of
-    // any component which isn't fully rendered on initial render.  This
-    // adds the asset key to asssetStatuses, see server-item-renderer.jsx.
-    // setAssetStatus(key, true) must be called when the component has
-    // fully rendered itself.  See svg-image.jsx and tex.jsx.
-    setAssetStatus: (assetKey: string, loaded: boolean) => void;
-};
-
-const defaultContext: Context = {
-    assetStatuses: {},
-    setAssetStatus: (assetKey: string, loaded: boolean) => {},
-};
-
-const context: React.Context<Context> = React.createContext(defaultContext);
-
-export default context;

package/src/basic-widgets.ts

@@ -1,16 +0,0 @@
-/* eslint-disable import/no-named-as-default */
-// As new widgets get added here, please also make sure they get added in
-// content_internal/perseus_traversal.py so they can be properly translated.
-import Expression from "./widgets/expression";
-import InputNumber from "./widgets/input-number";
-import NumericInput from "./widgets/numeric-input";
-import Radio from "./widgets/radio";
-
-import type {WidgetExports} from "./types";
-
-export default [
-    Radio,
-    InputNumber,
-    NumericInput,
-    Expression,
-] as ReadonlyArray<WidgetExports>;