design system token v0.1

stories/Composition/PageLayout.stories.tsx

@@ -0,0 +1,167 @@
+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>
+    ),
+  },
+}