chore(comps): tsdoc update

packages/react/src/components/Edges/BaseEdge.tsx

@@ -4,6 +4,33 @@ import cc from 'classcat';
 import { EdgeText } from './EdgeText';
 import type { BaseEdgeProps } from '../../types';
 
+/**
+ * The `<BaseEdge />` component gets used internally for all the edges. It can be
+ *used inside a custom edge and handles the invisible helper edge and the edge label
+ *for you.
+ *
+ * @public
+ * @example
+ * ```jsx
+ *import { BaseEdge } from '@xyflow/react';
+ *
+ *export function CustomEdge({ sourceX, sourceY, targetX, targetY, ...props }) {
+ *  const [edgePath] = getStraightPath({
+ *    sourceX,
+ *    sourceY,
+ *    targetX,
+ *    targetY,
+ *  });
+ *
+ *  return <BaseEdge path={edgePath} {...props} />;
+ *}
+ *```
+ *
+ * @remarks If you want to use an edge marker with the [`<BaseEdge />`](/api-reference/components/base-edge) component,
+ *you can pass the `markerStart` or `markerEnd` props passed to your custom edge
+ *through to the [`<BaseEdge />`](/api-reference/components/base-edge) component. You can see all the props
+ *passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props) type.
+ */
 export function BaseEdge({
   path,
   labelX,

packages/react/src/components/Edges/EdgeText.tsx

@@ -73,4 +73,30 @@ function EdgeTextComponent({
 
 EdgeTextComponent.displayName = 'EdgeText';
 
+/**
+ * You can use the `<EdgeText />` component as a helper component to display text
+ *within your custom edges.
+ *
+ *@public
+ *
+ *@example
+ *```jsx
+ *import { EdgeText } from '@xyflow/react';
+ *
+ *export function CustomEdgeLabel({ label }) {
+ *  return (
+ *    <EdgeText
+ *      x={100}
+ *      y={100}
+ *      label={label}
+ *      labelStyle={{ fill: 'white' }}
+ *      labelShowBg
+ *      labelBgStyle={{ fill: 'red' }}
+ *      labelBgPadding={[2, 4]}
+ *      labelBgBorderRadius={2}
+ *    />
+ *  );
+ *}
+ *```
+ */
 export const EdgeText = memo(EdgeTextComponent);