🧑‍💻 Migrate package.json prettier and eslint

Also updated the plugins and the config.
New rules should be respected from now-on

.editorconfig

@@ -1,8 +0,0 @@
-root = true
-
-[*]
-end_of_line = lf
-indent_size = 2
-indent_style = space
-trim_trailing_whitespace = true
-insert_final_newline = true

.eslintignore

@@ -1,2 +0,0 @@
-*.js
-nodes_modules/

.eslintrc.js

@@ -1,43 +0,0 @@
-module.exports = {
-  extends: [
-    'mantine',
-    'plugin:@next/next/recommended',
-    'eslint:recommended',
-    'plugin:@typescript-eslint/eslint-recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:vitest/recommended',
-  ],
-  plugins: ['testing-library', 'react-hooks', 'react', 'unused-imports', 'vitest'],
-  overrides: [
-    {
-      files: ['**/?(*.)+(spec|test).[jt]s?(x)'],
-      extends: ['plugin:testing-library/react'],
-    },
-  ],
-  parserOptions: {
-    project: './tsconfig.json',
-  },
-  rules: {
-    'import/no-cycle': 'off',
-    'react/react-in-jsx-scope': 'off',
-    'react/no-children-prop': 'off',
-    'unused-imports/no-unused-imports': 'warn',
-    '@typescript-eslint/no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-imports': 'off',
-    '@typescript-eslint/no-unused-expressions': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-shadow': 'off',
-    '@typescript-eslint/no-use-before-define': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    'no-continue': 'off',
-    'linebreak-style': 0,
-    'import/extensions': 'off',
-    'vitest/max-nested-describe': [
-      'error',
-      {
-        max: 3,
-      },
-    ],
-    'testing-library/no-node-access': ['error', { allowContainerFirstChild: true }],
-  },
-};

.prettierrc

@@ -1,9 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "parser": "typescript",
-  "singleQuote": true,
-  "trailingComma": "es5",
-  "useTabs": false,
-  "endOfLine": "lf"
-}

checkly.config.ts

@@ -1,44 +0,0 @@
-import { defineConfig } from 'checkly'
-
-/**
- * See https://www.checklyhq.com/docs/cli/project-structure/
- */
-const config = defineConfig({
-  /* A human friendly name for your project */
-  projectName: 'homarr',
-  /** A logical ID that needs to be unique across your Checkly account,
-  * See https://www.checklyhq.com/docs/cli/constructs/ to learn more about logical IDs.
-  */
-  logicalId: 'homarr',
-  /* An optional URL to your Git repo */
-  repoUrl: 'https://github.com/checkly/checkly-cli',
-  /* Sets default values for Checks */
-  checks: {
-    /* A default for how often your Check should run in minutes */
-    frequency: 10,
-    /* Checkly data centers to run your Checks as monitors */
-    locations: ['us-east-1', 'eu-west-1'],
-    /* An optional array of tags to organize your Checks */
-    tags: ['mac'],
-    /** The Checkly Runtime identifier, determining npm packages and the Node.js version available at runtime.
-     * See https://www.checklyhq.com/docs/cli/npm-packages/
-     */
-    runtimeId: '2023.02',
-    /* A glob pattern that matches the Checks inside your repo, see https://www.checklyhq.com/docs/cli/using-check-test-match/ */
-    checkMatch: '**/__checks__/**/*.check.ts',
-    browserChecks: {
-      /* A glob pattern matches any Playwright .spec.ts files and automagically creates a Browser Check. This way, you
-      * can just write native Playwright code. See https://www.checklyhq.com/docs/cli/using-check-test-match/
-      * */
-      testMatch: '**/__checks__/**/*.spec.ts',
-    },
-  },
-  cli: {
-    /* The default datacenter location to use when running npx checkly test */
-    runLocation: 'eu-west-1',
-    /* An array of default reporters to use when a reporter is not specified with the "--reporter" flag */
-    reporters: ['list'],
-  },
-})
-
-export default config

package.json

@@ -82,27 +82,24 @@
   },
   "devDependencies": {
     "@next/bundle-analyzer": "^13.0.0",
-    "@next/eslint-plugin-next": "^13.0.0",
+    "@next/eslint-plugin-next": "^13.4.5",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/dockerode": "^3.3.9",
     "@types/node": "18.16.17",
     "@types/prismjs": "^1.26.0",
-    "@types/react": "17.0.61",
+    "@types/react": "^18.2.11",
     "@types/uuid": "^9.0.0",
     "@types/video.js": "^7.3.51",
-    "@typescript-eslint/eslint-plugin": "^5.30.7",
+    "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.30.7",
     "@vitest/coverage-c8": "^0.32.0",
     "@vitest/ui": "^0.32.0",
-    "checkly": "latest",
-    "eslint": "^8.20.0",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-mantine": "^2.0.0",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-react": "^7.30.1",
+    "eslint": "^8.0.1",
+    "eslint-config-next": "^13.4.5",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-react": "latest",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^5.5.1",
     "eslint-plugin-unused-imports": "^2.0.0",
@@ -113,16 +110,12 @@
     "sass": "^1.56.1",
     "ts-node": "latest",
     "turbo": "latest",
-    "typescript": "^5.0.4",
+    "typescript": "^5.1.0",
     "video.js": "^8.0.3",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^0.32.0",
     "vitest-fetch-mock": "^0.2.2"
   },
-  "resolutions": {
-    "@types/react": "17.0.61",
-    "@types/react-dom": "17.0.20"
-  },
   "packageManager": "yarn@3.6.0",
   "nextBundleAnalysis": {
     "budget": null,
@@ -148,5 +141,81 @@
     "pin": {
       "automerge": true
     }
+  },
+  "prettier": {
+    "printWidth": 100,
+    "tabWidth": 2,
+    "parser": "typescript",
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "endOfLine": "lf",
+    "importOrder": [
+      "^@core/(.*)$",
+      "^@server/(.*)$",
+      "^@ui/(.*)$",
+      "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
+  },
+  "eslintConfig": {
+    "ignoreDuringBuilds": true,
+    "extends": [
+      "next",
+      "eslint:recommended",
+      "plugin:@next/next/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:vitest/recommended"
+    ],
+    "plugins": [
+      "testing-library",
+      "unused-imports",
+      "react",
+      "vitest"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "**/?(*.)+(spec|test).[jt]s?(x)"
+        ],
+        "extends": [
+          "plugin:testing-library/react"
+        ]
+      }
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    },
+    "rules": {
+      "import/no-cycle": "off",
+      "react/react-in-jsx-scope": "off",
+      "react/no-children-prop": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-unused-imports": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-shadow": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "no-continue": "off",
+      "linebreak-style": 0,
+      "import/extensions": "off",
+      "vitest/max-nested-describe": [
+        "error",
+        {
+          "max": 3
+        }
+      ],
+      "testing-library/no-node-access": [
+        "error",
+        {
+          "allowContainerFirstChild": true
+        }
+      ]
+    }
   }
 }

src/components/Dashboard/Tiles/Widgets/Inputs/DraggableList.tsx

@@ -3,6 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
 import { IconChevronDown, IconGripVertical } from '@tabler/icons-react';
 import { Reorder, useDragControls } from 'framer-motion';
 import { FC, useEffect, useRef } from 'react';
+
 import { IDraggableEditableListInputValue } from '../../../../../widgets/widgets';
 
 interface DraggableListProps {
@@ -47,6 +48,7 @@ export const DraggableList = ({ items, value, onChange, options }: DraggableList
 const ListItem: FC<{
   item: any;
   label: string | JSX.Element;
+  children: JSX.Element;
 }> = ({ item, label, children }) => {
   const [opened, handlers] = useDisclosure(false);
   const { classes, cx } = useStyles();

src/components/Dashboard/Tiles/Widgets/Inputs/StaticDraggableList.tsx

@@ -76,6 +76,7 @@ export const StaticDraggableList: FC<StaticDraggableListParams> = (props) => {
 const ListItem: FC<{
   item: IDraggableListInputValue['defaultValue'][number];
   label: string;
+  children?: ReactNode;
 }> = (props) => {
   const { classes, cx } = useStyles();
   const controls = useDragControls();

src/components/layout/header/Search.tsx

@@ -2,13 +2,13 @@ import {
   ActionIcon,
   Autocomplete,
   Box,
-  createStyles,
   Divider,
   Kbd,
   Menu,
   Popover,
   ScrollArea,
   Tooltip,
+  createStyles,
 } from '@mantine/core';
 import { useDebouncedValue, useHotkeys } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
@@ -16,9 +16,10 @@ import { IconBrandYoutube, IconDownload, IconMovie, IconSearch } from '@tabler/i
 import { useTranslation } from 'next-i18next';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import { api } from '~/utils/api';
+
 import { useConfigContext } from '../../../config/provider';
-import { OverseerrMediaDisplay } from '../../../modules/common';
 import { IModule } from '../../../modules/ModuleTypes';
+import { OverseerrMediaDisplay } from '../../../modules/common';
 import { ConfigType } from '../../../types/config';
 import { searchUrls } from '../../Settings/Common/SearchEngine/SearchEngineSelector';
 import Tip from '../Tip';

src/modules/ModuleTypes.ts

@@ -1,22 +1,18 @@
 // This interface is to be used in all the modules of the project
 // Each module should have its own interface and call the following function:
 // TODO: Add a function to register a module
-
 import { Icon } from '@tabler/icons-react';
 
 // Note: Maybe use context to keep track of the modules
 // TODO: Remove this old component and the entire file
-export interface IModule {
+export type IModule = {
   id: string;
   title: string;
   icon: Icon;
   component: React.ComponentType;
   options?: Option;
-  padding?: PaddingOptions = {
-    right: 15,
-    top: 15,
-  };
-}
+  padding?: PaddingOptions;
+};
 
 interface PaddingOptions {
   top: number;

src/pages/_app.tsx

@@ -36,16 +36,9 @@ import '../styles/global.scss';
 import nextI18nextConfig from '../../next-i18next.config';
 import { api } from '~/utils/api';
 
-function App(
-  this: any,
-  props: AppProps<{
-    colorScheme: ColorScheme;
-    packageAttributes: ServerSidePackageAttributesType;
-    editModeEnabled: boolean;
-    defaultColorScheme: ColorScheme;
-  }>
-) {
+function App(props: AppProps & { colorScheme: ColorScheme }) {
   const { Component, pageProps } = props;
+
   const [primaryColor, setPrimaryColor] = useState<MantineTheme['primaryColor']>('red');
   const [secondaryColor, setSecondaryColor] = useState<MantineTheme['primaryColor']>('orange');
   const [primaryShade, setPrimaryShade] = useState<MantineTheme['primaryShade']>(6);

src/widgets/useNet/UsenetQueueList.tsx

@@ -20,6 +20,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useTranslation } from 'next-i18next';
 import { FunctionComponent, useState } from 'react';
+
 import { useGetUsenetDownloads } from '../../hooks/widgets/dashDot/api';
 import { humanFileSize } from '../../tools/humanFileSize';
 
@@ -69,7 +70,7 @@ export const UsenetQueueList: FunctionComponent<UsenetQueueListProps> = ({ appId
         >
           {t('queue.error.message')}
           <Code mt="sm" block>
-            {error.data}
+            {error.message}
           </Code>
         </Alert>
       </Group>