chore: improve types in components

Author: targos

src/component/EventsTrackers/KeysListenerTracker.tsx

@@ -279,9 +279,9 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
   );
 
   const keysPreferencesListenerHandler = useCallback(
-    (e: any, num: any) => {
+    (event: globalThis.KeyboardEvent, num: number) => {
       if (data && data.length > 0 && num >= 1 && num <= 9) {
-        if (e.shiftKey) {
+        if (event.shiftKey) {
           dispatch({
             type: 'SET_KEY_PREFERENCES',
             payload: {
@@ -291,7 +291,7 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
           toaster.show({
             message: `Configuration Reset, press '${num}' again to reload it.`,
           });
-        } else if (!checkModifierKeyActivated(e)) {
+        } else if (!checkModifierKeyActivated(event)) {
           if (keysPreferences?.[num]) {
             dispatch({
               type: 'APPLY_KEY_PREFERENCES',
@@ -317,7 +317,7 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
   );
 
   const toolsListenerHandler = useCallback(
-    (e: any) => {
+    (e: globalThis.KeyboardEvent) => {
       try {
         if (!e.shiftKey && !e.metaKey && !e.ctrlKey) {
           switch (e.key) {
@@ -495,19 +495,19 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
   );
 
   const handleOnKeyDown = useCallback(
-    (e: any) => {
-      if (!ignoreElement(e) && mouseIsOverDisplayer.current) {
-        const num = Number(e.code.slice(-1)) || 0;
+    (event: globalThis.KeyboardEvent) => {
+      if (!ignoreElement(event) && mouseIsOverDisplayer.current) {
+        const num = Number(event.code.slice(-1)) || 0;
         if (num > 0) {
-          keysPreferencesListenerHandler(e, num);
+          keysPreferencesListenerHandler(event, num);
         } else if (
-          ['Delete', 'Backspace'].includes(e.key) &&
+          ['Delete', 'Backspace'].includes(event.key) &&
           highlight.sourceData
         ) {
-          e.preventDefault();
+          event.preventDefault();
           void deleteHandler(highlight.sourceData);
         } else {
-          toolsListenerHandler(e);
+          toolsListenerHandler(event);
         }
       }
     },
@@ -532,7 +532,7 @@ function KeysListenerTracker(props: KeysListenerTrackerProps) {
 const tags = new Set(['INPUT', 'TEXTAREA']);
 const inputTypes = new Set(['checkbox', 'radio']);
 
-function ignoreElement(e: Event) {
+function ignoreElement(e: globalThis.KeyboardEvent) {
   const element = e.target as HTMLInputElement;
   return (
     (tags.has(element.tagName) && !inputTypes.has(element.type)) ||

src/component/EventsTrackers/MouseTracker.tsx

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import { createContext, useCallback, useContext, useState } from 'react';
 
 interface MouseTrackerData {
@@ -23,32 +23,28 @@ interface MouseTrackerProps {
   noPropagation?: boolean;
 }
 
-export function MouseTracker({
-  children,
-  className,
-  style,
-  noPropagation,
-}: MouseTrackerProps) {
+export function MouseTracker(props: MouseTrackerProps) {
+  const { children, className, style, noPropagation } = props;
   const [mouseTrackerState, setMouseTrackerState] =
     useState<MouseTrackerData | null>(null);
   const mouseMoveHandler = useCallback(
-    (e: any) => {
-      const boundingRect = e.currentTarget.getBoundingClientRect();
-      const x = e.clientX - boundingRect.x;
-      const y = e.clientY - boundingRect.y;
+    (event: MouseEvent) => {
+      const boundingRect = event.currentTarget.getBoundingClientRect();
+      const x = event.clientX - boundingRect.x;
+      const y = event.clientY - boundingRect.y;
       setMouseTrackerState({ x, y });
       if (noPropagation) {
-        e.stopPropagation();
+        event.stopPropagation();
       }
     },
     [noPropagation],
   );
 
   const mouseLeaveHandler = useCallback(
-    (e: any) => {
+    (event: MouseEvent) => {
       setMouseTrackerState(null);
       if (noPropagation) {
-        e.stopPropagation();
+        event.stopPropagation();
       }
     },
     [noPropagation],

src/component/assignment/utilities/getAssignments.ts

@@ -55,7 +55,7 @@ function setZonesAssignments(assignments: Assignments, zones: Zones) {
 
 function setAssignment(
   assignments: Assignments,
-  id: any,
+  id: string,
   axis: Axis,
   diaID: string,
 ) {

src/component/elements/Button.tsx

@@ -7,6 +7,7 @@ import type {
   CSSProperties,
   ComponentPropsWithoutRef,
   ElementType,
+  MouseEvent,
 } from 'react';
 import { FaInfoCircle } from 'react-icons/fa';
 
@@ -285,7 +286,7 @@ function Button<E extends ElementType = 'button'>(props: ButtonProps<E>) {
         onClick={
           Wrapper === 'button' || (Wrapper === 'div' && !disabled)
             ? onClick
-            : (e: any) => e.stopPropagation()
+            : (e: MouseEvent) => e.stopPropagation()
         }
         css={[
           styles.button({

src/component/elements/D3Axis.tsx

@@ -27,7 +27,7 @@ interface D3AxisProps
     BaseD3AxisProps,
     Pick<SVGAttributes<SVGGElement>, 'transform' | 'children' | 'className'>,
     UseLinearPrimaryTicksResult {
-  gridSize?: number;
+  gridSize: number;
   primaryGridProps?: PrimaryGridElementProps;
   secondaryGridProps?: SecondaryGridElementProps;
   showGrid?: boolean;
@@ -41,7 +41,7 @@ interface BaseLineProps
 
 interface GridProps<T> extends UseLinearPrimaryTicksResult {
   axisPosition: AxisPosition;
-  gridSize?: number;
+  gridSize: number;
   gridProps?: T;
 }
 
@@ -160,7 +160,11 @@ function getSecondaryTickOffset(ticks: Array<Tick<number>>, direction: -1 | 1) {
   return (second.position - first.position) / 2;
 }
 
-function getLinePosition(position: any, axisPosition: any, gridSize: any) {
+function getLinePosition(
+  position: number,
+  axisPosition: AxisPosition,
+  gridSize: number,
+) {
   if (['top', 'bottom'].includes(axisPosition)) {
     return {
       x1: position,

src/component/elements/MoleculeSelection.tsx

@@ -82,7 +82,7 @@ export default function MoleculeSelection(props: MoleculeSelectionProps) {
   }, [index, molecules]);
 
   const onChangeHandler = useCallback(
-    (slideIndex: any) => {
+    (slideIndex: number) => {
       setCurrentIndex(slideIndex);
       onChange(slideIndex);
     },

src/component/elements/dropDownButton/DropDownButton.tsx

@@ -52,7 +52,7 @@ function DropDownButton<T extends DropDownListItem>(
     }
   }, [selectedKey, data]);
 
-  function selectHandler(index: any) {
+  function selectHandler(index: number) {
     setOpen(false);
     setItem(data[index]);
     onSelect?.(data[index]);

src/component/elements/export/units.ts

@@ -49,7 +49,7 @@ export function convert(
   value: number,
   fromUnit: Unit,
   toUnit: Unit,
-  dpi: any,
+  dpi: number,
   options: ConvertOptions = {},
 ): number {
   const { precision } = options;

src/component/elements/export/useExportConfigurer.tsx

@@ -29,7 +29,7 @@ export function useExportConfigurer(options: ExportSettings) {
     return value;
   }
 
-  function changeDPI(value: any) {
+  function changeDPI(value: number) {
     const { width, height, dpi } = refSize.current;
     const convertedWidth =
       convertToPixels(width, unit, 1, { precision: 2 }) * value;

src/component/hooks/useSVGUnitConverter.ts

@@ -2,7 +2,7 @@ import { useMemo } from 'react';
 
 import { useChartData } from '../context/ChartContext.js';
 
-function truncate(value: any, numberOfDigits = 0) {
+function truncate(value: number, numberOfDigits = 0) {
   const power = 10 ** numberOfDigits;
   return Math.trunc(value * power) / power;
 }