@airdraft/react-ui 0.1.6 → 0.1.7
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/CHANGELOG.md +2 -0
- package/README.md +75 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.1.7](https://github.com/aevrHQ/airdraft/compare/react-ui@v0.1.5...react-ui@v0.1.7) (2026-05-23)
|
|
6
|
+
|
|
5
7
|
### [0.1.5](https://github.com/aevrHQ/airdraft/compare/react-ui@v0.1.4...react-ui@v0.1.5) (2026-05-23)
|
|
6
8
|
|
|
7
9
|
### [0.1.4](https://github.com/aevrHQ/airdraft/compare/react-ui@v0.1.3...react-ui@v0.1.4) (2026-05-23)
|
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# @airdraft/react-ui
|
|
2
|
+
|
|
3
|
+
Drop-in React UI components for Airdraft. Provides a full CMS admin panel, entry editor, media manager, schema editor, and composable primitives — all built on Tailwind CSS and shadcn/ui.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @airdraft/react-ui
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Requires `@airdraft/client` and a configured Airdraft API.
|
|
12
|
+
|
|
13
|
+
## Tier 3 — Drop-in Compounds
|
|
14
|
+
|
|
15
|
+
Ready-to-use full-page components. Mount them in your app and they handle all data fetching and state.
|
|
16
|
+
|
|
17
|
+
| Component | Description |
|
|
18
|
+
|---|---|
|
|
19
|
+
| `<CMSAdmin>` | Full CMS admin panel with sidebar navigation, collections, media, team, and schema editor. |
|
|
20
|
+
| `<CollectionsIndex>` | Browse and search entries in a collection. |
|
|
21
|
+
| `<ContentManager>` | Lists collections; navigates to `CollectionsIndex` on selection. |
|
|
22
|
+
| `<EntryEditor>` | Edit a single entry. Renders dynamic fields from the collection schema, handles validation errors, optimistic concurrency (SHA conflict detection), and save state. |
|
|
23
|
+
| `<MediaManager>` | Upload and browse media files. |
|
|
24
|
+
| `<TeamManager>` | Manage team members and invitations. |
|
|
25
|
+
| `<SchemaEditor>` | Visual editor for collection schemas (requires `plugin-schema-editor`). |
|
|
26
|
+
| `<AuditLogViewer>` | Paginated audit event log (requires `plugin-audit-log`). |
|
|
27
|
+
| `<LoginForm>` | Username/password login form. |
|
|
28
|
+
| `<AcceptInviteForm>` | Accept a team invitation. |
|
|
29
|
+
|
|
30
|
+
## Tier 2 — Composable Slots
|
|
31
|
+
|
|
32
|
+
For custom layouts, use the composable primitives:
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
import { SchemaEditorRoot, SchemaEditorSidebar, SchemaEditorContent, SchemaEditorFieldDrawer } from '@airdraft/react-ui'
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
## Shared Components
|
|
39
|
+
|
|
40
|
+
| Component | Description |
|
|
41
|
+
|---|---|
|
|
42
|
+
| `<PageHeader>` | Page title + description + action slot. |
|
|
43
|
+
| `<ErrorAlert>` | Displays an error with title and message. Supports `compact` mode. |
|
|
44
|
+
| `<EmptyState>` | Empty state with icon and call-to-action. |
|
|
45
|
+
| `<EntryRow>` | Single row in a collection list. |
|
|
46
|
+
| `<MediaCard>` | Media item thumbnail card. |
|
|
47
|
+
| `<UploadZone>` | Drag-and-drop file upload area. |
|
|
48
|
+
| `<ConfirmDialog>` | Confirmation modal. |
|
|
49
|
+
| `<StatusBadge>` / `<RoleBadge>` | Status and role indicator badges. |
|
|
50
|
+
|
|
51
|
+
## Field Types
|
|
52
|
+
|
|
53
|
+
`EntryEditor` renders the appropriate input for each field type defined in the collection schema:
|
|
54
|
+
|
|
55
|
+
| Type | Input |
|
|
56
|
+
|---|---|
|
|
57
|
+
| `string` | Text input |
|
|
58
|
+
| `number` | Number input |
|
|
59
|
+
| `boolean` | Toggle switch |
|
|
60
|
+
| `date` | Date picker |
|
|
61
|
+
| `select` | Dropdown |
|
|
62
|
+
| `multiselect` / `list` | Tag input |
|
|
63
|
+
| `richtext` | Rich text editor |
|
|
64
|
+
| `url` | URL input with inline link icon |
|
|
65
|
+
| `image` / `media` | Media picker (single or multiple files via `multiple: true`) |
|
|
66
|
+
| `relation` / `relations` | Relation picker |
|
|
67
|
+
| `object` | Grouped sub-fields |
|
|
68
|
+
|
|
69
|
+
### `media` field with `multiple: true`
|
|
70
|
+
|
|
71
|
+
The media picker opens a modal with the full media library. In multiple mode, selections are staged and committed with a "Done" button. Legacy entries that stored a single string key are automatically coerced to an array on save.
|
|
72
|
+
|
|
73
|
+
## Changelog
|
|
74
|
+
|
|
75
|
+
See [CHANGELOG.md](./CHANGELOG.md).
|