ggwork · pull · Aug 4, 2024 · Jul 23, 2024 · Jul 23, 2024 · Jul 23, 2024
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## v5.1.1
+
+* Fix `<TranslatableInputs>` throws error when used with null value ([#10125](https://github.com/marmelab/react-admin/pull/10125)) ([glauff](https://github.com/glauff))
+* Fix `ListContext.setSort` ignores the sort order when the chosen field is the current one ([#10114](https://github.com/marmelab/react-admin/pull/10114)) ([adguernier](https://github.com/adguernier))
+* Fix `<Datagrid rowClick>` is called on mount ([#10102](https://github.com/marmelab/react-admin/pull/10102)) ([djhi](https://github.com/djhi))
+* Fix `<SimpleFormIterator>` adds a left padding when there is no label ([#10092](https://github.com/marmelab/react-admin/pull/10092)) ([fzaninotto](https://github.com/fzaninotto))
+* Fix `<DateInput>` and `<DateTimeInput>` do not handle partial values correctly on Firefox ([#9543](https://github.com/marmelab/react-admin/pull/9543)) ([arimet](https://github.com/arimet))
+
 ## v5.1.0
 
 * Update `<SelectInput>` to support an array of strings as choices ([#10038](https://github.com/marmelab/react-admin/pull/10038)) ([fzaninotto](https://github.com/fzaninotto))

diff --git a/docs/UrlField.md b/docs/UrlField.md
@@ -5,11 +5,20 @@ title: "The UrlField Component"
 
 # `<UrlField>`
 
-
 `<UrlField>` displays a url in a Material UI's `<Link href="" />` component.
 
 ```jsx
 import { UrlField } from 'react-admin';
 
 <UrlField source="site_url" />
 ```
+
+## `content`
+
+You can customize the content of the link by passing a string as the `content` prop.
+
+```jsx
+import { UrlField } from 'react-admin';
+
+<UrlField source="site_url" content="Visit site" />
+```
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -95,15 +95,6 @@
                 font-family: 'Helvetica', sans-serif;
                 color: #c0ccda;
             }
-
-            #closeBanner {
-                cursor: pointer;
-            }
-            @media screen and (max-width: 576px) {
-                #closeBanner {
-                    display: none;
-                }
-            }
         </style>
         <link
             rel="stylesheet"
@@ -113,37 +104,6 @@
 
     <body>
         <header>
-            <span
-                id="banner"
-                style="
-                    background-color: #db2777;
-                    padding: 3px;
-                    text-align: center;
-                    color: #fff;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    gap: 0.5rem;
-                    padding: 0.75rem;
-                "
-            >
-                <span aria-hidden="true" id="randomEmoji"></span>
-                <span style="text-align: center">
-                    📣 React-admin v5 is here! Read the
-                    <a
-                        style="text-decoration: underline; color: #fff"
-                        href="https://marmelab.com/blog/2024/06/20/react-admin-v5.html"
-                        >announcement blog post</a
-                    >. 📣
-                </span>
-                <span
-                    id="closeBanner"
-                    aria-label="Close"
-                    style="position: absolute; right: 10px"
-                >
-                    <span aria-hidden="true">X</span>
-                </span>
-            </span>
             {% include nav.html %}
             <ul id="slide-out" class="sidenav sidenav-fixed">
                 <li class="logo">
@@ -238,20 +198,5 @@
             defer
             src="https://unpkg.com/prettier@2.8.8/parser-babel.js"
         ></script>
-        <script>
-            function hideBanner() {
-                const banner = document.getElementById('banner');
-                if (banner) {
-                    banner.style.display = 'none';
-                }
-            }
-            const closeBanner = document.getElementById('closeBanner');
-            if (closeBanner) {
-                closeBanner.addEventListener('click', e => {
-                    e.preventDefault();
-                    hideBanner();
-                });
-            }
-        </script>
     </body>
 </html>
diff --git a/docs/documentation.html b/docs/documentation.html
@@ -88,14 +88,6 @@
                 font-family: 'Helvetica', sans-serif;
                 color: #c0ccda;
             }
-            #closeBanner {
-                cursor: pointer;
-            }
-            @media screen and (max-width: 576px) {
-                #closeBanner {
-                    display: none;
-                }
-            }
         </style>
         <link
             rel="stylesheet"
@@ -105,37 +97,6 @@
 
     <body>
         <header>
-            <span
-                id="banner"
-                style="
-                    background-color: #db2777;
-                    padding: 3px;
-                    text-align: center;
-                    color: #fff;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    gap: 0.5rem;
-                    padding: 0.75rem;
-                "
-            >
-                <span aria-hidden="true" id="randomEmoji"></span>
-                <span style="text-align: center">
-                    📣 React-admin v5 is here! Read the
-                    <a
-                        style="text-decoration: underline; color: #fff"
-                        href="https://marmelab.com/blog/2024/06/20/react-admin-v5.html"
-                        >announcement blog post</a
-                    >. 📣
-                </span>
-                <span
-                    id="closeBanner"
-                    aria-label="Close"
-                    style="position: absolute; right: 10px"
-                >
-                    <span aria-hidden="true">X</span>
-                </span>
-            </span>
             {% include nav.html %}
             <ul id="slide-out" class="sidenav sidenav-fixed">
                 <li class="logo">
@@ -391,20 +352,5 @@ <h2>Recipes</h2>
             defer
             src="https://unpkg.com/prettier@2.8.8/parser-babel.js"
         ></script>
-        <script>
-            function hideBanner() {
-                const banner = document.getElementById('banner');
-                if (banner) {
-                    banner.style.display = 'none';
-                }
-            }
-            const closeBanner = document.getElementById('closeBanner');
-            if (closeBanner) {
-                closeBanner.addEventListener('click', e => {
-                    e.preventDefault();
-                    hideBanner();
-                });
-            }
-        </script>
     </body>
 </html>
diff --git a/examples/crm/README.md b/examples/crm/README.md
@@ -4,7 +4,7 @@ This is a demo of the [react-admin](https://github.com/marmelab/react-admin) lib
 
 https://user-images.githubusercontent.com/99944/116970434-4a926480-acb8-11eb-8ce2-0602c680e45e.mp4
 
-React-admin usually requires a REST/GraphQL server to provide data. In this demo however, the API is simulated by the browser (using [FakeRest](https://github.com/marmelab/FakeRest)). The source data is generated at runtime by a package called [data-generator](https://github.com/marmelab/react-admin/tree/master/examples/data-generator).
+React-admin usually requires a REST/GraphQL server to provide data. In this demo, however, the API is simulated by the browser (using [FakeRest](https://github.com/marmelab/FakeRest)). The source data is generated at runtime by a package called [data-generator](https://github.com/marmelab/react-admin/tree/master/examples/data-generator).
 
 To explore the source code, start with [src/App.tsx](https://github.com/marmelab/react-admin/blob/master/examples/crm/src/App.tsx).
 
@@ -50,3 +50,123 @@ Your app is ready to be deployed!
 ### `npm run deploy`
 
 Deploy the build to GitHub gh-pages.
+
+## Customizing
+
+You can customize the title, logo, theme, and domain of the CRM app by passing custom props to the `<CRM>` component:
+
+```tsx
+// App.tsx
+import React from 'react';
+import CRM from './CRM';
+
+const App = () => (
+    <CRM 
+        title="Custom CRM Title" 
+        logo="custom-logo.png" 
+    />
+);
+
+export default App;
+```
+
+## Domain & Process
+
+In addition to the design, you can easily customize various aspects relevant to your business domain. The behavior is the same as described above. You can modify the following:
+
+| Props                 | Description                                                           | Type            |
+|-----------------------|-----------------------------------------------------------------------|-----------------|
+| contactGender         | The gender options for contacts used in the application.              | ContactGender[] |
+| companySectors        | The list of company sectors used in the application.                  |  string[]       |
+| darkTheme             | The theme to use when the application is in dark mode.                | RaThemeOptions  |
+| dealCategories        | The categories of deals used in the application.                      | string[]        |
+| dealPipelineStatuses  | The statuses of deals in the pipeline used in the application         | string[]        |
+| dealStages            | The stages of deals used in the application.                          | DealStage[]     |
+| lightTheme            | The theme to use when the application is in light mode.               | RaThemeOptions  |
+| logo                  | The logo used in the CRM application.                                 | string          |
+| noteStatuses          | The statuses of notes used in the application.                        | NoteStatus[]    |
+| taskTypes             | The types of tasks used in the application.                           | string[]        |
+| title                 | The title of the CRM application.                                     | string          |
+
+```tsx
+import { CRM } from './root/CRM';
+import { ThemeOptions } from '@mui/material/styles';
+
+const lightTheme: ThemeOptions = {
+    palette: {
+        mode: 'light',
+    },
+};
+
+const darkTheme: ThemeOptions = {
+    palette: {
+        mode: 'dark',
+    },
+};
+
+const App = () => {
+    return (
+        <CRM
+            contactGender={[
+                { value: 'male', label: 'He' },
+                { value: 'female', label: 'She' },
+            ]}
+            companySectors={['Technology', 'Finance']}
+            darkTheme={darkTheme}
+            dealCategories={['Copywriting', 'Design']}
+            dealPipelineStatuses={['won']}
+            dealStages={[
+                { value: 'opportunity', label: 'Opportunity' },
+                { value: 'proposal-sent', label: 'Proposal Sent' },
+                { value: 'won', label: 'Won' },
+                { value: 'lost', label: 'Lost' },
+            ]}
+            lightTheme={lightTheme}
+            logo="https://example.com/logo.png"
+            noteStatuses={[
+                { value: 'cold', label: 'Cold', color: '#7dbde8' },
+                { value: 'warm', label: 'Warm', color: '#e8cb7d' },
+                { value: 'hot', label: 'Hot', color: '#e88b7d' },
+            ]}
+            taskTypes={['Call', 'Email', 'Meeting']}
+            title="CRM Dashboard"
+        />
+    );
+};
+
+export default App;
+```
+
+## Adding Sales
+
+To add a new sale to the CRM, you need to use an administrator account. By default, the first account created has this role. If you are starting fresh, a sign-up page will prompt you to create this admin account.
+
+When logged in as an admin, an 'Account Manager' tab will be available. From this page, you can create sales and transfer the administrator role.
+
+![Adding sales](./public/img/adding-sales.png "Adding sales")
+
+
+## Customizing the Homepage
+
+The first page of the application is managed by the `Dashboard.tsx` component. You can customize it by updating this file.
+
+```jsx
+// ./src/dashboard/Dashboard.tsx
+import React from 'react';
+import { Card, CardContent, Typography } from '@mui/material';
+
+export const Dashboard = () => {
+    return (
+        <Card>
+            <CardContent>
+                <Typography variant="h5" component="div">
+                    Welcome to the Custom Dashboard!
+                </Typography>
+                <Typography variant="body2" color="text.secondary">
+                    This is a customized homepage for your application. You can add any components or content here to suit your needs.
+                </Typography>
+            </CardContent>
+        </Card>
+    );
+};
+```
diff --git a/examples/crm/package.json b/examples/crm/package.json
@@ -13,9 +13,11 @@
         "date-fns": "^3.6.0",
         "faker": "~5.4.0",
         "lodash": "~4.17.5",
+        "papaparse": "^5.4.1",
         "ra-data-fakerest": "^5.0.0",
         "react": "^18.3.1",
         "react-admin": "^5.0.0",
+        "react-cropper": "^2.3.3",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.0.3",
         "react-router": "^6.22.0",
@@ -29,6 +31,7 @@
         "@types/jest": "^29.5.2",
         "@types/jsonexport": "^3.0.5",
         "@types/lodash": "~4.14.168",
+        "@types/papaparse": "^5",
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.2.1",

diff --git a/examples/crm/public/img/adding-sales.png b/examples/crm/public/img/adding-sales.png