@khanacademy/perseus 3.0.0 → 4.0.0

package/src/components/__tests__/zoomable_test.jsx

@@ -1,388 +0,0 @@
-// @flow
-
-import {fireEvent, render, screen, waitFor} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import * as React from "react";
-import "@testing-library/jest-dom"; // Imports custom mathers
-
-import Zoomable from "../zoomable.jsx";
-
-const mockSize = (el, size) => {
-    jest.spyOn(el, "offsetWidth", "get").mockImplementation(() => size.width);
-    jest.spyOn(el, "offsetHeight", "get").mockImplementation(() => size.height);
-};
-
-describe("Zoomable", () => {
-    it("should snapshot", () => {
-        // Arrange and Act
-        const {container} = render(
-            <Zoomable>
-                <span>Some zoomable text</span>
-            </Zoomable>,
-        );
-
-        // Assert
-        expect(container).toMatchInlineSnapshot(`
-            <div>
-              <span
-                style="display: block; width: 100%; transform: scale(1, 1)  translate(0, 8px); transform-origin: 0 0; opacity: 0;"
-              >
-                <span>
-                  Some zoomable text
-                </span>
-              </span>
-            </div>
-        `);
-    });
-
-    it("should toggle to zoomed state when clicked", () => {
-        // Arrange
-        const {container} = render(
-            <Zoomable>
-                <span>Some zoomable text</span>
-            </Zoomable>,
-        );
-
-        // Act
-        userEvent.click(screen.getByText("Some zoomable text"));
-        jest.runOnlyPendingTimers();
-
-        // Assert
-        expect(container).toMatchInlineSnapshot(`
-            <div>
-              <span
-                style="display: block; width: 100%; transform: scale(0, 0)  translate(0, 8px); transform-origin: 0 0; opacity: 0; height: 0px;"
-              >
-                <span>
-                  Some zoomable text
-                </span>
-              </span>
-            </div>
-        `);
-    });
-
-    it("should toggle to unzoomed state when clicked while zoomed", () => {
-        // Arrange
-        const {container} = render(
-            <Zoomable>
-                <span>Some zoomable text</span>
-            </Zoomable>,
-        );
-
-        userEvent.click(screen.getByText("Some zoomable text"));
-        jest.runOnlyPendingTimers();
-
-        // Act
-        userEvent.click(screen.getByText("Some zoomable text"));
-        jest.runOnlyPendingTimers();
-
-        // Assert
-        expect(container).toMatchInlineSnapshot(`
-            <div>
-              <span
-                style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; height: 1px; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out;"
-              >
-                <span>
-                  Some zoomable text
-                </span>
-              </span>
-            </div>
-        `);
-    });
-
-    it("should use provided computeChildBounds function when zooming", () => {
-        // Arrange
-        const computeChildBounds = jest.fn(() => ({width: 1000, height: 1000}));
-
-        // Act
-        render(
-            <Zoomable computeChildBounds={computeChildBounds}>
-                <span>Some zoomable text</span>
-            </Zoomable>,
-        );
-        jest.runOnlyPendingTimers();
-
-        // Assert
-        expect(computeChildBounds).toHaveBeenCalled();
-    });
-
-    it("should scale if computeChildBounds is larger than root node size", () => {
-        // Arrange
-        const {container} = render(
-            <Zoomable>
-                <span>Some zoomable text</span>
-            </Zoomable>,
-        );
-
-        // Parent node bounds
-        // eslint-disable-next-line testing-library/no-node-access
-        const rootNode = container.firstElementChild;
-        mockSize(rootNode, {width: 400, height: 100});
-
-        // Child node bounds
-        mockSize(screen.getByText("Some zoomable text"), {
-            width: 800,
-            height: 200,
-        });
-
-        // Act
-        // The measure action uses a setState and setTimeout(0)
-        jest.runOnlyPendingTimers();
-        jest.runOnlyPendingTimers();
-
-        // Assert
-        expect(container).toMatchInlineSnapshot(`
-            <div>
-              <span
-                style="display: block; width: 100%; transform: scale(0.4993757802746567, 0.4993757802746567); transform-origin: 0 0; opacity: 1; height: 101px; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out;"
-              >
-                <span>
-                  Some zoomable text
-                </span>
-              </span>
-            </div>
-        `);
-    });
-
-    it("should not scale if computeChildBounds is smaller than root node size", () => {
-        // Arrange
-        const {container} = render(
-            <Zoomable>
-                <span>Some zoomable text</span>
-            </Zoomable>,
-        );
-
-        // Parent node bounds
-        // eslint-disable-next-line testing-library/no-node-access
-        const rootNode = container.firstElementChild;
-        mockSize(rootNode, {width: 400, height: 100});
-
-        // Child node bounds
-        mockSize(screen.getByText("Some zoomable text"), {
-            width: 100,
-            height: 100,
-        });
-
-        // Act
-        jest.runOnlyPendingTimers();
-
-        // Assert
-        expect(container).toMatchInlineSnapshot(`
-            <div>
-              <span
-                style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out;"
-              >
-                <span>
-                  Some zoomable text
-                </span>
-              </span>
-            </div>
-        `);
-    });
-
-    it("should reset to initial state on window resize", () => {
-        // Arrange
-        // Simulate window resize event
-        const resizeWindowTo = (width: number, height: number) => {
-            const resizeEvent = document.createEvent("Event");
-            resizeEvent.initEvent("resize", true, true);
-
-            window.innerWidth = width;
-            window.innerHeight = height;
-            window.dispatchEvent(resizeEvent);
-        };
-
-        render(
-            <Zoomable>
-                <span>Some zoomable text</span>
-            </Zoomable>,
-        );
-        // We need two cycles to get everything rendered and visible
-        jest.runOnlyPendingTimers();
-        jest.runOnlyPendingTimers();
-
-        // Act
-        resizeWindowTo(500, 500);
-
-        // Assert
-        // The children are initially displayed with an opacity of 0 to give
-        // the component a chance to render and measure. Once that's done, the
-        // content becomes visible. So intial state is invisible.
-        expect(screen.queryByText("Some zoomable text")).not.toBeVisible();
-    });
-
-    it("should toggle zoom if zoomed", () => {
-        // Arrange
-        const onClickHandler = jest.fn();
-        let zoomable: ?Zoomable;
-        render(
-            <Zoomable ref={(c) => (zoomable = c)}>
-                <span onClick={onClickHandler}>Some zoomable text</span>
-            </Zoomable>,
-        );
-        userEvent.click(screen.getByText("Some zoomable text"));
-        jest.runOnlyPendingTimers();
-        onClickHandler.mockClear();
-
-        // Act
-        userEvent.click(screen.getByText("Some zoomable text"));
-        jest.runOnlyPendingTimers();
-
-        // Assert
-        expect(onClickHandler).not.toHaveBeenCalled();
-        expect(zoomable?.state.zoomed).toBeTrue();
-    });
-
-    describe.each([
-        ["onTouchStartCapture", fireEvent.touchStart],
-        ["onTouchEndCapture", fireEvent.touchEnd],
-        ["onTouchCancelCapture", fireEvent.touchCancel],
-    ])("propogation of touch event: %s", (propName: string, eventFirer) => {
-        it("should not propogate event to children when zoomed", () => {
-            // Arrange
-            const props = {};
-            props[propName] = jest.fn();
-
-            render(
-                <Zoomable>
-                    <span {...props}>Some zoomable text</span>
-                </Zoomable>,
-            );
-            userEvent.click(screen.getByText("Some zoomable text"));
-
-            // Act
-            eventFirer(screen.getByText("Some zoomable text"));
-            jest.runOnlyPendingTimers();
-
-            // Assert
-            expect(props[propName]).not.toHaveBeenCalled();
-        });
-
-        it("should propogate event to children when not zoomed", () => {
-            // Arrange
-            const props = {};
-            props[propName] = jest.fn();
-
-            render(
-                <Zoomable>
-                    <span {...props}>Some zoomable text</span>
-                </Zoomable>,
-            );
-            jest.runOnlyPendingTimers();
-            userEvent.click(screen.getByText("Some zoomable text"));
-            jest.runOnlyPendingTimers();
-
-            // Act
-            eventFirer(screen.getByText("Some zoomable text"));
-
-            // Assert
-            expect(props[propName]).toHaveBeenCalled();
-        });
-    });
-
-    describe("child node mutations", () => {
-        let computeChildBounds;
-        let componentContainer;
-
-        beforeEach(() => {
-            // Arrange
-            const sizes = [
-                // First render
-                {width: 100, height: 100},
-                // Post-mutation render
-                {width: 1000, height: 1000},
-            ];
-            computeChildBounds = jest.fn(() => sizes.shift());
-
-            // eslint-disable-next-line testing-library/no-render-in-setup
-            const {container} = render(
-                <Zoomable computeChildBounds={computeChildBounds}>
-                    <span>Some zoomable text</span>
-                </Zoomable>,
-            );
-            componentContainer = container;
-
-            // eslint-disable-next-line testing-library/no-node-access
-            const rootNode = container.firstElementChild;
-            mockSize(rootNode, {width: 200, height: 200});
-
-            jest.runOnlyPendingTimers();
-        });
-
-        it("should update measurements", async () => {
-            // Act
-            screen.getByText("Some zoomable text").innerHTML =
-                "Some more zoomable text";
-            await waitFor(() => {
-                screen.getByText("Some more zoomable text");
-            });
-
-            // Assert
-            expect(computeChildBounds).toHaveBeenCalledTimes(2);
-            expect(componentContainer).toMatchInlineSnapshot(`
-                <div>
-                  <span
-                    style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out; height: 1001px;"
-                  >
-                    <span>
-                      Some more zoomable text
-                    </span>
-                  </span>
-                </div>
-            `);
-        });
-
-        it("should remain zoomed", async () => {
-            // Arrange
-
-            // Act
-            screen.getByText("Some zoomable text").innerHTML =
-                "Some more zoomable text";
-            await waitFor(() => {
-                screen.getByText("Some more zoomable text");
-            });
-
-            // Assert
-            expect(computeChildBounds).toHaveBeenCalledTimes(2);
-            expect(componentContainer).toMatchInlineSnapshot(`
-                <div>
-                  <span
-                    style="display: block; width: 100%; transform: scale(1, 1); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out; height: 1001px;"
-                  >
-                    <span>
-                      Some more zoomable text
-                    </span>
-                  </span>
-                </div>
-            `);
-        });
-
-        it("should remain unzoomed", async () => {
-            // Arrange
-            // We default to "zoomed", so this "unzooms"
-            userEvent.click(screen.getByText("Some zoomable text"));
-            jest.runOnlyPendingTimers();
-
-            // Act
-            screen.getByText("Some zoomable text").innerHTML =
-                "Some more zoomable text";
-            await waitFor(() => {
-                screen.getByText("Some more zoomable text");
-            });
-
-            // Assert
-            expect(computeChildBounds).toHaveBeenCalledTimes(2);
-            expect(componentContainer).toMatchInlineSnapshot(`
-                <div>
-                  <span
-                    style="display: block; width: 100%; transform: scale(0.1998001998001998, 0.1998001998001998); transform-origin: 0 0; opacity: 1; transition-property: opacity transform; transition-duration: 0.3s; transition-timing-function: ease-out; height: 200px;"
-                  >
-                    <span>
-                      Some more zoomable text
-                    </span>
-                  </span>
-                </div>
-            `);
-        });
-    });
-});

package/src/components/button-group.jsx

@@ -1,131 +0,0 @@
-// @flow
-import {css, StyleSheet} from "aphrodite";
-import * as React from "react";
-
-type Props = {|
-    // the initial value of the button selected, defaults to null
-    value: any,
-    buttons: $ReadOnlyArray<{|
-        // the value returned when the button is selected
-        value: any,
-        // the content shown within the button, typically a string that gets
-        // rendered as the button's display text
-        content: React.Node,
-        // the title-text shown on hover
-        title?: string,
-    |}>,
-    // a function that is provided with the updated value (which it then is
-    // responsible for updating)
-    onChange: (value: any) => mixed,
-    // if false, exactly one button _must_ be selected;
-    // defaults to true and _at most_ one button (0 or 1) may be selected.
-    allowEmpty: boolean,
-|};
-
-type DefaultProps = {|
-    allowEmpty: Props["allowEmpty"],
-    value: Props["value"],
-|};
-
-/**
- * ButtonGroup is an aesthetically pleasing group of buttons.
- */
-class ButtonGroup extends React.Component<Props> {
-    container: ?HTMLDivElement;
-
-    static defaultProps: DefaultProps = {
-        value: null,
-        allowEmpty: true,
-    };
-
-    componentWillUnmount() {
-        this.container = null;
-    }
-
-    focus(): void | boolean {
-        if (this.container) {
-            this.container.focus();
-            return true;
-        }
-    }
-
-    toggleSelect(newValue: any) {
-        const value = this.props.value;
-
-        if (this.props.allowEmpty) {
-            // Select the new button or unselect if it's already selected
-            this.props.onChange(value !== newValue ? newValue : null);
-        } else {
-            this.props.onChange(newValue);
-        }
-    }
-
-    render(): React.Element<"div"> {
-        const value = this.props.value;
-        const buttons = this.props.buttons.map((button, i) => {
-            return (
-                <button
-                    title={button.title}
-                    type="button"
-                    id={"" + i}
-                    ref={"button" + i}
-                    key={"" + i}
-                    className={css(
-                        styles.buttonStyle,
-                        button.value === value && styles.selectedStyle,
-                    )}
-                    onClick={() => this.toggleSelect(button.value)}
-                >
-                    {button.content || "" + button.value}
-                </button>
-            );
-        });
-
-        const outerStyle = {
-            display: "inline-block",
-        };
-        return (
-            <div style={outerStyle} ref={(node) => (this.container = node)}>
-                {buttons}
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    buttonStyle: {
-        backgroundColor: "white",
-        border: "1px solid #ccc",
-        borderLeft: "0",
-        cursor: "pointer",
-        margin: "0",
-        padding: "5px 10px",
-        position: "relative", // for hover
-
-        ":first-child": {
-            borderLeft: "1px solid #ccc",
-            borderTopLeftRadius: "3px",
-            borderBottomLeftRadius: "3px",
-        },
-
-        ":last-child": {
-            borderRight: "1px solid #ccc",
-            borderTopRightRadius: "3px",
-            borderBottomRightRadius: "3px",
-        },
-
-        ":hover": {
-            backgroundColor: "#ccc",
-        },
-
-        ":focus": {
-            zIndex: 2,
-        },
-    },
-
-    selectedStyle: {
-        backgroundColor: "#ddd",
-    },
-});
-
-export default ButtonGroup;

package/src/components/constants.js

@@ -1,15 +0,0 @@
-// @flow
-export const devices = {
-    PHONE: ("phone": "phone"),
-    TABLET: ("tablet": "tablet"),
-    DESKTOP: ("desktop": "desktop"),
-};
-
-// How many pixels do we reserve on the right-hand side of a preview
-// for displaying lint indicators? This space needs to be reserved
-// in DeviceFramer, but it is actually allocated in PerseusFrame
-export const lintGutterWidth = 36;
-
-// How wide a border does PerseusFrame draw? We need to allocate enough
-// space for it in DeviceFramer.
-export const perseusFrameBorderWidth = 1;

package/src/components/fixed-to-responsive.jsx

@@ -1,165 +0,0 @@
-/* eslint-disable react/prop-types */
-// @flow
-/**
- * A wrapper for a component that would otherwise have a fixed width and
- * height, that magically makes it reponsive while preserving its aspect ratio.
- * Specifically, the component will shrink dynamically when it needs to but
- * won't ever grow past its original dimensions.
- *
- * Can wrap multiple components with the same dimensions at the same time;
- * these will be overlaid on top of each other.
- *
- * Usage:
- * <FixedToResponsive width={400} height={400}>
- *     <img src="bottom-layer.png" />
- *     <img src="top-layer.png" />
- * </FixedToResponsive>
- */
-import classNames from "classnames";
-import createReactClass from "create-react-class";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-import {negativePhoneMargin} from "../styles/constants.js";
-
-const MIN_VIEWPORT_HEIGHT = 480;
-
-const FixedToResponsive: $FlowFixMe = createReactClass({
-    displayName: "FixedToResponsive",
-
-    propTypes: {
-        width: PropTypes.number.isRequired,
-        height: PropTypes.number.isRequired,
-        className: PropTypes.string,
-        constrainHeight: PropTypes.bool,
-        allowFullBleed: PropTypes.bool,
-    },
-
-    getDefaultProps: function () {
-        return {
-            className: "",
-            constrainHeight: false,
-            allowFullBleed: false,
-        };
-    },
-
-    getInitialState: function () {
-        return {
-            viewportHeight: null,
-            viewportWidth: null,
-        };
-    },
-
-    componentDidMount: function () {
-        // TODO(scottgrant): This is a hack to remove the deprecated call to
-        // this.isMounted() but is still considered an anti-pattern.
-        this._isMounted = true;
-
-        // Cache viewport sizes instead of computing on each render.
-        // We setState() in componentDidMount(), even though it's a React
-        // anti-pattern, because we do actually want to trigger a re-render
-        // after the initial render (because initial render may be
-        // server-side).
-        // TODO(david): Don't do this for each image. Do this once per page.
-        if (window.innerHeight < MIN_VIEWPORT_HEIGHT) {
-            // There is a weird issue when this gets rendered in an Android
-            // webview where window.innerHeight might be initially very small,
-            // like 46, but seems to be good after ~400ms.
-            // TODO(jeff, CP-3128): Use Wonder Blocks Timing API
-            // eslint-disable-next-line no-restricted-syntax
-            setTimeout(this._cacheViewportSize, 800);
-        } else {
-            this._cacheViewportSize();
-        }
-    },
-
-    componentWillUnmount: function () {
-        this._isMounted = false;
-    },
-
-    _cacheViewportSize: function () {
-        if (this._isMounted) {
-            this.setState({
-                viewportHeight: Math.max(
-                    MIN_VIEWPORT_HEIGHT,
-                    window.innerHeight,
-                ),
-                viewportWidth: window.innerWidth,
-            });
-        }
-    },
-
-    render: function () {
-        // The ideal behavior for responsified, fixed size child components is
-        // that they shrink when they need to (while preserving aspect ratio)
-        // but never grow larger than their original dimensions. We accomplish
-        // this by absolutely positioning the children and telling them to fill
-        // up all of a space that has the correct aspect ratio.
-        const aspectRatio = this.props.width / this.props.height;
-
-        // This works because padding percentages are interpreted in terms of
-        // the width of the containing block, so:
-        //     (fixed height / fixed width) * display width = display height
-        // Based on http://refills.bourbon.io/components/#video && medium.com
-        const spacer = (
-            <div
-                style={{
-                    // $FlowFixMe[unsafe-addition]
-                    paddingBottom: (1 / aspectRatio).toFixed(4) * 100 + "%",
-                }}
-            />
-        );
-
-        let {width, height} = this.props;
-
-        // Constrain height to be at most 2/3 viewport height, maintaining
-        // aspect ratio.
-        if (this.props.constrainHeight && this.state.viewportHeight) {
-            const maxHeight = (2 / 3) * this.state.viewportHeight;
-            if (this.props.height >= maxHeight) {
-                height = maxHeight;
-                width = maxHeight * aspectRatio;
-            }
-        }
-
-        // Prevent child components from growing (aka "the Peter Pan effect")
-        const style = {
-            maxWidth: width,
-            maxHeight: height,
-        };
-
-        // NOTE(jeremy): This depends on styles defined in perseus-renderer.less
-        const className = classNames(
-            "fixed-to-responsive",
-            this.props.className,
-        );
-
-        const container = (
-            <div className={className} style={style}>
-                {spacer}
-                {this.props.children}
-            </div>
-        );
-
-        const shouldFullBleed =
-            this.props.allowFullBleed &&
-            this.state.viewportWidth &&
-            width >= this.state.viewportWidth;
-
-        if (shouldFullBleed) {
-            return (
-                <div
-                    style={{
-                        marginLeft: negativePhoneMargin,
-                        marginRight: negativePhoneMargin,
-                    }}
-                >
-                    {container}
-                </div>
-            );
-        }
-        return container;
-    },
-});
-
-export default FixedToResponsive;