@tpitre/story-ui 3.10.3 → 3.10.4
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/index.js +0 -0
- package/dist/mcp-server/routes/generateStory.d.ts.map +1 -1
- package/dist/mcp-server/routes/generateStory.js +77 -67
- package/dist/mcp-server/routes/generateStoryStream.d.ts.map +1 -1
- package/dist/mcp-server/routes/generateStoryStream.js +102 -84
- package/dist/mcp-server/routes/storyHelpers.d.ts +9 -1
- package/dist/mcp-server/routes/storyHelpers.d.ts.map +1 -1
- package/dist/mcp-server/routes/storyHelpers.js +159 -2
- package/dist/story-generator/framework-adapters/angular-adapter.d.ts.map +1 -1
- package/dist/story-generator/framework-adapters/angular-adapter.js +8 -0
- package/dist/story-generator/storyValidator.d.ts.map +1 -1
- package/dist/story-generator/storyValidator.js +2 -0
- package/dist/templates/StoryUI/StoryUIPanel.css +1121 -0
- package/dist/templates/StoryUI/StoryUIPanel.js +3 -3
- package/package.json +1 -1
- package/templates/StoryUI/StoryUIPanel.tsx +3 -3
|
@@ -411,9 +411,9 @@ const ProgressIndicator = ({ streamingState }) => {
|
|
|
411
411
|
return (_jsxs("div", { className: "sui-error", role: "alert", children: [_jsx("strong", { children: error.message }), error.details && _jsx("div", { children: error.details }), error.suggestion && _jsx("div", { children: error.suggestion })] }));
|
|
412
412
|
}
|
|
413
413
|
if (completion) {
|
|
414
|
-
return (_jsxs("div", { className: "sui-completion", children: [_jsxs("div", { className: "sui-completion-header", children: [_jsx("span", { children: completion.success ? '\u2705' : '\u274C' }), _jsxs("span", { children: [completion.summary.action, ": ", completion.title] })] }), completion.componentsUsed.length > 0 && (_jsx("div", { className: "sui-completion-components", children: completion.componentsUsed.map((comp, i) => (_jsx("span", { className: "sui-completion-tag", children: comp.name }, i))) })), completion.metrics && (_jsxs("div", { className: "sui-completion-metrics", children: [_jsxs("span", { children: [(completion.metrics.totalTimeMs / 1000).toFixed(1), "s"] }), _jsxs("span", { children: [completion.metrics.llmCallsCount, "
|
|
414
|
+
return (_jsxs("div", { className: "sui-completion", children: [_jsxs("div", { className: "sui-completion-header", children: [_jsx("span", { children: completion.success ? '\u2705' : '\u274C' }), _jsxs("span", { children: [completion.summary.action, ": ", completion.title] })] }), completion.componentsUsed.length > 0 && (_jsx("div", { className: "sui-completion-components", children: completion.componentsUsed.map((comp, i) => (_jsx("span", { className: "sui-completion-tag", children: comp.name }, i))) })), completion.metrics && (_jsxs("div", { className: "sui-completion-metrics", children: [_jsxs("span", { children: [(completion.metrics.totalTimeMs / 1000).toFixed(1), "s"] }), _jsxs("span", { children: [completion.metrics.llmCallsCount, " ", completion.metrics.llmCallsCount === 1 ? 'generation' : 'generations'] })] }))] }));
|
|
415
415
|
}
|
|
416
|
-
return (_jsxs("div", { className: "sui-progress", role: "progressbar", "aria-valuenow": progress?.step, "aria-valuemax": progress?.totalSteps, children: [_jsxs("div", { className: "sui-progress-header", children: [_jsx("span", { className: "sui-progress-label", children: progress?.message || '
|
|
416
|
+
return (_jsxs("div", { className: "sui-progress", role: "progressbar", "aria-valuenow": progress?.step, "aria-valuemax": progress?.totalSteps, children: [_jsxs("div", { className: "sui-progress-header", children: [_jsx("span", { className: "sui-progress-label", children: progress?.message || 'Please give us a moment while we generate your story...' }), progress && _jsxs("span", { className: "sui-progress-step", children: [progress.step, "/", progress.totalSteps] })] }), progress && (_jsx("div", { className: "sui-progress-bar", children: _jsx("div", { className: "sui-progress-fill", style: { width: `${(progress.step / progress.totalSteps) * 100}%` } }) })), retry && _jsxs("div", { className: "sui-progress-retry", children: ["Retry ", retry.attempt, "/", retry.maxAttempts, ": ", retry.reason] })] }));
|
|
417
417
|
};
|
|
418
418
|
function StoryUIPanel({ mcpPort }) {
|
|
419
419
|
const [state, dispatch] = useReducer(panelReducer, initialState);
|
|
@@ -1098,7 +1098,7 @@ function StoryUIPanel({ mcpPort }) {
|
|
|
1098
1098
|
const provider = state.availableProviders.find(p => p.type === newProvider);
|
|
1099
1099
|
if (provider?.models.length)
|
|
1100
1100
|
dispatch({ type: 'SET_SELECTED_MODEL', payload: provider.models[0] });
|
|
1101
|
-
}, "aria-label": "Select provider", children: state.availableProviders.map(p => _jsx("option", { value: p.type, children: p.name }, p.type)) })] }), _jsxs("div", { className: "sui-select", children: [_jsxs("div", { className: "sui-select-trigger", children: [_jsx("span", { children: getModelDisplayName(state.selectedModel) }), Icons.chevronDown] }), _jsx("select", { className: "sui-select-native", value: state.selectedModel, onChange: e => dispatch({ type: 'SET_SELECTED_MODEL', payload: e.target.value }), "aria-label": "Select model", children: state.availableProviders.find(p => p.type === state.selectedProvider)?.models.map(model => (_jsx("option", { value: model, children: getModelDisplayName(model) }, model))) })] })] })) })] }), _jsxs("section", { className: "sui-chat-area", role: "log", "aria-live": "polite", children: [state.error && _jsx("div", { className: "sui-error", role: "alert", style: { margin: '24px' }, children: state.error }), state.conversation.length === 0 && !state.loading ? (_jsxs("div", { className: "sui-welcome", children: [_jsx("h2", { className: "sui-welcome-greeting", children: "What would you like to create?" }), _jsx("p", { className: "sui-welcome-subtitle", children: "Describe any UI component and I'll generate a Storybook story" }), _jsxs("div", { className: "sui-welcome-chips", children: [_jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a responsive card with image, title, and description' }), children: "Card" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a navigation bar with logo and menu links' }), children: "Navbar" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a form with input fields and validation' }), children: "Form" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a hero section with headline and call-to-action' }), children: "Hero" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a button group with primary and secondary actions' }), children: "Buttons" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a modal dialog with header, content, and footer' }), children: "Modal" })] })] })) : (_jsxs("div", { className: "sui-chat-messages", children: [state.conversation.map((msg, i) => (_jsx("article", { className: `sui-message ${msg.role === 'user' ? 'sui-message-user' : 'sui-message-ai'}`, children: _jsxs("div", { className: "sui-message-bubble", children: [msg.role === 'ai' ? renderMarkdown(msg.content) : msg.content, msg.role === 'user' && msg.attachedImages && msg.attachedImages.length > 0 && (_jsx("div", { className: "sui-message-images", children: msg.attachedImages.map(img => (_jsx("img", { src: img.base64 ? `data:${img.mediaType};base64,${img.base64}` : img.preview, alt: "attached", className: "sui-message-image" }, img.id))) }))] }) }, i))), state.loading && (_jsx("div", { className: "sui-message sui-message-ai", children: state.streamingState ? _jsx(ProgressIndicator, { streamingState: state.streamingState }) : (_jsx("div", { className: "sui-progress", children: _jsxs("span", { className: "sui-progress-label", children: ["
|
|
1101
|
+
}, "aria-label": "Select provider", children: state.availableProviders.map(p => _jsx("option", { value: p.type, children: p.name }, p.type)) })] }), _jsxs("div", { className: "sui-select", children: [_jsxs("div", { className: "sui-select-trigger", children: [_jsx("span", { children: getModelDisplayName(state.selectedModel) }), Icons.chevronDown] }), _jsx("select", { className: "sui-select-native", value: state.selectedModel, onChange: e => dispatch({ type: 'SET_SELECTED_MODEL', payload: e.target.value }), "aria-label": "Select model", children: state.availableProviders.find(p => p.type === state.selectedProvider)?.models.map(model => (_jsx("option", { value: model, children: getModelDisplayName(model) }, model))) })] })] })) })] }), _jsxs("section", { className: "sui-chat-area", role: "log", "aria-live": "polite", children: [state.error && _jsx("div", { className: "sui-error", role: "alert", style: { margin: '24px' }, children: state.error }), state.conversation.length === 0 && !state.loading ? (_jsxs("div", { className: "sui-welcome", children: [_jsx("h2", { className: "sui-welcome-greeting", children: "What would you like to create?" }), _jsx("p", { className: "sui-welcome-subtitle", children: "Describe any UI component and I'll generate a Storybook story" }), _jsxs("div", { className: "sui-welcome-chips", children: [_jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a responsive card with image, title, and description' }), children: "Card" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a navigation bar with logo and menu links' }), children: "Navbar" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a form with input fields and validation' }), children: "Form" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a hero section with headline and call-to-action' }), children: "Hero" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a button group with primary and secondary actions' }), children: "Buttons" }), _jsx("button", { className: "sui-chip", onClick: () => dispatch({ type: 'SET_INPUT', payload: 'Create a modal dialog with header, content, and footer' }), children: "Modal" })] })] })) : (_jsxs("div", { className: "sui-chat-messages", children: [state.conversation.map((msg, i) => (_jsx("article", { className: `sui-message ${msg.role === 'user' ? 'sui-message-user' : 'sui-message-ai'}`, children: _jsxs("div", { className: "sui-message-bubble", children: [msg.role === 'ai' ? renderMarkdown(msg.content) : msg.content, msg.role === 'user' && msg.attachedImages && msg.attachedImages.length > 0 && (_jsx("div", { className: "sui-message-images", children: msg.attachedImages.map(img => (_jsx("img", { src: img.base64 ? `data:${img.mediaType};base64,${img.base64}` : img.preview, alt: "attached", className: "sui-message-image" }, img.id))) }))] }) }, i))), state.loading && (_jsx("div", { className: "sui-message sui-message-ai", children: state.streamingState ? _jsx(ProgressIndicator, { streamingState: state.streamingState }) : (_jsx("div", { className: "sui-progress", children: _jsxs("span", { className: "sui-progress-label", children: ["Please give us a moment while we generate your story", _jsx("span", { className: "sui-loading" })] }) })) })), _jsx("div", { ref: chatEndRef })] }))] }), _jsx("div", { className: "sui-input-area", children: _jsxs("div", { className: "sui-input-container", children: [_jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", multiple: true, style: { display: 'none' }, onChange: handleFileSelect }), state.attachedImages.length > 0 && (_jsxs("div", { className: "sui-image-previews", children: [_jsxs("span", { className: "sui-image-preview-label", children: [Icons.image, " ", state.attachedImages.length, " image", state.attachedImages.length > 1 ? 's' : ''] }), state.attachedImages.map(img => (_jsxs("div", { className: "sui-image-preview-item", children: [_jsx("img", { src: img.preview, alt: "preview", className: "sui-image-preview-thumb" }), _jsx("button", { className: "sui-image-preview-remove", onClick: () => removeAttachedImage(img.id), "aria-label": "Remove", children: Icons.x })] }, img.id)))] })), _jsxs("form", { onSubmit: handleSend, className: "sui-input-form", style: state.attachedImages.length > 0 ? { borderTopLeftRadius: 0, borderTopRightRadius: 0 } : undefined, children: [_jsx("button", { type: "button", className: "sui-input-form-upload", onClick: () => fileInputRef.current?.click(), disabled: state.loading || state.attachedImages.length >= MAX_IMAGES, "aria-label": "Attach images", children: Icons.image }), _jsx("input", { ref: inputRef, type: "text", className: "sui-input-form-field", value: state.input, onChange: e => dispatch({ type: 'SET_INPUT', payload: e.target.value }), onPaste: handlePaste, placeholder: state.attachedImages.length > 0 ? 'Describe what to create from these images...' : 'Describe a UI component...' }), _jsx("button", { type: "submit", className: "sui-input-form-send", disabled: state.loading || (!state.input.trim() && state.attachedImages.length === 0), "aria-label": "Send", children: Icons.send })] })] }) })] })] }));
|
|
1102
1102
|
}
|
|
1103
1103
|
export default StoryUIPanel;
|
|
1104
1104
|
export { StoryUIPanel };
|
package/package.json
CHANGED
|
@@ -720,7 +720,7 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({ streamingState })
|
|
|
720
720
|
{completion.metrics && (
|
|
721
721
|
<div className="sui-completion-metrics">
|
|
722
722
|
<span>{(completion.metrics.totalTimeMs / 1000).toFixed(1)}s</span>
|
|
723
|
-
<span>{completion.metrics.llmCallsCount}
|
|
723
|
+
<span>{completion.metrics.llmCallsCount} {completion.metrics.llmCallsCount === 1 ? 'generation' : 'generations'}</span>
|
|
724
724
|
</div>
|
|
725
725
|
)}
|
|
726
726
|
</div>
|
|
@@ -729,7 +729,7 @@ const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({ streamingState })
|
|
|
729
729
|
return (
|
|
730
730
|
<div className="sui-progress" role="progressbar" aria-valuenow={progress?.step} aria-valuemax={progress?.totalSteps}>
|
|
731
731
|
<div className="sui-progress-header">
|
|
732
|
-
<span className="sui-progress-label">{progress?.message || '
|
|
732
|
+
<span className="sui-progress-label">{progress?.message || 'Please give us a moment while we generate your story...'}</span>
|
|
733
733
|
{progress && <span className="sui-progress-step">{progress.step}/{progress.totalSteps}</span>}
|
|
734
734
|
</div>
|
|
735
735
|
{progress && (
|
|
@@ -1621,7 +1621,7 @@ function StoryUIPanel({ mcpPort }: StoryUIPanelProps) {
|
|
|
1621
1621
|
<div className="sui-message sui-message-ai">
|
|
1622
1622
|
{state.streamingState ? <ProgressIndicator streamingState={state.streamingState} /> : (
|
|
1623
1623
|
<div className="sui-progress">
|
|
1624
|
-
<span className="sui-progress-label">
|
|
1624
|
+
<span className="sui-progress-label">Please give us a moment while we generate your story<span className="sui-loading" /></span>
|
|
1625
1625
|
</div>
|
|
1626
1626
|
)}
|
|
1627
1627
|
</div>
|