[improvement] rename onEvent to onUiEvent (#1358)

This PR:
- renames `onEvent` to `onUiEvent`
- adds docs for `onUiEvent` to the docs site
- splits the `EventsExample` into `UiEventsExample` and
`StoreEventsExample`

### Change Type

- [x] `major` — Breaking Change

### Release Notes

- [docs] Adds docs for ui events
- [tldraw] Renames `onEvent` to `onUiEvent`

apps/docs/content/docs/user-interface.mdx

@@ -15,6 +15,24 @@ keywords:
   - styles
 ---
 
-Coming soon.
+## Events
+
+The `<Tldraw>` component has a prop, `onUiEvent`, that the user interface will call when certain events occur.
+
+```tsx
+function Example() {
+  function handleEvent(name, data) {
+    // do something with the event
+  }
+
+  return (
+    <Tldraw onUiEvent={handleEvent}/>
+  )
+}
+```
+
+The `onUiEvent` callback is called with the name of the event as a string and an object with information about the event's source (e.g. `menu` or `context-menu`) and possibly other data specific to each event, such as the direction in an `align-shapes` event.
+
+Note that `onUiEvent` is only called when interacting with the user interface. It is not called when running commands manually against the app, e.g. `app.alignShapes()` will not call `onUiEvent`.
 
 See the [tldraw repository](https://github.com/tldraw/tldraw) for an example of how to customize tldraw's user interface.