[Editor][Typing] Fixing missing types in perseus-editor/src/components

.changeset/old-fishes-swim.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Adding improved type safeguards to components folder in perseus-editor.

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

@@ -4,7 +4,7 @@ import {action} from "storybook/actions";
 import BlurInput from "../blur-input";
 
 export default {
-    title: "PerseusEditor/Components/Blur Input",
+    title: "Editors/Components/Blur Input",
 };
 
 export const Default = (): React.ReactElement => {

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/__stories__/color-swatch.stories.tsx → packages/perseus-editor/src/components/__docs__/color-swatch.stories.tsx

@@ -6,7 +6,7 @@ import ColorSwatch from "../../widgets/interactive-graph-editor/locked-figures/c
 import type {Meta} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Color Swatch",
+    title: "Editors/Components/Color Swatch",
     component: ColorSwatch,
 } as Meta<typeof ColorSwatch>;
 

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.stories.tsx → packages/perseus-editor/src/components/__docs__/graph-settings.stories.tsx

@@ -5,7 +5,7 @@ import GraphSettings from "../graph-settings";
 import GraphSettingsArgTypes from "./graph-settings.argtypes";
 
 export default {
-    title: "PerseusEditor/Components/Graph Settings",
+    title: "Editors/Components/Graph Settings",
     component: GraphSettings,
     argTypes: GraphSettingsArgTypes,
 };

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

@@ -7,7 +7,7 @@ import InteractiveGraphSettingsArgTypes from "./interactive-graph-settings.argty
 import type {StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Interactive Graph Settings",
+    title: "Editors/Components/Interactive Graph Settings",
     component: InteractiveGraphSettings,
     argTypes: InteractiveGraphSettingsArgTypes,
 };

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

@@ -6,7 +6,7 @@ import LockedEllipseSettings from "../../widgets/interactive-graph-editor/locked
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Ellipse Settings",
+    title: "Editors/Components/Locked Ellipse Settings",
     component: LockedEllipseSettings,
 } as Meta<typeof LockedEllipseSettings>;
 

packages/perseus-editor/src/components/__stories__/locked-figures-section.stories.tsx → packages/perseus-editor/src/components/__docs__/locked-figures-section.stories.tsx

@@ -10,7 +10,7 @@ import LockedFiguresSection from "../../widgets/interactive-graph-editor/locked-
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Figures Section",
+    title: "Editors/Components/Locked Figures Section",
     component: LockedFiguresSection,
 } as Meta<typeof LockedFiguresSection>;
 

packages/perseus-editor/src/components/__stories__/locked-function-settings.stories.tsx → packages/perseus-editor/src/components/__docs__/locked-function-settings.stories.tsx

@@ -6,7 +6,7 @@ import LockedFunctionSettings from "../../widgets/interactive-graph-editor/locke
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Function Settings",
+    title: "Editors/Components/Locked Function Settings",
     component: LockedFunctionSettings,
 } as Meta<typeof LockedFunctionSettings>;
 

packages/perseus-editor/src/components/__stories__/locked-label-settings.stories.tsx → packages/perseus-editor/src/components/__docs__/locked-label-settings.stories.tsx

@@ -6,7 +6,7 @@ import LockedLabelSettings from "../../widgets/interactive-graph-editor/locked-f
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Label Settings",
+    title: "Editors/Components/Locked Label Settings",
     component: LockedLabelSettings,
 } as Meta<typeof LockedLabelSettings>;
 

packages/perseus-editor/src/components/__stories__/locked-line-settings.stories.tsx → packages/perseus-editor/src/components/__docs__/locked-line-settings.stories.tsx

@@ -6,7 +6,7 @@ import LockedLineSettings from "../../widgets/interactive-graph-editor/locked-fi
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Line Settings",
+    title: "Editors/Components/Locked Line Settings",
     component: LockedLineSettings,
 } as Meta<typeof LockedLineSettings>;
 

packages/perseus-editor/src/components/__stories__/locked-point-settings.stories.tsx → packages/perseus-editor/src/components/__docs__/locked-point-settings.stories.tsx

@@ -6,7 +6,7 @@ import LockedPointSettings from "../../widgets/interactive-graph-editor/locked-f
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Point Settings",
+    title: "Editors/Components/Locked Point Settings",
     component: LockedPointSettings,
 } as Meta<typeof LockedPointSettings>;
 

packages/perseus-editor/src/components/__stories__/locked-polygon-settings.stories.tsx → packages/perseus-editor/src/components/__docs__/locked-polygon-settings.stories.tsx

@@ -6,7 +6,7 @@ import LockedPolygonSettings from "../../widgets/interactive-graph-editor/locked
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Polygon Settings",
+    title: "Editors/Components/Locked Polygon Settings",
     component: LockedPolygonSettings,
 } as Meta<typeof LockedPolygonSettings>;
 

packages/perseus-editor/src/components/__stories__/locked-vector-settings.stories.tsx → packages/perseus-editor/src/components/__docs__/locked-vector-settings.stories.tsx

@@ -6,7 +6,7 @@ import LockedVectorSettings from "../../widgets/interactive-graph-editor/locked-
 import type {Meta, StoryObj} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Locked Vector Settings",
+    title: "Editors/Components/Locked Vector Settings",
     component: LockedVectorSettings,
 } as Meta<typeof LockedVectorSettings>;
 

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

@@ -7,7 +7,7 @@ import ScrolllessNumberTextField from "../scrollless-number-text-field";
 import type {StoryObj, Meta} from "@storybook/react-vite";
 
 export default {
-    title: "PerseusEditor/Components/Scrollless Number Text Field",
+    title: "Editors/Components/Scrollless Number Text Field",
     component: ScrolllessNumberTextField,
 } as Meta<typeof ScrolllessNumberTextField>;
 

packages/perseus-editor/src/components/__stories__/section-control-button.stories.tsx → packages/perseus-editor/src/components/__docs__/section-control-button.stories.tsx

@@ -3,14 +3,14 @@ import * as React from "react";
 
 import SectionControlButton from "../section-control-button";
 
-type StoryArgs = Record<any, any>;
+type StoryArgs = Record<string, unknown>;
 
 type Story = {
     title: string;
 };
 
 export default {
-    title: "PerseusEditor/Components/Section Control Button",
+    title: "Editors/Components/Section Control Button",
 } as Story;
 
 export const ButtonForEditingSectionsOfContentWithInArticleEditor = (

packages/perseus-editor/src/components/__stories__/toggleable-caret.stories.tsx → packages/perseus-editor/src/components/__docs__/toggleable-caret.stories.tsx

@@ -8,7 +8,7 @@ import type {StoryObj, Meta} from "@storybook/react-vite";
 type Story = StoryObj<typeof ToggleableCaret>;
 
 export default {
-    title: "PerseusEditor/Components/Toggleable Caret",
+    title: "Editors/Components/Toggleable Caret",
     component: ToggleableCaret,
 } satisfies Meta;
 

packages/perseus-editor/src/components/__stories__/viewport-resizer.stories.tsx → packages/perseus-editor/src/components/__docs__/viewport-resizer.stories.tsx

@@ -8,7 +8,7 @@ import type {Meta, StoryFn} from "@storybook/react-vite";
 
 const meta: Meta<typeof ViewportResizer> = {
     component: ViewportResizer,
-    title: "PerseusEditor/Components/Viewport Resizer",
+    title: "Editors/Components/Viewport Resizer",
 };
 
 export default meta;

packages/perseus-editor/src/components/__tests__/graph-settings.test.tsx

@@ -169,7 +169,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({markings: "grid"}),
-            undefined,
         );
     });
 
@@ -192,7 +191,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({rulerLabel: "cm"}),
-            undefined,
         );
     });
 
@@ -214,7 +212,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({rulerTicks: 4}),
-            undefined,
         );
     });
 
@@ -245,7 +242,6 @@ describe("GraphSettings", () => {
                         url: "https://example.com/image.png",
                     }),
                 }),
-                undefined,
             ),
         );
     });
@@ -276,7 +272,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     valid: "Image must be smaller than 450px x 450px.",
                 }),
-                undefined,
             ),
         );
     });
@@ -306,7 +301,6 @@ describe("GraphSettings", () => {
                         url: null,
                     }),
                 }),
-                undefined,
             ),
         );
     });
@@ -353,7 +347,6 @@ describe("GraphSettings", () => {
         // Assert
         expect(onChange).toHaveBeenCalledWith(
             expect.objectContaining({showProtractor: false}),
-            undefined,
         );
     });
 
@@ -381,7 +374,6 @@ describe("GraphSettings", () => {
                     ],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -410,7 +402,6 @@ describe("GraphSettings", () => {
                     ],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -433,13 +424,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    range: [
-                        [-10, 10],
-                        [-10, 10],
-                    ],
                     valid: "Range must have a higher number on the right",
                 }),
-                undefined,
             ),
         );
     });
@@ -465,7 +451,6 @@ describe("GraphSettings", () => {
                     step: [2, 1],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -488,10 +473,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    step: [1, 1],
                     valid: "Step is too large, there must be at least 3 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -521,10 +504,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    step: [1, 1],
                     valid: "Step is too small, there can be at most 20 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -554,7 +535,6 @@ describe("GraphSettings", () => {
                     snapStep: [2, 1],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -581,10 +561,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    snapStep: [1, 1],
                     valid: "Snap step is too large, there must be at least 5 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -611,7 +589,6 @@ describe("GraphSettings", () => {
                     gridStep: [2, 1],
                     valid: true,
                 }),
-                undefined,
             ),
         );
     });
@@ -635,10 +612,8 @@ describe("GraphSettings", () => {
         await waitFor(() =>
             expect(onChange).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    gridStep: [1, 1],
                     valid: "Grid step is too large, there must be at least 3 ticks.",
                 }),
-                undefined,
             ),
         );
     });
@@ -664,7 +639,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     labels: ["time", "y"],
                 }),
-                undefined,
             ),
         );
     });
@@ -690,7 +664,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     labels: ["x", "count"],
                 }),
-                undefined,
             ),
         );
     });
@@ -719,7 +692,6 @@ describe("GraphSettings", () => {
                 expect.objectContaining({
                     box: [300, 288],
                 }),
-                undefined,
             ),
         );
     });

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

@@ -39,11 +39,11 @@ class BlurInput extends React.Component<Props, State> {
         this.setState({value: nextProps.value});
     }
 
-    handleChange: (e: any) => void = (e) => {
+    handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         this.setState({value: e.target.value});
     };
 
-    handleBlur: (e: any) => void = (e) => {
+    handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
         this.props.onChange(e.target.value);
     };