create-varity-app 2.0.0-beta.1

package/template/src/components/shared/Navbar.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { CheckCircle, Menu, X } from 'lucide-react';
+import { APP_NAME } from '@/lib/constants';
+
+const navLinks = [
+  { label: 'Features', href: '#features' },
+  { label: 'How It Works', href: '#how-it-works' },
+  { label: 'Pricing', href: '#pricing' },
+];
+
+export function Navbar() {
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  return (
+    <nav className="sticky top-0 z-40 border-b border-gray-200 bg-white/80 backdrop-blur-md">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          <Link href="/" className="flex items-center gap-2">
+            <CheckCircle className="h-7 w-7 text-primary-600" />
+            <span className="text-xl font-bold text-gray-900">{APP_NAME}</span>
+          </Link>
+          <div className="hidden items-center gap-8 sm:flex">
+            {navLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                className="text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+          </div>
+          <div className="flex items-center gap-3">
+            <Link
+              href="/login"
+              className="hidden text-sm font-medium text-gray-600 hover:text-gray-900 transition-colors sm:block"
+            >
+              Sign In
+            </Link>
+            <Link
+              href="/login"
+              className="rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 transition-colors"
+            >
+              Get Started
+            </Link>
+            {/* Mobile menu toggle */}
+            <button
+              onClick={() => setMobileOpen(!mobileOpen)}
+              className="rounded-lg p-2 text-gray-600 hover:bg-gray-100 sm:hidden"
+              aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+            >
+              {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile dropdown */}
+      {mobileOpen && (
+        <div className="border-t border-gray-100 bg-white px-4 pb-4 pt-2 sm:hidden">
+          <div className="space-y-1">
+            {navLinks.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                onClick={() => setMobileOpen(false)}
+                className="block rounded-lg px-3 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+            <Link
+              href="/login"
+              onClick={() => setMobileOpen(false)}
+              className="block rounded-lg px-3 py-2.5 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900 transition-colors"
+            >
+              Sign In
+            </Link>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+}

package/template/src/lib/constants.ts

@@ -0,0 +1,35 @@
+import type { NavigationItem } from '@varity-labs/ui-kit';
+
+export const APP_NAME = 'TaskFlow';
+
+export const NAVIGATION_ITEMS: NavigationItem[] = [
+  { label: 'Dashboard', icon: 'dashboard', path: '/dashboard' },
+  { label: 'Projects', icon: 'folder', path: '/dashboard/projects' },
+  { label: 'Tasks', icon: 'list', path: '/dashboard/tasks' },
+  { label: 'Team', icon: 'people', path: '/dashboard/team' },
+  { label: 'Settings', icon: 'settings', path: '/dashboard/settings' },
+];
+
+export const PRIORITY_OPTIONS = [
+  { value: 'low', label: 'Low' },
+  { value: 'medium', label: 'Medium' },
+  { value: 'high', label: 'High' },
+] as const;
+
+export const ROLE_OPTIONS = [
+  { value: 'member', label: 'Member' },
+  { value: 'admin', label: 'Admin' },
+  { value: 'viewer', label: 'Viewer' },
+] as const;
+
+export const TASK_STATUS_OPTIONS = [
+  { value: 'todo', label: 'To Do' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'done', label: 'Done' },
+] as const;
+
+export const PROJECT_STATUS_OPTIONS = [
+  { value: 'active', label: 'Active' },
+  { value: 'paused', label: 'Paused' },
+  { value: 'completed', label: 'Completed' },
+] as const;

package/template/src/lib/database.ts

@@ -0,0 +1,7 @@
+import { db } from './varity';
+import type { Project, Task, TeamMember, UserSettings } from '../types';
+
+export const projects = () => db.collection<Project>('projects');
+export const tasks = () => db.collection<Task>('tasks');
+export const teamMembers = () => db.collection<TeamMember>('team_members');
+export const userSettings = () => db.collection<UserSettings>('user_settings');

package/template/src/lib/hooks.ts

@@ -0,0 +1,331 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { projects, tasks, teamMembers, userSettings } from './database';
+import type { Project, Task, TeamMember, UserSettings } from '../types';
+
+let usePrivyHook: any = null;
+try {
+  const uiKit = require('@varity-labs/ui-kit');
+  usePrivyHook = uiKit.usePrivy;
+} catch {}
+
+export function useCurrentUser() {
+  // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on require() success, stable across renders
+  const privy = usePrivyHook ? usePrivyHook() : { user: null, authenticated: false, logout: async () => {} };
+
+  // Extract email from any Privy auth method (email, Google, GitHub, etc.)
+  const user = privy.user;
+  const email =
+    user?.email?.address ||
+    user?.google?.email ||
+    user?.github?.email ||
+    user?.linkedAccounts?.find((a: any) => a.address && a.type === 'email')?.address ||
+    user?.linkedAccounts?.find((a: any) => a.email)?.email ||
+    '';
+
+  const name = email ? email.split('@')[0] : (user?.id ? 'User' : 'User');
+
+  return {
+    id: user?.id || 'dev-user-id',
+    email,
+    name,
+    authenticated: privy.authenticated,
+    logout: privy.logout,
+  };
+}
+
+interface UseCollectionReturn<T> {
+  data: T[];
+  loading: boolean;
+  error: string | null;
+  create: (item: any) => Promise<void>;
+  update: (id: string, updates: Partial<T>) => Promise<void>;
+  remove: (id: string) => Promise<void>;
+  refresh: () => Promise<void>;
+}
+
+export function useProjects(): UseCollectionReturn<Project> {
+  const [data, setData] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await projects().get();
+      setData(result as Project[]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load projects');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const create = async (input: Omit<Project, 'id' | 'createdAt'>) => {
+    const newProject: Project = {
+      ...input,
+      id: crypto.randomUUID(),
+      createdAt: new Date().toISOString(),
+    };
+    setData((prev) => [newProject, ...prev]);
+
+    try {
+      await projects().add({ ...input, createdAt: newProject.createdAt });
+      await refresh();
+    } catch (err) {
+      setData((prev) => prev.filter((p) => p.id !== newProject.id));
+      throw err;
+    }
+  };
+
+  const update = async (id: string, updates: Partial<Project>) => {
+    const original = data.find((p) => p.id === id);
+    setData((prev) =>
+      prev.map((p) => (p.id === id ? { ...p, ...updates } : p))
+    );
+
+    try {
+      await projects().update(id, updates);
+    } catch (err) {
+      if (original) {
+        setData((prev) =>
+          prev.map((p) => (p.id === id ? original : p))
+        );
+      }
+      throw err;
+    }
+  };
+
+  const remove = async (id: string) => {
+    const original = data.find((p) => p.id === id);
+    setData((prev) => prev.filter((p) => p.id !== id));
+
+    try {
+      await projects().delete(id);
+    } catch (err) {
+      if (original) setData((prev) => [...prev, original]);
+      throw err;
+    }
+  };
+
+  return { data, loading, error, create, update, remove, refresh };
+}
+
+export function useTasks(projectId?: string): UseCollectionReturn<Task> {
+  const [allTasks, setAllTasks] = useState<Task[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await tasks().get();
+      setAllTasks(result as Task[]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load tasks');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const data = projectId
+    ? allTasks.filter((t) => t.projectId === projectId)
+    : allTasks;
+
+  const create = async (input: Omit<Task, 'id' | 'createdAt'>) => {
+    const newTask: Task = {
+      ...input,
+      id: crypto.randomUUID(),
+      createdAt: new Date().toISOString(),
+    };
+    setAllTasks((prev) => [newTask, ...prev]);
+
+    try {
+      await tasks().add({ ...input, createdAt: newTask.createdAt });
+      await refresh();
+    } catch (err) {
+      setAllTasks((prev) => prev.filter((t) => t.id !== newTask.id));
+      throw err;
+    }
+  };
+
+  const update = async (id: string, updates: Partial<Task>) => {
+    const original = allTasks.find((t) => t.id === id);
+    setAllTasks((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, ...updates } : t))
+    );
+
+    try {
+      await tasks().update(id, updates);
+    } catch (err) {
+      if (original) {
+        setAllTasks((prev) =>
+          prev.map((t) => (t.id === id ? original : t))
+        );
+      }
+      throw err;
+    }
+  };
+
+  const remove = async (id: string) => {
+    const original = allTasks.find((t) => t.id === id);
+    setAllTasks((prev) => prev.filter((t) => t.id !== id));
+
+    try {
+      await tasks().delete(id);
+    } catch (err) {
+      if (original) setAllTasks((prev) => [...prev, original]);
+      throw err;
+    }
+  };
+
+  return { data, loading, error, create, update, remove, refresh };
+}
+
+export function useTeam(): UseCollectionReturn<TeamMember> {
+  const [data, setData] = useState<TeamMember[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const result = await teamMembers().get();
+      setData(result as TeamMember[]);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load team');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const create = async (input: Omit<TeamMember, 'id' | 'joinedAt'>) => {
+    const newMember: TeamMember = {
+      ...input,
+      id: crypto.randomUUID(),
+      joinedAt: new Date().toISOString(),
+    };
+    setData((prev) => [newMember, ...prev]);
+
+    try {
+      await teamMembers().add({ ...input, joinedAt: newMember.joinedAt });
+      await refresh();
+    } catch (err) {
+      setData((prev) => prev.filter((m) => m.id !== newMember.id));
+      throw err;
+    }
+  };
+
+  const update = async (id: string, updates: Partial<TeamMember>) => {
+    const original = data.find((m) => m.id === id);
+    setData((prev) =>
+      prev.map((m) => (m.id === id ? { ...m, ...updates } : m))
+    );
+
+    try {
+      await teamMembers().update(id, updates);
+    } catch (err) {
+      if (original) {
+        setData((prev) =>
+          prev.map((m) => (m.id === id ? original : m))
+        );
+      }
+      throw err;
+    }
+  };
+
+  const remove = async (id: string) => {
+    const original = data.find((m) => m.id === id);
+    setData((prev) => prev.filter((m) => m.id !== id));
+
+    try {
+      await teamMembers().delete(id);
+    } catch (err) {
+      if (original) setData((prev) => [...prev, original]);
+      throw err;
+    }
+  };
+
+  return { data, loading, error, create, update, remove, refresh };
+}
+
+const DEFAULT_SETTINGS: Omit<UserSettings, 'id' | 'user_id' | 'updated_at'> = {
+  theme: 'system',
+  email_notifications: true,
+  marketing_emails: false,
+  product_updates: true,
+  date_format: 'MM/DD/YYYY',
+  timezone: 'America/Los_Angeles',
+  language: 'en',
+  dashboard_layout: 'comfortable',
+  two_factor_enabled: false,
+  analytics_enabled: true,
+  cookies_enabled: true,
+};
+
+export function useUserSettings() {
+  const { id: userId } = useCurrentUser();
+  const [settings, setSettings] = useState<UserSettings | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const all = await userSettings().get();
+      const mine = (all as UserSettings[]).find((s) => s.user_id === userId);
+      if (mine) {
+        setSettings(mine);
+      } else {
+        const newSettings = {
+          ...DEFAULT_SETTINGS,
+          user_id: userId,
+          updated_at: new Date().toISOString(),
+        };
+        const created = await userSettings().add(newSettings);
+        setSettings(created as UserSettings);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load settings');
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+
+  const update = async (updates: Partial<UserSettings>) => {
+    if (!settings) return;
+    const original = { ...settings };
+    const patched = { ...settings, ...updates, updated_at: new Date().toISOString() };
+    setSettings(patched);
+
+    try {
+      await userSettings().update(settings.id, { ...updates, updated_at: patched.updated_at });
+    } catch (err) {
+      setSettings(original);
+      throw err;
+    }
+  };
+
+  return { settings, loading, error, update, refresh };
+}

package/template/src/lib/utils.ts

@@ -0,0 +1,68 @@
+export function formatDate(dateString: string | undefined | null): string {
+  if (!dateString) return '—';
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return '—';
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function formatDateShort(dateString: string | undefined | null): string {
+  if (!dateString) return '—';
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return '—';
+  return date.toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+  });
+}
+
+export function formatRelativeDate(dateString: string | undefined | null): string {
+  if (!dateString) return '—';
+  const date = new Date(dateString);
+  if (isNaN(date.getTime())) return '—';
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return formatDateShort(dateString);
+}
+
+export function isValidEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+}
+
+export function cn(...classes: (string | false | undefined | null)[]): string {
+  return classes.filter(Boolean).join(' ');
+}
+
+export function downloadCSV(data: Record<string, unknown>[], filename: string) {
+  if (data.length === 0) return;
+  const headers = Object.keys(data[0]);
+  const rows = data.map((row) =>
+    headers.map((h) => {
+      const val = row[h];
+      const str = val === null || val === undefined ? '' : String(val);
+      // Escape quotes and wrap in quotes if needed
+      return str.includes(',') || str.includes('"') || str.includes('\n')
+        ? `"${str.replace(/"/g, '""')}"`
+        : str;
+    }).join(',')
+  );
+  const csv = [headers.join(','), ...rows].join('\n');
+  const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}

package/template/src/lib/varity.ts

@@ -0,0 +1 @@
+export { db } from '@varity-labs/sdk';