@fragments-sdk/cli 0.2.2

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 (259) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +106 -0
  3. package/dist/bin.d.ts +1 -0
  4. package/dist/bin.js +4783 -0
  5. package/dist/bin.js.map +1 -0
  6. package/dist/chunk-4FDQSGKX.js +786 -0
  7. package/dist/chunk-4FDQSGKX.js.map +1 -0
  8. package/dist/chunk-7H2MMGYG.js +369 -0
  9. package/dist/chunk-7H2MMGYG.js.map +1 -0
  10. package/dist/chunk-BSCG3IP7.js +619 -0
  11. package/dist/chunk-BSCG3IP7.js.map +1 -0
  12. package/dist/chunk-LY2CFFPY.js +898 -0
  13. package/dist/chunk-LY2CFFPY.js.map +1 -0
  14. package/dist/chunk-MUZ6CM66.js +6636 -0
  15. package/dist/chunk-MUZ6CM66.js.map +1 -0
  16. package/dist/chunk-OAENNG3G.js +1489 -0
  17. package/dist/chunk-OAENNG3G.js.map +1 -0
  18. package/dist/chunk-XHNKNI6J.js +235 -0
  19. package/dist/chunk-XHNKNI6J.js.map +1 -0
  20. package/dist/core-DWKLGY4N.js +68 -0
  21. package/dist/core-DWKLGY4N.js.map +1 -0
  22. package/dist/generate-4LQNJ7SX.js +249 -0
  23. package/dist/generate-4LQNJ7SX.js.map +1 -0
  24. package/dist/index.d.ts +775 -0
  25. package/dist/index.js +41 -0
  26. package/dist/index.js.map +1 -0
  27. package/dist/init-EMVI47QG.js +416 -0
  28. package/dist/init-EMVI47QG.js.map +1 -0
  29. package/dist/mcp-bin.d.ts +1 -0
  30. package/dist/mcp-bin.js +1117 -0
  31. package/dist/mcp-bin.js.map +1 -0
  32. package/dist/scan-4YPRF7FV.js +12 -0
  33. package/dist/scan-4YPRF7FV.js.map +1 -0
  34. package/dist/service-QSZMZJBJ.js +208 -0
  35. package/dist/service-QSZMZJBJ.js.map +1 -0
  36. package/dist/static-viewer-MIPGZ4Z7.js +12 -0
  37. package/dist/static-viewer-MIPGZ4Z7.js.map +1 -0
  38. package/dist/test-SQ5ZHXWU.js +1067 -0
  39. package/dist/test-SQ5ZHXWU.js.map +1 -0
  40. package/dist/tokens-HSGMYK64.js +173 -0
  41. package/dist/tokens-HSGMYK64.js.map +1 -0
  42. package/dist/viewer-YRF4SQE4.js +11101 -0
  43. package/dist/viewer-YRF4SQE4.js.map +1 -0
  44. package/package.json +107 -0
  45. package/src/ai.ts +266 -0
  46. package/src/analyze.ts +265 -0
  47. package/src/bin.ts +916 -0
  48. package/src/build.ts +248 -0
  49. package/src/commands/a11y.ts +302 -0
  50. package/src/commands/add.ts +313 -0
  51. package/src/commands/audit.ts +195 -0
  52. package/src/commands/baseline.ts +221 -0
  53. package/src/commands/build.ts +144 -0
  54. package/src/commands/compare.ts +337 -0
  55. package/src/commands/context.ts +107 -0
  56. package/src/commands/dev.ts +107 -0
  57. package/src/commands/enhance.ts +858 -0
  58. package/src/commands/generate.ts +391 -0
  59. package/src/commands/init.ts +531 -0
  60. package/src/commands/link/figma.ts +645 -0
  61. package/src/commands/link/index.ts +10 -0
  62. package/src/commands/link/storybook.ts +267 -0
  63. package/src/commands/list.ts +49 -0
  64. package/src/commands/metrics.ts +114 -0
  65. package/src/commands/reset.ts +242 -0
  66. package/src/commands/scan.ts +537 -0
  67. package/src/commands/storygen.ts +207 -0
  68. package/src/commands/tokens.ts +251 -0
  69. package/src/commands/validate.ts +93 -0
  70. package/src/commands/verify.ts +215 -0
  71. package/src/core/composition.test.ts +262 -0
  72. package/src/core/composition.ts +255 -0
  73. package/src/core/config.ts +84 -0
  74. package/src/core/constants.ts +111 -0
  75. package/src/core/context.ts +380 -0
  76. package/src/core/defineSegment.ts +137 -0
  77. package/src/core/discovery.ts +337 -0
  78. package/src/core/figma.ts +263 -0
  79. package/src/core/fragment-types.ts +214 -0
  80. package/src/core/generators/context.ts +389 -0
  81. package/src/core/generators/index.ts +23 -0
  82. package/src/core/generators/registry.ts +364 -0
  83. package/src/core/generators/typescript-extractor.ts +374 -0
  84. package/src/core/importAnalyzer.ts +217 -0
  85. package/src/core/index.ts +149 -0
  86. package/src/core/loader.ts +155 -0
  87. package/src/core/node.ts +63 -0
  88. package/src/core/parser.ts +551 -0
  89. package/src/core/previewLoader.ts +172 -0
  90. package/src/core/schema/fragment.schema.json +189 -0
  91. package/src/core/schema/registry.schema.json +137 -0
  92. package/src/core/schema.ts +182 -0
  93. package/src/core/storyAdapter.test.ts +571 -0
  94. package/src/core/storyAdapter.ts +761 -0
  95. package/src/core/token-types.ts +287 -0
  96. package/src/core/types.ts +754 -0
  97. package/src/diff.ts +323 -0
  98. package/src/index.ts +43 -0
  99. package/src/mcp/__tests__/projectFields.test.ts +130 -0
  100. package/src/mcp/bin.ts +36 -0
  101. package/src/mcp/index.ts +8 -0
  102. package/src/mcp/server.ts +1310 -0
  103. package/src/mcp/utils.ts +54 -0
  104. package/src/mcp-bin.ts +36 -0
  105. package/src/migrate/__tests__/argTypes/argTypes.test.ts +189 -0
  106. package/src/migrate/__tests__/args/args.test.ts +452 -0
  107. package/src/migrate/__tests__/meta/meta.test.ts +198 -0
  108. package/src/migrate/__tests__/stories/stories.test.ts +278 -0
  109. package/src/migrate/__tests__/utils/utils.test.ts +371 -0
  110. package/src/migrate/__tests__/values/values.test.ts +303 -0
  111. package/src/migrate/bin.ts +108 -0
  112. package/src/migrate/converter.ts +658 -0
  113. package/src/migrate/detect.ts +196 -0
  114. package/src/migrate/index.ts +45 -0
  115. package/src/migrate/migrate.ts +163 -0
  116. package/src/migrate/parser.ts +1136 -0
  117. package/src/migrate/report.ts +624 -0
  118. package/src/migrate/types.ts +169 -0
  119. package/src/screenshot.ts +249 -0
  120. package/src/service/__tests__/ast-utils.test.ts +426 -0
  121. package/src/service/__tests__/enhance-scanner.test.ts +200 -0
  122. package/src/service/__tests__/figma/figma.test.ts +652 -0
  123. package/src/service/__tests__/metrics-store.test.ts +409 -0
  124. package/src/service/__tests__/patch-generator.test.ts +186 -0
  125. package/src/service/__tests__/props-extractor.test.ts +365 -0
  126. package/src/service/__tests__/token-registry.test.ts +267 -0
  127. package/src/service/analytics.ts +659 -0
  128. package/src/service/ast-utils.ts +444 -0
  129. package/src/service/browser-pool.ts +339 -0
  130. package/src/service/capture.ts +267 -0
  131. package/src/service/diff.ts +279 -0
  132. package/src/service/enhance/aggregator.ts +489 -0
  133. package/src/service/enhance/cache.ts +275 -0
  134. package/src/service/enhance/codebase-scanner.ts +357 -0
  135. package/src/service/enhance/context-generator.ts +529 -0
  136. package/src/service/enhance/doc-extractor.ts +523 -0
  137. package/src/service/enhance/index.ts +131 -0
  138. package/src/service/enhance/props-extractor.ts +665 -0
  139. package/src/service/enhance/scanner.ts +445 -0
  140. package/src/service/enhance/storybook-parser.ts +552 -0
  141. package/src/service/enhance/types.ts +346 -0
  142. package/src/service/enhance/variant-renderer.ts +479 -0
  143. package/src/service/figma.ts +1008 -0
  144. package/src/service/index.ts +249 -0
  145. package/src/service/metrics-store.ts +333 -0
  146. package/src/service/patch-generator.ts +349 -0
  147. package/src/service/report.ts +854 -0
  148. package/src/service/storage.ts +401 -0
  149. package/src/service/token-fixes.ts +281 -0
  150. package/src/service/token-parser.ts +504 -0
  151. package/src/service/token-registry.ts +721 -0
  152. package/src/service/utils.ts +172 -0
  153. package/src/setup.ts +241 -0
  154. package/src/shared/command-wrapper.ts +81 -0
  155. package/src/shared/dev-server-client.ts +199 -0
  156. package/src/shared/index.ts +8 -0
  157. package/src/shared/segment-loader.ts +59 -0
  158. package/src/shared/types.ts +147 -0
  159. package/src/static-viewer.ts +715 -0
  160. package/src/test/discovery.ts +172 -0
  161. package/src/test/index.ts +281 -0
  162. package/src/test/reporters/console.ts +194 -0
  163. package/src/test/reporters/json.ts +190 -0
  164. package/src/test/reporters/junit.ts +186 -0
  165. package/src/test/runner.ts +598 -0
  166. package/src/test/types.ts +245 -0
  167. package/src/test/watch.ts +200 -0
  168. package/src/validators.ts +152 -0
  169. package/src/viewer/__tests__/jsx-parser.test.ts +502 -0
  170. package/src/viewer/__tests__/render-utils.test.ts +232 -0
  171. package/src/viewer/__tests__/style-utils.test.ts +404 -0
  172. package/src/viewer/bin.ts +86 -0
  173. package/src/viewer/cli/health.ts +256 -0
  174. package/src/viewer/cli/index.ts +33 -0
  175. package/src/viewer/cli/scan.ts +124 -0
  176. package/src/viewer/cli/utils.ts +174 -0
  177. package/src/viewer/components/AccessibilityPanel.tsx +1404 -0
  178. package/src/viewer/components/ActionCapture.tsx +172 -0
  179. package/src/viewer/components/ActionsPanel.tsx +371 -0
  180. package/src/viewer/components/App.tsx +638 -0
  181. package/src/viewer/components/BottomPanel.tsx +224 -0
  182. package/src/viewer/components/CodePanel.tsx +589 -0
  183. package/src/viewer/components/CommandPalette.tsx +336 -0
  184. package/src/viewer/components/ComponentGraph.tsx +394 -0
  185. package/src/viewer/components/ComponentHeader.tsx +85 -0
  186. package/src/viewer/components/ContractPanel.tsx +234 -0
  187. package/src/viewer/components/ErrorBoundary.tsx +85 -0
  188. package/src/viewer/components/FigmaEmbed.tsx +231 -0
  189. package/src/viewer/components/FragmentEditor.tsx +485 -0
  190. package/src/viewer/components/HealthDashboard.tsx +452 -0
  191. package/src/viewer/components/HmrStatusIndicator.tsx +71 -0
  192. package/src/viewer/components/Icons.tsx +417 -0
  193. package/src/viewer/components/InteractionsPanel.tsx +720 -0
  194. package/src/viewer/components/IsolatedPreviewFrame.tsx +321 -0
  195. package/src/viewer/components/IsolatedRender.tsx +111 -0
  196. package/src/viewer/components/KeyboardShortcutsHelp.tsx +89 -0
  197. package/src/viewer/components/LandingPage.tsx +441 -0
  198. package/src/viewer/components/Layout.tsx +22 -0
  199. package/src/viewer/components/LeftSidebar.tsx +391 -0
  200. package/src/viewer/components/MultiViewportPreview.tsx +429 -0
  201. package/src/viewer/components/PreviewArea.tsx +404 -0
  202. package/src/viewer/components/PreviewFrameHost.tsx +310 -0
  203. package/src/viewer/components/PreviewPane.tsx +150 -0
  204. package/src/viewer/components/PreviewToolbar.tsx +176 -0
  205. package/src/viewer/components/PropsEditor.tsx +512 -0
  206. package/src/viewer/components/PropsTable.tsx +98 -0
  207. package/src/viewer/components/RelationsSection.tsx +57 -0
  208. package/src/viewer/components/ResizablePanel.tsx +328 -0
  209. package/src/viewer/components/RightSidebar.tsx +118 -0
  210. package/src/viewer/components/ScreenshotButton.tsx +90 -0
  211. package/src/viewer/components/Sidebar.tsx +169 -0
  212. package/src/viewer/components/SkeletonLoader.tsx +156 -0
  213. package/src/viewer/components/StoryRenderer.tsx +128 -0
  214. package/src/viewer/components/ThemeProvider.tsx +96 -0
  215. package/src/viewer/components/Toast.tsx +67 -0
  216. package/src/viewer/components/TokenStylePanel.tsx +708 -0
  217. package/src/viewer/components/UsageSection.tsx +95 -0
  218. package/src/viewer/components/VariantMatrix.tsx +350 -0
  219. package/src/viewer/components/VariantRenderer.tsx +131 -0
  220. package/src/viewer/components/VariantTabs.tsx +84 -0
  221. package/src/viewer/components/ViewportSelector.tsx +165 -0
  222. package/src/viewer/components/_future/CreatePage.tsx +836 -0
  223. package/src/viewer/composition-renderer.ts +381 -0
  224. package/src/viewer/constants/index.ts +1 -0
  225. package/src/viewer/constants/ui.ts +185 -0
  226. package/src/viewer/entry.tsx +299 -0
  227. package/src/viewer/hooks/index.ts +2 -0
  228. package/src/viewer/hooks/useA11yCache.ts +383 -0
  229. package/src/viewer/hooks/useA11yService.ts +498 -0
  230. package/src/viewer/hooks/useActions.ts +138 -0
  231. package/src/viewer/hooks/useAppState.ts +124 -0
  232. package/src/viewer/hooks/useFigmaIntegration.ts +132 -0
  233. package/src/viewer/hooks/useHmrStatus.ts +109 -0
  234. package/src/viewer/hooks/useKeyboardShortcuts.ts +222 -0
  235. package/src/viewer/hooks/usePreviewBridge.ts +347 -0
  236. package/src/viewer/hooks/useScrollSpy.ts +78 -0
  237. package/src/viewer/hooks/useUrlState.ts +330 -0
  238. package/src/viewer/hooks/useViewSettings.ts +125 -0
  239. package/src/viewer/index.html +28 -0
  240. package/src/viewer/index.ts +14 -0
  241. package/src/viewer/intelligence/healthReport.ts +505 -0
  242. package/src/viewer/intelligence/styleDrift.ts +340 -0
  243. package/src/viewer/intelligence/usageScanner.ts +309 -0
  244. package/src/viewer/jsx-parser.ts +485 -0
  245. package/src/viewer/postcss.config.js +6 -0
  246. package/src/viewer/preview-frame-entry.tsx +25 -0
  247. package/src/viewer/preview-frame.html +109 -0
  248. package/src/viewer/render-template.html +68 -0
  249. package/src/viewer/render-utils.ts +170 -0
  250. package/src/viewer/server.ts +276 -0
  251. package/src/viewer/style-utils.ts +414 -0
  252. package/src/viewer/styles/globals.css +355 -0
  253. package/src/viewer/tailwind.config.js +37 -0
  254. package/src/viewer/types/a11y.ts +197 -0
  255. package/src/viewer/utils/a11y-fixes.ts +471 -0
  256. package/src/viewer/utils/actionExport.ts +372 -0
  257. package/src/viewer/utils/colorSchemes.ts +201 -0
  258. package/src/viewer/utils/detectRelationships.ts +256 -0
  259. package/src/viewer/vite-plugin.ts +2143 -0
package/src/migrate/report.ts ADDED
@@ -0,0 +1,624 @@
1
+ /**
2
+ * Migration Report Generator
3
+ *
4
+ * Generates an HTML report showing migration results and analytics.
5
+ */
6
+
7
+ import { BRAND } from "../core/index.js";
8
+ import type { MigrationReport, ConversionResult } from "./types.js";
9
+
10
+ /**
11
+ * Generate an HTML migration report.
12
+ */
13
+ export function generateMigrationReport(report: MigrationReport): string {
14
+ const successRate = report.totalStoryFiles > 0
15
+ ? Math.round((report.successfulConversions / report.totalStoryFiles) * 100)
16
+ : 0;
17
+
18
+ return `<!DOCTYPE html>
19
+ <html lang="en">
20
+ <head>
21
+ <meta charset="UTF-8">
22
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
23
+ <title>${BRAND.name} Migration Report</title>
24
+ <style>
25
+ ${getStyles()}
26
+ </style>
27
+ </head>
28
+ <body>
29
+ <div class="container">
30
+ ${renderHeader(report)}
31
+ ${renderSummaryCards(report, successRate)}
32
+ ${renderProgressSection(report)}
33
+ ${renderCategoriesSection(report)}
34
+ ${renderTodosSection(report)}
35
+ ${renderConversionsTable(report.results)}
36
+ ${renderAnalyticsSection(report)}
37
+ ${renderFooter()}
38
+ </div>
39
+ </body>
40
+ </html>`;
41
+ }
42
+
43
+ function getStyles(): string {
44
+ return `
45
+ :root {
46
+ --bg: #0a0a0a;
47
+ --bg-card: #141414;
48
+ --bg-success: rgba(34, 197, 94, 0.1);
49
+ --bg-warning: rgba(234, 179, 8, 0.1);
50
+ --bg-error: rgba(239, 68, 68, 0.1);
51
+ --border: #262626;
52
+ --text: #fafafa;
53
+ --text-secondary: #a1a1aa;
54
+ --text-muted: #71717a;
55
+ --accent: #8b5cf6;
56
+ --accent-light: #a78bfa;
57
+ --success: #22c55e;
58
+ --warning: #eab308;
59
+ --danger: #ef4444;
60
+ --radius: 12px;
61
+ }
62
+
63
+ * {
64
+ margin: 0;
65
+ padding: 0;
66
+ box-sizing: border-box;
67
+ }
68
+
69
+ body {
70
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
71
+ background: var(--bg);
72
+ color: var(--text);
73
+ line-height: 1.6;
74
+ -webkit-font-smoothing: antialiased;
75
+ }
76
+
77
+ .container {
78
+ max-width: 1200px;
79
+ margin: 0 auto;
80
+ padding: 48px 24px;
81
+ }
82
+
83
+ .header {
84
+ text-align: center;
85
+ margin-bottom: 48px;
86
+ padding-bottom: 32px;
87
+ border-bottom: 1px solid var(--border);
88
+ }
89
+
90
+ .header h1 {
91
+ font-size: 36px;
92
+ font-weight: 800;
93
+ margin-bottom: 8px;
94
+ background: linear-gradient(135deg, var(--accent), var(--accent-light));
95
+ -webkit-background-clip: text;
96
+ -webkit-text-fill-color: transparent;
97
+ }
98
+
99
+ .header .subtitle {
100
+ color: var(--text-secondary);
101
+ font-size: 16px;
102
+ }
103
+
104
+ .header .timestamp {
105
+ color: var(--text-muted);
106
+ font-size: 13px;
107
+ margin-top: 8px;
108
+ }
109
+
110
+ .summary-grid {
111
+ display: grid;
112
+ grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
113
+ gap: 16px;
114
+ margin-bottom: 48px;
115
+ }
116
+
117
+ .summary-card {
118
+ background: var(--bg-card);
119
+ border: 1px solid var(--border);
120
+ border-radius: var(--radius);
121
+ padding: 24px;
122
+ text-align: center;
123
+ }
124
+
125
+ .summary-card.success { border-color: var(--success); background: var(--bg-success); }
126
+ .summary-card.warning { border-color: var(--warning); background: var(--bg-warning); }
127
+ .summary-card.error { border-color: var(--danger); background: var(--bg-error); }
128
+
129
+ .summary-card-value {
130
+ font-size: 42px;
131
+ font-weight: 700;
132
+ line-height: 1;
133
+ }
134
+
135
+ .summary-card-label {
136
+ font-size: 13px;
137
+ color: var(--text-secondary);
138
+ margin-top: 8px;
139
+ text-transform: uppercase;
140
+ letter-spacing: 0.05em;
141
+ }
142
+
143
+ .section {
144
+ margin-bottom: 48px;
145
+ }
146
+
147
+ .section-title {
148
+ font-size: 20px;
149
+ font-weight: 600;
150
+ margin-bottom: 20px;
151
+ display: flex;
152
+ align-items: center;
153
+ gap: 12px;
154
+ }
155
+
156
+ .section-title::before {
157
+ content: '';
158
+ width: 4px;
159
+ height: 24px;
160
+ background: var(--accent);
161
+ border-radius: 2px;
162
+ }
163
+
164
+ .progress-bar {
165
+ width: 100%;
166
+ height: 24px;
167
+ background: var(--bg-card);
168
+ border-radius: 12px;
169
+ overflow: hidden;
170
+ border: 1px solid var(--border);
171
+ }
172
+
173
+ .progress-fill {
174
+ height: 100%;
175
+ background: linear-gradient(90deg, var(--accent), var(--success));
176
+ border-radius: 12px;
177
+ transition: width 0.5s ease;
178
+ display: flex;
179
+ align-items: center;
180
+ justify-content: center;
181
+ }
182
+
183
+ .progress-text {
184
+ font-size: 12px;
185
+ font-weight: 600;
186
+ color: white;
187
+ }
188
+
189
+ .categories-grid {
190
+ display: flex;
191
+ flex-wrap: wrap;
192
+ gap: 12px;
193
+ }
194
+
195
+ .category-tag {
196
+ background: var(--bg-card);
197
+ border: 1px solid var(--border);
198
+ border-radius: 8px;
199
+ padding: 8px 16px;
200
+ font-size: 14px;
201
+ }
202
+
203
+ .category-count {
204
+ color: var(--accent);
205
+ font-weight: 600;
206
+ margin-left: 6px;
207
+ }
208
+
209
+ .todos-list {
210
+ background: var(--bg-card);
211
+ border: 1px solid var(--border);
212
+ border-radius: var(--radius);
213
+ overflow: hidden;
214
+ }
215
+
216
+ .todo-item {
217
+ padding: 16px 20px;
218
+ border-bottom: 1px solid var(--border);
219
+ display: flex;
220
+ align-items: flex-start;
221
+ gap: 12px;
222
+ }
223
+
224
+ .todo-item:last-child {
225
+ border-bottom: none;
226
+ }
227
+
228
+ .todo-checkbox {
229
+ width: 18px;
230
+ height: 18px;
231
+ border: 2px solid var(--border);
232
+ border-radius: 4px;
233
+ flex-shrink: 0;
234
+ margin-top: 2px;
235
+ }
236
+
237
+ .todo-content {
238
+ flex: 1;
239
+ }
240
+
241
+ .todo-component {
242
+ font-weight: 600;
243
+ color: var(--accent);
244
+ }
245
+
246
+ .todo-text {
247
+ color: var(--text-secondary);
248
+ font-size: 14px;
249
+ }
250
+
251
+ .table-container {
252
+ overflow-x: auto;
253
+ }
254
+
255
+ table {
256
+ width: 100%;
257
+ border-collapse: collapse;
258
+ background: var(--bg-card);
259
+ border-radius: var(--radius);
260
+ overflow: hidden;
261
+ }
262
+
263
+ th, td {
264
+ padding: 14px 16px;
265
+ text-align: left;
266
+ border-bottom: 1px solid var(--border);
267
+ }
268
+
269
+ th {
270
+ background: var(--bg);
271
+ font-size: 12px;
272
+ font-weight: 600;
273
+ text-transform: uppercase;
274
+ letter-spacing: 0.05em;
275
+ color: var(--text-muted);
276
+ }
277
+
278
+ tr:last-child td {
279
+ border-bottom: none;
280
+ }
281
+
282
+ tr:hover td {
283
+ background: rgba(255, 255, 255, 0.02);
284
+ }
285
+
286
+ .status-badge {
287
+ display: inline-flex;
288
+ align-items: center;
289
+ gap: 6px;
290
+ padding: 4px 10px;
291
+ border-radius: 6px;
292
+ font-size: 12px;
293
+ font-weight: 500;
294
+ }
295
+
296
+ .status-success {
297
+ background: var(--bg-success);
298
+ color: var(--success);
299
+ }
300
+
301
+ .status-warning {
302
+ background: var(--bg-warning);
303
+ color: var(--warning);
304
+ }
305
+
306
+ .status-error {
307
+ background: var(--bg-error);
308
+ color: var(--danger);
309
+ }
310
+
311
+ .analytics-card {
312
+ background: var(--bg-card);
313
+ border: 1px solid var(--border);
314
+ border-radius: var(--radius);
315
+ padding: 24px;
316
+ }
317
+
318
+ .analytics-score {
319
+ display: flex;
320
+ align-items: center;
321
+ gap: 24px;
322
+ margin-bottom: 24px;
323
+ }
324
+
325
+ .score-circle {
326
+ width: 100px;
327
+ height: 100px;
328
+ border-radius: 50%;
329
+ display: flex;
330
+ flex-direction: column;
331
+ align-items: center;
332
+ justify-content: center;
333
+ background: var(--bg);
334
+ border: 3px solid var(--accent);
335
+ }
336
+
337
+ .score-value {
338
+ font-size: 32px;
339
+ font-weight: 700;
340
+ }
341
+
342
+ .score-label {
343
+ font-size: 11px;
344
+ color: var(--text-muted);
345
+ text-transform: uppercase;
346
+ }
347
+
348
+ .recommendations-list {
349
+ margin-top: 16px;
350
+ }
351
+
352
+ .recommendation {
353
+ padding: 12px 0;
354
+ border-bottom: 1px solid var(--border);
355
+ color: var(--text-secondary);
356
+ font-size: 14px;
357
+ }
358
+
359
+ .recommendation:last-child {
360
+ border-bottom: none;
361
+ }
362
+
363
+ .footer {
364
+ margin-top: 64px;
365
+ padding-top: 32px;
366
+ border-top: 1px solid var(--border);
367
+ text-align: center;
368
+ color: var(--text-muted);
369
+ font-size: 13px;
370
+ }
371
+
372
+ .footer a {
373
+ color: var(--accent);
374
+ text-decoration: none;
375
+ }
376
+ `;
377
+ }
378
+
379
+ function renderHeader(report: MigrationReport): string {
380
+ const date = report.timestamp.toLocaleDateString("en-US", {
381
+ weekday: "long",
382
+ year: "numeric",
383
+ month: "long",
384
+ day: "numeric",
385
+ hour: "2-digit",
386
+ minute: "2-digit",
387
+ });
388
+
389
+ return `
390
+ <header class="header">
391
+ <h1>Storybook → ${BRAND.name}</h1>
392
+ <p class="subtitle">Migration Report</p>
393
+ <p class="timestamp">${date}</p>
394
+ </header>
395
+ `;
396
+ }
397
+
398
+ function renderSummaryCards(report: MigrationReport, successRate: number): string {
399
+ return `
400
+ <div class="summary-grid">
401
+ <div class="summary-card">
402
+ <div class="summary-card-value">${report.totalStoryFiles}</div>
403
+ <div class="summary-card-label">Stories Found</div>
404
+ </div>
405
+ <div class="summary-card success">
406
+ <div class="summary-card-value" style="color: var(--success)">${report.successfulConversions}</div>
407
+ <div class="summary-card-label">Converted</div>
408
+ </div>
409
+ <div class="summary-card ${report.failedConversions > 0 ? "error" : ""}">
410
+ <div class="summary-card-value" ${report.failedConversions > 0 ? 'style="color: var(--danger)"' : ""}>${report.failedConversions}</div>
411
+ <div class="summary-card-label">Failed</div>
412
+ </div>
413
+ <div class="summary-card">
414
+ <div class="summary-card-value">${report.totalVariants}</div>
415
+ <div class="summary-card-label">Variants</div>
416
+ </div>
417
+ <div class="summary-card warning">
418
+ <div class="summary-card-value" style="color: var(--warning)">${report.totalTodos}</div>
419
+ <div class="summary-card-label">TODOs</div>
420
+ </div>
421
+ </div>
422
+ `;
423
+ }
424
+
425
+ function renderProgressSection(report: MigrationReport): string {
426
+ const successRate = report.totalStoryFiles > 0
427
+ ? Math.round((report.successfulConversions / report.totalStoryFiles) * 100)
428
+ : 100;
429
+
430
+ return `
431
+ <section class="section">
432
+ <h2 class="section-title">Migration Progress</h2>
433
+ <div class="progress-bar">
434
+ <div class="progress-fill" style="width: ${successRate}%">
435
+ <span class="progress-text">${successRate}% Complete</span>
436
+ </div>
437
+ </div>
438
+ </section>
439
+ `;
440
+ }
441
+
442
+ function renderCategoriesSection(report: MigrationReport): string {
443
+ if (report.categories.length === 0) {
444
+ return "";
445
+ }
446
+
447
+ // Count components per category
448
+ const categoryCounts: Record<string, number> = {};
449
+ for (const result of report.results) {
450
+ if (result.success) {
451
+ categoryCounts[result.category] = (categoryCounts[result.category] ?? 0) + 1;
452
+ }
453
+ }
454
+
455
+ return `
456
+ <section class="section">
457
+ <h2 class="section-title">Categories Discovered</h2>
458
+ <div class="categories-grid">
459
+ ${report.categories
460
+ .map(
461
+ (cat) => `
462
+ <div class="category-tag">
463
+ ${cat}<span class="category-count">${categoryCounts[cat] ?? 0}</span>
464
+ </div>
465
+ `
466
+ )
467
+ .join("")}
468
+ </div>
469
+ </section>
470
+ `;
471
+ }
472
+
473
+ function renderTodosSection(report: MigrationReport): string {
474
+ // Collect unique TODOs per component
475
+ const componentTodos: Array<{ component: string; todos: string[] }> = [];
476
+
477
+ for (const result of report.results) {
478
+ if (result.success && result.todos.length > 0) {
479
+ componentTodos.push({
480
+ component: result.componentName,
481
+ todos: result.todos,
482
+ });
483
+ }
484
+ }
485
+
486
+ if (componentTodos.length === 0) {
487
+ return "";
488
+ }
489
+
490
+ // Show first 10 components
491
+ const displayed = componentTodos.slice(0, 10);
492
+ const remaining = componentTodos.length - displayed.length;
493
+
494
+ return `
495
+ <section class="section">
496
+ <h2 class="section-title">Action Items (${report.totalTodos} total)</h2>
497
+ <div class="todos-list">
498
+ ${displayed
499
+ .map(
500
+ ({ component, todos }) => `
501
+ ${todos
502
+ .slice(0, 2)
503
+ .map(
504
+ (todo) => `
505
+ <div class="todo-item">
506
+ <div class="todo-checkbox"></div>
507
+ <div class="todo-content">
508
+ <span class="todo-component">${component}</span>
509
+ <p class="todo-text">${todo}</p>
510
+ </div>
511
+ </div>
512
+ `
513
+ )
514
+ .join("")}
515
+ `
516
+ )
517
+ .join("")}
518
+ ${remaining > 0 ? `<div class="todo-item"><div class="todo-text">... and ${remaining} more components with TODOs</div></div>` : ""}
519
+ </div>
520
+ </section>
521
+ `;
522
+ }
523
+
524
+ function renderConversionsTable(results: ConversionResult[]): string {
525
+ return `
526
+ <section class="section">
527
+ <h2 class="section-title">Converted Components</h2>
528
+ <div class="table-container">
529
+ <table>
530
+ <thead>
531
+ <tr>
532
+ <th>Component</th>
533
+ <th>Category</th>
534
+ <th>Variants</th>
535
+ <th>TODOs</th>
536
+ <th>Status</th>
537
+ </tr>
538
+ </thead>
539
+ <tbody>
540
+ ${results
541
+ .map(
542
+ (r) => `
543
+ <tr>
544
+ <td><strong>${r.componentName}</strong></td>
545
+ <td>${r.category}</td>
546
+ <td>${r.variantCount}</td>
547
+ <td>${r.todos.length}</td>
548
+ <td>
549
+ ${
550
+ r.success
551
+ ? r.todos.length > 0
552
+ ? '<span class="status-badge status-warning">⚠ Needs Review</span>'
553
+ : '<span class="status-badge status-success">✓ Complete</span>'
554
+ : '<span class="status-badge status-error">✗ Failed</span>'
555
+ }
556
+ </td>
557
+ </tr>
558
+ `
559
+ )
560
+ .join("")}
561
+ </tbody>
562
+ </table>
563
+ </div>
564
+ </section>
565
+ `;
566
+ }
567
+
568
+ function renderAnalyticsSection(report: MigrationReport): string {
569
+ if (!report.analytics) {
570
+ return `
571
+ <section class="section">
572
+ <h2 class="section-title">Design System Analytics</h2>
573
+ <div class="analytics-card">
574
+ <p style="color: var(--text-secondary)">
575
+ Run <code>segments build && segments analyze</code> after migration to see design system analytics.
576
+ </p>
577
+ </div>
578
+ </section>
579
+ `;
580
+ }
581
+
582
+ const { overallScore, coveragePercentage, recommendations } = report.analytics;
583
+ const scoreColor = overallScore >= 80 ? "var(--success)" : overallScore >= 60 ? "var(--warning)" : "var(--danger)";
584
+
585
+ return `
586
+ <section class="section">
587
+ <h2 class="section-title">Design System Analytics</h2>
588
+ <div class="analytics-card">
589
+ <div class="analytics-score">
590
+ <div class="score-circle" style="border-color: ${scoreColor}">
591
+ <div class="score-value" style="color: ${scoreColor}">${overallScore}</div>
592
+ <div class="score-label">Score</div>
593
+ </div>
594
+ <div>
595
+ <p style="font-size: 18px; font-weight: 600; margin-bottom: 4px">Documentation Quality</p>
596
+ <p style="color: var(--text-secondary)">
597
+ ${coveragePercentage}% documentation coverage after migration.
598
+ ${overallScore >= 80 ? "Great start!" : "Complete the TODOs above to improve."}
599
+ </p>
600
+ </div>
601
+ </div>
602
+ ${
603
+ recommendations.length > 0
604
+ ? `
605
+ <div class="recommendations-list">
606
+ <p style="font-weight: 600; margin-bottom: 8px">Recommendations:</p>
607
+ ${recommendations.map((r) => `<div class="recommendation">• ${r}</div>`).join("")}
608
+ </div>
609
+ `
610
+ : ""
611
+ }
612
+ </div>
613
+ </section>
614
+ `;
615
+ }
616
+
617
+ function renderFooter(): string {
618
+ return `
619
+ <footer class="footer">
620
+ <p>Generated by <a href="#">${BRAND.name}</a> Migration Tool</p>
621
+ <p style="margin-top: 8px">Run <code>segments dev</code> to view your new design system documentation</p>
622
+ </footer>
623
+ `;
624
+ }