@elyx-code/editor-ui 0.0.2

package/src/socket/socket.ts

@@ -0,0 +1,248 @@
+// browser-socket.ts
+import {
+	Events,
+	IWebSocketCommon,
+	IWebsocketsClient,
+	Logger,
+} from '@elyx-code/common-ts-utils';
+import { parseRTCMessage } from './utils';
+import { ILiveMessageDTO } from '@elyx-code/definitions';
+
+type BrowserSocketOptions = {
+	socketUrl: string;
+	maxQueue?: number; // default 1000
+	connectTimeoutMs?: number; // default 10_000
+	heartbeatMs?: number; // default 30_000
+	idleRestartMs?: number; // default 120_000
+	backoffInitialMs?: number; // default 500
+	backoffMaxMs?: number; // default 15_000
+};
+
+export class Socket extends Events implements IWebsocketsClient {
+	public connection!: IWebSocketCommon;
+
+	private url: string;
+	private queue: ILiveMessageDTO[] = [];
+
+	private reconnectAttempts = 0;
+	private manualClose = false;
+	private connectTimer?: number;
+	private heartbeatTimer?: number;
+	private idleTimer?: number;
+	private lastSeenAt = Date.now();
+
+	private readonly MAX_QUEUE: number;
+	private readonly CONNECT_TIMEOUT_MS: number;
+	private readonly HEARTBEAT_MS: number;
+	private readonly IDLE_RESTART_MS: number;
+	private readonly BACKOFF_INITIAL_MS: number;
+	private readonly BACKOFF_MAX_MS: number;
+
+	constructor(options: BrowserSocketOptions) {
+		super();
+
+		this.url = options.socketUrl;
+		this.MAX_QUEUE = options.maxQueue ?? 1000;
+		this.CONNECT_TIMEOUT_MS = options.connectTimeoutMs ?? 10_000;
+		this.HEARTBEAT_MS = options.heartbeatMs ?? 30_000;
+		this.IDLE_RESTART_MS = options.idleRestartMs ?? 120_000;
+		this.BACKOFF_INITIAL_MS = options.backoffInitialMs ?? 500;
+		this.BACKOFF_MAX_MS = options.backoffMaxMs ?? 15_000;
+
+		this.open();
+	}
+
+	// ---- lifecycle -----------------------------------------------------------
+
+	private open() {
+		const ws = new WebSocket(this.url);
+
+		// patch close() so external callers (socket.connection.close()) stop reconnection
+		const originalClose = ws.close.bind(ws);
+		ws.close = (code?: number, reason?: string) => {
+			// this.manualClose = true;
+			return originalClose(code, reason);
+		};
+
+		this.connection = ws as any as IWebSocketCommon;
+
+		// connect-timeout guard
+		this.clearTimer(this.connectTimer);
+		this.connectTimer = window.setTimeout(() => {
+			if (
+				ws.readyState !== WebSocket.OPEN &&
+				ws.readyState !== WebSocket.CLOSED
+			) {
+				try {
+					ws.close(4000, 'connect-timeout');
+				} catch {}
+			}
+		}, this.CONNECT_TIMEOUT_MS);
+
+		// listeners — attach first to avoid missing early events
+		ws.addEventListener('open', this.onOpen as any);
+		ws.addEventListener('message', this.onMessageEvent as any);
+		ws.addEventListener('error', this.onError as any);
+		ws.addEventListener('close', this.onClose as any);
+	}
+
+	private onOpen = () => {
+		this.reconnectAttempts = 0;
+		this.lastSeenAt = Date.now();
+
+		// flush queue
+		const toSend = this.queue.splice(0, this.queue.length);
+		for (const m of toSend) this._send(m);
+
+		this.startHeartbeat();
+		this.startIdleWatch();
+
+		this.emit('open', null);
+	};
+
+	private onMessageEvent = async (e: MessageEvent) => {
+		this.lastSeenAt = Date.now();
+		const data = e.data;
+
+		const messageStr =
+			typeof data === 'string'
+				? data
+				: data instanceof ArrayBuffer
+				? new TextDecoder().decode(data)
+				: data instanceof Blob
+				? await data.text()
+				: '';
+
+		const parsedMessage: ILiveMessageDTO | string = parseRTCMessage(messageStr);
+		this.emit('message', parsedMessage);
+	};
+
+	private onError = (event: Event) => {
+		this.emit('error', event);
+	};
+
+	private onClose = (evt: CloseEvent) => {
+		this.stopHeartbeat();
+		this.stopIdleWatch();
+		this.clearTimer(this.connectTimer);
+
+		const code = evt.code;
+		const reason = (evt.reason ?? '').toString();
+
+		this.emit('closed', { code, reason });
+
+		if (this.manualClose) {
+			Logger.log('WebSocket closed manually, not reconnecting');
+			return
+		};
+
+		this.scheduleReconnect(`code=${code} reason=${reason}`);
+	};
+
+	// ---- resilience helpers --------------------------------------------------
+
+	private scheduleReconnect(debugReason: string) {
+		const base = Math.min(
+			this.BACKOFF_INITIAL_MS * 2 ** this.reconnectAttempts,
+			this.BACKOFF_MAX_MS
+		);
+		const jitter = Math.floor(Math.random() * 800);
+		const delay = base + jitter;
+		this.reconnectAttempts++;
+
+		Logger.log(`WebSocket disconnected, scheduling reconnect in: ${delay}ms ${debugReason}`);
+
+		window.setTimeout(() => this.open(), delay);
+
+		this.emit('reconnecting', {
+			attempt: this.reconnectAttempts,
+			delay,
+			reason: debugReason,
+		});
+	}
+
+	private startHeartbeat() {
+		this.stopHeartbeat();
+		this.heartbeatTimer = window.setInterval(() => {
+			// App-level ping; safe for API Gateway and browsers
+			try {
+				this.connection?.send?.(
+					JSON.stringify({ type: 'ping', t: Date.now() })
+				);
+			} catch {}
+		}, this.HEARTBEAT_MS);
+	}
+
+	private stopHeartbeat() {
+		this.clearTimer(this.heartbeatTimer);
+		this.heartbeatTimer = undefined;
+	}
+
+	private startIdleWatch() {
+		this.stopIdleWatch();
+		this.idleTimer = window.setInterval(() => {
+			const idleFor = Date.now() - this.lastSeenAt;
+			if (idleFor >= this.IDLE_RESTART_MS) {
+				try {
+					this.connection?.close?.(4001, 'idle-restart');
+				} catch {}
+			}
+		}, Math.min(5_000, this.IDLE_RESTART_MS / 2));
+	}
+
+	private stopIdleWatch() {
+		this.clearTimer(this.idleTimer);
+		this.idleTimer = undefined;
+	}
+
+	private clearTimer(t?: number) {
+		if (t) window.clearTimeout(t);
+	}
+
+	// ---- public send API -----------------------------------------------------
+
+	private _send(outgoingMessage: ILiveMessageDTO) {
+		if (!this.connection) {
+			if (this.queue.length >= this.MAX_QUEUE) {
+				this.emit('overflow', { dropped: 1, reason: 'no-connection' });
+				return;
+			}
+			this.queue.push(outgoingMessage);
+			return;
+		}
+
+		if (this.connection.readyState === WebSocket.OPEN) {
+			try {
+				this.connection.send(JSON.stringify(outgoingMessage));
+			} catch (err) {
+				if (this.queue.length >= this.MAX_QUEUE) {
+					this.emit('overflow', { dropped: 1, reason: 'send-error' });
+				} else {
+					this.queue.push(outgoingMessage);
+				}
+			}
+		} else {
+			if (this.queue.length >= this.MAX_QUEUE) {
+				this.emit('overflow', { dropped: 1, reason: 'not-open' });
+			} else {
+				this.queue.push(outgoingMessage);
+			}
+		}
+	}
+
+	public send(message: ILiveMessageDTO) {
+		// eslint-disable-next-line no-console
+		Logger.log('Sending websocket message:', message);
+		this._send(message);
+	}
+
+	// Optional: call to stop auto-reconnect + close
+	public shutdown(code = 1000, reason = 'client closing') {
+		this.manualClose = true;
+		this.stopHeartbeat();
+		this.stopIdleWatch();
+		try {
+			this.connection?.close?.(code, reason);
+		} catch {}
+	}
+}

package/src/socket/utils.ts

@@ -0,0 +1,10 @@
+import { ILiveMessageDTO } from '@elyx-code/definitions';
+
+export function parseRTCMessage(data: string): ILiveMessageDTO | string {
+	try {
+		const jsonObject = JSON.parse(data);
+		return jsonObject;
+	} catch (e) {
+		return data;
+	}
+}

package/src/store/workspace.ts

@@ -0,0 +1,12 @@
+import { IWorkspace } from '@elyx-code/definitions';
+import { create } from 'zustand';
+
+interface WorkspaceStore {
+	activeWorkspace: IWorkspace | null;
+	setActiveWorkspace: (workspace: IWorkspace) => void;
+}
+
+export const useWorkspaceStore = create<WorkspaceStore>((set) => ({
+	activeWorkspace: null,
+	setActiveWorkspace: (workspace) => set({ activeWorkspace: workspace }),
+}));

package/src/theme.ts

@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material';
+
+// Initialize mui theme
+export const theme = createTheme({
+	palette: {
+		primary: {
+			light: '#rgb(139, 94, 255)',
+			main: '#6F36FF',
+			dark: '#rgb(77, 37, 178)',
+			contrastText: '#FFFFFF',
+		},
+		secondary: {
+			light: 'rgb(51, 51, 51)',
+			main: '#000000',
+			dark: '#000000',
+			contrastText: '#fff',
+		},
+	},
+});

package/src/utils/DOM.ts

@@ -0,0 +1,39 @@
+export function onClickAway(
+	element: Element,
+	callback: (e: Event) => void,
+	...targets: Element[]
+) {
+	const listener = (event: Event) => {
+		if (!element?.contains(event.target as Node)) {
+			callback(event);
+			return;
+		}
+	};
+
+	if (!targets.length) {
+		document.addEventListener('click', listener);
+	} else {
+		targets.forEach((target) => {
+			if (!!target) {
+				target.addEventListener('click', listener);
+			}
+		});
+	}
+
+	return () => {
+		if (!targets.length) {
+			document.removeEventListener('click', listener);
+		} else {
+			targets.forEach((target) => {
+				if (!!target) {
+					target.removeEventListener('click', listener);
+				}
+			});
+		}
+	};
+}
+
+export function hasAnimation(element: Element): boolean {
+	// @ts-ignore
+	return getComputedStyle(element, null)['animation-name'] !== 'none';
+}

package/src/utils/date.ts

@@ -0,0 +1,169 @@
+export function toHtmlDate(date: Date) {
+	const day = ('0' + date.getDate()).slice(-2);
+	const month = ('0' + (date.getMonth() + 1)).slice(-2);
+
+	const formattedDate = date.getFullYear() + '-' + month + '-' + day;
+
+  return formattedDate;
+}
+
+export function readableTimeFromNow(date: Date): string {
+	const now = new Date();
+	const diff = date.getTime() - now.getTime(); // difference in milliseconds
+	const absDiff = Math.abs(diff);
+
+	// Calculate time units
+	const seconds = Math.floor(absDiff / 1000);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+
+	// Format the result
+	let result = '';
+
+	if (days > 0) {
+		result = `${days} day${days > 1 ? 's' : ''}`;
+	} else if (hours > 0) {
+		result = `${hours} hour${hours > 1 ? 's' : ''}`;
+	} else if (minutes > 0) {
+		result = `${minutes} min`;
+	} else if (seconds > 0) {
+		result = `${seconds} sec`;
+	} else {
+		// For cases where the difference is less than a second
+		return 'now';
+	}
+
+	// Prefix with "in" for future dates, "ago" for past dates
+	return diff > 0 ? `in ${result}` : `${result} ago`;
+}
+
+
+export function getMonthRange(referenceDate: Date): {
+	startDate: Date;
+	endDate: Date;
+} {
+	const year = referenceDate.getFullYear();
+	const month = referenceDate.getMonth();
+	const dayOfTheMonth = 1;
+
+	const timezoneMinutesOffset = new Date(
+		year,
+		month,
+		dayOfTheMonth
+	).getTimezoneOffset();
+	const timezoneHoursOffset = timezoneMinutesOffset / 60;
+
+	// We turn the current hours offset into an opposite number (positive to negative, or negative to positive)
+	// So it can be used to corrent for the offset and get the actual date value we need
+	const offset = timezoneHoursOffset * -1;
+
+	// Calculate the first day of the next month
+	const firstDayOfNextMonth = new Date(year, month, dayOfTheMonth, offset);
+
+	// Calculate the last day of the month
+	const lastDay = new Date(year, month + 1, 0, offset);
+
+	return {
+		startDate: firstDayOfNextMonth,
+		endDate: lastDay,
+	};
+}
+
+export function daysUntil(targetDate: Date): number {
+	const currentDate = new Date();
+	const timeDifference = targetDate.getTime() - currentDate.getTime();
+	const daysDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
+	return daysDifference;
+}
+
+export function firstDayOfCurrentMonth(): Date {
+	const currentDate = new Date();
+	const year = currentDate.getFullYear();
+	const month = currentDate.getMonth();
+	const dayOfTheMonth = 1;
+
+	const timezoneMinutesOffset = new Date(
+		year,
+		month,
+		dayOfTheMonth
+	).getTimezoneOffset();
+	const timezoneHoursOffset = timezoneMinutesOffset / 60;
+
+	// We turn the current hours offset into an opposite number (positive to negative, or negative to positive)
+	// So it can be used to corrent for the offset and get the actual date value we need
+	const offset = timezoneHoursOffset * -1;
+
+	const resultDate = new Date(year, month, dayOfTheMonth, offset);
+
+	return resultDate;
+}
+
+export function firstDayOfNextMonth(): Date {
+	const currentDate = new Date();
+	const year = currentDate.getFullYear();
+	const month = currentDate.getMonth() + 1;
+	const dayOfTheMonth = 1;
+
+	const timezoneMinutesOffset = new Date(
+		year,
+		month,
+		dayOfTheMonth
+	).getTimezoneOffset();
+	const timezoneHoursOffset = timezoneMinutesOffset / 60;
+
+	// We turn the current hours offset into an opposite number (positive to negative, or negative to positive)
+	// So it can be used to corrent for the offset and get the actual date value we need
+	const offset = timezoneHoursOffset * -1;
+
+	// Calculate the first day of the next month
+	const firstDayOfNextMonth = new Date(year, month, dayOfTheMonth, offset);
+
+	return firstDayOfNextMonth;
+}
+
+export function formatDateShort(date: Date): string {
+	const months = [
+		'Jan',
+		'Feb',
+		'Mar',
+		'Apr',
+		'May',
+		'Jun',
+		'Jul',
+		'Aug',
+		'Sep',
+		'Oct',
+		'Nov',
+		'Dec',
+	];
+
+	const month = months[date.getMonth()];
+	const day = date.getDate();
+
+	return `${month} ${day}`;
+}
+
+export function calculatePercentageDifference(
+	num1: number,
+	num2: number
+): number | null {
+	if (num1 === 0) {
+		// Avoid division by zero if num1 is 0.
+		if (num2 === 0) {
+			return 0; // Both numbers are the same.
+		} else {
+			return 100; // Treat as a 100% increase from 0 to num2.
+		}
+	}
+
+	const difference = num2 - num1;
+	const percentageDifference = (difference / num1) * 100;
+
+	return percentageDifference;
+}
+
+// Returns a date in "YYYY-MM-DD" format
+export function formatDate(date: Date): string {
+	return date.toISOString().split('T')[0];
+}

package/src/utils/index.ts

@@ -0,0 +1,158 @@
+// Download file from url
+export async function download(url: string, filename?: string) {
+	const response = await fetch(url); // CORS is now handled by S3!
+	const blob = await response.blob();
+	const blobUrl = window.URL.createObjectURL(blob);
+
+	const a = document.createElement('a');
+	a.href = blobUrl;
+
+	// 1. Use the provided filename, OR
+	// 2. Parse the URL, grab the path (ignoring query params), and get the last piece
+	const derivedFilename = filename || new URL(url).pathname.split('/').pop();
+
+	// Only set the download attribute if we successfully resolved a name
+	if (derivedFilename) {
+		a.download = derivedFilename;
+	}
+
+	document.body.appendChild(a);
+	a.click();
+	document.body.removeChild(a);
+	window.URL.revokeObjectURL(blobUrl);
+}
+
+// Equivalent to lodash's or underscore's isEmpty, but with better typing and without the dependency
+export function isEmpty(value: any): boolean {
+	if (value === null || value === undefined) {
+		return true;
+	}
+
+	if (typeof value === 'string' || Array.isArray(value)) {
+		return value.length === 0;
+	}
+
+	if (typeof value === 'object') {
+		return Object.keys(value).length === 0;
+	}
+
+	return false;
+}
+
+// Equivalent to lodash's or underscore's isEqual, but with better typing and without the dependency
+export function isEqual(value1: any, value2: any): boolean {
+	if (value1 === value2) {
+		return true;
+	}
+
+	if (typeof value1 !== typeof value2) {
+		return false;
+	}
+
+	if (typeof value1 === 'object' && typeof value2 === 'object') {
+		const keys1 = Object.keys(value1);
+		const keys2 = Object.keys(value2);
+
+		if (keys1.length !== keys2.length) {
+			return false;
+		}
+
+		for (const key of keys1) {
+			if (!isEqual(value1[key], value2[key])) {
+				return false;
+			}
+		}
+
+		return true;
+	}
+
+	return false;
+}
+
+export function debounce(func: Function, duration: number, immediate = false) {
+	let timeout: any;
+
+	if (immediate) {
+		return function (...args: any[]) {
+			const callNow = !timeout;
+			clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				timeout = null;
+			}, duration);
+			if (callNow) func.apply(this, args);
+		};
+	}
+
+	return function (...args: any[]) {
+		const effect = () => {
+			timeout = null;
+			return func.apply(this, args);
+		};
+
+		clearTimeout(timeout);
+		timeout = setTimeout(effect, duration);
+	};
+}
+
+// random uuid
+export function makeId() {
+	let text = '';
+	const possible =
+		'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+
+	for (let i = 0; i < 5; i++) {
+		text += possible.charAt(Math.floor(Math.random() * possible.length));
+	}
+
+	return text;
+}
+
+/**
+ * Returns true if the user is on macOS or an iOS device.
+ */
+export function isMacPlatform(): boolean {
+  // 1. New Client Hints API (Chrome, Edge…)
+  const uaData = (navigator as any).userAgentData;
+  if (uaData && typeof uaData.platform === 'string') {
+		const sanitizedPlatform = uaData.platform.toLowerCase();
+    return sanitizedPlatform.startsWith('mac') || sanitizedPlatform.startsWith('iphone') || sanitizedPlatform.startsWith('ipad');
+  }
+
+  // 2. Classic navigator.platform (deprecated, but still widely supported)
+  const plat = navigator.platform || '';
+	const sanitizedPlat = plat.toLowerCase();
+  if (/^mac/i.test(plat) || /^ip(hone|od|ad)/i.test(plat)) {
+    return true;
+  }
+
+  // 3. Fallback to sniffing navigator.userAgent
+  const ua = navigator.userAgent || '';
+	const sanitizedUa = ua.toLowerCase();
+  return /\bmac\b/.test(ua) || /\b(iphone|ipad|ipod)\b/.test(sanitizedUa);
+}
+
+/**
+ * Extracts the simple Lambda function name from a full ARN or an API Gateway Integration URI.
+ */
+export function getFunctionNameFromArn(arnOrName: string): string {
+	if (!arnOrName) return '';
+	if (arnOrName.startsWith('arn:aws:lambda:')) {
+		return arnOrName.split(':').pop() || '';
+	}
+	if (arnOrName.includes('/functions/arn:aws:lambda:')) {
+		const match = arnOrName.match(/\/functions\/(arn:aws:lambda:[^/]+)/);
+		if (match) {
+			return match[1].split(':').pop() || '';
+		}
+	}
+	if (arnOrName.includes('/functions/')) {
+		const parts = arnOrName.split('/functions/');
+		const funcPart = parts[1].split('/')[0];
+		if (funcPart.startsWith('arn:aws:')) {
+			return funcPart.split(':').pop() || '';
+		}
+		return funcPart;
+	}
+	return arnOrName;
+}
+