remove mui components from ShowBase, ListBase and EditBase docs

Author: ThieryMichel

docs/EditBase.md

@@ -17,27 +17,18 @@ Contrary to [`<Edit>`](./Edit.md), it does not render the page layout, so no tit
 Use `<EditBase>` to create a custom Edition view, with exactly the content you add as child and nothing else (no title, Card, or list of actions as in the `<Edit>` component). 
 
 ```jsx
-import { EditBase, SelectInput, SimpleForm, TextInput, Title } from "react-admin";
-import { Card, CardContent, Container } from "@mui/material";
+import { EditBase, Form } from "react-admin";
 
 export const BookEdit = () => (
     <EditBase>
-        <Container>
-            <Title title="Book Edition" />
-            <Card>
-                <CardContent>
-                    <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>
-                </CardContent>
-            </Card>
-        </Container>
+        <div>
+            <h1>Book Edition</h1>
+            <div>
+                <Form>
+                    ...
+                </Form>
+            </div>
+        </div>
     </EditBase>
 );
 ```
@@ -66,18 +57,17 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr
 For instance, for the `<PostEdit>`page below:
 
 ```tsx
-import { EditBase, SimpleForm, TextInput } from 'react-admin';
+import { EditBase, Form } from 'react-admin';
 
 // Resource name is "posts"
 const PostEdit = () => (
     <EditBase>
-        <SimpleForm>
-            <TextInput source="title" />
-            <TextInput source="author" />
-            <TextInput source="published_at" />
-        </SimpleForm>
+        <Form>
+            ...
+        </Form>
     </EditBase>
 );
+
 ```
 
 `<EditBase>` will call `authProvider.canAccess()` using the following parameters:

docs/ListBase.md

@@ -19,32 +19,28 @@ You can use `ListBase` to create your own custom reusable List component, like t
 ```jsx
 import { 
     ListBase,
-    Title,
-    ListToolbar,
-    Pagination,
-    DataTable,
+    ListIterator,
 } from 'react-admin';
-import { Card } from '@mui/material';
 
 const MyList = ({ children, actions, filters, title, ...props }) => (
     <ListBase {...props}>
-        <Title title={title}/>
-        <ListToolbar
+        <h1>{title}</h1>
+        <CustomToolbar
             filters={filters}
             actions={actions}
         />
-        <Card>
+        <div>
             {children}
-        </Card>
-        <Pagination />
+        </div>
+        <CustomPagination />
     </ListBase>
 );
 
 const PostList = () => (
     <MyList title="Post List">
-        <DataTable>
+        <ListIterator>
             ...
-        </DataTable>
+        </ListIterator>
     </MyList>
 );
 ```
@@ -78,16 +74,14 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr
 For instance, for the `<PostList>` page below:
 
 ```tsx
-import { ListBase, DataTable } from 'react-admin';
+import { ListBase, ListIterator } from 'react-admin';
 
 // Resource name is "posts"
 const PostList = () => (
     <ListBase>
-        <DataTable>
-            <DataTable.Col source="title" />
-            <DataTable.Col source="author" />
-            <DataTable.Col source="published_at" />
-        </DataTable>
+        <ListIterator>
+            <CustomPostRenderer />
+        </ListIterator>
     </ListBase>
 );
 ```

docs/ShowBase.md

@@ -78,29 +78,18 @@ For instance, to display several fields in a single line, you can use Material U
 
 {% raw %}
 ```jsx
-import { ShowBase, TextField, DateField, ReferenceField, WithRecord } from 'react-admin';
-import { Grid } from '@mui/material';
+import { ShowBase, ReferenceFieldBase, WithRecord } from 'react-admin';
 import StarIcon from '@mui/icons-material/Star';
 
 const BookShow = () => (
     <ShowBase>
-        <Grid container spacing={2} sx={{ margin: 2 }}>
-            <Grid item xs={12} sm={6}>
-                <TextField label="Title" source="title" />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-                <ReferenceField label="Author" source="author_id" reference="authors">
-                    <TextField source="name" />
-                </ReferenceField>
-            </Grid>
-            <Grid item xs={12} sm={6}>
-                <DateField label="Publication Date" source="published_at" />
-            </Grid>
-            <Grid item xs={12} sm={6}>
-                <WithRecord label="Rating" render={record => <>
-                    {[...Array(record.rating)].map((_, index) => <StarIcon key={index} />)}
-                </>} />
-            </Grid>
+        <div>
+            <ReferenceFieldBase source="author_id" reference="authors">
+                ...
+            </ReferenceFieldBase>
+            <WithRecord label="Rating" render={record => <>
+                {[...Array(record.rating)].map((_, index) => <StarIcon key={index} />)}
+            </>} />
         </Grid>
     </ShowBase>
 );
@@ -170,7 +159,7 @@ You can override this behavior and pass custom side effects by providing a custo
 
 ```jsx
 import * as React from 'react';
-import { useNotify, useRefresh, useRedirect, ShowBase, SimpleShowLayout } from 'react-admin';
+import { useNotify, useRefresh, useRedirect, ShowBase } from 'react-admin';
 
 const PostShow = () => {
     const notify = useNotify();
@@ -185,9 +174,7 @@ const PostShow = () => {
 
     return (
         <ShowBase queryOptions={{ onError }}>
-            <SimpleShowLayout>
-                ...
-            </SimpleShowLayout>
+            ...
         </ShowBase>
     );
 }
@@ -228,16 +215,12 @@ If your `authProvider` implements [Access Control](./Permissions.md#access-contr
 For instance, for the `<PostShow>`page below:
 
 ```tsx
-import { ShowBase, SimpleShowLayout, TextField } from 'react-admin';
+import { ShowBase } from 'react-admin';
 
 // Resource name is "posts"
 const PostShow = () => (
     <ShowBase>
-        <SimpleShowLayout>
-            <TextField source="title" />
-            <TextField source="author" />
-            <TextField source="published_at" />
-        </SimpleShowLayout>
+        ...
     </ShowBase>
 );
 ```