@khanacademy/perseus 1.0.0 → 1.1.1

package/src/widgets/numeric-input.jsx

@@ -3,7 +3,7 @@
 
 import {linterContextDefault} from "@khanacademy/perseus-linter";
 import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import classNames from "classnames";
+import {StyleSheet} from "aphrodite";
 import * as React from "react";
 import _ from "underscore";
 
@@ -16,10 +16,17 @@ import KhanAnswerTypes from "../util/answer-types.js";
 import KhanMath from "../util/math.js";
 
 import type {
-    PerseusNumericInputWidgetOptions,
+    MathFormat,
     PerseusNumericInputAnswer,
-} from "../perseus-types.js";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types.js";
+    PerseusNumericInputWidgetOptions,
+    PerseusNumericInputAnswerForm,
+} from "../perseus-types";
+import type {
+    FocusPath,
+    PerseusScore,
+    WidgetExports,
+    WidgetProps,
+} from "../types";
 
 const ParseTex = TexWrangler.parseTex;
 
@@ -36,7 +43,7 @@ const answerFormButtons = [
     {title: "Numbers with \u03C0", value: "pi", content: "\u03C0"},
 ];
 
-const formExamples = {
+const formExamples: {[string]: (PerseusNumericInputAnswerForm) => string} = {
     integer: () => i18n._("an integer, like $6$"),
     proper: (form) =>
         form.simplify === "optional"
@@ -95,6 +102,8 @@ type State = {|
 |};
 
 export class NumericInput extends React.Component<Props, State> {
+    inputRef: ?(SimpleKeypadInput | InputWithExamples);
+
     static defaultProps: DefaultProps = {
         currentValue: "",
         size: "normal",
@@ -113,14 +122,11 @@ export class NumericInput extends React.Component<Props, State> {
         };
     }
 
-    static getOneCorrectAnswerFromRubric(
-        rubric: Rubric,
-    ): ?PerseusNumericInputAnswer {
-        const correctAnswers = _.filter(
-            rubric.answers,
+    static getOneCorrectAnswerFromRubric(rubric: Rubric): ?string {
+        const correctAnswers = rubric.answers.filter(
             (answer) => answer.status === "correct",
         );
-        const answerStrings = _.map(correctAnswers, (answer) => {
+        const answerStrings = correctAnswers.map((answer) => {
             // Figure out how this answer is supposed to be
             // displayed
             let format = "decimal";
@@ -147,27 +153,36 @@ export class NumericInput extends React.Component<Props, State> {
     }
 
     static validate(useInput: UserInput, rubric: Rubric): PerseusScore {
-        const allAnswerForms = _.pluck(answerFormButtons, "value");
-
-        const createValidator = (answer) =>
-            KhanAnswerTypes.number.createValidatorFunctional(answer.value, {
-                message: answer.message,
-                simplify:
-                    answer.status === "correct" ? answer.simplify : "optional",
-                inexact: true, // TODO(merlob) backfill / delete
-                maxError: answer.maxError,
-                forms:
-                    answer.strict &&
-                    answer.answerForms &&
-                    answer.answerForms.length !== 0
-                        ? answer.answerForms
-                        : allAnswerForms,
-            });
+        const allAnswerForms = answerFormButtons.map((e) => e["value"]);
+
+        const createValidator = (answer: PerseusNumericInputAnswer) => {
+            const stringAnswer = `${answer.value}`;
+            return KhanAnswerTypes.number.createValidatorFunctional(
+                stringAnswer,
+                {
+                    message: answer.message,
+                    simplify:
+                        answer.status === "correct"
+                            ? answer.simplify
+                            : "optional",
+                    inexact: true, // TODO(merlob) backfill / delete
+                    maxError: answer.maxError,
+                    forms:
+                        answer.strict &&
+                        answer.answerForms &&
+                        answer.answerForms.length !== 0
+                            ? answer.answerForms
+                            : allAnswerForms,
+                },
+            );
+        };
 
         // 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(useInput.currentValue);
-        const correctAnswers = _.where(rubric.answers, {status: "correct"});
+        const correctAnswers = rubric.answers.filter(
+            (answer) => answer.status === "correct",
+        );
 
         const normalizedAnswerExpected = correctAnswers.every(
             (answer) => Math.abs(answer.value) <= 1,
@@ -177,8 +192,8 @@ export class NumericInput extends React.Component<Props, State> {
         // precisely or approximately and return the appropriate message:
         // - if precise, return the message that the answer came with
         // - if it needs to be simplified, etc., show that message
-        let result = _.find(
-            _.map(correctAnswers, (answer) => {
+        let result = correctAnswers
+            .map((answer) => {
                 // The coefficient is an attribute of the widget
                 let localValue = currentValue;
                 if (rubric.coefficient) {
@@ -195,20 +210,19 @@ export class NumericInput extends React.Component<Props, State> {
                         normalizedAnswerExpected,
                     ),
                 );
-            }),
-            (match) => match.correct || match.empty,
-        );
+            })
+            .find((match) => match.correct || match.empty);
 
         if (!result) {
             // Otherwise, if the guess is not correct
             const otherAnswers = [].concat(
-                _.where(rubric.answers, {status: "ungraded"}),
-                _.where(rubric.answers, {status: "wrong"}),
+                rubric.answers.filter((answer) => answer.status === "ungraded"),
+                rubric.answers.filter((answer) => answer.status === "wrong"),
             );
 
             // Look through all other answers and if one matches either
             // precisely or approximately return the answer's message
-            const match = _.find(otherAnswers, (answer) => {
+            const match = otherAnswers.find((answer) => {
                 const validate = createValidator(answer);
                 return validate(
                     maybeParsePercentInput(
@@ -259,14 +273,13 @@ export class NumericInput extends React.Component<Props, State> {
             correct = score.type === "points" && score.earned === score.total;
 
             if (!correct) {
-                const correctAnswers = _.filter(
-                    rubric.answers,
+                const correctAnswers = rubric.answers.filter(
                     (answer) => answer.status === "correct",
                 );
-                const answerStrings = _.map(correctAnswers, (answer) => {
+                const answerStrings = correctAnswers.map((answer) => {
                     // Figure out how this answer is supposed to be
                     // displayed
-                    let format = "decimal";
+                    let format: MathFormat = "decimal";
                     if (answer.answerForms && answer.answerForms[0]) {
                         // NOTE(johnsullivan): This isn't exactly ideal, but
                         // it does behave well for all the currently known
@@ -298,7 +311,7 @@ export class NumericInput extends React.Component<Props, State> {
         const forms =
             this.props.answerForms?.length !== 0
                 ? this.props.answerForms
-                : _.map(_.keys(formExamples), (name) => {
+                : Object.keys(formExamples).map((name) => {
                       return {
                           name: name,
                           simplify: "required",
@@ -320,10 +333,11 @@ export class NumericInput extends React.Component<Props, State> {
         // To check if all answer forms are accepted, we must first
         // find the *names* of all accepted forms, and see if they are
         // all present, ignoring duplicates
-        const answerFormNames = _.uniq(
+        const answerFormNames: $ReadOnlyArray<string> = _.uniq(
             this.props.answerForms?.map((form) => form.name),
         );
-        const allFormsAccepted = answerFormNames.length >= _.size(formExamples);
+        const allFormsAccepted =
+            answerFormNames.length >= Object.keys(formExamples).length;
         return !noFormsAccepted && !allFormsAccepted;
     };
 
@@ -332,20 +346,16 @@ export class NumericInput extends React.Component<Props, State> {
     };
 
     focus: () => boolean = () => {
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.input.focus();
+        this.inputRef?.focus();
         return true;
     };
 
-    focusInputPath: ($FlowFixMe) => void = (inputPath) => {
-        /* istanbul ignore next */
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.input.focus();
+    focusInputPath: () => void = () => {
+        this.inputRef?.focus();
     };
 
-    blurInputPath: ($FlowFixMe) => void = (inputPath) => {
-        // eslint-disable-next-line react/no-string-refs
-        this.refs.input.blur();
+    blurInputPath: () => void = () => {
+        this.inputRef?.blur();
     };
 
     getInputPaths: () => $ReadOnlyArray<$ReadOnlyArray<string>> = () => {
@@ -355,12 +365,12 @@ export class NumericInput extends React.Component<Props, State> {
         return [[]];
     };
 
-    getGrammarTypeForPath: ($FlowFixMe) => string = (inputPath) => {
+    getGrammarTypeForPath: (FocusPath) => string = (inputPath) => {
         /* istanbul ignore next */
         return "number";
     };
 
-    setInputValue: ($FlowFixMe, $FlowFixMe, $FlowFixMe) => void = (
+    setInputValue: (FocusPath, string, ?() => mixed) => void = (
         path,
         newValue,
         cb,
@@ -378,7 +388,7 @@ export class NumericInput extends React.Component<Props, State> {
         return NumericInput.getUserInputFromProps(this.props);
     };
 
-    handleChange: (string, $FlowFixMe) => void = (newValue, cb) => {
+    handleChange: (string, ?() => mixed) => void = (newValue, cb) => {
         this.props.onChange({currentValue: newValue}, cb);
         this.props.trackInteraction();
     };
@@ -409,7 +419,6 @@ export class NumericInput extends React.Component<Props, State> {
         const rubric = this.props.reviewModeRubric;
         const answers = this.getAnswerBlurb(rubric);
         const answerBlurb = answers[0];
-        const classes = [];
 
         let labelText = this.props.labelText;
         if (labelText == null || labelText === "") {
@@ -429,8 +438,7 @@ export class NumericInput extends React.Component<Props, State> {
             // TODO(charlie): Support "Review Mode".
             return maybeRightAlignKeypadInput(
                 <SimpleKeypadInput
-                    // eslint-disable-next-line react/no-string-refs
-                    ref="input"
+                    ref={(ref) => (this.inputRef = ref)}
                     value={this.props.currentValue}
                     keypadElement={this.props.keypadElement}
                     onChange={this.handleChange}
@@ -440,13 +448,20 @@ export class NumericInput extends React.Component<Props, State> {
             );
         }
 
+        const styles = StyleSheet.create({
+            input: {
+                textAlign: this.props.rightAlign ? "right" : "left",
+                width: this.props.size === "small" ? 40 : 80,
+                padding: 0,
+                height: "auto",
+            },
+        });
+
         const input = (
             <InputWithExamples
-                // eslint-disable-next-line react/no-string-refs
-                ref="input"
+                ref={(ref) => (this.inputRef = ref)}
                 value={this.props.currentValue}
                 onChange={this.handleChange}
-                className={classNames(classes)}
                 labelText={labelText}
                 type={this._getInputType()}
                 examples={this.examples()}
@@ -455,8 +470,7 @@ export class NumericInput extends React.Component<Props, State> {
                 onBlur={this._handleBlur}
                 id={this.props.widgetId}
                 disabled={this.props.apiOptions.readOnly}
-                // $FlowFixMe[prop-missing]
-                highlightLint={this.props.highlightLint}
+                style={styles.input}
             />
         );
 
@@ -493,7 +507,9 @@ export class NumericInput extends React.Component<Props, State> {
 // a given *problem* rather than for each possible [correct/wrong] *answer*.
 // When should two answers to a problem take different answer types?
 // See D27790 for more discussion.
-export const unionAnswerForms: ($FlowFixMe) => $FlowFixMe = function (
+export const unionAnswerForms: (
+    $ReadOnlyArray<$ReadOnlyArray<PerseusNumericInputAnswerForm>>,
+) => $ReadOnlyArray<PerseusNumericInputAnswerForm> = function (
     answerFormsList,
 ) {
     // Takes a list of lists of answer forms, and returns a list of the forms
@@ -504,28 +520,25 @@ export const unionAnswerForms: ($FlowFixMe) => $FlowFixMe = function (
     // two elements are equal, and returns a list of unique elements. This is
     // just a helper function here, but works generally.
     const uniqueBy = function (list, iteratee) {
-        return _.reduce(
-            list,
-            (uniqueList, element) => {
-                // For each element, decide whether it's already in the list of
-                // unique items.
-                const inList = _.find(uniqueList, iteratee.bind(null, element));
-                if (inList) {
-                    return uniqueList;
-                }
-                return uniqueList.concat([element]);
-            },
-            [],
-        );
+        return list.reduce((uniqueList, element) => {
+            // For each element, decide whether it's already in the list of
+            // unique items.
+            const inList = _.find(uniqueList, iteratee.bind(null, element));
+            if (inList) {
+                return uniqueList;
+            }
+            return uniqueList.concat([element]);
+        }, []);
     };
 
     // Pull out all of the forms from the different lists.
-    const allForms = _.flatten(answerFormsList);
+    const allForms = answerFormsList.flat();
     // Pull out the unique forms using uniqueBy.
     const uniqueForms = uniqueBy(allForms, _.isEqual);
     // Sort them by the order they appear in the `formExamples` list.
+    const formExampleKeys = Object.keys(formExamples);
     return _.sortBy(uniqueForms, (form) => {
-        return _.keys(formExamples).indexOf(form.name);
+        return formExampleKeys.indexOf(form.name);
     });
 };
 
@@ -535,7 +548,7 @@ type RenderProps = {|
         name: "integer" | "decimal" | "proper" | "improper" | "mixed" | "pi",
     |}>,
     labelText: string,
-    size: string,
+    size: "normal" | "small",
     coefficient: boolean,
     rightAlign?: boolean,
     static: boolean,
@@ -547,10 +560,10 @@ type RenderProps = {|
 // can accept several input forms with or without "%", the decision
 // to parse based on the presence of "%" in the input, is so that we
 // don't accidently scale the user typed value before grading, CP-930.
-export const maybeParsePercentInput: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (
-    inputValue,
-    normalizedAnswerExpected,
-) => {
+export function maybeParsePercentInput(
+    inputValue: string | number,
+    normalizedAnswerExpected: boolean,
+): string | number {
     // If the input value is not a string ending with "%", then there's
     // nothing more to do. The value will be graded as inputted by user.
     if (!(typeof inputValue === "string" && inputValue.endsWith("%"))) {
@@ -575,7 +588,7 @@ export const maybeParsePercentInput: ($FlowFixMe, $FlowFixMe) => $FlowFixMe = (
 
     // Otherwise, we return input valuåe (number) stripped of the "%".
     return value;
-};
+}
 
 const propsTransform = function (
     widgetOptions: PerseusNumericInputWidgetOptions,
@@ -584,7 +597,7 @@ const propsTransform = function (
         answerForms: unionAnswerForms(
             // Pull out the name of each form and whether that form has
             // required simplification.
-            _.map(widgetOptions.answers, (answer) => {
+            widgetOptions.answers.map((answer) => {
                 return _.map(answer.answerForms, (form) => {
                     return {
                         simplify: answer.simplify,

package/src/widgets/radio/base-radio.jsx

@@ -249,7 +249,9 @@ function BaseRadio(props: Props): React.Node {
         >
             <legend className="perseus-sr-only">{instructions}</legend>
             {shouldShowInstructions && (
-                <div className={instructionsClassName}>{instructions}</div>
+                <div className={instructionsClassName} aria-hidden="true">
+                    {instructions}
+                </div>
             )}
             <ul className={className} style={{listStyle: "none"}}>
                 {choices.map(function (choice, i) {

package/src/widgets/radio/choice-a11y-text.js

@@ -0,0 +1,62 @@
+// @flow
+import * as i18n from "@khanacademy/wonder-blocks-i18n";
+
+function getA11yText(
+    letter: string,
+    checked: boolean,
+    correct: boolean,
+    crossedOut: boolean,
+    showCorrectness: boolean,
+): string {
+    // There are two pieces of metadata we want to add to each a11yText:
+    // whether the answer was checked/crossed-out/neither, and whether the
+    // answer is correct/incorrect/not-yet-revealed.
+    //
+    // Translation is tricky for cross-product situations like this, so
+    // we've just enumerated all 9 possibilities as separate strings.
+    if (showCorrectness && correct) {
+        if (checked) {
+            return i18n._("(Choice %(letter)s, Checked, Correct)", {
+                letter,
+            });
+        }
+        if (crossedOut) {
+            return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
+                letter,
+            });
+        }
+        return i18n._("(Choice %(letter)s, Correct)", {
+            letter,
+        });
+    }
+    if (showCorrectness && !correct) {
+        if (checked) {
+            return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
+                letter,
+            });
+        }
+        if (crossedOut) {
+            return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
+                letter,
+            });
+        }
+        return i18n._("(Choice %(letter)s, Incorrect)", {
+            letter,
+        });
+    }
+    if (checked) {
+        return i18n._("(Choice %(letter)s, Checked)", {
+            letter,
+        });
+    }
+    if (crossedOut) {
+        return i18n._("(Choice %(letter)s, Crossed out)", {
+            letter,
+        });
+    }
+    return i18n._("(Choice %(letter)s)", {
+        letter,
+    });
+}
+
+export default getA11yText;

package/src/widgets/radio/choice-icon/choice-icon.jsx

@@ -2,7 +2,6 @@
 /* Component for rendering a letter icon in radio choice */
 
 import Color from "@khanacademy/wonder-blocks-color";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
 import * as React from "react";
 
 import {getChoiceLetter} from "../util.js";
@@ -34,64 +33,6 @@ type ChoiceIconProps = {|
     primaryProductColor?: string,
 |};
 
-function getA11yText(
-    letter: string,
-    checked: boolean,
-    correct: boolean,
-    crossedOut: boolean,
-    showCorrectness: boolean,
-): string {
-    // There are two pieces of metadata we want to add to each a11yText:
-    // whether the answer was checked/crossed-out/neither, and whether the
-    // answer is correct/incorrect/not-yet-revealed.
-    //
-    // Translation is tricky for cross-product situations like this, so
-    // we've just enumerated all 9 possibilities as separate strings.
-    if (showCorrectness && correct) {
-        if (checked) {
-            return i18n._("(Choice %(letter)s, Checked, Correct)", {
-                letter,
-            });
-        }
-        if (crossedOut) {
-            return i18n._("(Choice %(letter)s, Crossed out, Correct)", {
-                letter,
-            });
-        }
-        return i18n._("(Choice %(letter)s, Correct)", {
-            letter,
-        });
-    }
-    if (showCorrectness && !correct) {
-        if (checked) {
-            return i18n._("(Choice %(letter)s, Checked, Incorrect)", {
-                letter,
-            });
-        }
-        if (crossedOut) {
-            return i18n._("(Choice %(letter)s, Crossed out, Incorrect)", {
-                letter,
-            });
-        }
-        return i18n._("(Choice %(letter)s, Incorrect)", {
-            letter,
-        });
-    }
-    if (checked) {
-        return i18n._("(Choice %(letter)s, Checked)", {
-            letter,
-        });
-    }
-    if (crossedOut) {
-        return i18n._("(Choice %(letter)s, Crossed out)", {
-            letter,
-        });
-    }
-    return i18n._("(Choice %(letter)s)", {
-        letter,
-    });
-}
-
 function ChoiceIcon(props: ChoiceIconProps): React.Node {
     const {
         pos,
@@ -111,19 +52,11 @@ function ChoiceIcon(props: ChoiceIconProps): React.Node {
     } = props;
 
     const letter = getChoiceLetter(pos);
-    const a11yText = getA11yText(
-        letter,
-        checked,
-        correct,
-        crossedOut,
-        showCorrectness,
-    );
 
     if (product === "sat") {
         return (
             <SATChoiceIcon
                 letter={letter}
-                a11yText={a11yText}
                 reviewMode={reviewMode}
                 checked={checked}
                 correct={correct}
@@ -135,7 +68,6 @@ function ChoiceIcon(props: ChoiceIconProps): React.Node {
     return (
         <LibraryChoiceIcon
             letter={letter}
-            a11yText={a11yText}
             reviewMode={reviewMode}
             checked={checked}
             crossedOut={crossedOut}

package/src/widgets/radio/choice-icon/library-choice-icon.jsx

@@ -15,7 +15,6 @@ import sharedStyles, {LIBRARY_ICON_SIZE} from "./shared-styles.js";
 
 type LibraryChoiceIconProps = {
     letter: string,
-    a11yText: string,
     checked: boolean,
     crossedOut: boolean,
     focused: boolean,
@@ -107,7 +106,6 @@ function getDynamicStyles(
 
 function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
     const {
-        a11yText,
         checked,
         crossedOut,
         showCorrectness,
@@ -155,14 +153,11 @@ function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
                     // radio icon
                     data-is-radio-icon={true}
                 >
-                    <div className="perseus-sr-only">{a11yText}</div>
-                    <div aria-hidden>
-                        <ChoiceInner
-                            letter={letter}
-                            showCorrectness={showCorrectness}
-                            correct={correct}
-                        />
-                    </div>
+                    <ChoiceInner
+                        letter={letter}
+                        showCorrectness={showCorrectness}
+                        correct={correct}
+                    />
                 </div>
             </FocusRing>
             {crossedOut && <CrossOutLine color={dynamicStyles.borderColor} />}

package/src/widgets/radio/choice-icon/sat-choice-icon.jsx

@@ -11,7 +11,6 @@ import sharedStyles, {SAT_ICON_SIZE} from "./shared-styles.js";
 
 type SATChoiceIconProps = {
     letter: string,
-    a11yText: string,
     checked: boolean,
     multipleSelect: boolean,
     correct: boolean,
@@ -66,15 +65,8 @@ function constructSATStyles(
 }
 
 function SATChoiceIcon(props: SATChoiceIconProps): React.Node {
-    const {
-        letter,
-        a11yText,
-        crossedOut,
-        reviewMode,
-        correct,
-        checked,
-        multipleSelect,
-    } = props;
+    const {letter, crossedOut, reviewMode, correct, checked, multipleSelect} =
+        props;
 
     const {color, backgroundColor, borderColor, borderRadius} =
         constructSATStyles(reviewMode, correct, checked, multipleSelect);
@@ -87,8 +79,7 @@ function SATChoiceIcon(props: SATChoiceIconProps): React.Node {
                 style={{backgroundColor, borderColor, borderRadius}}
             />
             <div style={{color}} className={css(styles.letter)}>
-                <span className="perseus-sr-only">{a11yText}</span>
-                <span aria-hidden="true">{letter}</span>
+                <span>{letter}</span>
             </div>
             {crossedOut && <CrossOutLine color={borderColor} sat={true} />}
         </div>