@khanacademy/perseus 0.0.1 → 0.2.1

package/src/components/__stories__/sortable.stories.jsx

@@ -0,0 +1,73 @@
+// @flow
+
+import * as React from "react";
+
+import Sortable from "../sortable.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+const defaultOptions = ["Option 1", "Option 2", "Option 3"];
+
+export default ({
+    title: "Perseus/Components/Sortable",
+}: Story);
+
+export const SortableHorizontalExample = (args: StoryArgs): React.Node => {
+    return (
+        <Sortable
+            layout="horizontal"
+            options={["a", "b", "c"]}
+            waitForKatexLoad={false}
+        />
+    );
+};
+
+export const SortableVerticalExample = (args: StoryArgs): React.Node => {
+    return (
+        <Sortable
+            layout="vertical"
+            options={["a", "b", "c"]}
+            waitForKatexLoad={false}
+        />
+    );
+};
+
+export const BasicSortableOptionsTest = (args: StoryArgs): React.Node => {
+    return <Sortable options={defaultOptions} />;
+};
+
+export const BasicSortableOptionsTestWithNoPadding = (
+    args: StoryArgs,
+): React.Node => {
+    return <Sortable options={defaultOptions} padding={false} />;
+};
+
+export const BasicSortableOptionsTestWithLargeMargin = (
+    args: StoryArgs,
+): React.Node => {
+    return <Sortable options={defaultOptions} margin={64} />;
+};
+
+export const BasicSortableOptionsTestDisabled = (
+    args: StoryArgs,
+): React.Node => {
+    return <Sortable options={defaultOptions} disabled={true} />;
+};
+
+export const BasicSortableOptionsTestWithWidthAndHeightConstraints = (
+    args: StoryArgs,
+): React.Node => {
+    return (
+        <Sortable
+            options={defaultOptions}
+            constraints={{
+                height: 128,
+                width: 256,
+            }}
+        />
+    );
+};

package/src/components/__stories__/stub-tag-editor.stories.jsx

@@ -0,0 +1,44 @@
+// @flow
+import * as React from "react";
+
+import StubTagEditor from "../stub-tag-editor.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/name",
+}: Story);
+
+const defaultValues = ["Test value 1", "Test value 2", "Test value 3"];
+
+export const ShowingTitle = (args: StoryArgs): React.Node => {
+    return <StubTagEditor onChange={() => {}} showTitle={true} />;
+};
+
+export const NotShowingTitle = (args: StoryArgs): React.Node => {
+    return <StubTagEditor onChange={() => {}} showTitle={false} />;
+};
+
+export const ShowingTitleWithValue = (args: StoryArgs): React.Node => {
+    return (
+        <StubTagEditor
+            onChange={() => {}}
+            showTitle={true}
+            value={defaultValues}
+        />
+    );
+};
+
+export const NotShowingTitleWithValue = (args: StoryArgs): React.Node => {
+    return (
+        <StubTagEditor
+            onChange={() => {}}
+            showTitle={false}
+            value={defaultValues}
+        />
+    );
+};

package/src/components/__stories__/svg-image.stories.jsx

@@ -0,0 +1,60 @@
+// @flow
+import * as React from "react";
+
+import SvgImage from "../svg-image.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/SVG Image",
+}: Story);
+
+const svgUrl = "http://www.khanacademy.org/images/ohnoes-concerned.svg";
+const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";
+const graphieUrl =
+    "web+graphie://ka-perseus-graphie.s3.amazonaws.com/1e06f6d4071f30cee2cc3ccb7435b3a66a62fe3f";
+
+export const MostlyEmptyPropsObject = (args: StoryArgs): React.Node => {
+    return <SvgImage alt="ALT" />;
+};
+
+export const SvgImageBasic = (args: StoryArgs): React.Node => {
+    return <SvgImage src={svgUrl} alt="ALT" />;
+};
+
+export const SvgImageWithFixedHeight = (args: StoryArgs): React.Node => {
+    return <SvgImage height={50} src={svgUrl} alt="ALT" />;
+};
+
+export const SvgImageWithFixedWidth = (args: StoryArgs): React.Node => {
+    return <SvgImage src={svgUrl} width={50} alt="ALT" />;
+};
+
+export const SvgImageWithExtraGraphieProps = (args: StoryArgs): React.Node => {
+    return (
+        <SvgImage
+            extraGraphie={{
+                box: [200, 200],
+                range: [
+                    [0, 10],
+                    [0, 10],
+                ],
+                labels: ["ok"],
+            }}
+            src={svgUrl}
+            alt="ALT"
+        />
+    );
+};
+
+export const PngImage = (args: StoryArgs): React.Node => {
+    return <SvgImage src={imgUrl} alt="ALT" />;
+};
+
+export const GraphieImage = (args: StoryArgs): React.Node => {
+    return <SvgImage src={graphieUrl} alt="ALT" />;
+};

package/src/components/__stories__/tex.stories.jsx

@@ -0,0 +1,18 @@
+// @flow
+import * as React from "react";
+
+import TeX from "../tex.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Tex",
+}: Story);
+
+export const BasicOperation = (args: StoryArgs): React.Node => {
+    return <TeX setAssetStatus={() => {}} children="f(x) = x + 1" />;
+};

package/src/components/__stories__/text-buttons.stories.jsx

@@ -0,0 +1,51 @@
+// @flow
+import * as React from "react";
+
+import TexButtons from "../tex-buttons.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Tex Buttons",
+}: Story);
+
+export const ButtonSetBasic = (args: StoryArgs): React.Node => {
+    return <TexButtons sets={["basic"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetBasicDiv = (args: StoryArgs): React.Node => {
+    return <TexButtons sets={["basic+div"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetTrig = (args: StoryArgs): React.Node => {
+    return <TexButtons sets={["trig"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetPrealgebra = (args: StoryArgs): React.Node => {
+    return <TexButtons sets={["prealgebra"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetLogarithms = (args: StoryArgs): React.Node => {
+    return <TexButtons sets={["logarithms"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetBasicRelations = (args: StoryArgs): React.Node => {
+    return <TexButtons sets={["basic relations"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetAdvancedRelations = (args: StoryArgs): React.Node => {
+    return <TexButtons sets={["advanced relations"]} onInsert={() => {}} />;
+};
+
+export const ButtonSetMultiple = (args: StoryArgs): React.Node => {
+    return (
+        <TexButtons
+            sets={["basic", "trig", "advanced relations"]}
+            onInsert={() => {}}
+        />
+    );
+};

package/src/components/__stories__/text-input.stories.jsx

@@ -0,0 +1,34 @@
+// @flow
+import * as React from "react";
+
+import TextInput from "../text-input.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Text Input",
+}: Story);
+
+const defaultObject = {
+    onChange: () => {},
+};
+
+export const EmptyPropsObject = (args: StoryArgs): React.Node => {
+    return <TextInput {...defaultObject} />;
+};
+
+export const TestValueProvided = (args: StoryArgs): React.Node => {
+    return <TextInput {...defaultObject} value="Test value" />;
+};
+
+export const AriaLabelTextProvided = (args: StoryArgs): React.Node => {
+    return <TextInput {...defaultObject} labelText="Test label" />;
+};
+
+export const Disabled = (args: StoryArgs): React.Node => {
+    return <TextInput {...defaultObject} disabled={true} />;
+};

package/src/components/__stories__/text-list-editor.stories.jsx

@@ -0,0 +1,33 @@
+// @flow
+
+import {action} from "@storybook/addon-actions";
+import * as React from "react";
+
+import TextListEditor from "../text-list-editor.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Text List Editor",
+}: Story);
+
+const defaultObject = {
+    onChange: (...args) => {
+        action("onChange")(...args);
+    },
+    options: ["Test option 1", "Test option 2", "Test option 3"],
+};
+
+const ClassName = "framework-perseus orderer";
+
+export const SimpleListOfOptions = (args: StoryArgs): React.Element<"div"> => {
+    return (
+        <div class={ClassName}>
+            <TextListEditor {...defaultObject} />
+        </div>
+    );
+};

package/src/components/__stories__/zoomable-tex.stories.jsx

@@ -0,0 +1,39 @@
+// @flow
+
+import * as React from "react";
+
+import ZoomableTex from "../zoomable-tex.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Zoomable Tex",
+}: Story);
+
+const ForceZoomWrapper = ({children}: {|children: React.Node|}): React.Node => (
+    <>
+        <h1>Click on equation to zoom/unzoom</h1>
+        <div style={{width: "50px"}}>{children}</div>
+    </>
+);
+
+export const KaTeX = (args: StoryArgs): React.Node => {
+    return (
+        <ForceZoomWrapper>
+            <ZoomableTex children="\sum_{i=1}^\infty\frac{1}{n^2} =\frac{\pi^2}{6}" />
+        </ForceZoomWrapper>
+    );
+};
+
+export const ComplexKaTeX = (args: StoryArgs): React.Node => {
+    return (
+        <ForceZoomWrapper>
+            {" "}
+            <ZoomableTex children="\begin{aligned}h\blueE{v_1} \left(\dfrac{\partial f}{\partial x}(x_0, y_0) \right) + h\greenE{v_2}\left( \dfrac{\partial f}{\partial y}(x_0 \redD{+ h\blueE{v_1}}, y_0)\right)\end{aligned}" />
+        </ForceZoomWrapper>
+    );
+};

package/src/components/__stories__/zoomable.stories.jsx

@@ -0,0 +1,40 @@
+// @flow
+
+import * as React from "react";
+
+import Zoomable from "../zoomable.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Zoomable",
+}: Story);
+
+type Bounds = {|
+    width: number,
+    height: number,
+|};
+
+const computeChildBounds = (parentNode, parentBounds?: Bounds): Bounds => {
+    return {
+        width: 1000,
+        height: 500,
+    };
+};
+
+export const ZoomableExample = (args: StoryArgs): React.Node => {
+    return (
+        <Zoomable computeChildBounds={computeChildBounds}>
+            <span>
+                Here's some zoomed-out content.
+                <br />
+                <br />
+                Click on the content to zoom/unzoom.
+            </span>
+        </Zoomable>
+    );
+};

package/src/components/__testdata__/sorter_testdata.js

@@ -0,0 +1,20 @@
+// @flow
+import type {PerseusRenderer} from "../../perseus-types.js";
+
+export const question1: PerseusRenderer = {
+    content:
+        "**Arrange the following measurements in order from smallest to largest.**\n\n[[\u2603 sorter 1]]",
+    images: {},
+    widgets: {
+        "sorter 1": {
+            version: {major: 0, minor: 0},
+            type: "sorter",
+            graded: true,
+            options: {
+                padding: true,
+                layout: "horizontal",
+                correct: ["$0.005$ kilograms", "$15$ grams", "$55$ grams"],
+            },
+        },
+    },
+};

package/src/components/__tests__/__snapshots__/sortable_test.jsx.snap

@@ -0,0 +1,79 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sortable should snapshot: first render 1`] = `
+<div>
+  <ul
+    class="sortable_13d4756 perseus-sortable"
+  >
+    <li
+      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+      style="position: static; margin: 0px 5px 0px 0px;"
+    >
+      <span
+        class="mock-KatexProvider"
+      >
+        <div
+          class="perseus-renderer perseus-renderer-responsive"
+        >
+          <div
+            class="paragraph"
+            data-perseus-paragraph-index="0"
+          >
+            <div
+              class="paragraph"
+            >
+              a
+            </div>
+          </div>
+        </div>
+      </span>
+    </li>
+    <li
+      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+      style="position: static; margin: 0px 5px 0px 0px;"
+    >
+      <span
+        class="mock-KatexProvider"
+      >
+        <div
+          class="perseus-renderer perseus-renderer-responsive"
+        >
+          <div
+            class="paragraph"
+            data-perseus-paragraph-index="0"
+          >
+            <div
+              class="paragraph"
+            >
+              b
+            </div>
+          </div>
+        </div>
+      </span>
+    </li>
+    <li
+      class="card_1s6cuhy-o_O-draggable_12to336-o_O-horizontalCard_9um937 perseus-interactive perseus-sortable-draggable"
+      style="position: static; margin: 0px;"
+    >
+      <span
+        class="mock-KatexProvider"
+      >
+        <div
+          class="perseus-renderer perseus-renderer-responsive"
+        >
+          <div
+            class="paragraph"
+            data-perseus-paragraph-index="0"
+          >
+            <div
+              class="paragraph"
+            >
+              c
+            </div>
+          </div>
+        </div>
+      </span>
+    </li>
+  </ul>
+</div>
+`;