@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/layout/Layout.stories.tsx

@@ -0,0 +1,373 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Layout, Sidebar, SidebarItem, Header } from './index'
+import * as React from 'react'
+import { Home, Users, Settings, FileText, BarChart3, Mail, HelpCircle } from 'lucide-react'
+
+const MockSidebar = () => (
+  <Sidebar>
+    <SidebarItem href="/dashboard" active>
+      <Home className="h-4 w-4 mr-2" />
+      Dashboard
+    </SidebarItem>
+    <SidebarItem href="/users">
+      <Users className="h-4 w-4 mr-2" />
+      Users
+    </SidebarItem>
+    <SidebarItem href="/documents">
+      <FileText className="h-4 w-4 mr-2" />
+      Documents
+    </SidebarItem>
+    <SidebarItem href="/analytics">
+      <BarChart3 className="h-4 w-4 mr-2" />
+      Analytics
+    </SidebarItem>
+    <SidebarItem href="/messages">
+      <Mail className="h-4 w-4 mr-2" />
+      Messages
+    </SidebarItem>
+    <SidebarItem href="/settings">
+      <Settings className="h-4 w-4 mr-2" />
+      Settings
+    </SidebarItem>
+    <SidebarItem href="/help">
+      <HelpCircle className="h-4 w-4 mr-2" />
+      Help
+    </SidebarItem>
+  </Sidebar>
+)
+
+const MockHeader = () => (
+  <Header className="w-full">
+    <div className="flex items-center gap-4">
+      <span className="text-lg font-bold">MyApp</span>
+    </div>
+    <div className="flex items-center gap-2">
+      <button className="px-3 py-1.5 text-sm rounded-md hover:bg-accent">
+        Sign In
+      </button>
+      <button className="px-3 py-1.5 text-sm bg-primary text-primary-foreground rounded-md">
+        Sign Up
+      </button>
+    </div>
+  </Header>
+)
+
+const MockFooter = () => (
+  <div className="flex items-center justify-between text-sm text-muted-foreground">
+    <span>© 2024 MyApp Inc.</span>
+    <div className="flex gap-4">
+      <a href="/privacy" className="hover:text-foreground">Privacy</a>
+      <a href="/terms" className="hover:text-foreground">Terms</a>
+    </div>
+  </div>
+)
+
+const meta: Meta<typeof Layout> = {
+  title: 'Blocks/Layout',
+  component: Layout,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A flexible layout component with optional header, sidebar, and footer. Supports collapsible mobile navigation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    collapsible: {
+      control: 'boolean',
+      description: 'Enable collapsible sidebar for mobile',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Layout>
+
+export const Default: Story = {
+  render: () => (
+    <Layout
+      header={<MockHeader />}
+      sidebar={<MockSidebar />}
+      footer={<MockFooter />}
+    >
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Dashboard</h1>
+        <p className="text-muted-foreground">
+          Welcome to your dashboard. Here you can manage your content.
+        </p>
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {['Revenue', 'Users', 'Orders', 'Growth'].map((label) => (
+            <div key={label} className="p-4 border rounded-lg bg-card">
+              <p className="text-sm text-muted-foreground">{label}</p>
+              <p className="text-2xl font-bold">$12,345</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  ),
+}
+
+export const WithHeaderOnly: Story = {
+  render: () => (
+    <Layout header={<MockHeader />}>
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Header Only Layout</h1>
+        <p className="text-muted-foreground">
+          This layout only has a header, no sidebar or footer.
+        </p>
+        <div className="grid gap-4 md:grid-cols-3">
+          {[1, 2, 3, 4, 5, 6].map((i) => (
+            <div key={i} className="p-6 border rounded-lg bg-card">
+              <h3 className="font-semibold mb-2">Card {i}</h3>
+              <p className="text-sm text-muted-foreground">
+                Some content for card {i}.
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  ),
+}
+
+export const WithSidebarOnly: Story = {
+  render: () => (
+    <Layout sidebar={<MockSidebar />}>
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Sidebar Only Layout</h1>
+        <p className="text-muted-foreground">
+          This layout has a sidebar but no header or footer.
+        </p>
+        <div className="space-y-4">
+          {[1, 2, 3, 4, 5].map((i) => (
+            <div key={i} className="p-4 border rounded-lg bg-card">
+              Content block {i}
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  ),
+}
+
+export const CollapsibleSidebar: Story = {
+  render: () => (
+    <Layout
+      header={<MockHeader />}
+      sidebar={<MockSidebar />}
+      footer={<MockFooter />}
+      collapsible
+    >
+      <div className="space-y-6">
+        <h1 className="text-3xl font-bold">Collapsible Layout</h1>
+        <p className="text-muted-foreground">
+          On mobile, the sidebar collapses into a hamburger menu in the header.
+          Resize the window to see it in action.
+        </p>
+        <div className="p-6 border rounded-lg bg-card">
+          <h2 className="text-xl font-semibold mb-2">Main Content</h2>
+          <p className="text-muted-foreground">
+            The sidebar is hidden on mobile and accessible via the menu button.
+          </p>
+        </div>
+      </div>
+    </Layout>
+  ),
+}
+
+export const NoSidebar: Story = {
+  render: () => (
+    <Layout
+      header={<MockHeader />}
+      footer={<MockFooter />}
+    >
+      <div className="max-w-4xl mx-auto space-y-6">
+        <h1 className="text-3xl font-bold">Full Width Layout</h1>
+        <p className="text-muted-foreground">
+          This layout has header and footer but no sidebar, giving full width to content.
+        </p>
+        <div className="prose">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+            quis nostrud exercitation ullamco laboris.
+          </p>
+          <p>
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
+            eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
+          </p>
+        </div>
+      </div>
+    </Layout>
+  ),
+}
+
+export const MinimalLayout: Story = {
+  render: () => (
+    <Layout>
+      <div className="min-h-[400px] flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Minimal Layout</h1>
+          <p className="text-muted-foreground">
+            Just the content, no header, sidebar, or footer.
+          </p>
+        </div>
+      </div>
+    </Layout>
+  ),
+}
+
+export const InteractiveSidebar: Story = {
+  render: () => {
+    const [activeItem, setActiveItem] = React.useState('dashboard')
+
+    const items = [
+      { id: 'dashboard', label: 'Dashboard', icon: Home },
+      { id: 'users', label: 'Users', icon: Users },
+      { id: 'documents', label: 'Documents', icon: FileText },
+      { id: 'analytics', label: 'Analytics', icon: BarChart3 },
+      { id: 'settings', label: 'Settings', icon: Settings },
+    ]
+
+    return (
+      <Layout
+        header={<MockHeader />}
+        sidebar={
+          <Sidebar>
+            {items.map((item) => (
+              <SidebarItem
+                key={item.id}
+                active={activeItem === item.id}
+                onClick={() => setActiveItem(item.id)}
+              >
+                <item.icon className="h-4 w-4 mr-2" />
+                {item.label}
+              </SidebarItem>
+            ))}
+          </Sidebar>
+        }
+      >
+        <div className="space-y-4">
+          <h1 className="text-3xl font-bold capitalize">{activeItem}</h1>
+          <p className="text-muted-foreground">
+            You selected: <strong>{activeItem}</strong>
+          </p>
+          <div className="p-6 border rounded-lg bg-card">
+            Content for {activeItem} page would go here.
+          </div>
+        </div>
+      </Layout>
+    )
+  },
+}
+
+export const WithFooterOnly: Story = {
+  render: () => (
+    <Layout footer={<MockFooter />}>
+      <div className="min-h-[600px] space-y-6">
+        <h1 className="text-3xl font-bold">Footer Only Layout</h1>
+        <p className="text-muted-foreground">
+          This layout only has a footer at the bottom.
+        </p>
+        <div className="grid gap-4 md:grid-cols-2">
+          {[1, 2, 3, 4].map((i) => (
+            <div key={i} className="p-6 border rounded-lg bg-card h-48 flex items-center justify-center">
+              Content Area {i}
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  ),
+}
+
+export const DashboardExample: Story = {
+  render: () => (
+    <Layout
+      header={
+        <Header className="w-full">
+          <div className="flex items-center gap-4">
+            <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground font-bold">
+              A
+            </div>
+            <span className="text-lg font-bold">Analytics Pro</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="relative">
+              <input
+                type="search"
+                placeholder="Search..."
+                className="h-9 w-64 rounded-md border bg-background px-3 text-sm"
+              />
+            </div>
+            <div className="h-8 w-8 rounded-full bg-muted" />
+          </div>
+        </Header>
+      }
+      sidebar={<MockSidebar />}
+    >
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <h1 className="text-3xl font-bold">Dashboard</h1>
+            <p className="text-muted-foreground">Welcome back, John!</p>
+          </div>
+          <button className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm">
+            New Report
+          </button>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+          {[
+            { label: 'Total Revenue', value: '$45,231', change: '+20.1%' },
+            { label: 'Active Users', value: '2,350', change: '+15.2%' },
+            { label: 'Pending Orders', value: '12', change: '-4.5%' },
+            { label: 'Conversion Rate', value: '3.2%', change: '+2.1%' },
+          ].map((stat) => (
+            <div key={stat.label} className="p-4 border rounded-lg bg-card">
+              <p className="text-sm text-muted-foreground">{stat.label}</p>
+              <p className="text-2xl font-bold">{stat.value}</p>
+              <p className={`text-xs ${stat.change.startsWith('+') ? 'text-green-500' : 'text-red-500'}`}>
+                {stat.change} from last month
+              </p>
+            </div>
+          ))}
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="p-6 border rounded-lg bg-card">
+            <h2 className="text-lg font-semibold mb-4">Recent Activity</h2>
+            <div className="space-y-3">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="flex items-center gap-3 py-2 border-b last:border-0">
+                  <div className="h-8 w-8 rounded-full bg-muted" />
+                  <div className="flex-1">
+                    <p className="text-sm font-medium">User action {i}</p>
+                    <p className="text-xs text-muted-foreground">{i} hours ago</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="p-6 border rounded-lg bg-card">
+            <h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
+            <div className="grid gap-2">
+              {['Create Report', 'Add User', 'Export Data', 'View Logs'].map((action) => (
+                <button
+                  key={action}
+                  className="w-full p-3 text-left text-sm border rounded-md hover:bg-accent"
+                >
+                  {action}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  ),
+}