Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Polish to match standard #4344

Merged
merged 3 commits into from
Nov 1, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bharatkashyap Similar to #4306, I fixed a couple more to match https://www.notion.so/mui-org/Writing-style-guide-2a957a4168a54d47b14bae026d06a24b.

cc @samuelsycamore we are progressively getting to match the style guide everywhere 😄


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`

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
4 changes: 2 additions & 2 deletions docs/data/toolpad/core/introduction/base-concepts.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`.

Expand Down Expand Up @@ -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.
2 changes: 1 addition & 1 deletion docs/data/toolpad/core/introduction/examples.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: Examples

# Toolpad Core - Examples

<p class="description">Browse a collection of Toolpad Core examples to help you get started quickly:</p>
<p class="description">Browse a collection of Toolpad Core examples to help you get started quickly.</p>

<!-- #default-branch-switch -->

Expand Down
28 changes: 14 additions & 14 deletions docs/data/toolpad/core/introduction/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,47 @@ title: Toolpad Core - Installation

# Installation

## Manual Installation
<p class="description">Learn how to install Toolpad Core in your local environment.</p>

## Manual installation
Comment on lines -7 to +9
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sentence case

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we make vale catch these?

Copy link
Member Author

@oliviertassinari oliviertassinari Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could use https://vale.sh/docs/topics/styles/#capitalization. But two challenges:


Use your preferred package manager to install `@toolpad/core` in your project:

<codeblock storageKey="package-manager">

```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
```

</codeblock>

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:

<codeblock storageKey="package-manager">

```bash npm
npm install -S @mui/material @mui/icons-material @emotion/react @emotion/styled
Copy link
Member Author

@oliviertassinari oliviertassinari Nov 1, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the -S. Isn't this the default https://docs.npmjs.com/cli/v10/commands/npm-install#save?

```

```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
```

</codeblock>
```bash yarn
yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled
```

## Automatic Installation
</codeblock>

<p class="description">Learn how to install Toolpad Core in your local environment.</p>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wrong position

## Automatic installation

1. Run the following command to start Toolpad Core:

Expand Down
12 changes: 6 additions & 6 deletions docs/data/toolpad/core/introduction/integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,17 @@ This guide will walk you through the process of adding Toolpad Core to an existi
<codeblock storageKey="package-manager">

```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
```

</codeblock>

## Next.js App Router
Expand All @@ -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';
Expand Down
16 changes: 12 additions & 4 deletions docs/data/toolpad/studio/concepts/deployment.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ Install required depdencies via:
npm install
```

```bash pnpm
pnpm install
```

```bash yarn
yarn
```
Expand All @@ -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
```

</codeblock>

## Start step
Expand All @@ -64,6 +68,10 @@ To serve the app once built, run:
npm run start
```

```bash pnpm
pnpm start
```

```bash yarn
yarn start
```
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/concepts/file-structure.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# File structure

<p class="description">Toolpad Studio's accessibility to the file-system makes it powerful. Here's how: </p>
<p class="description">Toolpad Studio's accessibility to the file-system makes it powerful. Here's how.</p>

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:

Expand Down
34 changes: 17 additions & 17 deletions docs/data/toolpad/studio/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

</codeblock>

This will run the `create-toolpad-app` CLI which initializes the directory `./my-toolpad-app` with a Toolpad Studio application.
Expand All @@ -41,14 +41,14 @@ Then start the development mode
npm run dev
```

```bash yarn
yarn dev
```

```bash pnpm
pnpm dev
```

```bash yarn
yarn dev
```

</codeblock>

This starts the development server on port `3000` or the first available port after that and opens the browser to the Toolpad Studio editor.
Expand All @@ -60,17 +60,17 @@ Start by installing the required dependencies:
<codeblock storageKey="package-manager">

```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
```

</codeblock>

Then you'll have to add the Toolpad Studio scripts to your `package.json`:
Expand All @@ -94,14 +94,14 @@ Now you can start your Toolpad Studio application using one of the commands:
npm run toolpad-studio:dev
```

```bash yarn
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Iterate on mui/mui-public#181.

yarn toolpad-studio:dev
```

```bash pnpm
pnpm toolpad-studio:dev
```

```bash yarn
yarn toolpad-studio:dev
```

</codeblock>

When you run this command, Toolpad Studio will automatically initialize a new application in the **./my-toolpad-app** folder.
Expand Down
2 changes: 1 addition & 1 deletion docs/data/toolpad/studio/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ title: Toolpad Studio docs - Home

# Toolpad Studio

<p class="description">Toolpad Studio docs</p>
<p class="description">Toolpad Studio docs.</p>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can enforce this in docs-infra: mui/material-ui#44292.


Low code tool, for developers, powered by MUI.
Loading