@simple-auth-kit/cli 1.3.1 → 1.4.0

package/registry/admin-apps/react/variants/base/src/pages/EditUserPage.tsx

@@ -1,6 +1,16 @@
-import { type FormEvent, useCallback, useEffect, useState } from "react";
+import {
+  type FormEvent,
+  startTransition,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 import { useNavigate, useParams } from "react-router-dom";
-import type { RoleSummary, UpdateUserInput, UserSummary } from "@simple-auth-kit/auth-client";
+import type {
+  RoleSummary,
+  UpdateUserInput,
+  UserSummary,
+} from "@simple-auth-kit/auth-client";
 import { AuthApiError } from "@simple-auth-kit/auth-client";
 import { toast } from "sonner";
 import { PERMISSIONS, useAbility } from "@/lib/ability";
@@ -11,13 +21,31 @@ import { FormErrorAlert } from "@/components/form-error-alert";
 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 { Heading } from "@/components/ui/heading";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Separator } from "@/components/ui/separator";
-import { emptyUserFields, GENDER_OPTIONS, toDateInputValue, type UserFormFields } from "./user-schema";
+import {
+  emptyUserFields,
+  GENDER_OPTIONS,
+  toDateInputValue,
+  type UserFormFields,
+} from "./user-schema";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
   return err instanceof AuthApiError ? err.message : fallback;
@@ -36,7 +64,8 @@ function toForm(user: UserSummary): UserFormFields {
   };
 }
 
-const inputClassName = "bg-background border-2 focus:border-purple-500 transition-colors";
+const inputClassName =
+  "bg-background border-2 focus:border-purple-500 transition-colors";
 
 export function EditUserPage() {
   const { id } = useParams<{ id: string }>();
@@ -71,7 +100,7 @@ export function EditUserPage() {
   }, [id]);
 
   useEffect(() => {
-    void load();
+    startTransition(() => void load());
   }, [load]);
 
   useEffect(() => {
@@ -79,7 +108,9 @@ export 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 (!id) return null;
@@ -133,7 +164,9 @@ export 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>
@@ -144,12 +177,16 @@ export function EditUserPage() {
               <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">
                         <div className="flex flex-col gap-2">
                           <Label htmlFor="firstName">First Name</Label>
@@ -158,7 +195,9 @@ export function EditUserPage() {
                             disabled={saving}
                             placeholder="First Name"
                             value={form.firstName}
-                            onChange={(e) => setForm({ ...form, firstName: e.target.value })}
+                            onChange={(e) =>
+                              setForm({ ...form, firstName: e.target.value })
+                            }
                             type="text"
                             className={inputClassName}
                           />
@@ -170,7 +209,9 @@ export function EditUserPage() {
                             disabled={saving}
                             placeholder="Last Name"
                             value={form.lastName}
-                            onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+                            onChange={(e) =>
+                              setForm({ ...form, lastName: e.target.value })
+                            }
                             type="text"
                             className={inputClassName}
                           />
@@ -182,7 +223,9 @@ export function EditUserPage() {
                             disabled={saving}
                             placeholder="Display Name"
                             value={form.displayName}
-                            onChange={(e) => setForm({ ...form, displayName: e.target.value })}
+                            onChange={(e) =>
+                              setForm({ ...form, displayName: e.target.value })
+                            }
                             type="text"
                             className={inputClassName}
                           />
@@ -190,14 +233,18 @@ export function EditUserPage() {
                         <div className="flex flex-col gap-2">
                           <Label htmlFor="username">
                             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>
                           </Label>
                           <Input
                             id="username"
                             disabled={saving}
                             placeholder="Username"
                             value={form.username}
-                            onChange={(e) => setForm({ ...form, username: e.target.value })}
+                            onChange={(e) =>
+                              setForm({ ...form, username: e.target.value })
+                            }
                             className={inputClassName}
                           />
                         </div>
@@ -205,19 +252,25 @@ export 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">
                         <div className="flex flex-col gap-2">
                           <Label htmlFor="phone">
                             Phone &nbsp;
-                            <span className="text-xs text-muted-foreground">(With country code)</span>
+                            <span className="text-xs text-muted-foreground">
+                              (With country code)
+                            </span>
                           </Label>
                           <Input
                             id="phone"
                             type="text"
                             disabled={saving}
                             value={form.phone}
-                            onChange={(e) => setForm({ ...form, phone: e.target.value })}
+                            onChange={(e) =>
+                              setForm({ ...form, phone: e.target.value })
+                            }
                             placeholder="+1234567890"
                             className={inputClassName}
                           />
@@ -226,7 +279,9 @@ export 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">
                         <div className="flex flex-col gap-2 p-2">
                           <Label htmlFor="joinedDate">Joined Date</Label>
@@ -235,7 +290,9 @@ export function EditUserPage() {
                             type="date"
                             disabled={saving}
                             value={form.joinedDate}
-                            onChange={(e) => setForm({ ...form, joinedDate: e.target.value })}
+                            onChange={(e) =>
+                              setForm({ ...form, joinedDate: e.target.value })
+                            }
                             className={inputClassName}
                           />
                         </div>
@@ -246,19 +303,33 @@ export function EditUserPage() {
                             type="date"
                             disabled={saving}
                             value={form.dob}
-                            onChange={(e) => setForm({ ...form, dob: e.target.value })}
+                            onChange={(e) =>
+                              setForm({ ...form, dob: e.target.value })
+                            }
                             className={inputClassName}
                           />
                         </div>
                         <div className="flex flex-col gap-2">
                           <Label htmlFor="gender">Gender</Label>
-                          <Select value={form.gender || undefined} onValueChange={(value) => setForm({ ...form, gender: value })} disabled={saving}>
-                            <SelectTrigger id="gender" className={`w-full ${inputClassName}`}>
+                          <Select
+                            value={form.gender || undefined}
+                            onValueChange={(value) =>
+                              setForm({ ...form, gender: value })
+                            }
+                            disabled={saving}
+                          >
+                            <SelectTrigger
+                              id="gender"
+                              className={`w-full ${inputClassName}`}
+                            >
                               <SelectValue placeholder="Select Gender" />
                             </SelectTrigger>
                             <SelectContent>
                               {GENDER_OPTIONS.map((option) => (
-                                <SelectItem key={option.value} value={option.value}>
+                                <SelectItem
+                                  key={option.value}
+                                  value={option.value}
+                                >
                                   {option.label}
                                 </SelectItem>
                               ))}
@@ -270,11 +341,18 @@ export 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">
                           <div className="flex flex-col gap-2">
                             <Label>Roles</Label>
-                            <RoleMultiSelect roles={roleCatalog} selected={selectedRoles} onChange={setSelectedRoles} disabled={!canAssignRoles} />
+                            <RoleMultiSelect
+                              roles={roleCatalog}
+                              selected={selectedRoles}
+                              onChange={setSelectedRoles}
+                              disabled={!canAssignRoles}
+                            />
                           </div>
                         </div>
                       </div>
@@ -284,17 +362,34 @@ export 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">
-                  <PhotoUpload photo={photo} fallback="?" onChange={(next) => setPhoto(next)} disabled={saving} />
+                  <PhotoUpload
+                    photo={photo}
+                    fallback="?"
+                    onChange={(next) => setPhoto(next)}
+                    disabled={saving}
+                  />
                 </CardContent>
 
                 <CardFooter className="flex justify-center gap-4 mt-8 pb-8">
-                  <Button type="button" variant="outline" onClick={() => navigate(`/users/${id}`)} disabled={saving}>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => navigate(`/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/react/variants/base/src/pages/LanguageDetailPage.tsx

@@ -1,6 +1,9 @@
-import { useCallback, useEffect, useState } from "react";
+import { startTransition, useCallback, useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
-import { AuthApiError, type LanguageSummary } from "@simple-auth-kit/auth-client";
+import {
+  AuthApiError,
+  type LanguageSummary,
+} from "@simple-auth-kit/auth-client";
 import { format } from "date-fns";
 import { PencilIcon } from "lucide-react";
 import { toast } from "sonner";
@@ -10,7 +13,13 @@ import { cn } from "@/lib/cn";
 import { Breadcrumb } from "@/components/breadcrumb";
 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 { Modal } from "@/components/ui/modal";
 
 function apiErrorMessage(err: unknown, fallback: string): string {
@@ -51,7 +60,7 @@ export function LanguageDetailPage() {
   }, [id]);
 
   useEffect(() => {
-    void load();
+    startTransition(() => void load());
   }, [load]);
 
   async function toggleActive() {
@@ -60,10 +69,19 @@ export function LanguageDetailPage() {
     try {
       if (language.isActive) await authClient.deactivateLanguage(id);
       else await authClient.activateLanguage(id);
-      setLanguage((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
-      toast.success(language.isActive ? "Language deactivated." : "Language activated.");
+      setLanguage((prev) =>
+        prev ? { ...prev, isActive: !prev.isActive } : prev,
+      );
+      toast.success(
+        language.isActive ? "Language deactivated." : "Language activated.",
+      );
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't change this language's status. Try again."));
+      toast.error(
+        apiErrorMessage(
+          err,
+          "Couldn't change this language's status. Try again.",
+        ),
+      );
     } finally {
       setStatusPending(false);
     }
@@ -73,9 +91,16 @@ export function LanguageDetailPage() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Breadcrumb items={[{ title: "Languages", href: "/languages" }, { title: language?.name ?? "Details", href: `/languages/${id}` }]} />
+      <Breadcrumb
+        items={[
+          { title: "Languages", href: "/languages" },
+          { title: language?.name ?? "Details", href: `/languages/${id}` },
+        ]}
+      />
 
-      {loading && !language && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !language && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {language && (
         <>
@@ -84,16 +109,28 @@ export function LanguageDetailPage() {
               <div>
                 <CardTitle>{language.name}</CardTitle>
                 <CardDescription>
-                  Created: {format(new Date(language.createdAt), "dd MMM yyyy")} · Updated: {format(new Date(language.updatedAt), "dd MMM yyyy")}
+                  Created: {format(new Date(language.createdAt), "dd MMM yyyy")}{" "}
+                  · Updated:{" "}
+                  {format(new Date(language.updatedAt), "dd MMM yyyy")}
                 </CardDescription>
               </div>
               <div className="flex items-center gap-1.5">
-                {language.isDefault && <Badge variant="secondary">Default</Badge>}
-                <Badge variant={language.isActive ? "success" : "destructive"}>{language.isActive ? "Active" : "Inactive"}</Badge>
+                {language.isDefault && (
+                  <Badge variant="secondary">Default</Badge>
+                )}
+                <Badge variant={language.isActive ? "success" : "destructive"}>
+                  {language.isActive ? "Active" : "Inactive"}
+                </Badge>
                 <Link
                   to={`/languages/${id}/edit`}
-                  className={cn(buttonVariants({ variant: "outline", size: "sm" }))}
-                  title={canManage ? undefined : `You need the "${PERMISSIONS.languagesManage}" permission to do this.`}
+                  className={cn(
+                    buttonVariants({ variant: "outline", size: "sm" }),
+                  )}
+                  title={
+                    canManage
+                      ? undefined
+                      : `You need the "${PERMISSIONS.languagesManage}" permission to do this.`
+                  }
                   aria-disabled={!canManage}
                   onClick={(e) => !canManage && e.preventDefault()}
                 >
@@ -107,7 +144,12 @@ export function LanguageDetailPage() {
                 {field("Name", language.name)}
                 {field("Native name", language.nativeName)}
                 {field("Code", language.code)}
-                {field("Direction", language.direction === "rtl" ? "Right to left (RTL)" : "Left to right (LTR)")}
+                {field(
+                  "Direction",
+                  language.direction === "rtl"
+                    ? "Right to left (RTL)"
+                    : "Left to right (LTR)",
+                )}
                 {field("Default language", language.isDefault ? "Yes" : "No")}
               </div>
             </CardContent>
@@ -121,7 +163,11 @@ export function LanguageDetailPage() {
               <Button
                 variant={language.isActive ? "destructive" : "outline"}
                 disabled={!canStatus || statusPending}
-                title={canStatus ? undefined : `You need the "${PERMISSIONS.languagesStatus}" permission to do this.`}
+                title={
+                  canStatus
+                    ? undefined
+                    : `You need the "${PERMISSIONS.languagesStatus}" permission to do this.`
+                }
                 onClick={() => void toggleActive()}
               >
                 {language.isActive ? "Deactivate" : "Activate"}
@@ -130,7 +176,11 @@ export function LanguageDetailPage() {
               <Button
                 variant="destructive"
                 disabled={!canManage}
-                title={canManage ? undefined : `You need the "${PERMISSIONS.languagesManage}" permission to do this.`}
+                title={
+                  canManage
+                    ? undefined
+                    : `You need the "${PERMISSIONS.languagesManage}" permission to do this.`
+                }
                 onClick={() => setConfirmingDelete(true)}
               >
                 Delete language
@@ -173,7 +223,9 @@ function DeleteLanguageDialog({
       toast.success("Language deleted.");
       onDeleted();
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't delete this language. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't delete this language. Try again."),
+      );
     } finally {
       setSubmitting(false);
     }
@@ -188,7 +240,11 @@ function DeleteLanguageDialog({
     >
       <div className="flex flex-col gap-4">
         <div className="flex gap-2">
-          <Button variant="destructive" disabled={submitting} onClick={() => void handleDelete()}>
+          <Button
+            variant="destructive"
+            disabled={submitting}
+            onClick={() => void handleDelete()}
+          >
             {submitting ? "Deleting…" : "Delete language"}
           </Button>
           <Button variant="outline" onClick={onClose}>

package/registry/admin-apps/react/variants/base/src/pages/PermissionDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { startTransition, useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import type { PermissionSummary } from "@simple-auth-kit/auth-client";
 import { AuthApiError } from "@simple-auth-kit/auth-client";
@@ -10,7 +10,13 @@ import { DefinePermissionDialog } from "@/pages/PermissionsPage";
 import { Breadcrumb } from "@/components/breadcrumb";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 
 function field(label: string, value: string | number | null) {
   return (
@@ -38,25 +44,42 @@ export function PermissionDetailPage() {
       const permissions = await authClient.listPermissions();
       setPermission(permissions.find((p) => p.id === id) ?? null);
     } catch (err) {
-      toast.error(err instanceof AuthApiError ? err.message : "Couldn't load this permission.");
+      toast.error(
+        err instanceof AuthApiError
+          ? err.message
+          : "Couldn't load this permission.",
+      );
     } finally {
       setLoading(false);
     }
   }, [id]);
 
   useEffect(() => {
-    void load();
+    startTransition(() => void load());
   }, [load]);
 
   async function toggleActive() {
     if (!permission) return;
     setStatusPending(true);
     try {
-      await authClient.definePermission({ slug: permission.slug, isActive: !permission.isActive });
-      setPermission((prev) => (prev ? { ...prev, isActive: !prev.isActive } : prev));
-      toast.success(permission.isActive ? "Permission deactivated." : "Permission activated.");
+      await authClient.definePermission({
+        slug: permission.slug,
+        isActive: !permission.isActive,
+      });
+      setPermission((prev) =>
+        prev ? { ...prev, isActive: !prev.isActive } : prev,
+      );
+      toast.success(
+        permission.isActive
+          ? "Permission deactivated."
+          : "Permission activated.",
+      );
     } catch (err) {
-      toast.error(err instanceof AuthApiError ? err.message : "Couldn't change this permission's status. Try again.");
+      toast.error(
+        err instanceof AuthApiError
+          ? err.message
+          : "Couldn't change this permission's status. Try again.",
+      );
     } finally {
       setStatusPending(false);
     }
@@ -66,9 +89,19 @@ export function PermissionDetailPage() {
 
   return (
     <div className="flex flex-col gap-4">
-      <Breadcrumb items={[{ title: "Permissions", href: "/permissions" }, { title: permission?.displayName ?? "Details", href: `/permissions/${id}` }]} />
+      <Breadcrumb
+        items={[
+          { title: "Permissions", href: "/permissions" },
+          {
+            title: permission?.displayName ?? "Details",
+            href: `/permissions/${id}`,
+          },
+        ]}
+      />
 
-      {loading && !permission && <p className="text-sm text-muted-foreground">Loading…</p>}
+      {loading && !permission && (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      )}
 
       {permission && (
         <>
@@ -81,12 +114,20 @@ export function PermissionDetailPage() {
                 </CardDescription>
               </div>
               <div className="flex items-center gap-1.5">
-                <Badge variant={permission.isActive ? "success" : "destructive"}>{permission.isActive ? "Active" : "Inactive"}</Badge>
+                <Badge
+                  variant={permission.isActive ? "success" : "destructive"}
+                >
+                  {permission.isActive ? "Active" : "Inactive"}
+                </Badge>
                 <Button
                   variant="outline"
                   size="sm"
                   disabled={!canDefine}
-                  title={canDefine ? undefined : `You need the "${PERMISSIONS.permissionsDefine}" permission to do this.`}
+                  title={
+                    canDefine
+                      ? undefined
+                      : `You need the "${PERMISSIONS.permissionsDefine}" permission to do this.`
+                  }
                   onClick={() => setEditing(true)}
                 >
                   <PencilIcon />
@@ -112,7 +153,11 @@ export function PermissionDetailPage() {
               <Button
                 variant={permission.isActive ? "destructive" : "outline"}
                 disabled={!canDefine || statusPending}
-                title={canDefine ? undefined : `You need the "${PERMISSIONS.permissionsDefine}" permission to do this.`}
+                title={
+                  canDefine
+                    ? undefined
+                    : `You need the "${PERMISSIONS.permissionsDefine}" permission to do this.`
+                }
                 onClick={() => void toggleActive()}
               >
                 {permission.isActive ? "Deactivate" : "Activate"}