🚨 Fix TS warnings (#847)

* 🚨 Typography ts warnings fixed

* 🚨 TabList warnings fixed

Was an issue with child.props was of type any, had to explicitly type them in the filter/map functions

* 🚨 Checkbox //ts-nocheck removed to fix ts warning

* 🚨 Search test linter warnings fixed

* 🚨 Search linter warnings fixed

* 🚨 Chip warnings fixed

* 🚨 Divider warnings fixed

* ⬆️ pnpm-lock.yaml updated to match package.json

Due to react-tests failed ERROR  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up-to-date with package.json

* 🔥 Removed unnecessary type assertion

Was fixed in tokens instead

libraries/core-react/src/Chip/Chip.tsx

@@ -170,24 +170,34 @@ export const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
     variant,
   }
 
-  const handleKeyPress = (event) => {
-    const { key } = event
+  const handleKeyPress = (
+    event:
+      | React.KeyboardEvent<HTMLDivElement>
+      | React.MouseEvent<HTMLDivElement>,
+  ) => {
+    const { key } = event as React.KeyboardEvent<HTMLDivElement>
     if (key === 'Enter') {
       if (deletable) {
         handleDelete(event)
       }
       // Delete takes precedence, else click action is activated
       if (clickable && !deletable) {
-        handleClick(event)
+        handleClick(event as React.MouseEvent<HTMLDivElement>)
       }
     }
   }
 
+  type childPropsType = {
+    size: number
+    disabled: boolean
+  }
+
   const resizedChildren = React.Children.map(
     children,
     (child: React.ReactElement) => {
       // We force size on Icon & Avatar component
-      if (child.props && child.props.size) {
+      const childProps = child.props as childPropsType
+      if (child.props && childProps.size) {
         return React.cloneElement(child, {
           size: 16,
           disabled,
@@ -197,7 +207,9 @@ export const Chip = forwardRef<HTMLDivElement, ChipProps>(function Chip(
     },
   )
 
-  const onDeleteClick = (event) => {
+  const onDeleteClick = (
+    event: React.MouseEvent<SVGSVGElement, MouseEvent>,
+  ) => {
     event.stopPropagation()
     if (deletable) {
       handleDelete(event)

libraries/core-react/src/Divider/Divider.tokens.ts

@@ -15,12 +15,12 @@ const {
 
 const dividerHeight = 1
 
-const reduceByValue = (subtractValue) => (valueWithUnit) => {
+const reduceByValue = (subtractValue: number) => (valueWithUnit: string) => {
   const valueAndUnit = valueWithUnit
     .split(/(\d+)/)
     .filter((val) => val.length > 0)
 
-  return valueAndUnit[0] - subtractValue + valueAndUnit[1]
+  return `${parseInt(valueAndUnit[0]) - subtractValue}` + valueAndUnit[1]
 }
 
 const reduceValueByDividerHeight = reduceByValue(dividerHeight)

libraries/core-react/src/Search/Search.test.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import React from 'react'
 import { render, cleanup, fireEvent, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
@@ -34,8 +33,8 @@ describe('Search', () => {
     let callbackId = ''
     let callbackValue = ''
     const handleOnChange = jest.fn(({ target: { id, value } }) => {
-      callbackId = id
-      callbackValue = value
+      callbackId = id as string
+      callbackValue = value as string
     })
 
     render(
@@ -57,8 +56,8 @@ describe('Search', () => {
     let callbackId = ''
     let callbackValue = ''
     const handleOnChange = jest.fn(({ target: { id, value } }) => {
-      callbackValue = value
-      callbackId = id
+      callbackValue = value as string
+      callbackId = id as string
     })
 
     render(
@@ -83,7 +82,7 @@ describe('Search', () => {
     const searchId = 'search-id-when-testing'
     let callbackId = ''
     const handleOnFocus = jest.fn(({ target: { id } }) => {
-      callbackId = id
+      callbackId = id as string
     })
 
     render(<Search id={searchId} onFocus={handleOnFocus} />)
@@ -98,7 +97,7 @@ describe('Search', () => {
     const searchId = 'search-id-when-testing'
     let callbackId = ''
     const handleOnBlur = jest.fn(({ target: { id } }) => {
-      callbackId = id
+      callbackId = id as string
     })
 
     render(<Search id={searchId} onBlur={handleOnBlur} />)

libraries/core-react/src/Search/Search.tsx

@@ -209,12 +209,18 @@ export const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       setState({ ...state, isActive })
     }, [value, defaultValue])
 
-    const handleOnClick = () => inputRef.current.focus()
+    const handleOnClick = () => {
+      const inputEl = inputRef.current as HTMLInputElement
+      inputEl.focus()
+    }
     const handleFocus = () => setState({ ...state, isFocused: true })
     const handleBlur = () => setState({ ...state, isFocused: false })
-    const handleOnChange = (target) => setIsActive(target.value)
+    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+      setIsActive((event.target as HTMLInputElement).value)
+    }
+
     const handleOnDelete = () => {
-      const input = inputRef.current
+      const input = inputRef.current as HTMLInputElement
       const clearedValue = ''
       setReactInputValue(input, clearedValue)
       setState({ ...state, isActive: false })
@@ -223,7 +229,6 @@ export const Search = React.forwardRef<HTMLInputElement, SearchProps>(
       setState({ ...state, isActive: newValue !== '' })
 
     /** Applying props for controlled vs. uncontrolled scnarios */
-    // eslint-disable-next-line no-shadow
     const applyControllingProps: ControlledSearch = (
       props,
       value,

libraries/core-react/src/SelectionControls/Checkbox/Checkbox.tokens.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { tokens } from '@equinor/eds-tokens'
 
 const {

libraries/core-react/src/Tabs/TabList.tsx

@@ -39,7 +39,11 @@ type TabListProps = {
   variant?: Variants
 } & HTMLAttributes<HTMLDivElement>
 
-type TabChild = JSX.IntrinsicElements['button'] & ReactElement
+type TabChild = {
+  disabled?: boolean
+  index?: number
+} & JSX.IntrinsicElements['button'] &
+  ReactElement
 
 const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabsList(
   { children = [], ...props },
@@ -68,26 +72,32 @@ const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabsList(
     currentTab.current = activeTab
   }, [activeTab])
 
-  const Tabs = React.Children.map(children, (child: TabChild, index) => {
-    const tabRef =
-      index === activeTab
-        ? useCombinedRefs(child.ref, selectedTabRef)
-        : child.ref
-
-    return React.cloneElement(child, {
-      id: `${tabsId}-tab-${index + 1}`,
-      'aria-controls': `${tabsId}-panel-${index + 1}`,
-      active: index === activeTab,
-      index,
-      onClick: () => handleChange(index),
-      ref: tabRef,
-    })
-  })
+  const Tabs = React.Children.map(
+    children,
+    (child: TabChild, index: number) => {
+      const tabRef =
+        index === activeTab
+          ? useCombinedRefs(child.ref, selectedTabRef)
+          : child.ref
+
+      return React.cloneElement(child, {
+        id: `${tabsId}-tab-${index + 1}`,
+        'aria-controls': `${tabsId}-panel-${index + 1}`,
+        active: index === activeTab,
+        index,
+        onClick: () => handleChange(index),
+        ref: tabRef,
+      })
+    },
+  )
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-  const focusableChildren: number[] = Tabs.filter(
-    (child) => !child.props.disabled,
-  ).map((child) => child.props.index)
+  const focusableChildren: number[] = Tabs.filter((child: TabChild) => {
+    const childProps = child.props as TabChild
+    return !childProps.disabled
+  }).map((child: TabChild) => {
+    const childProps = child.props as TabChild
+    return childProps.index
+  })
 
   const firstFocusableChild = focusableChildren[0]
   const lastFocusableChild = focusableChildren[focusableChildren.length - 1]

libraries/core-react/src/Typography/Typography.tsx

@@ -53,7 +53,9 @@ const findTypography = (
 const findColor: (a: ColorVariants | string) => string = (
   inputColor = null,
 ): string =>
-  typeof colors[inputColor] === 'undefined' ? inputColor : colors[inputColor]
+  typeof colors[inputColor] === 'undefined'
+    ? inputColor
+    : (colors[inputColor] as string)
 
 const toVariantName = (
   variant: TypographyVariants,