Make it possible the BottomPanel on the right (#1045)

* Make it possible the `BottomPanel` on the right * Update PanelLayout.stories.tsx
alvarlagerlof · Jun 8, 2024 · fe3446e · fe3446e
1 parent 8ae76c5
commit fe3446e
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 6 deletions.
diff --git a/.changeset/forty-pumas-shake.md b/.changeset/forty-pumas-shake.md
@@ -0,0 +1,10 @@
+---
+"@rsc-parser/embedded": patch
+"@rsc-parser/core": patch
+"@rsc-parser/embedded-example": patch
+"@rsc-parser/chrome-extension": patch
+"@rsc-parser/storybook": patch
+"@rsc-parser/website": patch
+---
+
+Make it possible the `BottomPanel` on the right
diff --git a/packages/core/src/components/BottomPanel.stories.tsx b/packages/core/src/components/BottomPanel.stories.tsx
@@ -14,5 +14,6 @@ export const example: Story = {
     openButton: "RSC",
     isOpen: true,
     children: "Panel content",
+    position: "bottom",
   },
 };
diff --git a/packages/core/src/components/BottomPanel.tsx b/packages/core/src/components/BottomPanel.tsx
@@ -6,25 +6,27 @@ export function BottomPanel({
   openButton,
   children,
   isOpen,
+  position,
 }: {
   openButton: ReactNode;
   children: ReactNode;
   isOpen: boolean;
+  position: "bottom" | "right";
 }) {
   const [isDragging, setIsDragging] = useState(false);
 
   if (isOpen) {
     return (
       <PanelGroup
-        direction="vertical"
+        direction={position === "bottom" ? "vertical" : "horizontal"}
         // The `pointer-events-none` class is need to be able to click on the content underneath,
         // but if it's applied while dragging, the drag handler looses track very easily.
         // eslint-disable-next-line tailwindcss/classnames-order
         className={`fixed left-0 top-0 size-full z-[1000] ${isDragging ? "" : "pointer-events-none"}`}
       >
         <Panel order={1} defaultSize={70} />
         <PanelResizeHandle
-          className="pointer-events-auto h-3 w-full bg-slate-300 dark:bg-slate-700"
+          className={`pointer-events-auto bg-slate-300 dark:bg-slate-700 ${position === "bottom" ? "h-3 w-full" : "h-full w-3"}`}
           onDragging={(isDragging) => {
             setIsDragging(isDragging);
           }}
@@ -56,6 +58,7 @@ export function BottomPanelCloseButton({
       onClick={onClickClose}
     >
       <svg version="1.1" viewBox="0 0 24 24" className="size-6">
+        <title>Close</title>
         <path
           d="M18 18L12 12M12 12L6 6M12 12L18 6M12 12L6 18"
           stroke="currentColor"
@@ -82,3 +85,50 @@ export function BottomPanelOpenButton({
     </button>
   );
 }
+
+export function BottomPanelPositionSwitchButton({
+  currentPosition,
+  setCurrentPosition,
+}: {
+  currentPosition: "bottom" | "right";
+  setCurrentPosition: (position: "bottom" | "right") => void;
+}) {
+  return (
+    <button
+      onClick={() => {
+        setCurrentPosition(currentPosition === "bottom" ? "right" : "bottom");
+      }}
+      className="rounded-full bg-slate-300 p-1 dark:bg-slate-700 dark:text-white"
+    >
+      {currentPosition === "bottom" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="800px"
+          height="800px"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="size-6"
+        >
+          <title>
+            {currentPosition === "bottom"
+              ? "Position to the right"
+              : "Position on the bottom"}
+          </title>
+          <path d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zM5 5h9v14H5V5zm11 14V5h3l.002 14H16z" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="800px"
+          height="800px"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          className="size-6"
+        >
+          <path fill="none" d="M5 16h14.002v3H5zM5 5h14v9H5z" />
+          <path d="M19 3H5c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm0 2 .001 9H5V5h14zM5 19v-3h14.002v3H5z" />
+        </svg>
+      )}
+    </button>
+  );
+}
diff --git a/packages/core/src/components/PanelLayout.stories.tsx b/packages/core/src/components/PanelLayout.stories.tsx
@@ -13,6 +13,7 @@ export const small: Story = {
   name: "small",
   args: {
     header: "Header",
+    positionSwitchButton: "Position switch button",
     closeButton: "Close button",
     children: "Content",
   },

diff --git a/packages/core/src/components/PanelLayout.tsx b/packages/core/src/components/PanelLayout.tsx
@@ -2,18 +2,23 @@ import React, { ReactNode } from "react";
 
 export function PanelLayout({
   header,
+  positionSwitchButton,
   closeButton,
   children,
 }: {
   header: ReactNode;
+  positionSwitchButton?: ReactNode;
   closeButton?: ReactNode;
   children: ReactNode;
 }) {
   return (
     <div className="flex min-h-full flex-col text-sm">
-      <div className="sticky top-0 z-30 flex flex-row justify-between bg-slate-100 p-3 dark:bg-slate-900">
+      <div className="sticky top-0 z-30 flex flex-row justify-between gap-4 bg-slate-100 p-3 dark:bg-slate-900">
         <div className="flex flex-row items-center gap-4">{header}</div>
-        {closeButton}
+        <div className="flex flex-row items-center gap-2">
+          {positionSwitchButton}
+          {closeButton}
+        </div>
       </div>
       <div className="grow px-3">
         <div className="pb-3">{children}</div>

diff --git a/packages/core/src/main.ts b/packages/core/src/main.ts
@@ -15,6 +15,7 @@ import {
   BottomPanel,
   BottomPanelOpenButton,
   BottomPanelCloseButton,
+  BottomPanelPositionSwitchButton,
 } from "./components/BottomPanel";
 import { createFlightResponse as unstable_createFlightResponse } from "./createFlightResponse";
 
@@ -33,5 +34,6 @@ export {
   BottomPanel,
   BottomPanelOpenButton,
   BottomPanelCloseButton,
+  BottomPanelPositionSwitchButton,
   unstable_createFlightResponse,
 };
diff --git a/packages/embedded/RscDevtoolsPanel.tsx b/packages/embedded/RscDevtoolsPanel.tsx
@@ -7,8 +7,9 @@ import {
   ViewerStreamsEmptyState,
   RscChunkMessage,
   BottomPanel,
-  BottomPanelCloseButton,
   BottomPanelOpenButton,
+  BottomPanelCloseButton,
+  BottomPanelPositionSwitchButton,
   Logo,
   RecordButton,
   DebugCopyMessagesButton,
@@ -26,8 +27,26 @@ import React, {
   useSyncExternalStore,
 } from "react";
 
-export function RscDevtoolsPanel() {
+export function RscDevtoolsPanel({
+  position = "right",
+}: {
+  position?: "bottom" | "right" | undefined;
+}) {
   const [isOpen, setIsOpen] = useState(false);
+  const [currentPosition, setCurrentPosition] = useState(position);
+
+  useEffect(() => {
+    const localStoragePosition = localStorage.getItem(
+      "rscDevtoolsPanelPosition",
+    );
+
+    if (
+      typeof localStoragePosition === "string" &&
+      (localStoragePosition === "bottom" || localStoragePosition === "right")
+    ) {
+      setCurrentPosition(localStoragePosition);
+    }
+  }, []);
 
   const {
     isRecording,
@@ -44,6 +63,7 @@ export function RscDevtoolsPanel() {
         openButton={
           <BottomPanelOpenButton onClickOpen={() => setIsOpen(true)} />
         }
+        position={currentPosition}
       >
         <PanelLayout
           header={
@@ -66,6 +86,12 @@ export function RscDevtoolsPanel() {
               />
             </>
           }
+          positionSwitchButton={
+            <BottomPanelPositionSwitchButton
+              currentPosition={currentPosition}
+              setCurrentPosition={setCurrentPosition}
+            />
+          }
           closeButton={
             <BottomPanelCloseButton onClickClose={() => setIsOpen(false)} />
           }