Merge pull request #9083 from WiXSL/fix-docs-syntax

[Doc] Fix code examples syntax errors

Author: slax57

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 }} />