[docs] Start Toolpad Core docs

docs/data/toolpad/core/all-components/all-components.md

@@ -4,3 +4,4 @@
 
 - [App Provider](/toolpad/core/react-app-provider/)
 - [Dashboard Layout](/toolpad/core/react-dashboard-layout/)
+- [Data Grid](/toolpad/core/react-data-grid/)

docs/data/toolpad/core/components/data-grid/data-grid.md

@@ -6,9 +6,9 @@ components: DataGrid, DataProvider
 
 # Data Grid
 
-<p class="description">Data Grid component for CRUD applications.</p>
+<p class="description">Data Grid component for CRUD ("Create Read Update Delete") applications.</p>
 
-Toolpad Core extends the X grid with CRUD functionality. It abstracts the manipulations in a data provider object. The data provider object describes the shape of the data and the available manipulations. When you pass the data provider to a grid it is automatically configured as a CRUD grid. All properties of the X grid are also available and can be used to override the data provider behavior.
+Toolpad Core extends the [X data grid](https://mui.com/x/react-data-grid/) with CRUD functionality. It abstracts the manipulations in a data provider object. The data provider object describes the shape of the data and the available manipulations. When you pass the data provider to a grid it is automatically configured as a CRUD grid. All properties of the X grid are also available and can be used to override the data provider behavior.
 
 Where Core and X components focus on the user interface, Toolpad Core components start from a definition of the data. It centralizes data loading, filtering, pagination, field formatting, mutations, access control and more.
 
@@ -20,13 +20,13 @@ The simplest data provider exposes a `getMany` function and a `fields` definitio
 
 ## Override columns
 
-The Toolpad Core grid adopts the fields that are defined in its data provider. This is handy because it allows for sharing formatting and validation options between data rendering components. But it is still possible to override the defaults at the level of an individual grid. The grid adopts the columns you've defined in the `columns` property, and sets default values for the individual column options for each of them.
+The Toolpad Core grid adopts the fields that are defined in its data provider. This is handy because it allows for sharing formatting and validation options between data rendering components. However, it is still possible to override the defaults at the level of an individual grid. The grid adopts the columns you've defined in the `columns` property, and sets default values for the individual column options for each of them.
 
 {{"demo": "OverrideColumns.js"}}
 
-## Column inferrence
+## Column inference
 
-To help you get started quickly, the grid is able to inferrence data provider fields if they are not defined. This allows you to quickly get started with a basic field definition based on the returned data. When a data provider is passed that doesn't have a field definiton, the grid infers field definitions and shows a warning. Click the question mark to show more information on how to solve the warning message. Try copying the snippet from the dialog and paste it in the data provider definition below:
+To help you get started quickly, the grid is able to infer data provider fields if they are not defined. This allows you to quickly get started with a basic field definition based on the returned data. When a data provider is passed that doesn't have a field definiton, the grid infers field definitions and shows a warning. Click the question mark to show more information on how to solve the warning message. Try copying the snippet from the dialog and paste it in the data provider definition below:
 
 {{"demo": "FieldInference.js"}}
 
@@ -42,25 +42,25 @@ You can decide whether your data provider supports pagination exclusively or opt
 
 The data provider supports all basic CRUD operations
 
-### Create
+### Create a row
 
 When you add a `createOne` method to the data provider, the grid gets a "Add record" button in the Toolbar. When you click this button, a draft row shows wich you can fill with values for the created item. To commit the new row, click the save button. This calls the `createOne` function with the values that were filled. When the operation finishes, a notification shows.
 
 {{"demo": "CrudCreate.js"}}
 
-### Update
+### Update a row
 
 When you add a `updateOne` method to the data provider, the grid gets edit buttons in its action column. When you click this button, the row goes in editing mode. When you click the save button, the `updateOne` method is called with the row id as first parameter and the changed values as the second parameter. When the operation finishes, a notification shows.
 
 {{"demo": "CrudUpdate.js"}}
 
-### Delete
+### Delete a row
 
 When you add a `deleteOne` method to your data provider, the grid gets delete buttons in its action column. When you click this button, the `deleteOne` method is called with the id of the relevant row. When the operation finishes, a notification shows.
 
 {{"demo": "CrudDelete.js"}}
 
-### 🚧 Delete multiple
+### 🚧 Delete multiple rows
 
 When the data provider contains a `deleteMany` method, the grid allows for multiple selection and delete.
 

docs/data/toolpad/core/components/index.md

@@ -5,4 +5,3 @@
 - [Dashboard Layout](/toolpad/core/components/dashboard-layout/)
 - [Data Grid](/toolpad/core/components/data-grid/)
 - [Line Chart](/toolpad/core/components/line-chart/)
-- [Select Filter](/toolpad/core/components/select-filter/)

docs/data/toolpad/core/features/data-providers.md

@@ -4,7 +4,7 @@
 
 ## Interface
 
-A data provider is a stateless interface representing a collection of remote data. It mainly contains method to fetch and manipulate this data, along with certain additional methods for certain data providers.
+A data provider is a stateless interface representing a collection of remote data. It mainly contains methods to fetch and manipulate this data, along with certain additional methods for certain data providers.
 
 ```tsx
 import { createDataProvider } from '@toolpad/data';
@@ -34,10 +34,6 @@ const sharedDataSource = useSharedDataProvider(dataProvider, {
 });
 ```
 
-:::info
-Find more details in the [connecting to components](/toolpad/data/connecting-to-components/) page
-:::
-
 ## Server-side data providers
 
 ```tsx

docs/data/toolpad/core/introduction/TutorialDefault.js

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
+const NAVIGATION = [
+  {
+    title: 'Page',
+    icon: <DashboardIcon />,
+  },
+];
+
+export default function TutorialDefault() {
+  return (
+    <AppProvider navigation={NAVIGATION}>
+      <DashboardLayout>
+        <Box
+          sx={{
+            py: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Typography>Dashboard content</Typography>
+        </Box>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/introduction/build-deploy.md

@@ -1,3 +1,57 @@
 # Build and Deploy
 
 <p class="description">With Toolpad Core, you can build and deploy on your own terms </p>
+
+## Install step
+
+Install required depdencies via:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm install
+```
+
+```bash yarn
+yarn
+```
+
+</codeblock>
+
+## Build step
+
+This command creates an optimized production build for the app and outputs the generated files:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm run build
+```
+
+```bash yarn
+yarn build
+```
+
+```bash pnpm
+pnpm build
+```
+
+</codeblock>
+
+## Start step
+
+Once the build has been made, you can deploy it to any service of your choice!
+
+To serve the app once built, run:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npm run start
+```
+
+```bash yarn
+yarn start
+```
+
+</codeblock>

docs/data/toolpad/core/introduction/examples.md

@@ -1,3 +1,12 @@
-# Examples
+---
+productId: toolpad-core
+title: Examples
+---
 
-<p class="description">Examples</p>
+# Toolpad Core - Examples
+
+<p class="description">Browse a collection of Toolpad Core examples to help you get started quickly:</p>
+
+<!-- #default-branch-switch -->
+
+{{"component": "modules/components/ExamplesGrid/ExamplesGrid.tsx", "examplesFile": "core-examples.ts"}}

docs/data/toolpad/core/introduction/installation.md

@@ -1,3 +1,74 @@
-# Installation
+---
+title: Toolpad Core - Installation
+---
 
-<p class="description">Installation</p>
+# Toolpad Core - Installation
+
+<p class="description">Learn how to install Toolpad Core in your local environment.</p>
+
+1. Run the following command to start Toolpad Core:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+npx create-toolpad-app@latest --core
+```
+
+```bash pnpm
+pnpm create toolpad-app --core
+```
+
+```bash yarn
+yarn create toolpad-app --core
+```
+
+</codeblock>
+
+2. Follow the instructions presented. Once the installation ends, run:
+
+<codeblock storageKey="package-manager">
+
+```bash npm
+cd <project-name>
+npm run dev
+```
+
+```bash pnpm
+cd <project-name>
+pnpm run dev
+```
+
+```bash yarn
+cd <project-name>
+yarn dev
+```
+
+</codeblock>
+
+3. Visit **http://localhost:3000/** in your browser to open the application.
+
+4. The CLI bootstraps the following directory:
+
+   ```bash
+    ├── app
+    │ ├── auth
+    │ ├──── [...path]
+    │ └────── page.tsx
+    │ ├── api
+    │ ├──── auth
+    │ ├────── [...nextAuth]
+    │ └───────── route.tsx
+    │ ├── (dashboard)
+    | ├──── layout.tsx
+    │ ├──── page
+    │ └────── page.tsx
+    ├──── layout.tsx
+    └──── page.tsx
+
+   ```
+
+   and the following page appears when you run the project locally:
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/installation-1.png", "alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }}
+
+5. Installation is complete! Begin building your project by making edits to `(dashboard/page/page.tsx`. To understand how to leverage Toolpad Core to build dashboards quickly, [see the detailed tutorial](/toolpad/core/introduction/tutorial/).