Fixed relative imports

.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-commons-ui/next"],
+  settings: {
+    next: {
+      rootDir: "apps/*/",
+    },
+  },
+};

.estlintignore

@@ -0,0 +1,3 @@
+build
+node_modules
+.github

apps/charterafrica/eslint.config.js

@@ -25,7 +25,6 @@ module.exports = [
       "**/public/",
     ],
   },
-  ...eslintConfig,
   {
     settings: {
       "import/resolver": {
@@ -35,4 +34,5 @@ module.exports = [
       },
     },
   },
+  ...eslintConfig,
 ];

apps/civicsignalblog/eslint.config.js

@@ -24,20 +24,23 @@ module.exports = [
       "**/playwright-report/",
     ],
   },
-  ...eslintConfig,
-  {
-    settings: {
-      "import/resolver": {
-        webpack: {
-          config: "./eslint.webpack.config.js",
-        },
-        typescript: {
-          alwaysTryTypes: false, // we mostly have JS thus we don't need types automatically resolved
-          project: "./tsconfig.json",
+  ...eslintConfig.map((config) => {
+    return {
+      ...config,
+      settings: {
+        ...config.settings,
+        "import/resolver": {
+          webpack: {
+            config: "./eslint.webpack.config.js",
+          },
+          typescript: {
+            alwaysTryTypes: false,
+            project: "./tsconfig.json",
+          },
         },
       },
-    },
-  },
+    };
+  }),
   {
     rules: {
       "react/jsx-filename-extension": [1, { extensions: [".js", ".tsx"] }], // This rule allows JSX syntax in both .js and tsx files

apps/civicsignalblog/tsconfig.json

@@ -20,7 +20,8 @@
       "@/commons-ui/next/*": ["../../packages/commons-ui-next/src/*"],
       "@/commons-ui/payload/*": ["../../packages/commons-ui-payload/src/*"],
       "#civicsignalblog*": ["./src/*"]
-    }
+    },
+    "target": "ES2017"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["build", "dist", "node_modules"]

apps/climatemappedafrica/eslint.config.js

@@ -24,7 +24,6 @@ module.exports = [
       "**/playwright-report/",
     ],
   },
-  ...eslintConfig,
   {
     settings: {
       "import/resolver": {
@@ -34,4 +33,5 @@ module.exports = [
       },
     },
   },
+  ...eslintConfig,
 ];

apps/codeforafrica/eslint.config.js

@@ -24,7 +24,6 @@ module.exports = [
       "**/playwright-report/",
     ],
   },
-  ...eslintConfig,
   {
     settings: {
       "import/resolver": {
@@ -34,4 +33,5 @@ module.exports = [
       },
     },
   },
+  ...eslintConfig,
 ];

apps/codeforafrica/eslint.webpack.config.js

@@ -1,25 +1,26 @@
-module.exports = [
-  {
-    ignores: [
-      "**/node_modules",
-      "**/.pnp",
-      "**/.pnp.js",
-      "**/.pnpm-debug.log",
-      "**/dist/",
-      "**/coverage",
-      "**/.next/",
-      "**/out/",
-      "**/build/",
-      "**/.DS_Store",
-      "**/*.pem",
-      "**/npm-debug.log*",
-      "**/yarn-debug.log*",
-      "**/yarn-error.log*",
-      "**/.vercel",
-      "**/.now",
-      "**/.turbo",
-      "**/test-results/",
-      "**/playwright-report/",
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        type: "asset",
+        resourceQuery: /url/, // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+        use: ["@svgr/webpack"],
+      },
     ],
   },
-];
+  resolve: {
+    alias: {
+      "@/codeforafrica": path.resolve(__dirname, "src/"),
+      content: path.resolve(__dirname, "content/"),
+    },
+    extensions: [".js"],
+  },
+};

apps/promisetracker/eslint.config.js

@@ -24,7 +24,6 @@ module.exports = [
       "**/playwright-report/",
     ],
   },
-  ...eslintConfig,
   {
     settings: {
       "import/resolver": {
@@ -34,4 +33,5 @@ module.exports = [
       },
     },
   },
+  ...eslintConfig,
 ];

apps/roboshield/eslint.config.js

@@ -23,23 +23,19 @@ module.exports = [
       "**/dist/",
     ],
   },
-  ...eslintConfig.map((config) => {
-    return {
-      ...config,
-      settings: {
-        ...config.settings,
-        "import/resolver": {
-          webpack: {
-            config: "./eslint.webpack.config.js",
-          },
-          typescript: {
-            alwaysTryTypes: false,
-            project: "./tsconfig.json",
-          },
+  {
+    settings: {
+      "import/resolver": {
+        webpack: {
+          config: "./eslint.webpack.config.js",
+        },
+        typescript: {
+          alwaysTryTypes: false,
+          project: "./tsconfig.json",
         },
       },
-    };
-  }),
+    },
+  },
   {
     rules: {
       "react/jsx-filename-extension": [1, { extensions: [".js", ".tsx"] }], // This rule allows JSX syntax in both .js and tsx files
@@ -54,4 +50,5 @@ module.exports = [
       ],
     },
   },
+  ...eslintConfig,
 ];

apps/vpnmanager/eslint.config.js

@@ -28,13 +28,33 @@ module.exports = [
       ...config,
       settings: {
         ...config.settings,
+        "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
         "import/resolver": {
+          webpack: {
+            config: "./eslint.webpack.config.js",
+          },
           typescript: {
             alwaysTryTypes: false,
             project: "./tsconfig.json",
           },
         },
+        "import/parsers": {
+          "@typescript-eslint/parser": [".ts", ".tsx"],
+        },
       },
     };
   }),
+  {
+    rules: {
+      "react/jsx-filename-extension": [1, { extensions: [".js", ".tsx"] }], // This rule allows JSX syntax in both .js and tsx files
+      "import/extensions": [
+        "error",
+        "ignorePackages",
+        {
+          js: "never",
+          tsx: "never",
+        },
+      ],
+    },
+  },
 ];

apps/vpnmanager/eslint.webpack.config.js

@@ -0,0 +1,30 @@
+const path = require("path");
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.svg$/i,
+        type: "asset",
+        resourceQuery: /url/, // *.svg?url
+      },
+      {
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
+        use: ["@svgr/webpack"],
+      },
+    ],
+  },
+  resolve: {
+    alias: {
+      "@/vpnmanager": path.resolve(__dirname, "src/"),
+      content: path.resolve(__dirname, "content/"),
+    },
+    extensions: [".js"],
+  },
+  typescript: {
+    alwaysTryTypes: false,
+    project: "./tsconfig.json",
+  },
+};

apps/vpnmanager/package.json

@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint-check": "TIMING=1 next lint './'",
-    "lint": "TIMING=1 next lint --fix './'",
+    "lint": "TIMING=1 eslint --fix './'",
     "clean": "rm -rf .next .turbo node_modules",
     "jest": "jest --passWithNoTests",
     "playwright": "npx playwright test"

apps/vpnmanager/src/components/DesktopNavBar/DesktopNavBar.tsx

@@ -1,6 +1,5 @@
-import React, { ForwardedRef } from "react";
-
 import { Box, Grid, Grid2Props, SxProps } from "@mui/material";
+import React, { ForwardedRef } from "react";
 
 import type {
   Menu,

apps/vpnmanager/src/components/MobileNavBar/MobileNavBar.tsx

@@ -11,12 +11,12 @@ import {
 import { SxProps, styled } from "@mui/material/styles";
 import React, { ForwardedRef } from "react";
 
+import menuIcon from "@/vpnmanager/assets/icons/menu-icon.svg";
+import CloseIcon from "@/vpnmanager/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
 import type {
   Menu,
   SocialMediaLink,
 } from "@/vpnmanager/components/NavBarNavList";
-import menuIcon from "@/vpnmanager/assets/icons/menu-icon.svg";
-import CloseIcon from "@/vpnmanager/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
 import NavBarNavList from "@/vpnmanager/components/NavBarNavList";
 import NextImageButton from "@/vpnmanager/components/NextImageButton";
 

apps/vpnmanager/src/components/NavBarNavList/NavBarNavList.tsx

@@ -2,6 +2,7 @@ import { NavList, NavListItem, SocialMediaIconLink } from "@commons-ui/core";
 import { Link } from "@commons-ui/next";
 import type { LinkProps } from "@mui/material";
 import React from "react";
+
 import UserAvatar from "@/vpnmanager/components/UserAvatar";
 
 interface NavListItemProps extends LinkProps {}

apps/vpnmanager/src/components/Statistics/Statistics.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
+import { Section } from "@commons-ui/core";
+import { Link } from "@commons-ui/next";
 import {
   Box,
   Table,
@@ -13,12 +14,11 @@ import {
   Button,
   TablePagination,
 } from "@mui/material";
-import { Section } from "@commons-ui/core";
+import { format, startOfYesterday } from "date-fns";
 import { useRouter } from "next/router";
+import React, { useEffect, useRef, useState } from "react";
 
 import { fetchJson, formatBytes } from "@/vpnmanager/utils";
-import { Link } from "@commons-ui/next";
-import { format, startOfYesterday } from "date-fns";
 
 export interface Data {
   ID: number;
@@ -152,7 +152,7 @@ const Statistics: React.FC<Props> = ({ data: result }) => {
               name="date"
               type="date"
               variant="outlined"
-              value={filters["date"]}
+              value={filters.date}
               onChange={handleFilterChange}
               placeholder="Date Start"
               size="small"
@@ -234,7 +234,7 @@ const Statistics: React.FC<Props> = ({ data: result }) => {
             <Link
               target="_blank"
               ref={exportRef}
-              href={"#"}
+              href="#"
               download="statistics.csv"
             >
               <Button sx={{ width: "100%" }} size="small" variant="contained">

apps/vpnmanager/src/components/UserAvatar/UserAvatar.tsx

@@ -1,7 +1,6 @@
-import React from "react";
-import { useState } from "react";
 import { Avatar, Menu, MenuItem, IconButton, Typography } from "@mui/material";
 import { signOut, useSession } from "next-auth/react";
+import React, { useState } from "react";
 
 export default function UserAvatar() {
   const [anchorEl, setAnchorEl] = useState(null);

apps/vpnmanager/src/lib/data/database.ts

@@ -1,6 +1,7 @@
-import betterSqlite3 from "better-sqlite3";
-import path from "path";
 import fs from "fs";
+import path from "path";
+
+import betterSqlite3 from "better-sqlite3";
 
 const dbPath = path.resolve(process.cwd(), "data", "database.sqlite");
 const directory = path.dirname(dbPath);

apps/vpnmanager/src/lib/outline.ts

@@ -9,8 +9,11 @@ import { fetchJson } from "@/vpnmanager/utils";
 
 export class OutlineVPN {
   apiUrl: string;
+
   fingerprint?: string;
+
   timeout?: number;
+
   constructor(options: OutlineOptions) {
     this.apiUrl = options.apiUrl;
     this.fingerprint = options.fingerprint;
@@ -75,9 +78,8 @@ export class OutlineVPN {
 
     if (userUsage) {
       return userUsage;
-    } else {
-      throw new Error("No user found, check metrics is enabled");
     }
+    throw new Error("No user found, check metrics is enabled");
   }
 
   public async getShareMetrics(): Promise<OutlineServerMetrics> {