@clubedge/create-clubedge-app 0.3.0 → 0.4.0

package/template/apps/start/src/routes/dashboard.tsx

@@ -0,0 +1,351 @@
+import {
+  Activity,
+  ArrowRight,
+  ArrowUpRight,
+  Blocks,
+  Check,
+  CircleDashed,
+  Database,
+  Github,
+  LockKeyhole,
+  Settings2,
+  ShieldCheck,
+  Workflow,
+} from "lucide-react";
+import { Link, createFileRoute } from "@tanstack/react-router";
+
+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.functions";
+import { AccountButton } from "@/components/dashboard/account-button";
+import { AppSidebar } from "@/components/dashboard/app-sidebar";
+import { ThemeToggle } from "@/components/theme/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 const Route = createFileRoute("/dashboard")({
+  loader: () => getPageUser({ data: { pathname: "/dashboard" } }),
+  component: DashboardPage,
+});
+
+function DashboardPage() {
+  const user = Route.useLoaderData();
+
+  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 to="/" />}>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={<a 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={<a 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">
+                  <a
+                    className="inline-flex items-center gap-1 text-primary hover:underline"
+                    href="/api/health"
+                  >
+                    Check liveness <ArrowUpRight aria-hidden="true" className="size-3" />
+                  </a>
+                </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={<a 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={<a 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} · TanStack Start 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/start/src/routes/index.tsx

@@ -0,0 +1,233 @@
+import { ArrowRight, ArrowUpRight, Github, LayoutDashboard } from "lucide-react";
+import { Link, createFileRoute } from "@tanstack/react-router";
+
+import { Button } from "@clubedge/ui/components/button";
+import { ClubedgeMark } from "@/components/branding/clubedge-mark";
+import { CopyCommand } from "@/components/landing/copy-command";
+import { siteConfig } from "@/config/site";
+import { ThemeToggle } from "@/components/theme/theme-toggle";
+
+const REPO_URL = siteConfig.links.repository;
+const SETUP_URL = siteConfig.links.setupGuide;
+const CREATE_COMMAND = "pnpm dlx @clubedge/create-clubedge-app my-app";
+
+const included = [
+  {
+    name: "TanStack Start",
+    detail: "A full-stack React app with type-safe routing, server functions, and streaming SSR.",
+  },
+  {
+    name: "Supabase Auth",
+    detail:
+      "Email and password sign-in, with sessions verified on the server and stored in secure cookies.",
+  },
+  {
+    name: "Drizzle and PostgreSQL",
+    detail: "Typed data access that you can extend or swap for your own infrastructure.",
+  },
+  {
+    name: "Base UI design system",
+    detail: "Shared, accessible components in @clubedge/ui, used across the whole repo.",
+  },
+  {
+    name: "TypeScript",
+    detail: "Typed from the database layer through to the UI.",
+  },
+  {
+    name: "Dashboard",
+    detail: "A starting point for your product, ready to open at /dashboard.",
+  },
+];
+
+const steps = [
+  "Create your project with the command above.",
+  "Add your Supabase URL and publishable key to apps/web/.env.local.",
+  "Start the app, create an account, and sign in.",
+];
+
+export const Route = createFileRoute("/")({
+  component: LandingPage,
+});
+
+function LandingPage() {
+  return (
+    <div className="flex min-h-svh flex-col">
+      <header className="sticky top-0 z-20 border-b bg-background/85 backdrop-blur-xl">
+        <nav
+          aria-label="Main navigation"
+          className="mx-auto flex h-16 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8"
+        >
+          <Link
+            aria-label={`${siteConfig.name} home`}
+            className="flex shrink-0 items-center gap-2.5 rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            to="/"
+          >
+            <ClubedgeMark alt="" className="size-9 rounded-xl" priority />
+            <span className="hidden text-sm font-semibold tracking-tight min-[380px]:inline">
+              {siteConfig.name}
+            </span>
+          </Link>
+
+          <div className="hidden items-center gap-6 text-sm text-muted-foreground md:flex">
+            <a className="transition-colors hover:text-foreground" href="#stack">
+              Stack
+            </a>
+            <a
+              className="inline-flex items-center gap-1 transition-colors hover:text-foreground"
+              href={SETUP_URL}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Documentation <ArrowUpRight aria-hidden="true" className="size-3.5" />
+            </a>
+            <a
+              className="transition-colors hover:text-foreground"
+              href={REPO_URL}
+              rel="noreferrer"
+              target="_blank"
+            >
+              GitHub
+            </a>
+          </div>
+
+          <div className="flex shrink-0 items-center gap-2 sm:gap-3">
+            <ThemeToggle />
+            <Button
+              aria-label="Go to dashboard"
+              className="sm:hidden"
+              render={<Link to="/dashboard" />}
+              size="icon"
+              variant="ghost"
+            >
+              <LayoutDashboard aria-hidden="true" />
+            </Button>
+            <Button
+              className="hidden sm:inline-flex"
+              render={<Link to="/dashboard" />}
+              size="sm"
+              variant="ghost"
+            >
+              Dashboard
+            </Button>
+            <Button render={<Link to="/login" />} size="sm">
+              Sign in
+            </Button>
+          </div>
+        </nav>
+      </header>
+
+      <main className="flex-1">
+        <section className="mx-auto w-full max-w-6xl px-4 pb-16 pt-16 sm:px-6 sm:pb-24 sm:pt-24 lg:px-8">
+          <div className="max-w-3xl">
+            <h1 className="text-balance text-4xl font-semibold tracking-tight sm:text-5xl lg:text-6xl">
+              Start with the foundation. Build what matters.
+            </h1>
+            <p className="mt-6 max-w-2xl text-pretty text-base leading-7 text-muted-foreground sm:text-lg sm:leading-8">
+              A modular TanStack Start starter with a shared Base UI design system, typed data
+              access, and replaceable infrastructure. Spend your time on the product, not the setup.
+            </p>
+
+            <div className="mt-8 max-w-xl">
+              <CopyCommand command={CREATE_COMMAND} />
+            </div>
+
+            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+              <Button className="h-11 px-5" render={<Link to="/dashboard" />}>
+                Explore the dashboard <ArrowRight aria-hidden="true" />
+              </Button>
+              <Button
+                className="h-11 px-5"
+                render={<a href={SETUP_URL} rel="noreferrer" target="_blank" />}
+                variant="outline"
+              >
+                Read the setup guide <ArrowUpRight aria-hidden="true" />
+              </Button>
+            </div>
+          </div>
+        </section>
+
+        <section
+          aria-labelledby="stack-heading"
+          className="scroll-mt-16 border-t bg-muted/30"
+          id="stack"
+        >
+          <div className="mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
+            <h2 className="text-2xl font-semibold tracking-tight" id="stack-heading">
+              What you get
+            </h2>
+            <p className="mt-2 max-w-xl text-sm leading-6 text-muted-foreground">
+              Every layer is wired together and replaceable, so you can keep what fits and change
+              the rest.
+            </p>
+
+            <dl className="mt-10 grid gap-px overflow-hidden rounded-xl border bg-border sm:grid-cols-2 lg:grid-cols-3">
+              {included.map((item) => (
+                <div className="bg-background p-6" key={item.name}>
+                  <dt className="text-sm font-semibold">{item.name}</dt>
+                  <dd className="mt-2 text-sm leading-6 text-muted-foreground">{item.detail}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
+        </section>
+
+        <section
+          aria-labelledby="start-heading"
+          className="mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8"
+        >
+          <h2 className="text-2xl font-semibold tracking-tight" id="start-heading">
+            Up and running in three steps
+          </h2>
+          <ol className="mt-8 grid max-w-2xl gap-5">
+            {steps.map((step, index) => (
+              <li className="flex items-start gap-4" key={step}>
+                <span
+                  aria-hidden="true"
+                  className="grid size-7 shrink-0 place-items-center rounded-full border text-xs font-medium text-muted-foreground"
+                >
+                  {index + 1}
+                </span>
+                <p className="pt-0.5 text-sm leading-6">{step}</p>
+              </li>
+            ))}
+          </ol>
+          <div className="mt-8">
+            <Button
+              render={<a href={SETUP_URL} rel="noreferrer" target="_blank" />}
+              variant="outline"
+            >
+              Read the full setup guide <ArrowUpRight aria-hidden="true" />
+            </Button>
+          </div>
+        </section>
+      </main>
+
+      <footer className="border-t">
+        <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 px-4 py-5 text-xs text-muted-foreground sm:flex-row sm:px-6 lg:px-8">
+          <span>
+            © {new Date().getFullYear()} {siteConfig.name}. Licensed under Apache-2.0.
+          </span>
+          <div className="flex items-center gap-5">
+            <a
+              className="transition-colors hover:text-foreground"
+              href={SETUP_URL}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Documentation
+            </a>
+            <a
+              className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
+              href={REPO_URL}
+              rel="noreferrer"
+              target="_blank"
+            >
+              <Github aria-hidden="true" className="size-3.5" />
+              Contribute on GitHub
+            </a>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+}