From d4d31c4c630957d8c623379be2ffeff35f178ce5 Mon Sep 17 00:00:00 2001 From: Richard Ward Date: Tue, 30 Dec 2025 19:17:03 +0000 Subject: [PATCH] config: ui,packages,json (1 files) --- packages/ui_auth/seed/components.json | 511 +++++++++++++++++++++++++- 1 file changed, 510 insertions(+), 1 deletion(-) diff --git a/packages/ui_auth/seed/components.json b/packages/ui_auth/seed/components.json index 60b074253..690f55a19 100644 --- a/packages/ui_auth/seed/components.json +++ b/packages/ui_auth/seed/components.json @@ -1 +1,510 @@ -[] +[ + { + "id": "access_denied", + "type": "Box", + "name": "AccessDenied", + "description": "A page showing Access Denied with message and login button", + "props": { + "className": "access-denied-page", + "sx": { + "display": "flex", + "flexDirection": "column", + "alignItems": "center", + "justifyContent": "center", + "minHeight": "100vh", + "p": 3 + } + }, + "children": [ + { + "id": "access_denied_card", + "type": "Card", + "props": { + "variant": "outlined", + "sx": { + "maxWidth": 480, + "width": "100%", + "textAlign": "center" + } + }, + "children": [ + { + "id": "access_denied_content", + "type": "Box", + "props": { + "sx": { + "p": 4 + } + }, + "children": [ + { + "id": "access_denied_icon", + "type": "Box", + "props": { + "sx": { + "mb": 3, + "color": "error.main" + } + }, + "children": [ + { + "id": "access_denied_icon_inner", + "type": "Icon", + "props": { + "name": "Lock", + "size": 64 + }, + "children": [] + } + ] + }, + { + "id": "access_denied_title", + "type": "Text", + "props": { + "variant": "h4", + "fontWeight": "bold", + "color": "error", + "sx": { + "mb": 2 + } + }, + "children": [] + }, + { + "id": "access_denied_message", + "type": "Text", + "props": { + "variant": "body1", + "color": "secondary", + "sx": { + "mb": 3 + } + }, + "children": [] + }, + { + "id": "access_denied_level_info", + "type": "Box", + "props": { + "sx": { + "mb": 3, + "p": 2, + "borderRadius": 1, + "bgcolor": "action.hover" + } + }, + "children": [ + { + "id": "access_denied_required_level", + "type": "Text", + "props": { + "variant": "body2", + "color": "secondary" + }, + "children": [] + }, + { + "id": "access_denied_current_level", + "type": "Text", + "props": { + "variant": "body2", + "color": "secondary" + }, + "children": [] + } + ] + }, + { + "id": "access_denied_actions", + "type": "Stack", + "props": { + "direction": "row", + "spacing": 2, + "justifyContent": "center" + }, + "children": [ + { + "id": "access_denied_back_button", + "type": "Button", + "props": { + "variant": "outlined", + "color": "secondary", + "startIcon": "ArrowBack" + }, + "children": [] + }, + { + "id": "access_denied_login_button", + "type": "Button", + "props": { + "variant": "contained", + "color": "primary", + "startIcon": "Login" + }, + "children": [] + } + ] + } + ] + } + ] + } + ], + "scripts": { + "init": "denied.initialize", + "login": "denied.redirectToLogin", + "back": "denied.goBack" + } + }, + { + "id": "auth_gate", + "type": "Box", + "name": "AuthGate", + "description": "A wrapper that shows content or redirects to login based on auth state", + "props": { + "className": "auth-gate", + "sx": { + "width": "100%", + "height": "100%" + } + }, + "children": [ + { + "id": "auth_gate_loading", + "type": "Box", + "props": { + "className": "auth-gate-loading", + "sx": { + "display": "flex", + "alignItems": "center", + "justifyContent": "center", + "minHeight": "200px" + } + }, + "children": [ + { + "id": "auth_gate_loading_spinner", + "type": "CircularProgress", + "props": { + "size": 40 + }, + "children": [] + } + ] + }, + { + "id": "auth_gate_denied", + "type": "Box", + "props": { + "className": "auth-gate-denied" + }, + "children": [ + { + "id": "auth_gate_denied_content", + "type": "ComponentRef", + "props": { + "ref": "access_denied" + }, + "children": [] + } + ] + }, + { + "id": "auth_gate_challenge", + "type": "Card", + "props": { + "className": "auth-gate-challenge", + "variant": "outlined", + "sx": { + "maxWidth": 400, + "mx": "auto", + "mt": 4, + "p": 3 + } + }, + "children": [ + { + "id": "auth_gate_challenge_icon", + "type": "Box", + "props": { + "sx": { + "textAlign": "center", + "mb": 2 + } + }, + "children": [ + { + "id": "auth_gate_challenge_icon_inner", + "type": "Icon", + "props": { + "name": "VerifiedUser", + "size": 48, + "color": "primary" + }, + "children": [] + } + ] + }, + { + "id": "auth_gate_challenge_title", + "type": "Text", + "props": { + "variant": "h6", + "textAlign": "center", + "sx": { + "mb": 2 + } + }, + "children": [] + }, + { + "id": "auth_gate_challenge_message", + "type": "Text", + "props": { + "variant": "body2", + "color": "secondary", + "textAlign": "center", + "sx": { + "mb": 3 + } + }, + "children": [] + }, + { + "id": "auth_gate_challenge_actions", + "type": "Stack", + "props": { + "spacing": 2 + }, + "children": [ + { + "id": "auth_gate_challenge_login_btn", + "type": "Button", + "props": { + "variant": "contained", + "color": "primary", + "fullWidth": true, + "startIcon": "Login" + }, + "children": [] + }, + { + "id": "auth_gate_challenge_cancel_btn", + "type": "Button", + "props": { + "variant": "text", + "color": "secondary", + "fullWidth": true + }, + "children": [] + } + ] + } + ] + }, + { + "id": "auth_gate_content", + "type": "Box", + "props": { + "className": "auth-gate-content" + }, + "children": [] + } + ], + "scripts": { + "init": "gate.initialize", + "check": "gate.checkAccess", + "redirect": "gate.redirectToLogin", + "allow": "gate.allowAccess", + "deny": "gate.denyAccess" + } + }, + { + "id": "page_loader", + "type": "Box", + "name": "PageLoader", + "description": "A full-page loading spinner with skeleton placeholders", + "props": { + "className": "page-loader", + "sx": { + "display": "flex", + "flexDirection": "column", + "alignItems": "center", + "justifyContent": "center", + "minHeight": "100vh", + "p": 3 + } + }, + "children": [ + { + "id": "page_loader_spinner_container", + "type": "Box", + "props": { + "className": "page-loader-spinner", + "sx": { + "textAlign": "center", + "mb": 4 + } + }, + "children": [ + { + "id": "page_loader_spinner", + "type": "CircularProgress", + "props": { + "size": 56, + "thickness": 4 + }, + "children": [] + }, + { + "id": "page_loader_text", + "type": "Text", + "props": { + "variant": "body1", + "color": "secondary", + "sx": { + "mt": 2 + } + }, + "children": [] + } + ] + }, + { + "id": "page_loader_skeleton", + "type": "Card", + "props": { + "className": "page-loader-skeleton", + "variant": "outlined", + "sx": { + "maxWidth": 600, + "width": "100%", + "p": 3 + } + }, + "children": [ + { + "id": "page_loader_skeleton_header", + "type": "Box", + "props": { + "sx": { + "mb": 3 + } + }, + "children": [ + { + "id": "page_loader_skeleton_title", + "type": "Skeleton", + "props": { + "variant": "text", + "width": "60%", + "height": 32 + }, + "children": [] + }, + { + "id": "page_loader_skeleton_subtitle", + "type": "Skeleton", + "props": { + "variant": "text", + "width": "40%", + "height": 20 + }, + "children": [] + } + ] + }, + { + "id": "page_loader_skeleton_content", + "type": "Stack", + "props": { + "spacing": 2 + }, + "children": [ + { + "id": "page_loader_skeleton_line1", + "type": "Skeleton", + "props": { + "variant": "text", + "width": "100%", + "height": 20 + }, + "children": [] + }, + { + "id": "page_loader_skeleton_line2", + "type": "Skeleton", + "props": { + "variant": "text", + "width": "90%", + "height": 20 + }, + "children": [] + }, + { + "id": "page_loader_skeleton_line3", + "type": "Skeleton", + "props": { + "variant": "text", + "width": "95%", + "height": 20 + }, + "children": [] + }, + { + "id": "page_loader_skeleton_line4", + "type": "Skeleton", + "props": { + "variant": "text", + "width": "70%", + "height": 20 + }, + "children": [] + } + ] + }, + { + "id": "page_loader_skeleton_actions", + "type": "Stack", + "props": { + "direction": "row", + "spacing": 2, + "sx": { + "mt": 3 + } + }, + "children": [ + { + "id": "page_loader_skeleton_btn1", + "type": "Skeleton", + "props": { + "variant": "rectangular", + "width": 100, + "height": 36 + }, + "children": [] + }, + { + "id": "page_loader_skeleton_btn2", + "type": "Skeleton", + "props": { + "variant": "rectangular", + "width": 100, + "height": 36 + }, + "children": [] + } + ] + } + ] + } + ], + "scripts": { + "init": "loader.initialize", + "show": "loader.show", + "hide": "loader.hide", + "updateText": "loader.updateText" + } + } +]