From d02ffc19b56d40f01abccce3b32b4404f9cdb5ed Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Wed, 8 Jun 2022 12:12:29 +0200
Subject: [PATCH] [Doc] Fix Enterprise Edition modues syntax following 4.0
 release

---
 docs/AccordionForm.md            |  2 +-
 docs/Calendar.md                 |  5 ++-
 docs/CreateDialog.md             | 18 +++++++----
 docs/EditDialog.md               | 21 ++++++++-----
 docs/EditableDatagrid.md         |  7 ++---
 docs/ReferenceManyToManyField.md | 14 ++++-----
 docs/ReferenceManyToManyInput.md | 53 ++++++++++++--------------------
 docs/TreeWithDetails.md          | 47 +++++++++++++++-------------
 docs/WizardForm.md               |  3 +-
 9 files changed, 84 insertions(+), 86 deletions(-)

diff --git a/docs/AccordionForm.md b/docs/AccordionForm.md
index aabb45110a0..f545ec8379c 100644
--- a/docs/AccordionForm.md
+++ b/docs/AccordionForm.md
@@ -61,4 +61,4 @@ You can also use the `<AccordionSection>` component as a child of `<SimpleForm>`
 
 ![Accordion section](https://marmelab.com/ra-enterprise/modules/assets/ra-accordion-section-overview.gif)
 
-Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout) for more details.
+Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout##accordionform) for more details.
diff --git a/docs/Calendar.md b/docs/Calendar.md
index a2a4cfe193a..74ec2c28e55 100644
--- a/docs/Calendar.md
+++ b/docs/Calendar.md
@@ -26,7 +26,7 @@ The user interface offers everything you expect:
 
 ## Usage
 
-Use `<Calendar>` as a child of `<List>`:
+Use `<Calendar>` as a child of `<List>` to render a list of events in a calendar:
 
 ```jsx
 import { Calendar, getFilterValuesFromInterval } from '@react-admin/ra-calendar';
@@ -46,7 +46,6 @@ const EventList = () => (
 The `ra-calendar` module also offers a full replacement for the `<List>` component, complete with show and edit views for events, called `<CompleteCalendar>`:
 
 ```jsx
-import React from 'react';
 import {
     Admin,
     Resource,
@@ -68,7 +67,7 @@ const EventList = () => (
     </CompleteCalendar>
 );
 
-export const Basic = () => (
+export const App = () => (
     <Admin dataProvider={dataProvider}>
         <Resource name="events" list={EventList} />
     </Admin>
diff --git a/docs/CreateDialog.md b/docs/CreateDialog.md
index 5d93a9d95df..badcfe6acc7 100644
--- a/docs/CreateDialog.md
+++ b/docs/CreateDialog.md
@@ -10,8 +10,15 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 ![CreateDialog](https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.gif)
 
 ```jsx
-import * as React from 'react';
-import { List, Datagrid, SimpleForm, TextField, TextInput, DateInput, required } from 'react-admin';
+import {
+    List,
+    Datagrid,
+    SimpleForm,
+    TextInput,
+    DateInput,
+    DateField,
+    required,
+} from 'react-admin';
 import { CreateDialog } from '@react-admin/ra-form-layout';
 
 const CustomerList = () => (
@@ -21,17 +28,16 @@ const CustomerList = () => (
                 ...
             </Datagrid>
         </List>
-        <CreateDialog {...props}>
+        <CreateDialog>
             <SimpleForm>
-                <TextField source="id" />
                 <TextInput source="first_name" validate={required()} />
                 <TextInput source="last_name" validate={required()} />
-                <DateInput source="date_of_birth" label="born" validate={required()} />
+                <DateInput source="date_of_birth" />
             </SimpleForm>
         </CreateDialog>
     </>
 );
 ```
 
-Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout) for more details.
+Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog-editdialog--showdialog) for more details.
 
diff --git a/docs/EditDialog.md b/docs/EditDialog.md
index 74fb858341a..3f370e25013 100644
--- a/docs/EditDialog.md
+++ b/docs/EditDialog.md
@@ -10,9 +10,17 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 ![EditDialog](https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.gif)
 
 ```jsx
-import * as React from 'react';
-import { List, Datagrid, SimpleForm, TextField, TextInput, DateInput, required } from 'react-admin';
-import { EditDialog, CreateDialog } from '@react-admin/ra-form-layout';
+import {
+    List,
+    Datagrid,
+    SimpleForm,
+    TextField,
+    TextInput,
+    DateInput,
+    DateField,
+    required,
+} from 'react-admin';
+import { EditDialog } from '@react-admin/ra-form-layout';
 
 const CustomerList = () => (
     <>
@@ -21,17 +29,16 @@ const CustomerList = () => (
                 ...
             </Datagrid>
         </List>
-        <EditDialog {...props}>
+        <EditDialog>
             <SimpleForm>
-                <TextField source="id" />
                 <TextInput source="first_name" validate={required()} />
                 <TextInput source="last_name" validate={required()} />
-                <DateInput source="date_of_birth" label="born" validate={required()} />
+                <DateInput source="date_of_birth" />
             </SimpleForm>
         </EditDialog>
     </>
 );
 ```
 
-Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout) for more details.
+Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog-editdialog--showdialog) for more details.
 
diff --git a/docs/EditableDatagrid.md b/docs/EditableDatagrid.md
index fdbe210f236..5aaf0a81a01 100644
--- a/docs/EditableDatagrid.md
+++ b/docs/EditableDatagrid.md
@@ -14,7 +14,6 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 `<EditableDatagrid>` is a drop-in replacement for `<Datagrid>`. It expects 2 additional props: `createForm` and `editForm`, the components to be displayed when a user creates or edits a row. The `<RowForm>` component allows to create such forms using react-admin Input components. 
 
 ```jsx
-import * as React from 'react';
 import {
     List,
     TextField,
@@ -36,7 +35,7 @@ const professionChoices = [
 const ArtistList = () => (
     <List hasCreate empty={false}>
         <EditableDatagrid
-            undoable
+            mutationMode="undoable"
             createForm={<ArtistForm />}
             editForm={<ArtistForm />}
         >
@@ -53,8 +52,8 @@ const ArtistList = () => (
     </List>
 );
 
-const ArtistForm = props => (
-    <RowForm {...props}>
+const ArtistForm = () => (
+    <RowForm>
         <TextField source="id" />
         <TextInput source="firstname" validate={required()} />
         <TextInput source="name" validate={required()} />
diff --git a/docs/ReferenceManyToManyField.md b/docs/ReferenceManyToManyField.md
index be95c62dc48..93eecf45ed7 100644
--- a/docs/ReferenceManyToManyField.md
+++ b/docs/ReferenceManyToManyField.md
@@ -10,24 +10,22 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 For instance, here is how to fetch the authors related to a book record by matching `book.id` to `book_authors.book_id`, then matching `book_authors.author_id` to `authors.id`, and then display the author last_name for each, in a `<ChipField>`:
 
 ```jsx
-import * as React from 'react';
-import { 
+import {
     Show,
     SimpleShowLayout,
     TextField,
     DateField,
     SingleFieldList,
     ChipField,
-    EditButton,
 } from 'react-admin';
-import { ReferenceManyToManyField } from '@react-admin/ra-many-to-many';
+import { ReferenceManyToManyField } from '@react-admin/ra-relationships';
 
-export const BookShow = props => (
-    <Show {...props}>
+export const BookShow = () => (
+    <Show>
         <SimpleShowLayout>
             <TextField source="title" />
             <DateField source="publication_date" />
-            <ReferenceManyToManyField 
+            <ReferenceManyToManyField
                 reference="authors"
                 through="book_authors"
                 using="book_id,author_id"
@@ -55,4 +53,4 @@ This example uses the following schema:
 └──────────────────┘       └──────────────┘      └───────────────┘
 ```
 
-Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/modules/ra-relationships) for more details.
+Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanytomanyfield) for more details.
diff --git a/docs/ReferenceManyToManyInput.md b/docs/ReferenceManyToManyInput.md
index ed071b36bc4..c06d0db84e6 100644
--- a/docs/ReferenceManyToManyInput.md
+++ b/docs/ReferenceManyToManyInput.md
@@ -19,36 +19,21 @@ In this example, `artists.id` matches `performances.artist_id`, and `performance
 └────────────┘       └──────────────┘      └────────┘
 ```
 
-The form displays the events name in a `<SelectArrayInput>`:
+The form displays the events name in a [`<SelectArrayInput>`](./SelectArrayInput.md):
 
 ```jsx
-import * as React from 'react';
-import { Edit, SelectArrayInput, SimpleForm, TextInput } from 'react-admin';
-import { ReferenceManyToManyInput, useReferenceManyToManyUpdate } from '@react-admin/ra-many-to-many';
-
-/**
- * Decorate <SimpleForm> to override the default save function.
- * This is necessary to save changes in the associative table
- * only on submission.
- */
-const ArtistEditForm = props => {
-    const save = useReferenceManyToManyUpdate({
-        record: props.record,
-        redirect: props.redirect || 'list',
-        reference: 'events',
-        resource: props.resource,
-        source: 'id',
-        through: 'performances',
-        undoable: props.undoable,
-        using: 'artist_id,event_id',
-    });
-
-    return <SimpleForm {...props} save={save} />;
-};
-
-const ArtistEdit = () => (
+import {
+    Edit,
+    SelectArrayInput,
+    SimpleForm,
+    TextInput,
+    required,
+} from 'react-admin';
+import { ReferenceManyToManyInput } from '@react-admin/ra-relationships';
+
+export const ArtistEdit = () => (
     <Edit>
-        <ArtistEditForm>
+        <SimpleForm>
             <TextInput disabled source="id" />
             <TextInput source="first_name" />
             <TextInput source="last_name" />
@@ -57,16 +42,18 @@ const ArtistEdit = () => (
                 reference="events"
                 through="performances"
                 using="artist_id,event_id"
-                fullWidth
-                label="Performances"
             >
-                <SelectArrayInput optionText="name" />
+                <SelectArrayInput
+                    label="Performances"
+                    // Validation must be set on this component
+                    validate={required()}
+                    optionText="name"
+                    fullWidth
+                />
             </ReferenceManyToManyInput>
-        </ArtistEditForm>
+        </SimpleForm>
     </Edit>
 );
-
-export default ArtistEdit;
 ```
 
 Check [the `ra-relationships` documentation](https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanytomanyinput) for more details.
diff --git a/docs/TreeWithDetails.md b/docs/TreeWithDetails.md
index 70bc81a9651..45799a2f654 100644
--- a/docs/TreeWithDetails.md
+++ b/docs/TreeWithDetails.md
@@ -15,13 +15,24 @@ This component allows users to browse, edit, and rearrange trees.
 
 ```jsx
 // in src/category.js
-import * as React from 'react';
-import { Admin, Resource, TextInput } from 'react-admin';
-import { CreateNode, EditNode, SimpleForm, TreeWithDetails } from '@react-admin/ra-tree';
+import {
+    Admin,
+    Resource,
+    Create,
+    Edit,
+    SimpleForm,
+    TextInput,
+} from 'react-admin';
+import {
+    CreateNode,
+    EditNode,
+    EditNodeToolbar,
+    TreeWithDetails,
+} from '@react-admin/ra-tree';
 
 // a Create view for a tree uses <CreateNode> instead of the standard <Create>
-const CategoriesCreate = props => (
-    <CreateNode {...props}>
+const CategoriesCreate = () => (
+    <CreateNode>
         <SimpleForm>
             <TextInput source="name" />
         </SimpleForm>
@@ -29,35 +40,27 @@ const CategoriesCreate = props => (
 );
 
 // an Edit view for a tree uses <EditNode> instead of the standard <Edit>
-const CategoriesEdit = props => (
-    <EditNode {...props}>
-        <SimpleForm>
+const CategoriesEdit = () => (
+    <EditNode>
+        <SimpleForm toolbar={<EditNodeToolbar />}>
             <TextInput source="title" />
         </SimpleForm>
     </EditNode>
-)
+);
 
 // a List view for a tree uses <TreeWithDetails>
-export const CategoriesList = props => (
-    <TreeWithDetails 
-        create={CategoriesCreate}
-        edit={CategoriesEdit}
-        {...props}
-    />
+export const CategoriesList = () => (
+    <TreeWithDetails create={CategoriesCreate} edit={CategoriesEdit} />
 );
 
 // in src/App.js
 import { CategoriesList } from './category';
 
 const App = () => (
-    <Admin
-        dataProvider={dataProvider}
-        i18nProvider={i18nProvider}
-        locale="en"
-    >
+    <Admin dataProvider={dataProvider}>
         <Resource list={CategoriesList} />
     </Admin>
-)
+);
 ```
 
-Check [the `ra-tree` documentation](https://marmelab.com/ra-enterprise/modules/ra-tree) for more details.
+Check [the `ra-tree` documentation](https://marmelab.com/ra-enterprise/modules/ra-tree#treewithdetails-component) for more details.
diff --git a/docs/WizardForm.md b/docs/WizardForm.md
index 4a2e9565605..0f8a7504e5b 100644
--- a/docs/WizardForm.md
+++ b/docs/WizardForm.md
@@ -10,7 +10,6 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 ![WizardForm](https://marmelab.com/ra-enterprise/modules/assets/ra-wizard-form-overview.gif)
 
 ```jsx
-import * as React from 'react';
 import { Create, TextInput, required } from 'react-admin';
 import { WizardForm, WizardFormStep } from '@react-admin/ra-form-layout';
 
@@ -31,4 +30,4 @@ const PostCreate = () => (
 );
 ```
 
-Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout) for more details.
+Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/modules/ra-form-layout#wizardform) for more details.