@micro-cms/admin-ui 1.0.19 → 1.0.21
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 +62 -0
- package/package.json +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
# @micro-cms/admin-ui
|
|
2
|
+
|
|
3
|
+
A collection of schema-driven React components for building dynamic admin interfaces. This package uses the "Zero-Config" style injection strategy to ensure it works in any host application.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **AutoForm:** Generates complete forms based on a data schema.
|
|
8
|
+
- **AutoTable:** Renders paginated data tables with sorting and actions.
|
|
9
|
+
- **OffCanvas:** A slide-in drawer for editing and creating records without leaving the context.
|
|
10
|
+
- **Component Registry:** Extensible system to map data types to custom UI components.
|
|
11
|
+
- **Zero-Config Styles:** Pre-compiled CSS is automatically injected into the DOM at runtime with `mcms-` prefixing to avoid conflicts.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add @micro-cms/admin-ui
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Basic Usage
|
|
20
|
+
|
|
21
|
+
```tsx
|
|
22
|
+
import { AutoTable, AutoForm } from '@micro-cms/admin-ui';
|
|
23
|
+
|
|
24
|
+
const schema = {
|
|
25
|
+
name: 'posts',
|
|
26
|
+
fields: [
|
|
27
|
+
{ name: 'title', type: 'text', label: 'Post Title' },
|
|
28
|
+
{ name: 'is_published', type: 'boolean', label: 'Published' }
|
|
29
|
+
]
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
function MyAdmin() {
|
|
33
|
+
return (
|
|
34
|
+
<div>
|
|
35
|
+
<AutoTable
|
|
36
|
+
schema={schema}
|
|
37
|
+
data={[]}
|
|
38
|
+
onEdit={(id) => console.log('Edit', id)}
|
|
39
|
+
/>
|
|
40
|
+
|
|
41
|
+
<AutoForm
|
|
42
|
+
schema={schema}
|
|
43
|
+
onSubmit={(data) => console.log('Saving', data)}
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Customizing Components
|
|
51
|
+
|
|
52
|
+
You can register custom input components for specific data types via the `ComponentRegistry`:
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
import { ComponentRegistry } from '@micro-cms/admin-ui';
|
|
56
|
+
|
|
57
|
+
ComponentRegistry.register('geo_point', MyMapPicker);
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Design System
|
|
61
|
+
|
|
62
|
+
All components are styled with Tailwind CSS using an `mcms-` prefix. This package is fully isolated and will not leak styles into your application or be affected by your app's global CSS resets.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@micro-cms/admin-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.21",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.mjs",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"react": ">=18"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@micro-cms/types": "^1.0.
|
|
23
|
+
"@micro-cms/types": "^1.0.21",
|
|
24
24
|
"clsx": "^2.1.0",
|
|
25
25
|
"moment": "^2.30.1",
|
|
26
26
|
"tailwind-merge": "^2.2.0"
|