ui for onboarding

apps/dashboard/src/app/(app)/[organizationSlug]/page.tsx

@@ -1,5 +1,6 @@
 import { LogoSquare } from '@/components/logo';
 import { ProjectCard } from '@/components/projects/project-card';
+import { SignOutButton } from '@clerk/nextjs';
 import { notFound, redirect } from 'next/navigation';
 
 import {
@@ -62,6 +63,7 @@ export default async function Page({
 
   return (
     <div className="mx-auto flex w-full max-w-xl flex-col gap-4 p-4 pt-20 ">
+      <SignOutButton />
       <h1 className="text-xl font-medium">Select project</h1>
       {projects.map((item) => (
         <ProjectCard key={item.id} {...item} />

apps/dashboard/src/app/(onboarding)/get-started/get-started.tsx

@@ -0,0 +1,97 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { SignInButton, useSignIn, useSignUp } from '@clerk/nextjs';
+import type { OAuthStrategy } from '@clerk/nextjs/dist/types/server';
+import { toast } from 'sonner';
+
+import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
+
+const GetStarted = () => {
+  const { signIn } = useSignIn();
+
+  const signInWith = (strategy: OAuthStrategy) => {
+    if (!signIn) {
+      return toast.error('Sign in is not available at the moment');
+    }
+    return signIn.authenticateWithRedirect({
+      strategy,
+      redirectUrl: '/sso-callback',
+      redirectUrlComplete: '/onboarding',
+    });
+  };
+
+  return (
+    <OnboardingLayout
+      title="Create your account"
+      description={
+        <OnboardingDescription>
+          Create your account and start taking control of your data.
+        </OnboardingDescription>
+      }
+    >
+      <div className="flex flex-col gap-4 md:max-w-sm">
+        <button
+          onClick={() => signInWith('oauth_google')}
+          type="button"
+          className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-gray-200 bg-white px-4 text-sm text-gray-600 transition-all hover:bg-gray-100"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            className="h-4 w-4"
+          >
+            <path
+              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+              fill="#4285F4"
+            ></path>
+            <path
+              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+              fill="#34A853"
+            ></path>
+            <path
+              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+              fill="#FBBC05"
+            ></path>
+            <path
+              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+              fill="#EA4335"
+            ></path>
+            <path d="M1 1h22v22H1z" fill="none"></path>
+          </svg>
+          <p className="">Continue with Google</p>
+        </button>
+        <button
+          onClick={() => signInWith('oauth_github')}
+          type="button"
+          className="group flex h-10 w-full items-center justify-center space-x-2 rounded-md border border-black bg-black px-4 text-sm text-white transition-all hover:bg-black/70"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            className="h-4 w-4"
+          >
+            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
+          </svg>
+          <p className="">Continue with GitHub</p>
+        </button>
+      </div>
+      <p className="mt-4 text-sm text-gray-500">
+        Already have an account?{' '}
+        <a
+          className="font-semibold text-gray-500 transition-colors hover:text-black"
+          href="/login"
+        >
+          Sign in
+        </a>
+      </p>
+    </OnboardingLayout>
+  );
+};
+
+export default GetStarted;

apps/dashboard/src/app/(onboarding)/get-started/page.tsx

@@ -0,0 +1,15 @@
+import { auth } from '@clerk/nextjs';
+import { redirect } from 'next/navigation';
+
+import GetStartedClient from './get-started';
+
+// Sign up
+const GetStarted = () => {
+  const session = auth();
+  if (session.userId) {
+    return redirect('/');
+  }
+  return <GetStartedClient />;
+};
+
+export default GetStarted;

apps/dashboard/src/app/(onboarding)/layout.tsx

@@ -0,0 +1,43 @@
+import { Logo } from '@/components/logo';
+
+import SkipOnboarding from './skip-onboarding';
+import Steps from './steps';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Page = ({ children }: Props) => {
+  return (
+    <>
+      <div className="absolute inset-0 hidden md:grid md:grid-cols-[30vw_1fr] lg:grid-cols-[30vw_1fr]">
+        <div className=""></div>
+        <div className="border-l border-border bg-background"></div>
+      </div>
+      <div className="relative min-h-screen bg-background md:bg-transparent">
+        <div className="border-b border-border bg-background">
+          <div className="mx-auto flex h-14 w-full items-center justify-between px-4 md:max-w-[95vw] lg:max-w-[80vw]">
+            <Logo />
+            <SkipOnboarding />
+          </div>
+        </div>
+        <div className="mx-auto w-full md:max-w-[95vw] lg:max-w-[80vw]">
+          <div className="grid md:grid-cols-[25vw_1fr] lg:grid-cols-[20vw_1fr]">
+            <div className="max-w-screen flex flex-col gap-4 overflow-hidden bg-slate-100 p-4 pr-0 md:bg-transparent md:py-14">
+              <div>
+                <div className="text-xs font-bold uppercase text-slate-700">
+                  Welcome to Openpanel
+                </div>
+                <div className="text-xl font-medium">Get started</div>
+              </div>
+              <Steps />
+            </div>
+            <div className="h-full p-4 md:p-14">{children}</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Page;

apps/dashboard/src/app/(onboarding)/onboarding-layout.tsx

@@ -0,0 +1,37 @@
+import { cn } from '@/utils/cn';
+
+type Props = {
+  children: React.ReactNode;
+  className?: string;
+  title: string;
+  description?: React.ReactNode;
+};
+
+export const OnboardingDescription = ({
+  children,
+  className,
+}: Pick<Props, 'children' | 'className'>) => (
+  <div className={cn('font-medium text-muted-foreground', className)}>
+    {children}
+  </div>
+);
+
+const OnboardingLayout = ({
+  title,
+  description,
+  children,
+  className,
+}: Props) => {
+  return (
+    <div className={cn('flex max-w-3xl flex-col gap-4', className)}>
+      <div className="mb-4">
+        <h1 className="text-2xl font-medium">{title}</h1>
+        {description}
+      </div>
+
+      {children}
+    </div>
+  );
+};
+
+export default OnboardingLayout;

apps/dashboard/src/app/(onboarding)/onboarding/connect/page.tsx

@@ -0,0 +1,79 @@
+import { ButtonContainer } from '@/components/button-container';
+import { Button, LinkButton } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+import Link from 'next/link';
+
+import OnboardingLayout, {
+  OnboardingDescription,
+} from '../../onboarding-layout';
+
+function CheckboxGroup({
+  label,
+  description,
+  ...props
+}: { label: string; description: string } & CheckboxProps) {
+  const randId = Math.random().toString(36).substring(7);
+  return (
+    <label
+      className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
+      htmlFor={randId}
+    >
+      <div>
+        <Checkbox {...props} id={randId} />
+      </div>
+      <div>
+        <div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
+        <div className="text-sm text-muted-foreground">{description}</div>
+      </div>
+    </label>
+  );
+}
+
+const Connect = () => {
+  return (
+    <OnboardingLayout
+      title="Connect your data"
+      description={
+        <OnboardingDescription>
+          Create your account and start taking control of your data.
+        </OnboardingDescription>
+      }
+    >
+      <div className="flex flex-col divide-y">
+        <CheckboxGroup
+          label="Website"
+          description="Track events and conversion for your website"
+        />
+        <CheckboxGroup
+          label="App"
+          description="Track events and conversion for your app"
+        />
+        <CheckboxGroup
+          label="Backend"
+          description="Track events and conversion for your backend/api"
+        />
+      </div>
+
+      <ButtonContainer>
+        <LinkButton
+          href="/onboarding/tracking"
+          size="lg"
+          className="min-w-28 self-start"
+          variant={'secondary'}
+        >
+          Back
+        </LinkButton>
+        <LinkButton
+          href="/onboarding/verify"
+          size="lg"
+          className="min-w-28 self-start"
+        >
+          Next
+        </LinkButton>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Connect;

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

@@ -0,0 +1,76 @@
+import { ButtonContainer } from '@/components/button-container';
+import { LinkButton } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+
+import OnboardingLayout, { OnboardingDescription } from '../onboarding-layout';
+
+function CheckboxGroup({
+  label,
+  description,
+  ...props
+}: { label: string; description: string } & CheckboxProps) {
+  const randId = Math.random().toString(36).substring(7);
+  return (
+    <label
+      className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
+      htmlFor={randId}
+    >
+      <div>
+        <Checkbox {...props} id={randId} />
+      </div>
+      <div>
+        <div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
+        <div className="text-sm text-muted-foreground">{description}</div>
+      </div>
+    </label>
+  );
+}
+
+const Tracking = () => {
+  return (
+    <OnboardingLayout
+      title="What do you want to track?"
+      description={
+        <OnboardingDescription>
+          Create your account and start taking control of your data.
+        </OnboardingDescription>
+      }
+    >
+      <div className="flex flex-col divide-y">
+        <CheckboxGroup
+          label="Website"
+          description="Track events and conversion for your website"
+        />
+        <CheckboxGroup
+          label="App"
+          description="Track events and conversion for your app"
+        />
+        <CheckboxGroup
+          label="Backend"
+          description="Track events and conversion for your backend/api"
+        />
+      </div>
+
+      <ButtonContainer>
+        <LinkButton
+          href="/onboarding"
+          size="lg"
+          className="min-w-28 self-start"
+          variant={'secondary'}
+        >
+          Back
+        </LinkButton>
+        <LinkButton
+          href="/onboarding/connect"
+          size="lg"
+          className="min-w-28 self-start"
+        >
+          Next
+        </LinkButton>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Tracking;

apps/dashboard/src/app/(onboarding)/onboarding/verify/page.tsx

@@ -0,0 +1,75 @@
+import { ButtonContainer } from '@/components/button-container';
+import { Button, LinkButton } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import type { CheckboxProps } from '@radix-ui/react-checkbox';
+import Link from 'next/link';
+
+import OnboardingLayout, {
+  OnboardingDescription,
+} from '../../onboarding-layout';
+
+function CheckboxGroup({
+  label,
+  description,
+  ...props
+}: { label: string; description: string } & CheckboxProps) {
+  const randId = Math.random().toString(36).substring(7);
+  return (
+    <label
+      className="flex gap-4 py-6 transition-colors hover:bg-slate-100"
+      htmlFor={randId}
+    >
+      <div>
+        <Checkbox {...props} id={randId} />
+      </div>
+      <div>
+        <div className="mb-1 mt-0.5 font-medium leading-none">{label}</div>
+        <div className="text-sm text-muted-foreground">{description}</div>
+      </div>
+    </label>
+  );
+}
+
+const Tracking = () => {
+  return (
+    <OnboardingLayout
+      title="Verify that you get events"
+      description={
+        <OnboardingDescription>
+          Create your account and start taking control of your data.
+        </OnboardingDescription>
+      }
+    >
+      <div className="flex flex-col divide-y">
+        <CheckboxGroup
+          label="Website"
+          description="Track events and conversion for your website"
+        />
+        <CheckboxGroup
+          label="App"
+          description="Track events and conversion for your app"
+        />
+        <CheckboxGroup
+          label="Backend"
+          description="Track events and conversion for your backend/api"
+        />
+      </div>
+
+      <ButtonContainer>
+        <LinkButton
+          href="/onboarding/connect"
+          size="lg"
+          className="min-w-28 self-start"
+          variant={'secondary'}
+        >
+          Back
+        </LinkButton>
+        <LinkButton href="/" size="lg" className="min-w-28 self-start">
+          Your dashboard
+        </LinkButton>
+      </ButtonContainer>
+    </OnboardingLayout>
+  );
+};
+
+export default Tracking;

apps/dashboard/src/app/(onboarding)/skip-onboarding.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { ChevronLastIcon } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const SkipOnboarding = () => {
+  const pathname = usePathname();
+  if (!pathname.startsWith('/onboarding')) return null;
+  return (
+    <Link
+      href="/"
+      className="flex items-center gap-2 text-sm text-muted-foreground"
+    >
+      Skip onboarding
+      <ChevronLastIcon size={16} />
+    </Link>
+  );
+};
+
+export default SkipOnboarding;

apps/dashboard/src/app/(onboarding)/sso-callback/page.tsx

@@ -0,0 +1,7 @@
+import { AuthenticateWithRedirectCallback } from '@clerk/nextjs';
+
+const SSOCallback = () => {
+  return <AuthenticateWithRedirectCallback />;
+};
+
+export default SSOCallback;

apps/dashboard/src/app/(onboarding)/steps.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import { cn } from '@/utils/cn';
+import { ArrowRightCircleIcon, CheckCheckIcon, Edit2Icon } from 'lucide-react';
+import { usePathname } from 'next/navigation';
+
+type Step = {
+  name: string;
+  status: 'completed' | 'current' | 'pending';
+  href: string;
+};
+
+type Props = {
+  className?: string;
+};
+
+function useSteps(path: string) {
+  console.log('path', path);
+
+  const steps: Step[] = [
+    {
+      name: 'Account creation',
+      status: 'pending',
+      href: '/get-started',
+    },
+    {
+      name: 'Tracking information',
+      status: 'pending',
+      href: '/onboarding',
+    },
+    {
+      name: 'Connect your data',
+      status: 'pending',
+      href: '/onboarding/connect',
+    },
+    {
+      name: 'Verify',
+      status: 'pending',
+      href: '/onboarding/verify',
+    },
+  ];
+
+  const matchIndex = steps.findLastIndex((step) => path.startsWith(step.href));
+
+  return steps.map((step, index) => {
+    if (index < matchIndex) {
+      return { ...step, status: 'completed' };
+    }
+    if (index === matchIndex) {
+      return { ...step, status: 'current' };
+    }
+    return step;
+  });
+}
+
+const Steps = ({ className }: Props) => {
+  const path = usePathname();
+  const steps = useSteps(path);
+  const currentIndex = steps.findIndex((i) => i.status === 'current');
+  return (
+    <div className="relative">
+      <div className="absolute bottom-4 left-4 top-4 w-px bg-slate-300"></div>
+      <div
+        className="absolute left-4 top-4 w-px bg-blue-600"
+        style={{
+          height: `calc(${((currentIndex + 1) / steps.length) * 100}% - 3.5rem)`,
+        }}
+      ></div>
+      <div
+        className={cn(
+          'relative flex gap-4 overflow-hidden md:-ml-3 md:flex-col md:gap-8',
+          className
+        )}
+      >
+        {steps.map((step, index) => (
+          <div
+            className={cn(
+              'flex flex-shrink-0 items-center gap-2 self-start px-3 py-1.5',
+              step.status === 'current' &&
+                'rounded-xl border border-border bg-background',
+              step.status === 'completed' &&
+                index !== currentIndex - 1 &&
+                'max-md:hidden'
+            )}
+            key={step.name}
+          >
+            <div
+              className={cn(
+                'relative flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-sm text-white'
+                // step.status === 'completed' && 'bg-blue-500 ring-blue-500/50',
+                // step.status === 'pending' && 'bg-slate-600 ring-slate-500/50'
+              )}
+            >
+              <div
+                className={cn(
+                  'absolute inset-0 z-0 rounded-full bg-blue-500',
+                  step.status === 'pending' && 'bg-slate-600'
+                )}
+              ></div>
+              {step.status === 'current' && (
+                <div className="animate-ping-slow absolute inset-1 z-0 rounded-full bg-blue-500"></div>
+              )}
+              <div className="relative">
+                {step.status === 'completed' && <CheckCheckIcon size={14} />}
+                {/* {step.status === 'current' && (
+                  <ArrowRightCircleIcon size={14} />
+                )} */}
+                {(step.status === 'pending' || step.status === 'current') && (
+                  <>{index + 1}</>
+                )}
+              </div>
+            </div>
+
+            <div className="text-sm font-medium">{step.name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Steps;

apps/dashboard/src/components/ui/button.tsx

@@ -7,6 +7,7 @@ import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 import type { LucideIcon } from 'lucide-react';
 import { Loader2 } from 'lucide-react';
+import Link from 'next/link';
 
 const buttonVariants = cva(
   'inline-flex flex-shrink-0 items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
@@ -94,5 +95,61 @@ Button.displayName = 'Button';
 Button.defaultProps = {
   type: 'button',
 };
+export interface LinkButtonProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  icon?: LucideIcon;
+  responsive?: boolean;
+  href: string;
+}
 
-export { Button, buttonVariants };
+const LinkButton = React.forwardRef<
+  typeof Link,
+  React.PropsWithoutRef<LinkButtonProps>
+>(
+  (
+    {
+      className,
+      variant,
+      size,
+      children,
+      loading,
+      icon,
+      responsive,
+      href,
+      ...props
+    },
+    ref
+  ) => {
+    const Icon = loading ? Loader2 : icon ?? null;
+    return (
+      <Link
+        href={href}
+        className={cn(buttonVariants({ variant, size, className }))}
+        // @ts-expect-error
+        ref={ref}
+        {...props}
+      >
+        {Icon && (
+          <Icon
+            className={cn(
+              'mr-2 h-4 w-4 flex-shrink-0',
+              responsive && 'mr-0 sm:mr-2',
+              loading && 'animate-spin'
+            )}
+          />
+        )}
+        {responsive ? (
+          <span className="hidden sm:block">{children}</span>
+        ) : (
+          children
+        )}
+      </Link>
+    );
+  }
+);
+LinkButton.displayName = 'LinkButton';
+
+export { Button, LinkButton, buttonVariants };

apps/dashboard/src/middleware.ts

@@ -4,7 +4,10 @@ import { authMiddleware } from '@clerk/nextjs';
 // Please edit this to allow other routes to be public as needed.
 // See https://clerk.com/docs/references/nextjs/auth-middleware for more information about configuring your Middleware
 export default authMiddleware({
+  debug: true,
+  signInUrl: '/get-started',
   publicRoutes: [
+    '/get-started(.*)',
     '/share/overview/:id',
     '/api/trpc(.*)',
     '/api/clerk/(.*)?',

apps/dashboard/tailwind.config.js

@@ -139,10 +139,19 @@ const config = {
           from: { height: 'var(--radix-accordion-content-height)' },
           to: { height: '0px' },
         },
+        wiggle: {
+          '0%': { transform: 'rotate(0deg)' },
+          '80%': { transform: 'rotate(0deg)' },
+          '85%': { transform: 'rotate(5deg)' },
+          '95%': { transform: 'rotate(-5deg)' },
+          '100%': { transform: 'rotate(0deg)' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        wiggle: 'wiggle 2.5s ease-in-out infinite',
+        'ping-slow': 'ping 1.5s ease-in-out infinite',
       },
     },
   },