Integrate Toolpad Core in Toolpad Studio runtime

packages/toolpad-core/package.json

@@ -61,7 +61,7 @@
     "@toolpad/utils": "workspace:*",
     "client-only": "^0.0.1",
     "invariant": "2.2.4",
-    "path-to-regexp": "6.2.2",
+    "path-to-regexp": "7.1.0",
     "prop-types": "15.8.1"
   },
   "devDependencies": {
@@ -76,18 +76,23 @@
     "next": "^14.2.11",
     "next-router-mock": "^0.9.13",
     "playwright": "^1.46.1",
+    "react-router-dom": "6.26.2",
     "sinon": "^18.0.1",
     "vitest": "2.1.1"
   },
   "peerDependencies": {
     "@mui/icons-material": "5 - 6",
     "@mui/material": "5 - 6",
     "next": "^14",
-    "react": "^18"
+    "react": "^18",
+    "react-router-dom": "^6"
   },
   "peerDependenciesMeta": {
     "next": {
       "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
     }
   },
   "sideEffects": false,

packages/toolpad-core/src/DashboardLayout/DashboardLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { styled, useTheme, type Theme } from '@mui/material';
+import { styled, useTheme, type Theme, SxProps } from '@mui/material';
 import MuiAppBar from '@mui/material/AppBar';
 import Avatar from '@mui/material/Avatar';
 import Box from '@mui/material/Box';
@@ -357,6 +357,10 @@ export interface DashboardLayoutProps {
     toolbarActions?: {};
     toolbarAccount?: AccountProps;
   };
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
 }
 
 /**
@@ -370,7 +374,7 @@ export interface DashboardLayoutProps {
  * - [DashboardLayout API](https://mui.com/toolpad/core/api/dashboard-layout)
  */
 function DashboardLayout(props: DashboardLayoutProps) {
-  const { children, disableCollapsibleSidebar = false, slots, slotProps } = props;
+  const { children, disableCollapsibleSidebar = false, slots, slotProps, sx } = props;
 
   const theme = useTheme();
 
@@ -517,7 +521,7 @@ function DashboardLayout(props: DashboardLayoutProps) {
   const ToolbarAccountSlot = slots?.toolbarAccount ?? Account;
 
   return (
-    <Box sx={{ display: 'flex' }}>
+    <Box sx={{ ...sx, display: 'flex' }}>
       <AppBar color="inherit" position="fixed">
         {
           // TODO: (minWidth: 100vw) Temporary fix to issue reported in https://github.com/mui/material-ui/issues/43244

packages/toolpad-core/src/react-router-dom/AppProvider.test.tsx

@@ -0,0 +1,36 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import * as React from 'react';
+import { describe, test, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { AppProvider } from './AppProvider';
+import { Router } from '../AppProvider';
+
+interface RouterTestProps {
+  children: React.ReactNode;
+}
+
+function RouterTest({ children }: RouterTestProps) {
+  const [pathname, setPathname] = React.useState('/page');
+
+  const router = React.useMemo<Router>(() => {
+    return {
+      pathname,
+      searchParams: new URLSearchParams(),
+      navigate: (path) => setPathname(String(path)),
+    };
+  }, [pathname]);
+
+  return <AppProvider router={router}>{children}</AppProvider>;
+}
+
+describe('React Router DOM AppProvider', () => {
+  test('renders content correctly', async () => {
+    // placeholder test
+    render(<RouterTest>Hello</RouterTest>);
+
+    expect(screen.getByText('Hello')).toBeTruthy();
+  });
+});

packages/toolpad-core/src/react-router-dom/AppProvider.tsx

@@ -0,0 +1,39 @@
+'use client';
+import * as React from 'react';
+import { useSearchParams, useLocation, useNavigate } from 'react-router-dom';
+import  { AppProvider as AppProviderComponent, type AppProviderProps, Navigate, Router } from '../AppProvider';
+
+/**
+ * @ignore - internal component.
+ */
+function AppProvider(props: AppProviderProps) {
+  const { pathname } = useLocation();
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  const navigateImpl = React.useCallback<Navigate>(
+    (url, { history = 'auto' } = {}) => {
+      if (history === 'auto' || history === 'push') {
+        return navigate(url);
+      }
+      if (history === 'replace') {
+        return navigate(url, { replace: true });
+      }
+      throw new Error(`Invalid history option: ${history}`);
+    },
+    [navigate],
+  );
+
+  const routerImpl = React.useMemo<Router>(
+    () => ({
+      pathname,
+      searchParams,
+      navigate: navigateImpl,
+    }),
+    [pathname, searchParams, navigateImpl],
+  );
+
+  return <AppProviderComponent router={routerImpl} {...props} />;
+}
+
+export { AppProvider };

packages/toolpad-core/src/react-router-dom/index.tsx

@@ -0,0 +1 @@
+export * from './AppProvider';

packages/toolpad-studio/package.json

@@ -77,6 +77,7 @@
     "@mui/x-tree-view": "7.17.0",
     "@tanstack/react-query": "5.56.2",
     "@tanstack/react-query-devtools": "5.56.2",
+    "@toolpad/core": "workspace:*",
     "@toolpad/studio-components": "workspace:*",
     "@toolpad/studio-runtime": "workspace:*",
     "@toolpad/utils": "workspace:*",