metabuilder/packages/ui_dialogs/components/ui.json

{
  "$schema": "https://metabuilder.dev/schemas/json-script-components.schema.json",
  "schemaVersion": "2.0.0",
  "package": "ui_dialogs",
  "description": "Dialog components for confirmations, alerts, and forms",
  "components": [
    {
      "id": "confirm_dialog",
      "name": "ConfirmDialog",
      "description": "Confirmation dialog with title, message, and confirm/cancel buttons",
      "props": [
        {
          "name": "open",
          "type": "boolean",
          "required": true,
          "default": false
        },
        {
          "name": "title",
          "type": "string",
          "required": true
        },
        {
          "name": "message",
          "type": "string",
          "required": true
        },
        {
          "name": "confirmLabel",
          "type": "string",
          "default": "Confirm"
        },
        {
          "name": "cancelLabel",
          "type": "string",
          "default": "Cancel"
        },
        {
          "name": "severity",
          "type": "string",
          "default": "primary",
          "enum": ["primary", "secondary", "error", "warning", "info", "success"]
        }
      ],
      "handlers": {
        "onConfirm": "confirm.handleConfirm",
        "onCancel": "confirm.handleCancel",
        "onClose": "confirm.handleClose"
      },
      "render": {
        "type": "element",
        "template": {
          "type": "Dialog",
          "open": "{{open}}",
          "maxWidth": "sm",
          "fullWidth": true,
          "onClose": "onClose",
          "children": [
            {
              "type": "DialogTitle",
              "sx": {
                "display": "flex",
                "alignItems": "center",
                "gap": 1
              },
              "children": [
                {
                  "type": "Icon",
                  "name": "HelpOutline",
                  "color": "{{severity}}"
                },
                "{{title}}"
              ]
            },
            {
              "type": "DialogContent",
              "dividers": true,
              "children": [
                {
                  "type": "Text",
                  "variant": "body1",
                  "color": "textSecondary",
                  "children": "{{message}}"
                }
              ]
            },
            {
              "type": "DialogActions",
              "sx": {
                "px": 3,
                "py": 2,
                "gap": 1
              },
              "children": [
                {
                  "type": "Button",
                  "variant": "outlined",
                  "color": "secondary",
                  "onClick": "onCancel",
                  "children": "{{cancelLabel}}"
                },
                {
                  "type": "Button",
                  "variant": "contained",
                  "color": "{{severity}}",
                  "autoFocus": true,
                  "onClick": "onConfirm",
                  "children": "{{confirmLabel}}"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "alert_dialog",
      "name": "AlertDialog",
      "description": "Simple alert dialog with message and OK button",
      "props": [
        {
          "name": "open",
          "type": "boolean",
          "required": true,
          "default": false
        },
        {
          "name": "title",
          "type": "string",
          "required": true
        },
        {
          "name": "message",
          "type": "string",
          "required": true
        },
        {
          "name": "confirmLabel",
          "type": "string",
          "default": "OK"
        },
        {
          "name": "severity",
          "type": "string",
          "default": "info",
          "enum": ["info", "error", "warning", "success"]
        }
      ],
      "handlers": {
        "onConfirm": "alert.handleConfirm",
        "onClose": "alert.handleClose"
      },
      "render": {
        "type": "element",
        "template": {
          "type": "Dialog",
          "open": "{{open}}",
          "maxWidth": "xs",
          "fullWidth": true,
          "onClose": "onClose",
          "children": [
            {
              "type": "DialogTitle",
              "sx": {
                "display": "flex",
                "alignItems": "center",
                "gap": 1
              },
              "children": [
                {
                  "type": "Icon",
                  "name": "{{severity === 'error' ? 'Error' : severity === 'warning' ? 'Warning' : severity === 'success' ? 'CheckCircle' : 'Info'}}",
                  "color": "{{severity}}"
                },
                "{{title}}"
              ]
            },
            {
              "type": "DialogContent",
              "children": [
                {
                  "type": "Text",
                  "variant": "body1",
                  "color": "textSecondary",
                  "children": "{{message}}"
                }
              ]
            },
            {
              "type": "DialogActions",
              "sx": {
                "px": 3,
                "py": 2
              },
              "children": [
                {
                  "type": "Button",
                  "variant": "contained",
                  "color": "{{severity}}",
                  "autoFocus": true,
                  "onClick": "onConfirm",
                  "children": "{{confirmLabel}}"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "id": "form_dialog",
      "name": "FormDialog",
      "description": "Dialog containing a form with submit/cancel buttons",
      "props": [
        {
          "name": "open",
          "type": "boolean",
          "required": true,
          "default": false
        },
        {
          "name": "title",
          "type": "string",
          "required": true
        },
        {
          "name": "formFields",
          "type": "array",
          "required": true,
          "description": "Array of form field components"
        },
        {
          "name": "submitLabel",
          "type": "string",
          "default": "Submit"
        },
        {
          "name": "cancelLabel",
          "type": "string",
          "default": "Cancel"
        },
        {
          "name": "hideCloseButton",
          "type": "boolean",
          "default": false
        }
      ],
      "state": [
        {
          "name": "isSubmitting",
          "type": "boolean",
          "default": false
        }
      ],
      "handlers": {
        "onSubmit": "confirm.handleSubmit",
        "onCancel": "confirm.handleCancel",
        "onClose": "confirm.handleClose",
        "validate": "confirm.validate"
      },
      "render": {
        "type": "element",
        "template": {
          "type": "Dialog",
          "open": "{{open}}",
          "maxWidth": "sm",
          "fullWidth": true,
          "onClose": "onClose",
          "children": [
            {
              "type": "DialogTitle",
              "sx": {
                "display": "flex",
                "alignItems": "center",
                "justifyContent": "space-between"
              },
              "children": [
                {
                  "type": "Text",
                  "variant": "h6",
                  "children": "{{title}}"
                },
                {
                  "type": "conditional",
                  "condition": "{{!hideCloseButton}}",
                  "then": {
                    "type": "IconButton",
                    "size": "small",
                    "onClick": "onClose",
                    "children": [
                      {
                        "type": "Icon",
                        "name": "Close",
                        "size": 20
                      }
                    ]
                  }
                }
              ]
            },
            {
              "type": "DialogContent",
              "dividers": true,
              "children": [
                {
                  "type": "Box",
                  "component": "form",
                  "onSubmit": "onSubmit",
                  "sx": {
                    "display": "flex",
                    "flexDirection": "column",
                    "gap": 2,
                    "pt": 1
                  },
                  "children": [
                    {
                      "type": "Stack",
                      "direction": "column",
                      "spacing": 2,
                      "children": "{{formFields}}"
                    }
                  ]
                }
              ]
            },
            {
              "type": "DialogActions",
              "sx": {
                "px": 3,
                "py": 2,
                "gap": 1
              },
              "children": [
                {
                  "type": "Button",
                  "variant": "outlined",
                  "color": "secondary",
                  "onClick": "onCancel",
                  "children": "{{cancelLabel}}"
                },
                {
                  "type": "Button",
                  "variant": "contained",
                  "color": "primary",
                  "type": "submit",
                  "disabled": "{{isSubmitting}}",
                  "onClick": "onSubmit",
                  "children": "{{submitLabel}}"
                }
              ]
            }
          ]
        }
      }
    }
  ],
  "exports": {
    "components": ["ConfirmDialog", "AlertDialog", "FormDialog"]
  }
}