@khanacademy/perseus-editor 4.1.4 → 4.1.6

package/src/testing-widgets.ts

@@ -1,11 +0,0 @@
-import ExampleGraphieWidget from "./widgets/example-graphie-widget";
-import ExampleWidget from "./widgets/example-widget";
-import SimpleMarkdownTester from "./widgets/simple-markdown-tester";
-
-import type {WidgetExports} from "@khanacademy/perseus";
-
-export default [
-    ExampleGraphieWidget,
-    ExampleWidget,
-    SimpleMarkdownTester,
-] as ReadonlyArray<WidgetExports>;

package/src/tex-error-view.tsx

@@ -1,90 +0,0 @@
-import {View} from "@khanacademy/wonder-blocks-core";
-import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import caretRight from "@phosphor-icons/core/bold/caret-right-bold.svg";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-type Props = {
-    errorList: ReadonlyArray<{math: string; message: string}>;
-};
-
-type State = {
-    showErrors: boolean;
-};
-
-/**
- * Displays a collapsable list of TeX rendering errors.
- */
-class TexErrorView extends React.Component<Props, State> {
-    state: State = {
-        showErrors: false,
-    };
-
-    handleToggleTexErrors: (arg1: React.MouseEvent) => void = (e) => {
-        this.setState({showErrors: !this.state.showErrors});
-    };
-
-    render(): React.ReactNode {
-        const {errorList} = this.props;
-        const {showErrors} = this.state;
-
-        const iconStyle = showErrors
-            ? styles.iconExpanded
-            : styles.iconCollapsed;
-
-        return (
-            <View style={styles.errorContainer}>
-                <View style={styles.title} onClick={this.handleToggleTexErrors}>
-                    <PhosphorIcon icon={caretRight} style={iconStyle} />
-                    &nbsp; TeX Errors ({errorList.length})
-                </View>
-                {showErrors && (
-                    <View style={styles.errorExplanation}>
-                        If your math doesn't display correctly, these errors
-                        might help you troubleshoot. Message #content-kitchen
-                        for help.
-                    </View>
-                )}
-                {showErrors &&
-                    errorList.map((e, index) => (
-                        <View style={styles.error} key={index}>
-                            <View style={{color: "red"}}>{e.math}</View>
-                            <View>{e.message}</View>
-                        </View>
-                    ))}
-            </View>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    title: {
-        backgroundColor: "#eee",
-        fontSize: "1.25em",
-        padding: "4px 10px",
-        cursor: "pointer",
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    errorContainer: {
-        border: "1px solid #ddd",
-        borderTop: "none",
-    },
-    errorExplanation: {
-        padding: "4px 10px",
-        backgroundColor: "pink",
-    },
-    error: {
-        padding: "4px 10px",
-    },
-    iconCollapsed: {
-        transition: ".15s",
-    },
-    iconExpanded: {
-        transform: "rotate(90deg)",
-        transition: ".15s",
-    },
-});
-
-export default TexErrorView;

package/src/util/points.test.ts

@@ -1,24 +0,0 @@
-import {parsePointCount} from "./points";
-
-describe("parsePointCount", () => {
-    it.each([
-        // Special case, 0 means unlimited points
-        ["0", "unlimited"],
-        // Regular cases, ints as a string
-        ["1", 1],
-        ["2", 2],
-        ["3", 3],
-        ["4", 4],
-        ["5", 5],
-        ["6", 6],
-        ["7", 7],
-        ["8", 8],
-        ["9", 9],
-        ["10", 10],
-        // Parse-error cases - all map to "unlimited"
-        ["non-numeric string", "unlimited"],
-        ["one", "unlimited"],
-    ])("Should parse %s to %s", (input, expected) => {
-        expect(parsePointCount(input)).toEqual(expected);
-    });
-});

package/src/util/points.ts

@@ -1,13 +0,0 @@
-export const UNLIMITED = "unlimited" as const;
-export type PointValue = number | typeof UNLIMITED;
-
-// Parses a string (ostensibly from some UI element that only supports string
-// types, such as a <select />) into a numeric point count or the special sigil
-// "unlimited". Note that 0 is a special case, and means "unlimited".
-export const parsePointCount = (points: string): PointValue => {
-    const parsed = parseInt(points, 10);
-    if (isNaN(parsed)) {
-        return UNLIMITED;
-    }
-    return parsed === 0 ? UNLIMITED : parsed;
-};

package/src/util/register-all-widgets-and-editors-for-testing.test.ts

@@ -1,17 +0,0 @@
-import {Widgets} from "@khanacademy/perseus";
-
-import {registerAllWidgetsAndEditorsForTesting} from "./register-all-widgets-and-editors-for-testing";
-
-describe("Registering all widgets and editors", () => {
-    it("should have an editor for every widget", () => {
-        registerAllWidgetsAndEditorsForTesting();
-
-        const allWidgetsTypes = Widgets.getAllWidgetTypes();
-
-        expect(allWidgetsTypes).not.toContain("undefined");
-
-        for (const widgetType of allWidgetsTypes) {
-            expect(Widgets.getEditor(widgetType)).toBeTruthy();
-        }
-    });
-});

package/src/util/register-all-widgets-and-editors-for-testing.ts

@@ -1,17 +0,0 @@
-/**
- * Some tests require some or all of the widgets and editors to be registered
- * in order for them to work. Requiring this file will register all of the
- * widgets and editors.
- */
-import {Widgets} from "@khanacademy/perseus";
-
-import allEditors from "../all-editors";
-import allWidgets from "../all-widgets";
-
-export const registerAllWidgetsAndEditorsForTesting = () => {
-    Widgets.registerWidgets(allWidgets);
-    Widgets.registerEditors(allEditors);
-
-    Widgets.replaceEditor("transformer", "deprecated-standin");
-    Widgets.replaceWidget("transformer", "deprecated-standin");
-};

package/src/version.ts

@@ -1,10 +0,0 @@
-// This file is processed by a Rollup plugin (replace) to inject the production
-// version number during the release build.
-// In dev, you'll never see the version number.
-
-import {addLibraryVersionToPerseusDebug} from "@khanacademy/perseus-core";
-
-const libName = "@khanacademy/perseus-editor";
-export const libVersion = "__lib_version__";
-
-addLibraryVersionToPerseusDebug(libName, libVersion);

package/src/widgets/__stories__/categorizer-editor.stories.tsx

@@ -1,24 +0,0 @@
-import {ApiOptions} from "@khanacademy/perseus";
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import CategorizerEditor from "../categorizer-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Categorizer Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return (
-        <CategorizerEditor
-            onChange={action("onChange")}
-            apiOptions={ApiOptions.defaults}
-        />
-    );
-};

package/src/widgets/__stories__/definition-editor.stories.tsx

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import DefinitionEditor from "../definition-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Definition Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <DefinitionEditor onChange={action("onChange")} />;
-};

package/src/widgets/__stories__/dropdown-editor.stories.tsx

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import DropdownEditor from "../dropdown-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Dropdown Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <DropdownEditor onChange={action("onChange")} />;
-};

package/src/widgets/__stories__/explanation-editor.stories.tsx

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import ExplanationEditor from "../explanation-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Explanation Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <ExplanationEditor onChange={action("onChange")} />;
-};

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

@@ -1,122 +0,0 @@
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui";
-import ExpressionEditor from "../expression-editor";
-
-import type {
-    PerseusRenderer,
-    APIOptions,
-    PerseusExpressionWidgetOptions,
-} from "@khanacademy/perseus";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Expression Editor",
-} as Story;
-
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-type Empty = Record<string, never>;
-
-type State = PerseusExpressionWidgetOptions;
-
-class WithDebug extends React.Component<Empty, State> {
-    constructor(props) {
-        super(props);
-
-        const baseWidget = question.widgets["expression 1"].options;
-        this.state = {
-            answerForms: baseWidget.answerForms,
-            times: baseWidget.times,
-            buttonSets: baseWidget.buttonSets,
-            functions: baseWidget.functions,
-        };
-    }
-
-    mergeQuestionWithState() {
-        return {
-            ...question,
-            widgets: {
-                ...question.widgets,
-                "expression 1": {
-                    ...question.widgets["expression 1"],
-                    options: {
-                        ...question.widgets["expression 1"].options,
-                        ...this.state,
-                    },
-                },
-            },
-        };
-    }
-
-    render(): React.ReactNode {
-        const apiOptions: APIOptions = Object.freeze({});
-
-        return (
-            <div className={css(styles.wrapper)}>
-                <div className={css(styles.editorWrapper)}>
-                    <ExpressionEditor
-                        {...this.state}
-                        onChange={(props: PerseusExpressionWidgetOptions) => {
-                            this.setState({
-                                ...props,
-                            });
-                        }}
-                    />
-                </div>
-                <RendererWithDebugUI
-                    question={this.mergeQuestionWithState()}
-                    apiOptions={apiOptions}
-                    reviewMode={true}
-                />
-            </div>
-        );
-    }
-}
-
-export const Debug = (args: StoryArgs): React.ReactElement => {
-    return <WithDebug />;
-};
-
-const question: PerseusRenderer = {
-    content:
-        "This is a cool expression question\n\n[[\u2603 expression 1]]\n\n",
-    images: {},
-    widgets: {
-        "expression 1": {
-            alignment: "default",
-            graded: true,
-            options: {
-                answerForms: [
-                    {
-                        considered: "correct",
-                        form: true,
-                        key: "0",
-                        simplify: false,
-                        value: "16+88i",
-                    },
-                ],
-                buttonSets: ["basic"],
-                functions: ["f", "g", "h"],
-                times: false,
-            },
-            static: false,
-            type: "expression",
-            version: {major: 1, minor: 0},
-        },
-    },
-};
-
-const styles = StyleSheet.create({
-    wrapper: {
-        padding: 50,
-    },
-    editorWrapper: {
-        paddingBottom: 100,
-    },
-});

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

@@ -1,72 +0,0 @@
-import {ApiOptions} from "@khanacademy/perseus";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
-import {action} from "@storybook/addon-actions";
-import {StyleSheet} from "aphrodite";
-import * as React from "react";
-
-import ImageEditor from "../image-editor";
-
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Image Editor",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        // The maximum width of a widget in the editor.
-        width: 338,
-        margin: 20,
-    },
-});
-
-const onChangeAction = action("onChange");
-
-const WithState = () => {
-    const widgetRef = React.useRef<ImageEditor>(null);
-    const [state, setState] = React.useState<
-        Partial<PropsFor<typeof ImageEditor>>
-    >({
-        backgroundImage: {
-            url: "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
-        },
-    });
-
-    return (
-        <View style={styles.wrapper}>
-            <LabelSmall
-                style={{fontStyle: "italic", marginBottom: Spacing.small_12}}
-            >
-                <b>Note</b> that this editor has a known-issue where it does not
-                calculate the image dimensions initially if they aren't
-                provided. It does update the dimensions when you blur the 'Image
-                url:' field.
-            </LabelSmall>
-            <ImageEditor
-                {...state}
-                apiOptions={ApiOptions.defaults}
-                onChange={(props) => {
-                    onChangeAction(props);
-
-                    setState({
-                        ...widgetRef.current?.serialize(),
-                        ...props,
-                    });
-                }}
-                ref={widgetRef}
-            />
-        </View>
-    );
-};
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <WithState />;
-};

package/src/widgets/__stories__/input-number-editor.stories.tsx

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import InputNumberEditor from "../input-number-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/InputNumber Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <InputNumberEditor onChange={action("onChange")} />;
-};

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

@@ -1,37 +0,0 @@
-import * as React from "react";
-import {useState} from "react";
-
-import InteractionEditor from "../interaction-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Interaction Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    const [elements, setElements] = useState();
-    const [graph, setGraph] = useState();
-
-    function handleChange(next) {
-        if (next.graph) {
-            setGraph(next.graph);
-        }
-
-        if (next.elements) {
-            setElements(next.elements);
-        }
-    }
-
-    return (
-        <InteractionEditor
-            onChange={handleChange}
-            elements={elements}
-            graph={graph}
-        />
-    );
-};

package/src/widgets/__stories__/label-image-editor.stories.tsx

@@ -1,99 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import LabelImageEditor from "../label-image-editor";
-
-import type {MarkerType} from "@khanacademy/perseus";
-
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-type Empty = Record<string, never>;
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Label Image Editor",
-} as Story;
-
-const styles = StyleSheet.create({
-    wrapper: {
-        // The maximum width of a widget in the editor.
-        width: 338,
-    },
-});
-
-type State = {
-    imageAlt: string;
-    choices: ReadonlyArray<string>;
-    imageUrl: string;
-    imageWidth: number;
-    imageHeight: number;
-    markers: ReadonlyArray<MarkerType>;
-};
-
-class WithState extends React.Component<Empty, State> {
-    // @ts-expect-error [FEI-5003] - TS2564 - Property '_widget' has no initializer and is not definitely assigned in the constructor.
-    _widget: LabelImageEditor;
-
-    state = {
-        imageAlt: "Map of Europe",
-        choices: [
-            "Lamborghini",
-            "BMW",
-            "Volkswagen",
-            "Fiat",
-            "Porsche",
-            "Ferrari",
-        ],
-        imageUrl:
-            "https://ka-perseus-images.s3.amazonaws.com/2ee5fc32e35c5178373b39fd304b325b2994c913.png",
-        imageWidth: 1280,
-        imageHeight: 1024,
-        markers: [
-            {
-                answers: ["BMW", "Volkswagen", "Porsche"],
-                label: "Germany",
-                x: 37.3,
-                y: 53.6,
-            },
-            {
-                answers: [],
-                label: "",
-                x: 21,
-                y: 46,
-            },
-            {
-                answers: ["Lamborghini", "Fiat", "Ferrari"],
-                label: "Italy",
-                x: 41.4,
-                y: 78.8,
-            },
-        ],
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className={css(styles.wrapper)}>
-                <LabelImageEditor
-                    {...this.state}
-                    onChange={(props) =>
-                        this.setState({
-                            ...this._widget.serialize(),
-                            ...props,
-                        })
-                    }
-                    // @ts-expect-error [FEI-5003] - TS2322 - Type 'LabelImageEditor | null' is not assignable to type 'LabelImageEditor'.
-                    ref={(widget) => (this._widget = widget)}
-                />
-            </div>
-        );
-    }
-}
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <WithState />;
-};

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

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import MatcherEditor from "../matcher-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Matcher Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <MatcherEditor onChange={action("onChange")} />;
-};

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

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import NumberLineEditor from "../number-line-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/Number Line Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <NumberLineEditor onChange={action("onChange")} />;
-};

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

@@ -1,18 +0,0 @@
-import {action} from "@storybook/addon-actions";
-import * as React from "react";
-
-import NumericInputEditor from "../numeric-input-editor";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Editor/Widgets/NumericInput Editor",
-} as Story;
-
-export const Default = (args: StoryArgs): React.ReactElement => {
-    return <NumericInputEditor onChange={action("onChange")} />;
-};