first commit onboarda (#69)

* first commit onboarda

* update packages

* onborda setup (#71)

* onborda setup

* update lock


Co-authored-by: Matt <mattsince87@gmail.com>

apps/www/package.json

@@ -47,6 +47,7 @@
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "nodemailer": "^6.9.7",
+    "onborda": "^1.2.2",
     "openai": "^4.16.1",
     "postmark": "^3.1.1",
     "prop-types": "^15.8.1",

apps/www/src/app/(dashboard)/dashboard/page.tsx

@@ -9,6 +9,7 @@ import { AddApiKeyButton } from "@/components/buttons/AddApiKeyButton";
 import { AddChannelButton } from "@/components/buttons/AddChannelButton";
 import { AddProjectButton } from "@/components/buttons/AddProjectButton";
 import { AddPropertyButton } from "@/components/buttons/AddPropertyButton";
+import { StartOnbordaButton } from "@/components/buttons/StartOnbordaButton";
 import EventsDashboard from "@/components/dashboard/EventsDashboard";
 import { DashboardHeader } from "@/components/dashboard/header";
 import { DashboardShell } from "@/components/dashboard/shell";
@@ -133,6 +134,16 @@ export default async function DashboardPage() {
               You need to generate an API key first
             </EmptyPlaceholder.Description>
             <AddApiKeyButton />
+            <div className="mt-4 space-y-4">
+              <StartOnbordaButton />
+
+              <div
+                id="onborda-step1"
+                className="flex items-center rounded-sm border border-border p-4 px-8"
+              >
+                This is the first step
+              </div>
+            </div>
           </EmptyPlaceholder>
         ) : (
           // Render EventsTable if there are Events

apps/www/src/components/buttons/AddChannelButton.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { createChannel } from "@/actions/create-channel";
+import { toast } from "sonner";
 
 import { Button } from "@dingify/ui/components/button";
 import {
@@ -16,7 +17,6 @@ import {
 } from "@dingify/ui/components/dialog";
 import { Input } from "@dingify/ui/components/input";
 import { Label } from "@dingify/ui/components/label";
-import { toast } from "sonner";
 
 export function AddChannelButton() {
   const [channelName, setChannelName] = useState("");

apps/www/src/components/buttons/StartOnbordaButton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useEffect } from "react";
+import { useOnborda } from "onborda";
+
+import { Button } from "@dingify/ui/components/button";
+
+export function StartOnbordaButton() {
+  const { startOnborda } = useOnborda();
+  const handleStartOnborda = () => {
+    startOnborda();
+  };
+
+  return (
+    <Button onClick={handleStartOnborda} variant="outline" size="lg">
+      Start Onborda 🚀
+    </Button>
+  );
+}

apps/www/src/components/landing/hero-section.tsx

@@ -18,7 +18,10 @@ export default function HeroSectionNew2() {
       id="hero"
       className="relative mx-auto mt-32 max-w-[80rem] px-6 text-center md:px-8"
     >
-      <div className="backdrop-filter-[12px] group inline-flex h-7 translate-y-[-1rem] animate-fade-in items-center justify-between gap-1 rounded-full border border-white/5 bg-white/10 px-3 text-xs text-white opacity-0 transition-all ease-in hover:cursor-pointer hover:bg-white/20 dark:text-black">
+      <div
+        id="onborda-step1"
+        className="backdrop-filter-[12px] group inline-flex h-7 translate-y-[-1rem] animate-fade-in items-center justify-between gap-1 rounded-full border border-white/5 bg-white/10 px-3 text-xs text-white opacity-0 transition-all ease-in hover:cursor-pointer hover:bg-white/20 dark:text-black"
+      >
         <TextShimmer className="inline-flex items-center justify-center">
           <span>✨ Introducing Dingify</span>{" "}
           <ArrowRightIcon className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />

apps/www/src/components/providers.tsx

@@ -3,16 +3,40 @@
 import { SessionProvider } from "next-auth/react";
 import { ThemeProvider as NextThemesProvider } from "next-themes";
 import { ThemeProviderProps } from "next-themes/dist/types";
+import { Onborda, OnbordaProvider, Step } from "onborda";
 import { Provider as BalancerProvider } from "react-wrap-balancer";
 
 import { TooltipProvider } from "@dingify/ui/components/tooltip";
 
+// Example steps array
+const steps: Step[] = [
+  {
+    icon: <>👋</>,
+    title: "Step 1",
+    content: <>This is the first step</>,
+    selector: "#onborda-step1",
+    side: "top",
+    showControls: true,
+    pointerPadding: 10,
+    pointerRadius: 10,
+    nextRoute: "/nextStep",
+    prevRoute: "/previousStep",
+  },
+  // Add more steps as needed
+];
+
 export function Providers({ children, ...props }: ThemeProviderProps) {
   return (
     <NextThemesProvider {...props}>
       <SessionProvider>
         <BalancerProvider>
-          <TooltipProvider delayDuration={0}>{children}</TooltipProvider>
+          <TooltipProvider delayDuration={0}>
+            <OnbordaProvider>
+              <Onborda steps={steps} showOnborda={true}>
+                {children}
+              </Onborda>
+            </OnbordaProvider>
+          </TooltipProvider>
         </BalancerProvider>
       </SessionProvider>
     </NextThemesProvider>