dhx-react-suite 1.0.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 +143 -0
- package/dist/dhx-react-suite.js +1171 -0
- package/dist/dhx-react-suite.js.map +1 -0
- package/dist/dhx-react-suite.umd.cjs +42 -0
- package/dist/dhx-react-suite.umd.cjs.map +1 -0
- package/dist/index.d.ts +551 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
# dhx-react-suite
|
|
2
|
+
|
|
3
|
+
> 23 production-ready React UI components โ TypeScript reimplementation of DHTMLX Suite v9.3.0.
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/dhx-react-suite)
|
|
6
|
+
[](https://www.typescriptlang.org/)
|
|
7
|
+
[](LICENSE)
|
|
8
|
+
|
|
9
|
+
## Features
|
|
10
|
+
|
|
11
|
+
- โ
Full **TypeScript** types โ every prop, callback and option is typed
|
|
12
|
+
- ๐ฒ **Tree-shakeable** โ import only what you use (`sideEffects: false`)
|
|
13
|
+
- ๐จ **Design tokens** โ single object to theme the entire library
|
|
14
|
+
- ๐ **Zero CSS dependencies** โ styles injected once, no stylesheet to import
|
|
15
|
+
- โก **Recharts optional** โ only needed if you use `<Chart />`
|
|
16
|
+
- ๐งช **Tested** โ Vitest + Testing Library
|
|
17
|
+
|
|
18
|
+
## Components
|
|
19
|
+
|
|
20
|
+
| Component | Description |
|
|
21
|
+
|---|---|
|
|
22
|
+
| `Button` | 4 variants, 3 sizes |
|
|
23
|
+
| `Toolbar` | Buttons, inputs, selects, separators |
|
|
24
|
+
| `Sidebar` | Collapsible navigation with nested items |
|
|
25
|
+
| `Layout` | Row / column panel grid |
|
|
26
|
+
| `Tabbar` | 4 placement modes (top/bottom/left/right) |
|
|
27
|
+
| `Grid` | Sortable, filterable, resizable data table |
|
|
28
|
+
| `Chart` | Bar, Line, Area, Pie, Donut, Radar, Scatter via Recharts |
|
|
29
|
+
| `Calendar` | Single & range date picker |
|
|
30
|
+
| `Timepicker` | Scrollable hour/minute/AM-PM picker |
|
|
31
|
+
| `Combobox` | Searchable select with multi-select |
|
|
32
|
+
| `Slider` | Single & range modes with tick marks |
|
|
33
|
+
| `Colorpicker` | HSL sliders + 26-colour palette |
|
|
34
|
+
| `Menu` | Dropdown with nested submenus |
|
|
35
|
+
| `ContextMenu` | Right-click context wrapper |
|
|
36
|
+
| `Popup` | Click-triggered floating panel |
|
|
37
|
+
| `Window` | Draggable modal/dialog |
|
|
38
|
+
| `MessageProvider` / `useMessage` | Toast/alert/confirm system |
|
|
39
|
+
| `List` | Keyboard navigation, inline editing |
|
|
40
|
+
| `DataView` | CSS grid card gallery |
|
|
41
|
+
| `Tree` | Hierarchical data, checkboxes, editing |
|
|
42
|
+
| `Pagination` | Smart page-range window |
|
|
43
|
+
| `Form` | Schema-driven, 12 field types, validation |
|
|
44
|
+
| `Ribbon` | Office-style grouped toolbar |
|
|
45
|
+
| `Navbar` | Horizontal / vertical navigation bar |
|
|
46
|
+
|
|
47
|
+
## Installation
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
npm install dhx-react-suite
|
|
51
|
+
# Recharts is only required if you use the Chart component
|
|
52
|
+
npm install recharts
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Quick Start
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import { MessageProvider, Button, Grid, useMessage } from "dhx-react-suite";
|
|
59
|
+
|
|
60
|
+
// 1. Wrap your app in MessageProvider
|
|
61
|
+
function App() {
|
|
62
|
+
return (
|
|
63
|
+
<MessageProvider>
|
|
64
|
+
<MyPage />
|
|
65
|
+
</MessageProvider>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
// 2. Use components
|
|
70
|
+
function MyPage() {
|
|
71
|
+
const msg = useMessage();
|
|
72
|
+
return (
|
|
73
|
+
<Button onClick={() => msg.message({ type: "success", title: "Hello!" })}>
|
|
74
|
+
Show toast
|
|
75
|
+
</Button>
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
## Theming
|
|
81
|
+
|
|
82
|
+
Override any token **before** first render:
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
import { tokens } from "dhx-react-suite";
|
|
86
|
+
tokens.primary = "#7c3aed"; // violet theme
|
|
87
|
+
tokens.primaryDk = "#5b21b6";
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
## Grid Example
|
|
91
|
+
|
|
92
|
+
```tsx
|
|
93
|
+
import { Grid } from "dhx-react-suite";
|
|
94
|
+
|
|
95
|
+
const columns = [
|
|
96
|
+
{ id: "name", header: "Name", width: 200 },
|
|
97
|
+
{ id: "email", header: "Email", width: 280 },
|
|
98
|
+
{ id: "status", header: "Status", width: 120,
|
|
99
|
+
template: (val) => <span style={{ color: val === "active" ? "green" : "red" }}>{val}</span> },
|
|
100
|
+
];
|
|
101
|
+
|
|
102
|
+
<Grid
|
|
103
|
+
columns={columns}
|
|
104
|
+
data={users}
|
|
105
|
+
height={500}
|
|
106
|
+
selection="row"
|
|
107
|
+
onSelect={(row) => console.log(row)}
|
|
108
|
+
/>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Chart Example
|
|
112
|
+
|
|
113
|
+
```tsx
|
|
114
|
+
import { Chart } from "dhx-react-suite";
|
|
115
|
+
|
|
116
|
+
const data = [{ month: "Jan", sales: 40 }, { month: "Feb", sales: 65 }];
|
|
117
|
+
const series = [{ id: "sales", value: "sales", label: "Sales", color: "#0288d1" }];
|
|
118
|
+
|
|
119
|
+
<Chart type="bar" data={data} series={series} scales={{ bottom: { text: "month" } }} height={300} />
|
|
120
|
+
|
|
121
|
+
// Pie / Donut โ just pass simple {label, value} data, no series needed
|
|
122
|
+
<Chart type="pie" data={[{ x: "React", value: 40 }, { x: "Vue", value: 25 }]} height={300} />
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## Building / Publishing
|
|
126
|
+
|
|
127
|
+
```bash
|
|
128
|
+
# Install deps
|
|
129
|
+
npm install
|
|
130
|
+
|
|
131
|
+
# Build (types + bundle)
|
|
132
|
+
npm run build
|
|
133
|
+
|
|
134
|
+
# Run tests
|
|
135
|
+
npm test
|
|
136
|
+
|
|
137
|
+
# Publish to npm (runs build automatically via prepublishOnly)
|
|
138
|
+
npm publish
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
## License
|
|
142
|
+
|
|
143
|
+
MIT
|