veryfront 0.0.35 → 0.0.37

package/dist/templates/app/components/RecentActivity.tsx

@@ -0,0 +1,98 @@
+import { getRecentActivity } from "../lib/stats.ts";
+
+// Activity Icons
+function ClockIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10"/>
+      <polyline points="12 6 12 12 16 14"/>
+    </svg>
+  );
+}
+
+function ActivityIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+    </svg>
+  );
+}
+
+// Activity type badge colors
+function getActivityColor(type: string) {
+  const colors: Record<string, string> = {
+    login: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400 border-blue-200 dark:border-blue-800",
+    purchase: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400 border-emerald-200 dark:border-emerald-800",
+    signup: "bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400 border-violet-200 dark:border-violet-800",
+    update: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400 border-amber-200 dark:border-amber-800",
+    default: "bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-400 border-slate-200 dark:border-slate-600",
+  };
+  return colors[type.toLowerCase()] || colors.default;
+}
+
+export async function RecentActivity({ userId }: { userId: string }) {
+  const activities = await getRecentActivity(userId);
+
+  return (
+    <div className="bg-white/60 dark:bg-slate-800/60 backdrop-blur-lg rounded-2xl shadow-sm border border-slate-200/50 dark:border-slate-700/50 overflow-hidden">
+      {/* Header */}
+      <div className="p-6 border-b border-slate-200/50 dark:border-slate-700/50 flex items-center justify-between bg-white/50 dark:bg-slate-800/50">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-indigo-500/10 flex items-center justify-center">
+            <ActivityIcon className="w-5 h-5 text-indigo-500" />
+          </div>
+          <div>
+            <h2 className="text-lg font-bold text-slate-900 dark:text-white">Recent Activity</h2>
+            <p className="text-sm text-slate-500 dark:text-slate-400">Latest actions from your users</p>
+          </div>
+        </div>
+        <a
+          href="/dashboard/activity"
+          className="px-4 py-2 rounded-lg text-sm font-medium text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-900/20 transition-colors"
+        >
+          View all
+        </a>
+      </div>
+
+      {/* Activity List */}
+      <div className="divide-y divide-slate-200/50 dark:divide-slate-700/50">
+        {activities.map((activity) => (
+          <div key={activity.id} className="p-6 hover:bg-white/50 dark:hover:bg-slate-700/30 transition-colors group">
+            <div className="flex items-start gap-4">
+              {/* Time indicator */}
+              <div className="flex-shrink-0 w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700/50 flex items-center justify-center group-hover:bg-indigo-50 dark:group-hover:bg-indigo-900/20 transition-colors">
+                <ClockIcon className="w-5 h-5 text-slate-400 group-hover:text-indigo-500 transition-colors" />
+              </div>
+
+              {/* Content */}
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-slate-900 dark:text-white">
+                  {activity.description}
+                </p>
+                <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 flex items-center gap-1">
+                  <ClockIcon className="w-3 h-3" />
+                  {new Date(activity.timestamp).toLocaleString()}
+                </p>
+              </div>
+
+              {/* Type badge */}
+              <span className={`flex-shrink-0 px-3 py-1 rounded-full text-xs font-bold border ${getActivityColor(activity.type)}`}>
+                {activity.type}
+              </span>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Empty state */}
+      {activities.length === 0 && (
+        <div className="p-12 text-center">
+          <div className="w-16 h-16 rounded-full bg-slate-100 dark:bg-slate-800 flex items-center justify-center mx-auto mb-4">
+            <ActivityIcon className="w-8 h-8 text-slate-300 dark:text-slate-600" />
+          </div>
+          <p className="text-slate-500 dark:text-slate-400 font-medium">No recent activity</p>
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/templates/app/components/StatsGrid.tsx

@@ -0,0 +1,126 @@
+import { getStats } from "../lib/stats.ts";
+
+// Stat Icons
+function UsersIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
+      <circle cx="9" cy="7" r="4"/>
+      <path d="M22 21v-2a4 4 0 0 0-3-3.87"/>
+      <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+    </svg>
+  );
+}
+
+function ActivityIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
+    </svg>
+  );
+}
+
+function DollarIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="12" y1="1" x2="12" y2="23"/>
+      <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
+    </svg>
+  );
+}
+
+function TrendingUpIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
+      <polyline points="17 6 23 6 23 12"/>
+    </svg>
+  );
+}
+
+function TrendingDownIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/>
+      <polyline points="17 18 23 18 23 12"/>
+    </svg>
+  );
+}
+
+export async function StatsGrid({ userId }: { userId: string }) {
+  const stats = await getStats(userId);
+
+  const items = [
+    {
+      label: "Total Users",
+      value: stats.totalUsers.toLocaleString(),
+      change: "+12%",
+      trend: "up",
+      Icon: UsersIcon,
+      color: "from-blue-500 to-cyan-500",
+      bgColor: "bg-blue-500/10",
+      shadowColor: "shadow-blue-500/20",
+    },
+    {
+      label: "Active Today",
+      value: stats.activeToday.toLocaleString(),
+      change: "+5%",
+      trend: "up",
+      Icon: ActivityIcon,
+      color: "from-emerald-500 to-teal-500",
+      bgColor: "bg-emerald-500/10",
+      shadowColor: "shadow-emerald-500/20",
+    },
+    {
+      label: "Revenue",
+      value: "$" + stats.revenue.toLocaleString(),
+      change: "+8%",
+      trend: "up",
+      Icon: DollarIcon,
+      color: "from-violet-500 to-purple-500",
+      bgColor: "bg-violet-500/10",
+      shadowColor: "shadow-violet-500/20",
+    },
+    {
+      label: "Growth Rate",
+      value: stats.growth + "%",
+      change: "+2.3%",
+      trend: "up",
+      Icon: TrendingUpIcon,
+      color: "from-orange-500 to-amber-500",
+      bgColor: "bg-orange-500/10",
+      shadowColor: "shadow-orange-500/20",
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+      {items.map((item) => (
+        <div
+          key={item.label}
+          className="group bg-white/60 dark:bg-slate-800/60 backdrop-blur-lg p-6 rounded-2xl shadow-sm border border-slate-200/50 dark:border-slate-700/50 hover:shadow-xl hover:-translate-y-1 transition-all duration-300"
+        >
+          <div className="flex items-center justify-between mb-4">
+            <div className={`w-12 h-12 rounded-xl ${item.bgColor} flex items-center justify-center group-hover:scale-110 transition-transform duration-300 ${item.shadowColor} shadow-lg`}>
+              <item.Icon className={`w-6 h-6 bg-gradient-to-r ${item.color}`} style={{ stroke: 'currentColor' }} />
+            </div>
+            <div className={`flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-bold ${
+              item.trend === "up"
+                ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400"
+                : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400"
+            }`}>
+              {item.trend === "up" ? (
+                <TrendingUpIcon className="w-3 h-3" />
+              ) : (
+                <TrendingDownIcon className="w-3 h-3" />
+              )}
+              {item.change}
+            </div>
+          </div>
+          <p className="text-sm font-medium text-slate-500 dark:text-slate-400 mb-1">{item.label}</p>
+          <p className="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">{item.value}</p>
+        </div>
+      ))}
+    </div>
+  );
+}

package/dist/templates/app/components/Toaster.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import React, { useState, useEffect } from "react";
+
+interface Toast {
+  id: string;
+  message: string;
+  type: "success" | "error" | "info";
+}
+
+let toastListener: ((toast: Toast) => void) | null = null;
+
+export function showToast(message: string, type: Toast["type"] = "info") {
+  const toast: Toast = {
+    id: Math.random().toString(36),
+    message,
+    type,
+  };
+  toastListener?.(toast);
+}
+
+function CheckCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
+      <polyline points="22 4 12 14.01 9 11.01"/>
+    </svg>
+  );
+}
+
+function AlertCircleIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10"/>
+      <line x1="12" y1="8" x2="12" y2="12"/>
+      <line x1="12" y1="16" x2="12.01" y2="16"/>
+    </svg>
+  );
+}
+
+function InfoIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10"/>
+      <line x1="12" y1="16" x2="12" y2="12"/>
+      <line x1="12" y1="8" x2="12.01" y2="8"/>
+    </svg>
+  );
+}
+
+function XIcon({ className }: { className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <line x1="18" y1="6" x2="6" y2="18"/>
+      <line x1="6" y1="6" x2="18" y2="18"/>
+    </svg>
+  );
+}
+
+export function Toaster() {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  useEffect(() => {
+    toastListener = (toast) => {
+      setToasts(prev => [...prev, toast]);
+      setTimeout(() => {
+        setToasts(prev => prev.filter(t => t.id !== toast.id));
+      }, 4000);
+    };
+
+    return () => {
+      toastListener = null;
+    };
+  }, []);
+
+  const removeToast = (id: string) => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 z-50 space-y-3 pointer-events-none">
+      {toasts.map((toast) => (
+        <div
+          key={toast.id}
+          className={`pointer-events-auto flex items-start gap-3 px-4 py-3 rounded-xl shadow-lg backdrop-blur-md border transition-all animate-in slide-in-from-right-full fade-in duration-300 max-w-sm w-full ${
+            toast.type === "success" 
+              ? "bg-white/90 dark:bg-slate-800/90 border-emerald-200 dark:border-emerald-800 text-emerald-800 dark:text-emerald-200" 
+              : toast.type === "error"
+              ? "bg-white/90 dark:bg-slate-800/90 border-red-200 dark:border-red-800 text-red-800 dark:text-red-200"
+              : "bg-white/90 dark:bg-slate-800/90 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-200"
+          }`}
+        >
+          <div className="flex-shrink-0 mt-0.5">
+            {toast.type === "success" && <CheckCircleIcon className="w-5 h-5" />}
+            {toast.type === "error" && <AlertCircleIcon className="w-5 h-5" />}
+            {toast.type === "info" && <InfoIcon className="w-5 h-5" />}
+          </div>
+          
+          <div className="flex-1 text-sm font-medium">
+            {toast.message}
+          </div>
+
+          <button 
+            onClick={() => removeToast(toast.id)}
+            className="flex-shrink-0 text-current opacity-60 hover:opacity-100 transition-opacity"
+          >
+            <XIcon className="w-4 h-4" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

package/dist/templates/app/lib/auth-client.ts

@@ -0,0 +1,38 @@
+export async function login(email: string, password: string) {
+  const response = await fetch("/api/auth/login", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, password }),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || "Login failed");
+  }
+
+  return response.json();
+}
+
+export async function logout() {
+  await fetch("/api/auth/logout", { method: "POST" });
+  window.location.href = "/";
+}
+
+export async function register(data: {
+  email: string;
+  password: string;
+  name: string;
+}) {
+  const response = await fetch("/api/auth/register", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error.error || "Registration failed");
+  }
+
+  return response.json();
+}

package/dist/templates/app/lib/auth.ts

@@ -0,0 +1,49 @@
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: "user" | "admin";
+}
+
+interface Session {
+  token: string;
+  userId: string;
+  expiresAt: Date;
+}
+
+// In-memory storage (replace with database)
+const sessions = new Map<string, Session>();
+const ONE_DAY_MS = 86_400_000;
+
+export async function createSession(user: User): Promise<Session> {
+  const token = crypto.randomUUID();
+  const session: Session = {
+    token,
+    userId: user.id,
+    expiresAt: new Date(Date.now() + ONE_DAY_MS), // 24 hours
+  };
+
+  sessions.set(token, session);
+  return session;
+}
+
+export async function verifySession(token: string): Promise<Session | null> {
+  const session = sessions.get(token);
+  if (!session) return null;
+
+  if (session.expiresAt < new Date()) {
+    sessions.delete(token);
+    return null;
+  }
+
+  return session;
+}
+
+export async function getSession(): Promise<{ user: User } | null> {
+  // This is a placeholder - in real app, get from cookies
+  return null;
+}
+
+export async function deleteSession(token: string): Promise<void> {
+  sessions.delete(token);
+}

package/dist/templates/app/lib/stats.ts

@@ -0,0 +1,34 @@
+interface Stats {
+  totalUsers: number;
+  activeToday: number;
+  revenue: number;
+  growth: number;
+}
+
+export async function getStats(userId: string): Promise<Stats> {
+  // Mock data - replace with real database queries
+  return {
+    totalUsers: 1234,
+    activeToday: 89,
+    revenue: 54321,
+    growth: 12.5,
+  };
+}
+
+export async function getRecentActivity(userId: string) {
+  // Mock data
+  return [
+    {
+      id: "1",
+      type: "user_signup",
+      description: "New user registered",
+      timestamp: new Date(Date.now() - 1000 * 60 * 5),
+    },
+    {
+      id: "2",
+      type: "payment",
+      description: "Payment received",
+      timestamp: new Date(Date.now() - 1000 * 60 * 30),
+    },
+  ];
+}

package/dist/templates/app/lib/users.ts

@@ -0,0 +1,86 @@
+import { nanoid } from "nanoid";
+
+let hash: (password: string) => Promise<string>;
+let compare: (password: string, hash: string) => Promise<boolean>;
+
+// @ts-ignore - Deno global
+if (typeof Deno !== 'undefined') {
+  const bcrypt = await import("https://deno.land/x/bcrypt@v0.4.1/mod.ts");
+  hash = bcrypt.hash;
+  compare = bcrypt.compare;
+} else {
+  // @ts-ignore
+  const bcrypt = await import('@node-rs/bcrypt');
+  hash = bcrypt.hash;
+  compare = bcrypt.compare;
+}
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: "user" | "admin";
+  passwordHash: string;
+  createdAt: Date;
+}
+
+// In-memory storage (replace with database)
+const users = new Map<string, User>();
+
+// Demo user
+const demoUser: User = {
+  id: "demo-user",
+  email: "demo@example.com",
+  name: "Demo User",
+  role: "user",
+  passwordHash: await hash("password"),
+  createdAt: new Date(),
+};
+users.set(demoUser.id, demoUser);
+
+export async function createUser(data: {
+  email: string;
+  name: string;
+  password: string;
+  role?: "user" | "admin";
+}): Promise<Omit<User, "passwordHash">> {
+  const user: User = {
+    id: nanoid(),
+    email: data.email,
+    name: data.name,
+    role: data.role || "user",
+    passwordHash: await hash(data.password),
+    createdAt: new Date(),
+  };
+
+  users.set(user.id, user);
+
+  const { passwordHash, ...publicUser } = user;
+  return publicUser;
+}
+
+export async function validatePassword(
+  email: string,
+  password: string
+): Promise<Omit<User, "passwordHash"> | null> {
+  const user = Array.from(users.values()).find(u => u.email === email);
+  if (!user) return null;
+
+  const valid = await compare(password, user.passwordHash);
+  if (!valid) return null;
+
+  const { passwordHash, ...publicUser } = user;
+  return publicUser;
+}
+
+export async function getUsers(): Promise<Array<Omit<User, "passwordHash">>> {
+  return Array.from(users.values()).map(({ passwordHash, ...user }) => user);
+}
+
+export async function getUser(id: string): Promise<Omit<User, "passwordHash"> | null> {
+  const user = users.get(id);
+  if (!user) return null;
+
+  const { passwordHash, ...publicUser } = user;
+  return publicUser;
+}

package/dist/templates/app/middleware/auth.ts

@@ -0,0 +1,34 @@
+import { verifySession } from "../lib/auth.ts";
+
+export async function requireAuth(request: Request) {
+  const cookie = request.headers.get("cookie");
+  const token = cookie?.split("; ")
+    .find(row => row.startsWith("session="))
+    ?.split("=")[1];
+
+  if (!token) {
+    return {
+      ok: false,
+      response: Response.json(
+        { error: "Authentication required" },
+        { status: 401 }
+      ),
+    };
+  }
+
+  const session = await verifySession(token);
+  if (!session) {
+    return {
+      ok: false,
+      response: Response.json(
+        { error: "Invalid session" },
+        { status: 401 }
+      ),
+    };
+  }
+
+  return {
+    ok: true,
+    session,
+  };
+}

package/dist/templates/app/public/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: /sitemap.xml

package/dist/templates/app/veryfront.config.js

@@ -0,0 +1,74 @@
+import { getEnv } from "veryfront/platform";
+
+export default {
+  title: "My App",
+  description: "A full-stack app built with Veryfront",
+
+  // App configuration
+  app: {
+    name: "My App",
+    api: {
+      prefix: "/api",
+      cors: true,
+    },
+  },
+
+  // Security
+  security: {
+    csp: true,
+    cors: {
+      origin: ["http://localhost:3002"],
+      credentials: true,
+    },
+  },
+
+  // Theme
+  theme: {
+    colors: {
+      primary: "#6366F1",
+      secondary: "#EC4899",
+      success: "#10B981",
+      danger: "#EF4444",
+    },
+  },
+
+  // Development
+  dev: {
+    port: 3002,
+    open: true,
+  },
+
+  // Middleware
+  middleware: [
+    "auth",
+    "logging",
+    "rate-limit",
+  ],
+
+  // Import map
+  resolve: {
+    importMap: {
+      imports: {
+        "react": "https://esm.sh/react@19.1.1",
+        "react/jsx-runtime": "https://esm.sh/react@19.1.1/jsx-runtime",
+        "react-dom": "https://esm.sh/react-dom@19.1.1",
+        "react-dom/client": "https://esm.sh/react-dom@19.1.1/client",
+        "zod": "https://esm.sh/zod@3.22.0",
+        "nanoid": "https://esm.sh/nanoid@5.0.0",
+      },
+    },
+  },
+
+  // Cache configuration
+  cache: {
+    dir: ".veryfront/cache",
+    render: {
+      // Choose between "memory", "filesystem", "kv", or "redis"
+      type: getEnv("REDIS_URL") ? "redis" : "memory",
+      ttl: 5 * 60 * 1000,
+      maxEntries: 500,
+      redisUrl: getEnv("REDIS_URL") ?? undefined,
+      redisKeyPrefix: "vf:render:",
+    },
+  },
+};

package/dist/templates/blog/app/about/page.mdx

@@ -0,0 +1,14 @@
+# About
+
+Welcome to my blog! I write about technology, programming, and life.
+
+## Contact
+
+You can reach me at:
+- Email: hello@example.com
+- Twitter: @yourhandle
+- GitHub: @yourusername
+
+## About This Site
+
+This blog is built with [Veryfront](https://github.com/veryfront/veryfront), a Deno-first React framework with excellent MDX support.