[docs] Add automatic vale check (mui#5429)

Co-authored-by: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com>

.github/workflows/vale-action.yml

@@ -0,0 +1,17 @@
+name: reviewdog
+on: [pull_request]
+
+jobs:
+  vale:
+    name: runner / vale
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: errata-ai/vale-action@reviewdog
+        with:
+          reporter: github-pr-review
+          files: docs/data
+        env:
+          # Required, set by GitHub actions automatically:
+          # https://docs.github.com/en/actions/security-guides/automatic-token-authentication#about-the-github_token-secret
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -20,3 +20,5 @@ dist
 node_modules
 size-snapshot.json
 performance-snapshot.json
+.github/styles/Google
+.github/styles/write-good

.vale.ini

@@ -0,0 +1,24 @@
+# Config vale. More information at https://docs.errata.ai/vale/config
+StylesPath = .github/styles
+MinAlertLevel = suggestion
+
+Packages = Google
+
+[*.md]
+# Ignore code injection which start with {{...
+BlockIgnores = {{.*
+
+# Google:
+Google.FirstPerson = YES # Avoid first-person pronouns such as I, me, ...'.
+Google.GenderBias = YES # Avoid gendered profession
+Google.OxfordComma = YES
+Google.Quotes = YES # Commas and periods go inside quotation marks.
+Google.Spelling = YES #In general, use American spelling (word ending with 'nised' or 'logue')
+Google.We = YES # Try to avoid using first-person plural
+
+# Those rules are not repected a lot
+# Google.Passive = YES # In general, use active voice instead of passive voice.
+# Google.Will = YES # Avoid using will
+
+# False positives with "1st" nearly no use in our doc
+# Google.Units = YES # Put a nonbreaking space between the number and the unit

docs/data/data-grid/aggregation/aggregation.md

@@ -48,7 +48,7 @@ You can use the `onAggregationModelChange` prop to listen to changes to aggregat
 
 You can disable aggregation by setting the `disableAggregation` prop to true.
 
-It will disable all features related to aggregation, even if a model is provided.
+It disables all features related to aggregation, even if a model is provided.
 
 {{"demo": "AggregationDisabled.js", "bg": "inline", "defaultCodeOpen": false}}
 

docs/data/data-grid/api-object/api-object.md

@@ -58,7 +58,7 @@ function CustomDataGrid(props) {
 ```
 
 :::warning
-The API object will be populated by the various plugins of the grid during the first render of the component.
+The API object is populated by the various plugins of the grid during the first render of the component.
 If you try to use it in the first render of the component, it will crash since all methods are not registered yet.
 :::
 

docs/data/data-grid/editing/editing.md

@@ -421,7 +421,7 @@ The following demo implements an edit component with auto-stop, based on a nativ
 {{"demo": "AutoStopEditComponent.js", "bg": "inline", "defaultCodeOpen": false}}
 
 :::warning
-We don't recommend using edit components with auto-stop in columns that use long-running `preProcessEditCellProps` because the UI will freeze while waiting for `apiRef.current.setEditCellValue`.
+Avoid using edit components with auto-stop in columns that use long-running `preProcessEditCellProps` because the UI will freeze while waiting for `apiRef.current.setEditCellValue`.
 Instead, use the provided interactions to exit edit mode.
 :::
 

docs/data/data-grid/export/export.md

@@ -212,7 +212,7 @@ In order for the Print export to work as expected set `X-Frame-Options: SAMEORIG
 ## Custom export format
 
 You can add custom export formats by creating your own export menu.
-To simplify its creation, we export `<GridToolbarExportContainer />` which contains the menu logic.
+To simplify its creation, you can use `<GridToolbarExportContainer />` which contains the menu logic.
 The default `<GridToolbarExport />` is defined as follow:
 
 ```jsx

docs/data/data-grid/filtering/filtering.md

@@ -44,7 +44,7 @@ The filter model is composed of a list of `items` and a `linkOperator`:
 
 A filter item represents a filtering rule and is composed of several elements:
 
-- `filterItem.columnField`: the field on which we want to apply the rule.
+- `filterItem.columnField`: the field on which the rule applies.
 - `filterItem.value`: the value to look for.
 - `filterItem.operatorValue`: name of the operator method to use (e.g. _contains_), matches the `value` key of the operator object.
 - `filterItem.id` ([<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan)): only useful when multiple filters are used.
@@ -299,7 +299,7 @@ More details are available in the demo.
 | `operatorInputProps`     | `MuiDataGrid-filterFormOperatorInput`     |
 | `valueInputProps`        | `MuiDataGrid-filterFormValueInput`        |
 
-The value input is a special case, because it can contain a wide variety of components (the one we provide or [your custom `InputComponent`](#create-a-custom-operator)).
+The value input is a special case, because it can contain a wide variety of components (the one provided or [your custom `InputComponent`](#create-a-custom-operator)).
 To pass props directly to the `InputComponent` and not its wrapper, you can use `valueInputProps.InputComponentProps`.
 
 {{"demo": "CustomFilterPanelContent.js", "bg": "inline"}}
@@ -369,7 +369,7 @@ getApplyQuickFilterFn: (value: string) => {
 
 To remove the quick filtering on a given column set `getApplyQuickFilterFn: undefined`.
 
-In the demo bellow, the column "Name" is not searchable with the quick filter, and 4 digits figures will be compared to the year of column "Created on".
+In the demo bellow, the column "Name" is not searchable with the quick filter, and 4 digits figures will be compared to the year of column "Created on."
 
 {{"demo": "QuickFilteringCustomLogic.js", "bg": "inline", "defaultCodeOpen": false}}
 

docs/data/data-grid/overview/overview.md

@@ -40,7 +40,7 @@ The commercial version is available in the form of two plans: Pro and Premium.
 #### Pro Plan [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan)
 
 The Pro version extends the features available in the MIT version, by allowing to sort and filter multiple columns at the same time.
-It also brings new features, e.g. column groups, column pinning, tree data, row and column reordering, etc.
+It also brings new features, e.g. column groups, column pinning, tree data, row, and column reordering, etc.
 Finally, the Pro version leverages virtualization to handle bigger datasets.
 The following grid displays 31 columns and 100,000 rows - over 3 million cells in total.
 

docs/data/data-grid/pagination/pagination.md

@@ -104,7 +104,7 @@ For more information regarding server-side pagination in combination with contro
 - Add an `onPageChange` callback to load the rows when the page changes
 
 Since `rowCount` prop is used to compute the number of available pages, switching it to `undefined` during loading reset page to zero.
-To avoid this problem, we recommend to keep the previous value of `rowCount` while loading as follow:
+To avoid this problem, you can keep the previous value of `rowCount` while loading as follow:
 
 ```jsx
 const [rowCountState, setRowCountState] = React.useState(rowCount);

docs/data/data-grid/row-grouping/row-grouping.md

@@ -7,7 +7,7 @@ title: Data Grid - Row grouping
 <p class="description">Group your rows according to some column values.</p>
 
 For when you need to group rows based on repeated column values, and/or custom functions.
-In the following example, we're grouping all movies based on their production `company`
+In the following example groups all movies based on their production `company`
 
 {{"demo": "RowGroupingBasicExample.js", "bg": "inline", "defaultCodeOpen": false}}
 
@@ -26,7 +26,7 @@ initialState={{
 ```
 
 The basic parameters are the columns you want to check for repeating values.
-In this example, we want to group all the movies matching the same company name, followed by a second group matching the director's name.
+This example groups all the movies matching the same company name, followed by a second group matching the director's name.
 
 {{"demo": "RowGroupingInitialState.js", "bg": "inline", "defaultCodeOpen": false}}
 
@@ -42,7 +42,7 @@ You can use the `onRowGroupingModelChange` prop to listen to changes to the grou
 ### Single grouping column
 
 By default, the grid will display a single column holding all grouping columns.
-If you have multiple grouping criteria, this column name will be set to "Group".
+If you have multiple grouping criteria, this column name will be set to "Group."
 
 {{"demo": "RowGroupingSingleGroupingCol.js", "bg": "inline", "defaultCodeOpen": false}}
 
@@ -68,7 +68,7 @@ The callback is called for each grouping column, and it receives the respective
 
 ### Show values for the leaves
 
-By default, the grouped rows display no value on their grouping columns' cells. We're calling those cells "leaves".
+By default, the grouped rows display no value on their grouping columns' cells. Those cells are called "leaves."
 
 If you want to display some value, you can provide a `leafField` property to the `groupingColDef`.
 

docs/data/data-grid/row-pinning/row-pinning.md

@@ -6,7 +6,7 @@ title: Data Grid - Row pinning
 
 <p class="description">Pin rows to keep them visible at all times.</p>
 
-Pinned (or frozen, locked or floating) rows are those visible at all times while the user scrolls the grid vertically.
+Pinned (or frozen, locked, or floating) rows are those visible at all times while the user scrolls the grid vertically.
 
 :::warning
 This feature is experimental, it needs to be explicitly activated using the `rowPinning` experimental feature flag.

docs/data/data-grid/row-updates/row-updates.md

@@ -83,7 +83,7 @@ Whenever the rows are updated, the grid has to apply the sorting and filters. Th
 
 When receiving updates more frequently than this threshold, the grid will wait before updating the rows.
 
-The following demo updates the rows every 10ms, but they are only applied every 2 seconds.
+The following demo updates the rows every 10 ms, but they are only applied every 2 seconds.
 
 {{"demo": "ThrottledRowsGrid.js", "bg": "inline"}}
 

docs/data/data-grid/sorting/sorting.md

@@ -35,8 +35,8 @@ Hold down the <kbd class="key">Ctrl</kbd> or <kbd class="key">Shift</kbd> (use <
 The sort model is a list of sorting items.
 Each item represents a sorting rule and is composed of several elements:
 
-- `sortingItem.field`: the field on which we want to apply the rule
-- `sortingItem.sort`: the direction of the sorting (`'asc'`, `'desc'`, `null` or `undefined`). If `null` or `undefined`, the rule will not be applied.
+- `sortingItem.field`: the field on which the rule applies.
+- `sortingItem.sort`: the direction of the sorting (`'asc'`, `'desc'`, `null` or `undefined`). If `null` or `undefined`, the rule doesn't apply.
 
 ### Initialize the sort model
 

docs/data/data-grid/tree-data/tree-data.md

@@ -125,7 +125,7 @@ Alternatively, you can achieve a similar behavior by implementing this feature o
 This implementation does not support every feature of the grid but can be a good starting point for large datasets.
 
 The idea is to add a property `descendantCount` on the row and to use it instead of the internal grid state.
-To do so, we need to override both the `renderCell` of the grouping column and to manually open the rows by listening to `rowExpansionChange` event.
+To do so, you need to override both the `renderCell` of the grouping column and to manually open the rows by listening to `rowExpansionChange` event.
 
 {{"demo": "TreeDataLazyLoading.js", "bg": "inline", "defaultCodeOpen": false}}
 

docs/data/date-pickers/date-time-picker/date-time-picker.md

@@ -18,7 +18,7 @@ component combined, so any of these components' props can be passed to the DateT
 
 ## Basic usage
 
-Allows choosing date then time. There are 4 steps available (year, date, hour and minute), so tabs are required to visually distinguish date/time steps.
+Allows choosing date then time. There are 4 steps available (year, date, hour, and minute), so tabs are required to visually distinguish date/time steps.
 
 {{"demo": "BasicDateTimePicker.js"}}
 

docs/data/date-pickers/localization/localization.md

@@ -30,7 +30,7 @@ To customize the date format used in the toolbar, you can use prop `toolbarForma
 To customize day names in calendar header, you can use `dayOfWeekFormatter` which takes as an input the short name of the day provided by the date-library and returns it's formatted version.
 The default formatter only keeps the first letter and capitalises it.
 
-In the example bellow, we add a dot at the end of each day in the calendar header, and use `eee dd MMMM` format for the toolbar.
+The example bellow adds a dot at the end of each day in the calendar header, and uses `eee dd MMMM` format for the toolbar.
 
 {{"demo": "CustomizeDayPicker.js"}}