robobyte-front-builder 1.0.26 → 1.0.27

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 (81) hide show
  1. package/LICENSE +65 -0
  2. package/README.md +57 -0
  3. package/docs/ReportViewer.md +581 -0
  4. package/docs/fetchReportData.md +379 -0
  5. package/docs/printLayout.md +405 -0
  6. package/package.json +29 -1
  7. package/training/00-index.md +168 -0
  8. package/training/01-input.md +144 -0
  9. package/training/02-checkbox.md +107 -0
  10. package/training/03-dropdown.md +135 -0
  11. package/training/04-datepicker.md +139 -0
  12. package/training/05-radio.md +123 -0
  13. package/training/06-number.md +133 -0
  14. package/training/07-textarea.md +114 -0
  15. package/training/08-richtext.md +112 -0
  16. package/training/09-tag.md +110 -0
  17. package/training/10-time.md +107 -0
  18. package/training/11-toggle.md +108 -0
  19. package/training/12-signature.md +107 -0
  20. package/training/13-autocomplete.md +134 -0
  21. package/training/14-button.md +168 -0
  22. package/training/15-label.md +138 -0
  23. package/training/16-header.md +128 -0
  24. package/training/17-divider.md +96 -0
  25. package/training/18-image.md +105 -0
  26. package/training/19-link.md +108 -0
  27. package/training/20-banner.md +122 -0
  28. package/training/21-progress-circle.md +101 -0
  29. package/training/22-progress-line.md +93 -0
  30. package/training/23-menu.md +139 -0
  31. package/training/24-popover.md +114 -0
  32. package/training/25-layout.md +116 -0
  33. package/training/26-layout-cell.md +143 -0
  34. package/training/27-card.md +87 -0
  35. package/training/28-wizard.md +126 -0
  36. package/training/29-wizard-step.md +92 -0
  37. package/training/30-repeater.md +123 -0
  38. package/training/31-dialog.md +131 -0
  39. package/training/32-breadcrumb.md +121 -0
  40. package/training/33-dataGrid.md +129 -0
  41. package/training/34-dataTableViewer.md +115 -0
  42. package/training/35-reportViewer.md +673 -0
  43. package/training/36-viewRenderer.md +110 -0
  44. package/training/37-treeView.md +170 -0
  45. package/training/38-kpi-metric.md +148 -0
  46. package/training/39-kpi-trend.md +105 -0
  47. package/training/40-kpi-badge.md +112 -0
  48. package/training/41-kpi-statusDot.md +118 -0
  49. package/training/42-kpi-iconBox.md +114 -0
  50. package/training/43-kpi-gauge.md +143 -0
  51. package/training/44-kpi-bulletChart.md +126 -0
  52. package/training/45-kpi-colorScale.md +143 -0
  53. package/training/46-kpi-rating.md +125 -0
  54. package/training/47-kpi-countdown.md +151 -0
  55. package/training/48-fetchReportData.md +276 -0
  56. package/training/49-printLayout.md +215 -0
  57. package/training/examples/01-login-form.json +176 -0
  58. package/training/examples/02-contact-form.json +141 -0
  59. package/training/examples/03-kpi-cards-row.json +123 -0
  60. package/training/examples/04-settings-toggles.json +153 -0
  61. package/training/examples/05-user-profile-card.json +136 -0
  62. package/training/examples/06-date-range-filter.json +108 -0
  63. package/training/examples/07-search-bar-results.json +130 -0
  64. package/training/examples/08-notification-settings.json +131 -0
  65. package/training/examples/09-employee-profile-form.json +259 -0
  66. package/training/examples/10-invoice-form.json +241 -0
  67. package/training/examples/11-dashboard-overview.json +251 -0
  68. package/training/examples/12-registration-wizard.json +154 -0
  69. package/training/examples/13-product-catalog.json +168 -0
  70. package/training/examples/14-data-table-with-filters.json +180 -0
  71. package/training/examples/15-tabbed-profile.json +92 -0
  72. package/training/examples/16-kpi-full-row.json +203 -0
  73. package/training/examples/17-tree-detail-view.json +139 -0
  74. package/training/examples/18-employee-management.json +233 -0
  75. package/training/examples/19-sales-dashboard.json +272 -0
  76. package/training/examples/20-checkout-wizard.json +225 -0
  77. package/training/examples/21-analytics-page.json +222 -0
  78. package/training/examples/22-hr-onboarding.json +222 -0
  79. package/training/examples/23-document-browser.json +241 -0
  80. package/training/examples/24-order-management.json +290 -0
  81. package/training/examples/25-crm-contact-page.json +272 -0
package/training/examples/11-dashboard-overview.json ADDED
@@ -0,0 +1,251 @@
1
+ {
2
+ "description": "Executive dashboard with KPI row, gauges, trend metrics, progress bars, and a data report",
3
+ "components_used": ["layout", "layout-cell", "header", "label", "kpi-metric", "kpi-trend", "kpi-gauge", "kpi-badge", "kpi-statusDot", "progress-line", "reportViewer", "divider"],
4
+ "root": {
5
+ "type": "layout",
6
+ "props": { "cols": 1, "rowGap": 24 },
7
+ "children": [
8
+ {
9
+ "type": "layout-cell",
10
+ "props": {},
11
+ "style": { "justifyContent": "space-between", "alignItems": "center" },
12
+ "children": [
13
+ { "type": "header", "props": { "text": "Executive Dashboard", "variant": "h4", "component": "h1", "color": "textPrimary" } },
14
+ { "type": "label", "props": { "text": "data.lastUpdated", "variant": "caption", "color": "textSecondary", "prefix": "AccessTimeOutlined", "prefixSize": "14px", "iconGap": "4px" } }
15
+ ]
16
+ },
17
+ {
18
+ "type": "layout-cell",
19
+ "props": {},
20
+ "style": {},
21
+ "children": [
22
+ {
23
+ "type": "layout",
24
+ "props": { "cols": 4, "gap": 16 },
25
+ "children": [
26
+ {
27
+ "type": "layout-cell",
28
+ "props": {},
29
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
30
+ "children": [
31
+ {
32
+ "type": "layout",
33
+ "props": { "cols": 1, "rowGap": 8 },
34
+ "children": [
35
+ {
36
+ "type": "layout-cell",
37
+ "props": {},
38
+ "style": { "justifyContent": "space-between", "alignItems": "flex-start" },
39
+ "children": [
40
+ { "type": "label", "props": { "text": "Revenue", "variant": "overline", "color": "textSecondary" } },
41
+ { "type": "kpi-statusDot", "props": { "valueKey": "data.revenueStatus", "size": "8", "pulse": true, "showLabel": false, "thresholds": [{ "operator": "==", "value": "up", "color": "success.main" }] } }
42
+ ]
43
+ },
44
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
45
+ { "type": "kpi-metric", "props": { "valueKey": "data.revenue", "format": "currency", "currency": "USD", "decimals": 0, "fontSize": "26px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
46
+ ]},
47
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
48
+ { "type": "kpi-trend", "props": { "valueKey": "data.revenueGrowth", "label": "vs last month", "isPercent": true, "decimals": 1, "variant": "chip", "size": "small", "showIcon": true } }
49
+ ]}
50
+ ]
51
+ }
52
+ ]
53
+ },
54
+ {
55
+ "type": "layout-cell",
56
+ "props": {},
57
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
58
+ "children": [
59
+ {
60
+ "type": "layout",
61
+ "props": { "cols": 1, "rowGap": 8 },
62
+ "children": [
63
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
64
+ { "type": "label", "props": { "text": "Active Users", "variant": "overline", "color": "textSecondary" } }
65
+ ]},
66
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
67
+ { "type": "kpi-metric", "props": { "valueKey": "data.activeUsers", "format": "number", "fontSize": "26px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
68
+ ]},
69
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
70
+ { "type": "kpi-trend", "props": { "valueKey": "data.usersGrowth", "label": "vs last week", "isPercent": true, "decimals": 0, "variant": "chip", "size": "small", "showIcon": true } }
71
+ ]}
72
+ ]
73
+ }
74
+ ]
75
+ },
76
+ {
77
+ "type": "layout-cell",
78
+ "props": {},
79
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
80
+ "children": [
81
+ {
82
+ "type": "layout",
83
+ "props": { "cols": 1, "rowGap": 8 },
84
+ "children": [
85
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
86
+ { "type": "label", "props": { "text": "Conversion Rate", "variant": "overline", "color": "textSecondary" } }
87
+ ]},
88
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
89
+ { "type": "kpi-metric", "props": { "valueKey": "data.conversionRate", "format": "percent", "decimals": 1, "fontSize": "26px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
90
+ ]},
91
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
92
+ { "type": "kpi-trend", "props": { "valueKey": "data.conversionDelta", "label": "pts vs last quarter", "isPercent": false, "decimals": 2, "variant": "chip", "size": "small", "showIcon": true } }
93
+ ]}
94
+ ]
95
+ }
96
+ ]
97
+ },
98
+ {
99
+ "type": "layout-cell",
100
+ "props": {},
101
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "20px" },
102
+ "children": [
103
+ {
104
+ "type": "layout",
105
+ "props": { "cols": 1, "rowGap": 8 },
106
+ "children": [
107
+ {
108
+ "type": "layout-cell",
109
+ "props": {},
110
+ "style": { "justifyContent": "space-between", "alignItems": "flex-start" },
111
+ "children": [
112
+ { "type": "label", "props": { "text": "CSAT Score", "variant": "overline", "color": "textSecondary" } },
113
+ { "type": "kpi-badge", "props": { "valueKey": "data.csatLevel", "variant": "soft", "size": "small", "thresholds": [{ "operator": "==", "value": "excellent", "color": "success.main", "label": "Excellent" }, { "operator": "==", "value": "good", "color": "info.main", "label": "Good" }] } }
114
+ ]
115
+ },
116
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
117
+ { "type": "kpi-metric", "props": { "valueKey": "data.csatScore", "format": "number", "decimals": 1, "suffix": "/5", "fontSize": "26px", "fontWeight": "700", "align": "left", "labelPosition": "none" } }
118
+ ]},
119
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
120
+ { "type": "kpi-trend", "props": { "valueKey": "data.csatDelta", "label": "vs last quarter", "isPercent": false, "decimals": 1, "variant": "chip", "size": "small", "showIcon": true } }
121
+ ]}
122
+ ]
123
+ }
124
+ ]
125
+ }
126
+ ]
127
+ }
128
+ ]
129
+ },
130
+ {
131
+ "type": "layout-cell",
132
+ "props": {},
133
+ "style": {},
134
+ "children": [
135
+ {
136
+ "type": "layout",
137
+ "props": { "cols": 3, "gap": 16 },
138
+ "children": [
139
+ {
140
+ "type": "layout-cell",
141
+ "props": {},
142
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
143
+ "children": [
144
+ {
145
+ "type": "layout",
146
+ "props": { "cols": 1, "rowGap": 16 },
147
+ "children": [
148
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
149
+ { "type": "header", "props": { "text": "Goal Progress", "variant": "h6", "color": "textPrimary" } }
150
+ ]},
151
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
152
+ { "type": "progress-line", "props": { "valueKey": "data.revenueProgress", "label": "Revenue Goal", "showValue": true, "format": "percent", "color": "primary", "height": 10, "borderRadius": 5 } }
153
+ ]},
154
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
155
+ { "type": "progress-line", "props": { "valueKey": "data.usersProgress", "label": "User Acquisition", "showValue": true, "format": "percent", "color": "success", "height": 10, "borderRadius": 5 } }
156
+ ]},
157
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
158
+ { "type": "progress-line", "props": { "valueKey": "data.npsProgress", "label": "NPS Target", "showValue": true, "format": "percent", "color": "warning", "height": 10, "borderRadius": 5 } }
159
+ ]},
160
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
161
+ { "type": "progress-line", "props": { "valueKey": "data.supportProgress", "label": "Support SLA", "showValue": true, "format": "percent", "color": "info", "height": 10, "borderRadius": 5 } }
162
+ ]}
163
+ ]
164
+ }
165
+ ]
166
+ },
167
+ {
168
+ "type": "layout-cell",
169
+ "props": {},
170
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
171
+ "children": [
172
+ {
173
+ "type": "layout",
174
+ "props": { "cols": 1, "rowGap": 8 },
175
+ "children": [
176
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
177
+ { "type": "header", "props": { "text": "Health Score", "variant": "h6", "color": "textPrimary" } }
178
+ ]},
179
+ { "type": "layout-cell", "props": {}, "style": { "justifyContent": "center" }, "children": [
180
+ { "type": "kpi-gauge", "props": { "valueKey": "data.healthScore", "min": 0, "max": 100, "size": 180, "thickness": 14, "label": "Overall Health", "format": "number", "decimals": 0, "suffix": "%", "showNeedle": true, "colors": [{ "from": 0, "to": 40, "color": "#f44336" }, { "from": 40, "to": 70, "color": "#ff9800" }, { "from": 70, "to": 100, "color": "#4caf50" }] } }
181
+ ]}
182
+ ]
183
+ }
184
+ ]
185
+ },
186
+ {
187
+ "type": "layout-cell",
188
+ "props": {},
189
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
190
+ "children": [
191
+ {
192
+ "type": "layout",
193
+ "props": { "cols": 1, "rowGap": 12 },
194
+ "children": [
195
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
196
+ { "type": "header", "props": { "text": "Quick Stats", "variant": "h6", "color": "textPrimary" } }
197
+ ]},
198
+ { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
199
+ { "type": "label", "props": { "text": "Open Tickets", "variant": "body2", "color": "textSecondary" } },
200
+ { "type": "kpi-metric", "props": { "valueKey": "data.openTickets", "format": "number", "fontSize": "16px", "fontWeight": "700", "align": "right", "labelPosition": "none" } }
201
+ ]},
202
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [{ "type": "divider", "props": { "orientation": "horizontal" } }] },
203
+ { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
204
+ { "type": "label", "props": { "text": "Avg Response Time", "variant": "body2", "color": "textSecondary" } },
205
+ { "type": "kpi-metric", "props": { "valueKey": "data.avgResponseTime", "format": "number", "decimals": 0, "suffix": " min", "fontSize": "16px", "fontWeight": "700", "align": "right", "labelPosition": "none" } }
206
+ ]},
207
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [{ "type": "divider", "props": { "orientation": "horizontal" } }] },
208
+ { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
209
+ { "type": "label", "props": { "text": "Uptime", "variant": "body2", "color": "textSecondary" } },
210
+ { "type": "kpi-metric", "props": { "valueKey": "data.uptime", "format": "percent", "decimals": 2, "fontSize": "16px", "fontWeight": "700", "align": "right", "labelPosition": "none", "color": "success.main" } }
211
+ ]},
212
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [{ "type": "divider", "props": { "orientation": "horizontal" } }] },
213
+ { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
214
+ { "type": "label", "props": { "text": "Error Rate", "variant": "body2", "color": "textSecondary" } },
215
+ { "type": "kpi-metric", "props": { "valueKey": "data.errorRate", "format": "percent", "decimals": 2, "fontSize": "16px", "fontWeight": "700", "align": "right", "labelPosition": "none", "color": "error.main" } }
216
+ ]}
217
+ ]
218
+ }
219
+ ]
220
+ }
221
+ ]
222
+ }
223
+ ]
224
+ },
225
+ {
226
+ "type": "layout-cell",
227
+ "props": {},
228
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "padding": "24px" },
229
+ "children": [
230
+ {
231
+ "type": "layout",
232
+ "props": { "cols": 1, "rowGap": 16 },
233
+ "children": [
234
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
235
+ { "type": "header", "props": { "text": "Recent Activity", "variant": "h6", "color": "textPrimary" } }
236
+ ]},
237
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
238
+ { "type": "reportViewer", "props": { "key": "activityReport", "id": "recent-activity", "pageId": "dashboard", "height": "300px", "noHeader": true, "refresh": true } }
239
+ ]}
240
+ ]
241
+ }
242
+ ]
243
+ }
244
+ ]
245
+ },
246
+ "dialogs": [],
247
+ "actions": [],
248
+ "timers": [
249
+ { "key": "dashboardRefresh", "interval": 60000, "action": { "type": "custom", "code": "refreshDashboard()" } }
250
+ ]
251
+ }
package/training/examples/12-registration-wizard.json ADDED
@@ -0,0 +1,154 @@
1
+ {
2
+ "description": "Multi-step registration wizard with account, personal, and terms steps — wizard pattern",
3
+ "components_used": ["layout", "layout-cell", "wizard", "wizard-step", "header", "label", "input", "dropdown", "checkbox", "signature", "button", "divider"],
4
+ "root": {
5
+ "type": "layout",
6
+ "props": { "cols": 1, "rowGap": 0 },
7
+ "children": [
8
+ {
9
+ "type": "layout-cell",
10
+ "props": {},
11
+ "style": { "backgroundColor": "#ffffff", "borderRadius": "16px", "boxShadow": "0 4px 24px rgba(0,0,0,0.10)", "padding": "0", "overflow": "hidden", "maxWidth": "680px" },
12
+ "children": [
13
+ {
14
+ "type": "wizard",
15
+ "props": {
16
+ "key": "registration",
17
+ "variant": "linear",
18
+ "orientation": "horizontal",
19
+ "showStepNumbers": true,
20
+ "showProgress": true,
21
+ "completeLabel": "Create Account",
22
+ "nextLabel": "Continue",
23
+ "backLabel": "Back"
24
+ },
25
+ "children": [
26
+ {
27
+ "type": "wizard-step",
28
+ "props": { "label": "Account Setup", "description": "Choose your credentials" },
29
+ "children": [
30
+ {
31
+ "type": "layout",
32
+ "props": { "cols": 1, "rowGap": 20 },
33
+ "children": [
34
+ { "type": "layout-cell", "props": {}, "style": { "padding": "8px 0 16px 0" }, "children": [
35
+ { "type": "header", "props": { "text": "Create Your Account", "variant": "h5", "component": "h2", "color": "textPrimary" } },
36
+ { "type": "label", "props": { "text": "Set up your login credentials", "variant": "body2", "color": "textSecondary" } }
37
+ ]},
38
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
39
+ { "type": "input", "props": { "key": "username", "label": "Username", "required": true, "placeholder": "Choose a username", "prefix": "PersonOutlined", "size": "medium" }, "style": { "width": "100%" } }
40
+ ]},
41
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
42
+ { "type": "input", "props": { "key": "email", "label": "Email Address", "required": true, "placeholder": "you@example.com", "prefix": "EmailOutlined", "size": "medium" }, "style": { "width": "100%" } }
43
+ ]},
44
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
45
+ { "type": "input", "props": { "key": "password", "label": "Password", "required": true, "placeholder": "Min. 8 characters", "prefix": "LockOutlined", "suffix": "VisibilityOutlined", "size": "medium" }, "style": { "width": "100%" } }
46
+ ]},
47
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
48
+ { "type": "input", "props": { "key": "confirmPassword", "label": "Confirm Password", "required": true, "placeholder": "Repeat your password", "prefix": "LockOutlined", "size": "medium" }, "style": { "width": "100%" } }
49
+ ]}
50
+ ]
51
+ }
52
+ ]
53
+ },
54
+ {
55
+ "type": "wizard-step",
56
+ "props": { "label": "Personal Info", "description": "Tell us about yourself" },
57
+ "children": [
58
+ {
59
+ "type": "layout",
60
+ "props": { "cols": 2, "gap": 16, "rowGap": 20 },
61
+ "children": [
62
+ { "type": "layout-cell", "props": { "colSpan": 2 }, "style": { "padding": "8px 0 16px 0" }, "children": [
63
+ { "type": "header", "props": { "text": "Personal Information", "variant": "h5", "component": "h2", "color": "textPrimary" } },
64
+ { "type": "label", "props": { "text": "Help us personalize your experience", "variant": "body2", "color": "textSecondary" } }
65
+ ]},
66
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
67
+ { "type": "input", "props": { "key": "firstName", "label": "First Name", "required": true, "size": "medium" }, "style": { "width": "100%" } }
68
+ ]},
69
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
70
+ { "type": "input", "props": { "key": "lastName", "label": "Last Name", "required": true, "size": "medium" }, "style": { "width": "100%" } }
71
+ ]},
72
+ { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
73
+ { "type": "input", "props": { "key": "phone", "label": "Phone Number", "prefix": "PhoneOutlined", "size": "medium" }, "style": { "width": "100%" } }
74
+ ]},
75
+ { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
76
+ {
77
+ "type": "dropdown",
78
+ "props": {
79
+ "key": "country",
80
+ "label": "Country",
81
+ "required": true,
82
+ "fullWidth": true,
83
+ "optionsKey": "data.countries",
84
+ "labelField": "name",
85
+ "valueField": "code"
86
+ }
87
+ }
88
+ ]},
89
+ { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
90
+ {
91
+ "type": "dropdown",
92
+ "props": {
93
+ "key": "role",
94
+ "label": "How will you use this platform?",
95
+ "fullWidth": true,
96
+ "options": [
97
+ { "label": "Individual / Personal", "value": "individual" },
98
+ { "label": "Small Business (1-10)", "value": "small" },
99
+ { "label": "Medium Business (11-200)", "value": "medium" },
100
+ { "label": "Enterprise (200+)", "value": "enterprise" }
101
+ ]
102
+ }
103
+ }
104
+ ]}
105
+ ]
106
+ }
107
+ ]
108
+ },
109
+ {
110
+ "type": "wizard-step",
111
+ "props": { "label": "Terms & Sign", "description": "Review and agree" },
112
+ "children": [
113
+ {
114
+ "type": "layout",
115
+ "props": { "cols": 1, "rowGap": 20 },
116
+ "children": [
117
+ { "type": "layout-cell", "props": {}, "style": { "padding": "8px 0 16px 0" }, "children": [
118
+ { "type": "header", "props": { "text": "Terms & Agreement", "variant": "h5", "component": "h2", "color": "textPrimary" } },
119
+ { "type": "label", "props": { "text": "Please read and accept the terms before continuing", "variant": "body2", "color": "textSecondary" } }
120
+ ]},
121
+ { "type": "layout-cell", "props": {}, "style": { "backgroundColor": "#f8f9fa", "borderRadius": "8px", "padding": "16px", "border": "1px solid #e0e0e0", "maxHeight": "180px", "overflow": "auto" }, "children": [
122
+ { "type": "label", "props": { "text": "data.termsText", "variant": "body2", "color": "textSecondary" } }
123
+ ]},
124
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
125
+ { "type": "checkbox", "props": { "key": "acceptTerms", "label": "I have read and agree to the Terms of Service and Privacy Policy", "labelPosition": "right", "required": true } }
126
+ ]},
127
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
128
+ { "type": "checkbox", "props": { "key": "acceptMarketing", "label": "I agree to receive marketing communications (optional)", "labelPosition": "right" } }
129
+ ]},
130
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
131
+ { "type": "divider", "props": { "orientation": "horizontal" } }
132
+ ]},
133
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
134
+ { "type": "label", "props": { "text": "Please sign below to confirm your registration", "variant": "body2", "color": "textSecondary" } }
135
+ ]},
136
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
137
+ { "type": "signature", "props": { "key": "signature", "label": "Your Signature", "height": "120px", "width": "100%", "clearable": true } }
138
+ ]}
139
+ ]
140
+ }
141
+ ]
142
+ }
143
+ ]
144
+ }
145
+ ]
146
+ }
147
+ ]
148
+ },
149
+ "dialogs": [],
150
+ "actions": [
151
+ { "key": "onWizardComplete", "type": "custom", "code": "registerUser({ username: form.username, email: form.email, password: form.password, firstName: form.firstName, lastName: form.lastName, country: form.country, signature: form.signature })" }
152
+ ],
153
+ "timers": []
154
+ }
package/training/examples/13-product-catalog.json ADDED
@@ -0,0 +1,168 @@
1
+ {
2
+ "description": "Product catalog grid using repeater — card per product with image, name, price, badge, and add-to-cart",
3
+ "components_used": ["layout", "layout-cell", "header", "label", "input", "dropdown", "repeater", "card", "image", "kpi-metric", "kpi-badge", "button", "divider"],
4
+ "root": {
5
+ "type": "layout",
6
+ "props": { "cols": 1, "rowGap": 24 },
7
+ "children": [
8
+ {
9
+ "type": "layout-cell",
10
+ "props": {},
11
+ "style": { "justifyContent": "space-between", "alignItems": "center" },
12
+ "children": [
13
+ { "type": "header", "props": { "text": "Product Catalog", "variant": "h4", "component": "h1", "color": "textPrimary" } },
14
+ { "type": "label", "props": { "text": "data.totalProducts + ' products'", "variant": "body2", "color": "textSecondary" } }
15
+ ]
16
+ },
17
+ {
18
+ "type": "layout-cell",
19
+ "props": {},
20
+ "style": {},
21
+ "children": [
22
+ {
23
+ "type": "layout",
24
+ "props": { "cols": 4, "gap": 12 },
25
+ "children": [
26
+ {
27
+ "type": "layout-cell",
28
+ "props": { "colSpan": 2 },
29
+ "style": {},
30
+ "children": [
31
+ { "type": "input", "props": { "key": "search", "label": "Search products...", "prefix": "SearchOutlined", "size": "medium" }, "style": { "width": "100%" } }
32
+ ]
33
+ },
34
+ {
35
+ "type": "layout-cell",
36
+ "props": {},
37
+ "style": {},
38
+ "children": [
39
+ {
40
+ "type": "dropdown",
41
+ "props": {
42
+ "key": "category",
43
+ "label": "Category",
44
+ "fullWidth": true,
45
+ "options": [
46
+ { "label": "All Categories", "value": "" },
47
+ { "label": "Electronics", "value": "electronics" },
48
+ { "label": "Clothing", "value": "clothing" },
49
+ { "label": "Home & Garden", "value": "home" },
50
+ { "label": "Sports", "value": "sports" }
51
+ ]
52
+ }
53
+ }
54
+ ]
55
+ },
56
+ {
57
+ "type": "layout-cell",
58
+ "props": {},
59
+ "style": {},
60
+ "children": [
61
+ {
62
+ "type": "dropdown",
63
+ "props": {
64
+ "key": "sortBy",
65
+ "label": "Sort By",
66
+ "fullWidth": true,
67
+ "options": [
68
+ { "label": "Newest First", "value": "newest" },
69
+ { "label": "Price: Low to High", "value": "price_asc" },
70
+ { "label": "Price: High to Low", "value": "price_desc" },
71
+ { "label": "Best Rating", "value": "rating" }
72
+ ]
73
+ }
74
+ }
75
+ ]
76
+ }
77
+ ]
78
+ }
79
+ ]
80
+ },
81
+ {
82
+ "type": "layout-cell",
83
+ "props": {},
84
+ "style": {},
85
+ "children": [
86
+ {
87
+ "type": "repeater",
88
+ "props": {
89
+ "key": "products",
90
+ "dataKey": "data.products",
91
+ "cols": 4,
92
+ "gap": 16
93
+ },
94
+ "children": [
95
+ {
96
+ "type": "card",
97
+ "props": { "elevation": 2, "padding": "0px", "borderRadius": "12px", "overflow": "hidden" },
98
+ "children": [
99
+ {
100
+ "type": "layout",
101
+ "props": { "cols": 1, "rowGap": 0 },
102
+ "children": [
103
+ {
104
+ "type": "layout-cell",
105
+ "props": {},
106
+ "style": { "position": "relative", "overflow": "hidden" },
107
+ "children": [
108
+ { "type": "image", "props": { "src": "item.imageUrl", "alt": "item.name", "width": "100%", "height": "200px", "objectFit": "cover" } },
109
+ {
110
+ "type": "layout-cell",
111
+ "props": {},
112
+ "style": { "position": "absolute", "top": "8px", "right": "8px" },
113
+ "children": [
114
+ { "type": "kpi-badge", "props": { "valueKey": "item.status", "variant": "filled", "size": "small", "thresholds": [{ "operator": "==", "value": "new", "color": "info.main", "label": "New" }, { "operator": "==", "value": "sale", "color": "error.main", "label": "Sale" }, { "operator": "==", "value": "bestseller", "color": "warning.main", "label": "Best Seller" }] } }
115
+ ]
116
+ }
117
+ ]
118
+ },
119
+ {
120
+ "type": "layout-cell",
121
+ "props": {},
122
+ "style": { "padding": "16px" },
123
+ "children": [
124
+ {
125
+ "type": "layout",
126
+ "props": { "cols": 1, "rowGap": 8 },
127
+ "children": [
128
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
129
+ { "type": "label", "props": { "text": "item.category", "variant": "overline", "color": "primary" } }
130
+ ]},
131
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
132
+ { "type": "header", "props": { "text": "item.name", "variant": "h6", "component": "h3", "color": "textPrimary", "noWrap": true } }
133
+ ]},
134
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
135
+ { "type": "label", "props": { "text": "item.description", "variant": "body2", "color": "textSecondary", "noWrap": true } }
136
+ ]},
137
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
138
+ { "type": "divider", "props": { "orientation": "horizontal" } }
139
+ ]},
140
+ { "type": "layout-cell", "props": {}, "style": { "justifyContent": "space-between", "alignItems": "center" }, "children": [
141
+ { "type": "kpi-metric", "props": { "valueKey": "item.price", "format": "currency", "currency": "USD", "decimals": 2, "fontSize": "20px", "fontWeight": "700", "align": "left", "labelPosition": "none" } },
142
+ { "type": "label", "props": { "text": "item.rating + '★'", "variant": "body2", "color": "warning.main", "fontWeight": "600" } }
143
+ ]},
144
+ { "type": "layout-cell", "props": {}, "style": {}, "children": [
145
+ {
146
+ "type": "button",
147
+ "props": { "label": "Add to Cart", "variant": "contained", "color": "primary", "fullWidth": true, "size": "small", "prefix": "ShoppingCartOutlined" },
148
+ "actions": { "onClick": { "type": "custom", "code": "addToCart(item.id)" } }
149
+ }
150
+ ]}
151
+ ]
152
+ }
153
+ ]
154
+ }
155
+ ]
156
+ }
157
+ ]
158
+ }
159
+ ]
160
+ }
161
+ ]
162
+ }
163
+ ]
164
+ },
165
+ "dialogs": [],
166
+ "actions": [],
167
+ "timers": []
168
+ }