@khanacademy/perseus 0.0.1 → 0.1.0

package/src/version.js

@@ -0,0 +1,11 @@
+// @flow
+export default {
+    apiVersion: {
+        major: 11,
+        minor: 0,
+    },
+    itemDataVersion: {
+        major: 0,
+        minor: 1,
+    },
+};

package/src/widget-container.jsx

@@ -0,0 +1,174 @@
+/* eslint-disable react/no-unsafe, react/sort-comp */
+// @flow
+import classNames from "classnames";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import {linterContextDefault} from "./gorgon/proptypes.js";
+import {zIndexInteractiveComponent} from "./styles/constants.js";
+import {containerSizeClass, getClassFromWidth} from "./util/sizing-utils.js";
+import * as Widgets from "./widgets.js";
+
+import type {PerseusWidgetOptions} from "./perseus-types.js";
+import type {LinterContextProps, WidgetProps} from "./types.js";
+
+type Props = {|
+    shouldHighlight: boolean,
+    type: string, // widget type/name
+    initialProps: WidgetProps<$FlowFixMe, PerseusWidgetOptions>,
+    linterContext: LinterContextProps,
+|};
+
+type DefaultProps = {|
+    linterContext: LinterContextProps,
+|};
+
+type State = {|
+    sizeClass: "small" | "medium" | "large" | "xlarge",
+    widgetProps: WidgetProps<$FlowFixMe, PerseusWidgetOptions>,
+|};
+
+class WidgetContainer extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
+        linterContext: linterContextDefault,
+    };
+
+    state: $FlowFixMe = {
+        // TODO(benkomalo): before we're mounted, we don't know how big
+        // we're going to be, so just default to MEDIUM for now. :/ In the
+        // future we can sniff with user-agents or something to get a
+        // better approximation, to avoid flickers
+        sizeClass: containerSizeClass.MEDIUM,
+        widgetProps: this.props.initialProps,
+    };
+
+    componentDidMount() {
+        // Only relay size class changes for mobile right now.  We may want to
+        // this for desktop as well at some point in the future.
+        if (this.state.widgetProps.apiOptions.isMobile) {
+            // $FlowFixMe[prop-missing]
+            // $FlowFixMe[incompatible-use]
+            const containerWidth = ReactDOM.findDOMNode(this).offsetWidth;
+
+            // NOTE(benkomalo): in the common case, this won't change anything.
+            // Unfortunately, it will cause a flash and re-layout on mobile,
+            // but until we have better SSR or a more drastic way change to our
+            // APIs that hints at the available size, we do have to measure DOM
+            // unfortunately.
+            /* eslint-disable react/no-did-mount-set-state */
+            this.setState({
+                sizeClass: getClassFromWidth(containerWidth),
+            });
+            /* eslint-enable react/no-did-mount-set-state */
+        }
+    }
+
+    render(): React.Node {
+        let className = classNames({
+            "perseus-widget-container": true,
+            "widget-highlight": this.props.shouldHighlight,
+            "widget-nohighlight": !this.props.shouldHighlight,
+        });
+
+        const type = this.props.type;
+        const WidgetType = Widgets.getWidget(type);
+        if (WidgetType == null) {
+            // This is for the good of all people!!
+            // eslint-disable-next-line no-console
+            console.warn(`Widget type '${type}' not found!`);
+            // Just give up on invalid widget types
+            return <div className={className} />;
+        }
+
+        let alignment = this.state.widgetProps.alignment;
+        if (alignment === "default") {
+            alignment = Widgets.getDefaultAlignment(type);
+        }
+
+        className += " widget-" + alignment;
+
+        const apiOptions = this.state.widgetProps.apiOptions;
+
+        // Hack to prevent interaction with static widgets: we overlay a big
+        // div on top of the widget and overflow: hidden the container.
+        // Ideally widgets themselves should know how to prevent interaction.
+        const isStatic = this.state.widgetProps.static || apiOptions.readOnly;
+        const staticContainerStyles = {
+            position: "relative",
+            overflow: "visible",
+        };
+        const staticOverlayStyles = {
+            width: "100%",
+            height: "100%",
+            position: "absolute",
+            top: 0,
+            left: 0,
+            zIndex: zIndexInteractiveComponent,
+        };
+
+        // Some widgets may include strings of markdown that we may
+        // want to run the linter on. So if the widget is lintable,
+        // and we've been asked to highlight lint, pass that property
+        // on to the widget, and if the content is not lintable, make sure
+        // to default to false.
+        // The linter context might be a constant object (and it isn't owned
+        // by us anyway), so we copy it if we have to modify it.
+        const linterContext = Widgets.isLintable(type)
+            ? this.props.linterContext
+            : {...this.props.linterContext, highlightLint: false};
+
+        // Note: if you add more props here, please consider whether or not
+        // it should be auto-serialized (e.g. used in scoreInput()). See
+        // widget-jsonify-deprecated.jsx and widget-prop-blacklist.jsx
+
+        // We default to an empty object for style instead of null
+        // because of a strange bug where the static styles aren't applied
+        // after toggling static mode.
+        return (
+            <div
+                className={className}
+                style={isStatic ? staticContainerStyles : {}}
+            >
+                <WidgetType
+                    {...this.state.widgetProps}
+                    linterContext={linterContext}
+                    containerSizeClass={this.state.sizeClass}
+                    // eslint-disable-next-line react/no-string-refs
+                    ref="widget"
+                />
+                {isStatic && <div style={staticOverlayStyles} />}
+            </div>
+        );
+    }
+
+    UNSAFE_componentWillReceiveProps(nextProps: Props) {
+        if (this.props.type !== nextProps.type) {
+            throw new Error(
+                "WidgetContainer can't change widget type; set a different " +
+                    "key instead to recreate the container.",
+            );
+        }
+    }
+
+    shouldComponentUpdate(nextProps: Props, nextState: State): boolean {
+        return (
+            this.props.shouldHighlight !== nextProps.shouldHighlight ||
+            this.props.type !== nextProps.type ||
+            this.state.widgetProps !== nextState.widgetProps ||
+            this.state.sizeClass !== nextState.sizeClass
+        );
+    }
+
+    getWidget: () => $FlowFixMe = () => {
+        // eslint-disable-next-line react/no-string-refs
+        return this.refs.widget;
+    };
+
+    replaceWidgetProps: (
+        WidgetProps<$FlowFixMe, PerseusWidgetOptions>,
+    ) => void = (newWidgetProps) => {
+        this.setState({widgetProps: newWidgetProps});
+    };
+}
+
+export default WidgetContainer;

package/src/widgets/__stories__/categorizer.stories.jsx

@@ -0,0 +1,15 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1} from "../__testdata__/categorizer_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/Categorizer",
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question1} />;
+};

package/src/widgets/__stories__/cs-program.stories.jsx

@@ -0,0 +1,15 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1} from "../__testdata__/cs-program_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/CS Program",
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question1} />;
+};

package/src/widgets/__stories__/definition.stories.jsx

@@ -0,0 +1,38 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+
+export default {
+    title: "Perseus/Widgets/Definition",
+};
+
+const question1 = {
+    content:
+        "Read the excerpt and answer the question below. \n\nThe Governor and Council of the Massachusetts had much conference many days; and at last . . . . concluded a peace and friendship with [[\u2603 definition 1]], upon these conditions.",
+    images: {},
+    widgets: {
+        "definition 1": {
+            graded: true,
+            version: {
+                major: 0,
+                minor: 0,
+            },
+            static: false,
+            type: "definition",
+            options: {
+                definition:
+                    "A Native American people in Connecticut; white settlers in New England, the Pequots, and their respective allies were at war from 1636-1638.",
+                togglePrompt: "the Pequots",
+                static: false,
+            },
+            alignment: "default",
+        },
+    },
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question1} />;
+};

package/src/widgets/__stories__/dropdown.stories.jsx

@@ -0,0 +1,15 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1} from "../__testdata__/dropdown_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/Dropdown",
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question1} />;
+};

package/src/widgets/__stories__/explanation.stories.jsx

@@ -0,0 +1,19 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1, question2} from "../__testdata__/explanation_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/Explanation",
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question1} />;
+};
+
+export const Question2 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question2} />;
+};

package/src/widgets/__stories__/expression.stories.jsx

@@ -0,0 +1,26 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {
+    expressionItem2,
+    expressionItem3,
+} from "../__testdata__/expression_testdata.js";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Widgets/Expression",
+}: Story);
+
+export const ExpressionItem2 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={expressionItem2.question} />;
+};
+
+export const ExpressionItem3 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={expressionItem3.question} />;
+};

package/src/widgets/__stories__/graded-group-set.stories.jsx

@@ -0,0 +1,32 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {article1} from "../__testdata__/graded-group-set_testdata.js";
+
+type StoryArgs = {|
+    isMobile: boolean,
+|};
+
+type GradedGroupSetStory = {|
+    title: string,
+    args: StoryArgs,
+|};
+
+export const Article1 = (args: StoryArgs): React.Node => {
+    return (
+        <RendererWithDebugUI
+            apiOptions={{
+                isMobile: args.isMobile,
+            }}
+            question={article1}
+        />
+    );
+};
+
+export default ({
+    title: "Perseus/Widgets/Graded Group Set",
+    args: {
+        isMobile: false,
+    },
+}: GradedGroupSetStory);

package/src/widgets/__stories__/graded-group.stories.jsx

@@ -0,0 +1,32 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1} from "../__testdata__/graded-group_testdata.js";
+
+type StoryArgs = {|
+    isMobile: boolean,
+|};
+
+type Story = {|
+    title: string,
+    args: StoryArgs,
+|};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return (
+        <RendererWithDebugUI
+            question={question1}
+            apiOptions={{
+                isMobile: args.isMobile,
+            }}
+        />
+    );
+};
+
+export default ({
+    title: "Perseus/Widgets/Graded Group",
+    args: {
+        isMobile: false,
+    },
+}: Story);

package/src/widgets/__stories__/grapher.stories.jsx

@@ -0,0 +1,47 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {
+    absoluteValueQuestion,
+    multipleAvailableTypesQuestion,
+    exponentialQuestion,
+    linearQuestion,
+    logarithmQuestion,
+    quadraticQuestion,
+    sinusoidQuestion,
+} from "../__testdata__/grapher_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/Grapher",
+};
+
+type StoryArgs = {||};
+
+export const AbsoluteValueQuestion = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={absoluteValueQuestion} />;
+};
+
+export const ExponentialQuestion = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={exponentialQuestion} />;
+};
+
+export const LinearQuestion = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={linearQuestion} />;
+};
+
+export const LogarithmQuestion = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={logarithmQuestion} />;
+};
+
+export const QuadraticQuestion = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={quadraticQuestion} />;
+};
+
+export const SinusoidQuestion = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={sinusoidQuestion} />;
+};
+
+export const ComplexQuestion = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={multipleAvailableTypesQuestion} />;
+};

package/src/widgets/__stories__/group.stories.jsx

@@ -0,0 +1,15 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1} from "../__testdata__/group_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/Group",
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question1} />;
+};

package/src/widgets/__stories__/iframe.stories.jsx

@@ -0,0 +1,15 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1} from "../__testdata__/iframe_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/IFrame",
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    return <RendererWithDebugUI question={question1} />;
+};

package/src/widgets/__stories__/image.stories.jsx

@@ -0,0 +1,62 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question} from "../__testdata__/image_testdata.js";
+
+import type {APIOptions} from "../../types.js";
+
+type StoryArgs = {|
+    isMobile: boolean,
+    title: string,
+    caption: string,
+|};
+
+type ImageStory = {|
+    title: string,
+    args: StoryArgs,
+|};
+
+export const Question1 = (args: StoryArgs): React.Node => {
+    const apiOptions: APIOptions = {
+        isMobile: args.isMobile,
+    };
+    const imageOptions = question.widgets["image 1"].options;
+
+    const questionWithArgs = {
+        ...question,
+        widgets: {
+            ...question.widgets,
+            "image 1": {
+                ...question.widgets["image 1"],
+                options:
+                    // `options` is nullable so we have handle it explicitly
+                    // to avoid spreading `null` and generating
+                    // hard-to-understand Flow type errors about missing keys
+                    // in object literal.
+                    imageOptions != null
+                        ? {
+                              ...imageOptions,
+                              title: args.title,
+                              caption: args.caption,
+                          }
+                        : null,
+            },
+        },
+    };
+    return (
+        <RendererWithDebugUI
+            question={questionWithArgs}
+            apiOptions={apiOptions}
+        />
+    );
+};
+
+export default ({
+    title: "Perseus/Widgets/Image",
+    args: {
+        isMobile: false,
+        title: "",
+        caption: "",
+    },
+}: ImageStory);

package/src/widgets/__stories__/input-number.stories.jsx

@@ -0,0 +1,90 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {
+    question1,
+    question2,
+    question3,
+} from "../__testdata__/input-number_testdata.js";
+
+import type {
+    PerseusRenderer,
+    PerseusInputNumberWidgetOptions,
+} from "../../perseus-types.js";
+
+export default {
+    title: "Perseus/Widgets/InputNumber",
+    argTypes: {
+        maxError: {
+            control: {
+                type: "range",
+                min: 0,
+                max: 1,
+                step: 0.1,
+            },
+        },
+        inexact: {
+            control: {type: "boolean"},
+        },
+        value: {
+            control: {type: "number"},
+        },
+        simplify: {
+            control: {type: "select", options: ["optional", "required"]},
+        },
+        answerType: {
+            control: {
+                type: "select",
+                options: [
+                    "number",
+                    "decimal",
+                    "integer",
+                    "rational",
+                    "improper",
+                    "mixed",
+                    "percent",
+                    "pi",
+                ],
+            },
+        },
+        size: {
+            control: {type: "select", options: ["normal", "large"]},
+        },
+    },
+};
+
+type Question = PerseusRenderer;
+type InputNumberOptions = PerseusInputNumberWidgetOptions;
+
+const updateWidgetOptions = (
+    question: Question,
+    widgetId: string,
+    options: InputNumberOptions,
+): Question => {
+    const widget = question.widgets[widgetId];
+    return {
+        ...question,
+        widgets: {
+            [widgetId]: {...widget, options},
+        },
+    };
+};
+
+export const Rational = (args: InputNumberOptions): React.Node => {
+    const question = updateWidgetOptions(question1, "input-number 1", args);
+    return <RendererWithDebugUI question={question} />;
+};
+Rational.args = question1.widgets["input-number 1"].options;
+
+export const PiSimplify = (args: InputNumberOptions): React.Node => {
+    const question = updateWidgetOptions(question2, "input-number 1", args);
+    return <RendererWithDebugUI question={question} />;
+};
+PiSimplify.args = question2.widgets["input-number 1"].options;
+
+export const Percent = (args: InputNumberOptions): React.Node => {
+    const question = updateWidgetOptions(question3, "input-number 1", args);
+    return <RendererWithDebugUI question={question} />;
+};
+Percent.args = question3.widgets["input-number 1"].options;

package/src/widgets/__stories__/interaction.stories.jsx

@@ -0,0 +1,15 @@
+// @flow
+import * as React from "react";
+
+import {RendererWithDebugUI} from "../../../../../testing/renderer-with-debug-ui.jsx";
+import {question1} from "../__testdata__/interaction_testdata.js";
+
+export default {
+    title: "Perseus/Widgets/Interaction",
+};
+
+type StoryArgs = {||};
+
+export const Question1 = (args: StoryArgs): React.Node => (
+    <RendererWithDebugUI question={question1} />
+);