ding-react-admin 1.0.0 → 1.0.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
CHANGED
|
@@ -1,9 +1,105 @@
|
|
|
1
1
|
# ding-react-admin
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**npm:** [`ding-react-admin`](https://www.npmjs.com/package/ding-react-admin)
|
|
4
|
+
|
|
5
|
+
## Live demo:
|
|
6
|
+
[playground on GitHub Pages](https://muhammadinaam.github.io/ding-react-admin/) (login: `admin` / `admin` or `user` / `user`)
|
|
7
|
+
|
|
8
|
+
## Tutorial:
|
|
9
|
+
[Build an admin app and add a Users page](docs/tutorial-one-entity.md) — step-by-step from `yarn create vite` through CRUD and routes.
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
yarn add ding-react-admin antd @ant-design/icons dayjs react-hook-form react-router-dom
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
Install details and peer versions: [docs/install.md](docs/install.md).
|
|
4
16
|
|
|
5
17
|
Composable admin shell for React apps: **Ant Design 6** layout, **CRUD field system** (lists, forms, filters, inlines, bulk actions), **theme/density** controls, **`AuthProvider`** + **`useAuth`**, **data / permissions providers** (react-admin–style naming, intentionally small), and **React Router** helpers.
|
|
6
18
|
|
|
19
|
+
## Screenshots
|
|
20
|
+
|
|
21
|
+
From the [playground demo](https://muhammadinaam.github.io/ding-react-admin/):
|
|
22
|
+
|
|
23
|
+
| List with filters | Tabbed form page |
|
|
24
|
+
| --- | --- |
|
|
25
|
+
|  |  |
|
|
26
|
+
|
|
27
|
+
| Stepped modal form | Login |
|
|
28
|
+
| --- | --- |
|
|
29
|
+
|  |  |
|
|
30
|
+
|
|
31
|
+
## Declarative CRUD
|
|
32
|
+
|
|
33
|
+
Wire a [`DataProvider`](docs/data-permissions.md) (see [Providers](#providers-manual-composition) below), then describe list and form pages in JSX — field `source` names map to your API. Filters, modals, permissions, and validation plug in when you need them; start with the basics:
|
|
34
|
+
|
|
35
|
+
### List page
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
import { ResourceList, TextColumn, DateColumn } from "ding-react-admin";
|
|
39
|
+
|
|
40
|
+
export function InvoiceListPage() {
|
|
41
|
+
return (
|
|
42
|
+
<ResourceList resource="invoices" title="Invoices" pathPrefix="/invoices">
|
|
43
|
+
<TextColumn source="number" label="Number" />
|
|
44
|
+
<TextColumn source="customer" label="Customer" />
|
|
45
|
+
<DateColumn source="issuedAt" label="Issued" />
|
|
46
|
+
</ResourceList>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
Add `<TextFilter />`, `<ReferenceFilter />`, bulk actions, and row permissions inside the same component — [list pages guide](docs/crud/list-pages.md).
|
|
52
|
+
|
|
53
|
+
### Form page
|
|
54
|
+
|
|
55
|
+
```tsx
|
|
56
|
+
import { ResourceForm, TextField, DateField } from "ding-react-admin";
|
|
57
|
+
|
|
58
|
+
export function InvoiceFormPage() {
|
|
59
|
+
return (
|
|
60
|
+
<ResourceForm resource="invoices" title="Invoice" listPath="/invoices">
|
|
61
|
+
<TextField source="number" label="Number" required />
|
|
62
|
+
<TextField source="customer" label="Customer" required />
|
|
63
|
+
<DateField source="issuedAt" label="Issued" required />
|
|
64
|
+
</ResourceForm>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
Tabbed forms, stepped modals, and API error mapping — [forms guide](docs/crud/forms.md).
|
|
70
|
+
|
|
71
|
+
### Inline nested rows
|
|
72
|
+
|
|
73
|
+
Django-style tabular inlines: related rows edit in a table inside the parent form.
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import {
|
|
79
|
+
InlineFormSet,
|
|
80
|
+
NumberField,
|
|
81
|
+
ResourceForm,
|
|
82
|
+
TextField,
|
|
83
|
+
} from "ding-react-admin";
|
|
84
|
+
|
|
85
|
+
<ResourceForm
|
|
86
|
+
resource="invoices"
|
|
87
|
+
title="Invoice"
|
|
88
|
+
listPath="/invoices"
|
|
89
|
+
inlines={[{ resource: "invoice-lines", foreignKey: "invoiceId" }]}
|
|
90
|
+
>
|
|
91
|
+
<TextField source="number" label="Number" required />
|
|
92
|
+
<TextField source="customer" label="Customer" required />
|
|
93
|
+
<InlineFormSet resource="invoice-lines" foreignKey="invoiceId" label="Lines">
|
|
94
|
+
<TextField source="label" label="Label" required />
|
|
95
|
+
<NumberField source="quantity" label="Qty" required min={0} />
|
|
96
|
+
<NumberField source="unitPrice" label="Unit price" required min={0} step={0.01} />
|
|
97
|
+
</InlineFormSet>
|
|
98
|
+
</ResourceForm>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Stacked layout, dependent fields, and validation — [inlines guide](docs/crud/inlines.md).
|
|
102
|
+
|
|
7
103
|
## Providers (manual composition)
|
|
8
104
|
|
|
9
105
|
Nothing is wired automatically except theme inside `<AdminApp />`. Wrap providers yourself:
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ding-react-admin",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"description": "Composable admin shell (Ant Design + React Router): quick-start AdminApp or build your own layout.",
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
},
|
|
20
20
|
"files": [
|
|
21
21
|
"dist",
|
|
22
|
-
"src"
|
|
22
|
+
"src",
|
|
23
|
+
"docs/assets"
|
|
23
24
|
],
|
|
24
25
|
"scripts": {
|
|
25
26
|
"build": "vite build && node -e \"require('fs').writeFileSync('dist/index.d.ts','export * from \\\"./src/index\\\";\\n')\"",
|