From c55c47e1118f3a443b731dcc50b63e5d1d00e1b1 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Wed, 26 Feb 2025 23:34:22 -0700
Subject: [PATCH] app splitter story

---
 .../ui/checkbox/Checkbox.stories.tsx          |   2 +-
 .../AppSplitter/AppSplitter.stories.tsx       | 108 ++++++++++++++++++
 .../AppSplitter/SplitPane/SplitPane.tsx       |   2 +
 .../ui/switch/AppSwitch.stories.tsx           |   2 +-
 4 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx

diff --git a/web/src/components/ui/checkbox/Checkbox.stories.tsx b/web/src/components/ui/checkbox/Checkbox.stories.tsx
index 987456018..3f01f7c6d 100644
--- a/web/src/components/ui/checkbox/Checkbox.stories.tsx
+++ b/web/src/components/ui/checkbox/Checkbox.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { Checkbox } from './Checkbox';
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Base/Checkbox',
+  title: 'Base/Inputs/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   argTypes: {
diff --git a/web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx b/web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx
new file mode 100644
index 000000000..2f03ba628
--- /dev/null
+++ b/web/src/components/ui/layout/AppSplitter/AppSplitter.stories.tsx
@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AppSplitter } from './AppSplitter';
+
+const meta = {
+  title: 'Base/Layout/AppSplitter',
+  component: AppSplitter,
+  parameters: {
+    layout: 'fullscreen'
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="" style={{ height: '400px' }}>
+        <Story />
+      </div>
+    )
+  ]
+} satisfies Meta<typeof AppSplitter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const LeftContent = () => (
+  <div className="flex h-full w-full flex-col gap-3 bg-red-100 p-4">
+    <h2 className="text-lg font-semibold">Left Panel</h2>
+    <p>This is the left panel content</p>
+  </div>
+);
+
+const RightContent = () => (
+  <div className="flex h-full w-full flex-col gap-3 bg-blue-200 p-4">
+    <h2 className="text-lg font-semibold">Right Panel</h2>
+    <p>This is the right panel content</p>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    leftChildren: <LeftContent />,
+    rightChildren: <RightContent />,
+    autoSaveId: 'default-split',
+    defaultLayout: ['50%', '50%'],
+    allowResize: true,
+    preserveSide: null
+  }
+};
+
+export const LeftPreserved: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'left-preserved-split',
+    preserveSide: 'left',
+    defaultLayout: ['300px', 'auto']
+  }
+};
+
+export const RightPreserved: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'right-preserved-split',
+    preserveSide: 'right',
+    defaultLayout: ['auto', '300px']
+  }
+};
+
+export const WithMinMaxSizes: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'min-max-split',
+    leftPanelMinSize: '200px',
+    leftPanelMaxSize: '60%',
+    rightPanelMinSize: '200px',
+    rightPanelMaxSize: '70%'
+  }
+};
+
+export const HorizontalSplit: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'horizontal-split',
+    split: 'horizontal',
+    defaultLayout: ['50%', '50%']
+  }
+};
+
+export const NonResizable: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'non-resizable-split',
+    allowResize: false
+  }
+};
+
+export const HiddenRight: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'hidden-right-split',
+    rightHidden: true
+  }
+};
+
+export const HiddenLeft: Story = {
+  args: {
+    ...Default.args,
+    autoSaveId: 'hidden-left-split',
+    leftHidden: true
+  }
+};
diff --git a/web/src/components/ui/layout/AppSplitter/SplitPane/SplitPane.tsx b/web/src/components/ui/layout/AppSplitter/SplitPane/SplitPane.tsx
index 87cc524be..e333699f7 100644
--- a/web/src/components/ui/layout/AppSplitter/SplitPane/SplitPane.tsx
+++ b/web/src/components/ui/layout/AppSplitter/SplitPane/SplitPane.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useMemo, useCallback, useRef, useState } from 'react';
 import Pane from './pane';
 import SplitPaneSash from './sash';
diff --git a/web/src/components/ui/switch/AppSwitch.stories.tsx b/web/src/components/ui/switch/AppSwitch.stories.tsx
index 8f8f4c6a8..9356ac39f 100644
--- a/web/src/components/ui/switch/AppSwitch.stories.tsx
+++ b/web/src/components/ui/switch/AppSwitch.stories.tsx
@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { AppSwitch } from './AppSwitch';
 
 const meta: Meta<typeof AppSwitch> = {
-  title: 'Base/Switch',
+  title: 'Base/Inputs/Switch',
   component: AppSwitch,
   tags: ['autodocs'],
   argTypes: {