Merge pull request 'add static code analysis' (#148) from feat/lint into main

2023-08-19 08:14:03 +00:00 · 2023-08-19 08:14:03 +00:00 · 475aad25fc
commit 475aad25fc
parent 4074091ca4 33f85380ae
11 changed files with 77 additions and 33 deletions
--- a/pkgs/ui/.eslintrc.json
+++ b/pkgs/ui/.eslintrc.json
@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+  "root": true,
+  "extends": ["next/core-web-vitals", "plugin:tailwindcss/recommended"]
 }
--- a/pkgs/ui/nix/foverrides.nix
+++ b/pkgs/ui/nix/foverrides.nix
@ -62,6 +62,9 @@ in
      built.override.preBuild = ''
        export HOME=./home
        ln -s ${pkgs.roboto}/share/fonts ./src/fonts
+
+        echo "----------- RUNNING LINT ------------"
+        next lint --max-warnings 0
      '';

      built.tree =
--- a/pkgs/ui/nix/pdefs.nix
+++ b/pkgs/ui/nix/pdefs.nix
@ -4706,6 +4706,35 @@
          version = "5.0.0-canary-7118f5dd7-20230705";
        };
      };
+      eslint-plugin-tailwindcss = {
+        "3.13.0" = {
+          depInfo = {
+            fast-glob = {
+              descriptor = "^3.2.5";
+              pin = "3.3.1";
+              runtime = true;
+            };
+            postcss = {
+              descriptor = "^8.4.4";
+              pin = "8.4.27";
+              runtime = true;
+            };
+          };
+          fetchInfo = {
+            narHash = "sha256-rWd+p9Sa4jcjEo886w2NAIy5AYjccC2pQXuGyPKtGw0=";
+            type = "tarball";
+            url = "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.13.0.tgz";
+          };
+          ident = "eslint-plugin-tailwindcss";
+          ltype = "file";
+          peerInfo = {
+            tailwindcss = {
+              descriptor = "^3.3.2";
+            };
+          };
+          version = "3.13.0";
+        };
+      };
      eslint-scope = {
        "7.2.2" = {
          depInfo = {
@ -6686,6 +6715,10 @@
              descriptor = "13.4.12";
              pin = "13.4.12";
            };
+            eslint-plugin-tailwindcss = {
+              descriptor = "^3.13.0";
+              pin = "3.13.0";
+            };
            hex-rgb = {
              descriptor = "^5.0.0";
              pin = "5.0.0";
@ -7428,6 +7461,10 @@
              dev = true;
              key = "semver/6.3.1";
            };
+            "node_modules/eslint-plugin-tailwindcss" = {
+              dev = true;
+              key = "eslint-plugin-tailwindcss/3.13.0";
+            };
            "node_modules/eslint-scope" = {
              dev = true;
              key = "eslint-scope/7.2.2";
--- a/pkgs/ui/package-lock.json
+++ b/pkgs/ui/package-lock.json
@ -31,6 +31,7 @@
        "@types/w3c-web-usb": "^1.0.6",
        "eslint": "8.46.0",
        "eslint-config-next": "13.4.12",
+        "eslint-plugin-tailwindcss": "^3.13.0",
        "prettier": "^3.0.1",
        "prettier-plugin-tailwindcss": "^0.4.1",
        "typescript": "5.1.6"
@ -2469,6 +2470,22 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.13.0.tgz",
+      "integrity": "sha512-Fcep4KDRLWaK3KmkQbdyKHG0P4GdXFmXdDaweTIPcgOP60OOuWFbh1++dufRT28Q4zpKTKaHwTsXPJ4O/EjU2Q==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.3.2"
+      }
+    },
    "node_modules/eslint-scope": {
      "version": "7.2.2",
      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
--- a/pkgs/ui/package.json
+++ b/pkgs/ui/package.json
@ -29,14 +29,15 @@
    "tailwindcss": "3.3.3"
  },
  "devDependencies": {
-    "typescript": "5.1.6",
-    "eslint": "8.46.0",
-    "eslint-config-next": "13.4.12",
    "@types/node": "20.4.7",
    "@types/react": "18.2.18",
    "@types/react-dom": "18.2.7",
    "@types/w3c-web-usb": "^1.0.6",
+    "eslint": "8.46.0",
+    "eslint-config-next": "13.4.12",
+    "eslint-plugin-tailwindcss": "^3.13.0",
    "prettier": "^3.0.1",
-    "prettier-plugin-tailwindcss": "^0.4.1"
+    "prettier-plugin-tailwindcss": "^0.4.1",
+    "typescript": "5.1.6"
  }
 }
--- a/pkgs/ui/src/app/layout.tsx
+++ b/pkgs/ui/src/app/layout.tsx
@ -88,7 +88,7 @@ export default function RootLayout({
                  !showSidebar && translate
                } flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
              >
-                <div className="min-h-10 static top-0 mb-2 py-2">
+                <div className="static top-0 mb-2 py-2">
                  <div className="grid grid-cols-3">
                    <div className="col-span-1">
                      <IconButton
--- a/pkgs/ui/src/app/nodes/NodeList.tsx
+++ b/pkgs/ui/src/app/nodes/NodeList.tsx
@ -235,7 +235,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) {
      { name: "Offline", value: offline, color: theme.palette.error.main },
      { name: "Pending", value: pending, color: theme.palette.warning.main },
    ];
-  }, [tableData]);
+  }, [tableData, theme]);

  const cardData = React.useMemo(() => {
    return pieData
--- a/pkgs/ui/src/app/page.tsx
+++ b/pkgs/ui/src/app/page.tsx
@ -12,9 +12,11 @@ interface DashboardCardProps {
  sx?: string;
 }
 const DashboardCard = (props: DashboardCardProps) => {
-  const { children, rowSpan = 1, sx = "" } = props;
+  const { children, rowSpan, sx = "" } = props;
  return (
-    <div className={tw`col-span-full row-span-${rowSpan} xl:col-span-1 ${sx}`}>
+    <div
+      className={tw`col-span-full row-span-${rowSpan || 1} xl:col-span-1 ${sx}`}
+    >
      {children}
    </div>
  );
@ -30,28 +32,10 @@ const DashboardPanel = (props: DashboardPanelProps) => {
  );
 };

-interface SplitDashboardCardProps {
-  children?: React.ReactNode[];
-}
-const SplitDashboardCard = (props: SplitDashboardCardProps) => {
-  const { children } = props;
-  return (
-    <div className="col-span-full row-span-1 lg:col-span-1">
-      <div className="grid h-full grid-cols-1 gap-4">
-        {children?.map((row, idx) => (
-          <div key={idx} className="col-span-full row-span-1  ">
-            {row}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
-
 export default function Dashboard() {
  return (
    <div className="flex h-screen w-full">
-      <div className="grid w-full auto-cols-min grid-flow-row auto-rows-min grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
+      <div className="grid w-full auto-rows-max grid-cols-1 grid-rows-none gap-4 xl:grid-cols-2 2xl:grid-cols-3 ">
        <DashboardCard rowSpan={2}>
          <NetworkOverview />
        </DashboardCard>
--- a/pkgs/ui/src/components/dashboard/appOverview/index.tsx
+++ b/pkgs/ui/src/components/dashboard/appOverview/index.tsx
@ -18,7 +18,7 @@ const AppCard = (props: AppCardProps) => {
       align-middle shadow-md ring-2 ring-inset ring-violet-500 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-300"
    >
      <div className="flex w-full flex-col justify-center">
-        <div className="h-22 w-22 my-1 flex items-center justify-center self-center overflow-visible p-1">
+        <div className="my-1 flex h-[22] w-[22] items-center justify-center self-center overflow-visible p-1">
          <Image
            src={iconPath}
            alt={`${name}-app-icon`}
--- a/pkgs/ui/src/components/noDataOverlay/index.tsx
+++ b/pkgs/ui/src/components/noDataOverlay/index.tsx
@ -1,3 +1,4 @@
+/* eslint-disable tailwindcss/no-custom-classname */
 "use client";

 import * as React from "react";
--- a/pkgs/ui/src/components/sidebar/index.tsx
+++ b/pkgs/ui/src/components/sidebar/index.tsx
@ -78,7 +78,7 @@ export function Sidebar(props: SidebarProps) {
        show ? showSidebar : hideSidebar
      } z-9999 dark:bg-boxdark static  left-0 top-0 flex h-screen w-14 flex-col overflow-x-hidden overflow-y-hidden bg-zinc-950 transition duration-150 ease-in-out lg:w-64`}
    >
-      <div className="py-5.5 lg:py-6.5 flex items-center justify-between gap-2 overflow-hidden px-0 lg:px-6">
+      <div className="flex items-center justify-between gap-2 overflow-hidden px-0 py-5 lg:p-6">
        <div className="mt-8 hidden w-full text-center font-semibold text-white lg:block">
          <Image
            src="/logo.svg"
@ -132,15 +132,15 @@ export function Sidebar(props: SidebarProps) {
        </List>

        <Divider flexItem className="mx-8 my-10 hidden bg-zinc-600 lg:block" />
-        <div className="max-w-60 shadow-default mx-auto mb-8 hidden w-full rounded-sm px-4 py-6 text-center align-bottom lg:block">
-          <h3 className="mb-1 w-full font-semibold text-white">
+        <div className="mx-auto mb-8 hidden w-full max-w-xs rounded-sm px-4 py-6 text-center align-bottom shadow-sm lg:block">
+          <h3 className="mb-2 w-full font-semibold text-white">
            Clan.lol Admin
          </h3>
          <a
            href=""
            target="_blank"
            rel="nofollow"
-            className="bg-primary w-full rounded-md p-2 text-center text-white hover:bg-opacity-95"
+            className="inline-block w-full rounded-md p-2 text-center text-white hover:text-violet-400/95"
          >
            Donate
          </a>