{
  "app": {
    "version": "example/v1",
    "metadata": {
      "name": "tooltip",
      "description": "tooltip"
    },
    "spec": {
      "components": [
        {
          "id": "root",
          "type": "chakra_ui/v1/root",
          "properties": {},
          "traits": []
        },
        {
          "id": "open_button",
          "type": "chakra_ui/v1/button",
          "properties": {
            "text": {
              "raw": "open toast",
              "format": "plain"
            }
          },
          "traits": [
            {
              "type": "core/v1/state",
              "properties": {
                "key": "lastToast",
                "initialValue": null
              }
            },
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "root",
                  "slot": "root"
                }
              }
            },
            {
              "type": "core/v1/event",
              "properties": {
                "handlers": [
                  {
                    "type": "onClick",
                    "componentId": "open_button",
                    "method": {
                      "name": "setValue",
                      "parameters": {
                        "key": "lastToast",
                        "value": "{{Math.random().toString()}}"
                      }
                    },
                    "wait": {}
                  },
                  {
                    "type": "onClick",
                    "componentId": "$utils",
                    "method": {
                      "name": "toast.open",
                      "parameters": {
                        "id": "{{open_button.lastToast}}",
                        "title": "i am a title",
                        "description": "i am a description",
                        "position": "bottom-right",
                        "duration": null,
                        "isClosable": true
                      }
                    },
                    "wait": {}
                  }
                ]
              }
            }
          ]
        },
        {
          "id": "close_last_button",
          "type": "chakra_ui/v1/button",
          "properties": {
            "text": {
              "raw": "close last toast",
              "format": "plain"
            }
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "root",
                  "slot": "root"
                }
              }
            },
            {
              "type": "core/v1/event",
              "properties": {
                "handlers": [
                  {
                    "type": "onClick",
                    "componentId": "$utils",
                    "method": {
                      "name": "toast.close",
                      "parameters": {
                        "id": "{{open_button.lastToast}}"
                      }
                    },
                    "wait": {},
                    "disabled": "{{!open_button.lastToast}}"
                  },
                  {
                    "type": "onClick",
                    "componentId": "open_button",
                    "method": {
                      "name": "setValue",
                      "parameters": {
                        "key": "lastToast",
                        "value": ""
                      }
                    },
                    "wait": {},
                    "disabled": "{{!open_button.lastToast}}"
                  }
                ]
              }
            }
          ]
        },
        {
          "id": "close_all_button",
          "type": "chakra_ui/v1/button",
          "properties": {
            "text": {
              "raw": "close all toast",
              "format": "plain"
            }
          },
          "traits": [
            {
              "type": "core/v1/slot",
              "properties": {
                "container": {
                  "id": "root",
                  "slot": "root"
                }
              }
            },
            {
              "type": "core/v1/event",
              "properties": {
                "handlers": [
                  {
                    "type": "onClick",
                    "componentId": "$utils",
                    "method": {
                      "name": "toast.close"
                    },
                    "wait": {}
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }
}