kofi-stack-template-generator 2.1.27 → 2.1.36

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>
+  )
+}

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

@@ -0,0 +1,65 @@
+import { Card, CardDescription, CardHeader, CardTitle } from '@repo/ui/components/card'
+import { Separator } from '@repo/ui/components/separator'
+
+export default function Home() {
+  return (
+    <main className="container mx-auto max-w-4xl px-6 py-16">
+      <header className="mb-12 text-center">
+        <h1 className="text-4xl font-bold tracking-tight text-foreground">
+          Design System & Blocks
+        </h1>
+        <p className="mt-4 text-lg text-muted-foreground max-w-2xl mx-auto">
+          Explore the component library and design tokens for {{projectName}}.
+        </p>
+      </header>
+
+      <Separator className="mb-12" />
+
+      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
+        <a href="/colors" className="group">
+          <Card className="h-full transition-all hover:border-primary/50 hover:shadow-md">
+            <CardHeader>
+              <CardTitle className="text-xl">Colors</CardTitle>
+              <CardDescription className="text-base">
+                View the color palette and brand colors.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </a>
+
+        <a href="/typography" className="group">
+          <Card className="h-full transition-all hover:border-primary/50 hover:shadow-md">
+            <CardHeader>
+              <CardTitle className="text-xl">Typography</CardTitle>
+              <CardDescription className="text-base">
+                Typography scale and font styles.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </a>
+
+        <a href="/components" className="group">
+          <Card className="h-full transition-all hover:border-primary/50 hover:shadow-md">
+            <CardHeader>
+              <CardTitle className="text-xl">Components</CardTitle>
+              <CardDescription className="text-base">
+                View all shadcn UI components.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </a>
+
+        <a href="/blocks" className="group">
+          <Card className="h-full transition-all hover:border-primary/50 hover:shadow-md">
+            <CardHeader>
+              <CardTitle className="text-xl">Blocks</CardTitle>
+              <CardDescription className="text-base">
+                Pre-built marketing blocks.
+              </CardDescription>
+            </CardHeader>
+          </Card>
+        </a>
+      </div>
+    </main>
+  )
+}

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

@@ -0,0 +1,112 @@
+export default function TypographyPage() {
+  return (
+    <div className="container mx-auto max-w-4xl px-6 py-10 space-y-12">
+      <div className="space-y-4">
+        <h1 className="text-4xl font-bold tracking-tight">Typography</h1>
+        <p className="text-xl text-muted-foreground">
+          Typography scale and text styles for {{projectName}}.
+        </p>
+      </div>
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Headings</h2>
+        <div className="space-y-4">
+          <div className="flex items-baseline gap-4">
+            <span className="text-sm text-muted-foreground w-20">h1</span>
+            <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+              Heading One
+            </h1>
+          </div>
+          <div className="flex items-baseline gap-4">
+            <span className="text-sm text-muted-foreground w-20">h2</span>
+            <h2 className="scroll-m-20 text-3xl font-semibold tracking-tight">
+              Heading Two
+            </h2>
+          </div>
+          <div className="flex items-baseline gap-4">
+            <span className="text-sm text-muted-foreground w-20">h3</span>
+            <h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">
+              Heading Three
+            </h3>
+          </div>
+          <div className="flex items-baseline gap-4">
+            <span className="text-sm text-muted-foreground w-20">h4</span>
+            <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+              Heading Four
+            </h4>
+          </div>
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Body Text</h2>
+        <div className="space-y-4">
+          <div>
+            <span className="text-sm text-muted-foreground">Large</span>
+            <p className="text-lg text-muted-foreground">
+              The quick brown fox jumps over the lazy dog. This is large body text.
+            </p>
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground">Default</span>
+            <p className="leading-7">
+              The quick brown fox jumps over the lazy dog. This is default body text with proper line height for readability.
+            </p>
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground">Small</span>
+            <p className="text-sm text-muted-foreground">
+              The quick brown fox jumps over the lazy dog. This is small text.
+            </p>
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground">Muted</span>
+            <p className="text-sm text-muted-foreground">
+              The quick brown fox jumps over the lazy dog. This is muted text for secondary content.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Inline Styles</h2>
+        <div className="space-y-4">
+          <p>
+            This is <strong>bold text</strong> for emphasis.
+          </p>
+          <p>
+            This is <em>italic text</em> for emphasis.
+          </p>
+          <p>
+            This is <code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">inline code</code> for technical terms.
+          </p>
+          <p>
+            This is a <a href="#" className="font-medium text-primary underline underline-offset-4">link</a> for navigation.
+          </p>
+        </div>
+      </section>
+
+      <section className="space-y-6">
+        <h2 className="text-2xl font-semibold border-b pb-2">Lists</h2>
+        <div className="grid gap-8 md:grid-cols-2">
+          <div>
+            <span className="text-sm text-muted-foreground mb-2 block">Unordered List</span>
+            <ul className="my-6 ml-6 list-disc [&>li]:mt-2">
+              <li>First item in the list</li>
+              <li>Second item in the list</li>
+              <li>Third item in the list</li>
+            </ul>
+          </div>
+          <div>
+            <span className="text-sm text-muted-foreground mb-2 block">Ordered List</span>
+            <ol className="my-6 ml-6 list-decimal [&>li]:mt-2">
+              <li>First numbered item</li>
+              <li>Second numbered item</li>
+              <li>Third numbered item</li>
+            </ol>
+          </div>
+        </div>
+      </section>
+    </div>
+  )
+}

package/templates/design-system/src/components/color-palette.tsx.hbs

@@ -0,0 +1,117 @@
+'use client'
+
+import { cn } from '@repo/ui/lib/utils'
+import { useState } from 'react'
+
+interface ColorSwatchProps {
+  name: string
+  variable: string
+  className: string
+  textClassName?: string
+}
+
+function ColorSwatch({ name, variable, className, textClassName }: ColorSwatchProps) {
+  const [copied, setCopied] = useState(false)
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(variable)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <button type="button" onClick={copyToClipboard} className="group text-left w-full">
+      <div
+        className={cn(
+          'h-20 rounded-lg border flex items-end justify-between p-3 transition-all group-hover:scale-[1.02] group-hover:shadow-md',
+          className
+        )}
+      >
+        <span className={cn('text-xs font-medium', textClassName)}>
+          {copied ? 'Copied!' : name}
+        </span>
+      </div>
+      <p className="mt-2 text-xs text-muted-foreground font-mono">{variable}</p>
+    </button>
+  )
+}
+
+interface ColorGroupProps {
+  title: string
+  colors: ColorSwatchProps[]
+}
+
+function ColorGroup({ title, colors }: ColorGroupProps) {
+  return (
+    <div className="space-y-4">
+      <h3 className="text-lg font-semibold">{title}</h3>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        {colors.map((color) => (
+          <ColorSwatch key={color.variable} {...color} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export function ColorPalette() {
+  const colorGroups: ColorGroupProps[] = [
+    {
+      title: 'Base Colors',
+      colors: [
+        { name: 'Background', variable: 'bg-background', className: 'bg-background', textClassName: 'text-foreground' },
+        { name: 'Foreground', variable: 'bg-foreground', className: 'bg-foreground', textClassName: 'text-background' },
+        { name: 'Card', variable: 'bg-card', className: 'bg-card', textClassName: 'text-card-foreground' },
+        { name: 'Popover', variable: 'bg-popover', className: 'bg-popover', textClassName: 'text-popover-foreground' },
+      ],
+    },
+    {
+      title: 'Brand Colors',
+      colors: [
+        { name: 'Primary', variable: 'bg-primary', className: 'bg-primary', textClassName: 'text-primary-foreground' },
+        { name: 'Primary FG', variable: 'bg-primary-foreground', className: 'bg-primary-foreground', textClassName: 'text-primary' },
+        { name: 'Secondary', variable: 'bg-secondary', className: 'bg-secondary', textClassName: 'text-secondary-foreground' },
+        { name: 'Secondary FG', variable: 'bg-secondary-foreground', className: 'bg-secondary-foreground', textClassName: 'text-secondary' },
+        { name: 'Accent', variable: 'bg-accent', className: 'bg-accent', textClassName: 'text-accent-foreground' },
+      ],
+    },
+    {
+      title: 'Semantic Colors',
+      colors: [
+        { name: 'Muted', variable: 'bg-muted', className: 'bg-muted', textClassName: 'text-muted-foreground' },
+        { name: 'Muted FG', variable: 'bg-muted-foreground', className: 'bg-muted-foreground', textClassName: 'text-muted' },
+        { name: 'Destructive', variable: 'bg-destructive', className: 'bg-destructive', textClassName: 'text-destructive-foreground' },
+        { name: 'Border', variable: 'bg-border', className: 'bg-border', textClassName: 'text-foreground' },
+        { name: 'Ring', variable: 'bg-ring', className: 'bg-ring', textClassName: 'text-background' },
+      ],
+    },
+    {
+      title: 'Chart Colors',
+      colors: [
+        { name: 'Chart 1', variable: 'bg-chart-1', className: 'bg-chart-1', textClassName: 'text-white' },
+        { name: 'Chart 2', variable: 'bg-chart-2', className: 'bg-chart-2', textClassName: 'text-white' },
+        { name: 'Chart 3', variable: 'bg-chart-3', className: 'bg-chart-3', textClassName: 'text-white' },
+        { name: 'Chart 4', variable: 'bg-chart-4', className: 'bg-chart-4', textClassName: 'text-foreground' },
+        { name: 'Chart 5', variable: 'bg-chart-5', className: 'bg-chart-5', textClassName: 'text-foreground' },
+      ],
+    },
+    {
+      title: 'Sidebar Colors',
+      colors: [
+        { name: 'Sidebar', variable: 'bg-sidebar', className: 'bg-sidebar', textClassName: 'text-sidebar-foreground' },
+        { name: 'Sidebar FG', variable: 'bg-sidebar-foreground', className: 'bg-sidebar-foreground', textClassName: 'text-sidebar' },
+        { name: 'Sidebar Primary', variable: 'bg-sidebar-primary', className: 'bg-sidebar-primary', textClassName: 'text-sidebar-primary-foreground' },
+        { name: 'Sidebar Accent', variable: 'bg-sidebar-accent', className: 'bg-sidebar-accent', textClassName: 'text-sidebar-accent-foreground' },
+        { name: 'Sidebar Border', variable: 'bg-sidebar-border', className: 'bg-sidebar-border', textClassName: 'text-sidebar-foreground' },
+      ],
+    },
+  ]
+
+  return (
+    <div className="space-y-12">
+      {colorGroups.map((group) => (
+        <ColorGroup key={group.title} {...group} />
+      ))}
+    </div>
+  )
+}

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

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

package/templates/marketing/nextjs/package.json.hbs

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack -p 3001",
+    "dev": "next dev --turbopack --port 3000",
     "build": "next build",
     "start": "next start",
     "lint": "biome check .",

package/templates/marketing/payload/package.json.hbs

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3001",
+    "dev": "next dev --port 3000",
     "build": "next build",
     "start": "next start",
     "lint": "biome check .",

package/templates/marketing/payload/src/Footer/config.ts.hbs

@@ -0,0 +1,178 @@
+import type { GlobalConfig } from "payload"
+
+import { link } from "@/fields/link"
+import { revalidateFooter } from "./hooks/revalidateFooter"
+
+export const Footer: GlobalConfig = {
+  slug: "footer",
+  access: {
+    read: () => true,
+  },
+  fields: [
+    // Link Columns - organized groups of links
+    {
+      name: "columns",
+      type: "array",
+      label: "Link Columns",
+      maxRows: 5,
+      admin: {
+        initCollapsed: true,
+        description: "Add columns of links (e.g., Solutions, Resources, Company)",
+      },
+      fields: [
+        {
+          name: "title",
+          type: "text",
+          required: true,
+          label: "Column Title",
+        },
+        {
+          name: "links",
+          type: "array",
+          label: "Links",
+          maxRows: 10,
+          fields: [
+            link({
+              appearances: false,
+            }),
+          ],
+          admin: {
+            initCollapsed: true,
+          },
+        },
+      ],
+    },
+    // Social Links
+    {
+      name: "socialLinks",
+      type: "group",
+      label: "Social Links",
+      admin: {
+        description: "Add your social media profile URLs",
+      },
+      fields: [
+        {
+          name: "twitter",
+          type: "text",
+          label: "X (Twitter)",
+          admin: {
+            placeholder: "https://x.com/yourhandle",
+          },
+        },
+        {
+          name: "instagram",
+          type: "text",
+          label: "Instagram",
+          admin: {
+            placeholder: "https://instagram.com/yourhandle",
+          },
+        },
+        {
+          name: "linkedin",
+          type: "text",
+          label: "LinkedIn",
+          admin: {
+            placeholder: "https://linkedin.com/company/yourcompany",
+          },
+        },
+        {
+          name: "github",
+          type: "text",
+          label: "GitHub",
+          admin: {
+            placeholder: "https://github.com/yourorg",
+          },
+        },
+        {
+          name: "youtube",
+          type: "text",
+          label: "YouTube",
+          admin: {
+            placeholder: "https://youtube.com/@yourchannel",
+          },
+        },
+      ],
+    },
+    // Newsletter Section
+    {
+      name: "newsletter",
+      type: "group",
+      label: "Newsletter",
+      admin: {
+        description: "Configure the newsletter signup section",
+      },
+      fields: [
+        {
+          name: "enabled",
+          type: "checkbox",
+          label: "Enable Newsletter Signup",
+          defaultValue: true,
+        },
+        {
+          name: "title",
+          type: "text",
+          label: "Title",
+          defaultValue: "Newsletter",
+          admin: {
+            condition: (_, siblingData) => siblingData?.enabled,
+          },
+        },
+        {
+          name: "description",
+          type: "textarea",
+          label: "Description",
+          defaultValue: "Stay up to date with the latest updates and news.",
+          admin: {
+            condition: (_, siblingData) => siblingData?.enabled,
+          },
+        },
+        {
+          name: "buttonText",
+          type: "text",
+          label: "Button Text",
+          defaultValue: "Subscribe",
+          admin: {
+            condition: (_, siblingData) => siblingData?.enabled,
+          },
+        },
+        {
+          name: "placeholder",
+          type: "text",
+          label: "Email Placeholder",
+          defaultValue: "Enter your email",
+          admin: {
+            condition: (_, siblingData) => siblingData?.enabled,
+          },
+        },
+      ],
+    },
+    // Copyright and Bottom Bar
+    {
+      name: "copyrightText",
+      type: "text",
+      label: "Copyright Text",
+      defaultValue: "{{projectName}}",
+      admin: {
+        description: "Company name for copyright (year is added automatically)",
+      },
+    },
+    {
+      name: "bottomLinks",
+      type: "array",
+      label: "Bottom Bar Links",
+      maxRows: 4,
+      admin: {
+        description: "Links shown in the bottom bar (e.g., Contact Support, Privacy Policy)",
+        initCollapsed: true,
+      },
+      fields: [
+        link({
+          appearances: false,
+        }),
+      ],
+    },
+  ],
+  hooks: {
+    afterChange: [revalidateFooter],
+  },
+}