@clubedge/create-clubedge-app 0.2.0 → 0.3.0

package/template/apps/web/src/app/dashboard/page.tsx

@@ -0,0 +1,352 @@
+import {
+  Activity,
+  ArrowRight,
+  ArrowUpRight,
+  Blocks,
+  Check,
+  CircleDashed,
+  Database,
+  Github,
+  LockKeyhole,
+  Settings2,
+  ShieldCheck,
+  Workflow,
+} from "lucide-react";
+import Link from "next/link";
+
+import { Badge } from "@clubedge/ui/components/badge";
+import { Button } from "@clubedge/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@clubedge/ui/components/card";
+import { Separator } from "@clubedge/ui/components/separator";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@clubedge/ui/components/table";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@clubedge/ui/components/breadcrumb";
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@clubedge/ui/components/sidebar";
+import { siteConfig } from "@/config/site";
+import { getPageUser } from "@/server/auth";
+import { AccountButton } from "./_components/account-button";
+import { AppSidebar } from "./_components/app-sidebar";
+import { ThemeToggle } from "../theme-toggle";
+
+const modules = [
+  {
+    name: "PostgreSQL + Drizzle",
+    description: "Typed schema and migrations for application data.",
+    icon: Database,
+    status: "Configure",
+    variant: "secondary" as const,
+  },
+  {
+    name: "Supabase Auth",
+    description: "Cookie-based sessions and server-validated users.",
+    icon: LockKeyhole,
+    status: "Optional setup",
+    variant: "outline" as const,
+  },
+  {
+    name: "Storage adapters",
+    description: "S3-compatible storage or Supabase Storage.",
+    icon: Workflow,
+    status: "Ready to configure",
+    variant: "secondary" as const,
+  },
+  {
+    name: "Redis cache",
+    description: "Optional cache and distributed rate limiting.",
+    icon: CircleDashed,
+    status: "Optional",
+    variant: "outline" as const,
+  },
+];
+
+const setupRows = [
+  {
+    item: "Shared UI workspace",
+    detail: "shadcn/ui components with Base UI primitives",
+    status: "Ready",
+  },
+  {
+    item: "Database connection",
+    detail: "Set DATABASE_URL in apps/web/.env.local",
+    status: "Configure",
+  },
+  {
+    item: "Authentication provider",
+    detail: "Add Supabase URL and publishable key when needed",
+    status: "Optional",
+  },
+];
+
+export default async function DashboardPage() {
+  const user = await getPageUser("/dashboard");
+
+  return (
+    <SidebarProvider defaultOpen>
+      <AppSidebar user={user} />
+      <SidebarInset>
+        <header className="sticky top-0 z-10 border-b bg-background/90 backdrop-blur">
+          <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <SidebarTrigger aria-label="Toggle navigation sidebar" />
+              <Breadcrumb>
+                <BreadcrumbList>
+                  <BreadcrumbItem>
+                    <BreadcrumbLink render={<Link href="/" />}>Home</BreadcrumbLink>
+                  </BreadcrumbItem>
+                  <BreadcrumbSeparator />
+                  <BreadcrumbItem>
+                    <BreadcrumbPage>Dashboard</BreadcrumbPage>
+                  </BreadcrumbItem>
+                </BreadcrumbList>
+              </Breadcrumb>
+            </div>
+            <div className="ml-auto flex items-center gap-2">
+              <Badge className="hidden sm:inline-flex" variant="outline">
+                <span className="size-1.5 rounded-full bg-primary" aria-hidden="true" />
+                Starter ready
+              </Badge>
+              <ThemeToggle />
+              <Button
+                aria-label="Open GitHub repository"
+                render={
+                  <Link href={siteConfig.links.repository} target="_blank" rel="noreferrer" />
+                }
+                size="icon"
+                variant="ghost"
+              >
+                <Github aria-hidden="true" />
+              </Button>
+              <AccountButton user={user} />
+            </div>
+          </div>
+        </header>
+
+        <main
+          className="mx-auto flex w-full max-w-7xl flex-col gap-8 px-4 py-8 sm:px-6 lg:px-8 lg:py-10"
+          id="overview"
+        >
+          <section className="flex flex-col justify-between gap-5 sm:flex-row sm:items-end">
+            <div className="max-w-2xl space-y-3">
+              <div className="flex items-center gap-2 text-sm font-medium text-primary">
+                <ShieldCheck aria-hidden="true" className="size-4" />
+                Production-minded application foundation
+              </div>
+              <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">
+                A better place to start building.
+              </h1>
+              <p className="max-w-xl text-sm leading-6 text-muted-foreground sm:text-base">
+                Your workspace is ready. Connect the services you need, then build your product on
+                top of a consistent, replaceable foundation.
+              </p>
+            </div>
+            <Button
+              render={<Link href={siteConfig.links.setupGuide} target="_blank" rel="noreferrer" />}
+            >
+              Read setup guide <ArrowRight aria-hidden="true" />
+            </Button>
+          </section>
+
+          <section
+            aria-label="Starter summary"
+            className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4"
+          >
+            <Card className="gap-4 py-5">
+              <CardHeader className="flex-row items-center justify-between gap-2 px-5">
+                <CardDescription>Workspace packages</CardDescription>
+                <span className="grid size-9 place-items-center rounded-lg bg-primary/10 text-primary">
+                  <Blocks aria-hidden="true" className="size-4" />
+                </span>
+              </CardHeader>
+              <CardContent className="px-5">
+                <CardTitle className="text-2xl">3</CardTitle>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  Web, shared UI, and root tooling
+                </p>
+              </CardContent>
+            </Card>
+            <Card className="gap-4 py-5">
+              <CardHeader className="flex-row items-center justify-between gap-2 px-5">
+                <CardDescription>Database</CardDescription>
+                <span className="grid size-9 place-items-center rounded-lg bg-primary/10 text-primary">
+                  <Database aria-hidden="true" className="size-4" />
+                </span>
+              </CardHeader>
+              <CardContent className="px-5">
+                <CardTitle className="text-2xl">PostgreSQL</CardTitle>
+                <p className="mt-1 text-xs text-muted-foreground">Drizzle manages app data</p>
+              </CardContent>
+            </Card>
+            <Card className="gap-4 py-5">
+              <CardHeader className="flex-row items-center justify-between gap-2 px-5">
+                <CardDescription>Shared UI</CardDescription>
+                <span className="grid size-9 place-items-center rounded-lg bg-primary/10 text-primary">
+                  <Blocks aria-hidden="true" className="size-4" />
+                </span>
+              </CardHeader>
+              <CardContent className="px-5">
+                <CardTitle className="text-2xl">shadcn/ui</CardTitle>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  Base UI primitives in @clubedge/ui
+                </p>
+              </CardContent>
+            </Card>
+            <Card className="gap-4 py-5">
+              <CardHeader className="flex-row items-center justify-between gap-2 px-5">
+                <CardDescription>Health endpoint</CardDescription>
+                <span className="grid size-9 place-items-center rounded-lg bg-primary/10 text-primary">
+                  <Activity aria-hidden="true" className="size-4" />
+                </span>
+              </CardHeader>
+              <CardContent className="px-5">
+                <CardTitle className="text-2xl">Available</CardTitle>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  <Link
+                    className="inline-flex items-center gap-1 text-primary hover:underline"
+                    href="/api/health"
+                  >
+                    Check liveness <ArrowUpRight aria-hidden="true" className="size-3" />
+                  </Link>
+                </p>
+              </CardContent>
+            </Card>
+          </section>
+
+          <section className="grid gap-6 xl:grid-cols-[1.1fr_0.9fr]" id="modules">
+            <Card className="gap-0 py-0">
+              <CardHeader className="flex-row items-start justify-between gap-3 border-b px-5 py-5 sm:px-6">
+                <div className="space-y-1.5">
+                  <CardTitle className="text-base">Application modules</CardTitle>
+                  <CardDescription>
+                    Provider boundaries are ready for your project configuration.
+                  </CardDescription>
+                </div>
+                <Badge variant="secondary">4 modules</Badge>
+              </CardHeader>
+              <CardContent className="px-5 py-2 sm:px-6">
+                {modules.map(({ name, description, icon: Icon, status, variant }, index) => (
+                  <div key={name}>
+                    {index > 0 && <Separator />}
+                    <div className="flex items-center gap-3 py-4">
+                      <span className="grid size-9 shrink-0 place-items-center rounded-lg border bg-muted/60 text-muted-foreground">
+                        <Icon aria-hidden="true" className="size-4" />
+                      </span>
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-medium">{name}</p>
+                        <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                          {description}
+                        </p>
+                      </div>
+                      <Badge className="shrink-0" variant={variant}>
+                        {status}
+                      </Badge>
+                    </div>
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+
+            <Card className="gap-0 py-0" id="activity">
+              <CardHeader className="border-b px-5 py-5 sm:px-6">
+                <CardTitle className="text-base">Project setup</CardTitle>
+                <CardDescription>Recommended first steps for a new application.</CardDescription>
+              </CardHeader>
+              <CardContent className="p-0">
+                <Table>
+                  <TableHeader>
+                    <TableRow className="hover:bg-transparent">
+                      <TableHead className="ps-5 sm:ps-6">Item</TableHead>
+                      <TableHead className="pe-5 text-end sm:pe-6">Status</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {setupRows.map((row) => (
+                      <TableRow key={row.item}>
+                        <TableCell className="whitespace-normal py-4 ps-5 sm:ps-6">
+                          <span className="block font-medium">{row.item}</span>
+                          <span className="mt-1 block text-xs leading-5 text-muted-foreground">
+                            {row.detail}
+                          </span>
+                        </TableCell>
+                        <TableCell className="pe-5 text-end sm:pe-6">
+                          <Badge variant={row.status === "Ready" ? "default" : "outline"}>
+                            {row.status === "Ready" && <Check aria-hidden="true" />}
+                            {row.status}
+                          </Badge>
+                        </TableCell>
+                      </TableRow>
+                    ))}
+                  </TableBody>
+                </Table>
+              </CardContent>
+              <Separator />
+              <CardContent className="flex items-center justify-between gap-4 px-5 py-4 sm:px-6">
+                <p className="text-xs text-muted-foreground">Need help connecting a provider?</p>
+                <Button
+                  render={
+                    <Link href={siteConfig.links.setupGuide} target="_blank" rel="noreferrer" />
+                  }
+                  size="sm"
+                  variant="ghost"
+                >
+                  Setup docs <ArrowUpRight aria-hidden="true" />
+                </Button>
+              </CardContent>
+            </Card>
+          </section>
+
+          <Card className="gap-4 border-dashed bg-muted/30 py-5 shadow-none">
+            <CardContent className="flex flex-col gap-4 px-5 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+              <div className="flex items-start gap-3">
+                <span className="grid size-9 shrink-0 place-items-center rounded-lg bg-background text-primary shadow-sm">
+                  <Settings2 aria-hidden="true" className="size-4" />
+                </span>
+                <div>
+                  <p className="text-sm font-medium">Make this foundation yours</p>
+                  <p className="mt-1 text-xs leading-5 text-muted-foreground">
+                    Configure environment values, review the architecture, and add only the UI
+                    components your product needs.
+                  </p>
+                </div>
+              </div>
+              <Button
+                render={
+                  <Link href={siteConfig.links.setupGuide} target="_blank" rel="noreferrer" />
+                }
+                size="sm"
+                variant="outline"
+              >
+                Get started <ArrowRight aria-hidden="true" />
+              </Button>
+            </CardContent>
+          </Card>
+
+          <footer className="flex flex-col gap-2 border-t pt-5 text-xs text-muted-foreground sm:flex-row sm:items-center sm:justify-between">
+            <span>{siteConfig.name} · Next.js application foundation</span>
+            <span className="inline-flex items-center gap-2">
+              <Check aria-hidden="true" className="size-3.5 text-primary" /> Built to be extended
+            </span>
+          </footer>
+        </main>
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/template/apps/web/src/app/layout.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import Script from "next/script";
+import "@clubedge/ui/globals.css";
+import { TooltipProvider } from "@clubedge/ui/components/tooltip";
+import { siteConfig } from "@/config/site";
+import { ThemeProvider } from "./theme-provider";
+
+const themeBootstrap = `try {
+  const saved = localStorage.getItem("clubedge-theme");
+  const theme = saved === "light" || saved === "dark"
+    ? saved
+    : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  document.documentElement.classList.toggle("dark", theme === "dark");
+  document.documentElement.style.colorScheme = theme;
+} catch {}
+`;
+
+export const metadata: Metadata = {
+  title: { default: siteConfig.name, template: `%s · ${siteConfig.name}` },
+  description: siteConfig.description,
+};
+
+export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <Script id="theme-bootstrap" strategy="beforeInteractive">
+          {themeBootstrap}
+        </Script>
+        <ThemeProvider>
+          <TooltipProvider>{children}</TooltipProvider>
+        </ThemeProvider>
+      </body>
+    </html>
+  );
+}

package/template/apps/web/src/app/login/_components/auth-form-controls.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { ArrowRight, Eye, EyeOff, Loader2 } from "lucide-react";
+import { useState, type ReactNode } from "react";
+import { useFormStatus } from "react-dom";
+
+import { Button } from "@clubedge/ui/components/button";
+import { Input } from "@clubedge/ui/components/input";
+import { Label } from "@clubedge/ui/components/label";
+
+export function PasswordField({ isSignUp }: { isSignUp: boolean }) {
+  const [visible, setVisible] = useState(false);
+  const { pending } = useFormStatus();
+
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="password">Password</Label>
+      <div className="relative">
+        <Input
+          aria-describedby={isSignUp ? "password-hint" : undefined}
+          autoComplete={isSignUp ? "new-password" : "current-password"}
+          className="h-11 pr-11"
+          disabled={pending}
+          id="password"
+          maxLength={128}
+          minLength={8}
+          name="password"
+          placeholder={isSignUp ? "Create a password" : "Enter your password"}
+          required
+          type={visible ? "text" : "password"}
+        />
+        <button
+          aria-label={visible ? "Hide password" : "Show password"}
+          aria-pressed={visible}
+          className="absolute inset-y-0 right-0 grid w-11 place-items-center rounded-r-md text-muted-foreground outline-none transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+          onClick={() => setVisible((v) => !v)}
+          type="button"
+        >
+          {visible ? (
+            <EyeOff aria-hidden="true" className="size-4" />
+          ) : (
+            <Eye aria-hidden="true" className="size-4" />
+          )}
+        </button>
+      </div>
+      {isSignUp && (
+        <p className="text-xs text-muted-foreground" id="password-hint">
+          Use at least 8 characters.
+        </p>
+      )}
+    </div>
+  );
+}
+
+export function EmailField() {
+  const { pending } = useFormStatus();
+
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="email">Email</Label>
+      <Input
+        autoComplete="email"
+        autoFocus
+        className="h-11"
+        disabled={pending}
+        id="email"
+        name="email"
+        placeholder="you@example.com"
+        required
+        type="email"
+      />
+    </div>
+  );
+}
+
+export function SubmitButton({ children, disabled }: { children: ReactNode; disabled?: boolean }) {
+  const { pending } = useFormStatus();
+
+  return (
+    <Button className="h-11 w-full justify-center" disabled={disabled || pending} type="submit">
+      {pending ? (
+        <Loader2 aria-hidden="true" className="animate-spin motion-reduce:animate-none" />
+      ) : null}
+      {children}
+      {!pending && <ArrowRight aria-hidden="true" />}
+    </Button>
+  );
+}

package/template/apps/web/src/app/login/page.tsx

@@ -0,0 +1,149 @@
+import { CircleAlert, Info, MailCheck } from "lucide-react";
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import { signIn, signUp } from "@/app/actions/auth";
+import { ClubedgeMark } from "@/components/branding/clubedge-mark";
+import { siteConfig } from "@/config/site";
+import { safeRedirectPath } from "@clubedge/core";
+import { loginUrl } from "@/lib/login-url";
+import { hasSupabaseAuthConfig } from "@/env/client";
+import { Card, CardContent } from "@clubedge/ui/components/card";
+
+import { EmailField, PasswordField, SubmitButton } from "./_components/auth-form-controls";
+
+type LoginPageProps = {
+  searchParams: Promise<{
+    error?: string;
+    mode?: string;
+    "check-email"?: string;
+    next?: string;
+  }>;
+};
+
+const errorMessages: Record<string, string> = {
+  "invalid-input": "Enter a valid email and a password with at least 8 characters.",
+  "invalid-credentials": "Those credentials could not be verified. Check your email and password.",
+  "signup-failed": "We could not create your account. Please check your details and try again.",
+  "auth-callback": "That sign-in link could not be verified. Request a new one.",
+  "rate-limited": "Too many attempts. Wait a minute and try again.",
+};
+
+type NoticeTone = "error" | "info" | "warning";
+
+const noticeStyles: Record<NoticeTone, string> = {
+  error: "border-destructive/30 bg-destructive/5 text-destructive",
+  info: "border-primary/30 bg-primary/5 text-foreground",
+  warning: "border-amber-500/30 bg-amber-500/5 text-foreground",
+};
+
+function Notice({
+  children,
+  icon,
+  role,
+  tone,
+}: {
+  children: ReactNode;
+  icon: ReactNode;
+  role: "alert" | "status";
+  tone: NoticeTone;
+}) {
+  return (
+    <div
+      className={`flex items-start gap-2.5 rounded-lg border px-3.5 py-3 text-sm leading-5 ${noticeStyles[tone]}`}
+      role={role}
+    >
+      <span aria-hidden="true" className="mt-0.5 shrink-0 [&>svg]:size-4">
+        {icon}
+      </span>
+      <div className="min-w-0">{children}</div>
+    </div>
+  );
+}
+
+export default async function LoginPage({ searchParams }: LoginPageProps) {
+  const params = await searchParams;
+  const isSignUp = params.mode === "signup";
+  const error = params.error ? errorMessages[params.error] : undefined;
+  const checkEmail = Boolean(params["check-email"]);
+  const next = safeRedirectPath(params.next);
+
+  return (
+    <main className="flex min-h-svh flex-col items-center bg-background px-4 py-10 sm:justify-center">
+      <div className="w-full max-w-[26rem]">
+        <header className="mb-8 flex flex-col items-center gap-4 text-center">
+          <Link
+            aria-label={`${siteConfig.name} home`}
+            className="rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            href="/"
+          >
+            <ClubedgeMark className="size-12 rounded-xl" />
+          </Link>
+          <div className="grid gap-1.5">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              {isSignUp ? "Create your account" : `Sign in to ${siteConfig.shortName}`}
+            </h1>
+            <p className="text-sm text-muted-foreground">
+              {isSignUp
+                ? "Enter your email and choose a password."
+                : "Welcome back. Enter your details to continue."}
+            </p>
+          </div>
+        </header>
+
+        <Card className="rounded-xl border-border/70 p-0 shadow-sm">
+          <CardContent className="grid gap-5 p-6 sm:p-8">
+            {!hasSupabaseAuthConfig && (
+              <Notice icon={<Info />} role="status" tone="warning">
+                Authentication is not configured yet. Add your Supabase URL and publishable key to{" "}
+                <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">
+                  apps/web/.env.local
+                </code>
+                .
+              </Notice>
+            )}
+            {error && (
+              <Notice icon={<CircleAlert />} role="alert" tone="error">
+                {error}
+              </Notice>
+            )}
+            {checkEmail && (
+              <Notice icon={<MailCheck />} role="status" tone="info">
+                Account created. Check your inbox for the confirmation link to finish signing up.
+              </Notice>
+            )}
+
+            <form action={isSignUp ? signUp : signIn} className="grid gap-5">
+              <input name="next" type="hidden" value={next} />
+              <EmailField />
+              <PasswordField isSignUp={isSignUp} />
+              <SubmitButton disabled={!hasSupabaseAuthConfig}>
+                {isSignUp ? "Create account" : "Sign in"}
+              </SubmitButton>
+            </form>
+          </CardContent>
+        </Card>
+
+        <p className="mt-6 text-center text-sm text-muted-foreground">
+          {isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
+          <Link
+            className="font-medium text-foreground underline-offset-4 hover:underline focus-visible:rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            href={loginUrl({ mode: isSignUp ? "signin" : "signup", next })}
+          >
+            {isSignUp ? "Sign in" : "Create one"}
+          </Link>
+        </p>
+      </div>
+
+      <footer className="mt-10 text-center text-xs text-muted-foreground sm:absolute sm:bottom-6">
+        <Link className="underline-offset-4 hover:underline" href="/">
+          Back to home
+        </Link>
+        <span aria-hidden="true" className="mx-2">
+          |
+        </span>
+        {siteConfig.name}, Apache-2.0
+      </footer>
+    </main>
+  );
+}