-Quickly build internal tools. MUI Toolpad Studio is a self-hosted low-code internal tools builder designed to extend the [MUI](https://mui.com/) React components. It's designed for developers of all trades who want to save time building internal applications.
+Quickly build internal tools. Toolpad Studio is a self-hosted low-code internal tools builder designed to extend the [MUI](https://mui.com/) React components. It's designed for developers of all trades who want to save time building internal applications.
[](https://github.com/mui/material-ui/blob/HEAD/LICENSE)
@@ -35,7 +35,7 @@ A [big change](https://github.com/mui/mui-toolpad/discussions/1748) is coming: w
## Notice
-MUI Toolpad Studio is in its beta stages of development. Feel free to run this application to try it out for your use cases, and share any feedback, bug reports or feature requests that you come across.
+Toolpad Studio is in its beta stages of development. Feel free to run this application to try it out for your use cases, and share any feedback, bug reports or feature requests that you come across.
## Quick setup locally
@@ -70,7 +70,7 @@ The [changelog](https://github.com/mui/mui-toolpad/releases) is regularly update
## Roadmap
-Future plans and high-priority features and enhancements can be found in our [roadmap](https://mui.com/toolpad/studio/getting-started/roadmap/).
+Future plans and high-priority features and enhancements can be found in the [roadmap](https://mui.com/toolpad/studio/getting-started/roadmap/).
## License
diff --git a/docs/README.md b/docs/README.md
index 373125d542b..b7ab4278a39 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -8,9 +8,7 @@ To start the docs site in development mode, from the project root, run:
yarn && yarn docs:dev
```
-If you do not have yarn installed, select your OS and follow the instructions on the [Yarn website](https://yarnpkg.com/lang/en/docs/install/#mac-stable).
-
-_DO NOT USE NPM, use Yarn to install the dependencies._
+If you do not have yarn installed, select your OS and follow the instructions on the pnpm. DO NOT USE npm, use pnpm to install the dependencies.
Visit the [Toolpad documentation](https://mui.com/toolpad/studio/getting-started/).
@@ -28,6 +26,6 @@ Some ground rules to ensure and maintain consistency in our documentation screen
- _Note: This rule is not just about a consistent aspect ratio, it's also about maintaining consistent size between UI elements across screenshots. e.g. we want to aim at text always having the same size relative to the screenshot dimensions, or have the sidebar width relative to the screenshot width be the same everywhere._
+ _Note: This rule is not just about a consistent aspect ratio, it's also about maintaining consistent size between UI elements across screenshots. For example we want to aim at text always having the same size relative to the screenshot dimensions, or have the sidebar width relative to the screenshot width be the same everywhere._
- In order to maintain consistency across all screenshots we will use the same theme for editor and canvas when taking screenshots. As the default dark theme doesn't look that great in combination with the editor theme, we will use the light theme for all screenshots.
diff --git a/docs/data/toolpad/studio/components/date-picker/date-picker.md b/docs/data/toolpad/studio/components/date-picker/date-picker.md
index adee0b938ff..3ddb9c51b0a 100644
--- a/docs/data/toolpad/studio/components/date-picker/date-picker.md
+++ b/docs/data/toolpad/studio/components/date-picker/date-picker.md
@@ -14,7 +14,7 @@ Below props makes it usable:
### format
-The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings will always be in the YYYY-MM-DD format. Leave empty to let the end-user locale define the format.
+The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings is always be in the YYYY-MM-DD format. Leave empty to let the end-user locale define the format.
{{"demo": "DatePickerFormat.js", "hideToolbar": true}}
@@ -41,7 +41,7 @@ The DatePicker component supports below mentioned appearance related props in To
### label
-A label that describes the content of the datepicker e.g. Enter date.
+A label that describes the content of the datepicker, for example "Enter date".
### variant
diff --git a/docs/data/toolpad/studio/components/text-field/text-field.md b/docs/data/toolpad/studio/components/text-field/text-field.md
index 8965b3c4f36..c53f689f04c 100644
--- a/docs/data/toolpad/studio/components/text-field/text-field.md
+++ b/docs/data/toolpad/studio/components/text-field/text-field.md
@@ -39,7 +39,7 @@ The TextField component supports below mentioned appearance related props in Too
### label
-A label that describes the content of the textfield e.g. Enter name.
+A label that describes the content of the textfield, for example "Enter name".
### variant
diff --git a/docs/data/toolpad/studio/concepts/page-properties.md b/docs/data/toolpad/studio/concepts/page-properties.md
index 77093d1771a..6715abeb5ea 100644
--- a/docs/data/toolpad/studio/concepts/page-properties.md
+++ b/docs/data/toolpad/studio/concepts/page-properties.md
@@ -48,13 +48,17 @@ You can set page parameters from the Page tab in the **Inspector panel** on righ
### Using parameters
-The parameters that you've added are available in the global scope for data bindings under the `page.parameters` variable. The value that the parameter assumes at runtime is the value that is passed through a URL query parameter.
+The parameters that you've added are available in the global scope for data bindings under the `page.parameters` variable.
+The value that the parameter assumes at runtime is the value that is passed through a URL query parameter.
For example: if you define a page parameter `foo` and access the page with `?foo=123`, then the value of `page.parameters.foo` in the bindings will be `"123"`.
## Page alias
-Pages are routed by their name. e.g. the page named **employees** will be accessible under the url **/pages/employees**. In order to allow maintaining backwards compatibility when a page is renamed, one can define an alias for the page. This can be done in its **page.yml** file. Add a `alias` property to the file with an array of strings that you would like to use as aliases for the page. e.g.
+Pages are routed by their name. For example the page named **employees** will be accessible under the url **/pages/employees**.
+In order to allow maintaining backwards compatibility when a page is renamed, one can define an alias for the page.
+This can be done in its **page.yml** file.
+Add a `alias` property to the file with an array of strings that you would like to use as aliases for the page. e.g.
```yaml
# /pages/employees/page.yml
diff --git a/docs/data/toolpad/studio/getting-started/support.md b/docs/data/toolpad/studio/getting-started/support.md
index 1fd5e902588..f238e86a698 100644
--- a/docs/data/toolpad/studio/getting-started/support.md
+++ b/docs/data/toolpad/studio/getting-started/support.md
@@ -14,7 +14,7 @@ Toolpad Studio uses GitHub issues to track bug reports and feature requests.
If you think you've found a bug in the codebase, or you have an idea for a new feature, please [search the issues on GitHub](https://github.com/mui/mui-toolpad/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aclosed) before opening a new one, to ensure you're not creating a duplicate.
-- [Open an issue on MUI Toolpad Studio](https://github.com/mui/mui-toolpad/issues/new/choose) for issues or feature requests.
+- [Open an issue on Toolpad Studio](https://github.com/mui/mui-toolpad/issues/new/choose) for issues or feature requests.
- [Start a GitHub discussion](https://github.com/mui/mui-toolpad/discussions) for a broad topic. Here you can engage with the team and the discussion would likely result in one or more GitHub issues.
#### New issue guidelines
diff --git a/docs/data/toolpad/studio/getting-started/why-toolpad.md b/docs/data/toolpad/studio/getting-started/why-toolpad.md
index bf09cac8ed2..1af89aec352 100644
--- a/docs/data/toolpad/studio/getting-started/why-toolpad.md
+++ b/docs/data/toolpad/studio/getting-started/why-toolpad.md
@@ -63,7 +63,7 @@ This lack of a unified reference point within the codebase can compromise its sc
### Cheaper developer tooling
When developers use low-code or no-code tools, they frequently sacrifice their autonomy and become restricted by the options provided by the tool.
-The introduction of a black-box element prevents access to the high-quality tools developers are used to when working with pro-code, e.g. Git for version control.
+The introduction of a black-box element prevents access to the high-quality tools developers are used to when working with pro-code, for example Git for version control.
This can lead to a significant problem when it comes to the long-term maintainability of internal tools, as it becomes challenging to adapt, extend, or customize them to meet evolving needs.
diff --git a/docs/data/toolpad/studio/how-to-guides/delete-grid-row.md b/docs/data/toolpad/studio/how-to-guides/delete-grid-row.md
index 9df3e0a2c2e..13faefad7c5 100644
--- a/docs/data/toolpad/studio/how-to-guides/delete-grid-row.md
+++ b/docs/data/toolpad/studio/how-to-guides/delete-grid-row.md
@@ -47,7 +47,7 @@ You can add a delete button to a data grid connected to any REST API, like so:
1. We want to be able to refresh our orders data once we've performed our delete operation.
-2. Assuming that we have a `getOrders` query which fetches the orders, create another **Button** labelled "Refresh"
+2. Assuming that we have a `getOrders` query which fetches the orders, create another **Button** labeled "Refresh"
3. You can re-fetch queries set to **automatic** mode through a `refetch` function available on each query object set to the automatic mode.
diff --git a/docs/data/toolpad/studio/how-to-guides/editor-path.md b/docs/data/toolpad/studio/how-to-guides/editor-path.md
index 12e1ad45712..2b66e149b7e 100644
--- a/docs/data/toolpad/studio/how-to-guides/editor-path.md
+++ b/docs/data/toolpad/studio/how-to-guides/editor-path.md
@@ -22,7 +22,7 @@
Toolpad Studio understands the `$EDITOR` environment variable. Make sure you can open your editor of choice from the command line. Then provide the command in the `$EDITOR` environment variable. You can use a `.env` file in the root of your project to set the variable.
-e.g. for webstorm, make sure to [install the CLI command](https://www.jetbrains.com/help/webstorm/working-with-the-ide-features-from-command-line.html#standalone) in the `PATH` variable, then declare the webstorm command:
+For example with WebStorm, make sure to [install the CLI command](https://www.jetbrains.com/help/webstorm/working-with-the-ide-features-from-command-line.html#standalone) in the `PATH` variable, then declare the WebStorm command:
```bash
# ./.env
diff --git a/docs/data/toolpad/studio/landing/features.js b/docs/data/toolpad/studio/landing/features.js
index 647b50bb195..57d3cd89467 100644
--- a/docs/data/toolpad/studio/landing/features.js
+++ b/docs/data/toolpad/studio/landing/features.js
@@ -44,7 +44,7 @@ const features = {
title: 'MUI component libraries',
wip: true,
description:
- 'Access the full suite of pre-built MUI components, including both Material UI and MUI X—or bring your own custom components to your Toolpad Studio app.',
+ 'Access the full suite of pre-built MUI components, including both Material UI and MUI X—or bring your own custom components to your Toolpad Studio app.',
},
{
icon:
,
diff --git a/docs/data/toolpad/studio/landing/pricing.js b/docs/data/toolpad/studio/landing/pricing.js
index aa928225a99..ab41777ab80 100644
--- a/docs/data/toolpad/studio/landing/pricing.js
+++ b/docs/data/toolpad/studio/landing/pricing.js
@@ -130,7 +130,7 @@ const rowHeaders = {
),
'Custom themes':
,
// Components
- Components:
,
+ Components:
,
'Custom components': (
API docs for the Toolpad Studio Autocomplete component.
-A text input with autocomplete suggestions. Uses the Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/) under the hood
+A text input with autocomplete suggestions. Uses the Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/) under the hood
## Properties
diff --git a/docs/data/toolpad/studio/reference/components/button.md b/docs/data/toolpad/studio/reference/components/button.md
index 11a66a138b9..2292006173a 100644
--- a/docs/data/toolpad/studio/reference/components/button.md
+++ b/docs/data/toolpad/studio/reference/components/button.md
@@ -14,7 +14,7 @@ Buttons allow users to take actions, and make choices, with a single tap.
| :--------------------------------------- | :------------------------------------- | :---------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| onClick | event | | Add logic to be executed when the user clicks the button. |
| content | string | "Button Text" | Will appear as the text content of the button. |
-| variant | string | "contained" | One of the available Material UI Button [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `contained`, `outlined` or `text` |
+| variant | string | "contained" | One of the available Material UI Button [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `contained`, `outlined` or `text` |
| size | string | "small" | The size of the component. One of `small`, `medium`, or `large`. |
| color | string | "primary" | The theme color of the component. |
| fullWidth | boolean | | Whether the button should occupy all available horizontal space. |
diff --git a/docs/data/toolpad/studio/reference/components/data-grid.md b/docs/data/toolpad/studio/reference/components/data-grid.md
index 4ec272aa778..ac6a7889847 100644
--- a/docs/data/toolpad/studio/reference/components/data-grid.md
+++ b/docs/data/toolpad/studio/reference/components/data-grid.md
@@ -4,7 +4,7 @@
API docs for the Toolpad Studio DataGrid component.
-The MUI X [Data Grid](https://mui.com/x/react-data-grid/) component.
+The [MUI X Data Grid](https://mui.com/x/react-data-grid/) component.
The datagrid lets users display tabular data in a flexible grid.
diff --git a/docs/data/toolpad/studio/reference/components/date-picker.md b/docs/data/toolpad/studio/reference/components/date-picker.md
index b68bdb730a2..6cda4262a1f 100644
--- a/docs/data/toolpad/studio/reference/components/date-picker.md
+++ b/docs/data/toolpad/studio/reference/components/date-picker.md
@@ -4,7 +4,7 @@
API docs for the Toolpad Studio DatePicker component.
-The MUI X [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component.
+The [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component.
The date picker lets the user select a date.
@@ -13,11 +13,11 @@ The date picker lets the user select a date.
| Name | Type | Default | Description |
| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | string | "" | The currently selected date. |
-| format | string | "" | The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings will always be in the `YYYY-MM-DD` format. Leave empty to let the end-user locale define the format. |
+| format | string | "" | The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings is always be in the `YYYY-MM-DD` format. Leave empty to let the end-user locale define the format. |
| defaultValue | string | "" | A default value for the date picker. |
-| label | string | | A label that describes the content of the date picker. e.g. "Arrival date". |
+| label | string | | A label that describes the content of the date picker, for example "Arrival date". |
| name | string | | Name of this input. Used as a reference in form data. |
-| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` |
+| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` |
| size | string | "small" | The size of the component. One of `small`, or `medium`. |
| fullWidth | boolean | | Whether the button should occupy all available horizontal space. |
| disabled | boolean | | The date picker is disabled. |
diff --git a/docs/data/toolpad/studio/reference/components/file-picker.md b/docs/data/toolpad/studio/reference/components/file-picker.md
index 6f622761091..a20c86ff659 100644
--- a/docs/data/toolpad/studio/reference/components/file-picker.md
+++ b/docs/data/toolpad/studio/reference/components/file-picker.md
@@ -12,7 +12,7 @@ It allows users to take select and read files.
| Name | Type | Default | Description |
| :---------------------------------------- | :------------------------------------- | :-------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | object | | The value that is controlled by this FilePicker. |
-| label | string | | A label that describes the content of the FilePicker. e.g. "Profile Image". |
+| label | string | | A label that describes the content of the FilePicker, for example "Profile Image". |
| multiple | boolean | true | Whether the FilePicker should accept multiple files. |
| disabled | boolean | | Whether the FilePicker is disabled. |
| name | string | | Name of this input. Used as a reference in form data. |
diff --git a/docs/data/toolpad/studio/reference/components/select.md b/docs/data/toolpad/studio/reference/components/select.md
index ea6cade9ce9..5430b4edf8c 100644
--- a/docs/data/toolpad/studio/reference/components/select.md
+++ b/docs/data/toolpad/studio/reference/components/select.md
@@ -13,8 +13,8 @@ The Material UI [Select](https://mui.com/material-ui/react-select/) component l
| options | array | [] | The available options to select from. |
| value | string | "" | The currently selected value. |
| defaultValue | string | "" | A default value. |
-| label | string | "" | A label that describes the option that can be selected. e.g. "Country". |
-| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` |
+| label | string | "" | A label that describes the option that can be selected, for example "Country". |
+| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` |
| size | string | "small" | The size of the select. One of `small`, or `medium`. |
| fullWidth | boolean | | Whether the select should occupy all available horizontal space. |
| disabled | boolean | | Whether the select is disabled. |
diff --git a/docs/data/toolpad/studio/reference/components/tabs.md b/docs/data/toolpad/studio/reference/components/tabs.md
index 3ee9175713f..8f2a0de0df4 100644
--- a/docs/data/toolpad/studio/reference/components/tabs.md
+++ b/docs/data/toolpad/studio/reference/components/tabs.md
@@ -8,8 +8,8 @@ The Material UI [Tabs](https://mui.com/material-ui/react-tabs/) component.
## Properties
-| Name | Type | Default | Description |
-| :------------------------------------------ | :------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------- |
-| value | string | | Currently active tab. |
-| defaultValue | string | "tab-one" | The tab which will be active by default. |
-| tabs | array | [{"title":"Tab one","name":"tab-one"},{"title":"Tab two","name":"tab-two"},{"title":"Tab three","name":"tab-three"}] | Tabs configuration object. |
+| Name | Type | Default | Description |
+| :------------------------------------------ | :------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------- |
+| value | string | | Currently active tab. |
+| defaultValue | string | "tab-one" | The tab which is active by default. |
+| tabs | array | [{"title":"Tab one","name":"tab-one"},{"title":"Tab two","name":"tab-two"},{"title":"Tab three","name":"tab-three"}] | Tabs configuration object. |
diff --git a/docs/data/toolpad/studio/reference/components/text-field.md b/docs/data/toolpad/studio/reference/components/text-field.md
index 72e8f00cc1e..27357472d8f 100644
--- a/docs/data/toolpad/studio/reference/components/text-field.md
+++ b/docs/data/toolpad/studio/reference/components/text-field.md
@@ -12,8 +12,8 @@ The Material UI [TextField](https://mui.com/material-ui/react-text-field/) comp
| :------------------------------------------ | :------------------------------------- | :------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value | string | "" | The value that is controlled by this text input. |
| defaultValue | string | "" | A default value for when the input is still empty. |
-| label | string | | A label that describes the content of the text field. e.g. "First name". |
-| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` |
+| label | string | | A label that describes the content of the text field, for example "First name". |
+| variant | string | "outlined" | One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard` |
| size | string | "small" | The size of the input. One of `small`, or `medium`. |
| fullWidth | boolean | | Whether the input should occupy all available horizontal space. |
| password | boolean | | Masks the input to hide what's being typed. |
diff --git a/docs/data/toolpad/studio/reference/components/text.md b/docs/data/toolpad/studio/reference/components/text.md
index b1a81989f80..1fe57b0c40a 100644
--- a/docs/data/toolpad/studio/reference/components/text.md
+++ b/docs/data/toolpad/studio/reference/components/text.md
@@ -4,7 +4,7 @@
API docs for the Toolpad Studio Text component.
-The Text component lets you display text. Text can be rendered in multiple forms: plain, as a link, or as markdown. It's rendered using Material UI [Typography](https://mui.com/material-ui/react-typography/).
+The Text component lets you display text. Text can be rendered in multiple forms: plain, as a link, or as markdown. It's rendered using Material UI [Typography](https://mui.com/material-ui/react-typography/).
## Properties
diff --git a/docs/pages/toolpad/index.js b/docs/pages/toolpad/index.js
index 01238c1c11f..4e033d9f808 100644
--- a/docs/pages/toolpad/index.js
+++ b/docs/pages/toolpad/index.js
@@ -31,7 +31,7 @@ export default function Home() {
diff --git a/docs/src/components/landing/Hero.js b/docs/src/components/landing/Hero.js
index 48c5999a7f8..423c71acb0b 100644
--- a/docs/src/components/landing/Hero.js
+++ b/docs/src/components/landing/Hero.js
@@ -229,7 +229,7 @@ export default function Hero() {
- Powered by Material UI
+ Powered by Material UI
diff --git a/examples/npm-stats/README.md b/examples/npm-stats/README.md
index 64b2978c2a1..5e6d97cb8de 100644
--- a/examples/npm-stats/README.md
+++ b/examples/npm-stats/README.md
@@ -36,7 +36,7 @@ This app demonstrates the following capabilities of Toolpad Studio:
1. How to use a thrid party REST API to fetch data to a Toolpad Studio app.
2. How to use custom components like charts.
-3. How to use pre-built MUI components like Date Picker.
+3. How to use pre-built Material UI components like the MUI X Date Picker.
4. How to transform data.
## The source
diff --git a/packages/create-toolpad-app/README.md b/packages/create-toolpad-app/README.md
index 9ac32ac6013..c0a54a5acf9 100644
--- a/packages/create-toolpad-app/README.md
+++ b/packages/create-toolpad-app/README.md
@@ -15,7 +15,7 @@ yarn create toolpad-app
pnpm create toolpad-app
```
-You will be asked for the name of your project
+You then need to provide the name of your project:
```bash
✔ Enter the name of your project:
diff --git a/packages/create-toolpad-app/src/packageType.ts b/packages/create-toolpad-app/src/packageType.ts
index 658863db0f9..33376f61b34 100644
--- a/packages/create-toolpad-app/src/packageType.ts
+++ b/packages/create-toolpad-app/src/packageType.ts
@@ -304,7 +304,7 @@ declare namespace PackageJsonTypes {
/**
If your package only allows one version of a given dependency, and you'd like to enforce the same behavior as `yarn install --flat` on the command-line, set this to `true`.
- Note that if your `package.json` contains `"flat": true` and other packages depend on yours (e.g. you are building a library rather than an app), those other packages will also need `"flat": true` in their `package.json` or be installed with `yarn install --flat` on the command-line.
+ Note that if your `package.json` contains `"flat": true` and other packages depend on yours (for example you are building a library rather than an app), those other packages will also need `"flat": true` in their `package.json` or be installed with `yarn install --flat` on the command-line.
*/
flat?: boolean;
diff --git a/packages/toolpad-studio-components/src/Autocomplete.tsx b/packages/toolpad-studio-components/src/Autocomplete.tsx
index df886b79dbc..c4d70459027 100644
--- a/packages/toolpad-studio-components/src/Autocomplete.tsx
+++ b/packages/toolpad-studio-components/src/Autocomplete.tsx
@@ -113,7 +113,7 @@ const FormWrappedAutocomplete = withComponentForm(Autocomplete);
export default createBuiltin(FormWrappedAutocomplete, {
helperText:
- 'A text input with autocomplete suggestions. Uses the Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/) under the hood',
+ 'A text input with autocomplete suggestions. Uses the Material UI [Autocomplete](https://mui.com/material-ui/react-autocomplete/) under the hood',
layoutDirection: 'both',
loadingProp: 'loading',
argTypes: {
diff --git a/packages/toolpad-studio-components/src/Button.tsx b/packages/toolpad-studio-components/src/Button.tsx
index 0b3c7c6a232..a6511c45a26 100644
--- a/packages/toolpad-studio-components/src/Button.tsx
+++ b/packages/toolpad-studio-components/src/Button.tsx
@@ -27,7 +27,7 @@ export default createBuiltin(Button, {
},
variant: {
helperText:
- 'One of the available Material UI Button [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `contained`, `outlined` or `text`',
+ 'One of the available Material UI Button [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `contained`, `outlined` or `text`',
type: 'string',
enum: ['contained', 'outlined', 'text'],
default: 'contained',
diff --git a/packages/toolpad-studio-components/src/DataGrid.tsx b/packages/toolpad-studio-components/src/DataGrid.tsx
index 830fd79cf38..98bf918baf5 100644
--- a/packages/toolpad-studio-components/src/DataGrid.tsx
+++ b/packages/toolpad-studio-components/src/DataGrid.tsx
@@ -156,7 +156,7 @@ const ISO_8601_FULL = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}(\.\d+)?(([+-]\d{2
function isValidDateTime(input: string) {
// The Date constructor is too permissive for validating dates, so we need to use a regex
- // e.g. `new Date('Foo bar 0')` results in a valid date
+ // for example `new Date('Foo bar 0')` results in a valid date
if (ISO_8601_FULL.test(input) && !Number.isNaN(Date.parse(input))) {
return !Number.isNaN(Date.parse(input));
}
@@ -165,7 +165,7 @@ function isValidDateTime(input: string) {
function isValidDate(input: string) {
// The Date constructor is too permissive for validating dates, so we need to use a regex
- // e.g. `new Date('Foo bar 0')` results in a valid date
+ // for example `new Date('Foo bar 0')` results in a valid date
if (ISO_8601.test(input) && !Number.isNaN(Date.parse(input))) {
return !Number.isNaN(Date.parse(input));
}
@@ -1314,7 +1314,7 @@ const DataGridComponent = React.forwardRef(function DataGridComponent(
export default createBuiltin(DataGridComponent, {
helperText:
- 'The MUI X [Data Grid](https://mui.com/x/react-data-grid/) component.\n\nThe datagrid lets users display tabular data in a flexible grid.',
+ 'The [MUI X Data Grid](https://mui.com/x/react-data-grid/) component.\n\nThe datagrid lets users display tabular data in a flexible grid.',
errorProp: 'error',
loadingPropSource: ['rows', 'columns'],
loadingProp: 'loading',
diff --git a/packages/toolpad-studio-components/src/DatePicker.tsx b/packages/toolpad-studio-components/src/DatePicker.tsx
index d020a9070ec..a9da8d58301 100644
--- a/packages/toolpad-studio-components/src/DatePicker.tsx
+++ b/packages/toolpad-studio-components/src/DatePicker.tsx
@@ -159,7 +159,7 @@ const FormWrappedDatePicker = withComponentForm(DatePicker);
export default createBuiltin(FormWrappedDatePicker, {
helperText:
- 'The MUI X [Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component.\n\nThe date picker lets the user select a date.',
+ 'The [MUI X Date Picker](https://mui.com/x/react-date-pickers/date-picker/) component.\n\nThe date picker lets the user select a date.',
argTypes: {
value: {
helperText: 'The currently selected date.',
@@ -170,7 +170,7 @@ export default createBuiltin(FormWrappedDatePicker, {
},
format: {
helperText:
- 'The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings will always be in the `YYYY-MM-DD` format. Leave empty to let the end-user locale define the format.',
+ 'The [format](https://day.js.org/docs/en/display/format) of the date in the UI. The value for the bindings is always be in the `YYYY-MM-DD` format. Leave empty to let the end-user locale define the format.',
type: 'string',
default: '',
@@ -181,7 +181,8 @@ export default createBuiltin(FormWrappedDatePicker, {
default: '',
},
label: {
- helperText: 'A label that describes the content of the date picker. e.g. "Arrival date".',
+ helperText:
+ 'A label that describes the content of the date picker, for example "Arrival date".',
type: 'string',
},
name: {
@@ -190,7 +191,7 @@ export default createBuiltin(FormWrappedDatePicker, {
},
variant: {
helperText:
- 'One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard`',
+ 'One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard`',
type: 'string',
enum: ['outlined', 'filled', 'standard'],
default: 'outlined',
diff --git a/packages/toolpad-studio-components/src/FilePicker.tsx b/packages/toolpad-studio-components/src/FilePicker.tsx
index 3e58621fc3e..571aa4aedaa 100644
--- a/packages/toolpad-studio-components/src/FilePicker.tsx
+++ b/packages/toolpad-studio-components/src/FilePicker.tsx
@@ -103,7 +103,8 @@ export default createBuiltin(FormWrappedFilePicker, {
},
},
label: {
- helperText: 'A label that describes the content of the FilePicker. e.g. "Profile Image".',
+ helperText:
+ 'A label that describes the content of the FilePicker, for example "Profile Image".',
type: 'string',
},
multiple: {
diff --git a/packages/toolpad-studio-components/src/Select.tsx b/packages/toolpad-studio-components/src/Select.tsx
index c0f776acfcc..275c1561bf5 100644
--- a/packages/toolpad-studio-components/src/Select.tsx
+++ b/packages/toolpad-studio-components/src/Select.tsx
@@ -127,13 +127,13 @@ export default createBuiltin(FormWrappedSelect, {
default: '',
},
label: {
- helperText: 'A label that describes the option that can be selected. e.g. "Country".',
+ helperText: 'A label that describes the option that can be selected, for example "Country".',
type: 'string',
default: '',
},
variant: {
helperText:
- 'One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard`',
+ 'One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard`',
type: 'string',
enum: ['outlined', 'filled', 'standard'],
default: 'outlined',
diff --git a/packages/toolpad-studio-components/src/Tabs.tsx b/packages/toolpad-studio-components/src/Tabs.tsx
index 12bf4129701..e9c9e930f5c 100644
--- a/packages/toolpad-studio-components/src/Tabs.tsx
+++ b/packages/toolpad-studio-components/src/Tabs.tsx
@@ -43,7 +43,7 @@ export default createBuiltin(Tabs, {
label: 'Default active tab',
type: 'string',
default: 'tab-one',
- helperText: 'The tab which will be active by default.',
+ helperText: 'The tab which is active by default.',
},
tabs: {
type: 'array',
diff --git a/packages/toolpad-studio-components/src/Text.tsx b/packages/toolpad-studio-components/src/Text.tsx
index 3894026ae49..283bfbaba7c 100644
--- a/packages/toolpad-studio-components/src/Text.tsx
+++ b/packages/toolpad-studio-components/src/Text.tsx
@@ -283,7 +283,7 @@ function Text(props: TextProps) {
export default createBuiltin(Text, {
helperText:
- "The Text component lets you display text. Text can be rendered in multiple forms: plain, as a link, or as markdown. It's rendered using Material UI [Typography](https://mui.com/material-ui/react-typography/).",
+ "The Text component lets you display text. Text can be rendered in multiple forms: plain, as a link, or as markdown. It's rendered using Material UI [Typography](https://mui.com/material-ui/react-typography/).",
layoutDirection: 'both',
loadingPropSource: ['value'],
loadingProp: 'loading',
diff --git a/packages/toolpad-studio-components/src/TextField.tsx b/packages/toolpad-studio-components/src/TextField.tsx
index e1b4ed261f7..2d770c79664 100644
--- a/packages/toolpad-studio-components/src/TextField.tsx
+++ b/packages/toolpad-studio-components/src/TextField.tsx
@@ -86,12 +86,12 @@ export default createBuiltin(FormWrappedTextField, {
default: '',
},
label: {
- helperText: 'A label that describes the content of the text field. e.g. "First name".',
+ helperText: 'A label that describes the content of the text field, for example "First name".',
type: 'string',
},
variant: {
helperText:
- 'One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard`',
+ 'One of the available Material UI TextField [variants](https://mui.com/material-ui/react-button/#basic-button). Possible values are `outlined`, `filled` or `standard`',
type: 'string',
enum: ['outlined', 'filled', 'standard'],
default: 'outlined',
diff --git a/packages/toolpad-studio/NOTES.md b/packages/toolpad-studio/NOTES.md
index 536dad9b9d0..de6eee1edab 100644
--- a/packages/toolpad-studio/NOTES.md
+++ b/packages/toolpad-studio/NOTES.md
@@ -8,11 +8,11 @@ What I usually don't like about low-code tools **as a developer**:
- I like to be able to use source control to track history, versions and use branching.
- I like to be able to generate code to save time on more complex projects.
- I like an easy way of sharing code. (is there anything easier than copy+pasting text?)
-- I like to be able to run locally and offline. (e.g. I'd like to work on the train)
+- I like to be able to run locally and offline. (for example I'd like to work on the train)
## Authentication
-User management is hard and labour intensive to get right, especially in the beginning. Can we get away with just promoting an authentication proxy? And/or provide a list of user/pwds for basic auth?
+User management is hard and labor intensive to get right, especially in the beginning. Can we get away with just promoting an authentication proxy? And/or provide a list of user/pwds for basic auth?
- https://github.com/pomerium/pomerium
- https://github.com/buzzfeed/sso
@@ -28,7 +28,7 @@ Do we need a DB to keep state? What are the pro's and cons of using a DB vs, let
## Security
- Even though it's meant for internal applications, a user that has no editing rights shouldn't be able to run arbitrary queries, even by spoofing HTTP requests. Meaning: in "viewer mode", the frontend should not be able to execute arbitrary SQL queries by responding to raw requests that don't contain an access token that specifically allows this.
-- For database queries, interpollation **MUST** always use native escaping features (e.g. send queries like `SELECT * FROM table WHERE col = ?;`)
+- For database queries, interpollation **MUST** always use native escaping features (for example send queries like `SELECT * FROM table WHERE col = ?;`)
## Simplicity enables flexibility
diff --git a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx
index 1be82a9c79f..4746cb07035 100644
--- a/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx
+++ b/packages/toolpad-studio/src/toolpad/AppEditor/PageEditor/ComponentPanel.tsx
@@ -66,7 +66,7 @@ export default function ComponentPanel({ className }: ComponentPanelProps) {
- Customize the app with a Material UI theme. Read more about theming in the{' '}
+ Customize the app with a Material UI theme. Read more about theming in the{' '}
+