Merge remote-tracking branch 'upstream/master' into patch-1

.circleci/config.yml

@@ -30,7 +30,6 @@ commands:
         type: boolean
         default: false
         description: 'Set to true if you intend to use any browser (for example with playwright).'
-
     steps:
       - when:
           condition: << parameters.browsers >>
@@ -46,7 +45,6 @@ commands:
                 name: Install pnpm package manager
                 # See https://stackoverflow.com/a/73411601
                 command: corepack enable --install-directory ~/bin
-
       - run:
           name: View install environment
           command: |
@@ -133,7 +131,6 @@ jobs:
 
   test_unit:
     <<: *default-job
-
     steps:
       - checkout
       - install_js:
@@ -154,7 +151,6 @@ jobs:
       - image: mcr.microsoft.com/playwright:v1.48.2-focal
         environment:
           NODE_ENV: test
-
     steps:
       - checkout
       - install_js:
@@ -177,7 +173,6 @@ jobs:
         environment:
           NODE_ENV: test
           TOOLPAD_TEST_RETRIES: 1
-
     steps:
       - checkout
       - install_js:
@@ -199,6 +194,16 @@ jobs:
           path: test/test-results
           destination: playwright-test-results
 
+  test_bundle_size_monitor:
+    <<: *default-job
+    steps:
+      - checkout
+      - install_js
+      - run:
+          name: Run danger on PRs
+          command: pnpm danger ci --fail-on-errors
+      # TODO test bundle size, similar to https://github.com/mui/base-ui/issues/201
+
 workflows:
   pipeline:
     jobs:
@@ -228,3 +233,7 @@ workflows:
           <<: *default-context
           requires:
             - checkout
+      - test_bundle_size_monitor:
+          <<: *default-context
+          requires:
+            - checkout

CHANGELOG.md

@@ -568,7 +568,7 @@ First components in @toolpad/core: [DashboardLayout](https://github.com/mui/tool
 
 - Lock file maintenance (#3622) @renovate[bot]
 - Lock file maintenance Examples (#3624) @renovate[bot]
-- Add Next.js app router Toolpad Core playground (#3587) @apedroferreira
+- Add Next.js App Router Toolpad Core playground (#3587) @apedroferreira
 - Isolate api-docs-builder deps @Janpot
 - isolate react-docgen @Janpot
 - Update renovate.json @Janpot

dangerfile.ts

@@ -0,0 +1,21 @@
+// danger has to be the first thing required!
+import { danger, markdown } from 'danger';
+
+function addDeployPreviewUrls() {
+  const netlifyPreview = `https://deploy-preview-${danger.github.pr.number}--mui-toolpad-docs.netlify.app/`;
+
+  markdown(`
+## Netlify deploy preview
+
+${netlifyPreview}
+`);
+}
+
+async function run() {
+  addDeployPreviewUrls();
+}
+
+run().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

docs/data/toolpad/core/components/page-container/page-container.md

@@ -71,7 +71,7 @@ function useDynamicBreadcrumbs(id: string): Breadcrumb[] {
 }
 ```
 
-For example, under the Next.js app router you would be able to obtain breadcrumbs for a dynamic route as follows:
+For example, under the Next.js App Router you would be able to obtain breadcrumbs for a dynamic route as follows:
 
 ```tsx
 // ./src/app/example/[id]/page.tsx

docs/data/toolpad/core/components/sign-in-page/sign-in-page.md

@@ -75,7 +75,7 @@ The `SignInPage` component can be set up to use [Passkeys](https://passkeys.dev)
 The [Toolpad Core Passkey example app](https://github.com/mui/mui-toolpad/tree/master/examples/core/auth-nextjs-passkey/) comes with a working app using `next-auth/webauthn`, Prisma and PostgreSQL.
 :::
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/auth-next-passkey.png", "srcDark": "/static/toolpad/docs/core/auth-next-passkey-dark.png", "alt": "Auth.js Passkeys & Next.js with Toolpad Core sign-in page", "caption": "Auth.js Passkeys & Next.js app router with Toolpad Core Sign-in page", "zoom": true,  "aspectRatio": "1.428" }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/auth-next-passkey.png", "srcDark": "/static/toolpad/docs/core/auth-next-passkey-dark.png", "alt": "Auth.js Passkeys & Next.js with Toolpad Core sign-in page", "caption": "Auth.js Passkeys & Next.js App Router with Toolpad Core Sign-in page", "zoom": true,  "aspectRatio": "1.428" }}
 
 ## Credentials
 
@@ -108,9 +108,9 @@ This renders an alert with the `error` string as the message.
 
 #### Next.js App Directory and GitHub
 
-The component is composable with any authentication library you might want to use. The following is a `SignInPage` with [Auth.js](https://authjs.dev/) using GitHub, Next.js App router and server actions.
+The component is composable with any authentication library you might want to use. The following is a `SignInPage` with [Auth.js](https://authjs.dev/) using GitHub, Next.js App Router and server actions.
 
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/auth-next.png", "srcDark": "/static/toolpad/docs/core/auth-next-dark.png", "alt": "Auth.js & Next.js with Toolpad Core sign-in page", "caption": "Auth.js & Next.js app router with Toolpad Core Sign-in page", "zoom": true, "indent": 1, "aspectRatio": "1.428" }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/auth-next.png", "srcDark": "/static/toolpad/docs/core/auth-next-dark.png", "alt": "Auth.js & Next.js with Toolpad Core sign-in page", "caption": "Auth.js & Next.js App Router with Toolpad Core Sign-in page", "zoom": true, "indent": 1, "aspectRatio": "1.428" }}
 
 #### Setting up
 
@@ -230,7 +230,7 @@ Through the `theme` prop in the [AppProvider](https://mui.com/toolpad/core/react
 {{"demo": "ThemeSignInPage.js", "iframe": true, "height": 700 }}
 
 :::info
-Find a full-fledged example using the Next.js App router, Auth.js and this theme [here](https://codesandbox.io/s/github/mui/toolpad/tree/master/examples/core/auth-nextjs-themed).
+Find a full-fledged example using the Next.js App Router, Auth.js and this theme [here](https://codesandbox.io/p/sandbox/github/mui/toolpad/tree/master/examples/core/auth-nextjs-themed).
 :::
 
 ### Slots

docs/data/toolpad/core/integrations/nextjs-approuter.md

@@ -57,7 +57,7 @@ See the [Material UI Next.js integration docs](https://mui.com/material-ui/inte
 :::
 
 :::warning
-If your app is statically rendered, you must wrap the `AppProvider` in a `Suspense` component when using the app router. See [https://github.com/mui/toolpad/issues/4524](https://github.com/mui/toolpad/issues/4524) for more information.
+If your app is statically rendered, you must wrap the `AppProvider` in a `Suspense` component when using the App Router. See [https://github.com/mui/toolpad/issues/4524](https://github.com/mui/toolpad/issues/4524) for more information.
 :::
 
 ## Create a dashboard layout

docs/data/toolpad/core/introduction/examples.md

@@ -7,12 +7,10 @@ title: Examples
 
 <p class="description">Browse a collection of Toolpad Core examples to help you get started quickly.</p>
 
-<!-- #default-branch-switch -->
+## Featured examples
 
-## Featured Examples
+{{"component": "modules/components/examples/CoreFeaturedExamples.tsx"}}
 
-{{"component": "modules/components/Examples/FeaturedExamples.tsx", "examplesFile": "core-examples.ts"}}
+## Other examples
 
-## Other Examples
-
-{{"component": "modules/components/Examples/ExamplesGrid.tsx", "examplesFile": "core-examples.ts", "reverse": true}}
+{{"component": "modules/components/examples/CoreOtherExamples.tsx"}}

docs/data/toolpad/studio/getting-started/examples-overview.md

@@ -5,12 +5,10 @@ title: Examples
 
 # Overview
 
-<p class="description">Browse our collection of Toolpad Studio examples that help you familiarise with Toolpad Studio concepts.</p>
-
-<!-- #default-branch-switch -->
+<p class="description">Browse a collection of Toolpad Studio examples that help you familiarise with Toolpad Studio concepts.</p>
 
 This collection includes apps that showcase connecting to APIs, adding custom components, adding secrets, adding authentication, working with ORMs and more.
 
 If you're interested in how we, at MUI, use Toolpad Studio to build internal apps, check out the [blog post](https://mui.com/blog/toolpad-use-cases/).
 
-{{"component": "modules/components/Examples/ExamplesGrid.tsx", "examplesFile": "studio-examples.ts"}}
+{{"component": "modules/components/examples/StudioExamples.tsx"}}

docs/data/toolpad/studio/how-to-guides/railway-deploy.md

@@ -6,7 +6,7 @@ This guide walks you through the deployment of a Toolpad Studio app from a GitHu
 
 ## Prerequisites
 
-- A [Railway](https://railway.app/) account
+- A [Railway](https://railway.com/) account
 - A [GitHub](https://github.com) account
 - A GitHub repository containing your Toolpad Studio app. Check out [pushing your Toolpad Studio app to GitHub](/toolpad/studio/how-to-guides/render-deploy/#pushing-your-toolpad-studio-app-to-github) for this step.
 

docs/package.json

@@ -5,7 +5,7 @@
   "author": "MUI Toolpad",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf docs/export && cross-env NODE_ENV=production next build --profile && pnpm build-sw",
+    "build": "rimraf ./export && cross-env NODE_ENV=production next build --profile && pnpm build-sw",
     "build:clean": "rimraf .next && pnpm build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
     "dev": "next dev --port 3003",
@@ -67,7 +67,7 @@
     "lodash": "4.17.21",
     "lz-string": "1.5.0",
     "markdown-to-jsx": "7.7.0",
-    "next": "^14.2.20",
+    "next": "^14.2.21",
     "nprogress": "0.2.0",
     "postcss": "8.4.49",
     "prismjs": "1.29.0",