From 6959e9ddaaecaceafa74427a1a2630a5bfae4888 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Thu, 1 Aug 2024 14:40:07 +0200 Subject: [PATCH] chore: replace eslint with biomejs (#2189) **TLDR; Replace eslint and prettier (except css) for linting and formatting.** After doing some testing, debugging and fighting with getting eslint to work in #2175, I made this to test biomejs as a replacement. Either way we had to do big config changes for eslint 9.x so might aswell try biomejs. In general a positive experience having tested biomejs. ## Noticable changes: - Linting is now done for the whole repo, except "ignores". - Seperated gh workflows. - Linting is now done in a separate workflow for the whole repo. - Building and testing the individual packages or apps i their own workflow. (will do more renames here after merging into `next`) - New recommended vscode extension for biomejs. ## Biomejs vs Eslint - Biomejs lints, formats and sorts import order in <1s, while eslint 8.x uses >40s for only linting. - Linting when coding is also noticeably faster - Biomejs is still limited in what can be configured, but most of its current features set is good enough for our needs. - Biomejs is only 1 dependency, opposed to 11 dependencies from eslint - No more hassle upgrading dependencies hopefully - Biomejs lacks: - CSS formatting, ([but its being worked on](https://biomejs.dev/internals/language-support/)), so we are still using prettier for this. - Typed-linting? (i think) - No way of defining our own import order ([RFC](https://github.com/biomejs/biome/discussions/3015)) - No plugin support [but its planned](https://biomejs.dev/blog/roadmap-2024/) - Biomejs also has some new good linting rules we fixed - https://biomejs.dev/linter/rules/no-for-each/ - https://biomejs.dev/linter/rules/no-comma-operator/ - https://biomejs.dev/linter/rules/no-shadow-restricted-names/ - https://biomejs.dev/linter/rules/no-useless-else/ - https://biomejs.dev/linter/rules/no-assign-in-expressions/ - https://biomejs.dev/linter/rules/no-accumulating-spread/ - https://biomejs.dev/linter/rules/no-implicit-any-let/ --- .changeset/tender-ties-swim.md | 6 + .eslintignore | 7 - .eslintrc.cjs | 99 - .github/workflows/check-storefront.yml | 14 +- .github/workflows/checks-packages.yml | 12 +- .github/workflows/checks.yml | 20 + .vscode/extensions.json | 4 +- .vscode/settings.json | 28 +- .../src/ClipboardButton/ClipboardButton.tsx | 4 +- .../src/CodeSnippet/CodeSnippet.tsx | 19 +- .../_components/src/ColorModal/ColorModal.tsx | 23 +- .../src/ColorModal/colorModalUtils.ts | 2 +- .../ColorModal/components/ContrastBoxes.tsx | 101 +- apps/_components/src/Header/Header.tsx | 33 +- apps/dev/src/app/page.tsx | 8 +- apps/dev/src/components/Alias/Alias.tsx | 13 +- .../PullRequestCard/PullRequestCard.tsx | 12 +- apps/storefront/app/(frontpage)/layout.tsx | 6 +- apps/storefront/app/api/tokens/_route.ts | 6 +- .../app/bloggen/(frontpage)/layout.tsx | 9 +- .../app/bloggen/_components/Card/BlogCard.tsx | 24 +- .../_components/Contributors/Contributors.tsx | 30 +- .../_components/PostLayout/PostLayout.tsx | 26 +- apps/storefront/app/komponenter/layout.tsx | 7 +- apps/storefront/app/layout.tsx | 2 +- apps/storefront/app/not-found.tsx | 18 +- apps/storefront/components/Banner/Banner.tsx | 19 +- .../ComponentCard/ComponentCard.tsx | 13 +- apps/storefront/components/Footer/Footer.tsx | 46 +- .../components/GithubLink/GithubLink.tsx | 11 +- apps/storefront/components/Image/Image.tsx | 12 +- .../components/ImageBanner/ImageBanner.tsx | 69 +- .../components/ImageSection/ImageSection.tsx | 19 +- .../components/MdxContent/MdxContent.tsx | 2 +- .../NavigationCard/NavigationCard.tsx | 10 +- .../storefront/components/Section/Section.tsx | 16 +- apps/storefront/components/Section/index.ts | 2 +- .../components/SidebarMenu/SidebarMenu.tsx | 11 +- .../components/TeaserCard/TeaserCard.tsx | 6 +- .../Tokens/TokenColor/TokenColor.tsx | 8 +- .../Tokens/TokenFontSize/TokenFontSize.tsx | 5 +- .../components/Tokens/TokenList/TokenList.tsx | 43 +- .../Tokens/TokenShadow/TokenShadow.tsx | 7 +- .../components/Tokens/TokenSize/TokenSize.tsx | 10 +- apps/storefront/components/Tokens/index.ts | 2 +- .../layouts/MenuPageLayout/MenuPageLayout.tsx | 21 +- .../NavMenuPageLayout/NavMenuPageLayout.tsx | 11 +- .../layouts/NavPageLayout/NavPageLayout.tsx | 11 +- .../layouts/PageLayout/PageLayout.tsx | 28 +- apps/storefront/mdx-components.tsx | 70 +- apps/storefront/next.config.mjs | 2 +- apps/storefront/siteConfig.tsx | 384 ++-- apps/storybook/.storybook/main.ts | 4 +- apps/storybook/.storybook/preview.tsx | 28 +- .../docs-components/DoAndDont/DoAndDont.tsx | 16 +- .../Information/Information.tsx | 19 +- .../LinkHeading/LinkHeading.tsx | 5 +- .../storybook/docs-components/Stack/Stack.tsx | 2 +- apps/theme/app/layout.tsx | 5 +- apps/theme/app/page.tsx | 29 +- .../BackgroundSurface/BackgroundSurface.tsx | 23 +- .../testside/BaseContrast/BaseContrast.tsx | 26 +- .../BaseContrastOverview.tsx | 20 +- .../app/testside/ContrastBox/ContrastBox.tsx | 2 +- .../testside/FullBaseTest/FullBaseTest.tsx | 64 +- .../app/testside/Interaction/Interaction.tsx | 21 +- apps/theme/app/testside/page.tsx | 91 +- apps/theme/components/Color/Color.tsx | 11 +- .../components/ColorPicker/ColorPicker.tsx | 17 +- apps/theme/components/Group/Group.tsx | 34 +- .../Previews/Components/Components.tsx | 295 +-- .../Dashboard/AreaChart/AreaChart.tsx | 52 +- .../Previews/Dashboard/BarChart/BarChart.tsx | 38 +- .../Dashboard/ColorCard/ColorCard.tsx | 10 +- .../Previews/Dashboard/Dashboard.tsx | 119 +- .../Previews/Dashboard/LineCart/LineChart.tsx | 38 +- .../components/Previews/Landing/Landing.tsx | 22 +- apps/theme/components/Previews/Previews.tsx | 21 +- apps/theme/components/Scale/Scale.tsx | 4 +- apps/theme/components/Scales/Scales.tsx | 4 +- .../components/ThemeToolbar/ThemeToolbar.tsx | 4 +- .../components/TokenModal/TokenModal.tsx | 40 +- apps/theme/store.ts | 4 +- biome.jsonc | 98 + package.json | 18 +- packages/cli/bin/designsystemet.ts | 2 +- packages/cli/src/colors/colorUtils.ts | 67 +- packages/cli/src/colors/themeUtils.ts | 5 +- packages/cli/src/init/createTokensPackage.ts | 7 +- packages/cli/src/init/generateMetadataJson.ts | 10 +- packages/cli/src/init/generateThemesJson.ts | 18 +- packages/cli/src/init/nextStepsMarkdown.ts | 9 +- .../src/migrations/codemods/css/plugins.ts | 4 +- .../cli/src/migrations/codemods/css/run.ts | 4 +- .../cli/src/migrations/codemods/jsx/run.ts | 4 +- packages/cli/src/tokens/actions.ts | 8 +- packages/cli/src/tokens/build.ts | 8 +- packages/cli/src/tokens/configs.ts | 14 +- packages/cli/src/tokens/formats/css.ts | 8 +- packages/cli/src/tokens/formats/js-tokens.ts | 6 +- packages/cli/src/tokens/utils/noCase.ts | 6 +- .../cli/src/tokens/utils/permutateThemes.ts | 5 +- packages/cli/src/tokens/utils/utils.ts | 2 +- packages/cli/test/jsx-test.tsx | 5 +- packages/react/rollup.config.js | 2 +- .../Accordion/Accordion.stories.tsx | 12 +- .../components/Accordion/AccordionContent.tsx | 10 +- .../components/Accordion/AccordionHeading.tsx | 11 +- .../components/Accordion/AccordionItem.tsx | 4 +- .../components/Accordion/AccordionRoot.tsx | 4 +- .../react/src/components/Accordion/index.ts | 10 +- .../src/components/Alert/Alert.stories.tsx | 91 +- .../react/src/components/Alert/Alert.test.tsx | 10 +- packages/react/src/components/Alert/Alert.tsx | 19 +- .../react/src/components/Box/Box.stories.tsx | 13 +- .../react/src/components/Box/Box.test.tsx | 14 +- packages/react/src/components/Box/Box.tsx | 4 +- .../src/components/Button/Button.stories.tsx | 202 +- .../react/src/components/Button/Button.tsx | 10 +- .../src/components/Card/Card.stories.tsx | 155 +- .../react/src/components/Card/Card.test.tsx | 10 +- packages/react/src/components/Card/Card.tsx | 6 +- .../react/src/components/Card/CardContent.tsx | 9 +- .../react/src/components/Card/CardFooter.tsx | 9 +- .../react/src/components/Card/CardHeader.tsx | 9 +- .../react/src/components/Card/CardMedia.tsx | 4 +- packages/react/src/components/Card/index.ts | 8 +- .../react/src/components/Chip/Group/Group.tsx | 4 +- .../Chip/Removable/Removable.test.tsx | 7 +- .../components/Chip/Removable/Removable.tsx | 15 +- .../components/Chip/Toggle/Toggle.test.tsx | 2 +- .../src/components/Chip/Toggle/Toggle.tsx | 10 +- .../react/src/components/Divider/Divider.tsx | 2 +- .../DropdownMenu/DropdownMenu.stories.tsx | 10 +- .../DropdownMenu/DropdownMenu.test.tsx | 2 +- .../DropdownMenu/DropdownMenuContent.tsx | 20 +- .../DropdownMenu/DropdownMenuGroup.tsx | 15 +- .../DropdownMenu/DropdownMenuItem.tsx | 5 +- .../DropdownMenu/DropdownMenuRoot.tsx | 2 +- .../DropdownMenu/DropdownMenuTrigger.tsx | 4 +- .../src/components/DropdownMenu/index.ts | 4 +- .../ErrorSummary/ErrorSummary.stories.tsx | 4 +- .../ErrorSummary/ErrorSummaryItem.tsx | 9 +- .../ErrorSummary/ErrorSummaryRoot.tsx | 2 +- .../src/components/ErrorSummary/index.ts | 2 +- .../src/components/HelpText/HelpText.test.tsx | 7 +- .../src/components/HelpText/HelpText.tsx | 18 +- .../components/HelpText/HelpTextIcon.test.tsx | 7 +- .../src/components/HelpText/HelpTextIcon.tsx | 7 +- .../src/components/Link/Link.stories.tsx | 2 +- .../react/src/components/Link/Link.test.tsx | 7 +- packages/react/src/components/Link/Link.tsx | 4 +- .../src/components/List/List.stories.tsx | 10 +- .../react/src/components/List/ListHeading.tsx | 2 +- .../react/src/components/List/ListItem.tsx | 4 +- .../react/src/components/List/ListRoot.tsx | 7 +- packages/react/src/components/List/Lists.tsx | 14 +- packages/react/src/components/List/index.ts | 4 +- .../src/components/Modal/ModaContent.tsx | 4 +- .../src/components/Modal/Modal.stories.tsx | 24 +- .../react/src/components/Modal/Modal.test.tsx | 2 +- .../src/components/Modal/ModalDialog.tsx | 11 +- .../src/components/Modal/ModalFooter.tsx | 4 +- .../src/components/Modal/ModalHeader.tsx | 23 +- .../src/components/Modal/ModalTrigger.tsx | 2 +- packages/react/src/components/Modal/index.ts | 2 +- .../src/components/Modal/useScrollLock.ts | 48 +- .../Pagination/Pagination.stories.tsx | 24 +- .../components/Pagination/Pagination.test.tsx | 4 +- .../src/components/Pagination/Pagination.tsx | 20 +- .../Pagination/PaginationContent.tsx | 2 +- .../Pagination/PaginationEllipsis.tsx | 2 +- .../components/Pagination/PaginationItem.tsx | 2 +- .../components/Pagination/PaginationRoot.tsx | 8 +- .../react/src/components/Pagination/index.ts | 14 +- .../components/Pagination/usePagination.ts | 2 +- .../components/Popover/Popover.stories.tsx | 30 +- .../src/components/Popover/Popover.test.tsx | 2 +- .../src/components/Popover/PopoverContent.tsx | 19 +- .../src/components/Popover/PopoverRoot.tsx | 2 +- .../src/components/Popover/PopoverTrigger.tsx | 4 +- .../react/src/components/Popover/index.ts | 4 +- .../src/components/Skeleton/Circle/Circle.tsx | 2 +- .../Skeleton/Rectangle/Rectangle.tsx | 2 +- .../components/Skeleton/Skeleton.stories.tsx | 44 +- .../src/components/Skeleton/Text/Text.tsx | 2 +- .../components/SkipLink/SkipLink.stories.tsx | 5 +- .../src/components/SkipLink/SkipLink.test.tsx | 5 +- .../src/components/SkipLink/SkipLink.tsx | 2 +- .../components/Spinner/Spinner.stories.tsx | 48 +- .../react/src/components/Spinner/Spinner.tsx | 2 +- .../src/components/Table/Table.stories.tsx | 6 +- packages/react/src/components/Table/Table.tsx | 7 +- .../react/src/components/Table/TableBody.tsx | 5 +- .../react/src/components/Table/TableCell.tsx | 8 +- .../react/src/components/Table/TableHead.tsx | 8 +- .../src/components/Table/TableHeaderCell.tsx | 9 +- .../react/src/components/Table/TableRow.tsx | 8 +- packages/react/src/components/Table/index.ts | 14 +- packages/react/src/components/Tabs/Tab.tsx | 13 +- .../react/src/components/Tabs/TabContent.tsx | 8 +- .../react/src/components/Tabs/TabList.tsx | 2 +- .../src/components/Tabs/Tabs.stories.tsx | 33 +- .../react/src/components/Tabs/TabsRoot.tsx | 2 +- packages/react/src/components/Tabs/index.ts | 4 +- .../react/src/components/Tag/Tag.stories.tsx | 14 +- packages/react/src/components/Tag/Tag.tsx | 7 +- .../ToggleGroup/ToggleGroup.stories.tsx | 49 +- .../ToggleGroup/ToggleGroup.test.tsx | 33 +- .../ToggleGroupItem/ToggleGroupItem.tsx | 9 +- .../ToggleGroupItem/useToggleGroupitem.ts | 2 +- .../ToggleGroup/ToggleGroupRoot.tsx | 18 +- .../react/src/components/ToggleGroup/index.ts | 2 +- .../components/Tooltip/Tooltip.stories.tsx | 2 +- .../src/components/Tooltip/Tooltip.test.tsx | 2 +- .../react/src/components/Tooltip/Tooltip.tsx | 31 +- .../react/src/components/Tooltip/index.ts | 4 +- .../Typography/ErrorMessage/ErrorMessage.tsx | 4 +- .../components/Typography/Heading/Heading.tsx | 4 +- .../components/Typography/Ingress/Ingress.tsx | 4 +- .../src/components/Typography/Label/Label.tsx | 4 +- .../Typography/Paragraph/Paragraph.tsx | 4 +- .../Typography/Typography.stories.tsx | 42 +- .../src/components/form/CharacterCounter.tsx | 11 +- .../src/components/form/Checkbox/Checkbox.mdx | 2 +- .../form/Checkbox/Checkbox.test.tsx | 25 +- .../src/components/form/Checkbox/Checkbox.tsx | 14 +- .../form/Checkbox/Group/Group.stories.tsx | 6 +- .../form/Checkbox/Group/Group.test.tsx | 27 +- .../components/form/Checkbox/Group/Group.tsx | 9 +- .../src/components/form/Checkbox/index.ts | 2 +- .../form/Combobox/Combobox.stories.tsx | 63 +- .../form/Combobox/Combobox.test.tsx | 14 +- .../src/components/form/Combobox/Combobox.tsx | 40 +- .../form/Combobox/ComboboxContext.tsx | 2 +- .../src/components/form/Combobox/Custom.tsx | 11 +- .../src/components/form/Combobox/Empty.tsx | 7 +- .../form/Combobox/Option/Description.tsx | 2 +- .../form/Combobox/Option/Option.tsx | 21 +- .../Combobox/Option/useComboboxOption.tsx | 4 +- .../src/components/form/Combobox/index.ts | 8 +- .../Combobox/internal/ComboboxClearButton.tsx | 7 +- .../form/Combobox/internal/ComboboxError.tsx | 2 +- .../form/Combobox/internal/ComboboxInput.tsx | 36 +- .../form/Combobox/internal/ComboboxLabel.tsx | 9 +- .../form/Combobox/internal/ComboboxNative.tsx | 7 +- .../form/Combobox/useCombobox.test.tsx | 18 +- .../components/form/Combobox/useCombobox.tsx | 6 +- .../form/Combobox/useComboboxKeyboard.tsx | 9 +- .../form/Combobox/useFloatingCombobox.tsx | 4 +- .../src/components/form/Combobox/utilities.ts | 6 +- .../form/Fieldset/Fieldset.stories.tsx | 2 +- .../form/Fieldset/Fieldset.test.tsx | 15 +- .../src/components/form/Fieldset/Fieldset.tsx | 21 +- .../form/NativeSelect/NativeSelect.mdx | 2 +- .../NativeSelect/NativeSelect.stories.tsx | 4 +- .../form/NativeSelect/NativeSelect.test.tsx | 20 +- .../form/NativeSelect/NativeSelect.tsx | 14 +- .../form/NativeSelect/useNativeSelect.ts | 2 +- .../form/Radio/Group/Group.stories.tsx | 11 +- .../form/Radio/Group/Group.test.tsx | 24 +- .../src/components/form/Radio/Group/Group.tsx | 4 +- .../react/src/components/form/Radio/Radio.mdx | 2 +- .../src/components/form/Radio/Radio.test.tsx | 42 +- .../react/src/components/form/Radio/Radio.tsx | 17 +- .../react/src/components/form/Radio/index.ts | 4 +- .../src/components/form/Radio/useRadio.ts | 2 +- .../components/form/Search/Search.stories.tsx | 22 +- .../src/components/form/Search/Search.tsx | 15 +- .../src/components/form/Search/useSearch.ts | 2 +- .../components/form/Switch/Switch.stories.tsx | 11 +- .../components/form/Switch/Switch.test.tsx | 25 +- .../src/components/form/Switch/Switch.tsx | 19 +- .../src/components/form/Switch/useSwitch.ts | 2 +- .../form/Textarea/Textarea.stories.tsx | 2 +- .../form/Textarea/Textarea.test.tsx | 5 +- .../src/components/form/Textarea/Textarea.tsx | 20 +- .../components/form/Textarea/useTextarea.ts | 2 +- .../form/Textfield/Textfield.stories.tsx | 20 +- .../form/Textfield/Textfield.test.tsx | 5 +- .../components/form/Textfield/Textfield.tsx | 32 +- .../components/form/Textfield/useTextfield.ts | 2 +- .../src/components/form/useFormField.test.tsx | 7 +- .../react/src/components/form/useFormField.ts | 2 +- .../AnimateHeight/AnimateHeight.test.tsx | 9 +- .../utilities/AnimateHeight/AnimateHeight.tsx | 7 +- .../utilities/RovingFocus/RovingFocusItem.tsx | 10 +- .../RovingFocus/RovingFocusRoot.test.tsx | 19 +- .../utilities/RovingFocus/RovingFocusRoot.tsx | 10 +- .../utilities/RovingFocus/useRovingFocus.ts | 2 +- .../useDebounceCallback.ts | 2 +- packages/react/stories/showcase.stories.tsx | 209 +- packages/react/stories/testing.stories.tsx | 31 +- plugins/figma-plugin/src/plugin/plugin.ts | 19 +- plugins/figma-plugin/src/ui/app.tsx | 19 +- .../src/ui/components/Footer/Footer.tsx | 7 +- .../src/ui/components/Toast/Toast.tsx | 11 +- .../src/ui/pages/PageOne/PageOne.tsx | 27 +- plugins/figma-plugin/tsconfig.node.json | 4 +- plugins/figma-plugin/vite.config.ui.ts | 4 +- test/vitest.d.ts | 4 +- test/vitest.setup.ts | 2 +- vite.config.ts | 4 +- yarn.lock | 1895 ++--------------- 304 files changed, 1861 insertions(+), 5503 deletions(-) create mode 100644 .changeset/tender-ties-swim.md delete mode 100644 .eslintignore delete mode 100644 .eslintrc.cjs create mode 100644 .github/workflows/checks.yml create mode 100644 biome.jsonc 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 && }