greyhaven-design-system/stories/Composition/PageLayout.stories.tsx

import type { Meta, StoryObj } from '@storybook/react'

import { PageLayout } from '@/components/ui/page-layout'
import { Navbar, NavbarLink } from '@/components/ui/navbar'
import { Footer } from '@/components/ui/footer'
import { Hero } from '@/components/ui/hero'
import { Section } from '@/components/ui/section'
import { CTASection } from '@/components/ui/cta-section'
import { Logo } from '@/components/ui/logo'
import { Button } from '@/components/ui/button'
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
} from '@/components/ui/card'

const meta = {
  title: 'Composition/PageLayout',
  component: PageLayout,
  tags: ['autodocs'],
  parameters: { layout: 'fullscreen' },
} satisfies Meta<typeof PageLayout>

export default meta
type Story = StoryObj<typeof meta>

const navLinks = (
  <>
    <NavbarLink href="#" active>Home</NavbarLink>
    <NavbarLink href="#">Features</NavbarLink>
    <NavbarLink href="#">Pricing</NavbarLink>
    <NavbarLink href="#">Docs</NavbarLink>
  </>
)

const navActions = (
  <>
    <Button variant="ghost" size="sm">Log in</Button>
    <Button size="sm">Sign up</Button>
  </>
)

const sampleNavbar = (
  <Navbar
    variant="solid"
    logo={<Logo size="sm" />}
    actions={navActions}
  >
    {navLinks}
  </Navbar>
)

const sampleFooter = (
  <Footer
    variant="minimal"
    logo={<Logo size="sm" />}
    copyright={<>&copy; 2026 Greyhaven. All rights reserved.</>}
    actions={
      <div className="flex gap-4 text-sm text-muted-foreground">
        <a href="#" className="hover:text-foreground transition-colors">Privacy</a>
        <a href="#" className="hover:text-foreground transition-colors">Terms</a>
      </div>
    }
  />
)

export const FullPage: Story = {
  args: {
    navbar: sampleNavbar,
    footer: sampleFooter,
    children: (
      <>
        <Hero
          variant="centered"
          heading="Build something great"
          subheading="A complete design system for modern web applications."
          actions={
            <>
              <Button size="lg">Get Started</Button>
              <Button size="lg" variant="outline">View Docs</Button>
            </>
          }
        />
        <Section
          title="Features"
          description="Everything you need to build beautiful interfaces."
        >
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            {['Components', 'Tokens', 'Patterns'].map((title) => (
              <Card key={title}>
                <CardHeader>
                  <CardTitle>{title}</CardTitle>
                  <CardDescription>
                    Pre-built {title.toLowerCase()} for rapid development.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-muted-foreground">
                    Fully customizable {title.toLowerCase()} that follow best practices.
                  </p>
                </CardContent>
              </Card>
            ))}
          </div>
        </Section>
        <CTASection
          background="muted"
          heading="Ready to start?"
          description="Get up and running in minutes."
          actions={<Button size="lg">Get Started Free</Button>}
        />
      </>
    ),
  },
}

export const WithSidebar: Story = {
  args: {
    navbar: sampleNavbar,
    footer: sampleFooter,
    sidebar: (
      <nav className="p-4 space-y-2">
        <h3 className="font-semibold text-sm mb-4">Navigation</h3>
        {['Dashboard', 'Projects', 'Team', 'Settings'].map((item) => (
          <a
            key={item}
            href="#"
            className="block px-3 py-2 text-sm rounded-md text-muted-foreground hover:text-foreground hover:bg-accent transition-colors"
          >
            {item}
          </a>
        ))}
      </nav>
    ),
    children: (
      <Section title="Dashboard" description="Overview of your workspace.">
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {['Revenue', 'Users', 'Orders', 'Growth'].map((metric) => (
            <Card key={metric}>
              <CardHeader>
                <CardTitle>{metric}</CardTitle>
                <CardDescription>Last 30 days</CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-2xl font-bold">1,234</p>
              </CardContent>
            </Card>
          ))}
        </div>
      </Section>
    ),
  },
}

export const ContentOnly: Story = {
  args: {
    children: (
      <Section title="Standalone Content" description="A page layout with no navbar or footer.">
        <p className="text-muted-foreground">
          This demonstrates the PageLayout component with only content, no navbar, sidebar, or footer.
        </p>
      </Section>
    ),
  },
}