docs: add empty with translate story component

Author: ogustavo-pereira

packages/ra-ui-materialui/src/field/ReferenceField.stories.tsx

@@ -7,10 +7,13 @@ import {
     ResourceDefinitionContextProvider,
     ListContextProvider,
     useRecordContext,
+    I18nContextProvider,
 } from 'ra-core';
 import { createMemoryHistory } from 'history';
 import { ThemeProvider, Stack } from '@mui/material';
 import { createTheme } from '@mui/material/styles';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
 
 import { TextField } from '../field';
 import { ReferenceField } from './ReferenceField';
@@ -19,6 +22,25 @@ import { Datagrid } from '../list/datagrid/Datagrid';
 
 export default { title: 'ra-ui-materialui/fields/ReferenceField' };
 
+const i18nProvider = polyglotI18nProvider(
+    _locale => ({
+        ...englishMessages,
+        resources: {
+            books: {
+                name: 'Books',
+                fields: {
+                    id: 'Id',
+                    title: 'Title',
+                    author: 'Author',
+                    year: 'Year',
+                },
+                not_found: 'Not found',
+            },
+        },
+    }),
+    'en'
+);
+
 const history = createMemoryHistory({ initialEntries: ['/books/1/show'] });
 
 const defaultDataProvider = {
@@ -81,6 +103,20 @@ export const Empty = () => (
     </Wrapper>
 );
 
+export const EmptyWithTranslate = () => (
+    <Wrapper record={{ id: 1, title: 'War and Peace' }}>
+        <I18nContextProvider value={i18nProvider}>
+            <ReferenceField
+                source="detail_id"
+                reference="book_details"
+                emptyText="resources.books.not_found"
+            >
+                <TextField source="ISBN" />
+            </ReferenceField>
+        </I18nContextProvider>
+    </Wrapper>
+);
+
 const missingReferenceDataProvider = {
     getMany: () =>
         Promise.resolve({

packages/ra-ui-materialui/src/field/ReferenceOneField.stories.tsx

@@ -7,10 +7,13 @@ import {
     ResourceDefinitionContextProvider,
     ListContextProvider,
     useRecordContext,
+    I18nContextProvider,
 } from 'ra-core';
 import { createMemoryHistory } from 'history';
 import { ThemeProvider, Stack } from '@mui/material';
 import { createTheme } from '@mui/material/styles';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
 
 import { TextField } from '../field';
 import { ReferenceOneField } from './ReferenceOneField';
@@ -19,6 +22,25 @@ import { Datagrid } from '../list/datagrid/Datagrid';
 
 export default { title: 'ra-ui-materialui/fields/ReferenceOneField' };
 
+const i18nProvider = polyglotI18nProvider(
+    _locale => ({
+        ...englishMessages,
+        resources: {
+            books: {
+                name: 'Books',
+                fields: {
+                    id: 'Id',
+                    title: 'Title',
+                    author: 'Author',
+                    year: 'Year',
+                },
+                not_found: 'Not found',
+            },
+        },
+    }),
+    'en'
+);
+
 const defaultDataProvider = {
     getManyReference: () =>
         Promise.resolve({
@@ -89,6 +111,20 @@ export const Empty = () => (
     </Wrapper>
 );
 
+export const EmptyWithTranslate = () => (
+    <Wrapper dataProvider={emptyDataProvider}>
+        <I18nContextProvider value={i18nProvider}>
+            <ReferenceOneField
+                reference="book_details"
+                target="book_id"
+                emptyText="resources.books.not_found"
+            >
+                <TextField source="ISBN" />
+            </ReferenceOneField>
+        </I18nContextProvider>
+    </Wrapper>
+);
+
 export const Link = () => (
     <Wrapper>
         <ReferenceOneField