chore(types): add tsdocs

packages/system/src/types/changes.ts

@@ -42,7 +42,10 @@ export type NodeReplaceChange<NodeType extends NodeBase = NodeBase> = {
 };
 
 /**
- * Union type of all possible node changes.
+ * The [`onNodesChange`](/api-reference/react-flow#on-nodes-change) callback takes
+ *an array of `NodeChange` objects that you should use to update your flow's state.
+ *The `NodeChange` type is a union of six different object types that represent that
+ *various ways an node can change in a flow.
  * @public
  */
 export type NodeChange<NodeType extends NodeBase = NodeBase> =
@@ -67,6 +70,14 @@ export type EdgeReplaceChange<EdgeType extends EdgeBase = EdgeBase> = {
   type: 'replace';
 };
 
+/**
+ * The [`onEdgesChange`](/api-reference/react-flow#on-edges-change) callback takes
+ *an array of `EdgeChange` objects that you should use to update your flow's state.
+ *The `EdgeChange` type is a union of four different object types that represent that
+ *various ways an edge can change in a flow.
+ *
+ * @public
+ */
 export type EdgeChange<EdgeType extends EdgeBase = EdgeBase> =
   | EdgeSelectionChange
   | EdgeRemoveChange

packages/system/src/types/edges.ts

@@ -58,11 +58,24 @@ export type BezierPathOptions = {
   curvature?: number;
 };
 
+/**
+ * @inline
+ */
 export type DefaultEdgeOptionsBase<EdgeType extends EdgeBase> = Omit<
   EdgeType,
   'id' | 'source' | 'target' | 'sourceHandle' | 'targetHandle' | 'selected'
 >;
 
+/**
+ * If you set the `connectionLineType` prop on your [`<ReactFlow />`](/api-reference/react-flow#connection-connectionLineType)
+ *component, it will dictate the style of connection line rendered when creating
+ *new edges.
+ *
+ * @public
+ *
+ * @remarks If you choose to render a custom connection line component, this value will be
+ *passed to your component as part of its [`ConnectionLineComponentProps`](/api-reference/types/connection-line-component-props).
+ */
 export enum ConnectionLineType {
   Bezier = 'default',
   Straight = 'straight',
@@ -71,6 +84,13 @@ export enum ConnectionLineType {
   SimpleBezier = 'simplebezier',
 }
 
+/**
+ * Edges can optionally have markers at the start and end of an edge. The `EdgeMarker`
+ *type is used to configure those markers! Check the docs for [`MarkerType`](/api-reference/types/marker-type)
+ *for details on what types of edge marker are available.
+ *
+ * @public
+ */
 export type EdgeMarker = {
   type: MarkerType;
   color?: string;

packages/system/src/types/general.ts

@@ -26,6 +26,13 @@ export type SetViewport = (viewport: Viewport, options?: ViewportHelperFunctionO
 export type SetCenter = (x: number, y: number, options?: SetCenterOptions) => Promise<boolean>;
 export type FitBounds = (bounds: Rect, options?: FitBoundsOptions) => Promise<boolean>;
 
+/**
+ * The `Connection` type is the basic minimal description of an [`Edge`](/api-reference/types/edge)
+ *between two nodes. The [`addEdge`](/api-reference/utils/add-edge) util can be used to upgrade
+ *a `Connection` to an [`Edge`](/api-reference/types/edge).
+ *
+ * @public
+ */
 export type Connection = {
   source: string;
   target: string;
@@ -174,6 +181,12 @@ export type ConnectionInProgress<NodeType extends InternalNodeBase = InternalNod
   toPosition: Position;
   toNode: NodeType | null;
 };
+
+/**
+ * The `ConnectionState` type bundles all information about an ongoing connection. It is returned by the [`useConnection`](/api-reference/hooks/use-connection) hook.
+ *
+ * @public
+ */
 export type ConnectionState<NodeType extends InternalNodeBase = InternalNodeBase> =
   | ConnectionInProgress<NodeType>
   | NoConnection;

packages/system/src/types/utils.ts

@@ -33,4 +33,14 @@ export type Box = XYPosition & {
 
 export type Transform = [number, number, number];
 
+/**
+ * A coordinate extent represents two points in a coordinate system: one in the top
+ *left corner and one in the bottom right corner. It is used to represent the
+ *bounds of nodes in the flow or the bounds of the viewport.
+ *
+ * @public
+ *
+ * @remarks Props that expect a `CoordinateExtent` usually default to `[[-∞, -∞], [+∞, +∞]]`
+ *to represent an unbounded extent.
+ */
 export type CoordinateExtent = [[number, number], [number, number]];

packages/system/src/utils/edges/general.ts

@@ -144,13 +144,18 @@ export type ReconnectEdgeOptions = {
  * A handy utility to update an existing [`Edge`](/api-reference/types/edge) with new properties.
  *This searches your edge array for an edge with a matching `id` and updates its
  *properties with the connection you provide.
+ * @public
  * @param oldEdge - The edge you want to update
  * @param newConnection - The new connection you want to update the edge with
  * @param edges - The array of all current edges
  * @param options.shouldReplaceId - should the id of the old edge be replaced with the new connection id
  * @returns the updated edges array
- * 
- * @public
+ *
+ * @example
+ * ```js
+ *const onReconnect = useCallback(
+ *  (oldEdge: Edge, newConnection: Connection) => setEdges((els) => reconnectEdge(oldEdge, newConnection, els)),[]);
+ *```
  */
 export const reconnectEdge = <EdgeType extends EdgeBase>(
   oldEdge: EdgeType,