@mp70/react-networks 0.1.0-alpha

package/dist/index.d.ts

@@ -0,0 +1,656 @@
+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
+ */
+declare enum Width {
+    /** Full width device (19" rack width) */
+    FULL = "full",
+    /** Half width device (9.5" rack width) */
+    HALF = "half"
+}
+/**
+ * Port configuration for network devices
+ * @public
+ */
+interface Port {
+    /** Display label for the port */
+    label: string;
+    /** Whether the port is currently connected */
+    connected: boolean;
+    /** Type of port for styling and validation */
+    type?: 'ethernet' | 'fiber' | 'console' | 'mgmt' | 'usb' | 'power_ac' | 'power_c13' | 'power_c19';
+    /** Cable type for connection validation */
+    cableType?: 'smf' | 'cat6' | 'om3' | 'om4' | 'om5' | 'cat5e' | 'cat6a' | 'cat7' | 'fiber' | 'ethernet';
+}
+/**
+ * Group of related ports on a device
+ * @public
+ */
+interface PortBlock {
+    /** Name of the port group */
+    name: string;
+    /** Array of ports in this group */
+    ports: Port[];
+}
+/**
+ * Network node types supported by the diagram
+ * @public
+ */
+type NetworkNodeType = 'rack' | 'switch' | 'router' | 'server' | 'fiber' | 'patch-panel' | 'device' | 'vertical-pdu';
+/**
+ * Device status states
+ * @public
+ */
+type DeviceStatus = 'active' | 'inactive' | 'maintenance';
+/**
+ * Device view orientations
+ * @public
+ */
+type DeviceView = 'front' | 'rear';
+/**
+ * Power port side configuration
+ * @public
+ */
+type PowerSide = 'left' | 'right';
+/**
+ * Network node data structure
+ * @public
+ */
+interface NetworkNode {
+    /** Unique identifier for the node */
+    id: string;
+    /** Type of network node */
+    type: NetworkNodeType;
+    /** Position coordinates in the diagram */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Parent node ID for React Flow sub-flows */
+    parentId?: string;
+    /** Node extent for sub-flows */
+    extent?: 'parent' | [[number, number], [number, number]];
+    /** Node data and configuration */
+    data: {
+        /** Display label for the node */
+        label: string;
+        /** Port configurations for the device */
+        ports?: PortBlock[];
+        /** List of connected node IDs */
+        connections?: string[];
+        /** Current status of the device */
+        status?: DeviceStatus;
+        /** NetBox integration ID */
+        netboxId?: number;
+        /** NetBox object type */
+        netboxType?: 'device' | 'rack' | 'interface' | 'cable';
+        /** Rack height in U units */
+        uHeight?: number;
+        /** Device position within rack in U units */
+        uPosition?: number;
+        /** Current view orientation */
+        view?: DeviceView;
+        /** Device type specification */
+        deviceType?: string;
+        /** Device manufacturer */
+        manufacturer?: string;
+        /** Device role in network */
+        role?: string;
+        /** Device width configuration */
+        width?: Width;
+        /** Rear port configurations */
+        rearPorts?: PortBlock[];
+        /** Power port side for rear view */
+        powerSide?: PowerSide;
+        /** Vertical PDU height in centimeters */
+        heightCm?: number;
+        /** Number of AC power ports */
+        powerPorts?: number;
+        /** Additional custom properties */
+        [key: string]: any;
+    };
+}
+/**
+ * Network edge types
+ * @public
+ */
+type NetworkEdgeType = 'fiber' | 'ethernet' | 'power';
+/**
+ * Network edge data structure
+ * @public
+ */
+interface NetworkEdge {
+    /** Unique identifier for the edge */
+    id: string;
+    /** Source node ID */
+    source: string;
+    /** Target node ID */
+    target: string;
+    /** Source handle/port ID */
+    sourceHandle?: string;
+    /** Target handle/port ID */
+    targetHandle?: string;
+    /** Type of network connection */
+    type?: NetworkEdgeType;
+    /** Edge data and configuration */
+    data?: {
+        /** Connection bandwidth */
+        bandwidth?: string;
+        /** Cable length */
+        length?: number;
+        /** Edge color for styling */
+        color?: string;
+        /** Edge kind for styling/validation */
+        kind?: 'fiber' | 'power' | 'network';
+        /** Additional custom properties */
+        [key: string]: any;
+    };
+}
+/**
+ * Rack device types
+ * @public
+ */
+type RackDeviceType = 'server' | 'switch' | 'router' | 'patch-panel' | 'ups';
+/**
+ * Rack configuration structure
+ * @public
+ */
+interface RackConfig {
+    /** Unique rack identifier */
+    id: string;
+    /** Rack display name */
+    name: string;
+    /** Rack position coordinates */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Rack height in U units */
+    units: number;
+    /** Devices mounted in the rack */
+    devices: RackDevice[];
+}
+/**
+ * Device mounted in a rack
+ * @public
+ */
+interface RackDevice {
+    /** Unique device identifier */
+    id: string;
+    /** Device display name */
+    name: string;
+    /** Starting U position in rack */
+    unit: number;
+    /** Device height in U units */
+    height: number;
+    /** Device type */
+    type: RackDeviceType;
+    /** Device width configuration */
+    width?: Width;
+    /** Device role in network */
+    role?: string;
+    /** Front port configurations */
+    ports?: PortBlock[];
+    /** Rear port configurations */
+    rearPorts?: PortBlock[];
+    /** Power port side for rear view */
+    powerSide?: PowerSide;
+    /** Connected device IDs */
+    connections?: string[];
+}
+/**
+ * Fiber cable types
+ * @public
+ */
+type FiberCableType = 'single-mode' | 'multi-mode';
+/**
+ * Fiber cable configuration
+ * @public
+ */
+interface FiberCable {
+    /** Unique cable identifier */
+    id: string;
+    /** Cable display name */
+    name: string;
+    /** Fiber cable type */
+    type: FiberCableType;
+    /** Cable length */
+    length: number;
+    /** Cable color for visualization */
+    color: string;
+    /** Connection endpoints */
+    connections: {
+        /** Source connection point */
+        from: string;
+        /** Target connection point */
+        to: string;
+    };
+}
+
+/**
+ * Network diagram component props
+ * @public
+ */
+interface NetworkDiagramProps {
+    /** Controlled nodes array */
+    nodes?: NetworkNode[];
+    /** Controlled edges array */
+    edges?: NetworkEdge[];
+    /** Callback when nodes change (controlled mode) */
+    onNodesChange?: (nodes: NetworkNode[]) => void;
+    /** Callback when edges change (controlled mode) */
+    onEdgesChange?: (edges: NetworkEdge[]) => void;
+    /** Initial nodes for uncontrolled mode */
+    initialNodes?: NetworkNode[];
+    /** Initial edges for uncontrolled mode */
+    initialEdges?: NetworkEdge[];
+    /** Headless store injection */
+    store?: any;
+    /** Enable debug mode */
+    debug?: boolean;
+    /** Callback when a node is clicked */
+    onNodeClick?: (node: NetworkNode) => void;
+    /** Callback when an edge is clicked */
+    onEdgeClick?: (edge: NetworkEdge) => void;
+    /** Callback when device view changes */
+    onViewChange?: (nodeId: string, view: DeviceView) => void;
+    /** Callback when rack face changes */
+    onRackFaceChange?: (rackId: string, face: DeviceView) => void;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    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;
+}
+
+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;
+}
+declare const RackNode: React$1.FC<RackNodeProps>;
+
+declare const FiberNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const FiberEdge: React$1.FC<EdgeProps<NetworkEdge['data']>>;
+
+declare const PowerEdge: React$1.FC<EdgeProps>;
+
+declare const DeviceNode: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+declare const VerticalPDU: React$1.FC<NodeProps<NetworkNode['data']>>;
+
+/**
+ * Convert NetBox rack data to NetworkNode
+ */
+declare const netboxRackToNetworkNode: (rack: NetBoxRack) => NetworkNode;
+/**
+ * Convert NetBox device data to NetworkNode
+ */
+declare const netboxDeviceToNetworkNode: (device: NetBoxDevice) => NetworkNode;
+/**
+ * Convert NetBox cable data to NetworkEdge
+ */
+declare const netboxCableToNetworkEdge: (cable: NetBoxCable) => NetworkEdge;
+/**
+ * Convert NetBox data to network diagram format
+ */
+declare const netboxToNetworkDiagram: (data: {
+    racks: NetBoxRack[];
+    devices: NetBoxDevice[];
+    cables: NetBoxCable[];
+}) => {
+    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
+ */
+declare const generateLayout: (nodes: NetworkNode[]) => NetworkNode[];
+
+/**
+ * Snap a device position to the nearest U position within a rack
+ */
+declare const snapToUPosition: (device: NetworkNode, rack: NetworkNode, newPosition: {
+    x: number;
+    y: number;
+}, allNodes: NetworkNode[]) => {
+    x: number;
+    y: number;
+    uPosition?: number;
+};
+/**
+ * Check if a U position is available in a rack
+ */
+declare const isUPositionAvailable: (rack: NetworkNode, device: NetworkNode, uPosition: number, allNodes: NetworkNode[]) => boolean;
+/**
+ * Find the next available U position in a rack
+ */
+declare const findNextAvailableUPosition: (rack: NetworkNode, device: NetworkNode, allNodes: NetworkNode[], startFrom?: number) => number;
+/**
+ * Calculate device position based on U position within a rack
+ */
+declare const calculateDevicePositionFromU: (rack: NetworkNode, uPosition: number) => {
+    x: number;
+    y: number;
+};
+/**
+ * Update device U position and recalculate position
+ */
+declare const updateDeviceUPosition$1: (device: NetworkNode, rack: NetworkNode, newUPosition: number) => NetworkNode;
+/**
+ * Validate and snap device to valid U position
+ */
+declare const validateAndSnapDevice: (device: NetworkNode, rack: NetworkNode) => NetworkNode;
+
+/**
+ * Configuration options for building nodes from rack schema
+ */
+interface RackSchemaOptions {
+    /** How to handle device placement conflicts */
+    conflictPolicy?: 'strict' | 'nearest';
+    /** Whether to validate all placements before creating nodes */
+    validatePlacements?: boolean;
+    /** Custom device type mapping from schema to NetworkNode type */
+    deviceTypeMapping?: Record<string, NetworkNode['type']>;
+}
+/**
+ * Error thrown when device placement conflicts occur in strict mode
+ */
+declare class DevicePlacementError extends Error {
+    rackId: string;
+    deviceId: string;
+    uPosition: number;
+    uHeight: number;
+    conflictWith?: string | undefined;
+    constructor(rackId: string, deviceId: string, uPosition: number, uHeight: number, conflictWith?: string | undefined);
+}
+/**
+ * Validation result for device placement
+ */
+interface DevicePlacementValidation {
+    isValid: boolean;
+    conflicts: Array<{
+        deviceId: string;
+        uPosition: number;
+        uHeight: number;
+        conflictWith: string;
+    }>;
+    outOfBounds: Array<{
+        deviceId: string;
+        uPosition: number;
+        uHeight: number;
+        rackUHeight: number;
+    }>;
+}
+/**
+ * Validate device placements within a rack schema
+ */
+declare function validateRackDevicePlacements(rack: RackConfig, options?: RackSchemaOptions): DevicePlacementValidation;
+/**
+ * Build NetworkNode array from RackConfig array with comprehensive validation
+ */
+declare function buildNodesFromRackConfig(racks: RackConfig[], options?: RackSchemaOptions): NetworkNode[];
+/**
+ * Create a RackConfig from existing NetworkNode data (reverse operation)
+ */
+declare function createRackConfigFromNodes(nodes: NetworkNode[]): RackConfig[];
+/**
+ * Update device U position in a rack schema
+ */
+declare function updateDeviceUPosition(racks: RackConfig[], rackId: string, deviceId: string, newUPosition: number): RackConfig[];
+/**
+ * Add a device to a rack schema
+ */
+declare function addDeviceToRack(racks: RackConfig[], rackId: string, device: RackDevice, options?: RackSchemaOptions): RackConfig[];
+/**
+ * Remove a device from a rack schema
+ */
+declare function removeDeviceFromRack(racks: RackConfig[], rackId: string, deviceId: string): RackConfig[];
+
+/**
+ * Power connector utilities for consistent styling across devices and PDUs
+ */
+interface PowerConnectorConfig {
+    type: 'C13' | 'C14' | 'C19' | 'C20';
+    color: string;
+    borderColor: string;
+    amperage: number;
+    voltage: number;
+    phases: number;
+}
+declare const POWER_CONNECTORS: Record<string, PowerConnectorConfig>;
+interface PowerPortStyle {
+    width: number;
+    height: number;
+    borderRadius?: string;
+    clipPath?: string;
+    color: string;
+    borderColor: string;
+    fontSize: string;
+}
+/**
+ * Get consistent power port styling for any connector type
+ */
+declare function getPowerPortStyle(connectorType: string): PowerPortStyle;
+/**
+ * Get connector configuration by type
+ */
+declare function getConnectorConfig(connectorType: string): PowerConnectorConfig;
+/**
+ * Determine if a connector is high power (16A)
+ */
+declare function isHighPowerConnector(connectorType: string): boolean;
+/**
+ * Get PDU port type based on position in cycle
+ * PDU cycle: [8xC13, 2xC19] = 10 ports per cycle
+ */
+declare function getPDUPortType(portIndex: number): string;
+/**
+ * Get device connector type based on device name
+ */
+declare function getDeviceConnectorType(deviceName: string): string;
+
+interface NetworkDiagramState {
+    nodes: NetworkNode[];
+    edges: NetworkEdge[];
+    debug?: boolean;
+}
+interface ValidateConnectionParams {
+    source: string | null;
+    target: string | null;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+}
+interface ValidationResult {
+    valid: boolean;
+    reason?: string;
+}
+interface NetworkDiagramOptions {
+    validateConnection?: (params: ValidateConnectionParams, ctx: NetworkDiagramState) => ValidationResult;
+}
+interface NetworkDiagramStore {
+    getState: () => NetworkDiagramState;
+    setState: (partial: Partial<NetworkDiagramState>) => void;
+    subscribe: (listener: (state: NetworkDiagramState) => void) => () => void;
+    selectEdgeZIndex: (edge: NetworkEdge) => number;
+    validateConnection: (params: ValidateConnectionParams) => ValidationResult;
+}
+declare function createNetworkDiagramStore(initial?: Partial<NetworkDiagramState>, options?: NetworkDiagramOptions): NetworkDiagramStore;
+
+declare function useNetworkDiagram(store: NetworkDiagramStore): NetworkDiagramState;
+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 };