@khanacademy/perseus 19.1.4 → 19.1.6

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

@@ -1,55 +0,0 @@
-import * as React from "react";
-
-import ButtonGroup from "../button-group";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-export default {
-    title: "Perseus/Components/Button Group",
-} as Story;
-
-const HarnassedButtonGroup = (
-    props: Pick<React.ComponentProps<typeof ButtonGroup>, "buttons">,
-) => {
-    const [value, updateValue] = React.useState(
-        null as string | null | undefined,
-    );
-
-    return (
-        <ButtonGroup
-            buttons={props.buttons}
-            value={value}
-            onChange={(newValue) => {
-                updateValue(newValue);
-            }}
-        />
-    );
-};
-
-export const ButtonsWithNoTitles = (args: StoryArgs): React.ReactElement => {
-    return (
-        <HarnassedButtonGroup
-            buttons={[
-                {value: "One", content: "Item #1"},
-                {value: "Two", content: "Item #2"},
-                {value: "Three", content: "Item #3"},
-            ]}
-        />
-    );
-};
-
-export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
-    return (
-        <HarnassedButtonGroup
-            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__/fixed-to-responsive.stories.tsx

@@ -1,141 +0,0 @@
-import * as React from "react";
-
-import {getDependencies} from "../../dependencies";
-import FixedToResponsive from "../fixed-to-responsive";
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-const svgUrl = "https://www.khanacademy.org/images/ohnoes-concerned.svg";
-const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";
-
-const sizeSmall = 200;
-const sizeMedium = 600;
-const sizeLarge = 1024;
-const width = 1024;
-
-export default {
-    title: "Perseus/Components/Fixed to Responsive",
-} as Story;
-
-export const SmallImageWithSmallContainer = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <FixedToResponsive width={width} height={sizeSmall}>
-            <img
-                alt=""
-                width={sizeSmall}
-                height={sizeSmall}
-                src={getDependencies().staticUrl(svgUrl)}
-            />
-        </FixedToResponsive>
-    );
-};
-
-export const SmallImageWithMediumContainer = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <FixedToResponsive width={width} height={sizeMedium}>
-            <img
-                alt=""
-                width={sizeMedium}
-                height={sizeMedium}
-                src={getDependencies().staticUrl(svgUrl)}
-            />
-        </FixedToResponsive>
-    );
-};
-
-export const LargeImageWithLargeContainer = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <FixedToResponsive width={width} height={sizeLarge}>
-            <img
-                alt=""
-                width={sizeLarge}
-                height={sizeLarge}
-                src={getDependencies().staticUrl(svgUrl)}
-            />
-        </FixedToResponsive>
-    );
-};
-
-export const LargeImageWithSmallerContainer = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <FixedToResponsive width={width} height={sizeSmall}>
-            <img
-                alt=""
-                width={sizeLarge}
-                height={sizeLarge}
-                src={getDependencies().staticUrl(svgUrl)}
-            />
-        </FixedToResponsive>
-    );
-};
-
-export const TwoOverlayedImagesInsteadOneResponsiveContainer = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <FixedToResponsive width={width} height={sizeSmall}>
-            <img
-                alt=""
-                key={1}
-                width={sizeSmall}
-                height={sizeSmall}
-                src={imgUrl}
-            />
-            <img
-                alt=""
-                key={2}
-                width={sizeSmall}
-                height={sizeSmall}
-                src={getDependencies().staticUrl(svgUrl)}
-            />
-        </FixedToResponsive>
-    );
-};
-
-export const HeightConstrainingAnImage = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <FixedToResponsive
-            width={width}
-            height={sizeLarge}
-            constrainHeight={true}
-        >
-            <img
-                alt=""
-                width={sizeLarge}
-                height={sizeLarge}
-                src={getDependencies().staticUrl(svgUrl)}
-            />
-        </FixedToResponsive>
-    );
-};
-
-export const AllowingFullBleed = (args: StoryArgs): React.ReactElement => {
-    return (
-        <FixedToResponsive
-            width={width}
-            height={sizeMedium}
-            allowFullBleed={true}
-        >
-            <img
-                alt=""
-                width={sizeMedium}
-                height={sizeMedium}
-                src={getDependencies().staticUrl(svgUrl)}
-            />
-        </FixedToResponsive>
-    );
-};

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

@@ -1,28 +0,0 @@
-import * as React from "react";
-
-import Graph from "../graph";
-// TODO(scottgrant): Katex is unavailable here. Fix!
-
-type StoryArgs = Record<any, any>;
-
-type Story = {
-    title: string;
-};
-
-const size = 200;
-
-export default {
-    title: "Perseus/Components/Graph",
-} as Story;
-
-export const SquareBoxSizeAndOtherwiseEmpty = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Graph box={[size, size]} />;
-};
-
-export const LabeledSquaredBox = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Graph box={[size, size]} labels={["First label", "Second label"]} />
-    );
-};

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

@@ -1,33 +0,0 @@
-import * as React from "react";
-
-import {ServerItemRendererWithDebugUI} from "../../../../../testing/server-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 = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Graphie
-            box={[size, size]}
-            setDrawingAreaAvailable={() => {}}
-            setup={() => {}}
-        />
-    );
-};
-
-export const PieChartGraphieLabels = (args: StoryArgs): React.ReactElement => {
-    return <ServerItemRendererWithDebugUI item={itemWithPieChart} />;
-};

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

@@ -1,35 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Hud
-            fixedPosition={false}
-            message="Test message"
-            enabled={false}
-            onClick={() => {}}
-        />
-    );
-};
-
-export const TestMessageEnabled = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Hud
-            fixedPosition={false}
-            message="Test message"
-            enabled={true}
-            onClick={() => {}}
-        />
-    );
-};

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

@@ -1,63 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => (
-    <IconComponent
-        style={{display: "block"}}
-        icon={IconPaths.iconCheck}
-        {...args}
-    />
-);

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

@@ -1,63 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-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 = (args: StoryArgs): 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 = (args: StoryArgs): 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 = (
-    args: StoryArgs,
-): 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

@@ -1,31 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return (
-        <InfoTip>
-            <span>Sample text</span>
-        </InfoTip>
-    );
-};
-
-export const ImageOnMouseover = (args: StoryArgs): React.ReactElement => {
-    return (
-        <InfoTip>
-            <img alt="" src={svgUrl} />
-        </InfoTip>
-    );
-};

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

@@ -1,40 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return <InlineIcon {...defaultPath} />;
-};
-
-export const BasicIconWithAdditionalStyling = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <InlineIcon
-            {...defaultPath}
-            style={{
-                color: "red",
-            }}
-        />
-    );
-};
-
-export const BasicIconWithAriaTitle = (args: StoryArgs): React.ReactElement => {
-    return <InlineIcon {...defaultPath} title="Sample ARIA title" />;
-};

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

@@ -1,53 +0,0 @@
-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 = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <InputWithExamples {...defaultObject} />;
-};
-
-export const ListOfExamples = (args: StoryArgs): React.ReactElement => {
-    return <InputWithExamples {...defaultObject} examples={testExamples} />;
-};
-
-export const AriaLabelTextWithListOfExamples = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <InputWithExamples
-            {...defaultObject}
-            examples={testExamples}
-            labelText="Test label"
-        />
-    );
-};
-
-export const DisabledInput = (args: StoryArgs): React.ReactElement => {
-    return (
-        <InputWithExamples
-            {...defaultObject}
-            disabled={true}
-            examples={testExamples}
-        />
-    );
-};

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

@@ -1,86 +0,0 @@
-import * as React from "react";
-
-import Lint from "../lint";
-
-import type {Meta} from "@storybook/react";
-
-const meta: Meta<typeof Lint> = {
-    title: "Perseus/Components/Lint",
-};
-
-export default meta;
-
-type StoryArgs = Record<any, any>;
-
-const defaultObject = {
-    children: <div>This is the sample lint child</div>,
-    insideTable: false,
-    message: "Test message",
-    ruleName: "Test rule",
-} as const;
-
-const Container = ({children}: {children: React.ReactNode}) => {
-    return (
-        <div
-            style={{
-                width: "250px",
-                padding: "8px",
-                margin: "20px",
-                border: "solid 1px grey",
-            }}
-        >
-            {children}
-        </div>
-    );
-};
-
-export const DefaultLintContainerAndMessage = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Container>
-            <Lint {...defaultObject} />
-        </Container>
-    );
-};
-export const LintSeverity1Error = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Container>
-            <Lint {...defaultObject} severity={1} />
-        </Container>
-    );
-};
-export const LintSeverity2Warning = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Container>
-            <Lint {...defaultObject} severity={2} />
-        </Container>
-    );
-};
-export const LintSeverity3Recommendation = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Container>
-            <Lint {...defaultObject} severity={3} />
-        </Container>
-    );
-};
-export const LintSeverity4OfflineReportingOnly = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Container>
-            <Lint {...defaultObject} severity={4} />
-        </Container>
-    );
-};
-export const InlineLintContainerAndMessage = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Container>
-            <Lint {...defaultObject} inline={true} />
-        </Container>
-    );
-};

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

@@ -1,43 +0,0 @@
-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 = {
-    keypadButtonSets: {
-        advancedRelations: true,
-        basicRelations: true,
-        divisionKey: true,
-        logarithms: true,
-        preAlgebra: true,
-        trigonometry: true,
-    },
-    onChange: () => {},
-    analytics: {onAnalyticsEvent: () => Promise.resolve()},
-} as const;
-
-export const DefaultWithBasicButtonSet = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <MathInput {...defaultObject} />;
-};
-export const DefaultWithAriaLabel = (args: StoryArgs): React.ReactElement => {
-    return <MathInput {...defaultObject} labelText="Sample label" />;
-};
-
-export const KeypadOpenByDefault = (args: StoryArgs): React.ReactElement => {
-    return <MathInput {...defaultObject} buttonsVisible="always" />;
-};
-
-export const KeypadNeverVisible = (args: StoryArgs): React.ReactElement => {
-    return <MathInput {...defaultObject} buttonsVisible="never" />;
-};

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

@@ -1,23 +0,0 @@
-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 = (args: StoryArgs): React.ReactElement => {
-    return <MathOutput />;
-};
-export const StringValue = (args: StoryArgs): React.ReactElement => {
-    return <MathOutput value="Test string value" />;
-};
-export const NumericValue = (args: StoryArgs): React.ReactElement => {
-    return <MathOutput value={1234567890} />;
-};