Add DashboardLayout component to @toolpad/core

packages/create-toolpad-app/src/generateProject.ts

@@ -24,69 +24,13 @@ export default function generateProject(
     `;
 
   const dashboardLayoutContent = `
-    import {
-    AppBar,
-    Badge,
-    Box,
-    Container,
-    Divider,
-    Drawer,
-    IconButton,
-    List,
-    ListItemButton,
-    ListItemIcon,
-    Toolbar,
-  } from "@mui/material";
-
-  import HomeIcon from "@mui/icons-material/Home";
-  import SettingsIcon from "@mui/icons-material/Settings";
-  import NotificationsIcon from "@mui/icons-material/Notifications";
+  import { DashboardLayout } from '@toolpad/core/layout';
 
   export default function Layout({
     children,
   }: Readonly<{ children: React.ReactNode }>) {
     return (
-      <Box sx={{ display: "flex" }}>
-        <AppBar position="absolute">
-          <Toolbar sx={{ justifyContent: "flex-end" }}>
-            <IconButton color="inherit">
-              <Badge badgeContent={4} color="secondary">
-                <NotificationsIcon />
-              </Badge>
-            </IconButton>
-          </Toolbar>
-        </AppBar>
-        <Drawer variant="permanent" anchor="left">
-          <Toolbar
-            sx={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "flex-end",
-              px: [1],
-            }}
-          ></Toolbar>
-          <Divider />
-          <List component="nav">
-            <ListItemButton LinkComponent={"a"} href="/">
-              <ListItemIcon>
-                <HomeIcon />
-              </ListItemIcon>
-            </ListItemButton>
-            <ListItemButton>
-              <ListItemIcon>
-                <SettingsIcon />
-              </ListItemIcon>
-            </ListItemButton>
-          </List>
-        </Drawer>
-        <Box
-          component={"main"}
-          sx={{ flexGrow: 1, height: "100vh", overflow: "auto" }}
-        >
-          <Toolbar />
-          <Container maxWidth="lg">{children}</Container>
-        </Box>
-      </Box>
+      <DashboardLayout>{children}</DashboardLayout>
     );
   }
   `;

packages/toolpad-core/package.json

@@ -16,7 +16,6 @@
   "author": "Toolpad Team",
   "homepage": "https://github.com/mui/mui-toolpad#readme",
   "license": "MIT",
-  "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -27,9 +26,8 @@
       "import": "./dist/index.js"
     },
     "./*": {
-      "types": "./dist/*.d.ts",
-      "require": "./dist/*.cjs",
-      "default": "./dist/*.js"
+      "types": "./dist/*/index.d.ts",
+      "import": "./dist/*/index.js"
     }
   },
   "files": [
@@ -48,22 +46,25 @@
     "@mui/icons-material": "5.15.14",
     "@mui/material": "5.15.14",
     "@mui/material-nextjs": "5.15.11",
-    "next": "13.5.6",
+    "@mui/system": "5.15.14",
+    "next": "14.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@types/react": "18.2.67",
+    "@types/react": "18.2.72",
     "@types/react-dom": "18.2.22"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.15.14",
-    "@types/react": "^18.2.67",
-    "next": "^13.5.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^5",
+    "@mui/material": "^5",
+    "@mui/system": "^5",
+    "@types/react": "^18",
+    "next": "^14",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "publishConfig": {
     "access": "public"

packages/toolpad-core/src/AppProvider/AppProvider.spec.tsx → packages/toolpad-core/src/client/AppProvider/AppProvider.spec.tsx

@@ -14,7 +14,11 @@ describe('AppProvider', () => {
   test('renders content correctly', async () => {
     const theme = createTheme();
 
-    render(<AppProvider theme={theme}>hello</AppProvider>);
+    render(
+      <AppProvider theme={theme} navigation={[]}>
+        Hello world
+      </AppProvider>,
+    );
 
     expect(screen.getByText('hello')).toBeTruthy();
   });

packages/toolpad-core/src/client/AppProvider/AppProvider.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { NoSsr } from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import type { Theme } from '@emotion/react';
+import BrandingContext from '../context/BrandingContext';
+import NavigationContext from '../context/NavigationContext';
+import { Branding, Navigation } from '../../types';
+
+interface AppProviderProps {
+  children: React.ReactNode;
+  theme: Theme;
+  branding?: Branding | null;
+  navigation: Navigation;
+}
+
+export default function AppProvider({
+  children,
+  theme,
+  branding = null,
+  navigation,
+}: AppProviderProps) {
+  return (
+    <AppRouterCacheProvider options={{ enableCssLayer: true }}>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstarts an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <BrandingContext.Provider value={branding}>
+          <NavigationContext.Provider value={navigation}>
+            {/* @TODO: Can probably remove NoSsr once we have non CSS-in-JS solution. */}
+            <NoSsr>{children}</NoSsr>
+          </NavigationContext.Provider>
+        </BrandingContext.Provider>
+      </ThemeProvider>
+    </AppRouterCacheProvider>
+  );
+}

packages/toolpad-core/src/client/context/BrandingContext.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { Branding } from '../../types/Branding';
+
+const BrandingContext = React.createContext<Branding | null>(null);
+
+export default BrandingContext;

packages/toolpad-core/src/client/context/NavigationContext.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { Navigation } from '../../types/Navigation';
+
+const NavigationContext = React.createContext<Navigation>([]);
+
+export default NavigationContext;

packages/toolpad-core/src/client/index.ts

@@ -0,0 +1,3 @@
+export { default as AppProvider } from './AppProvider';
+
+export * from './layout';