@khanacademy/perseus 0.0.1 → 0.2.1

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

@@ -0,0 +1,36 @@
+// @flow
+import * as React from "react";
+
+import Hud from "../hud.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/HUD",
+}: Story);
+
+export const TestMessageDisabled = (args: StoryArgs): React.Node => {
+    return (
+        <Hud
+            fixedPosition={false}
+            message="Test message"
+            enabled={false}
+            onClick={() => {}}
+        />
+    );
+};
+
+export const TestMessageEnabled = (args: StoryArgs): React.Node => {
+    return (
+        <Hud
+            fixedPosition={false}
+            message="Test message"
+            enabled={true}
+            onClick={() => {}}
+        />
+    );
+};

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

@@ -0,0 +1,56 @@
+// @flow
+
+import * as React from "react";
+
+import * as IconPaths from "../../icon-paths.js";
+import IconComponent from "../icon.jsx";
+
+type StorybookStoryArgs = {|
+    options?: $ReadOnlyArray<string>,
+    mapping?: {[value: string]: any},
+    defaultValue?: string,
+    control?: string,
+|};
+
+type StoryArgs = {|
+    color?: string,
+    size?: number,
+    title?: string,
+    icon?: typeof IconPaths.iconCheck,
+|};
+
+type StoryArgTypes = $ObjMap<StoryArgs, () => ?StorybookStoryArgs>;
+
+type Story = {|
+    title: string,
+    args?: StoryArgs,
+    argTypes: StoryArgTypes,
+|};
+
+export default ({
+    title: "Perseus/Components",
+    args: {
+        color: "#808",
+        size: 25,
+        title: "This is a label that screen readers will use, for example",
+    },
+    argTypes: {
+        size: {
+            control: "range",
+        },
+        icon: {
+            options: Object.getOwnPropertyNames(IconPaths),
+            mapping: IconPaths,
+            defaultValue: "iconChevronDown",
+            control: "select",
+        },
+    },
+}: Story);
+
+export const Icon = (args: StoryArgs): React.Node => (
+    <IconComponent
+        style={{display: "block"}}
+        icon={IconPaths.iconCheck}
+        {...args}
+    />
+);

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

@@ -0,0 +1,60 @@
+// @flow
+import * as React from "react";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+import ImageLoader from "../image-loader.jsx";
+
+const svgUrl = "http://www.khanacademy.org/images/ohnoes-concerned.svg";
+const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";
+
+export default ({
+    title: "Perseus/Components/Image Loader",
+}: Story);
+
+export const SvgImage = (args: StoryArgs): React.Node => {
+    return (
+        <ImageLoader
+            src={svgUrl}
+            preloader={null}
+            imgProps={{
+                alt: "ALT",
+            }}
+            onUpdate={() => {}}
+        />
+    );
+};
+
+export const PngImage = (args: StoryArgs): React.Node => {
+    return (
+        <ImageLoader
+            src={imgUrl}
+            preloader={null}
+            imgProps={{
+                alt: "ALT",
+            }}
+            onUpdate={() => {}}
+        />
+    );
+};
+
+export const InvalidImageWithChildrenForFailedLoading = (
+    args: StoryArgs,
+): React.Node => {
+    return (
+        <ImageLoader
+            src="http://abcdefiahofshiaof.noway.badimage.com"
+            preloader={null}
+            imgProps={{
+                alt: "ALT",
+            }}
+            onUpdate={() => {}}
+        >
+            <span>You can see me! The image failed to load.</span>
+        </ImageLoader>
+    );
+};

package/src/components/__stories__/info-tip.stories.jsx

@@ -0,0 +1,33 @@
+// @flow
+
+import * as React from "react";
+
+import InfoTip from "../info-tip.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Info Tip",
+}: Story);
+
+const svgUrl = "http://www.khanacademy.org/images/ohnoes-concerned.svg";
+
+export const TextOnMouseover = (args: StoryArgs): React.Node => {
+    return (
+        <InfoTip>
+            <span>Sample text</span>
+        </InfoTip>
+    );
+};
+
+export const ImageOnMouseover = (args: StoryArgs): React.Node => {
+    return (
+        <InfoTip>
+            <img alt="" src={svgUrl} />
+        </InfoTip>
+    );
+};

package/src/components/__stories__/inline-icon.stories.jsx

@@ -0,0 +1,39 @@
+// @flow
+import * as React from "react";
+
+import InlineIcon from "../inline-icon.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+const defaultPath = {
+    path: "M62.808 49.728q0 3.36-2.352 5.88l-41.72 41.664q-2.352 2.408-5.768 2.408t-5.768-2.408l-4.872-4.76q-2.352-2.52-2.352-5.88t2.352-5.712l31.08-31.136-31.08-31.024q-2.352-2.52-2.352-5.88t2.352-5.712l4.872-4.76q2.296-2.408 5.768-2.408t5.768 2.408l41.72 41.664q2.352 2.296 2.352 5.656z",
+    height: 100,
+    width: 64,
+};
+
+export default ({
+    title: "Perseus/Components/Inline Icon",
+}: Story);
+
+export const BasicIconPathAndSizing = (args: StoryArgs): React.Node => {
+    return <InlineIcon {...defaultPath} />;
+};
+
+export const BasicIconWithAdditionalStyling = (args: StoryArgs): React.Node => {
+    return (
+        <InlineIcon
+            {...defaultPath}
+            style={{
+                color: "red",
+            }}
+        />
+    );
+};
+
+export const BasicIconWithAriaTitle = (args: StoryArgs): React.Node => {
+    return <InlineIcon {...defaultPath} title="Sample ARIA title" />;
+};

package/src/components/__stories__/input-with-examples.stories.jsx

@@ -0,0 +1,51 @@
+// @flow
+import * as React from "react";
+
+import InputWithExamples from "../input-with-examples.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Input with Examples",
+}: Story);
+
+const defaultObject = {
+    examples: [],
+    id: "",
+    onChange: () => {},
+};
+const testExamples = ["Sample 1", "Sample 2", "Sample 3"];
+
+export const DefaultAndMostlyEmptyProps = (args: StoryArgs): React.Node => {
+    return <InputWithExamples {...defaultObject} />;
+};
+
+export const ListOfExamples = (args: StoryArgs): React.Node => {
+    return <InputWithExamples {...defaultObject} examples={testExamples} />;
+};
+
+export const AriaLabelTextWithListOfExamples = (
+    args: StoryArgs,
+): React.Node => {
+    return (
+        <InputWithExamples
+            {...defaultObject}
+            examples={testExamples}
+            labelText="Test label"
+        />
+    );
+};
+
+export const DisabledInput = (args: StoryArgs): React.Node => {
+    return (
+        <InputWithExamples
+            {...defaultObject}
+            disabled={true}
+            examples={testExamples}
+        />
+    );
+};

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

@@ -0,0 +1,40 @@
+// @flow
+import * as React from "react";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+import Lint from "../lint.jsx";
+
+export default ({
+    title: "Perseus/Components/Lint",
+}: Story);
+
+const defaultObject = {
+    children: <div>This is the sample lint child</div>,
+    insideTable: false,
+    message: "Test message",
+    ruleName: "Test rule",
+};
+
+export const DefaultLintContainerAndMessage = (args: StoryArgs): React.Node => {
+    return <Lint {...defaultObject} />;
+};
+export const Severity1DefaultLintAndMessage = (args: StoryArgs): React.Node => {
+    return <Lint {...defaultObject} severity={1} />;
+};
+export const Severity2DefaultLintAndMessage = (args: StoryArgs): React.Node => {
+    return <Lint {...defaultObject} severity={2} />;
+};
+export const Severity3DefaultLintAndMessage = (args: StoryArgs): React.Node => {
+    return <Lint {...defaultObject} severity={3} />;
+};
+export const Severity4DefaultLintAndMessage = (args: StoryArgs): React.Node => {
+    return <Lint {...defaultObject} severity={4} />;
+};
+export const InlineLintContainerAndMessage = (args: StoryArgs): React.Node => {
+    return <Lint {...defaultObject} inline={true} />;
+};

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

@@ -0,0 +1,29 @@
+// @flow
+import * as React from "react";
+
+import MathInput from "../math-input.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Math Input",
+}: Story);
+
+const defaultObject = {
+    buttonSets: ["basic"],
+    onChange: () => {},
+};
+
+export const DefaultWithBasicButtonSet = (args: StoryArgs): React.Node => {
+    return <MathInput {...defaultObject} />;
+};
+export const AlwaysVisibleButtonSet = (args: StoryArgs): React.Node => {
+    return <MathInput {...defaultObject} buttonsVisible="always" />;
+};
+export const DefaultWithAriaLabel = (args: StoryArgs): React.Node => {
+    return <MathInput {...defaultObject} labelText="Sample label" />;
+};

package/src/components/__stories__/math-output.stories.jsx

@@ -0,0 +1,24 @@
+// @flow
+import * as React from "react";
+
+import MathOutput from "../math-output.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Math Ouput",
+}: Story);
+
+export const EmptyPropsObject = (args: StoryArgs): React.Node => {
+    return <MathOutput />;
+};
+export const StringValue = (args: StoryArgs): React.Node => {
+    return <MathOutput value="Test string value" />;
+};
+export const NumericValue = (args: StoryArgs): React.Node => {
+    return <MathOutput value={1234567890} />;
+};

package/src/components/__stories__/multi-button-group.stories.jsx

@@ -0,0 +1,69 @@
+// @flow
+
+import * as React from "react";
+
+import MultiButtonGroup from "../multi-button-group.jsx";
+
+type StoryArgs = {|allowEmpty: boolean|};
+
+type Story = {|
+    title: string,
+    args: StoryArgs,
+|};
+
+export default ({
+    title: "Perseus/Components/Muli-Button Group",
+    args: {
+        allowEmpty: true,
+    },
+}: Story);
+
+const HarnassedButtonGroup = (
+    props: $Rest<
+        React.ElementConfig<typeof MultiButtonGroup>,
+        {|
+            values: React.ElementConfig<typeof MultiButtonGroup>["values"],
+            onChange: React.ElementConfig<typeof MultiButtonGroup>["onChange"],
+        |},
+    >,
+) => {
+    const [values, updateValues] = React.useState(
+        (null: ?$ReadOnlyArray<string>),
+    );
+
+    return (
+        <MultiButtonGroup
+            {...props}
+            values={values}
+            onChange={(newValues) => {
+                updateValues(newValues);
+            }}
+        />
+    );
+};
+
+export const ButtonsWithNoTitles = (args: StoryArgs): React.Node => {
+    return (
+        <HarnassedButtonGroup
+            {...args}
+            buttons={[
+                {value: "One", content: "Item #1"},
+                {value: "Two", content: "Item #2"},
+                {value: "Three", content: "Item #3"},
+            ]}
+        />
+    );
+};
+
+export const ButtonsWithTitles = (args: StoryArgs): React.Node => {
+    return (
+        <HarnassedButtonGroup
+            {...args}
+            buttons={[
+                {value: "One", content: "Item #1", title: "The first item"},
+                {value: "Two", content: "Item #2", title: "The second item"},
+                {value: "Three", content: "Item #3", title: "The third item"},
+            ]}
+        />
+    );
+};

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

@@ -0,0 +1,42 @@
+// @flow
+import * as React from "react";
+
+import NumberInput from "../number-input.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+const defaultObject = {
+    onChange: () => {},
+};
+
+export default ({
+    title: "Perseus/Components/Number Input",
+}: Story);
+
+export const EmptyPropsObject = (args: StoryArgs): React.Node => {
+    return <NumberInput {...defaultObject} />;
+};
+
+export const SampleValue = (args: StoryArgs): React.Node => {
+    return <NumberInput {...defaultObject} value={1234567890} />;
+};
+
+export const Placeholder = (args: StoryArgs): React.Node => {
+    return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
+};
+
+export const SizeMini = (args: StoryArgs): React.Node => {
+    return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
+};
+
+export const SizeSmall = (args: StoryArgs): React.Node => {
+    return <NumberInput {...defaultObject} size="small" />;
+};
+
+export const SizeNormal = (args: StoryArgs): React.Node => {
+    return <NumberInput {...defaultObject} size="normal" />;
+};

package/src/components/__stories__/possible-answers.stories.jsx

@@ -0,0 +1,22 @@
+// @flow
+import * as React from "react";
+
+import PossibleAnswers from "../possible-answers.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Possible Answers",
+}: Story);
+
+export const EmptyPropsObject = (args: StoryArgs): React.Node => {
+    return <PossibleAnswers />;
+};
+
+export const ThreeSampleAnswers = (args: StoryArgs): React.Node => {
+    return <PossibleAnswers answers={["Answer 1", "Answer 2", "Answer 3"]} />;
+};

package/src/components/__stories__/prop-check-box.stories.jsx

@@ -0,0 +1,62 @@
+// @flow
+import * as React from "react";
+
+import PropCheckBox from "../prop-check-box.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Prop Check Box",
+}: Story);
+
+export const TestLabelWithCheckedObject = (args: StoryArgs): React.Node => {
+    return (
+        <PropCheckBox
+            test={true}
+            label="Test label"
+            onChange={() => {}}
+            labelAlignment="left"
+        />
+    );
+};
+
+export const TestLabelWithUncheckedObject = (args: StoryArgs): React.Node => {
+    return (
+        <PropCheckBox
+            test={false}
+            label="Test label"
+            onChange={() => {}}
+            labelAlignment="left"
+        />
+    );
+};
+
+export const TestLabelWithCheckedObjectLabelOnTheRight = (
+    args: StoryArgs,
+): React.Node => {
+    return (
+        <PropCheckBox
+            test={true}
+            label="Test label"
+            onChange={() => {}}
+            labelAlignment="right"
+        />
+    );
+};
+
+export const TestLabelWithUncheckedObjectLabelOnTheRight = (
+    args: StoryArgs,
+): React.Node => {
+    return (
+        <PropCheckBox
+            test={false}
+            label="Test label"
+            onChange={() => {}}
+            labelAlignment="right"
+        />
+    );
+};

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

@@ -0,0 +1,28 @@
+// @flow
+import * as React from "react";
+
+import RangeInput from "../range-input.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+export default ({
+    title: "Perseus/Components/Range Input",
+}: Story);
+
+export const EmptyValueArray = (args: StoryArgs): React.Node => {
+    return <RangeInput onChange={() => {}} value={[]} />;
+};
+
+export const SimpleWithSmallValueRanges = (args: StoryArgs): React.Node => {
+    return <RangeInput onChange={() => {}} value={[-10, 10]} />;
+};
+
+export const Placeholders = (args: StoryArgs): React.Node => {
+    return (
+        <RangeInput onChange={() => {}} placeholder={["?", "!"]} value={[]} />
+    );
+};

package/src/components/__stories__/simple-keypad-input.stories.jsx

@@ -0,0 +1,28 @@
+// @flow
+import * as React from "react";
+
+import SimpleKeypadInput from "../simple-keypad-input.jsx";
+
+type StoryArgs = {||};
+
+type Story = {|
+    title: string,
+|};
+
+const defaultObject = {
+    onChange: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+};
+
+export default ({
+    title: "Perseus/Components/Simple Keypad Input",
+}: Story);
+
+export const EmptyPropsObject = (args: StoryArgs): React.Node => {
+    return <SimpleKeypadInput {...defaultObject} />;
+};
+
+export const CustomValue = (args: StoryArgs): React.Node => {
+    return <SimpleKeypadInput {...defaultObject} value="Test value" />;
+};