add vscode settings, update linters (#567)

Author: nowyDEV

.eslintignore

@@ -1,5 +1,5 @@
 build
-dist
 coverage
-.eslintrc.js
-lint-staged.config.js
+dist
+node_modules
+storybook-static

.eslintrc.js

@@ -81,18 +81,9 @@ module.exports = {
         format: ["camelCase", "PascalCase"],
         leadingUnderscore: "forbid",
       },
-      {
-        selector: ["objectLiteralProperty", "objectLiteralMethod"],
-        format: ["camelCase", "PascalCase", "snake_case", "UPPER_CASE"],
-        leadingUnderscore: "allowDouble",
-        filter: {
-          regex: "^(&:)|^[0-9]+$",
-          match: false,
-        },
-      },
       {
         selector: ["typeProperty"],
-        format: ["camelCase", "snake_case"],
+        format: ["camelCase"],
         leadingUnderscore: "allowDouble",
         filter: {
           regex: "^(Component)$",

.github/workflows/reviewdog.yml

@@ -36,7 +36,7 @@ jobs:
           filter_mode: added
           level: warning
           fail_on_error: false
-          eslint_flags: '--ignore-path .gitignore .'
+          eslint_flags: '. --report-unused-disable-directives'
 
       - name: Stylelint
         uses: reviewdog/action-stylelint@v1

.gitignore

@@ -28,4 +28,3 @@ yarn-debug.log*
 yarn-error.log*
 
 storybook-static
-.vscode/*

.prettierignore

@@ -1,6 +1,6 @@
 build
+coverage
 dist
+node_modules
 storybook-static
 tsconfig.json
-coverage
-.vscode

.stylelintignore

@@ -1,3 +1,5 @@
-src/generated
-public
 build
+coverage
+dist
+node_modules
+storybook-static

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "stylelint.vscode-stylelint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.probe": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "eslint.rules.customizations": [{ "rule": "*", "severity": "warn" }],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.enable": true
+}

nordcloud-gnui-8.0.0.tgz

@@ -26,10 +26,10 @@
     "test:watch": "npm run test -- --watch",
     "test:commit": "npm run test -- -o --silent --watchAll=false",
     "test:all": "npm run test -- --silent --watchAll=false",
-    "format": "prettier --ignore-path .gitignore --write \"**/*.+(js|json|ts|tsx|md|mdx|yml)\"",
+    "format": "prettier --write \"**/*\" --ignore-unknown",
     "check:types": "tsc --pretty",
-    "check:format": "prettier --check \"**/*.+(js|json|ts|tsx|md|mdx|yml)\"",
-    "lint": "eslint --ignore-path .gitignore .",
+    "check:format": "prettier --check \"**/*\" --ignore-unknown",
+    "lint": "eslint . --report-unused-disable-directives",
     "lint:quiet": "npm run lint -- --quiet",
     "lint:css": "stylelint '**/*.+(ts|tsx)'",
     "lint:css:quiet": "npm run lint:css -- --quiet",
@@ -61,10 +61,9 @@
     "*.{ts,tsx,js}": [
       "prettier --write",
       "eslint --fix",
-      "stylelint",
-      "git add"
+      "stylelint"
     ],
-    "*.{md,mdx,css,yaml,yml}": [
+    "*.{md,mdx,css,yaml,yml,json}": [
       "prettier --write"
     ]
   },
@@ -88,7 +87,7 @@
     "styled-system": "^5.1.5"
   },
   "devDependencies": {
-    "@nordcloud/eslint-config-pat": "^4.15.1",
+    "@nordcloud/eslint-config-pat": "^4.16.3",
     "@rollup/plugin-commonjs": "^24.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@storybook/addon-docs": "^6.5.13",
@@ -114,7 +113,7 @@
     "lint-staged": "^10.3.0",
     "npm-run-all": "^4.1.5",
     "patch-package": "^6.5.0",
-    "prettier": "^2.8.0",
+    "prettier": "^2.8.4",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^17.0.2",

package-lock.json

@@ -1,6 +1,11 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": ["config:base", ":separateMultipleMajorReleases", "schedule:monthly", ":automergeDisabled"],
+  "extends": [
+    "config:base",
+    ":separateMultipleMajorReleases",
+    "schedule:monthly",
+    ":automergeDisabled"
+  ],
   "enabledManagers": ["npm"],
   "labels": ["dependencies"],
   "node": {
@@ -35,10 +40,7 @@
     },
     {
       "groupName": "Styled System",
-      "matchPackageNames": [
-        "styled-system",
-        "@types/styled-system"
-      ]
+      "matchPackageNames": ["styled-system", "@types/styled-system"]
     },
     {
       "groupName": "Jest",
@@ -61,17 +63,11 @@
     },
     {
       "groupName": "React Helmet",
-      "matchPackageNames": [
-        "react-helmet",
-        "@types/react-helmet"
-      ]
+      "matchPackageNames": ["react-helmet", "@types/react-helmet"]
     },
     {
       "groupName": "Styled Components",
-      "matchPackageNames": [
-        "styled-components",
-        "@types/styled-components"
-      ]
+      "matchPackageNames": ["styled-components", "@types/styled-components"]
     },
     {
       "matchDepTypes": ["devDependencies"],

package.json

@@ -108,7 +108,6 @@ const changeSeverity = (severity: string) => {
   }
 };
 
-/* eslint-disable sonarjs/no-identical-functions */
 const StyledButton = styled.button<ButtonProps<React.ElementType>>`
   background: ${theme.color.interactive.primary};
   white-space: nowrap;

renovate.json5

@@ -27,12 +27,12 @@ const lengthUnitSuffix = {
   ...relativeLengthUnitSuffix,
 };
 export type LengthUnitSuffix =
-  typeof lengthUnitSuffix[keyof typeof lengthUnitSuffix];
+  (typeof lengthUnitSuffix)[keyof typeof lengthUnitSuffix];
 
 const unitSuffix = {
   ...lengthUnitSuffix,
   ...multiplicationUnitSuffix,
 };
-type UnitSuffix = typeof unitSuffix[keyof typeof unitSuffix];
+type UnitSuffix = (typeof unitSuffix)[keyof typeof unitSuffix];
 
 export type Unit<Suffix extends UnitSuffix> = `${number}${Suffix}`;

src/components/button/Button.tsx

@@ -9,14 +9,15 @@ export const setStatusColor = (status: Status) => {
     return css`
       border: 1px solid ${theme.color.border.error};
     `;
-  } else if (status === "success") {
+  }
+
+  if (status === "success") {
     return css`
       border: 1px solid ${theme.color.border.input};
     `;
   }
 };
 
-/* eslint-disable sonarjs/no-identical-functions */
 export const InputGroup = styled(FlexContainer)<
   SpaceProps & StyledInputGroupProps
 >`

src/components/container/types.ts

@@ -126,7 +126,7 @@ return (
 In TypeScript, Ref needs to be properly typed:
 
 ```tsx
-const selectRef = React.useRef<SelectInstance<typeof options[number]> | null>(
+const selectRef = React.useRef<SelectInstance<(typeof options)[number]> | null>(
   null
 );
 ```

src/components/input/styles.tsx

@@ -142,7 +142,6 @@ function getOptionBgColor(
 }
 
 /* taken from https://github.com/JedWatson/react-select/blob/master/docs/examples/StyledMulti.tsx */
-/* eslint-disable no-nested-ternary */
 export const customMultiColorStyles: StylesConfig<SelectColoredOption, true> = {
   ...getDefaultStyles(),
   control: (styles) => ({ ...styles, backgroundColor: "white" }),

src/components/select/Select.stories.mdx

@@ -10,7 +10,6 @@ export type StyledTableProps = {
 };
 
 /* stylelint-disable no-descending-specificity */
-/* eslint-disable sonarjs/no-identical-functions */
 const StyledTable = styled.table<StyledTableProps>`
   width: 100%;
   text-align: left;

src/components/select/Select.tsx

@@ -3,7 +3,6 @@ import { off, on } from "../utils/listeners";
 
 const defaultEvents = ["mousedown", "touchstart"];
 
-/* eslint-disable max-params */
 export const useClickOutside = <E extends Event = Event>({
   ref,
   active = true,

src/components/table/Table.tsx

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-namespace, jest/prefer-strict-equal, @typescript-eslint/no-explicit-any, jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content */
+/* eslint-disable @typescript-eslint/consistent-type-definitions, @typescript-eslint/no-namespace, jest/prefer-strict-equal, jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content */
 // Code from https://github.com/gregberge/react-flatten-children
 import * as React from "react";
 import { flattenChildren } from "./flattenChildren";