Add Next.js app router Toolpad Core playground (#3587)

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 ## Local development
 
-If you would like to hack on Toolpad Studio or want to run the latest version, you can follow these steps:
+If you would like to hack on Toolpad or want to run the latest version, you can follow these steps:
 
 _If you're looking into contributing to the docs, follow the [instructions](#building-and-running-the-documentation) down below_
 
@@ -11,7 +11,7 @@ _If you're looking into contributing to the docs, follow the [instructions](#bui
 - git
 - node.js
 
-### Running apps inside the monorepo (recommended)
+### Running Toolpad Studio apps inside the monorepo (recommended)
 
 This uses the local version of Toolpad Studio as built in the mono-repository.
 This is recommended when your app is in a folder inside of the mono-repository.
@@ -139,6 +139,34 @@ pnpm install
 
 </details>
 
+### Developing on Toolpad Core
+
+This uses the local version of Toolpad Core as built in the mono-repository, and allows for quickly testing out changes and their results.
+
+Some application examples for different JavaScript frameworks (such as Next.js, Vite…) are present in the `playground` folder that can be used to quickly develop on Toolpad Core on a live application.
+
+1. Install dependencies:
+
+ ```bash
+ pnpm install
+ ```
+
+2. Run the built-in watch mode
+
+ ```bash
+ pnpm dev
+ ```
+
+3. Run any application in the `playground` folder in development mode, such as `toolpad-core-nextjs`
+
+ ```bash
+ cd playground/toolpad-core-nextjs
+ ```
+
+ ```bash
+ pnpm dev
+ ```
+
 ## Running integration tests
 
 The playwright tests can be run in one of two modes:
@@ -198,7 +226,7 @@ Use the `--ui` flag to run the tests interactively.
 
 ## Using CodeSandbox CI
 
-Each pull request is built on [CodeSandbox CI](https://codesandbox.io/docs/learn/sandboxes/ci). As a result of that we have a published Toolpad Studio package for ever pull request. To use the package from the pull request, take the following steps:
+Each pull request is built on [CodeSandbox CI](https://codesandbox.io/docs/learn/sandboxes/ci). As a result of that we have a published Toolpad Studio package for every pull request. To use the package from the pull request, take the following steps:
 
 1. In the GitHub PR checks, locate the ci/codesandbox check and make sure it has successfully finished building. Click on "details" to open the CodeSandbox CI user interface.
 

package.json

@@ -15,7 +15,7 @@
  "markdownlint": "markdownlint-cli2 \"**/*.md\"",
  "prettier": "pretty-quick --ignore-path .eslintignore",
  "prettier:all": "prettier --write . --ignore-path .eslintignore",
- "dev": "dotenv cross-env FORCE_COLOR=1 lerna -- run dev --stream --parallel --ignore docs",
+ "dev": "dotenv cross-env FORCE_COLOR=1 lerna -- run dev --stream --parallel --ignore docs --ignore toolpad-core-nextjs",
  "docs:dev": "pnpm --filter docs dev",
  "docs:build": "pnpm --filter docs build",
  "docs:build:api:core": "tsx --tsconfig ./scripts/tsconfig.json ./scripts/docs/buildCoreApiDocs/index.ts",

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

@@ -213,7 +213,6 @@ function DashboardSidebarSubNavigation({
  ) : (
  listItem
  )}
-
  {navigationItem.children ? (
  <Collapse in={isNestedNavigationExpanded} timeout="auto" unmountOnExit>
  <DashboardSidebarSubNavigation

playground/toolpad-core-nextjs/README.md

@@ -0,0 +1,34 @@
+# Toolpad Core Playground - Next.js App Router
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

playground/toolpad-core-nextjs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

playground/toolpad-core-nextjs/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

playground/toolpad-core-nextjs/package.json

@@ -0,0 +1,23 @@
+{
+ "name": "toolpad-core-nextjs",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "lint": "next lint"
+ },
+ "dependencies": {},
+ "devDependencies": {
+ "@emotion/react": "11.11.4",
+ "@emotion/styled": "11.11.5",
+ "@mui/icons-material": "5.15.18",
+ "@mui/material": "5.15.18",
+ "@toolpad/core": "workspace:*",
+ "@types/react": "18.3.1",
+ "@types/react-dom": "18.3.0",
+ "eslint-config-next": "14.1.3",
+ "next": "14.2.3",
+ "react": "18.2.0",
+ "react-dom": "18.2.0"
+ }
+}

playground/toolpad-core-nextjs/src/app/dashboard/layout.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+
+export default function Layout(props: { children: React.ReactNode }) {
+ return <DashboardLayout>{props.children}</DashboardLayout>;
+}

playground/toolpad-core-nextjs/src/app/dashboard/orders/page.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+export default function Orders() {
+ return (
+ <Box
+ sx={{
+ my: 4,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ }}
+ >
+ <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+ Welcome to the Toolpad orders!
+ </Typography>
+ </Box>
+ );
+}

playground/toolpad-core-nextjs/src/app/dashboard/page.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+export default function Dashboard() {
+ return (
+ <Box
+ sx={{
+ my: 4,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ }}
+ >
+ <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+ Welcome to the Toolpad dashboard!
+ </Typography>
+ </Box>
+ );
+}

playground/toolpad-core-nextjs/src/app/layout.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import type { Navigation } from '@toolpad/core';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ slug: '/dashboard',
+ title: 'Dashboard',
+ icon: <DashboardIcon />,
+ },
+ {
+ slug: '/dashboard/orders',
+ title: 'Orders',
+ icon: <ShoppingCartIcon />,
+ },
+];
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+ return (
+ <html lang="en">
+ <body>
+ <AppProvider navigation={NAVIGATION}>{props.children}</AppProvider>
+ </body>
+ </html>
+ );
+}

playground/toolpad-core-nextjs/src/app/page.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+
+export default function Home() {
+ return (
+ <Box
+ sx={{
+ my: 4,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ }}
+ >
+ <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
+ Welcome to Toolpad!
+ </Typography>
+ </Box>
+ );
+}

playground/toolpad-core-nextjs/tsconfig.json

@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}