@blawness/admin-kit 0.2.0

package/src/components/admin/image-upload.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useRef, useState, useTransition } from "react";
+import { UploadCloud, Loader2, AlertCircle } from "lucide-react";
+
+// Mirror the server action (src/app/admin/media/actions.ts) — keep in sync.
+const OK_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+const MAX_BYTES = 8 * 1024 * 1024;
+
+/**
+ * Clear drag-and-drop / click-to-upload zone backed by the R2 upload action.
+ * Used for both a post's featured image (with `value`) and the gallery (no
+ * value, parent refreshes on change).
+ */
+export function ImageUpload({
+  value,
+  onChange,
+  label = "gambar",
+  uploadAction,
+}: {
+  value?: string | null;
+  onChange: (url: string) => void;
+  label?: string;
+  uploadAction: (formData: FormData) => Promise<{ url?: string; error?: string }>;
+}) {
+  const [pending, start] = useTransition();
+  const [error, setError] = useState<string>();
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  function upload(file: File | undefined) {
+    if (!file) return;
+    if (!OK_TYPES.includes(file.type)) {
+      setError("Format tidak didukung — gunakan JPG, PNG, WebP, atau GIF.");
+      return;
+    }
+    if (file.size > MAX_BYTES) {
+      setError("Ukuran gambar maksimal 8MB.");
+      return;
+    }
+    const fd = new FormData();
+    fd.set("file", file);
+    setError(undefined);
+    start(async () => {
+      const res = await uploadAction(fd);
+      if (res.error) setError(res.error);
+      else if (res.url) onChange(res.url);
+    });
+  }
+
+  return (
+    <div className="space-y-2">
+      <button
+        type="button"
+        onClick={() => inputRef.current?.click()}
+        onDragOver={(e) => {
+          e.preventDefault();
+          setDragging(true);
+        }}
+        onDragLeave={() => setDragging(false)}
+        onDrop={(e) => {
+          e.preventDefault();
+          setDragging(false);
+          upload(e.dataTransfer.files?.[0]);
+        }}
+        disabled={pending}
+        className={`group relative flex w-full flex-col items-center justify-center gap-3 rounded-xl border-2 border-dashed px-6 py-8 text-center transition-colors ${
+          dragging
+            ? "border-brand-500 bg-brand-50"
+            : "border-navy-200 bg-navy-50/40 hover:border-brand-400 hover:bg-brand-50/60"
+        } ${pending ? "pointer-events-none opacity-80" : "cursor-pointer"}`}
+      >
+        {value ? (
+          <>
+            {/* eslint-disable-next-line @next/next/no-img-element -- preview from R2 */}
+            <img
+              src={value}
+              alt=""
+              className="h-28 w-28 rounded-lg object-cover object-top ring-1 ring-navy-200 shadow-sm"
+            />
+            <span className="text-sm font-medium text-navy-700">
+              Klik untuk mengganti {label}
+            </span>
+            {pending && (
+              <span className="absolute inset-0 grid place-items-center rounded-xl bg-white/70">
+                <Loader2 className="h-6 w-6 animate-spin text-brand-600" />
+              </span>
+            )}
+          </>
+        ) : (
+          <>
+            <span className="flex h-12 w-12 items-center justify-center rounded-full bg-brand-100 text-brand-600 transition-transform group-hover:scale-105">
+              {pending ? (
+                <Loader2 className="h-6 w-6 animate-spin" />
+              ) : (
+                <UploadCloud className="h-6 w-6" />
+              )}
+            </span>
+            <span>
+              <span className="block text-sm font-semibold text-navy-900">
+                {pending ? "Mengunggah…" : `Klik untuk unggah ${label}`}
+              </span>
+              <span className="mt-0.5 block text-xs text-muted-foreground">
+                atau seret &amp; lepas di sini · JPG, PNG, WebP, GIF (maks 8MB)
+              </span>
+            </span>
+          </>
+        )}
+      </button>
+
+      <input
+        ref={inputRef}
+        type="file"
+        accept="image/*"
+        className="hidden"
+        onChange={(e) => upload(e.target.files?.[0])}
+        disabled={pending}
+      />
+
+      {error && (
+        <p className="flex items-center gap-1.5 text-sm text-red-600">
+          <AlertCircle className="h-4 w-4 shrink-0" />
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/admin/toast-on-param.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Suspense, useEffect, useRef } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { toast } from "sonner";
+
+function ToastOnParamInner({
+  param,
+  messages,
+}: {
+  param: string;
+  messages: Record<string, string>;
+}) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+  const fired = useRef(false);
+
+  useEffect(() => {
+    if (fired.current) return;
+    const value = searchParams.get(param);
+    if (!value) return;
+    fired.current = true;
+
+    const message = messages[value];
+    if (message) toast.success(message);
+
+    // Bersihkan param dari URL agar tidak terpicu ulang saat refresh.
+    const next = new URLSearchParams(searchParams.toString());
+    next.delete(param);
+    const qs = next.toString();
+    router.replace(qs ? `${pathname}?${qs}` : pathname);
+  }, [param, messages, searchParams, router, pathname]);
+
+  return null;
+}
+
+export function ToastOnParam(props: {
+  param: string;
+  messages: Record<string, string>;
+}) {
+  return (
+    <Suspense fallback={null}>
+      <ToastOnParamInner {...props} />
+    </Suspense>
+  );
+}

package/src/components/confirm-delete.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useState, useTransition, type ReactElement, type ReactNode } from "react";
+import { Loader2, Trash2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+
+export function ConfirmDelete({
+  action,
+  id,
+  title = "Hapus item ini?",
+  description = "Tindakan ini tidak dapat dibatalkan.",
+  confirmLabel = "Hapus",
+  successMessage = "Berhasil dihapus.",
+  trigger,
+}: {
+  /** Server action that receives FormData with an `id` field. */
+  action: (formData: FormData) => Promise<void>;
+  id: number;
+  title?: string;
+  description?: ReactNode;
+  confirmLabel?: string;
+  /** Toast yang muncul setelah penghapusan berhasil. */
+  successMessage?: string;
+  /** Custom trigger element. Defaults to an outline icon button. */
+  trigger?: ReactElement;
+}) {
+  const [open, setOpen] = useState(false);
+  const [pending, start] = useTransition();
+
+  function handleConfirm() {
+    start(async () => {
+      const fd = new FormData();
+      fd.set("id", String(id));
+      let succeeded = false;
+      try {
+        await action(fd);
+        // Hanya tercapai bila action selesai tanpa melempar (mis. redirect
+        // pada konflik akan throw, sehingga toast sukses tidak muncul).
+        succeeded = true;
+      } finally {
+        // Tutup dialog baik saat sukses maupun saat action me-redirect
+        // (mis. media yang masih dipakai → halaman menampilkan pesan error).
+        setOpen(false);
+      }
+      if (succeeded) toast.success(successMessage);
+    });
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={
+          trigger ?? (
+            <Button size="sm" variant="outline" aria-label="Hapus">
+              <Trash2 className="h-3.5 w-3.5" />
+            </Button>
+          )
+        }
+      />
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose render={<Button variant="outline" disabled={pending} />}>
+            Batal
+          </DialogClose>
+          <Button
+            variant="destructive"
+            onClick={handleConfirm}
+            disabled={pending}
+          >
+            {pending ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <Trash2 className="h-4 w-4" />
+            )}
+            {confirmLabel}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../../lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/src/components/ui/dialog.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "../../lib/utils"
+import { Button } from "./button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        "font-heading text-base leading-none font-medium",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/src/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "../../lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/src/components.ts

@@ -0,0 +1,17 @@
+export { ConfirmDelete } from "./components/confirm-delete";
+export { Button, buttonVariants } from "./components/ui/button";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./components/ui/dialog";
+export * from "./components/admin/editor";
+export * from "./components/admin/image-upload";
+export * from "./components/admin/toast-on-param";

package/src/db/index.ts

@@ -0,0 +1,8 @@
+import { drizzle } from "drizzle-orm/postgres-js";
+import postgres from "postgres";
+import * as schema from "./schema";
+
+const connectionString = process.env.DATABASE_URL;
+if (!connectionString) throw new Error("admin-kit: DATABASE_URL env var is required");
+const client = postgres(connectionString, { prepare: false });
+export const db = drizzle(client, { schema });

package/src/db/schema.ts

@@ -0,0 +1,23 @@
+import {
+  pgTable,
+  serial,
+  text,
+  timestamp,
+} from "drizzle-orm/pg-core";
+
+export const users = pgTable("users", {
+  id: serial("id").primaryKey(),
+  email: text("email").notNull().unique(),
+  name: text("name").notNull(),
+  passwordHash: text("password_hash"),
+  role: text("role").default("editor"),
+  createdAt: timestamp("created_at").defaultNow(),
+});
+
+export const media = pgTable("media", {
+  id: serial("id").primaryKey(),
+  url: text("url").notNull(),
+  altText: text("alt_text"),
+  album: text("album"),
+  uploadedAt: timestamp("uploaded_at").defaultNow(),
+});

package/src/index.ts

@@ -0,0 +1,7 @@
+export { cn } from "./lib/utils";
+export { slugify } from "./lib/slug";
+export { sanitizeHtml } from "./lib/sanitize";
+export * from "./lib/db-errors";
+export * from "./lib/r2";
+export * from "./db/schema";
+export { db } from "./db/index";

package/src/lib/admin/media.ts

@@ -0,0 +1,16 @@
+import { db } from "../../db/index";
+import { media } from "../../db/schema";
+import { desc, eq } from "drizzle-orm";
+
+export async function listMedia() {
+  return db.select().from(media).orderBy(desc(media.uploadedAt));
+}
+
+export async function getMediaById(id: number) {
+  const [row] = await db.select().from(media).where(eq(media.id, id)).limit(1);
+  return row ?? null;
+}
+
+export async function deleteMediaRow(id: number) {
+  await db.delete(media).where(eq(media.id, id));
+}

package/src/lib/admin/users.ts

@@ -0,0 +1,31 @@
+import { db } from "../../db/index";
+import { users } from "../../db/schema";
+import { asc, eq } from "drizzle-orm";
+import { hash } from "bcryptjs";
+
+export async function listUsers() {
+  return db
+    .select({ id: users.id, email: users.email, name: users.name, role: users.role })
+    .from(users)
+    .orderBy(asc(users.email));
+}
+
+export type UserRole = "admin" | "editor";
+
+export async function createUser(email: string, name: string, password: string, role: UserRole) {
+  const passwordHash = await hash(password, 12);
+  await db.insert(users).values({ email, name, passwordHash, role });
+}
+
+export async function updateUserPassword(id: number, password: string) {
+  const passwordHash = await hash(password, 12);
+  await db.update(users).set({ passwordHash }).where(eq(users.id, id));
+}
+
+export async function updateUserRole(id: number, role: UserRole) {
+  await db.update(users).set({ role }).where(eq(users.id, id));
+}
+
+export async function deleteUser(id: number) {
+  await db.delete(users).where(eq(users.id, id));
+}

package/src/lib/auth-helpers.ts

@@ -0,0 +1,16 @@
+import { redirect } from "next/navigation";
+import { auth } from "../auth/index";
+
+/** Any authenticated user (admin or editor). Returns the session. */
+export async function requireUser() {
+  const session = await auth();
+  if (!session?.user) redirect("/admin/login");
+  return session;
+}
+
+/** Admin only. Editors are sent to the dashboard. */
+export async function requireAdmin() {
+  const session = await requireUser();
+  if (session.user.role !== "admin") redirect("/admin");
+  return session;
+}

package/src/lib/db-errors.ts

@@ -0,0 +1,18 @@
+function hasSqlState(error: unknown, code: string): boolean {
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code?: string }).code === code
+  );
+}
+
+/** True when a Postgres error is a unique-constraint violation (SQLSTATE 23505). */
+export function isUniqueViolation(error: unknown): boolean {
+  return hasSqlState(error, "23505");
+}
+
+/** True when a Postgres error is a foreign-key violation (SQLSTATE 23503). */
+export function isForeignKeyViolation(error: unknown): boolean {
+  return hasSqlState(error, "23503");
+}