From 32bac3e133072d233337bfc8ebb1a5dbf5bb8e73 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 7 May 2024 18:24:17 +0200
Subject: [PATCH 1/2] chore(react): cleanup examples

---
 examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx | 1 -
 examples/react/src/examples/Redux/index.tsx             | 1 -
 2 files changed, 2 deletions(-)

diff --git a/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx b/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx
index e1204169..cdd55a4b 100644
--- a/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx
+++ b/examples/react/src/examples/AddNodeOnEdgeDrop/index.tsx
@@ -12,7 +12,6 @@ import {
   Node,
   Edge,
 } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
 
 const initialNodes: Node[] = [
   {
diff --git a/examples/react/src/examples/Redux/index.tsx b/examples/react/src/examples/Redux/index.tsx
index 19bbd90c..ba706cd5 100644
--- a/examples/react/src/examples/Redux/index.tsx
+++ b/examples/react/src/examples/Redux/index.tsx
@@ -1,5 +1,4 @@
 import { ReactFlow } from '@xyflow/react';
-import '@xyflow/react/dist/style.css';
 
 import { useDispatch, useSelector, Provider } from 'react-redux';
 

From a364a93082fee798a63f579fa262f0e2818a9a39 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 7 May 2024 18:25:04 +0200
Subject: [PATCH 2/2] feat(react): add warning when styles not loaded #4047

---
 .../react/src/container/GraphView/index.tsx   |  2 ++
 .../GraphView/useStylesLoadedWarning.ts       | 23 +++++++++++++++++++
 packages/system/src/constants.ts              |  3 ++-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/container/GraphView/useStylesLoadedWarning.ts

diff --git a/packages/react/src/container/GraphView/index.tsx b/packages/react/src/container/GraphView/index.tsx
index 3edc380a..a2663851 100644
--- a/packages/react/src/container/GraphView/index.tsx
+++ b/packages/react/src/container/GraphView/index.tsx
@@ -9,6 +9,7 @@ import { useViewportSync } from '../../hooks/useViewportSync';
 import { ConnectionLineWrapper } from '../../components/ConnectionLine';
 import { useNodeOrEdgeTypesWarning } from './useNodeOrEdgeTypesWarning';
 import type { Edge, Node, ReactFlowProps } from '../../types';
+import { useStylesLoadedWarning } from './useStylesLoadedWarning';
 
 export type GraphViewProps<NodeType extends Node = Node, EdgeType extends Edge = Edge> = Omit<
   ReactFlowProps<NodeType, EdgeType>,
@@ -104,6 +105,7 @@ function GraphViewComponent<NodeType extends Node = Node, EdgeType extends Edge
 }: GraphViewProps<NodeType, EdgeType>) {
   useNodeOrEdgeTypesWarning(nodeTypes);
   useNodeOrEdgeTypesWarning(edgeTypes);
+  useStylesLoadedWarning();
 
   useOnInitHandler(onInit);
   useViewportSync(viewport);
diff --git a/packages/react/src/container/GraphView/useStylesLoadedWarning.ts b/packages/react/src/container/GraphView/useStylesLoadedWarning.ts
new file mode 100644
index 00000000..26841570
--- /dev/null
+++ b/packages/react/src/container/GraphView/useStylesLoadedWarning.ts
@@ -0,0 +1,23 @@
+import { useEffect, useRef } from 'react';
+import { errorMessages } from '@xyflow/system';
+
+import { useStoreApi } from '../../hooks/useStore';
+
+export function useStylesLoadedWarning() {
+  const store = useStoreApi();
+  const checked = useRef(false);
+
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'development') {
+      if (!checked.current) {
+        const pane = document.querySelector('.react-flow__pane');
+
+        if (pane && !(window.getComputedStyle(pane).zIndex === '1')) {
+          store.getState().onError?.('013', errorMessages['error013']('react'));
+        }
+
+        checked.current = true;
+      }
+    }
+  }, []);
+}
diff --git a/packages/system/src/constants.ts b/packages/system/src/constants.ts
index 67b913a0..9f5c63a5 100644
--- a/packages/system/src/constants.ts
+++ b/packages/system/src/constants.ts
@@ -1,6 +1,5 @@
 import { CoordinateExtent, HandleType } from './types';
 
-// @todo: update URLs to xyflow
 export const errorMessages = {
   error001: () =>
     '[React Flow]: Seems like you have not used zustand provider as an ancestor. Help: https://reactflow.dev/error#001',
@@ -23,6 +22,8 @@ export const errorMessages = {
   error011: (edgeType: string) => `Edge type "${edgeType}" not found. Using fallback type "default".`,
   error012: (id: string) =>
     `Node with id "${id}" does not exist, it may have been removed. This can happen when a node is deleted before the "onNodeClick" handler is called.`,
+  error013: (lib: string = 'react') =>
+    `It seems that you haven't loaded the styles. Please import '@xyflow/${lib}/dist/style.css' or base.css to make sure everything is working properly.`,
 };
 
 export const infiniteExtent: CoordinateExtent = [