@object-ui/layout 0.5.0 → 3.0.0

package/src/stories/AppShell.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { AppShell, PageHeader, ResponsiveGrid } from '@object-ui/layout';
+import { Card, CardContent, CardHeader, CardTitle, Button } from '@object-ui/components';
+
+/**
+ * AppShell responsive layout stories.
+ * Demonstrates the shell + responsive grid working together.
+ *
+ * Part of Q1 2026 roadmap §1.3 — Responsive layout stories in Storybook.
+ */
+const meta = {
+  title: 'Layout/AppShell',
+  component: AppShell,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'The application shell provides a sidebar + main content area. ' +
+          'Combine with ResponsiveGrid for fully responsive page layouts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof AppShell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+function SampleSidebar() {
+  return (
+    <nav className="p-4 space-y-2" aria-label="Main navigation">
+      {['Dashboard', 'Contacts', 'Tasks', 'Reports', 'Settings'].map((item) => (
+        <div
+          key={item}
+          className="px-3 py-2 rounded-md text-sm hover:bg-accent cursor-pointer"
+        >
+          {item}
+        </div>
+      ))}
+    </nav>
+  );
+}
+
+function MetricCard({ title, value }: { title: string; value: string }) {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+      </CardContent>
+    </Card>
+  );
+}
+
+export const ResponsiveDashboard: Story = {
+  name: 'Responsive Dashboard',
+  args: {
+    sidebar: <SampleSidebar />,
+    children: (
+      <div className="p-6 space-y-6">
+        <PageHeader
+          title="Dashboard"
+          description="Key metrics overview"
+          action={<Button size="sm">Export</Button>}
+        />
+        <ResponsiveGrid columns={{ xs: 1, sm: 2, xl: 4 }} gap={4}>
+          <MetricCard title="Revenue" value="$45,231" />
+          <MetricCard title="Users" value="2,350" />
+          <MetricCard title="Orders" value="1,247" />
+          <MetricCard title="Growth" value="+12.5%" />
+        </ResponsiveGrid>
+        <ResponsiveGrid columns={{ xs: 1, lg: 2 }} gap={4}>
+          <Card>
+            <CardHeader><CardTitle>Recent Activity</CardTitle></CardHeader>
+            <CardContent><div className="h-48 bg-muted rounded" /></CardContent>
+          </Card>
+          <Card>
+            <CardHeader><CardTitle>Analytics</CardTitle></CardHeader>
+            <CardContent><div className="h-48 bg-muted rounded" /></CardContent>
+          </Card>
+        </ResponsiveGrid>
+      </div>
+    ),
+  },
+};
+
+export const MinimalShell: Story = {
+  name: 'Minimal (No Sidebar)',
+  args: {
+    children: (
+      <div className="p-6">
+        <PageHeader title="Settings" description="Manage your preferences" />
+        <ResponsiveGrid columns={{ xs: 1, md: 2 }} gap={4}>
+          <Card>
+            <CardHeader><CardTitle>Profile</CardTitle></CardHeader>
+            <CardContent><div className="h-32 bg-muted rounded" /></CardContent>
+          </Card>
+          <Card>
+            <CardHeader><CardTitle>Security</CardTitle></CardHeader>
+            <CardContent><div className="h-32 bg-muted rounded" /></CardContent>
+          </Card>
+        </ResponsiveGrid>
+      </div>
+    ),
+  },
+};

package/src/stories/ResponsiveGrid.stories.tsx

@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { ResponsiveGrid } from '@object-ui/layout';
+import { Card, CardContent, CardHeader, CardTitle } from '@object-ui/components';
+
+/**
+ * ResponsiveGrid stories demonstrating spec-aligned responsive layouts.
+ * Uses BreakpointColumnMapSchema to configure columns per breakpoint.
+ *
+ * Part of Q1 2026 roadmap §1.3 — Responsive layout stories in Storybook.
+ */
+const meta = {
+  title: 'Layout/ResponsiveGrid',
+  component: ResponsiveGrid,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          'A responsive grid layout that consumes @objectstack/spec BreakpointColumnMapSchema. ' +
+          'Columns adjust automatically at each breakpoint using pure Tailwind CSS.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof ResponsiveGrid>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/** Placeholder card for demos */
+function DemoCard({ label }: { label: string }) {
+  return (
+    <Card>
+      <CardHeader className="p-4">
+        <CardTitle className="text-sm">{label}</CardTitle>
+      </CardHeader>
+      <CardContent className="p-4 pt-0">
+        <div className="h-16 rounded bg-muted" />
+      </CardContent>
+    </Card>
+  );
+}
+
+const items = Array.from({ length: 6 }, (_, i) => (
+  <DemoCard key={i} label={`Card ${i + 1}`} />
+));
+
+// --- Stories ---
+
+export const Default: Story = {
+  args: {
+    columns: { xs: 1, sm: 2, lg: 3 },
+    gap: 4,
+    children: items,
+  },
+};
+
+export const SingleColumn: Story = {
+  args: {
+    columns: { xs: 1 },
+    gap: 4,
+    children: items.slice(0, 3),
+  },
+};
+
+export const TwoColumns: Story = {
+  args: {
+    columns: { xs: 1, sm: 2 },
+    gap: 4,
+    children: items.slice(0, 4),
+  },
+};
+
+export const FourColumnGrid: Story = {
+  args: {
+    columns: { xs: 1, sm: 2, md: 3, lg: 4 },
+    gap: 4,
+    children: items,
+  },
+};
+
+export const DashboardLayout: Story = {
+  name: 'Dashboard Layout (1 → 2 → 4)',
+  args: {
+    columns: { xs: 1, sm: 2, xl: 4 },
+    gap: 6,
+    children: Array.from({ length: 8 }, (_, i) => (
+      <DemoCard key={i} label={`Metric ${i + 1}`} />
+    )),
+  },
+};
+
+export const CompactGap: Story = {
+  name: 'Compact Gap (gap-2)',
+  args: {
+    columns: { xs: 2, md: 3 },
+    gap: 2,
+    children: items,
+  },
+};
+
+export const WideGap: Story = {
+  name: 'Wide Gap (gap-8)',
+  args: {
+    columns: { xs: 1, md: 2 },
+    gap: 8,
+    children: items.slice(0, 4),
+  },
+};