[Types] Adding types to old Perseus Editor components

packages/perseus-editor/src/components/__docs__/blur-input.stories.tsx

@@ -0,0 +1,21 @@
+import {action} from "storybook/actions";
+
+import BlurInput from "../blur-input";
+
+import type {Meta, StoryObj} from "@storybook/react-vite";
+
+const meta: Meta<typeof BlurInput> = {
+    title: "Editors/Components/Blur Input",
+    component: BlurInput,
+    args: {
+        onChange: action("onChange"),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BlurInput>;
+
+export const Example: Story = {
+    args: {value: "Test input"},
+};

packages/perseus-editor/src/components/__stories__/color-select.stories.tsx → packages/perseus-editor/src/components/__docs__/color-select.stories.tsx

@@ -7,7 +7,7 @@ import type {LockedFigureColor} from "@khanacademy/perseus-core";
 import type {Meta} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Color Select",
+    title: "Editors/Components/Color Select",
     component: ColorSelect,
 } as Meta<typeof ColorSelect>;
 

packages/perseus-editor/src/components/__docs__/color-swatch.stories.tsx

@@ -0,0 +1,21 @@
+import {getDefaultFigureForType} from "@khanacademy/perseus-core";
+
+import ColorSwatch from "../../widgets/interactive-graph-editor/locked-figures/color-swatch";
+
+import type {Meta, StoryObj} from "@storybook/react-vite";
+
+const meta: Meta<typeof ColorSwatch> = {
+    title: "Editors/Components/Color Swatch",
+    component: ColorSwatch,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ColorSwatch>;
+
+export const Default: Story = {
+    args: {
+        color: getDefaultFigureForType("point").color,
+        filled: true,
+    },
+};

packages/perseus-editor/src/components/__stories__/device-framer.stories.tsx → packages/perseus-editor/src/components/__docs__/device-framer.stories.tsx

@@ -7,7 +7,7 @@ import type {Meta, StoryObj} from "@storybook/react-vite";
 
 const meta: Meta<typeof DeviceFramer> = {
     component: DeviceFramer,
-    title: "PerseusEditor/Components/Device Framer",
+    title: "Editors/Components/Device Framer",
 };
 
 export default meta;

packages/perseus-editor/src/components/__stories__/graph-settings.argtypes.ts → packages/perseus-editor/src/components/__docs__/graph-settings.argtypes.ts

@@ -1,83 +1,82 @@
 export default {
     editableSettings: {
         control: {
-            type: "array",
+            type: "multi-select" as const,
             options: ["canvas", "graph", "snap", "image", "measure"],
         },
     },
     box: {
         control: {
-            type: "array",
+            type: "object" as const,
         },
     },
     range: {
         control: {
-            type: "object",
+            type: "object" as const,
         },
     },
     labels: {
         control: {
-            type: "object",
+            type: "object" as const,
         },
     },
     step: {
         control: {
-            type: "object",
+            type: "object" as const,
         },
     },
     gridStep: {
         control: {
-            type: "object",
+            type: "object" as const,
         },
     },
     snapStep: {
         control: {
-            type: "object",
+            type: "object" as const,
         },
     },
     valid: {
         control: {
-            type: "text",
+            type: "boolean" as const,
         },
     },
     backgroundImage: {
         control: {
-            type: "object",
+            type: "object" as const,
         },
     },
     markings: {
         control: {
-            type: "select",
-        },
-        table: {
-            type: {
-                summary: '"axes" | "graph" | "grid" | "none"',
-            },
-        },
-        type: {
-            name: "enum",
-            value: ["graph", "grid", "none"],
-            required: false,
+            type: "select" as const,
         },
+        options: ["axes", "graph", "grid", "none"],
     },
     rulerLabel: {
         control: {
-            type: "text",
+            type: "text" as const,
         },
     },
     rulerTicks: {
         control: {
-            type: "number",
+            type: "number" as const,
         },
     },
-    showTooltips: {
+    showProtractor: {
         control: {
-            type: "boolean",
+            type: "boolean" as const,
         },
     },
-    onChange: {
+    showRuler: {
+        control: {
+            type: "boolean" as const,
+        },
+    },
+    showTooltips: {
         control: {
-            type: "function",
+            type: "boolean" as const,
         },
     },
+    onChange: {
+        control: false as const,
+    },
 };

packages/perseus-editor/src/components/__docs__/graph-settings.stories.tsx

@@ -0,0 +1,26 @@
+import GraphSettings from "../graph-settings";
+
+import GraphSettingsArgTypes from "./graph-settings.argtypes";
+
+import type {Meta, StoryObj} from "@storybook/react-vite";
+
+const meta: Meta<typeof GraphSettings> = {
+    title: "Editors/Components/Graph Settings",
+    component: GraphSettings,
+    argTypes: GraphSettingsArgTypes,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof GraphSettings>;
+
+export const Default: Story = {
+    args: {
+        // Separating the array props out because trying to editing them in
+        // the controls panel without a default value causes the story to crash.
+        range: [
+            [-10, 10],
+            [-10, 10],
+        ],
+    },
+};

packages/perseus-editor/src/components/__docs__/interactive-graph-settings.argtypes.ts

@@ -0,0 +1,91 @@
+export default {
+    box: {
+        control: {
+            type: "object" as const,
+        },
+    },
+
+    labels: {
+        control: {
+            type: "object" as const,
+        },
+    },
+
+    range: {
+        control: {
+            type: "object" as const,
+        },
+    },
+
+    step: {
+        control: {
+            type: "object" as const,
+        },
+    },
+
+    gridStep: {
+        control: {
+            type: "object" as const,
+        },
+    },
+
+    snapStep: {
+        control: {
+            type: "object" as const,
+        },
+    },
+
+    valid: {
+        control: {
+            type: "text" as const,
+        },
+    },
+
+    backgroundImage: {
+        control: {
+            type: "object" as const,
+        },
+    },
+
+    markings: {
+        control: {
+            type: "select" as const,
+        },
+        options: ["axes", "graph", "grid", "none"],
+    },
+
+    showProtractor: {
+        control: {
+            type: "boolean" as const,
+        },
+    },
+
+    showRuler: {
+        control: {
+            type: "boolean" as const,
+        },
+    },
+
+    showTooltips: {
+        control: {
+            type: "boolean" as const,
+        },
+    },
+
+    rulerLabel: {
+        control: {
+            type: "select" as const,
+        },
+        options: ["", "mm", "cm", "m", "km", "in", "ft", "yd", "mi"],
+    },
+
+    rulerTicks: {
+        control: {
+            type: "number" as const,
+        },
+    },
+
+    onChange: {
+        control: false as const,
+    },
+};

packages/perseus-editor/src/components/__docs__/interactive-graph-settings.stories.tsx

@@ -0,0 +1,32 @@
+import InteractiveGraphSettings from "../../widgets/interactive-graph-editor/components/interactive-graph-settings";
+
+import InteractiveGraphSettingsArgTypes from "./interactive-graph-settings.argtypes";
+
+import type {Meta, StoryObj} from "@storybook/react-vite";
+
+const meta: Meta<typeof InteractiveGraphSettings> = {
+    title: "Editors/Components/Interactive Graph Settings",
+    component: InteractiveGraphSettings,
+    argTypes: InteractiveGraphSettingsArgTypes,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InteractiveGraphSettings>;
+
+export const Default: Story = {
+    args: {
+        box: [288, 288] as const,
+        gridStep: [1, 1],
+        labels: ["x", "y"],
+        markings: "graph",
+        range: [
+            [-10, 10],
+            [-10, 10],
+        ],
+        showProtractor: false,
+        showTooltips: false,
+        snapStep: [1, 1],
+        step: [1, 1],
+    },
+};

packages/perseus-editor/src/components/__docs__/locked-ellipse-settings.stories.tsx

@@ -0,0 +1,70 @@
+import {getDefaultFigureForType} from "@khanacademy/perseus-core";
+import * as React from "react";
+
+import LockedEllipseSettings from "../../widgets/interactive-graph-editor/locked-figures/locked-ellipse-settings";
+
+import type {Meta, StoryFn, StoryObj} from "@storybook/react-vite";
+
+const meta: Meta<typeof LockedEllipseSettings> = {
+    title: "Editors/Components/Locked Ellipse Settings",
+    component: LockedEllipseSettings,
+};
+
+export default meta;
+
+const defaultProps = {
+    ...getDefaultFigureForType("ellipse"),
+    onChangeProps: () => {},
+    onMove: () => {},
+    onRemove: () => {},
+};
+
+type Story = StoryFn<typeof LockedEllipseSettings>;
+
+export const Default: StoryObj<typeof LockedEllipseSettings> = {
+    args: defaultProps,
+};
+
+export const Controlled: Story = () => {
+    const [props, setProps] = React.useState(defaultProps);
+
+    const handlePropsUpdate = (newProps) => {
+        setProps({
+            ...props,
+            ...newProps,
+        });
+    };
+
+    return (
+        <LockedEllipseSettings {...props} onChangeProps={handlePropsUpdate} />
+    );
+};
+
+Controlled.parameters = {
+    chromatic: {
+        // Disabling because this is testing behavior, not visuals.
+        disableSnapshot: true,
+    },
+};
+
+// Fully expanded view of the locked ellipse settings to allow snapshot testing.
+export const Expanded: Story = () => {
+    const [expanded, setExpanded] = React.useState(true);
+    const [props, setProps] = React.useState(defaultProps);
+
+    const handlePropsUpdate = (newProps) => {
+        setProps({
+            ...props,
+            ...newProps,
+        });
+    };
+
+    return (
+        <LockedEllipseSettings
+            {...props}
+            expanded={expanded}
+            onToggle={setExpanded}
+            onChangeProps={handlePropsUpdate}
+        />
+    );
+};