Replace custom controls with shadcn and add AddBlockDropdown (#118)

softflow24 · Oct 11, 2024 · 0637b3f · 0637b3f
1 parent 8e3704d
commit 0637b3f
Show file tree

Hide file tree

Showing 15 changed files with 6,997 additions and 8,414 deletions.
diff --git a/packages/editor/src/components/RightPanel.tsx b/packages/editor/src/components/RightPanel.tsx
@@ -3,10 +3,11 @@ import { useReactFlowState } from "@/hooks/useReactFlowState";
 import { useLayoutState } from "@/hooks/useLayoutState";
 import { updateNodesData } from "@/slices/reactFlowSlice";
 import { useDispatch } from "react-redux";
-import { GitBranch } from "lucide-react";
+import { X } from "lucide-react";
 import LogicNodePanelView from "./panelViews/LogicNodePanelView";
 import { ICondition } from "@data-river/shared/interfaces/ICondition";
-
+import { Button } from "@data-river/shared/ui/components/ui/button";
+import { toggleRightPanelVisible } from "@/store";
 const RightPanel = () => {
   const { isRightPanelVisible } = useLayoutState();
   const { nodes, selectedNodeId } = useReactFlowState();
@@ -31,11 +32,6 @@ const RightPanel = () => {
     );
   };
 
-  const handleDeleteNode = () => {
-    // Implement node deletion logic here
-    console.log("Delete node:", selectedNode?.id);
-  };
-
   const renderPanelView = () => {
     switch (selectedNode.data.block) {
       case "[email protected]":
@@ -50,7 +46,6 @@ const RightPanel = () => {
             }
             onConfigChange={handleConfigChange}
             inputs={selectedNode.data.inputs || {}}
-            onDeleteNode={handleDeleteNode}
           />
         );
       // Add cases for other node types here
@@ -61,11 +56,17 @@ const RightPanel = () => {
 
   return (
     <div className="bg-background h-full w-full p-4 border-l border-border overflow-y-auto">
-      <div className="flex items-center mb-4">
-        <GitBranch className="w-5 h-5 mr-2 text-blue-500" />
+      <div className="flex items-center justify-between mb-4">
         <h2 className="text-lg font-semibold">
           {selectedNode.data.label} Settings
         </h2>
+        <Button
+          variant="outline"
+          size="icon"
+          onClick={() => dispatch(toggleRightPanelVisible())}
+        >
+          <X />
+        </Button>
       </div>
       {renderPanelView()}
     </div>

diff --git a/packages/editor/src/components/controls/ActionToolsControls.tsx b/packages/editor/src/components/controls/ActionToolsControls.tsx
@@ -1,41 +1,44 @@
 import { FC } from "react";
-import { PlusCircle, MousePointer, Hand, LayoutGrid } from "lucide-react";
+import { PlusCircle, MousePointer, Hand } from "lucide-react";
+import { Separator } from "@data-river/shared/ui/components/ui/separator";
 
-import ControlButton from "./ControlButton";
-import ControlSeparator from "./ControlSeparator";
+import { Button } from "@data-river/shared/ui/components/ui/button";
+import { AddBlockDropdownMenu } from "./AddBlockDropdown";
 
 interface ActionToolsControlsProps {
   addNewNode: () => void;
   toggleMinimalist: () => void;
 }
 
-const ActionToolsControls: FC<ActionToolsControlsProps> = ({
-  addNewNode,
-  toggleMinimalist,
-}) => {
+const ActionToolsControls: FC<ActionToolsControlsProps> = ({ addNewNode }) => {
   return (
-    <div className="flex items-center bg-white p-2 rounded-lg shadow-md">
-      <ControlButton onClick={addNewNode}>
-        <PlusCircle size={20} />
-      </ControlButton>
-
-      <ControlSeparator />
-
-      <ControlButton onClick={() => alert("Not implemented")}>
-        <MousePointer size={20} />
-      </ControlButton>
-
-      <ControlSeparator />
-
-      <ControlButton onClick={() => alert("Not implemented")} active={true}>
-        <Hand size={20} />
-      </ControlButton>
-
-      <ControlSeparator />
-
-      <ControlButton onClick={toggleMinimalist}>
-        <LayoutGrid size={20} />
-      </ControlButton>
+    <div className="flex items-center bg-background border p-2 rounded-lg shadow-md space-x-1.5">
+      <AddBlockDropdownMenu>
+        <Button variant="ghost" size="icon" onClick={addNewNode}>
+          <PlusCircle className="h-1/2 w-1/2" />
+        </Button>
+      </AddBlockDropdownMenu>
+
+      <Separator orientation="vertical" />
+
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => alert("Not implemented")}
+      >
+        <MousePointer className="h-1/2 w-1/2" />
+      </Button>
+
+      <Separator orientation="vertical" />
+
+      <Button
+        variant="ghost"
+        size="icon"
+        onClick={() => alert("Not implemented")}
+        className="text-focus-foreground bg-focus/60 hover:bg-focus/100"
+      >
+        <Hand className="h-1/2 w-1/2" />
+      </Button>
     </div>
   );
 };

diff --git a/packages/editor/src/components/controls/AddBlockDropdown.tsx b/packages/editor/src/components/controls/AddBlockDropdown.tsx
@@ -0,0 +1,71 @@
+import { TextCursorInput, Square, GitBranch, Plus } from "lucide-react";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@data-river/shared/ui/components/ui/dropdown-menu";
+
+interface AddBlockDropdownMenuProps {
+  direction?: "up" | "down";
+  children: React.ReactNode;
+}
+
+export function AddBlockDropdownMenu({
+  direction = "down",
+  children,
+}: AddBlockDropdownMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="w-56"
+        side={direction === "up" ? "top" : "bottom"}
+        align="start"
+        sideOffset={12}
+        alignOffset={-8}
+      >
+        <DropdownMenuLabel>Add Block to Flow</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuSub>
+            <DropdownMenuSubTrigger>
+              <TextCursorInput className="mr-2 h-4 w-4 " />
+              <span>Input</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <TextCursorInput className="mr-2 h-4 w-4 " />
+                <span>Input Node</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Square className="mr-2 h-4 w-4 " />
+                <span>Simple Input</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuSub>
+          <DropdownMenuItem>
+            <GitBranch className="mr-2 h-4 w-4 " />
+            <span>Logic</span>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <Square className="mr-2 h-4 w-4 " />
+            <span>Output</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>
+          <Plus className="mr-2 h-4 w-4" />
+          <span>Add Custom Block</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/packages/editor/src/components/controls/ControlButton.tsx b/packages/editor/src/components/controls/ControlButton.tsx
diff --git a/packages/editor/src/components/controls/ControlSeparator.tsx b/packages/editor/src/components/controls/ControlSeparator.tsx
diff --git a/packages/editor/src/components/controls/MiniMapZoomControls.tsx b/packages/editor/src/components/controls/MiniMapZoomControls.tsx
@@ -2,32 +2,39 @@ import { FC } from "react";
 import { ZoomOut, ZoomIn } from "lucide-react";
 import Minimap from "./minimap";
 
-import ControlButton from "./ControlButton";
+import { Button } from "@data-river/shared/ui/components/ui/button";
 
 interface MiniMapZoomControlsProps {
   zoomOut: () => void;
   zoomIn: () => void;
+  resetZoom: () => void;
   zoom: number;
 }
 
 const MiniMapZoomControls: FC<MiniMapZoomControlsProps> = ({
   zoomOut,
   zoomIn,
   zoom,
+  resetZoom,
 }) => {
   return (
-    <div className="mr-2 flex flex-col items-center bg-white p-2 rounded-lg shadow-md">
+    <div className="mx-2 flex flex-col items-center bg-background border rounded-lg shadow-md relative justify-center p-2">
       <Minimap />
-      <div className="mt-2 flex items-center justify-between w-auto">
-        <ControlButton onClick={zoomOut}>
-          <ZoomOut size={20} />
-        </ControlButton>
-        <span className="mx-2 text-sm font-medium text-gray-500">
+
+      <div className="flex items-center justify-between w-full">
+        <Button variant="ghost" size="icon" onClick={zoomOut}>
+          <ZoomOut className="h-1/2 w-1/2" />
+        </Button>
+        <Button
+          variant="ghost"
+          className="select-none w-14"
+          onClick={resetZoom}
+        >
           {Math.round(zoom * 100)}%
-        </span>
-        <ControlButton onClick={zoomIn}>
-          <ZoomIn size={20} />
-        </ControlButton>
+        </Button>
+        <Button variant="ghost" size="icon" onClick={zoomIn}>
+          <ZoomIn className="h-1/2 w-1/2" />
+        </Button>
       </div>
     </div>
   );

diff --git a/packages/editor/src/components/controls/UndoRedoControls.tsx b/packages/editor/src/components/controls/UndoRedoControls.tsx
@@ -1,33 +1,41 @@
 import { FC } from "react";
 import { Undo, Redo } from "lucide-react";
 
-import ControlButton from "./ControlButton";
+import { Button } from "@data-river/shared/ui/components/ui/button";
+import { Separator } from "@data-river/shared/ui/components/ui/separator";
 
 const UndoRedoControls: FC = () => {
   // TODO: Implement undo and redo
   // github.com/xplato/useUndoable
   // https://www.npmjs.com/package/use-undoable
 
   return (
-    <div className="mr-2 flex items-center bg-white p-2 rounded-lg shadow-md">
-      <ControlButton
+    <div className="mr-2 flex items-center bg-background border p-2 rounded-lg shadow-md space-x-1.5">
+      <Button
+        variant="ghost"
+        size="icon"
         onClick={() =>
           alert(
             "not implemented, read UndoRedoControls to find resources to implement",
           )
         }
       >
-        <Undo size={20} />
-      </ControlButton>
-      <ControlButton
+        <Undo className="h-1/2 w-1/2" />
+      </Button>
+
+      <Separator orientation="vertical" />
+
+      <Button
+        variant="ghost"
+        size="icon"
         onClick={() =>
           alert(
             "not implemented, read UndoRedoControls to find resources to implement",
           )
         }
       >
-        <Redo size={20} />
-      </ControlButton>
+        <Redo className="h-1/2 w-1/2" />
+      </Button>
     </div>
   );
 };

diff --git a/packages/editor/src/components/controls/index.tsx b/packages/editor/src/components/controls/index.tsx
@@ -26,6 +26,10 @@ const Controls: FC = () => {
     setReactFlowViewport({ ...viewport, zoom });
   }, [viewport, setReactFlowViewport]);
 
+  const onResetZoom = useCallback(() => {
+    setReactFlowViewport({ ...viewport, zoom: 1 });
+  }, [viewport, setReactFlowViewport]);
+
   function addNewNode() {
     // Implement this function in the reactFlowSlice if needed
     // For now, we'll just log a message
@@ -40,6 +44,7 @@ const Controls: FC = () => {
       <MiniMapZoomControls
         zoomOut={onZoomOut}
         zoomIn={onZoomIn}
+        resetZoom={onResetZoom}
         zoom={viewport.zoom}
       />
       <UndoRedoControls />

diff --git a/packages/editor/src/components/controls/minimap/index.tsx b/packages/editor/src/components/controls/minimap/index.tsx
@@ -5,6 +5,7 @@ const MiniMap = () => {
   return (
     <FlowMiniMap
       className={styles.miniMap}
+      style={{ width: 145, height: 110 }}
       position="bottom-left"
       pannable
       zoomable

diff --git a/packages/editor/src/components/panelViews/LogicNodePanelView.tsx b/packages/editor/src/components/panelViews/LogicNodePanelView.tsx
@@ -10,15 +10,13 @@ interface LogicNodePanelViewProps {
   };
   onConfigChange: (config: any) => void;
   inputs: Record<string, unknown>;
-  onDeleteNode: () => void;
 }
 
 const LogicNodePanelView: React.FC<LogicNodePanelViewProps> = ({
   nodeId,
   config,
   onConfigChange,
   inputs,
-  onDeleteNode,
 }) => {
   const handleConditionsChange = (conditions: ICondition[]) => {
     onConfigChange({ ...config, conditions });

diff --git a/packages/editor/src/utils/customLogger.ts b/packages/editor/src/utils/customLogger.ts
@@ -10,7 +10,6 @@ function serializeData(data: unknown): any {
       name: data.name,
       message: data.message,
       stack: data.stack,
-      // Add any custom properties
       ...(data as any),
     };
   } else if (typeof data === "object" && data !== null) {