From 0848bc936701193c5ac122e8fd45da11d0670341 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 11 Feb 2025 15:31:19 +0100
Subject: [PATCH] chore(components): add tsdocs for rf and provider

---
 .../src/components/Edges/SimpleBezierEdge.tsx |  2 +-
 .../components/ReactFlowProvider/index.tsx    | 35 +++++++++++++++++++
 .../react/src/container/ReactFlow/index.tsx   | 20 +++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
index 102c163e..1c8c2697 100644
--- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx
+++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx
@@ -31,7 +31,7 @@ function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number]
 
 /**
  * The `getSimpleBezierPath` util returns everything you need to render a simple
-bezier edge between two nodes.
+ *bezier edge between two nodes.
  * @public 
  */
 export function getSimpleBezierPath({
diff --git a/packages/react/src/components/ReactFlowProvider/index.tsx b/packages/react/src/components/ReactFlowProvider/index.tsx
index b29f5f17..b8b4bf40 100644
--- a/packages/react/src/components/ReactFlowProvider/index.tsx
+++ b/packages/react/src/components/ReactFlowProvider/index.tsx
@@ -19,6 +19,41 @@ export type ReactFlowProviderProps = {
   children: ReactNode;
 };
 
+/**
+ * The `<ReactFlowProvider />` component is a
+ *[context provider](https://react.dev/learn/passing-data-deeply-with-context#) that
+ *makes it possible to access a flow's internal state outside of the
+ *[`<ReactFlow />`](/api-reference/react-flow) component. Many of the hooks we
+ *provide rely on this component to work.
+ * @public
+ *
+ * @example
+ * ```tsx
+ *import { ReactFlow, ReactFlowProvider, useNodes } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (
+ *    <ReactFlowProvider>
+ *      <ReactFlow nodes={...} edges={...} />
+ *      <Sidebar />
+ *    </ReactFlowProvider>
+ *  );
+ *}
+ *
+ *function Sidebar() {
+ *  // This hook will only work if the component it's used in is a child of a
+ *  // <ReactFlowProvider />.
+ *  const nodes = useNodes()
+ *
+ *  return <aside>do something with nodes</aside>;
+ *}
+ *```
+ *
+ * @remarks If you're using a router and want your flow's state to persist across routes,
+ *it's vital that you place the `<ReactFlowProvider />` component _outside_ of
+ *your router. If you have multiple flows on the same page you will need to use a separate
+ *`<ReactFlowProvider />` for each flow.
+ */
 export function ReactFlowProvider({
   initialNodes: nodes,
   initialEdges: edges,
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index 82206fc8..c9b504aa 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -301,4 +301,24 @@ function ReactFlow<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
   );
 }
 
+/**
+ * The `<ReactFlow />` component is the heart of your React Flow application. It
+ *renders your nodes and edges and handles user interaction
+ *
+ * @public
+ *
+ * @example
+ * ```tsx
+ *import { ReactFlow } from '@xyflow/react'
+ *
+ *export default function Flow() {
+ *  return (<ReactFlow
+ *    nodes={...}
+ *    edges={...}
+ *    onNodesChange={...}
+ *    ...
+ *  />);
+ *}
+ *```
+ */
 export default fixedForwardRef(ReactFlow);