@arch-cadre/setup 1.0.6 → 1.0.9

package/dist/ui/pages/setup-wizard.cjs

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SetupWizard = SetupWizard;
-var _client = require("@arch-cadre/intl/client");
+var _intl = require("@arch-cadre/intl");
 var _ui = require("@arch-cadre/ui");
 var _logo = require("@arch-cadre/ui/brand/logo");
 var _loader = require("@arch-cadre/ui/shared/loader");
@@ -17,7 +17,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function SetupWizard() {
   const {
     t
-  } = (0, _client.useTranslation)();
+  } = (0, _intl.useTranslation)();
   const [step, setStep] = React.useState(1);
   const [loading, setLoading] = React.useState(false);
   const [syncStatus, setSyncStatus] = React.useState("idle");

package/dist/ui/pages/setup-wizard.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { useTranslation } from "@arch-cadre/intl/client";
+import { useTranslation } from "@arch-cadre/intl";
 import {
   Badge,
   Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arch-cadre/setup",
-  "version": "1.0.6",
+  "version": "1.0.9",
   "type": "module",
   "description": "Installation and setup module for Kryo",
   "exports": {
@@ -13,6 +13,7 @@
   },
   "files": [
     "dist",
+    "src",
     "locales",
     "manifest.json"
   ],
@@ -26,13 +27,13 @@
     "lint": "biome check --write"
   },
   "dependencies": {
-    "@arch-cadre/modules": "^0.0.20",
-    "@arch-cadre/ui": "^0.0.20",
+    "@arch-cadre/modules": "^0.0.79",
+    "@arch-cadre/ui": "^0.0.53",
     "drizzle-orm": "1.0.0-beta.6-4414a19",
     "lucide-react": "^0.475.0"
   },
   "devDependencies": {
-    "@arch-cadre/core": "^0.0.20",
+    "@arch-cadre/core": "^0.0.53",
     "@types/node": "^20.19.9",
     "@types/react": "^19",
     "@types/react-dom": "^19",
@@ -41,8 +42,8 @@
     "unbuild": "^3.6.1"
   },
   "peerDependencies": {
-    "@arch-cadre/core": "^0.0.20",
-    "@arch-cadre/intl": "^0.0.20",
+    "@arch-cadre/core": "^0.0.53",
+    "@arch-cadre/intl": "^0.0.53",
     "next": ">=13.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/src/actions.ts

@@ -0,0 +1,173 @@
+"use server";
+
+import { exec } from "node:child_process";
+import path from "node:path";
+import { promisify } from "node:util";
+import {
+  createUser,
+  db,
+  permissionsTable,
+  rolesTable,
+  rolesToPermissionsTable,
+  systemModulesTable,
+  usersToRolesTable,
+  userTable,
+} from "@arch-cadre/core/server";
+import { getKryoPathPrefix, getModules } from "@arch-cadre/modules/server";
+import { eq, inArray, sql } from "drizzle-orm";
+import { redirect } from "next/navigation";
+
+const execAsync = promisify(exec);
+
+export async function syncDatabase() {
+  try {
+    // console.log("[Setup:Actions] Starting database synchronization...");
+    const root = process.cwd();
+
+    // Force non-interactive push.
+    // We use 'npx drizzle-kit push' to ensure it's available.
+    // We explicitly point to the config file in the app directory.
+    const configPath = path.join(root, "drizzle.config.ts");
+
+    console.log(`[Setup:Actions] Using config: ${configPath}`);
+
+    // Drizzle-kit push --force ensures it doesn't wait for user input
+    const { stdout, stderr } = await execAsync(
+      `npx drizzle-kit push --config=${configPath}`,
+      {
+        cwd: root,
+        env: {
+          ...process.env,
+          // Ensure we are in non-interactive mode if the tool supports it
+          CI: "true",
+        },
+      },
+    );
+
+    console.log("[Setup:Actions] Sync stdout:", stdout);
+    if (stderr) console.warn("[Setup:Actions] Sync stderr:", stderr);
+
+    return { success: true };
+  } catch (e: any) {
+    console.error("[Setup:Actions] Sync failed:", e);
+    // Even if it failed, sometimes it's because of minor warnings.
+    // But usually, it's a real error.
+    return { success: false, error: e.message };
+  }
+}
+
+export async function getAvailableModules() {
+  const modules = await getModules();
+  return modules.filter((m) => m.id !== "setup");
+}
+
+export async function finishSetup(
+  formData: FormData,
+  selectedModuleIds: string[],
+) {
+  const email = formData.get("email") as string;
+  const username = formData.get("username") as string;
+  const password = formData.get("password") as string;
+
+  if (!email || !username || !password) {
+    throw new Error("Missing required fields");
+  }
+
+  // 1. Create the user
+  const user = await createUser(email, username, password);
+
+  // 2. Ensure 'admin' role exists and assign it
+  await db.transaction(async (tx) => {
+    // Must have email verified admin user
+    await tx
+      .update(userTable)
+      .set({
+        emailVerifiedAt: new Date(),
+      })
+      .where(eq(userTable.id, user.id));
+
+    let [adminRole] = await tx
+      .select()
+      .from(rolesTable)
+      .where(eq(rolesTable.name, "admin"));
+
+    if (!adminRole) {
+      const [newRole] = await tx
+        .insert(rolesTable)
+        .values({
+          name: "admin",
+          description: "System Administrator with full access",
+        })
+        .returning();
+      adminRole = newRole;
+    }
+
+    // Ensure system permissions exist
+    const systemPermissions = [
+      { name: "system:modules", description: "Manage system modules" },
+      { name: "system:rbac", description: "Manage roles and permissions" },
+      {
+        name: "system:activity-logs",
+        description: "View system activity logs",
+      },
+    ];
+
+    console.log("Ensuring system permissions exist...");
+    for (const perm of systemPermissions) {
+      const [existing] = await tx
+        .select()
+        .from(permissionsTable)
+        .where(eq(permissionsTable.name, perm.name));
+
+      let permId = existing?.id;
+      if (!existing) {
+        const [inserted] = await tx
+          .insert(permissionsTable)
+          .values(perm)
+          .returning();
+        permId = inserted.id;
+      }
+
+      // Assign permission to admin role
+      await tx
+        .insert(rolesToPermissionsTable)
+        .values({
+          roleId: adminRole.id,
+          permissionId: permId,
+        })
+        .onConflictDoNothing();
+    }
+
+    await tx.insert(usersToRolesTable).values({
+      userId: user.id,
+      roleId: adminRole.id,
+    });
+
+    // 3. Enable selected modules
+    if (selectedModuleIds.length > 0) {
+      for (const modId of selectedModuleIds) {
+        await tx.insert(systemModulesTable).values({
+          id: modId,
+          enabled: true,
+          system: true,
+          installed: true,
+        });
+        // .onConflictUpdate({
+        //   target: systemModulesTable.id,
+        //   set: { enabled: true },
+        // });
+      }
+    }
+  });
+
+  redirect(await getKryoPathPrefix());
+}
+
+export async function checkDbConnection() {
+  try {
+    await db.execute(sql`SELECT 1`);
+    return { success: true };
+  } catch (e) {
+    return { success: false, error: String(e) };
+  }
+}

package/src/index.ts

@@ -0,0 +1,19 @@
+import type { IModule } from "@arch-cadre/modules";
+import manifest from "../manifest.json";
+import { publicRoutes } from "./routes";
+
+export * from "./actions";
+
+const setupModule: IModule = {
+  manifest: manifest as any,
+
+  init: async () => {
+    console.log("[SetupModule] initialized.");
+  },
+
+  routes: {
+    public: publicRoutes,
+  },
+};
+
+export default setupModule;

package/src/intl.d.ts

@@ -0,0 +1,13 @@
+import type messages from "../locales/en/global.json";
+
+type JsonDataType = typeof messages;
+
+// declare global {
+//   interface IntlMessages extends JsonDataType {}
+// }
+
+declare module "@arch-cadre/intl" {
+  export interface IntlMessages extends JsonDataType {}
+}
+
+export {};

package/src/routes.ts

@@ -0,0 +1,10 @@
+import type { PublicRouteDefinition } from "@arch-cadre/modules";
+import { SetupWizard } from "./ui/pages/setup-wizard";
+
+export const publicRoutes: PublicRouteDefinition[] = [
+  {
+    path: "/setup",
+    component: SetupWizard,
+    auth: false,
+  },
+];

package/src/ui/pages/setup-wizard.tsx

@@ -0,0 +1,261 @@
+/** biome-ignore-all lint/a11y/noLabelWithoutControl: <all> */
+"use client";
+
+import { useTranslation } from "@arch-cadre/intl";
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Input,
+  Label,
+} from "@arch-cadre/ui";
+import { Logo } from "@arch-cadre/ui/brand/logo";
+import { Loader } from "@arch-cadre/ui/shared/loader";
+import {
+  CheckCircle2,
+  Database,
+  LayoutGrid,
+  Loader2,
+  Rocket,
+  UserPlus,
+} from "lucide-react";
+import * as React from "react";
+import { finishSetup, getAvailableModules, syncDatabase } from "../../actions";
+
+export function SetupWizard() {
+  const { t } = useTranslation();
+  const [step, setStep] = React.useState(1);
+  const [loading, setLoading] = React.useState(false);
+  const [syncStatus, setSyncStatus] = React.useState<
+    "idle" | "syncing" | "success" | "error"
+  >("idle");
+  const [availableModules, setAvailableModules] = React.useState<any[]>([]);
+  const [selectedModules, setSelectedModules] = React.useState<string[]>([]);
+
+  const nextStep = () => setStep((s) => s + 1);
+
+  const handleSync = async () => {
+    setSyncStatus("syncing");
+    const result = await syncDatabase();
+    if (result.success) {
+      setSyncStatus("success");
+      // Fetch modules after successful sync
+      const modules = await getAvailableModules();
+
+      setAvailableModules(modules.filter((m) => !m.system));
+      // Pre-select system modules
+      setSelectedModules(modules.filter((m) => m.system).map((m) => m.id));
+      setTimeout(nextStep, 1500);
+    } else {
+      setSyncStatus("error");
+      alert(`Database sync failed: ${result.error}`);
+    }
+  };
+
+  const toggleModule = (id: string) => {
+    setSelectedModules((prev) =>
+      prev.includes(id) ? prev.filter((m) => m !== id) : [...prev, id],
+    );
+  };
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/30 p-4">
+      <div className="w-full max-w-md space-y-8">
+        <div className="flex flex-col gap-4 items-center justify-center text-center">
+          {/*<h1 className="text-4xl font-bold tracking-tight text-primary">
+            Kryo
+          </h1>*/}
+
+          <Logo className="mx-auto" />
+
+          <p className="mt-2 text-sm text-muted-foreground">
+            {t("setup_description")}
+          </p>
+        </div>
+
+        <Card className="border-2 shadow-xl">
+          {step === 1 && (
+            <>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Rocket className="h-5 w-5 text-primary" />
+                  {t("welcome")}
+                </CardTitle>
+                <CardDescription>{t("thank_you")}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <p className="text-sm">{t("step_1_desc")}</p>
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button onClick={nextStep} className="w-full">
+                  {t("get_started")}
+                </Button>
+              </CardFooter>
+            </>
+          )}
+
+          {step === 2 && (
+            <>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Database className="h-5 w-5 text-primary" />
+                  {t("db_prep")}
+                </CardTitle>
+                <CardDescription>{t("db_desc")}</CardDescription>
+              </CardHeader>
+              <CardContent className="flex flex-col items-center justify-center py-6">
+                {syncStatus === "idle" && (
+                  <Database className="h-12 w-12 text-muted-foreground mb-4" />
+                )}
+                {syncStatus === "syncing" && (
+                  <Loader className="h-12 w-12 text-primary animate-spin mb-4" />
+                )}
+                {syncStatus === "success" && (
+                  <CheckCircle2 className="h-12 w-12 text-green-500 mb-4" />
+                )}
+                <p className="text-center text-sm font-medium">
+                  {syncStatus === "idle" && t("db_ready_to_sync")}
+                  {syncStatus === "syncing" && t("db_creating_tables")}
+                  {syncStatus === "success" && t("db_ready")}
+                  {syncStatus === "error" && t("db_sync_failed")}
+                </p>
+              </CardContent>
+              <CardFooter>
+                <Button
+                  onClick={handleSync}
+                  className="w-full"
+                  disabled={
+                    syncStatus === "syncing" || syncStatus === "success"
+                  }
+                >
+                  {syncStatus === "syncing"
+                    ? t("db_syncing_btn")
+                    : t("db_init_btn")}
+                </Button>
+              </CardFooter>
+            </>
+          )}
+
+          {step === 3 && (
+            <>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <LayoutGrid className="h-5 w-5 text-primary" />
+                  {t("select_modules")}
+                </CardTitle>
+                <CardDescription>{t("select_modules_desc")}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4 max-h-[300px] overflow-y-auto">
+                {availableModules.map((mod) => (
+                  <label
+                    htmlFor={mod.id}
+                    key={mod.id}
+                    className="cursor-pointer flex items-start space-x-3 space-y-0 rounded-md border p-3"
+                  >
+                    <Checkbox
+                      id={mod.id}
+                      checked={selectedModules.includes(mod.id)}
+                      onCheckedChange={() => toggleModule(mod.id)}
+                      disabled={mod.system}
+                    />
+                    <div className="grid gap-1.5 leading-none">
+                      <div className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 flex items-center gap-2">
+                        {mod.name}
+                        {mod.system && (
+                          <Badge variant="outline" className="text-[10px] h-4">
+                            System
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-xs text-muted-foreground">
+                        {mod.description || "No description available."}
+                      </p>
+                    </div>
+                  </label>
+                ))}
+              </CardContent>
+              <CardFooter>
+                <Button onClick={nextStep} className="w-full">
+                  {t("continue_to_admin")}
+                </Button>
+              </CardFooter>
+            </>
+          )}
+
+          {step === 4 && (
+            <form
+              action={async (formData) => {
+                setLoading(true);
+                try {
+                  await finishSetup(formData, selectedModules);
+                } catch (_e) {
+                  // alert(String(e));
+                  setLoading(false);
+                }
+              }}
+            >
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <UserPlus className="h-5 w-5 text-primary" />
+                  {t("admin_account")}
+                </CardTitle>
+                <CardDescription>{t("admin_description")}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">{t("username")}</label>
+                  <Input name="username" placeholder="admin" required />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">{t("email")}</label>
+                  <Input
+                    name="email"
+                    type="email"
+                    placeholder="admin@kryo.io"
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium">{t("password")}</label>
+                  <Input name="password" type="password" required />
+                </div>
+              </CardContent>
+              <CardFooter className="mt-4">
+                <Button type="submit" className="w-full" disabled={loading}>
+                  {loading ? (
+                    <>
+                      <Loader className="mr-2 h-4 w-4 animate-spin" />
+                      {t("setting_up")}
+                    </>
+                  ) : (
+                    t("complete")
+                  )}
+                </Button>
+              </CardFooter>
+            </form>
+          )}
+        </Card>
+
+        {/* Progress indicators */}
+        <div className="flex justify-center gap-2">
+          {[1, 2, 3, 4].map((s) => (
+            <div
+              key={s}
+              className={`h-1.5 w-8 rounded-full transition-colors ${
+                step >= s ? "bg-primary" : "bg-primary/10"
+              }`}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}