@getjack/jack 0.1.32 → 0.1.34

package/templates/nextjs-shadcn/app/globals.css

@@ -0,0 +1,126 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
+	--font-mono: var(--font-geist-mono), ui-monospace, monospace;
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--radius-2xl: calc(var(--radius) + 8px);
+	--radius-3xl: calc(var(--radius) + 12px);
+	--radius-4xl: calc(var(--radius) + 16px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.141 0.005 285.823);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.141 0.005 285.823);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.141 0.005 285.823);
+	--primary: oklch(0.21 0.006 285.885);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.967 0.001 286.375);
+	--secondary-foreground: oklch(0.21 0.006 285.885);
+	--muted: oklch(0.967 0.001 286.375);
+	--muted-foreground: oklch(0.552 0.016 285.938);
+	--accent: oklch(0.967 0.001 286.375);
+	--accent-foreground: oklch(0.21 0.006 285.885);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.92 0.004 286.32);
+	--input: oklch(0.92 0.004 286.32);
+	--ring: oklch(0.705 0.015 286.067);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.141 0.005 285.823);
+	--sidebar-primary: oklch(0.21 0.006 285.885);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.967 0.001 286.375);
+	--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+	--sidebar-border: oklch(0.92 0.004 286.32);
+	--sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+	--background: oklch(0.141 0.005 285.823);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.21 0.006 285.885);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.21 0.006 285.885);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.92 0.004 286.32);
+	--primary-foreground: oklch(0.21 0.006 285.885);
+	--secondary: oklch(0.274 0.006 286.033);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.274 0.006 286.033);
+	--muted-foreground: oklch(0.705 0.015 286.067);
+	--accent: oklch(0.274 0.006 286.033);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.552 0.016 285.938);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.21 0.006 285.885);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.274 0.006 286.033);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/templates/nextjs-shadcn/app/health/route.ts

@@ -0,0 +1,3 @@
+export function GET() {
+	return Response.json({ status: "ok", timestamp: Date.now() });
+}

package/templates/nextjs-shadcn/app/layout.tsx

@@ -0,0 +1,24 @@
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { GeistMono } from "geist/font/mono";
+import { GeistSans } from "geist/font/sans";
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+	title: "jack-template",
+	description: "Next.js + shadcn/ui app built with jack",
+};
+
+export default function RootLayout({
+	children,
+}: {
+	children: React.ReactNode;
+}) {
+	return (
+		<html lang="en" className={`${GeistSans.variable} ${GeistMono.variable}`}>
+			<body className="font-sans antialiased">
+				<TooltipProvider>{children}</TooltipProvider>
+			</body>
+		</html>
+	);
+}

package/templates/nextjs-shadcn/app/login/page.tsx

@@ -0,0 +1,19 @@
+import { GalleryVerticalEnd } from "lucide-react"
+
+import { LoginForm } from "@/components/login-form"
+
+export default function LoginPage() {
+  return (
+    <div className="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
+      <div className="flex w-full max-w-sm flex-col gap-6">
+        <a href="#" className="flex items-center gap-2 self-center font-medium">
+          <div className="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md">
+            <GalleryVerticalEnd className="size-4" />
+          </div>
+          Acme Inc.
+        </a>
+        <LoginForm />
+      </div>
+    </div>
+  )
+}

package/templates/nextjs-shadcn/app/page.tsx

@@ -0,0 +1,180 @@
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import {
+	ArrowRight,
+	Database,
+	LayoutDashboard,
+	LogIn,
+	Palette,
+	PanelLeft,
+	Zap,
+} from "lucide-react";
+import Link from "next/link";
+import { ComponentShowcase } from "./showcase";
+
+export default function Home() {
+	return (
+		<div className="min-h-screen bg-background">
+			<header className="border-b">
+				<div className="container mx-auto flex h-14 items-center justify-between px-6">
+					<div className="flex items-center gap-2 font-semibold">
+						<div className="flex size-7 items-center justify-center rounded-md bg-primary text-primary-foreground text-xs">
+							J
+						</div>
+						jack-template
+					</div>
+					<nav className="flex items-center gap-1">
+						<Button variant="ghost" size="sm" asChild>
+							<Link href="/dashboard">Dashboard</Link>
+						</Button>
+						<Button variant="ghost" size="sm" asChild>
+							<Link href="/login">Login</Link>
+						</Button>
+					</nav>
+				</div>
+			</header>
+
+			<main className="container mx-auto px-6 py-16">
+				<section className="mx-auto max-w-2xl text-center">
+					<Badge variant="secondary" className="mb-4">
+						Next.js + shadcn/ui + D1
+					</Badge>
+					<h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
+						Start building with
+						<br />
+						<span className="text-muted-foreground">57 components</span> ready to go
+					</h1>
+					<p className="mt-4 text-lg text-muted-foreground">
+						All shadcn/ui components pre-installed. D1 database included. Just ship it.
+					</p>
+					<div className="mt-8 flex items-center justify-center gap-3">
+						<Button size="lg" asChild>
+							<Link href="/dashboard">
+								View Dashboard
+								<ArrowRight className="ml-2 size-4" />
+							</Link>
+						</Button>
+						<Button size="lg" variant="outline" asChild>
+							<Link href="/login">Login Page</Link>
+						</Button>
+					</div>
+				</section>
+
+				<Separator className="my-16" />
+
+				<section className="grid gap-4 md:grid-cols-3">
+					<Link href="/dashboard" className="group">
+						<Card className="h-full transition-shadow group-hover:shadow-lg">
+							<CardHeader>
+								<div className="flex items-center gap-3">
+									<div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+										<LayoutDashboard className="size-5 text-primary" />
+									</div>
+									<div>
+										<CardTitle className="text-base">Dashboard</CardTitle>
+										<CardDescription>Sidebar, charts, data table</CardDescription>
+									</div>
+								</div>
+							</CardHeader>
+							<CardContent>
+								<p className="text-sm text-muted-foreground">
+									Full dashboard layout with collapsible sidebar, interactive charts, and sortable
+									data table.
+								</p>
+							</CardContent>
+						</Card>
+					</Link>
+
+					<Link href="/login" className="group">
+						<Card className="h-full transition-shadow group-hover:shadow-lg">
+							<CardHeader>
+								<div className="flex items-center gap-3">
+									<div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+										<LogIn className="size-5 text-primary" />
+									</div>
+									<div>
+										<CardTitle className="text-base">Login</CardTitle>
+										<CardDescription>Auth form with socials</CardDescription>
+									</div>
+								</div>
+							</CardHeader>
+							<CardContent>
+								<p className="text-sm text-muted-foreground">
+									Login form with email/password, social providers, and responsive layout.
+								</p>
+							</CardContent>
+						</Card>
+					</Link>
+
+					<Card className="h-full">
+						<CardHeader>
+							<div className="flex items-center gap-3">
+								<div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
+									<PanelLeft className="size-5 text-primary" />
+								</div>
+								<div>
+									<CardTitle className="text-base">Sidebar</CardTitle>
+									<CardDescription>Collapsible navigation</CardDescription>
+								</div>
+							</div>
+						</CardHeader>
+						<CardContent>
+							<p className="text-sm text-muted-foreground">
+								Multi-level sidebar with team switcher, project nav, and user menu.
+							</p>
+						</CardContent>
+					</Card>
+				</section>
+
+				<Separator className="my-16" />
+
+				<section>
+					<h2 className="mb-8 text-center text-2xl font-semibold">Component Preview</h2>
+					<ComponentShowcase />
+				</section>
+
+				<Separator className="my-16" />
+
+				<section className="mx-auto max-w-2xl">
+					<h2 className="mb-8 text-center text-2xl font-semibold">What&apos;s Included</h2>
+					<div className="grid gap-4 sm:grid-cols-3">
+						<div className="flex flex-col items-center gap-2 text-center">
+							<div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
+								<Palette className="size-6 text-primary" />
+							</div>
+							<h3 className="font-medium">57 Components</h3>
+							<p className="text-sm text-muted-foreground">
+								Every shadcn/ui component, ready to import
+							</p>
+						</div>
+						<div className="flex flex-col items-center gap-2 text-center">
+							<div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
+								<Database className="size-6 text-primary" />
+							</div>
+							<h3 className="font-medium">D1 Database</h3>
+							<p className="text-sm text-muted-foreground">
+								SQLite database with global replication
+							</p>
+						</div>
+						<div className="flex flex-col items-center gap-2 text-center">
+							<div className="flex size-12 items-center justify-center rounded-xl bg-primary/10">
+								<Zap className="size-6 text-primary" />
+							</div>
+							<h3 className="font-medium">Edge SSR</h3>
+							<p className="text-sm text-muted-foreground">Server-rendered globally via OpenNext</p>
+						</div>
+					</div>
+				</section>
+			</main>
+
+			<footer className="border-t py-6">
+				<p className="text-center text-sm text-muted-foreground">
+					Built with jack. Ship it with{" "}
+					<code className="rounded bg-muted px-1 py-0.5">jack ship</code>
+				</p>
+			</footer>
+		</div>
+	);
+}