@tulip-systems/core 0.6.1 → 0.8.0

package/src/components/ui/toggle.client.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/lib/utils/cn";
+
+const toggleVariants = cva(
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-input hover:bg-muted border bg-transparent",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/ui/tooltip.client.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "@/lib/utils/cn";
 
 function TooltipProvider({
@@ -19,11 +18,7 @@ function TooltipProvider({
 }
 
 function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
 function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
@@ -42,13 +37,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit text-balance rounded-md px-3 py-1.5 text-xs",
+          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-background text-xs has-data-[slot=kbd]:pr-1.5 data-[state=closed]:animate-out data-[state=delayed-open]:animate-in data-[state=open]:animate-in **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
           className,
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

package/src/entry.ts

@@ -38,6 +38,18 @@ export const entry = {
   "data-tables": "./src/modules/data-tables/entry.ts",
   "data-tables/client": "./src/modules/data-tables/entry.client.ts",
   "data-tables/server": "./src/modules/data-tables/entry.server.ts",
+  /**
+   * Database Module
+   */
+  database: "./src/modules/database/entry.ts",
+  "database/client": "./src/modules/database/entry.client.ts",
+  "database/server": "./src/modules/database/entry.server.ts",
+  /**
+   * Emails Module
+   */
+  emails: "./src/modules/emails/entry.ts",
+  "emails/client": "./src/modules/emails/entry.client.ts",
+  "emails/server": "./src/modules/emails/entry.server.ts",
   /**
    * Inline Edit Module
    */
@@ -57,54 +69,3 @@ export const entry = {
   "storage/client": "./src/modules/storage/entry.client.ts",
   "storage/server": "./src/modules/storage/entry.server.ts",
 };
-
-// export const entry = [
-//   /**
-//    * Components
-//    */
-//   "./src/components/entry.ts",
-//   "./src/components/entry.client.ts",
-//   "./src/components/entry.server.ts",
-//   /**
-//    * Lib
-//    */
-//   "./src/lib/entry.ts",
-//   "./src/lib/entry.client.ts",
-//   "./src/lib/entry.server.ts",
-//   /**
-//    * Auth Module
-//    */
-//   "./src/modules/auth/entry.ts",
-//   "./src/modules/auth/entry.client.ts",
-//   "./src/modules/auth/entry.server.ts",
-//   /**
-//    * Commands Module
-//    */
-//   "./src/modules/commands/entry.ts",
-//   "./src/modules/commands/entry.client.ts",
-//   "./src/modules/commands/entry.server.ts",
-//   /**
-//    * Config Module
-//    */
-//   "./src/modules/config/entry.ts",
-//   "./src/modules/config/entry.client.ts",
-//   "./src/modules/config/entry.server.ts",
-//   /**
-//    * Data Table Module
-//    */
-//   "./src/modules/data-tables/entry.ts",
-//   "./src/modules/data-tables/entry.client.ts",
-//   "./src/modules/data-tables/entry.server.ts",
-//   /**
-//    * Inline Edit Module
-//    */
-//   "./src/modules/inline-edit/entry.ts",
-//   "./src/modules/inline-edit/entry.client.ts",
-//   "./src/modules/inline-edit/entry.server.ts",
-//   /**
-//    * Uploads Module
-//    */
-//   "./src/modules/uploads/entry.ts",
-//   "./src/modules/uploads/entry.client.ts",
-//   "./src/modules/uploads/entry.server.ts",
-// ];

package/src/lib/entry.ts

@@ -1,8 +1,3 @@
-/**
- * Config
- */
-export * from "./config/constants";
-
 /**
  * Types
  */
@@ -15,4 +10,5 @@ export * from "./utils/array-move";
 export * from "./utils/cn";
 export * from "./utils/format";
 export * from "./utils/manifest";
+export * from "./utils/markdown";
 export * from "./utils/url";

package/src/lib/hooks/use-indicator.tsx

@@ -25,13 +25,10 @@ export function useLocalIndicator() {
   /**
    * Set status to pending when isPending is true
    */
-  const startTransition = useCallback<React.TransitionStartFunction>(
-    (callback) => {
-      setStatus("pending");
-      startTransitionBase(callback);
-    },
-    [],
-  );
+  const startTransition = useCallback<React.TransitionStartFunction>((callback) => {
+    setStatus("pending");
+    startTransitionBase(callback);
+  }, []);
 
   /**
    * Set status back to idle after 1.5 seconds when status is succes

package/src/lib/utils/markdown.ts

@@ -0,0 +1,10 @@
+import MarkdownIt from "markdown-it";
+
+/**
+ * Convert markdown to HTML
+ */
+export const markdownParser = new MarkdownIt({
+  html: false, // safer default
+  linkify: true,
+  breaks: true,
+});

package/src/lib/utils/url.ts

@@ -5,8 +5,9 @@
  */
 export function url(path: string = ""): string {
   const base = process.env.NEXT_PUBLIC_DEPLOYMENT_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL;
+  const protocol = process.env.NODE_ENV === "production" ? "https" : "http";
 
-  if (base) return `https://${base}${path}`;
+  if (base) return `${protocol}://${base}${path}`;
 
   return `http://localhost:${process.env.NEXT_PUBLIC_PORT ?? 3000}${path}`;
 }

package/src/lib/utils/user-agent.ts

@@ -1,3 +1,8 @@
+/**
+ * Detects the browser name and version from a user agent string.
+ * @param ua - The user agent string.
+ * @returns An object with the browser name and optional version.
+ */
 export function detectBrowser(ua: string): { name: string; version?: string } {
   // Edge
   let m = ua.match(/Edg\/(\d+)/);
@@ -22,6 +27,11 @@ export function detectBrowser(ua: string): { name: string; version?: string } {
   return { name: "Unknown browser" };
 }
 
+/**
+ * Detects the operating system name and version from a user agent string.
+ * @param ua - The user agent string.
+ * @returns An object with the OS name and optional version.
+ */
 export function detectOS(ua: string): { name: string; version?: string } {
   // macOS
   let m = ua.match(/Mac OS X ([\d_]+)/);
@@ -48,6 +58,11 @@ export function detectOS(ua: string): { name: string; version?: string } {
   return { name: "Unknown OS" };
 }
 
+/**
+ * Detects the device type (Desktop, Mobile, or Tablet) from a user agent string.
+ * @param ua - The user agent string.
+ * @returns The device type as "Desktop", "Mobile", or "Tablet".
+ */
 export function detectDevice(ua: string): "Desktop" | "Mobile" | "Tablet" {
   const s = ua.toLowerCase();
 

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

@@ -5,10 +5,10 @@ import type { PropsWithChildren } from "react";
 export async function AuthLayout(props: PropsWithChildren<{ name: string }>) {
   return (
     <div className="container relative mx-auto grid h-dvh 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">
+      <div className="relative hidden h-full flex-col bg-muted 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">
+        <Link href="/" className="relative z-20 flex items-center font-bold text-lg">
           {props.name}
         </Link>
 

package/src/modules/auth/components/{guard-first-user.server.tsx → create-first-user-guard.server.tsx}

@@ -1,25 +1,25 @@
+import "server-cli-only";
+
 import { redirect } from "next/navigation";
+import { connection } from "next/server";
 import type { PropsWithChildren } from "react";
 import type { TDatabaseSchema, TulipContext } from "@/modules/config/entry";
 import { users } from "../db/schema";
 
 type AuthGuardFirstUserProps<TSchema extends TDatabaseSchema> = PropsWithChildren<
-  Pick<TulipContext<TSchema>, "db"> & { login?: boolean }
+  Pick<TulipContext<TSchema>, "db">
 >;
 
-export async function AuthGuardFirstUser<TSchema extends TDatabaseSchema>({
+export async function CreateFirstUserPageGuard<TSchema extends TDatabaseSchema>({
   children,
   db,
-  login = false,
 }: AuthGuardFirstUserProps<TSchema>) {
+  await connection();
+
   const allUsers = await db.select().from(users).limit(1);
   const usersExist = allUsers.length > 0;
 
-  if (login) {
-    if (!usersExist) redirect("/auth/create-first-user");
-  } else {
-    if (usersExist) redirect("/auth/login");
-  }
+  if (usersExist) redirect("/auth/login");
 
   return <>{children}</>;
 }

package/src/modules/auth/components/create-first-user-page.client.tsx

@@ -69,7 +69,7 @@ export function CreateFirstUserPage() {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Welkom eerste gebruiker</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Welkom eerste gebruiker</h1>
         <p className="text-muted-foreground text-sm">Maak eerst een account aan om in te loggen</p>
       </div>
 
@@ -138,14 +138,14 @@ export function CreateFirstUserPage() {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPassword(!showPassword)}
                         disabled={disabled}
                       >
                         {showPassword ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>

package/src/modules/auth/components/forget-password-page.client.tsx

@@ -25,7 +25,7 @@ export function ForgetPasswordPage() {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Wachtwoord vergeten</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Wachtwoord vergeten</h1>
         <p className="text-muted-foreground text-sm">
           Schrijf je email zodat we je een mail kunnen verzenden om je wachtwoord te herstellen.
         </p>

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

@@ -1,4 +1,4 @@
-import "server-only";
+import "server-cli-only";
 
 import { redirect } from "next/navigation";
 import type { PropsWithChildren } from "react";

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

@@ -91,7 +91,7 @@ export function LoginPage(props: LoginPageProps) {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Login</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Login</h1>
         <p className="text-muted-foreground text-sm">
           Schrijf je email en wachtwoord in om in te loggen.
         </p>
@@ -132,14 +132,14 @@ export function LoginPage(props: LoginPageProps) {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPassword(!showPassword)}
                         disabled={disabled}
                       >
                         {showPassword ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>
@@ -178,10 +178,10 @@ export function LoginPage(props: LoginPageProps) {
         </form>
       </Form>
 
-      <p className="text-muted-foreground px-8 text-center text-sm">
+      <p className="px-8 text-center text-muted-foreground text-sm">
         <Link
           href="/auth/forget-password"
-          className="hover:text-primary underline underline-offset-4"
+          className="underline underline-offset-4 hover:text-primary"
         >
           Wachtwoord vergeten
         </Link>

package/src/modules/auth/components/reset-password-page.client.tsx

@@ -42,7 +42,7 @@ export function ResetPasswordPage(params: {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Wachtwoord herstellen</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Wachtwoord herstellen</h1>
         <p className="text-muted-foreground text-sm">Vul je nieuwe wachtwoord in</p>
       </div>
 
@@ -89,14 +89,14 @@ export function ResetPasswordPage(params: {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPassword(!showPassword)}
                         disabled={form.formState.disabled}
                       >
                         {showPassword ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>
@@ -123,14 +123,14 @@ export function ResetPasswordPage(params: {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPasswordConfirm(!showPasswordConfirm)}
                         disabled={form.formState.disabled}
                       >
                         {showPasswordConfirm ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>

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

@@ -2,15 +2,14 @@
  * Components
  */
 export * from "./components/auth-layout.server";
+export * from "./components/create-first-user-guard.server";
 export * from "./components/guard.server";
-export * from "./components/guard-first-user.server";
-
+export * from "./handler/proxy.server";
+export * from "./handler/route.server";
 /**
  * Handlers
  */
-export * from "./handler/init";
-export * from "./handler/proxy.server";
-export * from "./handler/route.server";
+export * from "./handler/service.server";
 
 /**
  * Lib

package/src/modules/auth/handler/create-client.client.ts

@@ -5,7 +5,7 @@ import { adminClient, emailOTPClient, inferAdditionalFields } from "better-auth/
 import type { AccessControl, Role } from "better-auth/plugins";
 import { createAuthClient as createBetterAuthClient } from "better-auth/react";
 import { url } from "@/lib/utils/url";
-import type { AuthClient } from "./init";
+import type { Auth } from "./service.server";
 
 /**
  * Create auth client
@@ -39,7 +39,7 @@ export function createAuthClient<
       emailOTPClient(),
       passkeyClient(),
       adminClient({ ac, roles }),
-      inferAdditionalFields<AuthClient>(),
+      inferAdditionalFields<Auth>(),
     ],
   });
 }

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

@@ -1,6 +1,6 @@
 import { getSessionCookie } from "better-auth/cookies";
 import { type NextRequest, NextResponse } from "next/server";
-import { authCookiePrefix } from "./init";
+import { authCookiePrefix } from "./service.server";
 
 /**
  * Create auth proxy

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

@@ -1,12 +1,12 @@
 import { toNextJsHandler } from "better-auth/next-js";
 import type { NextRequest } from "next/server";
 import "server-cli-only";
-import type { AuthClient } from "./init";
+import type { Auth } from "./service.server";
 
 /**
  * Handle the auth routes
  */
-export function handleAuthRoute(props: { auth: AuthClient }) {
+export function handleAuthRoute(props: { auth: Auth }) {
   /**
    * GET route handler
    */

package/src/modules/auth/handler/{init.ts → service.server.ts}

@@ -1,30 +1,36 @@
 import { passkey } from "@better-auth/passkey";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
+import { createAuthMiddleware } from "better-auth/api";
 import { betterAuth } from "better-auth/minimal";
-import { nextCookies } from "better-auth/next-js";
-import { admin, createAuthMiddleware, emailOTP } from "better-auth/plugins";
+import { admin, emailOTP } from "better-auth/plugins";
 import { eq } from "drizzle-orm";
 import ForgetPasswordEmail from "@/components/emails/forget-password-email";
 import { url } from "@/lib/utils/url";
 import type { TDatabaseSchema } from "@/modules/config/entry";
-import type { DatabaseClient, EmailClient } from "@/modules/config/entry.server";
 import type { TulipConfig } from "@/modules/config/lib/config";
+import type { Database } from "@/modules/database/lib/service.server";
+import type { Email } from "@/modules/emails/lib/service.server";
 import { users } from "../entry";
 import type { createAccessControl, Role } from "../lib/permissions";
 
 export const authCookiePrefix = "tulip";
 
 type InitAuthProps<TSchema extends TDatabaseSchema> = {
-  db: DatabaseClient<TSchema>;
-  email: EmailClient;
+  db: Database<TSchema>;
+  email: Email;
   config: TulipConfig;
   ac: ReturnType<typeof createAccessControl>;
   roles: {
     [key in string]?: Role;
   };
+  allowedHosts: string[];
+  defaultRole?: string;
 };
 
-export function initAuth<TSchema extends TDatabaseSchema>(props: InitAuthProps<TSchema>) {
+/**
+ * Create the Better Auth server instance.
+ */
+function createAuth<TSchema extends TDatabaseSchema>(props: InitAuthProps<TSchema>) {
   return betterAuth({
     advanced: {
       cookiePrefix: authCookiePrefix,
@@ -32,10 +38,12 @@ export function initAuth<TSchema extends TDatabaseSchema>(props: InitAuthProps<T
         generateId: () => false,
       },
     },
+    baseURL: {
+      allowedHosts: props.allowedHosts,
+    },
     database: drizzleAdapter(props.db, {
       provider: "pg",
       usePlural: true,
-      // schema: props.schema,
     }),
     emailAndPassword: {
       enabled: true,
@@ -75,12 +83,12 @@ export function initAuth<TSchema extends TDatabaseSchema>(props: InitAuthProps<T
       }),
     },
     plugins: [
-      nextCookies(),
       passkey(),
       admin({
         roles: props.roles,
         ac: props.ac,
         adminRoles: ["admin", "developer"],
+        defaultRole: props.defaultRole ?? "user",
       }),
       emailOTP({
         sendVerificationOTP: async ({ email, otp, type }) => {
@@ -108,4 +116,17 @@ export function initAuth<TSchema extends TDatabaseSchema>(props: InitAuthProps<T
   });
 }
 
-export type AuthClient = ReturnType<typeof initAuth>;
+/**
+ * Better Auth instance type returned by `Auth.init()`.
+ */
+export type Auth = ReturnType<typeof createAuth>;
+
+/**
+ * Auth service namespace.
+ *
+ * @example
+ * const auth = Auth.init({ db, email, config, ac, roles, allowedHosts });
+ */
+export const Auth = {
+  init: createAuth,
+};