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

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

@@ -3,7 +3,7 @@ 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;

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);
     };
 

packages/perseus-editor/src/components/drag-target.tsx

@@ -16,16 +16,14 @@
 import * as React from "react";
 
 type Props = {
-    onDrop: (e: DragEvent) => void;
-    component?: any;
-    shouldDragHighlight: (any) => boolean;
-    style?: any;
-    children?: any;
+    onDrop: (e: React.DragEvent<HTMLDivElement>) => void;
+    shouldDragHighlight: (e: React.DragEvent) => boolean;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
     className?: string;
 };
 
 type DefaultProps = {
-    component: Props["component"];
     shouldDragHighlight: Props["shouldDragHighlight"];
 };
 
@@ -34,11 +32,10 @@ type State = {
 };
 class DragTarget extends React.Component<Props, State> {
     static defaultProps: DefaultProps = {
-        component: "div",
         shouldDragHighlight: () => true,
     };
 
-    constructor(props) {
+    constructor(props: Props) {
         super(props);
         this.state = {
             dragHover: false,
@@ -51,7 +48,7 @@ class DragTarget extends React.Component<Props, State> {
         this.handleDragEnter = this.handleDragEnter.bind(this);
     }
 
-    handleDrop(e: DragEvent) {
+    handleDrop(e: React.DragEvent<HTMLDivElement>) {
         e.stopPropagation();
         e.preventDefault();
         this.setState({dragHover: false});
@@ -62,29 +59,29 @@ class DragTarget extends React.Component<Props, State> {
         this.setState({dragHover: false});
     }
 
-    handleDragOver(e) {
+    handleDragOver(e: React.DragEvent) {
         e.preventDefault();
     }
 
     handleDragLeave() {
         this.setState({dragHover: false});
     }
 
-    handleDragEnter(e) {
+    handleDragEnter(e: React.DragEvent) {
         this.setState({dragHover: this.props.shouldDragHighlight(e)});
     }
 
     render() {
         const opacity = this.state.dragHover ? {opacity: 0.3} : {};
         const {
-            component: Component,
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             shouldDragHighlight,
             ...forwardProps
         } = this.props;
 
         return (
-            <Component
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            <div
                 {...forwardProps}
                 style={Object.assign({}, this.props.style, opacity)}
                 onDrop={this.handleDrop}

packages/perseus-editor/src/components/dropdown-option.tsx

@@ -63,22 +63,22 @@ class Option extends React.Component<Props> {
     // @ts-expect-error - TS2564 - Property 'node' has no initializer and is not definitely assigned in the constructor.
     node: HTMLDivElement;
 
-    handleKeyDown(event: any): void {
+    handleKeyDown(event: React.KeyboardEvent<HTMLButtonElement>): void {
         const {onDropdownClose} = this.props;
         const pressedKey = event.key;
-        const focusedElement = event.target;
+        const focusedElement = event.currentTarget;
 
-        if (pressedKey === "ArrowDown" && focusedElement.nextSibling) {
+        if (pressedKey === "ArrowDown" && focusedElement.nextElementSibling) {
             event.preventDefault();
-            focusedElement.nextSibling.focus();
+            (focusedElement.nextElementSibling as HTMLElement).focus();
         }
-        if (pressedKey === "ArrowUp" && focusedElement.previousSibling) {
+        if (pressedKey === "ArrowUp" && focusedElement.previousElementSibling) {
             event.preventDefault();
-            focusedElement.previousSibling.focus();
+            (focusedElement.previousElementSibling as HTMLElement).focus();
         }
         if (
             pressedKey === "ArrowUp" &&
-            !focusedElement.previousSibling &&
+            !focusedElement.previousElementSibling &&
             onDropdownClose
         ) {
             event.preventDefault();

packages/perseus-editor/src/components/form-wrapped-text-field.tsx

@@ -120,7 +120,7 @@ class FormWrappedTextField extends React.Component<PropsWithForwardRef, State> {
         } = this.props;
         const {focused} = this.state;
 
-        const extraStyles: any = {};
+        const extraStyles: React.CSSProperties = {};
         const spanStyle = [styles.input, styles.container];
 
         // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions