@simple-auth-kit/cli 1.3.2 → 1.4.0

package/registry/admin-apps/nextjs/variants/workspaces/src/app/(console)/account/page.tsx

@@ -3,17 +3,33 @@
 import { observer } from "mobx-react-lite";
 import { QRCodeSVG } from "qrcode.react";
 import { useEffect, useState } from "react";
-import { AuthApiError, type SessionSummary } from "@simple-auth-kit/auth-client";
+import {
+  AuthApiError,
+  type SessionSummary,
+} from "@simple-auth-kit/auth-client";
 import { toast } from "sonner";
 import { ChangePasswordDialog } from "@/components/change-password-dialog";
 import { PhotoUpload } from "@/components/photo-upload";
 import { Alert } from "@/components/ui/alert";
 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";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
 import { authClient } from "@/lib/auth-client";
 import { useAuthStore, useWorkspaceStore } from "@/lib/stores/store-context";
 
@@ -32,9 +48,21 @@ function initialsOf(label: string): string {
   );
 }
 
-type ProfileForm = { firstName: string; lastName: string; displayName: string; phone: string; username: string };
+type ProfileForm = {
+  firstName: string;
+  lastName: string;
+  displayName: string;
+  phone: string;
+  username: string;
+};
 
-function toForm(user: { firstName: string | null; lastName: string | null; displayName: string | null; phone: string | null; username: string | null }): ProfileForm {
+function toForm(user: {
+  firstName: string | null;
+  lastName: string | null;
+  displayName: string | null;
+  phone: string | null;
+  username: string | null;
+}): ProfileForm {
   return {
     firstName: user.firstName ?? "",
     lastName: user.lastName ?? "",
@@ -50,13 +78,18 @@ export default observer(function AccountPage() {
   const user = store.currentUser;
   const workspaceName = workspaces.activeWorkspace?.name ?? null;
 
-  const [form, setForm] = useState<ProfileForm | null>(user ? toForm(user) : null);
+  const [form, setForm] = useState<ProfileForm | null>(
+    user ? toForm(user) : null,
+  );
   const [profileSaving, setProfileSaving] = useState(false);
   const [changePasswordOpen, setChangePasswordOpen] = useState(false);
 
   const [sessions, setSessions] = useState<SessionSummary[]>([]);
 
-  const [enrollment, setEnrollment] = useState<{ secret: string; provisioningUri: string } | null>(null);
+  const [enrollment, setEnrollment] = useState<{
+    secret: string;
+    provisioningUri: string;
+  } | null>(null);
   const [enrollCode, setEnrollCode] = useState("");
   const [backupCodes, setBackupCodes] = useState<string[] | null>(null);
   const [disableCode, setDisableCode] = useState("");
@@ -67,7 +100,9 @@ export default observer(function AccountPage() {
     store
       .listSessions()
       .then(setSessions)
-      .catch((err) => toast.error(apiErrorMessage(err, "Couldn't load active sessions.")));
+      .catch((err) =>
+        toast.error(apiErrorMessage(err, "Couldn't load active sessions.")),
+      );
   }, [store]);
 
   async function handleEnroll() {
@@ -76,7 +111,9 @@ export default observer(function AccountPage() {
       const result = await store.enrollTwoFactor();
       setEnrollment(result);
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't start 2FA enrollment. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't start 2FA enrollment. Try again."),
+      );
     } finally {
       setTwoFactorBusy(false);
     }
@@ -91,7 +128,9 @@ export default observer(function AccountPage() {
       setEnrollCode("");
       toast.success("Two-factor authentication enabled.");
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't confirm this code. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't confirm this code. Try again."),
+      );
     } finally {
       setTwoFactorBusy(false);
     }
@@ -115,9 +154,13 @@ export default observer(function AccountPage() {
     setLogoutAllBusy(true);
     try {
       await store.logoutAll();
-      toast.success("Signed out of all sessions. You'll need to sign in again.");
+      toast.success(
+        "Signed out of all sessions. You'll need to sign in again.",
+      );
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't sign out of all sessions. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't sign out of all sessions. Try again."),
+      );
     } finally {
       setLogoutAllBusy(false);
     }
@@ -130,7 +173,9 @@ export default observer(function AccountPage() {
       await store.refreshCurrentUser();
       toast.success(photo ? "Photo updated." : "Photo removed.");
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't update the photo. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't update the photo. Try again."),
+      );
     }
   }
 
@@ -150,7 +195,9 @@ export default observer(function AccountPage() {
       await store.refreshCurrentUser();
       toast.success("Profile saved.");
     } catch (err) {
-      toast.error(apiErrorMessage(err, "Couldn't save this profile. Try again."));
+      toast.error(
+        apiErrorMessage(err, "Couldn't save this profile. Try again."),
+      );
     } finally {
       setProfileSaving(false);
     }
@@ -163,37 +210,74 @@ export default observer(function AccountPage() {
       <Card>
         <CardHeader>
           <CardTitle>Profile</CardTitle>
-          <CardDescription>Your own info — no admin permission needed to change any of this.</CardDescription>
+          <CardDescription>
+            Your own info — no admin permission needed to change any of this.
+          </CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
-          <PhotoUpload photo={user.photo} fallback={initialsOf(user.displayName || user.email)} onChange={handlePhotoChange} />
+          <PhotoUpload
+            photo={user.photo}
+            fallback={initialsOf(user.displayName || user.email)}
+            onChange={handlePhotoChange}
+          />
 
-          <form onSubmit={handleProfileSave} className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <form
+            onSubmit={handleProfileSave}
+            className="grid grid-cols-1 gap-4 sm:grid-cols-2"
+          >
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="firstName">First name</Label>
-              <Input id="firstName" value={form.firstName} onChange={(e) => setForm({ ...form, firstName: e.target.value })} />
+              <Input
+                id="firstName"
+                value={form.firstName}
+                onChange={(e) =>
+                  setForm({ ...form, firstName: e.target.value })
+                }
+              />
             </div>
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="lastName">Last name</Label>
-              <Input id="lastName" value={form.lastName} onChange={(e) => setForm({ ...form, lastName: e.target.value })} />
+              <Input
+                id="lastName"
+                value={form.lastName}
+                onChange={(e) => setForm({ ...form, lastName: e.target.value })}
+              />
             </div>
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="displayName">Display name</Label>
-              <Input id="displayName" value={form.displayName} onChange={(e) => setForm({ ...form, displayName: e.target.value })} />
+              <Input
+                id="displayName"
+                value={form.displayName}
+                onChange={(e) =>
+                  setForm({ ...form, displayName: e.target.value })
+                }
+              />
             </div>
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="username">Username</Label>
-              <Input id="username" value={form.username} onChange={(e) => setForm({ ...form, username: e.target.value })} />
+              <Input
+                id="username"
+                value={form.username}
+                onChange={(e) => setForm({ ...form, username: e.target.value })}
+              />
             </div>
             <div className="flex flex-col gap-1.5">
               <Label htmlFor="phone">Phone</Label>
-              <Input id="phone" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
+              <Input
+                id="phone"
+                value={form.phone}
+                onChange={(e) => setForm({ ...form, phone: e.target.value })}
+              />
             </div>
             <div className="flex items-end gap-2">
               <Button type="submit" disabled={profileSaving}>
                 {profileSaving ? "Saving…" : "Save changes"}
               </Button>
-              <Button type="button" variant="outline" onClick={() => setChangePasswordOpen(true)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setChangePasswordOpen(true)}
+              >
                 Change password
               </Button>
             </div>
@@ -243,7 +327,9 @@ export default observer(function AccountPage() {
           </div>
           <div>
             <div className="text-xs text-muted-foreground">Two-factor</div>
-            <Badge variant={user.twoFactorEnabled ? "success" : "outline"}>{user.twoFactorEnabled ? "Enabled" : "Disabled"}</Badge>
+            <Badge variant={user.twoFactorEnabled ? "success" : "outline"}>
+              {user.twoFactorEnabled ? "Enabled" : "Disabled"}
+            </Badge>
           </div>
         </CardContent>
       </Card>
@@ -251,7 +337,10 @@ export default observer(function AccountPage() {
       <Card>
         <CardHeader>
           <CardTitle>Active sessions</CardTitle>
-          <CardDescription>Only bulk sign-out is available — the backend doesn't yet expose per-session revocation.</CardDescription>
+          <CardDescription>
+            Only bulk sign-out is available — the backend doesn&apos;t yet
+            expose per-session revocation.
+          </CardDescription>
         </CardHeader>
         <CardContent className="flex flex-col gap-4">
           <Table>
@@ -274,21 +363,35 @@ export default observer(function AccountPage() {
                       </Badge>
                     )}
                   </TableCell>
-                  <TableCell className="text-xs text-muted-foreground">{new Date(session.createdAt).toLocaleString()}</TableCell>
-                  <TableCell className="max-w-xs truncate text-xs text-muted-foreground">{session.userAgent ?? "—"}</TableCell>
-                  <TableCell className="text-xs text-muted-foreground">{session.ip ?? "—"}</TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {new Date(session.createdAt).toLocaleString()}
+                  </TableCell>
+                  <TableCell className="max-w-xs truncate text-xs text-muted-foreground">
+                    {session.userAgent ?? "—"}
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {session.ip ?? "—"}
+                  </TableCell>
                 </TableRow>
               ))}
               {sessions.length === 0 && (
                 <TableRow>
-                  <TableCell colSpan={4} className="text-center text-sm text-muted-foreground">
+                  <TableCell
+                    colSpan={4}
+                    className="text-center text-sm text-muted-foreground"
+                  >
                     No active sessions.
                   </TableCell>
                 </TableRow>
               )}
             </TableBody>
           </Table>
-          <Button variant="destructive" className="w-fit" disabled={logoutAllBusy} onClick={handleLogoutAll}>
+          <Button
+            variant="destructive"
+            className="w-fit"
+            disabled={logoutAllBusy}
+            onClick={handleLogoutAll}
+          >
             {logoutAllBusy ? "Signing out…" : "Sign out of all sessions"}
           </Button>
         </CardContent>
@@ -301,7 +404,9 @@ export default observer(function AccountPage() {
         <CardContent className="flex flex-col gap-4">
           {backupCodes && (
             <Alert variant="success">
-              <p className="mb-2 font-medium">Save these backup codes — they won&apos;t be shown again:</p>
+              <p className="mb-2 font-medium">
+                Save these backup codes — they won&apos;t be shown again:
+              </p>
               <ul className="grid grid-cols-2 gap-1 font-mono text-xs sm:grid-cols-5">
                 {backupCodes.map((code) => (
                   <li key={code}>{code}</li>
@@ -312,30 +417,54 @@ export default observer(function AccountPage() {
 
           {user.twoFactorEnabled ? (
             <div className="flex flex-col gap-3">
-              <p className="text-sm text-muted-foreground">Two-factor authentication is enabled on your account.</p>
+              <p className="text-sm text-muted-foreground">
+                Two-factor authentication is enabled on your account.
+              </p>
               <div className="flex items-end gap-2">
                 <div className="flex flex-col gap-1.5">
                   <Label htmlFor="disableCode">Enter a code to disable</Label>
-                  <Input id="disableCode" value={disableCode} onChange={(e) => setDisableCode(e.target.value)} placeholder="123456" />
+                  <Input
+                    id="disableCode"
+                    value={disableCode}
+                    onChange={(e) => setDisableCode(e.target.value)}
+                    placeholder="123456"
+                  />
                 </div>
-                <Button variant="destructive" disabled={twoFactorBusy || !disableCode} onClick={handleDisable}>
+                <Button
+                  variant="destructive"
+                  disabled={twoFactorBusy || !disableCode}
+                  onClick={handleDisable}
+                >
                   {twoFactorBusy ? "Disabling…" : "Disable 2FA"}
                 </Button>
               </div>
             </div>
           ) : enrollment ? (
             <div className="flex flex-col gap-3">
-              <p className="text-sm text-muted-foreground">Scan this QR code with your authenticator app, then enter the 6-digit code it shows.</p>
+              <p className="text-sm text-muted-foreground">
+                Scan this QR code with your authenticator app, then enter the
+                6-digit code it shows.
+              </p>
               <div className="w-fit rounded-md border border-border bg-white p-3">
                 <QRCodeSVG value={enrollment.provisioningUri} size={176} />
               </div>
-              <p className="font-mono text-xs text-muted-foreground">Secret: {enrollment.secret}</p>
+              <p className="font-mono text-xs text-muted-foreground">
+                Secret: {enrollment.secret}
+              </p>
               <div className="flex items-end gap-2">
                 <div className="flex flex-col gap-1.5">
                   <Label htmlFor="enrollCode">Confirmation code</Label>
-                  <Input id="enrollCode" value={enrollCode} onChange={(e) => setEnrollCode(e.target.value)} placeholder="123456" />
+                  <Input
+                    id="enrollCode"
+                    value={enrollCode}
+                    onChange={(e) => setEnrollCode(e.target.value)}
+                    placeholder="123456"
+                  />
                 </div>
-                <Button disabled={twoFactorBusy || !enrollCode} onClick={handleConfirm}>
+                <Button
+                  disabled={twoFactorBusy || !enrollCode}
+                  onClick={handleConfirm}
+                >
                   {twoFactorBusy ? "Confirming…" : "Confirm"}
                 </Button>
                 <Button variant="ghost" onClick={() => setEnrollment(null)}>
@@ -345,8 +474,14 @@ export default observer(function AccountPage() {
             </div>
           ) : (
             <div className="flex flex-col gap-3">
-              <p className="text-sm text-muted-foreground">Two-factor authentication is not enabled on your account.</p>
-              <Button className="w-fit" disabled={twoFactorBusy} onClick={handleEnroll}>
+              <p className="text-sm text-muted-foreground">
+                Two-factor authentication is not enabled on your account.
+              </p>
+              <Button
+                className="w-fit"
+                disabled={twoFactorBusy}
+                onClick={handleEnroll}
+              >
                 {twoFactorBusy ? "Starting…" : "Enable 2FA"}
               </Button>
             </div>
@@ -354,7 +489,10 @@ export default observer(function AccountPage() {
         </CardContent>
       </Card>
 
-      <ChangePasswordDialog open={changePasswordOpen} onOpenChange={setChangePasswordOpen} />
+      <ChangePasswordDialog
+        open={changePasswordOpen}
+        onOpenChange={setChangePasswordOpen}
+      />
     </div>
   );
 });

package/registry/admin-apps/react/shared/.husky/commit-msg

@@ -0,0 +1 @@
+npx --no -- commitlint --edit "$1"

package/registry/admin-apps/react/shared/.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

package/registry/admin-apps/react/shared/.lintstagedrc.json

@@ -0,0 +1,4 @@
+{
+  "*.{ts,tsx,js,jsx}": "eslint --fix",
+  "*.{ts,tsx,js,jsx,json,md,css,scss}": "prettier --write"
+}

package/registry/admin-apps/react/shared/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "trailingComma": "all"
+}

package/registry/admin-apps/react/shared/commitlint.config.js

@@ -0,0 +1,3 @@
+export default {
+  extends: ["@commitlint/config-conventional"],
+};

package/registry/admin-apps/react/shared/eslint.config.js

@@ -0,0 +1,38 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  {
+    // src/components/ui/** is shadcn-generated (components.json), not hand-authored — same
+    // "vendored, don't lint" treatment this repo already gives it for Biome (the surviving
+    // biome-ignore-all comment on multi-selector.tsx).
+    ignores: ["dist/**", "node_modules/**", "src/components/ui/**"],
+  },
+  {
+    files: ["**/*.{ts,tsx}"],
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    languageOptions: {
+      ecmaVersion: 2022,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": [
+        "warn",
+        { allowConstantExport: true },
+      ],
+      // TanStack Table's useReactTable() is on React Compiler's own documented list of
+      // incompatible APIs (it returns functions that can't be safely memoized) — the compiler
+      // already handles this correctly by skipping memoization for it; there's no code change
+      // that "fixes" a structural library incompatibility.
+      "react-hooks/incompatible-library": "off",
+    },
+  },
+);

package/registry/admin-apps/react/variants/base/package.json

@@ -8,7 +8,9 @@
     "dev": "vite",
     "build": "tsc --noEmit && vite build",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "prepare": "husky"
   },
   "dependencies": {
     "@casl/ability": "^6.7.3",
@@ -48,14 +50,25 @@
     "vaul": "^1.1.2"
   },
   "devDependencies": {
+    "@commitlint/cli": "^21.2.2",
+    "@commitlint/config-conventional": "^21.2.2",
+    "@eslint/js": "^9.39.5",
     "@tailwindcss/postcss": "^4.3.3",
     "@types/node": "^26.2.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.39.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.6",
+    "globals": "^17.12.0",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.5.1",
     "postcss": "^8.5.6",
+    "prettier": "^3.9.6",
     "tailwindcss": "^4.3.3",
-    "typescript": "^7.0.2",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.70.0",
     "vite": "^7.1.14"
   }
 }