5/scadable stream by danielrafailov1 · Pull Request #7 · scadable/library-react

danielrafailov1 · 2025-09-16T00:24:30Z

- Define TelemetryData interface for sensor data - Add WebSocketConfig and TelemetryHookResult types - Create ConnectionStatus enum for connection states - Establish foundation for type-safe telemetry handling

- Create Facility class to manage WebSocket authentication - Add API key validation and retrieval methods - Establish secure credential handling for device connections

- Create Device class to manage device ID and WebSocket connections - Add connection status tracking and event handling - Implement message parsing (JSON and raw string support) - Add subscription system for telemetry, error, and status events - Support custom WebSocket URLs and automatic cleanup

- Implement React hook for consuming live telemetry data - Add automatic connection management and cleanup - Handle connection status and error state updates - Provide clean API for React components to access real-time data

- Export all public classes and hooks - Provide TypeScript type exports - Create clean API surface for library consumers

- Create unit tests for Facility, Device, and useLiveTelemetry - Add integration tests for React components - Implement WebSocket mocking for reliable testing - Achieve 100% test coverage with 33 test cases - Add vitest configuration for React testing environment

- Add App component showing real-world usage patterns - Demonstrate temperature display and connection status - Update main.tsx to showcase the library in action - Provide working example matching user story requirements

- Add jsdom dependency for React testing environment - Update ESLint configuration for WebSocket and React globals - Configure proper linting rules for TypeScript and React - Ensure code quality standards are met

- Create detailed README with installation and usage instructions - Add API reference for all classes and hooks - Include multiple usage examples and best practices - Document WebSocket connection format and message handling - Provide development and testing guidelines

- Change Vitest configuration to use new setup file location - Refactor exports in index.ts to improve module organization - Update main.tsx to import styles from a new directory - Remove outdated test files for Device, Facility, and integration tests - Streamline test structure for better maintainability

Copilot

Pull Request Overview

This PR implements the Scadable Stream library for real-time telemetry data consumption in React applications. The library provides a useLiveTelemetry hook for connecting to WebSocket streams and managing telemetry data state.

Adds core classes (Facility, Device) for managing API authentication and WebSocket connections
Implements useLiveTelemetry React hook for real-time telemetry data consumption
Sets up comprehensive testing infrastructure with mocked WebSocket implementation

Reviewed Changes

Copilot reviewed 24 out of 25 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
vitest.config.ts	Test configuration for Vitest with jsdom environment
src/core/	Core library classes for Facility and Device management
src/hooks/	React hooks including the main useLiveTelemetry hook
src/types.ts, src/core/types.ts	Type definitions with duplicate interfaces
src/utils/parseMessage.ts	Message parsing utility for WebSocket data
tests/	Comprehensive test suite with WebSocket mocks
README.md	Complete documentation with examples and API reference

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

Copilot · 2025-09-17T00:54:47Z

src/types.ts

+/**
+ * Telemetry data types for the Scadable Stream library
+ */
+
+/**
+ * Base telemetry data structure
+ * Can contain any key-value pairs representing sensor data
+ */
+export interface TelemetryData {
+  [key: string]: any;
+}
+
+/**
+ * WebSocket message structure
+ */
+export interface WebSocketMessage {
+  data: string;
+  type?: string;
+  target?: WebSocket;
+}
+
+/**
+ * Configuration for WebSocket connection
+ */
+export interface WebSocketConfig {
+  url: string;
+  token: string;
+  deviceId: string;
+}
+
+/**
+ * Hook return type for useLiveTelemetry
+ */
+export interface TelemetryHookResult {
+  telemetry: TelemetryData | string | null;
+  isConnected: boolean;
+  error: string | null;
+}
+
+/**
+ * Device connection status
+ */
+export enum ConnectionStatus {
+  DISCONNECTED = 'disconnected',
+  CONNECTING = 'connecting',
+  CONNECTED = 'connected',
+  ERROR = 'error'
+}


This entire file duplicates type definitions that exist in src/core/types.ts. Having duplicate type definitions creates maintenance overhead and potential inconsistencies. Remove this file and use the centralized types from src/core/types.ts.

Suggested change

/**

* Telemetry data types for the Scadable Stream library

*/

/**

* Base telemetry data structure

* Can contain any key-value pairs representing sensor data

*/

export interface TelemetryData {

[key: string]: any;

}

/**

* WebSocket message structure

*/

export interface WebSocketMessage {

data: string;

type?: string;

target?: WebSocket;

}

/**

* Configuration for WebSocket connection

*/

export interface WebSocketConfig {

url: string;

token: string;

deviceId: string;

}

/**

* Hook return type for useLiveTelemetry

*/

export interface TelemetryHookResult {

telemetry: TelemetryData | string | null;

isConnected: boolean;

error: string | null;

}

/**

* Device connection status

*/

export enum ConnectionStatus {

DISCONNECTED = 'disconnected',

CONNECTING = 'connecting',

CONNECTED = 'connected',

ERROR = 'error'

}

Copilot · 2025-09-17T00:54:48Z

src/core/types.ts

+export const ConnectionStatus = {
+  DISCONNECTED: 'disconnected',
+  CONNECTING: 'connecting',
+  CONNECTED: 'connected',
+  ERROR: 'error'
+} as const;


This implements ConnectionStatus as a const object while src/types.ts uses an enum. This inconsistency between the two type definition files creates confusion. Since this appears to be the canonical location, ensure all imports use this implementation.

src/useLiveTelemetry.ts

Copilot · 2025-09-17T00:54:48Z

src/Facility.ts

+/**
+ * Facility class manages the API key for WebSocket connections
+ */
+export class Facility {
+  private readonly apiKey: string;
+
+  constructor(apiKey: string) {
+    if (!apiKey || typeof apiKey !== 'string') {
+      throw new Error('API key must be a non-empty string');
+    }
+    this.apiKey = apiKey;
+  }
+
+  /**
+   * Get the API key for WebSocket authentication
+   * @returns The API key
+   */
+  getApiKey(): string {
+    return this.apiKey;
+  }
+
+  /**
+   * Validate that the facility has a valid API key
+   * @returns True if the API key is valid
+   */
+  isValid(): boolean {
+    return this.apiKey.length > 0;
+  }
+}


This file duplicates the Facility class that exists in src/core/Facility.ts. Having duplicate implementations creates maintenance issues and confusion about which version is canonical. Remove this duplicate file.

Suggested change

/**

* Facility class manages the API key for WebSocket connections

*/

export class Facility {

private readonly apiKey: string;

constructor(apiKey: string) {

if (!apiKey || typeof apiKey !== 'string') {

throw new Error('API key must be a non-empty string');

}

this.apiKey = apiKey;

}

/**

* Get the API key for WebSocket authentication

* @returns The API key

*/

getApiKey(): string {

return this.apiKey;

}

/**

* Validate that the facility has a valid API key

* @returns True if the API key is valid

*/

isValid(): boolean {

return this.apiKey.length > 0;

}

}

// Re-export canonical Facility class

export { Facility } from './core/Facility';

Copilot · 2025-09-17T00:54:49Z

src/core/Device.ts

+  private connectionStatus: ConnectionStatusValue = ConnectionStatus.DISCONNECTED;
+  private messageHandlers: Set<(_data: TelemetryData | string) => void> = new Set();
+  private errorHandlers: Set<(_errorMessage: string) => void> = new Set();
+  private statusHandlers: Set<(_connectionStatus: ConnectionStatus) => void> = new Set();


The type annotation for statusHandlers is incorrect. It references ConnectionStatus which is an enum-like object, but the actual parameter type should be ConnectionStatusValue to match the implementation in the updateConnectionStatus method.

Suggested change

private statusHandlers: Set<(_connectionStatus: ConnectionStatus) => void> = new Set();

private statusHandlers: Set<(_connectionStatus: ConnectionStatusValue) => void> = new Set();

Copilot · 2025-09-17T00:54:49Z

src/core/Device.ts

+  /**
+   * Subscribe to connection status changes
+   */
+  onStatusChange(handler: (_connectionStatus: ConnectionStatusValue) => void): () => void {


The parameter type ConnectionStatusValue is correct here but inconsistent with the statusHandlers Set type definition on line 15. The Set should be typed as Set<(_connectionStatus: ConnectionStatusValue) => void> for consistency.

Copilot

Pull Request Overview

Copilot reviewed 21 out of 22 changed files in this pull request and generated 10 comments.

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/components/TelemetryDisplay.stories.tsx

src/styles/index.css

src/hooks/index.ts

src/core/types.ts

src/core/Facility.ts

src/utils/parseMessage.ts

__tests__/setupTests.ts

__tests__/useLiveTelemetry.test.tsx

__tests__/Facility.test.ts

__tests__/Device.test.ts

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

danielrafailov1 and others added 12 commits September 15, 2025 20:21

feat: add TypeScript types for telemetry data and WebSocket messages

5d18c77

- Define TelemetryData interface for sensor data - Add WebSocketConfig and TelemetryHookResult types - Create ConnectionStatus enum for connection states - Establish foundation for type-safe telemetry handling

feat: implement Facility class for API key management

2657480

- Create Facility class to manage WebSocket authentication - Add API key validation and retrieval methods - Establish secure credential handling for device connections

feat: set up library exports and main entry point

657c8c7

- Export all public classes and hooks - Provide TypeScript type exports - Create clean API surface for library consumers

feat: create example implementation demonstrating library usage

2ea510e

- Add App component showing real-world usage patterns - Demonstrate temperature display and connection status - Update main.tsx to showcase the library in action - Provide working example matching user story requirements

chore: update project configuration and dependencies

41472f7

- Add jsdom dependency for React testing environment - Update ESLint configuration for WebSocket and React globals - Configure proper linting rules for TypeScript and React - Ensure code quality standards are met

style: fixed linter errors

6b698ea

style: fixed last lint error hopefully :)

bc60a27

crypto-a requested a review from Copilot September 17, 2025 00:53

Copilot AI reviewed Sep 17, 2025

View reviewed changes

crypto-a added 9 commits September 16, 2025 21:12

chore: updated depreciating packages

3065a74

refactor: modified Faiclity object

5934473

refactor: fixed the device class

568bf25

del: removed doublicates and unnecesary files

af1ced6

refactor: modofied the hook code

ed34218

feat: added storybook setup

0199a7f

fix: foixed linting issue

aa2ea5f

tests: fixed testcases

8b699d5

docs: updated readme

bb63893

crypto-a requested a review from Copilot September 17, 2025 02:08

scadable deleted a comment from Copilot AI Sep 17, 2025

Copilot AI reviewed Sep 17, 2025

View reviewed changes

crypto-a and others added 4 commits September 16, 2025 22:39

fix: fixed ci issue

6a8cf39

fix: fixed the setupTests

95c74ac

docs: removed unnecessary comment

099ba25

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs: removed unnecessary comment

f4b8714

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

danielrafailov1 and others added 6 commits September 16, 2025 23:22

docs: removed unnecessary trailing line

8c56955

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs: removed unnecessary trailing line

447c711

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs: removed unnecessary comment

9766863

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs: removed unnecessary trailing line

3bd9880

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs: removed unnecessary comment

fd84081

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

docs: removed unnecessary trailing line

abd66ec

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

danielrafailov1 merged commit e85eeb0 into main Sep 17, 2025
5 checks passed

danielrafailov1 deleted the 5/scadable-stream branch September 17, 2025 03:26

	private statusHandlers: Set<(_connectionStatus: ConnectionStatus) => void> = new Set();
	private statusHandlers: Set<(_connectionStatus: ConnectionStatusValue) => void> = new Set();

Conversation

danielrafailov1 commented Sep 16, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 17, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants