@fragments-sdk/cli 0.2.2

package/src/viewer/components/HealthDashboard.tsx

@@ -0,0 +1,452 @@
+/**
+ * Dashboard Component
+ * Minimalist overview of design system coverage and components
+ * with enhanced accessibility insights and top issues aggregation
+ */
+
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import type { SegmentDefinition } from '../../core/index.js';
+import type { ImpactValue } from 'axe-core';
+import {
+  getAllA11yData,
+  getA11ySummary,
+  getAllA11yResults,
+  type ComponentA11yData,
+} from '../hooks/useA11yCache.js';
+import type { A11ySummary, CachedA11yResult } from '../types/a11y.js';
+import { getImpactColorClass } from '../utils/a11y-fixes.js';
+
+interface HealthDashboardProps {
+  segments: Array<{ path: string; segment: SegmentDefinition }>;
+  onNavigate?: (componentName: string) => void;
+}
+
+interface CoverageMetric {
+  label: string;
+  count: number;
+  total: number;
+}
+
+interface A11yResults {
+  accessibleComponents: number;
+  totalComponents: number;
+  totalViolations: number;
+  totalCritical: number;
+  totalSerious: number;
+}
+
+interface ComponentA11yResult {
+  violations: number;
+  critical: number;
+  serious: number;
+  status: 'pending' | 'scanning' | 'pass' | 'warn' | 'fail';
+}
+
+interface ComponentRow {
+  name: string;
+  category: string;
+  variantCount: number;
+  status: string;
+}
+
+function calculateCoverage(
+  segments: Array<{ path: string; segment: SegmentDefinition }>
+): { metrics: CoverageMetric[]; components: ComponentRow[]; categoryCount: number } {
+  const total = segments.length;
+
+  if (total === 0) {
+    return { metrics: [], components: [], categoryCount: 0 };
+  }
+
+  const categories = new Set<string>();
+  const components: ComponentRow[] = [];
+
+  let documented = 0;
+  let withVariants = 0;
+  let withUsage = 0;
+  let figmaLinked = 0;
+
+  for (const { segment } of segments) {
+    const cat = segment.meta.category || 'uncategorized';
+    categories.add(cat);
+
+    // Documentation
+    if (segment.meta.description && segment.meta.description.trim().length > 10) {
+      documented++;
+    }
+
+    // Variants
+    const variantCount = segment.variants?.length || 0;
+    if (variantCount > 0) {
+      withVariants++;
+    }
+
+    // Usage
+    if (segment.usage && (segment.usage.when.length > 0 || segment.usage.whenNot.length > 0)) {
+      withUsage++;
+    }
+
+    // Figma
+    if (segment.meta.figma || segment.variants?.some((v) => v.figma)) {
+      figmaLinked++;
+    }
+
+    components.push({
+      name: segment.meta.name,
+      category: cat,
+      variantCount,
+      status: segment.meta.status || 'stable',
+    });
+  }
+
+  // Sort components by category then name
+  components.sort((a, b) => {
+    if (a.category !== b.category) return a.category.localeCompare(b.category);
+    return a.name.localeCompare(b.name);
+  });
+
+  const metrics: CoverageMetric[] = [
+    { label: 'Documented', count: documented, total },
+    { label: 'Variants', count: withVariants, total },
+    { label: 'Usage', count: withUsage, total },
+    { label: 'Figma', count: figmaLinked, total },
+  ];
+
+  return { metrics, components, categoryCount: categories.size };
+}
+
+export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps) {
+  const { metrics, components, categoryCount } = useMemo(
+    () => calculateCoverage(segments),
+    [segments]
+  );
+
+  const [componentA11y, setComponentA11y] = useState<Record<string, ComponentA11yResult>>({});
+  const [scanningComponents, setScanningComponents] = useState<Set<string>>(new Set());
+  const [a11ySummary, setA11ySummary] = useState<A11ySummary | null>(null);
+
+  // Convert cached data to component a11y format
+  const convertCacheToA11y = useCallback((cached: Record<string, ComponentA11yData>): Record<string, ComponentA11yResult> => {
+    const result: Record<string, ComponentA11yResult> = {};
+    for (const [name, data] of Object.entries(cached)) {
+      let status: ComponentA11yResult['status'] = 'pass';
+      if (data.critical > 0 || data.serious > 0) {
+        status = 'fail';
+      } else if (data.violations > 0) {
+        status = 'warn';
+      }
+      result[name] = {
+        violations: data.violations,
+        critical: data.critical,
+        serious: data.serious,
+        status,
+      };
+    }
+    return result;
+  }, []);
+
+  // Load cached a11y data on mount and listen for updates
+  useEffect(() => {
+    // Load initial cached data
+    const cached = getAllA11yData();
+    if (Object.keys(cached).length > 0) {
+      setComponentA11y(convertCacheToA11y(cached));
+      setA11ySummary(getA11ySummary());
+    }
+
+    // Listen for cache updates from AccessibilityPanel
+    const handleCacheUpdate = () => {
+      const updatedCache = getAllA11yData();
+      setComponentA11y(convertCacheToA11y(updatedCache));
+      setA11ySummary(getA11ySummary());
+    };
+
+    const handleCacheCleared = () => {
+      setComponentA11y({});
+      setA11ySummary(null);
+    };
+
+    // Listen for scan started events
+    const handleScanStarted = (event: CustomEvent<{ componentName: string }>) => {
+      setScanningComponents(prev => new Set(prev).add(event.detail.componentName));
+    };
+
+    // Listen for scan completed events
+    const handleScanCompleted = (event: CustomEvent<{ componentName: string }>) => {
+      setScanningComponents(prev => {
+        const next = new Set(prev);
+        next.delete(event.detail.componentName);
+        return next;
+      });
+    };
+
+    window.addEventListener('a11y-cache-updated', handleCacheUpdate);
+    window.addEventListener('a11y-cache-cleared', handleCacheCleared);
+    window.addEventListener('a11y-scan-started', handleScanStarted as EventListener);
+    window.addEventListener('a11y-scan-completed', handleScanCompleted as EventListener);
+
+    return () => {
+      window.removeEventListener('a11y-cache-updated', handleCacheUpdate);
+      window.removeEventListener('a11y-cache-cleared', handleCacheCleared);
+      window.removeEventListener('a11y-scan-started', handleScanStarted as EventListener);
+      window.removeEventListener('a11y-scan-completed', handleScanCompleted as EventListener);
+    };
+  }, [convertCacheToA11y]);
+
+  // Calculate summary from component results
+  const a11yResults = useMemo((): A11yResults | null => {
+    const scannedComponents = Object.keys(componentA11y).length;
+    if (scannedComponents === 0) {
+      return null;
+    }
+
+    const summary = a11ySummary || getA11ySummary();
+    return {
+      accessibleComponents: summary.accessibleComponents,
+      totalComponents: summary.totalComponents,
+      totalViolations:
+        summary.violationsByImpact.critical +
+        summary.violationsByImpact.serious +
+        summary.violationsByImpact.moderate +
+        summary.violationsByImpact.minor,
+      totalCritical: summary.violationsByImpact.critical,
+      totalSerious: summary.violationsByImpact.serious,
+    };
+  }, [componentA11y, a11ySummary]);
+
+  if (segments.length === 0) {
+    return (
+      <div className="text-center py-12 text-tertiary">
+        <p className="text-sm">No components loaded</p>
+      </div>
+    );
+  }
+
+  // Create accessibility metric if scan has been run
+  const a11yMetric: CoverageMetric | null = a11yResults
+    ? {
+        label: 'Accessible',
+        count: a11yResults.accessibleComponents,
+        total: a11yResults.totalComponents,
+      }
+    : null;
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      {/* Header */}
+      <div>
+        <h1 className="text-xl font-semibold text-primary">Fragments</h1>
+        <p className="text-sm text-tertiary mt-0.5">
+          {segments.length} component{segments.length !== 1 ? 's' : ''} · {categoryCount} categor{categoryCount !== 1 ? 'ies' : 'y'}
+        </p>
+      </div>
+
+      {/* Coverage */}
+      <div className="rounded-lg border border-[--border-subtle] p-4 space-y-3">
+        <h2 className="text-sm font-medium text-primary">Coverage</h2>
+        <div className="space-y-2.5">
+          {metrics.map((metric) => (
+            <CoverageRow key={metric.label} metric={metric} />
+          ))}
+          {/* Accessibility metric */}
+          {a11yMetric ? (
+            <CoverageRow metric={a11yMetric} />
+          ) : (
+            <div className="flex items-center gap-3">
+              <span className="text-sm text-secondary w-24 flex-shrink-0">Accessible</span>
+              <div className="flex-1 h-2 rounded-full bg-[--bg-tertiary] overflow-hidden">
+                <div className="h-full rounded-full bg-[--bg-tertiary]" style={{ width: '0%' }} />
+              </div>
+              <span className="text-xs text-tertiary w-10 text-right flex-shrink-0">-</span>
+            </div>
+          )}
+        </div>
+        {/* Show info about a11y data */}
+        <div className="pt-2 border-t border-[--border-subtle]">
+          {a11yResults ? (
+            a11yResults.totalViolations > 0 ? (
+              <p className="text-xs text-tertiary">
+                {a11yResults.totalViolations} violation{a11yResults.totalViolations !== 1 ? 's' : ''} found
+                ({a11yResults.totalCritical} critical, {a11yResults.totalSerious} serious)
+              </p>
+            ) : (
+              <p className="text-xs text-green-600 dark:text-green-400">
+                All scanned components pass accessibility checks
+              </p>
+            )
+          ) : (
+            <p className="text-xs text-tertiary">
+              Visit components to scan for accessibility issues
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Top Issues Section */}
+      {a11ySummary && a11ySummary.topViolations.length > 0 && (
+        <div className="rounded-lg border border-[--border-subtle] p-4 space-y-3">
+          <h2 className="text-sm font-medium text-primary">Top Issues</h2>
+          <p className="text-xs text-tertiary">
+            Common accessibility violations across your components
+          </p>
+          <div className="space-y-2">
+            {a11ySummary.topViolations.map((violation) => {
+              const impactColors = getImpactColorClass(violation.impact);
+              return (
+                <div
+                  key={violation.ruleId}
+                  className="flex items-start gap-2 p-2 rounded bg-[--bg-secondary] border border-[--border-subtle]"
+                >
+                  {/* Impact badge */}
+                  {violation.impact && (
+                    <span
+                      className={`text-[10px] font-semibold px-1.5 py-0.5 rounded uppercase tracking-wide flex-shrink-0 ${impactColors.bg} ${impactColors.text}`}
+                    >
+                      {violation.impact}
+                    </span>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-xs text-primary truncate">{violation.description}</p>
+                    <p className="text-[10px] text-tertiary mt-0.5">
+                      <span className="font-mono">{violation.ruleId}</span>
+                      {' · '}
+                      {violation.affectedComponents.length} component{violation.affectedComponents.length !== 1 ? 's' : ''}
+                    </p>
+                  </div>
+                  <span className="text-xs text-tertiary flex-shrink-0">
+                    {violation.affectedComponents.length}
+                  </span>
+                </div>
+              );
+            })}
+          </div>
+          {a11ySummary.topViolations.length >= 5 && (
+            <p className="text-[10px] text-tertiary text-center">
+              Showing top 5 issues
+            </p>
+          )}
+        </div>
+      )}
+
+      {/* Components Table */}
+      <div>
+        <h2 className="text-sm font-medium text-primary mb-2">Components</h2>
+        <div className="rounded-lg border border-[--border-subtle] overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-[--border-subtle] bg-[--bg-secondary]">
+                <th className="text-left px-3 py-2 text-xs font-medium text-tertiary">Name</th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-tertiary">Category</th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-tertiary">Variants</th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-tertiary">A11y</th>
+                <th className="text-left px-3 py-2 text-xs font-medium text-tertiary">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {components.map((component) => {
+                const a11yStatus = componentA11y[component.name];
+                const isScanning = scanningComponents.has(component.name);
+                return (
+                  <tr
+                    key={component.name}
+                    onClick={() => onNavigate?.(component.name)}
+                    className="border-b last:border-b-0 border-[--border-subtle] hover:bg-[--bg-hover] cursor-pointer transition-colors"
+                  >
+                    <td className="px-3 py-2 text-primary font-medium">{component.name}</td>
+                    <td className="px-3 py-2 text-tertiary">{component.category}</td>
+                    <td className="px-3 py-2 text-tertiary">{component.variantCount}</td>
+                    <td className="px-3 py-2">
+                      <A11yBadge result={a11yStatus} isScanning={isScanning} />
+                    </td>
+                    <td className="px-3 py-2 text-tertiary">{component.status}</td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function CoverageRow({ metric }: { metric: CoverageMetric }) {
+  const percentage = metric.total > 0 ? (metric.count / metric.total) * 100 : 0;
+
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-sm text-secondary w-24 flex-shrink-0">{metric.label}</span>
+      <div className="flex-1 h-2 rounded-full bg-[--bg-tertiary] overflow-hidden">
+        <div
+          className="h-full rounded-full bg-[--color-accent] transition-all"
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      <span className="text-xs text-tertiary w-10 text-right flex-shrink-0">
+        {metric.count}/{metric.total}
+      </span>
+    </div>
+  );
+}
+
+function A11yBadge({ result, isScanning }: { result?: ComponentA11yResult; isScanning?: boolean }) {
+  // Show scanning state
+  if (isScanning) {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
+        <span className="w-2 h-2 border border-current border-t-transparent rounded-full animate-spin" />
+        <span className="animate-pulse">Scanning</span>
+      </span>
+    );
+  }
+
+  if (!result) {
+    return <span className="text-xs text-tertiary">-</span>;
+  }
+
+  if (result.status === 'pending') {
+    return <span className="text-xs text-tertiary">-</span>;
+  }
+
+  if (result.status === 'scanning') {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-tertiary">
+        <span className="w-2 h-2 border border-current border-t-transparent rounded-full animate-spin" />
+      </span>
+    );
+  }
+
+  if (result.status === 'pass') {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-green-600 dark:text-green-400">
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+        </svg>
+        Pass
+      </span>
+    );
+  }
+
+  if (result.status === 'fail') {
+    return (
+      <span className="inline-flex items-center gap-1 text-xs text-red-600 dark:text-red-400 font-medium">
+        <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+          <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+        </svg>
+        {result.violations}
+      </span>
+    );
+  }
+
+  // warn status
+  return (
+    <span className="inline-flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
+      <svg className="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </svg>
+      {result.violations}
+    </span>
+  );
+}
+
+export default HealthDashboard;

package/src/viewer/components/HmrStatusIndicator.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import { HMR_STATUS, type HmrStatus } from '../constants/ui.js';
+import { useHmrStatus } from '../hooks/useHmrStatus.js';
+import { WifiIcon, WifiOffIcon } from './Icons.js';
+
+interface HmrStatusIndicatorProps {
+  className?: string;
+}
+
+export function HmrStatusIndicator({ className }: HmrStatusIndicatorProps) {
+  const { status, lastUpdate } = useHmrStatus();
+  const config = HMR_STATUS[status];
+
+  return (
+    <div className={clsx('flex items-center gap-1.5', className)}>
+      {/* Status dot and label */}
+      <div
+        className={clsx(
+          'flex items-center gap-1.5 px-2 py-1 rounded-md',
+          'text-[10px] font-medium',
+          status === 'connected' && 'text-emerald-600 dark:text-emerald-400',
+          status === 'reconnecting' && 'text-amber-600 dark:text-amber-400 animate-pulse',
+          status === 'disconnected' && 'text-red-600 dark:text-red-400'
+        )}
+        title={config.label}
+      >
+        {/* Status icon */}
+        {status === 'disconnected' ? (
+          <WifiOffIcon className="w-3 h-3" />
+        ) : (
+          <WifiIcon className="w-3 h-3" />
+        )}
+
+        {/* Status dot */}
+        <span
+          className={clsx(
+            'w-1.5 h-1.5 rounded-full',
+            config.bg,
+            status === 'reconnecting' && 'animate-pulse'
+          )}
+        />
+      </div>
+
+      {/* Update notification */}
+      {lastUpdate && (
+        <span className="text-[9px] text-tertiary truncate max-w-[100px]" title={lastUpdate}>
+          Updated: {lastUpdate.split('/').pop()}
+        </span>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Compact version that just shows the status dot.
+ */
+export function HmrStatusDot() {
+  const { status } = useHmrStatus();
+  const config = HMR_STATUS[status];
+
+  return (
+    <span
+      className={clsx(
+        'w-2 h-2 rounded-full',
+        config.bg,
+        status === 'reconnecting' && 'animate-pulse'
+      )}
+      title={config.label}
+    />
+  );
+}