[docs] Toolpad docs part 1

docs/data/pages.ts

@@ -4,22 +4,75 @@ const pages: MuiPage[] = [
   {
     pathname: '/toolpad/getting-started',
     title: 'Getting started',
-    icon: 'CreateIcon',
+    icon: 'DescriptionIcon',
     children: [
-      { pathname: '/toolpad/getting-started/setup' },
-      { pathname: '/toolpad/getting-started/tutorial', title: 'Tutorial' },
+      { pathname: '/toolpad/getting-started/introduction', title: 'Introduction' },
+      { pathname: '/toolpad/getting-started/quickstart', title: 'Quickstart' },
     ],
   },
   {
-    pathname: '/toolpad/data-fetching',
+    pathname: '/toolpad/connecting-to-data-sources',
+    title: 'Connecting to data sources',
     icon: 'TableViewIcon',
     children: [
-      { pathname: '/toolpad/data-fetching', title: 'Overview' },
-      { pathname: '/toolpad/data-fetching/rest', title: 'REST API' },
-      { pathname: '/toolpad/data-fetching/google-sheets', title: 'Google Sheets' },
-      { pathname: '/toolpad/data-fetching/queries' },
+      {
+        pathname: '/toolpad/connecting-to-data-sources/queries',
+        title: 'Queries',
+      },
+      {
+        pathname: '/toolpad/connecting-to-data-sources/connections',
+        title: 'Connections',
+      },
+      {
+        pathname: '/toolpad/connecting-to-data-sources/fetch',
+        title: 'Fetch type',
+      },
+      {
+        pathname: '/toolpad/connecting-to-data-sources/function',
+        title: 'Function type [TODO]',
+      },
+      {
+        pathname: '/toolpad/connecting-to-data-sources/google-sheets',
+        title: 'Google sheets type [TODO]',
+      },
+      {
+        pathname: '/toolpad/connecting-to-data-sources/sql',
+        title: 'SQL type [TODO]',
+      },
     ],
   },
+  {
+    pathname: '/toolpad/building-ui',
+    title: 'Building UI [TODO]',
+    icon: 'VisibilityIcon',
+    children: [
+      {
+        pathname: '/toolpad/building-ui/build-in-components',
+        title: 'Built in components',
+      },
+    ],
+  },
+  {
+    pathname: '/toolpad/data-binding',
+    title: 'Data binding',
+    icon: 'CodeIcon',
+  },
+  {
+    pathname: '/toolpad/versioning-and-deploying',
+    title: 'Versioning & deploying [TODO]',
+    icon: 'ToggleOnIcon',
+    children: [
+      {
+        pathname: '/toolpad/versioning-and-deploying/releases',
+        title: 'Releases',
+      },
+    ],
+  },
+  {
+    pathname: '/toolpad/faq',
+    title: 'FAQ [TODO]',
+    icon: 'ReaderIcon',
+  },
 ];
 
 export default pages;

docs/data/toolpad/connecting-to-data-sources/connections.md

@@ -0,0 +1,48 @@
+# Connections
+
+<p class="description">
+    <b>CONNECTION</b> instance allows us to reuse certain configuration details to create <b>queries</b> faster
+</p>
+
+In order to create a new `CONNECTION` instance press `+` button in the `Instance editor` on the left
+
+![Add Connection](/static/toolpad/connection.png)
+
+## Connection types
+
+There are 2 query types that **do not require** `CONNECTION` instance:
+
+1. [Function](/toolpad/connecting-to-data-sources/function/) type
+
+   ![Connection function](/static/toolpad/connection-function-1.png)
+
+   We can define `Secrets` (key/value) that we can later access in the `Function` type `query`
+
+   ![Connection function](/static/toolpad/connection-function-2.png)
+
+1. [Fetch](/toolpad/connecting-to-data-sources/fetch/) type
+
+   ![Connection fetch](/static/toolpad/connection-fetch-1.png)
+
+   We can configure:
+
+   - `base url` - url that can be shared between different types of queries
+   - `Headers` - pass custom headers with each request
+   - `Authentication` type - if your API is protected choose authentication method that fits your needs:
+     - `Basic` - adds `Authorization` header and generates **base64** encoded value for a given user credentials
+     - `Bearer token` - adds `Authorization` header generates value for provided token
+     - `API key` - adds key/value header
+
+There are 2 types that **require** `CONNECTION` instance:
+
+1. [Google Sheets](/toolpad/connecting-to-data-sources/google-sheets/) type
+
+1. [Postgres](/toolpad/connecting-to-data-sources/postgres/) type
+
+   In order `query` data from `postgres` database we **must** configure connection
+
+   ![Connection postgres](/static/toolpad/connection-postgres-1.png)
+
+   Provide database credentials and `TEST CONNECTION` to verify that we are able to connect
+
+   If everything is correct `SAVE` and you will be able to use [Postgres](/toolpad/connecting-to-data-sources/postgres/) queries

docs/data/toolpad/connecting-to-data-sources/fetch.md

@@ -0,0 +1,30 @@
+# Fetch
+
+<p class="description">Fetch query type is the easiest and fastest way to load external data within Toolpad app.</p>
+
+As explained in the [connections](/toolpad/connecting-to-data-sources/connections/) section you can either create a reusable `connection` or simply create a new `query` and put all connection details inline
+
+1. Choose `ADD QUERY` in the `Properties editor` on the right
+
+1. Select `Fetch` type and click `CREATE QUERY`
+
+   ![Fetch type](/static/toolpad/fetch-query-1.png)
+
+1. We got all the basic configuration settings as described in [queries](/toolpad/connecting-to-data-sources/queries/) section
+
+1. In addition we can configuration following properties inline
+
+   ![Fetch configuration](/static/toolpad/fetch-query-2.png)
+
+   - `parameters` - allows us to use [data bound](/toolpad/data-binding/) properties which can then be used construct dynamic `url` value
+   - `HTTP method` - by default `GET` is used, but we also support `POST`, `PUT`, `DELETE`, `PATHC` and `HEAD` methods
+   - `url` - is an endpoint to which requests will be made. We also have an option to dynamically generate `url` by using [data binding](/toolpad/data-binding/). `Parameters` can be accessed by using `query` object inside `url` `data binding` editor
+
+   ![Dynamic url](/static/toolpad/fetch-query-3.png)
+
+1. Knowing that data comes in a different shapes we provide an easy way to `transform response`
+
+   - Simply enable option by checking `Transform response`
+   - Then modify which properties of `data` object should be returned as a final response
+
+   ![Transform response](/static/toolpad/fetch-query-4.png)

docs/data/toolpad/connecting-to-data-sources/queries.md

@@ -0,0 +1,34 @@
+# Queries
+
+<p class="description">
+    Toolpad allows us to easily connect to external data sources and render dynamic data. The easiest way to do so is to create a new <b>QUERY</b> which can be used to fetch data
+</p>
+
+1. Locate `ADD QUERY` button in the `Properties editor` on the right
+
+   ![Query](/static/toolpad/query-1.png)
+
+2. There are currently **4 different types\*** that can be used to fetch data:
+
+   ![Query types](/static/toolpad/query-2.png)
+
+   - [Function](/toolpad/connecting-to-data-sources/function/) - advanced fetching methods which gives a lot of freedom by allowing to write custom fetching code
+   - [Fetch](/toolpad/connecting-to-data-sources/fetch/) - basic, but very powerful. Just pass URL of an API endpoint and you are ready to query your data
+   - [Google Sheets](/toolpad/connecting-to-data-sources/google-sheets/) - allows accessing data from your `Google sheet` document
+   - [Postgres](/toolpad/connecting-to-data-sources/postgres/) - ability to hook directly into your own DB without the need to use API
+
+   \* - by default you will see only `Function` and `Fetch` types, for `Google Sheets` and `Postgres` you will first need to create a [`CONNECTION` instance](/toolpad/connecting-to-data-sources/connections/)
+
+3. After choosing the `QUERY` type and clicking `CREATE QUERY` you will be presented with a query configuration dialog (configuration settings for each individual type are documented on their respective pages).
+
+   There are a few configuration options that are applicable to every `QUERY` type:
+
+   ![Query configuration](/static/toolpad/query-3.png)
+
+   - `Refetch on window focus` - execute the query every time the window is focused to make sure you always have the latest data visible
+   - `Refetch on network reconnect` - execute the query every time the network status changes
+   - `Refetch interval` - you can configure the query to run on an interval, e.g. every **30s**. To disable this option, keep the field empty
+
+## What's next?
+
+[Learn all about](/toolpad/connecting-to-data-sources/connections/) `CONNECTIONS` so you can use all `QUERY` types

docs/data/toolpad/data-binding.md

@@ -0,0 +1,55 @@
+# Data binding
+
+<p class="description">
+    Data binding is a widely used concept inside Toolpad app which allows us to connect various parts of the application and make them dynamically react to data changes
+</p>
+
+## Binding button
+
+In order to initiate `data binding` look around in the UI for a binding button.
+
+![Binding icon](/static/toolpad/data-binding-1.png)
+
+The easiest way to tell if a value can be "data bound" is by locating binding button, i.e. `TextField` component allows us to bind every property that we could otherwise control manually
+
+![Binding example](/static/toolpad/data-binding-2.png)
+
+## Binding editor
+
+Upon clicking `binding button` we will be presented with `binding editor` which allows us to define `JavaScript` expression.
+
+At the top of the editor we can see an explanation what **type** of property we expect to be defined (i.e. above mentions `string`).
+
+![Binding editor](/static/toolpad/data-binding-3.png)
+
+On the left side of the editor we have a list of all the `variables` in the `scope` that can be used to define the expression.
+
+We can either simply pass a `path` to a property of the `object` or we can also use any other `JavaScript` expression or code snippet to additionally process the value that is going to be used.
+
+![Binding custom expression](/static/toolpad/data-binding-4.png)
+
+All that's left is to click `UPDATE BINDING` and we can observe how application behaves
+
+(In this example we bound value of `TextField` to the value of `Typography` component)
+
+Empty field:
+
+![Binding result 1](/static/toolpad/data-binding-5.png)
+
+Field with value:
+
+![Binding result 2](/static/toolpad/data-binding-6.png)
+
+## Global scope variables
+
+Sometimes we might want to define our `custom variables` that could be used for `data binding` in order to do that we can use `EDIT PAGE MODULE` functionality that can be found in the `properties editor` on the right
+
+![Edit page module](/static/toolpad/data-binding-7.png)
+
+We will be presented with an editor where we can define any number of variables
+
+![Global scope](/static/toolpad/data-binding-8.png)
+
+Once we `SAVE` our changes we can use those variables to bind value of any property
+
+![Global variable in the editor](/static/toolpad/data-binding-9.png)

docs/data/toolpad/getting-started/introduction.md

@@ -0,0 +1,24 @@
+# Introduction
+
+<p class="description">Quickly build internal tools. MUI Toolpad is a self-hosted low-code internal tools builder designed to extend the MUI React components. It's designed for developers of all trades who want to save time building internal applications.</p>
+
+## What is Toolpad?
+
+Learn a few core concepts of the Toolpad app and you are ready to ship your application in minutes! Drag & drop pre-built UI components, connect your data sources, release your app - and you're done!
+
+![Editor screenshot](/static/toolpad/hero-screenshot.png)
+
+## How Toolpad works?
+
+- [Build UI](/toolpad/core-concepts/building-ui/) using our drag & drop editor
+- [Configure and fetch](/toolpad/core-concepts/connecting-to-data-sources/) data from HTTP endpoints, Google sheets or even directly from Postgres SQL DB
+- Connect data with UI elements using [binding expressions](/toolpad/core-concepts/data-binding/)
+- When you are ready to share - [deploy](/toolpad/core-concepts/versioning-and-deploying/) a new version
+
+## See it in action
+
+TODO: embed our demo video from landing page?
+
+## What's next?
+
+[Try to build your first app](/toolpad/getting-started/quickstart/)