@agiflowai/style-system 0.0.13 → 0.1.0
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.
- package/dist/cli.cjs +96 -35
- package/dist/{cli.js → cli.mjs} +87 -24
- package/dist/index.cjs +3 -3
- package/dist/index.d.cts +1 -3
- package/dist/{index.d.ts → index.d.mts} +1 -3
- package/dist/index.mjs +2 -0
- package/dist/{stdio-Db2a8Jns.js → stdio-CbJA-IPN.mjs} +343 -56
- package/dist/{stdio-BgY0loAk.cjs → stdio-DWCPGPyw.cjs} +569 -281
- package/package.json +32 -31
- package/dist/index.js +0 -3
- /package/dist/{cli.d.ts → cli.d.mts} +0 -0
package/dist/cli.cjs
CHANGED
|
@@ -1,32 +1,34 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
const require_stdio = require(
|
|
3
|
-
let
|
|
4
|
-
__agiflowai_aicode_utils = require_stdio.__toESM(__agiflowai_aicode_utils);
|
|
2
|
+
const require_stdio = require("./stdio-DWCPGPyw.cjs");
|
|
3
|
+
let _agiflowai_aicode_utils = require("@agiflowai/aicode-utils");
|
|
5
4
|
let commander = require("commander");
|
|
6
|
-
commander = require_stdio.__toESM(commander);
|
|
7
|
-
|
|
8
5
|
//#region src/commands/get-css-classes.ts
|
|
9
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Get CSS Classes CLI Command
|
|
8
|
+
*/
|
|
9
|
+
const getCSSClassesCommand = new commander.Command("get-css-classes").description("Extract and return all valid CSS classes from a theme CSS file").option("-c, --category <category>", "Category filter: 'colors', 'typography', 'spacing', 'effects', 'all'", "all").option("-a, --app-path <path>", "App path to read theme path from project.json (e.g., \"apps/agiflow-app\")").option("-t, --theme-path <path>", "Theme CSS file path relative to workspace root (required unless appPath resolves style-system.themePath from project.json)").action(async (options) => {
|
|
10
10
|
try {
|
|
11
11
|
const result = await new require_stdio.GetCSSClassesTool(options.themePath).execute({
|
|
12
12
|
category: options.category,
|
|
13
13
|
appPath: options.appPath
|
|
14
14
|
});
|
|
15
15
|
if (result.isError) {
|
|
16
|
-
const firstContent
|
|
17
|
-
const errorText = firstContent
|
|
16
|
+
const firstContent = result.content[0];
|
|
17
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
18
18
|
throw new Error(errorText);
|
|
19
19
|
}
|
|
20
20
|
const firstContent = result.content[0];
|
|
21
|
-
|
|
21
|
+
_agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
|
|
22
22
|
} catch (error) {
|
|
23
|
-
|
|
23
|
+
_agiflowai_aicode_utils.print.error("Error getting CSS classes:", error instanceof Error ? error.message : String(error));
|
|
24
24
|
process.exit(1);
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
|
-
|
|
28
27
|
//#endregion
|
|
29
28
|
//#region src/commands/get-ui-component.ts
|
|
29
|
+
/**
|
|
30
|
+
* Get UI Component CLI Command
|
|
31
|
+
*/
|
|
30
32
|
const getUiComponentCommand = new commander.Command("get-ui-component").description("Get a screenshot of a UI component rendered with app-specific design system configuration. Returns screenshot path and story file content.").requiredOption("-c, --component-name <name>", "The name of the component to capture (e.g., \"Button\", \"Card\")").requiredOption("-a, --app-path <path>", "The app path (relative or absolute) to load design system config from (e.g., \"apps/agiflow-app\")").option("-s, --story-name <name>", "The story name to render (e.g., \"Playground\", \"Default\")", "Playground").option("-d, --dark-mode", "Render the component in dark mode", false).action(async (options) => {
|
|
31
33
|
try {
|
|
32
34
|
const result = await new require_stdio.GetComponentVisualTool().execute({
|
|
@@ -36,8 +38,8 @@ const getUiComponentCommand = new commander.Command("get-ui-component").descript
|
|
|
36
38
|
darkMode: options.darkMode
|
|
37
39
|
});
|
|
38
40
|
if (result.isError) {
|
|
39
|
-
const firstContent
|
|
40
|
-
const errorText = firstContent
|
|
41
|
+
const firstContent = result.content[0];
|
|
42
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
41
43
|
throw new Error(errorText);
|
|
42
44
|
}
|
|
43
45
|
const firstContent = result.content[0];
|
|
@@ -47,9 +49,11 @@ const getUiComponentCommand = new commander.Command("get-ui-component").descript
|
|
|
47
49
|
process.exit(1);
|
|
48
50
|
}
|
|
49
51
|
});
|
|
50
|
-
|
|
51
52
|
//#endregion
|
|
52
53
|
//#region src/commands/list-app-components.ts
|
|
54
|
+
/**
|
|
55
|
+
* List App Components CLI Command
|
|
56
|
+
*/
|
|
53
57
|
const listAppComponentsCommand = new commander.Command("list-app-components").description("List app-specific components and package components. Reads the app's package.json to find workspace dependencies.").requiredOption("-a, --app-path <path>", "The app path (relative or absolute) to list components for (e.g., \"apps/agiflow-app\")").option("-c, --cursor <cursor>", "Pagination cursor to fetch the next page").action(async (options) => {
|
|
54
58
|
try {
|
|
55
59
|
const result = await new require_stdio.ListAppComponentsTool().execute({
|
|
@@ -57,60 +61,101 @@ const listAppComponentsCommand = new commander.Command("list-app-components").de
|
|
|
57
61
|
cursor: options.cursor
|
|
58
62
|
});
|
|
59
63
|
if (result.isError) {
|
|
60
|
-
const firstContent
|
|
61
|
-
const errorText = firstContent
|
|
64
|
+
const firstContent = result.content[0];
|
|
65
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
62
66
|
throw new Error(errorText);
|
|
63
67
|
}
|
|
64
68
|
const firstContent = result.content[0];
|
|
65
|
-
|
|
69
|
+
_agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
|
|
66
70
|
} catch (error) {
|
|
67
|
-
|
|
71
|
+
_agiflowai_aicode_utils.print.error("Error:", error instanceof Error ? error.message : String(error));
|
|
68
72
|
process.exit(1);
|
|
69
73
|
}
|
|
70
74
|
});
|
|
71
|
-
|
|
72
75
|
//#endregion
|
|
73
76
|
//#region src/commands/list-themes.ts
|
|
74
77
|
/**
|
|
78
|
+
* List Themes Command
|
|
79
|
+
*
|
|
80
|
+
* DESIGN PATTERNS:
|
|
81
|
+
* - Command pattern with Commander for CLI argument parsing
|
|
82
|
+
* - Async/await pattern for asynchronous operations
|
|
83
|
+
* - Error handling pattern with try-catch and proper exit codes
|
|
84
|
+
*
|
|
85
|
+
* CODING STANDARDS:
|
|
86
|
+
* - Use async action handlers for asynchronous operations
|
|
87
|
+
* - Provide clear option descriptions and default values
|
|
88
|
+
* - Handle errors gracefully with process.exit()
|
|
89
|
+
* - Log progress and errors to console
|
|
90
|
+
* - Use Commander's .option() and .argument() for inputs
|
|
91
|
+
*
|
|
92
|
+
* AVOID:
|
|
93
|
+
* - Synchronous blocking operations in action handlers
|
|
94
|
+
* - Missing error handling (always use try-catch)
|
|
95
|
+
* - Hardcoded values (use options or environment variables)
|
|
96
|
+
* - Not exiting with appropriate exit codes on errors
|
|
97
|
+
*/
|
|
98
|
+
/**
|
|
75
99
|
* List all available theme configurations from CSS files
|
|
76
100
|
*/
|
|
77
101
|
const listThemesCommand = new commander.Command("list-themes").description("List all available theme configurations from CSS files configured in project.json style-system config").option("-a, --app-path <path>", "App path to read theme config from project.json (e.g., \"apps/my-app\")").action(async (options) => {
|
|
78
102
|
try {
|
|
79
103
|
const result = await new require_stdio.ListThemesTool().execute({ appPath: options.appPath });
|
|
80
104
|
if (result.isError) {
|
|
81
|
-
const firstContent
|
|
82
|
-
const errorText = firstContent
|
|
105
|
+
const firstContent = result.content[0];
|
|
106
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
83
107
|
throw new Error(errorText);
|
|
84
108
|
}
|
|
85
109
|
const firstContent = result.content[0];
|
|
86
|
-
|
|
110
|
+
_agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
|
|
87
111
|
} catch (error) {
|
|
88
|
-
|
|
112
|
+
_agiflowai_aicode_utils.print.error("Error listing themes:", error instanceof Error ? error.message : String(error));
|
|
89
113
|
process.exit(1);
|
|
90
114
|
}
|
|
91
115
|
});
|
|
92
|
-
|
|
93
116
|
//#endregion
|
|
94
117
|
//#region src/commands/list-shared-components.ts
|
|
118
|
+
/**
|
|
119
|
+
* List Shared Components CLI Command
|
|
120
|
+
*/
|
|
95
121
|
const listSharedComponentsCommand = new commander.Command("list-shared-components").description("List all shared UI components available in the design system").option("-c, --cursor <cursor>", "Pagination cursor to fetch the next page").action(async (options) => {
|
|
96
122
|
try {
|
|
97
123
|
const result = await new require_stdio.ListSharedComponentsTool().execute({ cursor: options.cursor });
|
|
98
124
|
if (result.isError) {
|
|
99
|
-
const firstContent
|
|
100
|
-
const errorText = firstContent
|
|
125
|
+
const firstContent = result.content[0];
|
|
126
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
101
127
|
throw new Error(errorText);
|
|
102
128
|
}
|
|
103
129
|
const firstContent = result.content[0];
|
|
104
|
-
|
|
130
|
+
_agiflowai_aicode_utils.print.info(firstContent?.type === "text" ? firstContent.text : "");
|
|
105
131
|
} catch (error) {
|
|
106
|
-
|
|
132
|
+
_agiflowai_aicode_utils.print.error("Error listing shared components:", error instanceof Error ? error.message : String(error));
|
|
107
133
|
process.exit(1);
|
|
108
134
|
}
|
|
109
135
|
});
|
|
110
|
-
|
|
111
136
|
//#endregion
|
|
112
137
|
//#region src/commands/mcp-serve.ts
|
|
113
138
|
/**
|
|
139
|
+
* MCP Serve Command
|
|
140
|
+
*
|
|
141
|
+
* DESIGN PATTERNS:
|
|
142
|
+
* - Command pattern with Commander for CLI argument parsing
|
|
143
|
+
* - Transport abstraction pattern for flexible deployment (stdio, HTTP, SSE)
|
|
144
|
+
* - Factory pattern for creating transport handlers
|
|
145
|
+
* - Graceful shutdown pattern with signal handling
|
|
146
|
+
*
|
|
147
|
+
* CODING STANDARDS:
|
|
148
|
+
* - Use async/await for asynchronous operations
|
|
149
|
+
* - Implement proper error handling with try-catch blocks
|
|
150
|
+
* - Handle process signals for graceful shutdown
|
|
151
|
+
* - Provide clear CLI options and help messages
|
|
152
|
+
*
|
|
153
|
+
* AVOID:
|
|
154
|
+
* - Hardcoded configuration values (use CLI options or environment variables)
|
|
155
|
+
* - Missing error handling for transport startup
|
|
156
|
+
* - Not cleaning up resources on shutdown
|
|
157
|
+
*/
|
|
158
|
+
/**
|
|
114
159
|
* Start MCP server with given transport handler
|
|
115
160
|
*/
|
|
116
161
|
async function startServer(handler, bundlerService) {
|
|
@@ -138,14 +183,14 @@ async function startServer(handler, bundlerService) {
|
|
|
138
183
|
* Note: Design system configuration is now app-specific and read from each app's project.json.
|
|
139
184
|
* No global theme configuration is needed at the server level.
|
|
140
185
|
*/
|
|
141
|
-
const mcpServeCommand = new commander.Command("mcp-serve").description("Start MCP server with specified transport").option("-t, --type <type>", "Transport type: stdio", "stdio").option("--theme-path <path>", "
|
|
186
|
+
const mcpServeCommand = new commander.Command("mcp-serve").description("Start MCP server with specified transport").option("-t, --type <type>", "Transport type: stdio", "stdio").option("--theme-path <path>", "Theme CSS file path relative to workspace root for get-css-classes when app config does not define style-system.themePath").option("--dev", "Start Vite dev server for component hot reload and caching").option("--app-path <path>", "App path for dev server (e.g., apps/agiflow-app)").action(async (options) => {
|
|
142
187
|
try {
|
|
143
188
|
const transportType = options.type.toLowerCase();
|
|
144
189
|
const bundlerService = await require_stdio.getBundlerServiceFromConfig();
|
|
145
190
|
if (options.dev) {
|
|
146
191
|
if (!options.appPath) {
|
|
147
192
|
console.error("Error: --app-path is required when using --dev flag");
|
|
148
|
-
console.error(
|
|
193
|
+
console.error(`Example: ${require_stdio.STYLE_SYSTEM_CLI_NAME} mcp-serve --dev --app-path apps/agiflow-app`);
|
|
149
194
|
process.exit(1);
|
|
150
195
|
}
|
|
151
196
|
const { url, port } = await bundlerService.startDevServer(options.appPath);
|
|
@@ -162,15 +207,32 @@ const mcpServeCommand = new commander.Command("mcp-serve").description("Start MC
|
|
|
162
207
|
process.exit(1);
|
|
163
208
|
}
|
|
164
209
|
});
|
|
165
|
-
|
|
166
210
|
//#endregion
|
|
167
211
|
//#region src/cli.ts
|
|
168
212
|
/**
|
|
213
|
+
* MCP Server CLI Entry Point
|
|
214
|
+
*
|
|
215
|
+
* DESIGN PATTERNS:
|
|
216
|
+
* - CLI pattern with Commander for argument parsing
|
|
217
|
+
* - Command pattern for organizing CLI commands
|
|
218
|
+
* - Transport abstraction for multiple communication methods
|
|
219
|
+
*
|
|
220
|
+
* CODING STANDARDS:
|
|
221
|
+
* - Use async/await for asynchronous operations
|
|
222
|
+
* - Handle errors gracefully with try-catch
|
|
223
|
+
* - Log important events for debugging
|
|
224
|
+
* - Register all commands in main entry point
|
|
225
|
+
*
|
|
226
|
+
* AVOID:
|
|
227
|
+
* - Hardcoding command logic in index.ts (use separate command files)
|
|
228
|
+
* - Missing error handling for command execution
|
|
229
|
+
*/
|
|
230
|
+
/**
|
|
169
231
|
* Main entry point
|
|
170
232
|
*/
|
|
171
233
|
async function main() {
|
|
172
234
|
const program = new commander.Command();
|
|
173
|
-
program.name(
|
|
235
|
+
program.name(require_stdio.STYLE_SYSTEM_CLI_NAME).description("MCP server for design system tools").version(require_stdio.STYLE_SYSTEM_VERSION);
|
|
174
236
|
program.addCommand(getCSSClassesCommand);
|
|
175
237
|
program.addCommand(getUiComponentCommand);
|
|
176
238
|
program.addCommand(listAppComponentsCommand);
|
|
@@ -180,5 +242,4 @@ async function main() {
|
|
|
180
242
|
await program.parseAsync(process.argv);
|
|
181
243
|
}
|
|
182
244
|
main();
|
|
183
|
-
|
|
184
|
-
//#endregion
|
|
245
|
+
//#endregion
|
package/dist/{cli.js → cli.mjs}
RENAMED
|
@@ -1,18 +1,20 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import { a as
|
|
2
|
+
import { a as ListSharedComponentsTool, c as GetComponentVisualTool, f as getBundlerServiceFromConfig, g as GetCSSClassesTool, i as STYLE_SYSTEM_VERSION, n as createServer, o as ListThemesTool, r as STYLE_SYSTEM_CLI_NAME, s as ListAppComponentsTool, t as StdioTransportHandler } from "./stdio-CbJA-IPN.mjs";
|
|
3
3
|
import { print } from "@agiflowai/aicode-utils";
|
|
4
4
|
import { Command } from "commander";
|
|
5
|
-
|
|
6
5
|
//#region src/commands/get-css-classes.ts
|
|
7
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Get CSS Classes CLI Command
|
|
8
|
+
*/
|
|
9
|
+
const getCSSClassesCommand = new Command("get-css-classes").description("Extract and return all valid CSS classes from a theme CSS file").option("-c, --category <category>", "Category filter: 'colors', 'typography', 'spacing', 'effects', 'all'", "all").option("-a, --app-path <path>", "App path to read theme path from project.json (e.g., \"apps/agiflow-app\")").option("-t, --theme-path <path>", "Theme CSS file path relative to workspace root (required unless appPath resolves style-system.themePath from project.json)").action(async (options) => {
|
|
8
10
|
try {
|
|
9
11
|
const result = await new GetCSSClassesTool(options.themePath).execute({
|
|
10
12
|
category: options.category,
|
|
11
13
|
appPath: options.appPath
|
|
12
14
|
});
|
|
13
15
|
if (result.isError) {
|
|
14
|
-
const firstContent
|
|
15
|
-
const errorText = firstContent
|
|
16
|
+
const firstContent = result.content[0];
|
|
17
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
16
18
|
throw new Error(errorText);
|
|
17
19
|
}
|
|
18
20
|
const firstContent = result.content[0];
|
|
@@ -22,9 +24,11 @@ const getCSSClassesCommand = new Command("get-css-classes").description("Extract
|
|
|
22
24
|
process.exit(1);
|
|
23
25
|
}
|
|
24
26
|
});
|
|
25
|
-
|
|
26
27
|
//#endregion
|
|
27
28
|
//#region src/commands/get-ui-component.ts
|
|
29
|
+
/**
|
|
30
|
+
* Get UI Component CLI Command
|
|
31
|
+
*/
|
|
28
32
|
const getUiComponentCommand = new Command("get-ui-component").description("Get a screenshot of a UI component rendered with app-specific design system configuration. Returns screenshot path and story file content.").requiredOption("-c, --component-name <name>", "The name of the component to capture (e.g., \"Button\", \"Card\")").requiredOption("-a, --app-path <path>", "The app path (relative or absolute) to load design system config from (e.g., \"apps/agiflow-app\")").option("-s, --story-name <name>", "The story name to render (e.g., \"Playground\", \"Default\")", "Playground").option("-d, --dark-mode", "Render the component in dark mode", false).action(async (options) => {
|
|
29
33
|
try {
|
|
30
34
|
const result = await new GetComponentVisualTool().execute({
|
|
@@ -34,8 +38,8 @@ const getUiComponentCommand = new Command("get-ui-component").description("Get a
|
|
|
34
38
|
darkMode: options.darkMode
|
|
35
39
|
});
|
|
36
40
|
if (result.isError) {
|
|
37
|
-
const firstContent
|
|
38
|
-
const errorText = firstContent
|
|
41
|
+
const firstContent = result.content[0];
|
|
42
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
39
43
|
throw new Error(errorText);
|
|
40
44
|
}
|
|
41
45
|
const firstContent = result.content[0];
|
|
@@ -45,9 +49,11 @@ const getUiComponentCommand = new Command("get-ui-component").description("Get a
|
|
|
45
49
|
process.exit(1);
|
|
46
50
|
}
|
|
47
51
|
});
|
|
48
|
-
|
|
49
52
|
//#endregion
|
|
50
53
|
//#region src/commands/list-app-components.ts
|
|
54
|
+
/**
|
|
55
|
+
* List App Components CLI Command
|
|
56
|
+
*/
|
|
51
57
|
const listAppComponentsCommand = new Command("list-app-components").description("List app-specific components and package components. Reads the app's package.json to find workspace dependencies.").requiredOption("-a, --app-path <path>", "The app path (relative or absolute) to list components for (e.g., \"apps/agiflow-app\")").option("-c, --cursor <cursor>", "Pagination cursor to fetch the next page").action(async (options) => {
|
|
52
58
|
try {
|
|
53
59
|
const result = await new ListAppComponentsTool().execute({
|
|
@@ -55,8 +61,8 @@ const listAppComponentsCommand = new Command("list-app-components").description(
|
|
|
55
61
|
cursor: options.cursor
|
|
56
62
|
});
|
|
57
63
|
if (result.isError) {
|
|
58
|
-
const firstContent
|
|
59
|
-
const errorText = firstContent
|
|
64
|
+
const firstContent = result.content[0];
|
|
65
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
60
66
|
throw new Error(errorText);
|
|
61
67
|
}
|
|
62
68
|
const firstContent = result.content[0];
|
|
@@ -66,18 +72,38 @@ const listAppComponentsCommand = new Command("list-app-components").description(
|
|
|
66
72
|
process.exit(1);
|
|
67
73
|
}
|
|
68
74
|
});
|
|
69
|
-
|
|
70
75
|
//#endregion
|
|
71
76
|
//#region src/commands/list-themes.ts
|
|
72
77
|
/**
|
|
78
|
+
* List Themes Command
|
|
79
|
+
*
|
|
80
|
+
* DESIGN PATTERNS:
|
|
81
|
+
* - Command pattern with Commander for CLI argument parsing
|
|
82
|
+
* - Async/await pattern for asynchronous operations
|
|
83
|
+
* - Error handling pattern with try-catch and proper exit codes
|
|
84
|
+
*
|
|
85
|
+
* CODING STANDARDS:
|
|
86
|
+
* - Use async action handlers for asynchronous operations
|
|
87
|
+
* - Provide clear option descriptions and default values
|
|
88
|
+
* - Handle errors gracefully with process.exit()
|
|
89
|
+
* - Log progress and errors to console
|
|
90
|
+
* - Use Commander's .option() and .argument() for inputs
|
|
91
|
+
*
|
|
92
|
+
* AVOID:
|
|
93
|
+
* - Synchronous blocking operations in action handlers
|
|
94
|
+
* - Missing error handling (always use try-catch)
|
|
95
|
+
* - Hardcoded values (use options or environment variables)
|
|
96
|
+
* - Not exiting with appropriate exit codes on errors
|
|
97
|
+
*/
|
|
98
|
+
/**
|
|
73
99
|
* List all available theme configurations from CSS files
|
|
74
100
|
*/
|
|
75
101
|
const listThemesCommand = new Command("list-themes").description("List all available theme configurations from CSS files configured in project.json style-system config").option("-a, --app-path <path>", "App path to read theme config from project.json (e.g., \"apps/my-app\")").action(async (options) => {
|
|
76
102
|
try {
|
|
77
103
|
const result = await new ListThemesTool().execute({ appPath: options.appPath });
|
|
78
104
|
if (result.isError) {
|
|
79
|
-
const firstContent
|
|
80
|
-
const errorText = firstContent
|
|
105
|
+
const firstContent = result.content[0];
|
|
106
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
81
107
|
throw new Error(errorText);
|
|
82
108
|
}
|
|
83
109
|
const firstContent = result.content[0];
|
|
@@ -87,15 +113,17 @@ const listThemesCommand = new Command("list-themes").description("List all avail
|
|
|
87
113
|
process.exit(1);
|
|
88
114
|
}
|
|
89
115
|
});
|
|
90
|
-
|
|
91
116
|
//#endregion
|
|
92
117
|
//#region src/commands/list-shared-components.ts
|
|
118
|
+
/**
|
|
119
|
+
* List Shared Components CLI Command
|
|
120
|
+
*/
|
|
93
121
|
const listSharedComponentsCommand = new Command("list-shared-components").description("List all shared UI components available in the design system").option("-c, --cursor <cursor>", "Pagination cursor to fetch the next page").action(async (options) => {
|
|
94
122
|
try {
|
|
95
123
|
const result = await new ListSharedComponentsTool().execute({ cursor: options.cursor });
|
|
96
124
|
if (result.isError) {
|
|
97
|
-
const firstContent
|
|
98
|
-
const errorText = firstContent
|
|
125
|
+
const firstContent = result.content[0];
|
|
126
|
+
const errorText = firstContent?.type === "text" ? firstContent.text : "Unknown error";
|
|
99
127
|
throw new Error(errorText);
|
|
100
128
|
}
|
|
101
129
|
const firstContent = result.content[0];
|
|
@@ -105,10 +133,29 @@ const listSharedComponentsCommand = new Command("list-shared-components").descri
|
|
|
105
133
|
process.exit(1);
|
|
106
134
|
}
|
|
107
135
|
});
|
|
108
|
-
|
|
109
136
|
//#endregion
|
|
110
137
|
//#region src/commands/mcp-serve.ts
|
|
111
138
|
/**
|
|
139
|
+
* MCP Serve Command
|
|
140
|
+
*
|
|
141
|
+
* DESIGN PATTERNS:
|
|
142
|
+
* - Command pattern with Commander for CLI argument parsing
|
|
143
|
+
* - Transport abstraction pattern for flexible deployment (stdio, HTTP, SSE)
|
|
144
|
+
* - Factory pattern for creating transport handlers
|
|
145
|
+
* - Graceful shutdown pattern with signal handling
|
|
146
|
+
*
|
|
147
|
+
* CODING STANDARDS:
|
|
148
|
+
* - Use async/await for asynchronous operations
|
|
149
|
+
* - Implement proper error handling with try-catch blocks
|
|
150
|
+
* - Handle process signals for graceful shutdown
|
|
151
|
+
* - Provide clear CLI options and help messages
|
|
152
|
+
*
|
|
153
|
+
* AVOID:
|
|
154
|
+
* - Hardcoded configuration values (use CLI options or environment variables)
|
|
155
|
+
* - Missing error handling for transport startup
|
|
156
|
+
* - Not cleaning up resources on shutdown
|
|
157
|
+
*/
|
|
158
|
+
/**
|
|
112
159
|
* Start MCP server with given transport handler
|
|
113
160
|
*/
|
|
114
161
|
async function startServer(handler, bundlerService) {
|
|
@@ -136,14 +183,14 @@ async function startServer(handler, bundlerService) {
|
|
|
136
183
|
* Note: Design system configuration is now app-specific and read from each app's project.json.
|
|
137
184
|
* No global theme configuration is needed at the server level.
|
|
138
185
|
*/
|
|
139
|
-
const mcpServeCommand = new Command("mcp-serve").description("Start MCP server with specified transport").option("-t, --type <type>", "Transport type: stdio", "stdio").option("--theme-path <path>", "
|
|
186
|
+
const mcpServeCommand = new Command("mcp-serve").description("Start MCP server with specified transport").option("-t, --type <type>", "Transport type: stdio", "stdio").option("--theme-path <path>", "Theme CSS file path relative to workspace root for get-css-classes when app config does not define style-system.themePath").option("--dev", "Start Vite dev server for component hot reload and caching").option("--app-path <path>", "App path for dev server (e.g., apps/agiflow-app)").action(async (options) => {
|
|
140
187
|
try {
|
|
141
188
|
const transportType = options.type.toLowerCase();
|
|
142
189
|
const bundlerService = await getBundlerServiceFromConfig();
|
|
143
190
|
if (options.dev) {
|
|
144
191
|
if (!options.appPath) {
|
|
145
192
|
console.error("Error: --app-path is required when using --dev flag");
|
|
146
|
-
console.error(
|
|
193
|
+
console.error(`Example: ${STYLE_SYSTEM_CLI_NAME} mcp-serve --dev --app-path apps/agiflow-app`);
|
|
147
194
|
process.exit(1);
|
|
148
195
|
}
|
|
149
196
|
const { url, port } = await bundlerService.startDevServer(options.appPath);
|
|
@@ -160,15 +207,32 @@ const mcpServeCommand = new Command("mcp-serve").description("Start MCP server w
|
|
|
160
207
|
process.exit(1);
|
|
161
208
|
}
|
|
162
209
|
});
|
|
163
|
-
|
|
164
210
|
//#endregion
|
|
165
211
|
//#region src/cli.ts
|
|
166
212
|
/**
|
|
213
|
+
* MCP Server CLI Entry Point
|
|
214
|
+
*
|
|
215
|
+
* DESIGN PATTERNS:
|
|
216
|
+
* - CLI pattern with Commander for argument parsing
|
|
217
|
+
* - Command pattern for organizing CLI commands
|
|
218
|
+
* - Transport abstraction for multiple communication methods
|
|
219
|
+
*
|
|
220
|
+
* CODING STANDARDS:
|
|
221
|
+
* - Use async/await for asynchronous operations
|
|
222
|
+
* - Handle errors gracefully with try-catch
|
|
223
|
+
* - Log important events for debugging
|
|
224
|
+
* - Register all commands in main entry point
|
|
225
|
+
*
|
|
226
|
+
* AVOID:
|
|
227
|
+
* - Hardcoding command logic in index.ts (use separate command files)
|
|
228
|
+
* - Missing error handling for command execution
|
|
229
|
+
*/
|
|
230
|
+
/**
|
|
167
231
|
* Main entry point
|
|
168
232
|
*/
|
|
169
233
|
async function main() {
|
|
170
234
|
const program = new Command();
|
|
171
|
-
program.name(
|
|
235
|
+
program.name(STYLE_SYSTEM_CLI_NAME).description("MCP server for design system tools").version(STYLE_SYSTEM_VERSION);
|
|
172
236
|
program.addCommand(getCSSClassesCommand);
|
|
173
237
|
program.addCommand(getUiComponentCommand);
|
|
174
238
|
program.addCommand(listAppComponentsCommand);
|
|
@@ -178,6 +242,5 @@ async function main() {
|
|
|
178
242
|
await program.parseAsync(process.argv);
|
|
179
243
|
}
|
|
180
244
|
main();
|
|
181
|
-
|
|
182
245
|
//#endregion
|
|
183
|
-
export {
|
|
246
|
+
export {};
|
package/dist/index.cjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
+
const require_stdio = require("./stdio-DWCPGPyw.cjs");
|
|
3
3
|
exports.BaseBundlerService = require_stdio.BaseBundlerService;
|
|
4
4
|
exports.BaseCSSClassesService = require_stdio.BaseCSSClassesService;
|
|
5
5
|
exports.CSSClassesServiceFactory = require_stdio.CSSClassesServiceFactory;
|
|
@@ -17,4 +17,4 @@ exports.ThemeService = require_stdio.ThemeService;
|
|
|
17
17
|
exports.ViteReactBundlerService = require_stdio.ViteReactBundlerService;
|
|
18
18
|
exports.createDefaultBundlerService = require_stdio.createDefaultBundlerService;
|
|
19
19
|
exports.createServer = require_stdio.createServer;
|
|
20
|
-
exports.getBundlerServiceFromConfig = require_stdio.getBundlerServiceFromConfig;
|
|
20
|
+
exports.getBundlerServiceFromConfig = require_stdio.getBundlerServiceFromConfig;
|
package/dist/index.d.cts
CHANGED
|
@@ -2,7 +2,6 @@ import { Server } from "@modelcontextprotocol/sdk/server/index.js";
|
|
|
2
2
|
import { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
|
|
3
3
|
|
|
4
4
|
//#region src/server/index.d.ts
|
|
5
|
-
|
|
6
5
|
declare function createServer(themePath?: string): Server;
|
|
7
6
|
//#endregion
|
|
8
7
|
//#region src/config.d.ts
|
|
@@ -80,7 +79,6 @@ interface ComponentInfo {
|
|
|
80
79
|
}
|
|
81
80
|
//#endregion
|
|
82
81
|
//#region src/services/StoriesIndexService/StoriesIndexService.d.ts
|
|
83
|
-
|
|
84
82
|
/**
|
|
85
83
|
* StoriesIndexService handles indexing and querying Storybook story files.
|
|
86
84
|
*
|
|
@@ -1063,7 +1061,7 @@ declare class GetCSSClassesTool implements Tool<GetCSSClassesInput> {
|
|
|
1063
1061
|
private static readonly CSS_REUSE_INSTRUCTION;
|
|
1064
1062
|
private serviceFactory;
|
|
1065
1063
|
private service;
|
|
1066
|
-
private defaultThemePath
|
|
1064
|
+
private defaultThemePath?;
|
|
1067
1065
|
/**
|
|
1068
1066
|
* Creates a new GetCSSClassesTool instance
|
|
1069
1067
|
* @param defaultThemePath - Default path to theme CSS file (relative to workspace root)
|
|
@@ -2,7 +2,6 @@ import { Server } from "@modelcontextprotocol/sdk/server/index.js";
|
|
|
2
2
|
import { CallToolResult } from "@modelcontextprotocol/sdk/types.js";
|
|
3
3
|
|
|
4
4
|
//#region src/server/index.d.ts
|
|
5
|
-
|
|
6
5
|
declare function createServer(themePath?: string): Server;
|
|
7
6
|
//#endregion
|
|
8
7
|
//#region src/config.d.ts
|
|
@@ -80,7 +79,6 @@ interface ComponentInfo {
|
|
|
80
79
|
}
|
|
81
80
|
//#endregion
|
|
82
81
|
//#region src/services/StoriesIndexService/StoriesIndexService.d.ts
|
|
83
|
-
|
|
84
82
|
/**
|
|
85
83
|
* StoriesIndexService handles indexing and querying Storybook story files.
|
|
86
84
|
*
|
|
@@ -1063,7 +1061,7 @@ declare class GetCSSClassesTool implements Tool<GetCSSClassesInput> {
|
|
|
1063
1061
|
private static readonly CSS_REUSE_INSTRUCTION;
|
|
1064
1062
|
private serviceFactory;
|
|
1065
1063
|
private service;
|
|
1066
|
-
private defaultThemePath
|
|
1064
|
+
private defaultThemePath?;
|
|
1067
1065
|
/**
|
|
1068
1066
|
* Creates a new GetCSSClassesTool instance
|
|
1069
1067
|
* @param defaultThemePath - Default path to theme CSS file (relative to workspace root)
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import { _ as CSSClassesServiceFactory, a as ListSharedComponentsTool, b as BaseCSSClassesService, c as GetComponentVisualTool, d as createDefaultBundlerService, f as getBundlerServiceFromConfig, g as GetCSSClassesTool, h as StoriesIndexService, l as ComponentRendererService, m as BaseBundlerService, n as createServer, o as ListThemesTool, p as ViteReactBundlerService, s as ListAppComponentsTool, t as StdioTransportHandler, u as ThemeService, v as DEFAULT_STYLE_SYSTEM_CONFIG, y as TailwindCSSClassesService } from "./stdio-CbJA-IPN.mjs";
|
|
2
|
+
export { BaseBundlerService, BaseCSSClassesService, CSSClassesServiceFactory, ComponentRendererService, DEFAULT_STYLE_SYSTEM_CONFIG, GetCSSClassesTool, GetComponentVisualTool, ListAppComponentsTool, ListSharedComponentsTool, ListThemesTool, StdioTransportHandler, StoriesIndexService, TailwindCSSClassesService, ThemeService, ViteReactBundlerService, createDefaultBundlerService, createServer, getBundlerServiceFromConfig };
|