diff --git a/docs/data/toolpad/core/components/page-container/page-container.md b/docs/data/toolpad/core/components/page-container/page-container.md index 7562b355251..e8b37a36f8b 100644 --- a/docs/data/toolpad/core/components/page-container/page-container.md +++ b/docs/data/toolpad/core/components/page-container/page-container.md @@ -47,7 +47,7 @@ The breadcrumbs contains **ACME / Home / Orders** when you visit the path **/hom {{"demo": "TitleBreadcrumbsPageContainer.js", "height": 300, "hideToolbar": true}} -## Dynamic Routes +## Dynamic routes When you use the `PageContainer` on a dynamic route, you'll likely want to set a title and breadcrumbs belonging to the specific path. You can achieve this with the `title` and `breadcrumbs` property of the `PageContainer` diff --git a/docs/data/toolpad/core/components/persistent-state/persistent-state.md b/docs/data/toolpad/core/components/persistent-state/persistent-state.md index 7fe9549b123..73cf8fb6b09 100644 --- a/docs/data/toolpad/core/components/persistent-state/persistent-state.md +++ b/docs/data/toolpad/core/components/persistent-state/persistent-state.md @@ -47,11 +47,11 @@ For complex data types you can pair these hooks with a typed validation library {{"demo": "LocalStorageStateZod.js"}} -## Session Storage +## Session storage The `useSessionStorageState` hook works identical to the [`useLocalStorageState`](#local-storage) hook, except that it reads and writes from `window.sessionStorage` instead of `window.localStorage`. -## Search Parameters +## Search parameters 🚧 Coming soon diff --git a/docs/data/toolpad/core/introduction/base-concepts.md b/docs/data/toolpad/core/introduction/base-concepts.md index 96409572c4a..663456e5c3a 100644 --- a/docs/data/toolpad/core/introduction/base-concepts.md +++ b/docs/data/toolpad/core/introduction/base-concepts.md @@ -15,7 +15,7 @@ import Button from '@mui/material/Button'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; ``` -## Component Hierarchy +## Component hierarchy The Toolpad Core library is designed to work under different React runtimes such as Next.js, Vite, or even your custom setup. Many of its components rely on functionality of the specific runtime they are used under. The key component in making the components runtime-aware is the `AppProvider`. @@ -106,6 +106,6 @@ In this example: - The `slots` prop allows you to replace entire parts of the component. - The `slotProps` prop lets you pass additional props to specific slots. -## Next Steps +## Next steps Now that you understand the basic concepts of Toolpad Core, you're ready to start integrating it into your project. Head over to the [integration docs](/toolpad/core/introduction/integration/) to learn more. diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md index 352bfe44129..40cdc04abb8 100644 --- a/docs/data/toolpad/core/introduction/examples.md +++ b/docs/data/toolpad/core/introduction/examples.md @@ -5,7 +5,7 @@ title: Examples # Toolpad Core - Examples -

Browse a collection of Toolpad Core examples to help you get started quickly:

+

Browse a collection of Toolpad Core examples to help you get started quickly.

diff --git a/docs/data/toolpad/core/introduction/installation.md b/docs/data/toolpad/core/introduction/installation.md index 973e9ffa4f4..eb3d0f598d9 100644 --- a/docs/data/toolpad/core/introduction/installation.md +++ b/docs/data/toolpad/core/introduction/installation.md @@ -4,24 +4,26 @@ title: Toolpad Core - Installation # Installation -## Manual Installation +

Learn how to install Toolpad Core in your local environment.

+ +## Manual installation Use your preferred package manager to install `@toolpad/core` in your project: ```bash npm -npm install -S @toolpad/core -``` - -```bash yarn -yarn add @toolpad/core +npm install @toolpad/core ``` ```bash pnpm pnpm add @toolpad/core ``` +```bash yarn +yarn add @toolpad/core +``` + The Toolpad Core package has a peer dependency on `@mui/material` and `@mui/icons-material`. If you aren't using these already in your project, you can install them with: @@ -29,22 +31,20 @@ The Toolpad Core package has a peer dependency on `@mui/material` and `@mui/icon ```bash npm -npm install -S @mui/material @mui/icons-material @emotion/react @emotion/styled -``` - -```bash yarn -yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled +npm install @mui/material @mui/icons-material @emotion/react @emotion/styled ``` ```bash pnpm pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled ``` - +```bash yarn +yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled +``` -## Automatic Installation + -

Learn how to install Toolpad Core in your local environment.

+## Automatic installation 1. Run the following command to start Toolpad Core: diff --git a/docs/data/toolpad/core/introduction/integration.md b/docs/data/toolpad/core/introduction/integration.md index 0fea00e98ee..2f362fe6dea 100644 --- a/docs/data/toolpad/core/introduction/integration.md +++ b/docs/data/toolpad/core/introduction/integration.md @@ -12,17 +12,17 @@ This guide will walk you through the process of adding Toolpad Core to an existi ```bash npm -npm install -S @toolpad/core -``` - -```bash yarn -yarn add @toolpad/core +npm install @toolpad/core ``` ```bash pnpm pnpm add @toolpad/core ``` +```bash yarn +yarn add @toolpad/core +``` + ## Next.js App Router @@ -31,7 +31,7 @@ Use the following steps to integrate Toolpad Core into your Next.js app: ### 1. Wrap your application with `AppProvider` -In your root layout file (e.g., `app/layout.tsx`), wrap your application with the `AppProvider`: +In your root layout file (for example, `app/layout.tsx`), wrap your application with the `AppProvider`: ```tsx title="app/layout.tsx" import { AppProvider } from '@toolpad/core/AppProvider'; diff --git a/docs/data/toolpad/studio/concepts/deployment.md b/docs/data/toolpad/studio/concepts/deployment.md index 6ad3c392bad..f217eb9dd51 100644 --- a/docs/data/toolpad/studio/concepts/deployment.md +++ b/docs/data/toolpad/studio/concepts/deployment.md @@ -26,6 +26,10 @@ Install required depdencies via: npm install ``` +```bash pnpm +pnpm install +``` + ```bash yarn yarn ``` @@ -42,14 +46,14 @@ This command will create an optimized production build for the Toolpad Studio ap npm run build ``` -```bash yarn -yarn build -``` - ```bash pnpm pnpm build ``` +```bash yarn +yarn build +``` + ## Start step @@ -64,6 +68,10 @@ To serve the app once built, run: npm run start ``` +```bash pnpm +pnpm start +``` + ```bash yarn yarn start ``` diff --git a/docs/data/toolpad/studio/concepts/file-structure.md b/docs/data/toolpad/studio/concepts/file-structure.md index c05dd46e621..993157f61f3 100644 --- a/docs/data/toolpad/studio/concepts/file-structure.md +++ b/docs/data/toolpad/studio/concepts/file-structure.md @@ -1,6 +1,6 @@ # File structure -

Toolpad Studio's accessibility to the file-system makes it powerful. Here's how:

+

Toolpad Studio's accessibility to the file-system makes it powerful. Here's how.

Toolpad Studio is file-system based, which means that an app's entire configuration is stored in files within your project. You can inspect and edit them from your IDE. You'll also use your own tools to author custom functions and components. This is how the project structure looks like in the file-system: diff --git a/docs/data/toolpad/studio/getting-started/installation.md b/docs/data/toolpad/studio/getting-started/installation.md index c177d3ff2f5..57c9c909d38 100644 --- a/docs/data/toolpad/studio/getting-started/installation.md +++ b/docs/data/toolpad/studio/getting-started/installation.md @@ -13,14 +13,14 @@ Then run the command: npx create-toolpad-app@latest --studio my-toolpad-app ``` -```bash yarn -yarn create toolpad-app --studio my-toolpad-app -``` - ```bash pnpm pnpm create toolpad-app --studio my-toolpad-app ``` +```bash yarn +yarn create toolpad-app --studio my-toolpad-app +``` + This will run the `create-toolpad-app` CLI which initializes the directory `./my-toolpad-app` with a Toolpad Studio application. @@ -41,14 +41,14 @@ Then start the development mode npm run dev ``` -```bash yarn -yarn dev -``` - ```bash pnpm pnpm dev ``` +```bash yarn +yarn dev +``` + This starts the development server on port `3000` or the first available port after that and opens the browser to the Toolpad Studio editor. @@ -60,17 +60,17 @@ Start by installing the required dependencies: ```bash npm -npm install -S @toolpad/studio -``` - -```bash yarn -yarn add @toolpad/studio +npm install @toolpad/studio ``` ```bash pnpm pnpm add @toolpad/studio ``` +```bash yarn +yarn add @toolpad/studio +``` + Then you'll have to add the Toolpad Studio scripts to your `package.json`: @@ -94,14 +94,14 @@ Now you can start your Toolpad Studio application using one of the commands: npm run toolpad-studio:dev ``` -```bash yarn -yarn toolpad-studio:dev -``` - ```bash pnpm pnpm toolpad-studio:dev ``` +```bash yarn +yarn toolpad-studio:dev +``` + When you run this command, Toolpad Studio will automatically initialize a new application in the **./my-toolpad-app** folder. diff --git a/docs/data/toolpad/studio/index.md b/docs/data/toolpad/studio/index.md index 2aaaedb27fa..b8d2322b975 100644 --- a/docs/data/toolpad/studio/index.md +++ b/docs/data/toolpad/studio/index.md @@ -4,6 +4,6 @@ title: Toolpad Studio docs - Home # Toolpad Studio -

Toolpad Studio docs

+

Toolpad Studio docs.

Low code tool, for developers, powered by MUI.