@viliha/vui-ui 1.1.3 → 1.1.5
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 +64 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -57,21 +57,77 @@ export function Example() {
|
|
|
57
57
|
}
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
+
### Datatables & forms
|
|
61
|
+
|
|
62
|
+
`RecordView` is a complete admin datatable from a single `fields` array —
|
|
63
|
+
editable cells, sorting, filtering, pagination, row actions, bulk actions,
|
|
64
|
+
CSV / JSON / Excel / PDF import & export, and a buffered **Add / Edit / View**
|
|
65
|
+
form (slide-over or full-page). Required fields render a `*`, alignment and
|
|
66
|
+
colors come from the tokens — you never style a field by hand.
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
import { RecordView, type RecordField } from "@viliha/vui-ui/record-view";
|
|
70
|
+
|
|
71
|
+
const fields: RecordField<Customer>[] = [
|
|
72
|
+
{ key: "name", label: "Name", required: true, hideInTable: true },
|
|
73
|
+
{ key: "email", label: "Email", copyable: true },
|
|
74
|
+
{ key: "country", label: "Country" },
|
|
75
|
+
];
|
|
76
|
+
|
|
77
|
+
<RecordView
|
|
78
|
+
title="Customers"
|
|
79
|
+
singular="Customer"
|
|
80
|
+
fields={fields}
|
|
81
|
+
initialData={rows}
|
|
82
|
+
getPrimary={(r) => ({ title: r.name, initials: r.name.slice(0, 2) })}
|
|
83
|
+
makeEmptyRow={() => ({ id: Date.now(), name: "", email: "", country: "" })}
|
|
84
|
+
/>;
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
The same `fields` also drive `RecordForm` — the Add/Edit/View screen — and its
|
|
88
|
+
Info panel (from `formDescription` + per-field `description`). See the
|
|
89
|
+
[Data table docs](https://vui.viliha.com/docs/data-table).
|
|
90
|
+
|
|
91
|
+
## Patterns
|
|
92
|
+
|
|
93
|
+
The reference app composes these primitives into the conventions documented at
|
|
94
|
+
[vui.viliha.com/docs/layout](https://vui.viliha.com/docs/layout):
|
|
95
|
+
|
|
96
|
+
- **Five page types** — data table, record form (Add / Edit / View), dashboard,
|
|
97
|
+
settings, and kanban board.
|
|
98
|
+
- **Command palette** — Quick actions (`⌘K`, navigate pages) and Global search
|
|
99
|
+
(`⌘⌥K`, find records), both built on the exported `CommandPalette`.
|
|
100
|
+
- **Breadcrumbs** — the exported `Breadcrumbs` component fed a route-derived
|
|
101
|
+
trail.
|
|
102
|
+
|
|
103
|
+
Copy them from the
|
|
104
|
+
[backoffice demo](https://github.com/myviliha/vui-starter/tree/main/apps/backoffice)
|
|
105
|
+
and adapt.
|
|
106
|
+
|
|
60
107
|
## Building with an AI agent
|
|
61
108
|
|
|
62
109
|
This package ships an **AI-agent usage guide** at
|
|
63
110
|
`node_modules/@viliha/vui-ui/AGENT.md` — the standards to follow when generating
|
|
64
|
-
UI with VUI (token discipline, reuse-first, page layout, RecordView,
|
|
65
|
-
mode).
|
|
66
|
-
|
|
111
|
+
UI with VUI (token discipline, reuse-first, page layout, RecordView, forms,
|
|
112
|
+
a11y, dark mode). The quickest way to load it is the shipped
|
|
113
|
+
`CLAUDE.template.md`:
|
|
114
|
+
|
|
115
|
+
```bash
|
|
116
|
+
cp node_modules/@viliha/vui-ui/CLAUDE.template.md ./CLAUDE.md # Claude Code
|
|
117
|
+
# or ./AGENTS.md for Cursor / Copilot
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
It's a one-line `@import` of `AGENT.md`, so the rules stay in one place. Prefer a
|
|
121
|
+
verbatim copy? `cp node_modules/@viliha/vui-ui/AGENT.md AGENTS.md`.
|
|
67
122
|
|
|
68
123
|
## Components
|
|
69
124
|
|
|
70
|
-
`avatar` · `badge` · `button` · `card` · `chart` (themed Recharts
|
|
71
|
-
`checkbox` · `command-palette` (⌘K launcher) · `dialog` ·
|
|
72
|
-
`dropdown-menu` · `input` · `kbd` (key caps + `Shortcut`) ·
|
|
73
|
-
`required-mark` · `select` · `table` · `record-view` (the full datatable
|
|
74
|
-
the `utils` (`cn`) helper and the `theme.css` design
|
|
125
|
+
`avatar` · `badge` · `breadcrumbs` · `button` · `card` · `chart` (themed Recharts
|
|
126
|
+
wrapper) · `checkbox` · `command-palette` (⌘K launcher) · `dialog` ·
|
|
127
|
+
`confirm-dialog` · `dropdown-menu` · `input` · `kbd` (key caps + `Shortcut`) ·
|
|
128
|
+
`menu` · `required-mark` · `select` · `table` · `record-view` (the full datatable
|
|
129
|
+
+ `RecordForm`) · plus the `utils` (`cn`) helper and the `theme.css` design
|
|
130
|
+
tokens.
|
|
75
131
|
|
|
76
132
|
## Theming
|
|
77
133
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viliha/vui-ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.5",
|
|
4
4
|
"description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Suman Bonakurthi",
|