remove "any"

apps/designer/app/shared/design-system/components/primitives/dnd/handlers.stories.tsx

@@ -1,7 +1,7 @@
 import { ComponentMeta } from "@storybook/react";
-import { useRef, useState } from "react";
+import React, { useRef, useState } from "react";
 import { Box } from "../../box";
-import { useDropTarget, type Area } from "./use-drop-target";
+import { useDropTarget } from "./use-drop-target";
 import { useDrag } from "./use-drag";
 import { getPlacement, PlacementIndicator, type Rect } from "./placement";
 import { useAutoScroll } from "./use-auto-scroll";
@@ -21,16 +21,7 @@ export const Playground = () => {
     isDropTarget(element: HTMLElement) {
       return element.dataset.draggable === "true";
     },
-    onDropTargetChange({
-      rect,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      area,
-      target,
-    }: {
-      rect: Rect;
-      area: Area;
-      target: HTMLElement;
-    }) {
+    onDropTargetChange({ rect, target }) {
       setDropTargetRect(rect);
       const placementRect = getPlacement({ target });
       setPlacementIndicatorRect(placementRect);
@@ -45,7 +36,7 @@ export const Playground = () => {
   const autoScrollHandlers = useAutoScroll({ target: scrollRef });
 
   const dragProps = useDrag({
-    onStart(event: any) {
+    onStart(event) {
       if (event.target.dataset.draggable === "false") {
         event.cancel();
         return;
@@ -53,7 +44,7 @@ export const Playground = () => {
       dragItemRef.current = event.target;
       autoScrollHandlers.setEnabled(true);
     },
-    onMove: (poiterCoordinate: any) => {
+    onMove: (poiterCoordinate) => {
       dropTargetHandlers.handleMove(poiterCoordinate);
       autoScrollHandlers.handleMove(poiterCoordinate);
     },
@@ -64,7 +55,7 @@ export const Playground = () => {
       handleHoldEnd();
       autoScrollHandlers.setEnabled(false);
     },
-    onShiftChange({ shifts }: any) {
+    onShiftChange({ shifts }) {
       if (dragItemRef.current) {
         dragItemRef.current.textContent = `shifted ${shifts}`;
       }
@@ -108,7 +99,15 @@ export const Playground = () => {
 
 export default {} as ComponentMeta<typeof Playground>;
 
-const Item = ({ background, draggable = true, children }: any) => (
+const Item = ({
+  background,
+  draggable = true,
+  children,
+}: {
+  background: string;
+  draggable?: boolean;
+  children?: React.ReactNode;
+}) => (
   <Box
     css={{ height: 100, width: 100, background, margin: 10 }}
     data-draggable={draggable}

apps/designer/app/shared/design-system/components/primitives/dnd/use-auto-scroll.ts

@@ -38,19 +38,21 @@ const getSpeed = (
   return 0;
 };
 
-export const useAutoScroll = ({
-  target,
-  edgeDistanceThreshold = 100,
-  minSpeed = 1,
-  maxSpeed = 500,
-}: {
+export type Parameters = {
   target: MutableRefObject<HTMLElement | null>;
   edgeDistanceThreshold?: number;
 
   // min/max speed of the scroll animation in pixels per second
   minSpeed?: number;
   maxSpeed?: number;
-}): {
+};
+
+export const useAutoScroll = ({
+  target,
+  edgeDistanceThreshold = 100,
+  minSpeed = 1,
+  maxSpeed = 500,
+}: Parameters): {
   handleMove: (pointerCoordinate: { x: number; y: number }) => void;
   setEnabled: (enabled: boolean) => void;
 } => {

apps/designer/app/shared/design-system/components/primitives/dnd/use-drag.ts

@@ -18,6 +18,15 @@ const initialState = {
   status: "idle",
 } as const;
 
+export type Parameters = {
+  startDistanceThreashold?: number;
+  shiftDistanceThreshold?: number;
+  onStart: (event: { target: HTMLElement; cancel: () => void }) => void;
+  onMove: (event: { x: number; y: number }) => void;
+  onShiftChange: (event: { shifts: number }) => void;
+  onEnd: () => void;
+};
+
 export const useDrag = ({
   startDistanceThreashold = 3,
   shiftDistanceThreshold = 20,
@@ -25,7 +34,7 @@ export const useDrag = ({
   onMove,
   onShiftChange,
   onEnd,
-}: any = {}) => {
+}: Parameters) => {
   const state = useRef<State>(initialState);
 
   const cancel = () => {

apps/designer/app/shared/design-system/components/primitives/dnd/use-drop-target.ts

@@ -2,7 +2,17 @@ import { useRef } from "react";
 
 export type Area = "top" | "right" | "bottom" | "left" | "center";
 
-type UseDropTarget = any;
+export type Parameters = {
+  isDropTarget: (element: HTMLElement) => boolean;
+  edgeDistanceThreshold?: number;
+  holdTimeThreshold?: number;
+  onDropTargetChange: (event: {
+    rect: DOMRect;
+    area: Area;
+    target: HTMLElement;
+  }) => void;
+  onHold: (event: { target: HTMLElement }) => void;
+};
 
 export const useDropTarget = ({
   isDropTarget,
@@ -10,7 +20,7 @@ export const useDropTarget = ({
   holdTimeThreshold = 500,
   onDropTargetChange,
   onHold,
-}: UseDropTarget) => {
+}: Parameters) => {
   const rootRef = useRef<HTMLElement | null>(null);
   const targetRef = useRef<HTMLElement>();
   const targetRectRef = useRef<DOMRect>();
@@ -56,7 +66,10 @@ export const useDropTarget = ({
       const hasAreaChanged = nextArea !== areaRef.current;
       areaRef.current = nextArea;
 
-      if (hasTargetChanged || hasAreaChanged) {
+      if (
+        (hasTargetChanged || hasAreaChanged) &&
+        targetRectRef.current !== undefined
+      ) {
         onDropTargetChange({
           rect: targetRectRef.current,
           area: nextArea,