@tulip-systems/core 0.2.0

package/src/components/layouts/admin-sidebar-context.client.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ClientSession } from "@/modules/auth/handler/client.client";
+import { PathResult } from "@/modules/config/paths/types";
+import React from "react";
+import { SidebarProvider } from "../entry.client";
+
+/**
+ * AdminSidebarContextValue
+ */
+type AdminSidebarContextValue = {
+  paths: PathResult;
+  session: ClientSession;
+};
+
+/**
+ * AdminSidebarContext
+ */
+export const AdminSidebarContext = React.createContext({} as AdminSidebarContextValue);
+
+/**
+ * AdminSidebarProvider
+ */
+export function AdminSidebarProvider({
+  value,
+  children,
+  ...props
+}: React.ComponentProps<typeof SidebarProvider> & { value: AdminSidebarContextValue }) {
+  return (
+    <SidebarProvider {...props}>
+      <AdminSidebarContext.Provider value={value}>{children}</AdminSidebarContext.Provider>
+    </SidebarProvider>
+  );
+}

package/src/components/layouts/admin-sidebar-header.client.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar.client";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { cn } from "@/lib/utils/cn";
+import { authClient } from "@/modules/auth/handler/client.client";
+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);
+
+  return (
+    <SidebarHeader>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <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>
+              </Avatar>
+              <span className="text-md text-muted-foreground font-bold">{session.user.name}</span>
+            </div>
+
+            <ChevronsUpDownIcon className="text-muted-foreground h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent className="w-44">
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <span>Thema</span>
+            </DropdownMenuSubTrigger>
+
+            <DropdownMenuSubContent>
+              <DropdownMenuItem
+                className={cn(theme === "light" && "bg-secondary font-bold")}
+                onClick={() => setTheme("light")}
+              >
+                <SunIcon className="mr-2 h-4 w-4" />
+                <span>Light</span>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                className={cn(theme === "dark" && "bg-secondary font-bold")}
+                onClick={() => setTheme("dark")}
+              >
+                <MoonIcon className="mr-2 h-4 w-4" />
+                <span>Dark</span>
+              </DropdownMenuItem>
+
+              <DropdownMenuItem
+                className={cn(theme === "system" && "bg-secondary font-bold")}
+                onClick={() => setTheme("system")}
+              >
+                <LaptopIcon className="mr-2 h-4 w-4" />
+                <span>System</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+
+          <DropdownMenuSeparator />
+
+          <DropdownMenuItem
+            onClick={() => {
+              setOpenMobile(false);
+              authClient.signOut({
+                fetchOptions: { onSuccess: () => router.replace("/auth/login") },
+              });
+            }}
+          >
+            <LogOutIcon className="mr-2 h-4 w-4" />
+            <span>Log out</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarHeader>
+  );
+}

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

@@ -0,0 +1,88 @@
+"use client";
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarRail,
+  useSidebar,
+} from "@/components/ui/sidebar.client";
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import * as React from "react";
+import { AdminSidebarContext } from "./admin-sidebar-context.client";
+import { AdminSidebarHeader } from "./admin-sidebar-header.client";
+
+/**
+ * AdminSidebar
+ */
+export function AdminSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  const currentSegments = useSelectedLayoutSegments();
+
+  const { paths } = React.useContext(AdminSidebarContext);
+  const { isMobile, toggleSidebar } = useSidebar();
+
+  return (
+    <Sidebar {...props}>
+      <AdminSidebarHeader />
+
+      <SidebarContent>
+        <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];
+
+                    return (
+                      <SidebarMenuItem key={item.name}>
+                        <SidebarMenuButton asChild isActive={isActive}>
+                          <Link href={item.href} onClick={isMobile ? toggleSidebar : undefined}>
+                            {item.icon}
+                            {item.name}
+                          </Link>
+                        </SidebarMenuButton>
+
+                        {isActive && !!item.items?.length && (
+                          <SidebarMenuSub>
+                            {item.items.map((subItem) => (
+                              <SidebarMenuSubItem key={subItem.name}>
+                                <SidebarMenuSubButton
+                                  asChild
+                                  isActive={subItem.segment === currentSegments?.[1]}
+                                >
+                                  <Link
+                                    href={subItem.href}
+                                    onClick={isMobile ? toggleSidebar : undefined}
+                                  >
+                                    {subItem.name}
+                                  </Link>
+                                </SidebarMenuSubButton>
+                              </SidebarMenuSubItem>
+                            ))}
+                          </SidebarMenuSub>
+                        )}
+                      </SidebarMenuItem>
+                    );
+                  })}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ))}
+        </SidebarMenu>
+      </SidebarContent>
+      <SidebarRail />
+    </Sidebar>
+  );
+}

package/src/components/layouts/empty-page.tsx

@@ -0,0 +1,59 @@
+import { cn } from "@/lib/utils/cn";
+import type { Route } from "next";
+import type { ComponentProps, HTMLAttributes } from "react";
+
+export type EmptyPageProps = HTMLAttributes<HTMLDivElement> & {
+  title: string;
+  description?: string;
+  callToAction?: {
+    href: Route;
+    title: string;
+  };
+};
+
+export function EmptyPage({ className, children, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex h-full min-h-[30rem] w-full flex-col items-center justify-center gap-y-2 border border-dashed text-center",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function EmptyPageTitle({ className, children, ...props }: ComponentProps<"h2">) {
+  return (
+    <h2 className={cn("text-lg font-bold tracking-tight", className)} {...props}>
+      {children}
+    </h2>
+  );
+}
+
+export function EmptyPageDescription({ className, children, ...props }: ComponentProps<"p">) {
+  return (
+    <p className={cn("text-muted-foreground max-w-[40ch] text-sm", className)} {...props}>
+      {children}
+    </p>
+  );
+}
+
+{
+  /* <div className="flex h-full flex-col place-items-center justify-center space-y-6 border border-dashed">
+        <span className="space-y-2 text-center">
+          <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+          {description && (
+            <p className="text-muted-foreground max-w-[40ch] text-sm">{description}</p>
+          )}
+        </span>
+
+        {callToAction && (
+          <Link href={callToAction.href} className={cn(buttonVariants({ variant: "default" }))}>
+            {callToAction.title}
+          </Link>
+        )}
+      </div> */
+}

package/src/components/layouts/list-layout.tsx

@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils/cn";
+import { ComponentProps } from "react";
+
+export function ListLayout({ className, children, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("h-full max-w-full space-y-5", className)}>
+      {children}
+    </div>
+  );
+}

package/src/components/layouts/not-allowed-page.tsx

@@ -0,0 +1,44 @@
+import { cn } from "@/lib/utils/cn";
+import type { Route } from "next";
+import Link from "next/link";
+import type { HTMLAttributes } from "react";
+import { buttonVariants } from "../ui/button";
+import { EmptyPage, EmptyPageDescription, EmptyPageTitle } from "./empty-page";
+
+export type NotAllowedPageProps = HTMLAttributes<HTMLDivElement> & {
+  title?: string;
+  description?: string;
+  callToAction?: {
+    href: Route;
+    title: string;
+  };
+};
+
+export default function NotAllowedPage({
+  title,
+  description,
+  callToAction,
+  ...props
+}: NotAllowedPageProps) {
+  return (
+    <EmptyPage {...props}>
+      <EmptyPageTitle>{title ?? "Geen toegang"}</EmptyPageTitle>
+      <EmptyPageDescription>
+        {description ?? "Je hebt geen toegang tot deze pagina."}
+      </EmptyPageDescription>
+
+      {callToAction && (
+        <Link href={callToAction.href} className={cn(buttonVariants({ variant: "default" }))}>
+          {callToAction.title}
+        </Link>
+      )}
+    </EmptyPage>
+  );
+}
+
+// <EmptyPage
+//   {...props}
+//   title={title ?? "Geen toegang"}
+//   description={description ?? "Je hebt geen toegang tot deze pagina."}
+//   callToAction={callToAction ?? { href: "/admin", title: "Terug naar dashboard" }}
+// />

package/src/components/layouts/not-found-page.tsx

@@ -0,0 +1,9 @@
+import { NotFoundSection } from "./not-found-section";
+
+export function NotFoundPage() {
+  return (
+    <div className="relative z-0 grid h-[100dvh] w-full place-items-center">
+      <NotFoundSection href="/" />
+    </div>
+  );
+}

package/src/components/layouts/not-found-section.tsx

@@ -0,0 +1,21 @@
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils/cn";
+import { HomeIcon } from "lucide-react";
+import type { Route } from "next";
+import Link from "next/link";
+
+export function NotFoundSection({ href }: { href: Route }) {
+  return (
+    <div className="flex flex-col items-center gap-12 text-center">
+      <span className="text-foreground space-y-2">
+        <h2 className="text-9xl font-bold leading-none">404</h2>
+        <h1 className="text-2xl font-bold lg:text-3xl">Oeps, deze pagina is niet gevonden.</h1>
+      </span>
+
+      <Link href={href} className={cn(buttonVariants({ variant: "secondary" }), "text-foreground")}>
+        <HomeIcon className="mr-2 size-4" />
+        Terug naar home
+      </Link>
+    </div>
+  );
+}

package/src/components/layouts/providers.client.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Toaster } from "@/components/ui/sonner.client";
+import { IndicatorContextProvider } from "@/lib/hooks/use-indicator";
+import { getQueryClient } from "@/modules/config/router/query-client";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { ThemeProvider } from "next-themes";
+import { NuqsAdapter } from "nuqs/adapters/next/app";
+import { PropsWithChildren } from "react";
+
+export function Providers({ children }: PropsWithChildren) {
+  const queryClient = getQueryClient();
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <NuqsAdapter>
+        <IndicatorContextProvider>
+          <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+            {children}
+
+            <Toaster />
+            <ReactQueryDevtools />
+          </ThemeProvider>
+        </IndicatorContextProvider>
+      </NuqsAdapter>
+    </QueryClientProvider>
+  );
+}

package/src/components/layouts/root-layout.server.tsx

@@ -0,0 +1,50 @@
+import "server-cli-only";
+
+import { cn } from "@/lib/utils/cn";
+import { registerFonts } from "@/lib/utils/fonts";
+import { TDatabaseSchema } from "@/modules/config/db/types";
+import { TulipConfig } from "@/modules/config/lib/config.server";
+import type { Metadata, Viewport } from "next";
+import { PropsWithChildren } from "react";
+
+/**
+ * Root layout metadata
+ */
+export const generateRootLayoutMetadata = <TSchema extends TDatabaseSchema>(
+  config: TulipConfig<TSchema>,
+) => ({
+  metadata: {
+    title: config.general.name,
+    description: "Developed by NewCode",
+    appleWebApp: {
+      capable: true,
+      statusBarStyle: "black-translucent",
+      title: config.general.name,
+    },
+  } satisfies Metadata,
+  viewport: {
+    width: "device-width",
+    initialScale: 1,
+    themeColor: [
+      {
+        color: "#ffffff",
+        media: "(prefers-color-scheme: light)",
+      },
+      {
+        color: "#030303",
+        media: "(prefers-color-scheme: dark)",
+      },
+    ],
+  } satisfies Viewport,
+});
+
+/**
+ * Root layout
+ */
+export function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang="nl">
+      <body className={cn("bg-background font-sans antialiased", registerFonts())}>{children}</body>
+    </html>
+  );
+}

package/src/components/layouts/tab-layout.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Allowed } from "@/modules/auth/components/allowed.client";
+import { Permission } from "@/modules/auth/lib/permissions";
+import type { Route } from "next";
+import { useRouter, useSelectedLayoutSegment } from "next/navigation";
+import { useState } from "react";
+import { ListLayout } from "./list-layout";
+
+export type Tab = {
+  name: string;
+  href: Route;
+  segment: string;
+  icon?: React.ReactNode;
+  permission?: Permission;
+};
+
+export type TabLayoutProps = {
+  tabs: Tab[];
+  children: React.ReactNode;
+};
+
+export function TabLayout({ tabs, children }: TabLayoutProps) {
+  const segment = useSelectedLayoutSegment();
+  const router = useRouter();
+
+  const initialTab = tabs.find((tab) => tab.segment === segment);
+
+  const [selectedTab, setSelectedTab] = useState(initialTab ?? tabs[0]);
+
+  return (
+    <Tabs
+      value={selectedTab?.segment}
+      onValueChange={(value) => {
+        const newSelectedTab = tabs.find((tab) => tab.segment === value);
+        if (!newSelectedTab) return;
+        setSelectedTab(newSelectedTab);
+        router.replace(newSelectedTab.href);
+      }}
+    >
+      <div className="mb-10 max-w-full overflow-x-auto">
+        <TabsList>
+          {tabs.map((tab) => {
+            const children = (
+              <TabsTrigger key={tab.segment} value={tab.segment}>
+                {tab.icon && <span className="mr-2">{tab.icon}</span>}
+                <span className="capitalize">{tab.name}</span>
+              </TabsTrigger>
+            );
+
+            if (!tab.permission) return children;
+
+            return (
+              <Allowed key={tab.segment} permission={tab.permission}>
+                {children}
+              </Allowed>
+            );
+          })}
+        </TabsList>
+      </div>
+
+      <TabsContent value={selectedTab?.segment ?? ""}>
+        <ListLayout>{children}</ListLayout>
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/components/lists/data-list.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@/lib/utils/cn";
+import type React from "react";
+
+export type DataListProps = React.HTMLAttributes<HTMLOListElement>;
+
+export function DataList({ children, className, ...props }: DataListProps) {
+  return (
+    <dl {...props} className={cn("divide-y", className)}>
+      {children}
+    </dl>
+  );
+}
+
+export type DataListItemProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataListItem({ children, className, ...props }: DataListItemProps) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "items-center py-3 first:pt-0 last:pb-0 sm:grid sm:grid-cols-3 sm:gap-4",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export type DataListTitleProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataListTitle({ children, className, ...props }: DataListTitleProps) {
+  return (
+    <dt {...props} className={cn("text-sm font-semibold leading-6", className)}>
+      {children}
+    </dt>
+  );
+}
+
+export type DataListValueProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataListValue({ children, className, ...props }: DataListValueProps) {
+  return (
+    <dd {...props} className={cn("mt-1 text-sm leading-6 sm:col-span-2 sm:mt-0", className)}>
+      {children}
+    </dd>
+  );
+}

package/src/components/lists/data-stack.tsx

@@ -0,0 +1,71 @@
+import { cn } from "@/lib/utils/cn";
+import type React from "react";
+
+export type DataStackGridProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataStackGrid({ children, className, ...props }: DataStackGridProps) {
+  return (
+    <div {...props} className={cn("grid gap-10 md:grid-cols-2 xl:grid-cols-3", className)}>
+      {children}
+    </div>
+  );
+}
+
+export type DataStackLayoutProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataStackLayout({ children, className, ...props }: DataStackLayoutProps) {
+  return (
+    <div {...props} className={cn("flex flex-col gap-y-8", className)}>
+      {children}
+    </div>
+  );
+}
+
+export type DataStackRowProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataStackRow({ children, className, ...props }: DataStackRowProps) {
+  return (
+    <div {...props} className={cn("flex flex-col gap-8 md:flex-row", className)}>
+      {children}
+    </div>
+  );
+}
+export type DataStackColumnProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataStackColumn({ children, className, ...props }: DataStackRowProps) {
+  return (
+    <div {...props} className={cn("flex flex-col gap-8", className)}>
+      {children}
+    </div>
+  );
+}
+
+export type DataStackProps = React.HTMLAttributes<HTMLOListElement>;
+
+export function DataStack({ children, className, ...props }: DataStackProps) {
+  return (
+    <dl {...props} className={cn("w-full space-y-3", className)}>
+      {children}
+    </dl>
+  );
+}
+
+export type DataStackTitleProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataStackTitle({ children, className, ...props }: DataStackTitleProps) {
+  return (
+    <dt {...props} className={cn("text-sm font-medium leading-none", className)}>
+      {children}
+    </dt>
+  );
+}
+
+export type DataStackValueProps = React.HTMLAttributes<HTMLElement>;
+
+export function DataStackValue({ children, className, ...props }: DataStackValueProps) {
+  return (
+    <dd {...props} className={cn("mt-1 text-sm leading-6 sm:col-span-2 sm:mt-0", className)}>
+      {children}
+    </dd>
+  );
+}