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/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,23 @@ 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 => {
+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,40 @@
-/* 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: () => {},
+    },
+};
+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>
+            </>
+        ),
+    },
 };

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

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