@tulip-systems/core 0.2.1 → 0.4.0

package/src/components/{layouts → navigation}/admin-sidebar-header.client.tsx

@@ -14,19 +14,19 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils/cn";
 import { authClient } from "@/modules/auth/handler/client.client";
+import { useSession } from "@/modules/auth/hooks/use-session";
 import { ChevronsUpDownIcon, LaptopIcon, LogOutIcon, MoonIcon, SunIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useRouter } from "next/navigation";
-import { useContext } from "react";
 import { SidebarHeader, useSidebar } from "../entry.client";
-import { AdminSidebarContext } from "./admin-sidebar-context.client";
 
 export function AdminSidebarHeader() {
   const router = useRouter();
   const { theme, setTheme } = useTheme();
 
   const { setOpenMobile } = useSidebar();
-  const { session } = useContext(AdminSidebarContext);
+
+  const sessionQuery = useSession();
 
   return (
     <SidebarHeader>
@@ -35,10 +35,15 @@ export function AdminSidebarHeader() {
           <Button variant="outline" className="items-center justify-between py-3.5">
             <div className="flex items-center gap-4">
               <Avatar className="h-6 w-6 text-sm">
-                <AvatarImage src={session.user.image ?? undefined} alt={session.user.name} />
-                <AvatarFallback>{session.user.name?.[0] ?? ""}</AvatarFallback>
+                <AvatarImage
+                  src={sessionQuery.data?.user.image ?? undefined}
+                  alt={sessionQuery.data?.user.name}
+                />
+                <AvatarFallback>{sessionQuery.data?.user.name?.[0] ?? ""}</AvatarFallback>
               </Avatar>
-              <span className="text-md text-muted-foreground font-bold">{session.user.name}</span>
+              <span className="text-md text-muted-foreground font-bold">
+                {sessionQuery.data?.user.name}
+              </span>
             </div>
 
             <ChevronsUpDownIcon className="text-muted-foreground h-4 w-4" />

package/src/components/navigation/admin-sidebar-paths.client.tsx

@@ -0,0 +1,190 @@
+"use client";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+  useSidebar,
+} from "@/components/ui/sidebar.client";
+import { Allowed } from "@/modules/auth/components/allowed.client";
+import { Permission } from "@/modules/auth/entry";
+import { Route } from "next";
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import * as React from "react";
+import { Suspense } from "react";
+import { AdminSidebarHeader } from "./admin-sidebar-header.client";
+import {
+  AdminSidebarHeaderLoading,
+  AdminSidebarMenuContentLoading,
+} from "./admin-sidebar-skeleton";
+
+/**
+ * Paths
+ */
+export function Paths({ children, ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar {...props}>
+      <Suspense fallback={<AdminSidebarHeaderLoading />}>
+        <AdminSidebarHeader />
+      </Suspense>
+
+      <SidebarContent>
+        <Suspense fallback={<AdminSidebarMenuContentLoading />}>
+          <SidebarMenu>{children}</SidebarMenu>
+        </Suspense>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  );
+}
+
+/**
+ * Path Group
+ */
+export function PathGroup(props: React.ComponentProps<"div">) {
+  return <SidebarGroup {...props} />;
+}
+
+/**
+ * Path Group Title
+ */
+export function PathGroupTitle(props: React.ComponentProps<"div">) {
+  return <SidebarGroupLabel {...props} />;
+}
+
+/**
+ * Path Group Items
+ */
+export function PathGroupItems(props: React.PropsWithChildren) {
+  return (
+    <SidebarGroupContent>
+      <SidebarMenu>{props.children}</SidebarMenu>
+    </SidebarGroupContent>
+  );
+}
+
+/**
+ * Path Context
+ */
+const PathContext = React.createContext({} as { isActive: boolean });
+
+/**
+ * Path
+ */
+type PathProps = React.ComponentProps<"li"> & {
+  permission?: Permission;
+  isActive?: boolean;
+  segment?: string;
+};
+
+export function Path({ permission, children, isActive, segment, ...props }: PathProps) {
+  const currentSegments = useSelectedLayoutSegments();
+
+  if (!permission) {
+    return (
+      <PathContext value={{ isActive: isActive || segment === currentSegments?.[0] }}>
+        <SidebarMenuItem {...props}>{children}</SidebarMenuItem>
+      </PathContext>
+    );
+  }
+
+  return (
+    <Allowed permission={permission}>
+      <PathContext value={{ isActive: isActive || segment === currentSegments?.[0] }}>
+        <SidebarMenuItem {...props}>{children}</SidebarMenuItem>
+      </PathContext>
+    </Allowed>
+  );
+}
+
+/**
+ * Path Button
+ */
+export function PathLink({ href, children }: React.PropsWithChildren<{ href: Route }>) {
+  const { isMobile, toggleSidebar } = useSidebar();
+  const { isActive } = React.useContext(PathContext);
+
+  return (
+    <SidebarMenuButton asChild isActive={isActive}>
+      <Link href={href} onClick={isMobile ? toggleSidebar : undefined}>
+        {children}
+      </Link>
+    </SidebarMenuButton>
+  );
+}
+
+/**
+ * Path Items
+ */
+export function PathItems(props: React.ComponentProps<"ul">) {
+  const { isActive } = React.useContext(PathContext);
+  if (!isActive) return null;
+
+  return <SidebarMenuSub {...props} />;
+}
+
+/**
+ * Path Sub Item Context
+ */
+const PathSubItemContext = React.createContext({} as { isActive: boolean });
+
+/**
+ * Path Sub Item
+ */
+type PathSubItemProps = React.ComponentProps<"li"> & {
+  permission?: Permission;
+  isActive?: boolean;
+  segment?: string;
+};
+
+export function PathSubItem({
+  permission,
+  isActive,
+  segment,
+  children,
+  ...props
+}: PathSubItemProps) {
+  const currentSegments = useSelectedLayoutSegments();
+
+  if (!permission) {
+    return (
+      <PathSubItemContext value={{ isActive: isActive || segment === currentSegments?.[1] }}>
+        <SidebarMenuSubItem {...props}>{children}</SidebarMenuSubItem>
+      </PathSubItemContext>
+    );
+  }
+
+  return (
+    <Allowed permission={permission}>
+      <PathSubItemContext value={{ isActive: isActive || segment === currentSegments?.[1] }}>
+        <SidebarMenuSubItem {...props}>{children}</SidebarMenuSubItem>
+      </PathSubItemContext>
+    </Allowed>
+  );
+}
+
+/**
+ * Path Button
+ */
+export function PathSubItemLink({ href, children }: React.PropsWithChildren<{ href: Route }>) {
+  const { isMobile, toggleSidebar } = useSidebar();
+  const { isActive } = React.useContext(PathSubItemContext);
+
+  return (
+    <SidebarMenuSubButton asChild isActive={isActive}>
+      <Link href={href} onClick={isMobile ? toggleSidebar : undefined}>
+        {children}
+      </Link>
+    </SidebarMenuSubButton>
+  );
+}

package/src/components/navigation/admin-sidebar-skeleton.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@/components/ui/button";
+import { DropdownMenu, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import {
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+} from "@/components/ui/sidebar.client";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Suspense } from "react";
+
+/**
+ * SidebarMenuContentLoading
+ */
+export function AdminSidebarMenuContentLoading() {
+  return (
+    <SidebarMenu>
+      {Array.from({ length: 20 }).map((_, index) => (
+        <SidebarMenuItem key={index}>
+          <Suspense>
+            <SidebarMenuSkeleton />
+          </Suspense>
+        </SidebarMenuItem>
+      ))}
+    </SidebarMenu>
+  );
+}
+
+/**
+ *
+ */
+export function AdminSidebarHeaderLoading() {
+  return (
+    <SidebarHeader>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" disabled>
+            <Skeleton className="h-5 w-full" />
+          </Button>
+        </DropdownMenuTrigger>
+      </DropdownMenu>
+    </SidebarHeader>
+  );
+}

package/src/components/navigation/admin-sidebar.client.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+  useSidebar,
+} from "@/components/ui/sidebar.client";
+import { Allowed } from "@/modules/auth/entry.client";
+import { Paths } from "@/modules/config/entry";
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import { Suspense } from "react";
+import { Fragment } from "react/jsx-runtime";
+import { AdminSidebarHeader } from "./admin-sidebar-header.client";
+import {
+  AdminSidebarHeaderLoading,
+  AdminSidebarMenuContentLoading,
+} from "./admin-sidebar-skeleton";
+
+/**
+ * AdminSidebar
+ */
+export function AdminSidebar({
+  paths,
+  ...props
+}: React.ComponentProps<typeof Sidebar> & { paths: Paths }) {
+  const currentSegments = useSelectedLayoutSegments();
+
+  const { isMobile, toggleSidebar } = useSidebar();
+
+  return (
+    <Sidebar {...props}>
+      <Suspense fallback={<AdminSidebarHeaderLoading />}>
+        <AdminSidebarHeader />
+      </Suspense>
+
+      <SidebarContent>
+        <Suspense fallback={<AdminSidebarMenuContentLoading />}>
+          <SidebarMenu>
+            {paths.map((group, index) => (
+              <SidebarGroup key={index}>
+                {group.name && <SidebarGroupLabel>{group.name}</SidebarGroupLabel>}
+
+                <SidebarGroupContent>
+                  <SidebarMenu>
+                    {group.items.map((item) => {
+                      const isActive = item.isActive || item.segment === currentSegments?.[0];
+                      const Icon = item.icon;
+
+                      const children = (
+                        <SidebarMenuItem>
+                          <SidebarMenuButton asChild isActive={isActive}>
+                            <Link href={item.href} onClick={isMobile ? toggleSidebar : undefined}>
+                              {Icon && <Icon />}
+                              {item.name}
+                            </Link>
+                          </SidebarMenuButton>
+
+                          {isActive && !!item.items?.length && (
+                            <SidebarMenuSub>
+                              {item.items.map((subItem) => {
+                                const subChildren = (
+                                  <SidebarMenuSubItem key={subItem.name}>
+                                    <SidebarMenuSubButton
+                                      asChild
+                                      isActive={subItem.segment === currentSegments?.[1]}
+                                    >
+                                      <Link
+                                        href={subItem.href}
+                                        onClick={isMobile ? toggleSidebar : undefined}
+                                      >
+                                        {subItem.name}
+                                      </Link>
+                                    </SidebarMenuSubButton>
+                                  </SidebarMenuSubItem>
+                                );
+
+                                if (!subItem.permission) {
+                                  return <Fragment key={subItem.name}>{subChildren}</Fragment>;
+                                }
+
+                                return (
+                                  <Allowed key={subItem.name} permission={subItem.permission}>
+                                    {subChildren}
+                                  </Allowed>
+                                );
+                              })}
+                            </SidebarMenuSub>
+                          )}
+                        </SidebarMenuItem>
+                      );
+
+                      if (!item.permission) {
+                        return <Fragment key={item.name}>{children}</Fragment>;
+                      }
+
+                      return (
+                        <Allowed key={item.name} permission={item.permission}>
+                          {children}
+                        </Allowed>
+                      );
+                    })}
+                  </SidebarMenu>
+                </SidebarGroupContent>
+              </SidebarGroup>
+            ))}
+          </SidebarMenu>
+        </Suspense>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/src/components/ui/spinner.tsx

@@ -0,0 +1,51 @@
+export function Spinner() {
+  return (
+    <svg viewBox="0 0 120.09 141.73" className="w-16">
+      <title>Tulip Logo Icon</title>
+      <defs>
+        <linearGradient
+          id="tulip-logo-icon-gradient"
+          x1="60.5"
+          y1="0"
+          x2="60.5"
+          y2="141.73"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#ffc754" />
+          <stop offset="1" stopColor="#ff1800" />
+        </linearGradient>
+        <linearGradient
+          id="tulip-logo-icon-gradient-2"
+          x1="72.4"
+          y1="5.81"
+          x2="72.4"
+          y2="141.73"
+          xlinkHref="#tulip-logo-icon-gradient"
+        />
+        <linearGradient
+          id="tulip-logo-icon-gradient-3"
+          x1="47.69"
+          y1="5.81"
+          x2="47.69"
+          y2="141.73"
+          xlinkHref="#tulip-logo-icon-gradient"
+        />
+      </defs>
+
+      <g>
+        <path
+          d="M107.88,93.09c0-35.95-47.38-93.09-47.38-93.09,0,0-47.39,57.14-47.38,93.09,0,26.17,21.21,48.64,47.38,48.64,26.17,0,47.39-22.47,47.38-48.64Z"
+          className="animate-pulse fill-[url(#tulip-logo-icon-gradient)] opacity-90"
+        />
+        <path
+          d="M116.68,109.5c12.3-33.78-12.69-103.68-12.69-103.68,0,0-64.07,37.49-76.37,71.27-8.95,24.59,3.3,52.97,27.89,61.92,24.59,8.95,52.21-4.91,61.16-29.5Z"
+          className="animate-pulse fill-[url(#tulip-logo-icon-gradient)] opacity-90"
+        />
+        <path
+          d="M92.46,77.09C80.16,43.3,16.09,5.81,16.09,5.81c0,0-24.98,69.9-12.69,103.68,8.95,24.59,36.57,38.45,61.16,29.5,24.59-8.95,36.84-37.32,27.89-61.92Z"
+          className="animate-pulse fill-[url(#tulip-logo-icon-gradient)] opacity-90"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/modules/auth/components/allowed.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { JSX } from "react";
-import { usePermission } from "../hooks/use-permission.client";
+import { usePermission } from "../hooks/use-permission";
 import { type Permission } from "../lib/permissions";
 
 /**

package/src/modules/auth/components/auth-layout.server.tsx

@@ -1,23 +1,15 @@
-import "server-cli-only";
-
-import { TDatabaseSchema } from "@/modules/config/db/types";
-import { getTulip, GetTulipParams } from "@/modules/config/lib/resolve.server";
 import Image from "next/image";
 import Link from "next/link";
 import { PropsWithChildren } from "react";
 
-export async function AuthLayout<TSchema extends TDatabaseSchema>(
-  props: PropsWithChildren<GetTulipParams<TSchema>>,
-) {
-  const { general } = await getTulip(props);
-
+export async function AuthLayout(props: PropsWithChildren<{ name: string }>) {
   return (
     <div className="container relative mx-auto grid h-[100dvh] flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
       <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
         <Image src="/images/auth-background.jpeg" alt="Background" className="object-cover" fill />
 
         <Link href="/" className="relative z-20 flex items-center text-lg font-bold">
-          {general.name}
+          {props.name}
         </Link>
 
         <div className="relative z-20 mt-auto">

package/src/modules/auth/components/auth-loading.tsx

@@ -0,0 +1,11 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export function AuthLoading() {
+  return (
+    <div className="mx-auto flex w-full flex-col gap-4 sm:w-[350px]">
+      <Skeleton className="h-7 w-full" />
+      <Skeleton className="h-48 w-full" />
+      <Skeleton className="h-12 w-full" />
+    </div>
+  );
+}

package/src/modules/auth/components/guard.client.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { redirect } from "next/navigation";
+import { PropsWithChildren } from "react";
+import { useSession } from "../hooks/use-session";
+
+export function AuthGuard({ children }: PropsWithChildren) {
+  const session = useSession();
+  if (!session.data) redirect("/auth/login");
+
+  return <>{children}</>;
+}

package/src/modules/auth/components/login-page.client.tsx

@@ -5,21 +5,61 @@ import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form.client";
 import { Input } from "@/components/ui/input";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import React, { use } from "react";
+import { parseAsString, useQueryState } from "nuqs";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import * as z from "zod";
 import { authClient } from "../handler/client.client";
 import { loginSchema } from "../lib/validators";
 
-export function LoginPage(props: { searchParams: Promise<{ callbackURL?: string }> }) {
-  const { callbackURL } = use(props.searchParams);
+export function LoginPage() {
+  const queryClient = useQueryClient();
+  const [callbackURL] = useQueryState("callbackURL", parseAsString);
 
   const router = useRouter();
 
-  const [isPending, startTransition] = React.useTransition();
+  const { mutate, isPending } = useMutation({
+    mutationFn: async (data: z.infer<typeof loginSchema>) => {
+      const result = await authClient.signIn.email(data);
+      if (result.error) throw result.error;
+
+      const session = await authClient.getSession();
+      if (session.error) throw session.error;
+
+      queryClient.setQueryData(["session"], session.data);
+
+      return result.data;
+    },
+    onSuccess: () => {
+      router.push(callbackURL ?? "/admin");
+      toast.success("Succesvol ingelogd");
+    },
+    onError: (err) => {
+      console.error("Login error: ", err);
+
+      if ("status" in err) {
+        if (err.status === 401) {
+          toast.error("Ongeldige email of wachtwoord");
+          return;
+        }
+
+        if (err.status === 403) {
+          toast.error("Account is geblokkeerd");
+          return;
+        }
+
+        if (err.status === 429) {
+          toast.error("Te veel login pogingen");
+          return;
+        }
+      }
+
+      toast.error("Er is iets misgegaan");
+    },
+  });
 
   const form = useForm<z.infer<typeof loginSchema>>({
     resolver: standardSchemaResolver(loginSchema),
@@ -37,39 +77,7 @@ export function LoginPage(props: { searchParams: Promise<{ callbackURL?: string
       </div>
 
       <Form {...form}>
-        <form
-          className="space-y-6"
-          onSubmit={form.handleSubmit((data) =>
-            startTransition(async () => {
-              await authClient.signIn.email(data, {
-                onSuccess: () => {
-                  router.replace(callbackURL ?? "/");
-                  toast.success("Succesvol ingelogd");
-                },
-                onError: ({ error }) => {
-                  console.error("Login error: ", error);
-
-                  if (error.status === 401) {
-                    toast.error("Ongeldige email of wachtwoord");
-                    return;
-                  }
-
-                  if (error.status === 403) {
-                    toast.error("Account is geblokkeerd");
-                    return;
-                  }
-
-                  if (error.status === 429) {
-                    toast.error("Te veel login pogingen");
-                    return;
-                  }
-
-                  toast.error("Er is iets misgegaan");
-                },
-              });
-            }),
-          )}
-        >
+        <form className="space-y-6" onSubmit={form.handleSubmit((data) => mutate(data))}>
           <div className="flex flex-col gap-3">
             <FormField
               control={form.control}

package/src/modules/auth/entry.client.ts

@@ -4,3 +4,5 @@ export * from "./components/login-page.client";
 export * from "./components/reset-password-page.client";
 export * from "./components/update-password-command";
 export * from "./handler/client.client";
+export * from "./hooks/use-permission";
+export * from "./hooks/use-session";

package/src/modules/auth/entry.server.ts

@@ -1,4 +1,4 @@
-export * from "./components/allowed.server";
 export * from "./components/auth-layout.server";
+export * from "./handler/proxy.server";
 export * from "./handler/route.server";
 export * from "./lib/helpers.server";

package/src/modules/auth/entry.ts

@@ -1,3 +1,4 @@
+export * from "./components/auth-loading";
 export * from "./db/schema";
 export * from "./lib/permissions";
 export * from "./lib/validators";

package/src/modules/auth/handler/proxy.server.ts

@@ -0,0 +1,28 @@
+import { getSessionCookie } from "better-auth/cookies";
+import { NextRequest, NextResponse } from "next/server";
+import { URLPattern } from "urlpattern-polyfill";
+import { authCookiePrefix } from "./server.server";
+
+/**
+ * Create auth proxy
+ */
+export function createAuthProxy(props: { publicRoutes: string[] }) {
+  return (req: NextRequest) => {
+    // 1. Check if the current route is protected or public
+    const pathname = req.nextUrl.pathname;
+
+    const isPublicRoute = props.publicRoutes.some((route) =>
+      new URLPattern({ pathname: route }).test({ pathname }),
+    );
+
+    // 2. Check if a session cookie is present
+    const sessionCookie = getSessionCookie(req, { cookiePrefix: authCookiePrefix });
+
+    // 3. Redirect to /auth/login if the user is not authenticated
+    if (!isPublicRoute && !sessionCookie) {
+      return NextResponse.redirect(new URL("/auth/login", req.nextUrl));
+    }
+
+    return NextResponse.next();
+  };
+}