@principal-ai/subsystems-react 0.17.0 → 0.19.0

package/src/components/dashboard/components/MetricCard.tsx

@@ -1,270 +0,0 @@
-/**
- * MetricCard
- *
- * Displays a single metric value with optional trend indicator and sparkline.
- */
-
-import { useTheme } from '@principal-ade/industry-theme';
-import type { MetricCardProps } from '../types';
-
-export function MetricCard({
-  title,
-  value,
-  unit,
-  description,
-  trend,
-  changePercent,
-  showTrend = true,
-  showSparkline = false,
-  sparklineData,
-  thresholds,
-  size = 'medium',
-  onClick,
-}: MetricCardProps) {
-  const { theme } = useTheme();
-
-  // Font size indices into theme.fontSizes array
-  // Typical array: [12, 14, 16, 20, 24, 32, 48]
-  const sizeConfig = {
-    small: {
-      padding: '12px 16px',
-      titleIndex: 0,    // ~12px
-      valueIndex: 4,    // ~24px
-      unitIndex: 0,     // ~12px
-      trendIndex: 0,    // ~12px
-    },
-    medium: {
-      padding: '16px 20px',
-      titleIndex: 1,    // ~14px
-      valueIndex: 5,    // ~32px
-      unitIndex: 1,     // ~14px
-      trendIndex: 0,    // ~12px
-    },
-    large: {
-      padding: '20px 24px',
-      titleIndex: 2,    // ~16px
-      valueIndex: 6,    // ~48px
-      unitIndex: 2,     // ~16px
-      trendIndex: 1,    // ~14px
-    },
-  };
-
-  const config = sizeConfig[size];
-
-  const getValueColor = () => {
-    if (!thresholds || typeof value !== 'number') {
-      return theme.colors.text;
-    }
-    if (thresholds.critical !== undefined && value >= thresholds.critical) {
-      return theme.colors.error;
-    }
-    if (thresholds.warning !== undefined && value >= thresholds.warning) {
-      return theme.colors.warning;
-    }
-    return theme.colors.success;
-  };
-
-  const getTrendIcon = () => {
-    if (!trend || !showTrend) return null;
-
-    const iconSize = size === 'small' ? 12 : 16;
-    const iconStyle: React.CSSProperties = {
-      width: iconSize,
-      height: iconSize,
-      marginRight: 4,
-    };
-
-    if (trend === 'up') {
-      return (
-        <svg style={iconStyle} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-          <path d="M7 17l5-5 5 5M7 7l5 5 5-5" />
-        </svg>
-      );
-    }
-    if (trend === 'down') {
-      return (
-        <svg style={iconStyle} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-          <path d="M7 7l5 5 5-5M7 17l5-5 5 5" />
-        </svg>
-      );
-    }
-    return (
-      <svg style={iconStyle} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-        <path d="M5 12h14" />
-      </svg>
-    );
-  };
-
-  const getTrendColor = () => {
-    if (!trend) return theme.colors.textSecondary;
-    if (trend === 'up') return theme.colors.success;
-    if (trend === 'down') return theme.colors.error;
-    return theme.colors.textSecondary;
-  };
-
-  const formatValue = (val: number | string): string => {
-    if (typeof val === 'string') return val;
-    if (val >= 1000000) return `${(val / 1000000).toFixed(1)}M`;
-    if (val >= 1000) return `${(val / 1000).toFixed(1)}K`;
-    if (val % 1 !== 0) return val.toFixed(1);
-    return val.toString();
-  };
-
-  const renderSparkline = () => {
-    if (!showSparkline || !sparklineData || sparklineData.length < 2) return null;
-
-    const values = sparklineData
-      .map((point) => point.value)
-      .filter((v): v is number => typeof v === 'number');
-
-    if (values.length < 2) return null;
-
-    const minVal = Math.min(...values);
-    const maxVal = Math.max(...values);
-    const range = maxVal - minVal || 1;
-
-    const width = size === 'small' ? 100 : size === 'medium' ? 140 : 180;
-    const height = size === 'small' ? 24 : size === 'medium' ? 32 : 40;
-    const padding = 2;
-
-    const points = values.map((val, i) => {
-      const x = padding + (i / (values.length - 1)) * (width - padding * 2);
-      const y = height - padding - ((val - minVal) / range) * (height - padding * 2);
-      return `${x},${y}`;
-    });
-
-    const pathD = `M ${points.join(' L ')}`;
-
-    // Create gradient fill path
-    const fillPoints = [
-      `${padding},${height - padding}`,
-      ...points,
-      `${width - padding},${height - padding}`,
-    ];
-    const fillD = `M ${fillPoints.join(' L ')} Z`;
-
-    const lineColor = trend === 'up' ? theme.colors.success : trend === 'down' ? theme.colors.error : theme.colors.primary || theme.colors.accent;
-
-    return (
-      <div style={{ marginTop: theme.space?.[2] || 8 }}>
-        <svg width={width} height={height} style={{ display: 'block' }}>
-          <defs>
-            <linearGradient id={`sparkline-gradient-${title}`} x1="0%" y1="0%" x2="0%" y2="100%">
-              <stop offset="0%" stopColor={lineColor} stopOpacity={0.3} />
-              <stop offset="100%" stopColor={lineColor} stopOpacity={0.05} />
-            </linearGradient>
-          </defs>
-          <path d={fillD} fill={`url(#sparkline-gradient-${title})`} />
-          <path d={pathD} fill="none" stroke={lineColor} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      </div>
-    );
-  };
-
-  return (
-    <div
-      onClick={onClick}
-      style={{
-        backgroundColor: theme.colors.surface || theme.colors.background,
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.radii?.[2] || 8,
-        padding: config.padding,
-        cursor: onClick ? 'pointer' : 'default',
-        transition: 'border-color 0.2s, box-shadow 0.2s',
-        minWidth: size === 'small' ? 140 : size === 'medium' ? 180 : 220,
-        fontFamily: theme.fonts.body,
-      }}
-      onMouseEnter={(e) => {
-        if (onClick) {
-          e.currentTarget.style.borderColor = theme.colors.primary || theme.colors.accent;
-        }
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.borderColor = theme.colors.border;
-      }}
-    >
-      {/* Title */}
-      <div
-        style={{
-          fontSize: theme.fontSizes[config.titleIndex],
-          color: theme.colors.textSecondary,
-          marginBottom: theme.space?.[2] || 8,
-          fontWeight: theme.fontWeights.medium,
-        }}
-      >
-        {title}
-      </div>
-
-      {/* Value */}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'baseline',
-          gap: 4,
-        }}
-      >
-        <span
-          style={{
-            fontSize: theme.fontSizes[config.valueIndex],
-            fontWeight: theme.fontWeights.semibold,
-            color: getValueColor(),
-            fontVariantNumeric: 'tabular-nums',
-            fontFamily: theme.fonts.monospace,
-          }}
-        >
-          {formatValue(value)}
-        </span>
-        {unit && (
-          <span
-            style={{
-              fontSize: theme.fontSizes[config.unitIndex],
-              color: theme.colors.textSecondary,
-            }}
-          >
-            {unit}
-          </span>
-        )}
-      </div>
-
-      {/* Trend */}
-      {showTrend && (trend || changePercent !== undefined) && (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            marginTop: theme.space?.[2] || 8,
-            fontSize: theme.fontSizes[config.trendIndex],
-            color: getTrendColor(),
-            fontFamily: theme.fonts.monospace,
-          }}
-        >
-          {getTrendIcon()}
-          {changePercent !== undefined && (
-            <span>
-              {changePercent > 0 ? '+' : ''}
-              {changePercent.toFixed(1)}%
-            </span>
-          )}
-        </div>
-      )}
-
-      {/* Description */}
-      {description && (
-        <div
-          style={{
-            fontSize: theme.fontSizes[config.trendIndex],
-            color: theme.colors.textSecondary,
-            marginTop: theme.space?.[2] || 8,
-            lineHeight: theme.lineHeights.body,
-            opacity: 0.8,
-          }}
-        >
-          {description}
-        </div>
-      )}
-
-      {/* Sparkline */}
-      {renderSparkline()}
-    </div>
-  );
-}

package/src/components/dashboard/components/SourceLink.tsx

@@ -1,63 +0,0 @@
-/**
- * SourceLink
- *
- * Displays a link to the workflow/canvas that sources a metric.
- */
-
-import { useTheme } from '@principal-ade/industry-theme';
-import type { SourceLinkProps } from '../types';
-
-export function SourceLink({ source, onClick }: SourceLinkProps) {
-  const { theme } = useTheme();
-
-  const formatSource = () => {
-    const parts = [source.storyboard, source.workflow];
-    if (source.nodes && source.nodes.length > 0) {
-      parts.push(source.nodes.join(', '));
-    }
-    if (source.event) {
-      parts.push(source.event);
-    }
-    return parts.join(' → ');
-  };
-
-  return (
-    <button
-      onClick={() => onClick?.(source)}
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 6,
-        padding: '4px 8px',
-        fontSize: theme.fontSizes[0],
-        fontFamily: theme.fonts.body,
-        color: theme.colors.primary || theme.colors.accent,
-        backgroundColor: 'transparent',
-        border: `1px solid ${theme.colors.border}`,
-        borderRadius: theme.radii?.[1] || 4,
-        cursor: 'pointer',
-        transition: 'background-color 0.2s',
-      }}
-      onMouseEnter={(e) => {
-        e.currentTarget.style.backgroundColor = theme.colors.surface || theme.colors.background;
-      }}
-      onMouseLeave={(e) => {
-        e.currentTarget.style.backgroundColor = 'transparent';
-      }}
-    >
-      {/* Link icon */}
-      <svg
-        width={12}
-        height={12}
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth={2}
-      >
-        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
-        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />
-      </svg>
-      <span style={{ fontFamily: theme.fonts.monospace }}>{formatSource()}</span>
-    </button>
-  );
-}

package/src/components/dashboard/components/TimeRangeSelector.tsx

@@ -1,280 +0,0 @@
-/**
- * TimeRangeSelector
- *
- * Dropdown selector for time range and auto-refresh interval.
- */
-
-import { useState, useRef, useEffect } from 'react';
-import { useTheme } from '@principal-ade/industry-theme';
-import type { TimeRangeSelectorProps, TimeRangePreset, RefreshInterval } from '../types';
-
-const PRESET_LABELS: Record<TimeRangePreset, string> = {
-  last_5m: 'Last 5 minutes',
-  last_15m: 'Last 15 minutes',
-  last_30m: 'Last 30 minutes',
-  last_1h: 'Last 1 hour',
-  last_3h: 'Last 3 hours',
-  last_6h: 'Last 6 hours',
-  last_12h: 'Last 12 hours',
-  last_24h: 'Last 24 hours',
-  last_7d: 'Last 7 days',
-  last_30d: 'Last 30 days',
-  custom: 'Custom range',
-};
-
-const REFRESH_LABELS: Record<RefreshInterval, string> = {
-  off: 'Off',
-  '10s': '10 seconds',
-  '30s': '30 seconds',
-  '1m': '1 minute',
-  '5m': '5 minutes',
-  '10m': '10 minutes',
-};
-
-const DEFAULT_PRESETS: TimeRangePreset[] = [
-  'last_1h',
-  'last_3h',
-  'last_6h',
-  'last_12h',
-  'last_24h',
-  'last_7d',
-];
-
-const DEFAULT_REFRESH_INTERVALS: RefreshInterval[] = [
-  'off',
-  '30s',
-  '1m',
-  '5m',
-];
-
-export function TimeRangeSelector({
-  timeRange,
-  onTimeRangeChange,
-  refreshInterval = 'off',
-  onRefreshIntervalChange,
-  config,
-}: TimeRangeSelectorProps) {
-  const { theme } = useTheme();
-  const [isOpen, setIsOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState<'range' | 'refresh'>('range');
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  const presets = config?.presets ?? DEFAULT_PRESETS;
-  const refreshIntervals = config?.refreshIntervals ?? DEFAULT_REFRESH_INTERVALS;
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
-        setIsOpen(false);
-      }
-    };
-
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, []);
-
-  const getCurrentLabel = (): string => {
-    if (timeRange.preset && timeRange.preset !== 'custom') {
-      return PRESET_LABELS[timeRange.preset];
-    }
-    if (timeRange.start && timeRange.end) {
-      const formatDate = (d: Date) => d.toLocaleDateString();
-      return `${formatDate(timeRange.start)} - ${formatDate(timeRange.end)}`;
-    }
-    return 'Select time range';
-  };
-
-  const handlePresetSelect = (preset: TimeRangePreset) => {
-    onTimeRangeChange({ preset });
-    setIsOpen(false);
-  };
-
-  const handleRefreshSelect = (interval: RefreshInterval) => {
-    onRefreshIntervalChange?.(interval);
-    setIsOpen(false);
-  };
-
-  const buttonStyle: React.CSSProperties = {
-    display: 'flex',
-    alignItems: 'center',
-    gap: 8,
-    padding: '8px 12px',
-    backgroundColor: theme.colors.surface || theme.colors.background,
-    border: `1px solid ${theme.colors.border}`,
-    borderRadius: theme.radii?.[1] || 4,
-    fontSize: theme.fontSizes[1],
-    fontFamily: theme.fonts.body,
-    color: theme.colors.text,
-    cursor: 'pointer',
-    transition: 'border-color 0.2s',
-  };
-
-  const dropdownStyle: React.CSSProperties = {
-    position: 'absolute',
-    top: '100%',
-    right: 0,
-    marginTop: 4,
-    minWidth: 200,
-    backgroundColor: theme.colors.surface || theme.colors.background,
-    border: `1px solid ${theme.colors.border}`,
-    borderRadius: theme.radii?.[2] || 8,
-    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-    zIndex: 1000,
-    overflow: 'hidden',
-  };
-
-  const tabStyle = (isActive: boolean): React.CSSProperties => ({
-    flex: 1,
-    padding: '8px 12px',
-    backgroundColor: isActive ? theme.colors.surface : 'transparent',
-    border: 'none',
-    borderBottom: isActive ? `2px solid ${theme.colors.primary || theme.colors.accent}` : '2px solid transparent',
-    fontSize: theme.fontSizes[0],
-    fontFamily: theme.fonts.body,
-    fontWeight: isActive ? theme.fontWeights.medium : theme.fontWeights.body,
-    color: isActive ? theme.colors.text : theme.colors.textSecondary,
-    cursor: 'pointer',
-  });
-
-  const optionStyle = (isSelected: boolean): React.CSSProperties => ({
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    padding: '8px 12px',
-    backgroundColor: isSelected ? (theme.colors.primary || theme.colors.accent) + '15' : 'transparent',
-    border: 'none',
-    width: '100%',
-    textAlign: 'left',
-    fontSize: theme.fontSizes[1],
-    fontFamily: theme.fonts.body,
-    color: theme.colors.text,
-    cursor: 'pointer',
-    transition: 'background-color 0.15s',
-  });
-
-  return (
-    <div ref={dropdownRef} style={{ position: 'relative', display: 'inline-block' }}>
-      {/* Main button */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        style={buttonStyle}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.borderColor = theme.colors.primary || theme.colors.accent;
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.borderColor = theme.colors.border;
-        }}
-      >
-        {/* Clock icon */}
-        <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-          <circle cx="12" cy="12" r="10" />
-          <polyline points="12 6 12 12 16 14" />
-        </svg>
-        <span>{getCurrentLabel()}</span>
-        {/* Chevron */}
-        <svg
-          width={12}
-          height={12}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={2}
-          style={{ transform: isOpen ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.2s' }}
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
-        {/* Refresh indicator */}
-        {refreshInterval !== 'off' && (
-          <span
-            style={{
-              marginLeft: 4,
-              padding: '2px 6px',
-              backgroundColor: theme.colors.primary || theme.colors.accent,
-              color: theme.colors.background,
-              fontSize: theme.fontSizes[0],
-              borderRadius: theme.radii?.[1] || 4,
-              fontWeight: theme.fontWeights.medium,
-            }}
-          >
-            {refreshInterval}
-          </span>
-        )}
-      </button>
-
-      {/* Dropdown */}
-      {isOpen && (
-        <div style={dropdownStyle}>
-          {/* Tabs */}
-          {onRefreshIntervalChange && (
-            <div style={{ display: 'flex', borderBottom: `1px solid ${theme.colors.border}` }}>
-              <button style={tabStyle(activeTab === 'range')} onClick={() => setActiveTab('range')}>
-                Time Range
-              </button>
-              <button style={tabStyle(activeTab === 'refresh')} onClick={() => setActiveTab('refresh')}>
-                Auto Refresh
-              </button>
-            </div>
-          )}
-
-          {/* Options */}
-          <div style={{ maxHeight: 300, overflowY: 'auto' }}>
-            {activeTab === 'range' &&
-              presets.map((preset) => (
-                <button
-                  key={preset}
-                  onClick={() => handlePresetSelect(preset)}
-                  style={optionStyle(timeRange.preset === preset)}
-                  onMouseEnter={(e) => {
-                    if (timeRange.preset !== preset) {
-                      e.currentTarget.style.backgroundColor = theme.colors.border + '40';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor =
-                      timeRange.preset === preset
-                        ? (theme.colors.primary || theme.colors.accent) + '15'
-                        : 'transparent';
-                  }}
-                >
-                  <span>{PRESET_LABELS[preset]}</span>
-                  {timeRange.preset === preset && (
-                    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-                      <polyline points="20 6 9 17 4 12" />
-                    </svg>
-                  )}
-                </button>
-              ))}
-
-            {activeTab === 'refresh' &&
-              refreshIntervals.map((interval) => (
-                <button
-                  key={interval}
-                  onClick={() => handleRefreshSelect(interval)}
-                  style={optionStyle(refreshInterval === interval)}
-                  onMouseEnter={(e) => {
-                    if (refreshInterval !== interval) {
-                      e.currentTarget.style.backgroundColor = theme.colors.border + '40';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor =
-                      refreshInterval === interval
-                        ? (theme.colors.primary || theme.colors.accent) + '15'
-                        : 'transparent';
-                  }}
-                >
-                  <span>{REFRESH_LABELS[interval]}</span>
-                  {refreshInterval === interval && (
-                    <svg width={14} height={14} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}>
-                      <polyline points="20 6 9 17 4 12" />
-                    </svg>
-                  )}
-                </button>
-              ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}

package/src/components/dashboard/components/index.ts

@@ -1,5 +0,0 @@
-export { MetricCard } from './MetricCard';
-export { LineChart } from './LineChart';
-export { BarChart } from './BarChart';
-export { SourceLink } from './SourceLink';
-export { TimeRangeSelector } from './TimeRangeSelector';

package/src/components/dashboard/index.ts

@@ -1,47 +0,0 @@
-// Main renderer
-export { DashboardRenderer } from './DashboardRenderer';
-export { MetricPanel } from './MetricPanel';
-
-// Individual components
-export { MetricCard, LineChart, BarChart, SourceLink, TimeRangeSelector } from './components';
-
-// Data providers
-export { MockDataProvider, createMockDataProvider } from './MockDataProvider';
-
-// Types
-export type {
-  // Dashboard definition types
-  DashboardDefinition,
-  MetricDefinition,
-  MetricType,
-  MetricSource,
-  MetricQuery,
-  Derivation,
-  TimeGroup,
-  AlertDefinition,
-  MetricDisplay,
-  DisplayComponent,
-  DashboardLayout,
-  DashboardRow,
-  PanelPlacement,
-  // Time range types
-  TimeRangePreset,
-  TimeRange,
-  RefreshInterval,
-  TimeRangeConfig,
-  // Mock data types
-  MockMetricData,
-  TimeSeriesPoint,
-  HistogramData,
-  // Runtime types
-  MetricData,
-  DataProvider,
-  // Component props
-  DashboardRendererProps,
-  MetricPanelProps,
-  MetricCardProps,
-  LineChartProps,
-  BarChartProps,
-  SourceLinkProps,
-  TimeRangeSelectorProps,
-} from './types';