@thunder-stack/create-thunder-app 0.0.1

package/template/client/shared/src/features/management/users.tsx

@@ -0,0 +1,245 @@
+import React, { useEffect, useState } from "react";
+import { View as MotiView } from "moti";
+import { View, Text, ActivityIndicator, ScrollView, RefreshControl, Image, TouchableOpacity } from "react-native";
+import { Card } from "../../components/Card";
+import { authClient } from "../../utils/auth";
+
+function UserListSkeleton() {
+  return (
+    <ScrollView className="flex-1">
+      <View className="p-6 gap-6">
+        <View>
+          <View className="h-3 w-20 bg-slate-800 rounded mb-2" />
+          <View className="h-8 w-48 bg-slate-800 rounded" />
+        </View>
+        
+        <View className="gap-4">
+          {[1, 2, 3].map((i) => (
+            <MotiView
+              key={i}
+              from={{ opacity: 0.3 }}
+              animate={{ opacity: 0.7 }}
+              transition={{
+                type: "timing",
+                duration: 900,
+                loop: true,
+                delay: i * 150,
+              }}
+              className="bg-slate-900/40 border-slate-800 p-5 rounded-2xl border flex-row items-center justify-between gap-4 min-h-[90px]"
+            >
+              <View className="flex-row items-center gap-4">
+                <View className="w-12 h-12 rounded-full bg-slate-800" />
+                <View className="gap-2">
+                  <View className="h-4 w-32 bg-slate-800 rounded" />
+                  <View className="h-3 w-48 bg-slate-800 rounded" />
+                </View>
+              </View>
+              <View className="flex-row gap-2">
+                <View className="w-24 h-8 bg-slate-800 rounded-lg" />
+                <View className="w-24 h-8 bg-slate-800 rounded-lg" />
+              </View>
+            </MotiView>
+          ))}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}
+
+export function UserManagementView() {
+  const [users, setUsers] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+  const [togglingUser, setTogglingUser] = useState<string | null>(null);
+  const [error, setError] = useState("");
+
+  const fetchUsers = async () => {
+    try {
+      const res = await fetch(`${authClient.baseURL}/api/management/users`, {
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const data = await res.json();
+      if (res.status === 403 || res.status === 401) {
+        setError(data.error || "Permission denied.");
+      } else if (!data.error) {
+        setUsers(data);
+      }
+    } catch (err) {
+      console.error("Failed to load users:", err);
+      setError("Failed to fetch user list.");
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const handleToggleRole = async (userId: string, currentRoles: string[], targetRoleId: string, targetRoleName: string) => {
+    setTogglingUser(userId);
+    setError("");
+    const hasRole = currentRoles.includes(targetRoleName);
+
+    try {
+      const url = `${authClient.baseURL}/api/management/users/${userId}/roles${hasRole ? `/${targetRoleId}` : ""}`;
+      const method = hasRole ? "DELETE" : "POST";
+      
+      const res = await fetch(url, {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: method === "POST" ? JSON.stringify({ roleId: targetRoleId }) : undefined,
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.error || "Failed to update role.");
+      }
+
+      await fetchUsers();
+    } catch (err: any) {
+      console.error("Failed to toggle role:", err);
+      setError(err?.message || "An error occurred while modifying roles.");
+    } finally {
+      setTogglingUser(null);
+    }
+  };
+
+  const onRefresh = () => {
+    setRefreshing(true);
+    fetchUsers();
+  };
+
+  if (loading) {
+    return <UserListSkeleton />;
+  }
+
+  return (
+    <ScrollView
+      className="flex-1"
+      refreshControl={
+        <RefreshControl refreshing={refreshing} onRefresh={onRefresh} tintColor="#3b82f6" />
+      }
+    >
+      <View className="p-6 gap-6">
+        <MotiView
+          from={{ opacity: 0, translateY: -10 }}
+          animate={{ opacity: 1, translateY: 0 }}
+          transition={{ type: "timing", duration: 400 }}
+        >
+          <Text className="text-slate-400 text-xs font-bold uppercase tracking-widest mb-1">
+            Administration
+          </Text>
+          <Text className="text-white text-3xl font-black tracking-tight">
+            User Management
+          </Text>
+        </MotiView>
+
+        {error ? (
+          <View className="p-4 bg-red-950/40 border border-red-500/20 rounded-xl">
+            <Text className="text-red-400 text-xs font-semibold text-center">{error}</Text>
+          </View>
+        ) : null}
+
+        <View className="gap-4">
+          {users.map((item, index) => {
+            const userRoles = item.roles.map((r: any) => r.name);
+            const isAdmin = userRoles.includes("Admin");
+            const isUser = userRoles.includes("User");
+
+            return (
+              <MotiView
+                key={item.id}
+                from={{ opacity: 0, translateY: 15 }}
+                animate={{ opacity: 1, translateY: 0 }}
+                transition={{ type: "timing", duration: 400, delay: index * 50 }}
+              >
+                <Card className="bg-slate-900/40 border-slate-800 p-5 rounded-2xl border flex-row flex-wrap items-center justify-between gap-4">
+                  <View className="flex-row items-center gap-4">
+                    {item.image ? (
+                      <Image source={{ uri: item.image }} className="w-12 h-12 rounded-full border border-slate-700" />
+                    ) : (
+                      <View className="w-12 h-12 rounded-full bg-slate-800 border border-slate-700 items-center justify-center">
+                        <Text className="text-white text-lg font-bold">
+                          {item.name.charAt(0)}
+                        </Text>
+                      </View>
+                    )}
+                    <View>
+                      <Text className="text-white font-extrabold text-base">{item.name}</Text>
+                      <Text className="text-slate-400 text-xs font-medium">{item.email}</Text>
+                      <View className="flex-row gap-2 mt-2">
+                        {userRoles.map((roleName: string) => (
+                          <View
+                            key={roleName}
+                            className={`px-2 py-0.5 rounded-md border ${
+                              roleName === "Admin"
+                                ? "bg-blue-500/10 border-blue-500/25"
+                                : "bg-slate-500/10 border-slate-500/20"
+                            }`}
+                          >
+                            <Text
+                              className={`text-[10px] font-bold ${
+                                roleName === "Admin" ? "text-blue-400" : "text-slate-400"
+                              }`}
+                            >
+                              {roleName}
+                            </Text>
+                          </View>
+                        ))}
+                        {userRoles.length === 0 ? (
+                          <Text className="text-slate-600 text-[10px] font-bold uppercase italic">
+                            No Role
+                          </Text>
+                        ) : null}
+                      </View>
+                    </View>
+                  </View>
+
+                  <View className="flex-row items-center gap-2">
+                    {togglingUser === item.id ? (
+                      <ActivityIndicator size="small" color="#3b82f6" />
+                    ) : (
+                      <>
+                        <TouchableOpacity
+                          onPress={() => handleToggleRole(item.id, userRoles, "role_admin", "Admin")}
+                          className={`px-3 py-1.5 rounded-lg border ${
+                            isAdmin
+                              ? "bg-red-500/10 border-red-500/20"
+                              : "bg-blue-600 border-blue-500"
+                          }`}
+                        >
+                          <Text className={`text-xs font-bold ${isAdmin ? "text-red-400" : "text-white"}`}>
+                            {isAdmin ? "Remove Admin" : "Make Admin"}
+                          </Text>
+                        </TouchableOpacity>
+
+                        <TouchableOpacity
+                          onPress={() => handleToggleRole(item.id, userRoles, "role_user", "User")}
+                          className={`px-3 py-1.5 rounded-lg border ${
+                            isUser
+                              ? "bg-red-500/10 border-red-500/20"
+                              : "bg-slate-700 border-slate-600"
+                          }`}
+                        >
+                          <Text className={`text-xs font-bold ${isUser ? "text-red-400" : "text-slate-300"}`}>
+                            {isUser ? "Revoke User" : "Grant User"}
+                          </Text>
+                        </TouchableOpacity>
+                      </>
+                    )}
+                  </View>
+                </Card>
+              </MotiView>
+            );
+          })}
+        </View>
+      </View>
+    </ScrollView>
+  );
+}

package/template/client/shared/src/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />

package/template/client/shared/src/utils/auth.ts

@@ -0,0 +1,21 @@
+import { createAuthClient } from "better-auth/react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { Platform } from "react-native";
+
+// Resolve Hono API location dynamically based on Web vs Native environment
+const API_URL = (Platform.select({
+  web: process.env.NEXT_PUBLIC_API_URL || "http://localhost:8787",
+  default: "http://localhost:8787", // Dev server endpoint for local emulator testing
+}) || "http://localhost:8787") as string;
+
+export const authClient = Object.assign(
+  createAuthClient({
+    baseURL: API_URL,
+    storage: Platform.select({
+      web: undefined, // Standard browser cookies / local storage
+      default: AsyncStorage, // Persisted AsyncStorage state for React Native mobile builds
+    }),
+  }),
+  { baseURL: API_URL }
+);
+

package/template/client/shared/tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "../next/app/**/*.{js,jsx,ts,tsx}",
+    "../expo/app/**/*.{js,jsx,ts,tsx}"
+  ],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        slate: {
+          950: "#090d16"
+        }
+      }
+    },
+  },
+  plugins: [],
+}

package/template/client/shared/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@thunder/tsconfig/base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"]
+}

package/template/package.json

@@ -0,0 +1,47 @@
+{
+    "name": "thunder-monorepo",
+    "private": true,
+    "engines": {
+        "node": ">=22.0.0"
+    },
+    "scripts": {
+        "build": "dotenv -e .env -- turbo build",
+        "dev": "dotenv -e .env -- turbo dev",
+        "lint": "turbo lint",
+        "typecheck": "turbo typecheck",
+        "format": "prettier --write \"**/*.{ts,tsx,md}\"",
+        "format:check": "prettier --check \"**/*.{ts,tsx,md}\"",
+        "db:generate": "dotenv -e .env -- turbo db:generate",
+        "db:migrate": "dotenv -e .env -- turbo db:migrate",
+        "db:seed": "dotenv -e .env -- turbo db:seed",
+        "test": "turbo run test:unit test",
+        "clean": "node scripts/clean.js",
+        "clean:install": "node scripts/clean.js && pnpm install"
+    },
+    "devDependencies": {
+        "dotenv-cli": "^7.4.4",
+        "prettier": "^3.9.4",
+        "turbo": "^2.10.4",
+        "typescript": "^5.9.3"
+    },
+    "packageManager": "pnpm@9.0.0",
+    "pnpm": {
+        "overrides": {
+            "esbuild": "0.25.12",
+            "sourcemap-codec": "npm:@jridgewell/sourcemap-codec@^1.5.0"
+        },
+        "peerDependencyRules": {
+            "ignoreMissing": [
+                "vercel"
+            ],
+            "allowAny": [
+                "react-native",
+                "react",
+                "next",
+                "drizzle-orm",
+                "drizzle-kit",
+                "vitest"
+            ]
+        }
+    }
+}

package/template/packages/tsconfig/base.json

@@ -0,0 +1,20 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+        "strict": true,
+        "target": "ES2022",
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "esModuleInterop": true,
+        "skipLibCheck": true,
+        "forceConsistentCasingInFileNames": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "declaration": true,
+        "declarationMap": true,
+        "sourceMap": true,
+        "noUncheckedIndexedAccess": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true
+    }
+}

package/template/packages/tsconfig/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "@thunder/tsconfig",
+    "version": "0.1.0",
+    "private": true,
+    "files": [
+        "base.json"
+    ],
+    "exports": {
+        "./base.json": "./base.json"
+    }
+}

package/template/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+packages:
+  - 'client/*'
+  - 'server/*'
+  - 'packages/*'

package/template/scripts/clean.js

@@ -0,0 +1,56 @@
+const fs = require('fs');
+const path = require('path');
+
+const targets = ['node_modules', 'dist', '.next', '.open-next', '.turbo', '.expo', 'web-build'];
+const rootDir = path.resolve(__dirname, '..');
+
+function cleanDir(dir) {
+  if (!fs.existsSync(dir)) return;
+
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    const fullPath = path.join(dir, file);
+    
+    if (targets.includes(file)) {
+      try {
+        const stats = fs.statSync(fullPath);
+        if (stats.isDirectory()) {
+          console.log(`Deleting: ${fullPath}`);
+          fs.rmSync(fullPath, { recursive: true, force: true });
+        }
+      } catch (err) {
+        console.error(`Failed to delete ${fullPath}:`, err.message);
+      }
+    } else {
+      try {
+        const stats = fs.statSync(fullPath);
+        if (stats.isDirectory() && !file.startsWith('.') && file !== 'node_modules') {
+          cleanDir(fullPath);
+        }
+      } catch (err) {
+        // ignore errors
+      }
+    }
+  }
+}
+
+console.log('Cleaning workspace installed and build files...');
+cleanDir(rootDir);
+
+// Clean root level targets as well
+for (const target of targets) {
+  const rootTarget = path.join(rootDir, target);
+  if (fs.existsSync(rootTarget)) {
+    try {
+      const stats = fs.statSync(rootTarget);
+      if (stats.isDirectory()) {
+        console.log(`Deleting: ${rootTarget}`);
+        fs.rmSync(rootTarget, { recursive: true, force: true });
+      }
+    } catch (err) {
+      console.error(`Failed to delete ${rootTarget}:`, err.message);
+    }
+  }
+}
+
+console.log('Clean completed successfully!');

package/template/server/db/drizzle.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from "drizzle-kit";
+
+export default defineConfig({
+  schema: "./src/schema.ts",
+  out: "./migrations",
+  dialect: "postgresql",
+  dbCredentials: {
+    url: process.env.DATABASE_URL!,
+  },
+});

package/template/server/db/migrations/0000_loving_mindworm.sql

@@ -0,0 +1,86 @@
+CREATE TABLE "account" (
+	"id" text PRIMARY KEY NOT NULL,
+	"account_id" text NOT NULL,
+	"provider_id" text NOT NULL,
+	"user_id" text NOT NULL,
+	"access_token" text,
+	"refresh_token" text,
+	"id_token" text,
+	"access_token_expires_at" timestamp,
+	"refresh_token_expires_at" timestamp,
+	"scope" text,
+	"password" text,
+	"created_at" timestamp NOT NULL,
+	"updated_at" timestamp NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "session" (
+	"id" text PRIMARY KEY NOT NULL,
+	"expires_at" timestamp NOT NULL,
+	"token" text NOT NULL,
+	"created_at" timestamp NOT NULL,
+	"updated_at" timestamp NOT NULL,
+	"ip_address" text,
+	"user_agent" text,
+	"user_id" text NOT NULL,
+	CONSTRAINT "session_token_unique" UNIQUE("token")
+);
+--> statement-breakpoint
+CREATE TABLE "user" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text NOT NULL,
+	"email" text NOT NULL,
+	"email_verified" boolean NOT NULL,
+	"image" text,
+	"created_at" timestamp NOT NULL,
+	"updated_at" timestamp NOT NULL,
+	CONSTRAINT "user_email_unique" UNIQUE("email")
+);
+--> statement-breakpoint
+CREATE TABLE "verification" (
+	"id" text PRIMARY KEY NOT NULL,
+	"identifier" text NOT NULL,
+	"value" text NOT NULL,
+	"expires_at" timestamp NOT NULL,
+	"created_at" timestamp,
+	"updated_at" timestamp
+);
+--> statement-breakpoint
+CREATE TABLE "permission" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text NOT NULL,
+	"description" text,
+	"created_at" timestamp NOT NULL,
+	"updated_at" timestamp NOT NULL,
+	CONSTRAINT "permission_name_unique" UNIQUE("name")
+);
+--> statement-breakpoint
+CREATE TABLE "role" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text NOT NULL,
+	"description" text,
+	"created_at" timestamp NOT NULL,
+	"updated_at" timestamp NOT NULL,
+	CONSTRAINT "role_name_unique" UNIQUE("name")
+);
+--> statement-breakpoint
+CREATE TABLE "role_permission" (
+	"id" text PRIMARY KEY NOT NULL,
+	"role_id" text NOT NULL,
+	"permission_id" text NOT NULL,
+	"created_at" timestamp NOT NULL
+);
+--> statement-breakpoint
+CREATE TABLE "user_role" (
+	"id" text PRIMARY KEY NOT NULL,
+	"user_id" text NOT NULL,
+	"role_id" text NOT NULL,
+	"created_at" timestamp NOT NULL
+);
+--> statement-breakpoint
+ALTER TABLE "account" ADD CONSTRAINT "account_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "session" ADD CONSTRAINT "session_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "role_permission" ADD CONSTRAINT "role_permission_role_id_role_id_fk" FOREIGN KEY ("role_id") REFERENCES "public"."role"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "role_permission" ADD CONSTRAINT "role_permission_permission_id_permission_id_fk" FOREIGN KEY ("permission_id") REFERENCES "public"."permission"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "user_role" ADD CONSTRAINT "user_role_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+ALTER TABLE "user_role" ADD CONSTRAINT "user_role_role_id_role_id_fk" FOREIGN KEY ("role_id") REFERENCES "public"."role"("id") ON DELETE cascade ON UPDATE no action;