Application Sidebar

.eslintrc.json

@@ -1,30 +1,104 @@
 {
   "extends": [
     "next",
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
+    "eslint-config-prettier",
+    "plugin:import/recommended"
   ],
   "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint", "prettier"],
+  "plugins": ["@typescript-eslint", "prettier", "import"],
   "root": true,
   "rules": {
-    "prettier/prettier": [
-      "error",
-      {
-        "tabWidth": 2,
-        "semi": true,
-        "endOfLine": "auto",
-        "singleQuote": false,
-        "trailingComma": "es5"
-      }
-    ],
+    "quotes": ["error", "double"],
+    "prettier/prettier": ["error", { "printWidth": 130, "singleQuote": false }],
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-namespace": "off",
     "array-callback-return": "error",
     "eqeqeq": "error",
     "no-alert": "error",
     "no-return-assign": "error",
+    "padding-line-between-statements": "off",
+    "@typescript-eslint/padding-line-between-statements": [
+      "error",
+      {
+        "blankLine": "always",
+        "prev": "*",
+        "next": ["interface", "type"]
+      }
+    ],
+    "react/react-in-jsx-scope": "off",
+    "max-len": ["error", { "code": 130 }],
+    "react/prop-types": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "no-empty-function": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "off",
+    "import/prefer-default-export": "off",
+    "import/named": "off",
+    "prefer-destructuring": [
+      "error",
+      { "array": false, "object": true },
+      { "enforceForRenamedProperties": false }
+    ],
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-nested-ternary": "warn",
+    "no-shadow": "error",
+    "eol-last": ["error", "always"],
+    "react/jsx-filename-extension": [
+      "error",
+      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
+    ],
+    "import/no-named-as-default": "off",
+    "@next/next/no-img-element": "off",
+    "import/no-unresolved": "error",
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "react",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@/**",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "always",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
     "no-restricted-syntax": [
       "error",
       {
@@ -135,5 +209,19 @@
         ]
       }
     ]
+  },
+  "settings": {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
   }
 }

.github/workflows/e2e.yml

@@ -1,27 +1,27 @@
 name: E2E tests
 on:
   push:
-    branches: [ main ]
+    branches: [main, dev]
   pull_request:
-    branches: [ main ]
+    branches: [main, dev]
 jobs:
   test:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
-    - uses: actions/setup-node@v4
-      with:
-        node-version: 18
-    - name: Install dependencies
-      run: npm ci
-    - name: Install Playwright Browsers
-      run: npx playwright install --with-deps
-    - name: Run Playwright tests
-      run: npx playwright test
-    - uses: actions/upload-artifact@v4
-      if: ${{ !cancelled() }}
-      with:
-        name: playwright-report
-        path: playwright-report/
-        retention-days: 30
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.prettierrc

@@ -1,7 +1,12 @@
 {
-  "trailingComma": "es5",
   "tabWidth": 2,
+  "useTabs": false,
   "semi": true,
-  "endOfLine": "auto",
-  "singleQuote": false
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "jsxBracketSameLine": false,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "jsxSingleQuote": false
 }

.storybook/preview.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { CssBaseline } from "@mui/material";
+import type { Preview } from "@storybook/react";
+import { themes } from "@storybook/theming";
+import ThemeProvider from "../src/components/theme/theme-provider";
+
+const preview: Preview = {
+  decorators: [
+    (Story) => {
+      return (
+        <ThemeProvider>
+          <CssBaseline />
+          <Story />
+        </ThemeProvider>
+      );
+    },
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      theme: themes.dark,
+    },
+  },
+};
+
+export default preview;

.vscode/extensions.json

@@ -3,4 +3,4 @@
     "yzhang.markdown-all-in-one",
     "DavidAnson.vscode-markdownlint"
   ]
-}
+}

.vscode/settings.json

@@ -1,9 +1,48 @@
 {
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": false,
+  "eslint.options": {
+    "overrideConfigFile": "./.eslintrc.json"
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "json",
+    "yaml"
+  ],
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "always"
   },
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.run": "onSave",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "files.eol": "\n",
+  "files.insertFinalNewline": true,
+  "files.associations": {
+    "*.js": "javascriptreact",
+    "*.jsx": "javascriptreact",
+    "*.ts": "typescriptreact",
+    "*.tsx": "typescriptreact"
+  },
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true,
   "markdown.extension.toc.levels": "2..6",
   "markdown.extension.orderedList.autoRenumber": false
 }

README.md

@@ -57,13 +57,13 @@ npx playwright install
 
    ```bash
     npx playwright test --ui
-    ```
+   ```
 
-    or
+   or
 
-    ```bash
-    npx playwright test
-    ```
+   ```bash
+   npx playwright test
+   ```
 
 ## Inspiration
 

next.config.js

@@ -3,6 +3,9 @@ const nextConfig = {
   eslint: {
     dirs: ["src", "playwright-tests"],
   },
+  images: {
+    remotePatterns: [{ hostname: "www.google.com" }],
+  },
 };
 
 module.exports = nextConfig;