@mks2508/mks-ui 0.3.1 → 0.4.0

package/src/react-ui/blocks/Terminal/components/LogLineBadges.tsx

@@ -0,0 +1,316 @@
+/**
+ * React badge components for log lines.
+ *
+ * Styled badge components using Tailwind CSS for the React log viewer.
+ * Provides level badges, timestamp badges, and tag badges with consistent
+ * Synthwave Dark theme styling.
+ *
+ * All badge components are memoized for optimal performance.
+ *
+ * @module components/devenv/terminal/LogLineBadges
+ */
+
+'use client';
+
+import { memo } from 'react';
+import type { TLogLevel, TContentType } from '../parsing';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Level badge color mapping.
+ *
+ * Maps each log level to its corresponding Tailwind color classes.
+ */
+const LEVEL_COLORS: Record<TLogLevel, string> = {
+  info: 'bg-blue-500/15 text-blue-400 border-blue-500/25 shadow-[0_0_6px_rgba(59,130,246,0.15)]',
+  warn: 'bg-yellow-500/15 text-yellow-400 border-yellow-500/25 shadow-[0_0_6px_rgba(234,179,8,0.15)]',
+  error: 'bg-red-500/20 text-red-400 border-red-500/30 shadow-[0_0_8px_rgba(239,68,68,0.2)]',
+  fatal: 'bg-pink-500/20 text-pink-400 border-pink-500/30 shadow-[0_0_8px_rgba(236,72,153,0.2)]',
+  debug: 'bg-cyan-500/15 text-cyan-400 border-cyan-500/25 shadow-[0_0_6px_rgba(6,182,212,0.15)]',
+  trace: 'bg-gray-500/10 text-gray-400 border-gray-500/20',
+  unknown: 'bg-gray-500/8 text-gray-500 border-gray-500/15',
+};
+
+/**
+ * Props for LevelBadge component.
+ */
+export interface ILevelBadgeProps {
+  /** Log level to display */
+  level: TLogLevel;
+  /** Optional custom class name */
+  className?: string;
+}
+
+/**
+ * Level badge component (memoized).
+ *
+ * Displays a colored badge with the log level label.
+ * Uses Synthwave Dark theme colors with glassmorphic effect.
+ *
+ * @example
+ * ```tsx
+ * <LevelBadge level="info" />
+ * // Renders: [INFO] with blue background
+ * ```
+ */
+export const LevelBadge = memo(function LevelBadge({ level, className }: ILevelBadgeProps): React.JSX.Element {
+  return (
+    <span
+      className={cn(
+        'px-2 py-0.5 rounded border font-mono text-[10px] font-bold tracking-wider',
+        LEVEL_COLORS[level],
+        className
+      )}
+    >
+      {level.toUpperCase()}
+    </span>
+  );
+});
+
+/**
+ * Props for TimestampBadge component.
+ */
+export interface ITimestampBadgeProps {
+  /** Timestamp string to display */
+  timestamp: string;
+  /** Optional custom class name */
+  className?: string;
+}
+
+/**
+ * Timestamp badge component (memoized).
+ *
+ * Displays a timestamp with muted styling.
+ * Uses tabular numbers for consistent alignment.
+ *
+ * @example
+ * ```tsx
+ * <TimestampBadge timestamp="22:41:03" />
+ * // Renders: 22:41:03 in gray
+ * ```
+ */
+export const TimestampBadge = memo(function TimestampBadge({ timestamp, className }: ITimestampBadgeProps): React.JSX.Element {
+  // Truncate to HH:MM:SS format for consistent width
+  const timeOnly = timestamp.includes('.')
+    ? timestamp.split('.')[0]
+    : timestamp;
+
+  return (
+    <span
+      className={cn(
+        'ml-auto text-muted-foreground font-mono text-xs tabular-nums',
+        'opacity-70',
+        className
+      )}
+    >
+      {timeOnly}
+    </span>
+  );
+});
+
+/**
+ * Props for TagBadge component.
+ */
+export interface ITagBadgeProps {
+  /** Tag string to display */
+  tag: string;
+  /** Optional custom class name */
+  className?: string;
+}
+
+/**
+ * Tag badge component (memoized).
+ *
+ * Displays a component tag (e.g., "API", "ROUTES").
+ * Truncates long tags to 12 characters.
+ *
+ * @example
+ * ```tsx
+ * <TagBadge tag="WORKSPACEMANAGER" />
+ * // Renders: [WORKSPACEMAN...] in cyan
+ * ```
+ */
+export const TagBadge = memo(function TagBadge({ tag, className }: ITagBadgeProps): React.JSX.Element {
+  // Truncate long tags
+  const displayTag = tag.length > 12 ? tag.slice(0, 9) + '...' : tag;
+
+  return (
+    <span
+      className={cn(
+        'px-1.5 py-0.5 rounded border font-mono text-xs',
+        'bg-purple-500/10 text-purple-400 border-purple-500/20',
+        className
+      )}
+    >
+      {displayTag}
+    </span>
+  );
+});
+
+/**
+ * Props for TagBadges component.
+ */
+export interface ITagBadgesProps {
+  /** Array of tag strings */
+  tags: string[];
+  /** Optional custom class name */
+  className?: string;
+}
+
+/**
+ * Tag badges container component (memoized).
+ *
+ * Displays multiple tag badges with consistent spacing.
+ *
+ * @example
+ * ```tsx
+ * <TagBadges tags={['API', 'ROUTES']} />
+ * // Renders: [API][ROUTES] with spacing
+ * ```
+ */
+export const TagBadges = memo(function TagBadges({ tags, className }: ITagBadgesProps): React.JSX.Element | null {
+  if (!tags || tags.length === 0) return null;
+
+  return (
+    <span className={cn('flex items-center gap-1', className)}>
+      {tags.map((tag) => (
+        <TagBadge key={tag} tag={tag} />
+      ))}
+    </span>
+  );
+});
+
+/**
+ * Content type badge color and label mapping.
+ *
+ * Maps each content type to its display label and Tailwind color classes.
+ * 'plain' entries are hidden (no badge rendered).
+ */
+const CONTENT_TYPE_STYLES: Record<TContentType, { label: string; className: string }> = {
+  plain: { label: '', className: '' },
+  http: {
+    label: 'HTTP',
+    className: 'bg-cyan-500/15 text-cyan-400 border-cyan-500/25 shadow-[0_0_6px_rgba(6,182,212,0.15)]',
+  },
+  json: {
+    label: 'JSON',
+    className: 'bg-emerald-500/15 text-emerald-400 border-emerald-500/25 shadow-[0_0_6px_rgba(16,185,129,0.15)]',
+  },
+  table: {
+    label: 'TABLE',
+    className: 'bg-violet-500/15 text-violet-400 border-violet-500/25 shadow-[0_0_6px_rgba(139,92,246,0.15)]',
+  },
+  error: {
+    label: 'ERR',
+    className: 'bg-red-500/20 text-red-400 border-red-500/30 shadow-[0_0_8px_rgba(239,68,68,0.2)]',
+  },
+};
+
+/**
+ * Props for ContentTypeBadge component.
+ */
+export interface IContentTypeBadgeProps {
+  /** Content type of the log entry */
+  contentType: TContentType;
+  /** HTTP method (GET, POST, etc.) — shown instead of generic "HTTP" label */
+  httpMethod?: string;
+  /** Optional custom class name */
+  className?: string;
+}
+
+/**
+ * Content type badge component (memoized).
+ *
+ * Displays a colored badge indicating the content type of a log entry
+ * (HTTP, JSON, TABLE, ERR). HTTP entries show the actual method
+ * (GET, POST, etc.) instead of a generic "HTTP" label.
+ *
+ * Returns null for 'plain' content type — no badge rendered.
+ *
+ * @example
+ * ```tsx
+ * <ContentTypeBadge contentType="http" httpMethod="GET" />
+ * // Renders: [GET] in cyan
+ *
+ * <ContentTypeBadge contentType="json" />
+ * // Renders: [JSON] in emerald
+ * ```
+ */
+export const ContentTypeBadge = memo(function ContentTypeBadge({
+  contentType,
+  httpMethod,
+  className,
+}: IContentTypeBadgeProps): React.JSX.Element | null {
+  if (contentType === 'plain' || !contentType) return null;
+  const style = CONTENT_TYPE_STYLES[contentType];
+
+  // HTTP entries show the actual method (GET, POST, etc.) instead of generic "HTTP"
+  const label = contentType === 'http' && httpMethod
+    ? httpMethod.toUpperCase()
+    : style.label;
+
+  return (
+    <span className={cn(
+      'px-1.5 py-0.5 rounded border font-mono text-[10px] font-bold tracking-wider',
+      style.className,
+      className
+    )}>
+      {label}
+    </span>
+  );
+});
+
+/**
+ * Props for LogLineContainer component.
+ */
+export interface ILogLineContainerProps {
+  /** Log level for styling */
+  level: TLogLevel;
+  /** Line number */
+  lineNumber: number;
+  /** Whether this is a continuation line */
+  isContinuation?: boolean;
+  /** Optional custom class name */
+  className?: string;
+  /** Child elements */
+  children: React.ReactNode;
+}
+
+/**
+ * Log line container component.
+ *
+ * Provides consistent styling and structure for log lines.
+ * Adds subtle hover effect and line number on hover.
+ *
+ * @example
+ * ```tsx
+ * <LogLineContainer level="info" lineNumber={42}>
+ *   <LevelBadge level="info" />
+ *   <span>Log message here</span>
+ * </LogLineContainer>
+ * ```
+ */
+export function LogLineContainer({
+  level,
+  lineNumber,
+  isContinuation = false,
+  className,
+  children,
+}: ILogLineContainerProps): React.JSX.Element {
+  return (
+    <div
+      className={cn(
+        'group flex items-start gap-2 py-0.5 px-2 rounded-sm',
+        'hover:bg-white/5 transition-colors duration-150',
+        'border-l-2',
+        isContinuation ? 'border-transparent ml-6' : 'border-transparent',
+        // Add colored left border on hover based on level
+        `hover:border-${level === 'error' || level === 'fatal' ? 'red' : level === 'warn' ? 'yellow' : 'blue'}-500/50`,
+        className
+      )}
+      title={`Line ${lineNumber}`}
+    >
+      {children}
+    </div>
+  );
+}

package/src/react-ui/blocks/Terminal/components/SpecializedSyntaxHighlighter.tsx

@@ -0,0 +1,218 @@
+/**
+ * Specialized syntax highlighter for different log content types.
+ *
+ * Provides syntax highlighting for HTTP requests, tables, and JSON
+ * with appropriate styling for each type.
+ *
+ * @module components/devenv/terminal/SpecializedSyntaxHighlighter
+ */
+
+'use client';
+
+import { HttpLogParser } from '../parsing/HttpLogParser';
+import { TableParser, TABLE_CHARS } from '../parsing/TableParser';
+import { HighlightedJson } from './SyntaxHighlight';
+import { cn } from '@/react-ui/lib/utils';
+
+/**
+ * Props for specialized syntax highlighting.
+ */
+export interface ISpecializedSyntaxHighlighterProps {
+  /** Content type */
+  contentType?: 'plain' | 'http' | 'json' | 'table' | 'error';
+
+  /** HTTP method (for HTTP content) */
+  httpMethod?: string;
+
+  /** HTTP path (for HTTP content) */
+  httpPath?: string;
+
+  /** Table data (for table content) */
+  tableData?: unknown;
+
+  /** JSON data (for JSON content) */
+  jsonData?: Record<string, unknown> | unknown;
+
+  /** Raw text to highlight */
+  text: string;
+
+  /** Optional custom class name */
+  className?: string;
+}
+
+// Singleton instances
+const httpParser = new HttpLogParser();
+const tableParser = new TableParser();
+
+/**
+ * Specialized syntax highlighter component.
+ *
+ * Applies appropriate highlighting based on content type:
+ * - HTTP: pink method, cyan path
+ * - JSON: structured syntax highlighting
+ * - Table: borders in gray, content in colors
+ * - Plain: default highlighting
+ *
+ * @example
+ * ```tsx
+ * <SpecializedSyntaxHighlighter
+ *   contentType="http"
+ *   httpMethod="GET"
+ *   httpPath="/api/endpoint"
+ *   text="GET /api/endpoint {"
+ * />
+ * ```
+ */
+export function SpecializedSyntaxHighlighter({
+  contentType = 'plain',
+  httpMethod: _httpMethod,
+  httpPath: _httpPath,
+  tableData: _tableData,
+  jsonData,
+  text,
+  className,
+}: ISpecializedSyntaxHighlighterProps): React.JSX.Element {
+  // HTTP content highlighting
+  if (contentType === 'http') {
+    return <HttpHighlighter text={text} className={className} />;
+  }
+
+  // JSON content highlighting
+  if (contentType === 'json' && jsonData) {
+    return (
+      <div className={cn('font-mono text-xs', className)}>
+        <HighlightedJson json={jsonData as Record<string, unknown>} />
+      </div>
+    );
+  }
+
+  // Table content highlighting
+  if (contentType === 'table') {
+    return <TableHighlighter text={text} className={className} />;
+  }
+
+  // Plain content - use default syntax highlighting
+  return <span className={cn('font-mono text-sm', className)}>{text}</span>;
+}
+
+/**
+ * HTTP request syntax highlighter.
+ *
+ * Highlights HTTP method (pink) and path (cyan).
+ */
+function HttpHighlighter({ text, className }: { text: string; className?: string }): React.JSX.Element {
+  const parts = httpParser.highlightLine(text);
+
+  return (
+    <span className={cn('font-mono text-sm', className)}>
+      {parts.map((part, i) => (
+        <span key={i} className={part.className}>
+          {part.text}
+        </span>
+      ))}
+    </span>
+  );
+}
+
+/**
+ * Table syntax highlighter.
+ *
+ * Renders detected tables as actual styled HTML tables
+ * with header detection, alternating rows, and proper borders.
+ * Falls back to box-drawing character highlighting.
+ */
+function TableHighlighter({ text, className }: { text: string; className?: string }): React.JSX.Element {
+  const lines = text.split('\n').filter((l) => l.trim().length > 0);
+
+  // Try to extract structured table data
+  const tableData = tableParser.parseTable(lines, 0);
+  const { headers, dataRows } = tableData;
+
+  // If we have structured data, render as an actual HTML table
+  if (dataRows.length > 0 && (headers || dataRows.length > 1)) {
+    const displayHeaders = headers || (dataRows.length > 1 ? dataRows[0] : undefined);
+    const displayRows = headers ? dataRows.filter((r) => r !== headers) : dataRows.slice(displayHeaders ? 1 : 0);
+
+    return (
+      <div className={cn('my-1 overflow-x-auto rounded-md border border-border/20', className)}>
+        <table className="w-full font-mono text-xs border-collapse">
+          {displayHeaders && (
+            <thead>
+              <tr className="bg-muted/30 border-b border-border/30">
+                {displayHeaders.map((header, i) => (
+                  <th
+                    key={i}
+                    className="px-3 py-1.5 text-left text-[10px] font-bold uppercase tracking-wider text-muted-foreground/80"
+                  >
+                    {header}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+          )}
+          <tbody>
+            {displayRows.map((row, i) => (
+              <tr
+                key={i}
+                className={cn(
+                  'border-b border-border/10 transition-colors hover:bg-white/[0.04]',
+                  i % 2 === 0 ? 'bg-transparent' : 'bg-white/[0.02]'
+                )}
+              >
+                {row.map((cell, j) => (
+                  <td key={j} className="px-3 py-1 text-foreground/85 whitespace-nowrap">
+                    {cell}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+  }
+
+  // Fallback: render with box-drawing character highlighting
+  return (
+    <div className={cn('font-mono text-xs', className)}>
+      {lines.map((line, i) => {
+        const rowType = tableParser.getRowType(line);
+        const rowClass = tableParser.getRowClass(rowType);
+        return (
+          <div key={i} className={rowClass}>
+            <TableRowLine line={line} />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Individual table row with box-drawing character highlighting.
+ */
+function TableRowLine({ line }: { line: string }): React.JSX.Element {
+  const parts: React.ReactNode[] = [];
+  let lastIndex = 0;
+
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (TABLE_CHARS.includes(char as typeof TABLE_CHARS[number])) {
+      if (i > lastIndex) {
+        parts.push(<span key={lastIndex}>{line.slice(lastIndex, i)}</span>);
+      }
+      parts.push(<span key={i} className="text-border/40">{char}</span>);
+      lastIndex = i + 1;
+    }
+  }
+
+  if (lastIndex < line.length) {
+    parts.push(<span key={lastIndex}>{line.slice(lastIndex)}</span>);
+  }
+
+  if (parts.length === 0) {
+    return <span>{line}</span>;
+  }
+
+  return <>{parts}</>;
+}