From 898d4c495f2ab2f9a5fb795aac248b0a95851bd3 Mon Sep 17 00:00:00 2001
From: Gert Hengeveld <info@ghengeveld.nl>
Date: Wed, 16 Oct 2024 15:12:53 +0200
Subject: [PATCH] Fix type issues

---
 src/components/Screen.tsx               | 2 +-
 src/components/SidebarTop.tsx           | 5 -----
 src/components/Stack.tsx                | 1 -
 src/components/design-system/Input.tsx  | 3 ++-
 src/screens/VisualTests/VisualTests.tsx | 2 +-
 src/utils/useErrorNotification.tsx      | 3 +--
 6 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/src/components/Screen.tsx b/src/components/Screen.tsx
index 83e2303b..bd1c17eb 100644
--- a/src/components/Screen.tsx
+++ b/src/components/Screen.tsx
@@ -144,7 +144,7 @@ export const Screen = ({
   const { configVisible } = useControlsState();
   const { toggleConfig } = useControlsDispatch();
   const openConfig = useCallback(
-    (scrollTo) => {
+    (scrollTo?: keyof ConfigInfoPayload["configuration"]) => {
       toggleConfig(true);
       if (scrollTo)
         setTimeout(() => {
diff --git a/src/components/SidebarTop.tsx b/src/components/SidebarTop.tsx
index 98ac6fa9..54710568 100644
--- a/src/components/SidebarTop.tsx
+++ b/src/components/SidebarTop.tsx
@@ -98,7 +98,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline: "Check the visual test addon to see the progress of your build.",
         },
         icon: <PassedIcon color={color.positive} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
       });
@@ -116,7 +115,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline: "Aborted by user.",
         },
         icon: <FailedIcon color={color.negative} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
       });
@@ -142,7 +140,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
             : "No visual changes detected",
         },
         icon: <PassedIcon color={color.positive} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         duration: 8_000,
         onClick: clickNotification,
       });
@@ -159,7 +156,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
           subHeadline: "Check the Storybook process on the command line for more details.",
         },
         icon: <FailedIcon color={color.negative} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
     }
@@ -173,7 +169,6 @@ export const SidebarTop = ({ api }: SidebarTopProps) => {
             "Your account has insufficient snapshots remaining to run this build. Visit your billing page to find out more.",
         },
         icon: <FailedIcon color={color.negative} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
     }
diff --git a/src/components/Stack.tsx b/src/components/Stack.tsx
index afcc8be9..ed3d0313 100644
--- a/src/components/Stack.tsx
+++ b/src/components/Stack.tsx
@@ -1,7 +1,6 @@
 import type { CSSObject } from "@storybook/theming";
 import { styled } from "@storybook/theming";
 
-// @ts-expect-error TODO fix overload
 export const Stack = styled.div<Pick<CSSObject, "alignItems" | "textAlign">>((props) => ({
   display: "flex",
   flexDirection: "column",
diff --git a/src/components/design-system/Input.tsx b/src/components/design-system/Input.tsx
index fd856c88..ae667740 100644
--- a/src/components/design-system/Input.tsx
+++ b/src/components/design-system/Input.tsx
@@ -5,6 +5,7 @@ import React, {
   forwardRef,
   MutableRefObject,
   ReactNode,
+  SyntheticEvent,
   useCallback,
   useEffect,
   useRef,
@@ -405,7 +406,7 @@ export const Input = forwardRef<HTMLInputElement, ComponentProps<typeof PureInpu
   ({ type: startingType, startFocused, ...rest }, ref) => {
     const [type, setType] = useState(startingType);
     const togglePasswordType = useCallback(
-      (event) => {
+      (event: SyntheticEvent) => {
         // Make sure this does not submit a form
         event.preventDefault();
         event.stopPropagation();
diff --git a/src/screens/VisualTests/VisualTests.tsx b/src/screens/VisualTests/VisualTests.tsx
index dcc70602..038212cb 100644
--- a/src/screens/VisualTests/VisualTests.tsx
+++ b/src/screens/VisualTests/VisualTests.tsx
@@ -223,7 +223,7 @@ export const VisualTestsWithoutSelectedBuildId = ({
   } = buildInfo;
 
   const clickNotification = useCallback(
-    ({ onDismiss }) => {
+    ({ onDismiss }: { onDismiss: () => void }) => {
       onDismiss();
       setOptions({ selectedPanel: PANEL_ID });
       togglePanel(true);
diff --git a/src/utils/useErrorNotification.tsx b/src/utils/useErrorNotification.tsx
index 80a37a07..95d75f71 100644
--- a/src/utils/useErrorNotification.tsx
+++ b/src/utils/useErrorNotification.tsx
@@ -10,7 +10,7 @@ export function useErrorNotification() {
 
   const { addNotification, setOptions, togglePanel } = api;
   const clickNotification = useCallback(
-    ({ onDismiss }) => {
+    ({ onDismiss }: { onDismiss: () => void }) => {
       onDismiss();
       setOptions({ selectedPanel: PANEL_ID });
       togglePanel(true);
@@ -27,7 +27,6 @@ export function useErrorNotification() {
           subHeadline: err.toString(),
         },
         icon: <FailedIcon color={color.negative} />,
-        // @ts-expect-error `duration` and `onClick` require a newer version of Storybook
         onClick: clickNotification,
       });
     },