@khanacademy/perseus 3.0.0 → 4.0.0

package/src/components/__stories__/sortable.stories.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+
+import Sortable from "../sortable";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+const defaultOptions = ["Option 1", "Option 2", "Option 3"];
+
+export default {
+    title: "Perseus/Components/Sortable",
+} as Story;
+
+export const SortableHorizontalExample: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <Sortable
+            layout="horizontal"
+            options={["a", "b", "c"]}
+            waitForKatexLoad={false}
+        />
+    );
+};
+
+export const SortableVerticalExample: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <Sortable
+            layout="vertical"
+            options={["a", "b", "c"]}
+            waitForKatexLoad={false}
+        />
+    );
+};
+
+export const BasicSortableOptionsTest: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <Sortable options={defaultOptions} />;
+};
+
+export const BasicSortableOptionsTestWithNoPadding: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <Sortable options={defaultOptions} padding={false} />;
+};
+
+export const BasicSortableOptionsTestWithLargeMargin: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <Sortable options={defaultOptions} margin={64} />;
+};
+
+export const BasicSortableOptionsTestDisabled: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <Sortable options={defaultOptions} disabled={true} />;
+};
+
+export const BasicSortableOptionsTestWithWidthAndHeightConstraints: React.FC<
+    StoryArgs
+> = (args): React.ReactElement => {
+    return (
+        <Sortable
+            options={defaultOptions}
+            constraints={{
+                height: 128,
+                width: 256,
+            }}
+        />
+    );
+};

package/src/components/__stories__/stub-tag-editor.stories.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+
+import StubTagEditor from "../stub-tag-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Components/name",
+} as Story;
+
+const defaultValues = ["Test value 1", "Test value 2", "Test value 3"];
+
+export const ShowingTitle: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return <StubTagEditor onChange={() => {}} showTitle={true} />;
+};
+
+export const NotShowingTitle: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <StubTagEditor onChange={() => {}} showTitle={false} />;
+};
+
+export const ShowingTitleWithValue: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <StubTagEditor
+            onChange={() => {}}
+            showTitle={true}
+            value={defaultValues}
+        />
+    );
+};
+
+export const NotShowingTitleWithValue: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <StubTagEditor
+            onChange={() => {}}
+            showTitle={false}
+            value={defaultValues}
+        />
+    );
+};

package/src/components/__stories__/svg-image.stories.tsx

@@ -0,0 +1,82 @@
+import * as React from "react";
+
+import SvgImage from "../svg-image";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Components/SVG Image",
+} as Story;
+
+const svgUrl = "http://www.khanacademy.org/images/ohnoes-concerned.svg";
+const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";
+const graphieUrl =
+    "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1e06f6d4071f30cee2cc3ccb7435b3a66a62fe3f";
+
+export const MostlyEmptyPropsObject: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <SvgImage alt="ALT" />;
+};
+
+export const SvgImageThatDoesntLoad: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <SvgImage
+            alt="ALT"
+            height={100}
+            width={500}
+            src={"http://httpstat.us/200?sleep=1000000"}
+        />
+    );
+};
+
+export const SvgImageBasic: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <SvgImage src={svgUrl} alt="ALT" />;
+};
+
+export const SvgImageWithFixedHeight: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <SvgImage height={50} src={svgUrl} alt="ALT" />;
+};
+
+export const SvgImageWithFixedWidth: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <SvgImage src={svgUrl} width={50} alt="ALT" />;
+};
+
+export const SvgImageWithExtraGraphieProps: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <SvgImage
+            extraGraphie={{
+                box: [200, 200],
+                range: [
+                    [0, 10],
+                    [0, 10],
+                ],
+                labels: ["ok"],
+            }}
+            src={svgUrl}
+            alt="ALT"
+        />
+    );
+};
+
+export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return <SvgImage src={imgUrl} alt="ALT" />;
+};
+
+export const GraphieImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return <SvgImage src={graphieUrl} alt="ALT" />;
+};

package/src/components/__stories__/tex.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import TeX from "../tex";
+
+type StoryArgs = {
+    equation: string;
+};
+
+type Story = {
+    title: string;
+    args: StoryArgs;
+};
+
+export default {
+    title: "Perseus/Components/Tex",
+    args: {
+        equation: "f(x) = x + 1",
+    },
+} as Story;
+
+export const BasicOperation: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TeX setAssetStatus={() => {}} children={args.equation} />;
+};

package/src/components/__stories__/text-buttons.stories.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+
+import TexButtons from "../tex-buttons";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Components/Tex Buttons",
+} as Story;
+
+export const ButtonSetBasic: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TexButtons sets={["basic"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetBasicDiv: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TexButtons sets={["basic+div"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetTrig: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TexButtons sets={["trig"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetPrealgebra: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TexButtons sets={["prealgebra"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetLogarithms: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TexButtons sets={["logarithms"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetBasicRelations: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TexButtons sets={["basic relations"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetAdvancedRelations: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TexButtons sets={["advanced relations"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetMultiple: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <TexButtons
+            sets={["basic", "trig", "advanced relations"]}
+            onInsert={() => {}}
+        />
+    );
+};

package/src/components/__stories__/text-input.stories.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import TextInput from "../text-input";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Components/Text Input",
+} as Story;
+
+const defaultObject = {
+    onChange: () => {},
+} as const;
+
+export const EmptyPropsObject: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TextInput {...defaultObject} />;
+};
+
+export const TestValueProvided: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TextInput {...defaultObject} value="Test value" />;
+};
+
+export const AriaLabelTextProvided: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <TextInput {...defaultObject} labelText="Test label" />;
+};
+
+export const Disabled: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return <TextInput {...defaultObject} disabled={true} />;
+};

package/src/components/__stories__/text-list-editor.stories.tsx

@@ -0,0 +1,34 @@
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import TextListEditor from "../text-list-editor";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Components/Text List Editor",
+} as Story;
+
+const defaultObject = {
+    onChange: (...args) => {
+        action("onChange")(...args);
+    },
+    options: ["Test option 1", "Test option 2", "Test option 3"],
+} as const;
+
+const ClassName = "framework-perseus orderer";
+
+export const SimpleListOfOptions: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        // @ts-expect-error [FEI-5003] - TS2322 - Type '{ children: Element; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
+        <div class={ClassName}>
+            <TextListEditor {...defaultObject} />
+        </div>
+    );
+};

package/src/components/__stories__/zoomable-tex.stories.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+
+import ZoomableTex from "../zoomable-tex";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Components/Zoomable Tex",
+} as Story;
+
+const ForceZoomWrapper: React.FC<{
+    children: React.ReactNode;
+}> = ({children}): React.ReactElement => (
+    <>
+        <h1>Click on equation to zoom/unzoom</h1>
+        <div style={{width: "50px"}}>{children}</div>
+    </>
+);
+
+export const KaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return (
+        <ForceZoomWrapper>
+            <ZoomableTex children="\sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6}" />
+        </ForceZoomWrapper>
+    );
+};
+
+export const ComplexKaTeX: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return (
+        <ForceZoomWrapper>
+            {" "}
+            <ZoomableTex children="\begin{aligned}h\blueE{v_1} \left(\dfrac{\partial f}{\partial x}(x_0, y_0) \right) + h\greenE{v_2}\left( \dfrac{\partial f}{\partial y}(x_0 \redD{+ h\blueE{v_1}}, y_0)\right)\end{aligned}" />
+        </ForceZoomWrapper>
+    );
+};

package/src/components/__stories__/zoomable.stories.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import Zoomable from "../zoomable";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+export default {
+    title: "Perseus/Components/Zoomable",
+} as Story;
+
+type Bounds = {
+    width: number;
+    height: number;
+};
+
+const computeChildBounds = (
+    parentNode: HTMLElement,
+    parentBounds?: Bounds,
+): Bounds => {
+    return {
+        width: 1000,
+        height: 500,
+    };
+};
+
+export const ZoomableExample: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <Zoomable computeChildBounds={computeChildBounds}>
+            <span>
+                Here's some zoomed-out content.
+                <br />
+                <br />
+                Click on the content to zoom/unzoom.
+            </span>
+        </Zoomable>
+    );
+};

package/src/components/__testdata__/sorter.testdata.ts

@@ -0,0 +1,19 @@
+import type {PerseusRenderer} from "../../perseus-types";
+
+export const question1: PerseusRenderer = {
+    content:
+        "**Arrange the following measurements in order from smallest to largest.**\n\n[[\u2603 sorter 1]]",
+    images: {},
+    widgets: {
+        "sorter 1": {
+            version: {major: 0, minor: 0},
+            type: "sorter",
+            graded: true,
+            options: {
+                padding: true,
+                layout: "horizontal",
+                correct: ["$0.005$ kilograms", "$15$ grams", "$55$ grams"],
+            },
+        },
+    },
+};

package/src/components/__tests__/number-input.test.tsx

@@ -0,0 +1,128 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import TestUtils from "react-dom/test-utils";
+import _ from "underscore";
+
+import NumberInput from "../number-input";
+
+const STARTING_VALUE = 1;
+
+describe("NumberInput", function () {
+    const testInputResult = function (
+        input: string,
+        result: number,
+        extraProps:
+            | undefined
+            | {
+                  placeholder: number;
+              },
+    ) {
+        let newVal;
+        const handleChange = function (val: any) {
+            newVal = val;
+        };
+
+        const props = _.extend(
+            {
+                value: STARTING_VALUE,
+                onChange: handleChange,
+            },
+            extraProps,
+        );
+
+        const node = TestUtils.renderIntoDocument(<NumberInput {...props} />);
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+        TestUtils.Simulate.change(ReactDOM.findDOMNode(node), {
+            target: {value: input},
+        });
+        expect(newVal).toEqual(result);
+    };
+
+    it("basic input", function () {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+        testInputResult("42", 42);
+    });
+
+    it("invalid input does not change", function () {
+        // @ts-expect-error [FEI-5003] - TS2554 - Expected 3 arguments, but got 2.
+        testInputResult("asdf", STARTING_VALUE);
+    });
+
+    it("should use placeholder value if blank and has placeholder", () => {
+        testInputResult("", 15, {
+            placeholder: 15,
+        });
+    });
+
+    const testArrowKeys = function (args: {
+        endingValue: number;
+        key: string;
+        keysEnabled: boolean;
+        startingValue: number;
+    }) {
+        const key = args.key;
+        const startingValue = args.startingValue;
+        const endingValue = args.endingValue;
+        const keysEnabled = args.keysEnabled;
+
+        let newVal = startingValue;
+        const handleChange = function (val) {
+            newVal = val;
+        };
+
+        const node = TestUtils.renderIntoDocument(
+            <NumberInput
+                value={startingValue}
+                // eslint-disable-next-line react/jsx-no-bind
+                onChange={handleChange}
+                useArrowKeys={keysEnabled}
+            />,
+        );
+        // @ts-expect-error [FEI-5003] - TS2345 - Argument of type 'Element | Text | null' is not assignable to parameter of type 'Element | Component<any, {}, any>'. | TS2345 - Argument of type 'void' is not assignable to parameter of type 'ReactInstance | null | undefined'.
+        TestUtils.Simulate.keyDown(ReactDOM.findDOMNode(node), {key: key});
+        expect(newVal).toEqual(endingValue);
+    };
+
+    it("should let you increment with the arrow keys", function () {
+        testArrowKeys({
+            key: "ArrowUp",
+            startingValue: 0,
+            endingValue: 1,
+            keysEnabled: true,
+        });
+    });
+
+    it("should let you decrement with the arrow keys", function () {
+        testArrowKeys({
+            key: "ArrowDown",
+            startingValue: 0,
+            endingValue: -1,
+            keysEnabled: true,
+        });
+    });
+
+    it("does not increment and decrement non-integers", function () {
+        testArrowKeys({
+            key: "ArrowDown",
+            startingValue: 1 / 2,
+            endingValue: 1 / 2,
+            keysEnabled: true,
+        });
+
+        testArrowKeys({
+            key: "ArrowUp",
+            startingValue: 0.5,
+            endingValue: 0.5,
+            keysEnabled: true,
+        });
+    });
+
+    it("shouldn't increment when the arrow keys are disabled", function () {
+        testArrowKeys({
+            key: "ArrowUp",
+            startingValue: 0,
+            endingValue: 0,
+            keysEnabled: false,
+        });
+    });
+});