@middag-io/react 0.2.0

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.
Files changed (11) hide show
  1. package/bin/middag-react.js +250 -0
  2. package/dist-lib/MarkdownContent-B-Gd9918.js +13503 -0
  3. package/dist-lib/_redirects +1 -0
  4. package/dist-lib/api/example/moodle/get/books.json +209 -0
  5. package/dist-lib/api/example/moodle/get/dashboard.json +203 -0
  6. package/dist-lib/api/example/wordpress/get/products.json +165 -0
  7. package/dist-lib/api/index.json +52 -0
  8. package/dist-lib/index.min-CS28Xi5j.js +3009 -0
  9. package/dist-lib/middag-react.css +2 -0
  10. package/dist-lib/middag-react.js +25363 -0
  11. package/package.json +103 -0
package/dist-lib/_redirects ADDED
@@ -0,0 +1 @@
1
+ /* /index.html 200
package/dist-lib/api/example/moodle/get/books.json ADDED
@@ -0,0 +1,209 @@
1
+ {
2
+ "description": "Example: GET /api/books -- Returns a list of books for the Moodle admin panel. Demonstrates a stack layout with a dense_table block including sortable columns, pagination, filters, row actions, and bulk actions.",
3
+ "host": "moodle",
4
+ "method": "GET",
5
+ "contract": {
6
+ "version": "1",
7
+ "shell": "admin",
8
+ "page": {
9
+ "key": "books-list",
10
+ "title": "Books",
11
+ "breadcrumbs": [
12
+ { "label": "Site Administration", "href": "/admin" },
13
+ { "label": "Plugins", "href": "/admin/plugins" },
14
+ { "label": "Books" }
15
+ ],
16
+ "actions": [
17
+ {
18
+ "id": "add-book",
19
+ "label": "Add Book",
20
+ "intent": "primary",
21
+ "href": "/admin/books/new",
22
+ "icon": "plus"
23
+ }
24
+ ],
25
+ "filterTabs": [
26
+ { "key": "all", "label": "All", "badge": 12 },
27
+ { "key": "published", "label": "Published", "badge": 9 },
28
+ { "key": "draft", "label": "Draft", "badge": 2 },
29
+ { "key": "archived", "label": "Archived", "badge": 1 }
30
+ ]
31
+ },
32
+ "layout": {
33
+ "template": "stack",
34
+ "meta": { "fullBleed": true },
35
+ "regions": {
36
+ "content": [
37
+ {
38
+ "type": "dense_table",
39
+ "key": "books-table",
40
+ "data": {
41
+ "columns": [
42
+ { "key": "title", "label": "Title", "variant": "text", "sortable": true, "searchable": true },
43
+ { "key": "author", "label": "Author", "variant": "text", "sortable": true },
44
+ { "key": "course", "label": "Course", "variant": "text", "sortable": true },
45
+ { "key": "chapters", "label": "Chapters", "variant": "text", "sortable": true },
46
+ { "key": "status", "label": "Status", "variant": "status", "sortable": true },
47
+ { "key": "updated_at", "label": "Last Updated", "variant": "timestamp", "sortable": true }
48
+ ],
49
+ "rows": [
50
+ {
51
+ "id": "book-1",
52
+ "title": "Introduction to Machine Learning",
53
+ "author": "Dr. Sarah Chen",
54
+ "course": "CS 301 - Artificial Intelligence",
55
+ "chapters": "14",
56
+ "status": "Published",
57
+ "updated_at": 1746057600,
58
+ "href": "/admin/books/book-1"
59
+ },
60
+ {
61
+ "id": "book-2",
62
+ "title": "Workplace Safety Handbook",
63
+ "author": "Mark Johnson",
64
+ "course": "NR-10 Safety Compliance",
65
+ "chapters": "8",
66
+ "status": "Published",
67
+ "updated_at": 1745971200,
68
+ "href": "/admin/books/book-2"
69
+ },
70
+ {
71
+ "id": "book-3",
72
+ "title": "Data Privacy & LGPD Guide",
73
+ "author": "Ana Costa",
74
+ "course": "Compliance Training",
75
+ "chapters": "11",
76
+ "status": "Published",
77
+ "updated_at": 1745884800,
78
+ "href": "/admin/books/book-3"
79
+ },
80
+ {
81
+ "id": "book-4",
82
+ "title": "Leadership Fundamentals",
83
+ "author": "Carlos Mendes",
84
+ "course": "Management Track",
85
+ "chapters": "6",
86
+ "status": "Draft",
87
+ "updated_at": 1745798400,
88
+ "href": "/admin/books/book-4"
89
+ },
90
+ {
91
+ "id": "book-5",
92
+ "title": "Onboarding Procedures v2",
93
+ "author": "HR Team",
94
+ "course": "Employee Onboarding",
95
+ "chapters": "5",
96
+ "status": "Draft",
97
+ "updated_at": 1745712000,
98
+ "href": "/admin/books/book-5"
99
+ },
100
+ {
101
+ "id": "book-6",
102
+ "title": "Advanced Excel for Finance",
103
+ "author": "Julia Ferreira",
104
+ "course": "Finance Skills",
105
+ "chapters": "18",
106
+ "status": "Published",
107
+ "updated_at": 1745625600,
108
+ "href": "/admin/books/book-6"
109
+ }
110
+ ],
111
+ "pagination": {
112
+ "page": 1,
113
+ "perPage": 20,
114
+ "total": 12,
115
+ "lastPage": 1
116
+ },
117
+ "sort": {
118
+ "column": "title",
119
+ "direction": "asc"
120
+ },
121
+ "filters": {
122
+ "available": [
123
+ {
124
+ "key": "status",
125
+ "label": "Status",
126
+ "type": "select",
127
+ "options": [
128
+ { "value": "Published", "label": "Published" },
129
+ { "value": "Draft", "label": "Draft" },
130
+ { "value": "Archived", "label": "Archived" }
131
+ ]
132
+ },
133
+ {
134
+ "key": "course",
135
+ "label": "Course",
136
+ "type": "select",
137
+ "options": [
138
+ { "value": "cs301", "label": "CS 301 - Artificial Intelligence" },
139
+ { "value": "nr10", "label": "NR-10 Safety Compliance" },
140
+ { "value": "compliance", "label": "Compliance Training" },
141
+ { "value": "management", "label": "Management Track" }
142
+ ]
143
+ }
144
+ ],
145
+ "applied": {}
146
+ },
147
+ "rowActions": [
148
+ {
149
+ "id": "edit",
150
+ "label": "Edit",
151
+ "icon": "edit",
152
+ "method": "get",
153
+ "href": "/admin/books/${id}/edit"
154
+ },
155
+ {
156
+ "id": "duplicate",
157
+ "label": "Duplicate",
158
+ "icon": "copy",
159
+ "method": "post",
160
+ "requiresConfirmation": true,
161
+ "confirmation": {
162
+ "title": "Duplicate Book",
163
+ "message": "A copy of this book will be created as a draft. Continue?",
164
+ "intent": "default",
165
+ "confirmLabel": "Duplicate",
166
+ "cancelLabel": "Cancel"
167
+ }
168
+ },
169
+ {
170
+ "id": "delete",
171
+ "label": "Delete",
172
+ "icon": "trash",
173
+ "intent": "danger",
174
+ "method": "delete",
175
+ "requiresConfirmation": true,
176
+ "confirmation": {
177
+ "title": "Delete Book",
178
+ "message": "This will permanently delete the book and all its chapters. This action cannot be undone.",
179
+ "intent": "danger",
180
+ "confirmLabel": "Delete",
181
+ "cancelLabel": "Cancel"
182
+ }
183
+ }
184
+ ],
185
+ "bulkActions": [
186
+ {
187
+ "id": "publish",
188
+ "label": "Publish Selected",
189
+ "href": "/admin/books/bulk/publish",
190
+ "method": "post"
191
+ },
192
+ {
193
+ "id": "archive",
194
+ "label": "Archive Selected",
195
+ "href": "/admin/books/bulk/archive",
196
+ "method": "post",
197
+ "intent": "danger",
198
+ "requiresConfirmation": true,
199
+ "confirmationMessage": "Archive all selected books? They will no longer be visible to students."
200
+ }
201
+ ],
202
+ "searchPlaceholder": "Search books by title or author..."
203
+ }
204
+ }
205
+ ]
206
+ }
207
+ }
208
+ }
209
+ }
package/dist-lib/api/example/moodle/get/dashboard.json ADDED
@@ -0,0 +1,203 @@
1
+ {
2
+ "description": "Example: GET /api/dashboard -- Returns the admin dashboard for Moodle. Demonstrates a dashboard layout with metric_card blocks in the metrics region and a dense_table in the content region.",
3
+ "host": "moodle",
4
+ "method": "GET",
5
+ "contract": {
6
+ "version": "1",
7
+ "shell": "admin",
8
+ "page": {
9
+ "key": "admin-dashboard",
10
+ "title": "Dashboard",
11
+ "favoritable": false,
12
+ "breadcrumbs": [
13
+ { "label": "Site Administration" }
14
+ ]
15
+ },
16
+ "layout": {
17
+ "template": "dashboard",
18
+ "regions": {
19
+ "metrics": [
20
+ {
21
+ "type": "metric_card",
22
+ "key": "metric-active-users",
23
+ "data": {
24
+ "value": 3842,
25
+ "delta": "+12% this month",
26
+ "deltaDirection": "positive",
27
+ "label": "Active Users",
28
+ "icon": "users",
29
+ "href": "/admin/users"
30
+ }
31
+ },
32
+ {
33
+ "type": "metric_card",
34
+ "key": "metric-courses",
35
+ "data": {
36
+ "value": 127,
37
+ "delta": "+5 new",
38
+ "deltaDirection": "positive",
39
+ "label": "Active Courses",
40
+ "icon": "graduation-cap",
41
+ "href": "/admin/courses"
42
+ }
43
+ },
44
+ {
45
+ "type": "metric_card",
46
+ "key": "metric-completions",
47
+ "data": {
48
+ "value": 1893,
49
+ "delta": "+8% vs last month",
50
+ "deltaDirection": "positive",
51
+ "label": "Course Completions",
52
+ "icon": "chart",
53
+ "href": "/admin/reports/completions"
54
+ }
55
+ },
56
+ {
57
+ "type": "metric_card",
58
+ "key": "metric-storage",
59
+ "data": {
60
+ "value": "42.7 GB",
61
+ "delta": "68% of quota",
62
+ "deltaDirection": "neutral",
63
+ "label": "Storage Used",
64
+ "icon": "hard-drive"
65
+ }
66
+ },
67
+ {
68
+ "type": "metric_card",
69
+ "key": "metric-enrollments",
70
+ "data": {
71
+ "value": 562,
72
+ "delta": "+89 this week",
73
+ "deltaDirection": "positive",
74
+ "label": "New Enrollments",
75
+ "icon": "user-plus",
76
+ "href": "/admin/enrolments"
77
+ }
78
+ },
79
+ {
80
+ "type": "metric_card",
81
+ "key": "metric-compliance",
82
+ "data": {
83
+ "value": "91.3%",
84
+ "delta": "-0.5%",
85
+ "deltaDirection": "negative",
86
+ "label": "Compliance Rate",
87
+ "icon": "shield",
88
+ "href": "/admin/compliance"
89
+ }
90
+ },
91
+ {
92
+ "type": "metric_card",
93
+ "key": "metric-pending-tasks",
94
+ "data": {
95
+ "value": 18,
96
+ "delta": "3 overdue",
97
+ "deltaDirection": "negative",
98
+ "label": "Pending Tasks",
99
+ "icon": "clock",
100
+ "href": "/admin/tasks"
101
+ }
102
+ },
103
+ {
104
+ "type": "metric_card",
105
+ "key": "metric-certificates",
106
+ "data": {
107
+ "value": 234,
108
+ "delta": "+42 issued this month",
109
+ "deltaDirection": "positive",
110
+ "label": "Certificates Issued",
111
+ "icon": "file-export",
112
+ "href": "/admin/certificates"
113
+ }
114
+ }
115
+ ],
116
+ "content": [
117
+ {
118
+ "type": "dense_table",
119
+ "key": "recent-activity-table",
120
+ "title": "Recent Activity",
121
+ "data": {
122
+ "columns": [
123
+ { "key": "user", "label": "User", "variant": "text", "searchable": true },
124
+ { "key": "action", "label": "Action", "variant": "text" },
125
+ { "key": "target", "label": "Target", "variant": "text" },
126
+ { "key": "status", "label": "Status", "variant": "status" },
127
+ { "key": "timestamp", "label": "When", "variant": "timestamp", "sortable": true }
128
+ ],
129
+ "rows": [
130
+ {
131
+ "id": "act-1",
132
+ "user": "Maria Santos",
133
+ "action": "Completed course",
134
+ "target": "NR-10 Safety Compliance",
135
+ "status": "Success",
136
+ "timestamp": 1746057600
137
+ },
138
+ {
139
+ "id": "act-2",
140
+ "user": "System (Cron)",
141
+ "action": "Backup completed",
142
+ "target": "Full site backup",
143
+ "status": "Success",
144
+ "timestamp": 1746054000
145
+ },
146
+ {
147
+ "id": "act-3",
148
+ "user": "Pedro Oliveira",
149
+ "action": "Enrolled in course",
150
+ "target": "Leadership Fundamentals",
151
+ "status": "Pending",
152
+ "timestamp": 1746050400
153
+ },
154
+ {
155
+ "id": "act-4",
156
+ "user": "SAP Connector",
157
+ "action": "User sync failed",
158
+ "target": "SAP SuccessFactors",
159
+ "status": "Error",
160
+ "timestamp": 1746046800
161
+ },
162
+ {
163
+ "id": "act-5",
164
+ "user": "Admin",
165
+ "action": "Published course",
166
+ "target": "Data Privacy & LGPD Guide",
167
+ "status": "Success",
168
+ "timestamp": 1746043200
169
+ }
170
+ ],
171
+ "pagination": {
172
+ "page": 1,
173
+ "perPage": 10,
174
+ "total": 48,
175
+ "lastPage": 5
176
+ },
177
+ "sort": {
178
+ "column": "timestamp",
179
+ "direction": "desc"
180
+ },
181
+ "filters": {
182
+ "available": [
183
+ {
184
+ "key": "status",
185
+ "label": "Status",
186
+ "type": "select",
187
+ "options": [
188
+ { "value": "Success", "label": "Success" },
189
+ { "value": "Pending", "label": "Pending" },
190
+ { "value": "Error", "label": "Error" }
191
+ ]
192
+ }
193
+ ],
194
+ "applied": {}
195
+ },
196
+ "searchPlaceholder": "Search activity..."
197
+ }
198
+ }
199
+ ]
200
+ }
201
+ }
202
+ }
203
+ }
package/dist-lib/api/example/wordpress/get/products.json ADDED
@@ -0,0 +1,165 @@
1
+ {
2
+ "description": "Example: GET /api/products -- Returns a product catalog for a WordPress/WooCommerce storefront. Demonstrates a stack layout with a card_grid block using the 'store' variant.",
3
+ "host": "wordpress",
4
+ "method": "GET",
5
+ "contract": {
6
+ "version": "1",
7
+ "shell": "product",
8
+ "page": {
9
+ "key": "products-catalog",
10
+ "title": "Products",
11
+ "breadcrumbs": [
12
+ { "label": "Store", "href": "/store" },
13
+ { "label": "Products" }
14
+ ],
15
+ "actions": [
16
+ {
17
+ "id": "add-product",
18
+ "label": "Add Product",
19
+ "intent": "primary",
20
+ "href": "/store/products/new",
21
+ "icon": "plus"
22
+ },
23
+ {
24
+ "id": "import-products",
25
+ "label": "Import",
26
+ "intent": "secondary",
27
+ "href": "/store/products/import",
28
+ "icon": "upload"
29
+ }
30
+ ],
31
+ "filterTabs": [
32
+ { "key": "all", "label": "All Products", "badge": 24 },
33
+ { "key": "published", "label": "Published", "badge": 18 },
34
+ { "key": "draft", "label": "Draft", "badge": 4 },
35
+ { "key": "out-of-stock", "label": "Out of Stock", "badge": 2 }
36
+ ]
37
+ },
38
+ "layout": {
39
+ "template": "stack",
40
+ "regions": {
41
+ "content": [
42
+ {
43
+ "type": "card_grid",
44
+ "key": "products-grid",
45
+ "data": {
46
+ "columns": [
47
+ { "key": "name", "label": "Product", "kind": "text" },
48
+ { "key": "price", "label": "Price", "kind": "text" },
49
+ { "key": "stock", "label": "Stock", "kind": "number" },
50
+ { "key": "status", "label": "Status", "kind": "status" },
51
+ { "key": "category", "label": "Category", "kind": "text" },
52
+ { "key": "sales", "label": "Total Sales", "kind": "number" }
53
+ ],
54
+ "rows": [
55
+ {
56
+ "id": "prod-1",
57
+ "name": "NR-10 Safety Certification Course",
58
+ "description": "Complete electrical safety training with official NR-10 certification upon completion.",
59
+ "price": "$249.00",
60
+ "stock": null,
61
+ "status": "Published",
62
+ "category": "Safety Training",
63
+ "sales": 847,
64
+ "image": "/images/placeholder-course.png",
65
+ "href": "/store/products/prod-1"
66
+ },
67
+ {
68
+ "id": "prod-2",
69
+ "name": "Leadership & Management Bundle",
70
+ "description": "5-course bundle covering leadership fundamentals, team management, and strategic planning.",
71
+ "price": "$499.00",
72
+ "stock": null,
73
+ "status": "Published",
74
+ "category": "Management",
75
+ "sales": 312,
76
+ "image": "/images/placeholder-bundle.png",
77
+ "href": "/store/products/prod-2"
78
+ },
79
+ {
80
+ "id": "prod-3",
81
+ "name": "LGPD Compliance Training",
82
+ "description": "Brazilian data protection regulation training for all employees. Includes certificate.",
83
+ "price": "$129.00",
84
+ "stock": null,
85
+ "status": "Published",
86
+ "category": "Compliance",
87
+ "sales": 1203,
88
+ "image": "/images/placeholder-compliance.png",
89
+ "href": "/store/products/prod-3"
90
+ },
91
+ {
92
+ "id": "prod-4",
93
+ "name": "Excel for Finance Professionals",
94
+ "description": "Advanced Excel techniques for financial modeling, pivot tables, and VBA macros.",
95
+ "price": "$89.00",
96
+ "stock": null,
97
+ "status": "Published",
98
+ "category": "Technical Skills",
99
+ "sales": 567,
100
+ "image": "/images/placeholder-excel.png",
101
+ "href": "/store/products/prod-4"
102
+ },
103
+ {
104
+ "id": "prod-5",
105
+ "name": "Workplace First Aid Kit",
106
+ "description": "Professional first aid kit compliant with workplace safety regulations. Physical product.",
107
+ "price": "$45.00",
108
+ "stock": 142,
109
+ "status": "Published",
110
+ "category": "Safety Equipment",
111
+ "sales": 89,
112
+ "image": "/images/placeholder-kit.png",
113
+ "href": "/store/products/prod-5"
114
+ },
115
+ {
116
+ "id": "prod-6",
117
+ "name": "Annual Training Subscription",
118
+ "description": "Unlimited access to all courses for one year. Includes new releases and certificates.",
119
+ "price": "$1,200.00/year",
120
+ "stock": null,
121
+ "status": "Published",
122
+ "category": "Subscription",
123
+ "sales": 156,
124
+ "image": "/images/placeholder-subscription.png",
125
+ "href": "/store/products/prod-6"
126
+ },
127
+ {
128
+ "id": "prod-7",
129
+ "name": "Custom Onboarding Program",
130
+ "description": "Tailored onboarding program for enterprise clients. Contact for pricing.",
131
+ "price": "Contact Us",
132
+ "stock": null,
133
+ "status": "Draft",
134
+ "category": "Enterprise",
135
+ "sales": 0,
136
+ "image": "/images/placeholder-enterprise.png",
137
+ "href": "/store/products/prod-7"
138
+ },
139
+ {
140
+ "id": "prod-8",
141
+ "name": "Safety Helmet - Class B",
142
+ "description": "ANSI/ISEA Z89.1 compliant safety helmet. Available in white, yellow, and blue.",
143
+ "price": "$32.00",
144
+ "stock": 0,
145
+ "status": "Out of Stock",
146
+ "category": "Safety Equipment",
147
+ "sales": 423,
148
+ "image": "/images/placeholder-helmet.png",
149
+ "href": "/store/products/prod-8"
150
+ }
151
+ ],
152
+ "variant": "store",
153
+ "emptyState": {
154
+ "icon": "shopping-cart",
155
+ "title": "No products yet",
156
+ "description": "Start building your catalog by adding your first product.",
157
+ "cta": { "label": "Add Product", "href": "/store/products/new" }
158
+ }
159
+ }
160
+ }
161
+ ]
162
+ }
163
+ }
164
+ }
165
+ }
package/dist-lib/api/index.json ADDED
@@ -0,0 +1,52 @@
1
+ {
2
+ "description": "MIDDAG React UI -- Example PageContract API Endpoints. These static JSON files demonstrate the exact shape that Moodle and WordPress backends must produce to drive the @middag/react UI. Each file contains a complete PageContract (ADR-807) response with realistic mock data.",
3
+ "version": "1",
4
+ "endpoints": [
5
+ {
6
+ "path": "/api/example/moodle/get/books.json",
7
+ "method": "GET",
8
+ "host": "moodle",
9
+ "summary": "Books list -- stack layout with dense_table block (sortable columns, pagination, filters, row actions, bulk actions)",
10
+ "shell": "admin",
11
+ "layout": "stack",
12
+ "blocks": ["dense_table"]
13
+ },
14
+ {
15
+ "path": "/api/example/moodle/get/dashboard.json",
16
+ "method": "GET",
17
+ "host": "moodle",
18
+ "summary": "Admin dashboard -- dashboard layout with metric_card blocks + dense_table for recent activity",
19
+ "shell": "admin",
20
+ "layout": "dashboard",
21
+ "blocks": ["metric_card", "dense_table"]
22
+ },
23
+ {
24
+ "path": "/api/example/wordpress/get/products.json",
25
+ "method": "GET",
26
+ "host": "wordpress",
27
+ "summary": "Product catalog -- stack layout with card_grid block using 'store' variant for WooCommerce-style products",
28
+ "shell": "product",
29
+ "layout": "stack",
30
+ "blocks": ["card_grid"]
31
+ }
32
+ ],
33
+ "pageContractSpec": {
34
+ "reference": "src/contracts/page-contract.ts",
35
+ "blockDataReference": "src/contracts/block-data.ts",
36
+ "requiredFields": {
37
+ "version": "Always '1'",
38
+ "shell": "One of: product, admin, course, immersive",
39
+ "page.key": "Unique page identifier for caching/navigation",
40
+ "page.title": "Page heading displayed in the shell header",
41
+ "layout.template": "One of: stack, split, dashboard, master-detail, wizard, canvas",
42
+ "layout.regions": "Record<string, BlockDescriptor[]> -- region names depend on layout template"
43
+ },
44
+ "layoutRegions": {
45
+ "stack": ["content"],
46
+ "dashboard": ["metrics", "content", "aside"],
47
+ "split": ["main", "aside"],
48
+ "master-detail": ["master", "detail"],
49
+ "wizard": ["steps"]
50
+ }
51
+ }
52
+ }