@geekmidas/studio 0.0.1 → 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/README.md +165 -0
- package/dist/server/hono.cjs +5 -5
- package/dist/server/hono.cjs.map +1 -1
- package/dist/server/hono.mjs +5 -5
- package/dist/server/hono.mjs.map +1 -1
- package/package.json +3 -3
- package/src/ui-assets.ts +5 -5
- package/ui/node_modules/.bin/tsc +2 -2
- package/ui/node_modules/.bin/tsserver +2 -2
- package/ui/node_modules/.bin/vite +2 -2
- package/ui/src/App.tsx +146 -47
- package/ui/src/components/FilterPanel.tsx +213 -0
- package/ui/src/components/RowDetail.tsx +85 -79
- package/ui/src/components/TableList.tsx +37 -30
- package/ui/src/components/TableView.tsx +374 -74
- package/ui/src/styles.css +167 -9
- package/ui/tsconfig.tsbuildinfo +1 -1
- package/ui/node_modules/.bin/browserslist +0 -21
- package/ui/node_modules/.bin/jiti +0 -21
- package/ui/node_modules/.bin/terser +0 -21
- package/ui/node_modules/.bin/tsx +0 -21
package/README.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
# @geekmidas/studio
|
|
2
|
+
|
|
3
|
+
A Supabase-style database browser and development tools dashboard for your applications. Browse tables, filter data, and monitor requests in real-time.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Database Browser** - Browse and query your PostgreSQL tables with a modern UI
|
|
8
|
+
- **Filtering** - Filter data with multiple operators (equals, contains, greater than, etc.)
|
|
9
|
+
- **Sorting** - Sort by any column in ascending or descending order
|
|
10
|
+
- **Pagination** - Cursor-based pagination for efficient data loading
|
|
11
|
+
- **Request Monitoring** - Built-in integration with [@geekmidas/telescope](../telescope) for request/log monitoring
|
|
12
|
+
- **Real-time Updates** - WebSocket support for live data updates
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
pnpm add @geekmidas/studio
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
### With `gkm dev` (Recommended)
|
|
23
|
+
|
|
24
|
+
The easiest way to use Studio is with the CLI's dev server. Add studio configuration to your `gkm.config.ts`:
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
// gkm.config.ts
|
|
28
|
+
export default {
|
|
29
|
+
routes: './src/endpoints/**/*.ts',
|
|
30
|
+
envParser: './src/config/env',
|
|
31
|
+
logger: './src/logger',
|
|
32
|
+
studio: {
|
|
33
|
+
enabled: true,
|
|
34
|
+
path: '/__studio',
|
|
35
|
+
schema: 'public',
|
|
36
|
+
},
|
|
37
|
+
};
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
Then run the dev server:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
gkm dev
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Studio will be available at `http://localhost:3000/__studio`
|
|
47
|
+
|
|
48
|
+
### Standalone Usage
|
|
49
|
+
|
|
50
|
+
For manual integration with a Hono application:
|
|
51
|
+
|
|
52
|
+
```typescript
|
|
53
|
+
import { Hono } from 'hono';
|
|
54
|
+
import { Studio } from '@geekmidas/studio';
|
|
55
|
+
import { InMemoryStorage } from '@geekmidas/telescope/storage/memory';
|
|
56
|
+
import { createStudioApp } from '@geekmidas/studio/server/hono';
|
|
57
|
+
import { db } from './database';
|
|
58
|
+
|
|
59
|
+
// Create Studio instance
|
|
60
|
+
const studio = new Studio({
|
|
61
|
+
monitoring: {
|
|
62
|
+
storage: new InMemoryStorage(),
|
|
63
|
+
},
|
|
64
|
+
data: {
|
|
65
|
+
db: db, // Your Kysely instance
|
|
66
|
+
cursor: { field: 'id', direction: 'desc' },
|
|
67
|
+
},
|
|
68
|
+
});
|
|
69
|
+
|
|
70
|
+
// Mount Studio routes
|
|
71
|
+
const app = new Hono();
|
|
72
|
+
app.route('/__studio', createStudioApp(studio));
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Configuration
|
|
76
|
+
|
|
77
|
+
### StudioOptions
|
|
78
|
+
|
|
79
|
+
| Option | Type | Default | Description |
|
|
80
|
+
|--------|------|---------|-------------|
|
|
81
|
+
| `enabled` | `boolean` | `true` | Enable/disable Studio |
|
|
82
|
+
| `path` | `string` | `'/__studio'` | URL path for the dashboard |
|
|
83
|
+
| `monitoring.storage` | `TelescopeStorage` | required | Storage backend for request monitoring |
|
|
84
|
+
| `monitoring.recordBody` | `boolean` | `true` | Record request/response bodies |
|
|
85
|
+
| `monitoring.maxBodySize` | `number` | `65536` | Max body size to record (bytes) |
|
|
86
|
+
| `monitoring.ignorePatterns` | `string[]` | `[]` | URL patterns to ignore |
|
|
87
|
+
| `data.db` | `Kysely<DB>` | required | Kysely database instance |
|
|
88
|
+
| `data.cursor` | `CursorConfig` | required | Default cursor configuration |
|
|
89
|
+
| `data.tableCursors` | `Record<string, CursorConfig>` | `{}` | Per-table cursor overrides |
|
|
90
|
+
| `data.excludeTables` | `string[]` | migration tables | Tables to hide from browser |
|
|
91
|
+
| `data.defaultPageSize` | `number` | `50` | Default rows per page (max: 100) |
|
|
92
|
+
|
|
93
|
+
## API Endpoints
|
|
94
|
+
|
|
95
|
+
Studio exposes a REST API for programmatic access:
|
|
96
|
+
|
|
97
|
+
| Endpoint | Description |
|
|
98
|
+
|----------|-------------|
|
|
99
|
+
| `GET /api/schema` | Get complete database schema |
|
|
100
|
+
| `GET /api/tables` | List all tables with basic info |
|
|
101
|
+
| `GET /api/tables/:name` | Get detailed table information |
|
|
102
|
+
| `GET /api/tables/:name/rows` | Query table data |
|
|
103
|
+
|
|
104
|
+
### Query Parameters for `/api/tables/:name/rows`
|
|
105
|
+
|
|
106
|
+
- `pageSize` - Number of rows per page (default: 50, max: 100)
|
|
107
|
+
- `cursor` - Pagination cursor for next/previous page
|
|
108
|
+
- `filter[column][operator]=value` - Filter conditions
|
|
109
|
+
- `sort=column:direction` - Sort configuration
|
|
110
|
+
|
|
111
|
+
### Filter Operators
|
|
112
|
+
|
|
113
|
+
| Operator | Description |
|
|
114
|
+
|----------|-------------|
|
|
115
|
+
| `eq` | Equals |
|
|
116
|
+
| `neq` | Not equals |
|
|
117
|
+
| `gt` | Greater than |
|
|
118
|
+
| `gte` | Greater than or equal |
|
|
119
|
+
| `lt` | Less than |
|
|
120
|
+
| `lte` | Less than or equal |
|
|
121
|
+
| `like` | SQL LIKE (case-sensitive) |
|
|
122
|
+
| `ilike` | SQL ILIKE (case-insensitive) |
|
|
123
|
+
| `in` | In array (comma-separated) |
|
|
124
|
+
| `nin` | Not in array |
|
|
125
|
+
| `is_null` | Is NULL |
|
|
126
|
+
| `is_not_null` | Is not NULL |
|
|
127
|
+
|
|
128
|
+
### Example API Requests
|
|
129
|
+
|
|
130
|
+
```bash
|
|
131
|
+
# Get all tables
|
|
132
|
+
curl http://localhost:3000/__studio/api/tables
|
|
133
|
+
|
|
134
|
+
# Get users table info
|
|
135
|
+
curl http://localhost:3000/__studio/api/tables/users
|
|
136
|
+
|
|
137
|
+
# Query with filtering and sorting
|
|
138
|
+
curl "http://localhost:3000/__studio/api/tables/users/rows?filter[status][eq]=active&sort=created_at:desc&pageSize=25"
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## Exports
|
|
142
|
+
|
|
143
|
+
```typescript
|
|
144
|
+
// Core
|
|
145
|
+
import { Studio } from '@geekmidas/studio';
|
|
146
|
+
|
|
147
|
+
// Data browser (for custom implementations)
|
|
148
|
+
import { DataBrowser } from '@geekmidas/studio/data';
|
|
149
|
+
|
|
150
|
+
// Hono adapter
|
|
151
|
+
import { createStudioApp } from '@geekmidas/studio/server/hono';
|
|
152
|
+
|
|
153
|
+
// Types
|
|
154
|
+
import {
|
|
155
|
+
Direction,
|
|
156
|
+
FilterOperator,
|
|
157
|
+
type StudioOptions,
|
|
158
|
+
type TableInfo,
|
|
159
|
+
type QueryResult,
|
|
160
|
+
} from '@geekmidas/studio';
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## License
|
|
164
|
+
|
|
165
|
+
MIT
|