@xk2800/nextjs-template 0.5.3

package/lib/recalculate-columns.ts

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react"
+
+/**
+ * Container-width-based column collapsing. Pure — no DOM or React runtime dependency,
+ * so it is trivially unit-testable. The `<DataTable>` component feeds it the wrapper's
+ * measured width on every resize.
+ */
+
+/** Fallback width for a column that does not declare its own `minWidth`. */
+export const MIN_CELL_WIDTH = 150
+
+/** Below this width, `sticky` columns stop being pinned and can be auto-hidden too. */
+export const STICKY_BREAKPOINT = 577
+
+/** Rendered width of the row-toggle column (w-8 + cell padding) shown once collapsed. */
+export const EXPANDER_WIDTH = 48
+
+export type Column<TRow = Record<string, unknown>> = {
+  name: string
+  title: ReactNode
+  minWidth?: number
+  maxWidth?: number
+  /** Pinned column — only kept from auto-hiding while width >= the sticky breakpoint. */
+  sticky?: boolean
+  /** Set by `recalculateColumns` — the column did not fit and moved into the detail row. */
+  autoHide?: boolean
+  renderer?: (row: TRow) => ReactNode
+}
+
+export type RecalcOptions = {
+  /** Fallback when a column has no `minWidth`. Defaults to {@link MIN_CELL_WIDTH}. */
+  minCellWidth?: number
+  /** `sticky` columns are pinned only at width >= this. Defaults to {@link STICKY_BREAKPOINT}. */
+  stickyBreakpoint?: number
+}
+
+export type RecalcResult<TRow = Record<string, unknown>> = {
+  /** Same order as the input, with `autoHide` set on the columns that did not fit. */
+  columns: Column<TRow>[]
+  /** True when at least one column was auto-hidden. */
+  isCollapsed: boolean
+}
+
+/**
+ * Decide which columns fit in `width`. Sums each visible column's `minWidth`
+ * (or `minCellWidth`); if the total exceeds `width`, walks right-to-left marking
+ * columns `autoHide` until the rest fit. Column 0 is always kept as an anchor, and
+ * active `sticky` columns are skipped.
+ */
+export function recalculateColumns<TRow>(
+  columns: Column<TRow>[],
+  width: number,
+  opts: RecalcOptions = {},
+): RecalcResult<TRow> {
+  const minCell = opts.minCellWidth ?? MIN_CELL_WIDTH
+  const stickyActive = width >= (opts.stickyBreakpoint ?? STICKY_BREAKPOINT)
+  const cellW = (c: Column<TRow>) => c.minWidth ?? minCell
+
+  const next = columns.map((c) => ({ ...c, autoHide: false }))
+  if (!(width > 0)) return { columns: next, isCollapsed: false } // unmeasured (SSR / first paint)
+
+  let predicted = next.reduce((sum, c) => sum + cellW(c), 0)
+  if (predicted <= width) return { columns: next, isCollapsed: false }
+  predicted += EXPANDER_WIDTH // collapsing adds the row-toggle column
+
+  // Walk right -> left; stop at index 1 so column 0 always stays as an anchor.
+  for (let i = next.length - 1; i >= 1 && predicted > width; i--) {
+    const c = next[i]
+    if (c.sticky && stickyActive) continue // pinned & active -> keep
+    c.autoHide = true
+    predicted -= cellW(c)
+  }
+
+  return { columns: next, isCollapsed: next.some((c) => c.autoHide) }
+}

package/lib/request-info.ts

@@ -0,0 +1,78 @@
+import "server-only"
+import { UAParser } from "ua-parser-js"
+import geoip from "geoip-lite"
+
+const countryNames = new Intl.DisplayNames(["en"], { type: "region" })
+
+export type DeviceType = "desktop" | "mobile" | "tablet"
+
+export interface DeviceInfo {
+  os: string | null
+  browser: string | null
+  deviceType: DeviceType
+}
+
+export interface GeoInfo {
+  country: string | null
+  city: string | null
+}
+
+/**
+ * First address in X-Forwarded-For is the original client — everything after
+ * is intermediate proxies. Falls back to null (e.g. local dev with no proxy).
+ */
+export function getClientIp(headers: Headers | undefined | null): string | null {
+  const forwardedFor = headers?.get("x-forwarded-for")
+  if (forwardedFor) return forwardedFor.split(",")[0].trim()
+
+  return headers?.get("x-real-ip") ?? null
+}
+
+export function parseUserAgent(userAgent: string | null | undefined): DeviceInfo {
+  if (!userAgent) {
+    return { os: null, browser: null, deviceType: "desktop" }
+  }
+
+  const { os, browser, device } = new UAParser(userAgent).getResult()
+
+  return {
+    os: os.name ? [os.name, os.version].filter(Boolean).join(" ") : null,
+    browser: browser.name ?? null,
+    deviceType: device.type === "mobile" || device.type === "tablet" ? device.type : "desktop",
+  }
+}
+
+/**
+ * Offline lookup (geoip-lite ships its own IP-range database, no network
+ * call) — resolves to nulls for private/local addresses like 127.0.0.1.
+ */
+export function lookupGeoLocation(ipAddress: string | null | undefined): GeoInfo {
+  if (!ipAddress) return { country: null, city: null }
+
+  const geo = geoip.lookup(ipAddress)
+  if (!geo) return { country: null, city: null }
+
+  let country: string | null = geo.country || null
+  if (country) {
+    try {
+      country = countryNames.of(country) ?? country
+    } catch {
+      // Unrecognized region code — keep the raw code rather than losing it.
+    }
+  }
+
+  return { country, city: geo.city || null }
+}
+
+export function formatDeviceInfo({ os, browser, deviceType }: DeviceInfo): string {
+  const label = [browser, os].filter(Boolean).join(" on ")
+  const typeLabel = deviceType === "mobile" ? "Mobile" : deviceType === "tablet" ? "Tablet" : "Desktop"
+
+  return label ? `${label} · ${typeLabel}` : `Unknown device · ${typeLabel}`
+}
+
+export function formatLocation({ country, city }: GeoInfo): string {
+  if (!country && !city) return "Unknown"
+
+  return [city, country].filter(Boolean).join(", ")
+}

package/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/package.json

@@ -0,0 +1,301 @@
+{
+  "name": "@xk2800/nextjs-template",
+  "version": "0.5.3",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xk2800/nextjs-template.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "sideEffects": [
+    "./dist/config/env.js",
+    "./dist/config/env.mjs",
+    "./dist/db/index.js",
+    "./dist/db/index.mjs",
+    "./dist/auth/index.js",
+    "./dist/auth/index.mjs",
+    "./dist/activity/logger.js",
+    "./dist/activity/logger.mjs",
+    "./dist/activity/queries.js",
+    "./dist/activity/queries.mjs",
+    "./dist/sessions/queries.js",
+    "./dist/sessions/queries.mjs",
+    "./dist/admin/queries.js",
+    "./dist/admin/queries.mjs",
+    "./dist/users/queries.js",
+    "./dist/users/queries.mjs",
+    "./dist/settings/queries.js",
+    "./dist/settings/queries.mjs"
+  ],
+  "files": [
+    "dist",
+    "components/ui",
+    "components/auth",
+    "components/theme",
+    "components/providers",
+    "components/email",
+    "components/dashboard",
+    "lib/utils.ts",
+    "lib/auth-client.ts",
+    "lib/formatters.ts",
+    "lib/recalculate-columns.ts",
+    "lib/cookie-names.ts",
+    "lib/device-fingerprint.ts",
+    "lib/request-info.ts",
+    "types/auth",
+    "styles/theme.css",
+    "README.md"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./auth": {
+      "types": "./dist/auth/index.d.ts",
+      "import": "./dist/auth/index.mjs",
+      "require": "./dist/auth/index.js"
+    },
+    "./auth/helpers": {
+      "types": "./dist/auth/helpers.d.ts",
+      "import": "./dist/auth/helpers.mjs",
+      "require": "./dist/auth/helpers.js"
+    },
+    "./auth-client": {
+      "types": "./dist/auth-client/index.d.ts",
+      "import": "./dist/auth-client/index.mjs",
+      "require": "./dist/auth-client/index.js"
+    },
+    "./db": {
+      "types": "./dist/db/index.d.ts",
+      "import": "./dist/db/index.mjs",
+      "require": "./dist/db/index.js"
+    },
+    "./db/schema": {
+      "types": "./dist/db/schema.d.ts",
+      "import": "./dist/db/schema.mjs",
+      "require": "./dist/db/schema.js"
+    },
+    "./config/env": {
+      "types": "./dist/config/env.d.ts",
+      "import": "./dist/config/env.mjs",
+      "require": "./dist/config/env.js"
+    },
+    "./types/auth/loginSchema": {
+      "types": "./dist/types/auth/loginSchema.d.ts",
+      "import": "./dist/types/auth/loginSchema.mjs",
+      "require": "./dist/types/auth/loginSchema.js"
+    },
+    "./types/auth/signupSchema": {
+      "types": "./dist/types/auth/signupSchema.d.ts",
+      "import": "./dist/types/auth/signupSchema.mjs",
+      "require": "./dist/types/auth/signupSchema.js"
+    },
+    "./activity/logger": {
+      "types": "./dist/activity/logger.d.ts",
+      "import": "./dist/activity/logger.mjs",
+      "require": "./dist/activity/logger.js"
+    },
+    "./activity/queries": {
+      "types": "./dist/activity/queries.d.ts",
+      "import": "./dist/activity/queries.mjs",
+      "require": "./dist/activity/queries.js"
+    },
+    "./sessions/queries": {
+      "types": "./dist/sessions/queries.d.ts",
+      "import": "./dist/sessions/queries.mjs",
+      "require": "./dist/sessions/queries.js"
+    },
+    "./admin/queries": {
+      "types": "./dist/admin/queries.d.ts",
+      "import": "./dist/admin/queries.mjs",
+      "require": "./dist/admin/queries.js"
+    },
+    "./users/queries": {
+      "types": "./dist/users/queries.d.ts",
+      "import": "./dist/users/queries.mjs",
+      "require": "./dist/users/queries.js"
+    },
+    "./settings/queries": {
+      "types": "./dist/settings/queries.d.ts",
+      "import": "./dist/settings/queries.mjs",
+      "require": "./dist/settings/queries.js"
+    },
+    "./lib/utils": "./lib/utils.ts",
+    "./lib/formatters": "./lib/formatters.ts",
+    "./lib/recalculate-columns": "./lib/recalculate-columns.ts",
+    "./styles/theme.css": "./styles/theme.css",
+    "./components/*": "./components/*.tsx"
+  },
+  "typesVersions": {
+    "*": {
+      "auth": [
+        "dist/auth/index.d.ts"
+      ],
+      "auth/helpers": [
+        "dist/auth/helpers.d.ts"
+      ],
+      "auth-client": [
+        "dist/auth-client/index.d.ts"
+      ],
+      "db": [
+        "dist/db/index.d.ts"
+      ],
+      "db/schema": [
+        "dist/db/schema.d.ts"
+      ],
+      "config/env": [
+        "dist/config/env.d.ts"
+      ],
+      "types/auth/loginSchema": [
+        "dist/types/auth/loginSchema.d.ts"
+      ],
+      "types/auth/signupSchema": [
+        "dist/types/auth/signupSchema.d.ts"
+      ],
+      "activity/logger": [
+        "dist/activity/logger.d.ts"
+      ],
+      "activity/queries": [
+        "dist/activity/queries.d.ts"
+      ],
+      "sessions/queries": [
+        "dist/sessions/queries.d.ts"
+      ],
+      "admin/queries": [
+        "dist/admin/queries.d.ts"
+      ],
+      "users/queries": [
+        "dist/users/queries.d.ts"
+      ],
+      "settings/queries": [
+        "dist/settings/queries.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "npm run build:lib && next build",
+    "start": "next start",
+    "lint": "next lint",
+    "test": "bun lib/recalculate-columns.test.ts && bun lib/auth-throttle-limits.test.ts && bun lib/shared-devices.test.ts",
+    "build:lib": "tsup",
+    "typecheck": "tsc --noEmit -p tsconfig.build.json",
+    "doctor": "bun --env-file=.env.development scripts/doctor.ts",
+    "prepublishOnly": "bun run typecheck && bun run build:lib",
+    "bump-version": "bun scripts/bump-version.ts",
+    "generate": "bun drizzle-kit generate",
+    "migrate:dev": "bun --env-file=.env.development drizzle-kit migrate",
+    "migrate:prod": "bun --env-file=.env.production drizzle-kit migrate",
+    "migrate:test": "bun --env-file=.env.test drizzle-kit migrate",
+    "studio:dev": "bun --env-file=.env.development drizzle-kit studio",
+    "studio:prod": "bun --env-file=.env.production drizzle-kit studio",
+    "dev:doppler": "doppler run -- next dev --turbopack",
+    "build:doppler": "doppler run -- next build",
+    "start:doppler": "doppler run -- next start",
+    "generate:doppler": "doppler run -- drizzle-kit generate",
+    "migrate:doppler": "doppler run -- drizzle-kit migrate",
+    "studio:doppler": "doppler run -- drizzle-kit studio",
+    "docs:dev": "cd docs && bun run dev"
+  },
+  "dependencies": {
+    "@neondatabase/serverless": "^1.0.0",
+    "@paralleldrive/cuid2": "^3.0.4",
+    "bcrypt": "^6.0.0",
+    "better-auth": "^1.3.34",
+    "drizzle-orm": "^0.45.0",
+    "geoip-lite": "^2.0.3",
+    "pg": "^8.16.0",
+    "radix-ui": "^1.6.7",
+    "server-only": "^0.0.1",
+    "ua-parser-js": "2.0.10",
+    "zod": "^4.1.12"
+  },
+  "peerDependencies": {
+    "next": "^15.0.0 || ^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@radix-ui/react-alert-dialog": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.0",
+    "@radix-ui/react-dialog": "^1.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slot": "^1.2.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^3.3.0",
+    "lucide-react": "^1.16.0",
+    "react-icons": "^5.5.0",
+    "next-themes": "^0.4.0",
+    "@react-email/components": "^1.0.0",
+    "resend": "^6.4.2",
+    "sonner": "^2.0.0",
+    "@fingerprintjs/fingerprintjs": "^5.0.0",
+    "react-qr-code": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-email/components": {
+      "optional": true
+    },
+    "resend": {
+      "optional": true
+    },
+    "next-themes": {
+      "optional": true
+    },
+    "sonner": {
+      "optional": true
+    },
+    "@fingerprintjs/fingerprintjs": {
+      "optional": true
+    },
+    "react-qr-code": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@fingerprintjs/fingerprintjs": "^5.2.0",
+    "@inquirer/prompts": "^8.5.2",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@react-email/components": "^1.0.1",
+    "@tailwindcss/postcss": "^4",
+    "@types/bcrypt": "^6.0.0",
+    "@types/geoip-lite": "^1.4.4",
+    "@types/node": "^26.1.0",
+    "@types/pg": "^8.15.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19",
+    "@types/ua-parser-js": "^0.7.39",
+    "bun-types": "^1.4.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dotenv": "^17.2.3",
+    "drizzle-kit": "^0.31.1",
+    "eslint": "^10",
+    "eslint-config-next": "16.3.0",
+    "lucide-react": "^1.16.0",
+    "next": "16.3.0",
+    "next-themes": "^0.4.6",
+    "playwright": "^1.62.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "react-qr-code": "^2.2.0",
+    "resend": "^6.4.2",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "^4",
+    "tsup": "^8.5.1",
+    "tsx": "^4.19.4",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^6.0.3"
+  }
+}

package/styles/theme.css

@@ -0,0 +1,124 @@
+/*
+ * shadcn/ui theme variables required by components/ui/* and components/auth/*.
+ * Import this after "tailwindcss" in your project's globals.css:
+ *   @import "tailwindcss";
+ *   @import "@xk2800/nextjs-template/styles/theme.css";
+ * Also add tw-animate-css if you use Dialog/AlertDialog/DropdownMenu transitions:
+ *   @import "tw-animate-css";
+ */
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/types/auth/loginSchema.ts

@@ -0,0 +1,11 @@
+import { z } from "zod";
+
+export const LoginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(6, {
+    message: 'Password must be at least 6 characters long.',
+  }),
+  // name: z.string().min(1, {
+  //   message: 'Name should be at least 1 character long.'
+  // })
+})

package/types/auth/signupSchema.ts

@@ -0,0 +1,14 @@
+import { z } from "zod";
+
+export const SignupSchema = z.object({
+  name: z.string().min(1, {
+    message: 'Name is required.',
+  }),
+  email: z.string().email(),
+  // Matches better-auth's default minPasswordLength (server/auth.ts doesn't
+  // override it) — was 6 here, which let the client accept passwords the
+  // server would then reject.
+  password: z.string().min(8, {
+    message: 'Password must be at least 8 characters long.',
+  }),
+})