@sustaina/shared-ui 1.3.1 → 1.3.2
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 +71 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1,71 @@
|
|
|
1
|
-
# sustaina-
|
|
1
|
+
# @sustaina/shared-ui
|
|
2
|
+
|
|
3
|
+
Shared UI component library for Sustaina micro-frontend modules.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @sustaina/shared-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Setup
|
|
12
|
+
|
|
13
|
+
Import the stylesheet in your app entry point:
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import "@sustaina/shared-ui/dist/index.css";
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { Button, Dialog, DataTable, DatePicker } from "@sustaina/shared-ui";
|
|
23
|
+
|
|
24
|
+
// Button
|
|
25
|
+
<Button variant="default" onClick={() => console.log("clicked")}>
|
|
26
|
+
Submit
|
|
27
|
+
</Button>
|
|
28
|
+
|
|
29
|
+
// Dialog
|
|
30
|
+
<Dialog open={open} onOpenChange={setOpen}>
|
|
31
|
+
<DialogContent>
|
|
32
|
+
<p>Hello from shared dialog</p>
|
|
33
|
+
</DialogContent>
|
|
34
|
+
</Dialog>
|
|
35
|
+
|
|
36
|
+
// DatePicker
|
|
37
|
+
<DatePicker value={date} onChange={setDate} />
|
|
38
|
+
|
|
39
|
+
// DataTable
|
|
40
|
+
<DataTable columns={columns} data={rows} />
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
## Available Components
|
|
44
|
+
|
|
45
|
+
| Component | Description |
|
|
46
|
+
| ------------------------------- | ---------------------------- |
|
|
47
|
+
| `Button` | Base button with variants |
|
|
48
|
+
| `Dialog` / `DialogAlert` | Modal dialogs |
|
|
49
|
+
| `DataTable` | Sortable, filterable table |
|
|
50
|
+
| `DatePicker` / `DateTimePicker` | Date & time selection |
|
|
51
|
+
| `Combobox` | Searchable select |
|
|
52
|
+
| `Form` | Form wrapper with validation |
|
|
53
|
+
| `Checkbox` | Checkbox input |
|
|
54
|
+
| `DropdownMenu` | Dropdown menu |
|
|
55
|
+
| `Accordion` | Collapsible sections |
|
|
56
|
+
| `Carousel` | Image/content carousel |
|
|
57
|
+
| `ActionMenu` | Context action menu |
|
|
58
|
+
| `AdvanceSearch` | Advanced search panel |
|
|
59
|
+
| `AuditFooter` | Audit trail footer |
|
|
60
|
+
| `CropperModal` | Image cropper modal |
|
|
61
|
+
|
|
62
|
+
## Hooks & Utils
|
|
63
|
+
|
|
64
|
+
```ts
|
|
65
|
+
import { useDebounce, formatDate } from "@sustaina/shared-ui";
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## Peer Dependencies
|
|
69
|
+
|
|
70
|
+
- React `^18`
|
|
71
|
+
- Tailwind CSS `^3`
|