Docs-update

docs/data/pages.ts

@@ -55,6 +55,10 @@ const pages: MuiPage[] = [
     pathname: '/toolpad/data-binding',
     icon: 'CodeIcon',
   },
+  {
+    pathname: '/toolpad/deployment',
+    icon: 'BuildIcon',
+  },
   // {
   //   pathname: '/toolpad/versioning-and-deploying',
   //   title: 'Versioning & deploying [TODO]',

docs/data/toolpad/data-binding.md

@@ -37,3 +37,15 @@ Empty field:
 Field with value:
 
 <img src="/static/toolpad/docs/data-binding/bind-6.png" alt="Binding result 2" width="902px" />
+
+## Event handling
+
+Some components have event handler props, such as the `Button` component and its `onClick` prop. Event handler props can be bound to run a piece of code to mutate the page state.
+
+(In the example below you can see how after clicking the button, the value is copied from one component to the other)
+
+<img src="/static/toolpad/docs/data-binding/bind-10.png" alt="Binding result 2" width="902px" style="margin-bottom: 8px;" />
+
+After clicking the Button:
+
+<img src="/static/toolpad/docs/data-binding/bind-11.png" alt="Binding result 2" width="200px" />

docs/data/toolpad/deployment.md

@@ -0,0 +1,26 @@
+# Deployment
+
+<p class="description">Deploying a Toolpad app is like deploying any other React application and has 3 steps:</p>
+
+To serve your app locally:
+
+```sh
+npm start
+```
+
+This command will create an optimized production build for the Toolpad app and will output the generated files:
+
+```sh
+npm run build
+```
+
+Once the build has been made, you can deploy it to any service of your choice!
+
+## Overriding page display mode
+
+You can override any page's display mode by adding the `toolpad-display` query parameter to the URL.
+
+Possible values:
+
+- `standalone` - Hide app shell
+- `shell` - Show navigation sidebar

docs/pages/toolpad/deployment.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { demos, docs, demoComponents } from '../../data/toolpad/deployment.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} disableAd />;
+}