@fragments-sdk/cli 0.10.1 → 0.11.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (149) hide show
  1. package/dist/bin.js +20 -2
  2. package/dist/bin.js.map +1 -1
  3. package/dist/{init-NDQXUWDU.js → init-UFGK5TCN.js} +75 -4
  4. package/dist/init-UFGK5TCN.js.map +1 -0
  5. package/dist/snapshot-SV2JOFZH.js +139 -0
  6. package/dist/snapshot-SV2JOFZH.js.map +1 -0
  7. package/dist/{viewer-DNMNC5VS.js → viewer-DLLJIMCK.js} +68 -46
  8. package/dist/viewer-DLLJIMCK.js.map +1 -0
  9. package/package.json +6 -14
  10. package/src/bin.ts +30 -0
  11. package/src/commands/init.ts +76 -1
  12. package/src/commands/snapshot.ts +197 -0
  13. package/src/viewer/__tests__/viewer-integration.test.ts +85 -74
  14. package/src/viewer/server.ts +37 -22
  15. package/src/viewer/vite-plugin.ts +25 -9
  16. package/dist/init-NDQXUWDU.js.map +0 -1
  17. package/dist/viewer-DNMNC5VS.js.map +0 -1
  18. package/src/viewer/__tests__/a11y-fixes.test.ts +0 -358
  19. package/src/viewer/__tests__/jsx-parser.test.ts +0 -502
  20. package/src/viewer/__tests__/render-utils.test.ts +0 -232
  21. package/src/viewer/__tests__/style-utils.test.ts +0 -404
  22. package/src/viewer/assets/fragments-logo.ts +0 -4
  23. package/src/viewer/assets/fragments_logo.png +0 -0
  24. package/src/viewer/components/AccessibilityPanel.tsx +0 -1457
  25. package/src/viewer/components/ActionCapture.tsx +0 -172
  26. package/src/viewer/components/ActionsPanel.tsx +0 -332
  27. package/src/viewer/components/AllVariantsPreview.tsx +0 -78
  28. package/src/viewer/components/App.tsx +0 -582
  29. package/src/viewer/components/BottomPanel.tsx +0 -288
  30. package/src/viewer/components/CodePanel.naming.test.tsx +0 -59
  31. package/src/viewer/components/CodePanel.tsx +0 -118
  32. package/src/viewer/components/CommandPalette.tsx +0 -392
  33. package/src/viewer/components/ComponentDocView.tsx +0 -164
  34. package/src/viewer/components/ComponentGraph.tsx +0 -380
  35. package/src/viewer/components/ComponentHeader.tsx +0 -88
  36. package/src/viewer/components/ContractPanel.tsx +0 -241
  37. package/src/viewer/components/EmptyVariantMessage.tsx +0 -54
  38. package/src/viewer/components/ErrorBoundary.tsx +0 -97
  39. package/src/viewer/components/FigmaEmbed.tsx +0 -238
  40. package/src/viewer/components/FragmentEditor.tsx +0 -525
  41. package/src/viewer/components/FragmentRenderer.tsx +0 -61
  42. package/src/viewer/components/HeaderSearch.tsx +0 -24
  43. package/src/viewer/components/HealthDashboard.tsx +0 -441
  44. package/src/viewer/components/HmrStatusIndicator.tsx +0 -61
  45. package/src/viewer/components/Icons.tsx +0 -479
  46. package/src/viewer/components/InteractionsPanel.tsx +0 -757
  47. package/src/viewer/components/IsolatedPreviewFrame.tsx +0 -346
  48. package/src/viewer/components/IsolatedRender.tsx +0 -113
  49. package/src/viewer/components/KeyboardShortcutsHelp.tsx +0 -53
  50. package/src/viewer/components/LandingPage.tsx +0 -421
  51. package/src/viewer/components/Layout.tsx +0 -27
  52. package/src/viewer/components/LeftSidebar.tsx +0 -472
  53. package/src/viewer/components/LoadErrorMessage.tsx +0 -102
  54. package/src/viewer/components/MultiViewportPreview.tsx +0 -522
  55. package/src/viewer/components/NoVariantsMessage.tsx +0 -59
  56. package/src/viewer/components/PanelShell.tsx +0 -161
  57. package/src/viewer/components/PerformancePanel.tsx +0 -304
  58. package/src/viewer/components/PreviewArea.tsx +0 -472
  59. package/src/viewer/components/PreviewAside.tsx +0 -168
  60. package/src/viewer/components/PreviewFrameHost.tsx +0 -303
  61. package/src/viewer/components/PreviewPane.tsx +0 -149
  62. package/src/viewer/components/PreviewToolbar.tsx +0 -80
  63. package/src/viewer/components/PropsEditor.tsx +0 -506
  64. package/src/viewer/components/PropsTable.tsx +0 -111
  65. package/src/viewer/components/RelationsSection.tsx +0 -88
  66. package/src/viewer/components/ResizablePanel.tsx +0 -271
  67. package/src/viewer/components/RightSidebar.tsx +0 -102
  68. package/src/viewer/components/RuntimeToolsRegistrar.tsx +0 -17
  69. package/src/viewer/components/ScreenshotButton.tsx +0 -90
  70. package/src/viewer/components/Sidebar.tsx +0 -169
  71. package/src/viewer/components/SkeletonLoader.tsx +0 -161
  72. package/src/viewer/components/ThemeProvider.tsx +0 -42
  73. package/src/viewer/components/Toast.tsx +0 -3
  74. package/src/viewer/components/TokenStylePanel.tsx +0 -699
  75. package/src/viewer/components/TopToolbar.tsx +0 -159
  76. package/src/viewer/components/UsageSection.tsx +0 -95
  77. package/src/viewer/components/VariantMatrix.tsx +0 -388
  78. package/src/viewer/components/VariantRenderer.tsx +0 -131
  79. package/src/viewer/components/VariantTabs.tsx +0 -40
  80. package/src/viewer/components/ViewerHeader.tsx +0 -69
  81. package/src/viewer/components/ViewerStateSync.tsx +0 -52
  82. package/src/viewer/components/ViewportSelector.tsx +0 -172
  83. package/src/viewer/components/WebMCPDevTools.tsx +0 -503
  84. package/src/viewer/components/WebMCPIntegration.tsx +0 -47
  85. package/src/viewer/components/WebMCPStatusIndicator.tsx +0 -60
  86. package/src/viewer/components/_future/CreatePage.tsx +0 -836
  87. package/src/viewer/components/viewer-utils.ts +0 -16
  88. package/src/viewer/composition-renderer.ts +0 -381
  89. package/src/viewer/constants/index.ts +0 -1
  90. package/src/viewer/constants/ui.ts +0 -166
  91. package/src/viewer/entry.tsx +0 -335
  92. package/src/viewer/hooks/index.ts +0 -2
  93. package/src/viewer/hooks/useA11yCache.ts +0 -383
  94. package/src/viewer/hooks/useA11yService.ts +0 -364
  95. package/src/viewer/hooks/useActions.ts +0 -138
  96. package/src/viewer/hooks/useAppState.ts +0 -147
  97. package/src/viewer/hooks/useCompiledFragments.ts +0 -42
  98. package/src/viewer/hooks/useFigmaIntegration.ts +0 -132
  99. package/src/viewer/hooks/useHmrStatus.ts +0 -109
  100. package/src/viewer/hooks/useKeyboardShortcuts.ts +0 -270
  101. package/src/viewer/hooks/usePreviewBridge.ts +0 -347
  102. package/src/viewer/hooks/useScrollSpy.ts +0 -78
  103. package/src/viewer/hooks/useUrlState.ts +0 -318
  104. package/src/viewer/hooks/useViewSettings.ts +0 -111
  105. package/src/viewer/index.html +0 -28
  106. package/src/viewer/intelligence/healthReport.ts +0 -505
  107. package/src/viewer/intelligence/styleDrift.ts +0 -340
  108. package/src/viewer/intelligence/usageScanner.ts +0 -309
  109. package/src/viewer/jsx-parser.ts +0 -486
  110. package/src/viewer/preview-frame-entry.tsx +0 -25
  111. package/src/viewer/preview-frame.html +0 -125
  112. package/src/viewer/public/favicon.ico +0 -0
  113. package/src/viewer/render-template.html +0 -68
  114. package/src/viewer/styles/globals.css +0 -278
  115. package/src/viewer/types/a11y.ts +0 -197
  116. package/src/viewer/utils/a11y-fixes.ts +0 -509
  117. package/src/viewer/utils/actionExport.ts +0 -372
  118. package/src/viewer/utils/colorSchemes.ts +0 -201
  119. package/src/viewer/utils/detectRelationships.ts +0 -256
  120. package/src/viewer/vendor/shared/src/ComponentDocContent.module.scss +0 -10
  121. package/src/viewer/vendor/shared/src/ComponentDocContent.module.scss.d.ts +0 -2
  122. package/src/viewer/vendor/shared/src/ComponentDocContent.tsx +0 -274
  123. package/src/viewer/vendor/shared/src/DocsHeaderBar.tsx +0 -129
  124. package/src/viewer/vendor/shared/src/DocsPageAsideHost.tsx +0 -89
  125. package/src/viewer/vendor/shared/src/DocsPageShell.tsx +0 -124
  126. package/src/viewer/vendor/shared/src/DocsSearchCommand.tsx +0 -99
  127. package/src/viewer/vendor/shared/src/DocsSidebarNav.tsx +0 -66
  128. package/src/viewer/vendor/shared/src/PropsTable.module.scss +0 -68
  129. package/src/viewer/vendor/shared/src/PropsTable.module.scss.d.ts +0 -2
  130. package/src/viewer/vendor/shared/src/PropsTable.tsx +0 -76
  131. package/src/viewer/vendor/shared/src/VariantPreviewCard.module.scss +0 -114
  132. package/src/viewer/vendor/shared/src/VariantPreviewCard.module.scss.d.ts +0 -2
  133. package/src/viewer/vendor/shared/src/VariantPreviewCard.tsx +0 -137
  134. package/src/viewer/vendor/shared/src/docs-data/index.ts +0 -32
  135. package/src/viewer/vendor/shared/src/docs-data/mcp-configs.ts +0 -72
  136. package/src/viewer/vendor/shared/src/docs-data/palettes.ts +0 -75
  137. package/src/viewer/vendor/shared/src/docs-data/setup-examples.ts +0 -55
  138. package/src/viewer/vendor/shared/src/docs-layout.scss +0 -28
  139. package/src/viewer/vendor/shared/src/docs-layout.scss.d.ts +0 -2
  140. package/src/viewer/vendor/shared/src/index.ts +0 -34
  141. package/src/viewer/vendor/shared/src/types.ts +0 -53
  142. package/src/viewer/webmcp/__tests__/analytics.test.ts +0 -108
  143. package/src/viewer/webmcp/analytics.ts +0 -165
  144. package/src/viewer/webmcp/index.ts +0 -3
  145. package/src/viewer/webmcp/posthog-bridge.ts +0 -39
  146. package/src/viewer/webmcp/runtime-tools.ts +0 -152
  147. package/src/viewer/webmcp/scan-utils.ts +0 -135
  148. package/src/viewer/webmcp/use-tool-analytics.ts +0 -69
  149. package/src/viewer/webmcp/viewer-state.ts +0 -45
@@ -1,505 +0,0 @@
1
- /**
2
- * Health Report Generator
3
- * Aggregates usage, drift, and documentation data into a comprehensive health report
4
- */
5
-
6
- import type { FragmentDefinition } from '../../core/index.js';
7
- import type { FullScanResult, UsageScanResult } from './usageScanner.js';
8
- import type { DriftReport, DriftSummary, FullDriftResult } from './styleDrift.js';
9
- import { aggregateDriftReports, getWorstOffenders } from './styleDrift.js';
10
-
11
- export interface UsageStats {
12
- totalComponents: number;
13
- usedComponents: number;
14
- unusedComponents: string[];
15
- mostUsed: Array<{ component: string; count: number }>;
16
- adoptionRate: number;
17
- }
18
-
19
- export interface StyleDriftStats {
20
- componentsWithDrift: number;
21
- totalDrifts: number;
22
- averageCompliance: number;
23
- byProperty: Record<string, number>;
24
- bySeverity: {
25
- high: number;
26
- medium: number;
27
- low: number;
28
- };
29
- worstOffenders: Array<{
30
- component: string;
31
- variant: string;
32
- driftCount: number;
33
- complianceScore: number;
34
- }>;
35
- }
36
-
37
- export interface DocumentationStats {
38
- documented: number;
39
- undocumented: string[];
40
- documentationRate: number;
41
- missingDescriptions: string[];
42
- missingUsage: string[];
43
- }
44
-
45
- export interface TokenStats {
46
- complianceScore: number;
47
- hardcodedValues: number;
48
- tokenizedValues: number;
49
- tokenizationRate: number;
50
- }
51
-
52
- export interface HealthReport {
53
- generatedAt: string;
54
- overallScore: number;
55
- grades: {
56
- usage: 'A' | 'B' | 'C' | 'D' | 'F';
57
- drift: 'A' | 'B' | 'C' | 'D' | 'F';
58
- documentation: 'A' | 'B' | 'C' | 'D' | 'F';
59
- tokens: 'A' | 'B' | 'C' | 'D' | 'F';
60
- };
61
- usage: UsageStats;
62
- styleDrift: StyleDriftStats;
63
- documentation: DocumentationStats;
64
- tokens: TokenStats;
65
- recommendations: string[];
66
- }
67
-
68
- export interface HealthReportOptions {
69
- /** Fragments to analyze */
70
- fragments: Array<{ path: string; fragment: FragmentDefinition }>;
71
- /** Usage scan results (optional) */
72
- usageScan?: FullScanResult;
73
- /** Drift reports (optional) */
74
- driftReports?: DriftReport[];
75
- /** Token compliance data (optional) */
76
- tokenData?: {
77
- complianceScore: number;
78
- hardcodedCount: number;
79
- tokenizedCount: number;
80
- };
81
- }
82
-
83
- /**
84
- * Convert a percentage to a letter grade
85
- */
86
- function toGrade(score: number): 'A' | 'B' | 'C' | 'D' | 'F' {
87
- if (score >= 90) return 'A';
88
- if (score >= 80) return 'B';
89
- if (score >= 70) return 'C';
90
- if (score >= 60) return 'D';
91
- return 'F';
92
- }
93
-
94
- /**
95
- * Calculate usage statistics from scan results
96
- */
97
- function calculateUsageStats(
98
- fragments: Array<{ path: string; fragment: FragmentDefinition }>,
99
- usageScan?: FullScanResult
100
- ): UsageStats {
101
- const allComponentNames = fragments.map((s) => s.fragment.meta.name);
102
-
103
- if (!usageScan) {
104
- return {
105
- totalComponents: allComponentNames.length,
106
- usedComponents: 0,
107
- unusedComponents: allComponentNames,
108
- mostUsed: [],
109
- adoptionRate: 0,
110
- };
111
- }
112
-
113
- const usageMap = new Map(usageScan.results.map((r) => [r.component, r.totalUsages]));
114
-
115
- const usedComponents = allComponentNames.filter((name) => usageMap.has(name) && usageMap.get(name)! > 0);
116
- const unusedComponents = allComponentNames.filter((name) => !usageMap.has(name) || usageMap.get(name) === 0);
117
-
118
- const mostUsed = usageScan.results
119
- .filter((r) => allComponentNames.includes(r.component))
120
- .slice(0, 10)
121
- .map((r) => ({ component: r.component, count: r.totalUsages }));
122
-
123
- const adoptionRate = allComponentNames.length > 0
124
- ? Math.round((usedComponents.length / allComponentNames.length) * 100)
125
- : 0;
126
-
127
- return {
128
- totalComponents: allComponentNames.length,
129
- usedComponents: usedComponents.length,
130
- unusedComponents,
131
- mostUsed,
132
- adoptionRate,
133
- };
134
- }
135
-
136
- /**
137
- * Calculate style drift statistics from drift reports
138
- */
139
- function calculateDriftStats(driftReports?: DriftReport[]): StyleDriftStats {
140
- if (!driftReports || driftReports.length === 0) {
141
- return {
142
- componentsWithDrift: 0,
143
- totalDrifts: 0,
144
- averageCompliance: 100,
145
- byProperty: {},
146
- bySeverity: { high: 0, medium: 0, low: 0 },
147
- worstOffenders: [],
148
- };
149
- }
150
-
151
- const summary = aggregateDriftReports(driftReports);
152
- const worstOffenders = getWorstOffenders(driftReports, 5);
153
-
154
- return {
155
- componentsWithDrift: summary.componentsWithDrift,
156
- totalDrifts: summary.totalDrifts,
157
- averageCompliance: summary.averageCompliance,
158
- byProperty: summary.byProperty,
159
- bySeverity: summary.bySeverity,
160
- worstOffenders: worstOffenders.map((r) => ({
161
- component: r.component,
162
- variant: r.variant,
163
- driftCount: r.drifts.length,
164
- complianceScore: r.complianceScore,
165
- })),
166
- };
167
- }
168
-
169
- /**
170
- * Calculate documentation statistics from fragments
171
- */
172
- function calculateDocumentationStats(
173
- fragments: Array<{ path: string; fragment: FragmentDefinition }>
174
- ): DocumentationStats {
175
- const documented: string[] = [];
176
- const undocumented: string[] = [];
177
- const missingDescriptions: string[] = [];
178
- const missingUsage: string[] = [];
179
-
180
- for (const { fragment } of fragments) {
181
- const name = fragment.meta.name;
182
-
183
- // Check for description
184
- const hasDescription = fragment.meta.description && fragment.meta.description.trim().length > 10;
185
-
186
- // Check for usage guidelines
187
- const hasUsage = fragment.usage && (fragment.usage.when.length > 0 || fragment.usage.whenNot.length > 0);
188
-
189
- // Check for variants
190
- const hasVariants = fragment.variants && fragment.variants.length > 0;
191
-
192
- if (hasDescription && hasVariants) {
193
- documented.push(name);
194
- } else {
195
- undocumented.push(name);
196
- }
197
-
198
- if (!hasDescription) {
199
- missingDescriptions.push(name);
200
- }
201
-
202
- if (!hasUsage) {
203
- missingUsage.push(name);
204
- }
205
- }
206
-
207
- const documentationRate = fragments.length > 0
208
- ? Math.round((documented.length / fragments.length) * 100)
209
- : 0;
210
-
211
- return {
212
- documented: documented.length,
213
- undocumented,
214
- documentationRate,
215
- missingDescriptions,
216
- missingUsage,
217
- };
218
- }
219
-
220
- /**
221
- * Calculate token statistics
222
- */
223
- function calculateTokenStats(tokenData?: {
224
- complianceScore: number;
225
- hardcodedCount: number;
226
- tokenizedCount: number;
227
- }): TokenStats {
228
- if (!tokenData) {
229
- return {
230
- complianceScore: 100,
231
- hardcodedValues: 0,
232
- tokenizedValues: 0,
233
- tokenizationRate: 100,
234
- };
235
- }
236
-
237
- const total = tokenData.hardcodedCount + tokenData.tokenizedCount;
238
- const tokenizationRate = total > 0
239
- ? Math.round((tokenData.tokenizedCount / total) * 100)
240
- : 100;
241
-
242
- return {
243
- complianceScore: tokenData.complianceScore,
244
- hardcodedValues: tokenData.hardcodedCount,
245
- tokenizedValues: tokenData.tokenizedCount,
246
- tokenizationRate,
247
- };
248
- }
249
-
250
- /**
251
- * Generate recommendations based on health data
252
- */
253
- function generateRecommendations(
254
- usage: UsageStats,
255
- drift: StyleDriftStats,
256
- documentation: DocumentationStats,
257
- tokens: TokenStats
258
- ): string[] {
259
- const recommendations: string[] = [];
260
-
261
- // Usage recommendations
262
- if (usage.unusedComponents.length > 0) {
263
- if (usage.unusedComponents.length <= 3) {
264
- recommendations.push(
265
- `Consider removing or deprecating unused components: ${usage.unusedComponents.join(', ')}`
266
- );
267
- } else {
268
- recommendations.push(
269
- `${usage.unusedComponents.length} components are not being used. Run \`fragments scan\` for details.`
270
- );
271
- }
272
- }
273
-
274
- if (usage.adoptionRate < 50) {
275
- recommendations.push(
276
- 'Low component adoption rate. Consider documenting migration paths from legacy components.'
277
- );
278
- }
279
-
280
- // Drift recommendations
281
- if (drift.bySeverity.high > 0) {
282
- recommendations.push(
283
- `${drift.bySeverity.high} high-severity style drift${drift.bySeverity.high > 1 ? 's' : ''} detected. These affect brand colors and typography.`
284
- );
285
- }
286
-
287
- if (drift.averageCompliance < 80) {
288
- recommendations.push(
289
- `Style compliance is at ${drift.averageCompliance}%. Review the Styles panel for fix suggestions.`
290
- );
291
- }
292
-
293
- // Documentation recommendations
294
- if (documentation.missingDescriptions.length > 0) {
295
- if (documentation.missingDescriptions.length <= 3) {
296
- recommendations.push(
297
- `Add descriptions to: ${documentation.missingDescriptions.join(', ')}`
298
- );
299
- } else {
300
- recommendations.push(
301
- `${documentation.missingDescriptions.length} components are missing descriptions.`
302
- );
303
- }
304
- }
305
-
306
- if (documentation.missingUsage.length > 0) {
307
- recommendations.push(
308
- `${documentation.missingUsage.length} components are missing usage guidelines (when/whenNot).`
309
- );
310
- }
311
-
312
- // Token recommendations
313
- if (tokens.hardcodedValues > 0) {
314
- recommendations.push(
315
- `${tokens.hardcodedValues} hardcoded value${tokens.hardcodedValues > 1 ? 's' : ''} should use design tokens.`
316
- );
317
- }
318
-
319
- if (tokens.tokenizationRate < 80) {
320
- recommendations.push(
321
- 'Token usage is low. Consider running token audits to identify migration opportunities.'
322
- );
323
- }
324
-
325
- return recommendations;
326
- }
327
-
328
- /**
329
- * Calculate overall health score
330
- */
331
- function calculateOverallScore(
332
- usage: UsageStats,
333
- drift: StyleDriftStats,
334
- documentation: DocumentationStats,
335
- tokens: TokenStats
336
- ): number {
337
- // Weighted average of different metrics
338
- const weights = {
339
- adoption: 0.2,
340
- compliance: 0.3,
341
- documentation: 0.25,
342
- tokens: 0.25,
343
- };
344
-
345
- const scores = {
346
- adoption: usage.adoptionRate,
347
- compliance: drift.averageCompliance,
348
- documentation: documentation.documentationRate,
349
- tokens: tokens.tokenizationRate,
350
- };
351
-
352
- const weightedSum =
353
- scores.adoption * weights.adoption +
354
- scores.compliance * weights.compliance +
355
- scores.documentation * weights.documentation +
356
- scores.tokens * weights.tokens;
357
-
358
- return Math.round(weightedSum);
359
- }
360
-
361
- /**
362
- * Generate a comprehensive health report
363
- */
364
- export function generateHealthReport(options: HealthReportOptions): HealthReport {
365
- const { fragments, usageScan, driftReports, tokenData } = options;
366
-
367
- const usage = calculateUsageStats(fragments, usageScan);
368
- const styleDrift = calculateDriftStats(driftReports);
369
- const documentation = calculateDocumentationStats(fragments);
370
- const tokens = calculateTokenStats(tokenData);
371
-
372
- const overallScore = calculateOverallScore(usage, styleDrift, documentation, tokens);
373
- const recommendations = generateRecommendations(usage, styleDrift, documentation, tokens);
374
-
375
- return {
376
- generatedAt: new Date().toISOString(),
377
- overallScore,
378
- grades: {
379
- usage: toGrade(usage.adoptionRate),
380
- drift: toGrade(styleDrift.averageCompliance),
381
- documentation: toGrade(documentation.documentationRate),
382
- tokens: toGrade(tokens.tokenizationRate),
383
- },
384
- usage,
385
- styleDrift,
386
- documentation,
387
- tokens,
388
- recommendations,
389
- };
390
- }
391
-
392
- /**
393
- * Format health report as markdown
394
- */
395
- export function formatHealthReportAsMarkdown(report: HealthReport): string {
396
- const lines: string[] = [
397
- '# Design System Health Report',
398
- '',
399
- `Generated: ${new Date(report.generatedAt).toLocaleString()}`,
400
- '',
401
- `## Overall Score: ${report.overallScore}%`,
402
- '',
403
- '| Category | Grade | Score |',
404
- '|----------|-------|-------|',
405
- `| Usage | ${report.grades.usage} | ${report.usage.adoptionRate}% |`,
406
- `| Style Compliance | ${report.grades.drift} | ${report.styleDrift.averageCompliance}% |`,
407
- `| Documentation | ${report.grades.documentation} | ${report.documentation.documentationRate}% |`,
408
- `| Token Usage | ${report.grades.tokens} | ${report.tokens.tokenizationRate}% |`,
409
- '',
410
- ];
411
-
412
- // Usage section
413
- lines.push('## Usage Statistics');
414
- lines.push('');
415
- lines.push(`- **Total Components**: ${report.usage.totalComponents}`);
416
- lines.push(`- **Used Components**: ${report.usage.usedComponents}`);
417
- lines.push(`- **Adoption Rate**: ${report.usage.adoptionRate}%`);
418
-
419
- if (report.usage.mostUsed.length > 0) {
420
- lines.push('');
421
- lines.push('### Most Used Components');
422
- lines.push('');
423
- for (const item of report.usage.mostUsed.slice(0, 5)) {
424
- lines.push(`- ${item.component}: ${item.count} usages`);
425
- }
426
- }
427
-
428
- if (report.usage.unusedComponents.length > 0) {
429
- lines.push('');
430
- lines.push('### Unused Components');
431
- lines.push('');
432
- for (const name of report.usage.unusedComponents) {
433
- lines.push(`- ${name}`);
434
- }
435
- }
436
-
437
- // Style Drift section
438
- lines.push('');
439
- lines.push('## Style Drift Analysis');
440
- lines.push('');
441
- lines.push(`- **Components with Drift**: ${report.styleDrift.componentsWithDrift}`);
442
- lines.push(`- **Total Drifts**: ${report.styleDrift.totalDrifts}`);
443
- lines.push(`- **Average Compliance**: ${report.styleDrift.averageCompliance}%`);
444
-
445
- if (Object.keys(report.styleDrift.bySeverity).some((k) => report.styleDrift.bySeverity[k as keyof typeof report.styleDrift.bySeverity] > 0)) {
446
- lines.push('');
447
- lines.push('### Drift by Severity');
448
- lines.push('');
449
- lines.push(`- High: ${report.styleDrift.bySeverity.high}`);
450
- lines.push(`- Medium: ${report.styleDrift.bySeverity.medium}`);
451
- lines.push(`- Low: ${report.styleDrift.bySeverity.low}`);
452
- }
453
-
454
- if (report.styleDrift.worstOffenders.length > 0) {
455
- lines.push('');
456
- lines.push('### Components Needing Attention');
457
- lines.push('');
458
- for (const item of report.styleDrift.worstOffenders) {
459
- lines.push(`- **${item.component}** (${item.variant}): ${item.driftCount} drifts, ${item.complianceScore}% compliant`);
460
- }
461
- }
462
-
463
- // Documentation section
464
- lines.push('');
465
- lines.push('## Documentation Coverage');
466
- lines.push('');
467
- lines.push(`- **Documented**: ${report.documentation.documented} components`);
468
- lines.push(`- **Documentation Rate**: ${report.documentation.documentationRate}%`);
469
-
470
- if (report.documentation.undocumented.length > 0) {
471
- lines.push('');
472
- lines.push('### Needs Documentation');
473
- lines.push('');
474
- for (const name of report.documentation.undocumented.slice(0, 10)) {
475
- lines.push(`- ${name}`);
476
- }
477
- if (report.documentation.undocumented.length > 10) {
478
- lines.push(`- ... and ${report.documentation.undocumented.length - 10} more`);
479
- }
480
- }
481
-
482
- // Token section
483
- lines.push('');
484
- lines.push('## Design Token Usage');
485
- lines.push('');
486
- lines.push(`- **Token Compliance**: ${report.tokens.complianceScore}%`);
487
- lines.push(`- **Tokenized Values**: ${report.tokens.tokenizedValues}`);
488
- lines.push(`- **Hardcoded Values**: ${report.tokens.hardcodedValues}`);
489
-
490
- // Recommendations
491
- if (report.recommendations.length > 0) {
492
- lines.push('');
493
- lines.push('## Recommendations');
494
- lines.push('');
495
- for (const rec of report.recommendations) {
496
- lines.push(`- ${rec}`);
497
- }
498
- }
499
-
500
- lines.push('');
501
- lines.push('---');
502
- lines.push('*Generated by Fragments CLI*');
503
-
504
- return lines.join('\n');
505
- }