[DRAFT] feat: integrations dnd canvas

eslint.config.mjs

@@ -116,7 +116,7 @@ export default [
 				{
 					callees: ["cn"],
 					cssFiles: ["src/assets/index.css", "src/assets/loader.css"],
-					whitelist: ["(.*)current"],
+					whitelist: ["(.*)current", "nodrag", "nopan", "react-flow__edge-interaction"],
 				},
 			],
 			"@typescript-eslint/no-unused-expressions": "off",

package.json

@@ -72,6 +72,7 @@
 		"@types/lodash": "^4.17.13",
 		"@types/pako": "^2.0.3",
 		"@uiw/react-json-view": "^2.0.0-alpha.30",
+		"@xyflow/react": "^12.10.0",
 		"axios": "^1.9.0",
 		"clsx": "^2.1.1",
 		"dayjs": "^1.11.13",

src/components/molecules/modal.tsx

@@ -35,6 +35,7 @@ export const Modal = ({
 	forceOpen,
 	onCloseCallbackOverride,
 	clickOverlayToClose,
+	variant,
 }: ModalProps) => {
 	const { isOpen, onClose } = useModalStore((state) => {
 		const onClose = state.closeModal;
@@ -47,9 +48,23 @@ export const Modal = ({
 	const modalRef = useRef<HTMLDivElement | null>(null);
 
 	const wrapperClassName = cn("fixed left-0 top-0 z-modal flex size-full items-center justify-center", wrapperClass);
-	const modalClasses = cn("w-500 rounded-2xl border border-gray-950 bg-white p-3.5 text-gray-1250", className);
+	const modalClasses = cn(
+		"w-500 rounded-2xl border p-3.5",
+		{
+			"border-gray-950 bg-white text-gray-1250": variant !== "dark",
+			"border-gray-700 bg-gray-950 text-white": variant === "dark",
+		},
+		className
+	);
 	const bgClass = cn("absolute left-0 top-0 z-modal-overlay size-full bg-black/70");
-	const closeButtonClasseName = cn("group ml-auto h-default-icon w-default-icon bg-gray-250 p-0", closeButtonClass);
+	const closeButtonClasseName = cn(
+		"group ml-auto h-default-icon w-default-icon p-0",
+		{
+			"bg-gray-250": variant !== "dark",
+			"bg-gray-800": variant === "dark",
+		},
+		closeButtonClass
+	);
 	useEffect(() => {
 		if (isOpen && modalRef.current) {
 			const buttons = modalRef.current.querySelectorAll("button");
@@ -124,7 +139,12 @@ export const Modal = ({
 						>
 							{hideCloseButton ? null : (
 								<IconButton className={closeButtonClasseName} onClick={() => onClose(name)}>
-									<Close className="size-3 fill-black transition group-hover:fill-white" />
+									<Close
+										className={cn("size-3 transition", {
+											"fill-black group-hover:fill-white": variant !== "dark",
+											"fill-gray-400 group-hover:fill-white": variant === "dark",
+										})}
+									/>
 								</IconButton>
 							)}
 

src/components/organisms/configuration/configrationDrawer.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { useLocation, useParams } from "react-router-dom";
+import { LuLayoutDashboard } from "react-icons/lu";
+import { Link, useLocation, useParams } from "react-router-dom";
 
 import { defaultProjectSettingsWidth } from "@src/constants";
 import { EventListenerName } from "@src/enums";
@@ -14,6 +15,113 @@ import { ResizeButton } from "@components/atoms";
 import { Drawer } from "@components/molecules";
 import { ConfigurationBySubPath } from "@components/organisms/configuration/configurationBySubPath";
 
+const VisualModeButton = ({ projectId }: { projectId: string }) => {
+	const [isHovered, setIsHovered] = useState(false);
+
+	return (
+		<Link
+			className={cn(
+				"group relative mb-4 flex h-10 items-center overflow-hidden transition-all duration-500 ease-out",
+				isHovered ? "w-36" : "w-10"
+			)}
+			onMouseEnter={() => setIsHovered(true)}
+			onMouseLeave={() => setIsHovered(false)}
+			to={`/projects/${projectId}/canvas`}
+		>
+			<svg
+				className="absolute inset-0 size-full"
+				fill="none"
+				preserveAspectRatio="none"
+				viewBox="0 0 144 40"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<rect
+					className={cn("transition-all duration-300", isHovered ? "opacity-15" : "opacity-0")}
+					fill="#22c55e"
+					height="38"
+					rx="7"
+					width="142"
+					x="1"
+					y="1"
+				/>
+				<rect
+					className={cn("transition-opacity duration-300", isHovered ? "opacity-100" : "opacity-40")}
+					height="38"
+					rx="7"
+					stroke={isHovered ? "#22c55e" : "#4b5563"}
+					strokeWidth="1.5"
+					width="142"
+					x="1"
+					y="1"
+				/>
+				<rect
+					className={cn("transition-all duration-500", isHovered ? "opacity-100" : "opacity-0")}
+					height="38"
+					rx="7"
+					stroke="url(#visual-mode-gradient)"
+					strokeDasharray="30 330"
+					strokeLinecap="round"
+					strokeWidth="2"
+					style={{
+						animation: isHovered ? "border-trace 2s linear infinite" : "none",
+					}}
+					width="142"
+					x="1"
+					y="1"
+				/>
+				<defs>
+					<linearGradient id="visual-mode-gradient" x1="0%" x2="100%" y1="0%" y2="0%">
+						<stop offset="0%" stopColor="#22c55e">
+							<animate
+								attributeName="stop-color"
+								dur="2s"
+								repeatCount="indefinite"
+								values="#22c55e;#4ade80;#86efac;#4ade80;#22c55e"
+							/>
+						</stop>
+						<stop offset="100%" stopColor="#4ade80">
+							<animate
+								attributeName="stop-color"
+								dur="2s"
+								repeatCount="indefinite"
+								values="#4ade80;#86efac;#22c55e;#86efac;#4ade80"
+							/>
+						</stop>
+					</linearGradient>
+				</defs>
+			</svg>
+
+			<div className="relative z-10 flex items-center gap-2 px-2.5">
+				<LuLayoutDashboard
+					className={cn(
+						"size-5 shrink-0 transition-all duration-300",
+						isHovered ? "text-green-400" : "text-gray-400"
+					)}
+				/>
+				<span
+					className={cn(
+						"whitespace-nowrap text-sm font-medium transition-all duration-500",
+						isHovered
+							? "translate-x-0 text-green-400 opacity-100"
+							: "-translate-x-2 text-gray-400 opacity-0"
+					)}
+				>
+					Visual Mode
+				</span>
+			</div>
+
+			<style>
+				{`
+					@keyframes border-trace {
+						0% { stroke-dashoffset: 360; }
+						100% { stroke-dashoffset: 0; }
+					}
+				`}
+			</style>
+		</Link>
+	);
+};
+
 export const ProjectConfigurationDrawer = () => {
 	const { projectId } = useParams();
 	const location = useLocation();
@@ -80,6 +188,7 @@ export const ProjectConfigurationDrawer = () => {
 			width={drawerWidth}
 			wrapperClassName="p-0 relative absolute rounded-r-2xl"
 		>
+			{!location.pathname.includes("/canvas") && projectId ? <VisualModeButton projectId={projectId} /> : null}
 			<ConfigurationBySubPath settingsSubPath={settingsSubPath} />
 			<ResizeButton
 				className="absolute left-0 right-auto top-1/2 z-[125] w-2 -translate-y-1/2 cursor-ew-resize px-1 hover:bg-white"

src/components/organisms/index.ts

@@ -28,3 +28,10 @@ export { FileNode } from "@components/organisms/files/fileNode";
 export { OrgConnectionsTable } from "@components/organisms/orgConnections";
 export { OrgConnectionsDrawer } from "@components/organisms/orgConnectionsDrawer";
 export { ProjectConfigurationDrawer } from "@components/organisms/configuration/configrationDrawer";
+export {
+	WorkflowBuilder,
+	WorkflowCanvas,
+	IntegrationsSidebar,
+	IntegrationNode,
+	ConnectionEditorModal,
+} from "@components/organisms/workflowBuilder";