[Doc] Add example showing how to add <Inspector> to a custom layout

docs/Configurable.md

@@ -214,3 +214,53 @@ const MyAppBar = () => (
     </AppBar>
 );
 ```
+
+## `<Inspector>`
+
+The `<Inspector>` component exists within the layouts provided by react-admin. If you are using a custom layout then you should add the `<Inspector>` component within your layout 
+
+{% raw %}
+```jsx
+// in src/MyLayout.js
+import * as React from 'react';
+import { Box } from '@mui/material';
+import { AppBar, Menu, Sidebar, InspectorButton } from 'react-admin';
+
+const MyLayout = ({ children, dashboard }) => (
+    <Box 
+        display="flex"
+        flexDirection="column"
+        zIndex={1}
+        minHeight="100vh"
+        backgroundColor="theme.palette.background.default"
+        position="relative"
+    >
+        <Box
+            display="flex"
+            flexDirection="column"
+            overflowX="auto"
+        >
+            <AppBar />
+            <Box display="flex" flexGrow={1}>
+                <Sidebar>
+                    <Menu hasDashboard={!!dashboard} />
+                </Sidebar>
+                <Box
+                    display="flex"
+                    flexDirection="column"
+                    flexGrow={2}
+                    p={3}
+                    marginTop="4em"
+                    paddingLeft={5}
+                >
+                    {children}
+                </Box>
+            </Box>
+        </Box>
+        <InspectorButton />
+    </Box>
+);
+
+export default MyLayout;
+```
+{% endraw %}

docs/WrapperField.md

@@ -5,7 +5,8 @@ title: "The WrapperField Component"
 
 # `<WrapperField>`
 
-This component simply renders its children. Why would you want to use such a dumb component? To combine several fields in a single cell (in a `<Datagrid>`) or in a single row (in a `<SimpleShowLayout>`). 
+This component simply renders its children. Why would you want to use such a dumb component? To combine several fields in a single cell (in a `<Datagrid>`) or in a single row (in a `<SimpleShowLayout>`) or 
+a group of form fields (in a `<SimpleFormConfigurable>`) 
 
 `<WrapperField>` allows to define the `label` and sort field for a combination of fields:
 
@@ -25,4 +26,25 @@ const BookList = () => (
 );
 ```
 
+```jsx
+import {Edit, WrapperField, TextInput} from 'react-admin';
+import {SimpleFormConfigurable} from "./SimpleFormConfigurable";
+import { Stack } from '@mui/material';
+
+const CustomForm = () => (
+    <Edit>
+        <SimpleFormConfigurable>
+            <TextInput source="title"/>
+            <WrapperField source="author">
+                <Stack>
+                    <TextInput source="author_first_name"/>
+                    <TextInput source="author_last_name"/>
+                </Stack>
+            </WrapperField>
+        </SimpleFormConfigurable>
+    </Edit>
+);
+```
+
+
 **Tip**: If you just want to combine two fields in a string, check  [the `<FunctionField>` component](./FunctionField.md) instead.