@joshrp/react-flow-smart-edge 4.0.2

package/src/stories/DummyData.ts

@@ -0,0 +1,194 @@
+import { MarkerType } from "@xyflow/react";
+import { SmartBezierEdge, SmartStraightEdge, SmartStepEdge } from "../index";
+import { SmartEdgeCustomLabel } from "./CustomLabel";
+import type { Node, Edge } from "@xyflow/react";
+
+const markerEndType = MarkerType.Arrow;
+
+export const edgeTypes = {
+  smartBezier: SmartBezierEdge,
+  smartStraight: SmartStraightEdge,
+  smartStep: SmartStepEdge,
+  smartBezierLabel: SmartEdgeCustomLabel,
+};
+
+export const nodes: Node[] = [
+  {
+    id: "1",
+    data: {
+      label: "Node 1",
+    },
+    position: {
+      x: 490,
+      y: 40,
+    },
+  },
+  {
+    id: "2",
+    data: {
+      label: "Node 2",
+    },
+    position: {
+      x: 270,
+      y: 130,
+    },
+  },
+  {
+    id: "3",
+    data: {
+      label: "Node 3",
+    },
+    position: {
+      x: 40,
+      y: 220,
+    },
+  },
+  {
+    id: "4",
+    data: {
+      label: "Node 4",
+    },
+    position: {
+      x: 270,
+      y: 220,
+    },
+  },
+  {
+    id: "5",
+    data: {
+      label: "Node 5",
+    },
+    position: {
+      x: 470,
+      y: 220,
+    },
+  },
+  {
+    id: "6",
+    data: {
+      label: "Node 6",
+    },
+    position: {
+      x: 515,
+      y: 310,
+    },
+  },
+  {
+    id: "7",
+    data: {
+      label: "Node 7",
+    },
+    position: {
+      x: 470,
+      y: 130,
+    },
+  },
+];
+
+export const edgesBezier: Edge[] = [
+  {
+    id: "e12",
+    source: "1",
+    target: "2",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+    label: "Edge Label",
+  },
+  {
+    id: "e17",
+    source: "1",
+    target: "7",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+  {
+    id: "e23",
+    source: "2",
+    target: "3",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+  {
+    id: "e24",
+    source: "2",
+    target: "4",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+  {
+    id: "e25",
+    source: "2",
+    target: "5",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+  {
+    id: "e56",
+    source: "5",
+    target: "6",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+    data: {
+      customField: "custom data",
+    },
+  },
+  {
+    id: "e65",
+    source: "6",
+    target: "5",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+  {
+    id: "e61",
+    source: "6",
+    target: "1",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+  {
+    id: "e3",
+    source: "3",
+    target: "3",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+];
+
+export const edgesStraight: Edge[] = edgesBezier.map((edge) => ({
+  ...edge,
+  type: "smartStraight",
+}));
+
+export const edgesStep: Edge[] = edgesBezier.map((edge) => ({
+  ...edge,
+  type: "smartStep",
+}));
+
+export const edgesLabel: Edge[] = edgesBezier.map((edge) => ({
+  ...edge,
+  type: "smartBezierLabel",
+}));
+
+export const simpleNodes: Node[] = [
+  {
+    id: "1",
+    data: { label: "Node 1 (Below)" },
+    position: { x: 300, y: 300 },
+  },
+  {
+    id: "2",
+    data: { label: "Node 2 (Above)" },
+    position: { x: 300, y: 120 },
+  },
+];
+
+export const simpleEdgesBezier: Edge[] = [
+  {
+    id: "e1-2-simple",
+    source: "1",
+    target: "2",
+    type: "smartBezier",
+    markerEnd: { type: markerEndType },
+  },
+];

package/src/stories/GraphWrapper.tsx

@@ -0,0 +1,23 @@
+import { ReactFlow } from "@xyflow/react";
+import type { ReactFlowProps } from "@xyflow/react";
+import { SmartEdgeDebugProvider } from "../internal/SmartEdgeDebug";
+import { SmartEdgeDebugOverlay } from "../internal/SmartEdgeDebugOverlay";
+
+const style = {
+  background: "#fafafa",
+  width: "100%",
+  height: "500px",
+};
+
+export interface GraphWrapperProps extends ReactFlowProps {
+  smartEdgeDebug?: boolean;
+}
+
+export const GraphWrapper = (args: GraphWrapperProps) => (
+  <SmartEdgeDebugProvider value={args.smartEdgeDebug}>
+    <div data-testid="graph-wrapper" style={{ ...style, position: "relative" }}>
+      <ReactFlow {...args} />
+      <SmartEdgeDebugOverlay />
+    </div>
+  </SmartEdgeDebugProvider>
+);

package/src/stories/SmartEdge.stories.tsx

@@ -0,0 +1,67 @@
+import {
+  edgesBezier,
+  edgesStraight,
+  edgesStep,
+  edgesLabel,
+  nodes,
+  edgeTypes,
+  simpleNodes,
+  simpleEdgesBezier,
+} from "./DummyData";
+import { GraphWrapper } from "./GraphWrapper";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import type { ReactFlowProps } from "@xyflow/react";
+
+export default {
+  title: "Smart Edge",
+  component: GraphWrapper,
+  argTypes: {
+    smartEdgeDebug: {
+      control: { type: "boolean" },
+      defaultValue: false,
+      description: "Enable SmartEdge debug logging",
+      table: { category: "Debug" },
+    },
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+} as Meta;
+
+const Template: StoryFn<ReactFlowProps & { smartEdgeDebug?: boolean }> = (
+  args,
+) => <GraphWrapper {...args} />;
+
+export const SmartBezier = Template.bind({});
+SmartBezier.args = {
+  edgeTypes,
+  defaultNodes: nodes,
+  defaultEdges: edgesBezier,
+  smartEdgeDebug: false,
+};
+
+export const SmartStraight = Template.bind({});
+SmartStraight.args = {
+  ...SmartBezier.args,
+  defaultEdges: edgesStraight,
+};
+
+export const SmartStep = Template.bind({});
+SmartStep.args = {
+  ...SmartBezier.args,
+  defaultEdges: edgesStep,
+};
+
+export const SmartBezierWithCustomLabel = Template.bind({});
+SmartBezierWithCustomLabel.args = {
+  ...SmartBezier.args,
+  defaultEdges: edgesLabel,
+};
+
+export const SmartBezierSimple = Template.bind({});
+SmartBezierSimple.args = {
+  edgeTypes,
+  defaultNodes: simpleNodes,
+  defaultEdges: simpleEdgesBezier,
+  smartEdgeDebug: false,
+};

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />