[docs] Docs/demo cleanup

.eslintrc.js

@@ -2,6 +2,11 @@ const baseline = require('@mui/monorepo/.eslintrc');
 const path = require('path');
 const lodash = require('lodash');
 
+const OneLevelImportMessage = [
+ 'Prefer one level nested imports to avoid bundling everything in dev mode or breaking CJS/ESM split.',
+ 'See https://github.com/mui/material-ui/pull/24147 for the kind of win it can unlock.',
+].join('\n');
+
 const ALLOWED_LODASH_METHODS = new Set(['throttle', 'debounce', 'set']);
 
 const noRestrictedImports = {
@@ -195,5 +200,21 @@ module.exports = {
  files: ['packages/toolpad-studio/src/**/*'],
  rules: { 'react-compiler/react-compiler': 'off' },
  },
+ {
+ files: ['docs/**/*{.ts,.tsx,.js}'],
+ rules: {
+ 'no-restricted-imports': [
+ 'error',
+ {
+ paths: [
+ {
+ name: '@toolpad/core',
+ message: OneLevelImportMessage,
+ },
+ ],
+ },
+ ],
+ },
+ },
  ],
 };

docs/data/toolpad/core/components/account/AccountCustom.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
-import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
  user: {

docs/data/toolpad/core/components/account/AccountCustom.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import Typography from '@mui/material/Typography';
 import {
- Account,
  AuthenticationContext,
  SessionContext,
- Session,
-} from '@toolpad/core';
+ type Session,
+} from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
  user: {

docs/data/toolpad/core/components/account/AccountDemoSignedIn.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
  user: {

docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
- Account,
  AuthenticationContext,
  SessionContext,
- Session,
-} from '@toolpad/core';
+ type Session,
+} from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
  user: {

docs/data/toolpad/core/components/account/AccountDemoSignedOut.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
  user: {

docs/data/toolpad/core/components/account/AccountDemoSignedOut.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
- Account,
  AuthenticationContext,
  SessionContext,
- Session,
-} from '@toolpad/core';
+ type Session,
+} from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 
 const demoSession = {
  user: {

docs/data/toolpad/core/components/account/AccountSlots.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Account, AuthenticationContext, SessionContext } from '@toolpad/core';
+import { AuthenticationContext, SessionContext } from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 import CustomMenuItems from './CustomMenu';
 
 const demoSession = {

docs/data/toolpad/core/components/account/AccountSlots.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
- Account,
  AuthenticationContext,
  SessionContext,
- Session,
-} from '@toolpad/core';
+ type Session,
+} from '@toolpad/core/AppProvider';
+import { Account } from '@toolpad/core/Account';
 import CustomMenuItems from './CustomMenu';
 
 const demoSession = {

docs/data/toolpad/core/components/app-provider/AppProviderBasic.js

@@ -7,6 +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';
 
 const NAVIGATION = [
  {
@@ -64,15 +65,7 @@ DemoPageContent.propTypes = {
 function AppProviderBasic(props) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
-
- const router = React.useMemo(() => {
- return {
- pathname,
- searchParams: new URLSearchParams(),
- navigate: (path) => setPathname(String(path)),
- };
- }, [pathname]);
+ const router = useDemoRouter('/page');
 
  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;
@@ -86,7 +79,7 @@ function AppProviderBasic(props) {
  window={demoWindow}
  >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
  </AppProvider>
  // preview-end

docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx

@@ -4,9 +4,9 @@ import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
-import { AppProvider } from '@toolpad/core/AppProvider';
+import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import type { Navigation, Router } from '@toolpad/core';
+import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
  {
@@ -68,15 +68,7 @@ interface DemoProps {
 export default function AppProviderBasic(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
-
- const router = React.useMemo<Router>(() => {
- return {
- pathname,
- searchParams: new URLSearchParams(),
- navigate: (path) => setPathname(String(path)),
- };
- }, [pathname]);
+ const router = useDemoRouter('/page');
 
  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;
@@ -90,7 +82,7 @@ export default function AppProviderBasic(props: DemoProps) {
  window={demoWindow}
  >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
  </AppProvider>
  // preview-end

docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview

@@ -5,6 +5,6 @@
  window={demoWindow}
 >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
 </AppProvider>

docs/data/toolpad/core/components/app-provider/AppProviderTheme.js

@@ -7,6 +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';
 
 const NAVIGATION = [
  {
@@ -81,15 +82,7 @@ DemoPageContent.propTypes = {
 function AppProviderTheme(props) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
-
- const router = React.useMemo(() => {
- return {
- pathname,
- searchParams: new URLSearchParams(),
- navigate: (path) => setPathname(String(path)),
- };
- }, [pathname]);
+ const router = useDemoRouter('/page');
 
  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;
@@ -103,7 +96,7 @@ function AppProviderTheme(props) {
  window={demoWindow}
  >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
  </AppProvider>
  // preview-end

docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx

@@ -4,9 +4,9 @@ import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import TimelineIcon from '@mui/icons-material/Timeline';
-import { AppProvider } from '@toolpad/core/AppProvider';
+import { AppProvider, type Navigation } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import type { Navigation, Router } from '@toolpad/core';
+import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
  {
@@ -85,15 +85,7 @@ interface DemoProps {
 export default function AppProviderTheme(props: DemoProps) {
  const { window } = props;
 
- const [pathname, setPathname] = React.useState('/page');
-
- const router = React.useMemo<Router>(() => {
- return {
- pathname,
- searchParams: new URLSearchParams(),
- navigate: (path) => setPathname(String(path)),
- };
- }, [pathname]);
+ const router = useDemoRouter('/page');
 
  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;
@@ -107,7 +99,7 @@ export default function AppProviderTheme(props: DemoProps) {
  window={demoWindow}
  >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
  </AppProvider>
  // preview-end

docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview

@@ -5,6 +5,6 @@
  window={demoWindow}
 >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
 </AppProvider>

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js

@@ -6,6 +6,7 @@ import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import { AppProvider } from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION = [
  {
@@ -79,15 +80,7 @@ function DashboardLayoutAccount(props) {
  };
  }, []);
 
- const [pathname, setPathname] = React.useState('/dashboard');
-
- const router = React.useMemo(() => {
- return {
- pathname,
- searchParams: new URLSearchParams(),
- navigate: (path) => setPathname(String(path)),
- };
- }, [pathname]);
+ const router = useDemoRouter('/dashboard');
 
  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;
@@ -103,7 +96,7 @@ function DashboardLayoutAccount(props) {
  window={demoWindow}
  >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
  </AppProvider>
  // preview-end

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx

@@ -3,9 +3,13 @@ import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { createTheme } from '@mui/material/styles';
 import DashboardIcon from '@mui/icons-material/Dashboard';
-import { AppProvider } from '@toolpad/core/AppProvider';
+import {
+ AppProvider,
+ type Session,
+ type Navigation,
+} from '@toolpad/core/AppProvider';
 import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import type { Session, Router, Navigation } from '@toolpad/core';
+import { useDemoRouter } from '@toolpad/core/internal';
 
 const NAVIGATION: Navigation = [
  {
@@ -83,15 +87,7 @@ export default function DashboardLayoutAccount(props: DemoProps) {
  };
  }, []);
 
- const [pathname, setPathname] = React.useState('/dashboard');
-
- const router = React.useMemo<Router>(() => {
- return {
- pathname,
- searchParams: new URLSearchParams(),
- navigate: (path) => setPathname(String(path)),
- };
- }, [pathname]);
+ const router = useDemoRouter('/dashboard');
 
  // Remove this const when copying and pasting into your project.
  const demoWindow = window !== undefined ? window() : undefined;
@@ -107,7 +103,7 @@ export default function DashboardLayoutAccount(props: DemoProps) {
  window={demoWindow}
  >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
  </AppProvider>
  // preview-end

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx.preview

@@ -7,6 +7,6 @@
  window={demoWindow}
 >
  <DashboardLayout>
- <DemoPageContent pathname={pathname} />
+ <DemoPageContent pathname={router.pathname} />
  </DashboardLayout>
 </AppProvider>