From 7e44f9c4d9b39131fa3cd7435893b9a8d59f95ca Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Wed, 22 Jan 2025 09:28:45 +0100
Subject: [PATCH 1/9] chore(ui): convert components to typescript syntax

---
 apps/example/src/components/AsyncWorker.tsx   | 13 ++++++------
 apps/example/src/components/ModalManager.tsx  |  3 ++-
 apps/example/src/components/Playground.tsx    |  2 +-
 apps/example/src/components/WelcomeView.tsx   |  2 +-
 apps/example/src/components/auth/Avatar.tsx   | 13 ++++++------
 apps/example/src/components/peaks/Peaks.tsx   | 21 +++++++++++++++----
 .../src/components/shared/HintLoading.tsx     | 12 +++++------
 .../src/components/shared/HintNotFound.tsx    | 11 +++++-----
 8 files changed, 45 insertions(+), 32 deletions(-)

diff --git a/apps/example/src/components/AsyncWorker.tsx b/apps/example/src/components/AsyncWorker.tsx
index de79916ac..079e393b6 100644
--- a/apps/example/src/components/AsyncWorker.tsx
+++ b/apps/example/src/components/AsyncWorker.tsx
@@ -3,18 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import PropTypes from "prop-types"
+import React from "react"
+
 import useQueryClientFn from "../hooks/useQueryClientFn"
 import useUrlState from "../hooks/useUrlState"
 
-const AsyncWorker = ({ consumerId }: any) => {
+interface AsyncWorkerProps {
+  consumerId: string
+}
+
+const AsyncWorker: React.FC<AsyncWorkerProps> = ({ consumerId }) => {
   useQueryClientFn()
   useUrlState(consumerId)
   return null
 }
 
-AsyncWorker.propTypes = {
-  consumerId: PropTypes.string.isRequired,
-}
-
 export default AsyncWorker
diff --git a/apps/example/src/components/ModalManager.tsx b/apps/example/src/components/ModalManager.tsx
index 02b8e9e5d..f097fcabb 100644
--- a/apps/example/src/components/ModalManager.tsx
+++ b/apps/example/src/components/ModalManager.tsx
@@ -4,10 +4,11 @@
  */
 
 import React from "react"
+
 import { useGlobalsCurrentModal } from "./StoreProvider"
 import TestModal from "./TestModal"
 
-const ModalManager = () => {
+const ModalManager: React.FC = () => {
   const currentModal = useGlobalsCurrentModal()
 
   switch (currentModal) {
diff --git a/apps/example/src/components/Playground.tsx b/apps/example/src/components/Playground.tsx
index f9d6a3e9b..d95bbb6bd 100644
--- a/apps/example/src/components/Playground.tsx
+++ b/apps/example/src/components/Playground.tsx
@@ -7,7 +7,7 @@ import React from "react"
 import { ComboBox, Form, FormRow, Select, SelectOption } from "@cloudoperators/juno-ui-components"
 
 /** A component to include anywhere in the example app, just to try out things and validate behaviour in an app environment */
-const Playground = () => {
+const Playground: React.FC = () => {
   return (
     <div>
       <Form>
diff --git a/apps/example/src/components/WelcomeView.tsx b/apps/example/src/components/WelcomeView.tsx
index 3e2cfea3e..6fe08d438 100644
--- a/apps/example/src/components/WelcomeView.tsx
+++ b/apps/example/src/components/WelcomeView.tsx
@@ -6,7 +6,7 @@
 import React from "react"
 import { Stack } from "@cloudoperators/juno-ui-components"
 
-const WelcomeView = () => {
+const WelcomeView: React.FC = () => {
   return (
     <Stack alignment="center" distribution="center" direction="vertical" className="my-[10vh]">
       <p className="text-xl">
diff --git a/apps/example/src/components/auth/Avatar.tsx b/apps/example/src/components/auth/Avatar.tsx
index b28a6754f..b141181b1 100644
--- a/apps/example/src/components/auth/Avatar.tsx
+++ b/apps/example/src/components/auth/Avatar.tsx
@@ -4,7 +4,6 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
 import { Stack } from "@cloudoperators/juno-ui-components"
 
 const avatarCss = `
@@ -15,7 +14,12 @@ rounded-full
 bg-cover 
 `
 
-const Avatar = ({ userName, url }: any) => {
+interface AvatarProps {
+  userName?: string
+  url?: string
+}
+
+const Avatar: React.FC<AvatarProps> = ({ userName, url }) => {
   return (
     <Stack alignment="center">
       {url && (
@@ -32,9 +36,4 @@ const Avatar = ({ userName, url }: any) => {
   )
 }
 
-Avatar.propTypes = {
-  userName: PropTypes.string,
-  url: PropTypes.string,
-}
-
 export default Avatar
diff --git a/apps/example/src/components/peaks/Peaks.tsx b/apps/example/src/components/peaks/Peaks.tsx
index b32a199c7..ed7fe8e84 100644
--- a/apps/example/src/components/peaks/Peaks.tsx
+++ b/apps/example/src/components/peaks/Peaks.tsx
@@ -5,22 +5,35 @@
 
 import React from "react"
 import { useQuery } from "@tanstack/react-query"
-import PeaksList from "./PeaksList"
 import { Spinner, Message } from "@cloudoperators/juno-ui-components"
+
 import { useGlobalsQueryClientFnReady } from "../StoreProvider"
+import PeaksList from "./PeaksList"
+
+interface Error {
+  statusCode?: number
+  message?: string
+}
+
+interface Peak {
+  id: number
+  name: string
+  height: number
+}
 
-const Peaks = () => {
+const Peaks: React.FC = () => {
   const queryClientFnReady = useGlobalsQueryClientFnReady()
 
-  const { isLoading, isError, data, error } = useQuery({
+  const { isLoading, isError, data, error } = useQuery<Peak[], Error>({
     queryKey: [`peaks`],
+    queryFn: () => fetch("/api/peaks").then((res) => res.json()), // Replace with actual data fetching.
     enabled: !!queryClientFnReady,
   })
 
   return (
     <>
       {isError && (
-        <Message variant="danger">{`${error.statusCode ? `${error.statusCode}, ` : ""}${error?.message}`}</Message>
+        <Message variant="danger">{`${error?.statusCode ? `${error.statusCode}, ` : ""}${error?.message}`}</Message>
       )}
       {/* Loading indicator for page content */}
       {isLoading && <Spinner variant="primary" />}
diff --git a/apps/example/src/components/shared/HintLoading.tsx b/apps/example/src/components/shared/HintLoading.tsx
index 28c0cd26e..d52724db0 100644
--- a/apps/example/src/components/shared/HintLoading.tsx
+++ b/apps/example/src/components/shared/HintLoading.tsx
@@ -4,19 +4,19 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
 import { Stack, Spinner } from "@cloudoperators/juno-ui-components"
 
-const HintLoading = ({ text }: any) => {
+interface HintLoadingProps {
+  text?: string
+}
+
+const HintLoading: React.FC<HintLoadingProps> = ({ text }) => {
   return (
     <Stack alignment="center">
       <Spinner variant="primary" />
-      {text ? <span>{text}</span> : <span>Loading...</span>}
+      <span>{text ? text : "Loading..."}</span>
     </Stack>
   )
 }
 
-HintLoading.propTypes = {
-  text: PropTypes.string,
-}
 export default HintLoading
diff --git a/apps/example/src/components/shared/HintNotFound.tsx b/apps/example/src/components/shared/HintNotFound.tsx
index 4b1a95326..2e374745a 100644
--- a/apps/example/src/components/shared/HintNotFound.tsx
+++ b/apps/example/src/components/shared/HintNotFound.tsx
@@ -4,10 +4,13 @@
  */
 
 import React from "react"
-import PropTypes from "prop-types"
 import { Stack } from "@cloudoperators/juno-ui-components"
 
-const HintNotFound = ({ text }: any) => {
+interface HintNotFoundProps {
+  text?: string
+}
+
+const HintNotFound: React.FC<HintNotFoundProps> = ({ text }) => {
   return (
     <Stack alignment="center" distribution="center" direction="vertical" className="h-full">
       <span>{text || "No items found"}</span>
@@ -15,8 +18,4 @@ const HintNotFound = ({ text }: any) => {
   )
 }
 
-HintNotFound.propTypes = {
-  text: PropTypes.string,
-}
-
 export default HintNotFound

From 67ebb02e5d0f6ab16a56664e69083f59ac873ec0 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Mon, 27 Jan 2025 08:33:22 +0100
Subject: [PATCH 2/9] chore(ui): improve types

---
 apps/example/src/App.test.tsx                 |  15 +--
 apps/example/src/App.tsx                      |  84 +++++-------
 apps/example/src/components/AppContent.tsx    |  31 ++---
 .../src/components/MonorepoChecker.tsx        |   5 +-
 apps/example/src/components/PanelManager.tsx  |  24 ++--
 apps/example/src/components/StoreProvider.tsx | 101 +++++++++-----
 apps/example/src/components/TestModal.tsx     |   9 +-
 apps/example/src/components/auth/Avatar.tsx   |   4 +-
 .../src/components/auth/HeaderUser.tsx        |  24 ++--
 apps/example/src/components/peaks/Peaks.tsx   |  23 +++-
 .../src/components/peaks/PeaksEdit.tsx        | 127 ++++++++++--------
 .../src/components/peaks/PeaksList.tsx        |  73 +++++-----
 .../src/components/peaks/PeaksListItem.tsx    |  55 +++-----
 .../example/src/components/peaks/PeaksNew.tsx | 111 ++++++++-------
 apps/example/src/hooks/useQueryClientFn.ts    |  43 +++---
 apps/example/src/hooks/useUrlState.ts         |  26 ++--
 apps/example/src/index.tsx                    |  56 +++++---
 apps/example/src/lib/store/createAuthSlice.ts |  38 ++++--
 .../src/lib/store/createGlobalsSlice.ts       |  55 +++++---
 apps/example/src/lib/store/index.ts           |  11 +-
 apps/example/src/mocks/browser.ts             |  18 ++-
 apps/example/src/mocks/db/index.ts            |  14 +-
 apps/example/src/mocks/getHandlers.ts         |  83 +++++++-----
 23 files changed, 563 insertions(+), 467 deletions(-)

diff --git a/apps/example/src/App.test.tsx b/apps/example/src/App.test.tsx
index a99dff1a6..b6f0365bc 100644
--- a/apps/example/src/App.test.tsx
+++ b/apps/example/src/App.test.tsx
@@ -6,20 +6,19 @@
 import React from "react"
 import { render } from "@testing-library/react"
 import App from "./App"
-import { describe } from "node:test"
+import { describe, it, expect, vi } from "vitest"
 import { screen } from "shadow-dom-testing-library"
 
 // Mock the styles
 vi.mock("./styles.module.scss", () => ({
-  default: new Proxy(new Object(), {
-    // @ts-ignore
-    toString() {
-      return "/*TEST STYLES*/"
-    },
-  }),
+  default: new Proxy(
+    {},
+    {
+      get: () => "/*TEST STYLES*/",
+    }
+  ),
 }))
 
-// eslint-disable-next-line @typescript-eslint/no-floating-promises
 describe("App", () => {
   it("should render the App component", () => {
     render(<App id="123" />)
diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
index ae6f138ce..2ed482069 100644
--- a/apps/example/src/App.tsx
+++ b/apps/example/src/App.tsx
@@ -1,17 +1,17 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useEffect } from "react"
-import PropTypes from "prop-types"
+import React, { useEffect, useMemo } from "react"
+
 // @ts-ignore
 import styles from "./styles.scss?inline"
-
 import MonorepoChecker from "./components/MonorepoChecker"
 
 import {
@@ -24,87 +24,75 @@ import {
 } from "@cloudoperators/juno-ui-components"
 import { mockedSession } from "@cloudoperators/juno-oauth"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
+
 import AppContent from "./components/AppContent"
 import HeaderUser from "./components/auth/HeaderUser"
 import AsyncWorker from "./components/AsyncWorker"
 import StoreProvider, { useGlobalsActions, useAuthActions } from "./components/StoreProvider"
-import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
 
-const App = (props = {}) => {
+interface AppProps {
+  endpoint?: string
+  embedded?: boolean
+  id?: string
+  theme?: string
+}
+
+const App: React.FC<AppProps> = ({ endpoint, embedded, id }) => {
   // @ts-ignore
   const { setEndpoint } = useGlobalsActions()
   // @ts-ignore
   const { setData } = useAuthActions()
 
-  // Create query client which it can be used from overall in the app
   const queryClient = new QueryClient()
 
-  // on app initial load save Endpoint and URL_STATE_KEY so it can be
-  // used from overall in the application
   useEffect(() => {
-    // set default endpoint so the useQueryClientFn can be used
-    // @ts-ignore
-    setEndpoint(props.endpoint)
-  }, [])
+    setEndpoint(endpoint || "")
+  }, [endpoint, setEndpoint])
 
-  // fetch the mocked auth object and save it globally
-  const oidc = React.useMemo(() => {
-    // force fetch mocked session
-    return mockedSession({
-      initialLogin: true,
-      onUpdate: (data: any) => {
-        setData(data)
-      },
-    })
-  }, [])
+  const oidc = useMemo(
+    () =>
+      mockedSession({
+        initialLogin: true,
+        onUpdate: setData,
+      }),
+    [setData]
+  )
 
-  // @ts-ignore
-  console.debug("[exampleapp] embedded mode:", props.embedded)
+  console.debug("[exampleapp] embedded mode:", embedded)
 
   return (
     <QueryClientProvider client={queryClient}>
-      <MonorepoChecker></MonorepoChecker>
-      {/* @ts-ignore */}
-      <AsyncWorker consumerId={props.id} />
+      <MonorepoChecker />
       {/* @ts-ignore */}
+      <AsyncWorker consumerId={id} />
       <AppShell
-        //@ts-ignore
-        embedded={props.embedded === "true" || props.embedded === true}
+        // @ts-ignore
+        embedded={embedded === "true" || embedded === true}
         pageHeader={
-          //@ts-ignore
           <PageHeader heading="Converged Cloud | Example App">
-            {/* @ts-ignore */}
             <HeaderUser login={oidc.login} logout={oidc.logout} />
           </PageHeader>
         }
         topNavigation={
-          //@ts-ignore
           <TopNavigation>
-            {/* @ts-ignore */}
             <TopNavigationItem icon="home" label="Home" />
-            {/* @ts-ignore */}
             <TopNavigationItem active label="Navigation Item" />
           </TopNavigation>
         }
       >
         <Container py>
-          {/* @ts-ignore */}
-          <AppContent props={props} />
+          <AppContent />
         </Container>
       </AppShell>
     </QueryClientProvider>
   )
 }
 
-App.propTypes = {
-  endpoint: PropTypes.string,
-  embedded: PropTypes.bool,
-  id: PropTypes.string,
-}
-
-const StyledApp = (props: any) => {
+const StyledApp: React.FC<AppProps> = (props) => {
   return (
-    <AppShellProvider theme={`${props.theme ? props.theme : "theme-dark"}`}>
+    // @ts-ignore
+    <AppShellProvider theme={props.theme || "theme-dark"}>
       {/* load styles inside the shadow dom */}
       <style>{styles.toString()}</style>
       <MessagesProvider>
@@ -116,10 +104,4 @@ const StyledApp = (props: any) => {
   )
 }
 
-StyledApp.propTypes = {
-  theme: PropTypes.string,
-  embedded: PropTypes.bool,
-  endpoint: PropTypes.string,
-  id: PropTypes.string,
-}
 export default StyledApp
diff --git a/apps/example/src/components/AppContent.tsx b/apps/example/src/components/AppContent.tsx
index d6f0b326e..2afd2e086 100644
--- a/apps/example/src/components/AppContent.tsx
+++ b/apps/example/src/components/AppContent.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
@@ -21,30 +18,32 @@ import {
 } from "@cloudoperators/juno-ui-components"
 import { useGlobalsActions, useGlobalsTabIndex, useAuthLoggedIn, useAuthError } from "./StoreProvider"
 import { useActions, Messages } from "@cloudoperators/juno-messages-provider"
+
 import ModalManager from "./ModalManager"
 import PanelManager from "./PanelManager"
 import Peaks from "./peaks/Peaks"
 import WelcomeView from "./WelcomeView"
 
-const AppContent = () => {
-  // @ts-ignore
+const AppContent: React.FC = () => {
   const { setTabIndex, setCurrentModal } = useGlobalsActions()
   const loggedIn = useAuthLoggedIn()
   const authError = useAuthError()
   const tabIndex = useGlobalsTabIndex()
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const { addMessage } = useActions()
 
   // set an error message when oidc fails
   useEffect(() => {
     if (authError) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       addMessage({
         variant: "error",
         text: JSON.stringify(authError),
       })
     }
-  }, [authError])
+  }, [authError, addMessage])
 
-  const onTabSelected = (index: any) => {
+  const onTabSelected = (index: number) => {
     setTabIndex(index)
   }
 
@@ -53,23 +52,17 @@ const AppContent = () => {
       {loggedIn && !authError ? (
         <>
           <Breadcrumb>
-            {/* @ts-ignore */}
             <BreadcrumbItem icon="home" label="Example App Home" />
           </Breadcrumb>
 
           <Container py>
-            {/* @ts-ignore */}
             <MainTabs selectedIndex={tabIndex} onSelect={onTabSelected}>
-              {/* @ts-ignore */}
               <TabList>
-                {/* @ts-ignore */}
                 <Tab>Peaks</Tab>
-                {/* @ts-ignore */}
                 <Tab>Tab Two</Tab>
               </TabList>
 
               <TabPanel>
-                {/* @ts-ignore */}
                 <Container py px={false}>
                   {/* Set the background graphic using tailwind background image syntax as below. The image must exist at the specified location in your app */}
                   {/*<IntroBox variant="hero" heroImage="bg-[url('img/app_bg_example.svg')]">
@@ -82,28 +75,20 @@ const AppContent = () => {
                 </Container>
               </TabPanel>
               <TabPanel>
-                {/* @ts-ignore */}
                 <Container py px={false}>
                   <p>Test a panel pressing the Button</p>
-                  {/* @ts-ignore */}
-                  <Button label="Button" onClick={() => setCurrentModal("TestModal")} />
+                  <Button label="Button" onClick={() => setCurrentModal({ type: "TestModal" })} />
                   <p>Test a select</p>
-                  {/* @ts-ignore */}
                   <Select
                     name="filter"
                     className="filter-label-select w-64 mb-0"
                     label="Filter"
-                    onChange={(e: any) => console.debug(e)}
+                    onChange={(e) => console.debug(e)}
                   >
-                    {/* @ts-ignore */}
                     <SelectOption value="0" label="Option 0" />
-                    {/* @ts-ignore */}
                     <SelectOption value="1" label="Option 1" />
-                    {/* @ts-ignore */}
                     <SelectOption value="2" label="Option 2" />
-                    {/* @ts-ignore */}
                     <SelectOption value="3" label="Option 3" />
-                    {/* @ts-ignore */}
                     <SelectOption value="4" label="Option 4" />
                   </Select>
                 </Container>
diff --git a/apps/example/src/components/MonorepoChecker.tsx b/apps/example/src/components/MonorepoChecker.tsx
index 7068b6ba8..ce6fc8bab 100644
--- a/apps/example/src/components/MonorepoChecker.tsx
+++ b/apps/example/src/components/MonorepoChecker.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
@@ -25,7 +22,7 @@ console.debug("==import message provider", {
   MessagesProvider,
 })
 
-const MonorepoChecker = () => {
+const MonorepoChecker: React.FC = () => {
   return <></>
 }
 
diff --git a/apps/example/src/components/PanelManager.tsx b/apps/example/src/components/PanelManager.tsx
index cb02a8f55..8347fc011 100644
--- a/apps/example/src/components/PanelManager.tsx
+++ b/apps/example/src/components/PanelManager.tsx
@@ -1,26 +1,25 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-// @ts-ignore typescript-eslint/no-unsafe-assignment
-// @ts-ignore typescript-eslint/no-unsafe-call
-
 import React, { useMemo } from "react"
 import { Panel } from "@cloudoperators/juno-ui-components"
+
 import PeaksEdit from "./peaks/PeaksEdit"
 import PeaksNew from "./peaks/PeaksNew"
 import { useGlobalsActions, useGlobalsCurrentPanel } from "./StoreProvider"
 
-const PanelManager = () => {
-  // @ts-ignore
+interface CurrentPanel {
+  type: string
+  itemId?: string
+}
+
+const PanelManager: React.FC = () => {
   const { setCurrentPanel } = useGlobalsActions()
-  const currentPanel = useGlobalsCurrentPanel()
+  const currentPanel = useGlobalsCurrentPanel() as CurrentPanel
 
   const heading = useMemo(() => {
-    // @ts-ignore
     switch (currentPanel?.type) {
       case "PeaksEdit":
         return "Edit Peak"
@@ -32,11 +31,9 @@ const PanelManager = () => {
   }, [currentPanel])
 
   const panelBody = () => {
-    // @ts-ignore
     switch (currentPanel?.type) {
       case "PeaksEdit":
-        // @ts-ignore
-        return <PeaksEdit peakId={currentPanel?.itemId} closeCallback={onClose} />
+        return <PeaksEdit peakId={currentPanel?.itemId as string} closeCallback={onClose} />
       case "PeaksNew":
         return <PeaksNew closeCallback={onClose} />
       default:
@@ -49,8 +46,7 @@ const PanelManager = () => {
   }
 
   return (
-    // @ts-ignore
-    <Panel heading={heading} opened={panelBody() ? true : false} onClose={onClose}>
+    <Panel heading={heading} opened={Boolean(panelBody())} onClose={onClose}>
       {panelBody()}
     </Panel>
   )
diff --git a/apps/example/src/components/StoreProvider.tsx b/apps/example/src/components/StoreProvider.tsx
index 831fb970e..14ffbc919 100644
--- a/apps/example/src/components/StoreProvider.tsx
+++ b/apps/example/src/components/StoreProvider.tsx
@@ -1,44 +1,83 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable no-unused-vars */
 
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { createContext, useContext } from "react"
-import PropTypes from "prop-types"
-import { useStore as create } from "zustand"
+import React, { createContext, useContext, ReactNode } from "react"
+import { useStore as create, StoreApi } from "zustand"
+
 import createStore from "../lib/store"
 
-// @ts-expect-error TS(2554): Expected 1 arguments, but got 0.
-const StoreContext = createContext()
-const StoreProvider = ({ children }: any) => (
+interface AuthParsedData {
+  fullName: string
+  avatarUrl: {
+    small: string
+  }
+}
+
+interface Actions {
+  setCurrentPanel: (panel: unknown) => void
+  setCurrentModal: (modal: unknown) => void
+  setTabIndex: (index: number) => void
+}
+interface StoreState {
+  globals: {
+    endpoint: string
+    urlStateKey: string
+    tabIndex: number
+    queryClientFnReady: boolean
+    currentModal: unknown
+    currentPanel: unknown
+    actions: Actions
+  }
+  auth: {
+    data: {
+      parsed?: AuthParsedData
+    }
+    isProcessing: boolean
+    loggedIn: boolean
+    error: unknown
+    lastAction: unknown
+    actions: Actions
+  }
+}
+
+interface StoreProviderProps {
+  children: ReactNode
+}
+
+const StoreContext = createContext<StoreApi<StoreState> | null>(null)
+
+const StoreProvider: React.FC<StoreProviderProps> = ({ children }) => (
+  // @ts-ignore
   <StoreContext.Provider value={createStore()}>{children}</StoreContext.Provider>
 )
 
-// @ts-ignore
-const useStore = (selector: any) => create(useContext(StoreContext), selector)
-
-// globals
-export const useGlobalsEndpoint = () => useStore((s: any) => s.globals.endpoint)
-export const useGlobalsUrlStateKey = () => useStore((s: any) => s.globals.urlStateKey)
-export const useGlobalsTabIndex = () => useStore((s: any) => s.globals.tabIndex)
-export const useGlobalsQueryClientFnReady = () => useStore((s: any) => s.globals.queryClientFnReady)
-export const useGlobalsCurrentModal = () => useStore((s: any) => s.globals.currentModal)
-export const useGlobalsCurrentPanel = () => useStore((s: any) => s.globals.currentPanel)
-export const useGlobalsActions = () => useStore((s: any) => s.globals.actions)
-
-// auth
-export const useAuthData = () => useStore((state: any) => state.auth.data)
-export const useAuthIsProcessing = () => useStore((state: any) => state.auth.isProcessing)
-export const useAuthLoggedIn = () => useStore((state: any) => state.auth.loggedIn)
-export const useAuthError = () => useStore((state: any) => state.auth.error)
-export const useAuthLastAction = () => useStore((state: any) => state.auth.lastAction)
-export const useAuthActions = () => useStore((state: any) => state.auth.actions)
-
-StoreProvider.propTypes = {
-  children: PropTypes.node,
+const useStore = <T,>(selector: (state: StoreState) => T) => {
+  const store = useContext(StoreContext)
+  if (!store) {
+    throw new Error("useStore must be used within a StoreProvider")
+  }
+  return create(store, selector)
 }
+
+// Globals
+export const useGlobalsEndpoint = () => useStore((s) => s.globals.endpoint)
+export const useGlobalsUrlStateKey = () => useStore((s) => s.globals.urlStateKey)
+export const useGlobalsTabIndex = () => useStore((s) => s.globals.tabIndex)
+export const useGlobalsQueryClientFnReady = () => useStore((s) => s.globals.queryClientFnReady)
+export const useGlobalsCurrentModal = () => useStore((s) => s.globals.currentModal)
+export const useGlobalsCurrentPanel = () => useStore((s) => s.globals.currentPanel)
+export const useGlobalsActions = () => useStore((s) => s.globals.actions)
+
+// Auth
+export const useAuthData = () => useStore((state) => state.auth.data)
+export const useAuthIsProcessing = () => useStore((state) => state.auth.isProcessing)
+export const useAuthLoggedIn = () => useStore((state) => state.auth.loggedIn)
+export const useAuthError = () => useStore((state) => state.auth.error)
+export const useAuthLastAction = () => useStore((state) => state.auth.lastAction)
+export const useAuthActions = () => useStore((state) => state.auth.actions)
+
 export default StoreProvider
diff --git a/apps/example/src/components/TestModal.tsx b/apps/example/src/components/TestModal.tsx
index dc691d36c..11cd7d4a3 100644
--- a/apps/example/src/components/TestModal.tsx
+++ b/apps/example/src/components/TestModal.tsx
@@ -1,18 +1,14 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import React from "react"
-
 import { Modal } from "@cloudoperators/juno-ui-components"
+
 import { useGlobalsActions } from "./StoreProvider"
 
-const TestModal = () => {
-  // @ts-ignore
+const TestModal: React.FC = () => {
   const { setCurrentModal } = useGlobalsActions()
 
   const onConfirm = () => {
@@ -27,7 +23,6 @@ const TestModal = () => {
       onConfirm={onConfirm}
       confirmButtonLabel="Confirm"
     >
-      {/* @ts-ignore */}
       <span>A default modal</span>
     </Modal>
   )
diff --git a/apps/example/src/components/auth/Avatar.tsx b/apps/example/src/components/auth/Avatar.tsx
index b141181b1..492b350ee 100644
--- a/apps/example/src/components/auth/Avatar.tsx
+++ b/apps/example/src/components/auth/Avatar.tsx
@@ -6,7 +6,7 @@
 import React from "react"
 import { Stack } from "@cloudoperators/juno-ui-components"
 
-const avatarCss = `
+const avatarStyles = `
 h-8
 w-8
 bg-theme-background-lvl-2
@@ -28,7 +28,7 @@ const Avatar: React.FC<AvatarProps> = ({ userName, url }) => {
             background: `url(${url}) no-repeat`,
             backgroundSize: `cover`,
           }}
-          className={avatarCss}
+          className={avatarStyles}
         />
       )}
       {userName && <span className="ml-2">{userName}</span>}
diff --git a/apps/example/src/components/auth/HeaderUser.tsx b/apps/example/src/components/auth/HeaderUser.tsx
index 8345020d4..c5f52e0e5 100644
--- a/apps/example/src/components/auth/HeaderUser.tsx
+++ b/apps/example/src/components/auth/HeaderUser.tsx
@@ -1,19 +1,21 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import React from "react"
-import PropTypes from "prop-types"
 import { Stack, Button } from "@cloudoperators/juno-ui-components"
+
 import Avatar from "./Avatar"
 import { useAuthLoggedIn, useAuthData } from "../StoreProvider"
 
-const HeaderUser = ({ login, logout }: any) => {
+interface HeaderUserProps {
+  login: () => void
+  // eslint-disable-next-line no-unused-vars
+  logout: ({ resetOIDCSession, silent }: { resetOIDCSession: boolean; silent: boolean }) => void
+}
+
+const HeaderUser: React.FC<HeaderUserProps> = ({ login, logout }) => {
   const loggedIn = useAuthLoggedIn()
   const authData = useAuthData()
 
@@ -22,23 +24,15 @@ const HeaderUser = ({ login, logout }: any) => {
       {loggedIn ? (
         <>
           <div className="mr-4">
-            {/* @ts-ignore */}
-            <Avatar userName={authData?.parsed?.fullName} url={authData?.parsed?.avatarUrl?.small} />
+            <Avatar userName={authData?.parsed?.fullName || ""} url={authData?.parsed?.avatarUrl?.small || ""} />
           </div>
-          {/* @ts-ignore */}
           <Button label="Logout" size="small" onClick={() => logout({ resetOIDCSession: false, silent: true })} />
         </>
       ) : (
-        //@ts-ignore
         <Button label="Login" size="small" onClick={() => login()} />
       )}
     </Stack>
   )
 }
 
-HeaderUser.propTypes = {
-  login: PropTypes.func,
-  logout: PropTypes.func,
-}
-
 export default HeaderUser
diff --git a/apps/example/src/components/peaks/Peaks.tsx b/apps/example/src/components/peaks/Peaks.tsx
index ed7fe8e84..932f45914 100644
--- a/apps/example/src/components/peaks/Peaks.tsx
+++ b/apps/example/src/components/peaks/Peaks.tsx
@@ -10,23 +10,32 @@ import { Spinner, Message } from "@cloudoperators/juno-ui-components"
 import { useGlobalsQueryClientFnReady } from "../StoreProvider"
 import PeaksList from "./PeaksList"
 
-interface Error {
+interface CustomError {
+  name: string
+  message: string
   statusCode?: number
-  message?: string
 }
 
-interface Peak {
+export interface Peak {
   id: number
   name: string
   height: number
+  mainrange: string
+  region: string
+  countries: string
+  url: string
 }
 
 const Peaks: React.FC = () => {
   const queryClientFnReady = useGlobalsQueryClientFnReady()
 
-  const { isLoading, isError, data, error } = useQuery<Peak[], Error>({
-    queryKey: [`peaks`],
-    queryFn: () => fetch("/api/peaks").then((res) => res.json()), // Replace with actual data fetching.
+  const {
+    isLoading,
+    isError,
+    data = [],
+    error,
+  } = useQuery<Peak[], CustomError>({
+    queryKey: ["peaks"],
     enabled: !!queryClientFnReady,
   })
 
@@ -37,7 +46,7 @@ const Peaks: React.FC = () => {
       )}
       {/* Loading indicator for page content */}
       {isLoading && <Spinner variant="primary" />}
-      <PeaksList isLoading={isLoading} isError={isError} peaks={data} error={error} />
+      <PeaksList isLoading={isLoading} isError={isError} peaks={data} error={error ?? undefined} />
     </>
   )
 }
diff --git a/apps/example/src/components/peaks/PeaksEdit.tsx b/apps/example/src/components/peaks/PeaksEdit.tsx
index c91c955f9..e2aa5ed52 100644
--- a/apps/example/src/components/peaks/PeaksEdit.tsx
+++ b/apps/example/src/components/peaks/PeaksEdit.tsx
@@ -1,44 +1,83 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import React, { useState, useEffect } from "react"
-import PropTypes from "prop-types"
 import { Button, Form, PanelBody, PanelFooter, FormRow, TextInput } from "@cloudoperators/juno-ui-components"
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useQuery, useMutation, useQueryClient, QueryObserverResult } from "@tanstack/react-query"
+
 import HintLoading from "../shared/HintLoading"
 import { useGlobalsQueryClientFnReady } from "../StoreProvider"
+import { Peak } from "./Peaks"
+
+interface FormState {
+  name?: string
+  height?: string
+  mainrange?: string
+  region?: string
+  countries?: string
+}
+
+interface PeaksEditProps {
+  peakId: string
+  closeCallback: () => void
+}
+
+const toFormState = (peak: Peak): FormState => ({
+  name: peak.name,
+  height: peak.height.toString(),
+  mainrange: peak.mainrange,
+  region: peak.region,
+  countries: peak.countries,
+})
 
-const PeaksEdit = ({ peakId, closeCallback }: any) => {
+const PeaksEdit: React.FC<PeaksEditProps> = ({ peakId, closeCallback }) => {
   const queryClient = useQueryClient()
   const queryClientFnReady = useGlobalsQueryClientFnReady()
-  const [formState, setFormState] = useState({})
+  const [formState, setFormState] = useState<FormState>({})
 
-  const peakFeach = useQuery({
-    queryKey: [`peaks`, peakId],
+  const fetchPeakData = async (): Promise<Peak> => {
+    const response: Response = await fetch(`/api/peaks/${peakId}`)
+    if (!response.ok) {
+      throw new Error("Network response was not ok")
+    }
+    return response.json() as Promise<Peak>
+  }
+
+  const peakFetch: QueryObserverResult<Peak, Error> = useQuery({
+    queryKey: ["peaks", peakId],
     enabled: !!queryClientFnReady,
+    queryFn: fetchPeakData,
   })
 
+  const updatePeakData = async (data: { id: string; formState: FormState }): Promise<Peak> => {
+    const response: Response = await fetch(`/api/peaks/${data.id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data.formState),
+    })
+    if (!response.ok) {
+      throw new Error("Network response was not ok")
+    }
+    return response.json() as Promise<Peak>
+  }
+
   const peakMutation = useMutation({
     mutationKey: ["peakEdit"],
+    mutationFn: updatePeakData,
   })
 
   useEffect(() => {
-    if (peakFeach.isSuccess) {
-      //@ts-ignore
-      setFormState(peakFeach.data)
+    if (peakFetch.isSuccess && peakFetch.data) {
+      setFormState(toFormState(peakFetch.data))
     }
-  }, [peakFeach.isSuccess])
+  }, [peakFetch.isSuccess, peakFetch.data])
 
   const onSubmit = () => {
-    // TODO form validation
     peakMutation.mutate(
-      //@ts-ignore
       {
         id: peakId,
         formState: formState,
@@ -46,86 +85,67 @@ const PeaksEdit = ({ peakId, closeCallback }: any) => {
       {
         onSuccess: () => {
           closeCallback()
-          // refetch peaks
-          //@ts-ignore
-          queryClient.invalidateQueries("peaks")
+          void queryClient.invalidateQueries(["peaks"])
         },
-        onError: () => {
-          // TODO display error
+        onError: (error) => {
+          console.error("Error updating peak:", error)
         },
       }
     )
   }
 
-  const onAttrChanged = (key: any, value: any) => {
+  const onAttrChanged = (key: keyof FormState, value: string) => {
     setFormState({ ...formState, [key]: value })
   }
 
   return (
     <PanelBody
       footer={
-        peakFeach?.data && (
+        peakFetch.data && (
           <PanelFooter>
-            {/* @ts-ignore */}
             <Button label="Cancel" variant="subdued" onClick={closeCallback} />
-            {/* @ts-ignore */}
             <Button label="Save" variant="primary" onClick={onSubmit} />
           </PanelFooter>
         )
       }
     >
-      {peakFeach.isLoading ? (
+      {peakFetch.isLoading ? (
         <HintLoading />
       ) : (
         <Form>
           <FormRow>
             <TextInput
-              //@ts-ignore
               label="Name"
-              //@ts-ignore
-              value={formState?.name}
-              //@ts-ignore
-              onChange={(e: any) => onAttrChanged("name", e.target.value)}
+              value={formState.name || ""}
+              onChange={(e) => onAttrChanged("name", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
-              //@ts-ignore
               label="Height"
-              // @ts-expect-error TS(2339): Property 'height' does not exist on type '{}'.
-              value={formState?.height}
-              //@ts-ignore
-              onChange={(e: any) => onAttrChanged("height", e.target.value)}
+              value={formState.height || ""}
+              onChange={(e) => onAttrChanged("height", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
-              //@ts-ignore
               label="Main Range"
-              // @ts-expect-error TS(2339): Property 'mainrange' does not exist on type '{}'.
-              value={formState?.mainrange}
-              //@ts-ignore
-              onChange={(e: any) => onAttrChanged("mainrange", e.target.value)}
+              value={formState.mainrange || ""}
+              onChange={(e) => onAttrChanged("mainrange", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
-              //@ts-ignore
               label="Region"
-              // @ts-expect-error TS(2339): Property 'region' does not exist on type '{}'.
-              value={formState?.region}
-              //@ts-ignore
-              onChange={(e: any) => onAttrChanged("region", e.target.value)}
+              value={formState.region || ""}
+              onChange={(e) => onAttrChanged("region", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
-              //@ts-ignore
               label="Country"
-              // @ts-expect-error TS(2339): Property 'countries' does not exist on type '{}'.
-              value={formState?.countries}
-              //@ts-ignore
-              onChange={(e: any) => onAttrChanged("countries", e.target.value)}
+              value={formState.countries || ""}
+              onChange={(e) => onAttrChanged("countries", e.target.value)}
             />
           </FormRow>
         </Form>
@@ -134,9 +154,4 @@ const PeaksEdit = ({ peakId, closeCallback }: any) => {
   )
 }
 
-PeaksEdit.propTypes = {
-  peakId: PropTypes.string,
-  closeCallback: PropTypes.func,
-}
-
 export default PeaksEdit
diff --git a/apps/example/src/components/peaks/PeaksList.tsx b/apps/example/src/components/peaks/PeaksList.tsx
index 657708c12..81c0671ce 100644
--- a/apps/example/src/components/peaks/PeaksList.tsx
+++ b/apps/example/src/components/peaks/PeaksList.tsx
@@ -1,14 +1,9 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import React, { useMemo } from "react"
-import PropTypes from "prop-types"
 import {
   Button,
   ContentAreaToolbar,
@@ -18,40 +13,50 @@ import {
   DataGridCell,
   useEndlessScrollList,
 } from "@cloudoperators/juno-ui-components"
+
+import { Peak } from "./Peaks"
 import PeaksListItem from "./PeaksListItem"
 import HintNotFound from "../shared/HintNotFound"
 import { useGlobalsActions } from "../StoreProvider"
 
+interface CustomError {
+  name: string
+  message: string
+  statusCode?: number
+}
+
+interface PeaksListProps {
+  peaks: Peak[]
+  isLoading: boolean
+  isError: boolean
+  error?: CustomError
+}
+
 const LIST_COLUMNS = 6
 
-const PeaksList = ({ peaks }: any) => {
-  //@ts-ignore
+const PeaksList: React.FC<PeaksListProps> = ({ peaks }) => {
   const { setCurrentPanel } = useGlobalsActions()
 
-  const items = useMemo(() => {
-    if (!peaks) return []
-    return peaks
-  }, [peaks])
+  const items = useMemo(() => peaks, [peaks])
+
+  const refFunction = (ref: React.MutableRefObject<HTMLSpanElement | null>) => (
+    <DataGridRow>
+      <DataGridCell colSpan={LIST_COLUMNS} className="border-b-0 py-0">
+        <span ref={ref} />
+      </DataGridCell>
+    </DataGridRow>
+  )
 
-  const { scrollListItems, iterator } = useEndlessScrollList(items, {
+  const { scrollListItems = [], iterator } = useEndlessScrollList(items, {
     loadingObject: (
-      //@ts-ignore
       <DataGridRow>
-        {/* @ts-ignore */}
         <DataGridCell colSpan={LIST_COLUMNS}>
           <span>Loading ...</span>
         </DataGridCell>
       </DataGridRow>
     ),
-    refFunction: (ref: any) => (
-      //@ts-ignore
-      <DataGridRow>
-        {/* @ts-ignore */}
-        <DataGridCell colSpan={LIST_COLUMNS} className="border-b-0 py-0">
-          <span ref={ref} />
-        </DataGridCell>
-      </DataGridRow>
-    ),
+    //@ts-ignore
+    refFunction,
   })
 
   const handleNewPeakClick = () => {
@@ -61,37 +66,25 @@ const PeaksList = ({ peaks }: any) => {
   return (
     <>
       <ContentAreaToolbar>
-        {/* @ts-ignore */}
         <Button icon="addCircle" onClick={handleNewPeakClick} label="Add a Peak" />
       </ContentAreaToolbar>
-      {/* @ts-ignore */}
       <DataGrid columns={LIST_COLUMNS}>
-        {/* @ts-ignore */}
         <DataGridRow>
-          {/* @ts-ignore */}
           <DataGridHeadCell>Name</DataGridHeadCell>
-          {/* @ts-ignore */}
           <DataGridHeadCell>Height</DataGridHeadCell>
-          {/* @ts-ignore */}
           <DataGridHeadCell>Main Range</DataGridHeadCell>
-          {/* @ts-ignore */}
           <DataGridHeadCell>Region</DataGridHeadCell>
-          {/* @ts-ignore */}
           <DataGridHeadCell>Country</DataGridHeadCell>
-          {/* @ts-ignore */}
           <DataGridHeadCell>Options</DataGridHeadCell>
         </DataGridRow>
-
-        {scrollListItems?.length > 0 ? (
+        {scrollListItems.length > 0 ? (
           <>
-            {iterator.map((peak: any, index: any) => (
-              <PeaksListItem key={index} peak={peak} />
+            {iterator.map((peak, index) => (
+              <PeaksListItem key={index} peak={peak as Peak} />
             ))}
           </>
         ) : (
-          //@ts-ignore
           <DataGridRow>
-            {/* @ts-ignore */}
             <DataGridCell colSpan={LIST_COLUMNS}>
               <HintNotFound text="No peaks found" />
             </DataGridCell>
@@ -102,8 +95,4 @@ const PeaksList = ({ peaks }: any) => {
   )
 }
 
-PeaksList.propTypes = {
-  peaks: PropTypes.array,
-}
-
 export default PeaksList
diff --git a/apps/example/src/components/peaks/PeaksListItem.tsx b/apps/example/src/components/peaks/PeaksListItem.tsx
index 736dbe42e..901b3be71 100644
--- a/apps/example/src/components/peaks/PeaksListItem.tsx
+++ b/apps/example/src/components/peaks/PeaksListItem.tsx
@@ -1,25 +1,34 @@
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import React from "react"
-import PropTypes from "prop-types"
 import { DataGridCell, DataGridRow, Icon, Stack } from "@cloudoperators/juno-ui-components"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
+
+import { Peak } from "./Peaks"
 import { useGlobalsActions } from "../StoreProvider"
 
-const PeaksListItem = ({ peak }: any) => {
+interface PeaksListItemProps {
+  peak: Peak
+}
+
+const PeaksListItem: React.FC<PeaksListItemProps> = ({ peak }) => {
   const queryClient = useQueryClient()
-  //@ts-ignore
   const { setCurrentPanel } = useGlobalsActions()
 
   const { mutate } = useMutation({
     mutationKey: ["peakDelete"],
+    mutationFn: async ({ id }: { id: number }) => {
+      const response = await fetch(`/api/peaks/${id}`, {
+        method: "DELETE",
+      })
+      if (!response.ok) {
+        throw new Error("Deletion failed")
+      }
+      return id
+    },
   })
 
   const handleEditPeakClick = () => {
@@ -28,56 +37,36 @@ const PeaksListItem = ({ peak }: any) => {
 
   const handleDeletePeakClick = () => {
     mutate(
-      //@ts-ignore
-      {
-        id: peak.id,
-      },
+      { id: peak.id },
       {
         onSuccess: () => {
-          // refetch peaks
-          //@ts-ignore
-          queryClient.invalidateQueries("peaks")
+          void queryClient.invalidateQueries(["peaks"])
         },
-        onError: () => {
-          // TODO display error
+        onError: (error) => {
+          console.error("Error deleting peak:", error)
         },
       }
     )
   }
 
   return (
-    //@ts-ignore
     <DataGridRow>
-      {/* @ts-ignore */}
       <DataGridCell>
         <strong>{peak.name}</strong>
       </DataGridCell>
-      {/* @ts-ignore */}
-      <DataGridCell>{peak.height}</DataGridCell>
-      {/* @ts-ignore */}
+      <DataGridCell>{peak.height.toString()}</DataGridCell>
       <DataGridCell>{peak.mainrange}</DataGridCell>
-      {/* @ts-ignore */}
       <DataGridCell>{peak.region}</DataGridCell>
-      {/* @ts-ignore */}
       <DataGridCell>{peak.countries}</DataGridCell>
-      {/* @ts-ignore */}
       <DataGridCell>
-        {/* Use <Stack> to align and space elements: */}
         <Stack gap="1.5">
-          {/* @ts-ignore */}
           <Icon icon="edit" size="18" className="leading-none" onClick={handleEditPeakClick} />
-          {/* @ts-ignore */}
           <Icon icon="deleteForever" size="18" className="leading-none" onClick={handleDeletePeakClick} />
-          {/* @ts-ignore */}
-          {peak?.url && <Icon icon="openInNew" size="18" href={peak.url} target="_blank" className="leading-none" />}
+          {peak.url && <Icon icon="openInNew" size="18" href={peak.url} target="_blank" className="leading-none" />}
         </Stack>
       </DataGridCell>
     </DataGridRow>
   )
 }
 
-PeaksListItem.propTypes = {
-  peak: PropTypes.object,
-}
-
 export default PeaksListItem
diff --git a/apps/example/src/components/peaks/PeaksNew.tsx b/apps/example/src/components/peaks/PeaksNew.tsx
index 9bb20496d..fa8153ec2 100644
--- a/apps/example/src/components/peaks/PeaksNew.tsx
+++ b/apps/example/src/components/peaks/PeaksNew.tsx
@@ -1,50 +1,75 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-floating-promises */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
 import React, { useState } from "react"
-import PropTypes from "prop-types"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useActions } from "@cloudoperators/juno-messages-provider"
 import { PanelBody, PanelFooter, Button, FormRow, TextInput } from "@cloudoperators/juno-ui-components"
 
-const PeaksNew = ({ closeCallback }: any) => {
+interface FormState {
+  name?: string
+  height?: string
+  range?: string
+  region?: string
+  country?: string
+  url?: string
+}
+
+interface PeaksNewProps {
+  closeCallback: () => void
+}
+
+interface AddMessage {
+  variant: "success" | "error" | "info" | "warning"
+  text: string
+}
+
+const PeaksNew: React.FC<PeaksNewProps> = ({ closeCallback }) => {
   const queryClient = useQueryClient()
-  const [formState, setFormState] = useState({})
-  const { addMessage } = useActions()
+  const [formState, setFormState] = useState<FormState>({})
+  // TO DO: Fix types
+  // eslint-disable-next-line no-unused-vars
+  const { addMessage } = useActions() as { addMessage: (message: AddMessage) => void }
 
-  const { mutate } = useMutation({
+  const { mutateAsync } = useMutation({
     mutationKey: ["peakAdd"],
-  })
-
-  const onSubmit = () => {
-    mutate(
-      //@ts-ignore
-      { formState: formState },
-      {
-        onSuccess: (/*data, variables, context*/) => {
-          addMessage({
-            variant: "success",
-            text: `Successfully added Peak`,
-          })
-          closeCallback()
-          // refetch peaks
-          //@ts-ignore
-          queryClient.invalidateQueries("peaks")
-        },
-        onError: (/*error, variables, context*/) => {
-          // TODO display error
+    mutationFn: async (data: { formState: FormState }) => {
+      const response = await fetch("/api/peaks", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
         },
+        body: JSON.stringify(data.formState),
+      })
+      if (!response.ok) {
+        throw new Error("Network response was not ok")
       }
-    )
+      return response.json()
+    },
+  })
+
+  const onSubmit = async () => {
+    try {
+      await mutateAsync({ formState })
+      addMessage({
+        variant: "success",
+        text: `Successfully added Peak`,
+      })
+      closeCallback()
+      await queryClient.invalidateQueries(["peaks"])
+    } catch (error) {
+      // TODO display error
+      console.error("Error adding peak:", error)
+    }
   }
 
-  const onAttrChanged = (key: any, value: any) => {
+  const handleOnSubmit = () => {
+    void onSubmit()
+  }
+
+  const onAttrChanged = (key: keyof FormState, value: string) => {
     setFormState({ ...formState, [key]: value })
   }
 
@@ -52,43 +77,31 @@ const PeaksNew = ({ closeCallback }: any) => {
     <PanelBody
       footer={
         <PanelFooter>
-          {/* @ts-ignore */}
           <Button label="Cancel" variant="subdued" onClick={closeCallback} />
-          {/* @ts-ignore */}
-          <Button label="Save" variant="primary" onClick={onSubmit} />
+          <Button label="Save" variant="primary" onClick={handleOnSubmit} />
         </PanelFooter>
       }
     >
       <FormRow>
-        {/* @ts-ignore */}
-        <TextInput label="Name" autoFocus onChange={(e: any) => onAttrChanged("name", e.target.value)} />
+        <TextInput label="Name" autoFocus onChange={(e) => onAttrChanged("name", e.target.value)} />
       </FormRow>
       <FormRow>
-        {/* @ts-ignore */}
-        <TextInput label="Height" onChange={(e: any) => onAttrChanged("height", e.target.value)} />
+        <TextInput label="Height" onChange={(e) => onAttrChanged("height", e.target.value)} />
       </FormRow>
       <FormRow>
-        {/* @ts-ignore */}
-        <TextInput label="Main Range" onChange={(e: any) => onAttrChanged("range", e.target.value)} />
+        <TextInput label="Main Range" onChange={(e) => onAttrChanged("range", e.target.value)} />
       </FormRow>
       <FormRow>
-        {/* @ts-ignore */}
-        <TextInput label="Region" onChange={(e: any) => onAttrChanged("region", e.target.value)} />
+        <TextInput label="Region" onChange={(e) => onAttrChanged("region", e.target.value)} />
       </FormRow>
       <FormRow>
-        {/* @ts-ignore */}
-        <TextInput label="Country" onChange={(e: any) => onAttrChanged("country", e.target.value)} />
+        <TextInput label="Country" onChange={(e) => onAttrChanged("country", e.target.value)} />
       </FormRow>
       <FormRow>
-        {/* @ts-ignore */}
-        <TextInput type="url" label="URL" onChange={(e: any) => onAttrChanged("url", e.target.value)} />
+        <TextInput type="url" label="URL" onChange={(e) => onAttrChanged("url", e.target.value)} />
       </FormRow>
     </PanelBody>
   )
 }
 
-PeaksNew.propTypes = {
-  closeCallback: PropTypes.func,
-}
-
 export default PeaksNew
diff --git a/apps/example/src/hooks/useQueryClientFn.ts b/apps/example/src/hooks/useQueryClientFn.ts
index a2b8baeaf..1bccda986 100644
--- a/apps/example/src/hooks/useQueryClientFn.ts
+++ b/apps/example/src/hooks/useQueryClientFn.ts
@@ -1,10 +1,8 @@
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-/* eslint-disable @typescript-eslint/no-base-to-string */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
@@ -12,20 +10,20 @@
 
 import { useEffect } from "react"
 import { useQueryClient } from "@tanstack/react-query"
+
 import { useGlobalsEndpoint, useGlobalsActions } from "../components/StoreProvider"
 
 class HTTPError extends Error {
-  statusCode: any
-  constructor(code: any, message: any) {
-    super(message || code)
+  statusCode: number
+  constructor(code: number, message: string) {
+    super(message || `${code}`)
     this.name = "HTTPError"
     this.statusCode = code
   }
 }
 
-const encodeUrlParamsFromObject = (options: any) => {
-  // @ts-expect-error TS(2365): Operator '<=' cannot be applied to types 'string[]... Remove this comment to see the full error message
-  if (!options || Object.keys(options) <= 0) return ""
+const encodeUrlParamsFromObject = (options: Record<string, any>) => {
+  if (!options || Object.keys(options).length <= 0) return ""
   const encodedOptions = Object.keys(options)
     .map((k) => `${encodeURIComponent(k)}=${encodeURIComponent(options[k])}`)
     .join("&")
@@ -33,13 +31,12 @@ const encodeUrlParamsFromObject = (options: any) => {
 }
 
 // Check response status
-const checkStatus = (response: any) => {
+const checkStatus = (response: Response) => {
   if (response.status < 400) {
     return response
   } else {
-    return response.text().then((message: any) => {
+    return response.text().then((message) => {
       const error = new HTTPError(response.status, message || response.statusText)
-      error.statusCode = response.status
       return Promise.reject(error)
     })
   }
@@ -61,10 +58,10 @@ const useQueryClientFn = () => {
     console.debug("useQueryClientFn::: setting defaults: ", endpoint)
 
     queryClient.setQueryDefaults(["peaks"], {
-      queryFn: ({ queryKey }: any) => {
-        const [_key, id, params] = queryKey
-        const query = encodeUrlParamsFromObject(params)
-        return fetch(`${endpoint}/peaks${id ? "/" + id : ""}${query ? "" + query : ""}`, {
+      queryFn: ({ queryKey }) => {
+        const [_key, id, params] = queryKey as [string, string?, Record<string, any>?]
+        const query = encodeUrlParamsFromObject(params || {})
+        return fetch(`${endpoint}/peaks${id ? `/${id}` : ""}${query}`, {
           method: "GET",
           headers: {
             "Content-Type": "application/json",
@@ -73,8 +70,8 @@ const useQueryClientFn = () => {
         })
           .then(checkStatus)
           .then((response) => {
-            //  sort peaks by name
-            return response.json().then((data: any) => {
+            // sort peaks by name
+            return response.json().then((data) => {
               // check if data is an array to sort (peaks vs peak/id)
               if (Array.isArray(data)) {
                 return data.sort((a, b) => {
@@ -88,8 +85,7 @@ const useQueryClientFn = () => {
     })
 
     queryClient.setMutationDefaults(["peakAdd"], {
-      mutationFn: ({ formState }: any) => {
-        // Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
+      mutationFn: ({ formState }) => {
         const sendBody = JSON.stringify(formState)
         return fetch(`${endpoint}/peaks`, {
           method: "POST",
@@ -107,8 +103,7 @@ const useQueryClientFn = () => {
     })
 
     queryClient.setMutationDefaults(["peakEdit"], {
-      mutationFn: ({ id, formState }: any) => {
-        // Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
+      mutationFn: ({ id, formState }) => {
         const sendBody = JSON.stringify(formState)
         return fetch(`${endpoint}/peaks/${id}`, {
           method: "PUT",
@@ -126,7 +121,7 @@ const useQueryClientFn = () => {
     })
 
     queryClient.setMutationDefaults(["peakDelete"], {
-      mutationFn: ({ id }: any) => {
+      mutationFn: ({ id }) => {
         return fetch(`${endpoint}/peaks/${id}`, {
           method: "DELETE",
           headers: {
diff --git a/apps/example/src/hooks/useUrlState.ts b/apps/example/src/hooks/useUrlState.ts
index a0fa2e630..1f185a422 100644
--- a/apps/example/src/hooks/useUrlState.ts
+++ b/apps/example/src/hooks/useUrlState.ts
@@ -1,6 +1,6 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
@@ -8,6 +8,7 @@
 
 import { useState, useEffect } from "react"
 import { registerConsumer } from "@cloudoperators/juno-url-state-provider"
+
 import {
   useGlobalsActions,
   useGlobalsTabIndex,
@@ -20,10 +21,8 @@ const TAB_INDEX = "t"
 const CURRENT_PANEL = "p"
 const CURRENT_MODAL = "m"
 
-const useUrlState = (key: any) => {
+const useUrlState = (key: string | undefined) => {
   const [isURLRead, setIsURLRead] = useState(false)
-  // it is possible to have two apps instances on the same page
-  // int his case the key should be different per app
   const urlStateManager = registerConsumer(key || DEFAULT_KEY)
 
   // auth
@@ -38,33 +37,34 @@ const useUrlState = (key: any) => {
 
   // Set initial state from URL (on login)
   useEffect(() => {
-    /* !!!IMPORTANT!!!
-      don't read the url if we are already read it or if we are not logged in!!!!!
-    */
     if (isURLRead || !loggedIn) return
+
     console.debug(`EXAMPLEAPP: (${key || DEFAULT_KEY}) setting up state from url:`, urlStateManager.currentState())
 
     // READ the url state and set the state
     const newTabIndex = urlStateManager.currentState()?.[TAB_INDEX]
     const newCurrentPanel = urlStateManager.currentState()?.[CURRENT_PANEL]
     const newCurrentModal = urlStateManager.currentState()?.[CURRENT_MODAL]
+
     // SAVE the state
-    if (newTabIndex) setTabIndex(newTabIndex)
-    if (newCurrentPanel) setCurrentPanel(newCurrentPanel)
-    if (newCurrentModal) setCurrentModal(newCurrentModal)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+    if (newTabIndex !== undefined) setTabIndex(newTabIndex)
+    if (newCurrentPanel !== undefined) setCurrentPanel(newCurrentPanel)
+    if (newCurrentModal !== undefined) setCurrentModal(newCurrentModal)
+
     setIsURLRead(true)
-  }, [loggedIn, setTabIndex, setCurrentPanel, setCurrentModal])
+  }, [isURLRead, loggedIn, key, setTabIndex, setCurrentPanel, setCurrentModal, urlStateManager])
 
   // SYNC states to URL state
   useEffect(() => {
-    // don't sync if we are not logged in OR URL ist not yet read
     if (!isURLRead || !loggedIn) return
+
     urlStateManager.push({
       [TAB_INDEX]: tabIndex,
       [CURRENT_PANEL]: currentPanel,
       [CURRENT_MODAL]: currentModal,
     })
-  }, [loggedIn, tabIndex, currentPanel, currentModal])
+  }, [loggedIn, tabIndex, currentPanel, currentModal, isURLRead, urlStateManager])
 }
 
 export default useUrlState
diff --git a/apps/example/src/index.tsx b/apps/example/src/index.tsx
index b1c9ae1e9..d62469f91 100644
--- a/apps/example/src/index.tsx
+++ b/apps/example/src/index.tsx
@@ -1,17 +1,13 @@
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { createRoot } from "react-dom/client"
+import { createRoot, Root } from "react-dom/client"
 import React from "react"
 
-const getCurrentUrlWithoutFilename = () => {
+// Function to get the current URL without the filename
+const getCurrentUrlWithoutFilename = (): string => {
   const currentUrl = window.location.href
   const lastSlashIndex = currentUrl.lastIndexOf("/")
   const lastSegment = currentUrl.slice(lastSlashIndex + 1)
@@ -20,7 +16,8 @@ const getCurrentUrlWithoutFilename = () => {
   return lastSegment.trim() === "" || lastSegment.includes(".") ? currentUrl.slice(0, lastSlashIndex) : currentUrl
 }
 
-const enableMocking = async (options: any) => {
+// Function to enable mocking
+const enableMocking = async (options: { endpoint: string }): Promise<void> => {
   /**
    * Note: If you do not want to enable mocking in production, you can uncomment the following lines
    * if (process.env.NODE_ENV !== "development") {
@@ -31,17 +28,36 @@ const enableMocking = async (options: any) => {
   return startWorker(options)
 }
 
-// export mount and unmount functions
-export const mount = async (container: any, options = {}) => {
-  // @ts-expect-error TS(2339): Property 'props' does not exist on type '{}'.
-  const endpoint = options?.props?.endpoint ?? getCurrentUrlWithoutFilename()
-  await enableMocking({ endpoint }) // we need to first enable mocking before rendering the application
-  const App = await import("./App")
-  // @ts-expect-error TS(2339): Property 'root' does not exist on type '(container... Remove this comment to see the full error message
-  mount.root = createRoot(container)
-  // @ts-expect-error TS(2339): Property 'root' does not exist on type '(container... Remove this comment to see the full error message
-  mount.root.render(React.createElement(App.default, { ...options?.props, endpoint }))
+interface MountOptions {
+  container: Element | DocumentFragment
+  props?: {
+    endpoint?: string
+    [key: string]: any
+  }
 }
 
-// @ts-expect-error TS(2339): Property 'root' does not exist on type '(container... Remove this comment to see the full error message
-export const unmount = () => mount.root && mount.root.unmount()
+export const mount = async (
+  container: Element | DocumentFragment,
+  options: MountOptions = { container }
+): Promise<void> => {
+  const endpoint = options.props?.endpoint ?? getCurrentUrlWithoutFilename()
+  await enableMocking({ endpoint }) // Enable mocking before rendering the application
+  const AppModule = await import("./App")
+  const App = AppModule.default
+
+  // Create a root if it does not exist
+  if (!mount.root) {
+    mount.root = createRoot(container)
+  }
+  mount.root.render(<App {...options.props} endpoint={endpoint} />)
+}
+
+// Unmount function
+export const unmount = (): void => {
+  if (mount.root) {
+    mount.root.unmount()
+  }
+}
+
+// Define the root property on the mount function to store the root instance
+mount.root = null as Root | null
diff --git a/apps/example/src/lib/store/createAuthSlice.ts b/apps/example/src/lib/store/createAuthSlice.ts
index b97d76c4a..c4e5a0c2b 100644
--- a/apps/example/src/lib/store/createAuthSlice.ts
+++ b/apps/example/src/lib/store/createAuthSlice.ts
@@ -1,18 +1,32 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable no-unused-vars */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export interface AuthData {
+  auth: Record<string, any> | null
+  isProcessing: boolean
+  loggedIn: boolean
+  error: string | null
+  data: Record<string, any> | null
+  lastAction: Record<string, any>
+  actions: {
+    setData: (data: Partial<AuthData>) => void
+  }
+}
+
+interface State {
+  auth: AuthData
+}
+
 export const AUTH_ACTIONS = {
   SIGN_ON: "signOn",
   SIGN_OUT: "signOut",
 }
 
-// @ts-expect-error TS(7006): Parameter 'set' implicitly has an 'any' type.
-const createAuthSlice = (set, _get) => ({
+const createAuthSlice = (set: (fn: (state: State) => State) => void, _get: () => State) => ({
   auth: {
     data: null,
     isProcessing: false,
@@ -20,18 +34,20 @@ const createAuthSlice = (set, _get) => ({
     error: null,
     lastAction: {},
     actions: {
-      setData: (data: any) => {
+      setData: (data: Partial<AuthData>) => {
         if (!data) return
         set(
-          (state: any) => ({
+          (state) => ({
             auth: {
               ...state.auth,
-              isProcessing: data?.isProcessing,
-              loggedIn: data?.loggedIn,
-              error: data?.error,
-              data: data?.auth,
+              isProcessing: data?.isProcessing ?? state.auth.isProcessing,
+              loggedIn: data?.loggedIn ?? state.auth.loggedIn,
+              error: data?.error ?? state.auth.error,
+              data: data?.auth ?? state.auth.data,
+              lastAction: data?.lastAction ?? state.auth.lastAction,
             },
           }),
+          // @ts-ignore
           false,
           "auth/setData"
         )
diff --git a/apps/example/src/lib/store/createGlobalsSlice.ts b/apps/example/src/lib/store/createGlobalsSlice.ts
index b1d0b3376..47a193560 100644
--- a/apps/example/src/lib/store/createGlobalsSlice.ts
+++ b/apps/example/src/lib/store/createGlobalsSlice.ts
@@ -1,14 +1,32 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable no-unused-vars */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-// @ts-expect-error TS(7006): Parameter 'set' implicitly has an 'any' type.
-const createGlobalsSlice = (set, _get) => ({
+export interface Globals {
+  endpoint: string
+  queryClientFnReady: boolean
+  tabIndex: number
+  currentModal: unknown
+  currentPanel: unknown
+  actions: GlobalsActions
+}
+
+interface GlobalsActions {
+  setEndpoint: (newEndpoint: string) => void
+  setTabIndex: (newTabIndex: number) => void
+  setCurrentModal: (newModal: unknown) => void
+  setCurrentPanel: (newPanel: unknown) => void
+  setQueryClientFnReady: (readiness: boolean) => void
+}
+
+interface State {
+  globals: Globals
+}
+
+const createGlobalsSlice = (set: (fn: (state: State) => State) => void, _get: () => State) => ({
   globals: {
     endpoint: "",
     queryClientFnReady: false,
@@ -17,58 +35,63 @@ const createGlobalsSlice = (set, _get) => ({
     currentPanel: null,
 
     actions: {
-      setEndpoint: (newEndpoint: any) =>
+      setEndpoint: (newEndpoint: string) =>
         set(
-          (state: any) => ({
+          (state) => ({
             globals: {
               ...state.globals,
               endpoint: newEndpoint,
             },
           }),
+          // @ts-ignore
           false,
           "globals.setEndpoint"
         ),
-      setTabIndex: (newTabIndex: any) =>
+      setTabIndex: (newTabIndex: number) =>
         set(
-          (state: any) => ({
+          (state) => ({
             globals: {
               ...state.globals,
               tabIndex: newTabIndex,
             },
           }),
+          // @ts-ignore
           false,
           "globals.setTabIndex"
         ),
-      setCurrentModal: (newModal: any) =>
+      setCurrentModal: (newModal: unknown) =>
         set(
-          (state: any) => ({
+          (state) => ({
             globals: {
               ...state.globals,
               currentModal: newModal,
             },
           }),
+          // @ts-ignore
           false,
           "globals.setCurrentModal"
         ),
-      setCurrentPanel: (newPanel: any) =>
+      setCurrentPanel: (newPanel: unknown) =>
         set(
-          (state: any) => ({
+          (state) => ({
             globals: {
               ...state.globals,
               currentPanel: newPanel,
             },
           }),
+          // @ts-ignore
           false,
           "globals.setCurrentPanel"
         ),
-      setQueryClientFnReady: (readiness: any) =>
+      setQueryClientFnReady: (readiness: boolean) =>
         set(
-          (state: any) => ({
+          (state) => ({
             globals: {
               ...state.globals,
               queryClientFnReady: readiness,
             },
           }),
+          // @ts-ignore
           false,
           "globals.setQueryClientFnReady"
         ),
diff --git a/apps/example/src/lib/store/index.ts b/apps/example/src/lib/store/index.ts
index 2a81adc19..39ef8ca18 100644
--- a/apps/example/src/lib/store/index.ts
+++ b/apps/example/src/lib/store/index.ts
@@ -5,13 +5,18 @@
 
 import { createStore } from "zustand"
 import { devtools } from "zustand/middleware"
-import createGlobalsSlice from "./createGlobalsSlice"
-import createAuthSlice from "./createAuthSlice"
+import createGlobalsSlice, { Globals } from "./createGlobalsSlice"
+import createAuthSlice, { AuthData } from "./createAuthSlice"
+
+type StoreState = Globals & AuthData
 
 export default () =>
-  createStore(
+  createStore<StoreState>(
+    // @ts-ignore
     devtools((set, get) => ({
+      // @ts-ignore
       ...createGlobalsSlice(set, get),
+      // @ts-ignore
       ...createAuthSlice(set, get),
     }))
   )
diff --git a/apps/example/src/mocks/browser.ts b/apps/example/src/mocks/browser.ts
index 9455b30ba..d00bb847d 100644
--- a/apps/example/src/mocks/browser.ts
+++ b/apps/example/src/mocks/browser.ts
@@ -1,23 +1,27 @@
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { setupWorker } from "msw/browser"
+import { setupWorker, SetupWorkerApi } from "msw/browser"
 import getHandlers from "./getHandlers"
 
-let worker = null
+interface StartWorkerOptions {
+  endpoint: string
+  [key: string]: any
+}
+
+let worker: SetupWorkerApi | null = null
 
-export const startWorker = (options: any) => {
+export const startWorker = (options: StartWorkerOptions): Promise<void> => {
+  // @ts-ignore
   worker = setupWorker(...getHandlers(options))
+  // @ts-ignore
   return worker.start({
     serviceWorker: {
       url: `${options.endpoint}/mockServiceWorker.js`,
     },
-    onUnhandledRequest(request: any, print: any) {
+    onUnhandledRequest(request, print) {
       const url = new URL(request.url)
       // Do not show unhandled request warning for the following paths
       const listToIgnore = ["/src", "/@", "/node_modules"]
diff --git a/apps/example/src/mocks/db/index.ts b/apps/example/src/mocks/db/index.ts
index ca77d61e0..ba28a4f70 100644
--- a/apps/example/src/mocks/db/index.ts
+++ b/apps/example/src/mocks/db/index.ts
@@ -3,7 +3,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import peaks from "./peaks.json"
+import peaksData from "./peaks.json"
+
+export interface Peak {
+  id: number
+  name: string
+  height: string
+  region: string
+  mainrange: string
+  countries: string
+  url?: string
+}
+
+const peaks: Peak[] = peaksData
 
 export default {
   peaks,
diff --git a/apps/example/src/mocks/getHandlers.ts b/apps/example/src/mocks/getHandlers.ts
index 06b01e0e3..acd754547 100644
--- a/apps/example/src/mocks/getHandlers.ts
+++ b/apps/example/src/mocks/getHandlers.ts
@@ -1,61 +1,84 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-unsafe-call */
-/* eslint-disable @typescript-eslint/no-unsafe-return */
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { http, HttpResponse } from "msw"
-
+import { http } from "msw"
 import db from "./db"
 
-const getPeaks = ({ endpoint }: any) => {
-  return http.get(`${endpoint}/peaks`, () => HttpResponse.json(db.peaks))
+interface Options {
+  endpoint: string
+}
+
+interface Peak {
+  id: number
+  name: string
+  height: string
+  region: string
+  mainrange: string
+  countries: string
+  url?: string
+}
+
+// Mock response handling utility
+class MockHttpResponse {
+  static json = <T>(data: T) => {
+    return new Response(JSON.stringify(data), {
+      headers: { "Content-Type": "application/json" },
+    })
+  }
+
+  static notFound = (message: object) => {
+    return new Response(JSON.stringify(message), { status: 404 })
+  }
+}
+
+const getPeaks = ({ endpoint }: Options) => {
+  return http.get(`${endpoint}/peaks`, () => MockHttpResponse.json(db.peaks))
 }
 
-const getPeak = ({ endpoint }: any) => {
-  return http.get(`${endpoint}/peaks/:id`, ({ params }: any) => {
+const getPeak = ({ endpoint }: Options) => {
+  return http.get(`${endpoint}/peaks/:id`, ({ params }) => {
     const { id } = params
-    const peak = db.peaks.find((peak: any) => peak.id === Number(id))
-    //@ts-ignore
-    return peak ? HttpResponse.json(peak) : HttpResponse.notFound()
+    const peak = db.peaks.find((peak: Peak) => peak.id === Number(id))
+    if (peak) {
+      return MockHttpResponse.json(peak)
+    } else {
+      return MockHttpResponse.notFound({ message: "Peak not found" })
+    }
   })
 }
 
-const deletePeak = ({ endpoint }: any) => {
-  return http.delete(`${endpoint}/peaks/:id`, ({ params }: any) => {
+const deletePeak = ({ endpoint }: Options) => {
+  return http.delete(`${endpoint}/peaks/:id`, ({ params }) => {
     const { id } = params
-    db.peaks = [...db.peaks.filter((peak: any) => peak.id !== Number(id))]
-    return HttpResponse.json({})
+    db.peaks = db.peaks.filter((peak: Peak) => peak.id !== Number(id))
+    return MockHttpResponse.json({})
   })
 }
 
-const updatePeak = ({ endpoint }: any) => {
-  return http.put(`${endpoint}/peaks/:id`, async ({ params, request }: any) => {
+const updatePeak = ({ endpoint }: Options) => {
+  return http.put(`${endpoint}/peaks/:id`, async ({ params, request }) => {
     const { id } = params
-    const updatedPeak = await request.json()
-    db.peaks = db.peaks.map((peak: any) => (peak.id === Number(id) ? updatedPeak : peak))
-    return HttpResponse.json({})
+    const updatedPeak = (await request.json()) as Peak
+    db.peaks = db.peaks.map((peak: Peak) => (peak.id === Number(id) ? updatedPeak : peak))
+    return MockHttpResponse.json({})
   })
 }
 
-const addPeak = ({ endpoint }: any) => {
-  return http.post(`${endpoint}/peaks`, async ({ request }: any) => {
-    const newPeak = await request.json()
-    const id = Math.max(...db.peaks.map((peak: any) => peak.id)) + 1
+const addPeak = ({ endpoint }: Options) => {
+  return http.post(`${endpoint}/peaks`, async ({ request }) => {
+    const newPeak = (await request.json()) as Peak
+    const id = Math.max(...db.peaks.map((peak: Peak) => peak.id)) + 1
     db.peaks = [...db.peaks, { ...newPeak, id }]
-    return HttpResponse.json({})
+    return MockHttpResponse.json({})
   })
 }
 
-export default (options: any) => [
+export default (options: Options) => [
   getPeaks(options),
   getPeak(options),
   deletePeak(options),
   updatePeak(options),
   addPeak(options),
-  // add more request handlers here
 ]

From 236087572d8ec6bee5816bf32cdd9200b8eb3f28 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Mon, 27 Jan 2025 08:44:24 +0100
Subject: [PATCH 3/9] chore(ui): improve types changeset

---
 .changeset/fair-ears-shave.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fair-ears-shave.md

diff --git a/.changeset/fair-ears-shave.md b/.changeset/fair-ears-shave.md
new file mode 100644
index 000000000..a5c4eed36
--- /dev/null
+++ b/.changeset/fair-ears-shave.md
@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-app-example": minor
+---
+
+Improve example app types

From c958f3a8599545f36bbfd1f6fe84a71b45d3353a Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Mon, 27 Jan 2025 09:10:51 +0100
Subject: [PATCH 4/9] chore(ui): disable errors

---
 apps/example/src/components/AppContent.tsx | 5 +++--
 package-lock.json                          | 6 +++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/example/src/components/AppContent.tsx b/apps/example/src/components/AppContent.tsx
index 426674f76..2e507e3b4 100644
--- a/apps/example/src/components/AppContent.tsx
+++ b/apps/example/src/components/AppContent.tsx
@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
@@ -31,13 +34,11 @@ const AppContent: React.FC = () => {
   const loggedIn = useAuthLoggedIn()
   const authError = useAuthError()
   const tabIndex = useGlobalsTabIndex()
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
   const { addMessage } = useActions()
 
   // set an error message when oidc fails
   useEffect(() => {
     if (authError) {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
       addMessage({
         variant: "error",
         text: JSON.stringify(authError),
diff --git a/package-lock.json b/package-lock.json
index d2808c6a1..80fbb7b5c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -716,7 +716,7 @@
     },
     "apps/greenhouse": {
       "name": "@cloudoperators/juno-app-greenhouse",
-      "version": "0.3.11",
+      "version": "0.3.12",
       "license": "Apache-2.0",
       "dependencies": {
         "@cloudoperators/juno-app-doop": "*",
@@ -23923,7 +23923,7 @@
     },
     "packages/ui-components": {
       "name": "@cloudoperators/juno-ui-components",
-      "version": "2.35.2",
+      "version": "2.36.0",
       "license": "Apache-2.0",
       "devDependencies": {
         "@cloudoperators/juno-config": "*",
@@ -24692,7 +24692,7 @@
     },
     "packages/url-state-provider": {
       "name": "@cloudoperators/juno-url-state-provider",
-      "version": "2.2.0",
+      "version": "2.3.0",
       "license": "Apache-2.0",
       "dependencies": {
         "history": "^5.3.0",

From bd210992e5a508c16d293cc68213f1b9ea720b75 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Mon, 27 Jan 2025 10:59:51 +0100
Subject: [PATCH 5/9] chore(ui): fix lint errors

---
 .../src/components/peaks/PeaksEdit.tsx        | 12 +++---
 .../src/components/peaks/PeaksList.tsx        | 13 ++++---
 .../example/src/components/peaks/PeaksNew.tsx | 39 ++++++++++++++-----
 apps/example/src/hooks/useUrlState.ts         |  2 +-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/apps/example/src/components/peaks/PeaksEdit.tsx b/apps/example/src/components/peaks/PeaksEdit.tsx
index e2aa5ed52..a5f7ceb24 100644
--- a/apps/example/src/components/peaks/PeaksEdit.tsx
+++ b/apps/example/src/components/peaks/PeaksEdit.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState, useEffect } from "react"
+import React, { useState, useEffect, ChangeEvent } from "react"
 import { Button, Form, PanelBody, PanelFooter, FormRow, TextInput } from "@cloudoperators/juno-ui-components"
 import { useQuery, useMutation, useQueryClient, QueryObserverResult } from "@tanstack/react-query"
 
@@ -117,35 +117,35 @@ const PeaksEdit: React.FC<PeaksEditProps> = ({ peakId, closeCallback }) => {
             <TextInput
               label="Name"
               value={formState.name || ""}
-              onChange={(e) => onAttrChanged("name", e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("name", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
               label="Height"
               value={formState.height || ""}
-              onChange={(e) => onAttrChanged("height", e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("height", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
               label="Main Range"
               value={formState.mainrange || ""}
-              onChange={(e) => onAttrChanged("mainrange", e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("mainrange", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
               label="Region"
               value={formState.region || ""}
-              onChange={(e) => onAttrChanged("region", e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("region", e.target.value)}
             />
           </FormRow>
           <FormRow>
             <TextInput
               label="Country"
               value={formState.countries || ""}
-              onChange={(e) => onAttrChanged("countries", e.target.value)}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("countries", e.target.value)}
             />
           </FormRow>
         </Form>
diff --git a/apps/example/src/components/peaks/PeaksList.tsx b/apps/example/src/components/peaks/PeaksList.tsx
index 81c0671ce..ebb26ad91 100644
--- a/apps/example/src/components/peaks/PeaksList.tsx
+++ b/apps/example/src/components/peaks/PeaksList.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable no-unused-vars */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useMemo } from "react"
+import React, { useMemo, MutableRefObject } from "react"
 import {
   Button,
   ContentAreaToolbar,
@@ -34,12 +36,12 @@ interface PeaksListProps {
 
 const LIST_COLUMNS = 6
 
-const PeaksList: React.FC<PeaksListProps> = ({ peaks }) => {
+const PeaksList: React.FC<PeaksListProps> = ({ peaks, isLoading, isError, error }) => {
   const { setCurrentPanel } = useGlobalsActions()
 
   const items = useMemo(() => peaks, [peaks])
 
-  const refFunction = (ref: React.MutableRefObject<HTMLSpanElement | null>) => (
+  const refFunction = (ref: MutableRefObject<HTMLSpanElement | null>): React.ReactElement => (
     <DataGridRow>
       <DataGridCell colSpan={LIST_COLUMNS} className="border-b-0 py-0">
         <span ref={ref} />
@@ -55,7 +57,6 @@ const PeaksList: React.FC<PeaksListProps> = ({ peaks }) => {
         </DataGridCell>
       </DataGridRow>
     ),
-    //@ts-ignore
     refFunction,
   })
 
@@ -79,8 +80,8 @@ const PeaksList: React.FC<PeaksListProps> = ({ peaks }) => {
         </DataGridRow>
         {scrollListItems.length > 0 ? (
           <>
-            {iterator.map((peak, index) => (
-              <PeaksListItem key={index} peak={peak as Peak} />
+            {iterator.map((peak: Peak, index: number) => (
+              <PeaksListItem key={index} peak={peak} />
             ))}
           </>
         ) : (
diff --git a/apps/example/src/components/peaks/PeaksNew.tsx b/apps/example/src/components/peaks/PeaksNew.tsx
index fa8153ec2..e4593fba0 100644
--- a/apps/example/src/components/peaks/PeaksNew.tsx
+++ b/apps/example/src/components/peaks/PeaksNew.tsx
@@ -1,9 +1,11 @@
+/* eslint-disable no-unused-vars */
+
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useState } from "react"
+import React, { useState, ChangeEvent } from "react"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { useActions } from "@cloudoperators/juno-messages-provider"
 import { PanelBody, PanelFooter, Button, FormRow, TextInput } from "@cloudoperators/juno-ui-components"
@@ -29,8 +31,7 @@ interface AddMessage {
 const PeaksNew: React.FC<PeaksNewProps> = ({ closeCallback }) => {
   const queryClient = useQueryClient()
   const [formState, setFormState] = useState<FormState>({})
-  // TO DO: Fix types
-  // eslint-disable-next-line no-unused-vars
+  // To do: Fix type in package
   const { addMessage } = useActions() as { addMessage: (message: AddMessage) => void }
 
   const { mutateAsync } = useMutation({
@@ -83,22 +84,42 @@ const PeaksNew: React.FC<PeaksNewProps> = ({ closeCallback }) => {
       }
     >
       <FormRow>
-        <TextInput label="Name" autoFocus onChange={(e) => onAttrChanged("name", e.target.value)} />
+        <TextInput
+          label="Name"
+          autoFocus
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("name", e.target.value)}
+        />
       </FormRow>
       <FormRow>
-        <TextInput label="Height" onChange={(e) => onAttrChanged("height", e.target.value)} />
+        <TextInput
+          label="Height"
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("height", e.target.value)}
+        />
       </FormRow>
       <FormRow>
-        <TextInput label="Main Range" onChange={(e) => onAttrChanged("range", e.target.value)} />
+        <TextInput
+          label="Main Range"
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("range", e.target.value)}
+        />
       </FormRow>
       <FormRow>
-        <TextInput label="Region" onChange={(e) => onAttrChanged("region", e.target.value)} />
+        <TextInput
+          label="Region"
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("region", e.target.value)}
+        />
       </FormRow>
       <FormRow>
-        <TextInput label="Country" onChange={(e) => onAttrChanged("country", e.target.value)} />
+        <TextInput
+          label="Country"
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("country", e.target.value)}
+        />
       </FormRow>
       <FormRow>
-        <TextInput type="url" label="URL" onChange={(e) => onAttrChanged("url", e.target.value)} />
+        <TextInput
+          type="url"
+          label="URL"
+          onChange={(e: ChangeEvent<HTMLInputElement>) => onAttrChanged("url", e.target.value)}
+        />
       </FormRow>
     </PanelBody>
   )
diff --git a/apps/example/src/hooks/useUrlState.ts b/apps/example/src/hooks/useUrlState.ts
index 1f185a422..819b51b1c 100644
--- a/apps/example/src/hooks/useUrlState.ts
+++ b/apps/example/src/hooks/useUrlState.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 
@@ -47,7 +48,6 @@ const useUrlState = (key: string | undefined) => {
     const newCurrentModal = urlStateManager.currentState()?.[CURRENT_MODAL]
 
     // SAVE the state
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
     if (newTabIndex !== undefined) setTabIndex(newTabIndex)
     if (newCurrentPanel !== undefined) setCurrentPanel(newCurrentPanel)
     if (newCurrentModal !== undefined) setCurrentModal(newCurrentModal)

From 8283f5265e0c4a328fee03a03ed4c0ff916fb9dc Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Mon, 27 Jan 2025 11:12:38 +0100
Subject: [PATCH 6/9] chore(ui): fix lint errors

---
 apps/example/src/components/peaks/PeaksList.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/example/src/components/peaks/PeaksList.tsx b/apps/example/src/components/peaks/PeaksList.tsx
index ebb26ad91..30d7826a3 100644
--- a/apps/example/src/components/peaks/PeaksList.tsx
+++ b/apps/example/src/components/peaks/PeaksList.tsx
@@ -57,6 +57,7 @@ const PeaksList: React.FC<PeaksListProps> = ({ peaks, isLoading, isError, error
         </DataGridCell>
       </DataGridRow>
     ),
+    //@ts-ignore
     refFunction,
   })
 
@@ -80,6 +81,7 @@ const PeaksList: React.FC<PeaksListProps> = ({ peaks, isLoading, isError, error
         </DataGridRow>
         {scrollListItems.length > 0 ? (
           <>
+            {/* @ts-ignore */}
             {iterator.map((peak: Peak, index: number) => (
               <PeaksListItem key={index} peak={peak} />
             ))}

From 6a51af0550ed1e3c4576779801d1e25f523ea995 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Mon, 27 Jan 2025 14:16:55 +0100
Subject: [PATCH 7/9] chore(ui): delete MonorepoChecker

---
 apps/example/src/App.tsx                      |  2 --
 .../src/components/MonorepoChecker.tsx        | 29 -------------------
 2 files changed, 31 deletions(-)
 delete mode 100644 apps/example/src/components/MonorepoChecker.tsx

diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
index 2ed482069..6b8befc6e 100644
--- a/apps/example/src/App.tsx
+++ b/apps/example/src/App.tsx
@@ -12,7 +12,6 @@ import React, { useEffect, useMemo } from "react"
 
 // @ts-ignore
 import styles from "./styles.scss?inline"
-import MonorepoChecker from "./components/MonorepoChecker"
 
 import {
   AppShellProvider,
@@ -63,7 +62,6 @@ const App: React.FC<AppProps> = ({ endpoint, embedded, id }) => {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <MonorepoChecker />
       {/* @ts-ignore */}
       <AsyncWorker consumerId={id} />
       <AppShell
diff --git a/apps/example/src/components/MonorepoChecker.tsx b/apps/example/src/components/MonorepoChecker.tsx
deleted file mode 100644
index ce6fc8bab..000000000
--- a/apps/example/src/components/MonorepoChecker.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
- * SPDX-License-Identifier: Apache-2.0
- */
-
-import React from "react"
-import { broadcast, watch, get, onGet } from "@cloudoperators/juno-communicator"
-import { MessagesProvider } from "@cloudoperators/juno-messages-provider"
-import { mockedSession } from "@cloudoperators/juno-oauth"
-import { registerConsumer } from "@cloudoperators/juno-url-state-provider"
-
-console.debug("==import communicator", {
-  broadcast,
-  watch,
-  get,
-  onGet,
-})
-
-console.debug("==import oauth", mockedSession)
-console.debug("==import juno url state provider", registerConsumer("MONOREPO"))
-console.debug("==import message provider", {
-  MessagesProvider,
-})
-
-const MonorepoChecker: React.FC = () => {
-  return <></>
-}
-
-export default MonorepoChecker

From b116893549a6d048ac8e1d55e687f7e4bf2510ac Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Mon, 27 Jan 2025 14:49:53 +0100
Subject: [PATCH 8/9] chore(ui): disable lint errors

---
 apps/example/src/components/peaks/PeaksList.tsx | 3 +++
 apps/example/src/components/peaks/PeaksNew.tsx  | 1 +
 apps/example/src/hooks/useUrlState.ts           | 1 +
 3 files changed, 5 insertions(+)

diff --git a/apps/example/src/components/peaks/PeaksList.tsx b/apps/example/src/components/peaks/PeaksList.tsx
index 30d7826a3..c19f71b5b 100644
--- a/apps/example/src/components/peaks/PeaksList.tsx
+++ b/apps/example/src/components/peaks/PeaksList.tsx
@@ -1,4 +1,7 @@
 /* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment*/
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
diff --git a/apps/example/src/components/peaks/PeaksNew.tsx b/apps/example/src/components/peaks/PeaksNew.tsx
index e4593fba0..5af29ff76 100644
--- a/apps/example/src/components/peaks/PeaksNew.tsx
+++ b/apps/example/src/components/peaks/PeaksNew.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unsafe-call*/
 
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
diff --git a/apps/example/src/hooks/useUrlState.ts b/apps/example/src/hooks/useUrlState.ts
index 819b51b1c..98a6f2a93 100644
--- a/apps/example/src/hooks/useUrlState.ts
+++ b/apps/example/src/hooks/useUrlState.ts
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unsafe-argument */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call*/
 
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors

From 2ed520d55a0b5a767a39c98f2868abdcd3072139 Mon Sep 17 00:00:00 2001
From: I531348 <guoda.puidokaite@sap.com>
Date: Tue, 28 Jan 2025 08:29:24 +0100
Subject: [PATCH 9/9] chore(ui): PR comment improvements

---
 apps/example/src/App.tsx                        | 2 +-
 apps/example/src/components/StoreProvider.tsx   | 3 +--
 apps/example/src/components/auth/HeaderUser.tsx | 7 +++----
 apps/example/src/mocks/browser.ts               | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/example/src/App.tsx b/apps/example/src/App.tsx
index 6b8befc6e..0cb75ce3d 100644
--- a/apps/example/src/App.tsx
+++ b/apps/example/src/App.tsx
@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 
 /*
diff --git a/apps/example/src/components/StoreProvider.tsx b/apps/example/src/components/StoreProvider.tsx
index 14ffbc919..91e235530 100644
--- a/apps/example/src/components/StoreProvider.tsx
+++ b/apps/example/src/components/StoreProvider.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable no-unused-vars */
-
 /*
  * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
  * SPDX-License-Identifier: Apache-2.0
@@ -17,6 +15,7 @@ interface AuthParsedData {
   }
 }
 
+/* eslint-disable no-unused-vars */
 interface Actions {
   setCurrentPanel: (panel: unknown) => void
   setCurrentModal: (modal: unknown) => void
diff --git a/apps/example/src/components/auth/HeaderUser.tsx b/apps/example/src/components/auth/HeaderUser.tsx
index c5f52e0e5..c27c4eb6c 100644
--- a/apps/example/src/components/auth/HeaderUser.tsx
+++ b/apps/example/src/components/auth/HeaderUser.tsx
@@ -11,8 +11,7 @@ import { useAuthLoggedIn, useAuthData } from "../StoreProvider"
 
 interface HeaderUserProps {
   login: () => void
-  // eslint-disable-next-line no-unused-vars
-  logout: ({ resetOIDCSession, silent }: { resetOIDCSession: boolean; silent: boolean }) => void
+  logout: () => void
 }
 
 const HeaderUser: React.FC<HeaderUserProps> = ({ login, logout }) => {
@@ -26,10 +25,10 @@ const HeaderUser: React.FC<HeaderUserProps> = ({ login, logout }) => {
           <div className="mr-4">
             <Avatar userName={authData?.parsed?.fullName || ""} url={authData?.parsed?.avatarUrl?.small || ""} />
           </div>
-          <Button label="Logout" size="small" onClick={() => logout({ resetOIDCSession: false, silent: true })} />
+          <Button label="Logout" size="small" onClick={logout} />
         </>
       ) : (
-        <Button label="Login" size="small" onClick={() => login()} />
+        <Button label="Login" size="small" onClick={login} />
       )}
     </Stack>
   )
diff --git a/apps/example/src/mocks/browser.ts b/apps/example/src/mocks/browser.ts
index d00bb847d..f2ce8c54c 100644
--- a/apps/example/src/mocks/browser.ts
+++ b/apps/example/src/mocks/browser.ts
@@ -8,7 +8,7 @@ import getHandlers from "./getHandlers"
 
 interface StartWorkerOptions {
   endpoint: string
-  [key: string]: any
+  [key: string]: unknown
 }
 
 let worker: SetupWorkerApi | null = null