@khanacademy/perseus 19.1.4 → 19.1.6

package/src/widgets/categorizer.tsx

@@ -1,344 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable react/sort-comp */
-import {linterContextDefault} from "@khanacademy/perseus-linter";
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import {StyleSheet, css} from "aphrodite";
-import classNames from "classnames";
-import * as React from "react";
-import _ from "underscore";
-
-import InlineIcon from "../components/inline-icon";
-import {iconCircle, iconCircleThin} from "../icon-paths";
-import * as Changeable from "../mixins/changeable";
-import WidgetJsonifyDeprecated from "../mixins/widget-jsonify-deprecated";
-import {ClassNames as ApiClassNames} from "../perseus-api";
-import Renderer from "../renderer";
-import mediaQueries from "../styles/media-queries";
-import sharedStyles from "../styles/shared";
-import Util from "../util";
-
-import type {PerseusCategorizerWidgetOptions} from "../perseus-types";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
-
-type UserInput = any;
-
-export type Rubric = PerseusCategorizerWidgetOptions;
-
-type Props = WidgetProps<RenderProps, Rubric> & {
-    values: ReadonlyArray<string>;
-};
-
-type DefaultProps = {
-    items: Props["items"];
-    categories: Props["categories"];
-    values: Props["values"];
-    linterContext: Props["linterContext"];
-};
-
-type State = {
-    uniqueId: string;
-};
-
-export class Categorizer extends React.Component<Props, State> {
-    static defaultProps: DefaultProps = {
-        items: [],
-        categories: [],
-        values: [],
-        linterContext: linterContextDefault,
-    };
-
-    state: State = {
-        uniqueId: _.uniqueId("perseus_radio_"),
-    };
-
-    change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-        return Changeable.change.apply(this, args);
-    };
-
-    getUserInput: () => UserInput = () => {
-        return Categorizer.getUserInputFromProps(this.props);
-    };
-
-    render(): React.ReactNode {
-        const self = this;
-
-        // In this context, isMobile is used to differentiate mobile from
-        // desktop.
-        const isMobile = this.props.apiOptions.isMobile;
-        let indexedItems = this.props.items.map((item, n) => [item, n]);
-        if (this.props.randomizeItems) {
-            // @ts-expect-error - TS4104 - The type 'readonly (string | number)[][]' is 'readonly' and cannot be assigned to the mutable type '(string | number)[][]'. | TS2345 - Argument of type 'number | null | undefined' is not assignable to parameter of type 'number | RNG'.
-            indexedItems = Util.shuffle(indexedItems, this.props.problemNum);
-        }
-
-        const table = (
-            <table className={"categorizer-table " + css(styles.mobileTable)}>
-                <thead>
-                    <tr>
-                        <td className={css(styles.emptyHeaderCell)} />
-                        {this.props.categories.map((category, i) => {
-                            // Array index is the correct key here, as that's
-                            // how category grading actually works -- no way
-                            // to add or remove categories or items in the
-                            // middle. (If we later add that, this should be
-                            // fixed.)
-                            return (
-                                <th className={css(styles.header)} key={i}>
-                                    <Renderer
-                                        content={category}
-                                        linterContext={this.props.linterContext}
-                                    />
-                                </th>
-                            );
-                        })}
-                    </tr>
-                </thead>
-                <tbody>
-                    {indexedItems.map((indexedItem) => {
-                        const item = indexedItem[0];
-                        const itemNum = indexedItem[1];
-                        const uniqueId = self.state.uniqueId + "_" + itemNum;
-                        return (
-                            <tr key={itemNum}>
-                                <td>
-                                    <Renderer
-                                        // @ts-expect-error - TS2322 - Type 'string | number' is not assignable to type 'string | undefined'.
-                                        content={item}
-                                        linterContext={this.props.linterContext}
-                                    />
-                                </td>
-                                {self.props.categories.map(
-                                    (catName, catNum) => {
-                                        const selected =
-                                            self.props.values[itemNum] ===
-                                            catNum;
-                                        return (
-                                            <td
-                                                className={
-                                                    "category " +
-                                                    css(styles.cell)
-                                                }
-                                                key={catNum}
-                                            >
-                                                {/* a pseudo-label: toggle the
-                                value of the checkbox when this div or the
-                                checkbox is clicked */}
-                                                <div
-                                                    className={
-                                                        ApiClassNames.INTERACTIVE
-                                                    }
-                                                    role="button"
-                                                    aria-label={catName}
-                                                    // eslint-disable-next-line react/jsx-no-bind
-                                                    onClick={this.onChange.bind(
-                                                        this,
-                                                        itemNum,
-                                                        catNum,
-                                                    )}
-                                                >
-                                                    {isMobile && (
-                                                        <input
-                                                            type="radio"
-                                                            name={uniqueId}
-                                                            className={css(
-                                                                sharedStyles.responsiveInput,
-                                                                sharedStyles.responsiveRadioInput,
-                                                            )}
-                                                            checked={selected}
-                                                            // eslint-disable-next-line react/jsx-no-bind
-                                                            onChange={this.onChange.bind(
-                                                                this,
-                                                                itemNum,
-                                                                catNum,
-                                                            )}
-                                                            onClick={(e) =>
-                                                                e.stopPropagation()
-                                                            }
-                                                        />
-                                                    )}
-                                                    {!isMobile && (
-                                                        <span
-                                                            className={css(
-                                                                styles.radioSpan,
-                                                                selected &&
-                                                                    styles.checkedRadioSpan,
-                                                                this.props
-                                                                    .static &&
-                                                                    selected &&
-                                                                    styles.staticCheckedRadioSpan,
-                                                            )}
-                                                        >
-                                                            {selected ? (
-                                                                <InlineIcon
-                                                                    {...iconCircle}
-                                                                />
-                                                            ) : (
-                                                                <InlineIcon
-                                                                    {...iconCircleThin}
-                                                                />
-                                                            )}
-                                                        </span>
-                                                    )}
-                                                </div>
-                                            </td>
-                                        );
-                                    },
-                                )}
-                            </tr>
-                        );
-                        /* eslint-enable max-len */
-                    })}
-                </tbody>
-            </table>
-        );
-
-        // TODO(benkomalo): kill CSS-based styling and move everything to
-        // aphrodite.
-        const extraClassNames = classNames({
-            "categorizer-container": true,
-            "static-mode": this.props.static,
-        });
-        const inlineStyles = this.props.apiOptions.isMobile
-            ? [styles.fullBleedContainer]
-            : [];
-
-        return (
-            <div className={extraClassNames + " " + css(...inlineStyles)}>
-                {table}
-            </div>
-        );
-    }
-
-    onChange: (arg1: number, arg2: number) => void = (itemNum, catNum) => {
-        const values = [...this.props.values];
-        // @ts-expect-error - TS2322 - Type 'number' is not assignable to type 'never'.
-        values[itemNum] = catNum;
-        this.change("values", values);
-        this.props.trackInteraction();
-    };
-
-    simpleValidate: (arg1: Rubric) => PerseusScore = (rubric) => {
-        return Categorizer.validate(this.getUserInput(), rubric);
-    };
-
-    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
-        let completed = true;
-        let allCorrect = true;
-        _.each(rubric.values, function (value, i) {
-            if (userInput.values[i] == null) {
-                completed = false;
-            }
-            if (userInput.values[i] !== value) {
-                allCorrect = false;
-            }
-        });
-        if (!completed) {
-            return {
-                type: "invalid",
-                message: i18n._(
-                    "Make sure you select something for every row.",
-                ),
-            };
-        }
-        return {
-            type: "points",
-            earned: allCorrect ? 1 : 0,
-            total: 1,
-            message: null,
-        };
-    }
-
-    static getUserInputFromProps(props: Props): UserInput {
-        return WidgetJsonifyDeprecated.getUserInputFromProps(props);
-    }
-}
-
-// TODO(benkomalo): inject page-margin into Perseus instead of hardcoding.
-const pageMargin = 16;
-
-// Stylesheets aren't directly testable
-/* c8 ignore next */
-const styles = StyleSheet.create({
-    mobileTable: {
-        [mediaQueries.smOrSmaller]: {
-            minWidth: "auto",
-        },
-    },
-
-    fullBleedContainer: {
-        [mediaQueries.mdOrSmaller]: {
-            marginLeft: -pageMargin,
-            marginRight: -pageMargin,
-            overflowX: "auto",
-        },
-    },
-
-    header: {
-        textAlign: "center",
-        verticalAlign: "bottom",
-    },
-
-    cell: {
-        textAlign: "center",
-        padding: 0,
-        color: "#ccc",
-        verticalAlign: "middle",
-    },
-
-    emptyHeaderCell: {
-        backgroundColor: "inherit",
-        borderBottom: "2px solid #ccc",
-    },
-
-    radioSpan: {
-        fontSize: 30,
-        paddingRight: 3,
-
-        ":hover": {
-            color: "#999",
-        },
-    },
-
-    checkedRadioSpan: {
-        color: "#333",
-    },
-
-    // .static-mode is applied by the Categorizer when the rendered
-    // widget is static; in this case we gray out the choices to show
-    // the user that the widget can't be interacted with.
-    staticCheckedRadioSpan: {
-        color: "#888",
-    },
-});
-
-type RenderProps = {
-    items: PerseusCategorizerWidgetOptions["items"];
-    categories: PerseusCategorizerWidgetOptions["categories"];
-    randomizeItems: PerseusCategorizerWidgetOptions["randomizeItems"];
-    // Depends on whether the widget is in static mode
-    values?: PerseusCategorizerWidgetOptions["values"];
-};
-
-export default {
-    name: "categorizer",
-    displayName: "Categorizer",
-    widget: Categorizer,
-    transform: (
-        widgetOptions: PerseusCategorizerWidgetOptions,
-    ): RenderProps => {
-        return _.pick(widgetOptions, "items", "categories", "randomizeItems");
-    },
-    staticTransform: (
-        editorProps: PerseusCategorizerWidgetOptions,
-    ): RenderProps => {
-        return _.pick(
-            editorProps,
-            "items",
-            "categories",
-            "values",
-            "randomizeItems",
-        );
-    },
-    isLintable: true,
-} as WidgetExports<typeof Categorizer>;

package/src/widgets/cs-program.tsx

@@ -1,227 +0,0 @@
-/**
- * This widget is for embedding Khan Academy CS programs.
- */
-
-import {StyleSheet, css} from "aphrodite";
-import $ from "jquery";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import {getDependencies} from "../dependencies";
-import * as Changeable from "../mixins/changeable";
-import {articleMaxWidthInPx} from "../styles/constants";
-import Util from "../util";
-import {isFileProtocol} from "../util/mobile-native-utils";
-import {toAbsoluteUrl} from "../util/url-utils";
-
-import type {WidgetExports} from "../types";
-
-const {updateQueryString} = Util;
-
-function getUrlFromProgramID(programID: any) {
-    const {InitialRequestUrl} = getDependencies();
-
-    const path =
-        "/computer-programming/program/" +
-        `${programID}/embedded?embed=yes&author=no`;
-    // When loading scratchpads in our native apps, the current URL will exist
-    // as a `file://` URL. In this case, we want to reference `ka.org` instead
-    // of defaulting to what we get from `toAbsoluteUrl`.
-    if (isFileProtocol(InitialRequestUrl.protocol)) {
-        return `https://khanacademy.org${path}`;
-    }
-
-    return toAbsoluteUrl(path);
-}
-
-/* This renders the scratchpad in an iframe and handles validation via
- * window.postMessage */
-class CSProgram extends React.Component<any> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        programID: PropTypes.string,
-        programType: PropTypes.oneOf(["pjs", "sql", "webpage"]),
-        width: PropTypes.number,
-        height: PropTypes.number,
-        // eslint-disable-next-line react/forbid-prop-types
-        settings: PropTypes.array,
-        showEditor: PropTypes.bool,
-        showButtons: PropTypes.bool,
-        status: PropTypes.oneOf(["incomplete", "incorrect", "correct"]),
-        message: PropTypes.string,
-    };
-
-    // The widget's grading function
-    static validate(state: any, rubric: any): any {
-        // The iframe can tell us whether it's correct or incorrect,
-        //  and pass an optional message
-        if (state.status === "correct") {
-            return {
-                type: "points",
-                earned: 1,
-                total: 1,
-                message: state.message || null,
-            };
-        }
-        if (state.status === "incorrect") {
-            return {
-                type: "points",
-                earned: 0,
-                total: 1,
-                message: state.message || null,
-            };
-        }
-        return {
-            type: "invalid",
-            message: "Keep going, you're not there yet!",
-        };
-    }
-
-    static defaultProps: any = {
-        showEditor: false,
-        showButtons: false,
-        status: "incomplete",
-        // optional message
-        message: null,
-    };
-
-    componentDidMount() {
-        $(window).on("message", this.handleMessageEvent);
-    }
-
-    componentWillUnmount() {
-        $(window).off("message", this.handleMessageEvent);
-    }
-
-    handleMessageEvent: (arg1: any) => void = (e) => {
-        // We receive data from the iframe that contains {passed: true/false}
-        //  and use that to set the status
-        // It could also contain an optional message
-        let data: Record<string, any> = {};
-        try {
-            data = JSON.parse(e.originalEvent.data);
-        } catch (err: any) {
-            return;
-        }
-
-        if (_.isUndefined(data.testsPassed)) {
-            return;
-        }
-
-        const status = data.testsPassed ? "correct" : "incorrect";
-        this.change({
-            status: status,
-            message: data.message,
-        });
-    };
-
-    change: (...args: ReadonlyArray<unknown>) => any = (...args) => {
-        // @ts-expect-error - TS2345 - Argument of type 'readonly unknown[]' is not assignable to parameter of type 'any[]'.
-        return Changeable.change.apply(this, args);
-    };
-
-    simpleValidate: (arg1: any) => any = (rubric) => {
-        return CSProgram.validate(
-            {
-                status: this.props.status,
-                message: this.props.message,
-            },
-            rubric,
-        );
-    };
-
-    render(): React.ReactNode {
-        if (!this.props.programID) {
-            return <div />;
-        }
-
-        let styleContainer = false;
-        let url = getUrlFromProgramID(this.props.programID);
-        let className;
-        const style = {
-            height: this.props.height,
-            width: "100%",
-        } as const;
-
-        if (this.props.showEditor) {
-            url += "&editor=yes";
-            className = "perseus-scratchpad-editor";
-        } else {
-            url += `&editor=no&width=${articleMaxWidthInPx}`;
-            className = "perseus-scratchpad";
-            if (this.props.programType !== "webpage") {
-                styleContainer = true;
-            }
-        }
-
-        if (this.props.showButtons) {
-            url += "&buttons=yes";
-            // Matches templates/scratchpads/embed_script.js
-            // Toolbar height is 66, border height is 1 pixel
-            // @ts-expect-error - TS2540 - Cannot assign to 'height' because it is a read-only property.
-            style.height += 67;
-        } else {
-            url += "&buttons=no";
-        }
-
-        // Turn array of [{name: "", value: ""}] into object
-        if (this.props.settings) {
-            const settings: Record<string, any> = {};
-            _.each(this.props.settings, function (setting) {
-                if (setting.name && setting.value) {
-                    settings[setting.name] = setting.value;
-                }
-            });
-            // This becomes available to programs as Program.settings()
-            url = updateQueryString(url, "settings", JSON.stringify(settings));
-        }
-
-        const sandboxOptions = [
-            "allow-popups",
-            "allow-same-origin",
-            "allow-scripts",
-            "allow-top-navigation",
-        ].join(" ");
-
-        // We sandbox the iframe so that we allowlist only the functionality
-        //  that we need. This makes it a bit safer in case some content
-        //  creator "went wild".
-        // http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/
-        return (
-            <div
-                className={css(
-                    styles.widthOverride,
-                    styleContainer && styles.container,
-                )}
-            >
-                <iframe
-                    sandbox={sandboxOptions}
-                    src={url}
-                    style={style}
-                    className={className}
-                    allowFullScreen={true}
-                />
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    // Override the inherited width from the perseus paragraph class
-    // 820 is minimum width for 420px editor and 400px canvas
-    widthOverride: {
-        width: 820,
-    },
-    container: {
-        margin: "auto",
-    },
-});
-
-export default {
-    name: "cs-program",
-    displayName: "CS Program",
-    supportedAlignments: ["block", "full-width"],
-    widget: CSProgram,
-    hidden: true,
-} as WidgetExports<typeof CSProgram>;

package/src/widgets/definition.tsx

@@ -1,121 +0,0 @@
-import Clickable from "@khanacademy/wonder-blocks-clickable";
-import Color from "@khanacademy/wonder-blocks-color";
-import {Popover, PopoverContentCore} from "@khanacademy/wonder-blocks-popover";
-import * as React from "react";
-
-import {DefinitionConsumer} from "../definition-context";
-import Renderer from "../renderer";
-
-import type {
-    PerseusRenderer,
-    PerseusDefinitionWidgetOptions,
-} from "../perseus-types";
-import type {PerseusScore, WidgetExports, WidgetProps} from "../types";
-
-// TODO(FEI-5054): Figure out how to get global .d.ts files working with monorepos
-type Empty = Record<never, never>;
-
-type RenderProps = PerseusDefinitionWidgetOptions;
-
-type Rubric = PerseusDefinitionWidgetOptions;
-
-type UserInput = Empty;
-
-type DefinitionProps = WidgetProps<RenderProps, Rubric> & {
-    widgets: PerseusRenderer["widgets"];
-};
-
-type DefaultProps = {
-    togglePrompt: string;
-    definition: string;
-};
-
-class Definition extends React.Component<DefinitionProps> {
-    static defaultProps: DefaultProps = {
-        togglePrompt: "define me",
-        definition: "definition goes here",
-    };
-
-    static validate(userInput: UserInput, rubric: Rubric): PerseusScore {
-        return {
-            type: "points",
-            earned: 0,
-            total: 0,
-            message: null,
-        };
-    }
-
-    getUserInput: () => UserInput = () => {
-        return {};
-    };
-
-    simpleValidate: (arg1: Rubric) => PerseusScore = (rubric) => {
-        return Definition.validate(this.getUserInput(), rubric);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <DefinitionConsumer>
-                {({activeDefinitionId, setActiveDefinitionId}) => (
-                    <Popover
-                        content={
-                            <PopoverContentCore
-                                color="white"
-                                style={styles.tooltipBody}
-                                closeButtonVisible={true}
-                            >
-                                <Renderer
-                                    apiOptions={this.props.apiOptions}
-                                    content={this.props.definition}
-                                    widgets={this.props.widgets}
-                                />
-                            </PopoverContentCore>
-                        }
-                        opened={activeDefinitionId === this.props.widgetId}
-                        onClose={() => setActiveDefinitionId(null)}
-                        placement="top"
-                    >
-                        <Clickable
-                            onClick={() => {
-                                this.props.trackInteraction();
-                                setActiveDefinitionId(this.props.widgetId);
-                            }}
-                        >
-                            {({hovered, focused, pressed}) => (
-                                <span
-                                    style={{
-                                        color: Color.blue,
-                                        borderBottom:
-                                            hovered || focused || pressed
-                                                ? `2px solid ${Color.blue}`
-                                                : "none",
-                                    }}
-                                >
-                                    {this.props.togglePrompt}
-                                </span>
-                            )}
-                        </Clickable>
-                    </Popover>
-                )}
-            </DefinitionConsumer>
-        );
-    }
-}
-
-const styles = {
-    tooltipBody: {
-        color: Color.offBlack,
-        fontSize: 20,
-        fontWeight: 500,
-        lineHeight: "30px",
-    },
-} as const;
-
-export default {
-    name: "definition",
-    displayName: "Definition",
-    accessible: true,
-    defaultAlignment: "inline",
-    widget: Definition,
-    transform: (x: any) => x,
-} as WidgetExports<typeof Definition>;