@khanacademy/perseus 19.1.4 → 19.1.6

package/src/mixins/__tests__/widget-prop-denylist.test.ts

@@ -1,21 +0,0 @@
-import {removeDenylistProps} from "../widget-prop-denylist";
-
-describe("removeDenylistProps", () => {
-    it("removes props that are in denylist from input", () => {
-        // Arrange
-        const props = {
-            // These props are not on the denylist
-            foo: "bar",
-            gandalf: "awesome",
-            // These props are on the denylist
-            key: "f-sharp",
-            id: 42,
-        } as const;
-
-        // Act
-        const result = removeDenylistProps(props);
-
-        // Assert
-        expect(result).toStrictEqual({foo: "bar", gandalf: "awesome"});
-    });
-});

package/src/mixins/changeable.ts

@@ -1,133 +0,0 @@
-/* eslint-disable @babel/no-invalid-this */
-/**
- * Changeable
- *
- * Adds a this.change() function to a component
- *
- * This.change takes prop changes as parameters, and calls
- * this.props.onChange with the modified props.
- */
-
-import PropTypes from "prop-types";
-import _ from "underscore";
-
-import {Errors} from "../logging/log";
-import {PerseusError} from "../perseus-error";
-
-import WIDGET_PROP_DENYLIST from "./widget-prop-denylist";
-
-import type {ChangeFn} from "../types";
-
-const USAGE =
-    "Usage:\n" +
-    "  this.change({propName: 5}, callback);\n" +
-    '  this.change("propName", 5, callback);\n' +
-    '  this.change("propName")';
-
-/**
- * Primary helper function for this.change()
- *
- * Takes the parameters in a consistent style, once this.change() has
- * figured out which way it was called.
- */
-const _changeMultiple = function (
-    component: any,
-    newProps:
-        | string
-        | Record<any, any>
-        | {
-              [key: string]: any;
-          },
-    callback,
-) {
-    // Omit "default" props:
-    // ref and key come from react, and don't actually represent
-    //   the conceptual state of our component
-    // onChange comes from our parent to allow this modification,
-    //   and doesn't conceptually represent the state of our component
-    const currProps = _.omit(component.props, WIDGET_PROP_DENYLIST);
-    const nextProps = _.extend(currProps, newProps);
-    component.props.onChange(nextProps, callback);
-};
-
-/**
- * Helper function for changing a single prop
- */
-const _changeSingle = function (
-    component: any,
-    propName: string,
-    value: any,
-    callback,
-) {
-    if (value === undefined) {
-        // If called with a single prop name, return a lambda to change
-        // a single prop on the current object
-        return _.partial(_changeSingle, component, propName);
-    }
-    // If called with two values, change a single prop of the
-    // current object
-    const newProps: Record<string, any> = {};
-    newProps[propName] = value;
-    _changeMultiple(component, newProps, callback);
-};
-
-/**
- * this.change()
- *
- * Can be called as follows:
- * this.change(newProps, callback);
- *
- * this.change(propName, propValue, callback);
- *
- * this.change(propName) -> returns a lambda that takes a prop value to
- * set and a callback to call after having set that value.
- */
-// TODO(WEB-1727): use proper TypeScript syntax for overloaded functions
-export const change: ChangeFn = function (
-    newPropsOrSinglePropName,
-    propValue,
-    callback,
-) {
-    if (_.isObject(newPropsOrSinglePropName) && callback === undefined) {
-        // Called with an object of multiple props to change
-        callback = propValue;
-        return _changeMultiple(
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this,
-            newPropsOrSinglePropName, // object newProps
-            callback,
-        );
-    }
-    if (typeof newPropsOrSinglePropName === "string") {
-        // Called with a string propName of a single prop to change
-        return _changeSingle(
-            // @ts-expect-error - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
-            this,
-            newPropsOrSinglePropName, // string propName
-            propValue,
-            callback,
-        );
-    }
-    throw new PerseusError(
-        "Invalid types sent to this.change(): " +
-            // eslint-disable-next-line prefer-rest-params
-            _.toArray(arguments).join() +
-            "\n" +
-            USAGE,
-        Errors.Internal,
-    );
-};
-
-export const propTypes = {
-    onChange: PropTypes.func.isRequired,
-} as const;
-
-export type ChangeableProps = {
-    onChange: (
-        values: {
-            [key: string]: any;
-        },
-        callback?: (() => unknown) | null | undefined,
-        silent?: boolean,
-    ) => unknown;
-};

package/src/mixins/editor-jsonify.ts

@@ -1,13 +0,0 @@
-import _ from "underscore";
-
-import WIDGET_PROP_DENYLIST from "./widget-prop-denylist";
-
-const EditorJsonify = {
-    serialize: function (): any {
-        // Omit props that get passed to all widgets
-        // @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly serialize: () => any; }'.
-        return _.omit(this.props, WIDGET_PROP_DENYLIST);
-    },
-} as const;
-
-export default EditorJsonify;

package/src/mixins/widget-jsonify-deprecated.ts

@@ -1,23 +0,0 @@
-/* Free implementation of getUserInput. This should be used sparingly, since it
- * just returns all the widget's props rather than picking out those which were
- * input by the user.
- */
-import _ from "underscore";
-
-import WIDGET_PROP_DENYLIST from "./widget-prop-denylist";
-
-const WidgetJsonifyDeprecated = {
-    getUserInput: function (): any {
-        // Omit props that get passed to all widgets
-        // @ts-expect-error - TS2339 - Property 'props' does not exist on type '{ readonly getUserInput: () => any; readonly getUserInputFromProps: (props: any) => any; }'.
-        return _.omit(this.props, WIDGET_PROP_DENYLIST);
-    },
-
-    // Static version of `WidgetJsonifyDeprecated.getUserInput`
-    getUserInputFromProps: function (props: any): any {
-        // Omit props that get passed to all widgets
-        return _.omit(props, WIDGET_PROP_DENYLIST);
-    },
-} as const;
-
-export default WidgetJsonifyDeprecated;

package/src/mixins/widget-prop-denylist.ts

@@ -1,48 +0,0 @@
-/**
- * These are things that widgets should exclude when serializing themselves.
- *
- * The use of this list needs to die. Basically, there are codepaths that
- * blindly serialize the "props" of a widget so that it can pass around its
- * info. Unfortunately, props aren't guaranteed to be serializable, and
- * automatically serializing schemaless list of attributes causes issues (e.g.
- * circular JSON structures sometimes).
- *
- * This blocks things that we know don't need to be serialized.
- */
-
-const denylist = [
-    // standard props "added" by react
-    // (technically the renderer still adds them)
-    "key",
-    "ref",
-    // added by src/renderer.jsx
-    "containerSizeClass",
-    "widgetId",
-    "onChange",
-    "problemNum",
-    "apiOptions",
-    "questionCompleted",
-    "findWidgets",
-    // added by src/editor.jsx, for widgets removing themselves
-    // this is soooo not the right place for this, but alas.
-    "onRemove",
-    // also added by src/editor.jsx
-    "id",
-    // Callbacks and items for interaction handling
-    "onBlur",
-    "onFocus",
-    "trackInteraction",
-    "keypadElement",
-];
-
-export const removeDenylistProps = (props: any): any => {
-    const newProps = {...props} as const;
-    for (const prop of denylist) {
-        if (prop in newProps) {
-            delete newProps[prop];
-        }
-    }
-    return newProps;
-};
-
-export default denylist;

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

@@ -1,83 +0,0 @@
-import {View} from "@khanacademy/wonder-blocks-core";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import {MultiItemRendererWithDebugUI} from "../../../../../testing/multi-item-renderer-with-debug-ui";
-import {question1} from "../__testdata__/multi-renderer.testdata";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export const SingleItem = (args: StoryArgs): React.ReactElement => {
-    const item = {
-        _multi: {
-            ...question1._multi,
-            blurb: {
-                ...question1._multi.blurb,
-                content:
-                    "This is a short snippet to help you understand the context of the question. We call it the 'blurb'.",
-            },
-        },
-    } as const;
-    return (
-        <MultiItemRendererWithDebugUI simpleItem={item}>
-            {({renderers}) => {
-                const {blurb, question, hints} = renderers;
-                return (
-                    <View>
-                        <View style={styles.section}>
-                            <HeadingSmall style={styles.heading}>
-                                {i18n.doNotTranslate("Blurb")}
-                            </HeadingSmall>
-                            {blurb}
-                        </View>
-                        <View style={styles.section}>
-                            <HeadingSmall style={styles.heading}>
-                                {i18n.doNotTranslate("Question")}
-                            </HeadingSmall>
-                            {question}
-                        </View>
-                        <View style={styles.section}>
-                            <HeadingSmall style={styles.heading}>
-                                {i18n.doNotTranslate("Hints")}
-                            </HeadingSmall>
-                            <View style={styles.hints}>
-                                {
-                                    // @ts-expect-error [FEI-5003] - TS2339 - Property 'firstN' does not exist on type 'readonly ReactNode[]'.
-                                    hints?.firstN(2)
-                                }
-                            </View>
-                        </View>
-                    </View>
-                );
-            }}
-        </MultiItemRendererWithDebugUI>
-    );
-};
-
-const styles = StyleSheet.create({
-    section: {
-        backgroundColor: "#F5F5F5",
-        padding: "5px",
-        borderWidth: "1px",
-        marginTop: "5px",
-        marginBottom: "5px",
-    },
-    heading: {
-        backgroundColor: "#A9A9A9",
-        margin: "-5px",
-        padding: "5px",
-    },
-    hints: {
-        marginLeft: "50px",
-    },
-});
-
-export default {
-    title: "Perseus/Renderers/Multi Renderer",
-} as Story;

package/src/multi-items/__testdata__/multi-renderer.testdata.ts

@@ -1,172 +0,0 @@
-import shapes from "../shapes";
-
-import type {Item} from "../item-types";
-import type {Shape} from "../shape-types";
-
-export const simpleQuestionShape: Shape = shapes.shape({
-    blurb: shapes.content,
-    question: shapes.content,
-    hints: shapes.hints,
-});
-
-// Shape: simpleQuestionShape
-export const question1: Item = {
-    _multi: {
-        blurb: {
-            __type: "content",
-            content: "",
-            images: {},
-            widgets: {},
-        },
-        hints: [
-            {
-                __type: "hint",
-                content:
-                    "If two triangles are congruent, then they have the same side lengths and angle measures.",
-                images: {},
-                replace: false,
-                widgets: {},
-            },
-            {
-                __type: "hint",
-                content:
-                    "A triangle congruent to triangle $ABC$ must also have side lengths of $12$, $14$ and $20$.",
-                images: {},
-                replace: false,
-                widgets: {},
-            },
-            {
-                __type: "hint",
-                content:
-                    "The following triangle is congruent to triangle $ABC$:\n\n* A triangle with side lengths of $12$, $14$, and $20$",
-                images: {},
-                replace: false,
-                widgets: {},
-            },
-        ],
-        question: {
-            __type: "content",
-            content:
-                "Triangle $ABC$ has side lengths of $12$, $14$, and $20$. Which of the following triangles is congruent to triangle $ABC$ ?\n\n[[☃ radio 1]]\n\nEnter the number 3 into this field: [[☃ input-number 1]]",
-            widgets: {
-                "radio 1": {
-                    alignment: "default",
-                    graded: true,
-                    options: {
-                        choices: [
-                            {
-                                clue: "Congruent triangles have the same side lengths.",
-                                content:
-                                    "A triangle with side lengths of $3$, $4$, and $5$",
-                                correct: false,
-                            },
-                            {
-                                clue: "Congruent triangles have the same side lengths.\n\nThis choice is similar to triangle $ABC$.",
-                                content:
-                                    "A triangle with side lengths of $6$, $7$, and $10$",
-                                correct: false,
-                            },
-                            {
-                                clue: "Congruent triangles have the same side lengths.",
-                                content:
-                                    "A triangle with side lengths of $10$, $12$, and $18$",
-                                correct: false,
-                                isNoneOfTheAbove: false,
-                            },
-                            {
-                                clue: "Congruent triangles have the same side lengths.",
-                                content:
-                                    "A triangle with side lengths of $12$, $14$, and $20$",
-                                correct: true,
-                                isNoneOfTheAbove: false,
-                            },
-                            {
-                                clue: "Congruent triangles have the same side lengths.\n\nThis choice is similar to triangle $ABC$.",
-                                content:
-                                    "A triangle with side lengths of $24$, $28$, and $40$",
-                                correct: false,
-                                isNoneOfTheAbove: false,
-                            },
-                        ],
-                        countChoices: false,
-                        deselectEnabled: false,
-                        displayCount: null,
-                        hasNoneOfTheAbove: false,
-                        multipleSelect: false,
-                        randomize: false,
-                    },
-                    static: false,
-                    type: "radio",
-                    version: {
-                        major: 1,
-                        minor: 0,
-                    },
-                },
-                "input-number 1": {
-                    type: "input-number",
-                    graded: true,
-                    options: {
-                        answerType: "number",
-                        value: "-42",
-                        simplify: "required",
-                        size: "normal",
-                        inexact: false,
-                        maxError: 0.1,
-                    },
-                },
-            },
-        },
-    },
-};
-
-const mockWidgetConfig = {
-    graded: true,
-    version: {major: 0, minor: 0},
-    static: false,
-    type: "mock-widget",
-    options: {static: false, smiling: true},
-    alignment: "default",
-} as const;
-
-// Shape: simpleQuestionShape
-export const mockedQuestion1: Item = {
-    _multi: {
-        blurb: {
-            __type: "content",
-            content: "Here's a blurb [[☃ mock-widget 1]]",
-            images: {},
-            widgets: {
-                "mock-widget 1": mockWidgetConfig,
-            },
-        },
-        hints: [
-            {
-                __type: "hint",
-                content: "Hint #1 [[☃ mock-widget 2]]",
-                images: {},
-                replace: false,
-                widgets: {
-                    "mock-widget 2": mockWidgetConfig,
-                },
-            },
-            {
-                __type: "hint",
-                content: "Hint #1 [[☃ mock-widget 3]]",
-                images: {},
-                replace: false,
-                widgets: {
-                    "mock-widget 3": mockWidgetConfig,
-                },
-            },
-        ],
-        question: {
-            __type: "content",
-            content:
-                "What is the answer to this?\n\n[[☃ mock-widget 4]]\n\n[[☃ mock-widget 5]]",
-            widgets: {
-                "mock-widget 4": mockWidgetConfig,
-                "mock-widget 5": mockWidgetConfig,
-            },
-        },
-    },
-};