feat(onboarding): add stepper, contextual preview and shell

src/features/onboarding/onboarding-preview.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useOnboarding } from "@onboardjs/react";
+import { Loader2 } from "lucide-react";
+
+const DASHBOARD_PREVIEW_STEP_IDS = [
+    "account-info",
+    "security",
+    "preferences",
+    "org-create",
+];
+
+export const OnboardingPreview = () => {
+    const { state } = useOnboarding();
+    const stepId = state?.currentStep?.id;
+
+    if (stepId === "agent-waiting") {
+        return (
+            <div className="flex h-full items-center justify-center">
+                <Loader2 className="size-10 animate-spin text-primary" />
+            </div>
+        );
+    }
+
+    if (stepId === "finish") {
+        return null;
+    }
+
+    const org = state?.context.flowData.org as { name?: string; logoDataUrl?: string } | undefined;
+    const preferences = state?.context.flowData.preferences as { theme?: string; avatarDataUrl?: string } | undefined;
+
+    const isDashboardPreview = typeof stepId === "string" && DASHBOARD_PREVIEW_STEP_IDS.includes(stepId);
+
+    return (
+        <div className="flex h-full w-full items-center justify-center p-6">
+            <div
+                className={`w-full max-w-sm rounded-lg border border-white/10 overflow-hidden ${preferences?.theme === "light" ? "bg-white text-black" : "bg-zinc-900 text-white"}`}
+            >
+                <div className="flex items-center gap-2 border-b border-white/10 px-4 py-3">
+                    {org?.logoDataUrl ? (
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img src={org.logoDataUrl} alt="" className="size-5 rounded" />
+                    ) : (
+                        <div className="size-5 rounded bg-primary" />
+                    )}
+                    <span className="text-sm font-medium">{org?.name || "Your organisation"}</span>
+                </div>
+                {isDashboardPreview && (
+                    <div className="flex">
+                        <div className="w-16 border-r border-white/10 p-2 flex flex-col gap-2">
+                            {[...Array(5)].map((_, i) => (
+                                <div key={i} className="h-2 rounded bg-white/10" />
+                            ))}
+                        </div>
+                        <div className="flex-1 p-3 flex flex-col gap-2">
+                            <div className="h-3 w-1/2 rounded bg-white/10" />
+                            <div className="h-16 rounded bg-white/5" />
+                            <div className="h-16 rounded bg-white/5" />
+                        </div>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

src/features/onboarding/onboarding-shell.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useOnboarding } from "@onboardjs/react";
+import { Button } from "@/components/ui/button";
+import { OnboardingStepper } from "@/features/onboarding/onboarding-stepper";
+import { OnboardingPreview } from "@/features/onboarding/onboarding-preview";
+
+export const OnboardingShell = () => {
+    const { state, previous, skip, renderStep } = useOnboarding();
+
+    if (!state) return null;
+
+    const showSplit = state.currentStep?.id !== "agent-waiting" && state.currentStep?.id !== "finish";
+
+    return (
+        <div className="min-h-screen bg-zinc-950 text-white flex items-center justify-center p-4">
+            <div className="w-full max-w-4xl rounded-2xl bg-zinc-900 border border-white/10 shadow-2xl overflow-hidden flex flex-col md:flex-row min-h-[560px]">
+                <div className="flex-1 flex flex-col gap-6 p-8">
+                    <OnboardingStepper />
+                    <div className="flex-1">{renderStep()}</div>
+                    <div className="flex justify-between">
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            onClick={() => previous()}
+                            disabled={state.isFirstStep || state.isLoading}
+                        >
+                            Back
+                        </Button>
+                        {state.isSkippable && (
+                            <Button
+                                type="button"
+                                variant="ghost"
+                                onClick={() => skip()}
+                                disabled={state.isLoading}
+                            >
+                                Skip
+                            </Button>
+                        )}
+                    </div>
+                </div>
+                {showSplit && (
+                    <div className="hidden md:block w-[360px] border-l border-white/10 bg-zinc-950">
+                        <OnboardingPreview />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

src/features/onboarding/onboarding-stepper.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { useOnboarding } from "@onboardjs/react";
+import { Progress } from "@/components/ui/progress";
+
+export const OnboardingStepper = () => {
+    const { state } = useOnboarding();
+
+    if (!state) return null;
+
+    return (
+        <div className="flex flex-col gap-2 w-full max-w-sm">
+            <div className="flex justify-between text-xs text-muted-foreground">
+                <span>Step {state.currentStepNumber} of {state.totalSteps}</span>
+                <span>{Math.round(state.progressPercentage)}%</span>
+            </div>
+            <Progress value={state.progressPercentage} />
+        </div>
+    );
+};