add Resizable

Author: joshunrau

apps/playground/src/components/MainContent/MainContent.tsx

@@ -1,7 +1,8 @@
-import { Resizable, Tabs } from '@douglasneuroinformatics/libui/components';
+import { Tabs } from '@douglasneuroinformatics/libui/components';
 import { useMediaQuery } from '@douglasneuroinformatics/libui/hooks';
 
 import { Editor } from '../Editor';
+import { Resizable } from '../Resizable';
 import { Viewer } from '../Viewer';
 
 export const MainContent = () => {

apps/playground/src/components/Resizable/Resizable.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Resizable } from './Resizable';
+
+type Story = StoryObj<typeof Resizable>;
+
+export default { component: Resizable } as Meta<typeof Resizable>;
+
+export const Default: Story = {
+  args: {
+    children: (
+      <Resizable.PanelGroup className="max-w-md rounded-lg border" direction="horizontal">
+        <Resizable.Panel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">One</span>
+          </div>
+        </Resizable.Panel>
+        <Resizable.Handle />
+        <Resizable.Panel defaultSize={50}>
+          <Resizable.PanelGroup direction="vertical">
+            <Resizable.Panel defaultSize={25}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Two</span>
+              </div>
+            </Resizable.Panel>
+            <Resizable.Handle />
+            <Resizable.Panel defaultSize={75}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Three</span>
+              </div>
+            </Resizable.Panel>
+          </Resizable.PanelGroup>
+        </Resizable.Panel>
+      </Resizable.PanelGroup>
+    )
+  }
+};

apps/playground/src/components/Resizable/Resizable.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { Panel } from 'react-resizable-panels';
+import type { PanelProps } from 'react-resizable-panels';
+
+import { ResizableHandle } from './ResizableHandle';
+import { ResizablePanelGroup } from './ResizablePanelGroup';
+
+import type { ResizableHandleProps } from './ResizableHandle';
+import type { ResizablePanelGroupProps } from './ResizablePanelGroup';
+
+type ResizableRootType = React.FC<{ children: React.ReactNode }>;
+type ResizableType = ResizableRootType & {
+  Handle: React.FC<ResizableHandleProps>;
+  Panel: React.FC<PanelProps>;
+  PanelGroup: React.FC<ResizablePanelGroupProps>;
+};
+
+// This is only for storybook and is unnecessary for real-world use
+const ResizableRoot: ResizableRootType = ({ children }) => <>{children}</>;
+
+export const Resizable: ResizableType = Object.assign(ResizableRoot, {
+  Handle: ResizableHandle,
+  Panel,
+  PanelGroup: ResizablePanelGroup
+});

apps/playground/src/components/Resizable/ResizableHandle.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { cn } from '@douglasneuroinformatics/libui/utils';
+import { GripVertical } from 'lucide-react';
+import { PanelResizeHandle } from 'react-resizable-panels';
+
+export type ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {
+  withHandle?: boolean;
+};
+
+export const ResizableHandle = ({ className, withHandle, ...props }: ResizableHandleProps) => (
+  <PanelResizeHandle
+    className={cn(
+      'bg-border focus-visible:ring-ring focus-visible:outline-hidden relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
+      className
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="bg-border rounded-xs z-10 flex h-4 w-3 items-center justify-center border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </PanelResizeHandle>
+);

apps/playground/src/components/Resizable/ResizablePanelGroup.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { cn } from '@douglasneuroinformatics/libui/utils';
+import { PanelGroup } from 'react-resizable-panels';
+
+export type ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;
+
+export const ResizablePanelGroup = ({ className, ...props }: ResizablePanelGroupProps) => (
+  <PanelGroup
+    className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
+    {...props}
+  />
+);

apps/playground/src/components/Resizable/index.ts

@@ -0,0 +1 @@
+export * from './Resizable';