[Doc] Fix ts code to js code in examples

docs/Caching.md

@@ -121,15 +121,15 @@ It's your responsibility to determine the validity date based on the API respons
 
 For instance, to have a `dataProvider` declare responses for `getOne`, `getMany`, and `getList` valid for 5 minutes, you can wrap it in the following proxy:
 
-```ts
+```js
 // in src/dataProvider.js
 import simpleRestProvider from 'ra-data-simple-rest';
 
 const dataProvider = simpleRestProvider('http://path.to.my.api/');
 
 const cacheDataProviderProxy = (dataProvider, duration =  5 * 60 * 1000) =>
     new Proxy(dataProvider, {
-        get: (target, name: string) => (resource, params) => {
+        get: (target, name) => (resource, params) => {
             if (name === 'getOne' || name === 'getMany' || name === 'getList') {
                 return dataProvider[name](resource, params).then(response => {
                     const validUntil = new Date();

docs/CreateEdit.md

@@ -898,7 +898,7 @@ import {
 import { AccordionForm, AccordionFormPanel } from '@react-admin/ra-form-layout';
 
 // don't forget the component="div" prop on the main component to disable the main Card
-const CustomerEdit: FC = props => (
+const CustomerEdit = props => (
     <Edit {...props} component="div">
         <AccordionForm autoClose>
             <AccordionFormPanel label="Identity">
@@ -944,11 +944,11 @@ 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 React, { FC } from 'react';
+import * as React from 'react';
 import { Create, TextInput, required } from 'react-admin';
 import { WizardForm, WizardFormStep } from '@react-admin/ra-form-layout';
 
-const PostCreate: FC = props => (
+const PostCreate = props => (
     <Create {...props}>
         <WizardForm>
             <WizardFormStep label="First step">
@@ -974,7 +974,7 @@ These [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon"
 ![EditDialog](https://marmelab.com/ra-enterprise/modules/assets/edit-dialog.gif)
 
 ```jsx
-import React from 'react';
+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';
 

docs/Fields.md

@@ -908,7 +908,7 @@ 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.post_id, then matching book_authors.author_id to authors.id, and then display the author last_name for each, in a <ChipField>:
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import { 
     Show,
     SimpleShowLayout,

docs/Inputs.md

@@ -1205,19 +1205,16 @@ In this example, `artists.id` matches `performances.artist_id`, and `performance
 The form displays the events name in a `<SelectArrayInput>`:
 
 ```jsx
-import React, { FC, ComponentProps } from 'react';
+import * as React from 'react';
 import { Edit, SelectArrayInput, SimpleForm, TextInput } from 'react-admin';
-
 import { ReferenceManyToManyInput, useReferenceManyToManyUpdate } from '@react-admin/ra-many-to-many';
 
-type Props = ComponentProps<typeof Edit>;
-
 /**
  * Decorate <SimpleForm> to override the default save function.
  * This is necessary to save changes in the associative table
  * only on submission.
  */
-const ArtistEditForm: FC<Props> = props => {
+const ArtistEditForm = props => {
     const save = useReferenceManyToManyUpdate({
         basePath: props.basePath,
         record: props.record,
@@ -1233,7 +1230,7 @@ const ArtistEditForm: FC<Props> = props => {
     return <SimpleForm {...props} save={save} />;
 };
 
-const ArtistEdit: FC<Props> = props => (
+const ArtistEdit = props => (
     <Edit {...props}>
         <ArtistEditForm>
             <TextInput disabled source="id" />

docs/List.md

@@ -1456,10 +1456,11 @@ Some List views don't have a natural UI for sorting - e.g. the `<SimpleList>`, o
 
 `<SortButton>` expects one prop: `fields`, the list of fields it should allows to sort on. For instance, here is how to offer a button to sort on the `reference`, `sales`, and `stock` fields:
 
-```tsx
+```jsx
+import * as React from 'react';
 import { TopToolbar, SortButton, CreateButton, ExportButton } from 'react-admin';
 
-const ListActions: FC<any> = () => (
+const ListActions = () => (
     <TopToolbar>
         <SortButton fields={['reference', 'sales', 'stock']} />
         <CreateButton basePath="/products" />
@@ -1472,7 +1473,7 @@ const ListActions: FC<any> = () => (
 
 When neither the `<Datagrid>` or the `<SortButton>` fit your UI needs, you have to write a custom sort control. As with custom filters, this boils down to grabbing the required data and callbacks from the `ListContext`. Let's use the `<SortButton>` source as an example usage of `currentSort` and `setSort`:
 
-```tsx
+```jsx
 import * as React from 'react';
 import { Button, Menu, MenuItem, Tooltip, IconButton } from '@material-ui/core';
 import SortIcon from '@material-ui/icons/Sort';
@@ -1552,7 +1553,7 @@ const SortButton = ({ fields }) => {
     </>);
 };
 
-const inverseOrder = (sort: string) => (sort === 'ASC' ? 'DESC' : 'ASC');
+const inverseOrder = sort => (sort === 'ASC' ? 'DESC' : 'ASC');
 
 export default SortButton;
 ```
@@ -2349,7 +2350,7 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 ![Editable Datagrid](https://marmelab.com/ra-enterprise/modules/assets/ra-editable-datagrid-overview.gif)
 
 ```jsx
-import React, { FC } from 'react';
+import * as React from 'react';
 import {
     List,
     TextField,
@@ -2362,7 +2363,7 @@ import {
 } from 'react-admin';
 import { EditableDatagrid, RowForm } from '@react-admin/ra-editable-datagrid';
 
-const ArtistList: FC = props => (
+const ArtistList = props => (
     <List {...props} hasCreate empty={false}>
         <EditableDatagrid
             undoable
@@ -2382,7 +2383,7 @@ const ArtistList: FC = props => (
     </List>
 );
 
-const ArtistForm: FC = props => (
+const ArtistForm = props => (
     <RowForm {...props}>
         <TextField source="id" />
         <TextInput source="firstname" validate={required()} />
@@ -2405,7 +2406,7 @@ This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" s
 
 ```jsx
 // in src/category.js
-import React from 'react';
+import * as React from 'react';
 import {
     Admin,
     Resource,
@@ -2416,7 +2417,7 @@ import {
 import { CreateNode, EditNode, SimpleForm, TreeWithDetails } from '@react-admin/ra-tree';
 
 // a Create view for a tree uses <CreateNode> instead of the standard <Create>
-const CategoriesCreate: FC = props => (
+const CategoriesCreate = props => (
     <CreateNode {...props}>
         <SimpleForm>
             <TextInput source="name" />
@@ -2425,7 +2426,7 @@ const CategoriesCreate: FC = props => (
 );
 
 // an Edit view for a tree uses <EditNode> instead of the standard <Edit>
-const CategoriesEdit = (props) => (
+const CategoriesEdit = props => (
     <EditNode {...props}>
         <SimpleForm>
             <TextInput source="title" />
@@ -2434,7 +2435,7 @@ const CategoriesEdit = (props) => (
 )
 
 // a List view for a tree uses <TreeWithDetails>
-export const CategoriesList = (props) => (
+export const CategoriesList = props => (
     <TreeWithDetails 
         create={CategoriesCreate}
         edit={CategoriesEdit}

docs/Theming.md

@@ -764,12 +764,12 @@ The `<ToggleThemeButton>` component is part of `ra-preferences`, an [Enterprise
 You can add the `<ToggleThemeButton>` to a custom App Bar:
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import { Layout, AppBar } from 'react-admin';
 import { Box, Typography } from '@material-ui/core';
 import { ToggleThemeButton } from '@react-admin/ra-preferences';
 
-const MyAppBar: FC = props => (
+const MyAppBar = props => (
     <AppBar {...props}>
         <Box flex="1">
             <Typography variant="h6" id="react-admin-title"></Typography>
@@ -778,7 +778,7 @@ const MyAppBar: FC = props => (
     </AppBar>
 );
 
-const MyLayout: FC = props => <Layout {...props} appBar={MyAppBar} />;
+const MyLayout = props => <Layout {...props} appBar={MyAppBar} />;
 ```
 
 Check [the `ra-preferences` documentation](https://marmelab.com/ra-enterprise/modules/ra-preferences#togglethemebutton-store-the-theme-in-the-preferences) for more details.

docs/Translation.md

@@ -357,7 +357,7 @@ Beware that users from all around the world may use your application, so make su
 The `<LanguageSwitcher>` component is part of `ra-preferences`, an [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> module. It displays a button in the App Bar letting users choose their preferred language, and **persists that choice in localStorage**. Users only have to set their preferred locale once per browser.
 
 ```jsx
-import React from 'react';
+import * as React from 'react';
 import { LanguageSwitcher } from '@react-admin/ra-preferences';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';