@khanacademy/perseus 3.0.0 → 4.0.0

package/src/components/__stories__/graphie.stories.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+import {ItemRendererWithDebugUI} from "../../../../../testing/item-renderer-with-debug-ui";
+import {itemWithPieChart} from "../../__testdata__/graphie.testdata";
+import Graphie from "../graphie";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+const size = 200;
+
+export default {
+    title: "Perseus/Components/Graphie",
+} as Story;
+
+export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <Graphie
+            box={[size, size]}
+            setDrawingAreaAvailable={() => {}}
+            setup={() => {}}
+        />
+    );
+};
+
+export const PieChartGraphieLabels: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <ItemRendererWithDebugUI item={itemWithPieChart} />;
+};

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

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

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

@@ -0,0 +1,63 @@
+import * as React from "react";
+
+import * as IconPaths from "../../icon-paths";
+import IconComponent from "../icon";
+
+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 SetValueType<T, V> = {
+    [Property in keyof T]: V;
+};
+
+type StoryArgTypes = SetValueType<
+    StoryArgs,
+    StorybookStoryArgs | null | undefined
+>;
+
+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",
+        },
+    },
+} as Story;
+
+export const Icon: React.FC<StoryArgs> = (args): React.ReactElement => (
+    <IconComponent
+        style={{display: "block"}}
+        icon={IconPaths.iconCheck}
+        {...args}
+    />
+);

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

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+type StoryArgs = Record<any, any>;
+
+type Story = {
+    title: string;
+};
+
+import ImageLoader from "../image-loader";
+
+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",
+} as Story;
+
+export const SvgImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return (
+        <ImageLoader
+            src={svgUrl}
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>> | null | undefined'.
+            preloader={null}
+            imgProps={{
+                alt: "ALT",
+            }}
+            onUpdate={() => {}}
+        />
+    );
+};
+
+export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+    return (
+        <ImageLoader
+            src={imgUrl}
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>> | null | undefined'.
+            preloader={null}
+            imgProps={{
+                alt: "ALT",
+            }}
+            onUpdate={() => {}}
+        />
+    );
+};
+
+export const InvalidImageWithChildrenForFailedLoading: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <ImageLoader
+            src="http://abcdefiahofshiaof.noway.badimage.com"
+            // @ts-expect-error [FEI-5003] - TS2322 - Type 'null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>> | null | undefined'.
+            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.tsx

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

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

@@ -0,0 +1,44 @@
+import * as React from "react";
+
+import InlineIcon from "../inline-icon";
+
+type StoryArgs = Record<any, any>;
+
+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,
+} as const;
+
+export default {
+    title: "Perseus/Components/Inline Icon",
+} as Story;
+
+export const BasicIconPathAndSizing: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <InlineIcon {...defaultPath} />;
+};
+
+export const BasicIconWithAdditionalStyling: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <InlineIcon
+            {...defaultPath}
+            style={{
+                color: "red",
+            }}
+        />
+    );
+};
+
+export const BasicIconWithAriaTitle: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return <InlineIcon {...defaultPath} title="Sample ARIA title" />;
+};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,70 @@
+import * as React from "react";
+
+import MultiButtonGroup from "../multi-button-group";
+
+type StoryArgs = {
+    allowEmpty: boolean;
+};
+
+type Story = {
+    title: string;
+    args: StoryArgs;
+};
+
+export default {
+    title: "Perseus/Components/Muli-Button Group",
+    args: {
+        allowEmpty: true,
+    },
+} as Story;
+
+const HarnassedButtonGroup = (
+    props: Pick<
+        React.ComponentProps<typeof MultiButtonGroup>,
+        "buttons" | "allowEmpty"
+    >,
+) => {
+    const [values, updateValues] = React.useState(
+        null as ReadonlyArray<string> | null | undefined,
+    );
+
+    return (
+        <MultiButtonGroup
+            {...props}
+            values={values}
+            onChange={(newValues) => {
+                updateValues(newValues);
+            }}
+        />
+    );
+};
+
+export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    return (
+        <HarnassedButtonGroup
+            {...args}
+            buttons={[
+                {value: "One", content: "Item #1"},
+                {value: "Two", content: "Item #2"},
+                {value: "Three", content: "Item #3"},
+            ]}
+        />
+    );
+};
+
+export const ButtonsWithTitles: React.FC<StoryArgs> = (
+    args,
+): React.ReactElement => {
+    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.tsx

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

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

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

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

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

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

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