@tribepad/themis 1.0.0

package/src/elements/Resizable/Resizable.stories.tsx

@@ -0,0 +1,374 @@
+/**
+ * Resizable Component - Storybook Stories
+ *
+ * Interactive examples and documentation for the Resizable component.
+ *
+ * @see resizable-prd.md for full requirements
+ * @see Storybook (when running)
+ */
+
+import { useState, type ReactElement } from 'react';
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from './index';
+
+const meta = {
+  title: 'Elements/Resizable',
+  component: ResizablePanelGroup,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'WCAG 2.2 AAA compliant resizable panel layout system. Supports horizontal and vertical layouts with keyboard navigation, precision popover controls, and nested configurations.',
+      },
+    },
+  },
+  argTypes: {
+    direction: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Layout direction',
+    },
+    groupLabel: {
+      control: 'text',
+      description: 'Required label for screen reader identification',
+    },
+  },
+} satisfies Meta<typeof ResizablePanelGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// =============================================================================
+// Helper Components
+// =============================================================================
+
+function PanelContent({ title, className = '' }: { title: string; className?: string }) {
+  return (
+    <div className={`h-full p-4 ${className}`}>
+      <h3 className="text-lg font-semibold mb-2">{title}</h3>
+      <p className="text-[var(--muted-foreground)]">
+        Resize by dragging the handle or use keyboard: Arrow keys (1%), Shift+Arrow (10%), Home/End (min/max).
+        Press Enter or Space to open precision controls.
+      </p>
+    </div>
+  );
+}
+
+// =============================================================================
+// Default Story - Horizontal Layout
+// =============================================================================
+
+/**
+ * Default horizontal resizable layout.
+ * Two panels side by side with a draggable handle.
+ */
+export const Default: Story = {
+  render: function DefaultLayout(): ReactElement {
+    return (
+      <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" groupLabel="Main layout">
+          <ResizablePanel name="Sidebar" defaultSize={30}>
+            <PanelContent title="Sidebar" className="bg-[var(--muted)]/50" />
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel name="Content" defaultSize={70}>
+            <PanelContent title="Main Content" />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Vertical Layout
+// =============================================================================
+
+/**
+ * Vertical resizable layout.
+ * Panels stacked vertically with a draggable handle.
+ */
+export const Vertical: Story = {
+  render: function VerticalLayout(): ReactElement {
+    return (
+      <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+        <ResizablePanelGroup direction="vertical" groupLabel="Vertical split">
+          <ResizablePanel name="Top Panel" defaultSize={60}>
+            <PanelContent title="Top Panel" className="bg-[var(--muted)]/50" />
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel name="Bottom Panel" defaultSize={40}>
+            <PanelContent title="Bottom Panel" />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Nested Layout (IDE-like)
+// =============================================================================
+
+/**
+ * Nested layout mimicking an IDE.
+ * Horizontal split with sidebar, and vertical split for editor/terminal.
+ */
+export const Nested: Story = {
+  render: function NestedLayout(): ReactElement {
+    return (
+      <div className="h-[500px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" groupLabel="Main layout">
+          <ResizablePanel name="Sidebar" defaultSize={20} minSize={15} maxSize={35}>
+            <div className="h-full p-4 bg-[var(--muted)]/50">
+              <h3 className="text-lg font-semibold mb-2">File Explorer</h3>
+              <ul className="space-y-1 text-sm">
+                <li className="hover:bg-[var(--accent)] px-2 py-1 rounded cursor-pointer">src/</li>
+                <li className="hover:bg-[var(--accent)] px-2 py-1 rounded cursor-pointer pl-4">components/</li>
+                <li className="hover:bg-[var(--accent)] px-2 py-1 rounded cursor-pointer pl-4">pages/</li>
+                <li className="hover:bg-[var(--accent)] px-2 py-1 rounded cursor-pointer">package.json</li>
+              </ul>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle />
+
+          <ResizablePanel name="Editor area" defaultSize={80}>
+            <ResizablePanelGroup direction="vertical" groupLabel="Editor split">
+              <ResizablePanel name="Code editor" defaultSize={70}>
+                <div className="h-full p-4">
+                  <h3 className="text-lg font-semibold mb-2">Code Editor</h3>
+                  <pre className="bg-[var(--muted)] p-4 rounded text-sm font-mono overflow-auto h-[calc(100%-40px)]">
+{`function App() {
+  return (
+    <div>Hello World</div>
+  );
+}
+
+export default App;`}
+                  </pre>
+                </div>
+              </ResizablePanel>
+
+              <ResizableHandle />
+
+              <ResizablePanel name="Terminal" defaultSize={30} minSize={15}>
+                <div className="h-full p-4 bg-[var(--card)]">
+                  <h3 className="text-lg font-semibold mb-2">Terminal</h3>
+                  <pre className="text-sm font-mono text-green-500">
+                    $ npm run dev{'\n'}
+                    Server running at http://localhost:3000
+                  </pre>
+                </div>
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// With Presets
+// =============================================================================
+
+/**
+ * Layout with preset buttons for quick sizing.
+ * Click the handle and use the popover to select presets.
+ */
+export const WithPresets: Story = {
+  render: function PresetsLayout(): ReactElement {
+    return (
+      <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" groupLabel="Layout with presets">
+          <ResizablePanel name="Left Panel" defaultSize={50}>
+            <PanelContent title="Left Panel" className="bg-[var(--muted)]/50" />
+          </ResizablePanel>
+          <ResizableHandle
+            presets={[
+              { label: 'Equal', sizes: [50, 50] },
+              { label: 'Focus Left', sizes: [70, 30] },
+              { label: 'Focus Right', sizes: [30, 70] },
+            ]}
+          />
+          <ResizablePanel name="Right Panel" defaultSize={50}>
+            <PanelContent title="Right Panel" />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Collapsible Panel
+// =============================================================================
+
+/**
+ * Panel that can collapse to 0%.
+ * Drag the handle all the way to collapse the sidebar.
+ */
+export const Collapsible: Story = {
+  render: function CollapsibleLayout(): ReactElement {
+    const [collapsed, setCollapsed] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-[var(--muted-foreground)]">
+          Sidebar collapsed: <strong>{collapsed ? 'Yes' : 'No'}</strong>
+        </p>
+        <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+          <ResizablePanelGroup direction="horizontal" groupLabel="Collapsible layout">
+            <ResizablePanel
+              name="Sidebar"
+              defaultSize={25}
+              minSize={15}
+              collapsible
+              onCollapse={() => setCollapsed(true)}
+              onExpand={() => setCollapsed(false)}
+            >
+              <PanelContent title="Collapsible Sidebar" className="bg-[var(--muted)]/50" />
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel name="Main Content" defaultSize={75}>
+              <PanelContent title="Main Content" />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Controlled Mode
+// =============================================================================
+
+/**
+ * Controlled mode with external state management.
+ * Sizes are managed externally and displayed.
+ */
+export const Controlled: Story = {
+  render: function ControlledLayout(): ReactElement {
+    const [sizes, setSizes] = useState([40, 60]);
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-4 text-sm">
+          <span>Left: <strong>{sizes[0]?.toFixed(1)}%</strong></span>
+          <span>Right: <strong>{sizes[1]?.toFixed(1)}%</strong></span>
+          <button
+            onClick={() => setSizes([50, 50])}
+            className="px-2 py-1 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-xs"
+          >
+            Reset to 50/50
+          </button>
+        </div>
+        <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+          <ResizablePanelGroup
+            direction="horizontal"
+            groupLabel="Controlled layout"
+            sizes={sizes}
+            onSizesChange={setSizes}
+          >
+            <ResizablePanel name="Left Panel">
+              <PanelContent title="Left Panel" className="bg-[var(--muted)]/50" />
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel name="Right Panel">
+              <PanelContent title="Right Panel" />
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Three Panels
+// =============================================================================
+
+/**
+ * Layout with three panels.
+ * Each handle only affects its adjacent panels.
+ */
+export const ThreePanels: Story = {
+  render: function ThreePanelLayout(): ReactElement {
+    return (
+      <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" groupLabel="Three panel layout">
+          <ResizablePanel name="Left" defaultSize={25}>
+            <PanelContent title="Left" className="bg-[var(--muted)]/50" />
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel name="Center" defaultSize={50}>
+            <PanelContent title="Center" />
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel name="Right" defaultSize={25}>
+            <PanelContent title="Right" className="bg-[var(--muted)]/50" />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// Disabled Handle
+// =============================================================================
+
+/**
+ * Handle can be disabled to prevent resizing.
+ */
+export const Disabled: Story = {
+  render: function DisabledLayout(): ReactElement {
+    return (
+      <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" groupLabel="Disabled handle layout">
+          <ResizablePanel name="Fixed Left" defaultSize={30}>
+            <PanelContent title="Fixed Left (30%)" className="bg-[var(--muted)]/50" />
+          </ResizablePanel>
+          <ResizableHandle disabled />
+          <ResizablePanel name="Fixed Right" defaultSize={70}>
+            <PanelContent title="Fixed Right (70%)" />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+};
+
+// =============================================================================
+// No Handle Indicator
+// =============================================================================
+
+/**
+ * Handle without the visual grip indicator.
+ * The resize functionality still works.
+ */
+export const NoHandleIndicator: Story = {
+  render: function NoIndicatorLayout(): ReactElement {
+    return (
+      <div className="h-[400px] w-full border border-[var(--border)] rounded-lg overflow-hidden">
+        <ResizablePanelGroup direction="horizontal" groupLabel="Minimal handle layout">
+          <ResizablePanel name="Left" defaultSize={50}>
+            <PanelContent title="Left Panel" className="bg-[var(--muted)]/50" />
+          </ResizablePanel>
+          <ResizableHandle withHandle={false} />
+          <ResizablePanel name="Right" defaultSize={50}>
+            <PanelContent title="Right Panel" />
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    );
+  },
+};