Modernize Perseus' components folder stories

.changeset/old-lamps-wonder.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/math-input": patch
+"@khanacademy/perseus": patch
+---
+
+Improve prop types for various components

packages/perseus-editor/src/__stories__/interactive-graph-editor.stories.tsx

@@ -172,7 +172,7 @@ MafsWithLockedFiguresCurrent.parameters = {
     chromatic: {
         // Disabling because this isn't visually testing anything on the
         // initial load of the editor page.
-        disable: true,
+        disableSnapshot: true,
     },
 };
 
@@ -413,7 +413,7 @@ WithSaveWarnings.parameters = {
         // Disabling because this isn't testing anything visually on the
         // editor page. It's testing the error message, which don't
         // even show up on the initial load.
-        disable: true,
+        disableSnapshot: true,
     },
 };
 

packages/perseus-editor/src/components/__stories__/scrollless-number-text-field.stories.tsx

@@ -45,7 +45,7 @@ Controlled.parameters = {
     chromatic: {
         // Disable the snapshot for this story because it's testing
         // behavior, not visuals.
-        disable: true,
+        disableSnapshot: true,
     },
 };
 
@@ -77,6 +77,6 @@ LongPageScroll.parameters = {
     chromatic: {
         // Disable the snapshot for this story because it's testing
         // behavior, not visuals.
-        disable: true,
+        disableSnapshot: true,
     },
 };

packages/perseus/src/components/__stories__/graph.stories.tsx

@@ -1,27 +1,22 @@
-import * as React from "react";
-
 import Graph from "../graph";
 
 import type {StoryObj, Meta} from "@storybook/react";
 
-type StoryArgs = StoryObj<Graph>;
-
-type Story = Meta<Graph>;
+type Story = StoryObj<typeof Graph>;
 
 const size = 200;
 
-export default {
+const meta: Meta = {
     title: "Perseus/Components/Graph",
-} as Story;
-
-export const SquareBoxSizeAndOtherwiseEmpty = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return <Graph box={[size, size]} />;
+    component: Graph,
+    args: {
+        box: [size, size],
+    },
 };
+export default meta;
+
+export const SquareBoxSizeAndOtherwiseEmpty: Story = {};
 
-export const LabeledSquaredBox = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Graph box={[size, size]} labels={["First label", "Second label"]} />
-    );
+export const LabeledSquaredBox: Story = {
+    args: {labels: ["First label", "Second label"]},
 };

packages/perseus/src/components/__stories__/graphie.stories.tsx

@@ -6,28 +6,27 @@ import Graphie from "../graphie";
 
 import type {StoryObj, Meta} from "@storybook/react";
 
-type StoryArgs = StoryObj<Graphie>;
-
-type Story = Meta<Graphie>;
+type Story = StoryObj<typeof Graphie>;
 
 const size = 200;
 
-export default {
+const meta: Meta = {
     title: "Perseus/Components/Graphie",
-} as Story;
-
-export const SquareBoxSizeAndOtherwiseEmpty = (
-    args: StoryArgs,
-): React.ReactElement => {
-    return (
-        <Graphie
-            box={[size, size]}
-            setDrawingAreaAvailable={() => {}}
-            setup={() => {}}
-        />
-    );
+    component: Graphie,
+    args: {
+        box: [size, size],
+        setup: () => {},
+        setDrawingAreaAvailable: () => {},
+    },
 };
+export default meta;
+
+export const SquareBoxSizeAndOtherwiseEmpty: Story = {};
 
-export const PieChartGraphieLabels = (args: StoryArgs): React.ReactElement => {
+/**
+ * A demonstration of a Graphie rendered using the Perseus `Renderer` complete
+ * with overlaid labels and an image caption below.
+ */
+export const PieChartGraphieLabels = () => {
     return <ServerItemRendererWithDebugUI item={itemWithPieChart} />;
 };

packages/perseus/src/components/__stories__/hud.stories.tsx

@@ -1,35 +1,21 @@
-import * as React from "react";
+import {action} from "@storybook/addon-actions";
 
 import Hud from "../hud";
 
 import type {StoryObj, Meta} from "@storybook/react";
 
-type StoryArgs = StoryObj<typeof Hud>;
+type Story = StoryObj<typeof Hud>;
 
-type Story = Meta<typeof Hud>;
-
-export default {
+const meta: Meta = {
     title: "Perseus/Components/HUD",
-} as Story;
-
-export const TestMessageDisabled = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Hud
-            fixedPosition={false}
-            message="Test message"
-            enabled={false}
-            onClick={() => {}}
-        />
-    );
+    component: Hud,
+    args: {
+        enabled: true,
+        fixedPosition: false,
+        message: "Test message",
+        onClick: action("onClick"),
+    },
 };
+export default meta;
 
-export const TestMessageEnabled = (args: StoryArgs): React.ReactElement => {
-    return (
-        <Hud
-            fixedPosition={false}
-            message="Test message"
-            enabled={true}
-            onClick={() => {}}
-        />
-    );
-};
+export const Default: Story = {};

packages/perseus/src/components/__stories__/icon.stories.tsx

@@ -1,16 +1,13 @@
-import * as React from "react";
-
 import * as IconPaths from "../../icon-paths";
 import IconComponent from "../icon";
 
 import type {StoryObj, Meta} from "@storybook/react";
 
-type StoryArgs = StoryObj<IconComponent>;
-
-type Story = Meta<IconComponent>;
+type Story = StoryObj<typeof IconComponent>;
 
-export default {
-    title: "Perseus/Components",
+const meta: Meta = {
+    title: "Perseus/Components/Icon",
+    component: IconComponent,
     args: {
         color: "#808",
         size: 25,
@@ -27,12 +24,12 @@ export default {
             control: "select",
         },
     },
-} as Story;
+};
+export default meta;
 
-export const Icon = (args: StoryArgs): React.ReactElement => (
-    <IconComponent
-        style={{display: "block"}}
-        icon={IconPaths.iconCheck}
-        {...args}
-    />
-);
+export const Icon: Story = {
+    args: {
+        style: {display: "block"},
+        icon: IconPaths.iconCheck,
+    },
+};

packages/perseus/src/components/__stories__/image-loader.stories.tsx

@@ -1,60 +1,48 @@
-/* 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";
 
+import type {Meta, StoryObj} from "@storybook/react";
+
 const svgUrl = "http://www.khanacademy.org/images/ohnoes-concerned.svg";
 const imgUrl = "https://www.khanacademy.org/images/hand-tree.new.png";
 
-export default {
+const meta: Meta = {
     title: "Perseus/Components/Image Loader",
-} as Story;
-
-export const SvgImage = (args: StoryArgs): React.ReactElement => {
-    return (
-        <ImageLoader
-            src={svgUrl}
-            preloader={null}
-            imgProps={{
-                alt: "ALT",
-            }}
-            onUpdate={() => {}}
-        />
-    );
+    component: ImageLoader,
+    args: {
+        preloader: null,
+        imgProps: {
+            alt: "ALT",
+        },
+        onUpdate: () => {},
+    },
+    parameters: {
+        chromatic: {
+            // This component only deals with loading images and providing a
+            // fallback if it fails. This is not very useful to snapshot so
+            // we're disabling it.
+            disableSnapshot: true,
+        },
+    },
+};
+export default meta;
+
+type Story = StoryObj<typeof ImageLoader>;
+
+export const SvgImage: Story = {
+    args: {
+        src: svgUrl,
+    },
 };
 
-export const PngImage = (args: StoryArgs): React.ReactElement => {
-    return (
-        <ImageLoader
-            src={imgUrl}
-            preloader={null}
-            imgProps={{
-                alt: "ALT",
-            }}
-            onUpdate={() => {}}
-        />
-    );
+export const PngImage: Story = {
+    args: {src: imgUrl},
 };
 
-export const InvalidImageWithChildrenForFailedLoading = (
-    args: StoryArgs,
-): React.ReactElement => {
-    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>
-    );
+export const InvalidImageWithChildrenForFailedLoading: Story = {
+    args: {
+        src: "http://abcdefiahofshiaof.noway.badimage.com",
+        children: <span>You can see me! The image failed to load.</span>,
+    },
 };

packages/perseus/src/components/__stories__/info-tip.stories.tsx

@@ -2,34 +2,40 @@ import * as React from "react";
 
 import InfoTip from "../info-tip";
 
-type StoryArgs = Record<any, any>;
+import type {Meta, StoryObj} from "@storybook/react";
 
-type Story = {
-    title: string;
+const meta: Meta = {
+    title: "Perseus/Components/Info Tip",
+    component: InfoTip,
 };
+export default meta;
 
-export default {
-    title: "Perseus/Components/Info Tip",
-} as Story;
+type Story = StoryObj<typeof InfoTip>;
 
-export const TextOnMouseover = (args: StoryArgs): React.ReactElement => {
-    return <InfoTip>Sample text</InfoTip>;
+export const TextOnMouseover: Story = {
+    args: {
+        children: "Sample text",
+    },
 };
 
-export const CodeInText = (args: StoryArgs): React.ReactElement => {
-    return (
-        <InfoTip>
-            Settings that you add here are available to the program as an object
-            returned by <code>Program.settings()</code>
-        </InfoTip>
-    );
+export const CodeInText: Story = {
+    args: {
+        children: (
+            <>
+                Settings that you add here are available to the program as an
+                object returned by <code>Program.settings()</code>
+            </>
+        ),
+    },
 };
 
-export const MultipleElements = (args: StoryArgs): React.ReactElement => {
-    return (
-        <InfoTip>
-            <p>First paragraph</p>
-            <p>Second paragraph</p>
-        </InfoTip>
-    );
+export const MultipleElements: Story = {
+    args: {
+        children: (
+            <>
+                <p>First paragraph</p>
+                <p>Second paragraph</p>
+            </>
+        ),
+    },
 };