add scripts , update vite config

.env

@@ -1,2 +1 @@
-VITE_BACKEND_PORT=9000
-VITE_SVELTOS_API_BASE_URL=http://localhost:${BACKEND_PORT}
+"VITE_BACKEND_PORT=9000" 

.eslintrc.json

@@ -17,6 +17,7 @@
     "es2020": true
   },
   "rules": {
-    "react/react-in-jsx-scope": "off"
+    "react/react-in-jsx-scope": "off",
+    "no-unused-vars": "error"
   }
-}
+}

.github/workflows/main-ci.yml

@@ -22,9 +22,9 @@ jobs:
       - name: Run linting
         run: npm run lint
 
-# Will be added later on
-#      - name: Run tests
-#        run: npm test -- --coverage
+      # Will be added later on
+      #      - name: Run tests
+      #        run: npm test -- --coverage
 
       - name: Build
         run: npm run build

package.json

@@ -6,7 +6,7 @@
   "description": "Sveltos User interface d ashboard",
   "scripts": {
     "lint": "npx prettier . --write",
-    "dev": " npx prettier . --write && vite",
+    "dev": "tsc &&  npx prettier . --write && vite",
     "build": "tsc && vite build",
     "preview": "vite preview"
   },
@@ -59,6 +59,7 @@
     "tailwindcss": "^3.3.3",
     "typescript": "^4.9.5",
     "vite": "^3.1.0",
-    "vite-plugin-eslint": "^1.8.1"
+    "vite-plugin-eslint": "^1.8.1",
+    "yargs": "^17.7.2"
   }
 }

scripts/help.js

@@ -0,0 +1,28 @@
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+
+const npmJobs = [
+  { command: "help", description: "Show available commands" },
+  { command: "lint", description: "Run ESLint to lint code " },
+  {
+    command: "dev",
+    description:
+      "Start the development server with optional port --port and backend port --backend options ",
+  },
+  { command: "build", description: "Build the project for production" },
+  { command: "preview", description: "Preview the built project" },
+];
+
+yargs(hideBin(process.argv))
+  .command(
+    "help-sveltos",
+    "Show help for NPM jobs",
+    (yargs) => {
+      console.log("Available jobs:");
+      npmJobs.forEach(({ command, description }) => {
+        console.log(`- ${command}: ${description}`);
+      });
+    },
+    (argv) => {},
+  )
+  .parse();

scripts/start.js

@@ -0,0 +1,35 @@
+import { hideBin } from "yargs/helpers";
+import yargs from "yargs";
+import { execSync } from "child_process";
+
+yargs(hideBin(process.argv))
+  .command(
+    "dev [port]",
+    "start the development server",
+    (yargs) => {
+      return yargs
+        .positional("port", {
+          describe: "port to run the server on",
+          default: 3000,
+        })
+        .option("backend", {
+          alias: "b",
+          describe: "The backend port",
+          type: "number",
+          default: 9000,
+        });
+    },
+    (argv) => {
+      console.log("Starting server with the following options:");
+      console.log(`- Port: ${argv.port}`);
+      console.log(`- Backend: ${argv.backend}`);
+      execSync(`echo "VITE_BACKEND_PORT=${argv.backend}" > .env`);
+      // Run TypeScript compiler
+      execSync(`tsc`);
+
+      // Run Prettier
+      execSync(`npx prettier --write .`);
+      execSync(`vite --port ${argv.port}`, { stdio: "inherit" });
+    },
+  )
+  .parse();

src/modules/clusters/cluster-information/ClusterInfo.tsx

@@ -1,44 +1,12 @@
-import {
-  Blocks,
-  ChevronLeft,
-  Home,
-  LineChart,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Upload,
-  Users2,
-} from "lucide-react";
-
-import { Badge } from "@/components/ui/badge";
-
+import { Blocks } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Card,
   CardContent,
   CardDescription,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-
-import { Input } from "@/components/ui/input";
-
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import { useNavigate } from "react-router-dom";
 import { ClusterHeading } from "@/modules/clusters/cluster-information/components/clusterHeading";
 import { LabelsCard } from "@/modules/clusters/cluster-information/components/LabelsCard";
 import { ResourceTable } from "@/modules/clusters/cluster-information/components/ResourceTable";

src/modules/clusters/clusters-list/components/ClusterList.tsx

@@ -43,7 +43,7 @@ export const ClusterList = ({
           </TabsList>
         </Tabs>
         <div className="flex flex-wrap mb-4 py-4">
-          {data.map((cluster) => (
+          {data.map((cluster: any) => (
             <div key={cluster.name} className="w-full md:w-1/2 p-2">
               <ClusterCard
                 onClick={() => navigate(`/clusters/${cluster.name}`)}

vite.config.ts

@@ -10,13 +10,7 @@ export default defineConfig(({ command }) => {
 
   return {
     base: isProd ? basenameProd : "",
-    plugins: [
-      react(),
-      eslintPlugin({
-        include: ["src/**/*.ts", "src/**/*.tsx"],
-        fix: true,
-      }),
-    ],
+    plugins: [react()],
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),