@simple-auth-kit/cli 1.0.0

package/registry/admin-apps/react/variants/base/src/components/ui/date-picker.tsx

@@ -0,0 +1,322 @@
+import { Button, buttonVariants } from "@/components/ui/button";
+import type { CalendarProps } from "@/components/ui/calendar";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+import { format } from "date-fns";
+import { type Locale, enUS } from "date-fns/locale";
+import {
+	Calendar as CalendarIcon,
+	ChevronLeft,
+	ChevronRight,
+} from "lucide-react";
+import * as React from "react";
+import { useImperativeHandle, useRef } from "react";
+
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { DayPicker } from "react-day-picker";
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	startYear = 1900,
+	endYear = 2025,
+	...props
+}: CalendarProps & { startYear?: number; endYear?: number }) {
+	const MONTHS = React.useMemo(() => {
+		let locale: Pick<Locale, "options" | "localize" | "formatLong"> = enUS;
+		const { options, localize, formatLong } = props.locale || {};
+		if (options && localize && formatLong) {
+			locale = {
+				options,
+				localize,
+				formatLong,
+			};
+		}
+		return genMonths(locale);
+	}, []);
+
+	const YEARS = React.useMemo(() => genYears(startYear, endYear), []);
+	const disableLeftNavigation = () => {
+		const today = new Date();
+		const startDate = new Date(today.getFullYear() - startYear, 0, 1);
+		if (props.month) {
+			return (
+				props.month.getMonth() === startDate.getMonth() &&
+				props.month.getFullYear() === startDate.getFullYear()
+			);
+		}
+		return false;
+	};
+	const disableRightNavigation = () => {
+		const today = new Date();
+		const endDate = new Date(today.getFullYear() + endYear, 11, 31);
+		if (props.month) {
+			return (
+				props.month.getMonth() === endDate.getMonth() &&
+				props.month.getFullYear() === endDate.getFullYear()
+			);
+		}
+		return false;
+	};
+
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months:
+					"flex flex-col sm:flex-row space-y-4  sm:space-y-0 justify-center",
+				month: "flex flex-col items-center space-y-4",
+				month_caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center ",
+				button_previous: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5",
+					disableLeftNavigation() && "pointer-events-none",
+				),
+				button_next: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5",
+					disableRightNavigation() && "pointer-events-none",
+				),
+				month_grid: "w-full border-collapse space-y-1",
+				weekdays: cn("flex", props.showWeekNumber && "justify-end"),
+				weekday:
+					"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+				week: "flex w-full mt-2",
+				day: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 rounded-1",
+				day_button: cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-9 w-9 p-0 font-normal aria-selected:opacity-100 rounded-l-md rounded-r-md",
+				),
+				range_end: "day-range-end",
+				selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-l-md rounded-r-md",
+				today: "bg-accent text-accent-foreground",
+				outside:
+					"day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+				disabled: "text-muted-foreground opacity-50",
+				range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				Chevron: ({ ...props }) =>
+					props.orientation === "left" ? (
+						<ChevronLeft className="h-4 w-4" />
+					) : (
+						<ChevronRight className="h-4 w-4" />
+					),
+				MonthCaption: ({ calendarMonth }) => {
+					return (
+						<div className="inline-flex gap-2">
+							<Select
+								defaultValue={calendarMonth.date.getMonth().toString()}
+								onValueChange={(value) => {
+									const newDate = new Date(calendarMonth.date);
+									newDate.setMonth(Number.parseInt(value, 10));
+									props.onMonthChange?.(newDate);
+								}}
+							>
+								<SelectTrigger className="w-fit gap-1 border-none p-0 focus:bg-accent focus:text-accent-foreground">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{MONTHS.map((month) => (
+										<SelectItem
+											key={month.value}
+											value={month.value.toString()}
+										>
+											{month.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+							<Select
+								defaultValue={calendarMonth.date.getFullYear().toString()}
+								onValueChange={(value) => {
+									const newDate = new Date(calendarMonth.date);
+									newDate.setFullYear(Number.parseInt(value, 10));
+									props.onMonthChange?.(newDate);
+								}}
+							>
+								<SelectTrigger className="w-fit gap-1 border-none p-0 focus:bg-accent focus:text-accent-foreground">
+									<SelectValue />
+								</SelectTrigger>
+								<SelectContent>
+									{YEARS.map((year) => (
+										<SelectItem key={year.value} value={year.value.toString()}>
+											{year.label}
+										</SelectItem>
+									))}
+								</SelectContent>
+							</Select>
+						</div>
+					);
+				},
+			}}
+			{...props}
+		/>
+	);
+}
+Calendar.displayName = "Calendar";
+
+function genMonths(
+	locale: Pick<Locale, "options" | "localize" | "formatLong">,
+) {
+	return Array.from({ length: 12 }, (_, i) => ({
+		value: i,
+		label: format(new Date(2021, i), "MMMM", { locale }),
+	}));
+}
+
+function genYears(startYear = 1900, endYear = 2025) {
+	return Array.from({ length: endYear - startYear + 1 }, (_, i) => ({
+		value: startYear + i,
+		label: (startYear + i).toString(),
+	}));
+}
+
+type DatePickerProps = {
+	value?: Date;
+	onChange?: (date: Date | undefined) => void;
+	disabled?: boolean;
+	placeholder?: string;
+	/**
+	 * The year range will be: `This year + yearRange` and `this year - yearRange`.
+	 * Default is 50.
+	 * */
+	startYear?: number;
+	endYear?: number;
+	/**
+	 * The format is derived from the `date-fns` documentation.
+	 * @reference https://date-fns.org/v3.6.0/docs/format
+	 **/
+	displayFormat?: string;
+	className?: string;
+	/**
+	 * Show the default month when popup the calendar. Default is the current Date().
+	 **/
+	defaultPopupValue?: Date;
+} & Pick<
+	CalendarProps,
+	"locale" | "weekStartsOn" | "showWeekNumber" | "showOutsideDays"
+>;
+
+type DatePickerRef = {
+	value?: Date;
+} & Omit<HTMLButtonElement, "value">;
+
+const DatePicker = React.forwardRef<Partial<DatePickerRef>, DatePickerProps>(
+	(
+		{
+			locale = enUS,
+			defaultPopupValue = new Date(),
+			value,
+			onChange,
+			startYear = 1980,
+			endYear = 2025,
+			disabled = false,
+			displayFormat = "PPP",
+			placeholder = "Pick a date",
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const [month, setMonth] = React.useState<Date>(value ?? defaultPopupValue);
+		const buttonRef = useRef<HTMLButtonElement>(null);
+		const displayDate = React.useMemo(() => value, [value]);
+
+		// Add effect to update month when value changes
+		React.useEffect(() => {
+			if (value) {
+				setMonth(value);
+			}
+		}, [value]);
+
+		const handleSelect = (newDay: Date | undefined) => {
+			if (!newDay) return;
+			onChange?.(newDay);
+			setMonth(newDay);
+		};
+
+		useImperativeHandle(
+			ref,
+			() => ({
+				...buttonRef.current,
+				value: displayDate,
+			}),
+			[displayDate],
+		);
+
+		let loc = enUS;
+		const { options, localize, formatLong } = locale;
+		if (options && localize && formatLong) {
+			loc = {
+				...enUS,
+				options,
+				localize,
+				formatLong,
+			};
+		}
+
+		return (
+			<Popover>
+				<PopoverTrigger asChild disabled={disabled}>
+					<Button
+						variant="outline"
+						className={cn(
+							"w-full justify-start text-left font-normal",
+							!displayDate && "text-muted-foreground",
+							className,
+						)}
+						ref={buttonRef}
+					>
+						<CalendarIcon className="mr-2 h-4 w-4" />
+						{displayDate ? (
+							format(displayDate, displayFormat, { locale: loc })
+						) : (
+							<span>{placeholder}</span>
+						)}
+					</Button>
+				</PopoverTrigger>
+				<PopoverContent className="w-auto p-0">
+					<Calendar
+						mode="single"
+						selected={displayDate}
+						month={month}
+						onSelect={(newDate) => {
+							if (newDate) {
+								handleSelect(newDate);
+							}
+						}}
+						onMonthChange={setMonth}
+						startYear={startYear}
+						endYear={endYear}
+						locale={locale}
+						{...props}
+					/>
+				</PopoverContent>
+			</Popover>
+		);
+	},
+);
+
+DatePicker.displayName = "DatePicker";
+
+export { DatePicker };
+export type { DatePickerProps, DatePickerRef };

package/registry/admin-apps/react/variants/base/src/components/ui/sonner.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+function Toaster({ ...props }: ToasterProps) {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+}
+
+export { Toaster };

package/registry/admin-apps/react/variants/base/src/components/user-menu.tsx

@@ -0,0 +1,65 @@
+import { useState } from "react";
+import { observer } from "mobx-react-lite";
+import { useNavigate } from "react-router-dom";
+import { KeyRoundIcon, LogOutIcon, UserIcon } from "lucide-react";
+import { ChangePasswordDialog } from "@/components/change-password-dialog";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { useAuthStore } from "@/stores/store-context";
+
+function initialsOf(label: string): string {
+  return (
+    label
+      .split(/[@.\s]+/)
+      .filter(Boolean)
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase())
+      .join("") || "?"
+  );
+}
+
+/** Top-right profile dropdown, alongside `NavUser` in the sidebar footer — the reference app's `Header`/`UserMenu` puts this in the top bar, not just the sidebar. */
+export const UserMenu = observer(function UserMenu() {
+  const store = useAuthStore();
+  const navigate = useNavigate();
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false);
+
+  const label = store.currentUser?.displayName || store.currentUser?.email || store.currentUser?.sub || "Account";
+  const photo = store.currentUser?.photo ?? null;
+
+  async function handleLogOut() {
+    await store.logout();
+    navigate("/login", { replace: true });
+  }
+
+  return (
+    <>
+      <DropdownMenu modal={false}>
+        <DropdownMenuTrigger asChild>
+          <Avatar className="size-8 cursor-pointer">
+            {photo && <AvatarImage src={photo} alt="" className="object-cover" />}
+            <AvatarFallback>{initialsOf(label)}</AvatarFallback>
+          </Avatar>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={() => navigate("/account")}>
+              <UserIcon />
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={() => setChangePasswordOpen(true)}>
+              <KeyRoundIcon />
+              Change password
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem variant="destructive" onClick={() => void handleLogOut()}>
+            <LogOutIcon />
+            Log out
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <ChangePasswordDialog open={changePasswordOpen} onClose={() => setChangePasswordOpen(false)} />
+    </>
+  );
+});

package/registry/admin-apps/react/variants/base/src/hooks/use-live-audit-feed.ts

@@ -0,0 +1,50 @@
+import type { AuditLogEntry } from "@simple-auth-kit/auth-client";
+import { useEffect, useRef, useState } from "react";
+import { io, type Socket } from "socket.io-client";
+import { cookieTokenStorage } from "@/lib/token-storage";
+
+const AUTH_API_URL = import.meta.env["VITE_AUTH_API_URL"] ?? "http://localhost:3001";
+
+export type LiveFeedStatus = "connecting" | "connected" | "disconnected";
+
+/**
+ * Live tail of the backend's `/audit-logs` socket.io namespace. Entries arrive as
+ * `audit-log:created` in the same wire shape as the REST list, newest first, capped.
+ */
+export function useLiveAuditFeed(enabled: boolean, cap = 20) {
+  const [status, setStatus] = useState<LiveFeedStatus>("connecting");
+  const [entries, setEntries] = useState<AuditLogEntry[]>([]);
+  const socketRef = useRef<Socket | null>(null);
+
+  useEffect(() => {
+    if (!enabled) return;
+    let cancelled = false;
+
+    (async () => {
+      const tokens = await cookieTokenStorage.get();
+      if (cancelled || !tokens) {
+        setStatus("disconnected");
+        return;
+      }
+      const socket = io(`${AUTH_API_URL}/audit-logs`, {
+        auth: { token: tokens.accessToken },
+      });
+      socketRef.current = socket;
+
+      socket.on("connect", () => setStatus("connected"));
+      socket.on("disconnect", () => setStatus("disconnected"));
+      socket.on("connect_error", () => setStatus("disconnected"));
+      socket.on("audit-log:created", (entry: AuditLogEntry) => {
+        setEntries((prev) => [entry, ...prev].slice(0, cap));
+      });
+    })();
+
+    return () => {
+      cancelled = true;
+      socketRef.current?.disconnect();
+      socketRef.current = null;
+    };
+  }, [enabled, cap]);
+
+  return { status, entries };
+}

package/registry/admin-apps/react/variants/base/src/index.css

@@ -0,0 +1,161 @@
+@import "tailwindcss";
+@import "@fontsource-variable/bricolage-grotesque";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+/* `next-themes` toggles a `.dark` class on `<html>` — drive `dark:` from that instead of Tailwind v4's default `prefers-color-scheme` media query. */
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-border: var(--border);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --font-heading: var(--font-sans);
+  --font-sans: var(--font-sans);
+  --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-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --font-sans: "Bricolage Grotesque Variable", ui-sans-serif, system-ui, sans-serif;
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --border: oklch(0.92 0.004 286.32);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --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);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+/* Applied by `next-themes` when the resolved theme (explicit choice, or `system` following the OS) is dark. */
+.dark {
+    --background: oklch(0.141 0.005 285.823);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.21 0.006 285.885);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.21 0.006 285.885);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.92 0.004 286.32);
+    --primary-foreground: oklch(0.21 0.006 285.885);
+    --secondary: oklch(0.274 0.006 286.033);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.274 0.006 286.033);
+    --muted-foreground: oklch(0.705 0.015 286.067);
+    --accent: oklch(0.274 0.006 286.033);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --destructive-foreground: oklch(0.985 0 0);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.552 0.016 285.938);
+    --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.21 0.006 285.885);
+    --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.274 0.006 286.033);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+
+@theme {
+  --animate-caret-blink: caret-blink 1.25s ease-out infinite;
+  --animate-spin-slow: spin-slow 3s linear infinite;
+  --animate-spin-reverse: spin-reverse 1.5s linear infinite;
+  --animate-progress-indeterminate: progress-indeterminate 1.5s ease-in-out infinite;
+
+  @keyframes caret-blink {
+    0%, 70%, 100% { opacity: 1; }
+    20%, 50% { opacity: 0; }
+  }
+  @keyframes spin-slow {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+  @keyframes spin-reverse {
+    from { transform: rotate(360deg); }
+    to { transform: rotate(0deg); }
+  }
+  @keyframes progress-indeterminate {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(400%); }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}