robobyte-front-builder 1.0.25 → 1.0.27

package/training/examples/22-hr-onboarding.json

@@ -0,0 +1,222 @@
+{
+  "description": "HR onboarding wizard: 4 steps — personal, job, documents, and e-signature with richtext policy",
+  "components_used": ["layout", "layout-cell", "wizard", "wizard-step", "header", "label", "input", "dropdown", "datepicker", "richtext", "signature", "checkbox", "tag", "banner", "divider"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 0 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "padding": "0 0 20px 0" },
+        "children": [
+          { "type": "header", "props": { "text": "New Employee Onboarding", "variant": "h4", "component": "h1", "color": "textPrimary", "prefix": "PersonAddOutlined", "prefixColor": "primary.main", "iconGap": "12px" } },
+          { "type": "label", "props": { "text": "Complete all steps to finish your onboarding. This typically takes 15–20 minutes.", "variant": "body2", "color": "textSecondary" } }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "backgroundColor": "#ffffff", "borderRadius": "16px", "boxShadow": "0 4px 20px rgba(0,0,0,0.10)", "overflow": "hidden" },
+        "children": [
+          {
+            "type": "wizard",
+            "props": {
+              "key": "onboarding",
+              "variant": "linear",
+              "orientation": "horizontal",
+              "showStepNumbers": true,
+              "showProgress": true,
+              "completeLabel": "Submit Onboarding",
+              "nextLabel": "Next Step",
+              "backLabel": "Previous"
+            },
+            "children": [
+              {
+                "type": "wizard-step",
+                "props": { "label": "Personal Details", "description": "Your basic information" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 2, "gap": 20, "rowGap": 20 },
+                    "children": [
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": { "padding": "0 0 8px 0" }, "children": [
+                        { "type": "banner", "props": { "message": "Welcome! Please fill in your personal details accurately as they will appear in official records.", "severity": "info", "variant": "outlined", "open": true, "dismissible": false } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "legalFirstName", "label": "Legal First Name", "required": true, "helperText": "As it appears on your ID" }, "style": { "width": "100%" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "legalLastName", "label": "Legal Last Name", "required": true }, "style": { "width": "100%" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "preferredName", "label": "Preferred Name (optional)", "placeholder": "What should we call you?" }, "style": { "width": "100%" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "datepicker", "props": { "key": "dob", "label": "Date of Birth", "required": true, "fullWidth": true, "format": "MM/DD/YYYY" } }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "personalEmail", "label": "Personal Email", "required": true, "prefix": "EmailOutlined", "helperText": "Different from your work email" }, "style": { "width": "100%" } }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "phone", "label": "Mobile Phone", "required": true, "prefix": "PhoneOutlined" }, "style": { "width": "100%" } }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "emergencyContact", "label": "Emergency Contact Name", "required": true, "prefix": "LocalHospitalOutlined" }, "style": { "width": "100%" } }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "emergencyPhone", "label": "Emergency Contact Phone", "required": true, "prefix": "PhoneOutlined" }, "style": { "width": "100%" } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "wizard-step",
+                "props": { "label": "Job Setup", "description": "Your role and preferences" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 2, "gap": 20, "rowGap": 20 },
+                    "children": [
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "header", "props": { "text": "Your Role", "variant": "h6", "component": "h2", "color": "textPrimary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "label", "props": { "text": "Department", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.employee.department", "variant": "body1", "color": "textPrimary", "fontWeight": "600" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "label", "props": { "text": "Job Title", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.employee.title", "variant": "body1", "color": "textPrimary", "fontWeight": "600" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "label", "props": { "text": "Start Date", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.employee.startDate", "variant": "body1", "color": "textPrimary", "fontWeight": "600" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "label", "props": { "text": "Manager", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "data.employee.managerName", "variant": "body1", "color": "textPrimary", "fontWeight": "600" } }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "divider", "props": { "orientation": "horizontal" } }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "header", "props": { "text": "Work Preferences", "variant": "h6", "component": "h2", "color": "textPrimary" } }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        {
+                          "type": "dropdown",
+                          "props": {
+                            "key": "workSchedule",
+                            "label": "Preferred Work Schedule",
+                            "fullWidth": true,
+                            "options": [
+                              { "label": "Standard 9-5", "value": "standard" },
+                              { "label": "Early Bird (7am-3pm)", "value": "early" },
+                              { "label": "Night Owl (11am-7pm)", "value": "late" },
+                              { "label": "Flexible", "value": "flexible" }
+                            ]
+                          }
+                        }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        {
+                          "type": "dropdown",
+                          "props": {
+                            "key": "workLocation",
+                            "label": "Work Location",
+                            "required": true,
+                            "fullWidth": true,
+                            "options": [
+                              { "label": "Office (Full-Time)", "value": "office" },
+                              { "label": "Remote (Full-Time)", "value": "remote" },
+                              { "label": "Hybrid (2-3 days office)", "value": "hybrid" }
+                            ]
+                          }
+                        }
+                      ]},
+                      { "type": "layout-cell", "props": { "colSpan": 2 }, "style": {}, "children": [
+                        { "type": "tag", "props": { "key": "skills", "label": "Your Skills / Expertise", "fullWidth": true, "placeholder": "Type skills and press Enter..." } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "wizard-step",
+                "props": { "label": "Required Reading", "description": "Company policies" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 16 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "header", "props": { "text": "Company Policies", "variant": "h5", "component": "h2", "color": "textPrimary" } },
+                        { "type": "label", "props": { "text": "Please review the following policies carefully before proceeding.", "variant": "body2", "color": "textSecondary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "backgroundColor": "#f8f9fa", "borderRadius": "8px", "padding": "16px", "border": "1px solid #e0e0e0", "maxHeight": "300px", "overflow": "auto" }, "children": [
+                        { "type": "richtext", "props": { "key": "policyNotes", "value": "data.companyPolicies", "readOnly": true, "toolbar": false, "minHeight": "250px" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "checkbox", "props": { "key": "readCodeOfConduct", "label": "I have read and understood the Code of Conduct", "labelPosition": "right", "required": true } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "checkbox", "props": { "key": "readPrivacyPolicy", "label": "I have read and understood the Privacy & Data Policy", "labelPosition": "right", "required": true } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "checkbox", "props": { "key": "readSecurityPolicy", "label": "I have read and understood the IT Security Policy", "labelPosition": "right", "required": true } }
+                      ]}
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "wizard-step",
+                "props": { "label": "Sign & Submit", "description": "Final confirmation" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 20 },
+                    "children": [
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "header", "props": { "text": "Electronic Signature", "variant": "h5", "component": "h2", "color": "textPrimary" } },
+                        { "type": "label", "props": { "text": "By signing below, you confirm that all information provided is accurate and that you agree to all company policies.", "variant": "body2", "color": "textSecondary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": { "backgroundColor": "#f8f9fa", "borderRadius": "8px", "padding": "16px" }, "children": [
+                        { "type": "label", "props": { "text": "Legal Name: data.employee.fullName", "variant": "body1", "color": "textPrimary" } },
+                        { "type": "label", "props": { "text": "Employee ID: data.employee.id", "variant": "body2", "color": "textSecondary" } },
+                        { "type": "label", "props": { "text": "Date: data.today", "variant": "body2", "color": "textSecondary" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "signature", "props": { "key": "employeeSignature", "label": "Signature", "height": "150px", "width": "100%", "clearable": true, "required": true } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "divider", "props": { "orientation": "horizontal", "text": "HR Use Only" } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "signature", "props": { "key": "hrSignature", "label": "HR Representative Signature", "height": "120px", "width": "100%", "clearable": true } }
+                      ]},
+                      { "type": "layout-cell", "props": {}, "style": {}, "children": [
+                        { "type": "input", "props": { "key": "hrRepName", "label": "HR Representative Name" }, "style": { "width": "300px" } }
+                      ]}
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [],
+  "actions": [
+    {
+      "key": "onOnboardingComplete",
+      "type": "custom",
+      "code": "submitOnboarding({ personalInfo: { firstName: form.legalFirstName, lastName: form.legalLastName, dob: form.dob, email: form.personalEmail }, jobPrefs: { schedule: form.workSchedule, location: form.workLocation }, signature: form.employeeSignature })"
+    }
+  ],
+  "timers": []
+}

package/training/examples/23-document-browser.json

@@ -0,0 +1,241 @@
+{
+  "description": "Document browser with tree navigation, breadcrumb trail, data grid, and file preview dialog",
+  "components_used": ["layout", "layout-cell", "header", "label", "input", "button", "treeView", "breadcrumb", "dataGrid", "dialog", "kpi-metric", "kpi-badge", "banner"],
+  "root": {
+    "type": "layout",
+    "props": { "cols": 1, "rowGap": 16 },
+    "children": [
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": { "justifyContent": "space-between", "alignItems": "center" },
+        "children": [
+          { "type": "header", "props": { "text": "Document Library", "variant": "h4", "component": "h1", "color": "textPrimary" } },
+          {
+            "type": "layout",
+            "props": { "cols": 1, "rowGap": 0 },
+            "children": [
+              { "type": "layout-cell", "props": {}, "style": { "gap": "10px" }, "children": [
+                { "type": "input", "props": { "key": "docSearch", "label": "Search documents...", "prefix": "SearchOutlined", "size": "small" }, "style": { "width": "240px" } },
+                { "type": "button", "props": { "label": "Upload", "variant": "contained", "color": "primary", "size": "small", "prefix": "UploadOutlined" }, "actions": { "onClick": { "type": "custom", "code": "openUploadDialog()" } } }
+              ]}
+            ]
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "banner",
+            "props": { "key": "docBanner", "message": "data.bannerMessage", "severity": "data.bannerSeverity", "open": "data.showBanner", "dismissible": true },
+            "actions": { "onClose": { "type": "custom", "code": "setData({ showBanner: false })" } }
+          }
+        ]
+      },
+      {
+        "type": "layout-cell",
+        "props": {},
+        "style": {},
+        "children": [
+          {
+            "type": "layout",
+            "props": { "cols": 4, "gap": 0 },
+            "children": [
+              {
+                "type": "layout-cell",
+                "props": {},
+                "style": { "backgroundColor": "#ffffff", "borderRadius": "12px 0 0 12px", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "borderRight": "1px solid #e8e8e8", "overflow": "hidden" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 0 },
+                    "children": [
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "12px 16px", "backgroundColor": "#fafafa", "borderBottom": "1px solid #e8e8e8" },
+                        "children": [
+                          { "type": "label", "props": { "text": "Folders", "variant": "overline", "color": "textSecondary" } }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "8px" },
+                        "children": [
+                          {
+                            "type": "treeView",
+                            "props": {
+                              "dataKey": "data.folderTree",
+                              "idField": "id",
+                              "labelField": "name",
+                              "childrenField": "children",
+                              "selectedKey": "data.selectedFolderId",
+                              "selectable": true,
+                              "defaultIcon": "FolderOutlined",
+                              "leafIcon": "FolderOpenOutlined",
+                              "showCount": true,
+                              "dense": true,
+                              "showLines": false,
+                              "height": "520px",
+                              "selectedBg": "#e3f2fd",
+                              "selectedColor": "#1565c0"
+                            },
+                            "actions": {
+                              "onSelectCode": "setData({ selectedFolderId: selectedNode.id, currentPath: selectedNode.path, breadcrumbs: selectedNode.breadcrumbs })"
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              },
+              {
+                "type": "layout-cell",
+                "props": { "colSpan": 3 },
+                "style": { "backgroundColor": "#f8f9fa", "borderRadius": "0 12px 12px 0", "boxShadow": "0 2px 8px rgba(0,0,0,0.08)", "overflow": "hidden" },
+                "children": [
+                  {
+                    "type": "layout",
+                    "props": { "cols": 1, "rowGap": 0 },
+                    "children": [
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "12px 20px", "backgroundColor": "#ffffff", "borderBottom": "1px solid #e8e8e8", "justifyContent": "space-between", "alignItems": "center" },
+                        "children": [
+                          {
+                            "type": "breadcrumb",
+                            "props": {
+                              "itemsKey": "data.breadcrumbs",
+                              "labelField": "name",
+                              "hrefField": "path",
+                              "separator": "/",
+                              "maxItems": 5,
+                              "itemsAfterCollapse": 2
+                            }
+                          },
+                          { "type": "kpi-metric", "props": { "valueKey": "data.folderStats.fileCount", "label": "files", "format": "number", "fontSize": "13px", "fontWeight": "600", "align": "right", "labelPosition": "right", "labelFontSize": "12px", "labelColor": "text.secondary" } }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "16px" },
+                        "children": [
+                          {
+                            "type": "layout",
+                            "props": { "cols": 3, "gap": 12 },
+                            "children": [
+                              {
+                                "type": "layout-cell",
+                                "props": {},
+                                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "padding": "12px 16px", "boxShadow": "0 1px 3px rgba(0,0,0,0.06)" },
+                                "children": [
+                                  { "type": "kpi-metric", "props": { "valueKey": "data.folderStats.totalSize", "label": "Total Size", "format": "number", "decimals": 1, "suffix": " MB", "fontSize": "18px", "fontWeight": "600", "align": "left", "labelPosition": "above", "labelFontSize": "11px" } }
+                                ]
+                              },
+                              {
+                                "type": "layout-cell",
+                                "props": {},
+                                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "padding": "12px 16px", "boxShadow": "0 1px 3px rgba(0,0,0,0.06)" },
+                                "children": [
+                                  { "type": "kpi-metric", "props": { "valueKey": "data.folderStats.subfolders", "label": "Subfolders", "format": "number", "fontSize": "18px", "fontWeight": "600", "align": "left", "labelPosition": "above", "labelFontSize": "11px" } }
+                                ]
+                              },
+                              {
+                                "type": "layout-cell",
+                                "props": {},
+                                "style": { "backgroundColor": "#ffffff", "borderRadius": "8px", "padding": "12px 16px", "boxShadow": "0 1px 3px rgba(0,0,0,0.06)" },
+                                "children": [
+                                  { "type": "kpi-badge", "props": { "valueKey": "data.folderStats.accessLevel", "variant": "soft", "size": "medium", "thresholds": [{ "operator": "==", "value": "public", "color": "success.main", "label": "Public" }, { "operator": "==", "value": "restricted", "color": "warning.main", "label": "Restricted" }, { "operator": "==", "value": "private", "color": "error.main", "label": "Private" }] } }
+                                ]
+                              }
+                            ]
+                          }
+                        ]
+                      },
+                      {
+                        "type": "layout-cell",
+                        "props": {},
+                        "style": { "padding": "0 16px 16px 16px" },
+                        "children": [
+                          {
+                            "type": "dataGrid",
+                            "props": {
+                              "key": "documentsGrid",
+                              "dataKey": "data.documents",
+                              "height": "360px",
+                              "readOnly": true,
+                              "showAddBtn": false,
+                              "showDeleteCol": false,
+                              "rowSelection": "single",
+                              "columns": "data.documentColumns"
+                            },
+                            "actions": {
+                              "onRowClick": { "type": "custom", "code": "setData({ previewDoc: clickedRow }); openDialog('docPreviewDialog')" }
+                            }
+                          }
+                        ]
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "dialogs": [
+    {
+      "key": "docPreviewDialog",
+      "title": "data.previewDoc.name",
+      "width": "700px",
+      "children": [
+        {
+          "type": "layout",
+          "props": { "cols": 2, "gap": 20, "rowGap": 12 },
+          "children": [
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "label", "props": { "text": "File Name", "variant": "caption", "color": "textSecondary" } },
+              { "type": "label", "props": { "text": "data.previewDoc.name", "variant": "body1", "color": "textPrimary", "fontWeight": "500" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "label", "props": { "text": "File Type", "variant": "caption", "color": "textSecondary" } },
+              { "type": "label", "props": { "text": "data.previewDoc.type", "variant": "body1", "color": "textPrimary", "fontWeight": "500" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "label", "props": { "text": "Size", "variant": "caption", "color": "textSecondary" } },
+              { "type": "label", "props": { "text": "data.previewDoc.sizeFormatted", "variant": "body1", "color": "textPrimary" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "label", "props": { "text": "Last Modified", "variant": "caption", "color": "textSecondary" } },
+              { "type": "label", "props": { "text": "data.previewDoc.modifiedAt", "variant": "body1", "color": "textPrimary" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "label", "props": { "text": "Author", "variant": "caption", "color": "textSecondary" } },
+              { "type": "label", "props": { "text": "data.previewDoc.author", "variant": "body1", "color": "textPrimary" } }
+            ]},
+            { "type": "layout-cell", "props": {}, "style": {}, "children": [
+              { "type": "label", "props": { "text": "Version", "variant": "caption", "color": "textSecondary" } },
+              { "type": "label", "props": { "text": "data.previewDoc.version", "variant": "body1", "color": "textPrimary" } }
+            ]}
+          ]
+        }
+      ],
+      "actions": {
+        "onConfirm": { "type": "custom", "code": "downloadDocument(data.previewDoc.id)" },
+        "confirmLabel": "Download",
+        "cancelLabel": "Close"
+      }
+    }
+  ],
+  "actions": [],
+  "timers": []
+}