Bump the npm_and_yarn group across 1 directory with 18 updates

.storybook/preview.js

@@ -1,4 +1,4 @@
-import 'reactflow/dist/style.css'
+import '@xyflow/react/dist/style.css'
 
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {

.vscode/settings.json

@@ -2,7 +2,7 @@
 	"editor.defaultFormatter": "esbenp.prettier-vscode",
 	"editor.formatOnSave": true,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	},
 	"[html]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"

package.json

@@ -1,6 +1,6 @@
 {
-	"name": "@tisoap/react-flow-smart-edge",
-	"version": "3.0.0",
+	"name": "@cloudfactory/react-flow-smart-edge",
+	"version": "1.0.0",
 	"keywords": [
 		"react",
 		"typescript",
@@ -86,6 +86,7 @@
 		"@types/react-dom": "^18.0.9",
 		"@typescript-eslint/eslint-plugin": "^6.6.0",
 		"@typescript-eslint/parser": "^6.6.0",
+		"@xyflow/react": "^12.3.5",
 		"chromatic": "^7.1.0",
 		"concurrently": "^8.2.1",
 		"dts-cli": "^2.0.3",
@@ -114,14 +115,13 @@
 		"prettier": "^3.0.3",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"reactflow": "^11.2.0",
 		"require-from-string": "^2.0.2",
 		"storybook": "^7.4.0",
 		"string-width": "^4.2.3",
 		"strip-ansi": "^6.0.1",
 		"typescript": "^5.2.2",
 		"wait-on": "^7.0.1",
-		"webpack": "^5.75.0"
+		"webpack": "^5.94.0"
 	},
 	"peerDependencies": {
 		"react": ">=17",

src/SmartBezierEdge/index.tsx

@@ -1,20 +1,25 @@
+import { useNodes, BezierEdge } from '@xyflow/react'
 import React from 'react'
-import { useNodes, BezierEdge } from 'reactflow'
 import { SmartEdge } from '../SmartEdge'
 import { svgDrawSmoothLinePath, pathfindingAStarDiagonal } from '../functions'
 import type { SmartEdgeOptions } from '../SmartEdge'
-import type { EdgeProps } from 'reactflow'
+import type { EdgeProps, Node } from '@xyflow/react'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from 'SmartEdge/SmartEdge.types'
 
 const BezierConfiguration: SmartEdgeOptions = {
 	drawEdge: svgDrawSmoothLinePath,
 	generatePath: pathfindingAStarDiagonal,
 	fallback: BezierEdge
 }
 
-export function SmartBezierEdge<EdgeDataType = unknown, NodeDataType = unknown>(
-	props: EdgeProps<EdgeDataType>
-) {
-	const nodes = useNodes<NodeDataType>()
+export function SmartBezierEdge<
+	EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>(props: EdgeProps<EdgeDataType>) {
+	const nodes = useNodes<Node<NodeDataType>>()
 
 	return (
 		<SmartEdge<EdgeDataType, NodeDataType>

src/SmartEdge/SmartEdge.types.ts

@@ -0,0 +1,7 @@
+import type { Edge } from '@xyflow/react'
+
+export type DefaultEdgeDataType = Edge<
+	Record<string, unknown>,
+	string | undefined
+>
+export type DefaultNodeDataType = Record<string, unknown>

src/SmartEdge/index.tsx

@@ -1,22 +1,34 @@
+import { BezierEdge, BaseEdge } from '@xyflow/react'
 import React from 'react'
-import { BezierEdge, BaseEdge } from 'reactflow'
 import { getSmartEdge } from '../getSmartEdge'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from './SmartEdge.types'
 import type { GetSmartEdgeOptions } from '../getSmartEdge'
-import type { EdgeProps, Node } from 'reactflow'
+import type { EdgeProps, Node, StepEdge, StraightEdge } from '@xyflow/react'
 
-export type EdgeElement = typeof BezierEdge
+export type EdgeElement =
+	| typeof BezierEdge
+	| typeof StepEdge
+	| typeof StraightEdge
 
 export type SmartEdgeOptions = GetSmartEdgeOptions & {
 	fallback?: EdgeElement
 }
 
-export interface SmartEdgeProps<EdgeDataType = unknown, NodeDataType = unknown>
-	extends EdgeProps<EdgeDataType> {
+export interface SmartEdgeProps<
+	EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+> extends EdgeProps<EdgeDataType> {
 	nodes: Node<NodeDataType>[]
 	options: SmartEdgeOptions
 }
 
-export function SmartEdge<EdgeDataType = unknown, NodeDataType = unknown>({
+export function SmartEdge<
+	EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>({
 	nodes,
 	options,
 	...edgeProps

src/SmartStepEdge/index.tsx

@@ -1,23 +1,28 @@
+import { useNodes, StepEdge } from '@xyflow/react'
 import React from 'react'
-import { useNodes, StepEdge } from 'reactflow'
 import { SmartEdge } from '../SmartEdge'
 import {
 	svgDrawStraightLinePath,
 	pathfindingJumpPointNoDiagonal
 } from '../functions'
 import type { SmartEdgeOptions } from '../SmartEdge'
-import type { EdgeProps } from 'reactflow'
+import type { EdgeProps, Node } from '@xyflow/react'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from 'SmartEdge/SmartEdge.types'
 
 const StepConfiguration: SmartEdgeOptions = {
 	drawEdge: svgDrawStraightLinePath,
 	generatePath: pathfindingJumpPointNoDiagonal,
 	fallback: StepEdge
 }
 
-export function SmartStepEdge<EdgeDataType = unknown, NodeDataType = unknown>(
-	props: EdgeProps<EdgeDataType>
-) {
-	const nodes = useNodes<NodeDataType>()
+export function SmartStepEdge<
+	EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>(props: EdgeProps<EdgeDataType>) {
+	const nodes = useNodes<Node<NodeDataType>>()
 
 	return (
 		<SmartEdge<EdgeDataType, NodeDataType>

src/SmartStraightEdge/index.tsx

@@ -1,12 +1,16 @@
+import { useNodes, StraightEdge } from '@xyflow/react'
 import React from 'react'
-import { useNodes, StraightEdge } from 'reactflow'
 import { SmartEdge } from '../SmartEdge'
 import {
 	svgDrawStraightLinePath,
 	pathfindingAStarNoDiagonal
 } from '../functions'
 import type { SmartEdgeOptions } from '../SmartEdge'
-import type { EdgeProps } from 'reactflow'
+import type { EdgeProps, Node } from '@xyflow/react'
+import type {
+	DefaultEdgeDataType,
+	DefaultNodeDataType
+} from 'SmartEdge/SmartEdge.types'
 
 const StraightConfiguration: SmartEdgeOptions = {
 	drawEdge: svgDrawStraightLinePath,
@@ -15,10 +19,10 @@ const StraightConfiguration: SmartEdgeOptions = {
 }
 
 export function SmartStraightEdge<
-	EdgeDataType = unknown,
-	NodeDataType = unknown
+	EdgeDataType extends DefaultEdgeDataType = DefaultEdgeDataType,
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
 >(props: EdgeProps<EdgeDataType>) {
-	const nodes = useNodes<NodeDataType>()
+	const nodes = useNodes<Node<NodeDataType>>()
 
 	return (
 		<SmartEdge<EdgeDataType, NodeDataType>

src/functions/createGrid.ts

@@ -6,7 +6,7 @@ import {
 import { graphToGridPoint } from './pointConversion'
 import { round, roundUp } from './utils'
 import type { NodeBoundingBox, GraphBoundingBox } from './getBoundingBoxes'
-import type { Position } from 'reactflow'
+import type { Position } from '@xyflow/react'
 
 export type PointInfo = {
 	x: number

src/functions/drawSvgPath.ts

@@ -1,4 +1,4 @@
-import type { XYPosition } from 'reactflow'
+import type { XYPosition } from '@xyflow/react'
 
 /**
  * Takes source and target {x, y} points, together with an array of number

src/functions/generatePath.ts

@@ -11,8 +11,8 @@ import {
 	Util,
 	DiagonalMovement
 } from 'pathfinding'
+import type { XYPosition } from '@xyflow/react'
 import type { Grid } from 'pathfinding'
-import type { XYPosition } from 'reactflow'
 
 /**
  * Takes source and target {x, y} points, together with an grid representation

src/functions/getBoundingBoxes.ts

@@ -1,5 +1,6 @@
 import { roundUp, roundDown } from './utils'
-import type { Node, XYPosition } from 'reactflow'
+import type { Node, XYPosition } from '@xyflow/react'
+import type { DefaultNodeDataType } from 'SmartEdge/SmartEdge.types'
 
 export type NodeBoundingBox = {
 	id: string
@@ -33,7 +34,9 @@ export type GraphBoundingBox = {
  * @param roundTo Everything will be rounded to this nearest integer
  * @returns Graph and nodes bounding boxes.
  */
-export const getBoundingBoxes = <NodeDataType = unknown>(
+export const getBoundingBoxes = <
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>(
 	nodes: Node<NodeDataType>[],
 	nodePadding = 2,
 	roundTo = 2
@@ -44,12 +47,11 @@ export const getBoundingBoxes = <NodeDataType = unknown>(
 	let yMin = Number.MAX_SAFE_INTEGER
 
 	const nodeBoxes: NodeBoundingBox[] = nodes.map((node) => {
-		const width = Math.max(node.width || 0, 1)
-		const height = Math.max(node.height || 0, 1)
+		const { width = 1, height = 1 } = node.measured || {}
 
 		const position: XYPosition = {
-			x: node.positionAbsolute?.x || 0,
-			y: node.positionAbsolute?.y || 0
+			x: node.position.x || 0,
+			y: node.position.y || 0
 		}
 
 		const topLeft: XYPosition = {

src/functions/guaranteeWalkablePath.ts

@@ -1,5 +1,5 @@
+import type { Position, XYPosition } from '@xyflow/react'
 import type { Grid } from 'pathfinding'
-import type { Position, XYPosition } from 'reactflow'
 
 type Direction = 'top' | 'bottom' | 'left' | 'right'
 

src/functions/pointConversion.ts

@@ -1,4 +1,4 @@
-import type { XYPosition } from 'reactflow'
+import type { XYPosition } from '@xyflow/react'
 
 /**
  * Each bounding box is a collection of X/Y points in a graph, and we

src/getSmartEdge/index.ts

@@ -11,7 +11,8 @@ import type {
 	PathFindingFunction,
 	SVGDrawFunction
 } from '../functions'
-import type { Node, EdgeProps } from 'reactflow'
+import type { Node, EdgeProps } from '@xyflow/react'
+import type { DefaultNodeDataType } from 'SmartEdge/SmartEdge.types'
 
 export type EdgeParams = Pick<
 	EdgeProps,
@@ -30,7 +31,9 @@ export type GetSmartEdgeOptions = {
 	generatePath?: PathFindingFunction
 }
 
-export type GetSmartEdgeParams<NodeDataType = unknown> = EdgeParams & {
+export type GetSmartEdgeParams<
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+> = EdgeParams & {
 	options?: GetSmartEdgeOptions
 	nodes: Node<NodeDataType>[]
 }
@@ -41,7 +44,9 @@ export type GetSmartEdgeReturn = {
 	edgeCenterY: number
 }
 
-export const getSmartEdge = <NodeDataType = unknown>({
+export const getSmartEdge = <
+	NodeDataType extends DefaultNodeDataType = DefaultNodeDataType
+>({
 	options = {},
 	nodes = [],
 	sourceX,