@simple-auth-kit/cli 1.3.2 → 1.4.0

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/roles/[id]/page.tsx

@@ -3,8 +3,12 @@
 import { useAbility } from "@casl/react";
 import Link from "next/link";
 import { useParams, useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { AuthApiError, type PermissionSummary, type RoleSummary } from "@simple-auth-kit/auth-client";
+import { startTransition, useCallback, useEffect, useState } from "react";
+import {
+  AuthApiError,
+  type PermissionSummary,
+  type RoleSummary,
+} from "@simple-auth-kit/auth-client";
 import { PencilIcon } from "lucide-react";
 import { toast } from "sonner";
 import { Breadcrumb } from "@/components/breadcrumb";
@@ -12,7 +16,13 @@ import { PermissionGroupView } from "@/components/permission-group-view";
 import { PermissionRequired } from "@/components/permission-required";
 import { Badge } from "@/components/ui/badge";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -22,7 +32,12 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import { PERMISSIONS, hasPermission, missingPermissionHint, type AppAbility } from "@/lib/ability";
+import {
+  PERMISSIONS,
+  hasPermission,
+  missingPermissionHint,
+  type AppAbility,
+} from "@/lib/ability";
 import { authClient } from "@/lib/auth-client";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
@@ -34,10 +49,15 @@ export default function RoleDetailPage() {
   const router = useRouter();
   const ability = useAbility<AppAbility>();
   const canManage = hasPermission(ability, PERMISSIONS.rolesManage);
-  const canReadPermissions = hasPermission(ability, PERMISSIONS.permissionsRead);
+  const canReadPermissions = hasPermission(
+    ability,
+    PERMISSIONS.permissionsRead,
+  );
 
   const [role, setRole] = useState<RoleSummary | null>(null);
-  const [permissionCatalog, setPermissionCatalog] = useState<PermissionSummary[]>([]);
+  const [permissionCatalog, setPermissionCatalog] = useState<
+    PermissionSummary[]
+  >([]);
   const [loading, setLoading] = useState(false);
   const [deleting, setDeleting] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
@@ -57,7 +77,7 @@ export default function RoleDetailPage() {
 
   useEffect(() => {
     if (!canManage) return;
-    void load();
+    startTransition(() => void load());
   }, [canManage, load]);
 
   useEffect(() => {
@@ -65,10 +85,20 @@ export default function RoleDetailPage() {
     authClient
       .listPermissions()
       .then(setPermissionCatalog)
-      .catch((err) => toast.error(apiErrorMessage(err, "Couldn't load the permission catalog.")));
+      .catch((err) =>
+        toast.error(
+          apiErrorMessage(err, "Couldn't load the permission catalog."),
+        ),
+      );
   }, [canReadPermissions]);
 
-  if (!canManage) return <PermissionRequired permission={PERMISSIONS.rolesManage} what="Role details" />;
+  if (!canManage)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.rolesManage}
+        what="Role details"
+      />
+    );
 
   async function toggleActive() {
     if (!role) return;
@@ -77,7 +107,9 @@ export default function RoleDetailPage() {
       setRole((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
       toast.success(role.isActive ? "Role deactivated." : "Role activated.");
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't change this role's status. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't change this role's status. Try again."),
+      );
     }
   }
 
@@ -89,7 +121,9 @@ export default function RoleDetailPage() {
       toast.success(`Role "${role.name}" deleted.`);
       router.push("/roles");
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't delete this role. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't delete this role. Try again."),
+      );
       setDeleting(false);
       setDeleteOpen(false);
     }
@@ -97,9 +131,19 @@ export default function RoleDetailPage() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Breadcrumb items={[{ title: "Roles", href: "/roles" }, { title: role?.displayName ?? role?.name ?? "Details", href: `/roles/${id}` }]} />
+      <Breadcrumb
+        items={[
+          { title: "Roles", href: "/roles" },
+          {
+            title: role?.displayName ?? role?.name ?? "Details",
+            href: `/roles/${id}`,
+          },
+        ]}
+      />
 
-      {loading && !role && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !role && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {role && (
         <>
@@ -115,8 +159,13 @@ export default function RoleDetailPage() {
                 </CardDescription>
               </div>
               <div className="flex items-center gap-1.5">
-                <Badge variant={role.isActive ? "success" : "destructive"}>{role.isActive ? "Active" : "Inactive"}</Badge>
-                <Link href={`/roles/${id}/edit`} className={buttonVariants({ variant: "outline", size: "sm" })}>
+                <Badge variant={role.isActive ? "success" : "destructive"}>
+                  {role.isActive ? "Active" : "Inactive"}
+                </Badge>
+                <Link
+                  href={`/roles/${id}/edit`}
+                  className={buttonVariants({ variant: "outline", size: "sm" })}
+                >
                   <PencilIcon />
                   Edit
                 </Link>
@@ -124,9 +173,14 @@ export default function RoleDetailPage() {
             </CardHeader>
             <CardContent className="flex flex-col gap-4">
               <div className="flex flex-col gap-1.5">
-                <span className="text-xs text-muted-foreground">Permissions ({role.permissions.length} attached)</span>
+                <span className="text-xs text-muted-foreground">
+                  Permissions ({role.permissions.length} attached)
+                </span>
                 {canReadPermissions ? (
-                  <PermissionGroupView permissions={permissionCatalog} selected={role.permissions} />
+                  <PermissionGroupView
+                    permissions={permissionCatalog}
+                    selected={role.permissions}
+                  />
                 ) : (
                   <div className="flex flex-wrap gap-1">
                     {role.permissions.map((slug) => (
@@ -145,7 +199,10 @@ export default function RoleDetailPage() {
               <CardTitle>Danger zone</CardTitle>
             </CardHeader>
             <CardContent className="flex flex-wrap gap-2">
-              <Button variant={role.isActive ? "destructive" : "outline"} onClick={() => void toggleActive()}>
+              <Button
+                variant={role.isActive ? "destructive" : "outline"}
+                onClick={() => void toggleActive()}
+              >
                 {role.isActive ? "Deactivate" : "Activate"}
               </Button>
 
@@ -155,16 +212,28 @@ export default function RoleDetailPage() {
                 </DialogTrigger>
                 <DialogContent>
                   <DialogHeader>
-                    <DialogTitle>Delete {role.displayName || role.name}?</DialogTitle>
+                    <DialogTitle>
+                      Delete {role.displayName || role.name}?
+                    </DialogTitle>
                     <DialogDescription>
-                      Soft-delete: existing assignments are left in place rather than cascade-deleted, and the role simply stops being resolved.
+                      Soft-delete: existing assignments are left in place rather
+                      than cascade-deleted, and the role simply stops being
+                      resolved.
                     </DialogDescription>
                   </DialogHeader>
                   <DialogFooter>
-                    <Button variant="outline" onClick={() => setDeleteOpen(false)} disabled={deleting}>
+                    <Button
+                      variant="outline"
+                      onClick={() => setDeleteOpen(false)}
+                      disabled={deleting}
+                    >
                       Cancel
                     </Button>
-                    <Button variant="destructive" onClick={() => void handleDelete()} disabled={deleting}>
+                    <Button
+                      variant="destructive"
+                      onClick={() => void handleDelete()}
+                      disabled={deleting}
+                    >
                       {deleting ? "Deleting…" : "Delete role"}
                     </Button>
                   </DialogFooter>

package/registry/admin-apps/nextjs/variants/base/src/app/(console)/users/[id]/edit/page.tsx

@@ -3,10 +3,15 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useAbility } from "@casl/react";
 import { useParams, useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { startTransition, useCallback, useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { format } from "date-fns";
-import { AuthApiError, type RoleSummary, type UpdateUserInput, type UserSummary } from "@simple-auth-kit/auth-client";
+import {
+  AuthApiError,
+  type RoleSummary,
+  type UpdateUserInput,
+  type UserSummary,
+} from "@simple-auth-kit/auth-client";
 import { toast } from "sonner";
 import { Breadcrumb } from "@/components/breadcrumb";
 import { FormErrorAlert } from "@/components/form-error-alert";
@@ -14,17 +19,35 @@ import { PermissionRequired } from "@/components/permission-required";
 import { PhotoUpload } from "@/components/photo-upload";
 import { RoleMultiSelect } from "@/components/role-multi-select";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Combobox } from "@/components/ui/combobox";
 import { DatePicker } from "@/components/ui/date-picker";
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
 import { Heading } from "@/components/ui/heading";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
 import { PERMISSIONS, hasPermission, type AppAbility } from "@/lib/ability";
 import { authClient } from "@/lib/auth-client";
 import { errorMessage, errorMessages } from "@/lib/error";
-import { GENDER_OPTIONS, editUserSchema, type EditUserFormValues } from "../../user-schema";
+import {
+  GENDER_OPTIONS,
+  editUserSchema,
+  type EditUserFormValues,
+} from "../../user-schema";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
   return err instanceof AuthApiError ? err.message : fallback;
@@ -91,7 +114,7 @@ export default function EditUserPage() {
 
   useEffect(() => {
     if (!canManage) return;
-    void load();
+    startTransition(() => void load());
   }, [canManage, load]);
 
   useEffect(() => {
@@ -99,10 +122,18 @@ export default function EditUserPage() {
     authClient
       .listRoles()
       .then(setRoleCatalog)
-      .catch((err) => toast.error(apiErrorMessage(err, "Couldn't load the role catalog.")));
+      .catch((err) =>
+        toast.error(apiErrorMessage(err, "Couldn't load the role catalog.")),
+      );
   }, [canReadRoles]);
 
-  if (!canManage) return <PermissionRequired permission={PERMISSIONS.usersManage} what="Editing a user" />;
+  if (!canManage)
+    return (
+      <PermissionRequired
+        permission={PERMISSIONS.usersManage}
+        what="Editing a user"
+      />
+    );
 
   async function onSubmit(values: EditUserFormValues) {
     if (!user) return;
@@ -116,7 +147,9 @@ export default function EditUserPage() {
       username: values.username || null,
       dob: values.dob ? format(values.dob, "yyyy-MM-dd") : null,
       gender: values.gender || null,
-      joinedDate: values.joinedDate ? format(values.joinedDate, "yyyy-MM-dd") : undefined,
+      joinedDate: values.joinedDate
+        ? format(values.joinedDate, "yyyy-MM-dd")
+        : undefined,
       photo: values.photo || null,
     };
     // No bulk "set roles" endpoint — diffs against the roles loaded at mount and assigns/revokes only the delta.
@@ -153,7 +186,9 @@ export default function EditUserPage() {
       </div>
       <Separator />
 
-      {loading && !user && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !user && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {user && (
         <Card>
@@ -161,16 +196,23 @@ export default function EditUserPage() {
           <CardContent>
             <FormErrorAlert messages={formError} />
             <Form {...form}>
-              <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8 w-full">
+              <form
+                onSubmit={form.handleSubmit(onSubmit)}
+                className="space-y-8 w-full"
+              >
                 <Card className="w-full">
                   <CardHeader className="border-b bg-muted/50">
                     <CardTitle className="text-2xl">User Information</CardTitle>
-                    <CardDescription className="text-base">Update user&apos;s basic information</CardDescription>
+                    <CardDescription className="text-base">
+                      Update user&apos;s basic information
+                    </CardDescription>
                   </CardHeader>
                   <CardContent className="pt-6">
                     <div className="space-y-6">
                       <div className="space-y-4">
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Personal Information</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Personal Information
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -236,7 +278,9 @@ export default function EditUserPage() {
                               <FormItem>
                                 <FormLabel>
                                   Username &nbsp;
-                                  <span className="text-xs text-destructive dark:text-destructive-foreground">(Must be unique)</span>
+                                  <span className="text-xs text-destructive dark:text-destructive-foreground">
+                                    (Must be unique)
+                                  </span>
                                 </FormLabel>
                                 <FormControl>
                                   <Input
@@ -254,7 +298,9 @@ export default function EditUserPage() {
                       </div>
 
                       <div className="space-y-4">
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Contact Information</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Contact Information
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -263,7 +309,9 @@ export default function EditUserPage() {
                               <FormItem>
                                 <FormLabel>
                                   Phone &nbsp;
-                                  <span className="text-xs text-muted-foreground">(With country code)</span>
+                                  <span className="text-xs text-muted-foreground">
+                                    (With country code)
+                                  </span>
                                 </FormLabel>
                                 <FormControl>
                                   <Input
@@ -282,7 +330,9 @@ export default function EditUserPage() {
                       </div>
 
                       <div className="space-y-4">
-                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Additional Details</h3>
+                        <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                          Additional Details
+                        </h3>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                           <FormField
                             control={form.control}
@@ -328,7 +378,9 @@ export default function EditUserPage() {
                                       options={GENDER_OPTIONS}
                                       selected={field.value ?? ""}
                                       placeholder="Select Gender"
-                                      onChange={(option) => field.onChange(option.value)}
+                                      onChange={(option) =>
+                                        field.onChange(option.value)
+                                      }
                                       showCreate={false}
                                       popoverClassName="min-w-[200px]"
                                     />
@@ -343,7 +395,9 @@ export default function EditUserPage() {
 
                       {canReadRoles && (
                         <div className="space-y-4">
-                          <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Roles</h3>
+                          <h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                            Roles
+                          </h3>
                           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                             <FormField
                               control={form.control}
@@ -373,7 +427,10 @@ export default function EditUserPage() {
 
                   <CardHeader className="border-b bg-muted/50 mt-6">
                     <CardTitle className="text-2xl">Profile Photo</CardTitle>
-                    <CardDescription className="text-base">Upload user&apos;s profile picture (Max size: 2MB, Formats: JPG, PNG)</CardDescription>
+                    <CardDescription className="text-base">
+                      Upload user&apos;s profile picture (Max size: 2MB,
+                      Formats: JPG, PNG)
+                    </CardDescription>
                   </CardHeader>
                   <CardContent className="pt-6">
                     <FormField
@@ -383,7 +440,12 @@ export default function EditUserPage() {
                         <FormItem>
                           <FormControl>
                             <div>
-                              <PhotoUpload photo={field.value} fallback="?" onChange={field.onChange} disabled={saving} />
+                              <PhotoUpload
+                                photo={field.value}
+                                fallback="?"
+                                onChange={field.onChange}
+                                disabled={saving}
+                              />
                             </div>
                           </FormControl>
                           <FormMessage />
@@ -393,10 +455,19 @@ export default function EditUserPage() {
                   </CardContent>
 
                   <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
-                    <Button type="button" variant="outline" onClick={() => router.push(`/users/${id}`)} disabled={saving}>
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => router.push(`/users/${id}`)}
+                      disabled={saving}
+                    >
                       Cancel
                     </Button>
-                    <Button disabled={saving} className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32" type="submit">
+                    <Button
+                      disabled={saving}
+                      className="bg-purple-600 hover:bg-purple-700 dark:bg-purple-600 dark:hover:bg-purple-700 min-w-32"
+                      type="submit"
+                    >
                       {saving ? "Updating..." : "Update User"}
                     </Button>
                   </CardFooter>

package/registry/admin-apps/nextjs/variants/workspaces/package.json

@@ -8,7 +8,9 @@
     "dev": "next dev -p 3010",
     "build": "next build",
     "start": "next start -p 3010",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "prepare": "husky"
   },
   "dependencies": {
     "@casl/ability": "^7.0.1",
@@ -38,11 +40,18 @@
     "use-debounce": "^10.0.6"
   },
   "devDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
     "@tailwindcss/postcss": "^4.3.3",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.4",
+    "eslint": "^9.39.5",
+    "eslint-config-next": "^16.3.5",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.5.1",
+    "prettier": "^3.9.6",
     "tailwindcss": "^4.3.3",
-    "typescript": "^7.0.2"
+    "typescript": "^6.0.3"
   }
 }