@khanacademy/perseus-editor 4.1.5 → 4.1.6

package/src/widgets/example-graphie-widget.tsx

@@ -1,172 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars, react/forbid-prop-types, react/sort-comp */
-/**
- * This is an example graphie-using widget
- *
- * TODO(jack): Add more comments
- */
-
-import {number as knumber, point as kpoint} from "@khanacademy/kmath";
-import {
-    components,
-    ApiOptions,
-    Changeable,
-    Util,
-    WidgetJsonifyDeprecated,
-} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import type {Coord, WidgetExports} from "@khanacademy/perseus";
-
-const {Graphie} = components;
-
-// @ts-expect-error - TS2339 - Property 'MovablePoint' does not exist on type 'typeof Graphie'.
-const MovablePoint = Graphie.MovablePoint;
-
-type Props = any;
-
-/**
- * This is the widget's renderer. It shows up in the right column
- * in the demo, and is what is visible to users, and where
- * users enter their answers.
- */
-class ExampleGraphieWidget extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        apiOptions: ApiOptions.propTypes,
-
-        graph: PropTypes.object.isRequired,
-        coord: PropTypes.arrayOf(PropTypes.number),
-    };
-
-    static defaultProps: Props = {
-        // We want to allow our coord to be null to test if the
-        // user has interacted with this widget yet when grading it
-        coord: null,
-        graph: {
-            box: [400, 400],
-            labels: ["x", "y"],
-            range: [
-                [-10, 10],
-                [-10, 10],
-            ],
-            step: [1, 1],
-            gridStep: [1, 1],
-            valid: true,
-            backgroundImage: null,
-            markings: "grid",
-            showProtractor: false,
-        },
-    };
-
-    /**
-     * This is the widget's grading function
-     */
-    static validate(state: any, rubric: any): any {
-        if (state.coord == null) {
-            return {
-                type: "invalid",
-                message: null,
-            };
-        }
-        if (kpoint.equal(state.coord, rubric.correct)) {
-            return {
-                type: "points",
-                earned: 1,
-                total: 1,
-                message: null,
-            };
-        }
-        return {
-            type: "points",
-            earned: 0,
-            total: 1,
-            message: null,
-        };
-    }
-
-    getUserInput: () => any = () => {
-        return WidgetJsonifyDeprecated.getUserInput.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <Graphie
-                // eslint-disable-next-line react/no-string-refs
-                ref="graphie"
-                box={this.props.graph.box}
-                range={this.props.graph.range}
-                options={this.props.graph}
-                setup={this.setupGraphie}
-                setDrawingAreaAvailable={
-                    this.props.apiOptions.setDrawingAreaAvailable
-                }
-            >
-                <MovablePoint
-                    pointSize={5}
-                    coord={this.props.coord || [0, 0]}
-                    constraints={[
-                        MovablePoint.constraints.snap(),
-                        MovablePoint.constraints.bound(),
-                    ]}
-                    onMove={this.movePoint}
-                />
-            </Graphie>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    movePoint: (arg1: Coord) => void = (newCoord) => {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({
-            coord: newCoord,
-        });
-    };
-
-    _getGridConfig: (arg1: any) => any = (options) => {
-        return _.map(options.step, function (step, i) {
-            return Util.gridDimensionConfig(
-                step,
-                options.range[i],
-                options.box[i],
-                options.gridStep[i],
-            );
-        });
-    };
-
-    setupGraphie: (arg1: any, arg2: any) => any = (graphie, options) => {
-        const gridConfig = this._getGridConfig(options);
-        graphie.graphInit({
-            range: options.range,
-            scale: _.pluck(gridConfig, "scale"),
-            axisArrows: "<->",
-            labelFormat: function (s) {
-                return "\\small{" + s + "}";
-            },
-            gridStep: options.gridStep,
-            tickStep: _.pluck(gridConfig, "tickStep"),
-            labelStep: 1,
-            unityLabels: _.pluck(gridConfig, "unityLabel"),
-        });
-        graphie.label([0, options.range[1][1]], options.labels[1], "above");
-    };
-
-    simpleValidate: (arg1: any) => any = (rubric) => {
-        return ExampleGraphieWidget.validate(this.getUserInput(), rubric);
-    };
-}
-
-/**
- * For this widget to work, we must export it.
- * We also must import this file in src/all-widgets.js
- */
-export default {
-    name: "example-graphie-widget",
-    displayName: "Example Graphie Widget",
-    hidden: true, // Hides this widget from the Perseus.Editor widget select
-    widget: ExampleGraphieWidget,
-} as WidgetExports<typeof ExampleGraphieWidget>;

package/src/widgets/example-widget-editor.tsx

@@ -1,62 +0,0 @@
-/* eslint-disable react/sort-comp */
-import {Changeable, EditorJsonify} from "@khanacademy/perseus";
-import * as React from "react";
-
-type Props = any;
-
-/**
- * This is the widget's editor. This is what shows up on the left side
- * of the screen in the demo. Only the question writer sees this.
- */
-class ExampleWidgetEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-    };
-
-    static widgetName = "example-widget" as const;
-
-    static defaultProps: Props = {
-        correct: "",
-    };
-
-    input = React.createRef<HTMLInputElement>();
-
-    handleAnswerChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
-        event,
-    ) => {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({
-            correct: event.target.value,
-        });
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <label>
-                    Correct answer:
-                    <input
-                        value={this.props.correct}
-                        onChange={this.handleAnswerChange}
-                        ref={this.input}
-                    />
-                </label>
-            </div>
-        );
-    }
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    focus: () => boolean = () => {
-        this.input.current?.focus();
-        return true;
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-}
-
-export default ExampleWidgetEditor;

package/src/widgets/example-widget.tsx

@@ -1,154 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/sort-comp */
-/**
- * This is a simple number-entry widget
- * It is not as powerful as number-input, but has a simpler, more
- * representative structure as an example widget, and is easier to
- * test new ideas on.
- *
- * TODO(jack): Add more comments
- */
-import {Changeable} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import type {WidgetExports} from "@khanacademy/perseus";
-
-class TextInput extends React.Component<any> {
-    input = React.createRef<HTMLInputElement>();
-
-    render(): React.ReactNode {
-        return (
-            <input
-                ref={this.input}
-                value={this.props.value || ""}
-                onChange={this.changeValue}
-            />
-        );
-    }
-
-    focus = () => {
-        this.input.current?.focus();
-        return true;
-    };
-
-    changeValue = (e: any) => {
-        // Translating from the js event e to the value
-        // of the textbox to send to onChange
-        this.props.onChange(e.target.value);
-    };
-}
-
-/**
- * This is the widget's renderer. It shows up in the right column
- * in the demo, and is what is visible to users, and where
- * users enter their answers.
- */
-class ExampleWidget extends React.Component<any> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        value: PropTypes.string,
-    };
-
-    static defaultProps: any = {
-        value: "",
-    };
-
-    input = React.createRef<TextInput>();
-
-    /**
-     * This is the widget's grading function. simpleValidate generally
-     * defers to this function.
-     *
-     * value is usually the result of getUserInput on the widget
-     * rubric is the result of calling serialize() on the editor
-     */
-    static validate(value: string, rubric: any): any {
-        if (value === "") {
-            return {
-                type: "invalid",
-                message:
-                    "It looks like you haven't answered all of the " +
-                    "question yet.",
-            };
-        }
-        if (value === rubric.correct) {
-            return {
-                type: "points",
-                earned: 1,
-                total: 1,
-                message: null,
-            };
-        }
-        return {
-            type: "points",
-            earned: 0,
-            total: 1,
-            message: null,
-        };
-    }
-
-    /**
-     * Tell our parent to update our props.
-     */
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <TextInput
-                ref={this.input}
-                value={this.props.value}
-                // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                onChange={this.change("value")}
-            />
-        );
-    }
-
-    getUserInput: () => string = () => {
-        return this.props.value;
-    };
-
-    /**
-     * Widgets that are focusable should add a focus method that returns
-     * true if focusing succeeded. The first such widget found will be
-     * focused on page load.
-     */
-    focus: () => boolean = () => {
-        this.input.current?.focus();
-        return true;
-    };
-
-    /**
-     * simpleValidate is called for grading. Rubric is the result of calling
-     * getUserInput() on the editor that created this widget.
-     *
-     * Should return an object representing the grading result, such as
-     * {
-     *     type: "points",
-     *     earned: 1,
-     *     total: 1,
-     *     message: null
-     * }
-     */
-    simpleValidate: (arg1: any) => any = (rubric) => {
-        return ExampleWidget.validate(this.getUserInput(), rubric);
-    };
-}
-
-/**
- * For this widget to work, we must import this file in src/all-widgets.js
- */
-export default {
-    name: "example-widget",
-    displayName: "Example Widget",
-
-    // Tell the renderer what type of `display:` style we would like
-    // for the component wrapping this one.
-    defaultAlignment: "inline-block",
-
-    hidden: true, // Hides this widget from the Perseus.Editor widget select
-    widget: ExampleWidget,
-} as WidgetExports<typeof ExampleWidget>;

package/src/widgets/explanation-editor.tsx

@@ -1,92 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/forbid-prop-types */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import Editor from "../editor";
-
-const {TextInput} = components;
-
-const defaultExplanationProps = {
-    showPrompt: "Explain",
-    hidePrompt: "Hide explanation",
-    explanation: "explanation goes here\n\nmore explanation",
-    widgets: {},
-} as const;
-
-type Props = any;
-type State = any;
-
-class ExplanationEditor extends React.Component<Props, State> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        showPrompt: PropTypes.string,
-        hidePrompt: PropTypes.string,
-        explanation: PropTypes.string,
-        widgets: PropTypes.object,
-        apiOptions: PropTypes.any,
-    };
-
-    static widgetName = "explanation" as const;
-    static defaultProps: Props = defaultExplanationProps;
-    state: State = {};
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-widget-explanation-editor">
-                <div className="perseus-widget-row">
-                    <label>
-                        Prompt to show explanation:{" "}
-                        <TextInput
-                            value={this.props.showPrompt}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("showPrompt")}
-                        />
-                    </label>
-                </div>
-                <div className="perseus-widget-row">
-                    <label>
-                        Prompt to hide explanation:{" "}
-                        <TextInput
-                            value={this.props.hidePrompt}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("hidePrompt")}
-                        />
-                    </label>
-                </div>
-                <div className="perseus-widget-row">
-                    <Editor
-                        apiOptions={this.props.apiOptions}
-                        content={this.props.explanation}
-                        widgets={this.props.widgets}
-                        widgetEnabled={true}
-                        immutableWidgets={false}
-                        onChange={(props) => {
-                            const newProps: Record<string, any> = {};
-                            if (_.has(props, "content")) {
-                                newProps.explanation = props.content;
-                            }
-                            if (_.has(props, "widgets")) {
-                                newProps.widgets = props.widgets;
-                            }
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            this.change(newProps);
-                        }}
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-export default ExplanationEditor;