@khanacademy/perseus 2.1.0 → 4.0.0

package/src/widgets/input-number.tsx

@@ -0,0 +1,413 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/sort-comp */
+import {linterContextDefault} from "@khanacademy/perseus-linter";
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+import _ from "underscore";
+
+import InputWithExamples from "../components/input-with-examples";
+import SimpleKeypadInput from "../components/simple-keypad-input";
+import {ApiOptions} from "../perseus-api";
+import TexWrangler from "../tex-wrangler";
+import KhanAnswerTypes from "../util/answer-types";
+
+import type {PerseusInputNumberWidgetOptions} from "../perseus-types";
+import type {
+    APIOptions,
+    Path,
+    PerseusScore,
+    WidgetExports,
+    WidgetProps,
+} from "../types";
+
+const ParseTex = TexWrangler.parseTex;
+
+const answerTypes = {
+    number: {
+        name: "Numbers",
+        forms: "integer, decimal, proper, improper, mixed",
+    },
+    decimal: {
+        name: "Decimals",
+        forms: "decimal",
+    },
+    integer: {
+        name: "Integers",
+        forms: "integer",
+    },
+    rational: {
+        name: "Fractions and mixed numbers",
+        forms: "integer, proper, improper, mixed",
+    },
+    improper: {
+        name: "Improper numbers (no mixed)",
+        forms: "integer, proper, improper",
+    },
+    mixed: {
+        name: "Mixed numbers (no improper)",
+        forms: "integer, proper, mixed",
+    },
+    percent: {
+        name: "Numbers or percents",
+        forms: "integer, decimal, proper, improper, mixed, percent",
+    },
+    pi: {
+        name: "Numbers with pi",
+        forms: "pi",
+    },
+} as const;
+
+const formExamples = {
+    integer: function (options) {
+        return i18n._("an integer, like $6$");
+    },
+    proper: function (options) {
+        if (options.simplify === "optional") {
+            return i18n._("a *proper* fraction, like $1/2$ or $6/10$");
+        }
+        return i18n._("a *simplified proper* fraction, like $3/5$");
+    },
+    improper: function (options) {
+        if (options.simplify === "optional") {
+            return i18n._("an *improper* fraction, like $10/7$ or $14/8$");
+        }
+        return i18n._("a *simplified improper* fraction, like $7/4$");
+    },
+    mixed: function (options) {
+        return i18n._("a mixed number, like $1\\ 3/4$");
+    },
+    decimal: function (options) {
+        return i18n._("an *exact* decimal, like $0.75$");
+    },
+    percent: function (options) {
+        return i18n._("a percent, like $12.34\\%$");
+    },
+    pi: function (options) {
+        return i18n._(
+            "a multiple of pi, like $12\\ \\text{pi}$ or " +
+                "$2/3\\ \\text{pi}$",
+        );
+    },
+} as const;
+
+type UserInput = {
+    currentValue: string;
+};
+type RenderProps = {
+    simplify: PerseusInputNumberWidgetOptions["simplify"];
+    size: PerseusInputNumberWidgetOptions["size"];
+    answerType: PerseusInputNumberWidgetOptions["answerType"];
+    rightAlign: PerseusInputNumberWidgetOptions["rightAlign"];
+};
+type Rubric = PerseusInputNumberWidgetOptions;
+type ExternalProps = WidgetProps<RenderProps, Rubric>;
+type Props = ExternalProps & {
+    apiOptions: NonNullable<ExternalProps["apiOptions"]>;
+    linterContext: NonNullable<ExternalProps["linterContext"]>;
+    rightAlign: NonNullable<ExternalProps["rightAlign"]>;
+    size: NonNullable<ExternalProps["size"]>;
+    currentValue: string;
+    // NOTE(kevinb): This was the only default prop that is listed as
+    // not-required in PerseusInputNumberWidgetOptions.
+    answerType: NonNullable<Rubric["answerType"]>;
+};
+
+type DefaultProps = {
+    answerType: Props["answerType"];
+    apiOptions: Props["apiOptions"];
+    currentValue: Props["currentValue"];
+    linterContext: Props["linterContext"];
+    rightAlign: Props["rightAlign"];
+    size: Props["size"];
+};
+
+class InputNumber extends React.Component<Props> {
+    static defaultProps: DefaultProps = {
+        currentValue: "",
+        size: "normal",
+        answerType: "number",
+        rightAlign: false,
+        // NOTE(kevinb): renderer.jsx should be provide this so we probably don't
+        // need to include it in defaultProps.
+        apiOptions: ApiOptions.defaults,
+        linterContext: linterContextDefault,
+    };
+
+    shouldShowExamples: () => boolean = () => {
+        return this.props.answerType !== "number";
+    };
+
+    render(): React.ReactNode {
+        if (this.props.apiOptions.customKeypad) {
+            // TODO(charlie): Support "Review Mode".
+            const input = (
+                <SimpleKeypadInput
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="input"
+                    value={this.props.currentValue}
+                    keypadElement={this.props.keypadElement}
+                    onChange={this.handleChange}
+                    onFocus={this._handleFocus}
+                    onBlur={this._handleBlur}
+                />
+            );
+
+            if (this.props.rightAlign) {
+                return <div className="perseus-input-right-align">{input}</div>;
+            }
+
+            return input;
+        }
+        // HACK(johnsullivan): Create a function with shared logic between
+        // this and NumericInput.
+        // TODO(jeremy): Deprecate this widget and prefer numeric-input.
+        const rubric = this.props.reviewModeRubric;
+
+        // Note: This is _very_ similar to what `numeric-input.jsx` does. If
+        // you modify this, double-check if you also need to modify that
+        // component.
+        const inputStyles = [
+            styles.default,
+            this.props.size === "small" ? styles.small : null,
+            this.props.rightAlign ? styles.rightAlign : styles.leftAlign,
+        ];
+        // Unanswered
+        if (rubric && !this.props.currentValue) {
+            inputStyles.push(styles.answerStateUnanswered);
+        }
+
+        return (
+            <InputWithExamples
+                // eslint-disable-next-line react/no-string-refs
+                ref="input"
+                value={this.props.currentValue}
+                onChange={this.handleChange}
+                style={inputStyles}
+                type="text"
+                examples={this.examples()}
+                shouldShowExamples={this.shouldShowExamples()}
+                onFocus={this._handleFocus}
+                onBlur={this._handleBlur}
+                id={this.props.widgetId}
+                disabled={this.props.apiOptions.readOnly}
+                linterContext={this.props.linterContext}
+            />
+        );
+    }
+
+    handleChange: (arg1: string, arg2: () => void) => void = (newValue, cb) => {
+        this.props.onChange({currentValue: newValue}, cb);
+    };
+
+    _handleFocus: () => void = () => {
+        this.props.onFocus([]);
+        // HACK(kevinb): We want to dismiss the feedback popover that webapp
+        // displays as soon as a user clicks in in the input field so we call
+        // interactionCallback directly.
+        const {interactionCallback} = this.props.apiOptions;
+        if (interactionCallback) {
+            interactionCallback();
+        }
+    };
+
+    _handleBlur: () => void = () => {
+        this.props.onBlur([]);
+    };
+
+    focus: () => boolean = () => {
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+        this.refs.input.focus();
+        return true;
+    };
+
+    focusInputPath: (arg1: Path) => void = (inputPath) => {
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'focus' does not exist on type 'ReactInstance'.
+        this.refs.input.focus();
+    };
+
+    blurInputPath: (arg1: Path) => void = (inputPath) => {
+        // eslint-disable-next-line react/no-string-refs
+        // @ts-expect-error [FEI-5003] - TS2339 - Property 'blur' does not exist on type 'ReactInstance'.
+        this.refs.input.blur();
+    };
+
+    getInputPaths: () => ReadonlyArray<Path> = () => {
+        // The widget itself is an input, so we return a single empty list to
+        // indicate this.
+        /* c8 ignore next */
+        return [[]];
+    };
+
+    // Note: We believe that this isn't used anywhere but are leaving it during
+    // the initial refactor
+    getGrammarTypeForPath: (arg1: Path) => string = (path) => {
+        /* c8 ignore next */
+        return "number";
+    };
+
+    setInputValue: (arg1: Path, arg2: string, arg3: () => void) => void = (
+        path,
+        newValue,
+        cb,
+    ) => {
+        this.props.onChange(
+            {
+                currentValue: newValue,
+            },
+            cb,
+        );
+    };
+
+    getUserInput: () => UserInput = () => {
+        return InputNumber.getUserInputFromProps(this.props);
+    };
+
+    simpleValidate: (
+        rubric: Rubric,
+        onInputError?: APIOptions["onInputError"],
+    ) => PerseusScore = (rubric, onInputError) => {
+        onInputError = onInputError || function () {};
+        return InputNumber.validate(this.getUserInput(), rubric, onInputError);
+    };
+
+    examples: () => ReadonlyArray<string> = () => {
+        const type = this.props.answerType;
+        const forms = answerTypes[type].forms.split(/\s*,\s*/);
+
+        const examples = _.map(
+            forms,
+            function (form) {
+                // eslint-disable-next-line @babel/no-invalid-this
+                // @ts-expect-error [FEI-5003] - TS2683 - 'this' implicitly has type 'any' because it does not have a type annotation.
+                // eslint-disable-next-line @babel/no-invalid-this
+                return formExamples[form](this.props);
+            },
+            this,
+        );
+
+        return [i18n._("**Your answer should be** ")].concat(examples);
+    };
+
+    static validate(
+        state: {
+            currentValue: string;
+        },
+        rubric: Rubric,
+        onInputError: APIOptions["onInputError"] = () => {},
+    ): PerseusScore {
+        if (rubric.answerType == null) {
+            rubric.answerType = "number";
+        }
+
+        // note(matthewc): this will get immediately parsed again by
+        // `KhanAnswerTypes.number.convertToPredicate`, but a string is
+        // expected here
+        const stringValue = `${rubric.value}`;
+        const val = KhanAnswerTypes.number.createValidatorFunctional(
+            stringValue,
+            {
+                simplify: rubric.simplify,
+                inexact: rubric.inexact || undefined,
+                maxError: rubric.maxError,
+                forms: answerTypes[rubric.answerType].forms,
+            },
+        );
+
+        // We may have received TeX; try to parse it before grading.
+        // If `currentValue` is not TeX, this should be a no-op.
+        const currentValue = ParseTex(state.currentValue);
+
+        const result = val(currentValue);
+
+        // TODO(eater): Seems silly to translate result to this invalid/points
+        // thing and immediately translate it back in ItemRenderer.scoreInput()
+        if (result.empty) {
+            // TODO(FEI-3867): remove null-check once we have APIOptionsInternal
+            const apiResult = onInputError?.(
+                null, // reserved for some widget identifier
+                state.currentValue,
+                result.message,
+            );
+            return {
+                type: "invalid",
+                message: apiResult === false ? null : result.message,
+            };
+        }
+        return {
+            type: "points",
+            earned: result.correct ? 1 : 0,
+            total: 1,
+            message: result.message,
+        };
+    }
+
+    static getUserInputFromProps(props: Props): {
+        currentValue: string;
+    } {
+        return {
+            currentValue: props.currentValue,
+        };
+    }
+
+    static getOneCorrectAnswerFromRubric(
+        rubric: any,
+    ): string | null | undefined {
+        if (rubric.value == null) {
+            return;
+        }
+        let answerString = String(rubric.value);
+        if (rubric.inexact && rubric.maxError) {
+            answerString += " \u00B1 " + rubric.maxError;
+        }
+        return answerString;
+    }
+}
+
+const styles = StyleSheet.create({
+    default: {
+        width: 80,
+        height: "auto",
+    },
+    small: {
+        width: 40,
+    },
+    leftAlign: {
+        paddingLeft: Spacing.xxxSmall_4,
+        paddingRight: 0,
+    },
+    rightAlign: {
+        textAlign: "right",
+        paddingLeft: 0,
+        paddingRight: Spacing.xxxSmall_4,
+    },
+    answerStateUnanswered: {
+        backgroundColor: "#eee",
+        border: "solid 1px #999",
+    },
+});
+
+const propTransform = (
+    widgetOptions: PerseusInputNumberWidgetOptions,
+): RenderProps => {
+    const {simplify, size, answerType, rightAlign} = widgetOptions;
+    return {
+        simplify,
+        size,
+        answerType,
+        rightAlign,
+    };
+};
+
+export default {
+    name: "input-number",
+    displayName: "Number text box (old)",
+    defaultAlignment: "inline-block",
+    hidden: true,
+    widget: InputNumber,
+    transform: propTransform,
+    isLintable: true,
+} as WidgetExports<typeof InputNumber>;

package/src/widgets/interaction/arrow-picker.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import ButtonGroup from "../../components/button-group";
+
+import type {ChangeableProps} from "../../mixins/changeable";
+
+type Props = {
+    value?: string;
+} & ChangeableProps;
+
+class ArrowPicker extends React.Component<Props> {
+    static defaultProps: {
+        value: string;
+    } = {
+        value: "",
+    };
+
+    render(): React.ReactNode {
+        return (
+            <ButtonGroup
+                value={this.props.value}
+                allowEmpty={false}
+                buttons={[
+                    {value: "", content: <span>&mdash;</span>},
+                    {value: "->", content: <span>&#x2192;</span>},
+                    /*
+                TODO(eater): fix khan-exercises so these are supported
+                {value: "<-", content: <span>&#x2190;</span>},
+                {value: "<->", content: <span>&#x2194;</span>}
+                */
+                ]}
+                onChange={this.props.onChange}
+            />
+        );
+    }
+}
+
+export default ArrowPicker;

package/src/widgets/interaction/color-picker.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import _ from "underscore";
+
+import ButtonGroup from "../../components/button-group";
+import KhanColors from "../../util/colors";
+
+import type {ChangeableProps} from "../../mixins/changeable";
+
+const COLORS = [
+    KhanColors.BLACK,
+    KhanColors.BLUE,
+    KhanColors.GREEN,
+    KhanColors.PINK,
+    KhanColors.PURPLE,
+    KhanColors.RED,
+    KhanColors.GRAY,
+];
+
+const LIGHT_COLORS = [
+    KhanColors.LIGHT_BLUE,
+    KhanColors.LIGHT_ORANGE,
+    KhanColors.LIGHT_PINK,
+    KhanColors.LIGHT_GREEN,
+    KhanColors.LIGHT_PURPLE,
+    KhanColors.LIGHT_RED,
+    "#fff",
+];
+
+type Props = {
+    lightColors?: boolean;
+    value?: string;
+} & ChangeableProps;
+
+class ColorPicker extends React.Component<Props> {
+    static defaultProps: {
+        lightColors: boolean;
+        value: any;
+    } = {
+        value: KhanColors.BLACK,
+        lightColors: false,
+    };
+
+    render(): React.ReactNode {
+        const colors = this.props.lightColors ? LIGHT_COLORS : COLORS;
+        return (
+            <ButtonGroup
+                value={this.props.value}
+                allowEmpty={false}
+                buttons={_.map(colors, (color) => {
+                    return {
+                        value: color,
+                        content: (
+                            <span>
+                                <span
+                                    className="colorpicker-circle"
+                                    style={{background: color}}
+                                />
+                                &nbsp;
+                            </span>
+                        ),
+                    };
+                })}
+                onChange={this.props.onChange}
+            />
+        );
+    }
+}
+
+export default ColorPicker;

package/src/widgets/interaction/dash-picker.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+
+import ButtonGroup from "../../components/button-group";
+
+import type {ChangeableProps} from "../../mixins/changeable";
+
+type Props = {
+    value?: string;
+} & ChangeableProps;
+
+class DashPicker extends React.Component<Props> {
+    static defaultProps: {
+        value: string;
+    } = {
+        value: "",
+    };
+
+    render(): React.ReactNode {
+        return (
+            <ButtonGroup
+                value={this.props.value}
+                allowEmpty={false}
+                buttons={[
+                    {value: "", content: <span>&mdash;</span>},
+                    {value: "-", content: <span>&ndash;&ndash;&ndash;</span>},
+                    {
+                        value: "- ",
+                        content: <span>&ndash;&nbsp;&nbsp;&ndash;</span>,
+                    },
+                    {
+                        value: ".",
+                        content: <span>&middot;&middot;&middot;&middot;</span>,
+                    },
+                    {
+                        value: ". ",
+                        content: <span>&middot; &middot; &middot;</span>,
+                    },
+                ]}
+                onChange={this.props.onChange}
+            />
+        );
+    }
+}
+
+export default DashPicker;

package/src/widgets/interaction/element-container.tsx

@@ -0,0 +1,101 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import * as React from "react";
+
+import InlineIcon from "../../components/inline-icon";
+import {
+    iconChevronDown,
+    iconChevronRight,
+    iconCircleArrowDown,
+    iconCircleArrowUp,
+    iconTrash,
+} from "../../icon-paths";
+
+type ElementContainerProps = {
+    children: React.ReactElement<any> | ReadonlyArray<React.ReactElement<any>>;
+    initiallyVisible: boolean;
+    onDelete?: () => void | null | undefined;
+    onDown?: () => void | null | undefined;
+    onUp?: () => void | null | undefined;
+    title: string | React.ReactElement<any>;
+};
+
+class ElementContainer extends React.Component<
+    ElementContainerProps,
+    {
+        show: boolean;
+    }
+> {
+    static defaultProps: {
+        initiallyVisible: boolean;
+        title: string;
+    } = {
+        initiallyVisible: false,
+        title: "More",
+    };
+
+    constructor(props: ElementContainerProps) {
+        super(props);
+
+        this.state = {
+            show: props.initiallyVisible,
+        };
+    }
+
+    toggle: (e: React.SyntheticEvent) => void = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        this.setState({show: !this.state.show});
+    };
+
+    render(): React.ReactNode {
+        return (
+            <div className="perseus-interaction-element">
+                <a
+                    href="#"
+                    className={
+                        "perseus-interaction-element-title " +
+                        (this.state.show ? "open" : "closed")
+                    }
+                    onClick={this.toggle}
+                >
+                    {this.state.show ? (
+                        <InlineIcon {...iconChevronDown} />
+                    ) : (
+                        <InlineIcon {...iconChevronRight} />
+                    )}
+                    {this.props.title}
+                </a>
+                <div
+                    className={
+                        "perseus-interaction-element-content " +
+                        (this.state.show ? "enter" : "leave")
+                    }
+                >
+                    {this.props.children}
+                    {(this.props.onUp != null ||
+                        this.props.onDown != null ||
+                        this.props.onDelete != null) && (
+                        <div className="edit-controls">
+                            {this.props.onUp != null && (
+                                <button onClick={this.props.onUp}>
+                                    <InlineIcon {...iconCircleArrowUp} />
+                                </button>
+                            )}
+                            {this.props.onDown != null && (
+                                <button onClick={this.props.onDown}>
+                                    <InlineIcon {...iconCircleArrowDown} />
+                                </button>
+                            )}
+                            {this.props.onDelete != null && (
+                                <button onClick={this.props.onDelete}>
+                                    <InlineIcon {...iconTrash} />
+                                </button>
+                            )}
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default ElementContainer;