@sqlrooms/sql-editor 0.27.0 → 0.28.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 +59 -377
- package/dist/SqlEditor.js +1 -1
- package/dist/SqlEditor.js.map +1 -1
- package/dist/SqlEditorModal.js +1 -1
- package/dist/SqlEditorModal.js.map +1 -1
- package/dist/SqlEditorSlice.d.ts +2 -0
- package/dist/SqlEditorSlice.d.ts.map +1 -1
- package/dist/SqlEditorSlice.js +261 -2
- package/dist/SqlEditorSlice.js.map +1 -1
- package/dist/components/CreateTableModal.js +1 -1
- package/dist/components/CreateTableModal.js.map +1 -1
- package/dist/components/QueryEditorPanel.js +1 -1
- package/dist/components/QueryEditorPanel.js.map +1 -1
- package/dist/components/QueryEditorPanelEditor.js +1 -1
- package/dist/components/QueryEditorPanelEditor.js.map +1 -1
- package/dist/components/QueryResultPanel.js +4 -4
- package/dist/components/QueryResultPanel.js.map +1 -1
- package/dist/components/RenameSqlQueryModal.d.ts.map +1 -1
- package/dist/components/RenameSqlQueryModal.js +0 -1
- package/dist/components/RenameSqlQueryModal.js.map +1 -1
- package/dist/components/SqlEditorHeader.js +1 -1
- package/dist/components/SqlEditorHeader.js.map +1 -1
- package/dist/components/SqlQueryDataSourcesPanel.js +1 -1
- package/dist/components/SqlQueryDataSourcesPanel.js.map +1 -1
- package/dist/components/SqlQueryPreview.js +1 -1
- package/dist/components/SqlQueryPreview.js.map +1 -1
- package/package.json +10 -10
package/README.md
CHANGED
|
@@ -1,435 +1,117 @@
|
|
|
1
|
-
|
|
1
|
+
SQL editor UI and state slice for SQLRooms apps.
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
This package provides:
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
- 🔍 **Advanced SQL Editing**: Monaco-based SQL editor with syntax highlighting and auto-completion
|
|
10
|
-
- 📊 **Data Visualization**: View query results in interactive data tables
|
|
11
|
-
- 📑 **Multiple Tabs**: Support for multiple query tabs with save/rename/delete functionality
|
|
12
|
-
- 🔄 **State Management**: Zustand-based state management for SQL editor state
|
|
13
|
-
- 📦 **Table Management**: Browser for tables in the database with schema information
|
|
14
|
-
- 📤 **Data Export**: Export query results to CSV files
|
|
15
|
-
- 📝 **Documentation**: Optional documentation panel for SQL reference
|
|
5
|
+
- `createSqlEditorSlice()` for query tabs, execution, and results state
|
|
6
|
+
- `SqlEditor` and `SqlEditorModal` UI
|
|
7
|
+
- `SqlMonacoEditor` standalone SQL editor
|
|
8
|
+
- helpers/components for query results, table structure, and SQL data sources
|
|
16
9
|
|
|
17
10
|
## Installation
|
|
18
11
|
|
|
19
12
|
```bash
|
|
20
|
-
npm install @sqlrooms/sql-editor
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Basic Usage
|
|
24
|
-
|
|
25
|
-
### SqlEditor and SqlEditorModal Components
|
|
26
|
-
|
|
27
|
-
These components must be used within a `RoomShell` which provides the room store context as they rely on the SQLRooms store:
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import {RoomShell} from '@sqlrooms/room-shell';
|
|
31
|
-
import {SqlEditorModal} from '@sqlrooms/sql-editor';
|
|
32
|
-
import {useDisclosure} from '@sqlrooms/ui';
|
|
33
|
-
import {TerminalIcon} from 'lucide-react';
|
|
34
|
-
import {roomStore} from './store';
|
|
35
|
-
|
|
36
|
-
function MyApp() {
|
|
37
|
-
const sqlEditorDisclosure = useDisclosure();
|
|
38
|
-
|
|
39
|
-
return (
|
|
40
|
-
<RoomShell className="h-screen" roomStore={roomStore}>
|
|
41
|
-
<RoomShell.Sidebar>
|
|
42
|
-
<RoomShell.SidebarButton
|
|
43
|
-
title="SQL Editor"
|
|
44
|
-
onClick={sqlEditorDisclosure.onToggle}
|
|
45
|
-
isSelected={false}
|
|
46
|
-
icon={TerminalIcon}
|
|
47
|
-
/>
|
|
48
|
-
</RoomShell.Sidebar>
|
|
49
|
-
<RoomShell.LayoutComposer />
|
|
50
|
-
<RoomShell.LoadingProgress />
|
|
51
|
-
<SqlEditorModal
|
|
52
|
-
isOpen={sqlEditorDisclosure.isOpen}
|
|
53
|
-
onClose={sqlEditorDisclosure.onClose}
|
|
54
|
-
/>
|
|
55
|
-
</RoomShell>
|
|
56
|
-
);
|
|
57
|
-
}
|
|
13
|
+
npm install @sqlrooms/sql-editor @sqlrooms/room-shell @sqlrooms/duckdb @sqlrooms/ui
|
|
58
14
|
```
|
|
59
15
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
The SQL Editor requires a properly configured store with the SQL Editor slice:
|
|
16
|
+
## Store setup
|
|
63
17
|
|
|
64
18
|
```tsx
|
|
65
19
|
import {
|
|
66
20
|
createRoomShellSlice,
|
|
67
21
|
createRoomStore,
|
|
68
|
-
|
|
22
|
+
RoomShellSliceState,
|
|
69
23
|
} from '@sqlrooms/room-shell';
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
createDefaultSqlEditorConfig,
|
|
73
|
-
createSqlEditorSlice,
|
|
74
|
-
SqlEditorSliceConfig,
|
|
75
|
-
SqlEditorSliceState,
|
|
76
|
-
} from '@sqlrooms/sql-editor';
|
|
77
|
-
import {z} from 'zod';
|
|
78
|
-
|
|
79
|
-
// Define combined config schema
|
|
80
|
-
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig);
|
|
81
|
-
export type RoomConfig = z.infer<typeof RoomConfig>;
|
|
24
|
+
import {createSqlEditorSlice, SqlEditorSliceState} from '@sqlrooms/sql-editor';
|
|
82
25
|
|
|
83
|
-
|
|
84
|
-
export type RoomState = RoomState<RoomConfig> & SqlEditorSliceState;
|
|
26
|
+
type RoomState = RoomShellSliceState & SqlEditorSliceState;
|
|
85
27
|
|
|
86
|
-
|
|
87
|
-
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
|
|
28
|
+
export const {roomStore, useRoomStore} = createRoomStore<RoomState>(
|
|
88
29
|
(set, get, store) => ({
|
|
89
|
-
|
|
90
|
-
...createRoomShellSlice<RoomConfig>({
|
|
30
|
+
...createRoomShellSlice({
|
|
91
31
|
config: {
|
|
92
|
-
|
|
32
|
+
dataSources: [
|
|
33
|
+
{
|
|
34
|
+
type: 'url',
|
|
35
|
+
tableName: 'earthquakes',
|
|
36
|
+
url: 'https://huggingface.co/datasets/sqlrooms/earthquakes/resolve/main/earthquakes.parquet',
|
|
37
|
+
},
|
|
38
|
+
],
|
|
93
39
|
},
|
|
94
40
|
})(set, get, store),
|
|
95
|
-
|
|
96
|
-
// Sql editor slice
|
|
97
41
|
...createSqlEditorSlice()(set, get, store),
|
|
98
42
|
}),
|
|
99
43
|
);
|
|
100
44
|
```
|
|
101
45
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
Unlike the full SQL Editor components, the `SqlMonacoEditor` can be used as a standalone component without requiring the store:
|
|
105
|
-
|
|
106
|
-
```tsx
|
|
107
|
-
import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
|
|
108
|
-
import {useState} from 'react';
|
|
109
|
-
|
|
110
|
-
function SimpleSqlEditor() {
|
|
111
|
-
const [query, setQuery] = useState('SELECT * FROM products');
|
|
112
|
-
|
|
113
|
-
const handleExecute = () => {
|
|
114
|
-
// Execute the query using your own logic
|
|
115
|
-
console.log('Executing query:', query);
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
return (
|
|
119
|
-
<>
|
|
120
|
-
<SqlMonacoEditor value={query} onChange={setQuery} height="400px" />
|
|
121
|
-
<button onClick={handleExecute}>Execute</button>
|
|
122
|
-
</>
|
|
123
|
-
);
|
|
124
|
-
}
|
|
125
|
-
```
|
|
126
|
-
|
|
127
|
-
### With Custom Documentation Panel
|
|
128
|
-
|
|
129
|
-
Adding a custom documentation panel to the SQL Editor:
|
|
46
|
+
## Render SQL editor modal
|
|
130
47
|
|
|
131
48
|
```tsx
|
|
49
|
+
import {RoomShell} from '@sqlrooms/room-shell';
|
|
132
50
|
import {SqlEditorModal} from '@sqlrooms/sql-editor';
|
|
133
51
|
import {useDisclosure} from '@sqlrooms/ui';
|
|
134
|
-
import {
|
|
52
|
+
import {TerminalIcon} from 'lucide-react';
|
|
135
53
|
import {roomStore} from './store';
|
|
136
54
|
|
|
137
|
-
function
|
|
138
|
-
const
|
|
139
|
-
|
|
140
|
-
// Custom documentation component
|
|
141
|
-
const Documentation = () => (
|
|
142
|
-
<div className="p-4">
|
|
143
|
-
<h2 className="mb-4 text-xl font-bold">SQL Reference</h2>
|
|
144
|
-
<div className="space-y-4">
|
|
145
|
-
<div>
|
|
146
|
-
<h3 className="text-lg font-semibold">SELECT</h3>
|
|
147
|
-
<p>Retrieves data from a table</p>
|
|
148
|
-
<pre className="mt-2 rounded bg-gray-100 p-2">
|
|
149
|
-
SELECT column1, column2 FROM table_name;
|
|
150
|
-
</pre>
|
|
151
|
-
</div>
|
|
152
|
-
{/* More documentation items */}
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
);
|
|
55
|
+
export function App() {
|
|
56
|
+
const sqlEditor = useDisclosure();
|
|
156
57
|
|
|
157
58
|
return (
|
|
158
|
-
<
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
59
|
+
<RoomShell roomStore={roomStore} className="h-screen">
|
|
60
|
+
<RoomShell.Sidebar>
|
|
61
|
+
<RoomShell.SidebarButton
|
|
62
|
+
title="SQL Editor"
|
|
63
|
+
icon={TerminalIcon}
|
|
64
|
+
isSelected={sqlEditor.isOpen}
|
|
65
|
+
onClick={sqlEditor.onToggle}
|
|
66
|
+
/>
|
|
67
|
+
</RoomShell.Sidebar>
|
|
68
|
+
<RoomShell.LayoutComposer />
|
|
69
|
+
<SqlEditorModal isOpen={sqlEditor.isOpen} onClose={sqlEditor.onClose} />
|
|
70
|
+
</RoomShell>
|
|
163
71
|
);
|
|
164
72
|
}
|
|
165
73
|
```
|
|
166
74
|
|
|
167
|
-
##
|
|
168
|
-
|
|
169
|
-
The SQL editor provides a Zustand slice for managing state. Here's how to set it up:
|
|
170
|
-
|
|
171
|
-
### Using in a Combined SQLRooms Store
|
|
172
|
-
|
|
173
|
-
This approach is recommended when integrating multiple SQLRooms components:
|
|
75
|
+
## Run queries programmatically
|
|
174
76
|
|
|
175
77
|
```tsx
|
|
176
|
-
import {
|
|
177
|
-
|
|
178
|
-
createDefaultSqlEditorConfig,
|
|
179
|
-
SqlEditorSliceState,
|
|
180
|
-
SqlEditorSliceConfig,
|
|
181
|
-
} from '@sqlrooms/sql-editor';
|
|
182
|
-
import {
|
|
183
|
-
createRoomShellSlice,
|
|
184
|
-
createRoomStore,
|
|
185
|
-
RoomState,
|
|
186
|
-
RoomShell,
|
|
187
|
-
} from '@sqlrooms/room-shell';
|
|
188
|
-
import {BaseRoomConfig} from '@sqlrooms/room-config';
|
|
189
|
-
import {z} from 'zod';
|
|
190
|
-
|
|
191
|
-
// 1. Define combined config schema
|
|
192
|
-
export const RoomConfig = BaseRoomConfig.merge(SqlEditorSliceConfig);
|
|
193
|
-
export type RoomConfig = z.infer<typeof RoomConfig>;
|
|
194
|
-
|
|
195
|
-
// 2. Define combined state type
|
|
196
|
-
export type RoomState = RoomState<RoomConfig> & SqlEditorSliceState;
|
|
197
|
-
|
|
198
|
-
// 3. Create combined store
|
|
199
|
-
export const {roomStore, useRoomStore} = createRoomStore<RoomConfig, RoomState>(
|
|
200
|
-
(set, get, store) => ({
|
|
201
|
-
// Base room slice
|
|
202
|
-
...createRoomShellSlice<RoomConfig>({
|
|
203
|
-
config: {
|
|
204
|
-
title: 'SQL Workspace',
|
|
205
|
-
},
|
|
206
|
-
})(set, get, store),
|
|
207
|
-
|
|
208
|
-
// Sql editor slice
|
|
209
|
-
...createSqlEditorSlice()(set, get, store),
|
|
210
|
-
}),
|
|
211
|
-
);
|
|
78
|
+
import {useRoomStore} from './store';
|
|
79
|
+
import {Button} from '@sqlrooms/ui';
|
|
212
80
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
const runQuery = useRoomStore((state) => state.sqlEditor.runQuery);
|
|
217
|
-
const createQueryTab = useRoomStore(
|
|
218
|
-
(state) => state.sqlEditor.createQueryTab,
|
|
219
|
-
);
|
|
81
|
+
function RunQueryButton() {
|
|
82
|
+
const parseAndRunQuery = useRoomStore((state) => state.sqlEditor.parseAndRunQuery);
|
|
83
|
+
const createQueryTab = useRoomStore((state) => state.sqlEditor.createQueryTab);
|
|
220
84
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
runQuery('SELECT * FROM users LIMIT 10');
|
|
85
|
+
const run = async () => {
|
|
86
|
+
createQueryTab('SELECT COUNT(*) AS total FROM earthquakes');
|
|
87
|
+
await parseAndRunQuery('SELECT COUNT(*) AS total FROM earthquakes');
|
|
225
88
|
};
|
|
226
89
|
|
|
227
|
-
return (
|
|
228
|
-
<RoomShell roomStore={roomStore}>
|
|
229
|
-
<div>
|
|
230
|
-
<button onClick={handleExecute}>Run Query</button>
|
|
231
|
-
<SqlEditorModal isOpen={true} onClose={() => {}} />
|
|
232
|
-
</div>
|
|
233
|
-
</RoomShell>
|
|
234
|
-
);
|
|
90
|
+
return <Button onClick={() => void run()}>Run query</Button>;
|
|
235
91
|
}
|
|
236
92
|
```
|
|
237
93
|
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
- `sqlEditor.runQuery(query: string)`: Execute a SQL query
|
|
241
|
-
- `sqlEditor.createQueryTab(initialQuery?: string)`: Create a new query tab
|
|
242
|
-
- `sqlEditor.deleteQueryTab(queryId: string)`: Delete a query tab
|
|
243
|
-
- `sqlEditor.renameQueryTab(queryId: string, newName: string)`: Rename a query tab
|
|
244
|
-
- `sqlEditor.updateQueryText(queryId: string, queryText: string)`: Update query text
|
|
245
|
-
- `sqlEditor.setSelectedQueryId(queryId: string)`: Set the selected query tab
|
|
246
|
-
- `sqlEditor.getCurrentQuery(defaultQuery?: string)`: Get current query text
|
|
247
|
-
|
|
248
|
-
## Available Components
|
|
249
|
-
|
|
250
|
-
### SqlEditor
|
|
94
|
+
## Standalone editor (without SQLRooms store)
|
|
251
95
|
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
```tsx
|
|
255
|
-
import {SqlEditor} from '@sqlrooms/sql-editor';
|
|
256
|
-
import {RoomShell} from '@sqlrooms/room-shell';
|
|
257
|
-
import {roomStore} from './store';
|
|
258
|
-
|
|
259
|
-
<RoomShell roomStore={roomStore}>
|
|
260
|
-
<SqlEditor
|
|
261
|
-
isOpen={boolean}
|
|
262
|
-
onClose={() => void}
|
|
263
|
-
schema="main"
|
|
264
|
-
documentationPanel={ReactNode}
|
|
265
|
-
/>
|
|
266
|
-
</RoomShell>
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
### SqlMonacoEditor
|
|
270
|
-
|
|
271
|
-
A standalone SQL-specific Monaco editor component. Can be used independently without RoomShell.
|
|
96
|
+
`SqlMonacoEditor` can be used independently:
|
|
272
97
|
|
|
273
98
|
```tsx
|
|
274
99
|
import {SqlMonacoEditor} from '@sqlrooms/sql-editor';
|
|
275
100
|
import {useState} from 'react';
|
|
276
101
|
|
|
277
|
-
function
|
|
278
|
-
const [
|
|
279
|
-
|
|
280
|
-
const handleExecute = () => {
|
|
281
|
-
// Execute the query using your own logic
|
|
282
|
-
console.log('Executing query:', query);
|
|
283
|
-
};
|
|
284
|
-
|
|
285
|
-
return (
|
|
286
|
-
<>
|
|
287
|
-
<SqlMonacoEditor value={query} onChange={setQuery} height="400px" />
|
|
288
|
-
<button onClick={handleExecute}>Execute</button>
|
|
289
|
-
</>
|
|
290
|
-
);
|
|
291
|
-
}
|
|
292
|
-
```
|
|
293
|
-
|
|
294
|
-
### SqlEditorModal
|
|
295
|
-
|
|
296
|
-
A modal wrapper around the SQL editor. Must be used within a RoomShell.
|
|
297
|
-
|
|
298
|
-
```tsx
|
|
299
|
-
import {SqlEditorModal} from '@sqlrooms/sql-editor';
|
|
300
|
-
import {useDisclosure} from '@sqlrooms/ui';
|
|
301
|
-
import {RoomShell} from '@sqlrooms/room-shell';
|
|
302
|
-
import {roomStore} from './store';
|
|
303
|
-
|
|
304
|
-
function EditorWithModal() {
|
|
305
|
-
const {isOpen, onOpen, onClose} = useDisclosure();
|
|
306
|
-
|
|
307
|
-
return (
|
|
308
|
-
<RoomShell roomStore={roomStore}>
|
|
309
|
-
<button onClick={onOpen}>Open SQL Editor</button>
|
|
310
|
-
<SqlEditorModal isOpen={isOpen} onClose={onClose} />
|
|
311
|
-
</RoomShell>
|
|
312
|
-
);
|
|
102
|
+
export function StandaloneEditor() {
|
|
103
|
+
const [sql, setSql] = useState('SELECT 1');
|
|
104
|
+
return <SqlMonacoEditor value={sql} onChange={(v) => setSql(v ?? '')} height="320px" />;
|
|
313
105
|
}
|
|
314
106
|
```
|
|
315
107
|
|
|
316
|
-
|
|
108
|
+
## Related packages
|
|
317
109
|
|
|
318
|
-
|
|
110
|
+
- `@sqlrooms/sql-editor-config` for persisted SQL editor config schema
|
|
111
|
+
- `@sqlrooms/duckdb` for query execution and table state
|
|
112
|
+
- `@sqlrooms/schema-tree` for database tree rendering
|
|
319
113
|
|
|
320
|
-
|
|
321
|
-
import {CreateTableModal} from '@sqlrooms/sql-editor';
|
|
322
|
-
import {useDisclosure} from '@sqlrooms/ui';
|
|
323
|
-
import {RoomShell} from '@sqlrooms/room-shell';
|
|
324
|
-
import {roomStore} from './store';
|
|
325
|
-
import {useRoomStore} from './store';
|
|
326
|
-
|
|
327
|
-
function TableCreator() {
|
|
328
|
-
const {isOpen, onOpen, onClose} = useDisclosure();
|
|
329
|
-
const addOrUpdateSqlQueryDataSource = useRoomStore(
|
|
330
|
-
(state) => state.room.addOrUpdateSqlQueryDataSource,
|
|
331
|
-
);
|
|
332
|
-
|
|
333
|
-
return (
|
|
334
|
-
<RoomShell roomStore={roomStore}>
|
|
335
|
-
<button onClick={onOpen}>Create Table from Results</button>
|
|
336
|
-
<CreateTableModal
|
|
337
|
-
isOpen={isOpen}
|
|
338
|
-
onClose={onClose}
|
|
339
|
-
onAddOrUpdateSqlQuery={addOrUpdateSqlQueryDataSource}
|
|
340
|
-
query="SELECT * FROM users"
|
|
341
|
-
/>
|
|
342
|
-
</RoomShell>
|
|
343
|
-
);
|
|
344
|
-
}
|
|
345
|
-
```
|
|
346
|
-
|
|
347
|
-
### SqlQueryDataSourcesPanel
|
|
348
|
-
|
|
349
|
-
A panel showing available data sources for SQL queries. Must be used within a RoomShell.
|
|
350
|
-
|
|
351
|
-
```tsx
|
|
352
|
-
import {SqlQueryDataSourcesPanel} from '@sqlrooms/sql-editor';
|
|
353
|
-
import {RoomShell} from '@sqlrooms/room-shell';
|
|
354
|
-
import {roomStore} from './store';
|
|
355
|
-
|
|
356
|
-
<RoomShell roomStore={roomStore}>
|
|
357
|
-
<SqlQueryDataSourcesPanel
|
|
358
|
-
onSelectTable={(tableName) => {
|
|
359
|
-
console.log(`Selected table: ${tableName}`);
|
|
360
|
-
}}
|
|
361
|
-
/>
|
|
362
|
-
</RoomShell>;
|
|
363
|
-
```
|
|
364
|
-
|
|
365
|
-
## Props
|
|
366
|
-
|
|
367
|
-
### SqlEditor Props
|
|
368
|
-
|
|
369
|
-
| Prop | Type | Default | Description |
|
|
370
|
-
| ------------------ | --------- | --------- | ------------------------------------- |
|
|
371
|
-
| isOpen | boolean | - | Whether the editor is open |
|
|
372
|
-
| onClose | function | - | Callback when the editor is closed |
|
|
373
|
-
| schema | string | 'main' | Default schema to use for queries |
|
|
374
|
-
| documentationPanel | ReactNode | undefined | Custom documentation panel to display |
|
|
375
|
-
|
|
376
|
-
### SqlMonacoEditor Props
|
|
377
|
-
|
|
378
|
-
| Prop | Type | Default | Description |
|
|
379
|
-
| ---------------- | ----------- | ------- | --------------------------------------- |
|
|
380
|
-
| value | string | '' | The SQL query text |
|
|
381
|
-
| onChange | function | - | Callback when the query text changes |
|
|
382
|
-
| height | string | '300px' | Height of the editor |
|
|
383
|
-
| readOnly | boolean | false | Whether the editor is read-only |
|
|
384
|
-
| theme | string | 'dark' | Editor theme ('dark' or 'light') |
|
|
385
|
-
| tableSchemas | DataTable[] | [] | Table schemas for autocompletion |
|
|
386
|
-
| customKeywords | string[] | [] | Custom SQL keywords for autocompletion |
|
|
387
|
-
| customFunctions | string[] | [] | Custom SQL functions for autocompletion |
|
|
388
|
-
| getLatestSchemas | function | - | Callback to get latest table schemas |
|
|
389
|
-
| className | string | - | Additional CSS class names |
|
|
390
|
-
| options | object | - | Monaco editor options |
|
|
391
|
-
| onMount | function | - | Callback when editor is mounted |
|
|
392
|
-
|
|
393
|
-
### SqlEditorModal Props
|
|
394
|
-
|
|
395
|
-
| Prop | Type | Default | Description |
|
|
396
|
-
| ------------------ | --------- | --------- | ------------------------------------- |
|
|
397
|
-
| isOpen | boolean | - | Whether the modal is open |
|
|
398
|
-
| onClose | function | - | Callback when the modal is closed |
|
|
399
|
-
| schema | string | 'main' | Default schema to use for queries |
|
|
400
|
-
| documentationPanel | ReactNode | undefined | Custom documentation panel to display |
|
|
401
|
-
|
|
402
|
-
### CreateTableModal Props
|
|
403
|
-
|
|
404
|
-
| Prop | Type | Default | Description |
|
|
405
|
-
| --------------------- | -------- | ------- | --------------------------------- |
|
|
406
|
-
| isOpen | boolean | - | Whether the modal is open |
|
|
407
|
-
| onClose | function | - | Callback when the modal is closed |
|
|
408
|
-
| onAddOrUpdateSqlQuery | function | - | Callback when a table is created |
|
|
409
|
-
| query | string | - | SQL query that generated the data |
|
|
410
|
-
|
|
411
|
-
## Configuration
|
|
412
|
-
|
|
413
|
-
The SQL editor can be configured through the Zustand store.
|
|
414
|
-
|
|
415
|
-
```tsx
|
|
416
|
-
const config = createDefaultSqlEditorConfig();
|
|
417
|
-
// Customize if needed
|
|
418
|
-
sqlEditor.config.queries = [
|
|
419
|
-
{id: 'default', name: 'Untitled', query: 'SELECT * FROM users LIMIT 10;'},
|
|
420
|
-
];
|
|
421
|
-
sqlEditor.config.selectedQueryId = 'default';
|
|
422
|
-
|
|
423
|
-
// Use in store creation
|
|
424
|
-
const {roomStore} = createRoomStore({
|
|
425
|
-
...createRoomShellSlice({
|
|
426
|
-
config: {
|
|
427
|
-
...config,
|
|
428
|
-
// other config options
|
|
429
|
-
},
|
|
430
|
-
}),
|
|
431
|
-
...createSqlEditorSlice(),
|
|
432
|
-
});
|
|
433
|
-
```
|
|
114
|
+
## Example apps
|
|
434
115
|
|
|
435
|
-
|
|
116
|
+
- https://github.com/sqlrooms/examples/tree/main/query
|
|
117
|
+
- https://github.com/sqlrooms/examples/tree/main/query-websocket
|
package/dist/SqlEditor.js
CHANGED
|
@@ -27,7 +27,7 @@ const SqlEditor = React.memo((props) => {
|
|
|
27
27
|
const handleCreateTable = useCallback(() => {
|
|
28
28
|
setCreateTableModalOpen(true);
|
|
29
29
|
}, []);
|
|
30
|
-
return (_jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(SqlEditorHeader, { title: "SQL Editor", showDocs: showDocs, documentationPanel: documentationPanel, onToggleDocs: handleToggleDocs }), _jsx("div", { className: "bg-muted h-full
|
|
30
|
+
return (_jsxs("div", { className: "relative flex h-full w-full flex-col overflow-hidden", children: [_jsx(SqlEditorHeader, { title: "SQL Editor", showDocs: showDocs, documentationPanel: documentationPanel, onToggleDocs: handleToggleDocs }), _jsx("div", { className: "bg-muted h-full grow", children: _jsxs(ResizablePanelGroup, { direction: "horizontal", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: showDocs ? 70 : 100, children: _jsxs(ResizablePanelGroup, { direction: "vertical", className: "h-full", children: [_jsx(ResizablePanel, { defaultSize: 50, className: "flex flex-row", children: _jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, { defaultSize: 20, children: _jsx(TableStructurePanel, { schema: schema }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 80, children: _jsx(QueryEditorPanel, {}) })] }) }), _jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 50, children: _jsx(QueryResultPanel, { onRowClick: queryResultProps?.onRowClick, onRowDoubleClick: queryResultProps?.onRowDoubleClick, renderActions: () => (_jsx("div", { className: "flex gap-2", children: _jsxs(Button, { size: "xs", onClick: handleCreateTable, children: [_jsx(PlusIcon, { className: "h-4 w-4" }), "New table"] }) })) }) })] }) }), showDocs && (_jsxs(_Fragment, { children: [_jsx(ResizableHandle, { withHandle: true }), _jsx(ResizablePanel, { defaultSize: 30, children: documentationPanel })] }))] }) }), _jsx(CreateTableModal, { query: lastQuery, isOpen: createTableModalOpen, onClose: () => setCreateTableModalOpen(false), allowMultipleStatements: true, showSchemaSelection: true })] }));
|
|
31
31
|
});
|
|
32
32
|
SqlEditor.displayName = 'SqlEditor';
|
|
33
33
|
export default SqlEditor;
|
package/dist/SqlEditor.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SqlEditor.js","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,eAAe,EACf,cAAc,EACd,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,QAAQ,EAAC,MAAM,cAAc,CAAC;AACtC,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAC,gBAAgB,EAAC,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAC,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EACL,mBAAmB,GAEpB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAuBvD,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAiB,CAAC,KAAK,EAAE,EAAE;IACrD,MAAM,EAAC,MAAM,GAAG,GAAG,EAAE,kBAAkB,EAAE,gBAAgB,EAAC,GAAG,KAAK,CAAC;IAEnE,MAAM,SAAS,GAAG,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE;QAC5C,MAAM,UAAU,GAAG,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC;QACtD,MAAM,EAAE,GAAG,CAAC,CAAC,SAAS,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;QACpD,IAAI,EAAE,EAAE,MAAM,KAAK,SAAS,IAAI,EAAE,EAAE,IAAI,KAAK,QAAQ;YAAE,OAAO,EAAE,CAAC,KAAK,CAAC;QACvE,OAAO,CAAC,CAAC,SAAS,CAAC,eAAe,EAAE,CAAC;IACvC,CAAC,CAAC,CAAC;IACH,WAAW;IACX,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,oBAAoB,EAAE,uBAAuB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExE,WAAW;IACX,MAAM,gBAAgB,GAAG,WAAW,CAAC,CAAC,IAAa,EAAE,EAAE;QACrD,WAAW,CAAC,IAAI,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,iBAAiB,GAAG,WAAW,CAAC,GAAG,EAAE;QACzC,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,eAAK,SAAS,EAAC,sDAAsD,aACnE,KAAC,eAAe,IACd,KAAK,EAAC,YAAY,EAClB,QAAQ,EAAE,QAAQ,EAClB,kBAAkB,EAAE,kBAAkB,EACtC,YAAY,EAAE,gBAAgB,GAC9B,EACF,cAAK,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"SqlEditor.js","sourceRoot":"","sources":["../src/SqlEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Button,\n ResizableHandle,\n ResizablePanel,\n ResizablePanelGroup,\n} from '@sqlrooms/ui';\nimport {PlusIcon} from 'lucide-react';\nimport React, {useCallback, useState} from 'react';\nimport CreateTableModal from './components/CreateTableModal';\nimport {QueryEditorPanel} from './components/QueryEditorPanel';\nimport {QueryResultPanel} from './components/QueryResultPanel';\nimport {SqlEditorHeader} from './components/SqlEditorHeader';\nimport {\n TableStructurePanel,\n TableStructurePanelProps,\n} from './components/TableStructurePanel';\nimport {useStoreWithSqlEditor} from './SqlEditorSlice';\n\nexport type SqlEditorProps = {\n /** The database schema to use. Defaults to '*'.\n * If '*' is provided, all tables will be shown.\n * If a function is provided, it will be used to filter the tables. */\n schema?: TableStructurePanelProps['schema'];\n /** Whether the SQL editor is currently visible */\n isOpen: boolean;\n /** Optional component to render SQL documentation in the side panel */\n documentationPanel?: React.ReactNode;\n /**\n * Props forwarded to `QueryResultPanel` to configure result behavior.\n * This provides a single entry point for table interactions.\n */\n queryResultProps?: Pick<\n React.ComponentProps<typeof QueryResultPanel>,\n 'onRowClick' | 'onRowDoubleClick'\n >;\n /** Callback fired when the SQL editor should be closed */\n onClose: () => void;\n};\n\nconst SqlEditor = React.memo<SqlEditorProps>((props) => {\n const {schema = '*', documentationPanel, queryResultProps} = props;\n\n const lastQuery = useStoreWithSqlEditor((s) => {\n const selectedId = s.sqlEditor.config.selectedQueryId;\n const qr = s.sqlEditor.queryResultsById[selectedId];\n if (qr?.status === 'success' && qr?.type === 'select') return qr.query;\n return s.sqlEditor.getCurrentQuery();\n });\n // UI state\n const [showDocs, setShowDocs] = useState(false);\n const [createTableModalOpen, setCreateTableModalOpen] = useState(false);\n\n // Handlers\n const handleToggleDocs = useCallback((show: boolean) => {\n setShowDocs(show);\n }, []);\n\n const handleCreateTable = useCallback(() => {\n setCreateTableModalOpen(true);\n }, []);\n\n return (\n <div className=\"relative flex h-full w-full flex-col overflow-hidden\">\n <SqlEditorHeader\n title=\"SQL Editor\"\n showDocs={showDocs}\n documentationPanel={documentationPanel}\n onToggleDocs={handleToggleDocs}\n />\n <div className=\"bg-muted h-full grow\">\n <ResizablePanelGroup direction=\"horizontal\" className=\"h-full\">\n <ResizablePanel defaultSize={showDocs ? 70 : 100}>\n <ResizablePanelGroup direction=\"vertical\" className=\"h-full\">\n <ResizablePanel defaultSize={50} className=\"flex flex-row\">\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={20}>\n <TableStructurePanel schema={schema} />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={80}>\n <QueryEditorPanel />\n </ResizablePanel>\n </ResizablePanelGroup>\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={50}>\n <QueryResultPanel\n onRowClick={queryResultProps?.onRowClick}\n onRowDoubleClick={queryResultProps?.onRowDoubleClick}\n renderActions={() => (\n <div className=\"flex gap-2\">\n <Button size=\"xs\" onClick={handleCreateTable}>\n <PlusIcon className=\"h-4 w-4\" />\n New table\n </Button>\n </div>\n )}\n />\n </ResizablePanel>\n </ResizablePanelGroup>\n </ResizablePanel>\n {showDocs && (\n <>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={30}>\n {documentationPanel}\n </ResizablePanel>\n </>\n )}\n </ResizablePanelGroup>\n </div>\n <CreateTableModal\n query={lastQuery}\n isOpen={createTableModalOpen}\n onClose={() => setCreateTableModalOpen(false)}\n allowMultipleStatements={true}\n showSchemaSelection={true}\n />\n </div>\n );\n});\nSqlEditor.displayName = 'SqlEditor';\n\nexport default SqlEditor;\n"]}
|
package/dist/SqlEditorModal.js
CHANGED
|
@@ -39,7 +39,7 @@ const SqlEditorModal = (props) => {
|
|
|
39
39
|
if (!open)
|
|
40
40
|
onClose();
|
|
41
41
|
}, [onClose]);
|
|
42
|
-
return (_jsxs(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: [_jsx(DialogOverlay, { className: "bg-background/80" }), _jsxs(DialogContent, { className: "h-
|
|
42
|
+
return (_jsxs(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: [_jsx(DialogOverlay, { className: "bg-background/80" }), _jsxs(DialogContent, { className: "h-screen max-h-screen w-screen max-w-[100vw] p-3", children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: "SQL Editor" }), _jsx(DialogDescription, { children: "SQL editor for querying and managing database tables" })] }), _jsx(Suspense, { fallback: _jsx(SpinnerPane, { h: "100%" }), children: _jsx(SqlEditor, { ...props }) })] })] }));
|
|
43
43
|
};
|
|
44
44
|
export default SqlEditorModal;
|
|
45
45
|
//# sourceMappingURL=SqlEditorModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SqlEditorModal.js","sourceRoot":"","sources":["../src/SqlEditorModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAc,EAAC,QAAQ,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,SAA2B,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAC,GAAG,KAAK,CAAC;IAEhC,4CAA4C;IAC5C,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;IACvB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,aAClD,KAAC,aAAa,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC9C,MAAC,aAAa,IAAC,SAAS,EAAC,
|
|
1
|
+
{"version":3,"file":"SqlEditorModal.js","sourceRoot":"","sources":["../src/SqlEditorModal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EACL,MAAM,EACN,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACb,WAAW,EACX,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAc,EAAC,QAAQ,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AACnD,OAAO,SAA2B,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,cAAc,GAA6B,CAAC,KAAK,EAAE,EAAE;IACzD,MAAM,EAAC,MAAM,EAAE,OAAO,EAAC,GAAG,KAAK,CAAC;IAEhC,4CAA4C;IAC5C,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,IAAa,EAAE,EAAE;QAChB,IAAI,CAAC,IAAI;YAAE,OAAO,EAAE,CAAC;IACvB,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,gBAAgB,aAClD,KAAC,aAAa,IAAC,SAAS,EAAC,kBAAkB,GAAG,EAC9C,MAAC,aAAa,IAAC,SAAS,EAAC,kDAAkD,aACzE,MAAC,YAAY,IAAC,SAAS,EAAC,SAAS,aAC/B,KAAC,WAAW,6BAAyB,EACrC,KAAC,iBAAiB,uEAEE,IACP,EACf,KAAC,QAAQ,IAAC,QAAQ,EAAE,KAAC,WAAW,IAAC,CAAC,EAAC,MAAM,GAAG,YAC1C,KAAC,SAAS,OAAK,KAAK,GAAI,GACf,IACG,IACT,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["'use client';\n\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogHeader,\n DialogOverlay,\n DialogTitle,\n SpinnerPane,\n} from '@sqlrooms/ui';\nimport React, {Suspense, useCallback} from 'react';\nimport SqlEditor, {SqlEditorProps} from './SqlEditor';\n\n/**\n * A modal wrapper for the SQL Editor component that provides a full-screen dialog interface.\n *\n * This component wraps the main SqlEditor component in a modal dialog, making it suitable for\n * overlay/popup usage scenarios. It inherits all props from SqlEditorProps and handles the\n * modal-specific behavior.\n *\n * @example\n * ```tsx\n * <SqlEditorModal\n * isOpen={true}\n * onClose={() => setIsOpen(false)}\n * sqlEditorConfig={config}\n * onChange={handleConfigChange}\n * />\n * ```\n *\n * @see {@link SqlEditor} for detailed documentation of all available props\n *\n * @see {@link SqlEditorProps}\n * The component accepts all props from SqlEditorProps:\n * - `isOpen` - Whether the SQL editor modal is currently visible\n * - `onClose` - Callback fired when the modal should be closed\n * - `sqlEditorConfig` - Configuration object containing queries and selected query state\n * - `onChange` - Callback fired when the SQL editor configuration changes\n * - `schema` - Optional database schema to use for queries (defaults to 'main')\n * - `documentationPanel` - Optional component to render SQL documentation in the side panel\n * - `onAddOrUpdateSqlQuery` - Callback fired when a new table should be created from query results\n */\nconst SqlEditorModal: React.FC<SqlEditorProps> = (props) => {\n const {isOpen, onClose} = props;\n\n // Memoize the handler to prevent re-renders\n const handleOpenChange = useCallback(\n (open: boolean) => {\n if (!open) onClose();\n },\n [onClose],\n );\n\n return (\n <Dialog open={isOpen} onOpenChange={handleOpenChange}>\n <DialogOverlay className=\"bg-background/80\" />\n <DialogContent className=\"h-screen max-h-screen w-screen max-w-[100vw] p-3\">\n <DialogHeader className=\"sr-only\">\n <DialogTitle>SQL Editor</DialogTitle>\n <DialogDescription>\n SQL editor for querying and managing database tables\n </DialogDescription>\n </DialogHeader>\n <Suspense fallback={<SpinnerPane h=\"100%\" />}>\n <SqlEditor {...props} />\n </Suspense>\n </DialogContent>\n </Dialog>\n );\n};\n\nexport default SqlEditorModal;\n"]}
|
package/dist/SqlEditorSlice.d.ts
CHANGED
|
@@ -28,6 +28,8 @@ export declare function isQueryWithResult(queryResult: QueryResult | undefined):
|
|
|
28
28
|
};
|
|
29
29
|
export type SqlEditorSliceState = {
|
|
30
30
|
sqlEditor: {
|
|
31
|
+
initialize?: () => Promise<void>;
|
|
32
|
+
destroy?: () => Promise<void>;
|
|
31
33
|
config: SqlEditorSliceConfig;
|
|
32
34
|
/**
|
|
33
35
|
* Query results keyed by queryId (tab id).
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SqlEditorSlice.d.ts","sourceRoot":"","sources":["../src/SqlEditorSlice.tsx"],"names":[],"mappings":"AAQA,OAAO,
|
|
1
|
+
{"version":3,"file":"SqlEditorSlice.d.ts","sourceRoot":"","sources":["../src/SqlEditorSlice.tsx"],"names":[],"mappings":"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"}
|