Align eslint with other projects

src/main/frontend/app/actions/navigationActions.ts

@@ -6,7 +6,7 @@ import { getBaseName } from '~/utils/path-utils'
 export function openInStudio(
   navigate: NavigateFunction,
   { adapterName, filepath, adapterPosition }: { adapterName: string; filepath: string; adapterPosition: number },
-) {
+): void {
   const { setTabData, setActiveTab, getTab } = useTabStore.getState()
 
   const tabId = `${filepath}::${adapterName}::${adapterPosition}`
@@ -28,7 +28,7 @@ export function openInStudio(
   navigate('/studio')
 }
 
-export function openInEditor(relativePath: string, filepath: string, navigate: NavigateFunction) {
+export function openInEditor(relativePath: string, filepath: string, navigate: NavigateFunction): void {
   const { setTabData, setActiveTab, getTab } = useEditorTabStore.getState()
 
   if (!getTab(filepath)) {
@@ -45,7 +45,7 @@ export function openInEditor(relativePath: string, filepath: string, navigate: N
 export function openInEditorAtElement(
   navigate: NavigateFunction,
   { subtype, filepath, name }: { subtype: string; filepath: string; name?: string },
-) {
+): void {
   const editorStore = useEditorTabStore.getState()
   const fileName = getBaseName(filepath)
 
@@ -76,7 +76,7 @@ export function openInStudioAtNode(
     subtype: string
     name: string
   },
-) {
+): void {
   const { setTabData, setActiveTab, getTab } = useTabStore.getState()
 
   const tabId = `${filepath}::${adapterName}::${adapterPosition}`

src/main/frontend/app/components/context-editor-footer.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react'
+import type { JSX, ReactNode } from 'react'
 import Button from '~/components/inputs/button'
 
 type ContextEditorFooterProperties = {
@@ -21,7 +21,7 @@ export default function ContextEditorFooter({
   deleteLabel = 'Delete',
   errorMessage,
   leadingActions,
-}: Readonly<ContextEditorFooterProperties>) {
+}: Readonly<ContextEditorFooterProperties>): JSX.Element {
   return (
     <div className="border-t-border bg-background border-t p-4">
       <div className="flex w-full items-center justify-between">

src/main/frontend/app/components/datamapper/basic-components/close-button.tsx

@@ -1,13 +1,14 @@
 import clsx from 'clsx'
+import type { JSX } from 'react'
 
-export default function CloseButton({ onClick, className }: { onClick: () => void; className?: string }) {
+export default function CloseButton({ onClick, className }: { onClick: () => void; className?: string }): JSX.Element {
   return (
     <button
       className={clsx(
         'text-error text-3xl leading-none font-bold drop-shadow-[0_0_1px_black] hover:opacity-80',
         className,
       )}
-      onClick={(event) => {
+      onClick={(event): void => {
         event.stopPropagation()
         onClick()
       }}

src/main/frontend/app/components/datamapper/basic-components/delete-button.tsx

@@ -1,11 +1,12 @@
 import clsx from 'clsx'
 import TrashBinIcon from '/icons/solar/Trash Bin.svg?react'
+import type { JSX } from 'react'
 
-export default function DeleteButton({ onClick, className }: { onClick: () => void; className?: string }) {
+export default function DeleteButton({ onClick, className }: { onClick: () => void; className?: string }): JSX.Element {
   return (
     <button
       className={clsx('hover:opacity-70', className)}
-      onClick={(event) => {
+      onClick={(event): void => {
         event.stopPropagation()
         onClick()
       }}

src/main/frontend/app/components/datamapper/basic-components/edit-button.tsx

@@ -1,11 +1,12 @@
 import clsx from 'clsx'
 import TextCircle from '/icons/solar/Text Circle.svg?react'
+import type { JSX } from 'react'
 
-export default function EditButton({ onClick, className }: { onClick: () => void; className?: string }) {
+export default function EditButton({ onClick, className }: { onClick: () => void; className?: string }): JSX.Element {
   return (
     <button
       className={clsx('hover:opacity-70', className)}
-      onClick={(event) => {
+      onClick={(event): void => {
         event.stopPropagation()
         onClick()
       }}

src/main/frontend/app/components/datamapper/basic-components/generate-button.tsx

@@ -1,5 +1,6 @@
+import type { JSX } from 'react'
 import Button from '~/components/inputs/button'
-import { showErrorToast, showInfoToast } from '~/components/toast'
+import useToasts from '~/components/toast/use-toasts'
 import { generateDatamapperXSLT } from '~/services/datamapper-service'
 import { useProjectStore } from '~/stores/project-store'
 import type { MappingListConfig } from '~/types/datamapper_types/config-types'
@@ -11,13 +12,14 @@ export default function GenerateButton({
 }: {
   highlightUnset: () => void
   mappingListConfig: MappingListConfig
-}) {
+}): JSX.Element {
   const project = useProjectStore.getState().project
+  const { showErrorToast, showInfoToast } = useToasts()
 
   return (
     <Button
       className="bg-foreground-active disabled:bg-backdrop disabled:text-foreground-muted font-medium text-neutral-900"
-      onClick={async () => {
+      onClick={async (): Promise<void> => {
         highlightUnset()
         if (!project) {
           showErrorToast('Not in valid project!')

src/main/frontend/app/components/datamapper/basic-components/highlight-button.tsx

@@ -1,11 +1,18 @@
 import clsx from 'clsx'
 import LightBulb from '/icons/solar/Lightbulb.svg?react'
+import type { JSX } from 'react'
 
-export default function HighlightButton({ onClick, className }: { onClick: () => void; className?: string }) {
+export default function HighlightButton({
+  onClick,
+  className,
+}: {
+  onClick: () => void
+  className?: string
+}): JSX.Element {
   return (
     <button
       className={clsx('hover:opacity-70', className)}
-      onClick={(event) => {
+      onClick={(event): void => {
         event.stopPropagation()
         onClick()
       }}

src/main/frontend/app/components/datamapper/basic-components/hover-info.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
+import type { JSX } from 'react'
 
-export default function HoverInfo({ className, info }: { className?: string; info: string }) {
+export default function HoverInfo({ className, info }: { className?: string; info: string }): JSX.Element {
   return (
     <span
       className={clsx(

src/main/frontend/app/components/datamapper/basic-components/import-button.tsx

@@ -1,7 +1,7 @@
-import { useId } from 'react'
+import { type JSX, useId } from 'react'
 import clsx from 'clsx'
+import useToasts from '~/components/toast/use-toasts'
 import Button from '../../inputs/button'
-import { showErrorToast } from '../../toast'
 
 type ImportButtonProperties = {
   fileType: string
@@ -11,8 +11,9 @@ type ImportButtonProperties = {
 }
 
 // Generic import button with visual feedback for uploaded files
-function ImportButton({ fileType, importFunc, file, setFile }: ImportButtonProperties) {
+function ImportButton({ fileType, importFunc, file, setFile }: ImportButtonProperties): JSX.Element {
   const inputId = `UploadImportButton${useId()}`
+  const { showErrorToast } = useToasts()
 
   return (
     <div className="flex w-full flex-col items-center gap-1">
@@ -39,13 +40,13 @@ function ImportButton({ fileType, importFunc, file, setFile }: ImportButtonPrope
         type="file"
         accept={fileType}
         className="hidden"
-        onChange={(event) => setFile(event.target.files?.[0] || null)}
+        onChange={(event): void => setFile(event.target.files?.[0] || null)}
       />
       {
         <Button
           className="m-3 w-full"
           disabled={!file}
-          onClick={() => {
+          onClick={(): void => {
             if (file) importFunc(file)
             else showErrorToast('import file failed')
           }}

src/main/frontend/app/components/datamapper/basic-components/variable-type-icon.tsx

@@ -4,6 +4,7 @@ import BoxMin from '/icons/solar/Box Minimalistic.svg?react'
 import List from '/icons/solar/List.svg?react'
 import PlusMin from '/icons/solar/Plus, Minus.svg?react'
 import Hashtag from '/icons/solar/Hashtag Square.svg?react'
+import type { JSX } from 'react'
 import HoverInfo from './hover-info'
 
 export default function VariableTypeIcon({
@@ -14,8 +15,8 @@ export default function VariableTypeIcon({
   className?: string
   variableType: string
   variableTypeBasic: string
-}) {
-  function getIcon() {
+}): JSX.Element {
+  function getIcon(): JSX.Element | '?' {
     switch (variableTypeBasic) {
       case 'string': {
         return <TextSquare className="fill-foreground h-6" />

src/main/frontend/app/components/datamapper/forms/add-conditions-form.tsx

@@ -1,4 +1,4 @@
-import { useId, useMemo, useState } from 'react'
+import { type JSX, useId, useMemo, useState } from 'react'
 import Button from '~/components/inputs/button'
 import Dropdown from '~/components/inputs/dropdown'
 import Input from '~/components/inputs/input'
@@ -20,11 +20,11 @@ type AddConditionFormProperties = {
   conditionToEdit?: Condition
 }
 
-function AddConditionForm({ sources, onSave, conditionToEdit }: Readonly<AddConditionFormProperties>) {
+function AddConditionForm({ sources, onSave, conditionToEdit }: Readonly<AddConditionFormProperties>): JSX.Element {
   const newId = `condition-${useId()}`
   const id = conditionToEdit?.id ?? newId
   const conditionsConfig = conditionConfigJson as ConditionTypeConfig
-  sources = sources.filter((source) => source.id != id)
+  sources = sources.filter((source): boolean => source.id != id)
   const [condition, setCondition] = useState<Condition>({
     id,
     name: conditionToEdit?.name ?? '',
@@ -33,14 +33,14 @@ function AddConditionForm({ sources, onSave, conditionToEdit }: Readonly<AddCond
   })
 
   const isFormIncomplete = !condition.type
-  const placeholder = useMemo(() => generateConditionName(condition), [condition])
+  const placeholder = useMemo((): string => generateConditionName(condition), [condition])
 
-  function handleSave() {
+  function handleSave(): void {
     if (!condition.name) condition.name = placeholder
     onSave(condition)
   }
 
-  const selectedConditionConfig = conditionsConfig.conditions.find((c) => c.name === condition.type?.name)
+  const selectedConditionConfig = conditionsConfig.conditions.find((c): boolean => c.name === condition.type?.name)
 
   return (
     <div className="text-foreground border-black">
@@ -52,7 +52,14 @@ function AddConditionForm({ sources, onSave, conditionToEdit }: Readonly<AddCond
         <Input
           type="text"
           value={condition.name}
-          onChange={(event) => setCondition((condition) => ({ ...condition, name: event.target.value }))}
+          onChange={(event): void =>
+            setCondition(
+              (condition): { name: string; id: string; type: ConditionType | null; inputs: ConditionInput[] } => ({
+                ...condition,
+                name: event.target.value,
+              }),
+            )
+          }
           placeholder={placeholder}
         />
       </div>
@@ -63,20 +70,23 @@ function AddConditionForm({ sources, onSave, conditionToEdit }: Readonly<AddCond
         <Dropdown
           className="max-w-55"
           value={condition.type?.name ?? ''}
-          onChange={(event) => {
-            const conditionType = conditionsConfig.conditions.find((condition) => condition.name === event) ?? null
+          onChange={(event): void => {
+            const conditionType =
+              conditionsConfig.conditions.find((condition): boolean => condition.name === event) ?? null
             setCondition({
               id,
               name: condition.name,
               type: conditionType ?? null,
               inputs:
-                conditionType?.inputs.map(() => ({
+                conditionType?.inputs.map((): { type: ''; value: string } => ({
                   type: '',
                   value: '',
                 })) ?? [],
             })
           }}
-          options={Object.fromEntries(conditionsConfig.conditions.map((condition) => [condition.name, condition.name]))}
+          options={Object.fromEntries(
+            conditionsConfig.conditions.map((condition): [string, string] => [condition.name, condition.name]),
+          )}
         />
       </div>
 
@@ -106,9 +116,9 @@ function ConditionDetailsForm({
   setCondition: React.Dispatch<React.SetStateAction<Condition>>
   sources: Source[]
   conditionConfig: ConditionType
-}>) {
-  function updateInput(index: number, value: ConditionInput) {
-    setCondition((condition) => {
+}>): JSX.Element {
+  function updateInput(index: number, value: ConditionInput): void {
+    setCondition((condition): { inputs: ConditionInput[]; id: string; name: string; type: ConditionType | null } => {
       const newInputs = [...condition.inputs]
       newInputs[index] = value
       return { ...condition, inputs: newInputs }
@@ -117,12 +127,12 @@ function ConditionDetailsForm({
 
   return (
     <div className="max-h-[50vh] space-y-2 overflow-auto">
-      {conditionConfig.inputs.map((inputConfig, index) => (
+      {conditionConfig.inputs.map((inputConfig, index): JSX.Element => (
         <ConditionInputField
           key={index}
           inputConfig={inputConfig}
           value={condition.inputs[index]}
-          onChange={(value) => updateInput(index, value)}
+          onChange={(value): void => updateInput(index, value)}
           sources={sources}
         />
       ))}
@@ -140,20 +150,20 @@ function ConditionInputField({
   value?: ConditionInput
   onChange: (value_: ConditionInput) => void
   sources: Source[]
-}>) {
-  let filteredSources = sources
-  if (inputConfig.inputsAllowed !== 'all') {
-    filteredSources = sources.filter((source) => source.type === inputConfig.inputsAllowed)
-  }
+}>): JSX.Element {
+  const filteredSources =
+    inputConfig.inputsAllowed === 'all'
+      ? sources
+      : sources.filter((source): boolean => source.type === inputConfig.inputsAllowed)
 
   if (inputConfig.type === 'source') {
     const selectedIsDefault = value?.type === 'defaultValue'
-    function handleSourceChange(sourceId: string) {
+    function handleSourceChange(sourceId: string): void {
       if (sourceId === 'defaultValue') {
         onChange({ type: 'defaultValue', value: '' })
         return
       }
-      const source = sources.find((source) => source.id === sourceId)
+      const source = sources.find((source): boolean => source.id === sourceId)
       if (!source) return
       onChange({ type: 'source', sourceId: sourceId, value: source.label })
     }
@@ -167,7 +177,7 @@ function ConditionInputField({
           onChange={handleSourceChange}
           options={Object.fromEntries([
             ...(inputConfig.allowDefaultValue ? [['defaultValue', 'Default Value']] : []),
-            ...filteredSources.map((source) => [source.id, source.label]),
+            ...filteredSources.map((source): string[] => [source.id, source.label]),
           ])}
         />
 
@@ -176,7 +186,7 @@ function ConditionInputField({
             type="text"
             placeholder="Enter default value"
             value={value?.value ?? ''}
-            onChange={(event) => onChange({ type: 'defaultValue', value: event.target.value })}
+            onChange={(event): void => onChange({ type: 'defaultValue', value: event.target.value })}
           />
         )}
       </div>
@@ -190,7 +200,7 @@ function ConditionInputField({
         <Input
           type="text"
           value={value?.value ?? ''}
-          onChange={(event) => onChange({ type: 'attribute', value: event.target.value })}
+          onChange={(event): void => onChange({ type: 'attribute', value: event.target.value })}
         />
       </div>
     )
@@ -211,8 +221,8 @@ function ConditionInputField({
         <Dropdown
           className="max-w-55"
           value={value?.value ?? ''}
-          onChange={(val) => onChange({ type: 'operator', value: val })}
-          options={Object.fromEntries(operatorConfig.allowedValues.map((option) => [option, option]))}
+          onChange={(value_): void => onChange({ type: 'operator', value: value_ })}
+          options={Object.fromEntries(operatorConfig.allowedValues.map((option): [string, string] => [option, option]))}
         />
       </div>
     )
@@ -225,7 +235,7 @@ function ConditionInputField({
       <Input
         type="text"
         value={value?.value ?? ''}
-        onChange={(event) => onChange({ type: 'defaultValue', value: event.target.value })}
+        onChange={(event): void => onChange({ type: 'defaultValue', value: event.target.value })}
       />
     </div>
   )