@khanacademy/perseus 4.0.1 → 5.0.0

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

@@ -1,29 +1,129 @@
 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 = (args: StoryArgs): 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"],
+    };
 
-export const ExpressionItem2: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
-    return <RendererWithDebugUI question={expressionItem2.question} />;
+    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 ExpressionItem3: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
-    return <RendererWithDebugUI question={expressionItem3.question} />;
+export const Desktop = (args: StoryArgs): React.ReactElement => {
+    return <WrappedKeypadContext item={expressionItem3} customKeypad={false} />;
 };
+
+export const Mobile = (args: StoryArgs): 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 = (args: StoryArgs): React.ReactElement => {
+    return (
+        <WrappedKeypadContext
+            item={expressionItem2}
+            customKeypad={args.customKeypad}
+        />
+    );
+};
+
+export const ExpressionItem3 = (args: StoryArgs): React.ReactElement => {
+    return (
+        <WrappedKeypadContext
+            item={expressionItem3}
+            customKeypad={args.customKeypad}
+        />
+    );
+};
+
+export default {
+    title: "Perseus/Widgets/Expression",
+    argTypes: {customKeypad: {control: "boolean"}},
+} as Story;

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

@@ -12,7 +12,7 @@ type GradedGroupSetStory = {
     args: StoryArgs;
 };
 
-export const Article1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Article1 = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             apiOptions={{

package/src/widgets/__stories__/graded-group.stories.tsx

@@ -12,7 +12,7 @@ type Story = {
     args: StoryArgs;
 };
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={question1}

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

@@ -17,44 +17,30 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const AbsoluteValueQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AbsoluteValueQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={absoluteValueQuestion} />;
 };
 
-export const ExponentialQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ExponentialQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={exponentialQuestion} />;
 };
 
-export const LinearQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LinearQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={linearQuestion} />;
 };
 
-export const LogarithmQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LogarithmQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={logarithmQuestion} />;
 };
 
-export const QuadraticQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const QuadraticQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={quadraticQuestion} />;
 };
 
-export const SinusoidQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SinusoidQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={sinusoidQuestion} />;
 };
 
-export const ComplexQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ComplexQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={multipleAvailableTypesQuestion} />;
 };

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

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

@@ -16,7 +16,7 @@ type ImageStory = {
     args: StoryArgs;
 };
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     const apiOptions: APIOptions = {
         isMobile: args.isMobile,
     };
@@ -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__/input-number.stories.tsx

@@ -82,29 +82,20 @@ const updateWidgetOptions = (
     };
 };
 
-export const Rational: React.FC<InputNumberOptions> = (
-    args,
-): React.ReactElement => {
+export const Rational = (args: InputNumberOptions): React.ReactElement => {
     const question = updateWidgetOptions(question1, "input-number 1", args);
     return <RendererWithDebugUI question={question} />;
 };
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'args' does not exist on type 'FC<PerseusInputNumberWidgetOptions>'.
 Rational.args = question1.widgets["input-number 1"].options;
 
-export const PiSimplify: React.FC<InputNumberOptions> = (
-    args,
-): React.ReactElement => {
+export const PiSimplify = (args: InputNumberOptions): React.ReactElement => {
     const question = updateWidgetOptions(question2, "input-number 1", args);
     return <RendererWithDebugUI question={question} />;
 };
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'args' does not exist on type 'FC<PerseusInputNumberWidgetOptions>'.
 PiSimplify.args = question2.widgets["input-number 1"].options;
 
-export const Percent: React.FC<InputNumberOptions> = (
-    args,
-): React.ReactElement => {
+export const Percent = (args: InputNumberOptions): React.ReactElement => {
     const question = updateWidgetOptions(question3, "input-number 1", args);
     return <RendererWithDebugUI question={question} />;
 };
-// @ts-expect-error [FEI-5003] - TS2339 - Property 'args' does not exist on type 'FC<PerseusInputNumberWidgetOptions>'.
 Percent.args = question3.widgets["input-number 1"].options;

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Question1 = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={question1} />
 );

package/src/widgets/__stories__/interactive-graph.stories.tsx

@@ -19,39 +19,39 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Angle: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Angle = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={angleQuestion} />
 );
 
-export const Circle: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Circle = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={circleQuestion} />
 );
 
-export const Linear: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Linear = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={linearQuestion} />
 );
 
-export const LinearSystem: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const LinearSystem = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={linearSystemQuestion} />
 );
 
-export const Point: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Point = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={pointQuestion} />
 );
 
-export const Polygon: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Polygon = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={polygonQuestion} />
 );
 
-export const Ray: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Ray = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={rayQuestion} />
 );
 
-export const Segment: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Segment = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={segmentQuestion} />
 );
 
-export const Sinusoid: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Sinusoid = (args: StoryArgs): React.ReactElement => (
     <RendererWithDebugUI question={sinusoidQuestion} />
 );
 

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/number-line.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/numeric-input.stories.tsx

@@ -62,13 +62,13 @@ export const Question1 = (): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const Interactive: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Interactive = (args: StoryArgs): React.ReactElement => {
     const props = generateProps(args);
 
     return <NumericInput {...props} />;
 };
 
-export const Sizes: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Sizes = (args: StoryArgs): React.ReactElement => {
     const smallProps = generateProps({...args, size: "small"});
     const normalProps = generateProps({...args, size: "normal"});
 
@@ -86,9 +86,7 @@ export const Sizes: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const TextAlignment: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TextAlignment = (args: StoryArgs): React.ReactElement => {
     const leftProps = generateProps({...args, rightAlign: false});
     const rightProps = generateProps({...args, rightAlign: true});
 

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

package/src/widgets/__stories__/passage-ref.stories.tsx

@@ -13,10 +13,10 @@ export default {
     title: "Perseus/Widgets/PassageRef",
 } as Story;
 
-export const ShortPassage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ShortPassage = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const LongPassage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const LongPassage = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };

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

@@ -13,20 +13,14 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const SimpleQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SimpleQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };
 
-export const MultiPassageQuestion: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultiPassageQuestion = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question2} />;
 };
 
-export const SingleNumberedPassage: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SingleNumberedPassage = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question3} />;
 };

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

@@ -55,7 +55,7 @@ const buildApiOptions = (args: StoryArgs): APIOptions => {
     };
 };
 
-export const SingleSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SingleSelect = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={applyStoryArgs(questionWithPassage, args)}
@@ -65,9 +65,7 @@ export const SingleSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const MultiSelectSimple: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const MultiSelectSimple = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={applyStoryArgs(multiChoiceQuestionSimple, args)}
@@ -77,7 +75,7 @@ export const MultiSelectSimple: React.FC<StoryArgs> = (
     );
 };
 
-export const MultiSelect: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const MultiSelect = (args: StoryArgs): React.ReactElement => {
     return (
         <RendererWithDebugUI
             question={applyStoryArgs(multiChoiceQuestion, args)}

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };

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,13 @@ const Footer = (): React.ReactElement => {
     );
 };
 
-const Demo = () => {
-    const [keypadElement, setKeypadElement] = React.useState<any>(null);
-    const [renderer, setRenderer] = React.useState<any>(null);
+type Props = {
+    children: React.ReactElement;
+};
+
+const TestKeypadContextWrapper = (props: Props): React.ReactElement => {
+    const [keypadElement, setKeypadElement] = React.useState(null);
+    const [renderer, setRenderer] = React.useState(null);
     const [scrollableElement, setScrollableElement] = React.useState(
         document.body,
     );
@@ -80,8 +35,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 +46,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 +71,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/__stories__/transformer.stories.tsx

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question} />;
 };

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

@@ -13,9 +13,7 @@ export default {
     title: "Perseus/Widgets/Unit",
 } as Story;
 
-export const NonStaticRender: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const NonStaticRender = (args: StoryArgs): React.ReactElement => {
     return (
         <OldUnitInput
             apiOptions={{

package/src/widgets/__stories__/video-transcript-link.stories.tsx

@@ -12,16 +12,12 @@ export default {
     title: "Perseus/Components/Video Transcript Link",
 } as Story;
 
-export const YoutubeVideoLink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const YoutubeVideoLink = (args: StoryArgs): React.ReactElement => {
     return (
         <VideoTranscriptLink location="https://www.youtube.com/watch?v=YoutubeId" />
     );
 };
 
-export const SlugVideoLink: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const SlugVideoLink = (args: StoryArgs): React.ReactElement => {
     return <VideoTranscriptLink location="slug-video-id" />;
 };

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

@@ -9,6 +9,6 @@ export default {
 
 type StoryArgs = Record<any, any>;
 
-export const Question1: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Question1 = (args: StoryArgs): React.ReactElement => {
     return <RendererWithDebugUI question={question1} />;
 };