@azmr/ui 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/LICENSE +1 -1
- package/README.md +73 -73
- package/dist/index.d.ts +2 -2
- package/package.json +12 -12
package/LICENSE
CHANGED
package/README.md
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
# @azmr/ui
|
|
2
|
-
|
|
3
|
-
React components wired to reactive Signals. The `Grid` component re-renders automatically when its Signal changes — no state management needed.
|
|
4
|
-
|
|
5
|
-
## Install
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
pnpm add @azmr/ui @azmr/core react react-dom
|
|
9
|
-
# or
|
|
10
|
-
npm install @azmr/ui @azmr/core react react-dom
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Grid
|
|
14
|
-
|
|
15
|
-
```tsx
|
|
16
|
-
import { Signal } from "@azmr/core";
|
|
17
|
-
import { Grid } from "@azmr/ui";
|
|
18
|
-
|
|
19
|
-
const customers = new Signal([
|
|
20
|
-
{ name: "Aroha", balance: 150 },
|
|
21
|
-
{ name: "Mere", balance: 320 },
|
|
22
|
-
]);
|
|
23
|
-
|
|
24
|
-
function App() {
|
|
25
|
-
return (
|
|
26
|
-
<Grid
|
|
27
|
-
signal={customers}
|
|
28
|
-
labels={{ name: "Customer", balance: "Balance ($)" }}
|
|
29
|
-
/>
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// Grid updates automatically
|
|
34
|
-
customers.set([...customers.peek(), { name: "Tane", balance: 0 }]);
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
## useSignal
|
|
38
|
-
|
|
39
|
-
Hook to subscribe any React component to a Signal.
|
|
40
|
-
|
|
41
|
-
```tsx
|
|
42
|
-
import { useSignal } from "@azmr/ui";
|
|
43
|
-
|
|
44
|
-
function Counter({ count }: { count: Signal<number> }) {
|
|
45
|
-
const value = useSignal(count); // push-based, no polling
|
|
46
|
-
return <span>{value}</span>;
|
|
47
|
-
}
|
|
48
|
-
```
|
|
49
|
-
|
|
50
|
-
## Grid Props
|
|
51
|
-
|
|
52
|
-
| Prop | Type | Description |
|
|
53
|
-
|---|---|---|
|
|
54
|
-
| `signal` | `Signal<T[]>` | Reactive data source |
|
|
55
|
-
| `columns` | `(keyof T)[]` | Optional column order |
|
|
56
|
-
| `labels` | `Partial<Record<keyof T, string>>` | Optional column label overrides |
|
|
57
|
-
| `emptyMessage` | `string` | Message shown when Signal is empty |
|
|
58
|
-
|
|
59
|
-
All cell values are rendered through React's JSX escaping — `dangerouslySetInnerHTML` is never used.
|
|
60
|
-
|
|
61
|
-
## Requirements
|
|
62
|
-
|
|
63
|
-
- Node.js ≥ 18
|
|
64
|
-
- React 18 or 19
|
|
65
|
-
- TypeScript ≥ 5 (types included)
|
|
66
|
-
|
|
67
|
-
## Documentation
|
|
68
|
-
|
|
69
|
-
Full docs at [docs.azmara.io](https://docs.azmara.io)
|
|
70
|
-
|
|
71
|
-
## License
|
|
72
|
-
|
|
73
|
-
MIT © [Azmara
|
|
1
|
+
# @azmr/ui
|
|
2
|
+
|
|
3
|
+
React components wired to reactive Signals. The `Grid` component re-renders automatically when its Signal changes — no state management needed.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
pnpm add @azmr/ui @azmr/core react react-dom
|
|
9
|
+
# or
|
|
10
|
+
npm install @azmr/ui @azmr/core react react-dom
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Grid
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
import { Signal } from "@azmr/core";
|
|
17
|
+
import { Grid } from "@azmr/ui";
|
|
18
|
+
|
|
19
|
+
const customers = new Signal([
|
|
20
|
+
{ name: "Aroha", balance: 150 },
|
|
21
|
+
{ name: "Mere", balance: 320 },
|
|
22
|
+
]);
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return (
|
|
26
|
+
<Grid
|
|
27
|
+
signal={customers}
|
|
28
|
+
labels={{ name: "Customer", balance: "Balance ($)" }}
|
|
29
|
+
/>
|
|
30
|
+
);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Grid updates automatically
|
|
34
|
+
customers.set([...customers.peek(), { name: "Tane", balance: 0 }]);
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## useSignal
|
|
38
|
+
|
|
39
|
+
Hook to subscribe any React component to a Signal.
|
|
40
|
+
|
|
41
|
+
```tsx
|
|
42
|
+
import { useSignal } from "@azmr/ui";
|
|
43
|
+
|
|
44
|
+
function Counter({ count }: { count: Signal<number> }) {
|
|
45
|
+
const value = useSignal(count); // push-based, no polling
|
|
46
|
+
return <span>{value}</span>;
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Grid Props
|
|
51
|
+
|
|
52
|
+
| Prop | Type | Description |
|
|
53
|
+
|---|---|---|
|
|
54
|
+
| `signal` | `Signal<T[]>` | Reactive data source |
|
|
55
|
+
| `columns` | `(keyof T)[]` | Optional column order |
|
|
56
|
+
| `labels` | `Partial<Record<keyof T, string>>` | Optional column label overrides |
|
|
57
|
+
| `emptyMessage` | `string` | Message shown when Signal is empty |
|
|
58
|
+
|
|
59
|
+
All cell values are rendered through React's JSX escaping — `dangerouslySetInnerHTML` is never used.
|
|
60
|
+
|
|
61
|
+
## Requirements
|
|
62
|
+
|
|
63
|
+
- Node.js ≥ 18
|
|
64
|
+
- React 18 or 19
|
|
65
|
+
- TypeScript ≥ 5 (types included)
|
|
66
|
+
|
|
67
|
+
## Documentation
|
|
68
|
+
|
|
69
|
+
Full docs at [docs.azmara.io](https://docs.azmara.io)
|
|
70
|
+
|
|
71
|
+
## License
|
|
72
|
+
|
|
73
|
+
MIT © [Azmara Labs](https://azmara.io)
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
import { Signal } from '@azmr/core';
|
|
3
3
|
|
|
4
4
|
interface GridProps<T extends Record<string, unknown>> {
|
|
@@ -13,7 +13,7 @@ interface GridProps<T extends Record<string, unknown>> {
|
|
|
13
13
|
* A reactive data grid that automatically re-renders when the Signal updates.
|
|
14
14
|
* All cell values are rendered via React's JSX escaping — no dangerouslySetInnerHTML.
|
|
15
15
|
*/
|
|
16
|
-
declare function Grid<T extends Record<string, unknown>>({ signal, columns, labels, emptyMessage, }: GridProps<T>):
|
|
16
|
+
declare function Grid<T extends Record<string, unknown>>({ signal, columns, labels, emptyMessage, }: GridProps<T>): react.JSX.Element;
|
|
17
17
|
|
|
18
18
|
/**
|
|
19
19
|
* React hook that subscribes to a Signal and triggers re-renders on change.
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@azmr/ui",
|
|
3
|
-
"version": "0.0
|
|
4
|
-
"description": "React UI components wired to reactive Signals
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "React UI components wired to reactive Signals — Grid, useSignal",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"author": "Alshafaraz Gazi <alshafaraz.gazi@gmail.com>",
|
|
8
8
|
"homepage": "https://docs.azmara.io",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
|
-
"url": "git+https://github.com/
|
|
11
|
+
"url": "git+https://github.com/azmara-labs/azmara-platform.git",
|
|
12
12
|
"directory": "packages/ui"
|
|
13
13
|
},
|
|
14
14
|
"keywords": [
|
|
@@ -35,22 +35,22 @@
|
|
|
35
35
|
}
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@azmr/core": "0.0.
|
|
38
|
+
"@azmr/core": "0.0.2"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"react": "^18.0.0 || ^19.0.0",
|
|
42
42
|
"react-dom": "^18.0.0 || ^19.0.0"
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
|
-
"@types/react": "^
|
|
46
|
-
"@types/react-dom": "^
|
|
47
|
-
"@vitest/browser": "^
|
|
48
|
-
"jsdom": "^
|
|
49
|
-
"react": "^
|
|
50
|
-
"react-dom": "^
|
|
51
|
-
"tsup": "^8.
|
|
45
|
+
"@types/react": "^19.2.17",
|
|
46
|
+
"@types/react-dom": "^19.2.3",
|
|
47
|
+
"@vitest/browser": "^4.1.10",
|
|
48
|
+
"jsdom": "^29.1.1",
|
|
49
|
+
"react": "^19.2.7",
|
|
50
|
+
"react-dom": "^19.2.7",
|
|
51
|
+
"tsup": "^8.5.1",
|
|
52
52
|
"typescript": "^5.7.3",
|
|
53
|
-
"vitest": "^
|
|
53
|
+
"vitest": "^4.1.10"
|
|
54
54
|
},
|
|
55
55
|
"publishConfig": {
|
|
56
56
|
"access": "public"
|