@nice2dev/ui-iot

Nice2Dev IoT Components — Device dashboards, edge management, and protocol configuration for React applications.

Features

• NiceIoTDashboard - IoT device dashboard

  • Device monitoring and status
  • Real-time telemetry visualization
  • Alarm management
  • Customizable widgets

• NiceEdgeManager - Edge node management

  • Node inventory and monitoring
  • Container/module deployment
  • Resource metrics
  • Sync and configuration

• NiceProtocolConfig - Protocol configuration

  • MQTT broker configuration
  • CoAP resources
  • Modbus TCP/RTU register mapping
  • OPC-UA node browser

Installation

npm install @nice2dev/ui-iot
# or
pnpm add @nice2dev/ui-iot

Usage

IoT Dashboard

import { NiceIoTDashboard } from '@nice2dev/ui-iot';
import '@nice2dev/ui-iot/style.css';

function App() {
  return (
    <NiceIoTDashboard
      devices={[
        {
          id: '1',
          name: 'Temperature Sensor',
          type: 'sensor',
          status: 'online',
          protocol: 'mqtt',
          connectionInfo: { host: 'mqtt.example.com' },
          capabilities: [
            {
              id: 'temp',
              type: 'temperature',
              name: 'Temperature',
              dataType: 'float',
              unit: '°C',
              readable: true,
              writable: false,
            },
          ],
        },
      ]}
      onDeviceSelect={(device) => console.log('Selected:', device)}
      onCommand={async (deviceId, capabilityId, value) => {
        // Send command to device
      }}
    />
  );
}

Edge Manager

import { NiceEdgeManager } from '@nice2dev/ui-iot';
import '@nice2dev/ui-iot/style.css';

function App() {
  return (
    <NiceEdgeManager
      nodes={[
        {
          id: '1',
          name: 'Edge Gateway 1',
          type: 'gateway',
          status: 'running',
          hardware: { cpu: 'ARM Cortex-A72', cores: 4, memoryMB: 4096, storageMB: 32768, architecture: 'arm64' },
          software: {
            os: 'Linux',
            osVersion: '5.15',
            runtime: 'Docker',
            runtimeVersion: '24.0',
            agent: 'Nice2Dev Edge',
            agentVersion: '1.0.0',
          },
          connectivity: { cloudConnected: true, localNetwork: '192.168.1.0/24' },
          deployedModules: [],
        },
      ]}
      onModuleDeploy={async (nodeId, module) => {
        // Deploy module to edge node
      }}
    />
  );
}

Protocol Configuration

import { NiceProtocolConfig } from '@nice2dev/ui-iot';
import '@nice2dev/ui-iot/style.css';

function App() {
  return (
    <NiceProtocolConfig
      protocol="mqtt"
      onSave={(config) => console.log('Save:', config)}
      onTest={async (config) => {
        // Test connection
        return { success: true, message: 'Connected successfully' };
      }}
    />
  );
}

Supported Protocols

• MQTT - Message Queuing Telemetry Transport
• CoAP - Constrained Application Protocol
• Modbus TCP/RTU - Industrial protocol
• OPC-UA - Open Platform Communications Unified Architecture

License

See LICENSE file.