@rdmind/webui 0.2.4-alpha.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/README.md +347 -0
- package/dist/index.cjs +10006 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.ts +1690 -0
- package/dist/index.js +10006 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.js +10008 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/styles.css +3592 -0
- package/package.json +80 -0
- package/tailwind.preset.cjs +90 -0
package/README.md
ADDED
|
@@ -0,0 +1,347 @@
|
|
|
1
|
+
# @rdmind/webui
|
|
2
|
+
|
|
3
|
+
A shared React component library for RDMind applications, providing cross-platform UI components with consistent styling and behavior.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Cross-platform support**: Components work seamlessly across VS Code extension, web, and other platforms
|
|
8
|
+
- **Platform Context**: Abstraction layer for platform-specific capabilities
|
|
9
|
+
- **Tailwind CSS**: Shared styling preset for consistent design
|
|
10
|
+
- **TypeScript**: Full type definitions for all components
|
|
11
|
+
- **Storybook**: Interactive component documentation and development
|
|
12
|
+
- **Multiple Build Formats**: Supports ESM, CJS, and UMD formats for different environments
|
|
13
|
+
- **CDN Usage**: Can be loaded directly in browsers via CDN
|
|
14
|
+
|
|
15
|
+
## Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @rdmind/webui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## CDN Usage
|
|
22
|
+
|
|
23
|
+
You can also use this library directly in the browser via CDN:
|
|
24
|
+
|
|
25
|
+
### Option 1: With JSX Support (using Babel)
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<!DOCTYPE html>
|
|
29
|
+
<html>
|
|
30
|
+
<head>
|
|
31
|
+
<!-- Load React -->
|
|
32
|
+
<script
|
|
33
|
+
crossorigin
|
|
34
|
+
src="https://unpkg.com/react@18/umd/react.production.min.js"
|
|
35
|
+
></script>
|
|
36
|
+
<script
|
|
37
|
+
crossorigin
|
|
38
|
+
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
|
|
39
|
+
></script>
|
|
40
|
+
|
|
41
|
+
<!-- Load Babel Standalone for JSX processing -->
|
|
42
|
+
<script src="https://unpkg.com/@babel/standalone@7.23.6/babel.min.js"></script>
|
|
43
|
+
|
|
44
|
+
<!-- Manually create the jsxRuntime object to satisfy the dependency -->
|
|
45
|
+
<script>
|
|
46
|
+
// Provide a minimal JSX runtime for builds that expect react/jsx-runtime globals.
|
|
47
|
+
const withKey = (props, key) =>
|
|
48
|
+
key == null ? props : Object.assign({}, props, { key });
|
|
49
|
+
const jsx = (type, props, key) =>
|
|
50
|
+
React.createElement(type, withKey(props, key));
|
|
51
|
+
const jsxRuntime = {
|
|
52
|
+
Fragment: React.Fragment,
|
|
53
|
+
jsx,
|
|
54
|
+
jsxs: jsx,
|
|
55
|
+
jsxDEV: jsx,
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
window.ReactJSXRuntime = jsxRuntime;
|
|
59
|
+
window['react/jsx-runtime'] = jsxRuntime;
|
|
60
|
+
window['react/jsx-dev-runtime'] = jsxRuntime;
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<!-- Load the webui library -->
|
|
64
|
+
<script src="https://unpkg.com/@rdmind/webui@0.1.0-beta.2/dist/index.umd.js"></script>
|
|
65
|
+
|
|
66
|
+
<!-- Load the CSS -->
|
|
67
|
+
<link
|
|
68
|
+
rel="stylesheet"
|
|
69
|
+
href="https://unpkg.com/@rdmind/webui@0.1.0-beta.2/dist/styles.css"
|
|
70
|
+
/>
|
|
71
|
+
</head>
|
|
72
|
+
<body>
|
|
73
|
+
<div id="root"></div>
|
|
74
|
+
|
|
75
|
+
<script type="text/babel">
|
|
76
|
+
// Access components from the global QwenCodeWebUI object
|
|
77
|
+
const { ChatViewer } = QwenCodeWebUI;
|
|
78
|
+
|
|
79
|
+
// Use the components with JSX support
|
|
80
|
+
const App = () => (
|
|
81
|
+
<ChatViewer messages={/* your messages */} />
|
|
82
|
+
);
|
|
83
|
+
|
|
84
|
+
ReactDOM.render(<App />, document.getElementById('root'));
|
|
85
|
+
</script>
|
|
86
|
+
</body>
|
|
87
|
+
</html>
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Option 2: Without JSX (using React.createElement directly)
|
|
91
|
+
|
|
92
|
+
```html
|
|
93
|
+
<!DOCTYPE html>
|
|
94
|
+
<html>
|
|
95
|
+
<head>
|
|
96
|
+
<!-- Load React -->
|
|
97
|
+
<script
|
|
98
|
+
crossorigin
|
|
99
|
+
src="https://unpkg.com/react@18/umd/react.production.min.js"
|
|
100
|
+
></script>
|
|
101
|
+
<script
|
|
102
|
+
crossorigin
|
|
103
|
+
src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
|
|
104
|
+
></script>
|
|
105
|
+
|
|
106
|
+
<!-- Manually create the jsxRuntime object to satisfy the dependency -->
|
|
107
|
+
<script>
|
|
108
|
+
// Provide a minimal JSX runtime for builds that expect react/jsx-runtime globals.
|
|
109
|
+
const withKey = (props, key) =>
|
|
110
|
+
key == null ? props : Object.assign({}, props, { key });
|
|
111
|
+
const jsx = (type, props, key) =>
|
|
112
|
+
React.createElement(type, withKey(props, key));
|
|
113
|
+
const jsxRuntime = {
|
|
114
|
+
Fragment: React.Fragment,
|
|
115
|
+
jsx,
|
|
116
|
+
jsxs: jsx,
|
|
117
|
+
jsxDEV: jsx,
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
window.ReactJSXRuntime = jsxRuntime;
|
|
121
|
+
window['react/jsx-runtime'] = jsxRuntime;
|
|
122
|
+
window['react/jsx-dev-runtime'] = jsxRuntime;
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<!-- Load the webui library -->
|
|
126
|
+
<script src="https://unpkg.com/@rdmind/webui@0.1.0-beta.2/dist/index.umd.js"></script>
|
|
127
|
+
|
|
128
|
+
<!-- Load the CSS -->
|
|
129
|
+
<link
|
|
130
|
+
rel="stylesheet"
|
|
131
|
+
href="https://unpkg.com/@rdmind/webui@0.1.0-beta.2/dist/styles.css"
|
|
132
|
+
/>
|
|
133
|
+
</head>
|
|
134
|
+
<body>
|
|
135
|
+
<div id="root"></div>
|
|
136
|
+
|
|
137
|
+
<script>
|
|
138
|
+
// Access components from the global QwenCodeWebUI object
|
|
139
|
+
const { ChatViewer } = QwenCodeWebUI;
|
|
140
|
+
|
|
141
|
+
// Use the components with React.createElement (no JSX)
|
|
142
|
+
const App = React.createElement(ChatViewer, {
|
|
143
|
+
messages: [
|
|
144
|
+
/* your messages */
|
|
145
|
+
],
|
|
146
|
+
});
|
|
147
|
+
|
|
148
|
+
ReactDOM.render(App, document.getElementById('root'));
|
|
149
|
+
</script>
|
|
150
|
+
</body>
|
|
151
|
+
</html>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
For a complete working example, see [examples/cdn-usage-demo.html](./examples/cdn-usage-demo.html).
|
|
155
|
+
|
|
156
|
+
## Quick Start
|
|
157
|
+
|
|
158
|
+
```tsx
|
|
159
|
+
import { Button, Input, Tooltip } from '@rdmind/webui';
|
|
160
|
+
import { PlatformProvider } from '@rdmind/webui/context';
|
|
161
|
+
|
|
162
|
+
function App() {
|
|
163
|
+
return (
|
|
164
|
+
<PlatformProvider value={platformContext}>
|
|
165
|
+
<Button variant="primary" onClick={handleClick}>
|
|
166
|
+
Click me
|
|
167
|
+
</Button>
|
|
168
|
+
</PlatformProvider>
|
|
169
|
+
);
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
## Components
|
|
174
|
+
|
|
175
|
+
### UI Components
|
|
176
|
+
|
|
177
|
+
#### Button
|
|
178
|
+
|
|
179
|
+
```tsx
|
|
180
|
+
import { Button } from '@rdmind/webui';
|
|
181
|
+
|
|
182
|
+
<Button variant="primary" size="md" loading={false}>
|
|
183
|
+
Submit
|
|
184
|
+
</Button>;
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
**Props:**
|
|
188
|
+
|
|
189
|
+
- `variant`: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline'
|
|
190
|
+
- `size`: 'sm' | 'md' | 'lg'
|
|
191
|
+
- `loading`: boolean
|
|
192
|
+
- `leftIcon`: ReactNode
|
|
193
|
+
- `rightIcon`: ReactNode
|
|
194
|
+
- `fullWidth`: boolean
|
|
195
|
+
|
|
196
|
+
#### Input
|
|
197
|
+
|
|
198
|
+
```tsx
|
|
199
|
+
import { Input } from '@rdmind/webui';
|
|
200
|
+
|
|
201
|
+
<Input
|
|
202
|
+
label="Email"
|
|
203
|
+
placeholder="Enter email"
|
|
204
|
+
error={hasError}
|
|
205
|
+
errorMessage="Invalid email"
|
|
206
|
+
/>;
|
|
207
|
+
```
|
|
208
|
+
|
|
209
|
+
**Props:**
|
|
210
|
+
|
|
211
|
+
- `size`: 'sm' | 'md' | 'lg'
|
|
212
|
+
- `error`: boolean
|
|
213
|
+
- `errorMessage`: string
|
|
214
|
+
- `label`: string
|
|
215
|
+
- `helperText`: string
|
|
216
|
+
- `leftElement`: ReactNode
|
|
217
|
+
- `rightElement`: ReactNode
|
|
218
|
+
|
|
219
|
+
#### Tooltip
|
|
220
|
+
|
|
221
|
+
```tsx
|
|
222
|
+
import { Tooltip } from '@rdmind/webui';
|
|
223
|
+
|
|
224
|
+
<Tooltip content="Helpful tip">
|
|
225
|
+
<span>Hover me</span>
|
|
226
|
+
</Tooltip>;
|
|
227
|
+
```
|
|
228
|
+
|
|
229
|
+
### Icons
|
|
230
|
+
|
|
231
|
+
```tsx
|
|
232
|
+
import { FileIcon, FolderIcon, CheckIcon } from '@rdmind/webui/icons';
|
|
233
|
+
|
|
234
|
+
<FileIcon size={16} className="text-gray-500" />;
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
Available icon categories:
|
|
238
|
+
|
|
239
|
+
- **FileIcons**: FileIcon, FolderIcon, SaveDocumentIcon
|
|
240
|
+
- **StatusIcons**: CheckIcon, ErrorIcon, WarningIcon, LoadingIcon
|
|
241
|
+
- **NavigationIcons**: ArrowLeftIcon, ArrowRightIcon, ChevronIcon
|
|
242
|
+
- **EditIcons**: EditIcon, DeleteIcon, CopyIcon
|
|
243
|
+
- **SpecialIcons**: SendIcon, StopIcon, CloseIcon
|
|
244
|
+
|
|
245
|
+
### Layout Components
|
|
246
|
+
|
|
247
|
+
- `Container`: Main layout wrapper
|
|
248
|
+
- `Header`: Application header
|
|
249
|
+
- `Footer`: Application footer
|
|
250
|
+
- `Sidebar`: Side navigation
|
|
251
|
+
- `Main`: Main content area
|
|
252
|
+
|
|
253
|
+
### Message Components
|
|
254
|
+
|
|
255
|
+
- `Message`: Chat message display
|
|
256
|
+
- `MessageList`: List of messages
|
|
257
|
+
- `MessageInput`: Message input field
|
|
258
|
+
- `WaitingMessage`: Loading/waiting state
|
|
259
|
+
- `InterruptedMessage`: Interrupted state display
|
|
260
|
+
|
|
261
|
+
## Platform Context
|
|
262
|
+
|
|
263
|
+
The Platform Context provides an abstraction layer for platform-specific capabilities:
|
|
264
|
+
|
|
265
|
+
```tsx
|
|
266
|
+
import { PlatformProvider, usePlatform } from '@rdmind/webui/context';
|
|
267
|
+
|
|
268
|
+
const platformContext = {
|
|
269
|
+
postMessage: (message) => vscode.postMessage(message),
|
|
270
|
+
onMessage: (handler) => {
|
|
271
|
+
window.addEventListener('message', handler);
|
|
272
|
+
return () => window.removeEventListener('message', handler);
|
|
273
|
+
},
|
|
274
|
+
openFile: (path) => {
|
|
275
|
+
/* platform-specific */
|
|
276
|
+
},
|
|
277
|
+
platform: 'vscode',
|
|
278
|
+
};
|
|
279
|
+
|
|
280
|
+
function App() {
|
|
281
|
+
return (
|
|
282
|
+
<PlatformProvider value={platformContext}>
|
|
283
|
+
<YourApp />
|
|
284
|
+
</PlatformProvider>
|
|
285
|
+
);
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
function Component() {
|
|
289
|
+
const { postMessage, platform } = usePlatform();
|
|
290
|
+
// Use platform capabilities
|
|
291
|
+
}
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
## Tailwind Preset
|
|
295
|
+
|
|
296
|
+
Use the shared Tailwind preset for consistent styling:
|
|
297
|
+
|
|
298
|
+
```js
|
|
299
|
+
// tailwind.config.js
|
|
300
|
+
module.exports = {
|
|
301
|
+
presets: [require('@rdmind/webui/tailwind.preset.cjs')],
|
|
302
|
+
// your customizations
|
|
303
|
+
};
|
|
304
|
+
```
|
|
305
|
+
|
|
306
|
+
## Development
|
|
307
|
+
|
|
308
|
+
### Running Storybook
|
|
309
|
+
|
|
310
|
+
```bash
|
|
311
|
+
cd packages/webui
|
|
312
|
+
npm run storybook
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
### Building
|
|
316
|
+
|
|
317
|
+
```bash
|
|
318
|
+
npm run build
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
### Type Checking
|
|
322
|
+
|
|
323
|
+
```bash
|
|
324
|
+
npm run typecheck
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
## Project Structure
|
|
328
|
+
|
|
329
|
+
```
|
|
330
|
+
packages/webui/
|
|
331
|
+
├── src/
|
|
332
|
+
│ ├── components/
|
|
333
|
+
│ │ ├── icons/ # Icon components
|
|
334
|
+
│ │ ├── layout/ # Layout components
|
|
335
|
+
│ │ ├── messages/ # Message components
|
|
336
|
+
│ │ └── ui/ # UI primitives
|
|
337
|
+
│ ├── context/ # Platform context
|
|
338
|
+
│ ├── hooks/ # Custom hooks
|
|
339
|
+
│ └── types/ # Type definitions
|
|
340
|
+
├── .storybook/ # Storybook config
|
|
341
|
+
├── tailwind.preset.cjs # Shared Tailwind preset
|
|
342
|
+
└── vite.config.ts # Build configuration
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
## License
|
|
346
|
+
|
|
347
|
+
Apache-2.0
|