@tulip-systems/core 0.2.0 → 0.3.0

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="flex flex-col gap-4">
+      <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.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

@@ -7,15 +7,16 @@ import { Input } from "@/components/ui/input";
 import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import React, { use } from "react";
+import { parseAsString, useQueryState } from "nuqs";
+import React from "react";
 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 [callbackURL] = useQueryState("callbackURL", parseAsString);
 
   const router = useRouter();
 

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.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/hooks/{use-permission.client.ts → use-permission.ts}

@@ -4,11 +4,14 @@ import { useSuspenseQueries } from "@tanstack/react-query";
 import { LiteralString } from "better-auth";
 import { authClient } from "../handler/client.client";
 import { type Permission } from "../lib/permissions";
+import { useSession } from "./use-session";
 
 /**
  * UsePermission
  */
 export function usePermission(permission?: Permission) {
+  const sessionQuery = useSession();
+
   const keys = Object.entries(permission ?? {}).flatMap(([resource, permissions]) =>
     permissions.map((permission) => [resource, permission] as const),
   );
@@ -20,8 +23,7 @@ export function usePermission(permission?: Permission) {
         const resource = key[0]?.toString() as string;
         const permission: Permission = { [resource]: [key[1]] as LiteralString[] };
 
-        const session = await authClient.getSession();
-        const userId = session.data?.user.id;
+        const userId = sessionQuery.data?.user.id;
 
         const { data, error } = await authClient.admin.hasPermission({ permission, userId });
         if (error) {

package/src/modules/auth/hooks/use-session.ts

@@ -0,0 +1,18 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { authClient } from "../entry.client";
+
+export function useSession() {
+  const session = useSuspenseQuery({
+    queryKey: ["session"],
+    queryFn: async () => {
+      const session = await authClient.getSession();
+      if (session.error) throw session.error;
+
+      return session.data;
+    },
+  });
+
+  return session;
+}

package/src/modules/auth/lib/validators.ts

@@ -64,7 +64,7 @@ export const createUserSchema = userSchema.pick({ email: true, image: true }).ex
     .min(2, { message: "Achternaam moet langer zijn dan 2 karakters" })
     .max(50, { message: "Achternaam mag niet langer zijn dan 50 karakters" }),
   password: z.string().min(6, { message: "Wachtwoord moet minimaal 6 karakters hebben" }),
-  role: z.string(),
+  role: z.string().default("user"),
 });
 
 export type CreateUserSchema = z.infer<typeof createUserSchema>;

package/src/modules/commands/hooks/use-command-menu.client.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Permission } from "@/modules/auth/entry";
-import { usePermission } from "@/modules/auth/hooks/use-permission.client";
+import { usePermission } from "@/modules/auth/hooks/use-permission";
 import { mergePermissions } from "@/modules/auth/lib/utils";
 import {
   type BulkCommandDefRenderParams,
@@ -119,12 +119,11 @@ export function useSingleCommandMenu<TData, TMeta>({
   usePermission(mergePermissions(permissions));
 
   // filter out commands that don't have valid conditions
-  const validCommands = commands
-    .filter((command) =>
-      command.mode === "single"
-        ? validateSingleCommand({ data, command })
-        : validateBulkCommand({ data: [data], command }),
-    );
+  const validCommands = commands.filter((command) =>
+    command.mode === "single"
+      ? validateSingleCommand({ data, command })
+      : validateBulkCommand({ data: [data], command }),
+  );
 
   function renderCommand(command: (typeof validCommands)[number]) {
     return command.mode === "single"

package/src/modules/commands/menus/dropdown-menu.client.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Skeleton } from "@/components/entry";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -8,10 +9,10 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils/cn";
 import { MoreHorizontal } from "lucide-react";
-import React from "react";
+import React, { ComponentProps } from "react";
+import { RenderCommand } from "../components/render-command";
 import { CommandContextProvider } from "../hooks/context.client";
 import { SingleCommandMenuProps, useSingleCommandMenu } from "../hooks/use-command-menu.client";
-import { RenderCommand } from "../components/render-command";
 
 export function DropdownCommandMenu<TData, TMeta>({
   data,
@@ -48,3 +49,11 @@ export function DropdownCommandMenu<TData, TMeta>({
     </DropdownMenu>
   );
 }
+
+export function DropdownCommandMenuLoading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("flex w-fit items-center", className)}>
+      <Skeleton className="h-8 w-8" />
+    </div>
+  );
+}

package/src/modules/commands/menus/inline-menu.client.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { Skeleton } from "@/components/entry";
 import { cn } from "@/lib/utils/cn";
-import React from "react";
+import React, { ComponentProps } from "react";
 import { RenderCommand } from "../components/render-command";
 import { CommandContextProvider } from "../hooks/context.client";
 import { SingleCommandMenuProps, useSingleCommandMenu } from "../hooks/use-command-menu.client";
@@ -32,3 +33,15 @@ export function InlineCommandMenu<TData, TMeta>({
     </div>
   );
 }
+
+export function InlineCommandMenuLoading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("flex w-fit items-center", className)}>
+      <div className="flex gap-2">
+        {Array.from({ length: 3 }).map((_, index) => (
+          <Skeleton key={index} className="h-8 w-8" />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/modules/commands/menus/responsive-menu.client.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { SingleCommandMenuProps } from "../hooks/use-command-menu.client";
-import { DropdownCommandMenu } from "./dropdown-menu.client";
-import { InlineCommandMenu } from "./inline-menu.client";
+import { DropdownCommandMenu, DropdownCommandMenuLoading } from "./dropdown-menu.client";
+import { InlineCommandMenu, InlineCommandMenuLoading } from "./inline-menu.client";
 
 type ResponsiveCommandMenuProps<TData, TMeta> = SingleCommandMenuProps<TData, TMeta>;
 
@@ -16,3 +16,12 @@ export function ResponsiveCommandMenu<TData, TMeta>(
     </>
   );
 }
+
+export function ResponsiveCommandMenuLoading() {
+  return (
+    <>
+      <InlineCommandMenuLoading className="hidden xl:flex" />
+      <DropdownCommandMenuLoading className="xl:hidden" />
+    </>
+  );
+}