chore(eslint): update config

Signed-off-by: Alexandre Philibeaux <[email protected]>

.gitignore

@@ -46,3 +46,6 @@ tools/*/.turbo
 # typescript
 *.tsbuildinfo
 .tsbuildinfo
+
+# next
+next-env.d.ts*

.oxlintrc.json

@@ -32,16 +32,22 @@
     {
       "files": ["**/__tests__/**/*.{ts,tsx}", "setup.ts"],
       "plugins": ["vitest"]
+    },
+    {
+      "files": ["svgo.config.cjs"],
+      "plugins": null,
+      "rules": {
+        "import/no-commonjs": "off"
+      }
     }
   ],
   "rules": {
-    "@typescript/no-explicit-any": "warn",
-    "@typescript-eslint/no-unused-expressions": "warn",
-    "@typescript-eslint/ban-tslint-comment": "warn",
+    "@typescript-eslint/no-unused-expressions": "error",
+    "@typescript-eslint/ban-tslint-comment": "error",
     "@typescript-eslint/consistent-indexed-object-style": "error",
     "@typescript-eslint/consistent-type-definitions": ["error", "type"],
     "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-explicit-any": "error",
     "@typescript-eslint/prefer-enum-initializers": "off",
     "@typescript-eslint/prefer-function-type": "off",
     "@typescript-eslint/prefer-literal-enum-member": "off",
@@ -75,13 +81,13 @@
     "import/namespace": "off",
     "import/no-default-export": "off",
     "import/no-duplicates": "off",
-    "import/unambiguous": "warn",
+    "import/unambiguous": "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",
     "react-perf/jsx-no-new-object-as-prop": "off",
     "react/jsx-no-useless-fragment": "off",
-    "react/iframe-missing-sandbox": "warn",
+    "react/iframe-missing-sandbox": "error",
     "react/jsx-no-target-blank": "off",
     "react/react-in-jsx-scope": "off",
     "unicorn/error-message": "off",

eslint.config.mjs

@@ -15,6 +15,8 @@ const disableRules = {
   // ---- biome rules ----
   'import/order': 'off',
   'import/no-unresolved': 'off',
+  '@stylistic/no-extra-semi': 'off',
+  '@stylistic/brace-style': 'off',
 
   // to check
   'react/no-unused-prop-types': 'off',
@@ -36,6 +38,8 @@ export default [
       '**/coverage/',
       '.storybook',
       'eslint.config.mjs',
+      'next-env.d.ts',
+      'svgo.config.cjs',
     ],
   },
   {

examples/next-advanced/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/next-login/global.d.ts

@@ -1,4 +1,4 @@
-declare module '*.svg' {
+export declare module '*.svg' {
   const content: string
   export default content
 }

examples/next-login/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/next-login/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "@scaleway/tsconfig",
   "compilerOptions": {
+    "types": ["next", "next/image-types/global"],
     "target": "es5",
     "module": "esnext",
     "jsx": "preserve",

examples/next-simple/global.d.ts

@@ -1,4 +1,4 @@
-declare module '*.svg' {
+export declare module '*.svg' {
   const content: string
   export default content
 }

examples/next-simple/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

examples/next-simple/tsconfig.json

@@ -20,5 +20,6 @@
     "**/*.ts",
     "**/*.tsx"
   ],
+
   "exclude": ["node_modules"]
 }

jest-axe.d.ts

@@ -2,7 +2,7 @@
 // because `jest-axe` depends on `@types/jest`, which we don't want
 // because we use `@jest/globals`
 
-declare module 'jest-axe' {
+export declare module 'jest-axe' {
   import type {
     AxeResults,
     ImpactValue,

package.json

@@ -27,8 +27,10 @@
     "format": "biome check --linter-enabled=false --write .",
     "format:check": "biome check --linter-enabled=false --verbose .",
     "format:ci": "biome ci --linter-enabled=false .",
-    "lint:fix": "pnpm run lint --fix",
     "lint": "eslint --report-unused-disable-directives --cache .",
+    "lint:fix": "pnpm run lint --fix",
+    "oxc": "oxlint -c .oxlintrc.json",
+    "oxc:fix": "pnpm run oxlint --fix",
     "prepare": "husky",
     "tokens:update": "node ./scripts/figma-synchronise-tokens.mjs && pnpm run format packages/themes/src/themes/console",
     "icons:update": "tsx ./scripts/generate-icons-file.ts && biome format --write packages/icons",
@@ -108,7 +110,7 @@
     "@eslint/compat": "1.2.4",
     "@eslint/eslintrc": "3.2.0",
     "@manypkg/cli": "0.23.0",
-    "@scaleway/eslint-config-react": "5.2.0",
+    "@scaleway/eslint-config-react": "4.0.9",
     "@scaleway/tsconfig": "1.1.1",
     "@size-limit/file": "11.1.6",
     "@size-limit/preset-big-lib": "11.1.6",

packages/ui/src/components/ExpandableCard/index.tsx

@@ -1,11 +1,11 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import { ArrowDownIcon } from '@ultraviolet/icons'
 import type { ForwardedRef, ReactNode } from 'react'
 import { forwardRef, useRef } from 'react'
 import type { XOR } from '../../types'
 import { ExpandableCardTitle } from './components/Title'
 
-const ArrowIcon = styled(Icon)``
+const StyledArrowIcon = styled(ArrowDownIcon)``
 
 const StyledSummary = styled.summary`
   display: flex;
@@ -39,7 +39,7 @@ const StyledDetails = styled.details`
       border-color: ${({ theme }) => theme.colors.primary.border};
     }
 
-   ${ArrowIcon} {
+   ${StyledArrowIcon} {
       transform: rotate(180deg);
     }
   }
@@ -107,11 +107,7 @@ const BaseExpandableCard = forwardRef(
               : undefined
           }
         >
-          <ArrowIcon
-            sentiment="neutral"
-            disabled={disabled}
-            name="arrow-down"
-          />
+          <StyledArrowIcon sentiment="neutral" disabled={disabled} />
           {typeof header === 'string' ? (
             <ExpandableCardTitle size={size} disabled={disabled}>
               {header}

packages/ui/src/components/LineChart/__tests__/index.test.tsx

@@ -76,12 +76,11 @@ describe('LineChart', () => {
     ))
 
   test.skip('renders correctly when chart is hovered', async () => {
-    const { asFragment, debug } = renderWithTheme(
+    const { asFragment } = renderWithTheme(
       <LineChart data={lineChartData} withLegend xScale={{ type: 'linear' }} />,
     )
     // eslint-disable-next-line testing-library/no-node-access
     const line = document.querySelector('svg[role="img"] g path')
-    debug()
     if (!line) throw new Error('LineChart line path not found')
     await userEvent.unhover(line)
     await userEvent.hover(line)

packages/ui/src/components/Loader/index.tsx

@@ -29,15 +29,15 @@ const StyledSvg = styled('svg', {
 
 type LoaderProps = {
   active?: boolean
-  color?: Color | string
+  color?: Color | (string & NonNullable<unknown>)
   percentage?: number
   size?: number | string
   strokeWidth?: number
   /**
    * Text is placed in center of ProgressCircle.
    */
   text?: string
-  trailColor?: Color | string
+  trailColor?: Color | (string & NonNullable<unknown>)
   /**
    * Label should be defined for accessibility, to indicate what is loading
    */
@@ -46,7 +46,7 @@ type LoaderProps = {
 
 const Text = styled('text', {
   shouldForwardProp: prop => !['color'].includes(prop),
-})<{ color: Color | string }>`
+})<{ color: Color | (string & NonNullable<unknown>) }>`
   fill: ${({ theme, color }) =>
     theme.colors[color as Color]?.backgroundStrong || color};
 

packages/ui/src/components/Notice/index.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import { InformationOutlineIcon } from '@ultraviolet/icons'
 import type { ReactNode } from 'react'
 import { Text } from '../Text'
 
@@ -31,12 +31,7 @@ export const Notice = ({
     data-testid={dataTestId}
     className={className}
   >
-    <Icon
-      name="information-outline"
-      size={16}
-      color="neutral"
-      prominence="weak"
-    />
+    <InformationOutlineIcon size={16} sentiment="neutral" prominence="weak" />
     {children}
   </StyledSpan>
 )

packages/ui/src/components/NumberInput/index.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import { MinusIcon, PlusIcon } from '@ultraviolet/icons'
 import type {
   ChangeEventHandler,
   FocusEventHandler,
@@ -362,10 +362,9 @@ export const NumberInput = ({
               sentiment="primary"
               size="small"
             >
-              <Icon
-                name="minus"
+              <MinusIcon
                 size={iconSizes[size]}
-                color="primary"
+                sentiment="primary"
                 disabled={isMinusDisabled}
               />
             </StyledSelectButton>
@@ -414,10 +413,9 @@ export const NumberInput = ({
               sentiment="primary"
               size="small"
             >
-              <Icon
-                name="plus"
+              <PlusIcon
                 size={iconSizes[size]}
-                color="primary"
+                sentiment="primary"
                 disabled={isPlusDisabled}
               />
             </StyledSelectButton>

packages/ui/src/components/PasswordCheck/index.tsx

@@ -1,5 +1,8 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import {
+  CheckCircleOutlineIcon,
+  CloseCircleOutlineIcon,
+} from '@ultraviolet/icons'
 import { Stack } from '../Stack'
 import { Text } from '../Text'
 
@@ -37,12 +40,20 @@ export const PasswordCheck = ({
   <PasswordCheckContainer className={className} data-testid={dataTestId}>
     {rules.map(rule => (
       <Stack direction="row" gap={1} alignItems="center" key={rule.name}>
-        <Icon
-          name={rule.valid ? 'checkbox-circle-outline' : 'close-circle-outline'}
-          color={rule.valid ? 'success' : 'neutral'}
-          prominence="weak"
-          size={20}
-        />
+        {rule.valid ? (
+          <CheckCircleOutlineIcon
+            sentiment="success"
+            prominence="weak"
+            size={20}
+          />
+        ) : (
+          <CloseCircleOutlineIcon
+            sentiment="neutral"
+            prominence="weak"
+            size={20}
+          />
+        )}
+
         <Text as="p" variant="bodySmall">
           {rule.text}
         </Text>

packages/ui/src/components/Popover/__stories__/Template.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryFn } from '@storybook/react'
-import { Icon } from '@ultraviolet/icons/legacy'
+import { HelpCircleOutlineIcon } from '@ultraviolet/icons'
 import { Popover } from '..'
 
 export const Template: StoryFn<typeof Popover> = props => (
@@ -9,6 +9,6 @@ export const Template: StoryFn<typeof Popover> = props => (
     title="Popover Title"
     content="This is a simple text content inside the popover. You can customize it by passing text into content property."
   >
-    <Icon name="help-circle-outline" size={24} variant="outlined" />
+    <HelpCircleOutlineIcon size={24} />
   </Popover>
 )

packages/ui/src/components/SearchInput/index.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { Icon } from '@ultraviolet/icons/legacy'
+import { SearchIcon } from '@ultraviolet/icons'
 import type { Ref } from 'react'
 import {
   forwardRef,
@@ -276,9 +276,7 @@ export const SearchInput = forwardRef(
         >
           <StyledTextInputV2
             ref={innerSearchInputRef}
-            prefix={
-              <Icon name="search" disabled={disabled} sentiment="neutral" />
-            }
+            prefix={<SearchIcon disabled={disabled} sentiment="neutral" />}
             suffix={
               shortcut && searchTerms.length === 0 ? (
                 <KeyGroup disabled={disabled} keys={keys} />