@khanacademy/perseus 4.0.1 → 4.0.2

package/src/perseus-types.ts

@@ -1423,7 +1423,7 @@ export type PerseusInputNumberWidgetOptions = {
     customKeypad?: boolean;
 };
 
-// TODO(FEI-3983): Create proper flow types for these.
+// TODO(FEI-3983): Create proper types for these.
 export type PerseusExampleGraphieWidgetOptions = any;
 export type PerseusExampleWidgetOptions = any;
 export type PerseusLightsPuzzleWidgetOptions = any;

package/src/renderer.tsx

@@ -150,7 +150,7 @@ type Props = {
     findExternalWidgets: any;
     highlightedWidgets?: ReadonlyArray<any>;
     images: PerseusRenderer["images"];
-    keypadElement?: any; // TODO(kevinb): add proper flow types,
+    keypadElement?: any; // TODO(kevinb): add proper types,
     onInteractWithWidget: (id: string) => void;
     onRender: (node?: any) => void;
     problemNum?: number;
@@ -593,11 +593,9 @@ class Renderer extends React.Component<Props, State> {
             interactionTracker = this._interactionTrackers[id] =
                 new InteractionTracker(
                     apiOptions.trackInteraction,
-                    // $FlowFixMe[incompatible-call]
                     // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
                     widgetInfo && widgetInfo.type,
                     id,
-                    // $FlowFixMe[incompatible-call]
                     // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'string | null | undefined' is not assignable to parameter of type 'string'.
                     Widgets.getTracking(widgetInfo && widgetInfo.type),
                 );
@@ -1086,7 +1084,7 @@ class Renderer extends React.Component<Props, State> {
                 const isString = typeof nodeOut === "string";
                 if (typeof nodeOut === "string" && lastWasString) {
                     /**
-                     * We know that last was string, but Flow can't see this
+                     * We know that last was string, but TypeScript can't see this
                      * refinement.
                      */
                     result[result.length - 1] += nodeOut;
@@ -1308,7 +1306,6 @@ class Renderer extends React.Component<Props, State> {
                         {({setAssetStatus}) => (
                             <SvgImage
                                 setAssetStatus={setAssetStatus}
-                                /* $FlowFixMe[incompatible-type]: sanitizeUrl() can return null */
                                 // @ts-expect-error [FEI-5003] - TS2322 - Type 'string | null | undefined' is not assignable to type 'string | undefined'.
                                 src={PerseusMarkdown.sanitizeUrl(node.target)}
                                 alt={node.alt}

package/src/server-item-renderer.tsx

@@ -171,12 +171,9 @@ export class ServerItemRenderer
             onFocusChange(
                 this._currentFocus,
                 prevFocus,
-                // $FlowFixMe[incompatible-call]: onFocusChange expects an HTMLElement or nothing
                 didFocusInput && keypadElement && keypadElement.getDOMNode(),
-                // $FlowFixMe[incompatible-call]: onFocusChange expects an HTMLElement or nothing
                 // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'false | Element | Text | null | undefined' is not assignable to parameter of type 'HTMLElement | undefined'.
                 didFocusInput &&
-                    // $FlowFixMe[incompatible-call]: onFocusChange expects an HTMLElement or nothing
                     this.questionRenderer.getDOMNodeForPath(newFocus),
             );
         }

package/src/util/interactive.ts

@@ -3510,7 +3510,6 @@ function Protractor(graph: any, center: any) {
         }
         const time = Math.abs(this.rotation - angle) * 5;
         $({0: this.rotation}).animate(
-            // $FlowFixMe[unsupported-syntax]
             {0: angle},
             {
                 duration: time,
@@ -3578,11 +3577,8 @@ function Ruler(graphie: any, options: any) {
     if (options.ticksPerUnit === 10) {
         // decimal, as on a centimeter ruler
         tickHeightMap = {
-            // $FlowFixMe[unsupported-syntax]
             10: tickHeight,
-            // $FlowFixMe[unsupported-syntax]
             5: tickHeight * 0.55,
-            // $FlowFixMe[unsupported-syntax]
             1: tickHeight * 0.35,
         };
     } else {

package/src/util/math.ts

@@ -91,8 +91,6 @@ const KhanMath = {
 
         return true;
     },
-
-    // $FlowFixMe[incompatible-return]
     // @ts-expect-error [FEI-5003] - TS2366 - Function lacks ending return statement and return type does not include 'undefined'.
     getPrimeFactorization: function (number: number): ReadonlyArray<number> {
         if (number === 1) {
@@ -160,7 +158,6 @@ const KhanMath = {
     // tolerance can't be bigger than 1, sorry
     toFraction: function (
         decimal: number,
-        // $FlowFixMe[incompatible-return]
         tolerance?: number,
     ): [number, number] {
         if (tolerance == null) {

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

@@ -1,29 +1,135 @@
 import * as React from "react";
 
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
+import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui";
+import KeypadContext from "../../keypad-context";
 import {
     expressionItem2,
     expressionItem3,
 } from "../__testdata__/expression.testdata";
+import expressionExport from "../expression";
 
-type StoryArgs = Record<any, any>;
+import TestKeypadContext from "./test-keypad-context-wrapper";
+
+import type {PerseusItem} from "../../perseus-types";
+
+type StoryArgs = {
+    customKeypad: boolean;
+};
 
 type Story = {
     title: string;
+    argTypes: any;
 };
 
-export default {
-    title: "Perseus/Widgets/Expression",
-} as Story;
+type WrappedKeypadContextProps = {
+    item: PerseusItem;
+    customKeypad: boolean;
+};
+
+const WrappedKeypadContext = (props: WrappedKeypadContextProps) => {
+    return (
+        <TestKeypadContext>
+            <KeypadContext.Consumer>
+                {({keypadElement, setRenderer, scrollableElement}) => {
+                    return (
+                        <ItemRendererWithDebugUI
+                            item={props.item}
+                            apiOptions={{
+                                customKeypad: props.customKeypad,
+                            }}
+                        />
+                    );
+                }}
+            </KeypadContext.Consumer>
+        </TestKeypadContext>
+    );
+};
+
+export const DesktopKitchenSink: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    const reviewModeRubric = {
+        functions: ["f", "g", "h"],
+        times: true,
+        answerForms: [],
+        buttonSets: [
+            "basic",
+            "basic+div",
+            "trig",
+            "prealgebra",
+            "logarithms",
+            "basic relations",
+            "advanced relations",
+        ],
+    };
+
+    const keypadConfiguration = {
+        keypadType: "EXPRESSION",
+        extraKeys: ["x", "y", "z"],
+    };
+
+    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: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return <WrappedKeypadContext item={expressionItem3} customKeypad={false} />;
+};
+
+export const Mobile: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return (
+        <div>
+            <p>
+                For some reason you need to be{" "}
+                <a href="https://developer.chrome.com/docs/devtools/device-mode/">
+                    emulating mobile
+                </a>{" "}
+                to see the custom keypad.
+            </p>
+            <WrappedKeypadContext item={expressionItem3} customKeypad={true} />
+        </div>
+    );
+};
 
 export const ExpressionItem2: React.FC<StoryArgs> = (
     args,
 ): React.ReactElement => {
-    return <RendererWithDebugUI question={expressionItem2.question} />;
+    return (
+        <WrappedKeypadContext
+            item={expressionItem2}
+            customKeypad={args.customKeypad}
+        />
+    );
 };
 
 export const ExpressionItem3: React.FC<StoryArgs> = (
     args,
 ): React.ReactElement => {
-    return <RendererWithDebugUI question={expressionItem3.question} />;
+    return (
+        <WrappedKeypadContext
+            item={expressionItem3}
+            customKeypad={args.customKeypad}
+        />
+    );
 };
+
+export default {
+    title: "Perseus/Widgets/Expression",
+    argTypes: {customKeypad: {control: "boolean"}},
+} as Story;

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

@@ -31,7 +31,7 @@ export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
                 options:
                     // `options` is nullable so we have handle it explicitly
                     // to avoid spreading `null` and generating
-                    // hard-to-understand Flow type errors about missing keys
+                    // hard-to-understand type errors about missing keys
                     // in object literal.
                     imageOptions != null
                         ? {

package/src/widgets/__stories__/{on-screen-keypad.stories.tsx → test-keypad-context-wrapper.tsx}

@@ -3,60 +3,11 @@ import {View} from "@khanacademy/wonder-blocks-core";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
 
-import {ItemRenderer} from "../../index";
 import KeypadContext from "../../keypad-context";
-import {expressionItem3} from "../__testdata__/expression.testdata";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Demos/On Screen Keypad",
-} as Story;
-
-const Content = (): React.ReactElement => {
-    return (
-        <KeypadContext.Consumer>
-            {({keypadElement, setRenderer, scrollableElement}) => (
-                <>
-                    <ItemRenderer
-                        ref={setRenderer}
-                        problemNum={0}
-                        apiOptions={{
-                            customKeypad: true,
-                            onFocusChange: (
-                                newFocusPath,
-                                oldFocusPath,
-                                keypadElement,
-                                focusedElement,
-                            ) => {},
-                        }}
-                        item={expressionItem3}
-                        savedState={null}
-                    />
-                    <div id="workarea" />
-                    <div id="hintsarea" />
-                </>
-            )}
-        </KeypadContext.Consumer>
-    );
-};
 
 const Footer = (): React.ReactElement => {
     return (
-        <View
-            style={[
-                styles.keypadContainer,
-                {
-                    // NOTE: in webapp we normally get this from problemProgress
-                    // from the exercise state store.
-                    height: 240,
-                },
-            ]}
-        >
+        <View style={styles.keypadContainer}>
             <KeypadContext.Consumer>
                 {({keypadElement, setKeypadElement, renderer}) => (
                     <Keypad
@@ -70,9 +21,15 @@ const Footer = (): React.ReactElement => {
     );
 };
 
-const Demo = () => {
-    const [keypadElement, setKeypadElement] = React.useState<any>(null);
-    const [renderer, setRenderer] = React.useState<any>(null);
+type TestKeypadContextWrapperProps = {
+    children: React.ReactElement;
+};
+
+const TestKeypadContextWrapper = (
+    props: TestKeypadContextWrapperProps,
+): React.ReactElement => {
+    const [keypadElement, setKeypadElement] = React.useState(null);
+    const [renderer, setRenderer] = React.useState(null);
     const [scrollableElement, setScrollableElement] = React.useState(
         document.body,
     );
@@ -80,8 +37,10 @@ const Demo = () => {
     return (
         <KeypadContext.Provider
             value={{
+                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setKeypadElement,
                 keypadElement,
+                // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
                 setRenderer,
                 renderer,
                 // @ts-expect-error [FEI-5003] - TS2322 - Type 'Dispatch<SetStateAction<HTMLElement>>' is not assignable to type '(scrollableElement?: HTMLElement | null | undefined) => void'.
@@ -89,15 +48,13 @@ const Demo = () => {
                 scrollableElement,
             }}
         >
-            <Content />
+            {props.children}
             <Footer />
         </KeypadContext.Provider>
     );
 };
 
-export const CustomKeypad: React.FC<StoryArgs> = (args): React.ReactElement => (
-    <Demo />
-);
+export default TestKeypadContextWrapper;
 
 const styles = StyleSheet.create({
     keypad: {
@@ -116,5 +73,8 @@ const styles = StyleSheet.create({
         // Prevent container from swallowing events that the exercise
         // below it needs to respond to.
         pointerEvents: "none",
+        // NOTE: in webapp we normally get this from problemProgress
+        // from the exercise state store.
+        height: 240,
     },
 });

package/src/widgets/__testdata__/expression.testdata.ts

@@ -1,17 +1,13 @@
 import type {
-    PerseusRenderer,
     PerseusExpressionWidgetOptions,
     Version,
+    PerseusItem,
 } from "../../perseus-types";
 
-type Item = {
-    question: PerseusRenderer;
-};
-
 const createItemJson = (
     widgetOptions: PerseusExpressionWidgetOptions,
     version: Version,
-): Item => {
+): PerseusItem => {
     return {
         question: {
             content: "[[☃ expression 1]]",
@@ -25,9 +21,14 @@ const createItemJson = (
                 },
             },
         },
-        // @ts-expect-error [FEI-5003] - TS2322 - Type '{ question: { content: string; images: {}; widgets: { "expression 1": { type: "expression"; graded: true; options: PerseusExpressionWidgetOptions; version: Version; }; }; }; answerArea: { ...; }; itemDataVersion: { ...; }; hints: never[]; }' is not assignable to type 'Item'.
+        _multi: null,
+        answer: null,
         answerArea: {
+            zTable: false,
+            chi2Table: false,
+            tTable: false,
             calculator: false,
+            periodicTable: false,
         },
         itemDataVersion: {
             major: 0,
@@ -37,7 +38,7 @@ const createItemJson = (
     };
 };
 
-export const expressionItem2: Item = createItemJson(
+export const expressionItem2: PerseusItem = createItemJson(
     {
         answerForms: [
             {
@@ -88,7 +89,10 @@ export const expressionItem3Options: PerseusExpressionWidgetOptions = {
     buttonsVisible: "focused",
 };
 
-export const expressionItem3: Item = createItemJson(expressionItem3Options, {
-    major: 1,
-    minor: 0,
-});
+export const expressionItem3: PerseusItem = createItemJson(
+    expressionItem3Options,
+    {
+        major: 1,
+        minor: 0,
+    },
+);

package/src/widgets/__testdata__/numeric-input.testdata.ts

@@ -87,7 +87,6 @@ export const percentageProblem: PerseusRenderer = {
                         status: "correct",
                         maxError: null,
                         strict: false,
-                        // $FlowFixMe[incompatible-cast] I need this to be a percent
                         value: "33%",
                         simplify: "required",
                         message: "",

package/src/widgets/__testdata__/transformer.testdata.ts

@@ -59,7 +59,6 @@ export const question: PerseusRenderer = {
                 graphMode: "interactive",
                 listMode: "static",
                 starting: {
-                    // $FlowFixMe[speculation-ambiguous]
                     shape: {
                         coords: [
                             [0, 0],

package/src/widgets/__tests__/radio.test.ts

@@ -309,7 +309,7 @@ describe("single-choice question", () => {
         questionWithPassage.content = `[[\u2603 passage 1]]\n\nNow what's the answer?\n\n[[\u2603 radio 1]]`;
         questionWithPassage.widgets["passage 1"] = passageWidget;
         const radioOptions = questionWithPassage.widgets["radio 1"];
-        // HACK(jeremy): Flow doesn't know what type these options are because
+        // HACK(jeremy): TypeScript doesn't know what type these options are because
         // we've extracted them out of a generic `PerseusJson` blob and all the
         // `widget` items are just type `Widget`.
         (radioOptions.options as any).choices[0].content =

package/src/widgets/expression.tsx

@@ -458,7 +458,7 @@ export class Expression extends React.Component<Props, ExpressionState> {
                     onFocus={() => {
                         // this.props.keypadElement should always be set
                         // when apiOptions.customKeypad is set, but how
-                        // to convince Flow of this?
+                        // to convince TypeScript of this?
                         this.props.keypadElement?.configure(
                             this.props.keypadConfiguration,
                             () => {

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

@@ -156,7 +156,6 @@ class GradedGroupSet extends React.Component<Props, State> {
                         return (
                             // TODO(jeremy): Don't spread this.props, instead
                             // pass in all props GradedGroup needs explicilty
-                            // $FlowFixMe[prop-missing]
                             // @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call.
                             <GradedGroup
                                 key={i}
@@ -200,7 +199,6 @@ class GradedGroupSet extends React.Component<Props, State> {
                 </div>
                 {/* TODO(jeremy): Don't spread this.props, instead
                     pass in all props GradedGroup needs explicitly */}
-                {/* $FlowFixMe[prop-missing] */}
                 {/* @ts-expect-error [FEI-5003] - TS2769 - No overload matches this call. */}
                 <GradedGroup
                     key={this.state.currentGroup}
@@ -211,9 +209,7 @@ class GradedGroupSet extends React.Component<Props, State> {
                     {...this.props}
                     {...currentGroup}
                     inGradedGroupSet={true}
-                    // $FlowFixMe[incompatible-type]
                     title={null}
-                    // $FlowFixMe[incompatible-type]
                     onNextQuestion={handleNextQuestion}
                     linterContext={this.props.linterContext}
                 />

package/src/widgets/graded-group.tsx

@@ -252,7 +252,6 @@ export class GradedGroup extends React.Component<Props, State> {
             : css(styles.gradedGroup);
 
         const classes = classNames({
-            // $FlowFixMe[invalid-computed-prop]
             [mobileClass]: apiOptions.isMobile,
             "perseus-graded-group": true,
             "answer-correct": apiOptions.isMobile
@@ -283,8 +282,6 @@ export class GradedGroup extends React.Component<Props, State> {
                  * props that are needed.
                  * TODO(FEI-4034): Only pass what the Renderer expects.
                  */}
-                {/* $FlowFixMe[prop-missing] */}
-                {/* $FlowFixMe[incompatible-type] */}
                 {/* @ts-expect-error [FEI-5003] - TS2322 - Type '{ ref: string; apiOptions: any; onInteractWithWidget: (arg1: string) => void; linterContext: LinterContextProps; title: string; hasHint?: boolean | null | undefined; ... 22 more ...; children?: ReactNode; }' is not assignable to type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "keypadElement" | "problemNum" | "apiOptions" | "legacyPerseusLint">'. */}
                 <Renderer
                     {...this.props}
@@ -355,7 +352,6 @@ export class GradedGroup extends React.Component<Props, State> {
                              * We're passing a couple of props to Renderer that it doesn't
                              * require as part of {...this.props.hint}.
                              */}
-                            {/* $FlowFixMe[prop-missing] */}
                             <Renderer
                                 {...this.props.hint}
                                 // eslint-disable-next-line react/no-string-refs

package/src/widgets/grapher/util.tsx

@@ -149,8 +149,6 @@ const Quadratic = _.extend({}, PlotDefaults, {
         [0.5, 0.5],
         [0.75, 0.75],
     ],
-
-    // $FlowFixMe[prop-missing]
     // @ts-expect-error [FEI-5003] - TS2339 - Property 'Parabola' does not exist on type 'typeof Graphie'.
     Movable: Graphie.Parabola,
 
@@ -208,8 +206,6 @@ const Sinusoid = _.extend({}, PlotDefaults, {
         [0.5, 0.5],
         [0.6, 0.6],
     ],
-
-    // $FlowFixMe[prop-missing]
     // @ts-expect-error [FEI-5003] - TS2339 - Property 'Sinusoid' does not exist on type 'typeof Graphie'.
     Movable: Graphie.Sinusoid,
 
@@ -593,7 +589,7 @@ export const allTypes: any = _.keys(functionTypeMapping);
 
 export function functionForType(
     // TODO(jeremy): Actually `$Keys<typeof functionTypeMapping>` but that
-    // triggers Flow to require all of our Plot types to be fully typed which
+    // triggers TypeScript to require all of our Plot types to be fully typed which
     // is a big amount of work/change.
     type: string,
 ): any {

package/src/widgets/grapher.tsx

@@ -119,10 +119,8 @@ class FunctionGrapher extends React.Component<FunctionGrapherProps> {
                     coord={coord}
                     static={this.props.static}
                     constraints={[
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovablePoint.constraints.bound(),
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovablePoint.constraints.snap(),
                         (coord: any) => {
@@ -205,7 +203,6 @@ class FunctionGrapher extends React.Component<FunctionGrapherProps> {
             const scale = box[0] / interactiveSizes.defaultBoxSize;
             // @ts-expect-error [FEI-5003] - TS2322 - Type 'Element' is not assignable to type 'null'.
             image = (
-                // $FlowFixMe[prop-missing]: alt props is missing
                 // @ts-expect-error [FEI-5003] - TS2741 - Property 'alt' is missing in type '{ src: any; width: any; height: any; scale: number; }' but required in type 'Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "children" | "height" | "width" | "title" | "alt" | "trackInteraction" | "preloader" | "allowFullBleed" | "extraGraphie" | "overrideAriaHidden">'.
                 <SvgImage
                     src={imageDescription.url}
@@ -295,10 +292,8 @@ class FunctionGrapher extends React.Component<FunctionGrapherProps> {
                         });
                     }}
                     constraints={[
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovableLine.constraints.bound(),
-                        // $FlowFixMe[prop-missing]
                         // @ts-expect-error [FEI-5003] - TS2339 - Property 'constraints' does not exist on type '(graphie: any, movable: any, options: any) => void'.
                         Interactive2.MovableLine.constraints.snap(),
                         (newCoord, oldCoord: any) => {

package/src/widgets/group.tsx

@@ -171,7 +171,6 @@ class Group extends React.Component<Props> {
                     onInteractWithWidget={onInteractWithWidget}
                     linterContext={this.props.linterContext}
                 />
-                {/* $FlowFixMe[prop-missing] */}
                 {/* @ts-expect-error [FEI-5003] - TS2339 - Property 'icon' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'. */}
                 {this.props.icon && (
                     // @ts-expect-error [FEI-5003] - TS2339 - Property 'icon' does not exist on type 'Readonly<Props> & Readonly<{ children?: ReactNode; }>'.

package/src/widgets/interaction.tsx

@@ -206,7 +206,6 @@ class Interaction extends React.Component<Props, State> {
                 });
                 compiledVars[name] = function (x: any) {
                     return func(
-                        // $FlowFixMe[extra-arg]
                         _.extend({}, compiledVars, {
                             x: x,
                         }),