diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index ec271ab6c2..dad60cd163 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -9,7 +9,7 @@ turbo.json @scaleway/front-kernel biome.json @scaleway/front-kernel eslint.config.mjs @scaleway/front-kernel pnpm-workspace.yaml @scaleway/front-kernel -svgo.config.cjs @scaleway/front-kernel +svgo.config.mjs @scaleway/front-kernel .github @scaleway/front-kernel .changeset/config.json @scaleway/front-kernel .aws @scaleway/front-kernel diff --git a/.gitignore b/.gitignore index e123c0b021..31dce8deab 100644 --- a/.gitignore +++ b/.gitignore @@ -46,3 +46,6 @@ tools/*/.turbo # typescript *.tsbuildinfo .tsbuildinfo + +# next +next-env.d.ts* diff --git a/.oxlintrc.json b/.oxlintrc.json index a5fae04383..1843d8228f 100644 --- a/.oxlintrc.json +++ b/.oxlintrc.json @@ -35,13 +35,12 @@ } ], "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 +74,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", diff --git a/eslint.config.mjs b/eslint.config.mjs index 59bc2c34c0..5d1bb4b4a1 100644 --- a/eslint.config.mjs +++ b/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,7 @@ export default [ '**/coverage/', '.storybook', 'eslint.config.mjs', + 'next-env.d.ts', ], }, { diff --git a/examples/next-login/global.d.ts b/examples/next-login/global.d.ts index a97fbda784..5774f2de0a 100644 --- a/examples/next-login/global.d.ts +++ b/examples/next-login/global.d.ts @@ -1,4 +1,4 @@ -declare module '*.svg' { +export declare module '*.svg' { const content: string export default content } diff --git a/examples/next-login/tsconfig.json b/examples/next-login/tsconfig.json index 25352e6047..0fb2803085 100644 --- a/examples/next-login/tsconfig.json +++ b/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", diff --git a/examples/next-simple/global.d.ts b/examples/next-simple/global.d.ts index a97fbda784..5774f2de0a 100644 --- a/examples/next-simple/global.d.ts +++ b/examples/next-simple/global.d.ts @@ -1,4 +1,4 @@ -declare module '*.svg' { +export declare module '*.svg' { const content: string export default content } diff --git a/examples/next-simple/tsconfig.json b/examples/next-simple/tsconfig.json index 25352e6047..a22055fcde 100644 --- a/examples/next-simple/tsconfig.json +++ b/examples/next-simple/tsconfig.json @@ -20,5 +20,6 @@ "**/*.ts", "**/*.tsx" ], + "exclude": ["node_modules"] } diff --git a/jest-axe.d.ts b/jest-axe.d.ts index 7b5fcb7cb6..d94f2d0a36 100644 --- a/jest-axe.d.ts +++ b/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, diff --git a/package.json b/package.json index 5fcc3f2bbf..18358ee51e 100644 --- a/package.json +++ b/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", diff --git a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap index 2ab18bb998..e0d32f1a94 100644 --- a/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/form/src/components/NumberInputField/__tests__/__snapshots__/index.test.tsx.snap @@ -325,7 +325,6 @@ exports[`NumberInputField > should render correctly 1`] = ` should render correctly 1`] = ` should render correctly disabled 1`] = ` should render correctly disabled 1`] = ` should trigger event onMinCrossed & onMaxCrossed 1`] should trigger event onMinCrossed & onMaxCrossed 1`] should trigger events correctly 1`] = ` should trigger events correctly 1`] = ` should render correctly notice 1`] = ` > diff --git a/packages/icons/src/components/Icon/assets/default-outline/adjustments-horizontal.svg b/packages/icons/src/components/Icon/assets/default-outline/adjustments-horizontal.svg index baf707ba03..9014cb5ac3 100644 --- a/packages/icons/src/components/Icon/assets/default-outline/adjustments-horizontal.svg +++ b/packages/icons/src/components/Icon/assets/default-outline/adjustments-horizontal.svg @@ -1,3 +1,3 @@ - + diff --git a/packages/ui/src/components/Banner/assets/default-image-small.svg b/packages/ui/src/components/Banner/assets/default-image-small.svg index 65ec1d20fb..5b8dcecbb9 100644 --- a/packages/ui/src/components/Banner/assets/default-image-small.svg +++ b/packages/ui/src/components/Banner/assets/default-image-small.svg @@ -6,12 +6,12 @@ - - - - - - + + + + + + @@ -50,28 +50,28 @@ - + - + - + - + - + - + diff --git a/packages/ui/src/components/Banner/assets/default-image.svg b/packages/ui/src/components/Banner/assets/default-image.svg index 7ed2329e74..26351a036a 100644 --- a/packages/ui/src/components/Banner/assets/default-image.svg +++ b/packages/ui/src/components/Banner/assets/default-image.svg @@ -7,12 +7,12 @@ - - - - - - + + + + + + @@ -49,16 +49,16 @@ - + - + - + @@ -130,16 +130,16 @@ - + - + - + diff --git a/packages/ui/src/components/ExpandableCard/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/ExpandableCard/__tests__/__snapshots__/index.test.tsx.snap index 770124190c..9f8dcfc310 100644 --- a/packages/ui/src/components/ExpandableCard/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/ExpandableCard/__tests__/__snapshots__/index.test.tsx.snap @@ -101,7 +101,6 @@ exports[`ExpandableCard > renders correctly with complex header 1`] = ` renders correctly with default values 1`] = ` theme.colors.primary.border}; } - ${ArrowIcon} { + ${StyledArrowIcon} { transform: rotate(180deg); } } @@ -107,11 +107,7 @@ const BaseExpandableCard = forwardRef( : undefined } > - + {typeof header === 'string' ? ( {header} diff --git a/packages/ui/src/components/LineChart/__tests__/index.test.tsx b/packages/ui/src/components/LineChart/__tests__/index.test.tsx index baf1eea966..7585be5d0f 100644 --- a/packages/ui/src/components/LineChart/__tests__/index.test.tsx +++ b/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( , ) // 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) diff --git a/packages/ui/src/components/Loader/index.tsx b/packages/ui/src/components/Loader/index.tsx index aa8cd2a603..8c4429b9b3 100644 --- a/packages/ui/src/components/Loader/index.tsx +++ b/packages/ui/src/components/Loader/index.tsx @@ -29,7 +29,7 @@ const StyledSvg = styled('svg', { type LoaderProps = { active?: boolean - color?: Color | string + color?: Color | (string & NonNullable) percentage?: number size?: number | string strokeWidth?: number @@ -37,7 +37,7 @@ type LoaderProps = { * Text is placed in center of ProgressCircle. */ text?: string - trailColor?: Color | string + trailColor?: Color | (string & NonNullable) /** * 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) }>` fill: ${({ theme, color }) => theme.colors[color as Color]?.backgroundStrong || color}; diff --git a/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap index cafbaa4f84..f0b96c08f1 100644 --- a/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/Notice/__tests__/__snapshots__/index.test.tsx.snap @@ -45,12 +45,11 @@ exports[`Notice > renders correctly with default props 1`] = ` > diff --git a/packages/ui/src/components/Notice/index.tsx b/packages/ui/src/components/Notice/index.tsx index 91acf82712..faf2215e0a 100644 --- a/packages/ui/src/components/Notice/index.tsx +++ b/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} > - + {children} ) diff --git a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap index ac9570221e..0ff3040f3d 100644 --- a/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/NumberInput/__tests__/__snapshots__/index.test.tsx.snap @@ -484,7 +484,6 @@ exports[`NumberInput > should click on center button 1`] = ` should click on center button 1`] = ` should click on min button 1`] = ` should click on min button 1`] = ` should click on plus button with a step value 1`] = ` should click on plus button with a step value 1`] = ` should click on plus button with a step value and an in-b should click on plus button with a step value and an in-b should focus input and modify value 1`] = ` should focus input and modify value 1`] = ` should focus input and modify value onMaxCrossed 1`] = ` should focus input and modify value onMaxCrossed 1`] = ` should focus input and modify value onMinCrossed 1`] = ` should focus input and modify value onMinCrossed 1`] = ` should increase and decrease input with arrow up and down should increase and decrease input with arrow up and down should increase and decrease input with arrow up and down should increase and decrease input with arrow up and down should not changed controlled value on click min button 1 should not changed controlled value on click min button 1 should renders correctly 1`] = ` should renders correctly 1`] = ` should renders correctly disabled 1`] = ` should renders correctly disabled 1`] = ` should renders correctly max value 1`] = ` should renders correctly max value 1`] = ` should renders correctly min value 1`] = ` should renders correctly min value 1`] = ` should renders correctly with error 1`] = ` should renders correctly with error 1`] = ` should renders correctly with placeholder 1`] = ` should renders correctly with placeholder 1`] = ` should renders large size 1`] = ` should renders large size 1`] = ` should renders small size 1`] = ` should renders small size 1`] = ` should use maxValue instead of defaultValue if default va should use maxValue instead of defaultValue if default va should use minValue instead of defaultValue if default va should use minValue instead of defaultValue if default va should use the defaultValue 1`] = ` should use the defaultValue 1`] = ` - @@ -414,10 +413,9 @@ export const NumberInput = ({ sentiment="primary" size="small" > - diff --git a/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap index c6206c4ccb..23dab6e680 100644 --- a/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/PasswordCheck/__tests__/__snapshots__/index.test.tsx.snap @@ -81,8 +81,7 @@ exports[`PasswordCheck > render with custom values 1`] = ` > render with custom values 1`] = ` diff --git a/packages/ui/src/components/PasswordCheck/index.tsx b/packages/ui/src/components/PasswordCheck/index.tsx index 4f0f811e8c..41401b2181 100644 --- a/packages/ui/src/components/PasswordCheck/index.tsx +++ b/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 = ({ {rules.map(rule => ( - + {rule.valid ? ( + + ) : ( + + )} + {rule.text} diff --git a/packages/ui/src/components/Popover/__stories__/Template.stories.tsx b/packages/ui/src/components/Popover/__stories__/Template.stories.tsx index bdad4b254a..31e2e4a768 100644 --- a/packages/ui/src/components/Popover/__stories__/Template.stories.tsx +++ b/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 = props => ( @@ -9,6 +9,6 @@ export const Template: StoryFn = props => ( title="Popover Title" content="This is a simple text content inside the popover. You can customize it by passing text into content property." > - + ) diff --git a/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap index 382e86a653..45e8e13a15 100644 --- a/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/SearchInput/__tests__/__snapshots__/index.test.tsx.snap @@ -1071,7 +1071,6 @@ exports[`SearchInput > renders correctly without children props 1`] = ` renders with disabled prop 1`] = ` renders with error prop 1`] = ` renders with error prop 1`] = ` class="emotion-13 emotion-14" > renders with shortcut prop > as array of string 1`] = ` renders with shortcut prop > as boolean 1`] = ` - } + prefix={} suffix={ shortcut && searchTerms.length === 0 ? ( diff --git a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap index 759568176e..6aa87ab705 100644 --- a/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/ui/src/components/TextInput/__tests__/__snapshots__/index.test.tsx.snap @@ -4150,12 +4150,11 @@ exports[`TextInput > should render correctly with notice 1`] = ` > diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9d75f35b18..a24c5432e6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -9300,7 +9300,7 @@ snapshots: '@emnapi/runtime@1.3.1': dependencies: - tslib: 2.6.2 + tslib: 2.8.1 optional: true '@emotion/babel-plugin@11.13.5': @@ -9586,7 +9586,7 @@ snapshots: '@eslint/eslintrc@3.1.0': dependencies: ajv: 6.12.6 - debug: 4.3.7 + debug: 4.4.0 espree: 10.3.0 globals: 14.0.0 ignore: 5.3.1 @@ -10373,7 +10373,7 @@ snapshots: '@sitespeed.io/tracium@0.3.3': dependencies: - debug: 4.3.7 + debug: 4.4.0 transitivePeerDependencies: - supports-color @@ -10983,7 +10983,7 @@ snapshots: '@typescript-eslint/types': 7.18.0 '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.7.2) '@typescript-eslint/visitor-keys': 7.18.0 - debug: 4.3.7 + debug: 4.4.0 eslint: 9.16.0(jiti@2.1.0) optionalDependencies: typescript: 5.7.2 @@ -11009,7 +11009,7 @@ snapshots: dependencies: '@typescript-eslint/typescript-estree': 7.18.0(typescript@5.7.2) '@typescript-eslint/utils': 7.18.0(eslint@9.16.0(jiti@2.1.0))(typescript@5.7.2) - debug: 4.3.7 + debug: 4.4.0 eslint: 9.16.0(jiti@2.1.0) ts-api-utils: 1.3.0(typescript@5.7.2) optionalDependencies: @@ -11041,7 +11041,7 @@ snapshots: dependencies: '@typescript-eslint/types': 7.18.0 '@typescript-eslint/visitor-keys': 7.18.0 - debug: 4.3.7 + debug: 4.4.0 globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.4 @@ -11056,7 +11056,7 @@ snapshots: dependencies: '@typescript-eslint/types': 8.17.0 '@typescript-eslint/visitor-keys': 8.17.0 - debug: 4.3.7 + debug: 4.4.0 fast-glob: 3.3.2 is-glob: 4.0.3 minimatch: 9.0.4 @@ -11552,7 +11552,7 @@ snapshots: ast-types@0.13.4: dependencies: - tslib: 2.6.2 + tslib: 2.8.1 ast-types@0.16.1: dependencies: @@ -12513,7 +12513,7 @@ snapshots: esbuild-register@3.5.0(esbuild@0.23.1): dependencies: - debug: 4.3.7 + debug: 4.4.0 esbuild: 0.23.1 transitivePeerDependencies: - supports-color @@ -12645,7 +12645,7 @@ snapshots: '@typescript-eslint/utils': 7.18.0(eslint@9.16.0(jiti@2.1.0))(typescript@5.7.2) eslint: 9.16.0(jiti@2.1.0) ts-api-utils: 1.3.0(typescript@5.7.2) - tslib: 2.6.2 + tslib: 2.8.1 typescript: 5.7.2 transitivePeerDependencies: - supports-color @@ -12887,7 +12887,7 @@ snapshots: extract-zip@2.0.1: dependencies: - debug: 4.3.7 + debug: 4.4.0 get-stream: 5.2.0 yauzl: 2.10.0 optionalDependencies: @@ -13106,7 +13106,7 @@ snapshots: dependencies: basic-ftp: 5.0.5 data-uri-to-buffer: 6.0.2 - debug: 4.3.7 + debug: 4.4.0 fs-extra: 11.2.0 transitivePeerDependencies: - supports-color @@ -14224,7 +14224,7 @@ snapshots: micromark@4.0.0: dependencies: '@types/debug': 4.1.12 - debug: 4.3.7 + debug: 4.4.0 decode-named-character-reference: 1.0.2 devlop: 1.1.0 micromark-core-commonmark: 2.0.1 @@ -14540,7 +14540,7 @@ snapshots: dependencies: '@tootallnate/quickjs-emscripten': 0.23.0 agent-base: 7.1.1 - debug: 4.3.7 + debug: 4.4.0 get-uri: 6.0.3 http-proxy-agent: 7.0.2 https-proxy-agent: 7.0.5 @@ -14905,7 +14905,7 @@ snapshots: proxy-agent@6.4.0: dependencies: agent-base: 7.1.1 - debug: 4.3.7 + debug: 4.4.0 http-proxy-agent: 7.0.2 https-proxy-agent: 7.0.5 lru-cache: 7.18.3 @@ -15333,7 +15333,7 @@ snapshots: rxjs@7.8.1: dependencies: - tslib: 2.6.2 + tslib: 2.8.1 sade@1.8.1: dependencies: @@ -15519,7 +15519,7 @@ snapshots: socks-proxy-agent@8.0.3: dependencies: agent-base: 7.1.1 - debug: 4.3.7 + debug: 4.4.0 socks: 2.8.3 transitivePeerDependencies: - supports-color diff --git a/svgo.config.cjs b/svgo.config.mjs similarity index 89% rename from svgo.config.cjs rename to svgo.config.mjs index 7848bbdb90..f43fb71ffc 100644 --- a/svgo.config.cjs +++ b/svgo.config.mjs @@ -1,5 +1,4 @@ -// oxlint-disable plugin-import/no-commonjs -module.exports = { +export default { plugins: [ { name: 'preset-default', diff --git a/vite.config.ts b/vite.config.ts index 69e9c1a21b..913093cb26 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -3,7 +3,7 @@ import browserslist from 'browserslist' import { resolveToEsbuildTarget } from 'esbuild-plugin-browserslist' import { readPackage } from 'read-pkg' import { defineConfig } from 'vite' -import type { UserConfig } from 'vitest/config' +import type { ViteUserConfig } from 'vitest/config' const pkg = await readPackage() @@ -21,7 +21,8 @@ const external = (id: string) => { const match = (dependency: string) => new RegExp(`^${dependency}`).test(id) const isExternal = externalPkgs.some(match) - const isBundled = pkg.bundleDependencies?.some(match) // alias of bundledDependencies package.json field array + // alias of bundledDependencies package.json field array + const isBundled = pkg.bundleDependencies?.some(match) return isExternal && !isBundled } @@ -35,7 +36,7 @@ const targets = resolveToEsbuildTarget( }, ) -export const defaultConfig: UserConfig = { +export const defaultConfig: ViteUserConfig = { build: { outDir: 'dist', target: [...targets],