@mp70/react-networks 0.1.0-alpha

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +332 -0
  2. package/dist/index.css +23 -0
  3. package/dist/index.d.mts +656 -0
  4. package/dist/index.d.ts +656 -0
  5. package/dist/index.js +2 -0
  6. package/dist/index.js.map +1 -0
  7. package/dist/index.mjs +2 -0
  8. package/dist/index.mjs.map +1 -0
  9. package/package.json +69 -0
package/README.md ADDED
@@ -0,0 +1,332 @@
1
+ # @react-networks/network-diagrams
2
+
3
+ [![npm version](https://badge.fury.io/js/%40react-networks%2Fnetwork-diagrams.svg)](https://badge.fury.io/js/%40react-networks%2Fnetwork-diagrams)
4
+ [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
5
+ [![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](http://www.typescriptlang.org/)
6
+
7
+ 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.
8
+
9
+ ## ✨ Features
10
+
11
+ - **🏗️ Rack Management**: Full support for 19" rack units with exact U positioning
12
+ - **🔌 Device Placement**: Drag and drop devices with automatic U position snapping
13
+ - **🌐 Fiber Networks**: Visual representation of fiber connections and patch panels
14
+ - **⚡ Power Distribution**: Vertical PDU support with power connections
15
+ - **👁️ View Switching**: Front/rear view switching for devices and racks
16
+ - **📐 Rack Alignment**: Align rack bottoms to the same horizontal plane
17
+ - **🔗 NetBox Integration**: Built-in support for NetBox data import/export
18
+ - **🎨 Customizable**: Extensive styling and theming options
19
+ - **📱 Responsive**: Works on desktop and mobile devices
20
+ - **🔧 TypeScript**: Full TypeScript support with comprehensive type definitions
21
+
22
+ ## 🚀 Quick Start
23
+
24
+ ### Installation
25
+
26
+ ```bash
27
+ npm install @react-networks/network-diagrams react react-dom reactflow
28
+ # or
29
+ yarn add @react-networks/network-diagrams react react-dom reactflow
30
+ # or
31
+ pnpm add @react-networks/network-diagrams react react-dom reactflow
32
+ ```
33
+
34
+ ### Basic Usage
35
+
36
+ ```tsx
37
+ import React from 'react';
38
+ import { NetworkDiagram, NetworkNode, NetworkEdge } from '@react-networks/network-diagrams';
39
+ import '@react-networks/network-diagrams/index.css';
40
+
41
+ const nodes: NetworkNode[] = [
42
+ {
43
+ id: 'rack-1',
44
+ type: 'rack',
45
+ position: { x: 100, y: 100 },
46
+ data: {
47
+ label: 'Main Rack',
48
+ uHeight: 42
49
+ }
50
+ },
51
+ {
52
+ id: 'server-1',
53
+ type: 'server',
54
+ position: { x: 120, y: 150 },
55
+ data: {
56
+ label: 'Web Server',
57
+ uPosition: 1,
58
+ ports: [{
59
+ name: 'Network Ports',
60
+ ports: [
61
+ { label: 'eth0', connected: true, type: 'ethernet' },
62
+ { label: 'eth1', connected: false, type: 'ethernet' }
63
+ ]
64
+ }]
65
+ }
66
+ }
67
+ ];
68
+
69
+ const edges: NetworkEdge[] = [];
70
+
71
+ function App() {
72
+ return (
73
+ <div style={{ width: '100vw', height: '100vh' }}>
74
+ <NetworkDiagram
75
+ nodes={nodes}
76
+ edges={edges}
77
+ alignRacksToBottom={true}
78
+ onNodeClick={(node) => console.log('Node clicked:', node)}
79
+ onEdgeClick={(edge) => console.log('Edge clicked:', edge)}
80
+ />
81
+ </div>
82
+ );
83
+ }
84
+
85
+ export default App;
86
+ ```
87
+
88
+ ## 📚 Documentation
89
+
90
+ ### API Reference
91
+
92
+ #### Components
93
+
94
+ - [`NetworkDiagram`](#networkdiagram) - Main diagram component
95
+ - [`RackNode`](#racknode) - Rack visualization component
96
+ - [`DeviceNode`](#devicenode) - Device visualization component
97
+ - [`FiberNode`](#fibernode) - Fiber connection component
98
+ - [`VerticalPDU`](#verticalpdu) - Power distribution component
99
+
100
+ #### Utilities
101
+
102
+ - [`buildNodesFromRackConfig`](#buildnodesfromrackconfig) - Convert rack config to nodes
103
+ - [`netboxToNetworkDiagram`](#netboxtonetworkdiagram) - Convert NetBox data to diagram
104
+ - [`snapToUPosition`](#snaptouposition) - Snap devices to U positions
105
+ - [`validateRackDevicePlacements`](#validaterackdeviceplacements) - Validate device placements
106
+
107
+ ### NetworkDiagram Props
108
+
109
+ | Prop | Type | Default | Description |
110
+ |------|------|---------|-------------|
111
+ | `nodes` | `NetworkNode[]` | `[]` | Array of network nodes |
112
+ | `edges` | `NetworkEdge[]` | `[]` | Array of network edges |
113
+ | `alignRacksToBottom` | `boolean` | `false` | Align rack bottoms to baseline |
114
+ | `onNodeClick` | `(node: NetworkNode) => void` | - | Node click handler |
115
+ | `onEdgeClick` | `(edge: NetworkEdge) => void` | - | Edge click handler |
116
+ | `onViewChange` | `(nodeId: string, view: 'front' \| 'rear') => void` | - | Device view change handler |
117
+ | `onRackFaceChange` | `(rackId: string, face: 'front' \| 'rear') => void` | - | Rack face change handler |
118
+ | `className` | `string` | - | CSS class name |
119
+ | `style` | `React.CSSProperties` | - | Inline styles |
120
+ | `debug` | `boolean` | `false` | Enable debug mode |
121
+
122
+ ### NetworkNode Types
123
+
124
+ ```tsx
125
+ type NetworkNodeType =
126
+ | 'rack'
127
+ | 'switch'
128
+ | 'router'
129
+ | 'server'
130
+ | 'fiber'
131
+ | 'patch-panel'
132
+ | 'device'
133
+ | 'vertical-pdu';
134
+ ```
135
+
136
+ ### NetworkEdge Types
137
+
138
+ ```tsx
139
+ type NetworkEdgeType = 'fiber' | 'ethernet' | 'power';
140
+ ```
141
+
142
+ ## 🏗️ Advanced Usage
143
+
144
+ ### Rack Configuration
145
+
146
+ ```tsx
147
+ import { RackConfig, buildNodesFromRackConfig, Width } from '@react-networks/network-diagrams';
148
+
149
+ const rackSchema: RackConfig[] = [
150
+ {
151
+ id: 'rack-1',
152
+ name: 'Main Rack',
153
+ position: { x: 100, y: 100 },
154
+ units: 42,
155
+ devices: [
156
+ {
157
+ id: 'server-1',
158
+ name: 'Web Server',
159
+ unit: 1,
160
+ height: 1,
161
+ type: 'server',
162
+ width: Width.FULL,
163
+ ports: [{
164
+ name: 'Network Ports',
165
+ ports: [
166
+ { label: 'eth0', connected: true, type: 'ethernet' },
167
+ { label: 'eth1', connected: false, type: 'ethernet' }
168
+ ]
169
+ }]
170
+ },
171
+ {
172
+ id: 'switch-1',
173
+ name: 'Core Switch',
174
+ unit: 3,
175
+ height: 1,
176
+ type: 'switch',
177
+ width: Width.FULL,
178
+ ports: [{
179
+ name: 'Uplink Ports',
180
+ ports: [
181
+ { label: 'uplink-1', connected: true, type: 'fiber' },
182
+ { label: 'uplink-2', connected: false, type: 'fiber' }
183
+ ]
184
+ }]
185
+ }
186
+ ]
187
+ }
188
+ ];
189
+
190
+ const nodes = buildNodesFromRackConfig(rackSchema);
191
+ ```
192
+
193
+ ### NetBox Integration
194
+
195
+ ```tsx
196
+ import { netboxToNetworkDiagram } from '@react-networks/network-diagrams';
197
+
198
+ const netboxData = {
199
+ racks: [...], // NetBox rack data
200
+ devices: [...], // NetBox device data
201
+ cables: [...] // NetBox cable data
202
+ };
203
+
204
+ const { nodes, edges } = netboxToNetworkDiagram(netboxData);
205
+ ```
206
+
207
+ ### Custom Styling
208
+
209
+ ```tsx
210
+ import '@react-networks/network-diagrams/index.css';
211
+
212
+ // Override CSS variables
213
+ .network-diagram {
214
+ --rack-color: #2d3748;
215
+ --device-color: #4a5568;
216
+ --port-color: #68d391;
217
+ --edge-color: #4299e1;
218
+ }
219
+ ```
220
+
221
+ ## 🎨 Theming
222
+
223
+ The library supports extensive theming through CSS variables:
224
+
225
+ ```css
226
+ :root {
227
+ /* Rack colors */
228
+ --rack-background: #2d3748;
229
+ --rack-border: #4a5568;
230
+ --rack-header: #1a202c;
231
+
232
+ /* Device colors */
233
+ --device-background: #4a5568;
234
+ --device-border: #718096;
235
+ --device-active: #68d391;
236
+ --device-inactive: #a0aec0;
237
+
238
+ /* Port colors */
239
+ --port-connected: #68d391;
240
+ --port-disconnected: #e53e3e;
241
+ --port-ethernet: #4299e1;
242
+ --port-fiber: #9f7aea;
243
+ --port-power: #f6ad55;
244
+
245
+ /* Edge colors */
246
+ --edge-fiber: #9f7aea;
247
+ --edge-ethernet: #4299e1;
248
+ --edge-power: #f6ad55;
249
+ }
250
+ ```
251
+
252
+ ## 🔧 Development
253
+
254
+ ### Prerequisites
255
+
256
+ - Node.js 18+
257
+ - npm, yarn, or pnpm
258
+
259
+ ### Setup
260
+
261
+ ```bash
262
+ git clone https://github.com/your-org/react-networks.git
263
+ cd react-networks/packages/network-diagrams
264
+ npm install
265
+ ```
266
+
267
+ ### Build
268
+
269
+ ```bash
270
+ npm run build
271
+ ```
272
+
273
+ ### Development
274
+
275
+ ```bash
276
+ npm run dev
277
+ ```
278
+
279
+ ### Testing
280
+
281
+ ```bash
282
+ npm test
283
+ ```
284
+
285
+ ### Linting
286
+
287
+ ```bash
288
+ npm run lint
289
+ ```
290
+
291
+ ## 📦 Distribution
292
+
293
+ The library is distributed as:
294
+
295
+ - **ES Modules**: `dist/index.mjs`
296
+ - **CommonJS**: `dist/index.js`
297
+ - **TypeScript**: `dist/index.d.ts`
298
+ - **CSS**: `dist/index.css`
299
+
300
+ ## 🤝 Contributing
301
+
302
+ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
303
+
304
+ ### Development Workflow
305
+
306
+ 1. Fork the repository
307
+ 2. Create a feature branch
308
+ 3. Make your changes
309
+ 4. Add tests
310
+ 5. Run the test suite
311
+ 6. Submit a pull request
312
+
313
+ ## 📄 License
314
+
315
+ MIT License - see [LICENSE](LICENSE) for details.
316
+
317
+ ## 🆘 Support
318
+
319
+ - 📖 [Documentation](https://react-networks.dev)
320
+ - 🐛 [Issue Tracker](https://github.com/your-org/react-networks/issues)
321
+ - 💬 [Discussions](https://github.com/your-org/react-networks/discussions)
322
+ - 📧 [Email Support](mailto:support@react-networks.dev)
323
+
324
+ ## 🙏 Acknowledgments
325
+
326
+ - [React Flow](https://reactflow.dev) for the excellent diagram foundation
327
+ - [NetBox](https://netbox.dev) for network infrastructure management inspiration
328
+ - The open source community for feedback and contributions
329
+
330
+ ---
331
+
332
+ Made with ❤️ by the React Networks team
package/dist/index.css ADDED
@@ -0,0 +1,23 @@
1
+ /* Library styles for @react-networks/network-diagrams */
2
+
3
+ /* Edge zIndex styles for dynamic prominence */
4
+ .edge-prominent {
5
+ z-index: 1000 !important;
6
+ opacity: 1 !important;
7
+ }
8
+
9
+ .edge-dimmed {
10
+ z-index: 500 !important;
11
+ opacity: 0.3 !important;
12
+ }
13
+
14
+ /* Dynamic zIndex classes */
15
+ .edge-z-1000 {
16
+ z-index: 1000 !important;
17
+ }
18
+
19
+ .edge-z-500 {
20
+ z-index: 500 !important;
21
+ }
22
+
23
+