chore(components): add tsdocs for rf and provider

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({

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,

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);