Merge pull request #685 from aXenDeveloper/feat/progress_bar

feat: Add progress bar

Author: aXenDeveloper

apps/docs/src/examples/tooltip.tsx

@@ -4,18 +4,21 @@ import { Button } from "@vitnode/core/components/ui/button";
 import {
   Tooltip,
   TooltipContent,
+  TooltipProvider,
   TooltipTrigger,
 } from "@vitnode/core/components/ui/tooltip";
 
 export default function TooltipDemo() {
   return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button variant="outline">Hover</Button>
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>Add to library</p>
-      </TooltipContent>
-    </Tooltip>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Add to library</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
   );
 }

packages/vitnode/package.json

@@ -109,6 +109,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@bprogress/next": "^3.2.12",
     "@dnd-kit/core": "^6.3.1",
     "@hono/swagger-ui": "^0.5.2",
     "@react-email/preview-server": "^5.0.4",

packages/vitnode/src/views/layouts/provider.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ProgressProvider } from "@bprogress/next/app";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
 import React from "react";
@@ -13,16 +14,11 @@ import { Toaster } from "../../components/ui/sonner";
 
 export const RootProvider = ({
   children,
-  theme,
   toaster,
-  debug,
+  config: { debug, theme, progressBar },
 }: {
   children: React.ReactNode;
-  debug?: VitNodeConfig["debug"];
-  theme?: Omit<
-    React.ComponentProps<typeof ThemeProvider>,
-    "attribute" | "disableTransitionOnChange" | "enableSystem"
-  >;
+  config: VitNodeConfig;
   toaster?: React.ComponentProps<typeof Toaster>;
 }) => {
   React.useEffect(() => {
@@ -59,7 +55,18 @@ export const RootProvider = ({
           position={toaster?.position ?? "top-center"}
           {...toaster}
         />
-        {children}
+        <ProgressProvider
+          {...progressBar}
+          color={progressBar?.color ?? "var(--primary)"}
+          height={progressBar?.height ?? "4px"}
+          shallowRouting={progressBar?.shallowRouting ?? true}
+          options={{
+            showSpinner: false,
+            ...progressBar?.options,
+          }}
+        >
+          {children}
+        </ProgressProvider>
       </ThemeProvider>
     </QueryClientProvider>
   );

packages/vitnode/src/views/layouts/root-layout.tsx

@@ -40,9 +40,7 @@ export const RootLayout = async ({
 
   return (
     <I18nProvider namespaces={[]}>
-      <RootProvider debug={config.debug} theme={config.theme}>
-        {children}
-      </RootProvider>
+      <RootProvider config={config}>{children}</RootProvider>
     </I18nProvider>
   );
 };

packages/vitnode/src/vitnode.config.ts

@@ -1,6 +1,8 @@
+import type { ProgressProvider } from "@bprogress/next/app";
 import type { drizzle } from "drizzle-orm/postgres-js";
 import type { ThemeProvider } from "next-themes";
 import type { IRateLimiterOptions } from "rate-limiter-flexible";
+import type React from "react";
 
 import type { CronAdapter } from "./api/lib/cron";
 import type { BuildPluginApiReturn } from "./api/lib/plugin";
@@ -26,6 +28,7 @@ export interface VitNodeConfig<
   };
   metadata: VitNodeApiConfig["metadata"];
   plugins: BuildPluginReturn[];
+  progressBar?: React.ComponentProps<typeof ProgressProvider>;
   theme?: Omit<
     React.ComponentProps<typeof ThemeProvider>,
     "attribute" | "disableTransitionOnChange" | "enableSystem"