feat(client): add react-flow css and base if else node

client/public/icons/node/ifElse.svg

@@ -0,0 +1,8 @@
+<svg width="28" height="31" viewBox="0 0 28 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 28.6L1.4 30L3 28.425L4.575 30L6 28.6L4.4 27L6 25.425L4.575 24L3 25.6L1.4 24L0 25.425L1.575 27L0 28.6Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 0C14.1 0 15.0419 0.391472 15.8252 1.1748C16.6085 1.95814 17 2.9 17 4C17 5.1 16.6085 6.04186 15.8252 6.8252C15.0419 7.60853 14.1 8 13 8C11.9 8 10.9581 7.60853 10.1748 6.8252C9.39147 6.04186 9 5.1 9 4C9 2.9 9.39147 1.95814 10.1748 1.1748C10.9581 0.391471 11.9 0 13 0ZM13 2C12.45 2 11.9796 2.19622 11.5879 2.58789C11.1962 2.97956 11 3.45 11 4C11 4.53333 11.1962 5.00039 11.5879 5.40039C11.9795 5.80013 12.4502 6 13 6C13.5498 6 14.0205 5.80013 14.4121 5.40039C14.8038 5.00039 15 4.53333 15 4C15 3.45 14.8038 2.97956 14.4121 2.58789C14.0204 2.19622 13.55 2 13 2Z" fill="#606060"/>
+<path d="M11.8 9H13.8V14H11.8V9Z" fill="#606060"/>
+<path d="M20 27.55L22.825 30.375L27.775 25.425L26.35 24L22.825 27.55L21.4 26.125L20 27.55Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.167 18.417L12.75 24.834L7.25005 19.334H4.00005L4 23H2L2.00005 17.5H7.25005L12.75 12L19.167 18.417ZM8.9229 18.417L12.75 22.2441L16.5772 18.417L12.75 14.5898L8.9229 18.417Z" fill="#606060"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 19.334L22 19.334V23H24V17.5L17.5 17.5V19.334Z" fill="#606060"/>
+</svg>

client/src/components/nodes/IfElseNode.tsx

@@ -0,0 +1,87 @@
+import { Handle, NodeProps, Position, Node } from "@xyflow/react";
+
+type IfElseNodeData = {
+  condition?: string;
+};
+
+export default function IfElseNode({ data }: NodeProps<Node & IfElseNodeData>) {
+  return (
+    <div
+      style={{
+        border: "0px solid",
+        borderRadius: 8,
+        backgroundColor: "white",
+        width: "248px",
+        height: "144px",
+        fontFamily: "sans-serif",
+        position: "relative",
+        overflow: "hidden",
+      }}
+      onClick={(e) => {
+        e.stopPropagation();
+        console.log("data", data);
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          padding: "8px 12px",
+          borderBottom: "1px solid #E2E2E2",
+          backgroundColor: "#fff",
+          height: "48px",
+          fontWeight: 600,
+          fontSize: 16,
+          gap: 8,
+        }}
+      >
+        <img src="./icons/node/ifElse.svg" /> ЕСЛИ - ТО
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: "12px",
+          borderBottom: "1px solid #E2E2E2",
+          fontSize: 14,
+          height: "48px",
+        }}
+      >
+        Если {data.condition as string}, то
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          paddingLeft: "12px",
+          fontSize: 14,
+          height: "48px",
+        }}
+      >
+        Иначе
+      </div>
+
+      <Handle
+        type="target"
+        position={Position.Top}
+        style={{ background: "#555" }}
+        id="input"
+      />
+
+      <Handle
+        type="source"
+        position={Position.Right}
+        style={{ background: "#555" }}
+        id="true"
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        style={{ background: "#555" }}
+        id="false"
+      />
+    </div>
+  );
+}

client/src/main.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React from "react";
-import ReactDOM from 'react-dom/client';
+import ReactDOM from "react-dom/client";
-import '@/index.css';
+import "@/index.css";
-import App from '@/App';
+import App from "@/App";
-import AppWrapper from '@/config/AppWrapper';
+import AppWrapper from "@/config/AppWrapper";
+import "@xyflow/react/dist/style.css";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 
 root.render(