@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/components/hover-behavior.jsx

@@ -0,0 +1,178 @@
+/* eslint-disable react/sort-comp */
+// @flow
+/**
+ * Add hover behavior to another component.
+ *
+ * This component provides hover and focus status updates in a consistent way
+ * across desktop and mobile.
+ *
+ * For advice on when to use this component instead of Button, see README.md.
+ *
+ * Many mobile browsers treat :hover as sticky which results in buttons looking
+ * pressed even when the user has lifted their finger.  This component ensures
+ * that when user lifts their finger the hover state is removed.
+ *
+ * We also chnage how the focus state works.  Browsers immediately set the
+ * focus state as soon as you click on a button.  This component only sets the
+ * focus state when a user starts navigating between elements via keybaord.
+ *
+ * HoverBehavior accepts a function as 'children' which is passed state and
+ * an object containing event handlers.  The 'children' function should return
+ * an React Element of some sort.
+ *
+ * Example:
+ *
+ * class MyButtonLikeComponent extends React.Component {
+ *     render(): React.Node {
+ *         return <HoverBehavior
+ *             disabled={this.props.disabled}
+ *             onClick={this.handleClick}
+ *         >
+ *             {({hovered}, handlers) =>
+ *                 <RoundRect
+ *                      textcolor='white'
+ *                      backgroundColor={hovered ? 'red' : 'blue'}/>}
+ *                      {...handlers}
+ *                 >
+ *                      {this.props.children}
+ *                 </RoundRect>
+ *             }
+ *         </HoverBehavior>
+ *     }
+ * }
+ *
+ * This follows a pattern call 'Function as Child Components':
+ * https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9#.sw0jiio8b
+ */
+import * as React from "react";
+
+type Handlers = {|
+    onBlur: () => mixed,
+    onClick: (e: SyntheticMouseEvent<>) => mixed,
+    onFocus: () => mixed,
+    onMouseDown: () => mixed,
+    onMouseEnter: () => mixed,
+    onMouseLeave: () => mixed,
+    onTouchStart: () => mixed,
+    onTouchEnd: () => mixed,
+|};
+
+type State = {|
+    focused: boolean,
+    hovered: boolean,
+|};
+
+type Props = {|
+    children?: (state: State, handlers: Handlers) => React.Node,
+    disabled?: boolean,
+    onClick?: (e: SyntheticMouseEvent<>) => mixed,
+    startHovered: boolean,
+    shouldUpdate: () => boolean,
+|};
+
+export default class HoverBehavior extends React.Component<Props, State> {
+    static defaultProps: {|
+        shouldUpdate: () => boolean,
+        startHovered: boolean,
+    |} = {
+        startHovered: false,
+        shouldUpdate: () => true,
+    };
+
+    constructor(props: Props) {
+        super(props);
+
+        this.state = {
+            focused: false,
+            hovered: props.startHovered,
+        };
+    }
+
+    focusFlag: boolean;
+    waitingForClick: boolean;
+
+    handleClick: (e: SyntheticMouseEvent<>) => void = (
+        e: SyntheticMouseEvent<>,
+    ) => {
+        if (!this.props.disabled) {
+            if (this.props.shouldUpdate()) {
+                this.waitingForClick = false;
+            }
+            if (this.props.onClick && !this.props.disabled) {
+                this.props.onClick(e);
+            }
+        }
+    };
+
+    handleMouseEnter: () => void = () => {
+        if (
+            !this.props.disabled &&
+            this.props.shouldUpdate() &&
+            !this.waitingForClick
+        ) {
+            this.setState({hovered: true});
+        }
+    };
+
+    handleMouseLeave: () => void = () => {
+        if (
+            !this.props.disabled &&
+            this.props.shouldUpdate() &&
+            !this.waitingForClick
+        ) {
+            this.setState({hovered: false});
+        }
+    };
+
+    handleTouchStart: () => void = () => {
+        if (!this.props.disabled && this.props.shouldUpdate()) {
+            this.setState({hovered: true});
+        }
+    };
+
+    handleTouchEnd: () => void = () => {
+        if (!this.props.disabled && this.props.shouldUpdate()) {
+            this.setState({hovered: false});
+            this.waitingForClick = true;
+        }
+    };
+
+    handleMouseDown: () => void = () => {
+        if (!this.props.disabled && this.props.shouldUpdate()) {
+            this.setState({focused: false});
+            this.focusFlag = true;
+        }
+    };
+
+    handleBlur: () => void = () => {
+        if (!this.props.disabled && this.props.shouldUpdate()) {
+            this.setState({focused: false});
+        }
+    };
+
+    handleFocus: () => void = () => {
+        if (!this.props.disabled && this.props.shouldUpdate()) {
+            if (this.focusFlag) {
+                this.focusFlag = false;
+            } else {
+                this.setState({focused: true});
+            }
+        }
+    };
+
+    render(): React.Node {
+        const handlers = {
+            onBlur: this.handleBlur,
+            onClick: this.handleClick,
+            onFocus: this.handleFocus,
+            onMouseDown: this.handleMouseDown,
+            onMouseEnter: this.handleMouseEnter,
+            onMouseLeave: this.handleMouseLeave,
+            onTouchStart: this.handleTouchStart,
+            onTouchEnd: this.handleTouchEnd,
+        };
+
+        const {children} = this.props;
+        return children?.(this.state, handlers) || null;
+    }
+}

package/src/components/json-editor.jsx

@@ -0,0 +1,121 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable @babel/no-invalid-this */
+/* eslint-disable react/no-unsafe */
+/* eslint-disable react/sort-comp */
+// @flow
+import createReactClass from "create-react-class";
+import * as React from "react";
+import _ from "underscore";
+
+const JsonEditor: any = createReactClass({
+    displayName: "JsonEditor",
+
+    getInitialState: function () {
+        return {
+            currentValue: JSON.stringify(this.props.value, null, 4),
+            valid: true,
+        };
+    },
+
+    UNSAFE_componentWillReceiveProps: function (nextProps) {
+        const shouldReplaceContent =
+            !this.state.valid ||
+            !_.isEqual(nextProps.value, JSON.parse(this.state.currentValue));
+
+        if (shouldReplaceContent) {
+            this.setState(this.getInitialState());
+        }
+    },
+
+    render: function () {
+        const classes =
+            "perseus-json-editor " + (this.state.valid ? "valid" : "invalid");
+
+        return (
+            <textarea
+                className={classes}
+                value={this.state.currentValue}
+                onChange={this.handleChange}
+                onKeyDown={this.handleKeyDown}
+                onBlur={this.handleBlur}
+            />
+        );
+    },
+
+    handleKeyDown: function (e) {
+        // This handler allows the tab character to be entered by pressing
+        // tab, instead of jumping to the next (non-existant) field
+        if (e.key === "Tab") {
+            const cursorPos = e.target.selectionStart;
+            const v = e.target.value;
+            const textBefore = v.substring(0, cursorPos);
+            const textAfter = v.substring(cursorPos, v.length);
+            e.target.value = textBefore + "    " + textAfter;
+            e.target.selectionStart = textBefore.length + 4;
+            e.target.selectionEnd = textBefore.length + 4;
+
+            e.preventDefault();
+            this.handleChange(e);
+        }
+    },
+
+    handleChange: function (e) {
+        const nextString = e.target.value;
+        try {
+            let json = JSON.parse(nextString);
+            // Some extra handling to allow copy-pasting from /api/vi
+            if (_.isString(json)) {
+                json = JSON.parse(json);
+            }
+            // This callback unfortunately causes multiple renders,
+            // but seems to be necessary to avoid componentWillReceiveProps
+            // being called before setState has gone through
+            this.setState(
+                {
+                    currentValue: nextString,
+                    valid: true,
+                },
+                function () {
+                    this.props.onChange(json);
+                },
+            );
+        } catch (ex) {
+            this.setState({
+                currentValue: nextString,
+                valid: false,
+            });
+        }
+    },
+
+    // You can type whatever you want as you're typing, but if it's not valid
+    // when you blur, it will revert to the last valid value.
+    handleBlur: function (e) {
+        const nextString = e.target.value;
+        try {
+            let json = JSON.parse(nextString);
+            // Some extra handling to allow copy-pasting from /api/vi
+            if (_.isString(json)) {
+                json = JSON.parse(json);
+            }
+            // This callback unfortunately causes multiple renders,
+            // but seems to be necessary to avoid componentWillReceiveProps
+            // being called before setState has gone through
+            this.setState(
+                {
+                    currentValue: JSON.stringify(json, null, 4),
+                    valid: true,
+                },
+                function () {
+                    this.props.onChange(json);
+                },
+            );
+        } catch (ex) {
+            this.setState({
+                currentValue: JSON.stringify(this.props.value, null, 4),
+                valid: true,
+            });
+        }
+    },
+});
+
+export default JsonEditor;

package/src/components/link.jsx

@@ -0,0 +1,173 @@
+// @flow
+/**
+ * A generic link that removes common link styles.
+ *
+ * This is useful for wrapping many child components in a link and making sure
+ * that "link" styles don't get applied to all you content.
+ */
+import {StyleSheet, css} from "aphrodite";
+import * as React from "react";
+
+// TODO(diedra): This is terrible! If we don't have a href for a link, it should
+// be a button instead. We just need to make sure we override the default browser
+// button styling (backgroundColor, border, and padding).
+const DEFAULT_HREF = "javascript:void(0)";
+
+type AphroditeStyle = any;
+
+type DefaultProps = {|
+    element: string | React.AbstractComponent<any>,
+    // Whether the link should appear in a 'highlighted' state. In
+    // practice, this will apply the same styles that are applied on-hover.
+    highlighted: boolean,
+    href: string,
+    // Pass through styles but also add our own to normalize
+    style: AphroditeStyle | Array<AphroditeStyle>,
+|};
+
+type LinkProps = {|
+    ...DefaultProps,
+    children?: React.Node,
+    // An additional class name to add. This is supported so-as to allow
+    // Perseus to add class-based styles to links when using this
+    // component as its base link class.
+    className?: string,
+    // Additional direct styles to add.
+    inlineStyles?: {[key: string]: any, ...},
+    // Optional referrer query parameter to add to the end of the URL, used
+    // for analytics purposes.
+    referrer?: string,
+    // A target window to open a link in
+    target?: string,
+    // The relationship between the linked page and the current page.
+    // Mostly used to prevent abuse from linked sites.
+    rel?: string,
+    // The data-test-id attribute
+    testId?: string,
+    // Specify either an HTML tag (like "a") or a React component (like
+    // React Router's `Link`) to be used as the underlying element.
+
+    onClick?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseOver?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseLeave?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseEnter?: (e: SyntheticMouseEvent<>) => mixed,
+    onBlur?: (e: SyntheticEvent<>) => mixed,
+    onFocus?: (e: SyntheticEvent<>) => mixed,
+    onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
+    "aria-label"?: string,
+    "aria-selected"?: boolean,
+    "aria-current"?: boolean,
+    role?: "tab",
+    title?: string,
+    id?: string,
+    tabIndex?: number,
+|};
+
+/**
+ * A wrapper that creates an anchor tag with normalized styles
+ */
+class Link extends React.Component<LinkProps> {
+    static defaultProps: DefaultProps = {
+        highlighted: false,
+        href: DEFAULT_HREF,
+        style: ([]: Array<AphroditeStyle>),
+        element: "a",
+    };
+
+    render(): React.Element<string> | React.Node {
+        const {
+            children,
+            className,
+            highlighted,
+            href,
+            inlineStyles,
+            referrer,
+            style,
+            target,
+            testId,
+            element,
+            ...otherProps
+        } = this.props;
+
+        // We need to make sure the hash goes at the end of the <a>'s href, so
+        // we'll split for now and re-add after potentially adding ?ref=
+        // Even though we have defined a default prop for href, if href is
+        // set to null, we will still get the null, so we need to handle that.
+        const [hrefWithoutHash, hash] = href ? href.split("#") : [DEFAULT_HREF];
+        let url = hrefWithoutHash;
+
+        if (referrer) {
+            if (url.indexOf("?") > -1) {
+                url += "&ref=" + referrer;
+            } else {
+                url += "?ref=" + referrer;
+            }
+        }
+
+        if (hash) {
+            url += "#" + hash;
+        }
+
+        const delegatedStyles = [
+            styles.link,
+            highlighted && styles.highlighted,
+        ];
+
+        if (Array.isArray(style)) {
+            delegatedStyles.push(...style);
+        } else {
+            delegatedStyles.push(style);
+        }
+
+        const delegatedClassName = className ? " " + className : "";
+
+        // When passing an anchor tag, we want to use the native `href`.
+        // ReactRouter links, though, need a special `to` prop instead.
+        const urlProp = element === "a" ? {href: url} : {to: url};
+
+        // When the link is set to open in a new window, we want to append
+        // some `rel` attributes. This is to ensure that the links we're
+        // sending folks to can't hijack the existing page.
+        // More info: https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/
+        //
+        // If `rel` is already defined, we assume the caller knows what they're
+        // doing. In the future, we may wish to check what keywords are passed,
+        // and add in `noopener` and `noreferrer`.
+        let rel = otherProps.rel;
+        if (target === "_blank" && !rel) {
+            rel = "noopener noreferrer";
+        }
+
+        return React.createElement(
+            element,
+            {
+                "data-test-id": testId,
+                ...otherProps,
+                ...urlProp,
+                className: css(...delegatedStyles) + delegatedClassName,
+                style: inlineStyles,
+                target,
+                rel,
+            },
+            children,
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    link: {
+        // Remove the gray background color from active links in IE 10
+        // https://necolas.github.io/normalize.css/3.0.2/normalize.css
+        backgroundColor: "transparent",
+        color: "inherit",
+        textDecoration: "none",
+        ":hover": {
+            textDecoration: "underline",
+        },
+    },
+    highlighted: {
+        textDecoration: "underline",
+    },
+});
+
+export default Link;

package/src/components/simple-button.jsx

@@ -0,0 +1,86 @@
+// @flow
+/**
+ * Provides a simple styled button
+ *
+ */
+
+import {StyleSheet, css} from "aphrodite";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+class SimpleButton extends React.Component<$FlowFixMe> {
+    static propTypes = {
+        children: PropTypes.node,
+        color: PropTypes.oneOf(["orange", "green"]),
+        onClick: PropTypes.func,
+    };
+
+    static defaultProps: $FlowFixMe = {
+        children: null,
+        color: "green",
+        onClick: () => {},
+    };
+
+    render(): React.Node {
+        const {children, color, onClick, ...otherProps} = this.props;
+        return (
+            <div
+                className={css(
+                    styles.baseButton,
+                    color === "green" && styles.green,
+                    color === "orange" && styles.orange,
+                )}
+                onClick={onClick}
+                {...otherProps}
+            >
+                {children}
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    baseButton: {
+        top: "0",
+        fontSize: "11px",
+        padding: "3px 10px",
+        backgroundRepeat: "repeat-x",
+        borderColor: `
+             rgba(0, 0, 0, 0.1)
+             rgba(0, 0, 0, 0.1)
+             rgba(0, 0, 0, 0.25)
+         `,
+        color: "#ffffff",
+        borderRadius: "3px",
+        lineHeight: "15px",
+        cursor: "pointer",
+        transition: "box-shadow ease-in-out 0.15s",
+        appearance: "none",
+        textDecoration: "none",
+        textAlign: "center",
+        ":hover": {
+            boxShadow: `0 1px 1px rgba(0, 0, 0, 0.35),
+                 inset 0 0 50px 5px rgba(255, 255, 255, 0.2)`,
+        },
+    },
+    green: {
+        border: "1px solid #7fab07",
+        backgroundColor: "#80ac07",
+        backgroundImage: "linear-gradient(to bottom, #8aba08, #719807)",
+        ":hover": {
+            borderBottomColor: "#547105",
+            backgroundColor: "#719807",
+        },
+    },
+    orange: {
+        border: "1px solid #d45704",
+        backgroundColor: "#d55704",
+        backgroundImage: "linear-gradient(to bottom, #e35d04, #c04f03)",
+        ":hover": {
+            borderBottomColor: "#983e03",
+            backgroundColor: "#c04f03",
+        },
+    },
+});
+
+export default SimpleButton;