@khanacademy/perseus 19.1.4 → 19.1.6

package/src/widgets/unit.tsx

@@ -1,374 +0,0 @@
-// TODO(joel): teach KAS how to accept an answer only if it's expressed in
-// terms of a certain type.
-// TODO(joel): Allow sigfigs within a range rather than an exact expected
-// value?
-import * as KAS from "@khanacademy/kas";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-// eslint-disable-next-line import/no-extraneous-dependencies
-import lens from "hubble";
-import $ from "jquery";
-import * as React from "react";
-import ReactDOM from "react-dom";
-import _ from "underscore";
-
-import * as Changeable from "../mixins/changeable";
-import {ClassNames as ApiClassNames, ApiOptions} from "../perseus-api";
-import {SignificantFigures, displaySigFigs} from "../sigfigs";
-
-import type {
-    APIOptions,
-    ChangeHandler,
-    FocusPath,
-    WidgetExports,
-} from "../types";
-
-const ALL = "all";
-const MAX_SIGFIGS = 10;
-
-export const countSigfigs = function (value: string): number {
-    return new SignificantFigures(value).sigFigs;
-};
-
-export const sigfigPrint = function (num: number, sigfigs: number): string {
-    return displaySigFigs(num, sigfigs, -MAX_SIGFIGS, false);
-};
-
-type Rubric =
-    | {
-          value: string;
-          sigfigs: number;
-          accepting: "all";
-      }
-    | {
-          value: string;
-          sigfigs: number;
-          accepting: "some";
-          acceptingUnits: ReadonlyArray<string>;
-      };
-
-type ValidationResult =
-    | {
-          type: "points";
-          earned: 1 | 0;
-          message: string | null | undefined;
-          total: number;
-      }
-    | {
-          type: "invalid";
-          message: string | null | undefined;
-      };
-
-type Props = {
-    apiOptions: APIOptions;
-    onChange: ChangeHandler;
-    value: string;
-    onBlur: (arg1: FocusPath) => unknown;
-    onFocus: (arg1: FocusPath) => unknown;
-};
-
-type DefaultProps = {
-    apiOptions: Props["apiOptions"];
-    value: Props["value"];
-};
-
-/* I just wrote this, but it's old by analogy to `OldExpression`, in that it's
- * the version that non-mathquill platforms get stuck with. Constructed with an
- * <input>, a parser, popsicle sticks, and glue.
- *
- * In the same way as OldExpression, this parses continuously as you type, then
- * shows and hides an error buddy. The error message is only shown after a
- * rolling two second delay, but hidden immediately on further typing.
- */
-export class OldUnitInput extends React.Component<Props> {
-    _errorTimeout: number | null | undefined;
-
-    static defaultProps: DefaultProps = {
-        apiOptions: ApiOptions.defaults,
-        value: "",
-    };
-
-    static validate(userInput: string, rubric: Rubric): ValidationResult {
-        const answer = KAS.unitParse(rubric.value).expr;
-        const guess = KAS.unitParse(userInput);
-        if (!guess.parsed) {
-            return {
-                type: "invalid",
-                message: i18n._("I couldn't understand those units."),
-            };
-        }
-
-        // Note: we check sigfigs, then numerical correctness, then units, so
-        // the most significant things come last, that way the user will see
-        // the most important message.
-        let message = null;
-
-        // did the user specify the right number of sigfigs?
-        // TODO(joel) - add a grading mode where the wrong number of sigfigs
-        // isn't marked wrong
-        const sigfigs = rubric.sigfigs;
-        const sigfigsCorrect = countSigfigs(guess.coefficient) === sigfigs;
-        if (!sigfigsCorrect) {
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-            message = i18n._("Check your significant figures.");
-        }
-
-        // now we need to check that the answer is correct to the precision we
-        // require.
-        let numericallyCorrect;
-        try {
-            const x = new KAS.Var("x");
-            const equality = new KAS.Eq(
-                answer.simplify(),
-                "=",
-                new KAS.Mul(x, guess.expr.simplify()),
-            );
-
-            const conversion = equality.solveLinearEquationForVariable(x);
-
-            // Make sure the conversion factor between the user's input answer
-            // and the canonical answer is 1, to sigfig places.
-            // TODO(joel) is this sound?
-            numericallyCorrect =
-                Number(conversion.eval()).toPrecision(sigfigs) ===
-                Number(1).toPrecision(sigfigs);
-        } catch (e: any) {
-            numericallyCorrect = false;
-        }
-
-        if (!numericallyCorrect) {
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-            message = i18n._("That answer is numerically incorrect.");
-        }
-
-        let kasCorrect;
-        const guessUnit = primUnits(guess.expr.simplify());
-        const answerUnit = primUnits(answer.simplify());
-
-        if (rubric.accepting === ALL) {
-            // We're accepting all units - KAS does the hard work of figuring
-            // out if the user's unit is equivalent to the author's unit.
-            kasCorrect = KAS.compare(guessUnit, answerUnit).equal;
-        } else {
-            // Are any of the accepted units the same as what the user entered?
-            kasCorrect = _(rubric.acceptingUnits).any((unit) => {
-                const thisAnswerUnit = primUnits(
-                    KAS.unitParse(unit).unit.simplify(),
-                );
-                return KAS.compare(
-                    thisAnswerUnit,
-                    guessUnit,
-                    // TODO(joel) - make this work as intended.
-                    // { form: true }
-                ).equal;
-            });
-        }
-        if (!kasCorrect) {
-            // @ts-expect-error - TS2322 - Type 'string' is not assignable to type 'null'.
-            message = i18n._("Check your units.");
-        }
-
-        const correct = kasCorrect && numericallyCorrect && sigfigsCorrect;
-
-        return {
-            type: "points",
-            earned: correct ? 1 : 0,
-            total: 1,
-            message,
-        };
-    }
-
-    componentDidUpdate() {
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-        // eslint-disable-next-line no-restricted-syntax
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        clearTimeout(this._errorTimeout);
-        if (KAS.unitParse(this.props.value).parsed) {
-            this._hideError();
-        } else {
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-            // eslint-disable-next-line no-restricted-syntax
-            // @ts-expect-error - TS2322 - Type 'Timeout' is not assignable to type 'number'.
-            this._errorTimeout = setTimeout(this._showError, 2000);
-        }
-    }
-
-    componentWillUnmount() {
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-        // eslint-disable-next-line no-restricted-syntax
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        clearTimeout(this._errorTimeout);
-    }
-
-    _showError: () => void = () => {
-        if (this.props.value === "") {
-            return;
-        }
-
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        const $error = $(ReactDOM.findDOMNode(this.refs.error));
-        // @ts-expect-error - TS2339 - Property 'is' does not exist on type 'JQueryStatic'.
-        if (!$error.is(":visible")) {
-            $error
-                // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-                .css({top: 50, opacity: 0.1})
-                .show()
-                .animate({top: 0, opacity: 1.0}, 300);
-        }
-    };
-
-    _hideError: () => void = () => {
-        // eslint-disable-next-line react/no-string-refs
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        const $error = $(ReactDOM.findDOMNode(this.refs.error));
-        // @ts-expect-error - TS2339 - Property 'is' does not exist on type 'JQueryStatic'.
-        if ($error.is(":visible")) {
-            // @ts-expect-error - TS2339 - Property 'animate' does not exist on type 'JQueryStatic'.
-            $error.animate({top: 50, opacity: 0.1}, 300, function () {
-                // eslint-disable-next-line @babel/no-invalid-this
-                // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-                // eslint-disable-next-line @babel/no-invalid-this
-                $(this).hide();
-            });
-        }
-    };
-
-    change: (...args: ReadonlyArray<any>) => any | null | undefined = (
-        ...args
-    ) => {
-        // @ts-expect-error - TS2345 - Argument of type 'readonly any[]' is not assignable to parameter of type 'any[]'.
-        return Changeable.change.apply(this, args);
-    };
-
-    handleBlur: () => void = () => {
-        this.props.onBlur([]);
-        // TODO(jeff, CP-3128): Use Wonder Blocks Timing API.
-        // eslint-disable-next-line no-restricted-syntax
-        // @ts-expect-error - TS2769 - No overload matches this call.
-        clearTimeout(this._errorTimeout);
-        if (!KAS.unitParse(this.props.value).parsed) {
-            this._showError();
-        }
-    };
-
-    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void = (
-        event: React.ChangeEvent<HTMLInputElement>,
-    ) => {
-        this._hideError();
-        this.props.onChange({value: event.target.value});
-    };
-
-    simpleValidate: (
-        rubric: Rubric,
-        onInputError?: () => unknown,
-    ) => ValidationResult = (rubric: Rubric, onInputError?: () => unknown) => {
-        onInputError = onInputError || function () {};
-        return OldUnitInput.validate(this.getUserInput(), rubric);
-    };
-
-    getUserInput: () => string = () => {
-        return this.props.value;
-    };
-
-    // begin mobile stuff
-
-    getInputPaths: () => ReadonlyArray<ReadonlyArray<any>> = () => {
-        // The widget itself is an input, so we return a single empty list to
-        // indicate this.
-        return [[]];
-    };
-
-    focusInputPath: (inputPath: FocusPath) => void = (inputPath: FocusPath) => {
-        // eslint-disable-next-line react/no-string-refs
-        const input = ReactDOM.findDOMNode(this.refs.input);
-        if (input) {
-            /**
-             * TODO(somewhatabstract, JIRA-XXXX):
-             * Change to using a ref callback so that focus() can be
-             * accessed.
-             */
-            // @ts-expect-error - TS2339 - Property 'focus' does not exist on type 'Element | Text'.
-            input.focus();
-        }
-    };
-
-    handleFocus: () => void = () => {
-        this.props.onFocus([]);
-    };
-
-    blurInputPath: (inputPath: FocusPath) => void = (inputPath: FocusPath) => {
-        // eslint-disable-next-line react/no-string-refs
-        const input = ReactDOM.findDOMNode(this.refs.input);
-        if (input) {
-            /**
-             * TODO(somewhatabstract, JIRA-XXXX):
-             * Change to using a ref callback so that focus() can be
-             * accessed.
-             */
-            // @ts-expect-error - TS2339 - Property 'blur' does not exist on type 'Element | Text'.
-            input.blur();
-        }
-    };
-
-    setInputValue: (
-        path: FocusPath,
-        newValue: string,
-        cb: () => unknown,
-    ) => void = (path: FocusPath, newValue: string, cb: () => unknown) => {
-        this.props.onChange(
-            {
-                value: newValue,
-            },
-            cb,
-        );
-    };
-
-    getDOMNodeForPath: () => null | Element | Text = () => {
-        // eslint-disable-next-line react/no-string-refs
-        return ReactDOM.findDOMNode(this.refs.input);
-    };
-
-    getGrammarTypeForPath: (inputPath: FocusPath) => string = (
-        inputPath: FocusPath,
-    ) => {
-        return "unit";
-    };
-
-    // end mobile stuff
-
-    // TODO(joel) think about showing the error buddy
-    render(): React.ReactNode {
-        return (
-            <div className="old-unit-input">
-                <input
-                    onChange={this.handleChange}
-                    ref="input" // eslint-disable-line react/no-string-refs
-                    className={ApiClassNames.INTERACTIVE}
-                    value={this.props.value}
-                    onFocus={this.handleFocus}
-                    onBlur={this.handleBlur}
-                />
-                {/* eslint-disable-next-line react/no-string-refs */}
-                <div ref="error" className="error" style={{display: "none"}}>
-                    {i18n._("I don't understand that")}
-                </div>
-            </div>
-        );
-    }
-}
-
-// Extract the primitive units from a unit expression. This first simplifies
-// `expr` to a `Mul` like "5 kg m / s^2" then removes the first term.
-const primUnits = function (expr) {
-    return expr.simplify().asMul().partition()[1].flatten().simplify();
-};
-
-export default {
-    name: "unit-input",
-    displayName: "Unit input",
-    defaultAlignment: "inline-block",
-    widget: OldUnitInput,
-    transform: (x: any): any => lens(x).del(["value"]).freeze(),
-    version: {major: 0, minor: 1},
-    hidden: true,
-} as WidgetExports<typeof OldUnitInput>;

package/src/widgets/video-transcript-link.test.tsx

@@ -1,213 +0,0 @@
-import {render, screen} from "@testing-library/react";
-import * as React from "react";
-import "@testing-library/jest-dom/extend-expect";
-
-import {testDependencies} from "../../../../testing/test-dependencies";
-import * as Dependencies from "../dependencies";
-
-import VideoTranscriptLink from "./video-transcript-link";
-
-describe("VideoTranscriptLink", () => {
-    beforeEach(() => {
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            useVideo: (videoId, kind) => {
-                if (videoId === "5qap5aO4i9A") {
-                    return {
-                        status: "success",
-                        data: {
-                            video: {
-                                id: "YoutubeVideo",
-                                title: "Youtube Video Title",
-                                youtubeId: "5qap5aO4i9A",
-                                contentId: "contentId",
-                                __typename: "Video",
-                            },
-                        },
-                    };
-                }
-                if (videoId === "slug-video-id") {
-                    return {
-                        status: "success",
-                        data: {
-                            video: {
-                                id: "VideoId",
-                                title: "Slug Video Title",
-                                youtubeId: "YoutubeId",
-                                contentId: "contentId",
-                                __typename: "Video",
-                            },
-                        },
-                    };
-                }
-                return {status: "loading"};
-            },
-        });
-    });
-
-    it("renders the title with youtube video name when given a youtube link", async () => {
-        // Arrange
-        render(
-            <VideoTranscriptLink location="https://www.youtube.com/watch?v=5qap5aO4i9A" />,
-        );
-
-        // Assert
-        // Find by Text test will fail if the indicated text is missing
-        await screen.findByText("Youtube Video Title");
-    });
-
-    it("renders the title with slug video name when provided a slug-id", async () => {
-        // Arrange
-        render(<VideoTranscriptLink location="slug-video-id" />);
-
-        // Assert
-        await screen.findByText("Slug Video Title");
-    });
-
-    it("renders the button with the correct link", async () => {
-        // Act
-        render(<VideoTranscriptLink location="slug-video-id" />);
-
-        // Assert
-        await screen.findByText("Slug Video Title");
-        await expect(screen.getByRole("link")).toHaveAttribute(
-            "href",
-            "/transcript/contentId",
-        );
-    });
-
-    it("can parse a youtube URL with feature text", async () => {
-        // Act
-        render(
-            <VideoTranscriptLink location="http://www.youtube.com/watch?v=5qap5aO4i9A&feature=feedrec_grec_index" />,
-        );
-
-        // Assert
-        await screen.findByText("Youtube Video Title");
-    });
-
-    it("can parse a youtube URL with userID text", async () => {
-        // Act
-        render(
-            <VideoTranscriptLink location="http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/5qap5aO4i9A" />,
-        );
-
-        // Assert
-        await screen.findByText("Youtube Video Title");
-    });
-
-    it("can parse a youtube URL with location/language text", async () => {
-        // Act
-        render(
-            <VideoTranscriptLink location="http://www.youtube.com/v/5qap5aO4i9A?fs=1&amp;hl=en_US&amp;rel=0" />,
-        );
-
-        // Assert
-        await screen.findByText("Youtube Video Title");
-    });
-
-    it("can parse a youtube URL with a time stamp", async () => {
-        // Act
-        render(
-            <VideoTranscriptLink location="http://www.youtube.com/watch?v=5qap5aO4i9A#t=0m10s" />,
-        );
-
-        // Assert
-        await screen.findByText("Youtube Video Title");
-    });
-
-    it("can parse an embed youtube URL", async () => {
-        // Act
-        render(
-            <VideoTranscriptLink location="http://www.youtube.com/embed/5qap5aO4i9A?rel=0" />,
-        );
-
-        // Assert
-        await screen.findByText("Youtube Video Title");
-    });
-
-    it("can parse a shorthand youtube URL", async () => {
-        // Act
-        render(<VideoTranscriptLink location="http://youtu.be/5qap5aO4i9A" />);
-
-        // Assert
-        await screen.findByText("Youtube Video Title");
-    });
-
-    it("should link to /transcript/videoNotFound if the URL is not a youtube URL", () => {
-        // Arrange
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            // @ts-expect-error - TS2322 - Type '(videoId: string, kind: VideoKind) => { status: "success"; data: {}; }' is not assignable to type '(id: string, kind: VideoKind) => Result<{ video: VideoData | null | undefined; }>'.
-            useVideo: (videoId, kind) => {
-                return {status: "success", data: {}};
-            },
-        });
-
-        render(<VideoTranscriptLink location="http://stackoverflow.com" />);
-
-        expect(
-            screen.getByRole("link", {name: "See video transcript"}),
-        ).toHaveAttribute("href", "/transcript/videoNotFound");
-    });
-
-    it("should handle a success state", () => {
-        // Arrange
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            useVideo: (videoId, kind) => {
-                return {status: "loading"};
-            },
-        });
-
-        render(<VideoTranscriptLink location="regula-1" />);
-
-        expect(screen.getByText("Loading...")).toBeInTheDocument();
-    });
-
-    it("should link to /transcript/videoNotFound if there's no data", () => {
-        // Arrange
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            // @ts-expect-error - TS2322 - Type '(videoId: string, kind: VideoKind) => { status: "success"; data: {}; }' is not assignable to type '(id: string, kind: VideoKind) => Result<{ video: VideoData | null | undefined; }>'.
-            useVideo: (videoId, kind) => {
-                return {status: "success", data: {}};
-            },
-        });
-
-        render(<VideoTranscriptLink location="regula-1" />);
-
-        expect(
-            screen.getByRole("link", {name: "See video transcript"}),
-        ).toHaveAttribute("href", "/transcript/videoNotFound");
-    });
-
-    it("should handle an error state", () => {
-        // Arrange
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            // @ts-expect-error - TS2322 - Type '(videoId: string, kind: VideoKind) => { status: "error"; }' is not assignable to type '(id: string, kind: VideoKind) => Result<{ video: VideoData | null | undefined; }>'.
-            useVideo: (videoId, kind) => {
-                return {status: "error"};
-            },
-        });
-
-        render(<VideoTranscriptLink location="regula-1" />);
-
-        expect(screen.getByText("Something went wrong.")).toBeInTheDocument();
-    });
-
-    it("should handle an aborted state", () => {
-        // Arrange
-        jest.spyOn(Dependencies, "getDependencies").mockReturnValue({
-            ...testDependencies,
-            useVideo: (videoId, kind) => {
-                return {status: "aborted"};
-            },
-        });
-
-        render(<VideoTranscriptLink location="regula-1" />);
-
-        expect(screen.getByText("Something went wrong.")).toBeInTheDocument();
-    });
-});

package/src/widgets/video-transcript-link.tsx

@@ -1,84 +0,0 @@
-/**
- * This is a component that adds a link to the transcript for embedded videos in articles.
- */
-
-import {View, Text} from "@khanacademy/wonder-blocks-core";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Link from "@khanacademy/wonder-blocks-link";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import {getDependencies} from "../dependencies";
-
-const IS_URL = /^https?:\/\//;
-
-const getYoutubeId = (url: string): string => {
-    const regExp =
-        /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
-    const match = url.match(regExp);
-    if (match && match[7].length === 11) {
-        return match[7];
-    }
-    return "videoNotFound";
-};
-
-// will accept a youtube link or a video's slug name from embedded video and then query accordingly.
-type Props = {
-    location: string;
-};
-
-/**
- * Video Transcript Link Component.
- */
-const VideoTranscriptLink = (props: Props): React.ReactElement => {
-    const {location} = props;
-    const {useVideo} = getDependencies();
-    const [id, kind] = IS_URL.test(location)
-        ? [getYoutubeId(location), "YOUTUBE_ID"]
-        : [location, "READABLE_ID"];
-    // The result value conforms to the wonder-blocks-data `Result` type
-    // which is used by our GraphQL framework.
-    // @ts-expect-error - TS2345 - Argument of type 'string' is not assignable to parameter of type 'VideoKind'.
-    const result = useVideo(id, kind);
-
-    switch (result.status) {
-        case "loading":
-            return <View>{i18n._("Loading...")}</View>;
-        case "success": {
-            const video = result.data?.video;
-            return (
-                <View style={styles.transcriptLink}>
-                    <Text>{video?.title}</Text>
-                    <Strut size={10} />
-                    <Link
-                        href={
-                            "/transcript/" +
-                            (video?.contentId || "videoNotFound")
-                        }
-                        target="_blank"
-                        className="visited-no-recolor"
-                    >
-                        {i18n._("See video transcript")}
-                    </Link>
-                </View>
-            );
-        }
-        case "error":
-            return <View>{i18n._("Something went wrong.")}</View>;
-        case "aborted":
-            return <View>{i18n._("Something went wrong.")}</View>;
-        default:
-            return <View>{i18n._("Something went wrong.")}</View>;
-    }
-};
-
-const styles = StyleSheet.create({
-    transcriptLink: {
-        flexDirection: "row",
-        width: "100%",
-        justifyContent: "center",
-    },
-});
-
-export default VideoTranscriptLink;