@khanacademy/perseus 19.1.4 → 19.1.6

package/src/components/__stories__/multi-button-group.stories.tsx

@@ -1,66 +0,0 @@
-import * as React from "react";
-
-import MultiButtonGroup from "../multi-button-group";
-
-type StoryArgs = {
-    allowEmpty: boolean;
-};
-
-type Story = {
-    title: string;
-    args: StoryArgs;
-};
-
-export default {
-    title: "Perseus/Components/Muli-Button Group",
-    args: {
-        allowEmpty: true,
-    },
-} as Story;
-
-const HarnassedButtonGroup = (
-    props: Pick<
-        React.ComponentProps<typeof MultiButtonGroup>,
-        "buttons" | "allowEmpty"
-    >,
-) => {
-    const [values, updateValues] = React.useState(
-        null as ReadonlyArray<string> | null | undefined,
-    );
-
-    return (
-        <MultiButtonGroup
-            {...props}
-            values={values}
-            onChange={(newValues) => {
-                updateValues(newValues);
-            }}
-        />
-    );
-};
-
-export const ButtonsWithNoTitles = (args: StoryArgs): React.ReactElement => {
-    return (
-        <HarnassedButtonGroup
-            {...args}
-            buttons={[
-                {value: "One", content: "Item #1"},
-                {value: "Two", content: "Item #2"},
-                {value: "Three", content: "Item #3"},
-            ]}
-        />
-    );
-};
-
-export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
-    return (
-        <HarnassedButtonGroup
-            {...args}
-            buttons={[
-                {value: "One", content: "Item #1", title: "The first item"},
-                {value: "Two", content: "Item #2", title: "The second item"},
-                {value: "Three", content: "Item #3", title: "The third item"},
-            ]}
-        />
-    );
-};

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

@@ -1,41 +0,0 @@
-import * as React from "react";
-
-import NumberInput from "../number-input";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-const defaultObject = {
-    onChange: () => {},
-} as const;
-
-export default {
-    title: "Perseus/Components/Number Input",
-} as Story;
-
-export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
-    return <NumberInput {...defaultObject} />;
-};
-
-export const SampleValue = (args: StoryArgs): React.ReactElement => {
-    return <NumberInput {...defaultObject} value={1234567890} />;
-};
-
-export const Placeholder = (args: StoryArgs): React.ReactElement => {
-    return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
-};
-
-export const SizeMini = (args: StoryArgs): React.ReactElement => {
-    return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
-};
-
-export const SizeSmall = (args: StoryArgs): React.ReactElement => {
-    return <NumberInput {...defaultObject} size="small" />;
-};
-
-export const SizeNormal = (args: StoryArgs): React.ReactElement => {
-    return <NumberInput {...defaultObject} size="normal" />;
-};

package/src/components/__stories__/prop-check-box.stories.tsx

@@ -1,65 +0,0 @@
-import * as React from "react";
-
-import PropCheckBox from "../prop-check-box";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Components/Prop Check Box",
-} as Story;
-
-export const TestLabelWithCheckedObject = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={true}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="left"
-        />
-    );
-};
-
-export const TestLabelWithUncheckedObject = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={false}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="left"
-        />
-    );
-};
-
-export const TestLabelWithCheckedObjectLabelOnTheRight = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={true}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="right"
-        />
-    );
-};
-
-export const TestLabelWithUncheckedObjectLabelOnTheRight = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <PropCheckBox
-            test={false}
-            label="Test label"
-            onChange={() => {}}
-            labelAlignment="right"
-        />
-    );
-};

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

@@ -1,29 +0,0 @@
-import * as React from "react";
-
-import RangeInput from "../range-input";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Components/Range Input",
-} as Story;
-
-export const EmptyValueArray = (args: StoryArgs): React.ReactElement => {
-    return <RangeInput onChange={() => {}} value={[]} />;
-};
-
-export const SimpleWithSmallValueRanges = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <RangeInput onChange={() => {}} value={[-10, 10]} />;
-};
-
-export const Placeholders = (args: StoryArgs): React.ReactElement => {
-    return (
-        <RangeInput onChange={() => {}} placeholder={["?", "!"]} value={[]} />
-    );
-};

package/src/components/__stories__/simple-keypad-input.stories.tsx

@@ -1,27 +0,0 @@
-import * as React from "react";
-
-import SimpleKeypadInput from "../simple-keypad-input";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-const defaultObject = {
-    onChange: () => {},
-    onFocus: () => {},
-    onBlur: () => {},
-} as const;
-
-export default {
-    title: "Perseus/Components/Simple Keypad Input",
-} as Story;
-
-export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
-    return <SimpleKeypadInput {...defaultObject} />;
-};
-
-export const CustomValue = (args: StoryArgs): React.ReactElement => {
-    return <SimpleKeypadInput {...defaultObject} value="Test value" />;
-};

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

@@ -1,77 +0,0 @@
-import * as React from "react";
-
-import Sortable, {Layout} 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 = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Sortable
-            layout={Layout.HORIZONTAL}
-            options={["a", "b", "c"]}
-            waitForTexRendererToLoad={false}
-        />
-    );
-};
-
-export const SortableVerticalExample = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Sortable
-            layout={Layout.VERTICAL}
-            options={["a", "b", "c"]}
-            waitForTexRendererToLoad={false}
-        />
-    );
-};
-
-export const BasicSortableOptionsTest = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Sortable options={defaultOptions} />;
-};
-
-export const BasicSortableOptionsTestWithNoPadding = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Sortable options={defaultOptions} padding={false} />;
-};
-
-export const BasicSortableOptionsTestWithLargeMargin = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Sortable options={defaultOptions} margin={64} />;
-};
-
-export const BasicSortableOptionsTestDisabled = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Sortable options={defaultOptions} disabled={true} />;
-};
-
-export const BasicSortableOptionsTestWithWidthAndHeightConstraints = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Sortable
-            options={defaultOptions}
-            constraints={{
-                height: 128,
-                width: 256,
-            }}
-        />
-    );
-};

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

@@ -1,45 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return <StubTagEditor onChange={() => {}} showTitle={true} />;
-};
-
-export const NotShowingTitle = (args: StoryArgs): React.ReactElement => {
-    return <StubTagEditor onChange={() => {}} showTitle={false} />;
-};
-
-export const ShowingTitleWithValue = (args: StoryArgs): React.ReactElement => {
-    return (
-        <StubTagEditor
-            onChange={() => {}}
-            showTitle={true}
-            value={defaultValues}
-        />
-    );
-};
-
-export const NotShowingTitleWithValue = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <StubTagEditor
-            onChange={() => {}}
-            showTitle={false}
-            value={defaultValues}
-        />
-    );
-};

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

@@ -1,74 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return <SvgImage alt="ALT" />;
-};
-
-export const SvgImageThatDoesntLoad = (args: StoryArgs): React.ReactElement => {
-    return (
-        <SvgImage
-            alt="ALT"
-            height={100}
-            width={500}
-            src={"http://httpstat.us/200?sleep=1000000"}
-        />
-    );
-};
-
-export const SvgImageBasic = (args: StoryArgs): React.ReactElement => {
-    return <SvgImage src={svgUrl} alt="ALT" />;
-};
-
-export const SvgImageWithFixedHeight = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <SvgImage height={50} src={svgUrl} alt="ALT" />;
-};
-
-export const SvgImageWithFixedWidth = (args: StoryArgs): React.ReactElement => {
-    return <SvgImage src={svgUrl} width={50} alt="ALT" />;
-};
-
-export const SvgImageWithExtraGraphieProps = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <SvgImage
-            extraGraphie={{
-                box: [200, 200],
-                range: [
-                    [0, 10],
-                    [0, 10],
-                ],
-                labels: ["ok"],
-            }}
-            src={svgUrl}
-            alt="ALT"
-        />
-    );
-};
-
-export const PngImage = (args: StoryArgs): React.ReactElement => {
-    return <SvgImage src={imgUrl} alt="ALT" />;
-};
-
-export const GraphieImage = (args: StoryArgs): React.ReactElement => {
-    return <SvgImage src={graphieUrl} alt="ALT" />;
-};

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

@@ -1,23 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return <TeX setAssetStatus={() => {}} children={args.equation} />;
-};

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

@@ -1,33 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return <TextInput {...defaultObject} />;
-};
-
-export const TestValueProvided = (args: StoryArgs): React.ReactElement => {
-    return <TextInput {...defaultObject} value="Test value" />;
-};
-
-export const AriaLabelTextProvided = (args: StoryArgs): React.ReactElement => {
-    return <TextInput {...defaultObject} labelText="Test label" />;
-};
-
-export const Disabled = (args: StoryArgs): React.ReactElement => {
-    return <TextInput {...defaultObject} disabled={true} />;
-};

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

@@ -1,32 +0,0 @@
-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 = (args: StoryArgs): 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__/tooltip.stories.tsx

@@ -1,52 +0,0 @@
-import {View} from "@khanacademy/wonder-blocks-core";
-import * as React from "react";
-
-import Tooltip, {HorizontalDirection, VerticalDirection} from "../tooltip";
-
-import type {Meta} from "@storybook/react";
-
-const meta: Meta<typeof Tooltip> = {
-    title: "Perseus/Components/Tooltip",
-};
-
-export const Shown = () => {
-    return (
-        <View style={{margin: "20px"}}>
-            Hover over{" "}
-            <Tooltip
-                show={true}
-                horizontalPosition={HorizontalDirection.Left}
-                horizontalAlign={HorizontalDirection.Left}
-                verticalPosition={VerticalDirection.Bottom}
-            >
-                <span>this</span>
-                <View style={{backgroundColor: "white"}}>
-                    You can read so much more if you want...
-                </View>
-            </Tooltip>{" "}
-            to see more information
-        </View>
-    );
-};
-
-export const Hidden = () => {
-    return (
-        <View style={{margin: "20px"}}>
-            Hover over{" "}
-            <Tooltip
-                show={false}
-                horizontalPosition={HorizontalDirection.Left}
-                horizontalAlign={HorizontalDirection.Left}
-                verticalPosition={VerticalDirection.Bottom}
-            >
-                <span>this</span>
-                <View style={{backgroundColor: "white"}}>
-                    You can read so much more if you want...
-                </View>
-            </Tooltip>{" "}
-            to see more information
-        </View>
-    );
-};
-
-export default meta;

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

@@ -1,41 +0,0 @@
-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;
-
-type Props = {
-    children: React.ReactNode;
-};
-
-const ForceZoomWrapper = ({children}: Props): React.ReactElement => (
-    <>
-        <h1>Click on equation to zoom/unzoom</h1>
-        <div style={{width: "50px"}}>{children}</div>
-    </>
-);
-
-export const KaTeX = (args: StoryArgs): React.ReactElement => {
-    return (
-        <ForceZoomWrapper>
-            <ZoomableTex children="\sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6}" />
-        </ForceZoomWrapper>
-    );
-};
-
-export const ComplexKaTeX = (args: StoryArgs): 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

@@ -1,49 +0,0 @@
-import * as React from "react";
-
-import Zoomable from "../zoomable";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Components/Zoomable",
-    argTypes: {
-        disableEntranceAnimation: {
-            control: {type: "boolean"},
-        },
-    },
-} as Story;
-
-type Bounds = {
-    width: number;
-    height: number;
-};
-
-const computeChildBounds = (
-    parentNode: HTMLElement,
-    parentBounds?: Bounds,
-): Bounds => {
-    return {
-        width: 1000,
-        height: 500,
-    };
-};
-
-export const ZoomableExample = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Zoomable
-            computeChildBounds={computeChildBounds}
-            disableEntranceAnimation={!!args.disableEntranceAnimation}
-        >
-            <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

@@ -1,19 +0,0 @@
-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"],
-            },
-        },
-    },
-};