@tanstack/cta-ui-base 0.30.0 → 0.30.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.
|
@@ -53,10 +53,10 @@ export function WebContainerPreview() {
|
|
|
53
53
|
setupStep === 'error' ||
|
|
54
54
|
setupStep !== 'ready' ||
|
|
55
55
|
!previewUrl) {
|
|
56
|
-
return (_jsx("div", { className: "flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900", children: _jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-2xl w-full mx-4 border-2 border-blue-500", children: [_jsx("h2", { className: "text-2xl font-bold mb-6 text-center", children: setupStep === 'error' ? 'Setup Failed' : 'Preparing Preview' }), setupStep === 'error' ? (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-4", children: "\u274C" }), _jsx("div", { className: "text-lg font-medium text-red-600 mb-2", children: "An error occurred" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: error }), _jsx("button", { onClick: startDevServer, className: "px-4 py-2 text-sm bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors", children: "\uD83D\uDD04 Retry" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className:
|
|
56
|
+
return (_jsx("div", { className: "flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900", children: _jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-2xl w-full mx-4 border-2 border-blue-500", children: [_jsx("h2", { className: "text-2xl font-bold mb-6 text-center", children: setupStep === 'error' ? 'Setup Failed' : 'Preparing Preview' }), setupStep === 'error' ? (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-4", children: "\u274C" }), _jsx("div", { className: "text-lg font-medium text-red-600 mb-2", children: "An error occurred" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: error }), _jsx("button", { onClick: startDevServer, className: "px-4 py-2 text-sm bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors", children: "\uD83D\uDD04 Retry" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `text-2xl ${setupStep === 'mounting' ? 'animate-pulse' : ''}`, children: getStepIcon('mounting') }), _jsx("div", { className: `flex-1 ${getStepColor(setupStep === 'mounting' ? 'mounting' : setupStep === 'installing' || setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`, children: "Mount Files" }), (setupStep === 'installing' ||
|
|
57
57
|
setupStep === 'starting' ||
|
|
58
58
|
setupStep === 'ready') &&
|
|
59
|
-
'✓'] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className:
|
|
59
|
+
'✓'] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `text-2xl ${setupStep === 'installing' ? 'animate-spin' : ''}`, children: getStepIcon('installing') }), _jsx("div", { className: `flex-1 ${getStepColor(setupStep === 'installing' ? 'installing' : setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`, children: "Install Dependencies" }), (setupStep === 'starting' || setupStep === 'ready') && '✓'] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: `text-2xl ${setupStep === 'starting' ? 'animate-bounce' : ''}`, children: getStepIcon('starting') }), _jsx("div", { className: `flex-1 ${getStepColor(setupStep === 'starting' ? 'starting' : setupStep === 'ready' ? 'ready' : 'mounting')}`, children: "Start Server" }), setupStep === 'ready' && '✓'] })] }), _jsx("div", { className: "text-center text-sm text-gray-600 dark:text-gray-400", children: statusMessage || 'Preparing your application...' })] }))] }) }));
|
|
60
60
|
}
|
|
61
61
|
// Show the running application with collapsible terminal
|
|
62
62
|
return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "flex-1", children: previewUrl ? (_jsx("iframe", { src: previewUrl, className: "w-full h-full border-0", title: "Application Preview", onLoad: () => console.log('Iframe loaded successfully'), onError: (e) => console.error('Iframe load error:', e) })) : (_jsx("div", { className: "flex items-center justify-center h-full bg-gray-100 dark:bg-gray-800", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDD04" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Preview not available" })] }) })) }), _jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-black text-green-400 flex flex-col flex-shrink-0", children: [_jsxs("div", { className: "p-2 border-b border-gray-700 bg-gray-900 flex items-center justify-between cursor-pointer hover:bg-gray-800 transition-colors", onClick: () => setIsTerminalOpen(!isTerminalOpen), children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx("button", { className: "text-gray-400 hover:text-gray-200", children: isTerminalOpen ? (_jsx(ChevronDown, { className: "w-4 h-4" })) : (_jsx(ChevronUp, { className: "w-4 h-4" })) }), _jsx("div", { className: "text-xs font-medium text-gray-300", children: "Terminal Output" }), setupStep === 'ready' && previewUrl && (_jsx("div", { className: "text-xs text-green-500", children: "\u25CF Server Running" }))] }), _jsxs("div", { className: "flex items-center gap-2", onClick: (e) => e.stopPropagation(), children: [previewUrl && (_jsx("button", { onClick: () => window.open(previewUrl, '_blank'), className: "px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors", children: "Open in New Tab" })), _jsx("button", { onClick: startDevServer, disabled: !webContainer, className: "px-2 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors disabled:opacity-50", children: "\uD83D\uDD04 Restart" }), _jsx("button", { onClick: () => setTerminalOutput([]), className: "text-xs text-gray-400 hover:text-gray-200 transition-colors", children: "Clear" })] })] }), isTerminalOpen && (_jsx("div", { ref: terminalRef, className: "font-mono text-xs p-2 overflow-y-auto overflow-x-hidden", style: { maxHeight: '200px' }, children: terminalOutput.length > 0 ? (terminalOutput.map((line, index) => (_jsx("div", { className: "mb-1 leading-tight whitespace-pre-wrap break-words", children: line }, index)))) : (_jsx("div", { className: "text-gray-500", children: "No output yet..." })) }))] })] }));
|
package/package.json
CHANGED
|
@@ -100,7 +100,11 @@ export function WebContainerPreview() {
|
|
|
100
100
|
{/* Progress Steps */}
|
|
101
101
|
<div className="space-y-4 mb-6">
|
|
102
102
|
<div className="flex items-center gap-3">
|
|
103
|
-
<div
|
|
103
|
+
<div
|
|
104
|
+
className={`text-2xl ${setupStep === 'mounting' ? 'animate-pulse' : ''}`}
|
|
105
|
+
>
|
|
106
|
+
{getStepIcon('mounting')}
|
|
107
|
+
</div>
|
|
104
108
|
<div
|
|
105
109
|
className={`flex-1 ${getStepColor(setupStep === 'mounting' ? 'mounting' : setupStep === 'installing' || setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`}
|
|
106
110
|
>
|
|
@@ -112,7 +116,11 @@ export function WebContainerPreview() {
|
|
|
112
116
|
'✓'}
|
|
113
117
|
</div>
|
|
114
118
|
<div className="flex items-center gap-3">
|
|
115
|
-
<div
|
|
119
|
+
<div
|
|
120
|
+
className={`text-2xl ${setupStep === 'installing' ? 'animate-spin' : ''}`}
|
|
121
|
+
>
|
|
122
|
+
{getStepIcon('installing')}
|
|
123
|
+
</div>
|
|
116
124
|
<div
|
|
117
125
|
className={`flex-1 ${getStepColor(setupStep === 'installing' ? 'installing' : setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`}
|
|
118
126
|
>
|
|
@@ -121,7 +129,11 @@ export function WebContainerPreview() {
|
|
|
121
129
|
{(setupStep === 'starting' || setupStep === 'ready') && '✓'}
|
|
122
130
|
</div>
|
|
123
131
|
<div className="flex items-center gap-3">
|
|
124
|
-
<div
|
|
132
|
+
<div
|
|
133
|
+
className={`text-2xl ${setupStep === 'starting' ? 'animate-bounce' : ''}`}
|
|
134
|
+
>
|
|
135
|
+
{getStepIcon('starting')}
|
|
136
|
+
</div>
|
|
125
137
|
<div
|
|
126
138
|
className={`flex-1 ${getStepColor(setupStep === 'starting' ? 'starting' : setupStep === 'ready' ? 'ready' : 'mounting')}`}
|
|
127
139
|
>
|