@fragments-sdk/cli 0.10.0 → 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 (167) hide show
  1. package/dist/bin.js +26 -8
  2. package/dist/bin.js.map +1 -1
  3. package/dist/{chunk-ZDA3PLQ6.js → chunk-5G3VZH43.js} +2 -2
  4. package/dist/{chunk-566BNPQZ.js → chunk-HRFUSSZI.js} +25 -6
  5. package/dist/chunk-HRFUSSZI.js.map +1 -0
  6. package/dist/{chunk-CAMXG5HJ.js → chunk-ZM4ZQZWZ.js} +2 -2
  7. package/dist/{generate-BGKTKO6E.js → generate-FBHSXR3D.js} +2 -2
  8. package/dist/index.js +2 -2
  9. package/dist/{init-Q53R5Q2T.js → init-UFGK5TCN.js} +77 -6
  10. package/dist/init-UFGK5TCN.js.map +1 -0
  11. package/dist/{scan-OQU7M4GH.js → scan-CJF2DOQW.js} +3 -3
  12. package/dist/{scan-generate-T5QNUG7N.js → scan-generate-SJAN5MVI.js} +2 -2
  13. package/dist/snapshot-SV2JOFZH.js +139 -0
  14. package/dist/snapshot-SV2JOFZH.js.map +1 -0
  15. package/dist/{test-2CSOSS3B.js → test-Z5LVO724.js} +2 -2
  16. package/dist/{tokens-DXEGYTOJ.js → tokens-CE46OTMD.js} +2 -2
  17. package/dist/{viewer-DBEPYM3G.js → viewer-DLLJIMCK.js} +69 -47
  18. package/dist/viewer-DLLJIMCK.js.map +1 -0
  19. package/package.json +6 -14
  20. package/src/bin.ts +30 -0
  21. package/src/commands/init.ts +76 -1
  22. package/src/commands/snapshot.ts +197 -0
  23. package/src/core/loader.ts +38 -8
  24. package/src/viewer/__tests__/viewer-integration.test.ts +85 -74
  25. package/src/viewer/server.ts +37 -22
  26. package/src/viewer/vite-plugin.ts +25 -9
  27. package/dist/chunk-566BNPQZ.js.map +0 -1
  28. package/dist/init-Q53R5Q2T.js.map +0 -1
  29. package/dist/viewer-DBEPYM3G.js.map +0 -1
  30. package/src/viewer/__tests__/a11y-fixes.test.ts +0 -358
  31. package/src/viewer/__tests__/jsx-parser.test.ts +0 -502
  32. package/src/viewer/__tests__/render-utils.test.ts +0 -232
  33. package/src/viewer/__tests__/style-utils.test.ts +0 -404
  34. package/src/viewer/assets/fragments-logo.ts +0 -4
  35. package/src/viewer/components/AccessibilityPanel.tsx +0 -1457
  36. package/src/viewer/components/ActionCapture.tsx +0 -172
  37. package/src/viewer/components/ActionsPanel.tsx +0 -332
  38. package/src/viewer/components/AllVariantsPreview.tsx +0 -78
  39. package/src/viewer/components/App.tsx +0 -582
  40. package/src/viewer/components/BottomPanel.tsx +0 -288
  41. package/src/viewer/components/CodePanel.naming.test.tsx +0 -59
  42. package/src/viewer/components/CodePanel.tsx +0 -118
  43. package/src/viewer/components/CommandPalette.tsx +0 -392
  44. package/src/viewer/components/ComponentDocView.tsx +0 -164
  45. package/src/viewer/components/ComponentGraph.tsx +0 -380
  46. package/src/viewer/components/ComponentHeader.tsx +0 -88
  47. package/src/viewer/components/ContractPanel.tsx +0 -241
  48. package/src/viewer/components/EmptyVariantMessage.tsx +0 -54
  49. package/src/viewer/components/ErrorBoundary.tsx +0 -97
  50. package/src/viewer/components/FigmaEmbed.tsx +0 -238
  51. package/src/viewer/components/FragmentEditor.tsx +0 -525
  52. package/src/viewer/components/FragmentRenderer.tsx +0 -61
  53. package/src/viewer/components/HeaderSearch.tsx +0 -24
  54. package/src/viewer/components/HealthDashboard.tsx +0 -441
  55. package/src/viewer/components/HmrStatusIndicator.tsx +0 -61
  56. package/src/viewer/components/Icons.tsx +0 -479
  57. package/src/viewer/components/InteractionsPanel.tsx +0 -757
  58. package/src/viewer/components/IsolatedPreviewFrame.tsx +0 -346
  59. package/src/viewer/components/IsolatedRender.tsx +0 -113
  60. package/src/viewer/components/KeyboardShortcutsHelp.tsx +0 -53
  61. package/src/viewer/components/LandingPage.tsx +0 -421
  62. package/src/viewer/components/Layout.tsx +0 -27
  63. package/src/viewer/components/LeftSidebar.tsx +0 -472
  64. package/src/viewer/components/LoadErrorMessage.tsx +0 -102
  65. package/src/viewer/components/MultiViewportPreview.tsx +0 -522
  66. package/src/viewer/components/NoVariantsMessage.tsx +0 -59
  67. package/src/viewer/components/PanelShell.tsx +0 -161
  68. package/src/viewer/components/PerformancePanel.tsx +0 -304
  69. package/src/viewer/components/PreviewArea.tsx +0 -472
  70. package/src/viewer/components/PreviewAside.tsx +0 -168
  71. package/src/viewer/components/PreviewFrameHost.tsx +0 -303
  72. package/src/viewer/components/PreviewPane.tsx +0 -149
  73. package/src/viewer/components/PreviewToolbar.tsx +0 -80
  74. package/src/viewer/components/PropsEditor.tsx +0 -506
  75. package/src/viewer/components/PropsTable.tsx +0 -111
  76. package/src/viewer/components/RelationsSection.tsx +0 -88
  77. package/src/viewer/components/ResizablePanel.tsx +0 -271
  78. package/src/viewer/components/RightSidebar.tsx +0 -102
  79. package/src/viewer/components/RuntimeToolsRegistrar.tsx +0 -17
  80. package/src/viewer/components/ScreenshotButton.tsx +0 -90
  81. package/src/viewer/components/Sidebar.tsx +0 -169
  82. package/src/viewer/components/SkeletonLoader.tsx +0 -161
  83. package/src/viewer/components/ThemeProvider.tsx +0 -42
  84. package/src/viewer/components/Toast.tsx +0 -3
  85. package/src/viewer/components/TokenStylePanel.tsx +0 -699
  86. package/src/viewer/components/TopToolbar.tsx +0 -159
  87. package/src/viewer/components/UsageSection.tsx +0 -95
  88. package/src/viewer/components/VariantMatrix.tsx +0 -388
  89. package/src/viewer/components/VariantRenderer.tsx +0 -131
  90. package/src/viewer/components/VariantTabs.tsx +0 -40
  91. package/src/viewer/components/ViewerHeader.tsx +0 -69
  92. package/src/viewer/components/ViewerStateSync.tsx +0 -52
  93. package/src/viewer/components/ViewportSelector.tsx +0 -172
  94. package/src/viewer/components/WebMCPDevTools.tsx +0 -503
  95. package/src/viewer/components/WebMCPIntegration.tsx +0 -47
  96. package/src/viewer/components/WebMCPStatusIndicator.tsx +0 -60
  97. package/src/viewer/components/_future/CreatePage.tsx +0 -836
  98. package/src/viewer/components/viewer-utils.ts +0 -16
  99. package/src/viewer/composition-renderer.ts +0 -381
  100. package/src/viewer/constants/index.ts +0 -1
  101. package/src/viewer/constants/ui.ts +0 -166
  102. package/src/viewer/entry.tsx +0 -335
  103. package/src/viewer/hooks/index.ts +0 -2
  104. package/src/viewer/hooks/useA11yCache.ts +0 -383
  105. package/src/viewer/hooks/useA11yService.ts +0 -364
  106. package/src/viewer/hooks/useActions.ts +0 -138
  107. package/src/viewer/hooks/useAppState.ts +0 -147
  108. package/src/viewer/hooks/useCompiledFragments.ts +0 -42
  109. package/src/viewer/hooks/useFigmaIntegration.ts +0 -132
  110. package/src/viewer/hooks/useHmrStatus.ts +0 -109
  111. package/src/viewer/hooks/useKeyboardShortcuts.ts +0 -270
  112. package/src/viewer/hooks/usePreviewBridge.ts +0 -347
  113. package/src/viewer/hooks/useScrollSpy.ts +0 -78
  114. package/src/viewer/hooks/useUrlState.ts +0 -318
  115. package/src/viewer/hooks/useViewSettings.ts +0 -111
  116. package/src/viewer/index.html +0 -28
  117. package/src/viewer/intelligence/healthReport.ts +0 -505
  118. package/src/viewer/intelligence/styleDrift.ts +0 -340
  119. package/src/viewer/intelligence/usageScanner.ts +0 -309
  120. package/src/viewer/jsx-parser.ts +0 -486
  121. package/src/viewer/preview-frame-entry.tsx +0 -25
  122. package/src/viewer/preview-frame.html +0 -125
  123. package/src/viewer/public/favicon.ico +0 -0
  124. package/src/viewer/render-template.html +0 -68
  125. package/src/viewer/styles/globals.css +0 -278
  126. package/src/viewer/types/a11y.ts +0 -197
  127. package/src/viewer/utils/a11y-fixes.ts +0 -509
  128. package/src/viewer/utils/actionExport.ts +0 -372
  129. package/src/viewer/utils/colorSchemes.ts +0 -201
  130. package/src/viewer/utils/detectRelationships.ts +0 -256
  131. package/src/viewer/vendor/shared/src/ComponentDocContent.module.scss +0 -10
  132. package/src/viewer/vendor/shared/src/ComponentDocContent.module.scss.d.ts +0 -2
  133. package/src/viewer/vendor/shared/src/ComponentDocContent.tsx +0 -274
  134. package/src/viewer/vendor/shared/src/DocsHeaderBar.tsx +0 -129
  135. package/src/viewer/vendor/shared/src/DocsPageAsideHost.tsx +0 -89
  136. package/src/viewer/vendor/shared/src/DocsPageShell.tsx +0 -124
  137. package/src/viewer/vendor/shared/src/DocsSearchCommand.tsx +0 -99
  138. package/src/viewer/vendor/shared/src/DocsSidebarNav.tsx +0 -66
  139. package/src/viewer/vendor/shared/src/PropsTable.module.scss +0 -68
  140. package/src/viewer/vendor/shared/src/PropsTable.module.scss.d.ts +0 -2
  141. package/src/viewer/vendor/shared/src/PropsTable.tsx +0 -76
  142. package/src/viewer/vendor/shared/src/VariantPreviewCard.module.scss +0 -114
  143. package/src/viewer/vendor/shared/src/VariantPreviewCard.module.scss.d.ts +0 -2
  144. package/src/viewer/vendor/shared/src/VariantPreviewCard.tsx +0 -134
  145. package/src/viewer/vendor/shared/src/docs-data/index.ts +0 -32
  146. package/src/viewer/vendor/shared/src/docs-data/mcp-configs.ts +0 -72
  147. package/src/viewer/vendor/shared/src/docs-data/palettes.ts +0 -75
  148. package/src/viewer/vendor/shared/src/docs-data/setup-examples.ts +0 -55
  149. package/src/viewer/vendor/shared/src/docs-layout.scss +0 -28
  150. package/src/viewer/vendor/shared/src/docs-layout.scss.d.ts +0 -2
  151. package/src/viewer/vendor/shared/src/index.ts +0 -34
  152. package/src/viewer/vendor/shared/src/types.ts +0 -53
  153. package/src/viewer/webmcp/__tests__/analytics.test.ts +0 -108
  154. package/src/viewer/webmcp/analytics.ts +0 -165
  155. package/src/viewer/webmcp/index.ts +0 -3
  156. package/src/viewer/webmcp/posthog-bridge.ts +0 -39
  157. package/src/viewer/webmcp/runtime-tools.ts +0 -152
  158. package/src/viewer/webmcp/scan-utils.ts +0 -135
  159. package/src/viewer/webmcp/use-tool-analytics.ts +0 -69
  160. package/src/viewer/webmcp/viewer-state.ts +0 -45
  161. /package/dist/{chunk-ZDA3PLQ6.js.map → chunk-5G3VZH43.js.map} +0 -0
  162. /package/dist/{chunk-CAMXG5HJ.js.map → chunk-ZM4ZQZWZ.js.map} +0 -0
  163. /package/dist/{generate-BGKTKO6E.js.map → generate-FBHSXR3D.js.map} +0 -0
  164. /package/dist/{scan-OQU7M4GH.js.map → scan-CJF2DOQW.js.map} +0 -0
  165. /package/dist/{scan-generate-T5QNUG7N.js.map → scan-generate-SJAN5MVI.js.map} +0 -0
  166. /package/dist/{test-2CSOSS3B.js.map → test-Z5LVO724.js.map} +0 -0
  167. /package/dist/{tokens-DXEGYTOJ.js.map → tokens-CE46OTMD.js.map} +0 -0
@@ -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
- }