@fragments-sdk/cli 0.5.2 → 0.7.0

package/src/viewer/components/HealthDashboard.tsx

@@ -7,6 +7,7 @@
 import { useMemo, useState, useCallback, useEffect } from 'react';
 import type { SegmentDefinition } from '../../core/index.js';
 import type { ImpactValue } from 'axe-core';
+import { Badge, Progress, Stack, Text, Card, EmptyState, Table } from '@fragments/ui';
 import {
   getAllA11yData,
   getA11ySummary,
@@ -14,7 +15,6 @@ import {
   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 }>;
@@ -70,23 +70,19 @@ function calculateCoverage(
     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++;
     }
@@ -99,7 +95,6 @@ function calculateCoverage(
     });
   }
 
-  // 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);
@@ -115,6 +110,16 @@ function calculateCoverage(
   return { metrics, components, categoryCount: categories.size };
 }
 
+function impactToBadgeVariant(impact: ImpactValue | undefined): 'error' | 'warning' | 'info' | 'default' {
+  switch (impact) {
+    case 'critical': return 'error';
+    case 'serious': return 'error';
+    case 'moderate': return 'warning';
+    case 'minor': return 'info';
+    default: return 'default';
+  }
+}
+
 export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps) {
   const { metrics, components, categoryCount } = useMemo(
     () => calculateCoverage(segments),
@@ -125,7 +130,6 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
   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)) {
@@ -145,16 +149,13 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
     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));
@@ -166,12 +167,10 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
       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);
@@ -193,7 +192,6 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
     };
   }, [convertCacheToA11y]);
 
-  // Calculate summary from component results
   const a11yResults = useMemo((): A11yResults | null => {
     const scannedComponents = Object.keys(componentA11y).length;
     if (scannedComponents === 0) {
@@ -216,13 +214,12 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
 
   if (segments.length === 0) {
     return (
-      <div className="text-center py-12 text-tertiary">
-        <p className="text-sm">No components loaded</p>
-      </div>
+      <EmptyState>
+        <EmptyState.Description>No components loaded</EmptyState.Description>
+      </EmptyState>
     );
   }
 
-  // Create accessibility metric if scan has been run
   const a11yMetric: CoverageMetric | null = a11yResults
     ? {
         label: 'Accessible',
@@ -232,133 +229,149 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
     : null;
 
   return (
-    <div className="space-y-6 max-w-2xl">
+    <Stack direction="column" gap="lg" style={{ maxWidth: '672px' }}>
       {/* Header */}
       <div>
-        <h1 className="text-xl font-semibold text-primary">Fragments</h1>
-        <p className="text-sm text-tertiary mt-0.5">
+        <Text as="h1" size="lg" weight="semibold">Fragments</Text>
+        <Text size="sm" color="tertiary" style={{ marginTop: '2px' }}>
           {segments.length} component{segments.length !== 1 ? 's' : ''} · {categoryCount} categor{categoryCount !== 1 ? 'ies' : 'y'}
-        </p>
+        </Text>
       </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>
+      <Card>
+        <Card.Body>
+          <Stack direction="column" gap="sm">
+            <Text as="h2" size="sm" weight="medium">Coverage</Text>
+            <Stack direction="column" gap="sm">
+              {metrics.map((metric) => (
+                <CoverageRow key={metric.label} metric={metric} />
+              ))}
+              {a11yMetric ? (
+                <CoverageRow metric={a11yMetric} />
+              ) : (
+                <Stack direction="row" align="center" gap="sm">
+                  <Text size="sm" color="secondary" style={{ width: '96px', flexShrink: 0 }}>Accessible</Text>
+                  <div style={{ flex: 1 }}>
+                    <Progress value={0} />
+                  </div>
+                  <Text size="xs" color="tertiary" style={{ width: '40px', textAlign: 'right', flexShrink: 0 }}>-</Text>
+                </Stack>
+              )}
+            </Stack>
+            <div style={{ paddingTop: '8px', borderTop: '1px solid var(--border-subtle)' }}>
+              {a11yResults ? (
+                a11yResults.totalViolations > 0 ? (
+                  <Text size="xs" color="tertiary">
+                    {a11yResults.totalViolations} violation{a11yResults.totalViolations !== 1 ? 's' : ''} found
+                    ({a11yResults.totalCritical} critical, {a11yResults.totalSerious} serious)
+                  </Text>
+                ) : (
+                  <Text size="xs" style={{ color: 'var(--color-success)' }}>
+                    All scanned components pass accessibility checks
+                  </Text>
+                )
+              ) : (
+                <Text size="xs" color="tertiary">
+                  Visit components to scan for accessibility issues
+                </Text>
+              )}
             </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>
+          </Stack>
+        </Card.Body>
+      </Card>
 
       {/* 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>
+        <Card>
+          <Card.Body>
+            <Stack direction="column" gap="sm">
+              <Text as="h2" size="sm" weight="medium">Top Issues</Text>
+              <Text size="xs" color="tertiary">
+                Common accessibility violations across your components
+              </Text>
+              <Stack direction="column" gap="sm">
+                {a11ySummary.topViolations.map((violation) => (
+                  <Stack
+                    key={violation.ruleId}
+                    direction="row"
+                    align="start"
+                    gap="sm"
+                    style={{
+                      padding: '8px',
+                      borderRadius: '4px',
+                      backgroundColor: 'var(--bg-secondary)',
+                      border: '1px solid var(--border-subtle)',
+                    }}
+                  >
+                    {violation.impact && (
+                      <Badge variant={impactToBadgeVariant(violation.impact)} size="sm">
+                        {violation.impact}
+                      </Badge>
+                    )}
+                    <div style={{ flex: 1, minWidth: 0 }}>
+                      <Text size="xs" style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                        {violation.description}
+                      </Text>
+                      <Text size="xs" color="tertiary" style={{ marginTop: '2px' }}>
+                        <Text as="span" size="xs" font="mono">{violation.ruleId}</Text>
+                        {' · '}
+                        {violation.affectedComponents.length} component{violation.affectedComponents.length !== 1 ? 's' : ''}
+                      </Text>
+                    </div>
+                    <Text size="xs" color="tertiary" style={{ flexShrink: 0 }}>
+                      {violation.affectedComponents.length}
+                    </Text>
+                  </Stack>
+                ))}
+              </Stack>
+              {a11ySummary.topViolations.length >= 5 && (
+                <Text size="xs" color="tertiary" style={{ textAlign: 'center' }}>
+                  Showing top 5 issues
+                </Text>
+              )}
+            </Stack>
+          </Card.Body>
+        </Card>
       )}
 
       {/* 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">
+        <Text as="h2" size="sm" weight="medium" style={{ marginBottom: '8px' }}>Components</Text>
+        <div style={{ borderRadius: '8px', border: '1px solid var(--border-subtle)', overflow: 'hidden' }}>
+          <table style={{ width: '100%', fontSize: '14px', borderCollapse: 'collapse' }}>
             <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 style={{ borderBottom: '1px solid var(--border-subtle)', backgroundColor: 'var(--bg-secondary)' }}>
+                <th style={{ textAlign: 'left', padding: '8px 12px', fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)' }}>Name</th>
+                <th style={{ textAlign: 'left', padding: '8px 12px', fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)' }}>Category</th>
+                <th style={{ textAlign: 'left', padding: '8px 12px', fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)' }}>Variants</th>
+                <th style={{ textAlign: 'left', padding: '8px 12px', fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)' }}>A11y</th>
+                <th style={{ textAlign: 'left', padding: '8px 12px', fontSize: '12px', fontWeight: 500, color: 'var(--text-tertiary)' }}>Status</th>
               </tr>
             </thead>
             <tbody>
-              {components.map((component) => {
+              {components.map((component, index) => {
                 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"
+                    style={{
+                      borderBottom: index < components.length - 1 ? '1px solid var(--border-subtle)' : 'none',
+                      cursor: 'pointer',
+                      transition: 'background-color 150ms',
+                    }}
+                    onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = 'var(--bg-hover)'; }}
+                    onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = ''; }}
                   >
-                    <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">
+                    <td style={{ padding: '8px 12px' }}><Text weight="medium" size="sm">{component.name}</Text></td>
+                    <td style={{ padding: '8px 12px' }}><Text size="sm" color="tertiary">{component.category}</Text></td>
+                    <td style={{ padding: '8px 12px' }}><Text size="sm" color="tertiary">{component.variantCount}</Text></td>
+                    <td style={{ padding: '8px 12px' }}>
                       <A11yBadge result={a11yStatus} isScanning={isScanning} />
                     </td>
-                    <td className="px-3 py-2 text-tertiary">{component.status}</td>
+                    <td style={{ padding: '8px 12px' }}><Text size="sm" color="tertiary">{component.status}</Text></td>
                   </tr>
                 );
               })}
@@ -366,87 +379,49 @@ export function HealthDashboard({ segments, onNavigate }: HealthDashboardProps)
           </table>
         </div>
       </div>
-    </div>
+    </Stack>
   );
 }
 
 function CoverageRow({ metric }: { metric: CoverageMetric }) {
-  const percentage = metric.total > 0 ? (metric.count / metric.total) * 100 : 0;
+  const percentage = metric.total > 0 ? Math.round((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}%` }}
-        />
+    <Stack direction="row" align="center" gap="sm">
+      <Text size="sm" color="secondary" style={{ width: '96px', flexShrink: 0 }}>{metric.label}</Text>
+      <div style={{ flex: 1 }}>
+        <Progress value={percentage} />
       </div>
-      <span className="text-xs text-tertiary w-10 text-right flex-shrink-0">
+      <Text size="xs" color="tertiary" style={{ width: '40px', textAlign: 'right', flexShrink: 0 }}>
         {metric.count}/{metric.total}
-      </span>
-    </div>
+      </Text>
+    </Stack>
   );
 }
 
 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>;
+    return <Badge variant="warning" size="sm">Scanning</Badge>;
   }
 
-  if (result.status === 'pending') {
-    return <span className="text-xs text-tertiary">-</span>;
+  if (!result || result.status === 'pending') {
+    return <Text size="xs" color="tertiary">-</Text>;
   }
 
   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>
-    );
+    return <Badge variant="default" size="sm">...</Badge>;
   }
 
   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>
-    );
+    return <Badge variant="success" size="sm">Pass</Badge>;
   }
 
   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>
-    );
+    return <Badge variant="error" size="sm">{result.violations}</Badge>;
   }
 
   // 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>
-  );
+  return <Badge variant="warning" size="sm">{result.violations}</Badge>;
 }
 
 export default HealthDashboard;

package/src/viewer/components/HmrStatusIndicator.tsx

@@ -1,5 +1,5 @@
-import clsx from 'clsx';
-import { HMR_STATUS, type HmrStatus } from '../constants/ui.js';
+import { Badge, Stack, Text } from '@fragments/ui';
+import { HMR_STATUS } from '../constants/ui.js';
 import { useHmrStatus } from '../hooks/useHmrStatus.js';
 import { WifiIcon, WifiOffIcon } from './Icons.js';
 
@@ -11,43 +11,34 @@ 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" />
-        )}
+  const variant = status === 'connected' ? 'success' as const
+    : status === 'disconnected' ? 'error' as const
+    : 'warning' as const;
 
-        {/* Status dot */}
-        <span
-          className={clsx(
-            'w-1.5 h-1.5 rounded-full',
-            config.bg,
-            status === 'reconnecting' && 'animate-pulse'
+  return (
+    <Stack direction="row" gap="xs" align="center" className={className}>
+      <Badge variant={variant} size="sm" dot>
+        <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+          {status === 'disconnected' ? (
+            <WifiOffIcon style={{ width: '12px', height: '12px' }} />
+          ) : (
+            <WifiIcon style={{ width: '12px', height: '12px' }} />
           )}
-        />
-      </div>
+        </span>
+      </Badge>
 
-      {/* Update notification */}
       {lastUpdate && (
-        <span className="text-[9px] text-tertiary truncate max-w-[100px]" title={lastUpdate}>
+        <Text
+          size="2xs"
+          color="tertiary"
+          truncate
+          style={{ maxWidth: '100px' }}
+          title={lastUpdate}
+        >
           Updated: {lastUpdate.split('/').pop()}
-        </span>
+        </Text>
       )}
-    </div>
+    </Stack>
   );
 }
 
@@ -58,14 +49,13 @@ export function HmrStatusDot() {
   const { status } = useHmrStatus();
   const config = HMR_STATUS[status];
 
+  const variant = status === 'connected' ? 'success' as const
+    : status === 'disconnected' ? 'error' as const
+    : 'warning' as const;
+
   return (
-    <span
-      className={clsx(
-        'w-2 h-2 rounded-full',
-        config.bg,
-        status === 'reconnecting' && 'animate-pulse'
-      )}
-      title={config.label}
-    />
+    <Badge variant={variant} size="sm" dot title={config.label}>
+      <span />
+    </Badge>
   );
 }