diff --git a/.changeset/tender-ties-swim.md b/.changeset/tender-ties-swim.md new file mode 100644 index 0000000000..a18160007b --- /dev/null +++ b/.changeset/tender-ties-swim.md @@ -0,0 +1,6 @@ +--- +'@digdir/designsystemet-react': patch +'@digdir/designsystemet': patch +--- + +Changed linter and formatter from eslint to biomejs diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index 6f0b5f0747..0000000000 --- a/.eslintignore +++ /dev/null @@ -1,7 +0,0 @@ -node_modules -**/*.d.ts* -dist/ -packages/theme/brand/**/* -packages/react-old/**/* -tsc-build/ -.storybook diff --git a/.eslintrc.cjs b/.eslintrc.cjs deleted file mode 100644 index eeec9cf21a..0000000000 --- a/.eslintrc.cjs +++ /dev/null @@ -1,99 +0,0 @@ -module.exports = { - root: true, - env: { - node: true, - browser: true, - es6: true, - }, - extends: [ - 'eslint:recommended', - 'plugin:import/recommended', - 'plugin:jsx-a11y/recommended', - 'plugin:react/recommended', - 'plugin:react-hooks/recommended', - 'plugin:react/jsx-runtime', - 'plugin:storybook/recommended', - 'prettier', - ], - plugins: ['import', 'react', 'jsx-a11y', 'react-compiler'], - overrides: [ - { - // Typescript - files: ['**/*.ts?(x)'], - extends: [ - 'plugin:import/typescript', - 'plugin:@typescript-eslint/recommended', - 'plugin:@typescript-eslint/recommended-requiring-type-checking', - ], - parser: '@typescript-eslint/parser', - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - tsconfigRootDir: __dirname, - ecmaFeatures: { jsx: true }, - project: [ - './tsconfig.json', - './packages/*/tsconfig.json', - './tsconfig.node.json', - ], - }, - rules: { - '@typescript-eslint/consistent-type-exports': 'warn', - '@typescript-eslint/consistent-type-imports': 'warn', - 'prefer-const': 'warn', - 'react-compiler/react-compiler': 'warn', - }, - }, - { - files: ['apps/storefront/**/*', 'apps/dev/**/*', 'apps/theme/**/*'], - extends: ['plugin:@next/next/recommended'], - rules: { - '@next/next/no-img-element': 'off', - }, - }, - ], - rules: { - 'arrow-body-style': 'off', - 'prefer-arrow-callback': 'off', - // Disabled because we use Typescript types for props - 'react/prop-types': ['off'], - 'react/jsx-no-bind': 'off', - 'react/display-name': 'off', - 'import/no-unresolved': 'error', - 'import/namespace': ['error', { allowComputed: true }], - 'import/no-named-as-default': 'off', - 'jsx-a11y/no-autofocus': 'off', - 'import/order': [ - 'warn', - { - 'newlines-between': 'always', - groups: [ - 'builtin', - 'external', - 'internal', - 'parent', - 'sibling', - 'index', - ], - }, - ], - }, - settings: { - react: { - version: '18', - }, - 'import/parsers': { - '@typescript-eslint/parser': ['.ts', '.tsx'], - }, - 'import/resolver': { - typescript: { - alwaysTryTypes: true, - project: [ - /* all tsconfig files */ - 'tsconfig.json', - './**/tsconfig.json', - ], - }, - }, - }, -}; diff --git a/.github/workflows/check-storefront.yml b/.github/workflows/check-storefront.yml index 3d3a3f2fc8..650214d17a 100644 --- a/.github/workflows/check-storefront.yml +++ b/.github/workflows/check-storefront.yml @@ -1,15 +1,12 @@ -name: Checks Storefront +name: Build Storefront on: workflow_dispatch: pull_request: paths: - 'apps/storefront/**' - push: - paths: - - 'apps/storefront/**' jobs: checks: - name: Builds, lints and tests code + name: Build & test runs-on: ubuntu-latest steps: - name: Checkout repository @@ -27,9 +24,4 @@ jobs: run: yarn build:storefront - name: Types run: yarn types:storefront - - name: Lint Code - run: yarn lint ./apps/storefront - - name: Lint CSS - run: yarn lint-style ./apps/storefront/**/*.css - - name: Test - run: yarn test + diff --git a/.github/workflows/checks-packages.yml b/.github/workflows/checks-packages.yml index 0b51322079..ee1c50af25 100644 --- a/.github/workflows/checks-packages.yml +++ b/.github/workflows/checks-packages.yml @@ -1,16 +1,12 @@ -name: Checks Packages +name: Build Packages on: workflow_dispatch: pull_request: paths: - 'packages/**' - - '*.*js' - push: - paths: - - 'packages/**' jobs: checks: - name: Builds, lints and tests code + name: Build & test runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -19,9 +15,5 @@ jobs: run: yarn build - name: Types run: yarn types:react - - name: Lint Code - run: yarn lint:all - - name: Lint CSS - run: yarn lint-style - name: Test run: yarn test diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml new file mode 100644 index 0000000000..aca0f9d322 --- /dev/null +++ b/.github/workflows/checks.yml @@ -0,0 +1,20 @@ +name: Checks +on: + workflow_dispatch: + pull_request: + paths: + - 'packages/**' + - 'apps/**' + - 'biome.jsonc' +jobs: + checks: + name: Lint + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: ./.github/actions/gh-setup + - name: Biome CI + run: yarn biome ci . + - name: Lint CSS + run: yarn lint-style + diff --git a/.vscode/extensions.json b/.vscode/extensions.json index 2a69d57907..e3b356a79b 100644 --- a/.vscode/extensions.json +++ b/.vscode/extensions.json @@ -1,6 +1,5 @@ { "recommendations": [ - "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "unifiedjs.vscode-mdx", "christian-kohler.npm-intellisense", @@ -22,6 +21,7 @@ "editorconfig.editorconfig", "zignd.html-css-class-completion", "streetsidesoftware.code-spell-checker", - "streetsidesoftware.code-spell-checker-norwegian-bokmal" + "streetsidesoftware.code-spell-checker-norwegian-bokmal", + "biomejs.biome" ] } diff --git a/.vscode/settings.json b/.vscode/settings.json index 3166d77fd4..8cf33c4ad3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,15 @@ { "git.rebaseWhenSync": true, "git.autofetch": true, - "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "quickfix.biome": "explicit", + "source.organizeImports.biome": "explicit" + }, + "editor.defaultFormatter": "biomejs.biome", + "[css]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + }, "prettier.prettierPath": "./node_modules/prettier", "typescript.tsdk": "node_modules/typescript/lib", "typescript.enablePromptUseWorkspaceTsdk": true, @@ -11,22 +18,5 @@ "packages/theme/brand/digdir/typography/primary.css", "packages/theme/brand/digdir/semantic.css" ], - "[ignore]": { - "editor.defaultFormatter": "foxundermoon.shell-format" - }, - "eslint.probe": [ - "javascript", - "javascriptreact", - "typescript", - "typescriptreact", - "html", - "vue", - "markdown", - "mdx" - ], - "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}", - "cSpell.words": ["altinn", "brreg", "designsystemet", "digdir"], - "cSpell.language": "en,nb", - "cSpell.ignorePaths": ["**/node_modules/**", "**/package.json", "yarn.lock"], - "cSpell.enabledLanguageIds": ["markdown", "plaintext"] + "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}" } diff --git a/apps/_components/src/ClipboardButton/ClipboardButton.tsx b/apps/_components/src/ClipboardButton/ClipboardButton.tsx index ed1d552f74..52d4b07a1b 100644 --- a/apps/_components/src/ClipboardButton/ClipboardButton.tsx +++ b/apps/_components/src/ClipboardButton/ClipboardButton.tsx @@ -1,7 +1,7 @@ 'use client'; -import { useState } from 'react'; +import { Button, Tooltip } from '@digdir/designsystemet-react'; import { ClipboardIcon } from '@navikt/aksel-icons'; -import { Tooltip, Button } from '@digdir/designsystemet-react'; +import { useState } from 'react'; import classes from './ClipboardButton.module.css'; diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx index 1811ee75ec..48940f5065 100644 --- a/apps/_components/src/CodeSnippet/CodeSnippet.tsx +++ b/apps/_components/src/CodeSnippet/CodeSnippet.tsx @@ -1,17 +1,17 @@ 'use client'; -import { useEffect, useState } from 'react'; +import { Button, Tooltip } from '@digdir/designsystemet-react'; import { FilesIcon } from '@navikt/aksel-icons'; -import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; -import { format } from 'prettier/standalone.js'; -import * as prettierMarkdown from 'prettier/plugins/markdown.js'; +import * as prettierBabel from 'prettier/parser-babel'; +import * as prettierEstree from 'prettier/plugins/estree'; import * as prettierHtml from 'prettier/plugins/html.js'; +import * as prettierMarkdown from 'prettier/plugins/markdown.js'; import * as prettierCSS from 'prettier/plugins/postcss.js'; import * as prettierTypescript from 'prettier/plugins/typescript.js'; -import * as prettierEstree from 'prettier/plugins/estree'; -import * as prettierBabel from 'prettier/parser-babel'; +import { format } from 'prettier/standalone.js'; +import { useEffect, useState } from 'react'; +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; import { nightOwl } from 'react-syntax-highlighter/dist/esm/styles/prism'; -import { Button, Tooltip } from '@digdir/designsystemet-react'; import classes from './CodeSnippet.module.css'; @@ -67,10 +67,7 @@ const CodeSnippet = ({ }; return ( -
+
{snippet && ( <> diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx index 08362a9e7c..07d6fa70f1 100644 --- a/apps/_components/src/ColorModal/ColorModal.tsx +++ b/apps/_components/src/ColorModal/ColorModal.tsx @@ -1,4 +1,4 @@ -import { Paragraph, Modal } from '@digdir/designsystemet-react'; +import { Modal, Paragraph } from '@digdir/designsystemet-react'; import type { ColorNumber } from '@digdir/designsystemet/color'; import { getColorNameFromNumber, @@ -26,17 +26,11 @@ const Field = ({ return (
{label && ( - + {label} )} - + {value} {copyBtn && } @@ -78,11 +72,7 @@ export const ColorModal = ({
- + )} - +
{ diff --git a/apps/_components/src/ColorModal/components/ContrastBoxes.tsx b/apps/_components/src/ColorModal/components/ContrastBoxes.tsx index 0754ab271a..a26854910c 100644 --- a/apps/_components/src/ColorModal/components/ContrastBoxes.tsx +++ b/apps/_components/src/ColorModal/components/ContrastBoxes.tsx @@ -1,5 +1,4 @@ -/* eslint-disable @typescript-eslint/no-unsafe-member-access */ -/* eslint-disable @typescript-eslint/no-unsafe-assignment */ +import type { CssColor } from '@adobe/leonardo-contrast-colors'; import { Heading } from '@digdir/designsystemet-react'; import type { ColorNumber } from '@digdir/designsystemet/color'; import { @@ -8,10 +7,9 @@ import { getColorNameFromNumber, } from '@digdir/designsystemet/color'; import { - ExclamationmarkTriangleFillIcon, CheckmarkCircleFillIcon, + ExclamationmarkTriangleFillIcon, } from '@navikt/aksel-icons'; -import type { CssColor } from '@adobe/leonardo-contrast-colors'; import classes from '../ColorModal.module.css'; @@ -33,10 +31,7 @@ const ContrastItem = ({ className={classes.contrastError} /> ) : ( - + )} {text} {subText}
@@ -56,10 +51,7 @@ const ContrastBox = ({ }) => { return (
- + {title}

WCAG 2

@@ -126,46 +118,47 @@ const ContrastBox = ({ ); }; -export const ContrastBoxes = ({ - weight, - hex, -}: { - weight: number; - hex: string; -}) => { - let contrastColors: ColorNumber[] = []; +// TODO: Disabled due to colorTheme not being defined +// export const ContrastBoxes = ({ +// weight, +// hex, +// }: { +// weight: number; +// hex: string; +// }) => { +// let contrastColors: ColorNumber[] = []; - if ( - weight === 1 || - weight === 2 || - weight === 3 || - weight === 4 || - weight === 5 - ) { - contrastColors = [6, 7, 8, 12, 13]; - } else if ( - weight === 6 || - weight === 7 || - weight === 8 || - weight === 9 || - weight === 10 || - weight === 11 || - weight === 12 || - weight === 13 - ) { - contrastColors = [1, 2, 3, 4, 5]; - } - return ( - <> - {contrastColors.map((colorNumber) => ( - - ))} - - ); -}; +// if ( +// weight === 1 || +// weight === 2 || +// weight === 3 || +// weight === 4 || +// weight === 5 +// ) { +// contrastColors = [6, 7, 8, 12, 13]; +// } else if ( +// weight === 6 || +// weight === 7 || +// weight === 8 || +// weight === 9 || +// weight === 10 || +// weight === 11 || +// weight === 12 || +// weight === 13 +// ) { +// contrastColors = [1, 2, 3, 4, 5]; +// } +// return ( +// <> +// {contrastColors.map((colorNumber) => ( +// +// ))} +// +// ); +// }; diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx index 0f9d7a3b8d..034add7d02 100644 --- a/apps/_components/src/Header/Header.tsx +++ b/apps/_components/src/Header/Header.tsx @@ -1,15 +1,15 @@ 'use client'; -import { useState } from 'react'; -import { usePathname } from 'next/navigation'; -import Link from 'next/link'; +import { SkipLink } from '@digdir/designsystemet-react'; import { MenuHamburgerIcon, XMarkIcon } from '@navikt/aksel-icons'; import cl from 'clsx/lite'; -import { SkipLink } from '@digdir/designsystemet-react'; +import Link from 'next/link'; +import { usePathname } from 'next/navigation'; +import { useState } from 'react'; -import { GithubLogo } from './logos/github-logo'; -import { FigmaLogo } from './logos/figma-logo'; -import { DsLogo } from './logos/ds-logo'; import classes from './Header.module.css'; +import { DsLogo } from './logos/ds-logo'; +import { FigmaLogo } from './logos/figma-logo'; +import { GithubLogo } from './logos/github-logo'; type HeaderProps = { menu: { name: string; href: string }[]; @@ -49,25 +49,12 @@ const Header = ({ menu, betaTag }: HeaderProps) => { setOpen(!open); }} > - {open && ( - - )} - {!open && ( - - )} + {open && } + {!open && }