[docs] Docs/demo cleanup (#4268)

mui · Oct 17, 2024 · fe34483 · fe34483
1 parent d2b6e32
commit fe34483
Show file tree

Hide file tree

Showing 115 changed files with 251 additions and 432 deletions.
diff --git a/.eslintrc.js b/.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,
+              },
+            ],
+          },
+        ],
+      },
+    },
   ],
 };
diff --git a/docs/data/toolpad/core/components/account/AccountCustom.js b/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: {

diff --git a/docs/data/toolpad/core/components/account/AccountCustom.tsx b/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: {

diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.js b/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: {

diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedIn.tsx b/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: {

diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedOut.js b/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: {

diff --git a/docs/data/toolpad/core/components/account/AccountDemoSignedOut.tsx b/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: {

diff --git a/docs/data/toolpad/core/components/account/AccountSlots.js b/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 = {

diff --git a/docs/data/toolpad/core/components/account/AccountSlots.tsx b/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 = {

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.js b/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

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx b/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

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderBasic.tsx.preview b/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>
diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.js b/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

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx b/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

diff --git a/docs/data/toolpad/core/components/app-provider/AppProviderTheme.tsx.preview b/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>
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.js b/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

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx b/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

diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutAccount.tsx.preview b/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>