From 55cf84516f76a06019591ed252a681f71e49ed3d Mon Sep 17 00:00:00 2001
From: aidanCQ <aidan.keay@quantinuum.com>
Date: Fri, 29 Dec 2023 20:34:32 +0000
Subject: [PATCH] feat(): Add resizeable component.

---
 package-lock.json                    | 16 +++++++++
 package.json                         |  5 +--
 src/atoms/resizable.tsx              | 43 ++++++++++++++++++++++++
 src/index.ts                         |  2 ++
 src/molecules/theme-selector.tsx     |  1 -
 stories/atoms/resizeable.stories.tsx | 49 ++++++++++++++++++++++++++++
 6 files changed, 113 insertions(+), 3 deletions(-)
 create mode 100644 src/atoms/resizable.tsx
 create mode 100644 stories/atoms/resizeable.stories.tsx

diff --git a/package-lock.json b/package-lock.json
index 35a8fe5..cd81fcd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,6 +46,7 @@
         "lucide-react": "^0.298.0",
         "react-day-picker": "^8.9.1",
         "react-hook-form": "^7.49.2",
+        "react-resizable-panels": "^1.0.5",
         "tailwind-merge": "^2.1.0"
       },
       "devDependencies": {
@@ -14176,6 +14177,15 @@
         }
       }
     },
+    "node_modules/react-resizable-panels": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-1.0.5.tgz",
+      "integrity": "sha512-OP0whNQCko+f4BgoptGaeIc7StBRyeMeJ+8r/7rXACBDf9W5EcMWuM32hfqPDMenS2HFy/eZVi/r8XqK+ZIEag==",
+      "peerDependencies": {
+        "react": "^16.14.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
@@ -26617,6 +26627,12 @@
         "tslib": "^2.0.0"
       }
     },
+    "react-resizable-panels": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-1.0.5.tgz",
+      "integrity": "sha512-OP0whNQCko+f4BgoptGaeIc7StBRyeMeJ+8r/7rXACBDf9W5EcMWuM32hfqPDMenS2HFy/eZVi/r8XqK+ZIEag==",
+      "requires": {}
+    },
     "react-style-singleton": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
diff --git a/package.json b/package.json
index cd68a06..358ca11 100644
--- a/package.json
+++ b/package.json
@@ -104,13 +104,14 @@
     "lucide-react": "^0.298.0",
     "react-day-picker": "^8.9.1",
     "react-hook-form": "^7.49.2",
+    "react-resizable-panels": "^1.0.5",
     "tailwind-merge": "^2.1.0"
   },
   "peerDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.3.6",
-    "tailwindcss-animate": "^1.0.7",
-    "@tailwindcss/typography": "^0.5.10"
+    "tailwindcss-animate": "^1.0.7"
   }
 }
diff --git a/src/atoms/resizable.tsx b/src/atoms/resizable.tsx
new file mode 100644
index 0000000..562f27d
--- /dev/null
+++ b/src/atoms/resizable.tsx
@@ -0,0 +1,43 @@
+import { DragHandleDots2Icon } from "@radix-ui/react-icons"
+import * as ResizablePrimitive from "react-resizable-panels"
+
+import { cn } from "src/utils"
+
+const ResizablePanelGroup = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn(
+      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+      className
+    )}
+    {...props}
+  />
+)
+
+const ResizablePanel = ResizablePrimitive.Panel
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring 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="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+)
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle }
diff --git a/src/index.ts b/src/index.ts
index 1fa4c3e..dde4edc 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -22,6 +22,7 @@ export * from "./atoms/navigation-menu";
 export * from "./atoms/popover";
 export * from "./atoms/progress";
 export * from "./atoms/radio-group";
+export * from "./atoms/resizable";
 export * from "./atoms/scroll-area";
 export * from "./atoms/select";
 export * from "./atoms/separator";
@@ -42,3 +43,4 @@ export * from "./molecules/slide-in";
 export * from "./molecules/theme-selector";
 export * from "./tailwindTheme";
 export * from "./utils";
+
diff --git a/src/molecules/theme-selector.tsx b/src/molecules/theme-selector.tsx
index 142325a..c532c63 100644
--- a/src/molecules/theme-selector.tsx
+++ b/src/molecules/theme-selector.tsx
@@ -4,7 +4,6 @@ import React from "react";
 import { Button } from "src/atoms/button";
 import { theme as _theme } from "src/utils";
 
-type Mode = ReturnType<typeof _theme['get']>['mode']
 export const useTheme = () => {
 
   const [theme, _setTheme] = React.useState<ReturnType<typeof _theme['get']>>(typeof window !== "undefined" ? _theme.get() : {mode: "dark", isDark: true});
diff --git a/stories/atoms/resizeable.stories.tsx b/stories/atoms/resizeable.stories.tsx
new file mode 100644
index 0000000..344a6ea
--- /dev/null
+++ b/stories/atoms/resizeable.stories.tsx
@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "src";
+  
+function ResizeableDemo() {
+    return (
+      <ResizablePanelGroup
+        direction="horizontal"
+        className="max-w-md rounded-lg border"
+      >
+        <ResizablePanel defaultSize={50}>
+          <div className="flex h-[200px] items-center justify-center p-6">
+            <span className="font-semibold">One</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={50}>
+          <ResizablePanelGroup direction="vertical">
+            <ResizablePanel defaultSize={25}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Two</span>
+              </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel defaultSize={75}>
+              <div className="flex h-full items-center justify-center p-6">
+                <span className="font-semibold">Three</span>
+              </div>
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    )
+  }
+  
+
+const meta: Meta<typeof ResizeableDemo> = {
+  component: ResizeableDemo,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof ResizeableDemo> = {
+  args: {},
+};