@khanacademy/perseus 19.1.4 → 19.1.6

package/src/components/icon.tsx

@@ -1,141 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/**
- * SVG Icon React Component
- *
- * This component is designed to take in SVG paths and render icons based upon
- * them. If you are looking for an icon that we've used before you should look
- * in `icon-paths.js` which is a reference file for all the SVG paths that
- * we've used. You'll need to copy the object from that file into whichever
- * file you're using the icon and explicitly pass it in to the <Icon/> React
- * component.
- *
- * Sample usage:
- *
- *   const dropdownIcon = `M5,6L0,0L10,0`;
- *   <Icon icon={dropdownIcon} />
- *
- * Or:
- *
- *   const dropdownIcon = {
- *       path: `M5,6L0,0L10,0`,
- *       height: 10,
- *       width: 10,
- *   };
- *   <Icon icon={dropdownIcon} size={20} />
- *
- * A full list of all the existing icons can be seen here:
- * http://localhost:8080/react-sandbox/shared-styles-package/icon.jsx.fixture.js
- *
- * If you want to add an entirely new icon please read the note inside
- * the `icon-paths.js` file.
- */
-
-import * as React from "react";
-
-import type {CSSProperties} from "aphrodite";
-
-// WARNING: This determines the *viewport* width and height, so a change here
-//          requires scaling the values of every SVG path passed in as a string
-//          without corresponding `width` and `height` values.
-const BASE_ICON_SIZE = 10;
-
-// If you pass in an object you need to specify an SVG path to
-// render along with the width and height of the path (to ensure
-// that it gets scaled correctly).
-export type IconType = {
-    height: number;
-    path: string;
-    width: number;
-};
-
-type Props = {
-    // The className used for the SVG object (see the pathClassName prop as
-    // well).
-    className?: string;
-    // If you don't want to use Aphrodite, you can pass a style to the
-    // icon.
-    style?: CSSProperties;
-    // Accessible description for this icon. If omitted, icon will be
-    // aria-hidden.
-    title?: string;
-    // The color of the icon. Defaults to "currentColor".
-    color: string;
-    // Whether the SVG can be focused on when tab-bing around in IE.
-    focusable?: boolean;
-    // The SVG icon
-    icon: // If you pass in a string then it's assumed to be just an SVG
-    // path with a default size of 10 pixels wide and tall.
-    IconType | string;
-    // To be used for custom styling of the component. If using with
-    // Aphrodite you'll want to pre-compute the class string by calling
-    // css(). Additionally you need to remember that many of the SVG
-    // properties are similar, but different. If you want to change the
-    // color of the path you'll need to set the `fill` property.
-    pathClassName?: string;
-    // The height of the icon. Defaults to 1em.
-    size?: number;
-    // Alt text set on SVG icon
-    alt?: string;
-};
-
-class Icon extends React.Component<Props> {
-    static defaultProps: {
-        color: string;
-    } = {
-        color: "currentColor",
-    };
-
-    render(): React.ReactNode {
-        const {color, pathClassName, className, title, style, alt} = this.props;
-        let {icon, size} = this.props;
-        let units = "";
-
-        // If the raw path was passed in, wrap it in the format that we expect.
-        if (typeof icon === "string") {
-            icon = {
-                path: icon,
-                width: BASE_ICON_SIZE,
-                height: BASE_ICON_SIZE,
-            };
-        }
-
-        // `size` defaults to 1em to mirror the behavior of Font Awesome.
-        if (typeof size !== "number") {
-            size = 1;
-            units = "em";
-        }
-
-        const height = size;
-        const width = (height / icon.height) * icon.width;
-
-        // NOTE: We assume that the viewBox is cropped and aligned to (0, 0),
-        //       but icons can be defined differently. At some point we might
-        //       want to add these attributes to icon-paths.js, but for now
-        //       this is a fairly safe assumption.
-        const xMin = 0;
-        const yMin = 0;
-
-        const focusable = !!this.props.focusable;
-
-        return (
-            <svg
-                role="img"
-                alt={alt}
-                aria-label={title}
-                aria-hidden={title ? null : true}
-                className={className}
-                style={style}
-                // @ts-expect-error - TS2322 - Type 'string' is not assignable to type '"auto" | Booleanish | undefined'.
-                focusable={focusable.toString()}
-                width={width + units}
-                height={height + units}
-                viewBox={`${xMin} ${yMin} ${icon.width} ${icon.height}`}
-            >
-                {!!title && <title>{title}</title>}
-                <path className={pathClassName} fill={color} d={icon.path} />
-            </svg>
-        );
-    }
-}
-
-export default Icon;

package/src/components/image-loader.tsx

@@ -1,177 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable jsx-a11y/alt-text, react/no-unsafe */
-// TODO(scottgrant): Enable the alt-text eslint rule above.
-/**
- * Component to display an image (or other React components) while the desired
- * image is loading.
- *
- * Derived from
- * https://github.com/hzdg/react-imageloader/blob/master/src/index.js
- * to better suit our environment/build tools. Additionally, this one does
- * not introduce a wrapper element, which makes styling easier.
- */
-
-import * as React from "react";
-
-import {getDependencies} from "../dependencies";
-
-import type {Dimensions} from "../types";
-
-const Status = {
-    PENDING: "pending",
-    LOADING: "loading",
-    LOADED: "loaded",
-    FAILED: "failed",
-} as const;
-
-export type ImageProps = {
-    alt: string;
-    title?: string;
-    ["aria-hidden"]?: boolean;
-    tabIndex?: string;
-    onClick?: (e: React.SyntheticEvent) => void;
-    style?: Dimensions;
-};
-
-type Props = {
-    children?: React.ReactNode;
-    imgProps: ImageProps;
-    onError?: (event: Event) => void;
-    onLoad?: (event: Event) => void;
-    // When the DOM updates to replace the preloader with the image, or
-    // vice-versa, we trigger this callback.
-    onUpdate: (status: typeof Status[keyof typeof Status]) => void;
-    preloader: () => React.ReactElement | null | undefined;
-    src: string;
-};
-
-type State = {
-    status: typeof Status[keyof typeof Status];
-};
-
-class ImageLoader extends React.Component<Props, State> {
-    img: HTMLImageElement | null | undefined;
-
-    constructor(props: Props) {
-        super(props);
-        this.state = {status: props.src ? Status.LOADING : Status.PENDING};
-    }
-
-    componentDidMount() {
-        if (this.state.status === Status.LOADING) {
-            this.createLoader();
-        }
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        if (this.props.src !== nextProps.src) {
-            this.setState({
-                status: nextProps.src ? Status.LOADING : Status.PENDING,
-            });
-        }
-    }
-
-    componentDidUpdate(prevProps: Props, prevState: State) {
-        if (this.state.status === Status.LOADING && !this.img) {
-            this.createLoader();
-        }
-
-        if (prevState.status !== this.state.status) {
-            this.props.onUpdate(this.state.status);
-        }
-    }
-
-    componentWillUnmount() {
-        this.destroyLoader();
-    }
-
-    createLoader: () => void = () => {
-        this.destroyLoader(); // We can only have one loader at a time.
-
-        this.img = new Image();
-        this.img.onload = this.handleLoad;
-        this.img.onerror = this.handleError;
-        this.img.src = this.props.src;
-    };
-
-    destroyLoader: () => void = () => {
-        if (this.img) {
-            this.img.onload = null;
-            this.img.onerror = null;
-            this.img = null;
-        }
-    };
-
-    handleLoad: (event: Event) => void = (event: Event) => {
-        this.destroyLoader();
-        this.setState({status: Status.LOADED});
-
-        if (this.props.onLoad) {
-            this.props.onLoad(event);
-        }
-    };
-
-    handleError: (error: Event) => void = (error: Event) => {
-        this.destroyLoader();
-        this.setState({status: Status.FAILED});
-
-        if (this.props.onError) {
-            this.props.onError(error);
-        }
-    };
-
-    renderImg: () => React.ReactElement<React.ComponentProps<"img">> = () => {
-        const {src, imgProps} = this.props;
-        let onKeyUp = null;
-        let onKeyDown = null;
-        if (imgProps.onClick != null) {
-            // @ts-expect-error - TS2322 - Type '(e: React.KeyboardEvent) => void' is not assignable to type 'null'.
-            onKeyUp = (e: React.KeyboardEvent) => {
-                // 13 is enter key, 32 is space key
-                if (e.keyCode === 13 || e.keyCode === 32) {
-                    imgProps.onClick && imgProps.onClick(e);
-                }
-            };
-            // @ts-expect-error - TS2322 - Type '(e: React.KeyboardEvent) => void' is not assignable to type 'null'.
-            onKeyDown = (e: React.KeyboardEvent) => {
-                // 32 is space key
-                if (e.keyCode === 32) {
-                    // don't scroll on space when the image is focused
-                    e.preventDefault();
-                }
-            };
-        }
-        const staticUrl = getDependencies().staticUrl;
-
-        return (
-            <img
-                src={staticUrl(src)}
-                // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'KeyboardEventHandler<HTMLImageElement> | undefined'.
-                onKeyUp={onKeyUp}
-                // @ts-expect-error - TS2322 - Type 'null' is not assignable to type 'KeyboardEventHandler<HTMLImageElement> | undefined'.
-                onKeyDown={onKeyDown}
-                {...imgProps}
-            />
-        );
-    };
-
-    render(): React.ReactNode {
-        switch (this.state.status) {
-            case Status.LOADED:
-                return this.renderImg();
-
-            case Status.FAILED:
-                if (this.props.children) {
-                    return this.props.children;
-                }
-                break;
-            default:
-                if (this.props.preloader) {
-                    return this.props.preloader();
-                }
-        }
-        return null;
-    }
-}
-
-export default ImageLoader;

package/src/components/info-tip/info-tip.tsx

@@ -1,144 +0,0 @@
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-const colors = {
-    grayLight: "#aaa",
-    basicBorderColor: "#ccc",
-    white: "#fff",
-} as const;
-
-const triangleBeforeAfter = {
-    borderBottom: "9px solid transparent",
-    borderTop: "9px solid transparent",
-    content: '" "',
-    height: "0",
-    position: "absolute",
-    top: "0",
-    width: "0",
-} as const;
-
-const styles = StyleSheet.create({
-    infoTip: {
-        display: "inline-block",
-        marginLeft: "5px",
-        position: "relative",
-    },
-
-    infoTipContainer: {
-        position: "absolute",
-        top: "-12px",
-        left: "22px",
-        zIndex: 1000,
-    },
-
-    infoTipTriangle: {
-        height: "10px",
-        left: "0",
-        position: "absolute",
-        top: "8px",
-        width: "0",
-        zIndex: 1,
-
-        ":before": {
-            ...triangleBeforeAfter,
-            borderRight: "9px solid #bbb",
-            right: "0",
-        },
-
-        ":after": {
-            ...triangleBeforeAfter,
-            borderRight: `9px solid ${colors.white}`,
-            right: "-1px",
-        },
-    },
-
-    verticalShadow: {
-        border: `1px solid ${colors.basicBorderColor}`,
-        boxShadow: `0 1px 3px ${colors.basicBorderColor}`,
-        borderBottom: `1px solid ${colors.grayLight}`,
-    },
-
-    infoTipContentContainer: {
-        background: colors.white,
-        padding: "5px 10px",
-        width: "240px",
-    },
-});
-
-const questionMark =
-    "data:image/png;base64," +
-    "iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBB" +
-    "ZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/" +
-    "eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+" +
-    "IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2Jl" +
-    "IFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAg" +
-    "ICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5" +
-    "LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9" +
-    "IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHht" +
-    "bG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3Vy" +
-    "Y2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHht" +
-    "cE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2N2M3NTAxYS04YmVlLTQ0M2Mt" +
-    "YmRiNS04OGM2N2IxN2NhYzEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUJCRTk4" +
-    "Qjc4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5p" +
-    "aWQ6OUJCRTk4QjY4NjAwMTFFMzg3QUJDNEI4Mzk2QTRGQkQiIHhtcDpDcmVhdG9yVG9v" +
-    "bD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRG" +
-    "cm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NGE5ZDI0OTMtODk1NC00OGFkLTlh" +
-    "MTgtZDAwM2MwYWNjNDJlIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY3Yzc1MDFh" +
-    "LThiZWUtNDQzYy1iZGI1LTg4YzY3YjE3Y2FjMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4g" +
-    "PC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pqm89uYAAADM" +
-    "SURBVHjaXJA9DoJAEIUH1M4TUHIFsCMGen9OwCGw1YRGW2ntKel0exsojHIBC0ouQAyU" +
-    "viFDstmXfNmZeS+zm7XSNCXRFiRgJf0bXIHixpbhGdxBBJYC1w/xaA424MhNEATkui71" +
-    "fU9KqfEU78UbD9PdbJRlOdae55GmhIP+1NV1TcMwkOM41DSNHvRtMhTHMRVFQW3b6mOL" +
-    "gx99kue5GRp/gIOZuZGvNpTNwjD8oliANU+qqqKu6/TQBdymN57AHjzBT+B6Jx79BRgA" +
-    "vc49kQA4yxgAAAAASUVORK5CYII=";
-
-type Props = {
-    children: React.ReactNode;
-};
-
-type State = {
-    hover: boolean;
-};
-
-class InfoTip extends React.Component<Props, State> {
-    state: State = {hover: false};
-
-    handleMouseEnter: () => void = () => {
-        this.setState({hover: true});
-    };
-
-    handleMouseLeave: () => void = () => {
-        this.setState({hover: false});
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className={css(styles.infoTip)}>
-                <img
-                    alt=""
-                    width={10}
-                    height={10}
-                    src={questionMark}
-                    onMouseEnter={this.handleMouseEnter}
-                    onMouseLeave={this.handleMouseLeave}
-                />
-                <div
-                    className={css(styles.infoTipContainer)}
-                    style={{display: this.state.hover ? "block" : "none"}}
-                >
-                    <div className={css(styles.infoTipTriangle)} />
-                    <div
-                        className={css(
-                            styles.verticalShadow,
-                            styles.infoTipContentContainer,
-                        )}
-                    >
-                        {this.props.children}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default InfoTip;

package/src/components/info-tip.tsx

@@ -1,39 +0,0 @@
-/**
- * A wrapper around info-tip/info-tip.jsx that can be rendered on the
- * server without causing a checksum mismatch on the client.
- * (RCSS generates classnames with a randomSuffix, which ensures that any
- * two sets of generated classnames will not match.)
- */
-
-import * as React from "react";
-
-import ReactComponentsInfoTip from "./info-tip/info-tip";
-
-import type {PropsFor} from "@khanacademy/wonder-blocks-core";
-
-type Props = PropsFor<typeof ReactComponentsInfoTip>;
-
-type State = {
-    didMount: boolean;
-};
-
-class InfoTip extends React.Component<Props, State> {
-    state: State = {
-        didMount: false,
-    };
-
-    componentDidMount() {
-        /* eslint-disable react/no-did-mount-set-state */
-        this.setState({didMount: true});
-        /* eslint-enable react/no-did-mount-set-state */
-    }
-
-    render(): React.ReactNode {
-        if (this.state.didMount) {
-            return <ReactComponentsInfoTip {...this.props} />;
-        }
-        return <div />;
-    }
-}
-
-export default InfoTip;

package/src/components/inline-icon.tsx

@@ -1,60 +0,0 @@
-import * as React from "react";
-
-type InlineIconProps = {
-    // An SVG path to render.
-    path: string;
-    // The path's viewBox dimensions.
-    // We set the viewport height to 1em and scale the width accordingly.
-    height: number;
-    width: number;
-    style?: React.CSSProperties;
-    // A11y description for this icon. If absent, icon is marked
-    // aria-hidden=true
-    title?: string;
-};
-
-/**
- * A stripped version of Icon.jsx from webapp. Takes an SVG icon and renders it
- * inline like Font Awesome did.
- *
- * If you are looking for an icon that we've used before you should look in
- * webapp's `icon-paths.js` which is a reference file for all the SVG paths
- * that we've used. You'll need to copy the object from that file into
- * whichever file you're using the icon and explicitly pass it in to the
- * <InlineIcon/> React component.
- *
- * We assume that the viewBox is cropped and aligned to (0, 0), but icons can
- * be defined differently. At some point we might want to add these attributes
- * to `icon-paths.js`, but for now this is a fairly safe assumption.
- *
- * Sample usage:
- *
- *   const editIcon = {
- *      path: "M41.209 53.753l5.39 0l0 5.39l3.136 0l6.468-6.517-8.477-8.526-6.517 6.517l0 3.136zm33.173-34.937q-.882-.882-1.862.049l-19.6 19.6q-.931.98-.049 1.862t1.862-.049l19.6-19.6q.931-.98.049-1.862zm-38.563 45.668l0-16.121l37.632-37.632 16.17 16.121-37.632 37.632l-16.17 0zm43.022-12.397l0 10.633q-.049 6.713-4.753 11.417t-11.368 4.704l-46.599 0q-6.713 0-11.417-4.753t-4.704-11.368l0-46.599q0-6.664 4.753-11.417t11.368-4.704l46.599 0q3.528 0 6.566 1.372.833.392.98 1.323t-.49 1.617l-2.744 2.744q-.784.784-1.96.441t-2.352-.343l-46.599 0q-3.675 0-6.321 2.646t-2.646 6.321l0 46.599q0 3.675 2.646 6.321t6.321 2.646l46.599 0q3.675 0 6.321-2.646t2.646-6.321l0-7.056q0-.735.49-1.225l3.577-3.577q.833-.833 1.96-.392t1.127 1.617zm7.203-51.646q2.254 0 3.773 1.568l8.526 8.526q1.568 1.568 1.568 3.822t-1.568 3.773l-5.145 5.145-16.121-16.121 5.145-5.145q1.568-1.568 3.822-1.568z",
- *      width: 100,
- *      height: 78.912,
- *   };
- *   <InlineIcon {...editIcon} />
- *
- */
-const InlineIcon = ({
-    path,
-    width,
-    height,
-    style = {},
-    title,
-}: InlineIconProps): React.ReactElement => (
-    <svg
-        role="img"
-        aria-hidden={!title}
-        style={{verticalAlign: "middle", ...style}}
-        width={`${width / height}em`}
-        height="1em"
-        viewBox={`0 0 ${width} ${height}`}
-    >
-        {!!title && <title>{title}</title>}
-        <path d={path} fill="currentColor" />
-    </svg>
-);
-
-export default InlineIcon;