chore: Improve code linting & formatting (#212)

* 🔧 Fixed so that typescript linting only runs on typescript files

* 🔥 Cleaned up some files causing false errors for testing & linting

* 🔧 Fixed icons package to build to dist

* 🔧 Fixes for linting all code

* 📌 update lock

* 🚨 refactor to fix lint warning

* 🚨 Ran lint with auto fix

* 🚨 Resolve conflicting eslint configurations

* 🚨 wip fixing linting

* 🏷️ Replaced any type best as possible in NavigationPageLayout

* 🚨 Fixed linting errors and warnings that are not any in storefront

.eslintrc.js

@@ -1,28 +1,44 @@
 module.exports = {
-  parserOptions: {
-    ecmaFeatures: { jsx: true },
-    project: './tsconfig.json',
+  root: true,
+  env: {
+    node: true,
+    browser: true,
+    es6: true,
   },
   extends: [
     'eslint:recommended',
     'plugin:import/recommended',
-    'plugin:import/typescript',
-    'plugin:@typescript-eslint/recommended',
     'plugin:jsx-a11y/recommended',
     'plugin:react/recommended',
     'plugin:react-hooks/recommended',
+    'plugin:@next/next/recommended',
     'plugin:prettier/recommended',
   ],
-  env: {
-    node: true,
-  },
-  parser: '@typescript-eslint/parser',
+  plugins: ['import', 'react', 'jsx-a11y', 'prettier'],
+  overrides: [
+    {
+      // Typescript
+      files: ['**/*.ts?(x)'],
+      extends: [
+        'plugin:import/typescript',
+        'plugin:@typescript-eslint/recommended',
+      ],
+      parser: '@typescript-eslint/parser',
+      parserOptions: {
+        ecmaFeatures: { jsx: true },
+        project: './tsconfig.json',
+      },
+      rules: {
+        '@typescript-eslint/consistent-type-exports': 'warn',
+        '@typescript-eslint/consistent-type-imports': 'warn',
+      },
+    },
+  ],
   rules: {
-    // Disabled because of Typescript
+    // Disabled because we use Typescript types for props
     'react/prop-types': ['off'],
     'react/jsx-no-bind': 'off',
-    '@typescript-eslint/consistent-type-exports': 'warn',
-    '@typescript-eslint/consistent-type-imports': 'warn',
+    'import/no-unresolved': 'error',
     'import/order': [
       'warn',
       {
@@ -47,7 +63,8 @@ module.exports = {
     },
     'import/resolver': {
       typescript: {
-        project: '.',
+        alwaysTryTypes: true,
+        project: './tsconfig.json',
       },
     },
   },

commitlint.rules.js

@@ -1,5 +1,5 @@
 module.exports = {
-    rules: {
-        'subject-case': [0]
-    }
-}
+  rules: {
+    'subject-case': [0],
+  },
+};

docs-components/FrontpageNavigation/FrontpageNavigation.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { SystemFilled, Wrench, Picture } from '@navikt/ds-icons';
 
 import type { NavigationCardProps } from '../NavigationCard/NavigationCard';

docs-components/NavigationCard/NavigationCard.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { SystemFilled } from '@navikt/ds-icons';
+import cn from 'classnames';
 
 import classes from './NavigationCard.module.css';
 
-import cn from 'classnames';
-
 interface NavigationCardProps {
   name: string;
   desc: string;

docs-components/Table/PropsTable/PropsTable.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
+
 import { Table } from '../Table';
 import { TableCellTag } from '../TableCells/TableCells';
 
 const PropsTable = () => {
   const getRows = () => {
-    let arr = [];
+    const arr = [];
 
     arr.push({
       row: [

package.json

@@ -19,7 +19,9 @@
     "add-component-core": "node scripts/add-component.mjs",
     "lerna:version": "lerna version  --conventional-commits --no-private",
     "lerna:publish": "lerna publish from-git",
-    "build:tokens": "yarn workspace @digdir/design-system-tokens build"
+    "build:tokens": "yarn workspace @digdir/design-system-tokens build",
+    "lint": "eslint",
+    "lint:all": "eslint ."
   },
   "devDependencies": {
     "@altinn/figma-design-tokens": "^6.0.1",
@@ -32,6 +34,7 @@
     "@etchteam/storybook-addon-status": "^4.2.2",
     "@mdx-js/react": "1.6.22",
     "@navikt/ds-icons": "^1.5.9",
+    "@next/eslint-plugin-next": "^13.2.4",
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-image": "^3.0.1",
     "@rollup/plugin-json": "^5.0.2",

packages/icons/build.js

@@ -1,9 +1,9 @@
 import fs from 'fs/promises';
 
-import rimraf from 'rimraf';
+import { rimraf } from 'rimraf';
 import { transform } from '@svgr/core';
 import camelcase from 'camelcase';
-import babel from '@babel/core';
+import { transformAsync } from '@babel/core';
 import { minify } from 'terser';
 
 const outputPath = './';
@@ -22,7 +22,7 @@ async function transformSVGtoJSX(file, componentName, format) {
     },
     { componentName },
   );
-  const { code } = await babel.transformAsync(svgReactContent, {
+  const { code } = await transformAsync(svgReactContent, {
     presets: [['@babel/preset-react', { useBuiltIns: true }]],
   });
 
@@ -60,9 +60,9 @@ function indexFileContent(files, format, includeExtension = true) {
 async function buildIcons(format = 'esm') {
   let outDir = outputPath;
   if (format === 'esm') {
-    outDir = `${outputPath}/esm`;
+    outDir = `${outputPath}/dist/esm`;
   } else {
-    outDir = `${outputPath}/cjs`;
+    outDir = `${outputPath}/dist/cjs`;
   }
 
   await fs.mkdir(outDir, { recursive: true });
@@ -98,11 +98,7 @@ async function buildIcons(format = 'esm') {
 
 (function main() {
   console.log('🏗 Building icon package...');
-  new Promise((resolve) => {
-    rimraf(`${outputPath}/esm`, () => {
-      rimraf(`${outputPath}/cjs`, resolve);
-    });
-  })
+  rimraf(`${outputPath}/dist`)
     .then(() => Promise.all([buildIcons('cjs'), buildIcons('esm')]))
     .then(() => console.log('✅ Finished building package.'));
 })();

packages/icons/package.json

@@ -9,8 +9,8 @@
   ],
   "license": "BSD-3-Clause",
   "type": "module",
-  "main": "./cjs/index.js",
-  "module": "./esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "files": [
     "/svg",
     "/cjs",
@@ -20,10 +20,11 @@
   "scripts": {
     "clean": "rimraf ./optimized",
     "optimize": "svgo -q -p 8 -f ./svg -o ./optimized",
-    "build": "yarn clean && yarn optimize && node build.js && rimraf ./optimized "
+    "build": "yarn clean && yarn optimize && node build.js && yarn clean"
   },
   "devDependencies": {
     "camelcase": "^7.0.1",
+    "rimraf": "^4.3.0",
     "svgo": "^3.0.2"
   },
   "dependencies": {

storefront/components/ArgsTable/ArgsTable.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import cn from 'classnames';
+import Tippy from '@tippyjs/react';
 
 import classes from './ArgsTable.module.css';
-import Tippy from '@tippyjs/react';
 
 interface ArgsTable {
   argTypes: any;

storefront/components/Banner/Banner.tsx

@@ -1,6 +1,7 @@
+import React from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
 import cn from 'classnames';
-import { Button, ButtonSize } from '@digdir/design-system-react';
+// import { Button, ButtonSize } from '@digdir/design-system-react';
 
 import { Tag } from '../Tag/Tag';
 

storefront/components/Card/Card.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+
 import classes from './Card.module.css';
 
 interface CardProps {

storefront/components/CodeSnippet/CodeSnippet.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react';
 import { Copy } from '@navikt/ds-icons';
-import classes from './CodeSnippet.module.css';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import prettier from 'prettier/standalone.js';
 import parserJs from 'prettier/parser-flow.js';
@@ -10,8 +9,9 @@ import parserTs from 'prettier/parser-typescript';
 import { nightOwl } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import Tippy from '@tippyjs/react';
 
+import classes from './CodeSnippet.module.css';
+
 const CodeSnippet = ({ language = 'markup', children = '' }) => {
-  const [showToolTip, setShowToolTip] = useState(false);
   const [toolTipText, setToolTipText] = useState('Kopier');
 
   if (language === 'css' || language === 'scss') {
@@ -60,7 +60,7 @@ const CodeSnippet = ({ language = 'markup', children = '' }) => {
           onClick={() => onButtonClick()}
           className={classes['code-snippet__icon']}
         >
-          <Copy size={20} />
+          <Copy scale={16} />
         </button>
       </Tippy>
       <SyntaxHighlighter

storefront/components/ComponentOverview/component-overview.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 import classes from './component-overview.module.css';
 

storefront/components/Controls/Controls.tsx

@@ -1,9 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import {
-  RadioGroup,
-  RadioGroupSize,
-  CheckboxGroup,
-} from '@digdir/design-system-react';
+import { RadioGroup, RadioGroupSize } from '@digdir/design-system-react';
 import reactElementToJSXString from 'react-element-to-jsx-string';
 
 import { CodeSnippet } from '../CodeSnippet/CodeSnippet';
@@ -21,15 +17,15 @@ const Controls = ({ component, argTypes }: ControlsProps) => {
   useEffect(() => {
     setControls({ children: 'Button' });
 
-    Object.keys(argTypes).map((item, index) => {
+    Object.keys(argTypes).map((item) => {
       if (argTypes[item].control) {
         setControls((state) => ({
           ...state,
           [item]: argTypes[item].control.options[0],
         }));
       }
     });
-  }, []);
+  }, [argTypes]);
 
   const onRadioChanged = (prop: string, value: string | undefined) => {
     console.log(prop, value);

storefront/components/Footer/Footer.tsx

@@ -1,15 +1,18 @@
 import React from 'react';
 import { Container } from 'react-bootstrap';
+import Image from 'next/image';
 
 import classes from './Footer.module.css';
 
 const Footer = () => {
   return (
     <footer className={classes.footer}>
       <Container>
-        <img
+        <Image
           src='/img/logo-negative.svg'
           alt='Logo'
+          width={752}
+          height={79}
         />
       </Container>
     </footer>

storefront/components/Header/Header.tsx

@@ -1,11 +1,13 @@
-import classes from './Header.module.css';
+import React, { useState } from 'react';
 import { Container } from 'react-bootstrap';
 import Link from 'next/link';
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { Hamburger, Close } from '@navikt/ds-icons';
-import { useState } from 'react';
 import cn from 'classnames';
 
+import classes from './Header.module.css';
+
 const Header = () => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
@@ -37,10 +39,12 @@ const Header = () => {
       >
         <div className={classes.left}>
           <Link href='/'>
-            <img
+            <Image
               className={classes.logo}
               src='/img/logo-positive.svg'
               alt='Logo'
+              width={752}
+              height={79}
             />
           </Link>
         </div>

storefront/components/ImageSection/ImageSection.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Col, Row, Container } from 'react-bootstrap';
+import Image from 'next/image';
 
 import classes from './ImageSection.module.css';
 
@@ -9,6 +10,8 @@ interface ImageSectionProps {
   src: string;
   content?: React.ReactNode;
   id?: string;
+  width: number;
+  height: number;
 }
 
 const ImageSection = ({
@@ -17,6 +20,8 @@ const ImageSection = ({
   src,
   content,
   id,
+  width,
+  height,
 }: ImageSectionProps) => {
   return (
     <div
@@ -26,10 +31,12 @@ const ImageSection = ({
       <Container>
         <Row className='justify-content-center align-items-center'>
           <Col md={4}>
-            <img
+            <Image
               className={classes.img}
               src={src}
-              alt='Image'
+              alt='section'
+              height={height}
+              width={width}
             />
           </Col>
           <Col md={1}></Col>

storefront/components/Meta/Meta.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import Head from 'next/head';
 
 interface MetaProps {