Skip to content

[docs] Fix theme switcher in docs demos #4864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
apedroferreira merged 17 commits into from
Apr 23, 2025
Merged

[docs] Fix theme switcher in docs demos #4864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
6bdcecd
Fix theme switcher in single demo as example
apedroferreira Apr 18, 2025
aff527b
Change every demo with the help of my AI assistant
apedroferreira Apr 21, 2025
450603e
Fix AI weirdness
apedroferreira Apr 21, 2025
5d05a70
Regenerate docs
apedroferreira Apr 21, 2025
6e3b1a7
Merge remote-tracking branch 'upstream/master' into fix-theme-switche…
apedroferreira Apr 21, 2025
0c89460
Refix previews
apedroferreira Apr 21, 2025
704ed0c
Fix previews more
apedroferreira Apr 21, 2025
dafaeb8
wee
apedroferreira Apr 21, 2025
0f33a0e
Merge remote-tracking branch 'upstream/master' into fix-theme-switche…
apedroferreira Apr 22, 2025
bbc31a1
Add console warning for internal features
apedroferreira Apr 22, 2025
57af160
Don't need this anymore
apedroferreira Apr 22, 2025
20c0bd6
Merge remote-tracking branch 'upstream/master' into fix-theme-switche…
apedroferreira Apr 22, 2025
8cd7c4e
Merge branch 'master' into fix-theme-switcher-docs
apedroferreira Apr 23, 2025
7219959
Merge branch 'master' into fix-theme-switcher-docs
apedroferreira Apr 23, 2025
86c5a3a
Fix broken lockfile
apedroferreira Apr 23, 2025
24a1edd
Merge remote-tracking branch 'upstream/master' into fix-theme-switche…
apedroferreira Apr 23, 2025
c69fca7
Self-review
apedroferreira Apr 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 16 additions & 13 deletions docs/data/toolpad/core/components/app-provider/AppProviderBasic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
import TimelineIcon from '@mui/icons-material/Timeline';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { useDemoRouter } from '@toolpad/core/internal';
import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';

const NAVIGATION = [
{
Expand Down Expand Up @@ -71,18 +71,21 @@ function AppProviderBasic(props) {
const demoWindow = window !== undefined ? window() : undefined;

return (
// preview-start
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
// preview-end
// Remove this provider when copying and pasting into your project.
<DemoProvider window={demoWindow}>
{/* preview-start */}
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
{/* preview-end */}
</DemoProvider>
);
}

Expand Down
29 changes: 16 additions & 13 deletions docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
import TimelineIcon from '@mui/icons-material/Timeline';
import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { useDemoRouter } from '@toolpad/core/internal';
import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';

const NAVIGATION: Navigation = [
{
Expand Down Expand Up @@ -74,17 +74,20 @@ export default function AppProviderBasic(props: DemoProps) {
const demoWindow = window !== undefined ? window() : undefined;

return (
// preview-start
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
// preview-end
// Remove this provider when copying and pasting into your project.
<DemoProvider window={demoWindow}>
{/* preview-start */}
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
{/* preview-end */}
</DemoProvider>
);
}
29 changes: 16 additions & 13 deletions docs/data/toolpad/core/components/app-provider/AppProviderTheme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
import TimelineIcon from '@mui/icons-material/Timeline';
import { AppProvider } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { useDemoRouter } from '@toolpad/core/internal';
import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';

const NAVIGATION = [
{
Expand Down Expand Up @@ -88,18 +88,21 @@ function AppProviderTheme(props) {
const demoWindow = window !== undefined ? window() : undefined;

return (
// preview-start
<AppProvider
navigation={NAVIGATION}
router={router}
theme={customTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
// preview-end
// Remove this provider when copying and pasting into your project.
<DemoProvider window={demoWindow}>
{/* preview-start */}
<AppProvider
navigation={NAVIGATION}
router={router}
theme={customTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
{/* preview-end */}
</DemoProvider>
);
}

Expand Down
29 changes: 16 additions & 13 deletions docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import DashboardIcon from '@mui/icons-material/Dashboard';
import TimelineIcon from '@mui/icons-material/Timeline';
import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { useDemoRouter } from '@toolpad/core/internal';
import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';

const NAVIGATION: Navigation = [
{
Expand Down Expand Up @@ -91,17 +91,20 @@ export default function AppProviderTheme(props: DemoProps) {
const demoWindow = window !== undefined ? window() : undefined;

return (
// preview-start
<AppProvider
navigation={NAVIGATION}
router={router}
theme={customTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
// preview-end
// Remove this provider when copying and pasting into your project.
<DemoProvider window={demoWindow}>
{/* preview-start */}
<AppProvider
navigation={NAVIGATION}
router={router}
theme={customTheme}
window={demoWindow}
>
<DashboardLayout>
<DemoPageContent pathname={router.pathname} />
</DashboardLayout>
</AppProvider>
{/* preview-end */}
</DemoProvider>
);
}
85 changes: 44 additions & 41 deletions docs/data/toolpad/core/components/crud/CrudAdvanced.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
List,
Show,
} from '@toolpad/core/Crud';
import { useDemoRouter } from '@toolpad/core/internal';
import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';

const NAVIGATION = [
{
Expand Down Expand Up @@ -273,46 +273,49 @@ function CrudAdvanced(props) {
const editNoteId = matchPath(editPath, router.pathname);

return (
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout defaultSidebarCollapsed>
<PageContainer title={title}>
{/* preview-start */}
<CrudProvider dataSource={notesDataSource} dataSourceCache={notesCache}>
{router.pathname === listPath ? (
<List
initialPageSize={10}
onRowClick={handleRowClick}
onCreateClick={handleCreateClick}
onEditClick={handleEditClick}
/>
) : null}
{router.pathname === createPath ? (
<Create
initialValues={{ title: 'New note' }}
onSubmitSuccess={handleCreate}
resetOnSubmit={false}
/>
) : null}
{router.pathname !== createPath && showNoteId ? (
<Show
id={showNoteId}
onEditClick={handleEditClick}
onDelete={handleDelete}
/>
) : null}
{editNoteId ? (
<Edit id={editNoteId} onSubmitSuccess={handleEdit} />
) : null}
</CrudProvider>
{/* preview-end */}
</PageContainer>
</DashboardLayout>
</AppProvider>
// Remove this provider when copying and pasting into your project.
<DemoProvider window={demoWindow}>
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout defaultSidebarCollapsed>
<PageContainer title={title}>
{/* preview-start */}
<CrudProvider dataSource={notesDataSource} dataSourceCache={notesCache}>
{router.pathname === listPath ? (
<List
initialPageSize={10}
onRowClick={handleRowClick}
onCreateClick={handleCreateClick}
onEditClick={handleEditClick}
/>
) : null}
{router.pathname === createPath ? (
<Create
initialValues={{ title: 'New note' }}
onSubmitSuccess={handleCreate}
resetOnSubmit={false}
/>
) : null}
{router.pathname !== createPath && showNoteId ? (
<Show
id={showNoteId}
onEditClick={handleEditClick}
onDelete={handleDelete}
/>
) : null}
{editNoteId ? (
<Edit id={editNoteId} onSubmitSuccess={handleEdit} />
) : null}
</CrudProvider>
{/* preview-end */}
</PageContainer>
</DashboardLayout>
</AppProvider>
</DemoProvider>
);
}

Expand Down
91 changes: 47 additions & 44 deletions docs/data/toolpad/core/components/crud/CrudAdvanced.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
List,
Show,
} from '@toolpad/core/Crud';
import { useDemoRouter } from '@toolpad/core/internal';
import { DemoProvider, useDemoRouter } from '@toolpad/core/internal';

const NAVIGATION: Navigation = [
{
Expand Down Expand Up @@ -294,48 +294,51 @@ export default function CrudAdvanced(props: DemoProps) {
const editNoteId = matchPath(editPath, router.pathname);

return (
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout defaultSidebarCollapsed>
<PageContainer title={title}>
{/* preview-start */}
<CrudProvider<Note>
dataSource={notesDataSource}
dataSourceCache={notesCache}
>
{router.pathname === listPath ? (
<List<Note>
initialPageSize={10}
onRowClick={handleRowClick}
onCreateClick={handleCreateClick}
onEditClick={handleEditClick}
/>
) : null}
{router.pathname === createPath ? (
<Create<Note>
initialValues={{ title: 'New note' }}
onSubmitSuccess={handleCreate}
resetOnSubmit={false}
/>
) : null}
{router.pathname !== createPath && showNoteId ? (
<Show<Note>
id={showNoteId}
onEditClick={handleEditClick}
onDelete={handleDelete}
/>
) : null}
{editNoteId ? (
<Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
) : null}
</CrudProvider>
{/* preview-end */}
</PageContainer>
</DashboardLayout>
</AppProvider>
// Remove this provider when copying and pasting into your project.
<DemoProvider window={demoWindow}>
<AppProvider
navigation={NAVIGATION}
router={router}
theme={demoTheme}
window={demoWindow}
>
<DashboardLayout defaultSidebarCollapsed>
<PageContainer title={title}>
{/* preview-start */}
<CrudProvider<Note>
dataSource={notesDataSource}
dataSourceCache={notesCache}
>
{router.pathname === listPath ? (
<List<Note>
initialPageSize={10}
onRowClick={handleRowClick}
onCreateClick={handleCreateClick}
onEditClick={handleEditClick}
/>
) : null}
{router.pathname === createPath ? (
<Create<Note>
initialValues={{ title: 'New note' }}
onSubmitSuccess={handleCreate}
resetOnSubmit={false}
/>
) : null}
{router.pathname !== createPath && showNoteId ? (
<Show<Note>
id={showNoteId}
onEditClick={handleEditClick}
onDelete={handleDelete}
/>
) : null}
{editNoteId ? (
<Edit<Note> id={editNoteId} onSubmitSuccess={handleEdit} />
) : null}
</CrudProvider>
{/* preview-end */}
</PageContainer>
</DashboardLayout>
</AppProvider>
</DemoProvider>
);
}
Loading