@khanacademy/perseus 0.0.1 → 0.2.1

package/src/components/hud.jsx

@@ -0,0 +1,179 @@
+// @flow
+import {StyleSheet, css} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import * as constants from "../styles/constants.js";
+
+class HUD extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        message: PropTypes.string.isRequired,
+        enabled: PropTypes.bool.isRequired,
+        onClick: PropTypes.func.isRequired,
+        fixedPosition: PropTypes.bool,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        fixedPosition: true,
+    };
+
+    // Displays a stylized open eye: lint warnings are visible
+    renderVisibleIcon: () => React.Node = () => {
+        return (
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                className={css(styles.icon)}
+            >
+                <defs>
+                    <path
+                        id="a"
+                        d={
+                            "M7.401 10.035c-1.424.748-2.599 1.905-3.544 " +
+                            "3.48a1 1 0 0 1-1.714-1.03C4.325 8.849 7.652 7 " +
+                            "12 7c4.348 0 7.675 1.848 9.857 5.486a1 1 0 0 " +
+                            "1-1.714 1.028c-.945-1.574-2.12-2.73-3.544-" +
+                            "3.48a5 5 0 1 1-9.198 0zM12 15a3 3 0 1 0 0-6 3 3 " +
+                            "0 0 0 0 6z"
+                        }
+                    />
+                </defs>
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <mask id="b" fill="#fff">
+                        <use href="#a" />
+                    </mask>
+                    <use fill="#fff" fillRule="nonzero" href="#a" />
+                    <g fill="#fff" mask="url(#b)">
+                        <path d="M0 0h24v24H0z" />
+                    </g>
+                </g>
+            </svg>
+        );
+    };
+
+    // Displays a stylized eye with a line through it: I don't want to see lint
+    renderHiddenIcon: () => React.Node = () => {
+        return (
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                className={css(styles.icon)}
+            >
+                <defs>
+                    <path
+                        id="a"
+                        d={
+                            "M8.794 7.38C9.791 7.127 10.86 7 12 7c4.348 0 " +
+                            "7.675 1.848 9.857 5.486a1 1 0 0 1-1.714 " +
+                            "1.028c-.945-1.574-2.12-2.73-3.544-3.48.258." +
+                            "604.401 1.268.401 1.966 0 1.02-.305 " +
+                            "1.967-.828 2.757l2.535 2.536a1 1 0 0 " +
+                            "1-1.414 1.414l-12-12a1 1 0 0 1 " +
+                            "1.414-1.414L8.794 7.38zm5.914 5.913a3 3 0 0 " +
+                            "0-4.001-4.001l4 4.001zM6.072 8.486l2.976 " +
+                            "2.976a3 3 0 0 0 3.49 3.49l1.579 1.58A5 5 0 " +
+                            "0 1 7.4 10.035c-1.424.747-2.599 1.904-3.544 " +
+                            "3.478a1 1 0 0 1-1.714-1.028c1.049-1.75 " +
+                            "2.363-3.085 3.929-4z"
+                        }
+                    />
+                </defs>
+                <g fill="none" fillRule="evenodd">
+                    <path fill="none" d="M0 0h24v24H0z" />
+                    <mask id="b" fill="#fff">
+                        <use href="#a" />
+                    </mask>
+                    <use fill="#fff" fillRule="nonzero" href="#a" />
+                    <g fill="#fff" mask="url(#b)">
+                        <path d="M0 0h24v24H0z" />
+                    </g>
+                </g>
+            </svg>
+        );
+    };
+
+    render(): React.Node {
+        let state;
+        let icon;
+        if (this.props.enabled) {
+            state = styles.enabled;
+            icon = this.renderVisibleIcon();
+        } else {
+            state = styles.disabled;
+            icon = this.renderHiddenIcon();
+        }
+
+        return (
+            <button
+                className={css(
+                    styles.hud,
+                    this.props.fixedPosition && styles.hudFixedPosition,
+                    state,
+                )}
+                onClick={(e) => {
+                    this.props.onClick();
+                }}
+            >
+                {icon}
+                {this.props.message}
+            </button>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    hud: {
+        boxSizing: "border-box",
+        height: 36,
+        padding: "9px 16px",
+        borderRadius: 18,
+        fontFamily: constants.boldFontFamily,
+        fontSize: "15px",
+        lineHeight: "18px",
+        color: constants.white,
+        userSelect: "none",
+        borderWidth: 0, // <button> gives us a border by default
+    },
+
+    // We want to render the element in-place in our fixtures, so allow us to
+    // render in the bottom corner in production and in-place in testing.
+    hudFixedPosition: {
+        bottom: 20,
+        position: "fixed",
+        right: 20,
+        zIndex: 1,
+    },
+
+    icon: {
+        width: 24,
+        height: 24,
+        marginRight: 8,
+        marginTop: -3,
+        verticalAlign: "middle",
+    },
+
+    enabled: {
+        backgroundColor: constants.warningColor,
+        ":hover": {
+            backgroundColor: constants.warningColorHover,
+        },
+        ":active": {
+            backgroundColor: constants.warningColorActive,
+        },
+    },
+
+    disabled: {
+        backgroundColor: constants.gray76,
+        ":hover": {
+            backgroundColor: "#a1a5a9", // in between those two grays
+        },
+        ":active": {
+            backgroundColor: constants.gray68,
+        },
+    },
+});
+
+export default HUD;

package/src/components/icon.jsx

@@ -0,0 +1,149 @@
+// @flow
+/**
+ * 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:
+        | IconType
+
+        // 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.
+        | 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.Element<"svg"> {
+        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}
+                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.jsx

@@ -0,0 +1,175 @@
+/* eslint-disable jsx-a11y/alt-text, react/no-unsafe */
+// @flow
+// 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.js";
+
+import type {Dimensions} from "../types.js";
+
+const Status = {
+    PENDING: "pending",
+    LOADING: "loading",
+    LOADED: "loaded",
+    FAILED: "failed",
+};
+
+export type ImageProps = {|
+    alt: string,
+    title?: string,
+    "aria-hidden"?: boolean,
+    tabIndex?: string,
+    onClick?: (e: SyntheticEvent<>) => void,
+    style?: Dimensions,
+|};
+
+type Props = {|
+    children?: React.Node,
+    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: $Values<typeof Status>) => void,
+
+    preloader: ?() => React.Node,
+    src: string,
+|};
+
+type State = {|
+    status: $Values<typeof Status>,
+|};
+
+class ImageLoader extends React.Component<Props, State> {
+    img: ?Image;
+
+    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.Element<"img"> = () => {
+        const {src, imgProps} = this.props;
+        let onKeyUp = null;
+        let onKeyDown = null;
+        if (imgProps.onClick != null) {
+            onKeyUp = (e: SyntheticKeyboardEvent<>) => {
+                // 13 is enter key, 32 is space key
+                if (e.keyCode === 13 || e.keyCode === 32) {
+                    imgProps.onClick && imgProps.onClick(e);
+                }
+            };
+            onKeyDown = (e: SyntheticKeyboardEvent<>) => {
+                // 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)}
+                onKeyUp={onKeyUp}
+                onKeyDown={onKeyDown}
+                {...imgProps}
+            />
+        );
+    };
+
+    render(): React.Node {
+        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.jsx

@@ -0,0 +1,146 @@
+// @flow
+
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+const colors = {
+    grayLight: "#aaa",
+    basicBorderColor: "#ccc",
+    white: "#fff",
+};
+
+const triangleBeforeAfter = {
+    borderBottom: "9px solid transparent",
+    borderTop: "9px solid transparent",
+    content: '" "',
+    height: "0",
+    position: "absolute",
+    top: "0",
+    width: "0",
+};
+
+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.Node,
+|};
+
+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.Element<"div"> {
+        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.jsx

@@ -0,0 +1,38 @@
+// @flow
+/**
+ * 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.jsx";
+
+type Props = React.ElementConfig<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.Node {
+        if (this.state.didMount) {
+            return <ReactComponentsInfoTip {...this.props} />;
+        }
+        return <div />;
+    }
+}
+
+export default InfoTip;