@quereus/shared-ui 4.3.1 → 4.4.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 +103 -103
- package/dist/index.cjs +0 -2
- package/dist/index.js +0 -6
- package/package.json +2 -1
- package/dist/index.cjs.map +0 -1
- package/dist/index.js.map +0 -1
package/README.md
CHANGED
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
# @quereus/shared-ui
|
|
2
|
-
|
|
3
|
-
Shared React UI components for Quereus applications. Provides common components used across quoomb-web and other Quereus-based UIs.
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install @quereus/shared-ui
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Usage
|
|
12
|
-
|
|
13
|
-
```typescript
|
|
14
|
-
import { ResultsTable, QueryEditor, SchemaViewer } from '@quereus/shared-ui';
|
|
15
|
-
import '@quereus/shared-ui/styles';
|
|
16
|
-
|
|
17
|
-
function App() {
|
|
18
|
-
const [results, setResults] = useState(null);
|
|
19
|
-
|
|
20
|
-
return (
|
|
21
|
-
<div>
|
|
22
|
-
<QueryEditor
|
|
23
|
-
onExecute={async (sql) => {
|
|
24
|
-
const rows = await db.all(sql);
|
|
25
|
-
setResults(rows);
|
|
26
|
-
}}
|
|
27
|
-
/>
|
|
28
|
-
{results && <ResultsTable data={results} />}
|
|
29
|
-
</div>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
## Components
|
|
35
|
-
|
|
36
|
-
### ResultsTable
|
|
37
|
-
|
|
38
|
-
Displays query results in a tabular format:
|
|
39
|
-
|
|
40
|
-
```typescript
|
|
41
|
-
<ResultsTable
|
|
42
|
-
data={rows}
|
|
43
|
-
columns={['id', 'name', 'email']}
|
|
44
|
-
sortable={true}
|
|
45
|
-
onRowClick={(row) => console.log('Selected:', row)}
|
|
46
|
-
/>
|
|
47
|
-
```
|
|
48
|
-
|
|
49
|
-
### QueryEditor
|
|
50
|
-
|
|
51
|
-
SQL query input with syntax highlighting:
|
|
52
|
-
|
|
53
|
-
```typescript
|
|
54
|
-
<QueryEditor
|
|
55
|
-
initialValue="SELECT * FROM users"
|
|
56
|
-
onExecute={handleExecute}
|
|
57
|
-
placeholder="Enter SQL..."
|
|
58
|
-
/>
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### SchemaViewer
|
|
62
|
-
|
|
63
|
-
Display database schema with tables and columns:
|
|
64
|
-
|
|
65
|
-
```typescript
|
|
66
|
-
<SchemaViewer
|
|
67
|
-
tables={[
|
|
68
|
-
{ name: 'users', columns: ['id', 'name', 'email'] },
|
|
69
|
-
{ name: 'orders', columns: ['id', 'user_id', 'total'] }
|
|
70
|
-
]}
|
|
71
|
-
onTableSelect={(name) => console.log('Selected table:', name)}
|
|
72
|
-
/>
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
## Styles
|
|
76
|
-
|
|
77
|
-
Import the stylesheet for proper styling:
|
|
78
|
-
|
|
79
|
-
```typescript
|
|
80
|
-
import '@quereus/shared-ui/styles';
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
Or in CSS:
|
|
84
|
-
|
|
85
|
-
```css
|
|
86
|
-
@import '@quereus/shared-ui/dist/styles.css';
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
## Development
|
|
90
|
-
|
|
91
|
-
```bash
|
|
92
|
-
npm run build # Build components
|
|
93
|
-
npm run dev # Watch mode
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
## Related Packages
|
|
97
|
-
|
|
98
|
-
- [`quoomb-web`](../quoomb-web/) - Web-based SQL IDE using these components
|
|
99
|
-
|
|
100
|
-
## License
|
|
101
|
-
|
|
102
|
-
MIT
|
|
103
|
-
|
|
1
|
+
# @quereus/shared-ui
|
|
2
|
+
|
|
3
|
+
Shared React UI components for Quereus applications. Provides common components used across quoomb-web and other Quereus-based UIs.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @quereus/shared-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```typescript
|
|
14
|
+
import { ResultsTable, QueryEditor, SchemaViewer } from '@quereus/shared-ui';
|
|
15
|
+
import '@quereus/shared-ui/styles';
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
const [results, setResults] = useState(null);
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<div>
|
|
22
|
+
<QueryEditor
|
|
23
|
+
onExecute={async (sql) => {
|
|
24
|
+
const rows = await db.all(sql);
|
|
25
|
+
setResults(rows);
|
|
26
|
+
}}
|
|
27
|
+
/>
|
|
28
|
+
{results && <ResultsTable data={results} />}
|
|
29
|
+
</div>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Components
|
|
35
|
+
|
|
36
|
+
### ResultsTable
|
|
37
|
+
|
|
38
|
+
Displays query results in a tabular format:
|
|
39
|
+
|
|
40
|
+
```typescript
|
|
41
|
+
<ResultsTable
|
|
42
|
+
data={rows}
|
|
43
|
+
columns={['id', 'name', 'email']}
|
|
44
|
+
sortable={true}
|
|
45
|
+
onRowClick={(row) => console.log('Selected:', row)}
|
|
46
|
+
/>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### QueryEditor
|
|
50
|
+
|
|
51
|
+
SQL query input with syntax highlighting:
|
|
52
|
+
|
|
53
|
+
```typescript
|
|
54
|
+
<QueryEditor
|
|
55
|
+
initialValue="SELECT * FROM users"
|
|
56
|
+
onExecute={handleExecute}
|
|
57
|
+
placeholder="Enter SQL..."
|
|
58
|
+
/>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### SchemaViewer
|
|
62
|
+
|
|
63
|
+
Display database schema with tables and columns:
|
|
64
|
+
|
|
65
|
+
```typescript
|
|
66
|
+
<SchemaViewer
|
|
67
|
+
tables={[
|
|
68
|
+
{ name: 'users', columns: ['id', 'name', 'email'] },
|
|
69
|
+
{ name: 'orders', columns: ['id', 'user_id', 'total'] }
|
|
70
|
+
]}
|
|
71
|
+
onTableSelect={(name) => console.log('Selected table:', name)}
|
|
72
|
+
/>
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Styles
|
|
76
|
+
|
|
77
|
+
Import the stylesheet for proper styling:
|
|
78
|
+
|
|
79
|
+
```typescript
|
|
80
|
+
import '@quereus/shared-ui/styles';
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
Or in CSS:
|
|
84
|
+
|
|
85
|
+
```css
|
|
86
|
+
@import '@quereus/shared-ui/dist/styles.css';
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
## Development
|
|
90
|
+
|
|
91
|
+
```bash
|
|
92
|
+
npm run build # Build components
|
|
93
|
+
npm run dev # Watch mode
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Related Packages
|
|
97
|
+
|
|
98
|
+
- [`quoomb-web`](../quoomb-web/) - Web-based SQL IDE using these components
|
|
99
|
+
|
|
100
|
+
## License
|
|
101
|
+
|
|
102
|
+
MIT
|
|
103
|
+
|
package/dist/index.cjs
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@quereus/shared-ui",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.4.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Quoomb UI Kit - Shared UI components for Quoomb applications",
|
|
6
6
|
"publisher": "Got Choices Foundation",
|
|
@@ -28,6 +28,7 @@
|
|
|
28
28
|
"build": "tsc && vite build --mode lib",
|
|
29
29
|
"dev": "vite build --mode lib --watch",
|
|
30
30
|
"lint": "echo 'No lint configured'",
|
|
31
|
+
"//test": "NOTE: no unit tests, intentionally — src/index.ts ships zero components right now (an `export {}` placeholder). Once real components land here, verify them via the consuming app (quoomb-web) rather than isolated unit specs; --passWithNoTests stays so the empty glob doesn't fail the build.",
|
|
31
32
|
"test": "vitest run --passWithNoTests",
|
|
32
33
|
"typecheck": "tsc --noEmit",
|
|
33
34
|
"storybook": "storybook dev -p 6006",
|
package/dist/index.cjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["// Shared UI components for Quoomb applications\r\n// This package will contain reusable UI components like buttons, modals, etc.\r\n\r\n// TODO: Implement and export UI components\r\n// export { Button } from './Button.js';\r\n// export { Modal } from './Modal.js';\r\n// export { Toast } from './Toast.js';\r\n\r\n// For now, export a placeholder\r\nexport const placeholder = 'Shared UI components coming soon';\r\n"],"mappings":"mEASA,IAAa,EAAc"}
|
package/dist/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["// Shared UI components for Quoomb applications\r\n// This package will contain reusable UI components like buttons, modals, etc.\r\n\r\n// TODO: Implement and export UI components\r\n// export { Button } from './Button.js';\r\n// export { Modal } from './Modal.js';\r\n// export { Toast } from './Toast.js';\r\n\r\n// For now, export a placeholder\r\nexport const placeholder = 'Shared UI components coming soon';\r\n"],"mappings":";AASA,IAAa,IAAc"}
|