kofi-stack-template-generator 2.1.28 → 2.1.36

package/templates/admin/src/app/settings/page.tsx.hbs

@@ -0,0 +1,74 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'
+import { Button } from '@repo/ui/components/button'
+import { Input } from '@repo/ui/components/input'
+import { Label } from '@repo/ui/components/label'
+
+export default function SettingsPage() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
+        <p className="text-muted-foreground">
+          Configure application settings and preferences.
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        <Card>
+          <CardHeader>
+            <CardTitle>General Settings</CardTitle>
+            <CardDescription>Basic application configuration</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="app-name">Application Name</Label>
+              <Input id="app-name" defaultValue="{{projectName}}" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="support-email">Support Email</Label>
+              <Input id="support-email" type="email" placeholder="support@example.com" />
+            </div>
+            <Button>Save Changes</Button>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Security</CardTitle>
+            <CardDescription>Security and authentication settings</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium">Two-Factor Authentication</p>
+                <p className="text-sm text-muted-foreground">
+                  Require 2FA for all admin users
+                </p>
+              </div>
+              <Button variant="outline">Configure</Button>
+            </div>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="font-medium">Session Timeout</p>
+                <p className="text-sm text-muted-foreground">
+                  Auto logout after inactivity
+                </p>
+              </div>
+              <Button variant="outline">Configure</Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card className="border-destructive">
+          <CardHeader>
+            <CardTitle className="text-destructive">Danger Zone</CardTitle>
+            <CardDescription>Irreversible actions</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Button variant="destructive">Delete All Data</Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

package/templates/admin/src/app/users/page.tsx.hbs

@@ -0,0 +1,16 @@
+import { UserTable } from '@/components/user-table'
+
+export default function UsersPage() {
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Users</h1>
+        <p className="text-muted-foreground">
+          Manage users, roles, and permissions.
+        </p>
+      </div>
+
+      <UserTable />
+    </div>
+  )
+}

package/templates/admin/src/components/admin-sidebar.tsx.hbs

@@ -0,0 +1,51 @@
+'use client'
+
+import { cn } from '@repo/ui/lib/utils'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const navigation = [
+  { name: 'Dashboard', href: '/' },
+  { name: 'Users', href: '/users' },
+  { name: 'Analytics', href: '/analytics' },
+  { name: 'Settings', href: '/settings' },
+]
+
+export function AdminSidebar() {
+  const pathname = usePathname()
+
+  return (
+    <div className="flex h-screen w-64 flex-col border-r bg-card">
+      <div className="flex h-14 items-center border-b px-6">
+        <Link href="/" className="flex items-center gap-2 font-semibold">
+          <span>{{projectName}} Admin</span>
+        </Link>
+      </div>
+      <nav className="flex-1 space-y-1 p-4">
+        {navigation.map((item) => (
+          <Link
+            key={item.name}
+            href={item.href}
+            className={cn(
+              'flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors',
+              pathname === item.href
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+            )}
+          >
+            {item.name}
+          </Link>
+        ))}
+      </nav>
+      <div className="border-t p-4">
+        <Link
+          href="http://localhost:3001"
+          target="_blank"
+          className="flex items-center rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-muted hover:text-foreground"
+        >
+          Back to App
+        </Link>
+      </div>
+    </div>
+  )
+}

package/templates/admin/src/components/stats-cards.tsx.hbs

@@ -0,0 +1,28 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@repo/ui/components/card'
+
+const stats = [
+  { name: 'Total Users', value: '0', change: '+0%' },
+  { name: 'Active Sessions', value: '0', change: '+0%' },
+  { name: 'Total Revenue', value: '$0', change: '+0%' },
+  { name: 'Conversion Rate', value: '0%', change: '+0%' },
+]
+
+export function StatsCards() {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      {stats.map((stat) => (
+        <Card key={stat.name}>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">{stat.name}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stat.value}</div>
+            <p className="text-xs text-muted-foreground">
+              {stat.change} from last month
+            </p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

package/templates/admin/src/components/user-table.tsx.hbs

@@ -0,0 +1,65 @@
+'use client'
+
+import { Button } from '@repo/ui/components/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@repo/ui/components/card'
+
+// Placeholder user data
+const users = [
+  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'admin', status: 'active' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'user', status: 'active' },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'user', status: 'inactive' },
+]
+
+export function UserTable() {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <CardTitle>All Users</CardTitle>
+        <Button size="sm">Add User</Button>
+      </CardHeader>
+      <CardContent>
+        <div className="relative overflow-x-auto">
+          <table className="w-full text-sm text-left">
+            <thead className="text-xs text-muted-foreground uppercase bg-muted/50">
+              <tr>
+                <th className="px-6 py-3">Name</th>
+                <th className="px-6 py-3">Email</th>
+                <th className="px-6 py-3">Role</th>
+                <th className="px-6 py-3">Status</th>
+                <th className="px-6 py-3">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {users.map((user) => (
+                <tr key={user.id} className="border-b">
+                  <td className="px-6 py-4 font-medium">{user.name}</td>
+                  <td className="px-6 py-4">{user.email}</td>
+                  <td className="px-6 py-4">
+                    <span className="capitalize">{user.role}</span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <span
+                      className={`px-2 py-1 rounded-full text-xs ${
+                        user.status === 'active'
+                          ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
+                          : 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-200'
+                      }`}
+                    >
+                      {user.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-4">
+                    <div className="flex gap-2">
+                      <Button variant="ghost" size="sm">Edit</Button>
+                      <Button variant="ghost" size="sm" className="text-destructive">Ban</Button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/templates/admin/tsconfig.json.hbs

@@ -0,0 +1,15 @@
+{
+  "extends": "@repo/config-typescript/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@repo/ui": ["../../packages/ui/src"],
+      "@repo/ui/*": ["../../packages/ui/src/*"],
+      "@repo/backend": ["../../packages/backend"],
+      "@repo/backend/*": ["../../packages/backend/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/design-system/next.config.ts.hbs

@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  transpilePackages: ['@repo/ui'],
+}
+
+export default nextConfig

package/templates/design-system/package.json.hbs

@@ -0,0 +1,35 @@
+{
+  "name": "@repo/design-system",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "next dev --turbopack --port 3002",
+    "build": "next build",
+    "start": "next start",
+    "lint": "biome check .",
+    "lint:fix": "biome check --write .",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@repo/ui": "workspace:*",
+    "next": "^16.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "next-themes": "^0.4.6",
+{{#if (eq shadcn.iconLibrary "hugeicons")}}    "@hugeicons/react": "^0.3.0"
+{{/if}}{{#if (eq shadcn.iconLibrary "lucide")}}    "lucide-react": "^0.469.0"
+{{/if}}{{#if (eq shadcn.iconLibrary "tabler")}}    "@tabler/icons-react": "^3.31.0"
+{{/if}}{{#if (eq shadcn.iconLibrary "phosphor")}}    "@phosphor-icons/react": "^2.1.7"
+{{/if}}  },
+  "devDependencies": {
+    "@repo/config-typescript": "workspace:*",
+    "@types/node": "^20.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "postcss": "^8.4.0",
+    "typescript": "^5.0.0"
+  }
+}

package/templates/design-system/postcss.config.mjs.hbs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+
+export default config

package/templates/design-system/src/app/blocks/page.tsx.hbs

@@ -0,0 +1,140 @@
+import { Button } from '@repo/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'
+
+export default function BlocksPage() {
+  return (
+    <div className="container mx-auto max-w-6xl px-6 py-10 space-y-16">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold tracking-tight">Blocks</h1>
+        <p className="text-xl text-muted-foreground">
+          Pre-built marketing and application blocks.
+        </p>
+      </div>
+
+      {/* Hero Block */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold border-b pb-2">Hero Section</h2>
+        <div className="rounded-lg border bg-gradient-to-b from-background to-muted p-12 text-center">
+          <h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
+            Build something amazing
+          </h1>
+          <p className="mt-6 text-lg text-muted-foreground max-w-2xl mx-auto">
+            Start your next project with our powerful starter kit. Built with
+            the latest technologies and best practices.
+          </p>
+          <div className="mt-8 flex justify-center gap-4">
+            <Button size="lg">Get Started</Button>
+            <Button size="lg" variant="outline">Learn More</Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Features Block */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold border-b pb-2">Features Grid</h2>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <Card>
+            <CardHeader>
+              <CardTitle>Fast Development</CardTitle>
+              <CardDescription>
+                Get started quickly with pre-built components and templates.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Type Safe</CardTitle>
+              <CardDescription>
+                Full TypeScript support with strict type checking enabled.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Modern Stack</CardTitle>
+              <CardDescription>
+                Built with Next.js 16, React 19, and Tailwind CSS v4.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </div>
+      </section>
+
+      {/* CTA Block */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold border-b pb-2">Call to Action</h2>
+        <div className="rounded-lg border bg-primary p-12 text-center text-primary-foreground">
+          <h2 className="text-3xl font-bold">Ready to get started?</h2>
+          <p className="mt-4 text-lg opacity-90">
+            Join thousands of developers building with our platform.
+          </p>
+          <div className="mt-8">
+            <Button size="lg" variant="secondary">
+              Start Free Trial
+            </Button>
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Block */}
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold border-b pb-2">Pricing Cards</h2>
+        <div className="grid gap-6 md:grid-cols-3">
+          <Card>
+            <CardHeader>
+              <CardTitle>Starter</CardTitle>
+              <CardDescription>For individuals and small projects</CardDescription>
+              <div className="mt-4">
+                <span className="text-4xl font-bold">$0</span>
+                <span className="text-muted-foreground">/month</span>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-2 text-sm">
+                <li>Up to 3 projects</li>
+                <li>Basic analytics</li>
+                <li>Community support</li>
+              </ul>
+              <Button className="mt-6 w-full" variant="outline">Get Started</Button>
+            </CardContent>
+          </Card>
+          <Card className="border-primary">
+            <CardHeader>
+              <CardTitle>Pro</CardTitle>
+              <CardDescription>For growing teams</CardDescription>
+              <div className="mt-4">
+                <span className="text-4xl font-bold">$29</span>
+                <span className="text-muted-foreground">/month</span>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-2 text-sm">
+                <li>Unlimited projects</li>
+                <li>Advanced analytics</li>
+                <li>Priority support</li>
+              </ul>
+              <Button className="mt-6 w-full">Subscribe</Button>
+            </CardContent>
+          </Card>
+          <Card>
+            <CardHeader>
+              <CardTitle>Enterprise</CardTitle>
+              <CardDescription>For large organizations</CardDescription>
+              <div className="mt-4">
+                <span className="text-4xl font-bold">Custom</span>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <ul className="space-y-2 text-sm">
+                <li>Custom limits</li>
+                <li>Dedicated support</li>
+                <li>SLA guarantee</li>
+              </ul>
+              <Button className="mt-6 w-full" variant="outline">Contact Sales</Button>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+    </div>
+  )
+}

package/templates/design-system/src/app/colors/page.tsx.hbs

@@ -0,0 +1,34 @@
+import { ColorPalette } from '@/components/color-palette'
+
+export default function ColorsPage() {
+  return (
+    <div className="container mx-auto max-w-6xl px-6 py-10 space-y-8">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold tracking-tight">Color Palette</h1>
+        <p className="text-xl text-muted-foreground">
+          The color system for {{projectName}}. Click any swatch to copy the Tailwind class.
+        </p>
+      </div>
+
+      <div className="rounded-lg border bg-card p-6">
+        <h2 className="text-lg font-semibold mb-4">Usage</h2>
+        <p className="text-muted-foreground mb-4">
+          Colors are defined as CSS variables and mapped to Tailwind utility classes.
+          Use semantic color names for consistency across themes.
+        </p>
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="rounded-md bg-muted p-4">
+            <p className="text-sm font-mono text-muted-foreground mb-2">Background</p>
+            <code className="text-sm">className=&quot;bg-primary text-primary-foreground&quot;</code>
+          </div>
+          <div className="rounded-md bg-muted p-4">
+            <p className="text-sm font-mono text-muted-foreground mb-2">Text</p>
+            <code className="text-sm">className=&quot;text-muted-foreground&quot;</code>
+          </div>
+        </div>
+      </div>
+
+      <ColorPalette />
+    </div>
+  )
+}

package/templates/design-system/src/app/components/page.tsx.hbs

@@ -0,0 +1,110 @@
+import { Button } from '@repo/ui/components/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@repo/ui/components/card'
+import { Input } from '@repo/ui/components/input'
+import { Label } from '@repo/ui/components/label'
+import { Badge } from '@repo/ui/components/badge'
+import { Separator } from '@repo/ui/components/separator'
+
+export default function ComponentsPage() {
+  return (
+    <div className="container mx-auto max-w-6xl px-6 py-10 space-y-12">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold tracking-tight">Components</h1>
+        <p className="text-xl text-muted-foreground">
+          UI components from the shared @repo/ui package.
+        </p>
+      </div>
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Buttons</h2>
+        <div className="flex flex-wrap gap-4">
+          <Button>Default</Button>
+          <Button variant="secondary">Secondary</Button>
+          <Button variant="destructive">Destructive</Button>
+          <Button variant="outline">Outline</Button>
+          <Button variant="ghost">Ghost</Button>
+          <Button variant="link">Link</Button>
+        </div>
+        <div className="flex flex-wrap gap-4">
+          <Button size="sm">Small</Button>
+          <Button size="default">Default</Button>
+          <Button size="lg">Large</Button>
+        </div>
+      </section>
+
+      <Separator />
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Cards</h2>
+        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <Card>
+            <CardHeader>
+              <CardTitle>Card Title</CardTitle>
+              <CardDescription>Card description goes here.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p>Card content with some example text.</p>
+            </CardContent>
+            <CardFooter>
+              <Button size="sm">Action</Button>
+            </CardFooter>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Another Card</CardTitle>
+              <CardDescription>Different content example.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p>More card content here.</p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle>Third Card</CardTitle>
+              <CardDescription>Yet another card example.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <p>Additional content for this card.</p>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      <Separator />
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Form Elements</h2>
+        <div className="grid gap-6 md:grid-cols-2">
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input id="email" type="email" placeholder="Enter your email" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Password</Label>
+              <Input id="password" type="password" placeholder="Enter password" />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="disabled">Disabled Input</Label>
+              <Input id="disabled" disabled placeholder="Disabled input" />
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Separator />
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Badges</h2>
+        <div className="flex flex-wrap gap-4">
+          <Badge>Default</Badge>
+          <Badge variant="secondary">Secondary</Badge>
+          <Badge variant="destructive">Destructive</Badge>
+          <Badge variant="outline">Outline</Badge>
+        </div>
+      </section>
+    </div>
+  )
+}

package/templates/design-system/src/app/globals.css.hbs

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@repo/ui/styles.css";

package/templates/design-system/src/app/layout.tsx.hbs

@@ -0,0 +1,46 @@
+import type { Metadata } from 'next'
+import { ThemeProvider } from 'next-themes'
+import './globals.css'
+
+export const metadata: Metadata = {
+  title: '{{projectName}} Design System',
+  description: 'Design system documentation and component showcase',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className="min-h-screen bg-background font-sans antialiased">
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <div className="relative flex min-h-screen flex-col">
+            <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+              <div className="container flex h-14 items-center">
+                <div className="mr-4 flex">
+                  <a href="/" className="mr-6 flex items-center space-x-2">
+                    <span className="font-bold">{{projectName}} Design System</span>
+                  </a>
+                  <nav className="flex items-center space-x-6 text-sm font-medium">
+                    <a href="/colors" className="transition-colors hover:text-foreground/80 text-foreground/60">Colors</a>
+                    <a href="/typography" className="transition-colors hover:text-foreground/80 text-foreground/60">Typography</a>
+                    <a href="/components" className="transition-colors hover:text-foreground/80 text-foreground/60">Components</a>
+                    <a href="/blocks" className="transition-colors hover:text-foreground/80 text-foreground/60">Blocks</a>
+                  </nav>
+                </div>
+              </div>
+            </header>
+            <main className="flex-1">{children}</main>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}