From 7c31d483ec5fc38942717e7465d41bfff7ec85bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= Date: Wed, 30 Aug 2023 11:51:01 -0300 Subject: [PATCH] Fix docs anchors and typos --- docs/AccordionForm.md | 2 +- docs/AppBar.md | 4 ++-- docs/ArrayField.md | 2 +- docs/AutocompleteInput.md | 2 +- docs/Buttons.md | 2 +- docs/CheckForApplicationUpdate.md | 6 +++--- docs/CreateInDialogButton.md | 2 +- docs/CreateReactAdmin.md | 2 +- docs/CreateReactApp.md | 4 ++-- docs/Edit.md | 2 +- docs/EditInDialogButton.md | 2 +- docs/Features.md | 6 +++--- docs/Inputs.md | 8 ++++---- docs/Layout.md | 2 +- docs/List.md | 2 +- docs/ListTutorial.md | 4 ++-- docs/LongForm.md | 4 ++-- docs/NextJs.md | 4 ++-- docs/NumberField.md | 4 ++-- docs/Pagination.md | 4 ++-- docs/Permissions.md | 2 +- docs/Realtime.md | 2 +- docs/RecordRepresentation.md | 2 +- docs/ReferenceOneInput.md | 4 ++-- docs/RichTextField.md | 2 +- docs/SelectInput.md | 4 ++-- docs/Show.md | 2 +- docs/TabbedForm.md | 2 +- docs/TabbedShowLayout.md | 2 +- docs/TextInput.md | 4 ++-- docs/Theming.md | 5 +++-- docs/Translation.md | 4 ++-- docs/TranslationWriting.md | 4 ++-- docs/UpdateButton.md | 2 +- docs/Upgrade.md | 2 +- docs/Vite.md | 2 +- docs/WizardForm.md | 4 ++-- docs/useGetRecordRepresentation.md | 2 +- docs/useGetTree.md | 4 ++-- 39 files changed, 62 insertions(+), 61 deletions(-) diff --git a/docs/AccordionForm.md b/docs/AccordionForm.md index 461e70c2b09..15413911049 100644 --- a/docs/AccordionForm.md +++ b/docs/AccordionForm.md @@ -520,7 +520,7 @@ Check [the `` component](./AutoSave.md) documentation for more details ## Role-Based Access Control (RBAC) -Fine-grained permissions control can be added by using the [``](./AuthRBAC.md#accordionform), [``](./AuthRBAC.md#accordionformpanel) and [``](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package. +Fine-grained permissions control can be added by using the [``](./AuthRBAC.md#accordionform), [``](./AuthRBAC.md#accordionform) and [``](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package. {% raw %} ```tsx diff --git a/docs/AppBar.md b/docs/AppBar.md index 68254565aed..da80f76f47b 100644 --- a/docs/AppBar.md +++ b/docs/AppBar.md @@ -100,7 +100,7 @@ export const MyAppBar = () => ( ![App bar with a settings button](./img/AppBar-children.png) -**Tip**: Whats the ``? It's a placeholder for the page title, that components in the page can fill using [the `` component](./Title.md). `<Title>` uses a [React Portal](https://react.dev/reference/react-dom/createPortal) under the hood. `<TitlePortal>` takes all the available space in the app bar, so it "pushes" the following children to the right. +**Tip**: What's the `<TitlePortal>`? It's a placeholder for the page title, that components in the page can fill using [the `<Title>` component](./Title.md). `<Title>` uses a [React Portal](https://react.dev/reference/react-dom/createPortal) under the hood. `<TitlePortal>` takes all the available space in the app bar, so it "pushes" the following children to the right. **Tip**: `<TitlePortal>` renders a [Material-ui `<Typography>`](https://mui.com/material-ui/react-typography/) element that you can customize by passing your own props: @@ -135,7 +135,7 @@ const MyAppBar = () => ( ## `color` -React-admin's `<AppBar>` renders an Material UI `<AppBar>`, which supports a `color` prop to set the app bar color depending on the theme. By default, the app bar color is set to the `secondary` theme color. +React-admin's `<AppBar>` renders a Material UI `<AppBar>`, which supports a `color` prop to set the app bar color depending on the theme. By default, the app bar color is set to the `secondary` theme color. This means you can set the app bar color to 'default', 'inherit', 'primary', 'secondary', 'transparent', or any string. diff --git a/docs/ArrayField.md b/docs/ArrayField.md index f8e6a818312..94eff1283a1 100644 --- a/docs/ArrayField.md +++ b/docs/ArrayField.md @@ -24,7 +24,7 @@ title: "The ArrayField Component" { uuid: '34fdf393-f449-4b04-a423-38ad02ae159e', date: '2012-08-10T00:00:00.000Z', - url: 'http://example.com/foo/bar.html', + url: 'https://example.com/foo/bar.html', }, { uuid: 'd907743a-253d-4ec1-8329-404d4c5e6cf1', diff --git a/docs/AutocompleteInput.md b/docs/AutocompleteInput.md index b4a3597137d..3ccbc6b0706 100644 --- a/docs/AutocompleteInput.md +++ b/docs/AutocompleteInput.md @@ -747,7 +747,7 @@ const PostCreate = () => { ``` {% endraw %} -Use the `create` prop when you want a more polished or complex UI. For example an Material UI `<Dialog>` asking for multiple fields because the choices are from a referenced resource. +Use the `create` prop when you want a more polished or complex UI. For example a Material UI `<Dialog>` asking for multiple fields because the choices are from a referenced resource. {% raw %} ```js diff --git a/docs/Buttons.md b/docs/Buttons.md index 3d69343138b..ffd3977f12c 100644 --- a/docs/Buttons.md +++ b/docs/Buttons.md @@ -640,7 +640,7 @@ const PostEditActions = () => ( ); export const PostEdit = () => ( - <Edit actions={<PostEditActions>}> + <Edit actions={<PostEditActions />}> <SimpleForm> <TextInput source="title" /> <TextInput source="body" /> diff --git a/docs/CheckForApplicationUpdate.md b/docs/CheckForApplicationUpdate.md index c4942d2bada..64c42ca6fa7 100644 --- a/docs/CheckForApplicationUpdate.md +++ b/docs/CheckForApplicationUpdate.md @@ -122,13 +122,13 @@ If you just want to customize the notification texts, including the button, chec ## `url` -You can customize the URL fetched to detect updates by providing the `url` prop. By default it's the current URL. +You can customize the URL fetched to detect updates by providing the `url` prop. By default, it's the current URL. ```tsx // in src/MyLayout.tsx import { CheckForApplicationUpdate, Layout, LayoutProps } from 'react-admin'; -const MY_APP_ROOT_URL = 'http://admin.mycompany.com'; +const MY_APP_ROOT_URL = 'https://admin.mycompany.com'; export const MyLayout = ({ children, ...props }: LayoutProps) => ( <Layout {...props}> @@ -143,4 +143,4 @@ export const MyLayout = ({ children, ...props }: LayoutProps) => ( You can customize the texts of the default notification by overriding the following keys: * `ra.notification.application_update_available`: the notification text -* `ra.action.update_application`: the reload button text \ No newline at end of file +* `ra.action.update_application`: the reload button text diff --git a/docs/CreateInDialogButton.md b/docs/CreateInDialogButton.md index b9b6a1f5b2d..136bcf771f0 100644 --- a/docs/CreateInDialogButton.md +++ b/docs/CreateInDialogButton.md @@ -65,7 +65,7 @@ In the above example, `<CreateInDialogButton>` is used to create a new employee `<CreateInDialogButton>` accepts the following props: -* `inline`: set to true to display only an Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though. +* `inline`: set to true to display only a Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though. * `icon`: allows to override the default icon. * `label`: allows to override the default button label. I18N is supported. * `ButtonProps`: object containing props to pass to Material UI's `<Button>`. diff --git a/docs/CreateReactAdmin.md b/docs/CreateReactAdmin.md index 25911e19637..4717874ec33 100644 --- a/docs/CreateReactAdmin.md +++ b/docs/CreateReactAdmin.md @@ -19,7 +19,7 @@ yarn create react-admin your-admin-name The terminal will then ask you to choose: - a data provider -- a auth provider +- an auth provider - the names of the resources to add - the package manager to use to install the dependencies diff --git a/docs/CreateReactApp.md b/docs/CreateReactApp.md index c2b1455736a..5f42f94f857 100644 --- a/docs/CreateReactApp.md +++ b/docs/CreateReactApp.md @@ -71,7 +71,7 @@ Your app is now up and running, you can start tweaking it. If your users might keep the application open for a long time, it's a good idea to add the [`<CheckForApplicationUpdate>`](./CheckForApplicationUpdate.md) component. It will check whether a more recent version of your application is available and prompt users to reload their browser tab. -To determine whether your application has been updated, it fetches the current page at a regular interval, builds an hash of the response content (usually the HTML) and compares it with the previous hash. +To determine whether your application has been updated, it fetches the current page at a regular interval, builds a hash of the response content (usually the HTML) and compares it with the previous hash. To enable it, start by creating a custom layout: @@ -105,4 +105,4 @@ const App = () => ( ); export default App; -``` \ No newline at end of file +``` diff --git a/docs/Edit.md b/docs/Edit.md index 0f7ca645f3c..eedc411f0ad 100644 --- a/docs/Edit.md +++ b/docs/Edit.md @@ -103,7 +103,7 @@ export const PostEdit = () => ( Common buttons used as Edit actions are: -- [`<CreateButton>`](./CreateButton.md) to create a new record +- [`<CreateButton>`](./Buttons.md#createbutton) to create a new record - [`<ListButton>`](./Buttons.md#listbutton) to go back to the list - [`<ShowButton>`](./Buttons.md#showbutton) to go to the show page - [`<UpdateButton>`](./UpdateButton.md) to trigger a change in the data diff --git a/docs/EditInDialogButton.md b/docs/EditInDialogButton.md index b6bed26db54..c8696585cd1 100644 --- a/docs/EditInDialogButton.md +++ b/docs/EditInDialogButton.md @@ -58,7 +58,7 @@ const CompanyShow = () => ( It accepts the following props: -* `inline`: set to true to display only an Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though. +* `inline`: set to true to display only a Material UI `<IconButton>` instead of the full `<Button>`. The label will still be available as a `<Tooltip>` though. * `icon`: allows to override the default icon. * `label`: allows to override the default button label. I18N is supported. * `ButtonProps`: object containing props to pass to Material UI's `<Button>`. diff --git a/docs/Features.md b/docs/Features.md index deac2e86eb1..b86a2444bba 100644 --- a/docs/Features.md +++ b/docs/Features.md @@ -741,7 +741,7 @@ When users submit a form, or delete a record, the UI reflects their change immed This undo feature is enabled by default, and requires no particular setup on the server side. In fact, react-admin delays the call to the data provider for mutations, to give users a "grace" period. That's why the actual call to `dataProvider.update()` occurs 5 seconds after the user submits an update form - even though the UI reflects the changes immediately. -You can disable this feature page by page by choosing a different [mutationMode](./Edit.md#mutationmode). +You can disable this feature page by page, by choosing a different [mutationMode](./Edit.md#mutationmode). ## Roles & Permissions @@ -1157,7 +1157,7 @@ For instance, the Saved Queries feature lets users **save a combination of filte </video> -Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `<FilterList>` Sidebar. It's enabled by default for the Filter Button/Form combo but you have to add it yourself in the `<FilterList>` Sidebar. +Saved queries persist between sessions, so users can find their custom queries even after closing and reopening the admin. Saved queries are available both for the Filter Button/Form combo and for the `<FilterList>` Sidebar. It's enabled by default for the Filter Button/Form combo, but you have to add it yourself in the `<FilterList>` Sidebar. ```diff import { FilterList, FilterListItem, List, Datagrid } from 'react-admin'; @@ -1373,7 +1373,7 @@ React-admin is **fully internationalized**. </video> -The default interface messages (for buttons, tooltips, input labels, etc) are in English. You can translate them to any of [the 30+ languages supported by react-admin](./TranslationLocales.md) by importing the appropriate translation package. For instance, to translate to French: +The default interface messages (for buttons, tooltips, input labels, etc.) are in English. You can translate them to any of [the 30+ languages supported by react-admin](./TranslationLocales.md) by importing the appropriate translation package. For instance, to translate to French: ```jsx import { Admin } from 'react-admin'; diff --git a/docs/Inputs.md b/docs/Inputs.md index d1c36175090..cfeed4a74f0 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -54,7 +54,7 @@ All input components accept the following props: React-admin uses [react-hook-form](https://react-hook-form.com/) to control form inputs. Each input component also accepts all react-hook-form [useController](https://react-hook-form.com/docs/usecontroller) hook options. -Additional props are passed down to the underlying component (usually an Material UI component). For instance, when setting the `variant` prop on a `<TextInput>` component, the underlying Material UI `<TextField>` receives it, and renders it with a different variant. Refer to the documentation of each Input component to see the underlying Material UI component and its props. +Additional props are passed down to the underlying component (usually a Material UI component). For instance, when setting the `variant` prop on a `<TextInput>` component, the underlying Material UI `<TextField>` receives it, and renders it with a different variant. Refer to the documentation of each Input component to see the underlying Material UI component and its props. ## Which Input Component to Use? @@ -596,7 +596,7 @@ import { FormDataConsumer } from 'react-admin'; Material UI offers [3 variants for text fields](https://mui.com/material-ui/react-text-field/#basic-textfield): `outlined`, `filled`, and `standard`. The default react-admin theme uses the `filled` variant. -Most Input components pass their additional props down to the root component, which is often an Material UI Field component. This means you can pass a `variant` prop to override the variant of a single input: +Most Input components pass their additional props down to the root component, which is often a Material UI Field component. This means you can pass a `variant` prop to override the variant of a single input: ```tsx <TextInput source="name" variant="outlined" /> @@ -761,7 +761,7 @@ Now the component will render with a label: ### Using Material UI Field Components -Instead of HTML `input` elements, you can use an Material UI component like `TextField`. To bind Material UI components to the form values, use the `useController()` hook: +Instead of HTML `input` elements, you can use a Material UI component like `TextField`. To bind Material UI components to the form values, use the `useController()` hook: ```tsx // in LatLongInput.js @@ -885,7 +885,7 @@ const LatLngInput = (props: BoundedTextFieldProps) => { }; ``` -Here is another example, this time using an Material UI `Select` component: +Here is another example, this time using a Material UI `Select` component: ```tsx // in SexInput.js diff --git a/docs/Layout.md b/docs/Layout.md index a12197f4168..4121dfb0205 100644 --- a/docs/Layout.md +++ b/docs/Layout.md @@ -211,7 +211,7 @@ export const MyError = ({ }; ``` -**Tip:** [React's Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) are used internally to display the Error Page whenever an error occurs. Error Boundaries only catch errors during rendering, in lifecycle methods, and in constructors of the components tree. This implies in particular that errors during event callbacks (such as 'onClick') are not concerned. Also note that the Error Boundary component is only set around the main container of React Admin. In particular, you won't see it for errors thrown by the [sidebar Menu](./Menu.md), nor the [AppBar](#customizing-the-appbar-content). This ensures the user is always able to navigate away from the Error Page. +**Tip:** [React's Error Boundaries](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary) are used internally to display the Error Page whenever an error occurs. Error Boundaries only catch errors during rendering, in lifecycle methods, and in constructors of the components tree. This implies in particular that errors during event callbacks (such as 'onClick') are not concerned. Also note that the Error Boundary component is only set around the main container of React Admin. In particular, you won't see it for errors thrown by the [sidebar Menu](./Menu.md), nor the [AppBar](#adding-a-custom-context). This ensures the user is always able to navigate away from the Error Page. ## `menu` diff --git a/docs/List.md b/docs/List.md index 49baf284ea5..9ef178b4afc 100644 --- a/docs/List.md +++ b/docs/List.md @@ -946,7 +946,7 @@ The title can be either a string or a React element. ## `sx`: CSS API -The `<List>` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses: +The `<List>` component accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses: | Rule name | Description | |-----------------------|---------------------------------------------------------------| diff --git a/docs/ListTutorial.md b/docs/ListTutorial.md index 0aabf5418ee..eba8882a71e 100644 --- a/docs/ListTutorial.md +++ b/docs/ListTutorial.md @@ -514,8 +514,8 @@ On Mobile, `<Datagrid>` doesn't work well - the screen is too narrow. You should To use `<Datagrid>` on desktop and `<SimpleList>` on mobile, use the `useMediaQuery` hook: -```jsx -// in src/posts.js +```tsx +// in src/posts.tsx import * as React from 'react'; import { useMediaQuery, Theme } from '@mui/material'; import { List, SimpleList, Datagrid, TextField, ReferenceField } from 'react-admin'; diff --git a/docs/LongForm.md b/docs/LongForm.md index 5063457db17..adbd9909007 100644 --- a/docs/LongForm.md +++ b/docs/LongForm.md @@ -355,7 +355,7 @@ export const TagEdit = () => ( The children of `<LongForm>` must be `<LongForm.Section>` elements. -This component adds a section title (using a `<Typography variant="h4">`), then renders each child inside a [Material UI `<Stack>`](https://mui.com/material-ui/react-stack/), and finally adds an Material UI `<Divider>` at the bottom of the section. +This component adds a section title (using a `<Typography variant="h4">`), then renders each child inside a [Material UI `<Stack>`](https://mui.com/material-ui/react-stack/), and finally adds a Material UI `<Divider>` at the bottom of the section. It accepts the following props: @@ -470,7 +470,7 @@ Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details ## Role-Based Access Control (RBAC) -Fine-grained permissions control can be added by using the [`<LongForm>`](./AuthRBAC.md#longform) and [`<LongFormSection>`](./AuthRBAC.md#longformsection) components provided by the `@react-admin/ra-enterprise` package. +Fine-grained permissions control can be added by using the [`<LongForm>`](./AuthRBAC.md#longform) and [`<LongFormSection>`](./AuthRBAC.md#longform) components provided by the `@react-admin/ra-enterprise` package. {% raw %} ```tsx diff --git a/docs/NextJs.md b/docs/NextJs.md index 0b17259a708..55b10172287 100644 --- a/docs/NextJs.md +++ b/docs/NextJs.md @@ -115,7 +115,7 @@ This implies the creation of a new page in the Next.js app. Create a new file at - App Router: `src/app/admin/page.tsx` - Pages Router: `src/pages/admin/index.tsx` -No matter which system you choose, the file should contains the same code: +No matter which system you choose, the file should contain the same code: ```tsx import { NextPage } from "next"; @@ -225,4 +225,4 @@ const AdminApp = () => ( export default AdminApp; ``` -Your react-admin app now uses the Supabase API to fetch and update data. \ No newline at end of file +Your react-admin app now uses the Supabase API to fetch and update data. diff --git a/docs/NumberField.md b/docs/NumberField.md index 9fcaf6f92c8..4ebd6f26379 100644 --- a/docs/NumberField.md +++ b/docs/NumberField.md @@ -119,7 +119,7 @@ import { NumberField } from 'react-admin'; For information, the default `transform` function is: -```jsx +```tsx const defaultTransform = value => { if (!value || typeof value === 'number') { return value; @@ -129,4 +129,4 @@ const defaultTransform = value => { return value; } }; -``` \ No newline at end of file +``` diff --git a/docs/Pagination.md b/docs/Pagination.md index 0b8114ac126..e7af0b1a344 100644 --- a/docs/Pagination.md +++ b/docs/Pagination.md @@ -53,7 +53,7 @@ const PostPagination = () => <Pagination rowsPerPageOptions={[10, 25, 50, 100]} ## Infinite Scroll -On mobile devices, the `<Pagination>` component is not very user friendly. The expected user experience is to reveal more records when the user scrolls to the bottom of the list. This UX is also useful on desktop, for lists with a large number of records. +On mobile devices, the `<Pagination>` component is not very user-friendly. The expected user experience is to reveal more records when the user scrolls to the bottom of the list. This UX is also useful on desktop, for lists with a large number of records. <video controls autoplay playsinline muted loop width="100%"> <source src="./img/infinite-book-list.webm" poster="./img/infinite-book-list.webp" type="video/webm"> @@ -86,4 +86,4 @@ const BookList = () => ( `<InfiniteList>` uses a special pagination component, `<InfinitePagination>`, which doesn't display any pagination buttons. Instead, it displays a loading indicator when the user scrolls to the bottom of the list. But you cannot use this `<InfinitePagination>` inside a regular `<List>` component. -For more information, see [the `<InfiniteList>` documentation](./InfiniteList.md). \ No newline at end of file +For more information, see [the `<InfiniteList>` documentation](./InfiniteList.md). diff --git a/docs/Permissions.md b/docs/Permissions.md index 11caf8b5a63..b1fc7ab93b0 100644 --- a/docs/Permissions.md +++ b/docs/Permissions.md @@ -253,7 +253,7 @@ export const UserCreate = () => { } ``` -**Tip**: If you use RBAC, use [`ra-rbac`'s `<SimpleForm>` component](./AuthRBAC.md#simpleform) instead. It render its children only if the user has the required permissions. +**Tip**: If you use RBAC, use [`ra-rbac`'s `<SimpleForm>` component](./AuthRBAC.md#simpleform) instead. It renders its children only if the user has the required permissions. ```jsx import { Create, TextInput } from 'react-admin'; diff --git a/docs/Realtime.md b/docs/Realtime.md index 8f9c97ccf8d..b15c663ce45 100644 --- a/docs/Realtime.md +++ b/docs/Realtime.md @@ -209,7 +209,7 @@ To create your own translations, you can use the TypeScript types to see the str Here is an example of how to customize translations in your app: -```jsx +```tsx import polyglotI18nProvider from 'ra-i18n-polyglot'; import englishMessages from 'ra-language-english'; import frenchMessages from 'ra-language-french'; diff --git a/docs/RecordRepresentation.md b/docs/RecordRepresentation.md index 1ad6715994f..7052e9f3ef6 100644 --- a/docs/RecordRepresentation.md +++ b/docs/RecordRepresentation.md @@ -5,7 +5,7 @@ title: "The RecordRepresentation Component" Render the record representation, leveraging the [`recordRepresentation`](./Resource.md#recordrepresentation) prop of the parent `<Resource>` component. -You can also uses its hook version: [`<useGetRecordRepresentation>`](./useGetRecordRepresentation.md). +You can also use its hook version: [`<useGetRecordRepresentation>`](./useGetRecordRepresentation.md). ## Usage diff --git a/docs/ReferenceOneInput.md b/docs/ReferenceOneInput.md index 7e7ddd42b22..cfea3dbff47 100644 --- a/docs/ReferenceOneInput.md +++ b/docs/ReferenceOneInput.md @@ -84,7 +84,7 @@ Additional props are passed to the Material UI `<Stack>` component. ## `children` -`<ReferenceOneInput>` expects input components as its children (like `<TextInput>`, `<NumberInput>`, etc.), which will allow to edit the related record. The inputs will be rendered inside an [Material UI `<Stack>`](https://mui.com/material-ui/react-stack/). +`<ReferenceOneInput>` expects input components as its children (like `<TextInput>`, `<NumberInput>`, etc.), which will allow to edit the related record. The inputs will be rendered inside a [Material UI `<Stack>`](https://mui.com/material-ui/react-stack/). ```jsx <ReferenceOneInput reference="book_details" target="book_id"> @@ -235,4 +235,4 @@ Name of the field carrying the relationship on the referenced resource. For inst ## Limitations - `<ReferenceOneInput>` cannot be used inside an `<ArrayInput>` or a `<ReferenceManyInput>`. -- `<ReferenceOneInput>` cannot have a `<ReferenceManyInput>` as one of its children. \ No newline at end of file +- `<ReferenceOneInput>` cannot have a `<ReferenceManyInput>` as one of its children. diff --git a/docs/RichTextField.md b/docs/RichTextField.md index 4e4b0d5e611..d8cf5b909dc 100644 --- a/docs/RichTextField.md +++ b/docs/RichTextField.md @@ -43,7 +43,7 @@ import { RichTextField } from 'react-admin'; The `purifyOptions` prop allows to pass additional options to the DomPurify library when calling `sanitize()`. -For instance you can use the `ADD_ATTR` option to allow additional attributes, like `'target'`: +For instance, you can use the `ADD_ATTR` option to allow additional attributes, like `'target'`: {% raw %} ```jsx diff --git a/docs/SelectInput.md b/docs/SelectInput.md index 9358a43ea6a..166c6659539 100644 --- a/docs/SelectInput.md +++ b/docs/SelectInput.md @@ -631,7 +631,7 @@ const PostCreate = () => { ``` {% endraw %} -Use the `create` prop when you want a more polished or complex UI. For example an Material UI `<Dialog>` asking for multiple fields because the choices are from a referenced resource. +Use the `create` prop when you want a more polished or complex UI. For example a Material UI `<Dialog>` asking for multiple fields because the choices are from a referenced resource. {% raw %} ```jsx @@ -748,4 +748,4 @@ export const ProductEdit = () => ( </SimpleForm> </Edit> ); -``` \ No newline at end of file +``` diff --git a/docs/Show.md b/docs/Show.md index f90c47289cb..763d8e5de93 100644 --- a/docs/Show.md +++ b/docs/Show.md @@ -300,7 +300,7 @@ const PostShow = () => ( ## `sx`: CSS API -The `<Show>` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses: +The `<Show>` component accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses: | Rule name | Description | |------------------| ------------------------------------------------------------- | diff --git a/docs/TabbedForm.md b/docs/TabbedForm.md index 74e8e396e79..b317154ea81 100644 --- a/docs/TabbedForm.md +++ b/docs/TabbedForm.md @@ -824,7 +824,7 @@ Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details ## Role-Based Access Control (RBAC) -Fine-grained permissions control can be added by using the [`<TabbedForm>`](./AuthRBAC.md#tabbedform) and [`<FormTab>`](./AuthRBAC.md#formtab) components provided by the `@react-admin/ra-rbac` package. +Fine-grained permissions control can be added by using the [`<TabbedForm>`](./AuthRBAC.md#tabbedform) and [`<FormTab>`](./AuthRBAC.md#tabbedform) components provided by the `@react-admin/ra-rbac` package. {% raw %} ```jsx diff --git a/docs/TabbedShowLayout.md b/docs/TabbedShowLayout.md index 7209456dc60..dbb52485c28 100644 --- a/docs/TabbedShowLayout.md +++ b/docs/TabbedShowLayout.md @@ -307,7 +307,7 @@ When passed a `record`, `<TabbedShowLayout>` creates a `RecordContext` with the ## `sx`: CSS API -The `<TabbedShowLayout>` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses: +The `<TabbedShowLayout>` component accepts the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses: | Rule name | Description | |---------------------------------| ---------------------------------------------------------| diff --git a/docs/TextInput.md b/docs/TextInput.md index 9f2ddf7d4d3..57880cddc45 100644 --- a/docs/TextInput.md +++ b/docs/TextInput.md @@ -5,7 +5,7 @@ title: "The TextInput Component" # `<TextInput>` -`<TextInput>` is the most common input. It is used for texts, emails, URL or passwords. In translates into [an Material UI `<TextField>`](https://mui.com/material-ui/react-text-field/), and renders as `<input type="text">` in HTML. +`<TextInput>` is the most common input. It is used for texts, emails, URL or passwords. In translates into [a Material UI `<TextField>`](https://mui.com/material-ui/react-text-field/), and renders as `<input type="text">` in HTML. <video controls autoplay playsinline muted loop> <source src="./img/text-input.webm" type="video/webm"/> @@ -123,4 +123,4 @@ const PersonEdit = () => ( ); ``` -See the [dedicated documentation](./PredictiveTextInput.md) for more details. \ No newline at end of file +See the [dedicated documentation](./PredictiveTextInput.md) for more details. diff --git a/docs/Theming.md b/docs/Theming.md index 8ecb42c3754..08d577c0b07 100644 --- a/docs/Theming.md +++ b/docs/Theming.md @@ -57,6 +57,7 @@ const PostList = () => ( sortable={false} sx={{ '& .RaBooleanField-falseIcon': { visibility: 'hidden' } }} /> + </Datagrid> </List> ); ``` @@ -72,7 +73,7 @@ If you need to customize the look and feel of the whole application, you can use | --- | --- | | [![Default style](./img/datagrid-theme-unstyled.webp)](./img/datagrid-theme-unstyled.webp) | [![Styled with `theme`](./img/datagrid-theme-styled.webp)](./img/datagrid-theme-styled.webp) | -```jsx +```tsx import { Admin, defaultTheme } from 'react-admin'; import indigo from '@mui/material/colors/indigo'; import pink from '@mui/material/colors/pink'; @@ -165,4 +166,4 @@ Material-ui is a rich UI library, so you may not know all its components. There ![Stack](./img/stack.webp) -We've summarized the most important props of these components in a dedicated documentation: [`<Box>`, `<Stack>` and `<Grid>`](./BoxStackGrid.md). You should definitely read it. \ No newline at end of file +We've summarized the most important props of these components in a dedicated documentation: [`<Box>`, `<Stack>` and `<Grid>`](./BoxStackGrid.md). You should definitely read it. diff --git a/docs/Translation.md b/docs/Translation.md index 3f259cacd42..d832d571990 100644 --- a/docs/Translation.md +++ b/docs/Translation.md @@ -28,8 +28,8 @@ Just like for data fetching and authentication, react-admin is agnostic to your It should be an object with the following methods: -```tsx -// in src/i18nProvider.js +```ts +// in src/i18nProvider.ts export const i18nProvider = { // required translate: (key, options) => string, diff --git a/docs/TranslationWriting.md b/docs/TranslationWriting.md index 2326aa93747..c312038363a 100644 --- a/docs/TranslationWriting.md +++ b/docs/TranslationWriting.md @@ -7,8 +7,8 @@ title: "Writing An I18nProvider" An `i18nProvider` should be an object with three required methods and one optional method: -```jsx -// in src/i18nProvider.js +```ts +// in src/i18nProvider.ts export const i18nProvider = { // required translate: (key, options) => string, diff --git a/docs/UpdateButton.md b/docs/UpdateButton.md index 244c9cdd998..e6b4d680395 100644 --- a/docs/UpdateButton.md +++ b/docs/UpdateButton.md @@ -28,7 +28,7 @@ const PostEditActions = () => ( ); export const PostEdit = () => ( - <Edit actions={<PostEditActions>}> + <Edit actions={<PostEditActions />}> <SimpleForm> <TextInput source="title" /> <TextInput source="body" /> diff --git a/docs/Upgrade.md b/docs/Upgrade.md index 644046159af..73c9fcbbbcf 100644 --- a/docs/Upgrade.md +++ b/docs/Upgrade.md @@ -1932,7 +1932,7 @@ If this sanitization strategy doesn't suit your needs, you can use the `transfor ### `useFormGroup` Hook Returned State Has Changed -The `useFormGroup` hook used to returned the form group state props (`dirty`, `invalid`, `pristine`, `touched`, `valid` and `errors`). They don't exist in `react-hook-form` so now it will return `isDirty`, `isValid`, `isTouched` and `errors`: +The `useFormGroup` hook used to return the form group state props (`dirty`, `invalid`, `pristine`, `touched`, `valid` and `errors`). They don't exist in `react-hook-form` so now it will return `isDirty`, `isValid`, `isTouched` and `errors`: ```diff const AccordionSectionTitle = ({ children, name }) => { diff --git a/docs/Vite.md b/docs/Vite.md index 2eec4ae9ed6..fee15557b41 100644 --- a/docs/Vite.md +++ b/docs/Vite.md @@ -104,7 +104,7 @@ Your app is now up and running, you can start tweaking it. If your users might keep the application open for a long time, it's a good idea to add the [`<CheckForApplicationUpdate>`](./CheckForApplicationUpdate.md) component. It will check whether a more recent version of your application is available and prompt users to reload their browser tab. -To determine whether your application has been updated, it fetches the current page at a regular interval, builds an hash of the response content (usually the HTML) and compares it with the previous hash. +To determine whether your application has been updated, it fetches the current page at a regular interval, builds a hash of the response content (usually the HTML) and compares it with the previous hash. To enable it, start by creating a custom layout: diff --git a/docs/WizardForm.md b/docs/WizardForm.md index eccfb8fea03..1094061ba70 100644 --- a/docs/WizardForm.md +++ b/docs/WizardForm.md @@ -473,7 +473,7 @@ const PostCreate = () => ( ## Role-Based Access Control (RBAC) -Fine-grained permissions control can be added by using the [`<WizardForm>`](./AuthRBAC.md#wizardform) and [`<WizardFormStep>`](./AuthRBAC.md#wizardformstep) components provided by the `@react-admin/ra-enterprise` package. +Fine-grained permissions control can be added by using the [`<WizardForm>`](./AuthRBAC.md#wizardform) and [`<WizardFormStep>`](./AuthRBAC.md#wizardform) components provided by the `@react-admin/ra-enterprise` package. {% raw %} ```tsx @@ -524,4 +524,4 @@ const ProductCreate = () => ( ``` {% endraw %} -Check [the RBAC `<WizardForm>`](./AuthRBAC.md#wizardform) documentation for more details. \ No newline at end of file +Check [the RBAC `<WizardForm>`](./AuthRBAC.md#wizardform) documentation for more details. diff --git a/docs/useGetRecordRepresentation.md b/docs/useGetRecordRepresentation.md index 70009a89637..c4ef82d564d 100644 --- a/docs/useGetRecordRepresentation.md +++ b/docs/useGetRecordRepresentation.md @@ -5,7 +5,7 @@ title: "The useGetRecordRepresentation Component" Returns a function that get the record representation, leveraging the [`recordRepresentation`](./Resource.md#recordrepresentation) prop of the parent `<Resource>` component. -You can also uses its component version: [`<RecordRepresentation>`](./RecordRepresentation.md). +You can also use its component version: [`<RecordRepresentation>`](./RecordRepresentation.md). ## Usage diff --git a/docs/useGetTree.md b/docs/useGetTree.md index 7a623596332..9d880a4f2de 100644 --- a/docs/useGetTree.md +++ b/docs/useGetTree.md @@ -47,7 +47,7 @@ const Categories = () => { ## Other Tree Hooks -`useGetTree` is one of many hooks added by `ra-tree`. This package recommends to add several methods to the `dataProvider`, and has one hook for each method. +`useGetTree` is one of many hooks added by `ra-tree`. This package recommends adding several methods to the `dataProvider`, and has one hook for each method. **Read methods** @@ -66,4 +66,4 @@ These methods return Promises for `TreeRecord` objects. - `addChildNode(resource, { parentId, data })` - `deleteBranch(resource, { id, data })`: `id` is the identifier of the node to remove, and `data` its content -Check [the `ra-tree` documentation](https://marmelab.com/ra-enterprise/modules/ra-tree) for more details. \ No newline at end of file +Check [the `ra-tree` documentation](https://marmelab.com/ra-enterprise/modules/ra-tree) for more details.