@fragments-sdk/cli 0.10.1 → 0.12.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 (223) hide show
  1. package/dist/ai-client-I6MDWNYA.js +21 -0
  2. package/dist/bin.js +292 -367
  3. package/dist/bin.js.map +1 -1
  4. package/dist/{chunk-PW7QTQA6.js → chunk-4OC7FTJB.js} +2 -2
  5. package/dist/{chunk-HRFUSSZI.js → chunk-AM4MRTMN.js} +2 -2
  6. package/dist/{chunk-5G3VZH43.js → chunk-GVDSFQ4E.js} +281 -351
  7. package/dist/chunk-GVDSFQ4E.js.map +1 -0
  8. package/dist/chunk-JJ2VRTBU.js +626 -0
  9. package/dist/chunk-JJ2VRTBU.js.map +1 -0
  10. package/dist/{chunk-D5PYOXEI.js → chunk-LVWFOLUZ.js} +148 -13
  11. package/dist/{chunk-D5PYOXEI.js.map → chunk-LVWFOLUZ.js.map} +1 -1
  12. package/dist/{chunk-WXSR2II7.js → chunk-OQKMEFOS.js} +58 -6
  13. package/dist/chunk-OQKMEFOS.js.map +1 -0
  14. package/dist/chunk-SXTKFDCR.js +104 -0
  15. package/dist/chunk-SXTKFDCR.js.map +1 -0
  16. package/dist/chunk-T5OMVL7E.js +443 -0
  17. package/dist/chunk-T5OMVL7E.js.map +1 -0
  18. package/dist/{chunk-ZM4ZQZWZ.js → chunk-TPWGL2XS.js} +39 -37
  19. package/dist/chunk-TPWGL2XS.js.map +1 -0
  20. package/dist/{chunk-OQO55NKV.js → chunk-WFS63PCW.js} +85 -11
  21. package/dist/chunk-WFS63PCW.js.map +1 -0
  22. package/dist/core/index.js +9 -1
  23. package/dist/{discovery-NEOY4MPN.js → discovery-ZJQSXF56.js} +3 -3
  24. package/dist/{generate-FBHSXR3D.js → generate-RJFS2JWA.js} +4 -4
  25. package/dist/index.js +7 -6
  26. package/dist/index.js.map +1 -1
  27. package/dist/init-ZSX3NRCZ.js +636 -0
  28. package/dist/init-ZSX3NRCZ.js.map +1 -0
  29. package/dist/mcp-bin.js +2 -2
  30. package/dist/{scan-CJF2DOQW.js → scan-3PMCJ4RB.js} +6 -6
  31. package/dist/scan-generate-SYU4PYZD.js +1115 -0
  32. package/dist/scan-generate-SYU4PYZD.js.map +1 -0
  33. package/dist/{service-TQYWY65E.js → service-VMGNJZ42.js} +3 -3
  34. package/dist/snapshot-XOISO2IS.js +139 -0
  35. package/dist/snapshot-XOISO2IS.js.map +1 -0
  36. package/dist/{static-viewer-NUBFPKWH.js → static-viewer-5GXH2MGE.js} +3 -3
  37. package/dist/static-viewer-5GXH2MGE.js.map +1 -0
  38. package/dist/{test-Z5LVO724.js → test-SI4NSHQX.js} +4 -4
  39. package/dist/{tokens-CE46OTMD.js → tokens-T6SIVUT5.js} +5 -5
  40. package/dist/{viewer-DNMNC5VS.js → viewer-7ZEAFBVN.js} +80 -58
  41. package/dist/viewer-7ZEAFBVN.js.map +1 -0
  42. package/package.json +6 -14
  43. package/src/ai-client.ts +156 -0
  44. package/src/bin.ts +74 -2
  45. package/src/build.ts +95 -33
  46. package/src/commands/__tests__/drift-sync.test.ts +252 -0
  47. package/src/commands/__tests__/scan-generate.test.ts +497 -45
  48. package/src/commands/enhance.ts +11 -35
  49. package/src/commands/init.ts +296 -193
  50. package/src/commands/scan-generate.ts +740 -139
  51. package/src/commands/scan.ts +37 -32
  52. package/src/commands/setup.ts +143 -52
  53. package/src/commands/snapshot.ts +197 -0
  54. package/src/commands/sync.ts +357 -0
  55. package/src/commands/validate.ts +43 -1
  56. package/src/core/component-extractor.test.ts +282 -0
  57. package/src/core/component-extractor.ts +1030 -0
  58. package/src/core/discovery.ts +93 -7
  59. package/src/service/enhance/props-extractor.ts +235 -13
  60. package/src/validators.ts +236 -0
  61. package/src/viewer/__tests__/viewer-integration.test.ts +85 -74
  62. package/src/viewer/server.ts +37 -22
  63. package/src/viewer/vite-plugin.ts +25 -9
  64. package/dist/chunk-5G3VZH43.js.map +0 -1
  65. package/dist/chunk-OQO55NKV.js.map +0 -1
  66. package/dist/chunk-WXSR2II7.js.map +0 -1
  67. package/dist/chunk-ZM4ZQZWZ.js.map +0 -1
  68. package/dist/init-NDQXUWDU.js +0 -796
  69. package/dist/init-NDQXUWDU.js.map +0 -1
  70. package/dist/scan-generate-SJAN5MVI.js +0 -691
  71. package/dist/scan-generate-SJAN5MVI.js.map +0 -1
  72. package/dist/viewer-DNMNC5VS.js.map +0 -1
  73. package/src/ai.ts +0 -266
  74. package/src/commands/init-framework.ts +0 -414
  75. package/src/mcp/bin.ts +0 -36
  76. package/src/migrate/bin.ts +0 -114
  77. package/src/theme/index.ts +0 -77
  78. package/src/viewer/__tests__/a11y-fixes.test.ts +0 -358
  79. package/src/viewer/__tests__/jsx-parser.test.ts +0 -502
  80. package/src/viewer/__tests__/render-utils.test.ts +0 -232
  81. package/src/viewer/__tests__/style-utils.test.ts +0 -404
  82. package/src/viewer/assets/fragments-logo.ts +0 -4
  83. package/src/viewer/assets/fragments_logo.png +0 -0
  84. package/src/viewer/bin.ts +0 -86
  85. package/src/viewer/cli/health.ts +0 -256
  86. package/src/viewer/cli/index.ts +0 -33
  87. package/src/viewer/cli/scan.ts +0 -124
  88. package/src/viewer/cli/utils.ts +0 -174
  89. package/src/viewer/components/AccessibilityPanel.tsx +0 -1457
  90. package/src/viewer/components/ActionCapture.tsx +0 -172
  91. package/src/viewer/components/ActionsPanel.tsx +0 -332
  92. package/src/viewer/components/AllVariantsPreview.tsx +0 -78
  93. package/src/viewer/components/App.tsx +0 -582
  94. package/src/viewer/components/BottomPanel.tsx +0 -288
  95. package/src/viewer/components/CodePanel.naming.test.tsx +0 -59
  96. package/src/viewer/components/CodePanel.tsx +0 -118
  97. package/src/viewer/components/CommandPalette.tsx +0 -392
  98. package/src/viewer/components/ComponentDocView.tsx +0 -164
  99. package/src/viewer/components/ComponentGraph.tsx +0 -380
  100. package/src/viewer/components/ComponentHeader.tsx +0 -88
  101. package/src/viewer/components/ContractPanel.tsx +0 -241
  102. package/src/viewer/components/EmptyVariantMessage.tsx +0 -54
  103. package/src/viewer/components/ErrorBoundary.tsx +0 -97
  104. package/src/viewer/components/FigmaEmbed.tsx +0 -238
  105. package/src/viewer/components/FragmentEditor.tsx +0 -525
  106. package/src/viewer/components/FragmentRenderer.tsx +0 -61
  107. package/src/viewer/components/HeaderSearch.tsx +0 -24
  108. package/src/viewer/components/HealthDashboard.tsx +0 -441
  109. package/src/viewer/components/HmrStatusIndicator.tsx +0 -61
  110. package/src/viewer/components/Icons.tsx +0 -479
  111. package/src/viewer/components/InteractionsPanel.tsx +0 -757
  112. package/src/viewer/components/IsolatedPreviewFrame.tsx +0 -346
  113. package/src/viewer/components/IsolatedRender.tsx +0 -113
  114. package/src/viewer/components/KeyboardShortcutsHelp.tsx +0 -53
  115. package/src/viewer/components/LandingPage.tsx +0 -421
  116. package/src/viewer/components/Layout.tsx +0 -27
  117. package/src/viewer/components/LeftSidebar.tsx +0 -472
  118. package/src/viewer/components/LoadErrorMessage.tsx +0 -102
  119. package/src/viewer/components/MultiViewportPreview.tsx +0 -522
  120. package/src/viewer/components/NoVariantsMessage.tsx +0 -59
  121. package/src/viewer/components/PanelShell.tsx +0 -161
  122. package/src/viewer/components/PerformancePanel.tsx +0 -304
  123. package/src/viewer/components/PreviewArea.tsx +0 -472
  124. package/src/viewer/components/PreviewAside.tsx +0 -168
  125. package/src/viewer/components/PreviewFrameHost.tsx +0 -303
  126. package/src/viewer/components/PreviewPane.tsx +0 -149
  127. package/src/viewer/components/PreviewToolbar.tsx +0 -80
  128. package/src/viewer/components/PropsEditor.tsx +0 -506
  129. package/src/viewer/components/PropsTable.tsx +0 -111
  130. package/src/viewer/components/RelationsSection.tsx +0 -88
  131. package/src/viewer/components/ResizablePanel.tsx +0 -271
  132. package/src/viewer/components/RightSidebar.tsx +0 -102
  133. package/src/viewer/components/RuntimeToolsRegistrar.tsx +0 -17
  134. package/src/viewer/components/ScreenshotButton.tsx +0 -90
  135. package/src/viewer/components/Sidebar.tsx +0 -169
  136. package/src/viewer/components/SkeletonLoader.tsx +0 -161
  137. package/src/viewer/components/ThemeProvider.tsx +0 -42
  138. package/src/viewer/components/Toast.tsx +0 -3
  139. package/src/viewer/components/TokenStylePanel.tsx +0 -699
  140. package/src/viewer/components/TopToolbar.tsx +0 -159
  141. package/src/viewer/components/UsageSection.tsx +0 -95
  142. package/src/viewer/components/VariantMatrix.tsx +0 -388
  143. package/src/viewer/components/VariantRenderer.tsx +0 -131
  144. package/src/viewer/components/VariantTabs.tsx +0 -40
  145. package/src/viewer/components/ViewerHeader.tsx +0 -69
  146. package/src/viewer/components/ViewerStateSync.tsx +0 -52
  147. package/src/viewer/components/ViewportSelector.tsx +0 -172
  148. package/src/viewer/components/WebMCPDevTools.tsx +0 -503
  149. package/src/viewer/components/WebMCPIntegration.tsx +0 -47
  150. package/src/viewer/components/WebMCPStatusIndicator.tsx +0 -60
  151. package/src/viewer/components/_future/CreatePage.tsx +0 -836
  152. package/src/viewer/components/viewer-utils.ts +0 -16
  153. package/src/viewer/composition-renderer.ts +0 -381
  154. package/src/viewer/constants/index.ts +0 -1
  155. package/src/viewer/constants/ui.ts +0 -166
  156. package/src/viewer/entry.tsx +0 -335
  157. package/src/viewer/hooks/index.ts +0 -2
  158. package/src/viewer/hooks/useA11yCache.ts +0 -383
  159. package/src/viewer/hooks/useA11yService.ts +0 -364
  160. package/src/viewer/hooks/useActions.ts +0 -138
  161. package/src/viewer/hooks/useAppState.ts +0 -147
  162. package/src/viewer/hooks/useCompiledFragments.ts +0 -42
  163. package/src/viewer/hooks/useFigmaIntegration.ts +0 -132
  164. package/src/viewer/hooks/useHmrStatus.ts +0 -109
  165. package/src/viewer/hooks/useKeyboardShortcuts.ts +0 -270
  166. package/src/viewer/hooks/usePreviewBridge.ts +0 -347
  167. package/src/viewer/hooks/useScrollSpy.ts +0 -78
  168. package/src/viewer/hooks/useUrlState.ts +0 -318
  169. package/src/viewer/hooks/useViewSettings.ts +0 -111
  170. package/src/viewer/index.html +0 -28
  171. package/src/viewer/intelligence/healthReport.ts +0 -505
  172. package/src/viewer/intelligence/styleDrift.ts +0 -340
  173. package/src/viewer/intelligence/usageScanner.ts +0 -309
  174. package/src/viewer/jsx-parser.ts +0 -486
  175. package/src/viewer/preview-frame-entry.tsx +0 -25
  176. package/src/viewer/preview-frame.html +0 -125
  177. package/src/viewer/public/favicon.ico +0 -0
  178. package/src/viewer/render-template.html +0 -68
  179. package/src/viewer/styles/globals.css +0 -278
  180. package/src/viewer/types/a11y.ts +0 -197
  181. package/src/viewer/utils/a11y-fixes.ts +0 -509
  182. package/src/viewer/utils/actionExport.ts +0 -372
  183. package/src/viewer/utils/colorSchemes.ts +0 -201
  184. package/src/viewer/utils/detectRelationships.ts +0 -256
  185. package/src/viewer/vendor/shared/src/ComponentDocContent.module.scss +0 -10
  186. package/src/viewer/vendor/shared/src/ComponentDocContent.module.scss.d.ts +0 -2
  187. package/src/viewer/vendor/shared/src/ComponentDocContent.tsx +0 -274
  188. package/src/viewer/vendor/shared/src/DocsHeaderBar.tsx +0 -129
  189. package/src/viewer/vendor/shared/src/DocsPageAsideHost.tsx +0 -89
  190. package/src/viewer/vendor/shared/src/DocsPageShell.tsx +0 -124
  191. package/src/viewer/vendor/shared/src/DocsSearchCommand.tsx +0 -99
  192. package/src/viewer/vendor/shared/src/DocsSidebarNav.tsx +0 -66
  193. package/src/viewer/vendor/shared/src/PropsTable.module.scss +0 -68
  194. package/src/viewer/vendor/shared/src/PropsTable.module.scss.d.ts +0 -2
  195. package/src/viewer/vendor/shared/src/PropsTable.tsx +0 -76
  196. package/src/viewer/vendor/shared/src/VariantPreviewCard.module.scss +0 -114
  197. package/src/viewer/vendor/shared/src/VariantPreviewCard.module.scss.d.ts +0 -2
  198. package/src/viewer/vendor/shared/src/VariantPreviewCard.tsx +0 -137
  199. package/src/viewer/vendor/shared/src/docs-data/index.ts +0 -32
  200. package/src/viewer/vendor/shared/src/docs-data/mcp-configs.ts +0 -72
  201. package/src/viewer/vendor/shared/src/docs-data/palettes.ts +0 -75
  202. package/src/viewer/vendor/shared/src/docs-data/setup-examples.ts +0 -55
  203. package/src/viewer/vendor/shared/src/docs-layout.scss +0 -28
  204. package/src/viewer/vendor/shared/src/docs-layout.scss.d.ts +0 -2
  205. package/src/viewer/vendor/shared/src/index.ts +0 -34
  206. package/src/viewer/vendor/shared/src/types.ts +0 -53
  207. package/src/viewer/webmcp/__tests__/analytics.test.ts +0 -108
  208. package/src/viewer/webmcp/analytics.ts +0 -165
  209. package/src/viewer/webmcp/index.ts +0 -3
  210. package/src/viewer/webmcp/posthog-bridge.ts +0 -39
  211. package/src/viewer/webmcp/runtime-tools.ts +0 -152
  212. package/src/viewer/webmcp/scan-utils.ts +0 -135
  213. package/src/viewer/webmcp/use-tool-analytics.ts +0 -69
  214. package/src/viewer/webmcp/viewer-state.ts +0 -45
  215. /package/dist/{discovery-NEOY4MPN.js.map → ai-client-I6MDWNYA.js.map} +0 -0
  216. /package/dist/{chunk-PW7QTQA6.js.map → chunk-4OC7FTJB.js.map} +0 -0
  217. /package/dist/{chunk-HRFUSSZI.js.map → chunk-AM4MRTMN.js.map} +0 -0
  218. /package/dist/{scan-CJF2DOQW.js.map → discovery-ZJQSXF56.js.map} +0 -0
  219. /package/dist/{generate-FBHSXR3D.js.map → generate-RJFS2JWA.js.map} +0 -0
  220. /package/dist/{service-TQYWY65E.js.map → scan-3PMCJ4RB.js.map} +0 -0
  221. /package/dist/{static-viewer-NUBFPKWH.js.map → service-VMGNJZ42.js.map} +0 -0
  222. /package/dist/{test-Z5LVO724.js.map → test-SI4NSHQX.js.map} +0 -0
  223. /package/dist/{tokens-CE46OTMD.js.map → tokens-T6SIVUT5.js.map} +0 -0
@@ -1,796 +0,0 @@
1
- import { createRequire as __banner_createRequire } from 'module'; const require = __banner_createRequire(import.meta.url);
2
- import "./chunk-D2CDBRNU.js";
3
- import {
4
- BRAND
5
- } from "./chunk-OQO55NKV.js";
6
- import "./chunk-Z7EY4VHE.js";
7
-
8
- // src/commands/init.ts
9
- import { writeFile as writeFile2, mkdir, access as access2 } from "fs/promises";
10
- import { resolve, join as join2, relative } from "path";
11
- import { spawn } from "child_process";
12
- import pc2 from "picocolors";
13
- import fg from "fast-glob";
14
- import { input, confirm } from "@inquirer/prompts";
15
-
16
- // src/commands/init-framework.ts
17
- import { readFile, writeFile, access } from "fs/promises";
18
- import { join } from "path";
19
- import pc from "picocolors";
20
- async function detectFramework(projectRoot) {
21
- try {
22
- const pkgPath = join(projectRoot, "package.json");
23
- const pkgContent = await readFile(pkgPath, "utf-8");
24
- const pkg = JSON.parse(pkgContent);
25
- const allDeps = {
26
- ...pkg.dependencies,
27
- ...pkg.devDependencies
28
- };
29
- if (allDeps["next"]) {
30
- return { framework: "nextjs", detectedBy: "next" };
31
- }
32
- if (allDeps["@remix-run/react"]) {
33
- return { framework: "remix", detectedBy: "@remix-run/react" };
34
- }
35
- if (allDeps["astro"]) {
36
- return { framework: "astro", detectedBy: "astro" };
37
- }
38
- if (allDeps["vite"]) {
39
- return { framework: "vite", detectedBy: "vite" };
40
- }
41
- return { framework: "unknown", detectedBy: null };
42
- } catch {
43
- return { framework: "unknown", detectedBy: null };
44
- }
45
- }
46
- function generateGlobalsSCSS(seeds) {
47
- const withClauses = [];
48
- if (seeds?.brand) {
49
- withClauses.push(` $fui-brand: ${seeds.brand}`);
50
- }
51
- if (seeds?.neutral) {
52
- withClauses.push(` $fui-neutral: "${seeds.neutral}"`);
53
- }
54
- if (seeds?.density) {
55
- withClauses.push(` $fui-density: "${seeds.density}"`);
56
- }
57
- if (seeds?.radiusStyle) {
58
- withClauses.push(` $fui-radius-style: "${seeds.radiusStyle}"`);
59
- }
60
- const useStatement = withClauses.length > 0 ? `@use '@fragments-sdk/ui/styles' with (
61
- ${withClauses.join(",\n")}
62
- );` : `@use '@fragments-sdk/ui/styles';`;
63
- return `// Fragments SDK Global Styles
64
- // Customize seed values to theme the entire design system.
65
- // See: https://usefragments.com/docs/theming
66
- ${useStatement}
67
- `;
68
- }
69
- function generateProviders() {
70
- return `'use client';
71
-
72
- import { ThemeProvider } from '@fragments-sdk/ui';
73
-
74
- export function Providers({ children }: { children: React.ReactNode }) {
75
- return (
76
- <ThemeProvider defaultMode="system" attribute="data-theme">
77
- {children}
78
- </ThemeProvider>
79
- );
80
- }
81
- `;
82
- }
83
- async function setupNextJS(projectRoot, options) {
84
- const result = {
85
- framework: "nextjs",
86
- filesCreated: [],
87
- packagesToInstall: [],
88
- configModified: [],
89
- warnings: []
90
- };
91
- try {
92
- const pkgContent = await readFile(
93
- join(projectRoot, "package.json"),
94
- "utf-8"
95
- );
96
- const pkg = JSON.parse(pkgContent);
97
- const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
98
- if (!allDeps["sass"]) {
99
- result.packagesToInstall.push("sass");
100
- }
101
- } catch {
102
- }
103
- const nextConfigPaths = [
104
- "next.config.ts",
105
- "next.config.mjs",
106
- "next.config.js"
107
- ];
108
- for (const configName of nextConfigPaths) {
109
- const configPath = join(projectRoot, configName);
110
- try {
111
- await access(configPath);
112
- const content = await readFile(configPath, "utf-8");
113
- if (!content.includes("transpilePackages")) {
114
- if (content.includes("const nextConfig")) {
115
- const updated = content.replace(
116
- /const nextConfig\s*=\s*\{/,
117
- `const nextConfig = {
118
- transpilePackages: ['@fragments-sdk/ui'],`
119
- );
120
- await writeFile(configPath, updated, "utf-8");
121
- result.configModified.push(configName);
122
- } else {
123
- result.warnings.push(
124
- `Could not auto-modify ${configName}. Add transpilePackages: ['@fragments-sdk/ui'] manually.`
125
- );
126
- }
127
- }
128
- break;
129
- } catch {
130
- continue;
131
- }
132
- }
133
- const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
134
- try {
135
- await access(globalsPath);
136
- result.warnings.push(
137
- "src/styles/globals.scss already exists. Skipped generation."
138
- );
139
- } catch {
140
- await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
141
- result.filesCreated.push("src/styles/globals.scss");
142
- }
143
- const providersPath = join(projectRoot, "src", "providers.tsx");
144
- try {
145
- await access(providersPath);
146
- result.warnings.push("src/providers.tsx already exists. Skipped.");
147
- } catch {
148
- await writeFile(providersPath, generateProviders(), "utf-8");
149
- result.filesCreated.push("src/providers.tsx");
150
- }
151
- return result;
152
- }
153
- async function setupVite(projectRoot, options) {
154
- const result = {
155
- framework: "vite",
156
- filesCreated: [],
157
- packagesToInstall: [],
158
- configModified: [],
159
- warnings: []
160
- };
161
- try {
162
- const pkgContent = await readFile(
163
- join(projectRoot, "package.json"),
164
- "utf-8"
165
- );
166
- const pkg = JSON.parse(pkgContent);
167
- const allDeps = { ...pkg.dependencies, ...pkg.devDependencies };
168
- if (!allDeps["sass"]) {
169
- result.packagesToInstall.push("sass");
170
- }
171
- } catch {
172
- }
173
- const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
174
- try {
175
- await access(globalsPath);
176
- result.warnings.push(
177
- "src/styles/globals.scss already exists. Skipped generation."
178
- );
179
- } catch {
180
- await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
181
- result.filesCreated.push("src/styles/globals.scss");
182
- }
183
- const providersPath = join(projectRoot, "src", "providers.tsx");
184
- try {
185
- await access(providersPath);
186
- result.warnings.push("src/providers.tsx already exists. Skipped.");
187
- } catch {
188
- await writeFile(providersPath, generateProviders(), "utf-8");
189
- result.filesCreated.push("src/providers.tsx");
190
- }
191
- return result;
192
- }
193
- async function setupRemix(projectRoot, options) {
194
- const result = {
195
- framework: "remix",
196
- filesCreated: [],
197
- packagesToInstall: [],
198
- configModified: [],
199
- warnings: []
200
- };
201
- result.packagesToInstall.push("sass");
202
- const globalsPath = join(projectRoot, "app", "styles", "globals.scss");
203
- try {
204
- await access(globalsPath);
205
- result.warnings.push(
206
- "app/styles/globals.scss already exists. Skipped generation."
207
- );
208
- } catch {
209
- await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
210
- result.filesCreated.push("app/styles/globals.scss");
211
- }
212
- const providersPath = join(projectRoot, "app", "providers.tsx");
213
- try {
214
- await access(providersPath);
215
- result.warnings.push("app/providers.tsx already exists. Skipped.");
216
- } catch {
217
- await writeFile(providersPath, generateProviders(), "utf-8");
218
- result.filesCreated.push("app/providers.tsx");
219
- }
220
- result.warnings.push(
221
- "Add @fragments-sdk/ui to serverDependenciesToBundle in remix.config if using source imports."
222
- );
223
- return result;
224
- }
225
- async function setupAstro(projectRoot, options) {
226
- const result = {
227
- framework: "astro",
228
- filesCreated: [],
229
- packagesToInstall: [],
230
- configModified: [],
231
- warnings: []
232
- };
233
- result.packagesToInstall.push("sass");
234
- const globalsPath = join(projectRoot, "src", "styles", "globals.scss");
235
- try {
236
- await access(globalsPath);
237
- result.warnings.push(
238
- "src/styles/globals.scss already exists. Skipped generation."
239
- );
240
- } catch {
241
- await writeFile(globalsPath, generateGlobalsSCSS(options.seeds), "utf-8");
242
- result.filesCreated.push("src/styles/globals.scss");
243
- }
244
- return result;
245
- }
246
- async function setupFramework(options) {
247
- const { projectRoot } = options;
248
- let framework = options.framework;
249
- if (!framework || framework === "unknown") {
250
- const detection = await detectFramework(projectRoot);
251
- framework = detection.framework;
252
- if (detection.detectedBy) {
253
- console.log(
254
- pc.green(` Detected ${frameworkLabel(framework)}`) + pc.dim(` (via ${detection.detectedBy})`)
255
- );
256
- }
257
- } else {
258
- console.log(pc.green(` Framework: ${frameworkLabel(framework)}`));
259
- }
260
- switch (framework) {
261
- case "nextjs":
262
- return setupNextJS(projectRoot, options);
263
- case "vite":
264
- return setupVite(projectRoot, options);
265
- case "remix":
266
- return setupRemix(projectRoot, options);
267
- case "astro":
268
- return setupAstro(projectRoot, options);
269
- default:
270
- return {
271
- framework: "unknown",
272
- filesCreated: [],
273
- packagesToInstall: ["sass"],
274
- configModified: [],
275
- warnings: [
276
- "Could not detect framework. Install sass and import @fragments-sdk/ui/styles manually."
277
- ]
278
- };
279
- }
280
- }
281
- function frameworkLabel(framework) {
282
- switch (framework) {
283
- case "nextjs":
284
- return "Next.js";
285
- case "vite":
286
- return "Vite";
287
- case "remix":
288
- return "Remix";
289
- case "astro":
290
- return "Astro";
291
- default:
292
- return "Unknown";
293
- }
294
- }
295
-
296
- // src/commands/init.ts
297
- async function detectProject(projectRoot) {
298
- console.log(pc2.dim("\nScanning project...\n"));
299
- const configPath = join2(projectRoot, BRAND.configFile);
300
- const legacyConfigPath = join2(projectRoot, BRAND.legacyConfigFile);
301
- let hasConfig = false;
302
- let foundConfigPath = null;
303
- try {
304
- await access2(configPath);
305
- hasConfig = true;
306
- foundConfigPath = configPath;
307
- } catch {
308
- try {
309
- await access2(legacyConfigPath);
310
- hasConfig = true;
311
- foundConfigPath = legacyConfigPath;
312
- } catch {
313
- }
314
- }
315
- const storyFiles = await fg(
316
- ["**/*.stories.tsx", "**/*.stories.ts", "**/*.stories.jsx", "**/*.stories.js"],
317
- {
318
- cwd: projectRoot,
319
- ignore: ["**/node_modules/**", "**/dist/**", "**/build/**", "**/.storybook/**"]
320
- }
321
- );
322
- const componentFiles = await fg(
323
- ["**/components/**/*.tsx", "**/Components/**/*.tsx", "src/**/*.tsx"],
324
- {
325
- cwd: projectRoot,
326
- ignore: [
327
- "**/node_modules/**",
328
- "**/dist/**",
329
- "**/build/**",
330
- "**/*.stories.*",
331
- "**/*.fragment.*",
332
- "**/*.test.*",
333
- "**/*.spec.*",
334
- "**/*.d.ts",
335
- "**/index.tsx"
336
- // Skip barrel files
337
- ]
338
- }
339
- );
340
- const nonComponentPatterns = /\.(styles|utils|helpers|constants|types|hooks|context|config|mock|fixture)\./i;
341
- const nonComponentNames = /^(index|types|utils|helpers|constants|hooks|providers|layout|use[A-Z])/;
342
- const likelyComponents = componentFiles.filter((f) => {
343
- const fileName = f.split("/").pop() || "";
344
- const baseName = fileName.replace(/\.tsx$/, "");
345
- return !nonComponentPatterns.test(fileName) && !nonComponentNames.test(baseName);
346
- });
347
- let suggestedComponentPath = "src/components";
348
- if (likelyComponents.length > 0) {
349
- const firstComponent = likelyComponents[0];
350
- const parts = firstComponent.split("/");
351
- const componentsIndex = parts.findIndex(
352
- (p) => p.toLowerCase() === "components"
353
- );
354
- if (componentsIndex !== -1) {
355
- suggestedComponentPath = parts.slice(0, componentsIndex + 1).join("/");
356
- }
357
- }
358
- return {
359
- storyFiles,
360
- componentFiles: likelyComponents,
361
- hasConfig,
362
- configPath: foundConfigPath,
363
- suggestedComponentPath
364
- };
365
- }
366
- function generateConfig(options) {
367
- const includeStr = options.includePaths.map((p) => ` '${p}'`).join(",\n");
368
- const componentStr = options.componentPaths.map((p) => ` '${p}'`).join(",\n");
369
- return `import type { FragmentsConfig } from '@fragments-sdk/cli';
370
-
371
- const config: FragmentsConfig = {
372
- // Glob patterns for finding fragment/story files
373
- include: [
374
- ${includeStr}
375
- ],
376
-
377
- // Glob patterns to exclude
378
- exclude: ['**/node_modules/**'],
379
-
380
- // Glob patterns for finding component files (for auto-documentation)
381
- components: [
382
- ${componentStr}
383
- ],
384
-
385
- // Framework (react, vue, svelte)
386
- framework: '${options.framework}',
387
- };
388
-
389
- export default config;
390
- `;
391
- }
392
- function generateExampleComponent() {
393
- return `import React from 'react';
394
-
395
- export interface ButtonProps {
396
- /** Button label */
397
- children: React.ReactNode;
398
- /** Visual style variant */
399
- variant?: 'primary' | 'secondary' | 'ghost';
400
- /** Button size */
401
- size?: 'sm' | 'md' | 'lg';
402
- /** Disabled state */
403
- disabled?: boolean;
404
- /** Click handler */
405
- onClick?: () => void;
406
- }
407
-
408
- export function Button({
409
- children,
410
- variant = 'primary',
411
- size = 'md',
412
- disabled = false,
413
- onClick,
414
- }: ButtonProps) {
415
- const baseStyles = 'inline-flex items-center justify-center font-medium rounded-md transition-colors';
416
-
417
- const variantStyles = {
418
- primary: 'bg-blue-600 text-white hover:bg-blue-700',
419
- secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
420
- ghost: 'bg-transparent text-gray-700 hover:bg-gray-100',
421
- };
422
-
423
- const sizeStyles = {
424
- sm: 'px-3 py-1.5 text-sm',
425
- md: 'px-4 py-2 text-base',
426
- lg: 'px-6 py-3 text-lg',
427
- };
428
-
429
- return (
430
- <button
431
- className={\`\${baseStyles} \${variantStyles[variant]} \${sizeStyles[size]}\`}
432
- disabled={disabled}
433
- onClick={onClick}
434
- >
435
- {children}
436
- </button>
437
- );
438
- }
439
- `;
440
- }
441
- function generateExampleFragment() {
442
- return `import React from 'react';
443
- import { defineFragment } from '@fragments-sdk/cli/core';
444
- import { Button } from './Button';
445
-
446
- export default defineFragment({
447
- component: Button,
448
-
449
- meta: {
450
- name: 'Button',
451
- description: 'Interactive button for triggering actions',
452
- category: 'Actions',
453
- status: 'stable',
454
- },
455
-
456
- usage: {
457
- when: [
458
- 'Triggering an action (save, submit, delete)',
459
- 'Form submission',
460
- 'Opening dialogs or menus',
461
- ],
462
- whenNot: [
463
- 'Simple navigation (use Link)',
464
- 'Toggling state (use Switch)',
465
- ],
466
- guidelines: [
467
- 'Use Primary for the main action in a context',
468
- 'Only one Primary button per section',
469
- ],
470
- },
471
-
472
- props: {
473
- children: {
474
- type: 'node',
475
- required: true,
476
- description: 'Button label content',
477
- },
478
- variant: {
479
- type: 'enum',
480
- values: ['primary', 'secondary', 'ghost'],
481
- default: 'primary',
482
- description: 'Visual style variant',
483
- },
484
- size: {
485
- type: 'enum',
486
- values: ['sm', 'md', 'lg'],
487
- default: 'md',
488
- description: 'Button size',
489
- },
490
- },
491
-
492
- variants: [
493
- {
494
- name: 'Primary',
495
- description: 'Default action button',
496
- code: \`import { Button } from './Button';
497
-
498
- <Button variant="primary">Save Changes</Button>\`,
499
- render: () => <Button variant="primary">Save Changes</Button>,
500
- },
501
- {
502
- name: 'Secondary',
503
- description: 'Less prominent action',
504
- code: \`import { Button } from './Button';
505
-
506
- <Button variant="secondary">Cancel</Button>\`,
507
- render: () => <Button variant="secondary">Cancel</Button>,
508
- },
509
- {
510
- name: 'Ghost',
511
- description: 'Minimal visual weight',
512
- code: \`import { Button } from './Button';
513
-
514
- <Button variant="ghost">Learn More</Button>\`,
515
- render: () => <Button variant="ghost">Learn More</Button>,
516
- },
517
- {
518
- name: 'Sizes',
519
- description: 'Available size options',
520
- code: \`import { Button } from './Button';
521
-
522
- <>
523
- <Button size="sm">Small</Button>
524
- <Button size="md">Medium</Button>
525
- <Button size="lg">Large</Button>
526
- </>\`,
527
- render: () => (
528
- <>
529
- <Button size="sm">Small</Button>
530
- <Button size="md">Medium</Button>
531
- <Button size="lg">Large</Button>
532
- </>
533
- ),
534
- },
535
- ],
536
- });
537
- `;
538
- }
539
- function startDevServer(projectRoot) {
540
- console.log(pc2.dim("\nStarting development server...\n"));
541
- const isWindows = process.platform === "win32";
542
- const cmd = isWindows ? "npx.cmd" : "npx";
543
- const child = spawn(cmd, [BRAND.cliCommand, "dev"], {
544
- cwd: projectRoot,
545
- stdio: "inherit"
546
- });
547
- child.on("error", (err) => {
548
- console.error(pc2.red("Failed to start dev server:"), err.message);
549
- });
550
- }
551
- async function init(options = {}) {
552
- const projectRoot = resolve(options.projectRoot || process.cwd());
553
- const errors = [];
554
- if (options.scan) {
555
- const scanPath = resolve(projectRoot, options.scan);
556
- try {
557
- await access2(scanPath);
558
- } catch {
559
- console.error(pc2.red(`
560
- Scan path not found: ${scanPath}
561
- `));
562
- return {
563
- success: false,
564
- scenario: "scan",
565
- storiesFound: 0,
566
- componentsFound: 0,
567
- errors: [`Scan path not found: ${scanPath}`]
568
- };
569
- }
570
- const { scanGenerate } = await import("./scan-generate-SJAN5MVI.js");
571
- const scanResult = await scanGenerate({
572
- scanPath,
573
- force: options.force,
574
- verbose: true
575
- });
576
- const relScanPath = relative(projectRoot, scanPath);
577
- const configPath2 = join2(projectRoot, BRAND.configFile);
578
- const configContent2 = generateConfig({
579
- includePaths: [`${relScanPath}/**/*.fragment.tsx`],
580
- componentPaths: [`${relScanPath}/**/*.tsx`],
581
- framework: "react"
582
- });
583
- try {
584
- await writeFile2(configPath2, configContent2, "utf-8");
585
- console.log(pc2.green(`\u2713 Created ${BRAND.configFile}`));
586
- } catch (e) {
587
- errors.push(`Failed to create config: ${e}`);
588
- }
589
- if (scanResult.success) {
590
- console.log(pc2.cyan("Next steps:"));
591
- console.log(` 1. Search generated files for ${pc2.bold("TODO:")} markers and fill in human knowledge`);
592
- console.log(` 2. Run ${pc2.bold(`${BRAND.cliCommand} dev`)} to preview your components`);
593
- console.log(` 3. Run ${pc2.bold(`${BRAND.cliCommand} build`)} to compile fragments.json`);
594
- console.log();
595
- }
596
- return {
597
- success: scanResult.success && errors.length === 0,
598
- configPath: errors.length === 0 ? configPath2 : void 0,
599
- scenario: "scan",
600
- storiesFound: 0,
601
- componentsFound: scanResult.generated.length,
602
- errors: [
603
- ...errors,
604
- ...scanResult.errors.map((e) => `${e.name}: ${e.error}`)
605
- ]
606
- };
607
- }
608
- console.log(pc2.cyan(`
609
- \u2728 Welcome to ${BRAND.name}!
610
- `));
611
- const detection = await detectProject(projectRoot);
612
- if (detection.hasConfig && !options.force) {
613
- console.log(pc2.yellow(`\u26A0 Config already exists: ${BRAND.configFile}`));
614
- if (!options.yes) {
615
- const overwrite = await confirm({
616
- message: "Do you want to reinitialize? (This will overwrite your config)",
617
- default: false
618
- });
619
- if (!overwrite) {
620
- console.log(pc2.dim(`
621
- Keeping existing configuration. Run \`${BRAND.cliCommand} dev\` to start.
622
- `));
623
- return {
624
- success: true,
625
- scenario: "stories",
626
- storiesFound: detection.storyFiles.length,
627
- componentsFound: detection.componentFiles.length,
628
- errors: []
629
- };
630
- }
631
- }
632
- }
633
- let scenario;
634
- if (detection.storyFiles.length > 0) {
635
- scenario = "stories";
636
- console.log(pc2.green(`\u2713 Found ${detection.storyFiles.length} Storybook story file(s)`));
637
- console.log(pc2.dim(` ${detection.storyFiles.slice(0, 3).join("\n ")}`));
638
- if (detection.storyFiles.length > 3) {
639
- console.log(pc2.dim(` ... and ${detection.storyFiles.length - 3} more`));
640
- }
641
- console.log();
642
- console.log(
643
- pc2.cyan("Great news! ") + "Fragments can load your existing stories automatically."
644
- );
645
- } else if (detection.componentFiles.length > 0) {
646
- scenario = "components";
647
- console.log(pc2.green(`\u2713 Found ${detection.componentFiles.length} component file(s)`));
648
- console.log(pc2.dim(` ${detection.componentFiles.slice(0, 3).join("\n ")}`));
649
- if (detection.componentFiles.length > 3) {
650
- console.log(pc2.dim(` ... and ${detection.componentFiles.length - 3} more`));
651
- }
652
- console.log();
653
- console.log(
654
- pc2.cyan("No stories found, but that's fine! ") + "Fragments can auto-generate documentation from your TypeScript."
655
- );
656
- } else {
657
- scenario = "fresh";
658
- console.log(pc2.yellow("No components or stories found."));
659
- console.log();
660
- console.log(pc2.cyan("Let's create your first fragment!"));
661
- }
662
- console.log();
663
- let componentPath = detection.suggestedComponentPath;
664
- let runScan = scenario === "components" || scenario === "stories";
665
- let createExample = scenario === "fresh";
666
- let startServer = false;
667
- if (!options.yes) {
668
- componentPath = await input({
669
- message: "Where are your components located?",
670
- default: detection.suggestedComponentPath
671
- });
672
- if (scenario === "fresh") {
673
- createExample = await confirm({
674
- message: "Create an example Button component to get started?",
675
- default: true
676
- });
677
- }
678
- startServer = await confirm({
679
- message: "Start the viewer now?",
680
- default: true
681
- });
682
- }
683
- console.log(pc2.dim("\nCreating configuration...\n"));
684
- const includePaths = [
685
- `${componentPath}/**/*.fragment.tsx`
686
- ];
687
- if (scenario === "stories") {
688
- includePaths.push(`${componentPath}/**/*.stories.tsx`);
689
- includePaths.push(`${componentPath}/**/*.stories.ts`);
690
- }
691
- const configPath = join2(projectRoot, BRAND.configFile);
692
- const configContent = generateConfig({
693
- includePaths,
694
- componentPaths: [`${componentPath}/**/*.tsx`],
695
- framework: "react"
696
- });
697
- try {
698
- await writeFile2(configPath, configContent, "utf-8");
699
- console.log(pc2.green(`\u2713 Created ${BRAND.configFile}`));
700
- } catch (e) {
701
- errors.push(`Failed to create config: ${e}`);
702
- }
703
- if (scenario === "fresh" && createExample) {
704
- const exampleDir = join2(projectRoot, componentPath, "Button");
705
- try {
706
- await mkdir(exampleDir, { recursive: true });
707
- await writeFile2(
708
- join2(exampleDir, "Button.tsx"),
709
- generateExampleComponent(),
710
- "utf-8"
711
- );
712
- console.log(
713
- pc2.green(`\u2713 Created ${relative(projectRoot, join2(exampleDir, "Button.tsx"))}`)
714
- );
715
- await writeFile2(
716
- join2(exampleDir, "Button.fragment.tsx"),
717
- generateExampleFragment(),
718
- "utf-8"
719
- );
720
- console.log(
721
- pc2.green(
722
- `\u2713 Created ${relative(projectRoot, join2(exampleDir, "Button.fragment.tsx"))}`
723
- )
724
- );
725
- } catch (e) {
726
- errors.push(`Failed to create example component: ${e}`);
727
- }
728
- }
729
- if (runScan) {
730
- console.log(pc2.dim("\nScanning source code for documentation...\n"));
731
- try {
732
- const { scan } = await import("./scan-CJF2DOQW.js");
733
- await scan({
734
- config: configPath,
735
- verbose: false
736
- });
737
- } catch (e) {
738
- console.log(
739
- pc2.yellow(`Note: Auto-documentation will run when you start the dev server.`)
740
- );
741
- }
742
- }
743
- console.log(pc2.dim("\nConfiguring framework integration...\n"));
744
- const frameworkOverride = options.framework;
745
- const frameworkResult = await setupFramework({
746
- projectRoot,
747
- framework: frameworkOverride
748
- });
749
- if (frameworkResult.filesCreated.length > 0) {
750
- for (const file of frameworkResult.filesCreated) {
751
- console.log(pc2.green(`\u2713 Created ${file}`));
752
- }
753
- }
754
- if (frameworkResult.configModified.length > 0) {
755
- for (const file of frameworkResult.configModified) {
756
- console.log(pc2.green(`\u2713 Updated ${file}`));
757
- }
758
- }
759
- if (frameworkResult.packagesToInstall.length > 0) {
760
- const pkgs = frameworkResult.packagesToInstall.join(" ");
761
- console.log(
762
- pc2.yellow(`
763
- \u26A0 Install required dependencies: `) + pc2.bold(`pnpm add -D ${pkgs}`)
764
- );
765
- }
766
- for (const warning of frameworkResult.warnings) {
767
- console.log(pc2.yellow(` Note: ${warning}`));
768
- }
769
- if (errors.length === 0) {
770
- console.log(pc2.green("\n\u2713 Setup complete!\n"));
771
- if (startServer) {
772
- console.log(pc2.cyan("Starting viewer...\n"));
773
- startDevServer(projectRoot);
774
- } else {
775
- console.log(pc2.cyan("Next steps:"));
776
- console.log(` 1. Run ${pc2.bold(`${BRAND.cliCommand} dev`)} to start the viewer`);
777
- if (scenario === "fresh") {
778
- console.log(` 2. Edit ${pc2.bold(`${componentPath}/Button/Button.fragment.tsx`)}`);
779
- }
780
- console.log(` 3. Run ${pc2.bold(`${BRAND.cliCommand} generate`)} to create fragment files for your components`);
781
- console.log();
782
- }
783
- }
784
- return {
785
- success: errors.length === 0,
786
- configPath: errors.length === 0 ? configPath : void 0,
787
- scenario,
788
- storiesFound: detection.storyFiles.length,
789
- componentsFound: detection.componentFiles.length,
790
- errors
791
- };
792
- }
793
- export {
794
- init
795
- };
796
- //# sourceMappingURL=init-NDQXUWDU.js.map