@khanacademy/perseus 19.1.4 → 19.1.6

package/src/version.ts

@@ -1,10 +0,0 @@
-// This file is processed by a Rollup plugin (replace) to inject the production
-// version number during the release build.
-// In dev, you'll never see the version number.
-
-import {addLibraryVersionToPerseusDebug} from "@khanacademy/perseus-core";
-
-const libName = "@khanacademy/perseus";
-export const libVersion = "__lib_version__";
-
-addLibraryVersionToPerseusDebug(libName, libVersion);

package/src/widget-container.tsx

@@ -1,199 +0,0 @@
-/* eslint-disable react/no-unsafe, react/sort-comp */
-import {linterContextDefault} from "@khanacademy/perseus-linter";
-import classNames from "classnames";
-import * as React from "react";
-import ReactDOM from "react-dom";
-
-import {DependenciesContext} from "./dependencies";
-import ErrorBoundary from "./error-boundary";
-import {zIndexInteractiveComponent} from "./styles/constants";
-import {containerSizeClass, getClassFromWidth} from "./util/sizing-utils";
-import * as Widgets from "./widgets";
-
-import type {PerseusWidgetOptions} from "./perseus-types";
-import type {WidgetProps} from "./types";
-import type {LinterContextProps} from "@khanacademy/perseus-linter";
-
-type Props = {
-    shouldHighlight: boolean;
-    type: string; // widget type/name,
-    id: string; // widget id
-    initialProps: WidgetProps<any, PerseusWidgetOptions>;
-    linterContext: LinterContextProps;
-};
-
-type DefaultProps = {
-    linterContext: LinterContextProps;
-};
-
-type State = {
-    sizeClass: "small" | "medium" | "large" | "xlarge";
-    widgetProps: WidgetProps<any, PerseusWidgetOptions>;
-};
-
-class WidgetContainer extends React.Component<Props, State> {
-    widgetRef = React.createRef<React.ComponentType<any>>();
-
-    static defaultProps: DefaultProps = {
-        linterContext: linterContextDefault,
-    };
-
-    state: any = {
-        // TODO(benkomalo): before we're mounted, we don't know how big
-        // we're going to be, so just default to MEDIUM for now. :/ In the
-        // future we can sniff with user-agents or something to get a
-        // better approximation, to avoid flickers
-        sizeClass: containerSizeClass.MEDIUM,
-        widgetProps: this.props.initialProps,
-    };
-
-    componentDidMount() {
-        // 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 - 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.
-            // Unfortunately, it will cause a flash and re-layout on mobile,
-            // but until we have better SSR or a more drastic way change to our
-            // APIs that hints at the available size, we do have to measure DOM
-            // unfortunately.
-            /* eslint-disable react/no-did-mount-set-state */
-            this.setState({
-                sizeClass: getClassFromWidth(containerWidth),
-            });
-            /* eslint-enable react/no-did-mount-set-state */
-        }
-    }
-
-    render(): React.ReactNode {
-        let className = classNames({
-            "perseus-widget-container": true,
-            "widget-highlight": this.props.shouldHighlight,
-            "widget-nohighlight": !this.props.shouldHighlight,
-            // HACK(matthewc): perseus-widget-container is setting a font-size
-            // but we want the definition prompt to match the surrounding font
-            // I'm sorry, but there's a time crunch
-            "perseus-widget__definition": this.props.type === "definition",
-        });
-
-        const type = this.props.type;
-        const WidgetType = Widgets.getWidget(type);
-        if (WidgetType == null) {
-            // This is for the good of all people!!
-            // eslint-disable-next-line no-console
-            console.warn(`Widget type '${type}' not found!`);
-            // Just give up on invalid widget types
-            return <div className={className} />;
-        }
-
-        let alignment = this.state.widgetProps.alignment;
-        if (alignment === "default") {
-            alignment = Widgets.getDefaultAlignment(type);
-        }
-
-        className += " widget-" + alignment;
-
-        const apiOptions = this.state.widgetProps.apiOptions;
-
-        // Hack to prevent interaction with static widgets: we overlay a big
-        // div on top of the widget and overflow: hidden the container.
-        // Ideally widgets themselves should know how to prevent interaction.
-        const isStatic = this.state.widgetProps.static || apiOptions.readOnly;
-        const staticContainerStyles = {
-            position: "relative",
-            overflow: "visible",
-        } as const;
-        const staticOverlayStyles = {
-            width: "100%",
-            height: "100%",
-            position: "absolute",
-            top: 0,
-            left: 0,
-            zIndex: zIndexInteractiveComponent,
-        } as const;
-
-        // Some widgets may include strings of markdown that we may
-        // want to run the linter on. So if the widget is lintable,
-        // and we've been asked to highlight lint, pass that property
-        // on to the widget, and if the content is not lintable, make sure
-        // to default to false.
-        // The linter context might be a constant object (and it isn't owned
-        // by us anyway), so we copy it if we have to modify it.
-        const linterContext = Widgets.isLintable(type)
-            ? this.props.linterContext
-            : {...this.props.linterContext, highlightLint: false};
-
-        // Note: if you add more props here, please consider whether or not
-        // it should be auto-serialized (e.g. used in scoreInput()). See
-        // widget-jsonify-deprecated.jsx and widget-prop-denylist.jsx
-
-        // We default to an empty object for style instead of null
-        // because of a strange bug where the static styles aren't applied
-        // after toggling static mode.
-        return (
-            <div
-                className={className}
-                style={isStatic ? staticContainerStyles : {}}
-            >
-                <DependenciesContext.Consumer>
-                    {({analytics}) => (
-                        <ErrorBoundary
-                            metadata={{
-                                widget_type: type,
-                                widget_id: this.props.id,
-                            }}
-                            onError={() => {
-                                analytics.onAnalyticsEvent({
-                                    type: "perseus:widget-rendering-error",
-                                    payload: {
-                                        widgetType: type,
-                                        widgetId: this.props.id,
-                                    },
-                                });
-                            }}
-                        >
-                            <WidgetType
-                                {...this.state.widgetProps}
-                                linterContext={linterContext}
-                                containerSizeClass={this.state.sizeClass}
-                                ref={this.widgetRef}
-                            />
-                            {isStatic && <div style={staticOverlayStyles} />}
-                        </ErrorBoundary>
-                    )}
-                </DependenciesContext.Consumer>
-            </div>
-        );
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        if (this.props.type !== nextProps.type) {
-            throw new Error(
-                "WidgetContainer can't change widget type; set a different " +
-                    "key instead to recreate the container.",
-            );
-        }
-    }
-
-    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
-        return (
-            this.props.shouldHighlight !== nextProps.shouldHighlight ||
-            this.props.type !== nextProps.type ||
-            this.state.widgetProps !== nextState.widgetProps ||
-            this.state.sizeClass !== nextState.sizeClass
-        );
-    }
-
-    getWidget: () => any = () => {
-        return this.widgetRef.current;
-    };
-
-    replaceWidgetProps: (arg1: WidgetProps<any, PerseusWidgetOptions>) => void =
-        (newWidgetProps) => {
-            this.setState({widgetProps: newWidgetProps});
-        };
-}
-
-export default WidgetContainer;

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/categorizer.testdata";
-
-export default {
-    title: "Perseus/Widgets/Categorizer",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};

package/src/widgets/__stories__/cs-program.stories.tsx

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/cs-program.testdata";
-
-export default {
-    title: "Perseus/Widgets/CS Program",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};

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

@@ -1,114 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {storybookDependenciesV2} from "../../../../../testing/test-dependencies";
-import ArticleRenderer from "../../article-renderer";
-
-export default {
-    title: "Perseus/Widgets/Definition",
-};
-
-const question1 = {
-    content:
-        "Read the excerpt and answer the question below. \n\nThe Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 definition 1]], upon these conditions.",
-    images: {},
-    widgets: {
-        "definition 1": {
-            graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            static: false,
-            type: "definition",
-            options: {
-                definition:
-                    "A Native American people in Connecticut; white settlers in New England, the Pequots, and their respective allies were at war from 1636-1638.",
-                togglePrompt: "the Pequots",
-                static: false,
-            },
-            alignment: "default",
-        },
-    },
-} as const;
-
-const question2 = {
-    content:
-        "Read the excerpt and answer the question below. \n\nThe [[\u2603 definition 2]] and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 definition 1]], upon these conditions.",
-    images: {},
-    widgets: {
-        "definition 1": {
-            graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            static: false,
-            type: "definition",
-            options: {
-                definition:
-                    "A Native American people in Connecticut; white settlers in New England, the Pequots, and their respective allies were at war from 1636-1638.",
-                togglePrompt: "the Pequots",
-                static: false,
-            },
-            alignment: "default",
-        },
-        "definition 2": {
-            graded: true,
-            version: {
-                major: 0,
-                minor: 0,
-            },
-            static: false,
-            type: "definition",
-            options: {
-                definition:
-                    "A governor is an administrative leader and head of a polity or political region, ranking under the head of state and in some cases, such as governors-general, as the head of state's official representative.",
-                togglePrompt: "Governor",
-                static: false,
-            },
-            alignment: "default",
-        },
-    },
-} as const;
-
-const article = {
-    content:
-        "###Backstory\n\nDuring World War II, in August of 1943, the [[☃ definition 1]] launched a massive bombing campaign on Milan and its outskirts. The explosions and the ensuing fires killed over 700 people and destroyed many of the city’s most important buildings and monuments, including a significant portion of Santa Maria delle Grazie. Miraculously, the wall with the painting survived, probably because it had been shored up with sandbags and mattresses, but the roof of the refectory was blown off and the other walls were decimated. The _Last Supper_ remained exposed to the elements, covered only with a tarp, for several months, until the refectory (the dining room of the monastery where the _Last Supper_ was painted), was rebuilt and a team of restorers began working to preserve and restore the painting.",
-    images: {},
-    widgets: {
-        "definition 1": {
-            alignment: "default",
-            graded: true,
-            options: {
-                definition:
-                    "The Allies, led by the United Kingdom, the United States, and the Soviet Union, were the group of countries who opposed the Axis powers (Germany, Japan, and Italy) during World War II.",
-                static: false,
-                togglePrompt: "Allies",
-            },
-            static: false,
-            type: "definition",
-            version: {major: 0, minor: 0},
-        },
-    },
-} as const;
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};
-
-export const MultipleDefinitions = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question2} />;
-};
-
-export const ArticleDefintion = (args: StoryArgs): React.ReactElement => {
-    return (
-        <ArticleRenderer
-            json={article}
-            useNewStyles
-            dependencies={storybookDependenciesV2}
-        />
-    );
-};

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/dropdown.testdata";
-
-export default {
-    title: "Perseus/Widgets/Dropdown",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};

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

@@ -1,18 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1, question2} from "../__testdata__/explanation.testdata";
-
-export default {
-    title: "Perseus/Widgets/Explanation",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};
-
-export const Question2 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question2} />;
-};

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

@@ -1,145 +0,0 @@
-import {KeypadContext, KeypadType} from "@khanacademy/math-input";
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-item-renderer-with-debug-ui";
-import {
-    expressionItem2,
-    expressionItem3,
-} from "../__testdata__/expression.testdata";
-import expressionExport from "../expression";
-
-import TestKeypadContextWrapper from "./test-keypad-context-wrapper";
-
-import type {LegacyButtonSets, PerseusItem} from "../../perseus-types";
-import type {Keys as Key} from "@khanacademy/math-input";
-
-type StoryArgs = {
-    customKeypad: boolean;
-};
-
-type Story = {
-    title: string;
-    argTypes: any;
-};
-
-type WrappedKeypadContextProps = {
-    item: PerseusItem;
-    customKeypad: boolean;
-    isMobile?: boolean;
-};
-
-const WrappedKeypadContext = ({
-    item,
-    customKeypad,
-    isMobile = false,
-}: WrappedKeypadContextProps) => {
-    return (
-        <TestKeypadContextWrapper>
-            <KeypadContext.Consumer>
-                {({keypadElement}) => {
-                    return (
-                        <ServerItemRendererWithDebugUI
-                            item={item}
-                            keypadElement={keypadElement}
-                            // Hardcoding the V2 Keypad to true as the Storybook Args
-                            // were not working.
-                            apiOptions={{
-                                isMobile: isMobile,
-                                customKeypad: customKeypad,
-                                onFocusChange: action("onFocusChange"),
-                            }}
-                        />
-                    );
-                }}
-            </KeypadContext.Consumer>
-        </TestKeypadContextWrapper>
-    );
-};
-
-export const DesktopKitchenSink = (args: StoryArgs): React.ReactElement => {
-    const reviewModeRubric = {
-        functions: ["f", "g", "h"],
-        times: true,
-        answerForms: [],
-        buttonSets: [
-            "basic",
-            "basic+div",
-            "trig",
-            "prealgebra",
-            "logarithms",
-            "basic relations",
-            "advanced relations",
-        ] as LegacyButtonSets,
-    };
-
-    const keypadConfiguration = {
-        keypadType: KeypadType.EXPRESSION,
-        extraKeys: ["x", "y", "z"] as Array<Key>,
-    };
-
-    return (
-        <div style={{padding: "2rem"}}>
-            <expressionExport.widget
-                alignment={null}
-                value=""
-                containerSizeClass="small"
-                findWidgets={(callback) => []}
-                isLastUsedWidget={false}
-                onChange={() => {}}
-                problemNum={1}
-                static={false}
-                trackInteraction={() => {}}
-                widgetId="expression"
-                reviewModeRubric={reviewModeRubric}
-                keypadConfiguration={keypadConfiguration}
-            />
-        </div>
-    );
-};
-
-export const Desktop = (args: StoryArgs): React.ReactElement => {
-    return <WrappedKeypadContext item={expressionItem3} customKeypad={false} />;
-};
-
-export const Mobile = (args: StoryArgs): React.ReactElement => {
-    return (
-        <div>
-            <p>
-                MathInput uses touch events;{" "}
-                <a href="https://developer.chrome.com/docs/devtools/device-mode/">
-                    emulate mobile
-                </a>{" "}
-                to use the custom keypad.
-            </p>
-            <WrappedKeypadContext
-                item={expressionItem3}
-                customKeypad
-                isMobile
-            />
-        </div>
-    );
-};
-
-export const ExpressionItem2 = (args: StoryArgs): React.ReactElement => {
-    return (
-        <WrappedKeypadContext
-            item={expressionItem2}
-            customKeypad={args.customKeypad}
-        />
-    );
-};
-
-export const ExpressionItem3 = (args: StoryArgs): React.ReactElement => {
-    return (
-        <WrappedKeypadContext
-            item={expressionItem3}
-            customKeypad={args.customKeypad}
-        />
-    );
-};
-
-export default {
-    title: "Perseus/Widgets/Expression",
-    argTypes: {customKeypad: {control: "boolean"}},
-} as Story;

package/src/widgets/__stories__/graded-group-set.stories.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {article1} from "../__testdata__/graded-group-set.testdata";
-
-type StoryArgs = {
-    isMobile: boolean;
-};
-
-type GradedGroupSetStory = {
-    title: string;
-    args: StoryArgs;
-};
-
-export const Article1 = (args: StoryArgs): React.ReactElement => {
-    return (
-        <RendererWithDebugUI
-            apiOptions={{
-                isMobile: args.isMobile,
-            }}
-            question={article1}
-        />
-    );
-};
-
-export default {
-    title: "Perseus/Widgets/Graded Group Set",
-    args: {
-        isMobile: false,
-    },
-} as GradedGroupSetStory;

package/src/widgets/__stories__/graded-group.stories.tsx

@@ -1,31 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/graded-group.testdata";
-
-type StoryArgs = {
-    isMobile: boolean;
-};
-
-type Story = {
-    title: string;
-    args: StoryArgs;
-};
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return (
-        <RendererWithDebugUI
-            question={question1}
-            apiOptions={{
-                isMobile: args.isMobile,
-            }}
-        />
-    );
-};
-
-export default {
-    title: "Perseus/Widgets/Graded Group",
-    args: {
-        isMobile: false,
-    },
-} as Story;

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

@@ -1,46 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {
-    absoluteValueQuestion,
-    multipleAvailableTypesQuestion,
-    exponentialQuestion,
-    linearQuestion,
-    logarithmQuestion,
-    quadraticQuestion,
-    sinusoidQuestion,
-} from "../__testdata__/grapher.testdata";
-
-export default {
-    title: "Perseus/Widgets/Grapher",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const AbsoluteValueQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={absoluteValueQuestion} />;
-};
-
-export const ExponentialQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={exponentialQuestion} />;
-};
-
-export const LinearQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={linearQuestion} />;
-};
-
-export const LogarithmQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={logarithmQuestion} />;
-};
-
-export const QuadraticQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={quadraticQuestion} />;
-};
-
-export const SinusoidQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={sinusoidQuestion} />;
-};
-
-export const ComplexQuestion = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={multipleAvailableTypesQuestion} />;
-};

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/group.testdata";
-
-export default {
-    title: "Perseus/Widgets/Group",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};

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

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import {question1} from "../__testdata__/iframe.testdata";
-
-export default {
-    title: "Perseus/Widgets/IFrame",
-};
-
-type StoryArgs = Record<any, any>;
-
-export const Question1 = (args: StoryArgs): React.ReactElement => {
-    return <RendererWithDebugUI question={question1} />;
-};