From b18549b710aab1cf3e0068c0466578984a54ce82 Mon Sep 17 00:00:00 2001 From: erwanMarmelab Date: Sun, 12 Nov 2023 12:58:59 +0100 Subject: [PATCH 1/3] adapt stories theme --- .../ra-i18n-i18next/src/index.stories.tsx | 25 +++++- .../src/detail/Show.stories.tsx | 55 ++++++++++--- .../input/ArrayInput/ArrayInput.stories.tsx | 48 ++++++++--- .../input/AutocompleteArrayInput.stories.tsx | 44 +++++++++-- .../src/input/AutocompleteInput.stories.tsx | 79 ++++++++++++++++--- .../src/input/DatagridInput.stories.tsx | 13 ++- .../src/input/ReferenceArrayInput.stories.tsx | 9 ++- .../src/input/ReferenceInput.stories.tsx | 29 ++++++- .../src/input/SelectInput.stories.tsx | 15 +++- .../src/layout/Menu.stories.tsx | 13 ++- .../src/list/List.stories.tsx | 76 +++++++++++++++--- .../src/list/filter/FilterButton.stories.tsx | 16 +++- .../list/filter/SavedQueriesList.stories.tsx | 7 +- packages/react-admin/src/Admin.stories.tsx | 11 ++- packages/react-admin/src/Resource.stories.tsx | 3 +- 15 files changed, 369 insertions(+), 74 deletions(-) diff --git a/packages/ra-i18n-i18next/src/index.stories.tsx b/packages/ra-i18n-i18next/src/index.stories.tsx index 02c255afe7b..0e219b3efbe 100644 --- a/packages/ra-i18n-i18next/src/index.stories.tsx +++ b/packages/ra-i18n-i18next/src/index.stories.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { Admin, EditGuesser, ListGuesser, Resource } from 'react-admin'; +import { defaultDarkTheme } from '../../ra-ui-materialui/src/theme/defaultTheme'; import i18n from 'i18next'; import resourcesToBackend from 'i18next-resources-to-backend'; import englishMessages from 'ra-language-english'; @@ -29,7 +30,11 @@ export const Basic = () => { return ( - + } @@ -71,7 +76,11 @@ export const WithLazyLoadedLanguages = () => { return ( - + } @@ -113,7 +122,11 @@ export const WithCustomTranslations = () => { return ( - + } @@ -153,7 +166,11 @@ export const WithCustomOptions = () => { return ( - + } diff --git a/packages/ra-ui-materialui/src/detail/Show.stories.tsx b/packages/ra-ui-materialui/src/detail/Show.stories.tsx index d2ba9e6d2c6..40d98e17351 100644 --- a/packages/ra-ui-materialui/src/detail/Show.stories.tsx +++ b/packages/ra-ui-materialui/src/detail/Show.stories.tsx @@ -9,6 +9,7 @@ import { SimpleShowLayout } from './SimpleShowLayout'; import { EditButton } from '../button'; import TopToolbar from '../layout/TopToolbar'; import { Show } from './Show'; +import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/detail/Show' }; @@ -40,7 +41,11 @@ const PostShowBasic = () => ( ); export const Basic = () => ( - + ); @@ -65,7 +70,11 @@ const PostShowWithFields = () => ( ); export const WithFields = () => ( - + ); @@ -83,7 +92,11 @@ const PostShowWithCustomActions = () => ( ); export const Actions = () => ( - + ); @@ -95,7 +108,11 @@ const PostShowWithTitle = () => ( ); export const Title = () => ( - + ); @@ -109,7 +126,11 @@ const PostShowWithAside = () => ( ); export const Aside = () => ( - + ); @@ -130,7 +151,11 @@ const PostShowWithComponent = () => ( ); export const Component = () => ( - + ); @@ -147,7 +172,11 @@ const PostShowWithStyles = () => ( ); export const SX = () => ( - + ); @@ -177,13 +206,21 @@ const PostShowWithMeta = () => ( ); export const Meta = () => ( - + ); export const Default = () => ( - + } /> ); diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx index 1ac0385db24..d9412b26d74 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx @@ -12,6 +12,7 @@ import { TextInput } from '../TextInput'; import { DateInput } from '../DateInput'; import { NumberInput } from '../NumberInput'; import { AutocompleteInput } from '../AutocompleteInput'; +import { defaultDarkTheme } from '../../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/ArrayInput' }; @@ -66,13 +67,21 @@ const BookEdit = () => { }; export const Basic = () => ( - + ); export const Disabled = () => ( - + { @@ -131,13 +140,21 @@ const BookEditWithAutocomplete = () => { }; export const AutocompleteFirst = () => ( - + ); export const Scalar = () => ( - + ( @@ -216,6 +233,7 @@ const order = { export const Realistic = () => ( Promise.resolve({ data: order }), @@ -277,6 +295,7 @@ export const Realistic = () => ( export const NestedInline = () => ( Promise.resolve({ data: order }), @@ -339,7 +358,11 @@ export const NestedInline = () => ( ); export const ActionsLeft = () => ( - + ( @@ -408,8 +431,8 @@ const BookEditGlobalValidation = () => { }} > - {/* - We still need `validate={required()}` to indicate fields are required + {/* + We still need `validate={required()}` to indicate fields are required with a '*' symbol after the label, but the real validation happens in `globalValidator` */} @@ -423,7 +446,11 @@ const BookEditGlobalValidation = () => { ); }; export const GlobalValidation = () => ( - + ); @@ -438,8 +465,8 @@ const CreateGlobalValidationInFormTab = () => { }} > - {/* - We still need `validate={required()}` to indicate fields are required + {/* + We still need `validate={required()}` to indicate fields are required with a '*' symbol after the label, but the real validation happens in `globalValidator` */} @@ -462,6 +489,7 @@ const CreateGlobalValidationInFormTab = () => { export const ValidationInFormTab = () => ( { }; export const InEdit = () => ( - + ); @@ -217,7 +222,11 @@ const BookEditCustomText = () => { }; export const CustomText = () => ( - + ); @@ -252,7 +261,11 @@ const BookEditCustomTextFunction = () => { }; export const CustomTextFunction = () => ( - + ); @@ -310,7 +323,11 @@ const BookEditCustomOptions = () => { }; export const CustomOptions = () => ( - + ); @@ -357,7 +374,11 @@ const BookEditWithCreationSupport = () => ( ); export const CreationSupport = () => ( - + ); @@ -446,7 +467,11 @@ const BookEditWithReference = () => ( ); export const InsideReferenceArrayInput = () => ( - + @@ -477,6 +502,7 @@ export const InsideReferenceArrayInputOnChange = ({ onChange = (value, records) => console.log({ value, records }), }: Pick) => ( @@ -584,7 +610,11 @@ const BookEditWithReferenceAndCreationSupport = () => ( ); export const InsideReferenceArrayInputWithCreationSupport = () => ( - + diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx index 730e9f29f70..eb7dd7ebea3 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx @@ -31,6 +31,7 @@ import { AutocompleteInput, AutocompleteInputProps } from './AutocompleteInput'; import { ReferenceInput } from './ReferenceInput'; import { TextInput } from './TextInput'; import { useCreateSuggestionContext } from './useSupportCreateSuggestion'; +import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/AutocompleteInput' }; @@ -99,7 +100,11 @@ const BookEdit = () => { }; export const Basic = () => ( - + ); @@ -113,7 +118,11 @@ export const Nullable = ({ onSuccess = console.log }) => { { id: 5, name: 'Marcel Proust' }, ]; return ( - + ( @@ -139,7 +148,11 @@ export const Nullable = ({ onSuccess = console.log }) => { export const IsLoading = () => { return ( - + ( @@ -165,7 +178,11 @@ export const OnChange = ({ { id: 5, name: 'Marcel Proust' }, ]; return ( - + ( @@ -223,7 +240,11 @@ const BookEditCustomText = () => { }; export const CustomText = () => ( - + ); @@ -258,7 +279,11 @@ const BookEditCustomTextFunction = () => { }; export const CustomTextFunction = () => ( - + ); @@ -316,7 +341,11 @@ const BookEditCustomOptions = () => { }; export const CustomOptions = () => ( - + ); @@ -366,7 +395,11 @@ const BookEditWithCreationSupport = () => ( ); export const CreationSupport = () => ( - + ); @@ -468,6 +501,7 @@ const BookEditWithReferenceAndRecordRepresentation = () => ( export const InsideReferenceInputWithRecordRepresentation = () => ( @@ -551,7 +585,11 @@ const dataProviderWithAuthors = { } as any; export const InsideReferenceInput = () => ( - + console.log({ value, record }), }: Pick) => ( @@ -625,6 +664,7 @@ export const InsideReferenceInputDefaultValue = ({ onSuccess = console.log, }) => ( @@ -664,6 +704,7 @@ export const InsideReferenceInputDefaultValue = ({ export const InsideReferenceInputWithError = () => ( Promise.reject('error'), @@ -771,7 +812,11 @@ const BookEditWithReferenceAndCreationSupport = () => ( ); export const InsideReferenceInputWithCreationSupport = () => ( - + @@ -786,7 +831,11 @@ const BookOptionText = () => { export const InsideReferenceInputWithCustomizedItemRendering = ( props: Partial ) => ( - + { export const VeryLargeOptionsNumber = () => { return ( { }; export const EmptyText = () => ( - + ); @@ -1086,6 +1140,7 @@ const dataProviderWithDifferentShapeInGetMany = { export const DifferentShapeInGetMany = () => ( diff --git a/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx b/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx index 1d2e1c78933..8d80cf9ad12 100644 --- a/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx @@ -8,6 +8,7 @@ import { SimpleForm } from '../form'; import { TextField } from '../field'; import { DatagridInput } from './DatagridInput'; import { ReferenceArrayInput } from './ReferenceArrayInput'; +import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/DatagridInput' }; @@ -60,7 +61,11 @@ const BookEdit = () => { }; export const Basic = () => ( - + ); @@ -151,7 +156,11 @@ const BookEditWithReference = () => ( ); export const InsideReferenceInput = () => ( - + diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx index e080109fed7..a69d157879b 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx @@ -15,6 +15,7 @@ import { ReferenceArrayInput } from './ReferenceArrayInput'; import { AutocompleteArrayInput } from './AutocompleteArrayInput'; import { SelectArrayInput } from './SelectArrayInput'; import { CheckboxGroupInput } from './CheckboxGroupInput'; +import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/ReferenceArrayInput' }; @@ -27,8 +28,8 @@ const tags = [ ]; const dataProvider = testDataProvider({ + // @ts-ignore getList: () => - // @ts-ignore Promise.resolve({ data: tags, total: tags.length, @@ -47,7 +48,11 @@ const i18nProvider = polyglotI18nProvider(() => englishMessages); const history = createMemoryHistory({ initialEntries: ['/posts/create'] }); export const Basic = () => ( - + ( const history = createMemoryHistory({ initialEntries: ['/books/1'] }); export const Basic = ({ dataProvider = dataProviderWithAuthors }) => ( - + @@ -288,6 +293,7 @@ const book = { export const ErrorAutocomplete = () => ( Promise.resolve({ data: book }), @@ -329,7 +335,11 @@ export const ErrorAutocomplete = () => ( ); export const WithSelectInput = ({ dataProvider = dataProviderWithAuthors }) => ( - + @@ -360,6 +370,7 @@ export const WithSelectInput = ({ dataProvider = dataProviderWithAuthors }) => ( export const ErrorSelectInput = () => ( Promise.resolve({ data: book }), @@ -398,7 +409,11 @@ export const ErrorSelectInput = () => ( ); export const WithRadioButtonGroupInput = () => ( - + @@ -429,6 +444,7 @@ export const WithRadioButtonGroupInput = () => ( export const ErrorRadioButtonGroupInput = () => ( Promise.resolve({ data: book }), @@ -498,7 +514,11 @@ const BookEditWithSelfReference = () => { }; export const SelfReference = ({ dataProvider = dataProviderWithAuthors }) => ( - + @@ -532,6 +552,7 @@ const BookEditQueryOptions = () => { export const QueryOptions = () => ( { ); }; return ( - + @@ -299,7 +304,11 @@ export const FetchChoices = () => { }; export const InsideReferenceInput = () => ( - + @@ -333,6 +342,7 @@ export const InsideReferenceInputDefaultValue = ({ onSuccess = console.log, }) => ( @@ -378,6 +388,7 @@ export const InsideReferenceInputDefaultValue = ({ export const InsideReferenceInputWithError = () => ( Promise.reject('error'), diff --git a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx index 76c6310ed2b..3455b62c209 100644 --- a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx +++ b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx @@ -25,6 +25,7 @@ import { import { MemoryRouter, Route } from 'react-router-dom'; import { Layout, Menu, Title } from '.'; +import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/layout/Menu' }; @@ -110,7 +111,11 @@ export const Custom = () => { return ( - + } /> } /> @@ -199,7 +204,11 @@ export const MenuItemChild = () => { return ( - + } /> } /> diff --git a/packages/ra-ui-materialui/src/list/List.stories.tsx b/packages/ra-ui-materialui/src/list/List.stories.tsx index af69b1f43ac..e412f8c9ba5 100644 --- a/packages/ra-ui-materialui/src/list/List.stories.tsx +++ b/packages/ra-ui-materialui/src/list/List.stories.tsx @@ -11,6 +11,7 @@ import { TextField } from '../field'; import { SearchInput, TextInput } from '../input'; import { Route } from 'react-router'; import { Link } from 'react-router-dom'; +import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/list/List' }; @@ -127,7 +128,11 @@ const BookListBasic = () => ( ); export const Basic = () => ( - + ); @@ -139,7 +144,11 @@ const BookListBasicWithCustomActions = () => ( ); export const Actions = () => ( - + ); @@ -168,7 +177,11 @@ const BookListWithFilters = () => ( ); export const Filters = () => ( - + ); @@ -180,7 +193,11 @@ const BookListWithPermanentFilter = () => ( ); export const Filter = () => ( - + ); @@ -192,7 +209,11 @@ const BookListWithCustomTitle = () => ( ); export const Title = () => ( - + ); @@ -204,7 +225,11 @@ const BookListWithCreate = () => ( ); export const HasCreate = () => ( - + ); @@ -218,7 +243,11 @@ const BookListWithAside = () => ( ); export const Aside = () => ( - + ); @@ -239,7 +268,11 @@ const BookListWithCustomComponent = () => ( ); export const Component = () => ( - + ); @@ -254,7 +287,11 @@ const CreateAuthor = () => ; const historyAuthors = createMemoryHistory({ initialEntries: ['/authors'] }); export const Empty = () => ( - + ); @@ -273,7 +310,11 @@ const BookListWithStyles = () => ( ); export const SX = () => ( - + ); @@ -298,7 +339,11 @@ const BookListWithMeta = () => ( ); export const Meta = () => ( - + ); @@ -315,7 +360,11 @@ const BookListWithDatagrid = () => ( ); export const Default = () => ( - + ); @@ -377,6 +426,7 @@ export const StoreKey = () => { history.push('/'); return ( { history.push('/'); return ( { export const ErrorInFetch = () => ( diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx index 0dd390b90b6..d4f9544d8c0 100644 --- a/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx +++ b/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx @@ -13,6 +13,7 @@ import { TopToolbar, SearchInput, } from 'react-admin'; +import { defaultDarkTheme } from '../../../src/theme/defaultTheme'; import fakerestDataProvider from 'ra-data-fakerest'; import { AutocompleteArrayInput } from '../../input'; @@ -207,7 +208,10 @@ export const Basic = (args: { disableSaveQuery?: boolean }) => { />, ]; return ( - + } @@ -221,7 +225,10 @@ export const DisabledFilters = (args: { disableSaveQuery?: boolean }) => { , ]; return ( - + } @@ -252,7 +259,10 @@ export const WithSearchInput = (args: { />, ]; return ( - + } diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx index 1e5203fd8d8..da659e06d0c 100644 --- a/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx +++ b/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx @@ -23,6 +23,7 @@ import { createMemoryHistory } from 'history'; import { SavedQueriesList } from './SavedQueriesList'; import { RaThemeOptions } from '../..'; +import { defaultDarkTheme } from '../../theme/defaultTheme'; import fakeRestProvider from 'ra-data-fakerest'; export default { title: 'ra-ui-materialui/list/filter/SavedQueriesList' }; @@ -151,7 +152,11 @@ const SongList = () => ( ); export const Basic = () => ( - + ); diff --git a/packages/react-admin/src/Admin.stories.tsx b/packages/react-admin/src/Admin.stories.tsx index 6b179dcfc74..ba1182c6ca2 100644 --- a/packages/react-admin/src/Admin.stories.tsx +++ b/packages/react-admin/src/Admin.stories.tsx @@ -3,6 +3,7 @@ import { MemoryRouter, Routes, Route, Link } from 'react-router-dom'; import { Admin } from './Admin'; import { Resource, testDataProvider } from 'ra-core'; +import { defaultDarkTheme } from 'ra-ui-materialui'; export default { title: 'react-admin/Admin', @@ -12,7 +13,7 @@ const PostList = () =>

Post List

; const CommentList = () =>

Comment List

; export const Basic = () => ( - + @@ -20,7 +21,7 @@ export const Basic = () => ( export const InsideRouter = () => ( - + @@ -44,7 +45,11 @@ export const SubPath = () => ( + diff --git a/packages/react-admin/src/Resource.stories.tsx b/packages/react-admin/src/Resource.stories.tsx index 27c0c19a1d0..13d2af8f3f5 100644 --- a/packages/react-admin/src/Resource.stories.tsx +++ b/packages/react-admin/src/Resource.stories.tsx @@ -9,6 +9,7 @@ import { EditGuesser, EditButton, useRecordContext, + defaultDarkTheme, } from './'; import fakeRestDataProvider from 'ra-data-fakerest'; import { Button } from '@mui/material'; @@ -156,7 +157,7 @@ const BookList = () => { }; export const Nested = () => ( - + } /> From 64701f8aa6de1f739befa665ccf927e662b56e1c Mon Sep 17 00:00:00 2001 From: erwanMarmelab Date: Mon, 13 Nov 2023 10:36:31 +0100 Subject: [PATCH 2/3] Revert "adapt stories theme" This reverts commit b18549b710aab1cf3e0068c0466578984a54ce82. --- .../ra-i18n-i18next/src/index.stories.tsx | 25 +----- .../src/detail/Show.stories.tsx | 55 +++---------- .../input/ArrayInput/ArrayInput.stories.tsx | 48 +++-------- .../input/AutocompleteArrayInput.stories.tsx | 44 ++--------- .../src/input/AutocompleteInput.stories.tsx | 79 +++---------------- .../src/input/DatagridInput.stories.tsx | 13 +-- .../src/input/ReferenceArrayInput.stories.tsx | 9 +-- .../src/input/ReferenceInput.stories.tsx | 29 +------ .../src/input/SelectInput.stories.tsx | 15 +--- .../src/layout/Menu.stories.tsx | 13 +-- .../src/list/List.stories.tsx | 76 +++--------------- .../src/list/filter/FilterButton.stories.tsx | 16 +--- .../list/filter/SavedQueriesList.stories.tsx | 7 +- packages/react-admin/src/Admin.stories.tsx | 11 +-- packages/react-admin/src/Resource.stories.tsx | 3 +- 15 files changed, 74 insertions(+), 369 deletions(-) diff --git a/packages/ra-i18n-i18next/src/index.stories.tsx b/packages/ra-i18n-i18next/src/index.stories.tsx index 0e219b3efbe..02c255afe7b 100644 --- a/packages/ra-i18n-i18next/src/index.stories.tsx +++ b/packages/ra-i18n-i18next/src/index.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { Admin, EditGuesser, ListGuesser, Resource } from 'react-admin'; -import { defaultDarkTheme } from '../../ra-ui-materialui/src/theme/defaultTheme'; import i18n from 'i18next'; import resourcesToBackend from 'i18next-resources-to-backend'; import englishMessages from 'ra-language-english'; @@ -30,11 +29,7 @@ export const Basic = () => { return ( - + } @@ -76,11 +71,7 @@ export const WithLazyLoadedLanguages = () => { return ( - + } @@ -122,11 +113,7 @@ export const WithCustomTranslations = () => { return ( - + } @@ -166,11 +153,7 @@ export const WithCustomOptions = () => { return ( - + } diff --git a/packages/ra-ui-materialui/src/detail/Show.stories.tsx b/packages/ra-ui-materialui/src/detail/Show.stories.tsx index 40d98e17351..d2ba9e6d2c6 100644 --- a/packages/ra-ui-materialui/src/detail/Show.stories.tsx +++ b/packages/ra-ui-materialui/src/detail/Show.stories.tsx @@ -9,7 +9,6 @@ import { SimpleShowLayout } from './SimpleShowLayout'; import { EditButton } from '../button'; import TopToolbar from '../layout/TopToolbar'; import { Show } from './Show'; -import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/detail/Show' }; @@ -41,11 +40,7 @@ const PostShowBasic = () => ( ); export const Basic = () => ( - + ); @@ -70,11 +65,7 @@ const PostShowWithFields = () => ( ); export const WithFields = () => ( - + ); @@ -92,11 +83,7 @@ const PostShowWithCustomActions = () => ( ); export const Actions = () => ( - + ); @@ -108,11 +95,7 @@ const PostShowWithTitle = () => ( ); export const Title = () => ( - + ); @@ -126,11 +109,7 @@ const PostShowWithAside = () => ( ); export const Aside = () => ( - + ); @@ -151,11 +130,7 @@ const PostShowWithComponent = () => ( ); export const Component = () => ( - + ); @@ -172,11 +147,7 @@ const PostShowWithStyles = () => ( ); export const SX = () => ( - + ); @@ -206,21 +177,13 @@ const PostShowWithMeta = () => ( ); export const Meta = () => ( - + ); export const Default = () => ( - + } /> ); diff --git a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx index d9412b26d74..1ac0385db24 100644 --- a/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ArrayInput/ArrayInput.stories.tsx @@ -12,7 +12,6 @@ import { TextInput } from '../TextInput'; import { DateInput } from '../DateInput'; import { NumberInput } from '../NumberInput'; import { AutocompleteInput } from '../AutocompleteInput'; -import { defaultDarkTheme } from '../../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/ArrayInput' }; @@ -67,21 +66,13 @@ const BookEdit = () => { }; export const Basic = () => ( - + ); export const Disabled = () => ( - + { @@ -140,21 +131,13 @@ const BookEditWithAutocomplete = () => { }; export const AutocompleteFirst = () => ( - + ); export const Scalar = () => ( - + ( @@ -233,7 +216,6 @@ const order = { export const Realistic = () => ( Promise.resolve({ data: order }), @@ -295,7 +277,6 @@ export const Realistic = () => ( export const NestedInline = () => ( Promise.resolve({ data: order }), @@ -358,11 +339,7 @@ export const NestedInline = () => ( ); export const ActionsLeft = () => ( - + ( @@ -431,8 +408,8 @@ const BookEditGlobalValidation = () => { }} > - {/* - We still need `validate={required()}` to indicate fields are required + {/* + We still need `validate={required()}` to indicate fields are required with a '*' symbol after the label, but the real validation happens in `globalValidator` */} @@ -446,11 +423,7 @@ const BookEditGlobalValidation = () => { ); }; export const GlobalValidation = () => ( - + ); @@ -465,8 +438,8 @@ const CreateGlobalValidationInFormTab = () => { }} > - {/* - We still need `validate={required()}` to indicate fields are required + {/* + We still need `validate={required()}` to indicate fields are required with a '*' symbol after the label, but the real validation happens in `globalValidator` */} @@ -489,7 +462,6 @@ const CreateGlobalValidationInFormTab = () => { export const ValidationInFormTab = () => ( { }; export const InEdit = () => ( - + ); @@ -222,11 +217,7 @@ const BookEditCustomText = () => { }; export const CustomText = () => ( - + ); @@ -261,11 +252,7 @@ const BookEditCustomTextFunction = () => { }; export const CustomTextFunction = () => ( - + ); @@ -323,11 +310,7 @@ const BookEditCustomOptions = () => { }; export const CustomOptions = () => ( - + ); @@ -374,11 +357,7 @@ const BookEditWithCreationSupport = () => ( ); export const CreationSupport = () => ( - + ); @@ -467,11 +446,7 @@ const BookEditWithReference = () => ( ); export const InsideReferenceArrayInput = () => ( - + @@ -502,7 +477,6 @@ export const InsideReferenceArrayInputOnChange = ({ onChange = (value, records) => console.log({ value, records }), }: Pick) => ( @@ -610,11 +584,7 @@ const BookEditWithReferenceAndCreationSupport = () => ( ); export const InsideReferenceArrayInputWithCreationSupport = () => ( - + diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx index eb7dd7ebea3..730e9f29f70 100644 --- a/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/AutocompleteInput.stories.tsx @@ -31,7 +31,6 @@ import { AutocompleteInput, AutocompleteInputProps } from './AutocompleteInput'; import { ReferenceInput } from './ReferenceInput'; import { TextInput } from './TextInput'; import { useCreateSuggestionContext } from './useSupportCreateSuggestion'; -import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/AutocompleteInput' }; @@ -100,11 +99,7 @@ const BookEdit = () => { }; export const Basic = () => ( - + ); @@ -118,11 +113,7 @@ export const Nullable = ({ onSuccess = console.log }) => { { id: 5, name: 'Marcel Proust' }, ]; return ( - + ( @@ -148,11 +139,7 @@ export const Nullable = ({ onSuccess = console.log }) => { export const IsLoading = () => { return ( - + ( @@ -178,11 +165,7 @@ export const OnChange = ({ { id: 5, name: 'Marcel Proust' }, ]; return ( - + ( @@ -240,11 +223,7 @@ const BookEditCustomText = () => { }; export const CustomText = () => ( - + ); @@ -279,11 +258,7 @@ const BookEditCustomTextFunction = () => { }; export const CustomTextFunction = () => ( - + ); @@ -341,11 +316,7 @@ const BookEditCustomOptions = () => { }; export const CustomOptions = () => ( - + ); @@ -395,11 +366,7 @@ const BookEditWithCreationSupport = () => ( ); export const CreationSupport = () => ( - + ); @@ -501,7 +468,6 @@ const BookEditWithReferenceAndRecordRepresentation = () => ( export const InsideReferenceInputWithRecordRepresentation = () => ( @@ -585,11 +551,7 @@ const dataProviderWithAuthors = { } as any; export const InsideReferenceInput = () => ( - + console.log({ value, record }), }: Pick) => ( @@ -664,7 +625,6 @@ export const InsideReferenceInputDefaultValue = ({ onSuccess = console.log, }) => ( @@ -704,7 +664,6 @@ export const InsideReferenceInputDefaultValue = ({ export const InsideReferenceInputWithError = () => ( Promise.reject('error'), @@ -812,11 +771,7 @@ const BookEditWithReferenceAndCreationSupport = () => ( ); export const InsideReferenceInputWithCreationSupport = () => ( - + @@ -831,11 +786,7 @@ const BookOptionText = () => { export const InsideReferenceInputWithCustomizedItemRendering = ( props: Partial ) => ( - + { export const VeryLargeOptionsNumber = () => { return ( { }; export const EmptyText = () => ( - + ); @@ -1140,7 +1086,6 @@ const dataProviderWithDifferentShapeInGetMany = { export const DifferentShapeInGetMany = () => ( diff --git a/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx b/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx index 8d80cf9ad12..1d2e1c78933 100644 --- a/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/DatagridInput.stories.tsx @@ -8,7 +8,6 @@ import { SimpleForm } from '../form'; import { TextField } from '../field'; import { DatagridInput } from './DatagridInput'; import { ReferenceArrayInput } from './ReferenceArrayInput'; -import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/DatagridInput' }; @@ -61,11 +60,7 @@ const BookEdit = () => { }; export const Basic = () => ( - + ); @@ -156,11 +151,7 @@ const BookEditWithReference = () => ( ); export const InsideReferenceInput = () => ( - + diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx index a69d157879b..e080109fed7 100644 --- a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.stories.tsx @@ -15,7 +15,6 @@ import { ReferenceArrayInput } from './ReferenceArrayInput'; import { AutocompleteArrayInput } from './AutocompleteArrayInput'; import { SelectArrayInput } from './SelectArrayInput'; import { CheckboxGroupInput } from './CheckboxGroupInput'; -import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/input/ReferenceArrayInput' }; @@ -28,8 +27,8 @@ const tags = [ ]; const dataProvider = testDataProvider({ - // @ts-ignore getList: () => + // @ts-ignore Promise.resolve({ data: tags, total: tags.length, @@ -48,11 +47,7 @@ const i18nProvider = polyglotI18nProvider(() => englishMessages); const history = createMemoryHistory({ initialEntries: ['/posts/create'] }); export const Basic = () => ( - + ( const history = createMemoryHistory({ initialEntries: ['/books/1'] }); export const Basic = ({ dataProvider = dataProviderWithAuthors }) => ( - + @@ -293,7 +288,6 @@ const book = { export const ErrorAutocomplete = () => ( Promise.resolve({ data: book }), @@ -335,11 +329,7 @@ export const ErrorAutocomplete = () => ( ); export const WithSelectInput = ({ dataProvider = dataProviderWithAuthors }) => ( - + @@ -370,7 +360,6 @@ export const WithSelectInput = ({ dataProvider = dataProviderWithAuthors }) => ( export const ErrorSelectInput = () => ( Promise.resolve({ data: book }), @@ -409,11 +398,7 @@ export const ErrorSelectInput = () => ( ); export const WithRadioButtonGroupInput = () => ( - + @@ -444,7 +429,6 @@ export const WithRadioButtonGroupInput = () => ( export const ErrorRadioButtonGroupInput = () => ( Promise.resolve({ data: book }), @@ -514,11 +498,7 @@ const BookEditWithSelfReference = () => { }; export const SelfReference = ({ dataProvider = dataProviderWithAuthors }) => ( - + @@ -552,7 +532,6 @@ const BookEditQueryOptions = () => { export const QueryOptions = () => ( { ); }; return ( - + @@ -304,11 +299,7 @@ export const FetchChoices = () => { }; export const InsideReferenceInput = () => ( - + @@ -342,7 +333,6 @@ export const InsideReferenceInputDefaultValue = ({ onSuccess = console.log, }) => ( @@ -388,7 +378,6 @@ export const InsideReferenceInputDefaultValue = ({ export const InsideReferenceInputWithError = () => ( Promise.reject('error'), diff --git a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx index 3455b62c209..76c6310ed2b 100644 --- a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx +++ b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx @@ -25,7 +25,6 @@ import { import { MemoryRouter, Route } from 'react-router-dom'; import { Layout, Menu, Title } from '.'; -import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/layout/Menu' }; @@ -111,11 +110,7 @@ export const Custom = () => { return ( - + } /> } /> @@ -204,11 +199,7 @@ export const MenuItemChild = () => { return ( - + } /> } /> diff --git a/packages/ra-ui-materialui/src/list/List.stories.tsx b/packages/ra-ui-materialui/src/list/List.stories.tsx index e412f8c9ba5..af69b1f43ac 100644 --- a/packages/ra-ui-materialui/src/list/List.stories.tsx +++ b/packages/ra-ui-materialui/src/list/List.stories.tsx @@ -11,7 +11,6 @@ import { TextField } from '../field'; import { SearchInput, TextInput } from '../input'; import { Route } from 'react-router'; import { Link } from 'react-router-dom'; -import { defaultDarkTheme } from '../theme/defaultTheme'; export default { title: 'ra-ui-materialui/list/List' }; @@ -128,11 +127,7 @@ const BookListBasic = () => ( ); export const Basic = () => ( - + ); @@ -144,11 +139,7 @@ const BookListBasicWithCustomActions = () => ( ); export const Actions = () => ( - + ); @@ -177,11 +168,7 @@ const BookListWithFilters = () => ( ); export const Filters = () => ( - + ); @@ -193,11 +180,7 @@ const BookListWithPermanentFilter = () => ( ); export const Filter = () => ( - + ); @@ -209,11 +192,7 @@ const BookListWithCustomTitle = () => ( ); export const Title = () => ( - + ); @@ -225,11 +204,7 @@ const BookListWithCreate = () => ( ); export const HasCreate = () => ( - + ); @@ -243,11 +218,7 @@ const BookListWithAside = () => ( ); export const Aside = () => ( - + ); @@ -268,11 +239,7 @@ const BookListWithCustomComponent = () => ( ); export const Component = () => ( - + ); @@ -287,11 +254,7 @@ const CreateAuthor = () => ; const historyAuthors = createMemoryHistory({ initialEntries: ['/authors'] }); export const Empty = () => ( - + ); @@ -310,11 +273,7 @@ const BookListWithStyles = () => ( ); export const SX = () => ( - + ); @@ -339,11 +298,7 @@ const BookListWithMeta = () => ( ); export const Meta = () => ( - + ); @@ -360,11 +315,7 @@ const BookListWithDatagrid = () => ( ); export const Default = () => ( - + ); @@ -426,7 +377,6 @@ export const StoreKey = () => { history.push('/'); return ( { history.push('/'); return ( { export const ErrorInFetch = () => ( diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx index d4f9544d8c0..0dd390b90b6 100644 --- a/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx +++ b/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx @@ -13,7 +13,6 @@ import { TopToolbar, SearchInput, } from 'react-admin'; -import { defaultDarkTheme } from '../../../src/theme/defaultTheme'; import fakerestDataProvider from 'ra-data-fakerest'; import { AutocompleteArrayInput } from '../../input'; @@ -208,10 +207,7 @@ export const Basic = (args: { disableSaveQuery?: boolean }) => { />, ]; return ( - + } @@ -225,10 +221,7 @@ export const DisabledFilters = (args: { disableSaveQuery?: boolean }) => { , ]; return ( - + } @@ -259,10 +252,7 @@ export const WithSearchInput = (args: { />, ]; return ( - + } diff --git a/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx b/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx index da659e06d0c..1e5203fd8d8 100644 --- a/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx +++ b/packages/ra-ui-materialui/src/list/filter/SavedQueriesList.stories.tsx @@ -23,7 +23,6 @@ import { createMemoryHistory } from 'history'; import { SavedQueriesList } from './SavedQueriesList'; import { RaThemeOptions } from '../..'; -import { defaultDarkTheme } from '../../theme/defaultTheme'; import fakeRestProvider from 'ra-data-fakerest'; export default { title: 'ra-ui-materialui/list/filter/SavedQueriesList' }; @@ -152,11 +151,7 @@ const SongList = () => ( ); export const Basic = () => ( - + ); diff --git a/packages/react-admin/src/Admin.stories.tsx b/packages/react-admin/src/Admin.stories.tsx index ba1182c6ca2..6b179dcfc74 100644 --- a/packages/react-admin/src/Admin.stories.tsx +++ b/packages/react-admin/src/Admin.stories.tsx @@ -3,7 +3,6 @@ import { MemoryRouter, Routes, Route, Link } from 'react-router-dom'; import { Admin } from './Admin'; import { Resource, testDataProvider } from 'ra-core'; -import { defaultDarkTheme } from 'ra-ui-materialui'; export default { title: 'react-admin/Admin', @@ -13,7 +12,7 @@ const PostList = () =>

Post List

; const CommentList = () =>

Comment List

; export const Basic = () => ( - + @@ -21,7 +20,7 @@ export const Basic = () => ( export const InsideRouter = () => ( - + @@ -45,11 +44,7 @@ export const SubPath = () => ( + diff --git a/packages/react-admin/src/Resource.stories.tsx b/packages/react-admin/src/Resource.stories.tsx index 13d2af8f3f5..27c0c19a1d0 100644 --- a/packages/react-admin/src/Resource.stories.tsx +++ b/packages/react-admin/src/Resource.stories.tsx @@ -9,7 +9,6 @@ import { EditGuesser, EditButton, useRecordContext, - defaultDarkTheme, } from './'; import fakeRestDataProvider from 'ra-data-fakerest'; import { Button } from '@mui/material'; @@ -157,7 +156,7 @@ const BookList = () => { }; export const Nested = () => ( - + } /> From 40d0f4e734c6a0895df24d0e765023768b2e0713 Mon Sep 17 00:00:00 2001 From: erwanMarmelab Date: Mon, 13 Nov 2023 11:17:56 +0100 Subject: [PATCH 3/3] add memoryStore to sorties who can toggle theme --- .../src/button/ToggleThemeButton.stories.tsx | 10 ++++++++-- packages/ra-ui-materialui/src/layout/Menu.stories.tsx | 4 +++- .../src/list/filter/SavedQueriesList.stories.tsx | 2 ++ 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx b/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx index 24c93fe3c34..cf7f0434118 100644 --- a/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx +++ b/packages/ra-ui-materialui/src/button/ToggleThemeButton.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { Admin } from 'react-admin'; -import { Resource } from 'ra-core'; +import { Resource, memoryStore } from 'ra-core'; import fakeRestDataProvider from 'ra-data-fakerest'; import { createMemoryHistory } from 'history'; @@ -98,6 +98,7 @@ const BookList = () => ( export const Basic = () => ( ( const MyLayout = props => ; export const Legacy = () => ( - + ); diff --git a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx index 76c6310ed2b..6f95cd03a80 100644 --- a/packages/ra-ui-materialui/src/layout/Menu.stories.tsx +++ b/packages/ra-ui-materialui/src/layout/Menu.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Resource, CustomRoutes, testDataProvider } from 'ra-core'; +import { Resource, CustomRoutes, testDataProvider, memoryStore } from 'ra-core'; import { defaultTheme, Admin, useSidebarState } from 'react-admin'; import { Typography, @@ -45,6 +45,7 @@ export const Default = () => { return ( { return ( (