🚨 Forbedret ESLint-oppsett

.changeset/five-icons-yawn.md

@@ -0,0 +1,9 @@
+---
+"@navikt/ds-react": minor
+---
+
+:recycle: Refaktorering og småfikser
+
+- Refaktorering som følge av nye ESLint-regler
+- AccordionItem/ToggleGroup: Støtte for 'id'-prop
+- MonthPicker: Mer presis type for 'onMonthSelect' prop

.eslintignore

@@ -0,0 +1 @@
+!.storybook

.eslintrc.js

@@ -0,0 +1,93 @@
+// TODO: Convert to new format: https://eslint.org/docs/latest/use/configure/migration-guide
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    //"plugin:react/jsx-runtime", // Not sure if this will cause problems for projects not using the new JSX transform
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "plugin:storybook/recommended",
+    // TODO: Look into opinionated stylistic plugin
+    // TODO: Replace @typescript-eslint/recommended with @typescript-eslint/recommended-type-checked
+  ],
+  settings: { react: { version: "detect" } },
+  rules: {
+    "import/no-unresolved": "off",
+    "react/jsx-curly-brace-presence": [
+      "error",
+      { propElementValues: "always" },
+    ],
+    // TODO add: "object-shorthand": "error",
+    // TODO: Consider adding the rule "id-length"
+    // Temporary:
+    "react/prop-types": "off",
+    "react/display-name": "off",
+    "import/no-named-as-default": "off",
+  },
+  reportUnusedDisableDirectives: true,
+  overrides: [
+    {
+      files: ["**/*.ts?(x)"],
+      extends: ["plugin:@typescript-eslint/recommended"],
+      rules: {
+        "@typescript-eslint/no-explicit-any": "off", // Temporary
+      },
+    },
+    {
+      files: ["**/*.test.*", "**/__tests__/*"],
+      extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
+    },
+    {
+      files: ["aksel.nav.no/website/**"],
+      env: {
+        browser: true,
+        es2021: true,
+      },
+      extends: ["plugin:@next/next/recommended"],
+      parser: "@typescript-eslint/parser",
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        ecmaVersion: 12,
+        sourceType: "module",
+      },
+      rules: {
+        "react/no-unknown-property": [2, { ignore: ["jsx", "global"] }],
+        "react/react-in-jsx-scope": "off",
+        "@next/next/no-html-link-for-pages": [
+          "error",
+          "aksel.nav.no/website/pages/",
+        ],
+        "@typescript-eslint/ban-ts-comment": "off", // Temporary
+      },
+    },
+    {
+      files: ["aksel.nav.no/website/pages/eksempler/**"],
+      rules: {
+        "jsx-a11y/anchor-is-valid": "off",
+      },
+    },
+  ],
+  globals: {
+    Locale: "readonly",
+    JSX: "readonly",
+  },
+  ignorePatterns: [
+    "node_modules",
+    "lib",
+    "public",
+    "examples",
+    "esm",
+    "cjs",
+    "dist",
+    "**/codemod/**/*.js",
+  ],
+};

.storybook/preview.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import "@navikt/ds-css/index.css";
 import "./layout.css";
 

@navikt/aksel-icons/figma-plugin/scripts/vite/vite-inline-svg.ts

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-anonymous-default-export */
 import fs from "fs";
 import { Plugin } from "vite";
 

@navikt/aksel-icons/figma-plugin/src/plugin/plugin.ts

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 figma.showUI(__html__, { width: 480, height: 600 });
 
 figma.ui.onmessage = (msg) => {

@navikt/aksel-icons/figma-plugin/src/ui/App.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/react-in-jsx-scope */
 import { Heading, Search, ToggleGroup } from "@navikt/ds-react";
 import Fuse from "fuse.js";
 import { useEffect, useMemo, useState } from "react";
@@ -59,9 +60,8 @@ const App = () => {
   }, [toggle, query, strokeIcons, fillIcons]);
 
   const onCreate = (id: string, name: string) => {
-    let svg = document.getElementById(id)?.outerHTML;
-    let size = 24;
-    // eslint-disable-next-line no-restricted-globals
+    const svg = document.getElementById(id)?.outerHTML;
+    const size = 24;
     parent.postMessage(
       {
         pluginMessage: {
@@ -154,7 +154,7 @@ const App = () => {
                       </Heading>
                       <div className="icons-wrapper">
                         {sub.icons.map((i) => {
-                          const T = Icons[`${i.id}Icon`];
+                          const T = Icons[`${i.id}Icon`]; // eslint-disable-line import/namespace
                           if (T === undefined) {
                             console.log(i);
                             return null;

@navikt/aksel-icons/util/useId.ts

@@ -18,10 +18,8 @@ function useGlobalId(idOverride?: string): string | undefined {
   return id;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
 const maybeReactUseId: undefined | (() => string) = (React as any)[
-  // eslint-disable-next-line no-useless-concat
-  "useId" + ""
+  "useId" + "" // Workaround for https://github.com/webpack/webpack/issues/14814
 ];
 /**
  *

@navikt/aksel-stylelint/src/utils.ts

@@ -90,7 +90,7 @@ export const flattenObject = (obj) => {
 const tokenCSSFile = "./index.css";
 const tokenJsonFile = "./tokens.json";
 
-let allowedTokenNames = [];
+const allowedTokenNames = [];
 
 export const addTokens = (
   tokenJSONFile: string,

@navikt/aksel/src/codemod/transforms/v1.0.0/chat/chat.ts

@@ -5,7 +5,7 @@ import renameProps from "../../../utils/rename-props";
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file, api, options) {
+export default function transformer(file, api) {
   const j = api.jscodeshift;
   let localName = "SpeechBubble";
 

@navikt/aksel/src/codemod/transforms/v1.0.0/pagination/pagination.ts

@@ -4,7 +4,7 @@ import { getLineTerminator } from "../../../utils/lineterminator";
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file, api, options) {
+export default function transformer(file, api) {
   const j = api.jscodeshift;
   let localName = "Pagination";
 
@@ -62,7 +62,7 @@ export default function transformer(file, api, options) {
         (x) => x.name.name === "data-version" && x.value.value === "v1"
       );
 
-      parent.value.openingElement?.attributes.forEach((x, index) => {
+      parent.value.openingElement?.attributes.forEach((x) => {
         let didUpdate = false;
         if (x.name?.name === "size" && x.type === "JSXAttribute" && !skip) {
           /* addExplicitStandardProp */

@navikt/aksel/src/codemod/transforms/v1.0.0/preset/preset.ts

@@ -6,10 +6,10 @@ import transformPagination from "../pagination/pagination";
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file, api, options) {
-  file.source = transformTabs(file, api, options);
-  file.source = transformChat(file, api, options);
-  file.source = transformPagination(file, api, options);
+export default function transformer(file, api) {
+  file.source = transformTabs(file, api);
+  file.source = transformChat(file, api);
+  file.source = transformPagination(file, api);
 
   return file.source;
 }

@navikt/aksel/src/codemod/transforms/v1.0.0/tabs/tabs.ts

@@ -5,7 +5,7 @@ import renameProps from "../../../utils/rename-props";
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file, api, options) {
+export default function transformer(file, api) {
   const j = api.jscodeshift;
   let localName = "Tabs";
   let iconPositionProp = null;

@navikt/aksel/src/codemod/transforms/v2.0.0/update-css-tokens/update-css-tokens.ts

@@ -4,11 +4,10 @@ import { tokens } from "../../../tokens-map.mjs";
  * @param {import('jscodeshift').FileInfo} file
  * @param {import('jscodeshift').API} api
  */
-export default function transformer(file, api) {
+export default function transformer(file) {
   let src = file.source;
 
   tokens.forEach((tok) => {
-    // eslint-disable-next-line no-useless-concat
     const rgx = new RegExp("(" + `${tok[0]}:` + ")", "gm");
     src = src.replace(rgx, `--v2-migration${tok[0].replace("--", "__")}:`);
   });

@navikt/aksel/src/codemod/transforms/v2.0.0/update-js-tokens/update-js-tokens.ts

@@ -13,7 +13,7 @@ import { getLineTerminator } from "../../../utils/lineterminator";
  * @param {import('jscodeshift').API} api
  */
 export default function transformer(file: JSCodeshift, api) {
-  let src = file.source;
+  const src = file.source;
 
   const j = api.jscodeshift as JSCodeshift;