@mks2508/mks-ui 0.3.2 → 0.5.0

package/dist/react-ui/blocks/Terminal/parsing/BadgeFormatter.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Badge formatter for terminal logs.
+ *
+ * Creates stylized badges using standard ANSI escape codes
+ * compatible with xterm.js.
+ *
+ * @module components/devenv/terminal/parsing/badge
+ */
+import type { TLogLevel } from './LogParser.types';
+/**
+ * Badge formatter class.
+ *
+ * Creates simple ANSI badges for log levels, tags, and timestamps.
+ *
+ * @example
+ * ```ts
+ * const formatter = new BadgeFormatter();
+ * const infoBadge = formatter.createLevelBadge('info');
+ * // Returns: '\x1b[1m\x1b[44m\x1b[97m[ INFO ]\x1b[0m'
+ * ```
+ */
+export declare class BadgeFormatter {
+    /**
+     * Create a level badge.
+     *
+     * Badge format: [ INFO ] with background color
+     *
+     * @param level - Log level
+     * @returns ANSI-formatted level badge string
+     */
+    createLevelBadge(level: TLogLevel): string;
+    /**
+     * Create a timestamp badge for end of line.
+     *
+     * Badge format: " 22:55:20" aligned to right
+     *
+     * @param timestamp - Display timestamp string
+     * @returns ANSI-formatted timestamp string
+     */
+    createTimestampBadge(timestamp: string): string;
+    /**
+     * Create a tag badge.
+     *
+     * Badge format: [TAG] with subtle styling
+     *
+     * @param tag - Tag string
+     * @returns ANSI-formatted tag badge string
+     */
+    createTagBadge(tag: string): string;
+    /**
+     * Create multiple tag badges joined with space.
+     *
+     * @param tags - Array of tag strings
+     * @returns ANSI-formatted tag badges string
+     */
+    createTagBadges(tags: string[]): string;
+    /**
+     * Create a status indicator.
+     *
+     * @param status - Status type
+     * @returns ANSI-formatted status indicator
+     */
+    createStatusIndicator(status: 'success' | 'warning' | 'error' | 'info'): string;
+    /**
+     * Create a box badge (multi-line).
+     *
+     * @param text - Text to display
+     * @param level - Log level for color
+     * @returns Multi-line ANSI box
+     */
+    createBoxBadge(text: string, level?: TLogLevel): string;
+}
+//# sourceMappingURL=BadgeFormatter.d.ts.map

package/dist/react-ui/blocks/Terminal/parsing/BadgeFormatter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BadgeFormatter.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/parsing/BadgeFormatter.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAkDnD;;;;;;;;;;;GAWG;AACH,qBAAa,cAAc;IACzB;;;;;;;OAOG;IACH,gBAAgB,CAAC,KAAK,EAAE,SAAS,GAAG,MAAM;IAS1C;;;;;;;OAOG;IACH,oBAAoB,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM;IAc/C;;;;;;;OAOG;IACH,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM;IAOnC;;;;;OAKG;IACH,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM;IAKvC;;;;;OAKG;IACH,qBAAqB,CAAC,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM;IAkB/E;;;;;;OAMG;IACH,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,GAAE,SAAkB,GAAG,MAAM;CAWhE"}

package/dist/react-ui/blocks/Terminal/parsing/BadgeFormatter.js

@@ -0,0 +1,136 @@
+//#region src/react-ui/blocks/Terminal/parsing/BadgeFormatter.ts
+/**
+* ANSI color combinations for badges.
+*
+* Uses standard 16-color palette for maximum compatibility.
+*/
+const BADGE_COLORS = {
+	info: "\x1B[44m\x1B[97m",
+	warn: "\x1B[43m\x1B[30m",
+	error: "\x1B[41m\x1B[97m",
+	debug: "\x1B[46m\x1B[30m",
+	fatal: "\x1B[45m\x1B[97m",
+	trace: "\x1B[47m\x1B[30m",
+	unknown: "\x1B[47m\x1B[30m"
+};
+/**
+* Tag badge colors (cyan on gray).
+*/
+const TAG_COLORS = "\x1B[90m\x1B[36m";
+/**
+* Timestamp colors (gray).
+*/
+const TIMESTAMP_COLORS = "\x1B[90m\x1B[37m";
+/**
+* Reset code.
+*/
+const RESET = "\x1B[0m";
+/**
+* Bold modifier.
+*/
+const BOLD = "\x1B[1m";
+/**
+* Level badge icons.
+*/
+const LEVEL_ICONS = {
+	info: "I",
+	warn: "W",
+	error: "E",
+	fatal: "F",
+	debug: "D",
+	trace: "T",
+	unknown: "?"
+};
+/**
+* Badge formatter class.
+*
+* Creates simple ANSI badges for log levels, tags, and timestamps.
+*
+* @example
+* ```ts
+* const formatter = new BadgeFormatter();
+* const infoBadge = formatter.createLevelBadge('info');
+* // Returns: '\x1b[1m\x1b[44m\x1b[97m[ INFO ]\x1b[0m'
+* ```
+*/
+var BadgeFormatter = class {
+	/**
+	* Create a level badge.
+	*
+	* Badge format: [ INFO ] with background color
+	*
+	* @param level - Log level
+	* @returns ANSI-formatted level badge string
+	*/
+	createLevelBadge(level) {
+		return `${BOLD}${BADGE_COLORS[level] ?? BADGE_COLORS.unknown}[${LEVEL_ICONS[level] ?? LEVEL_ICONS.unknown}${level.toUpperCase().padEnd(4)}]${RESET}`;
+	}
+	/**
+	* Create a timestamp badge for end of line.
+	*
+	* Badge format: " 22:55:20" aligned to right
+	*
+	* @param timestamp - Display timestamp string
+	* @returns ANSI-formatted timestamp string
+	*/
+	createTimestampBadge(timestamp) {
+		if (!timestamp) return "";
+		return `${TIMESTAMP_COLORS}${(timestamp.includes(".") ? timestamp.split(".")[0] : timestamp).padStart(12)}${RESET}`;
+	}
+	/**
+	* Create a tag badge.
+	*
+	* Badge format: [TAG] with subtle styling
+	*
+	* @param tag - Tag string
+	* @returns ANSI-formatted tag badge string
+	*/
+	createTagBadge(tag) {
+		return `${TAG_COLORS}[${tag.length > 12 ? tag.slice(0, 9) + "..." : tag}]${RESET}`;
+	}
+	/**
+	* Create multiple tag badges joined with space.
+	*
+	* @param tags - Array of tag strings
+	* @returns ANSI-formatted tag badges string
+	*/
+	createTagBadges(tags) {
+		if (!tags || tags.length === 0) return "";
+		return tags.map((tag) => this.createTagBadge(tag)).join("");
+	}
+	/**
+	* Create a status indicator.
+	*
+	* @param status - Status type
+	* @returns ANSI-formatted status indicator
+	*/
+	createStatusIndicator(status) {
+		return `${{
+			success: "\x1B[42m\x1B[97m",
+			warning: "\x1B[43m\x1B[30m",
+			error: "\x1B[41m\x1B[97m",
+			info: "\x1B[44m\x1B[97m"
+		}[status]} ${{
+			success: "✓",
+			warning: "⚠",
+			error: "✖",
+			info: "i"
+		}[status]} ${RESET}`;
+	}
+	/**
+	* Create a box badge (multi-line).
+	*
+	* @param text - Text to display
+	* @param level - Log level for color
+	* @returns Multi-line ANSI box
+	*/
+	createBoxBadge(text, level = "info") {
+		const colors = BADGE_COLORS[level] ?? BADGE_COLORS.unknown;
+		const padding = 2;
+		const width = text.length + padding * 2 + 2;
+		return `${`\x1b[90m┌${"─".repeat(width)}┐${RESET}`}\r\n${`${colors}│${" ".repeat(padding)}${text}${" ".repeat(padding)}│${RESET}`}\r\n${`\x1b[90m└${"─".repeat(width)}┘${RESET}`}`;
+	}
+};
+
+//#endregion
+export { BadgeFormatter };

package/dist/react-ui/blocks/Terminal/parsing/HttpLogParser.d.ts

@@ -0,0 +1,117 @@
+/**
+ * HTTP log parser for specialized HTTP request detection.
+ *
+ * Detects and parses HTTP request logs with syntax highlighting
+ * for methods (GET, POST, etc.), routes, and parameters.
+ *
+ * @module components/devenv/terminal/parsing/HttpLogParser
+ */
+import type { IParsedLogEntry } from './LogParser.types';
+/**
+ * HTTP method enumeration.
+ */
+export type THttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE';
+/**
+ * Parsed HTTP request data.
+ */
+export interface IHttpParsedData {
+    /** HTTP method */
+    method: THttpMethod;
+    /** Request path/route */
+    path: string;
+    /** Query parameters extracted from path */
+    params?: Record<string, string>;
+    /** Whether request opens a multiline block (has brace) */
+    opensMultiline: boolean;
+}
+/**
+ * HTTP log parser class.
+ *
+ * Detects HTTP requests in log lines and extracts structured data.
+ * Supports various log formats:
+ *
+ * - `GET /api/endpoint`
+ * - `GET /api/endpoint/:param {`
+ * - `POST /api/users HTTP/1.1`
+ *
+ * @example
+ * ```ts
+ * const parser = new HttpLogParser();
+ * const parsed = parser.parseLine('GET /api/logs/containers/:name/stream {');
+ * // parsed.method = 'GET'
+ * // parsed.path = '/api/logs/containers/:name/stream'
+ * // parsed.opensMultiline = true
+ * ```
+ */
+export declare class HttpLogParser {
+    /** HTTP method pattern */
+    private readonly HTTP_PATTERN;
+    /** URL path with parameters pattern */
+    private readonly PATH_PARAM_PATTERN;
+    /**
+     * Parse a log line for HTTP request data.
+     *
+     * @param line - Log line to parse
+     * @returns Parsed HTTP data or null if not an HTTP line
+     */
+    parseLine(line: string): IHttpParsedData | null;
+    /**
+     * Check if a line is an HTTP request line.
+     *
+     * @param line - Line to check
+     * @returns true if line is an HTTP request
+     */
+    isHttpLine(line: string): boolean;
+    /**
+     * Extract path parameters from a route path.
+     *
+     * @param path - Route path (e.g., `/api/users/:id`)
+     * @returns Object with parameter names
+     */
+    extractPathParams(path: string): Record<string, string> | undefined;
+    /**
+     * Format HTTP method with syntax highlighting class.
+     *
+     * @param _method - HTTP method
+     * @returns CSS class for highlighting
+     */
+    getMethodClass(_method: THttpMethod): string;
+    /**
+     * Format path with syntax highlighting.
+     *
+     * @param path - Request path
+     * @returns CSS class for path highlighting
+     */
+    getPathClass(): string;
+    /**
+     * Highlight an HTTP request line.
+     *
+     * Returns an array of parts with their associated CSS classes.
+     *
+     * @param line - HTTP request line
+     * @returns Array of {text, className} parts
+     */
+    highlightLine(line: string): Array<{
+        text: string;
+        className?: string;
+    }>;
+    /**
+     * Highlight path segments (routes and parameters).
+     *
+     * @param path - Path string
+     * @returns Highlighted parts
+     * @private
+     */
+    private highlightPath;
+    /**
+     * Parse a multiline HTTP request block.
+     *
+     * Combines the initial request line with continuation lines
+     * that form JSON or structured data.
+     *
+     * @param lines - Array of log lines
+     * @returns Parsed entry with HTTP data
+     */
+    parseHttpBlock(lines: string[]): IParsedLogEntry | null;
+}
+//# sourceMappingURL=HttpLogParser.d.ts.map

package/dist/react-ui/blocks/Terminal/parsing/HttpLogParser.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HttpLogParser.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/blocks/Terminal/parsing/HttpLogParser.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEzD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEjH;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,kBAAkB;IAClB,MAAM,EAAE,WAAW,CAAC;IAEpB,yBAAyB;IACzB,IAAI,EAAE,MAAM,CAAC;IAEb,2CAA2C;IAC3C,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEhC,0DAA0D;IAC1D,cAAc,EAAE,OAAO,CAAC;CACzB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAAa,aAAa;IACxB,0BAA0B;IAC1B,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAmF;IAEhH,uCAAuC;IACvC,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAgC;IAEnE;;;;;OAKG;IACH,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe,GAAG,IAAI;IAc/C;;;;;OAKG;IACH,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIjC;;;;;OAKG;IACH,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS;IAWnE;;;;;OAKG;IACH,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM;IAK5C;;;;;OAKG;IACH,YAAY,IAAI,MAAM;IAItB;;;;;;;OAOG;IACH,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAwCxE;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAgCrB;;;;;;;;OAQG;IACH,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,eAAe,GAAG,IAAI;CAwBxD"}

package/dist/react-ui/blocks/Terminal/parsing/HttpLogParser.js

@@ -0,0 +1,174 @@
+//#region src/react-ui/blocks/Terminal/parsing/HttpLogParser.ts
+/**
+* HTTP log parser class.
+*
+* Detects HTTP requests in log lines and extracts structured data.
+* Supports various log formats:
+*
+* - `GET /api/endpoint`
+* - `GET /api/endpoint/:param {`
+* - `POST /api/users HTTP/1.1`
+*
+* @example
+* ```ts
+* const parser = new HttpLogParser();
+* const parsed = parser.parseLine('GET /api/logs/containers/:name/stream {');
+* // parsed.method = 'GET'
+* // parsed.path = '/api/logs/containers/:name/stream'
+* // parsed.opensMultiline = true
+* ```
+*/
+var HttpLogParser = class {
+	/** HTTP method pattern */
+	HTTP_PATTERN = /^(GET|POST|PUT|DELETE|PATCH|HEAD|OPTIONS|CONNECT|TRACE)\s+(.+?)(?:\s+(\{))?$/i;
+	/** URL path with parameters pattern */
+	PATH_PARAM_PATTERN = /:([a-zA-Z_][a-zA-Z0-9_]*)/g;
+	/**
+	* Parse a log line for HTTP request data.
+	*
+	* @param line - Log line to parse
+	* @returns Parsed HTTP data or null if not an HTTP line
+	*/
+	parseLine(line) {
+		const match = line.match(this.HTTP_PATTERN);
+		if (!match) return null;
+		const [, method, path, hasBrace] = match;
+		return {
+			method: method.toUpperCase(),
+			path: path.trim(),
+			params: this.extractPathParams(path),
+			opensMultiline: hasBrace === "{"
+		};
+	}
+	/**
+	* Check if a line is an HTTP request line.
+	*
+	* @param line - Line to check
+	* @returns true if line is an HTTP request
+	*/
+	isHttpLine(line) {
+		return this.HTTP_PATTERN.test(line);
+	}
+	/**
+	* Extract path parameters from a route path.
+	*
+	* @param path - Route path (e.g., `/api/users/:id`)
+	* @returns Object with parameter names
+	*/
+	extractPathParams(path) {
+		const matches = path.matchAll(this.PATH_PARAM_PATTERN);
+		const params = {};
+		for (const match of matches) params[match[1]] = `:${match[1]}`;
+		return Object.keys(params).length > 0 ? params : void 0;
+	}
+	/**
+	* Format HTTP method with syntax highlighting class.
+	*
+	* @param _method - HTTP method
+	* @returns CSS class for highlighting
+	*/
+	getMethodClass(_method) {
+		return "text-pink-400 font-semibold";
+	}
+	/**
+	* Format path with syntax highlighting.
+	*
+	* @param path - Request path
+	* @returns CSS class for path highlighting
+	*/
+	getPathClass() {
+		return "text-cyan-400";
+	}
+	/**
+	* Highlight an HTTP request line.
+	*
+	* Returns an array of parts with their associated CSS classes.
+	*
+	* @param line - HTTP request line
+	* @returns Array of {text, className} parts
+	*/
+	highlightLine(line) {
+		const parts = [];
+		const match = line.match(this.HTTP_PATTERN);
+		if (!match) return [{ text: line }];
+		const [fullMatch, method, path, hasBrace] = match;
+		const beforeMethod = line.indexOf(fullMatch);
+		if (beforeMethod > 0) parts.push({ text: line.slice(0, beforeMethod) });
+		parts.push({
+			text: method.toUpperCase(),
+			className: this.getMethodClass(method)
+		});
+		parts.push({ text: " " });
+		const pathParts = this.highlightPath(path.trim());
+		parts.push(...pathParts);
+		if (hasBrace) parts.push({
+			text: " {",
+			className: "text-yellow-500"
+		});
+		return parts;
+	}
+	/**
+	* Highlight path segments (routes and parameters).
+	*
+	* @param path - Path string
+	* @returns Highlighted parts
+	* @private
+	*/
+	highlightPath(path) {
+		const parts = [];
+		let remaining = path;
+		while (remaining.length > 0) {
+			const paramMatch = remaining.match(/^\/?:([a-zA-Z_][a-zA-Z0-9_]*)/);
+			if (paramMatch) {
+				const beforeParam = remaining.slice(0, paramMatch.index);
+				if (beforeParam.length > 0) parts.push({
+					text: beforeParam,
+					className: this.getPathClass()
+				});
+				parts.push({
+					text: paramMatch[0],
+					className: "text-purple-400 bg-purple-500/10 px-0.5 rounded"
+				});
+				remaining = remaining.slice(paramMatch[0].length);
+			} else {
+				parts.push({
+					text: remaining,
+					className: this.getPathClass()
+				});
+				break;
+			}
+		}
+		return parts;
+	}
+	/**
+	* Parse a multiline HTTP request block.
+	*
+	* Combines the initial request line with continuation lines
+	* that form JSON or structured data.
+	*
+	* @param lines - Array of log lines
+	* @returns Parsed entry with HTTP data
+	*/
+	parseHttpBlock(lines) {
+		if (lines.length === 0) return null;
+		const firstLine = lines[0];
+		const httpData = this.parseLine(firstLine);
+		if (!httpData) return null;
+		const raw = lines.join("\n");
+		return {
+			raw,
+			formatted: raw,
+			level: "info",
+			line_number: 0,
+			is_stderr: false,
+			message: firstLine,
+			content_type: "http",
+			http_method: httpData.method,
+			http_path: httpData.path,
+			is_continuation: false
+		};
+	}
+};
+
+//#endregion
+export { HttpLogParser };