@mp70/react-networks 0.1.0-alpha → 0.1.1-alpha

package/README.md

@@ -1,7 +1,7 @@
-# @react-networks/network-diagrams
+# @mp70/react-networks
 
-[![npm version](https://badge.fury.io/js/%40react-networks%2Fnetwork-diagrams.svg)](https://badge.fury.io/js/%40react-networks%2Fnetwork-diagrams)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm version](https://badge.fury.io/js/%40mp70%2Freact-networks.svg)](https://badge.fury.io/js/%40mp70%2Freact-networks)
+[![License: AGPL v3](https://img.shields.io/badge/License-AGPLv3-blue.svg)](https://www.gnu.org/licenses/agpl-3.0)
 [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
 
 A production-ready React library for creating interactive network diagrams with support for rack management, fiber networks, and power distribution. Built on React Flow with TypeScript support.
@@ -14,7 +14,7 @@ A production-ready React library for creating interactive network diagrams with
 - **⚡ Power Distribution**: Vertical PDU support with power connections
 - **👁️ View Switching**: Front/rear view switching for devices and racks
 - **📐 Rack Alignment**: Align rack bottoms to the same horizontal plane
-- **🔗 NetBox Integration**: Built-in support for NetBox data import/export
+- **🔗 Inventory Integration**: Built-in helpers to import/export generic inventory/CMDB data
 - **🎨 Customizable**: Extensive styling and theming options
 - **📱 Responsive**: Works on desktop and mobile devices
 - **🔧 TypeScript**: Full TypeScript support with comprehensive type definitions
@@ -24,19 +24,19 @@ A production-ready React library for creating interactive network diagrams with
 ### Installation
 
 ```bash
-npm install @react-networks/network-diagrams react react-dom reactflow
+npm install @mp70/react-networks react react-dom reactflow
 # or
-yarn add @react-networks/network-diagrams react react-dom reactflow
+yarn add @mp70/react-networks react react-dom reactflow
 # or
-pnpm add @react-networks/network-diagrams react react-dom reactflow
+pnpm add @mp70/react-networks react react-dom reactflow
 ```
 
 ### Basic Usage
 
 ```tsx
 import React from 'react';
-import { NetworkDiagram, NetworkNode, NetworkEdge } from '@react-networks/network-diagrams';
-import '@react-networks/network-diagrams/index.css';
+import { NetworkDiagram, NetworkNode, NetworkEdge } from '@mp70/react-networks';
+import '@mp70/react-networks/index.css';
 
 const nodes: NetworkNode[] = [
   {
@@ -144,7 +144,7 @@ type NetworkEdgeType = 'fiber' | 'ethernet' | 'power';
 ### Rack Configuration
 
 ```tsx
-import { RackConfig, buildNodesFromRackConfig, Width } from '@react-networks/network-diagrams';
+import { RackConfig, buildNodesFromRackConfig, Width } from '@mp70/react-networks';
 
 const rackSchema: RackConfig[] = [
   {
@@ -190,24 +190,24 @@ const rackSchema: RackConfig[] = [
 const nodes = buildNodesFromRackConfig(rackSchema);
 ```
 
-### NetBox Integration
+### Inventory Integration
 
 ```tsx
-import { netboxToNetworkDiagram } from '@react-networks/network-diagrams';
+import { inventoryToNetworkDiagram } from '@mp70/react-networks';
 
-const netboxData = {
-  racks: [...], // NetBox rack data
-  devices: [...], // NetBox device data
-  cables: [...] // NetBox cable data
+const inventoryData = {
+  racks: [...],
+  devices: [...],
+  cables: [...]
 };
 
-const { nodes, edges } = netboxToNetworkDiagram(netboxData);
+const { nodes, edges } = inventoryToNetworkDiagram(inventoryData);
 ```
 
 ### Custom Styling
 
 ```tsx
-import '@react-networks/network-diagrams/index.css';
+import '@mp70/react-networks/index.css';
 
 // Override CSS variables
 .network-diagram {
@@ -312,7 +312,7 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
 
 ## 📄 License
 
-MIT License - see [LICENSE](LICENSE) for details.
+Dual-licensed under AGPL-3.0 or Commercial. See [LICENSE](LICENSE) for details.
 
 ## 🆘 Support
 
@@ -324,7 +324,7 @@ MIT License - see [LICENSE](LICENSE) for details.
 ## 🙏 Acknowledgments
 
 - [React Flow](https://reactflow.dev) for the excellent diagram foundation
-- [NetBox](https://netbox.dev) for network infrastructure management inspiration
+- Network inventory/CMDB projects for inspiration
 - The open source community for feedback and contributions
 
 ---

package/dist/index.css

@@ -20,4 +20,73 @@
   z-index: 500 !important;
 }
 
+/* React Flow theming */
+.react-flow-dark {
+  --react-flow-background: #1a1a1a;
+  --react-flow-text: #ffffff;
+  --react-flow-border: #404040;
+  --react-flow-controls-bg: #2d2d2d;
+  --react-flow-controls-border: #404040;
+  --react-flow-minimap-bg: #2d2d2d;
+  --react-flow-minimap-border: #404040;
+}
+
+.react-flow-light {
+  --react-flow-background: #ffffff;
+  --react-flow-text: #1a1a1a;
+  --react-flow-border: #e9ecef;
+  --react-flow-controls-bg: #f8f9fa;
+  --react-flow-controls-border: #e9ecef;
+  --react-flow-minimap-bg: #f8f9fa;
+  --react-flow-minimap-border: #e9ecef;
+}
+
+/* Apply ReactFlow theming */
+.react-flow-dark .react-flow__background {
+  background-color: var(--react-flow-background);
+}
+
+.react-flow-light .react-flow__background {
+  background-color: var(--react-flow-background);
+}
+
+.react-flow-dark .react-flow__controls {
+  background-color: var(--react-flow-controls-bg);
+  border-color: var(--react-flow-controls-border);
+}
+
+.react-flow-light .react-flow__controls {
+  background-color: var(--react-flow-controls-bg);
+  border-color: var(--react-flow-controls-border);
+}
+
+.react-flow-dark .react-flow__minimap {
+  background-color: var(--react-flow-minimap-bg);
+  border-color: var(--react-flow-minimap-border);
+}
+
+.react-flow-light .react-flow__minimap {
+  background-color: var(--react-flow-minimap-bg);
+  border-color: var(--react-flow-minimap-border);
+}
+
+.react-flow-dark .react-flow__controls-button {
+  background-color: var(--react-flow-controls-bg);
+  color: var(--react-flow-text);
+  border-color: var(--react-flow-controls-border);
+}
+
+.react-flow-light .react-flow__controls-button {
+  background-color: var(--react-flow-controls-bg);
+  color: var(--react-flow-text);
+  border-color: var(--react-flow-controls-border);
+}
+
+.react-flow-dark .react-flow__controls-button:hover {
+  background-color: #4b5563;
+}
+
+.react-flow-light .react-flow__controls-button:hover {
+  background-color: #e9ecef;
+}
 

package/dist/index.d.mts

@@ -1,151 +1,6 @@
 import React$1 from 'react';
 import { NodeProps, EdgeProps } from 'reactflow';
 
-interface NetBoxDevice {
-    id: number;
-    name: string;
-    device_type: {
-        id: number;
-        model: string;
-        manufacturer: {
-            name: string;
-        };
-    };
-    device_role: {
-        name: string;
-        color: string;
-    };
-    site: {
-        name: string;
-    };
-    rack: {
-        id: number;
-        name: string;
-    } | null;
-    position: number | null;
-    face: 'front' | 'rear' | null;
-    status: {
-        label: string;
-        value: string;
-        color: string;
-    };
-    primary_ip4?: {
-        address: string;
-    };
-    primary_ip6?: {
-        address: string;
-    };
-    interfaces: NetBoxInterface[];
-}
-interface NetBoxInterface {
-    id: number;
-    name: string;
-    type: {
-        label: string;
-        value: string;
-    };
-    enabled: boolean;
-    mac_address: string | null;
-    mtu: number | null;
-    connected_endpoint_type: string | null;
-    connected_endpoint: {
-        device: {
-            name: string;
-        };
-        name: string;
-    } | null;
-    cable: {
-        id: number;
-        label: string;
-        type: string;
-        color: string;
-    } | null;
-}
-interface NetBoxRack {
-    id: number;
-    name: string;
-    site: {
-        name: string;
-    };
-    group: {
-        name: string;
-    } | null;
-    tenant: {
-        name: string;
-    } | null;
-    role: {
-        name: string;
-        color: string;
-    } | null;
-    status: {
-        label: string;
-        value: string;
-        color: string;
-    };
-    facility_id: string | null;
-    serial: string | null;
-    asset_tag: string | null;
-    type: {
-        label: string;
-        value: string;
-    };
-    width: {
-        label: string;
-        value: number;
-    };
-    u_height: number;
-    desc_units: boolean;
-    outer_width: number | null;
-    outer_depth: number | null;
-    weight: number | null;
-    max_weight: number | null;
-    weight_unit: string;
-    mounting_depth: number | null;
-    devices: NetBoxDevice[];
-}
-interface NetBoxCable {
-    id: number;
-    label: string;
-    type: {
-        label: string;
-        value: string;
-    };
-    status: {
-        label: string;
-        value: string;
-        color: string;
-    };
-    color: string;
-    length: number | null;
-    length_unit: string;
-    termination_a_type: string;
-    termination_a: {
-        device: {
-            name: string;
-        };
-        name: string;
-    };
-    termination_b_type: string;
-    termination_b: {
-        device: {
-            name: string;
-        };
-        name: string;
-    };
-}
-interface NetBoxConnection {
-    id: string;
-    source: {
-        device: string;
-        interface: string;
-    };
-    target: {
-        device: string;
-        interface: string;
-    };
-    cable: NetBoxCable;
-}
-
 /**
  * Rack device width configuration
  * @public
@@ -200,6 +55,11 @@ type DeviceView = 'front' | 'rear';
  * @public
  */
 type PowerSide = 'left' | 'right';
+/**
+ * U numbering direction for racks
+ * @public
+ */
+type UNumberingDirection = 'bottom-up' | 'top-down';
 /**
  * Network node data structure
  * @public
@@ -254,6 +114,10 @@ interface NetworkNode {
         heightCm?: number;
         /** Number of AC power ports */
         powerPorts?: number;
+        /** U numbering direction for rack nodes */
+        uNumberingDirection?: UNumberingDirection;
+        /** Custom header text for rack nodes */
+        customHeaderText?: string;
         /** Additional custom properties */
         [key: string]: any;
     };
@@ -315,6 +179,10 @@ interface RackConfig {
     };
     /** Rack height in U units */
     units: number;
+    /** U numbering direction (default: 'bottom-up') */
+    uNumberingDirection?: UNumberingDirection;
+    /** Custom header text for rack */
+    customHeaderText?: string;
     /** Devices mounted in the rack */
     devices: RackDevice[];
 }
@@ -374,7 +242,6 @@ interface FiberCable {
         to: string;
     };
 }
-
 /**
  * Network diagram component props
  * @public
@@ -396,8 +263,8 @@ interface NetworkDiagramProps {
     store?: any;
     /** Enable debug mode */
     debug?: boolean;
-    /** Callback when a node is clicked */
-    onNodeClick?: (node: NetworkNode) => void;
+    /** Callback when a node is clicked or selection changes (null when deselected) */
+    onNodeClick?: (node: NetworkNode | null) => void;
     /** Callback when an edge is clicked */
     onEdgeClick?: (edge: NetworkEdge) => void;
     /** Callback when device view changes */
@@ -410,23 +277,24 @@ interface NetworkDiagramProps {
     style?: React.CSSProperties;
     /** If true, vertically align rack bottoms to the same baseline */
     alignRacksToBottom?: boolean;
-}
-/**
- * NetBox integration props
- * @public
- */
-interface NetBoxNetworkDiagramProps extends NetworkDiagramProps {
-    /** NetBox data for integration */
-    netboxData?: {
-        /** NetBox racks */
-        racks: NetBoxRack[];
-        /** NetBox devices */
-        devices: NetBoxDevice[];
-        /** NetBox cables */
-        cables: NetBoxCable[];
-    };
-    /** Callback when NetBox data is updated */
-    onNetBoxUpdate?: (data: any) => void;
+    /** Color mode for the diagram */
+    colorMode?: 'light' | 'dark' | 'system';
+    /** Callback when React Flow instance is initialized */
+    onInit?: (instance: any) => void;
+    /** Callback to get React Flow methods for save/restore */
+    onFlowMethods?: (methods: {
+        toObject: () => any;
+        setViewport: (viewport: any) => void;
+        toImage: (options?: any) => Promise<string>;
+    }) => void;
+    /** Show download button */
+    showDownloadButton?: boolean;
+    /** Download button position */
+    downloadButtonPosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+    /** Custom download button text */
+    downloadButtonText?: string;
+    /** Download button styling options */
+    downloadButtonStyle?: React.CSSProperties;
 }
 
 declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
@@ -434,6 +302,7 @@ declare const NetworkDiagram: React$1.FC<NetworkDiagramProps>;
 interface RackNodeProps extends NodeProps<NetworkNode['data']> {
     onViewChange?: (nodeId: string, view: 'front' | 'rear') => void;
     onRackFaceChange?: (rackId: string, face: 'front' | 'rear') => void;
+    isDragOver?: boolean;
 }
 declare const RackNode: React$1.FC<RackNodeProps>;
 
@@ -447,35 +316,111 @@ declare const DeviceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
 
 declare const VerticalPDU: React$1.FC<NodeProps<NetworkNode['data']>>;
 
+interface InventoryRackDTO {
+    id: string | number;
+    name: string;
+    status?: {
+        value?: string;
+    } | string;
+    u_height?: number;
+    units?: number;
+    facility_id?: string | number;
+    serial?: string;
+    asset_tag?: string;
+    site?: {
+        name?: string;
+    } | string;
+    role?: {
+        name?: string;
+    } | string;
+    tenant?: {
+        name?: string;
+    } | string;
+}
+interface InventoryDeviceDTO {
+    id: string | number;
+    name: string;
+    status?: {
+        value?: string;
+    } | string;
+    device_type?: {
+        u_height?: number;
+        model?: string;
+        manufacturer?: {
+            name?: string;
+        };
+    };
+    model?: string;
+    manufacturer?: string;
+    device_role?: {
+        name?: string;
+    } | string;
+    u_height?: number;
+    position?: number;
+    face?: 'front' | 'rear';
+    rack?: {
+        id?: string | number;
+        name?: string;
+    } | string | number;
+    primary_ip4?: {
+        address?: string;
+    } | string;
+    primary_ip6?: {
+        address?: string;
+    } | string;
+    site?: {
+        name?: string;
+    } | string;
+}
+interface InventoryCableDTO {
+    id: string | number;
+    type?: {
+        label?: string;
+    };
+    bandwidth?: string;
+    length?: number;
+    color?: string;
+    status?: {
+        value?: string;
+    } | string;
+    termination_a?: {
+        device?: {
+            id?: string | number;
+        } | string | number;
+        name?: string;
+    } | string;
+    termination_b?: {
+        device?: {
+            id?: string | number;
+        } | string | number;
+        name?: string;
+    } | string;
+}
 /**
- * Convert NetBox rack data to NetworkNode
+ * Convert inventory rack data to NetworkNode
  */
-declare const netboxRackToNetworkNode: (rack: NetBoxRack) => NetworkNode;
+declare const inventoryRackToNetworkNode: (rack: InventoryRackDTO) => NetworkNode;
 /**
- * Convert NetBox device data to NetworkNode
+ * Convert inventory device data to NetworkNode
  */
-declare const netboxDeviceToNetworkNode: (device: NetBoxDevice) => NetworkNode;
+declare const inventoryDeviceToNetworkNode: (device: InventoryDeviceDTO) => NetworkNode;
 /**
- * Convert NetBox cable data to NetworkEdge
+ * Convert inventory cable data to NetworkEdge
  */
-declare const netboxCableToNetworkEdge: (cable: NetBoxCable) => NetworkEdge;
+declare const inventoryCableToNetworkEdge: (cable: InventoryCableDTO) => NetworkEdge;
 /**
- * Convert NetBox data to network diagram format
+ * Convert inventory data to network diagram format
  */
-declare const netboxToNetworkDiagram: (data: {
-    racks: NetBoxRack[];
-    devices: NetBoxDevice[];
-    cables: NetBoxCable[];
+declare const inventoryToNetworkDiagram: (data: {
+    racks: InventoryRackDTO[];
+    devices: InventoryDeviceDTO[];
+    cables: InventoryCableDTO[];
 }) => {
     nodes: NetworkNode[];
     edges: NetworkEdge[];
 };
 /**
- * Calculate U position for devices in a rack
- */
-declare const calculateUPositions: (devices: NetBoxDevice[], rackHeight: number) => Map<number, number>;
-/**
- * Generate layout positions for nodes
+ * Generate simple layout positions for nodes array
  */
 declare const generateLayout: (nodes: NetworkNode[]) => NetworkNode[];
 
@@ -501,7 +446,7 @@ declare const findNextAvailableUPosition: (rack: NetworkNode, device: NetworkNod
 /**
  * Calculate device position based on U position within a rack
  */
-declare const calculateDevicePositionFromU: (rack: NetworkNode, uPosition: number) => {
+declare const calculateDevicePositionFromU: (rack: NetworkNode, uPosition: number, deviceHeight?: number) => {
     x: number;
     y: number;
 };
@@ -646,6 +591,8 @@ interface NetworkDiagramStore {
     subscribe: (listener: (state: NetworkDiagramState) => void) => () => void;
     selectEdgeZIndex: (edge: NetworkEdge) => number;
     validateConnection: (params: ValidateConnectionParams) => ValidationResult;
+    selectNodeById: (id: string) => NetworkNode | undefined;
+    selectConnectedEdges: (nodeId: string) => NetworkEdge[];
 }
 declare function createNetworkDiagramStore(initial?: Partial<NetworkDiagramState>, options?: NetworkDiagramOptions): NetworkDiagramStore;
 
@@ -653,4 +600,4 @@ declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramSt
 declare function useNodes(store: NetworkDiagramStore): NetworkNode[];
 declare function useEdges(store: NetworkDiagramStore): NetworkEdge[];
 
-export { DeviceNode, DevicePlacementError, type DevicePlacementValidation, type FiberCable, FiberEdge, FiberNode, type NetBoxCable, type NetBoxConnection, type NetBoxDevice, type NetBoxInterface, type NetBoxNetworkDiagramProps, type NetBoxRack, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, POWER_CONNECTORS, PowerEdge, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, VerticalPDU, Width, addDeviceToRack, buildNodesFromRackConfig, calculateDevicePositionFromU, calculateUPositions, createNetworkDiagramStore, createRackConfigFromNodes, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getPDUPortType, getPowerPortStyle, isHighPowerConnector, isUPositionAvailable, netboxCableToNetworkEdge, netboxDeviceToNetworkNode, netboxRackToNetworkNode, netboxToNetworkDiagram, removeDeviceFromRack, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements };
+export { DeviceNode, DevicePlacementError, type DevicePlacementValidation, type FiberCable, FiberEdge, FiberNode, NetworkDiagram, type NetworkDiagramProps, type NetworkEdge, type NetworkNode, POWER_CONNECTORS, PowerEdge, type RackConfig, type RackDevice, RackNode, type RackSchemaOptions, VerticalPDU, Width, addDeviceToRack, buildNodesFromRackConfig, calculateDevicePositionFromU, createNetworkDiagramStore, createRackConfigFromNodes, findNextAvailableUPosition, generateLayout, getConnectorConfig, getDeviceConnectorType, getPDUPortType, getPowerPortStyle, inventoryCableToNetworkEdge, inventoryDeviceToNetworkNode, inventoryRackToNetworkNode, inventoryToNetworkDiagram, isHighPowerConnector, isUPositionAvailable, removeDeviceFromRack, snapToUPosition, updateDeviceUPosition$1 as updateDeviceUPosition, updateDeviceUPosition as updateDeviceUPositionInSchema, useEdges as useDiagramEdges, useNodes as useDiagramNodes, useNetworkDiagram, validateAndSnapDevice, validateRackDevicePlacements };