fix: new oxc rules

DorianMaliszewski · DorianMaliszewski · commit df1473eb731b · 2025-07-15T10:38:35.000+02:00
diff --git a/.oxlintrc.json b/.oxlintrc.json
@@ -11,12 +11,10 @@
   },
   "plugins": [
     "import",
-    "n",
+    "eslint",
     "node",
     "react-perf",
     "react",
-    "security",
-    "tree_shaking",
     "typescript",
     "unicorn"
   ],
@@ -83,6 +81,7 @@
     "import/unambiguous": "off",
     "import/exports-last": "off",
     "import/no-anonymous-default-export": "off",
+    "import/group-exports": "off",
     "react-perf/jsx-no-jsx-as-prop": "off",
     "react-perf/jsx-no-new-array-as-prop": "off",
     "react-perf/jsx-no-new-function-as-prop": "off",
@@ -122,11 +121,13 @@
     "unicorn/prefer-code-point": "off",
     "unicorn/prefer-dom-node-append": "off",
     "unicorn/prefer-dom-node-remove": "off",
+    "unicorn/prefer-object-from-entries": "off",
     "unicorn/prefer-logical-operator-over-ternary": "off",
     "unicorn/prefer-node-protocol": "off",
     "unicorn/prefer-query-selector": "off",
     "unicorn/prefer-string-replace-all": "off",
-    "unicorn/prefer-string-slice": "off"
+    "unicorn/prefer-string-slice": "off",
+    "unicorn/prefer-global-this": "off"
   },
   "settings": {
     "jsx-a11y": {
diff --git a/e2e/App.tsx b/e2e/App.tsx
@@ -1,4 +1,5 @@
 import { Global, ThemeProvider } from '@emotion/react'
+// oxlint-disable-next-line import/no-unassigned-import
 import '@ultraviolet/fonts/fonts.css'
 import { consoleLightTheme } from '@ultraviolet/themes'
 import { Text, normalize } from '@ultraviolet/ui'
diff --git a/examples/next-app-router/app/GlobalStyles.tsx b/examples/next-app-router/app/GlobalStyles.tsx
@@ -2,6 +2,7 @@
 
 import { Global, css } from '@emotion/react'
 import { normalize } from '@ultraviolet/ui'
+// oxlint-disable-next-line import/no-unassigned-import
 import '@ultraviolet/fonts/fonts.css'
 
 const styles = css`
diff --git a/examples/next-app-router/app/layout.tsx b/examples/next-app-router/app/layout.tsx
@@ -1,8 +1,9 @@
 import type { Metadata } from 'next'
+// oxlint-disable-next-line import/no-unassigned-import
 import './globals.css'
 import { consoleLightTheme } from '@ultraviolet/themes'
 import { ThemeRegistry } from '@ultraviolet/ui'
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
 import { GlobalStyles } from './GlobalStyles'
 
 export const metadata: Metadata = {
diff --git a/examples/next-app-router/emotion.d.ts b/examples/next-app-router/emotion.d.ts
@@ -1,5 +1,5 @@
 import '@emotion/react'
-import { consoleLightTheme } from '@ultraviolet/themes'
+import type { consoleLightTheme } from '@ultraviolet/themes'
 
 type CustomTheme = typeof consoleLightTheme
 
diff --git a/examples/next/src/constants.ts b/examples/next/src/constants.ts
@@ -1,4 +1,4 @@
-import { FormErrors } from '@ultraviolet/form'
+import type { FormErrors } from '@ultraviolet/form'
 export const APP_MAX_WIDTH = 1140
 
 export const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i
diff --git a/examples/next/src/pages/_app.tsx b/examples/next/src/pages/_app.tsx
@@ -6,6 +6,7 @@ import Footer from '../components/Footer'
 import GlobalStyle from '../components/GlobalStyle'
 import Head from '../components/Head'
 import Header from '../components/Header'
+// oxlint-disable-next-line import/no-unassigned-import
 import '@ultraviolet/fonts/fonts.css'
 
 type Themes = 'light' | 'dark'
diff --git a/packages/form/src/components/RadioField/index.tsx b/packages/form/src/components/RadioField/index.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { Radio } from '@ultraviolet/ui'
-import { type ComponentProps, useMemo } from 'react'
+import type { ComponentProps } from 'react'
+import { useMemo } from 'react'
 import type { FieldPath, FieldValues } from 'react-hook-form'
 import { useController } from 'react-hook-form'
 import { useErrors } from '../../providers'
diff --git a/packages/form/src/components/SelectInputFieldV2/index.tsx b/packages/form/src/components/SelectInputFieldV2/index.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { SelectInputV2 } from '@ultraviolet/ui'
-import { type ComponentProps, useCallback } from 'react'
+import type { ComponentProps } from 'react'
+import { useCallback } from 'react'
 import type { FieldPath, FieldValues, PathValue } from 'react-hook-form'
 import { useController } from 'react-hook-form'
 import { useErrors } from '../../providers'
diff --git a/packages/form/src/components/SliderField/index.tsx b/packages/form/src/components/SliderField/index.tsx
@@ -1,12 +1,8 @@
 'use client'
 
 import { Slider } from '@ultraviolet/ui'
-import {
-  type ComponentProps,
-  type FocusEvent,
-  type ReactNode,
-  useMemo,
-} from 'react'
+import type { ComponentProps, FocusEvent, ReactNode } from 'react'
+import { useMemo } from 'react'
 import { useController } from 'react-hook-form'
 import type { FieldPath, FieldValues, Path, PathValue } from 'react-hook-form'
 import { useErrors } from '../../providers'
diff --git a/packages/plus/src/components/EstimateCost/Components/Region.tsx b/packages/plus/src/components/EstimateCost/Components/Region.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import styled from '@emotion/styled'
-import { type ComponentProps, type ReactNode, memo } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
+import { memo } from 'react'
 import { useEstimateCost } from '../EstimateCostProvider'
 import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types'
 import { Item } from './Item'
diff --git a/packages/plus/src/components/EstimateCost/Components/Regular.tsx b/packages/plus/src/components/EstimateCost/Components/Regular.tsx
@@ -2,7 +2,8 @@
 
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
-import { type ReactNode, memo } from 'react'
+import type { ReactNode } from 'react'
+import { memo } from 'react'
 import { useOverlay } from '../OverlayContext'
 
 type RegularProps = {
diff --git a/packages/plus/src/components/EstimateCost/Components/Strong.tsx b/packages/plus/src/components/EstimateCost/Components/Strong.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import styled from '@emotion/styled'
-import { type ReactNode, memo } from 'react'
+import type { ReactNode } from 'react'
+import { memo } from 'react'
 import { Regular } from './Regular'
 
 type StrongProps = {
diff --git a/packages/plus/src/components/Navigation/NavigationContent.tsx b/packages/plus/src/components/Navigation/NavigationContent.tsx
@@ -185,11 +185,12 @@ export const NavigationContent = ({
       document.addEventListener('mousemove', mouseMove)
       window.addEventListener('mouseup', mouseup)
     }
+    const sliderRefCurrent = sliderRef.current
 
-    sliderRef.current?.addEventListener('mousedown', mousedown)
+    sliderRefCurrent?.addEventListener('mousedown', mousedown)
 
     return () => {
-      sliderRef.current?.removeEventListener('mousedown', mousedown)
+      sliderRefCurrent?.removeEventListener('mousedown', mousedown)
     }
   }, [
     expanded,
diff --git a/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx b/packages/plus/src/components/Navigation/__stories__/Playground.stories.tsx
@@ -11,7 +11,8 @@ import {
   UseCaseCategoryIcon,
 } from '@ultraviolet/icons/category'
 import { Stack, fadeIn, fadeOut } from '@ultraviolet/ui'
-import { type ComponentProps, useCallback, useEffect, useState } from 'react'
+import type { ComponentProps } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { Navigation, NavigationProvider, useNavigation } from '..'
 import logoSmall from './assets/logo-small.svg'
 import logo from './assets/logo.svg'
diff --git a/packages/plus/src/components/Navigation/components/Item.tsx b/packages/plus/src/components/Navigation/components/Item.tsx
@@ -396,6 +396,7 @@ export const Item = memo(
       if (type !== 'pinnedGroup' && pinnedFeature) {
         registerItem({ [id]: { label, active, onToggle, onClickPinUnpin } })
       }
+      // oxlint-disable-next-line react/exhaustive-deps
     }, [active, id, label, registerItem])
 
     const [internalExpanded, onToggleExpand] = useReducer(
diff --git a/packages/plus/src/components/SteppedListCard/__stories__/OnClickHide.stories.tsx b/packages/plus/src/components/SteppedListCard/__stories__/OnClickHide.stories.tsx
@@ -3,7 +3,8 @@ import styled from '@emotion/styled'
 import type { StoryFn } from '@storybook/react'
 import { blockStorageWire } from '@ultraviolet/illustrations/products/blockStorage'
 import { Button, Expandable, Stack, Text } from '@ultraviolet/ui'
-import { type ComponentProps, useState } from 'react'
+import type { ComponentProps } from 'react'
+import { useState } from 'react'
 import { SteppedListCard } from '../SteppedListCard'
 
 const StyledImage = styled.img`
diff --git a/packages/ui/src/components/AvatarV2/index.tsx b/packages/ui/src/components/AvatarV2/index.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import { type Theme, css } from '@emotion/react'
+import type { Theme } from '@emotion/react'
+import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { UploadIcon } from '@ultraviolet/icons'
 import { Icon } from '@ultraviolet/icons/legacy'
diff --git a/packages/ui/src/components/Breadcrumbs/__stories__/Interactive.stories.tsx b/packages/ui/src/components/Breadcrumbs/__stories__/Interactive.stories.tsx
@@ -1,10 +1,6 @@
 import type { StoryFn } from '@storybook/react'
-import {
-  type ComponentProps,
-  type MouseEvent,
-  useCallback,
-  useState,
-} from 'react'
+import type { ComponentProps, MouseEvent } from 'react'
+import { useCallback, useState } from 'react'
 import { Breadcrumbs } from '..'
 import { Button } from '../../Button'
 import { Separator } from '../../Separator'
diff --git a/packages/ui/src/components/Breadcrumbs/__stories__/OnClick.stories.tsx b/packages/ui/src/components/Breadcrumbs/__stories__/OnClick.stories.tsx
@@ -1,5 +1,6 @@
 import type { StoryFn } from '@storybook/react'
-import { type ComponentProps, useCallback, useState } from 'react'
+import type { ComponentProps } from 'react'
+import { useCallback, useState } from 'react'
 import { Breadcrumbs } from '..'
 import { Button } from '../../Button'
 import { Separator } from '../../Separator'
diff --git a/packages/ui/src/components/CheckboxGroup/index.tsx b/packages/ui/src/components/CheckboxGroup/index.tsx
@@ -2,14 +2,8 @@
 
 import styled from '@emotion/styled'
 import { AsteriskIcon } from '@ultraviolet/icons'
-import {
-  type ComponentProps,
-  type InputHTMLAttributes,
-  type ReactNode,
-  createContext,
-  useContext,
-  useMemo,
-} from 'react'
+import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import { Checkbox } from '../Checkbox'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
diff --git a/packages/ui/src/components/Chip/index.tsx b/packages/ui/src/components/Chip/index.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import styled from '@emotion/styled'
-import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import type { ReactNode } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { ChipContext } from './ChipContext'
diff --git a/packages/ui/src/components/DateInput/index.tsx b/packages/ui/src/components/DateInput/index.tsx
@@ -9,7 +9,8 @@ import { Card } from '../Card'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 import { TextInputV2 } from '../TextInputV2'
-import { type ContextProps, DateInputContext } from './Context'
+import type { ContextProps } from './Context'
+import { DateInputContext } from './Context'
 import { CalendarContent } from './components/CalendarContent'
 import { CalendarPopup } from './components/Popup'
 import { formatValue, styleCalendarContainer } from './helpers'
@@ -220,6 +221,7 @@ export const DateInput = <IsRange extends undefined | boolean>({
         end: endDate ?? computedRange.end,
       })
     }
+    // oxlint-disable-next-line react/exhaustive-deps
   }, [endDate, startDate, value])
 
   const manageOnChange = (event: ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/ui/src/components/Dialog/index.tsx b/packages/ui/src/components/Dialog/index.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import styled from '@emotion/styled'
-import { type ComponentProps, useMemo } from 'react'
+import type { ComponentProps } from 'react'
+import { useMemo } from 'react'
 import { Bullet } from '../Bullet'
 import { Modal } from '../Modal'
 import { Text } from '../Text'
diff --git a/packages/ui/src/components/Drawer/index.tsx b/packages/ui/src/components/Drawer/index.tsx
@@ -3,11 +3,13 @@
 import { css, keyframes } from '@emotion/react'
 import styled from '@emotion/styled'
 import type { ComponentProps } from 'react'
-import { Modal, type ModalProps } from '../Modal'
+import type { ModalProps } from '../Modal'
+import { Modal } from '../Modal'
 import type { ModalState } from '../Modal/types'
 import { Separator } from '../Separator'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
+// oxlint-disable-next-line import/no-unassigned-import
 import './style.css'
 
 export const SIZES = {
diff --git a/packages/ui/src/components/List/ListContext.tsx b/packages/ui/src/components/List/ListContext.tsx
@@ -314,6 +314,7 @@ export const ListProvider = ({
     return () => {
       handlers.forEach(cleanup => cleanup())
     }
+    // oxlint-disable-next-line react/exhaustive-deps
   }, [lastCheckedCheckbox, selectRows])
 
   useEffect(() => {
diff --git a/packages/ui/src/components/List/index.tsx b/packages/ui/src/components/List/index.tsx
@@ -60,6 +60,7 @@ const TableContainer = ({ children }: { children: ReactNode }) => {
       setRefList([])
       setChildrenMemory(Children.toArray(children))
     }
+    // oxlint-disable-next-line react/exhaustive-deps
   }, [children, setRefList])
 
   return <TableContainerStyle>{children}</TableContainerStyle>
diff --git a/packages/ui/src/components/MenuV2/components/Group.tsx b/packages/ui/src/components/MenuV2/components/Group.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import styled from '@emotion/styled'
-import { Children, type ReactNode } from 'react'
+import type { ReactNode } from 'react'
+import { Children } from 'react'
 import { Stack } from '../../Stack'
 import { Text } from '../../Text'
 
diff --git a/packages/ui/src/components/MenuV2/helpers.ts b/packages/ui/src/components/MenuV2/helpers.ts
@@ -1,4 +1,5 @@
-import { Children, type ReactNode, cloneElement, isValidElement } from 'react'
+import type { ReactNode } from 'react'
+import { Children, cloneElement, isValidElement } from 'react'
 
 /**
  * Search inside a children (React Element) recursively until a result is found
diff --git a/packages/ui/src/components/Popup/index.tsx b/packages/ui/src/components/Popup/index.tsx
@@ -259,6 +259,7 @@ export const Popup = forwardRef(
       }
 
       return null
+      // oxlint-disable-next-line react/exhaustive-deps
     }, [portalTarget, role, childrenRef.current])
 
     // There are some issue when mixing animation and maxHeight on some browsers, so we disable animation if maxHeight is set.
@@ -433,6 +434,7 @@ export const Popup = forwardRef(
       if (visibleInDom && innerPopupRef.current) {
         innerPopupRef.current.style.opacity = '1'
       }
+      // oxlint-disable-next-line react/exhaustive-deps
     }, [positions])
 
     /**
diff --git a/packages/ui/src/components/RadioGroup/index.tsx b/packages/ui/src/components/RadioGroup/index.tsx
@@ -2,14 +2,8 @@
 
 import styled from '@emotion/styled'
 import { AsteriskIcon } from '@ultraviolet/icons'
-import {
-  type ComponentProps,
-  type InputHTMLAttributes,
-  type ReactNode,
-  createContext,
-  useContext,
-  useMemo,
-} from 'react'
+import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import { Radio } from '../Radio'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
diff --git a/packages/ui/src/components/SelectInputV2/Dropdown.tsx b/packages/ui/src/components/SelectInputV2/Dropdown.tsx
@@ -19,7 +19,8 @@ import { Text } from '../Text'
 import { DisplayOption } from './DropdownOption'
 import { SearchBarDropdown } from './SearchBarDropdown'
 import { useSelectInput } from './SelectInputProvider'
-import { type DataType, INPUT_SIZE_HEIGHT, type OptionType } from './types'
+import type { DataType, OptionType } from './types'
+import { INPUT_SIZE_HEIGHT } from './types'
 
 const DROPDOWN_MAX_HEIGHT = 256
 
@@ -262,11 +263,11 @@ const handleKeyDown = (
         setDefaultSearch(null)
       }
     } else {
-      const closestOption = [...options].filter(option =>
+      const closestOption = [...options].find(option =>
         option.searchText
           ? option.searchText.toLocaleLowerCase().startsWith(currentSearch)
           : option.value.toLocaleLowerCase().startsWith(currentSearch),
-      )[0]
+      )
       if (closestOption) {
         setDefaultSearch(closestOption.searchText ?? closestOption.value)
       } else {
@@ -721,6 +722,7 @@ export const Dropdown = ({
         } else window.scrollBy({ top: overflow, behavior: 'smooth' })
       }
     }
+    // oxlint-disable-next-line react/exhaustive-deps
   }, [isDropdownVisible, refSelect, size, ref.current])
 
   const resizeDropdown = useCallback(() => {
diff --git a/packages/ui/src/components/SelectInputV2/SearchBarDropdown.tsx b/packages/ui/src/components/SelectInputV2/SearchBarDropdown.tsx
diff --git a/packages/ui/src/components/SelectableCardGroup/index.tsx b/packages/ui/src/components/SelectableCardGroup/index.tsx
diff --git a/packages/ui/src/components/SelectableCardOptionGroup/components/Option.tsx b/packages/ui/src/components/SelectableCardOptionGroup/components/Option.tsx
diff --git a/packages/ui/src/components/Slider/index.tsx b/packages/ui/src/components/Slider/index.tsx
diff --git a/packages/ui/src/components/Table/index.tsx b/packages/ui/src/components/Table/index.tsx
diff --git a/packages/ui/src/components/TimeInputV2/__tests__/helper.test.ts b/packages/ui/src/components/TimeInputV2/__tests__/helper.test.ts
diff --git a/packages/ui/src/components/TimeInputV2/index.tsx b/packages/ui/src/components/TimeInputV2/index.tsx
diff --git a/packages/ui/src/components/ToggleGroup/index.tsx b/packages/ui/src/components/ToggleGroup/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { Global, ThemeProvider } from '@emotion/react'`
	`2`	`+// oxlint-disable-next-line import/no-unassigned-import`
`2`	`3`	`import '@ultraviolet/fonts/fonts.css'`
`3`	`4`	`import { consoleLightTheme } from '@ultraviolet/themes'`
`4`	`5`	`import { Text, normalize } from '@ultraviolet/ui'`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { FormErrors } from '@ultraviolet/form'`
	`1`	`+import type { FormErrors } from '@ultraviolet/form'`
`2`	`2`	`export const APP_MAX_WIDTH = 1140`
`3`	`3`
`4`	`4`	`export const EMAIL_REGEX = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i`