[Doc] Fix code examples syntax errors

docs/AccordionForm.md

@@ -549,20 +549,20 @@ const authProvider = {
 const ProductEdit = () => (
     <Edit>
         <AccordionForm>
-            <AccordionForm.Panel label="description" label="Description">
+            <AccordionForm.Panel name="description" label="Description">
                 <TextInput source="reference" />
                 <TextInput source="width" />
                 <TextInput source="height" />
                 <TextInput source="description" />
             </AccordionForm.Panel>
-            <AccordionForm.Panel label="images" label="Images">
+            <AccordionForm.Panel name="images" label="Images">
                 <TextInput source="image" />
                 <TextInput source="thumbnail" />
             </AccordionForm.Panel>
-            <AccordionForm.Panel label="stock" label="Stock">
+            <AccordionForm.Panel name="stock" label="Stock">
                 <TextInput source="stock" />
             </AccordionForm.Panel>
-            // delete button not displayed
+            { /* delete button not displayed */ }
         </AccordionForm>
     </Edit>
 );

docs/AuthProviderWriting.md

@@ -23,11 +23,12 @@ const authProvider = {
 
 **Tip**: If you're a TypeScript user, you can check that your `authProvider` is correct at compile-time using the `AuthProvider` type.
 
-```jsx
+```tsx
 import { AuthProvider } from 'react-admin';
 
 const authProvider: AuthProvider = {
     // ...
+};
 ```
 
 ## Example
@@ -414,7 +415,7 @@ import { PreviousLocationStorageKey } from 'react-admin';
 import { Auth0Client } from './Auth0Client';
 
 export const authProvider = {
-    async login() => { /* Nothing to do here, this function will never be called */ },
+    async login() { /* Nothing to do here, this function will never be called */ },
     async checkAuth() {
         const isAuthenticated = await client.isAuthenticated();
         if (isAuthenticated) {
@@ -434,7 +435,7 @@ export const authProvider = {
     // and was redirected back to the /auth-callback route on the app
     async handleCallback() {
         const query = window.location.search;
-        if (!query.includes('code=') && ¡query.includes('state=')) {
+        if (!query.includes('code=') && !query.includes('state=')) {
             throw new Error('Failed to handle login callback.');
         }
         // If we did receive the Auth0 parameters,
@@ -451,7 +452,7 @@ You can override this behavior by returning an object with a `redirectTo` proper
 
 ```jsx
 async handleCallback() {
-    if (!query.includes('code=') && ¡query.includes('state=')) {
+    if (!query.includes('code=') && !query.includes('state=')) {
         throw new Error('Failed to handle login callback.');
     }
     // If we did receive the Auth0 parameters,

docs/AuthRBAC.md

@@ -454,7 +454,7 @@ Alternative to react-admin's `<Datagrid>` that adds RBAC control to columns
 To see a column, the user must have the permission to read the resource column:
 
 ```jsx
-{ action: "read", resource: `${resource}.${source}` }.
+{ action: "read", resource: `${resource}.${source}` }
 ```
 
 Also, the `rowClick` prop is automatically set depending on the user props:
@@ -894,17 +894,17 @@ const authProvider = {
 const ProductEdit = () => (
     <Edit>
         <AccordionForm>
-            <AccordionForm.Panel label="description" label="Description">
+            <AccordionForm.Panel name="description" label="Description">
                 <TextInput source="reference" />
                 <TextInput source="width" />
                 <TextInput source="height" />
                 <TextInput source="description" />
             </AccordionForm.Panel>
-            <AccordionForm.Panel label="images" label="Images">
+            <AccordionForm.Panel name="images" label="Images">
                 <TextInput source="image" />
                 <TextInput source="thumbnail" />
             </AccordionForm.Panel>
-            <AccordionForm.Panel label="stock" label="Stock">
+            <AccordionForm.Panel name="stock" label="Stock">
                 <TextInput source="stock" />
             </AccordionForm.Panel>
             // delete button not displayed

docs/Authentication.md

@@ -189,7 +189,7 @@ For instance, here's what a simple authProvider for Auth0 might look like:
 import { Auth0Client } from './Auth0Client';
 
 export const authProvider = {
-    async login() => { /* Nothing to do here, this function will never be called */ },
+    async login() { /* Nothing to do here, this function will never be called */ },
     async checkAuth() {
         const isAuthenticated = await Auth0Client.isAuthenticated();
         if (isAuthenticated) {

docs/Count.md

@@ -99,7 +99,7 @@ When used in conjunction to the `filter` prop, the link will point to the list v
 
 {% raw %}
 ```jsx
-<Count link filter={{ is_published: true }} link />
+<Count link filter={{ is_published: true }} />
 ```
 {% endraw %}
 
@@ -178,4 +178,4 @@ export const PostList = () => (
         </Datagrid>
     </List>
 )
-```
+```

docs/CreateBase.md

@@ -18,25 +18,24 @@ import * as React from "react";
 import { CreateBase, SimpleForm, TextInput, SelectInput } from "react-admin";
 import { Card } from "@mui/material";
 
-export const BookCreate = () => {
+export const BookCreate = () => ( 
     <CreateBase>
-      <div>
-        <Title title="Book Creation" />
-        <Card>
-          <SimpleForm>
-            <TextInput source="title" />
-            <TextInput source="author" />
-            <SelectInput source="availability" choices={[
-              { id: "in_stock", name: "In stock" },
-              { id: "out_of_stock", name: "Out of stock" },
-              { id: "out_of_print", name: "Out of print" },
-            ]} />
-          </SimpleForm>
-        </Card>
-      </div>
+        <div>
+            <Title title="Book Creation" />
+            <Card>
+                <SimpleForm>
+                    <TextInput source="title" />
+                    <TextInput source="author" />
+                    <SelectInput source="availability" choices={[
+                        { id: "in_stock", name: "In stock" },
+                        { id: "out_of_stock", name: "Out of stock" },
+                        { id: "out_of_print", name: "Out of print" },
+                    ]} />
+                </SimpleForm>
+            </Card>
+        </div>
     </CreateBase>
-  );
-};
+);
 ```
 
 You can customize the `<CreateBase>` component using the following props, documented in the `<Create>` component:

docs/EditBase.md

@@ -18,25 +18,24 @@ import * as React from "react";
 import { EditBase, SimpleForm, TextInput, SelectInput } from "react-admin";
 import { Card } from "@mui/material";
 
-export const BookEdit = () => {
+export const BookEdit = () => (
     <EditBase>
-      <div>
-        <Title title="Book Edition" />
-        <Card>
-          <SimpleForm>
-            <TextInput source="title" />
-            <TextInput source="author" />
-            <SelectInput source="availability" choices={[
-              { id: "in_stock", name: "In stock" },
-              { id: "out_of_stock", name: "Out of stock" },
-              { id: "out_of_print", name: "Out of print" },
-            ]} />
-          </SimpleForm>
-        </Card>
-      </div>
+        <div>
+            <Title title="Book Edition" />
+            <Card>
+                <SimpleForm>
+                    <TextInput source="title" />
+                    <TextInput source="author" />
+                    <SelectInput source="availability" choices={[
+                        { id: "in_stock", name: "In stock" },
+                        { id: "out_of_stock", name: "Out of stock" },
+                        { id: "out_of_print", name: "Out of print" },
+                    ]} />
+                </SimpleForm>
+            </Card>
+        </div>
     </EditBase>
-  );
-};
+);
 ```
 
 You can customize the `<EditBase>` component using the following props, documented in the `<Edit>` component:

docs/EditLive.md

@@ -32,7 +32,7 @@ To trigger `<EditLive>` features, the API has to publish events containing at le
 {
     topic : '/resource/{resource}/{recordIdentifier}',
     type: '{deleted || updated}',
-    payload: { id: [{recordIdentifier}]},
+    payload: { id: [{ recordIdentifier }]},
 }
 ```
 

docs/Features.md

@@ -1096,7 +1096,7 @@ And last but not least, react-admin provides a **lock mechanism** to prevent two
 
 A user can lock a resource, either by voluntarily asking for a lock or by editing a resource. When a resource is locked, other users can't edit it. When the lock is released, other users can edit the resource again.
 
-```jsx
+```tsx
 export const NewMessageForm = () => {
     const [create, { isLoading: isCreating }] = useCreate();
     const record = useRecordContext();

docs/FilteringTutorial.md

@@ -165,7 +165,7 @@ export const PostFilterSidebar = () => (
     <Card sx={{ order: -1, mr: 2, mt: 9, width: 200 }}>
         <CardContent>
             <SavedQueriesList />
-            <FilterLiveSearch >
+            <FilterLiveSearch />
             <FilterList label="Subscribed to newsletter" icon={<MailIcon />}>
                 <FilterListItem label="Yes" value={{ has_newsletter: true }} />
                 <FilterListItem label="No" value={{ has_newsletter: false }} />

docs/Form.md

@@ -15,7 +15,7 @@ Use `<Form>` to build completely custom form layouts. Don't forget to include a
 
 ```jsx
 import { Create, Form, TextInput, RichTextInput, SaveButton } from 'react-admin';
-import { Grid } from '@mui/material';
+import { Grid } from '@mui/material';
 
 export const PostCreate = () => (
     <Create>

docs/IconMenu.md

@@ -41,7 +41,7 @@ Then, create a custom layout using [the `<Layout>` component](./Layout.md) and p
 ```jsx
 // in src/MyLayout.js
 import { Layout } from 'react-admin';
-import { AppLocationContext } from '@react-admin/ra-navigation';
+import { AppLocationContext } from '@react-admin/ra-navigation';
 
 import { MyMenu } from './MyMenu';
 
@@ -59,7 +59,7 @@ Finally, pass this custom layout to the `<Admin>` component. You should apply th
 ```jsx
 // in src/App.js
 import { Admin, Resource } from "react-admin";
-import { theme } from '@react-admin/ra-navigation';
+import { theme } from '@react-admin/ra-navigation';
 
 import { MyLayout } from './MyLayout';
 

docs/Inputs.md

@@ -171,7 +171,7 @@ form state value --> format --> form input value (string)
 
 **Tip:** By default, react-admin inputs have the following `format` function, which turns any `null` or `undefined` value into an empty string. This is to avoid warnings about controlled/uncontrolled input components:
 
-```js
+```ts
 const defaultFormat = (value: any) => value == null ? '' : value;
 ```
 
@@ -750,7 +750,7 @@ const BoundedTextField = ({ name, label }) => {
         field,
         fieldState: { isTouched, invalid, error },
         formState: { isSubmitted }
-    } = useController(name, defaultValue: '');
+    } = useController({ name, defaultValue: '' });
     return (
         <TextField
             {...field}

docs/Layout.md

@@ -308,7 +308,7 @@ Pass an `sx` prop to customize the style of the main component and the underlyin
 {% raw %}
 ```jsx
 export const MyLayout = (props) => (
-    <Layout sx={{ '& .RaLayout-appFrame': { marginTop: 55 } }} {...props}>
+    <Layout sx={{ '& .RaLayout-appFrame': { marginTop: 55 } }} {...props} />
 );
 ```
 {% endraw %}

docs/ListTutorial.md

@@ -202,7 +202,7 @@ import {
 +   Pagination,
 +   TextInput
 } from 'react-admin';
--import { Card, TextField as MuiTextField, Button, Toolbar } from '@mui/material';
+-import { Card, TextField as MuiTextField, Button, Toolbar } from '@mui/material';
 +import { Card } from '@mui/material';
 
 const BookList = () => {

docs/LongForm.md

@@ -140,7 +140,7 @@ export const PostCreate = () => (
                 <NumberInput source="nb_views" />
                 <SaveButton />
             </LongForm.Section>
-        </Form>
+        </LongForm>
     </Create>
 );
 ```
@@ -519,4 +519,4 @@ const ProductEdit = () => (
 ```
 {% endraw %}
 
-Check [the RBAC `<LongForm>`](./AuthRBAC.md#longform) documentation for more details.
+Check [the RBAC `<LongForm>`](./AuthRBAC.md#longform) documentation for more details.

docs/Menu.md

@@ -119,11 +119,11 @@ Pass an `sx` prop to customize the style of the main component and the underlyin
 ```jsx
 export const MyMenu = () => (
     <Menu sx={{ 
-        marginTop: 0
+        marginTop: 0,
         '&.RaMenu-closed': {
             opacity: 0.8,
         },
-    }} >
+    }} />
 );
 ```
 {% endraw %}
@@ -164,21 +164,22 @@ export const theme = {
     palette: {
         // ...
     },
-  components: {
-    // ... 
-    RaMenuItemLink: {
-        styleOverrides: {
-            root: {
-                // invisible border when not active, to avoid position flashs
-                borderLeft: '3px solid transparent', 
-                '&.RaMenuItemLink-active': {
-                    borderLeft: '10px solid #4f3cc9',
-                },
-                '& .RaMenuItemLink-icon': {
-                    color: '#EFC44F',
+    components: {
+        // ... 
+        RaMenuItemLink: {
+            styleOverrides: {
+                root: {
+                    // invisible border when not active, to avoid position flashs
+                    borderLeft: '3px solid transparent', 
+                    '&.RaMenuItemLink-active': {
+                        borderLeft: '10px solid #4f3cc9',
+                    },
+                    '& .RaMenuItemLink-icon': {
+                        color: '#EFC44F',
+                    },
                 },
             },
-        },
+       },
     },
 };
 ```
@@ -331,7 +332,7 @@ If you need to display a menu item with a submenu, you should use [the `<MultiLe
 
 You can display a badge on the menu item to indicate that new data is available. Use [the `<MenuLive>` component](./MenuLive.md) instead of `<Menu>` to enable this feature.
 
-```jsx
+```tsx
 import { Admin, Layout, LayoutProps, Resource } from 'react-admin';
 import { MenuLive } from '@react-admin/ra-realtime';
 import { PostList, PostShow, PostEdit, realTimeDataProvider } from '.';
@@ -347,4 +348,4 @@ const MyReactAdmin = () => (
 );
 ```
 
-![MenuLive](./img/MenuLive.png)
+![MenuLive](./img/MenuLive.png)

docs/MenuLive.md

@@ -13,7 +13,7 @@ title: "The MenuLive Component"
 
 Use `<MenuLive>` instead of `<Menu>` in a custom layout:
 
-```jsx
+```tsx
 import { Admin, Layout, LayoutProps, Resource } from 'react-admin';
 import { MenuLive } from '@react-admin/ra-realtime';
 import { PostList, PostShow, PostEdit, realTimeDataProvider } from '.';

docs/MultiLevelMenu.md

@@ -55,7 +55,7 @@ Then, create a custom layout using [the `<Layout>` component](./Layout.md) and p
 ```jsx
 // in src/MyLayout.js
 import { Layout } from 'react-admin';
-import { AppLocationContext } from '@react-admin/ra-navigation';
+import { AppLocationContext } from '@react-admin/ra-navigation';
 
 import { MyMenu } from './MyMenu';