How to customize Toolpad Core.
diff --git a/docs/data/toolpad/core/features/audit-logs.md b/docs/data/toolpad/core/features/audit-logs.md
index 03396b93789..bbf15d8a4a8 100644
--- a/docs/data/toolpad/core/features/audit-logs.md
+++ b/docs/data/toolpad/core/features/audit-logs.md
@@ -1,3 +1,3 @@
# Audit Logs
-Toolpad can provide access to internal events to be displayed on your dashboard as audit logs
+Toolpad can provide access to internal events to be displayed on your dashboard as audit logs.
diff --git a/docs/data/toolpad/core/features/authentication.md b/docs/data/toolpad/core/features/authentication.md
index a68f0bba2a5..befc5ff279d 100644
--- a/docs/data/toolpad/core/features/authentication.md
+++ b/docs/data/toolpad/core/features/authentication.md
@@ -1,6 +1,6 @@
# Authentication
-Toolpad provides working authentication out of the box, with support for multiple providers
+Toolpad provides working authentication out of the box, with support for multiple providers.
## Setup authentication pages
diff --git a/docs/data/toolpad/core/introduction/ReactRouter.js b/docs/data/toolpad/core/integrations/ReactRouter.js
similarity index 92%
rename from docs/data/toolpad/core/introduction/ReactRouter.js
rename to docs/data/toolpad/core/integrations/ReactRouter.js
index 7b8059c1283..8498907f251 100644
--- a/docs/data/toolpad/core/introduction/ReactRouter.js
+++ b/docs/data/toolpad/core/integrations/ReactRouter.js
@@ -4,8 +4,8 @@ import { createTheme } from '@mui/material/styles';
import Typography from '@mui/material/Typography';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import { createMemoryRouter, RouterProvider, Outlet } from 'react-router-dom';
-import { AppProvider } from '@toolpad/core/react-router-dom';
+import { createMemoryRouter, RouterProvider, Outlet } from 'react-router';
+import { ReactRouterAppProvider } from '@toolpad/core/react-router';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
@@ -67,14 +67,14 @@ function App(props) {
const { window } = props;
return (
- This guide walks you through adding Toolpad Core to an existing Next.js app.
+
+## Prerequisites
+
+Ensure that you have `@mui/material` and `next` installed. You also need the following to make the integration work correctly:
+
+ {
+ 'use server';
+ try {
+ return await signIn(provider.id, {
+ redirectTo: callbackUrl ?? '/',
+ });
+ } catch (error) {
+ // The desired flow for successful sign in in all cases
+ // and unsuccessful sign in for OAuth providers will cause a `redirect`,
+ // and `redirect` is a throwing function, so we need to re-throw
+ // to allow the redirect to happen
+ // Source: https://github.com/vercel/next.js/issues/49298#issuecomment-1542055642
+ // Detect a `NEXT_REDIRECT` error and re-throw it
+ if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
+ throw error;
+ }
+ // Handle Auth.js errors
+ if (error instanceof AuthError) {
+ return {
+ error: error.message,
+ type: error.type,
+ };
+ }
+ // An error boundary must exist to handle unknown errors
+ return {
+ error: 'Something went wrong.',
+ type: 'UnknownError',
+ };
+ }
+ }}
+ />
+ );
+}
+```
+
+### Create a route handler for sign-in
+
+`next-auth` requires a route handler for sign-in. Create a file `app/api/auth/[...nextauth]/route.ts`:
+
+```ts title="app/api/auth/[...nextauth]/route.ts"
+import { handlers } from '../../../../auth';
+
+export const { GET, POST } = handlers;
+```
+
+### Add a middleware
+
+Add a middleware to your app to protect your dashboard pages:
+
+```ts title="middleware.ts"
+export { auth as middleware } from './auth';
+
+export const config = {
+ // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
+ matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
+};
+```
+
+That's it! You now have Toolpad Core integrated into your Next.js App Router app with authentication setup:
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/integration-nextjs-app.png", "srcDark": "/static/toolpad/docs/core/integration-nextjs-app-dark.png", "alt": "Next.js App Router with Toolpad Core", "caption": "Next.js App Router with Toolpad Core", "zoom": true, "aspectRatio": "1.428" }}
+
+:::info
+For a full working example with authentication included, see the [Toolpad Core Next.js App with Auth.js example](https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs/)
+:::
diff --git a/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md b/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md
new file mode 100644
index 00000000000..6eac0cbe05d
--- /dev/null
+++ b/docs/data/toolpad/core/integrations/nextjs-pagesrouter.md
@@ -0,0 +1,434 @@
+---
+title: Next.js - Integration
+---
+
+# Next.js Pages Router
+
+This guide walks you through adding Toolpad Core to an existing Next.js app.
+
+## Prerequisites
+
+Ensure that you have `@mui/material` and `next` installed. You also need the following to make the integration work correctly:
+
+
+
+```bash npm
+npm install @mui/material-nextjs @emotion/cache
+```
+
+```bash pnpm
+pnpm add @mui/material-nextjs @emotion/cache
+```
+
+```bash yarn
+yarn add install @mui/material-nextjs @emotion/cache
+```
+
+
+
+## Wrap your application with `NextAppProvider`
+
+In your root layout file (for example, `pages/_app.tsx`), wrap your application with the `NextAppProvider`:
+
+```tsx title="pages/_app.tsx"
+import * as React from 'react';
+import { NextAppProvider } from '@toolpad/core/nextjs';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import Head from 'next/head';
+import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import type { Navigation } from '@toolpad/core/AppProvider';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ segment: '',
+ title: 'Dashboard',
+ icon:
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+:::info
+The `AppCacheProvider` component is not required to use Toolpad Core, but it's recommended.
+
+See the [Material UI Next.js Pages Router integration docs](https://mui.com/material-ui/integrations/nextjs/#configuration-2) for more details.
+:::
+
+## Modify `_document.tsx`
+
+Modify `_document.tsx` to include the `DocumentHeadTags` component:
+
+```tsx title="pages/_document.tsx"
+import * as React from 'react';
+import {
+ Html,
+ Head,
+ Main,
+ NextScript,
+ DocumentProps,
+ DocumentContext,
+} from 'next/document';
+import {
+ DocumentHeadTags,
+ DocumentHeadTagsProps,
+ documentGetInitialProps,
+} from '@mui/material-nextjs/v14-pagesRouter';
+
+export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
+ return (
+
+
+ Welcome to Toolpad! ;
+}
+```
+
+## (Optional) Add a second page
+
+Create a new page in the dashboard, for example, `pages/orders/index.tsx`:
+
+```tsx title="pages/orders/index.tsx"
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default function OrdersPage() {
+ return Welcome to the orders page! ;
+}
+```
+
+To add this page to the navigation, add it to the `NAVIGATION` variable:
+
+```ts title="pages/_app.tsx"
+export const NAVIGATION = [
+ // ...
+ {
+ segment: 'orders',
+ title: 'Orders',
+ icon: = NextPage & {
+ getLayout?: (page: React.ReactElement) => React.ReactNode;
+ requireAuth?: boolean;
+};
+
+type AppPropsWithLayout = AppProps & {
+ Component: NextPageWithLayout;
+};
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ segment: '',
+ title: 'Dashboard',
+ icon:
+ {page}
+
+ );
+}
+
+function RequireAuth({ children }: { children: React.ReactNode }) {
+ const { status } = useSession();
+
+ if (status === 'loading') {
+ return
+
+
+ {children}
+
+
+ );
+}
+
+export default function App(props: AppPropsWithLayout) {
+ const {
+ Component,
+ pageProps: { session, ...pageProps },
+ } = props;
+
+ const getLayout = Component.getLayout ?? getDefaultLayout;
+ const requireAuth = Component.requireAuth ?? true;
+
+ let pageContent = getLayout({pageContent} ;
+ }
+ pageContent = {pageContent} ;
+
+ return (
+
+ {pageContent}
+
+ );
+}
+```
+
+### Create a sign-in page
+
+Use the `SignInPage` component to add a sign-in page to your app. For example, `pages/auth/signin.tsx`:
+
+```tsx title="pages/auth/signin.tsx"
+import * as React from 'react';
+import type { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
+import Link from '@mui/material/Link';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { signIn } from 'next-auth/react';
+import { useRouter } from 'next/router';
+import { auth, providerMap } from '../../auth';
+
+export default function SignIn({
+ providers,
+}: InferGetServerSidePropsType) {
+ const router = useRouter();
+ return (
+ {
+ try {
+ const signInResponse = await signIn(provider.id, {
+ callbackUrl: callbackUrl ?? '/',
+ });
+ if (signInResponse && signInResponse.error) {
+ // Handle Auth.js errors
+ return {
+ error: signInResponse.error.message,
+ type: signInResponse.error,
+ };
+ }
+ return {};
+ } catch (error) {
+ // An error boundary must exist to handle unknown errors
+ return {
+ error: 'Something went wrong.',
+ type: 'UnknownError',
+ };
+ }
+ }}
+ />
+ );
+}
+
+SignIn.getLayout = (page: React.ReactNode) => page;
+
+SignIn.requireAuth = false;
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const session = await auth(context);
+
+ // If the user is already logged in, redirect.
+ // Note: Make sure not to redirect to the same page
+ // To avoid an infinite loop!
+ if (session) {
+ return { redirect: { destination: '/' } };
+ }
+
+ return {
+ props: {
+ providers: providerMap,
+ },
+ };
+}
+```
+
+### Create a route handler for sign-in
+
+`next-auth` requires a route handler for sign-in. Create a file `app/api/auth/[...nextauth].ts`:
+
+```ts title="app/api/auth/[...nextauth].ts"
+import { handlers } from '../../../../auth';
+
+export const { GET, POST } = handlers;
+```
+
+:::warning
+
+Note that this file is a route handler and must be placed in the `app` directory, even if the rest of your app is in the `pages` directory. Know more in the [Auth.js documentation](https://authjs.dev/getting-started/installation#configure).
+
+:::
+
+#### Add a middleware
+
+Add a middleware to your app to protect your dashboard pages:
+
+```ts title="middleware.ts"
+export { auth as middleware } from './auth';
+
+export const config = {
+ // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
+ matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
+};
+```
+
+That's it! You now have Toolpad Core integrated into your Next.js Pages Router app with authentication setup:
+
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/integration-nextjs-pages.png", "srcDark": "/static/toolpad/docs/core/integration-nextjs-pages-dark.png", "alt": "Next.js Pages Router with Toolpad Core", "caption": "Next.js Pages Router with Toolpad Core", "zoom": true, "aspectRatio": "1.428" }}
+
+:::info
+For a full working example with authentication included, see the [Toolpad Core Next.js Pages app with Auth.js example](https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs-pages/)
+:::
diff --git a/docs/data/toolpad/core/integrations/react-router.md b/docs/data/toolpad/core/integrations/react-router.md
new file mode 100644
index 00000000000..933af08b05d
--- /dev/null
+++ b/docs/data/toolpad/core/integrations/react-router.md
@@ -0,0 +1,585 @@
+---
+title: React Router - Integration
+---
+
+# React Router
+
+To integrate Toolpad Core into a single-page app (with Vite, for example) using React Router, follow these steps.
+
+## Wrap all your pages in a `ReactRouterAppProvider`
+
+In your router configuration (for example `src/main.tsx`), use a shared component or element (for example `src/App.tsx`) as a root **layout route** that wraps the whole application with the `ReactRouterAppProvider` from `@toolpad/core/react-router`.
+
+You must use the `
+ ,
+);
+```
+
+```tsx title="src/App.tsx"
+import * as React from 'react';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { ReactRouterAppProvider } from '@toolpad/core/react-router';
+import { Outlet } from 'react-router';
+import type { Navigation } from '@toolpad/core';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ title: 'Dashboard',
+ icon:
+
+ );
+}
+```
+
+## Create a dashboard layout
+
+Create a layout file for your dashboard pages (for example `src/layouts/dashboard.tsx`), to also be used as a layout route with the `
+
+
+
+ );
+}
+```
+
+The [`DashboardLayout`](/toolpad/core/react-dashboard-layout/) component provides a consistent layout for your dashboard pages, including a sidebar, navigation, and header. The [`PageContainer`](/toolpad/core/react-page-container/) component is used to wrap the page content, and provides breadcrumbs for navigation.
+
+You can then add this layout component to your React Router configuration (for example `src/main.tsx`), as a child of the root layout route created above.
+
+```tsx title="src/main.tsx"
+import Layout from './layouts/dashboard';
+
+//...
+const router = createBrowserRouter([
+ {
+ Component: App, // root layout route
+ children: [
+ {
+ path: '/',
+ Component: Layout,
+ },
+ ],
+ },
+]);
+//...
+```
+
+## Create pages
+
+Create a dashboard page (for example `src/pages/index.tsx`) and an orders page (`src/pages/orders.tsx`).
+
+```tsx title="src/pages/index.tsx"
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default function DashboardPage() {
+ return Welcome to Toolpad! ;
+}
+```
+
+```tsx title="src/pages/orders.tsx"
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default function OrdersPage() {
+ return Welcome to the Toolpad orders! ;
+}
+```
+
+You can then add these page components as routes to your React Router configuration (for example `src/main.tsx`). By adding them as children of the layout route created above, they are automatically wrapped with that dashboard layout:
+
+```tsx title="src/main.tsx"
+import DashboardPage from './pages';
+import OrdersPage from './pages/orders';
+
+//...
+const router = createBrowserRouter([
+ {
+ Component: App, // root layout route
+ children: [
+ {
+ path: '/',
+ Component: Layout,
+ children: [
+ {
+ path: '',
+ Component: DashboardPage,
+ },
+ {
+ path: 'orders',
+ Component: OrdersPage,
+ },
+ ],
+ },
+ ],
+ },
+]);
+//...
+```
+
+That's it! You now have Toolpad Core integrated into your single-page app with React Router!
+
+{{"demo": "ReactRouter.js", "height": 500, "iframe": true, "hideToolbar": true}}
+
+:::info
+For a full working example, see the [Toolpad Core Vite app with React Router example](https://github.com/mui/toolpad/tree/master/examples/core/vite/)
+:::
+
+## (Optional) Set up authentication
+
+You can use the `SignInPage` component to add authentication along with an external authentication provider of your choice. The following code demonstrates the code required to set up authentication with Firebase.
+
+### Define a `SessionContext` to act as the mock authentication provider
+
+```tsx title="src/SessionContext.ts"
+import * as React from 'react';
+
+export interface Session {
+ user: {
+ name?: string;
+ email?: string;
+ image?: string;
+ };
+}
+
+interface SessionContextType {
+ session: Session | null;
+ setSession: (session: Session) => void;
+ loading: boolean;
+}
+
+const SessionContext = React.createContext({
+ session: null,
+ setSession: () => {},
+ loading: true,
+});
+
+export default SessionContext;
+
+export const useSession = () => React.useContext(SessionContext);
+```
+
+### Add Firebase authentication
+
+```tsx title="src/firebase/firebaseConfig.ts"
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+
+const app = initializeApp({
+ apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+ authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+ projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+ storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGE_SENDER_ID,
+ appId: import.meta.env.VITE_FIREBASE_APP_ID,
+});
+
+export const firebaseAuth = getAuth(app);
+export default app;
+```
+
+```tsx title="src/firebase/auth.ts"
+import {
+ GoogleAuthProvider,
+ GithubAuthProvider,
+ signInWithPopup,
+ setPersistence,
+ browserSessionPersistence,
+ signInWithEmailAndPassword,
+ signOut,
+} from 'firebase/auth';
+import { firebaseAuth } from './firebaseConfig';
+
+const googleProvider = new GoogleAuthProvider();
+const githubProvider = new GithubAuthProvider();
+
+// Sign in with Google functionality
+export const signInWithGoogle = async () => {
+ try {
+ return setPersistence(firebaseAuth, browserSessionPersistence).then(async () => {
+ const result = await signInWithPopup(firebaseAuth, googleProvider);
+ return {
+ success: true,
+ user: result.user,
+ error: null,
+ };
+ });
+ } catch (error: any) {
+ return {
+ success: false,
+ user: null,
+ error: error.message,
+ };
+ }
+};
+
+// Sign in with GitHub functionality
+export const signInWithGithub = async () => {
+ try {
+ return setPersistence(firebaseAuth, browserSessionPersistence).then(async () => {
+ const result = await signInWithPopup(firebaseAuth, githubProvider);
+ return {
+ success: true,
+ user: result.user,
+ error: null,
+ };
+ });
+ } catch (error: any) {
+ return {
+ success: false,
+ user: null,
+ error: error.message,
+ };
+ }
+};
+
+// Sign in with email and password
+
+export async function signInWithCredentials(email: string, password: string) {
+ try {
+ return setPersistence(firebaseAuth, browserSessionPersistence).then(async () => {
+ const userCredential = await signInWithEmailAndPassword(
+ firebaseAuth,
+ email,
+ password,
+ );
+ return {
+ success: true,
+ user: userCredential.user,
+ error: null,
+ };
+ });
+ } catch (error: any) {
+ return {
+ success: false,
+ user: null,
+ error: error.message || 'Failed to sign in with email/password',
+ };
+ }
+}
+
+// Sign out functionality
+export const firebaseSignOut = async () => {
+ try {
+ await signOut(firebaseAuth);
+ return { success: true };
+ } catch (error: any) {
+ return {
+ success: false,
+ error: error.message,
+ };
+ }
+};
+
+// Auth state observer
+export const onAuthStateChanged = (callback: (user: any) => void) => {
+ return firebaseAuth.onAuthStateChanged(callback);
+};
+```
+
+### Add authentication and session data to the `AppProvider`
+
+```tsx title="src/App.tsx"
+import * as React from 'react';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { ReactRouterAppProvider } from '@toolpad/core/react-router';
+import { Outlet, useNavigate } from 'react-router';
+import type { Navigation, Session } from '@toolpad/core';
+import {
+ firebaseSignOut,
+ signInWithGoogle,
+ onAuthStateChanged,
+} from './firebase/auth';
+import SessionContext, { type Session } from './SessionContext';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ title: 'Dashboard',
+ icon: (null);
+ const [loading, setLoading] = React.useState(true);
+
+ const sessionContextValue = React.useMemo(
+ () => ({
+ session,
+ setSession,
+ loading,
+ }),
+ [session, loading],
+ );
+
+ React.useEffect(() => {
+ // Returns an `unsubscribe` function to be called during teardown
+ const unsubscribe = onAuthStateChanged((user: User | null) => {
+ if (user) {
+ setSession({
+ user: {
+ name: user.displayName || '',
+ email: user.email || '',
+ image: user.photoURL || '',
+ },
+ });
+ } else {
+ setSession(null);
+ }
+ setLoading(false);
+ });
+
+ return () => unsubscribe();
+ }, []);
+
+ return (
+
+
+
+
+ );
+}
+```
+
+### Protect routes inside the dashboard layout
+
+```tsx title="src/layouts/dashboard.tsx"
+import * as React from 'react';
+import LinearProgress from '@mui/material/LinearProgress';
+import { Outlet, Navigate, useLocation } from 'react-router';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { useSession } from '../SessionContext';
+
+export default function Layout() {
+ const { session, loading } = useSession();
+ const location = useLocation();
+
+ if (loading) {
+ return (
+
+
+ );
+ }
+
+ if (!session) {
+ // Add the `callbackUrl` search parameter
+ const redirectTo = `/sign-in?callbackUrl=${encodeURIComponent(location.pathname)}`;
+
+ return
+
+
+
+ );
+}
+```
+
+You can protect any page or groups of pages through this mechanism.
+
+### Use the `SignInPage` component to create a sign-in page
+
+```tsx title="src/pages/signIn.tsx"
+'use client';
+import * as React from 'react';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import LinearProgress from '@mui/material/LinearProgress';
+import { Navigate, useNavigate } from 'react-router';
+import { useSession, type Session } from '../SessionContext';
+import {
+ signInWithGoogle,
+ signInWithGithub,
+ signInWithCredentials,
+} from '../firebase/auth';
+
+export default function SignIn() {
+ const { session, setSession, loading } = useSession();
+ const navigate = useNavigate();
+
+ if (loading) {
+ return {
+ let result;
+ try {
+ if (provider.id === 'google') {
+ result = await signInWithGoogle();
+ }
+ if (provider.id === 'github') {
+ result = await signInWithGithub();
+ }
+ if (provider.id === 'credentials') {
+ const email = formData?.get('email') as string;
+ const password = formData?.get('password') as string;
+
+ if (!email || !password) {
+ return { error: 'Email and password are required' };
+ }
+
+ result = await signInWithCredentials(email, password);
+ }
+
+ if (result?.success && result?.user) {
+ // Convert Firebase user to Session format
+ const userSession: Session = {
+ user: {
+ name: result.user.displayName || '',
+ email: result.user.email || '',
+ image: result.user.photoURL || '',
+ },
+ };
+ setSession(userSession);
+ navigate(callbackUrl || '/', { replace: true });
+ return {};
+ }
+ return { error: result?.error || 'Failed to sign in' };
+ } catch (error) {
+ return {
+ error: error instanceof Error ? error.message : 'An error occurred',
+ };
+ }
+ }}
+ />
+ );
+}
+```
+
+### Add the sign in page to the router
+
+```tsx title="src/main.tsx"
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import App from './App';
+import Layout from './layouts/dashboard';
+import DashboardPage from './pages';
+import OrdersPage from './pages/orders';
+import SignInPage from './pages/signIn';
+
+const router = createBrowserRouter([
+ {
+ Component: App,
+ children: [
+ {
+ path: '/',
+ Component: Layout,
+ children: [
+ {
+ path: '/',
+ Component: DashboardPage,
+ },
+ {
+ path: '/orders',
+ Component: OrdersPage,
+ },
+ ],
+ },
+ {
+ path: '/sign-in',
+ Component: SignInPage,
+ },
+ ],
+ },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ ,
+);
+```
+
+:::info
+For a full working example, see the [Toolpad Core Vite app with React Router and Firebase authentication example](https://github.com/mui/toolpad/tree/master/examples/core/firebase-vite/)
+:::
diff --git a/docs/data/toolpad/core/introduction/base-concepts.md b/docs/data/toolpad/core/introduction/base-concepts.md
index 96409572c4a..ae008ad48dc 100644
--- a/docs/data/toolpad/core/introduction/base-concepts.md
+++ b/docs/data/toolpad/core/introduction/base-concepts.md
@@ -15,7 +15,7 @@ import Button from '@mui/material/Button';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
```
-## Component Hierarchy
+## Component hierarchy
The Toolpad Core library is designed to work under different React runtimes such as Next.js, Vite, or even your custom setup. Many of its components rely on functionality of the specific runtime they are used under. The key component in making the components runtime-aware is the `AppProvider`.
@@ -67,9 +67,9 @@ You can pass the router implementation to the `AppProvider` component using the
:::
:::success
-If you are using Next.js, use the `AppProvider` exported from `@toolpad/core/nextjs`.
+If you are using Next.js, use the `NextAppProvider` exported from `@toolpad/core/nextjs`.
-If you are building a single-page application (with [Vite](https://vite.dev/), for example) using React Router for routing, use the `AppProvider` exported from `@toolpad/core/react-router-dom`.
+If you are building a single-page application (with [Vite](https://vite.dev/), for example) using React Router for routing, use the `ReactRouterAppProvider` exported from `@toolpad/core/react-router`.
This automatically sets up the router for you, so that you don't need to pass the `router` prop.
:::
@@ -105,7 +105,3 @@ In this example:
- The `slots` prop allows you to replace entire parts of the component.
- The `slotProps` prop lets you pass additional props to specific slots.
-
-## Next Steps
-
-Now that you understand the basic concepts of Toolpad Core, you're ready to start integrating it into your project. Head over to the [integration docs](/toolpad/core/introduction/integration/) to learn more.
diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md
index 352bfe44129..975af850692 100644
--- a/docs/data/toolpad/core/introduction/examples.md
+++ b/docs/data/toolpad/core/introduction/examples.md
@@ -5,8 +5,12 @@ title: Examples
# Toolpad Core - Examples
-Browse a collection of Toolpad Core examples to help you get started quickly:
+Browse a collection of Toolpad Core examples to help you get started quickly.
-
+## Featured examples
-{{"component": "modules/components/ExamplesGrid/ExamplesGrid.tsx", "examplesFile": "core-examples.ts"}}
+{{"component": "modules/components/examples/CoreFeaturedExamples.tsx"}}
+
+## Other examples
+
+{{"component": "modules/components/examples/CoreOtherExamples.tsx"}}
diff --git a/docs/data/toolpad/core/introduction/installation.md b/docs/data/toolpad/core/introduction/installation.md
index 6a8bc1a8bba..a53251c4146 100644
--- a/docs/data/toolpad/core/introduction/installation.md
+++ b/docs/data/toolpad/core/introduction/installation.md
@@ -4,24 +4,26 @@ title: Toolpad Core - Installation
# Installation
-## Manual Installation
+Learn how to install Toolpad Core in your local environment.
+
+## Manual installation
Use your preferred package manager to install `@toolpad/core` in your project:
```bash npm
-npm install -S @toolpad/core
-```
-
-```bash yarn
-yarn add @toolpad/core
+npm install @toolpad/core
```
```bash pnpm
pnpm add @toolpad/core
```
+```bash yarn
+yarn add @toolpad/core
+```
+
The Toolpad Core package has a peer dependency on `@mui/material` and `@mui/icons-material`. If you aren't using these already in your project, you can install them with:
@@ -29,22 +31,20 @@ The Toolpad Core package has a peer dependency on `@mui/material` and `@mui/icon
```bash npm
-npm install -S @mui/material @mui/icons-material @emotion/react @emotion/styled
-```
-
-```bash yarn
-yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled
+npm install @mui/material @mui/icons-material @emotion/react @emotion/styled
```
```bash pnpm
pnpm add @mui/material @mui/icons-material @emotion/react @emotion/styled
```
-
+```bash yarn
+yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled
+```
-## Automatic Installation
+
-Learn how to install Toolpad Core in your local environment.
+## Automatic installation
1. Run the following command to start Toolpad Core:
@@ -109,6 +109,6 @@ yarn dev
and the following page appears when you run the project locally:
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/installation-1.png", "alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }}
+{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/bootstrap.png", "srcDark": "/static/toolpad/docs/core/bootstrap-dark.png","alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }}
-5. Installation is complete! Begin building your project by making edits to `(dashboard/page/page.tsx`. To understand how to leverage Toolpad Core to build dashboards quickly, [see the detailed tutorial](/toolpad/core/introduction/tutorial/).
+5. Installation is complete! Begin building your project by making edits to `(dashboard)/page/page.tsx`. To understand how to leverage Toolpad Core to build dashboards quickly, [see the detailed tutorial](/toolpad/core/introduction/tutorial/).
diff --git a/docs/data/toolpad/core/introduction/integration.md b/docs/data/toolpad/core/introduction/integration.md
deleted file mode 100644
index 21162f3989d..00000000000
--- a/docs/data/toolpad/core/introduction/integration.md
+++ /dev/null
@@ -1,839 +0,0 @@
----
-title: Toolpad Core - Integration
-description: How to integrate Toolpad Core into your existing project.
----
-
-# Integration
-
-This guide will walk you through the process of adding Toolpad Core to an existing project.
-
-## Installation
-
-
-
-```bash npm
-npm install -S @toolpad/core
-```
-
-```bash yarn
-yarn add @toolpad/core
-```
-
-```bash pnpm
-pnpm add @toolpad/core
-```
-
-
-
-## Next.js App Router
-
-Use the following steps to integrate Toolpad Core into your Next.js app:
-
-### 1. Wrap your application with `AppProvider`
-
-In your root layout file (e.g., `app/layout.tsx`), wrap your application with the `AppProvider`:
-
-```tsx title="app/layout.tsx"
-import { AppProvider } from '@toolpad/core/AppProvider';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
-
-export default function RootLayout({ children }: { children: React.ReactNode }) {
- return (
-
-
- {children}
-
-
- );
-}
-```
-
-You can find details on the `AppProvider` props on the [AppProvider](/toolpad/core/react-app-provider/) page.
-
-:::info
-The `AppRouterCacheProvider` component is not required to use Toolpad Core, but it's recommended to use it to ensure that the styles are appended to the `` and not rendering in the ``.
-
-See the [Material UI Next.js integration docs](https://mui.com/material-ui/integrations/nextjs/) for more details.
-:::
-
-### 2. Create a dashboard layout
-
-Create a layout file for your dashboard pages (e.g., `app/(dashboard)/layout.tsx`):
-
-```tsx title="app/(dashboard)/layout.tsx"
-import * as React from 'react';
-import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import { PageContainer } from '@toolpad/core/PageContainer';
-
-export default function DashboardPagesLayout(props: { children: React.ReactNode }) {
- return (
-
- {props.children}
-
- );
-}
-```
-
-The [`DashboardLayout`](/toolpad/core/react-dashboard-layout/) component provides a consistent layout for your dashboard pages, including a sidebar, navigation, and header. The [`PageContainer`](/toolpad/core/react-page-container/) component is used to wrap the page content, and provides breadcrumbs for navigation.
-
-### 3. Create a dashboard page
-
-Now you can create pages within your dashboard. For example, a home page (`app/(dashboard)/page.tsx`):
-
-```tsx title="app/(dashboard)/page.tsx"
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-
-export default function Page() {
- return Welcome to a page in the dashboard! ;
-}
-```
-
-That's it! You have now integrated Toolpad Core into your Next.js app.
-
-### 4. (Optional) Add a second page
-
-Create a new page in the dashboard, for example, `app/(dashboard)/orders/page.tsx`:
-
-```tsx title="app/(dashboard)/orders/page.tsx"
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-
-export default function OrdersPage() {
- return Welcome to the orders page! ;
-}
-```
-
-To add this page to the navigation, add it to the `NAVIGATION` variable:
-
-```ts title="app/layout.tsx"
-export const NAVIGATION = [
- // ...
- {
- segment: 'orders',
- title: 'Orders',
- icon: {
- 'use server';
- try {
- return await signIn(provider.id, {
- redirectTo: callbackUrl ?? '/',
- });
- } catch (error) {
- // The desired flow for successful sign in in all cases
- // and unsuccessful sign in for OAuth providers will cause a `redirect`,
- // and `redirect` is a throwing function, so we need to re-throw
- // to allow the redirect to happen
- // Source: https://github.com/vercel/next.js/issues/49298#issuecomment-1542055642
- // Detect a `NEXT_REDIRECT` error and re-throw it
- if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
- throw error;
- }
- // Handle Auth.js errors
- if (error instanceof AuthError) {
- return {
- error: error.message,
- type: error.type,
- };
- }
- // An error boundary must exist to handle unknown errors
- return {
- error: 'Something went wrong.',
- type: 'UnknownError',
- };
- }
- }}
- />
- );
-}
-```
-
-#### d. Create a route handler for sign-in
-
-`next-auth` requires a route handler for sign-in. Create a file `app/api/auth/[...nextauth]/route.ts`:
-
-```ts title="app/api/auth/[...nextauth]/route.ts"
-import { handlers } from '../../../../auth';
-
-export const { GET, POST } = handlers;
-```
-
-#### e. Add a middleware
-
-Add a middleware to your app to protect your dashboard pages:
-
-```ts title="middleware.ts"
-export { auth as middleware } from './auth';
-
-export const config = {
- // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
- matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
-};
-```
-
-That's it! You now have Toolpad Core integrated into your Next.js App Router app with authentication setup:
-
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/integration-nextjs-app.png", "srcDark": "/static/toolpad/docs/core/integration-nextjs-app-dark.png", "alt": "Next.js App Router with Toolpad Core", "caption": "Next.js App Router with Toolpad Core", "zoom": true, "aspectRatio": "1.428" }}
-
-:::info
-For a full working example with authentication included, see the [Toolpad Core Next.js App with Auth.js example](https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs)
-:::
-
-## Next.js Pages Router
-
-To integrate Toolpad Core into your Next.js Pages Router app, follow these steps:
-
-### 1. Wrap your application with `AppProvider`
-
-In your root layout file (e.g., `pages/_app.tsx`), wrap your application with the `AppProvider`:
-
-```tsx title="pages/_app.tsx"
-import * as React from 'react';
-import { AppProvider } from '@toolpad/core/nextjs';
-import { PageContainer } from '@toolpad/core/PageContainer';
-import { DashboardLayout } from '@toolpad/core/DashboardLayout';
-import Head from 'next/head';
-import { AppCacheProvider } from '@mui/material-nextjs/v14-pagesRouter';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import type { Navigation } from '@toolpad/core/AppProvider';
-
-const NAVIGATION: Navigation = [
- {
- kind: 'header',
- title: 'Main items',
- },
- {
- segment: '',
- title: 'Dashboard',
- icon:
-
-
-
-
-
-
-
-
- );
-}
-```
-
-:::info
-The `AppCacheProvider` component is not required to use Toolpad Core, but it's recommended.
-
-See the [Material UI Next.js Pages Router integration docs](https://mui.com/material-ui/integrations/nextjs/#configuration-2) for more details.
-:::
-
-### 2. Modify `_document.tsx`
-
-Modify `_document.tsx` to include the `DocumentHeadTags` component:
-
-```tsx title="pages/_document.tsx"
-import * as React from 'react';
-import {
- Html,
- Head,
- Main,
- NextScript,
- DocumentProps,
- DocumentContext,
-} from 'next/document';
-import {
- DocumentHeadTags,
- DocumentHeadTagsProps,
- documentGetInitialProps,
-} from '@mui/material-nextjs/v14-pagesRouter';
-
-export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
- return (
-
-
- Welcome to Toolpad! ;
-}
-```
-
-### 4. (Optional) Add a second page
-
-Create a new page in the dashboard, for example, `pages/orders/index.tsx`:
-
-```tsx title="pages/orders/index.tsx"
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-
-export default function OrdersPage() {
- return Welcome to the orders page! ;
-}
-```
-
-To add this page to the navigation, add it to the `NAVIGATION` variable:
-
-```ts title="pages/_app.tsx"
-export const NAVIGATION = [
- // ...
- {
- segment: 'orders',
- title: 'Orders',
- icon: = NextPage & {
- getLayout?: (page: React.ReactElement) => React.ReactNode;
- requireAuth?: boolean;
-};
-
-type AppPropsWithLayout = AppProps & {
- Component: NextPageWithLayout;
-};
-
-const NAVIGATION: Navigation = [
- {
- kind: 'header',
- title: 'Main items',
- },
- {
- segment: '',
- title: 'Dashboard',
- icon:
- {page}
-
- );
-}
-
-function RequireAuth({ children }: { children: React.ReactNode }) {
- const { status } = useSession();
-
- if (status === 'loading') {
- return
-
-
- {children}
-
-
- );
-}
-
-export default function App(props: AppPropsWithLayout) {
- const {
- Component,
- pageProps: { session, ...pageProps },
- } = props;
-
- const getLayout = Component.getLayout ?? getDefaultLayout;
- const requireAuth = Component.requireAuth ?? true;
-
- let pageContent = getLayout({pageContent} ;
- }
- pageContent = {pageContent} ;
-
- return (
-
- {pageContent}
-
- );
-}
-```
-
-#### d. Create a sign-in page
-
-Use the `SignInPage` component to add a sign-in page to your app. For example, `pages/auth/signin.tsx`:
-
-```tsx title="pages/auth/signin.tsx"
-import * as React from 'react';
-import type { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
-import Link from '@mui/material/Link';
-import { SignInPage } from '@toolpad/core/SignInPage';
-import { signIn } from 'next-auth/react';
-import { useRouter } from 'next/router';
-import { auth, providerMap } from '../../auth';
-
-export default function SignIn({
- providers,
-}: InferGetServerSidePropsType) {
- const router = useRouter();
- return (
- {
- try {
- const signInResponse = await signIn(provider.id, {
- callbackUrl: callbackUrl ?? '/',
- });
- if (signInResponse && signInResponse.error) {
- // Handle Auth.js errors
- return {
- error: signInResponse.error.message,
- type: signInResponse.error,
- };
- }
- return {};
- } catch (error) {
- // An error boundary must exist to handle unknown errors
- return {
- error: 'Something went wrong.',
- type: 'UnknownError',
- };
- }
- }}
- />
- );
-}
-
-SignIn.getLayout = (page: React.ReactNode) => page;
-
-SignIn.requireAuth = false;
-
-export async function getServerSideProps(context: GetServerSidePropsContext) {
- const session = await auth(context);
-
- // If the user is already logged in, redirect.
- // Note: Make sure not to redirect to the same page
- // To avoid an infinite loop!
- if (session) {
- return { redirect: { destination: '/' } };
- }
-
- return {
- props: {
- providers: providerMap,
- },
- };
-}
-```
-
-#### e. Create a route handler for sign-in
-
-`next-auth` requires a route handler for sign-in. Create a file `app/api/auth/[...nextauth].ts`:
-
-```ts title="app/api/auth/[...nextauth].ts"
-import { handlers } from '../../../../auth';
-
-export const { GET, POST } = handlers;
-```
-
-:::warning
-
-Note that this file is a route handler and must be placed in the `app` directory, even if the rest of your app is in the `pages` directory. Know more in the [Auth.js documentation](https://authjs.dev/getting-started/installation#configure).
-
-:::
-
-#### f. Add a middleware
-
-Add a middleware to your app to protect your dashboard pages:
-
-```ts title="middleware.ts"
-export { auth as middleware } from './auth';
-
-export const config = {
- // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
- matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
-};
-```
-
-That's it! You now have Toolpad Core integrated into your Next.js Pages Router app with authentication setup:
-
-{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/integration-nextjs-pages.png", "srcDark": "/static/toolpad/docs/core/integration-nextjs-pages-dark.png", "alt": "Next.js Pages Router with Toolpad Core", "caption": "Next.js Pages Router with Toolpad Core", "zoom": true, "aspectRatio": "1.428" }}
-
-:::info
-For a full working example with authentication included, see the [Toolpad Core Next.js Pages app with Auth.js example](https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs-pages)
-:::
-
-## React Router
-
-To integrate Toolpad Core into a single-page app (with [Vite](https://vite.dev/), for example) using **React Router**, follow these steps:
-
-### 1. Wrap all your pages in an `AppProvider`
-
-In your router configuration (e.g.: `src/main.tsx`), use a shared component or element (e.g.: `src/App.tsx`) as a root **layout route** that will wrap the whole application with the `AppProvider` from `@toolpad/core/react-router-dom`.
-
-You must use the `
- ,
-);
-```
-
-```tsx title="src/App.tsx"
-import * as React from 'react';
-import DashboardIcon from '@mui/icons-material/Dashboard';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import { AppProvider } from '@toolpad/core/react-router-dom';
-import { Outlet } from 'react-router-dom';
-import type { Navigation } from '@toolpad/core';
-
-const NAVIGATION: Navigation = [
- {
- kind: 'header',
- title: 'Main items',
- },
- {
- title: 'Dashboard',
- icon:
-
- );
-}
-```
-
-### 2. Create a dashboard layout
-
-Create a layout file for your dashboard pages (e.g.: `src/layouts/dashboard.tsx`), to also be used as a layout route with the `
-
-
-
- );
-}
-```
-
-The [`DashboardLayout`](/toolpad/core/react-dashboard-layout/) component provides a consistent layout for your dashboard pages, including a sidebar, navigation, and header. The [`PageContainer`](/toolpad/core/react-page-container/) component is used to wrap the page content, and provides breadcrumbs for navigation.
-
-You can then add this layout component to your React Router configuration (e.g.: `src/main.tsx`), as a child of the root layout route created in step 1.
-
-```tsx title="src/main.tsx"
-import Layout from './layouts/dashboard';
-
-//...
-const router = createBrowserRouter([
- {
- Component: App, // root layout route
- children: [
- {
- path: '/',
- Component: Layout,
- },
- ],
- },
-]);
-//...
-```
-
-### 3. Create pages
-
-Create a dashboard page (e.g.: `src/pages/index.tsx`) and an orders page (`src/pages/orders.tsx`).
-
-```tsx title="src/pages/index.tsx"
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-
-export default function DashboardPage() {
- return Welcome to Toolpad! ;
-}
-```
-
-```tsx title="src/pages/orders.tsx"
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-
-export default function OrdersPage() {
- return Welcome to the Toolpad orders! ;
-}
-```
-
-You can then add these page components as routes to your React Router configuration (e.g.: `src/main.tsx`). By adding them as children of the layout route created in step 2, they will automatically be wrapped with that dashboard layout:
-
-```tsx title="src/main.tsx"
-import DashboardPage from './pages';
-import OrdersPage from './pages/orders';
-
-//...
-const router = createBrowserRouter([
- {
- Component: App, // root layout route
- children: [
- {
- path: '/',
- Component: Layout,
- children: [
- {
- path: '/',
- Component: DashboardPage,
- },
- {
- path: '/orders',
- Component: OrdersPage,
- },
- ],
- },
- ],
- },
-]);
-//...
-```
-
-That's it! You now have Toolpad Core integrated into your single-page app with React Router!
-
-{{"demo": "ReactRouter.js", "height": 500, "iframe": true, "hideToolbar": true}}
-
-:::info
-For a full working example, see the [Toolpad Core Vite app with React Router example](https://github.com/mui/toolpad/tree/master/examples/core-vite)
-:::
diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md
index f777fc246f7..2da0269d33c 100644
--- a/docs/data/toolpad/core/introduction/tutorial.md
+++ b/docs/data/toolpad/core/introduction/tutorial.md
@@ -15,15 +15,15 @@ title: Tutorial
```bash npm
-npx create-toolpad-app@latest --example core-tutorial
+npx create-toolpad-app@latest --example tutorial
```
```bash pnpm
-pnpm dlx create toolpad-app --example core-tutorial
+pnpm dlx create toolpad-app --example tutorial
```
```bash yarn
-yarn create toolpad-app --example core-tutorial
+yarn create toolpad-app --example tutorial
```
@@ -79,7 +79,7 @@ export default function Home() {
```tsx title="app/layout.tsx"
// Add the following import:
-import TimelineIcon from '@mui/icons-material/TimelineIcon';
+import TimelineIcon from '@mui/icons-material/Timeline';
// ...
diff --git a/docs/data/toolpad/core/pages.ts b/docs/data/toolpad/core/pages.ts
index e0fb156d619..4e8d6831433 100644
--- a/docs/data/toolpad/core/pages.ts
+++ b/docs/data/toolpad/core/pages.ts
@@ -20,10 +20,6 @@ const pages: MuiPage[] = [
pathname: '/toolpad/core/introduction/base-concepts',
title: 'Base concepts',
},
- {
- pathname: '/toolpad/core/introduction/integration',
- title: 'Integration',
- },
{
pathname: '/toolpad/core/introduction/tutorial',
title: 'Tutorial',
@@ -31,6 +27,7 @@ const pages: MuiPage[] = [
{
pathname: '/toolpad/core/introduction/examples',
title: 'Examples',
+ newFeature: true,
},
{
pathname: '/toolpad/core/introduction/roadmap',
@@ -42,6 +39,24 @@ const pages: MuiPage[] = [
},
],
},
+ {
+ pathname: '/toolpad/core/integrations-group',
+ title: 'Integrations',
+ children: [
+ {
+ pathname: '/toolpad/core/integrations/nextjs-approuter',
+ title: 'Next.js App Router',
+ },
+ {
+ pathname: '/toolpad/core/integrations/nextjs-pagesrouter',
+ title: 'Next.js Pages Router',
+ },
+ {
+ pathname: '/toolpad/core/integrations/react-router',
+ title: 'Vite with React Router',
+ },
+ ],
+ },
{
pathname: '/toolpad/core/components-group',
title: 'Components',
@@ -106,7 +121,7 @@ const pages: MuiPage[] = [
children: [
{
pathname: '/toolpad/core/react-crud-page',
- title: 'CRUD Page',
+ title: 'CRUD',
planned: true,
},
{
@@ -128,6 +143,10 @@ const pages: MuiPage[] = [
pathname: '/toolpad/core/react-use-notifications',
title: 'useNotifications',
},
+ {
+ pathname: '/toolpad/core/react-use-session',
+ title: 'useSession',
+ },
{
pathname: '/toolpad/core/react-persistent-state',
title: 'Persisted state',
@@ -161,6 +180,10 @@ const pages: MuiPage[] = [
pathname: '/toolpad/core/react-persistent-state/use-local-storage-state-api',
title: 'useLocalStorageState',
},
+ {
+ pathname: '/toolpad/core/react-use-session/api',
+ title: 'useSession',
+ },
{
pathname: '/toolpad/core/react-persistent-state/use-session-storage-state-api',
title: 'useSessionStorageState',
diff --git a/docs/data/toolpad/core/pagesApi.js b/docs/data/toolpad/core/pagesApi.js
index 346ba5b4a23..c36b8e189db 100644
--- a/docs/data/toolpad/core/pagesApi.js
+++ b/docs/data/toolpad/core/pagesApi.js
@@ -1,10 +1,18 @@
module.exports = [
{ pathname: '/toolpad/core/api/account' },
+ { pathname: '/toolpad/core/api/account-popover-footer' },
+ { pathname: '/toolpad/core/api/account-popover-header' },
+ { pathname: '/toolpad/core/api/account-preview' },
{ pathname: '/toolpad/core/api/app-provider' },
{ pathname: '/toolpad/core/api/dashboard-layout' },
{ pathname: '/toolpad/core/api/dialogs-provider' },
{ pathname: '/toolpad/core/api/notifications-provider' },
{ pathname: '/toolpad/core/api/page-container' },
- { pathname: '/toolpad/core/api/page-container-toolbar' },
+ { pathname: '/toolpad/core/api/page-header' },
+ { pathname: '/toolpad/core/api/page-header-toolbar' },
+ { pathname: '/toolpad/core/api/sign-in-button' },
{ pathname: '/toolpad/core/api/sign-in-page' },
+ { pathname: '/toolpad/core/api/sign-out-button' },
+ { pathname: '/toolpad/core/api/theme-switcher' },
+ { pathname: '/toolpad/core/api/toolbar-actions' },
];
diff --git a/docs/data/toolpad/studio/components/button/button.md b/docs/data/toolpad/studio/components/button/button.md
index f8fa061b407..403820def36 100644
--- a/docs/data/toolpad/studio/components/button/button.md
+++ b/docs/data/toolpad/studio/components/button/button.md
@@ -17,7 +17,7 @@ Button component becomes usable through an **onClick** event handler property. I
You can write any valid JavaScript that you want to execute on the click of button. It can change component state or call backend code.
Below video shows how on a button click, the user input can be shown on a page in a text field component:
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/components/data-grid/data-grid.md b/docs/data/toolpad/studio/components/data-grid/data-grid.md
index 06da60b1ad2..30229dd94a2 100644
--- a/docs/data/toolpad/studio/components/data-grid/data-grid.md
+++ b/docs/data/toolpad/studio/components/data-grid/data-grid.md
@@ -16,7 +16,7 @@ A Data Grid is an essential component in an internal application. The following
Rows property requires an array of data to show inside the data grid. It can be configured either by clicking on it and providing JSON or by binding it to a query output. The video below shows how to bind data to data grid using rows linking:
-
+
Your browser does not support the video tag.
@@ -26,7 +26,7 @@ Rows property requires an array of data to show inside the data grid. It can be
Columns property is used to configure the columns to be displayed. Choose a column and you'll get a pop-up window to configure its header name, width, alignment and data type.
From the `type` drop down you can also [customize a column](/toolpad/studio/how-to-guides/customize-datagrid/).
-
+
Your browser does not support the video tag.
@@ -39,7 +39,7 @@ Id field property is used to identify which column contains the id column. By de
This property shows the currently selected row or `null` in case no row has been selected. It is available to be bound to take any action on the selected row like [deleting a row](/toolpad/studio/how-to-guides/delete-datagrid-row/) from data grid.
-
+
Your browser does not support the video tag.
@@ -48,7 +48,7 @@ This property shows the currently selected row or `null` in case no row has been
Loading property is used to to inform the user when the data is being prepared. It can be [bound to](/toolpad/studio/how-to-guides/delete-datagrid-row/#configure-loading-states-optional) React query properties like isFetching, isLoading.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/components/date-picker/date-picker.md b/docs/data/toolpad/studio/components/date-picker/date-picker.md
index dd25237563e..06168dff97b 100644
--- a/docs/data/toolpad/studio/components/date-picker/date-picker.md
+++ b/docs/data/toolpad/studio/components/date-picker/date-picker.md
@@ -26,7 +26,7 @@ The current selected date. It shows the format in which it is being provided to
Allows setting a default value. Example:
-
+
Your browser does not support the video tag.
@@ -71,7 +71,7 @@ Disabled property shows the state of the component so that end user is aware tha
isRequired is useful when the action can't be perfomed without a user provided date.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/components/list/list.md b/docs/data/toolpad/studio/components/list/list.md
index 8cf3c7f2fa0..87fc99c100e 100644
--- a/docs/data/toolpad/studio/components/list/list.md
+++ b/docs/data/toolpad/studio/components/list/list.md
@@ -10,7 +10,7 @@ A List is an essential component in an application. It had one key property that
It is the number of occurences that the list is supposed to render.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/components/text-field/text-field.md b/docs/data/toolpad/studio/components/text-field/text-field.md
index f77fdd9b699..bb65e7e1d3c 100644
--- a/docs/data/toolpad/studio/components/text-field/text-field.md
+++ b/docs/data/toolpad/studio/components/text-field/text-field.md
@@ -12,7 +12,7 @@ TextField is a text input component. It takes user input and provides the value
It is one of the most used input component. The video below uses some props to demonstrate its usage.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/building-ui.md b/docs/data/toolpad/studio/concepts/building-ui.md
index b62f7cf480d..cce64d888da 100644
--- a/docs/data/toolpad/studio/concepts/building-ui.md
+++ b/docs/data/toolpad/studio/concepts/building-ui.md
@@ -6,7 +6,7 @@
To access the list of available Toolpad Studio components, hover your cursor over the vertical bar labeled **Component library** to expand it.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/custom-components.md b/docs/data/toolpad/studio/concepts/custom-components.md
index e54237535b0..199544c5768 100644
--- a/docs/data/toolpad/studio/concepts/custom-components.md
+++ b/docs/data/toolpad/studio/concepts/custom-components.md
@@ -15,7 +15,7 @@ The steps below explain how to create and use a custom component in Toolpad Stud
In case it doesn't open, check [troubleshoot missing editor](https://mui.com/toolpad/studio/how-to-guides/editor-path/).
:::
-
+
Your browser does not support the video tag.
@@ -89,7 +89,7 @@ export default createComponent(HelloWorld, {
This component, when dragged to the canvas, has a **msg** property that you can't bind to. But you can now bind to this property from other components.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/custom-functions.md b/docs/data/toolpad/studio/concepts/custom-functions.md
index 0fd2058d389..8f94ec716d0 100644
--- a/docs/data/toolpad/studio/concepts/custom-functions.md
+++ b/docs/data/toolpad/studio/concepts/custom-functions.md
@@ -4,7 +4,7 @@
The most powerful way of bringing data into Toolpad Studio is through your own code. You can define functions inside `toolpad/resources` and use them when creating a query of this type. The following video shows how you can use this feature to read data from PostgreSQL.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/custom-server.md b/docs/data/toolpad/studio/concepts/custom-server.md
index debb51c182a..4a3ec5389ed 100644
--- a/docs/data/toolpad/studio/concepts/custom-server.md
+++ b/docs/data/toolpad/studio/concepts/custom-server.md
@@ -9,7 +9,7 @@ An improved integration method is being worked on. You'll be able to run Toolpad
The Toolpad Studio `dev` command comes with its own built-in server. However, sometimes you'd want more control over the way Toolpad Studio applications are hosted within your application. The Toolpad Studio custom server integration API allows you to run a Toolpad Studio application programmatically within an existing node.js server.
:::info
-Check out the [example on GitHub](https://github.com/mui/toolpad/tree/master/examples/custom-server) for a full demonstration of how to set up a custom server integration.
+Check out the [example on GitHub](https://github.com/mui/toolpad/tree/master/examples/studio/custom-server/) for a full demonstration of how to set up a custom server integration.
:::
The following code illustrates how it works:
diff --git a/docs/data/toolpad/studio/concepts/data-binding.md b/docs/data/toolpad/studio/concepts/data-binding.md
index 9f4a3f48d1c..e0e8a6f6a21 100644
--- a/docs/data/toolpad/studio/concepts/data-binding.md
+++ b/docs/data/toolpad/studio/concepts/data-binding.md
@@ -26,7 +26,7 @@ You can change the format of a value like:
You can write strings inside backticks (`) to write embedded expressions and multiline text. These can be used to read values from other components.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/data-providers.md b/docs/data/toolpad/studio/concepts/data-providers.md
index 69784b907f0..fb5fc4afed1 100644
--- a/docs/data/toolpad/studio/concepts/data-providers.md
+++ b/docs/data/toolpad/studio/concepts/data-providers.md
@@ -6,7 +6,7 @@ Toolpad Studio functions are great to bring some backend state to the page, but
Follow these steps to create a new data provider:
-
+
Your browser does not support the video tag.
@@ -25,7 +25,7 @@ export default createDataProvider({
});
```
-
+
Your browser does not support the video tag.
@@ -100,7 +100,7 @@ For example, this could print the following if the corresponding column filters
Now the backend function receives the grid filter from the UI in its parameters.
-
+
Your browser does not support the video tag.
@@ -129,7 +129,7 @@ Depending on which column has been set to sort by, this results in:
Now the backend function receives the grid sorting model from the UI in its parameters.
-
+
Your browser does not support the video tag.
@@ -156,7 +156,7 @@ export default createDataProvider({
When this method is available in the data provider, each row gets an edit button. This edit button brings the row in edit mode. To commit the changes press the save button on the row that is in edit mode. To discard the changes use the cancel button.
-
+
Your browser does not support the video tag.
@@ -183,7 +183,7 @@ export default createDataProvider({
After you make this method available in the data provider, an "Add record" button appears in the data grid toolbar. Click this button and a new editable row appears at the top of the grid. Fill in the values and click the "Save" button to finish creating the row. You'll have to return the newly created row from the `createRecord` method so that the grid can update accordingly.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/deployment.md b/docs/data/toolpad/studio/concepts/deployment.md
index 6ad3c392bad..f217eb9dd51 100644
--- a/docs/data/toolpad/studio/concepts/deployment.md
+++ b/docs/data/toolpad/studio/concepts/deployment.md
@@ -26,6 +26,10 @@ Install required depdencies via:
npm install
```
+```bash pnpm
+pnpm install
+```
+
```bash yarn
yarn
```
@@ -42,14 +46,14 @@ This command will create an optimized production build for the Toolpad Studio ap
npm run build
```
-```bash yarn
-yarn build
-```
-
```bash pnpm
pnpm build
```
+```bash yarn
+yarn build
+```
+
## Start step
@@ -64,6 +68,10 @@ To serve the app once built, run:
npm run start
```
+```bash pnpm
+pnpm start
+```
+
```bash yarn
yarn start
```
diff --git a/docs/data/toolpad/studio/concepts/event-handling.md b/docs/data/toolpad/studio/concepts/event-handling.md
index 0fede225db6..3a1009debb1 100644
--- a/docs/data/toolpad/studio/concepts/event-handling.md
+++ b/docs/data/toolpad/studio/concepts/event-handling.md
@@ -10,7 +10,7 @@ Some event handling scenarios:
### Change component state
-
+
Your browser does not support the video tag.
@@ -25,7 +25,7 @@ You can call single or multiple queries sequentially to fetch data on the page o
#### Multiple queries
-
+
Your browser does not support the video tag.
@@ -38,7 +38,7 @@ See the [deleting data grid row](/toolpad/studio/how-to-guides/delete-datagrid-r
Custom functions allow you to write custom code in your editor. You can write a `console.log` statement that interacts with the data on the page and prints logs.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/file-structure.md b/docs/data/toolpad/studio/concepts/file-structure.md
index c05dd46e621..993157f61f3 100644
--- a/docs/data/toolpad/studio/concepts/file-structure.md
+++ b/docs/data/toolpad/studio/concepts/file-structure.md
@@ -1,6 +1,6 @@
# File structure
-Toolpad Studio's accessibility to the file-system makes it powerful. Here's how:
+Toolpad Studio's accessibility to the file-system makes it powerful. Here's how.
Toolpad Studio is file-system based, which means that an app's entire configuration is stored in files within your project. You can inspect and edit them from your IDE. You'll also use your own tools to author custom functions and components. This is how the project structure looks like in the file-system:
diff --git a/docs/data/toolpad/studio/concepts/http-requests.md b/docs/data/toolpad/studio/concepts/http-requests.md
index dcadf0208c8..e961f88152a 100644
--- a/docs/data/toolpad/studio/concepts/http-requests.md
+++ b/docs/data/toolpad/studio/concepts/http-requests.md
@@ -65,7 +65,7 @@ You can define these in the interface available in the HTTP Request query editor
As Toolpad Studio HTTP requests are running server-side, they can make use of the available secrets that are stored in environment variables. The mechanism works similar by defining a parameter and instead of binding it to a UI value, bind it to an environment variable. Whenever the request executes, Toolpad Studio will feed the value of the environment variable to the parameter.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/page-properties.md b/docs/data/toolpad/studio/concepts/page-properties.md
index 4b0a3aea38b..31ce9a23625 100644
--- a/docs/data/toolpad/studio/concepts/page-properties.md
+++ b/docs/data/toolpad/studio/concepts/page-properties.md
@@ -45,7 +45,7 @@ Available values are **xs**, **sm**, **md**, **lg**, **xl**, or **None** to conf
Page parameters allow you to pass external data into the Toolpad Studio page state via the URL query parameters.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/concepts/theming.md b/docs/data/toolpad/studio/concepts/theming.md
index ac201358a07..a8a51543233 100644
--- a/docs/data/toolpad/studio/concepts/theming.md
+++ b/docs/data/toolpad/studio/concepts/theming.md
@@ -4,7 +4,7 @@
## Adding a global theme
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/getting-started/examples-overview.md b/docs/data/toolpad/studio/getting-started/examples-overview.md
index 95335641cf4..575ca15647c 100644
--- a/docs/data/toolpad/studio/getting-started/examples-overview.md
+++ b/docs/data/toolpad/studio/getting-started/examples-overview.md
@@ -5,12 +5,10 @@ title: Examples
# Overview
-Browse our collection of Toolpad Studio examples that help you familiarise with Toolpad Studio concepts.
-
-
+Browse a collection of Toolpad Studio examples that help you familiarise with Toolpad Studio concepts.
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/ExamplesGrid/ExamplesGrid.tsx", "examplesFile": "studio-examples.ts"}}
+{{"component": "modules/components/examples/StudioExamples.tsx"}}
diff --git a/docs/data/toolpad/studio/getting-started/installation.md b/docs/data/toolpad/studio/getting-started/installation.md
index c177d3ff2f5..57c9c909d38 100644
--- a/docs/data/toolpad/studio/getting-started/installation.md
+++ b/docs/data/toolpad/studio/getting-started/installation.md
@@ -13,14 +13,14 @@ Then run the command:
npx create-toolpad-app@latest --studio my-toolpad-app
```
-```bash yarn
-yarn create toolpad-app --studio my-toolpad-app
-```
-
```bash pnpm
pnpm create toolpad-app --studio my-toolpad-app
```
+```bash yarn
+yarn create toolpad-app --studio my-toolpad-app
+```
+
This will run the `create-toolpad-app` CLI which initializes the directory `./my-toolpad-app` with a Toolpad Studio application.
@@ -41,14 +41,14 @@ Then start the development mode
npm run dev
```
-```bash yarn
-yarn dev
-```
-
```bash pnpm
pnpm dev
```
+```bash yarn
+yarn dev
+```
+
This starts the development server on port `3000` or the first available port after that and opens the browser to the Toolpad Studio editor.
@@ -60,17 +60,17 @@ Start by installing the required dependencies:
```bash npm
-npm install -S @toolpad/studio
-```
-
-```bash yarn
-yarn add @toolpad/studio
+npm install @toolpad/studio
```
```bash pnpm
pnpm add @toolpad/studio
```
+```bash yarn
+yarn add @toolpad/studio
+```
+
Then you'll have to add the Toolpad Studio scripts to your `package.json`:
@@ -94,14 +94,14 @@ Now you can start your Toolpad Studio application using one of the commands:
npm run toolpad-studio:dev
```
-```bash yarn
-yarn toolpad-studio:dev
-```
-
```bash pnpm
pnpm toolpad-studio:dev
```
+```bash yarn
+yarn toolpad-studio:dev
+```
+
When you run this command, Toolpad Studio will automatically initialize a new application in the **./my-toolpad-app** folder.
diff --git a/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md b/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md
index 40046677dd1..79148adda99 100644
--- a/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md
+++ b/docs/data/toolpad/studio/how-to-guides/connect-to-googlesheets.md
@@ -6,7 +6,7 @@ You can write a custom function to read or write data from a Google sheet. We'll
There are many ways to authenticate Google APIs, as mentioned in `google-auth-library`. This guide uses JWTs (JSON Web Tokens), which are appropriate for a server-based application.
-
+
Your browser does not support the video tag.
diff --git a/docs/data/toolpad/studio/how-to-guides/embed-pages.md b/docs/data/toolpad/studio/how-to-guides/embed-pages.md
index abe8f98bc88..55d326f371c 100644
--- a/docs/data/toolpad/studio/how-to-guides/embed-pages.md
+++ b/docs/data/toolpad/studio/how-to-guides/embed-pages.md
@@ -18,9 +18,9 @@
using
```html
-
+
```
you can embed a Toolpad Studio page, like so:
-
+
diff --git a/docs/data/toolpad/studio/how-to-guides/railway-deploy.md b/docs/data/toolpad/studio/how-to-guides/railway-deploy.md
index 1c06c6ce0ed..d13861161cd 100644
--- a/docs/data/toolpad/studio/how-to-guides/railway-deploy.md
+++ b/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.
@@ -49,7 +49,7 @@ This guide walks you through the deployment of a Toolpad Studio app from a GitHu
That's it! The app is up and running. Make changes, push to GitHub, and your app automatically redeploys each time. You may deploy to any other hosting provider of your choice as well.
-Check out the Railway documentation for more advanced settings, like adding [variables](https://docs.railway.app/guides/variables) to your app.
+Check out the Railway documentation for more advanced settings, like adding [variables](https://docs.railway.com/guides/variables) to your app.
### Common Pitfalls
diff --git a/docs/data/toolpad/studio/how-to-guides/render-deploy.md b/docs/data/toolpad/studio/how-to-guides/render-deploy.md
index 19bc2d9fd62..52abfcadab2 100644
--- a/docs/data/toolpad/studio/how-to-guides/render-deploy.md
+++ b/docs/data/toolpad/studio/how-to-guides/render-deploy.md
@@ -78,7 +78,7 @@
:::info
-See the [Render documentation](https://docs.render.com/node-version) on Node versions for more information.
+See the [Render documentation](https://render.com/docs/node-version) on Node versions for more information.
:::
@@ -92,4 +92,4 @@ That's it! We're up and running in a few minutes.
Make changes, push to GitHub, and your app automatically redeploys each time. You may deploy to any other hosting provider of your choice as well.
-Check out the Render documentation for more advanced settings, like adding [environment variables](https://docs.render.com/configure-environment-variables) to your app.
+Check out the Render documentation for more advanced settings, like adding [environment variables](https://render.com/docs/configure-environment-variables) to your app.
diff --git a/docs/data/toolpad/studio/index.md b/docs/data/toolpad/studio/index.md
index 2aaaedb27fa..b8d2322b975 100644
--- a/docs/data/toolpad/studio/index.md
+++ b/docs/data/toolpad/studio/index.md
@@ -4,6 +4,6 @@ title: Toolpad Studio docs - Home
# Toolpad Studio
-Toolpad Studio docs
+Toolpad Studio docs.
Low code tool, for developers, powered by MUI.
diff --git a/docs/next-env.d.ts b/docs/next-env.d.ts
index a4a7b3f5cfa..52e831b4342 100644
--- a/docs/next-env.d.ts
+++ b/docs/next-env.d.ts
@@ -2,4 +2,4 @@
///
+
@@ -310,6 +315,9 @@ MyApp.propTypes = {
MyApp.getInitialProps = async ({ ctx, Component }) => {
let pageProps = {};
+ const req = require.context('docs-toolpad/translations', false, /\.\/translations.*\.json$/);
+ const translations = mapTranslations(req);
+
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
@@ -317,6 +325,7 @@ MyApp.getInitialProps = async ({ ctx, Component }) => {
return {
pageProps: {
userLanguage: ctx.query.userLanguage || 'en',
+ translations,
...pageProps,
},
};
diff --git a/docs/pages/toolpad/core/api/page-container-toolbar.js b/docs/pages/toolpad/core/api/account-popover-footer.js
similarity index 76%
rename from docs/pages/toolpad/core/api/page-container-toolbar.js
rename to docs/pages/toolpad/core/api/account-popover-footer.js
index c34ccdc8262..c3052dec403 100644
--- a/docs/pages/toolpad/core/api/page-container-toolbar.js
+++ b/docs/pages/toolpad/core/api/account-popover-footer.js
@@ -1,7 +1,7 @@
import * as React from 'react';
import ApiPage from 'docs/src/modules/components/ApiPage';
import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
-import jsonPageContent from './page-container-toolbar.json';
+import jsonPageContent from './account-popover-footer.json';
export default function Page(props) {
const { descriptions, pageContent } = props;
@@ -10,9 +10,9 @@ export default function Page(props) {
Page.getInitialProps = () => {
const req = require.context(
- 'docs-toolpad/translations/api-docs/page-container-toolbar',
+ 'docs-toolpad/translations/api-docs/account-popover-footer',
false,
- /\.\/page-container-toolbar.*.json$/,
+ /\.\/account-popover-footer.*.json$/,
);
const descriptions = mapApiPageTranslations(req);
diff --git a/docs/pages/toolpad/core/api/account-popover-footer.json b/docs/pages/toolpad/core/api/account-popover-footer.json
new file mode 100644
index 00000000000..a10949e29d7
--- /dev/null
+++ b/docs/pages/toolpad/core/api/account-popover-footer.json
@@ -0,0 +1,19 @@
+{
+ "props": {
+ "sx": {
+ "type": {
+ "name": "union",
+ "description": "Array<func([]);
-
- React.useEffect(() => {
- const importExamples = async () => {
- const exampleContent = await import(`./${examplesFile}`);
- setExamples(exampleContent.default);
- };
- importExamples();
- }, [examplesFile]);
-
- return (
-
- {examples.map((example) => (
-
- ({
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- px: 2,
- pt: 2,
- pb: 1,
- gap: 1.5,
- borderRadius: 1,
- backgroundColor: `${alpha(theme.palette.grey[50], 0.4)}`,
- borderColor: 'divider',
- ...theme.applyStyles('dark', {
- backgroundColor: `${alpha(theme.palette.primary.dark, 0.1)}`,
- borderColor: 'divider',
- }),
- })}
- variant="outlined"
- >
- ({
- height: 0,
- pt: '65%',
- borderRadius: 0.5,
- bgcolor: 'currentColor',
- border: '1px solid',
- borderColor: 'grey.100',
- color: 'grey.100',
- ...theme.applyStyles('dark', {
- borderColor: 'grey.900',
- color: 'primaryDark.900',
- }),
- })}
- />
-
-
- {example.title}
-
-
- {example.description}
-
-
-
-
- Source code
-
-
-
-
- ))}
-
- );
-}
-
-export default Templates;
diff --git a/docs/src/modules/components/ExamplesGrid/core-examples.ts b/docs/src/modules/components/ExamplesGrid/core-examples.ts
deleted file mode 100644
index b99860b01a8..00000000000
--- a/docs/src/modules/components/ExamplesGrid/core-examples.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-export default function examples() {
- return [
- {
- title: 'Tutorial app',
- description:
- 'This app shows you to get started with Toolpad Core and use basic layout and navigation features.',
- src: '/static/toolpad/docs/core/tutorial-1.png',
- href: 'https://mui.com/toolpad/core/introduction/tutorial/',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core-tutorial',
- },
- {
- title: 'Auth.js with Next.js App router',
- description:
- 'This app shows you to how to get started using Toolpad Core with Auth.js and the Next.js App router',
- src: '/static/toolpad/docs/core/auth-next.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs',
- },
- {
- title: 'Auth.js with Next.js Pages router',
- description:
- 'This app shows you to how to get started using Toolpad Core with Auth.js and the Next.js Pages router',
- src: '/static/toolpad/docs/core/auth-next.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs-pages',
- },
- {
- title: 'Vite with React Router',
- description:
- 'This app shows you to how to get started using Toolpad Core with Vite and React Router',
- src: '/static/toolpad/docs/core/vite-react-router.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core-vite',
- },
- ];
-}
diff --git a/docs/src/modules/components/ExamplesGrid/studio-examples.ts b/docs/src/modules/components/ExamplesGrid/studio-examples.ts
deleted file mode 100644
index 9926cdaab7c..00000000000
--- a/docs/src/modules/components/ExamplesGrid/studio-examples.ts
+++ /dev/null
@@ -1,117 +0,0 @@
-export default function examples() {
- return [
- {
- title: 'npm stats',
- description:
- 'This analytics dashboard shows how to track a KPI from a third-party data source.',
- src: '/static/toolpad/docs/studio/examples/npm-stats.png',
- href: 'https://mui.com/toolpad/studio/examples/npm-stats/',
- source: 'https://github.com/mui/toolpad/tree/master/examples/npm-stats',
- },
- {
- title: 'Basic CRUD application',
- description: 'An admin application to showcase how CRUD operations work in Toolpad Studio.',
- src: '/static/toolpad/docs/studio/examples/basic-crud-app.png',
- href: 'https://mui.com/toolpad/studio/examples/basic-crud-app/',
- source: 'https://github.com/mui/toolpad/tree/master/examples/basic-crud-app',
- },
- {
- title: 'QR Code generator',
- description:
- 'A basic Toolpad Studio application that can be used to turn any text or URL into a QR code.',
- src: '/static/toolpad/docs/studio/examples/qr-generator.png',
- href: 'https://mui.com/toolpad/studio/examples/qr-generator/',
- source: 'https://github.com/mui/toolpad/tree/master/examples/qr-generator',
- },
- {
- title: 'With Prisma',
- description:
- 'A basic Toolpad Studio application that demonstrates how to integrate with Prisma.',
- src: '/static/toolpad/marketing/with-prisma-hero.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/with-prisma',
- source: 'https://github.com/mui/toolpad/tree/master/examples/with-prisma',
- },
- {
- title: 'Google Sheet',
- description: 'Quickly fetch data from Google Sheets to build a Toolpad Studio app.',
- src: '/static/toolpad/marketing/google-sheet.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/google-sheet',
- source: 'https://github.com/mui/toolpad/tree/master/examples/google-sheet',
- },
- {
- title: 'Dog app',
- description: 'An app that shows dog images based on selected breeds or sub-breeds.',
- src: '/static/toolpad/docs/studio/getting-started/first-app/step-13.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/dog-app',
- source: 'https://github.com/mui/toolpad/tree/master/examples/dog-app',
- },
- {
- title: 'Customized data grid',
- description:
- 'A basic Toolpad Studio app that shows how to customize a data grid column using a custom code component.',
- src: '/static/toolpad/marketing/custom-datagrid-column.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/custom-datagrid-column',
- source: 'https://github.com/mui/toolpad/tree/master/examples/custom-datagrid-column',
- },
- {
- title: 'GraphQL app',
- description: 'An app that shows latest 100 stargazers info for any GitHub repository.',
- src: '/static/toolpad/marketing/graphql.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/graphql',
- source: 'https://github.com/mui/toolpad/tree/master/examples/graphql',
- },
- {
- title: 'With WASM',
- description:
- 'A basic Toolpad Studio application that demonstrates integrating with WASM modules.',
- src: '/static/toolpad/marketing/with-wasm.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/with-wasm',
- source: 'https://github.com/mui/toolpad/tree/master/examples/with-wasm',
- },
- {
- title: 'Data provider with prisma',
- description:
- 'A basic Toolpad Studio application that demonstrates how to use data providers with Prisma.',
- src: '/static/toolpad/marketing/with-prisma-data-provider.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/with-prisma-data-provider',
- source: 'https://github.com/mui/toolpad/tree/master/examples/with-prisma-data-provider',
- },
- {
- title: 'With Supabase',
- description:
- 'A Toolpad Studio app that fetches data from Supabase and shows it in a list component.',
- src: '/static/toolpad/marketing/supabase.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/supabase',
- source: 'https://github.com/mui/toolpad/tree/master/examples/supabase',
- },
- {
- title: 'Stripe invoice downloader',
- description: 'A Stripe app to fetch and download invoices.',
- src: '/static/toolpad/marketing/stripe-script.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/stripe-script',
- source: 'https://github.com/mui/toolpad/tree/master/examples/stripe-script',
- },
- {
- title: 'Charts',
- description:
- 'A basic Toolpad Studio application that demonstrates how to use chart component.',
- src: '/static/toolpad/marketing/charts.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/charts',
- source: 'https://github.com/mui/toolpad/tree/master/examples/charts',
- },
- {
- title: 'Google Authentication',
- description: 'An app that shows how to set up Google authentication in Toolpad Studio.',
- src: '/static/toolpad/marketing/auth-google.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/auth-google',
- source: 'https://github.com/mui/toolpad/tree/master/examples/auth-google',
- },
- {
- title: 'Custom server',
- description: 'An app that shows how to use Toolpad Studio with a custom server.',
- src: '/static/toolpad/marketing/custom-server.png',
- href: 'https://github.com/mui/toolpad/tree/master/examples/custom-server',
- source: 'https://github.com/mui/toolpad/tree/master/examples/custom-server',
- },
- ];
-}
diff --git a/docs/src/modules/components/SchemaReference.tsx b/docs/src/modules/components/SchemaReference.tsx
index 8ceceb0aab8..f8aa3d78179 100644
--- a/docs/src/modules/components/SchemaReference.tsx
+++ b/docs/src/modules/components/SchemaReference.tsx
@@ -1,4 +1,5 @@
import * as React from 'react';
+import { useTranslate } from '@mui/docs/i18n';
import { MarkdownElement } from '@mui/docs/MarkdownElement';
import AppLayoutDocs from '@mui/monorepo/docs/src/modules/components/AppLayoutDocs';
import Ad from '@mui/monorepo/docs/src/modules/components/Ad';
@@ -154,6 +155,8 @@ interface JsonSchemaTypeDisplayProps {
}
function JsonSchemaTypeDisplay({ schema, open, onOpenChange }: JsonSchemaTypeDisplayProps) {
+ const t = useTranslate();
+
let types: string[] = [];
if (typeof schema.const !== 'undefined') {
return (
@@ -182,19 +185,19 @@ function JsonSchemaTypeDisplay({ schema, open, onOpenChange }: JsonSchemaTypeDis
if (schema.type === 'object') {
return (
- object
+ {t('object').toLowerCase()}
);
}
if (schema.type === 'array') {
- return array of ;
+ return {t('arrayOf').toLowerCase()} ;
}
if (schema.anyOf) {
return (
- any of{' '}
+ {t('anyOf').toLowerCase()}{' '}
);
}
@@ -471,6 +474,8 @@ const description = 'An exhaustive reference for the Toolpad Studio file formats
export default function SchemaReference(props: SchemaReferenceProps) {
const { definitions, disableAd, location } = props;
+ const t = useTranslate();
+
const toc = [
{
text: 'Files',
@@ -502,12 +507,12 @@ export default function SchemaReference(props: SchemaReferenceProps) {
disableAd={disableAd}
disableToc={false}
location={location}
- title="Schema reference"
+ title={t('schemaReference')}
toc={toc}
>
- Schema reference
+ {t('schemaReference')}
+ {examples.map((example: Example) => {
+ const computedSrc =
+ docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src;
+ return (
+
+
+ {example.title}
+ {example.new &&
+
+ {example.description}
+
+
+
+
+ {example.stackBlitz === true ? (
+
+
+
+
+
+
+ ) : null}
+ {example.codeSandbox === true ? (
+
+
+
+
+
+
+ ) : null}
+
+
+
+
+
+
+
+
+ );
+ })}
+
+ );
+}
diff --git a/docs/src/modules/components/examples/ExamplesGrid.tsx b/docs/src/modules/components/examples/ExamplesGrid.tsx
new file mode 100644
index 00000000000..d6f61cc194a
--- /dev/null
+++ b/docs/src/modules/components/examples/ExamplesGrid.tsx
@@ -0,0 +1,148 @@
+import * as React from 'react';
+import { useTranslate } from '@mui/docs/i18n';
+import Card from '@mui/material/Card';
+import CardActions from '@mui/material/CardActions';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import { alpha, useTheme } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Stack from '@mui/material/Stack';
+import SvgIcon from '@mui/material/SvgIcon';
+import { Example, versionGitHubLink } from './examplesUtils';
+
+interface ExamplesGridProps {
+ examples: Example[];
+}
+
+function StackBlitzIcon() {
+ return (
+
+
+ );
+}
+
+function CodeSandboxIcon() {
+ return (
+
+
+ );
+}
+
+export default function ExamplesGrid(props: ExamplesGridProps) {
+ const t = useTranslate();
+
+ const examples = props.examples.filter((example: Example) => example.featured !== true);
+ const docsTheme = useTheme();
+
+ return (
+
+ {examples.map((example) => {
+ const computedSrc =
+ docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src;
+ return (
+
+ ({
+ height: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ px: 2,
+ pt: 2,
+ pb: 1,
+ gap: 1.5,
+ borderRadius: 1,
+ backgroundColor: `${alpha(theme.palette.grey[50], 0.4)}`,
+ borderColor: 'divider',
+ ...theme.applyStyles('dark', {
+ backgroundColor: `${alpha(theme.palette.primary.dark, 0.1)}`,
+ borderColor: 'divider',
+ }),
+ })}
+ variant="outlined"
+ >
+ ({
+ height: 0,
+ pt: '65%',
+ borderRadius: 0.5,
+ bgcolor: 'currentColor',
+ border: '1px solid',
+ borderColor: 'grey.100',
+ color: 'grey.100',
+ ...theme.applyStyles('dark', {
+ borderColor: 'grey.900',
+ color: 'primaryDark.900',
+ }),
+ })}
+ />
+
+
+ {example.title}
+
+
+ {example.description}
+
+
+
+
+ {t('source')}
+
+
+ {example.stackBlitz === true ? (
+
+
+
+
+ ) : null}
+ {example.codeSandbox === true ? (
+
+
+
+
+ ) : null}
+
+
+
+
+ );
+ })}
+
+ );
+}
diff --git a/docs/src/modules/components/examples/StudioExamples.tsx b/docs/src/modules/components/examples/StudioExamples.tsx
new file mode 100644
index 00000000000..92adacac090
--- /dev/null
+++ b/docs/src/modules/components/examples/StudioExamples.tsx
@@ -0,0 +1,137 @@
+import * as React from 'react';
+import ExamplesGrid from 'docs-toolpad/src/modules/components/examples/ExamplesGrid';
+import type { Example } from './examplesUtils';
+
+const examples = [
+ {
+ title: 'npm stats',
+ description:
+ 'This analytics dashboard shows how to track a KPI from a third-party data source.',
+ src: '/static/toolpad/docs/studio/examples/npm-stats.png',
+ srcDark: '/static/toolpad/docs/studio/examples/npm-stats.png', // TODO fix
+ href: 'https://mui.com/toolpad/studio/examples/npm-stats/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/npm-stats/',
+ },
+ {
+ title: 'Basic CRUD application',
+ description: 'An admin application to showcase how CRUD operations work in Toolpad Studio.',
+ src: '/static/toolpad/docs/studio/examples/basic-crud-app.png',
+ srcDark: '/static/toolpad/docs/studio/examples/basic-crud-app.png', // TODO fix
+ href: 'https://mui.com/toolpad/studio/examples/basic-crud-app/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/basic-crud-app/',
+ },
+ {
+ title: 'QR Code generator',
+ description:
+ 'A basic Toolpad Studio application that can be used to turn any text or URL into a QR code.',
+ src: '/static/toolpad/docs/studio/examples/qr-generator.png',
+ srcDark: '/static/toolpad/docs/studio/examples/qr-generator.png', // TODO fix
+ href: 'https://mui.com/toolpad/studio/examples/qr-generator/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/qr-generator/',
+ },
+ {
+ title: 'With Prisma',
+ description:
+ 'A basic Toolpad Studio application that demonstrates how to integrate with Prisma.',
+ src: '/static/toolpad/marketing/with-prisma-hero.png',
+ srcDark: '/static/toolpad/marketing/with-prisma-hero.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/with-prisma/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/with-prisma/',
+ },
+ {
+ title: 'Google Sheet',
+ description: 'Quickly fetch data from Google Sheets to build a Toolpad Studio app.',
+ src: '/static/toolpad/marketing/google-sheet.png',
+ srcDark: '/static/toolpad/marketing/google-sheet.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/google-sheet/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/google-sheet/',
+ },
+ {
+ title: 'Dog app',
+ description: 'An app that shows dog images based on selected breeds or sub-breeds.',
+ src: '/static/toolpad/docs/studio/getting-started/first-app/step-13.png',
+ srcDark: '/static/toolpad/docs/studio/getting-started/first-app/step-13.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/dog-app/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/dog-app/',
+ },
+ {
+ title: 'Customized data grid',
+ description:
+ 'A basic Toolpad Studio app that shows how to customize a data grid column using a custom code component.',
+ src: '/static/toolpad/marketing/custom-datagrid-column.png',
+ srcDark: '/static/toolpad/marketing/custom-datagrid-column.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/custom-datagrid-column',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/custom-datagrid-column/',
+ },
+ {
+ title: 'GraphQL app',
+ description: 'An app that shows latest 100 stargazers info for any GitHub repository.',
+ src: '/static/toolpad/marketing/graphql.png',
+ srcDark: '/static/toolpad/marketing/graphql.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/graphql/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/graphql/',
+ },
+ {
+ title: 'With WASM',
+ description:
+ 'A basic Toolpad Studio application that demonstrates integrating with WASM modules.',
+ src: '/static/toolpad/marketing/with-wasm.png',
+ srcDark: '/static/toolpad/marketing/with-wasm.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/with-wasm/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/with-wasm/',
+ },
+ {
+ title: 'Data provider with prisma',
+ description:
+ 'A basic Toolpad Studio application that demonstrates how to use data providers with Prisma.',
+ src: '/static/toolpad/marketing/with-prisma-data-provider.png',
+ srcDark: '/static/toolpad/marketing/with-prisma-data-provider.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/with-prisma-data-provider/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/with-prisma-data-provider/',
+ },
+ {
+ title: 'With Supabase',
+ description:
+ 'A Toolpad Studio app that fetches data from Supabase and shows it in a list component.',
+ src: '/static/toolpad/marketing/supabase.png',
+ srcDark: '/static/toolpad/marketing/supabase.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/supabase/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/supabase/',
+ },
+ {
+ title: 'Stripe invoice downloader',
+ description: 'A Stripe app to fetch and download invoices.',
+ src: '/static/toolpad/marketing/stripe-script.png',
+ srcDark: '/static/toolpad/marketing/stripe-script.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/stripe-script/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/stripe-script/',
+ },
+ {
+ title: 'Charts',
+ description: 'A basic Toolpad Studio application that demonstrates how to use chart component.',
+ src: '/static/toolpad/marketing/charts.png',
+ srcDark: '/static/toolpad/marketing/charts.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/charts/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/charts/',
+ },
+ {
+ title: 'Google Authentication',
+ description: 'An app that shows how to set up Google authentication in Toolpad Studio.',
+ src: '/static/toolpad/marketing/auth-google.png',
+ srcDark: '/static/toolpad/marketing/auth-google.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/auth-google/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/auth-google/',
+ },
+ {
+ title: 'Custom server',
+ description: 'An app that shows how to use Toolpad Studio with a custom server.',
+ src: '/static/toolpad/marketing/custom-server.png',
+ srcDark: '/static/toolpad/marketing/custom-server.png', // TODO fix
+ href: 'https://github.com/mui/toolpad/tree/master/examples/studio/custom-server/',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/studio/custom-server/',
+ },
+] satisfies Example[];
+
+export default function StudioExamples() {
+ return color=\"error\""
+ },
+ "colorInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"info\""
+ },
+ "colorInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"inherit\""
+ },
+ "colorPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"primary\""
+ },
+ "colorSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"secondary\""
+ },
+ "colorSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"success\""
+ },
+ "colorWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"warning\""
+ },
+ "contained": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\""
+ },
+ "containedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "disabled": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disabled={true}"
+ },
+ "disableElevation": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disableElevation={true}"
+ },
+ "endIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the endIcon element",
+ "conditions": "supplied"
+ },
+ "focusVisible": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the ButtonBase root element",
+ "conditions": "the button is keyboard focused"
+ },
+ "fullWidth": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "fullWidth={true}"
+ },
+ "icon": { "description": "Styles applied to the icon element if supplied" },
+ "iconSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"large\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"small\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlined": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\""
+ },
+ "outlinedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "root": { "description": "Styles applied to the root element." },
+ "sizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\""
+ },
+ "sizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\""
+ },
+ "sizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\""
+ },
+ "startIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the startIcon element",
+ "conditions": "supplied"
+ },
+ "text": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\""
+ },
+ "textError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ }
+ }
+}
diff --git a/docs/translations/api-docs/sign-in-page/sign-in-page.json b/docs/translations/api-docs/sign-in-page/sign-in-page.json
index 066ea0ed30d..de36472fb55 100644
--- a/docs/translations/api-docs/sign-in-page/sign-in-page.json
+++ b/docs/translations/api-docs/sign-in-page/sign-in-page.json
@@ -11,14 +11,20 @@
}
},
"slotProps": { "description": "The props used for each slot inside." },
- "slots": { "description": "The components used for each slot inside." }
+ "slots": { "description": "The components used for each slot inside." },
+ "sx": {
+ "description": "The prop used to customize the styles on the SignInPage container"
+ }
},
"classDescriptions": {},
"slotDescriptions": {
"emailField": "The custom email field component used in the credentials form.",
"forgotPasswordLink": "The custom forgot password link component used in the credentials form.",
"passwordField": "The custom password field component used in the credentials form.",
+ "rememberMe": "A component to override the default "Remember me" checkbox in the Credentials form",
"signUpLink": "The custom sign up link component used in the credentials form.",
- "submitButton": "The custom submit button component used in the credentials form."
+ "submitButton": "The custom submit button component used in the credentials form.",
+ "subtitle": "A component to override the default subtitle section",
+ "title": "A component to override the default title section"
}
}
diff --git a/docs/translations/api-docs/sign-out-button/sign-out-button.json b/docs/translations/api-docs/sign-out-button/sign-out-button.json
new file mode 100644
index 00000000000..77a6eff5224
--- /dev/null
+++ b/docs/translations/api-docs/sign-out-button/sign-out-button.json
@@ -0,0 +1,301 @@
+{
+ "componentDescription": "",
+ "propDescriptions": { "children": { "description": "The content of the component." } },
+ "classDescriptions": {
+ "colorError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"error\""
+ },
+ "colorInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"info\""
+ },
+ "colorInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"inherit\""
+ },
+ "colorPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"primary\""
+ },
+ "colorSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"secondary\""
+ },
+ "colorSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"success\""
+ },
+ "colorWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "color=\"warning\""
+ },
+ "contained": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\""
+ },
+ "containedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"contained\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-contained classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "containedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"contained\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-contained and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "disabled": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disabled={true}"
+ },
+ "disableElevation": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "disableElevation={true}"
+ },
+ "endIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the endIcon element",
+ "conditions": "supplied"
+ },
+ "focusVisible": {
+ "description": "State class applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the ButtonBase root element",
+ "conditions": "the button is keyboard focused"
+ },
+ "fullWidth": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "fullWidth={true}"
+ },
+ "icon": { "description": "Styles applied to the icon element if supplied" },
+ "iconSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"large\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeLarge classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"medium\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeMedium classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "iconSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the icon element",
+ "conditions": "supplied and size=\"small\"",
+ "deprecationInfo": "Combine the .MuiButton-icon and .MuiButtonSizeSmall classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlined": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\""
+ },
+ "outlinedError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"outlined\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-outlined classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "outlinedWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"outlined\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-outlined and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "root": { "description": "Styles applied to the root element." },
+ "sizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\""
+ },
+ "sizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\""
+ },
+ "sizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\""
+ },
+ "startIcon": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the startIcon element",
+ "conditions": "supplied"
+ },
+ "text": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\""
+ },
+ "textError": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"error\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorError classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInfo": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"info\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInfo classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textInherit": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"inherit\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorInherit classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textPrimary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"primary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorPrimary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSecondary": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"secondary\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSecondary classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeLarge": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"large\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeLarge and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeMedium": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"medium\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeMedium and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSizeSmall": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "size=\"small\" and variant=\"text\"",
+ "deprecationInfo": "Combine the .MuiButton-sizeSmall and .MuiButton-text classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textSuccess": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"success\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorSuccess classes instead. See Migrating from deprecated APIs for more details."
+ },
+ "textWarning": {
+ "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "variant=\"text\" and color=\"warning\"",
+ "deprecationInfo": "Combine the .MuiButton-text and .MuiButton-colorWarning classes instead. See Migrating from deprecated APIs for more details."
+ }
+ }
+}
diff --git a/docs/translations/api-docs/theme-switcher/theme-switcher.json b/docs/translations/api-docs/theme-switcher/theme-switcher.json
new file mode 100644
index 00000000000..f93d4cbd8c7
--- /dev/null
+++ b/docs/translations/api-docs/theme-switcher/theme-switcher.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/api-docs/toolbar-actions/toolbar-actions.json b/docs/translations/api-docs/toolbar-actions/toolbar-actions.json
new file mode 100644
index 00000000000..f93d4cbd8c7
--- /dev/null
+++ b/docs/translations/api-docs/toolbar-actions/toolbar-actions.json
@@ -0,0 +1 @@
+{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 0967ef424bc..ec93f1ea90c 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -1 +1,11 @@
-{}
+{
+ "anyOf": "Any of",
+ "arrayOf": "Array of",
+ "codesandboxPlayground": "CodeSandbox playground",
+ "livePreview": "Live preview",
+ "object": "Object",
+ "schemaReference": "Schema reference",
+ "seeLivePreview": "See live preview",
+ "source": "Source",
+ "stackblitzPlayground": "StackBlitz playground"
+}
diff --git a/eslintWebpackResolverConfig.js b/eslintWebpackResolverConfig.js
index eed621fd384..c0f97db54d3 100644
--- a/eslintWebpackResolverConfig.js
+++ b/eslintWebpackResolverConfig.js
@@ -17,6 +17,7 @@ module.exports = {
'@toolpad/studio-runtime': path.resolve(__dirname, './packages/toolpad-studio-runtime/src'),
'@toolpad/utils': path.resolve(__dirname, './packages/toolpad-utils/src'),
'@toolpad/core': path.resolve(__dirname, './packages/toolpad-core/src'),
+ '@toolpad/studio-tests': path.resolve(__dirname, './test'),
docs: path.resolve(__dirname, './node_modules/@mui/monorepo/docs'),
'docs-toolpad': path.resolve(__dirname, './docs'),
},
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/.eslintrc.json b/examples/core/auth-nextjs-email/.eslintrc.json
similarity index 100%
rename from examples/core-auth-nextjs-pages-nextauth-4/.eslintrc.json
rename to examples/core/auth-nextjs-email/.eslintrc.json
diff --git a/examples/core/auth-nextjs-email/.gitignore b/examples/core/auth-nextjs-email/.gitignore
new file mode 100644
index 00000000000..68c5d18f00d
--- /dev/null
+++ b/examples/core/auth-nextjs-email/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/examples/core/auth-nextjs-email/Dockerfile b/examples/core/auth-nextjs-email/Dockerfile
new file mode 100644
index 00000000000..a79b85781fd
--- /dev/null
+++ b/examples/core/auth-nextjs-email/Dockerfile
@@ -0,0 +1,45 @@
+# Use Node.js 20 Alpine as the base image
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy all files
+COPY . .
+
+# Build the Next.js app
+RUN npm run build
+
+# Start a new stage for a smaller final image
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+# Copy built assets from the builder stage
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+COPY --from=builder /app/src/prisma ./prisma
+
+# Set environment variables
+ENV NODE_ENV production
+ENV PORT 3000
+
+# Copy the entrypoint script
+COPY entrypoint.sh /entrypoint.sh
+RUN chmod +x /entrypoint.sh
+
+# Set the entrypoint
+ENTRYPOINT ["/entrypoint.sh"]
+
+# Expose the port Next.js runs on
+EXPOSE 3000
+
+# Run the Next.js app
+CMD ["npm", "start"]
diff --git a/examples/core/auth-nextjs-email/README.md b/examples/core/auth-nextjs-email/README.md
new file mode 100644
index 00000000000..ef8a4f3cdce
--- /dev/null
+++ b/examples/core/auth-nextjs-email/README.md
@@ -0,0 +1,72 @@
+# Toolpad Core - Next.js App Router app with email provider
+
+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
+
+1. You need to have a Postgres database running. You can use the following docker command to start a Postgres database:
+
+```bash
+docker run --name postgres -e POSTGRES_PASSWORD=postgres -p 5432:5432 -d postgres
+```
+
+2. For the database created above, the connection string is `postgresql://postgres:postgres@localhost:5432/postgres`.
+
+3. Update the `DATABASE_URL` environment variable in the `.env` file with the connection string for the database you created above.
+
+4. Then, generate the Prisma Client:
+
+```bash
+npx prisma migrate dev --schema=./src/prisma/schema.prisma
+```
+
+5. You also need to supply the following enviroment variables for the email server to work:
+
+```bash
+EMAIL_SERVER_HOST=
+EMAIL_SERVER_PORT=
+EMAIL_SERVER_USER=
+EMAIL_SERVER_PASSWORD=
+EMAIL_FROM=
+```
+
+6. Finally, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+7. Open [http://localhost:3000](http://localhost:3000) with your browser to see the app running.
+
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-email
+# or
+pnpm dlx create-toolpad-app@latest --example auth-nextjs-email
+```
+
+and follow the instructions in the terminal.
+
+## 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.
diff --git a/examples/core/auth-nextjs-email/docker-compose.yml b/examples/core/auth-nextjs-email/docker-compose.yml
new file mode 100644
index 00000000000..29b8ce23cc1
--- /dev/null
+++ b/examples/core/auth-nextjs-email/docker-compose.yml
@@ -0,0 +1,52 @@
+version: '3.8'
+
+services:
+ app:
+ build:
+ context: .
+ dockerfile: Dockerfile
+ ports:
+ - '3000:3000'
+ environment:
+ - DATABASE_URL=${DATABASE_URL}
+ - AUTH_URL=${AUTH_URL}
+ - AUTH_TRUST_HOST=true
+ - NODE_ENV=production
+ - GITHUB_CLIENT_ID=${GITHUB_CLIENT_ID}
+ - GITHUB_CLIENT_SECRET=${GITHUB_CLIENT_SECRET}
+ - AUTH_SECRET=${AUTH_SECRET}
+ - EMAIL_SERVER_HOST=${EMAIL_SERVER_HOST}
+ - EMAIL_SERVER_PORT=${EMAIL_SERVER_PORT}
+ - EMAIL_SERVER_USER=${EMAIL_SERVER_USER}
+ - EMAIL_SERVER_PASSWORD=${EMAIL_SERVER_PASSWORD}
+ - EMAIL_FROM=${EMAIL_FROM}
+ depends_on:
+ db:
+ condition: service_healthy
+ networks:
+ - app-network
+
+ db:
+ image: postgres:13
+ environment:
+ - POSTGRES_USER=${POSTGRES_USER}
+ - POSTGRES_PASSWORD=${POSTGRES_PASSWORD}
+ - POSTGRES_DB=${POSTGRES_DB}
+ ports:
+ - '${POSTGRES_PORT}:5432'
+ volumes:
+ - postgres_data:/var/lib/postgresql/data
+ healthcheck:
+ test: ['CMD-SHELL', 'pg_isready -U ${POSTGRES_USER} -d ${POSTGRES_DB}']
+ interval: 5s
+ timeout: 5s
+ retries: 5
+ networks:
+ - app-network
+
+volumes:
+ postgres_data:
+
+networks:
+ app-network:
+ driver: bridge
diff --git a/examples/core/auth-nextjs-email/entrypoint.sh b/examples/core/auth-nextjs-email/entrypoint.sh
new file mode 100644
index 00000000000..3b20a40d898
--- /dev/null
+++ b/examples/core/auth-nextjs-email/entrypoint.sh
@@ -0,0 +1,14 @@
+#!/bin/sh
+
+# Wait for the database to be ready
+until nc -z db 5432; do
+ echo "Waiting for database to be ready..."
+ sleep 2
+done
+
+# Run migrations
+npx prisma migrate deploy
+npx prisma generate
+
+# Start the application
+exec npm start
\ No newline at end of file
diff --git a/examples/core-tutorial/next-env.d.ts b/examples/core/auth-nextjs-email/next-env.d.ts
similarity index 100%
rename from examples/core-tutorial/next-env.d.ts
rename to examples/core/auth-nextjs-email/next-env.d.ts
diff --git a/examples/core-auth-nextjs/next.config.mjs b/examples/core/auth-nextjs-email/next.config.mjs
similarity index 100%
rename from examples/core-auth-nextjs/next.config.mjs
rename to examples/core/auth-nextjs-email/next.config.mjs
diff --git a/examples/core/auth-nextjs-email/package.json b/examples/core/auth-nextjs-email/package.json
new file mode 100644
index 00000000000..90f0cc9e6b8
--- /dev/null
+++ b/examples/core/auth-nextjs-email/package.json
@@ -0,0 +1,33 @@
+{
+ "name": "playground-nextjs-email",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "@emotion/react": "^11",
+ "@emotion/styled": "^11",
+ "@mui/icons-material": "^6",
+ "@mui/material": "^6",
+ "@mui/material-nextjs": "^6",
+ "@toolpad/core": "latest",
+ "@prisma/client": "^5",
+ "@auth/prisma-adapter": "^2",
+ "next": "^15",
+ "next-auth": "5.0.0-beta.25",
+ "nodemailer": "^6",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0"
+ },
+ "devDependencies": {
+ "typescript": "^5",
+ "@types/node": "^20.17.12",
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
+ "eslint": "^8",
+ "prisma": "^5",
+ "eslint-config-next": "^15"
+ }
+}
diff --git a/examples/core/auth-nextjs-email/src/app/(dashboard)/layout.tsx b/examples/core/auth-nextjs-email/src/app/(dashboard)/layout.tsx
new file mode 100644
index 00000000000..e481f628f1c
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/app/(dashboard)/layout.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+
+export default function DashboardPagesLayout(props: { children: React.ReactNode }) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/examples/core/auth-nextjs-email/src/app/(dashboard)/orders/page.tsx b/examples/core/auth-nextjs-email/src/app/(dashboard)/orders/page.tsx
new file mode 100644
index 00000000000..53104a52d33
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/app/(dashboard)/orders/page.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
+import { auth } from '../../../auth';
+
+export default async function OrdersPage() {
+ const session = await auth();
+ const currentUrl =
+ (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
+
+ if (!session) {
+ // Get the current URL to redirect to signIn with `callbackUrl`
+ const redirectUrl = new URL('/auth/signin', currentUrl);
+ redirectUrl.searchParams.set('callbackUrl', currentUrl);
+
+ redirect(redirectUrl.toString());
+ }
+ return Welcome to the Toolpad orders! ;
+}
diff --git a/examples/core/auth-nextjs-email/src/app/(dashboard)/page.tsx b/examples/core/auth-nextjs-email/src/app/(dashboard)/page.tsx
new file mode 100644
index 00000000000..d5ff3334cd2
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/app/(dashboard)/page.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
+import { auth } from '../../auth';
+
+export default async function HomePage() {
+ const session = await auth();
+ const currentUrl =
+ (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
+
+ if (!session) {
+ // Get the current URL to redirect to signIn with `callbackUrl`
+ const redirectUrl = new URL('/auth/signin', currentUrl);
+ redirectUrl.searchParams.set('callbackUrl', currentUrl);
+
+ redirect(redirectUrl.toString());
+ }
+ return (
+
+ Welcome to Toolpad, {session?.user?.name || session?.user?.email || 'User'}!
+
+ );
+}
diff --git a/examples/core-auth-nextjs-pages/src/app/api/auth/[...nextauth]/route.ts b/examples/core/auth-nextjs-email/src/app/api/auth/[...nextauth]/route.ts
similarity index 100%
rename from examples/core-auth-nextjs-pages/src/app/api/auth/[...nextauth]/route.ts
rename to examples/core/auth-nextjs-email/src/app/api/auth/[...nextauth]/route.ts
diff --git a/examples/core/auth-nextjs-email/src/app/auth/signin/actions.ts b/examples/core/auth-nextjs-email/src/app/auth/signin/actions.ts
new file mode 100644
index 00000000000..7672bd32886
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/app/auth/signin/actions.ts
@@ -0,0 +1,47 @@
+'use server';
+import { AuthError } from 'next-auth';
+import type { AuthProvider } from '@toolpad/core';
+import { signIn as signInAction } from '../../../auth';
+
+async function signIn(provider: AuthProvider, formData: FormData, callbackUrl?: string) {
+ try {
+ return await signInAction(provider.id, {
+ ...(formData && { email: formData.get('email'), password: formData.get('password') }),
+ redirectTo: callbackUrl ?? '/',
+ });
+ } catch (error) {
+ // The desired flow for successful sign in in all cases
+ // and unsuccessful sign in for OAuth providers will cause a `redirect`,
+ // and `redirect` is a throwing function, so we need to re-throw
+ // to allow the redirect to happen
+ // Source: https://github.com/vercel/next.js/issues/49298#issuecomment-1542055642
+ // Detect a `NEXT_REDIRECT` error and re-throw it
+ if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
+ // For the nodemailer provider, we want to return a success message
+ // instead of redirecting to a `verify-request` page
+ if (provider.id === 'nodemailer' && (error as any).digest?.includes('verify-request')) {
+ return {
+ success: 'Check your email for a verification link.',
+ };
+ }
+ throw error;
+ }
+ // Handle Auth.js errors
+ if (error instanceof AuthError) {
+ return {
+ error:
+ error.type === 'CredentialsSignin'
+ ? 'Invalid credentials.'
+ : 'An error with Auth.js occurred.',
+ type: error.type,
+ };
+ }
+ // An error boundary must exist to handle unknown errors
+ return {
+ error: 'Something went wrong.',
+ type: 'UnknownError',
+ };
+ }
+}
+
+export default signIn;
diff --git a/examples/core/auth-nextjs-email/src/app/auth/signin/page.tsx b/examples/core/auth-nextjs-email/src/app/auth/signin/page.tsx
new file mode 100644
index 00000000000..e1838f9807e
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/app/auth/signin/page.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { providerMap } from '../../../auth';
+import signIn from './actions';
+
+export default function SignIn() {
+ return (
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-email/src/app/layout.tsx b/examples/core/auth-nextjs-email/src/app/layout.tsx
new file mode 100644
index 00000000000..cfc6d97e016
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/app/layout.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { NextAppProvider } from '@toolpad/core/nextjs';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import type { Navigation } from '@toolpad/core';
+import { SessionProvider, signIn, signOut } from 'next-auth/react';
+import { auth } from '../auth';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ segment: '',
+ title: 'Dashboard',
+ icon:
+
+
+ {props.children}
+
+
+
+
+
+ );
+}
diff --git a/examples/core-auth-nextjs/src/app/(dashboard)/layout.tsx b/examples/core/auth-nextjs-email/src/app/public/layout.tsx
similarity index 100%
rename from examples/core-auth-nextjs/src/app/(dashboard)/layout.tsx
rename to examples/core/auth-nextjs-email/src/app/public/layout.tsx
diff --git a/examples/core-auth-nextjs/src/app/public/page.tsx b/examples/core/auth-nextjs-email/src/app/public/page.tsx
similarity index 100%
rename from examples/core-auth-nextjs/src/app/public/page.tsx
rename to examples/core/auth-nextjs-email/src/app/public/page.tsx
diff --git a/examples/core/auth-nextjs-email/src/auth.ts b/examples/core/auth-nextjs-email/src/auth.ts
new file mode 100644
index 00000000000..af08addd63f
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/auth.ts
@@ -0,0 +1,66 @@
+import NextAuth from 'next-auth';
+import GitHub from 'next-auth/providers/github';
+
+import Nodemailer from 'next-auth/providers/nodemailer';
+import { PrismaAdapter } from '@auth/prisma-adapter';
+import type { Provider } from 'next-auth/providers';
+import { prisma } from './prisma';
+
+const providers: Provider[] = [
+ GitHub({
+ clientId: process.env.GITHUB_CLIENT_ID,
+ clientSecret: process.env.GITHUB_CLIENT_SECRET,
+ }),
+ Nodemailer({
+ server: {
+ host: process.env.EMAIL_SERVER_HOST,
+ port: process.env.EMAIL_SERVER_PORT,
+ auth: {
+ user: process.env.EMAIL_SERVER_USER,
+ pass: process.env.EMAIL_SERVER_PASSWORD,
+ },
+ secure: true,
+ },
+ from: process.env.EMAIL_FROM,
+ }),
+];
+
+export const providerMap = providers.map((provider) => {
+ if (typeof provider === 'function') {
+ const providerData = provider();
+ return {
+ id: providerData.id,
+ name: providerData.name,
+ };
+ }
+ return { id: provider.id, name: provider.name };
+});
+
+if (!process.env.GITHUB_CLIENT_ID) {
+ console.warn('Missing environment variable "GITHUB_CLIENT_ID"');
+}
+if (!process.env.GITHUB_CLIENT_SECRET) {
+ console.warn('Missing environment variable "GITHUB_CLIENT_ID"');
+}
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers,
+ adapter: PrismaAdapter(prisma),
+ session: { strategy: 'jwt' },
+ secret: process.env.AUTH_SECRET,
+ pages: {
+ signIn: '/auth/signin',
+ },
+ callbacks: {
+ authorized({ auth: session, request: { nextUrl } }) {
+ const isLoggedIn = !!session?.user;
+ const isPublicPage = nextUrl.pathname.startsWith('/public');
+
+ if (isPublicPage || isLoggedIn) {
+ return true;
+ }
+
+ return false; // Redirect unauthenticated users to login page
+ },
+ },
+});
diff --git a/examples/core/auth-nextjs-email/src/prisma.ts b/examples/core/auth-nextjs-email/src/prisma.ts
new file mode 100644
index 00000000000..ee2f97d763c
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/prisma.ts
@@ -0,0 +1,9 @@
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+export const prisma = globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') {
+ globalForPrisma.prisma = prisma;
+}
diff --git a/examples/core/auth-nextjs-email/src/prisma/migrations/20240913094851_init/migration.sql b/examples/core/auth-nextjs-email/src/prisma/migrations/20240913094851_init/migration.sql
new file mode 100644
index 00000000000..9a11d832759
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/prisma/migrations/20240913094851_init/migration.sql
@@ -0,0 +1,61 @@
+-- CreateTable
+CREATE TABLE "User" (
+ "id" TEXT NOT NULL,
+ "name" TEXT,
+ "email" TEXT NOT NULL,
+ "emailVerified" TIMESTAMP(3),
+ "image" TEXT,
+ "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updatedAt" TIMESTAMP(3) NOT NULL,
+
+ CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Account" (
+ "userId" TEXT NOT NULL,
+ "type" TEXT NOT NULL,
+ "provider" TEXT NOT NULL,
+ "providerAccountId" TEXT NOT NULL,
+ "refresh_token" TEXT,
+ "access_token" TEXT,
+ "expires_at" INTEGER,
+ "token_type" TEXT,
+ "scope" TEXT,
+ "id_token" TEXT,
+ "session_state" TEXT,
+ "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updatedAt" TIMESTAMP(3) NOT NULL,
+
+ CONSTRAINT "Account_pkey" PRIMARY KEY ("provider","providerAccountId")
+);
+
+-- CreateTable
+CREATE TABLE "Session" (
+ "sessionToken" TEXT NOT NULL,
+ "userId" TEXT NOT NULL,
+ "expires" TIMESTAMP(3) NOT NULL,
+ "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+ "updatedAt" TIMESTAMP(3) NOT NULL
+);
+
+-- CreateTable
+CREATE TABLE "VerificationToken" (
+ "identifier" TEXT NOT NULL,
+ "token" TEXT NOT NULL,
+ "expires" TIMESTAMP(3) NOT NULL,
+
+ CONSTRAINT "VerificationToken_pkey" PRIMARY KEY ("identifier","token")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
+
+-- AddForeignKey
+ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
diff --git a/examples/core/auth-nextjs-email/src/prisma/migrations/migration_lock.toml b/examples/core/auth-nextjs-email/src/prisma/migrations/migration_lock.toml
new file mode 100644
index 00000000000..fbffa92c2bb
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/prisma/migrations/migration_lock.toml
@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"
\ No newline at end of file
diff --git a/examples/core/auth-nextjs-email/src/prisma/schema.prisma b/examples/core/auth-nextjs-email/src/prisma/schema.prisma
new file mode 100644
index 00000000000..9b35bb87717
--- /dev/null
+++ b/examples/core/auth-nextjs-email/src/prisma/schema.prisma
@@ -0,0 +1,60 @@
+datasource db {
+ provider = "postgresql"
+ url = env("DATABASE_URL")
+}
+
+generator client {
+ provider = "prisma-client-js"
+}
+
+model User {
+ id String @id @default(cuid())
+ name String?
+ email String @unique
+ emailVerified DateTime?
+ image String?
+ accounts Account[]
+ sessions Session[]
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+model Account {
+ userId String
+ type String
+ provider String
+ providerAccountId String
+ refresh_token String?
+ access_token String?
+ expires_at Int?
+ token_type String?
+ scope String?
+ id_token String?
+ session_state String?
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ @@id([provider, providerAccountId])
+}
+
+model Session {
+ sessionToken String @unique
+ userId String
+ expires DateTime
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+model VerificationToken {
+ identifier String
+ token String
+ expires DateTime
+
+ @@id([identifier, token])
+}
\ No newline at end of file
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/tsconfig.json b/examples/core/auth-nextjs-email/tsconfig.json
similarity index 100%
rename from examples/core-auth-nextjs-pages-nextauth-4/tsconfig.json
rename to examples/core/auth-nextjs-email/tsconfig.json
diff --git a/examples/core-auth-nextjs-pages/.eslintrc.json b/examples/core/auth-nextjs-pages-nextauth-4/.eslintrc.json
similarity index 100%
rename from examples/core-auth-nextjs-pages/.eslintrc.json
rename to examples/core/auth-nextjs-pages-nextauth-4/.eslintrc.json
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/README.md b/examples/core/auth-nextjs-pages-nextauth-4/README.md
similarity index 79%
rename from examples/core-auth-nextjs-pages-nextauth-4/README.md
rename to examples/core/auth-nextjs-pages-nextauth-4/README.md
index d33f0dc405c..04efdfad123 100644
--- a/examples/core-auth-nextjs-pages-nextauth-4/README.md
+++ b/examples/core/auth-nextjs-pages-nextauth-4/README.md
@@ -18,6 +18,18 @@ bun dev
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-pages-nextauth-4
+# or
+pnpm dlx create-toolpad-app@latest --example auth-nextjs-pages-nextauth-4
+```
+
+and follow the instructions in the terminal.
+
## Learn More
To learn more about Next.js, take a look at the following resources:
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/next-env.d.ts b/examples/core/auth-nextjs-pages-nextauth-4/next-env.d.ts
similarity index 100%
rename from examples/core-auth-nextjs-pages-nextauth-4/next-env.d.ts
rename to examples/core/auth-nextjs-pages-nextauth-4/next-env.d.ts
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/next.config.mjs b/examples/core/auth-nextjs-pages-nextauth-4/next.config.mjs
similarity index 100%
rename from examples/core-auth-nextjs-pages-nextauth-4/next.config.mjs
rename to examples/core/auth-nextjs-pages-nextauth-4/next.config.mjs
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/package.json b/examples/core/auth-nextjs-pages-nextauth-4/package.json
similarity index 67%
rename from examples/core-auth-nextjs-pages-nextauth-4/package.json
rename to examples/core/auth-nextjs-pages-nextauth-4/package.json
index 90d2b5ffad2..8e941327d4a 100644
--- a/examples/core-auth-nextjs-pages-nextauth-4/package.json
+++ b/examples/core/auth-nextjs-pages-nextauth-4/package.json
@@ -14,17 +14,17 @@
"@mui/material": "^6",
"@mui/material-nextjs": "^6",
"@toolpad/core": "latest",
- "next": "^14",
- "next-auth": "^4.24.7",
- "react": "^18",
- "react-dom": "^18"
+ "next": "^15",
+ "next-auth": "^4.24.10",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0"
},
"devDependencies": {
"typescript": "^5",
- "@types/node": "^20.16.11",
- "@types/react": "^18",
- "@types/react-dom": "^18",
+ "@types/node": "^20.17.12",
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
"eslint": "^8",
- "eslint-config-next": "^14"
+ "eslint-config-next": "^15"
}
}
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx b/examples/core/auth-nextjs-pages-nextauth-4/src/pages/_app.tsx
similarity index 91%
rename from examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx
rename to examples/core/auth-nextjs-pages-nextauth-4/src/pages/_app.tsx
index b8e40df7033..6795db3e230 100644
--- a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_app.tsx
+++ b/examples/core/auth-nextjs-pages-nextauth-4/src/pages/_app.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { AppProvider } from '@toolpad/core/nextjs';
+import { NextAppProvider } from '@toolpad/core/nextjs';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import Head from 'next/head';
import { useRouter } from 'next/router';
@@ -13,7 +13,7 @@ import { SessionProvider, signIn, signOut, useSession } from 'next-auth/react';
import LinearProgress from '@mui/material/LinearProgress';
export type NextPageWithLayout = NextPage & {
- getLayout?: (page: React.ReactElement) => React.ReactNode;
+ getLayout?: (page: React.ReactElement) => React.ReactNode;
requireAuth?: boolean;
};
@@ -46,7 +46,7 @@ const AUTHENTICATION = {
signOut,
};
-function getDefaultLayout(page: React.ReactElement) {
+function getDefaultLayout(page: React.ReactElement) {
return {page} ;
}
@@ -72,14 +72,14 @@ function AppLayout({ children }: { children: React.ReactNode }) {
{children}
-
+
);
}
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/_document.tsx b/examples/core/auth-nextjs-pages-nextauth-4/src/pages/_document.tsx
similarity index 100%
rename from examples/core-auth-nextjs-pages-nextauth-4/src/pages/_document.tsx
rename to examples/core/auth-nextjs-pages-nextauth-4/src/pages/_document.tsx
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts b/examples/core/auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts
similarity index 100%
rename from examples/core-auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts
rename to examples/core/auth-nextjs-pages-nextauth-4/src/pages/api/auth/[...nextauth].ts
diff --git a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx b/examples/core/auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx
similarity index 96%
rename from examples/core-auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx
rename to examples/core/auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx
index 342a860c691..be1d6b32d5a 100644
--- a/examples/core-auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx
+++ b/examples/core/auth-nextjs-pages-nextauth-4/src/pages/auth/signin.tsx
@@ -8,7 +8,11 @@ import { useRouter } from 'next/router';
import { authOptions } from '../api/auth/[...nextauth]';
function ForgotPasswordLink() {
- return = NextPage & {
- getLayout?: (page: React.ReactElement) => React.ReactNode;
+ getLayout?: (page: React.ReactElement) => React.ReactNode;
requireAuth?: boolean;
};
@@ -46,7 +46,7 @@ const AUTHENTICATION = {
signOut,
};
-function getDefaultLayout(page: React.ReactElement) {
+function getDefaultLayout(page: React.ReactElement) {
return (
{page}
@@ -71,14 +71,14 @@ function AppLayout({ children }: { children: React.ReactNode }) {
{children}
-
+
);
}
diff --git a/examples/core-auth-nextjs-pages/src/pages/_document.tsx b/examples/core/auth-nextjs-pages/src/pages/_document.tsx
similarity index 100%
rename from examples/core-auth-nextjs-pages/src/pages/_document.tsx
rename to examples/core/auth-nextjs-pages/src/pages/_document.tsx
diff --git a/examples/core-auth-nextjs-pages/src/pages/auth/signin.tsx b/examples/core/auth-nextjs-pages/src/pages/auth/signin.tsx
similarity index 100%
rename from examples/core-auth-nextjs-pages/src/pages/auth/signin.tsx
rename to examples/core/auth-nextjs-pages/src/pages/auth/signin.tsx
diff --git a/examples/core-auth-nextjs-pages/src/pages/index.tsx b/examples/core/auth-nextjs-pages/src/pages/index.tsx
similarity index 100%
rename from examples/core-auth-nextjs-pages/src/pages/index.tsx
rename to examples/core/auth-nextjs-pages/src/pages/index.tsx
diff --git a/examples/core-auth-nextjs-pages/src/pages/orders/index.tsx b/examples/core/auth-nextjs-pages/src/pages/orders/index.tsx
similarity index 100%
rename from examples/core-auth-nextjs-pages/src/pages/orders/index.tsx
rename to examples/core/auth-nextjs-pages/src/pages/orders/index.tsx
diff --git a/examples/core-auth-nextjs/tsconfig.json b/examples/core/auth-nextjs-pages/tsconfig.json
similarity index 100%
rename from examples/core-auth-nextjs/tsconfig.json
rename to examples/core/auth-nextjs-pages/tsconfig.json
diff --git a/examples/core-tutorial/.eslintrc.json b/examples/core/auth-nextjs-passkey/.eslintrc.json
similarity index 100%
rename from examples/core-tutorial/.eslintrc.json
rename to examples/core/auth-nextjs-passkey/.eslintrc.json
diff --git a/examples/core/auth-nextjs-passkey/.gitignore b/examples/core/auth-nextjs-passkey/.gitignore
new file mode 100644
index 00000000000..68c5d18f00d
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/.gitignore
@@ -0,0 +1,5 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/examples/core/auth-nextjs-passkey/README.md b/examples/core/auth-nextjs-passkey/README.md
new file mode 100644
index 00000000000..65a8272086c
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/README.md
@@ -0,0 +1,62 @@
+# Toolpad Core - Next.js App Router with Passkey
+
+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
+
+1. You need to have a Postgres database running. You can use the following docker command to start a Postgres database:
+
+```bash
+docker run --name postgres -e POSTGRES_PASSWORD=postgres -p 5432:5432 -d postgres
+```
+
+2. For the database created above, the connection string is `postgresql://postgres:postgres@localhost:5432/postgres`.
+
+3. Update the `DATABASE_URL` environment variable in the `.env` file with the connection string for the database you created above.
+
+4. Then, generate the Prisma Client:
+
+```bash
+npx prisma migrate dev --schema=./src/prisma/schema.prisma
+```
+
+5. Finally, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+6. Open [http://localhost:3000](http://localhost:3000) with your browser to see the app running.
+
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-passkey
+# or
+pnpm dlx create-toolpad-app@latest --example auth-nextjs-passkey
+```
+
+and follow the instructions in the terminal.
+
+## 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 the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/examples/core/auth-nextjs-passkey/next-env.d.ts b/examples/core/auth-nextjs-passkey/next-env.d.ts
new file mode 100644
index 00000000000..4f11a03dc6c
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+ {props.children}
+
+ );
+}
diff --git a/examples/core/auth-nextjs-passkey/src/app/(dashboard)/orders/page.tsx b/examples/core/auth-nextjs-passkey/src/app/(dashboard)/orders/page.tsx
new file mode 100644
index 00000000000..1f55fb65641
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/app/(dashboard)/orders/page.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
+import { auth } from '../../../auth';
+
+export default async function OrdersPage() {
+ const session = await auth();
+ const currentUrl =
+ (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
+
+ if (!session) {
+ // Get the current URL to redirect to signIn with `callbackUrl`
+ const redirectUrl = new URL('/auth/signin', currentUrl);
+ redirectUrl.searchParams.set('callbackUrl', currentUrl);
+
+ redirect(redirectUrl.toString());
+ }
+ return (
+
+ Welcome to the Toolpad orders!
+
+ );
+}
diff --git a/examples/core/auth-nextjs-passkey/src/app/(dashboard)/page.tsx b/examples/core/auth-nextjs-passkey/src/app/(dashboard)/page.tsx
new file mode 100644
index 00000000000..a1de3bab206
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/app/(dashboard)/page.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import { redirect } from 'next/navigation';
+import { headers } from 'next/headers';
+import { auth } from '../../auth';
+
+export default async function HomePage() {
+ const session = await auth();
+ const currentUrl =
+ (await headers()).get('referer') || process.env.AUTH_URL || 'http://localhost:3000';
+
+ if (!session) {
+ // Get the current URL to redirect to signIn with `callbackUrl`
+ const redirectUrl = new URL('/auth/signin', currentUrl);
+ redirectUrl.searchParams.set('callbackUrl', currentUrl);
+
+ redirect(redirectUrl.toString());
+ }
+ return (
+
+ Welcome to Toolpad, {session?.user?.email || 'User'}!
+
+ );
+}
diff --git a/examples/core/auth-nextjs-passkey/src/app/api/auth/[...nextauth]/route.ts b/examples/core/auth-nextjs-passkey/src/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 00000000000..ca225652075
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,3 @@
+import { handlers } from '../../../../auth';
+
+export const { GET, POST } = handlers;
diff --git a/examples/core/auth-nextjs-passkey/src/app/auth/signin/actions.ts b/examples/core/auth-nextjs-passkey/src/app/auth/signin/actions.ts
new file mode 100644
index 00000000000..947c8c04907
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/app/auth/signin/actions.ts
@@ -0,0 +1,41 @@
+'use server';
+import { AuthError } from 'next-auth';
+import type { AuthProvider } from '@toolpad/core';
+
+import { signIn as signInAction } from '../../../auth';
+
+async function signIn(provider: AuthProvider, formData: FormData, callbackUrl?: string) {
+ try {
+ return await signInAction(provider.id, {
+ ...(formData && { email: formData.get('email'), password: formData.get('password') }),
+ redirectTo: callbackUrl ?? '/',
+ });
+ } catch (error) {
+ // The desired flow for successful sign in in all cases
+ // and unsuccessful sign in for OAuth providers will cause a `redirect`,
+ // and `redirect` is a throwing function, so we need to re-throw
+ // to allow the redirect to happen
+ // Source: https://github.com/vercel/next.js/issues/49298#issuecomment-1542055642
+ // Detect a `NEXT_REDIRECT` error and re-throw it
+ if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
+ throw error;
+ }
+ // Handle Auth.js errors
+ if (error instanceof AuthError) {
+ return {
+ error:
+ error.type === 'CredentialsSignin'
+ ? 'Invalid credentials.'
+ : 'An error with Auth.js occurred.',
+ type: error.type,
+ };
+ }
+ // An error boundary must exist to handle unknown errors
+ return {
+ error: 'Something went wrong.',
+ type: 'UnknownError',
+ };
+ }
+}
+
+export default signIn;
diff --git a/examples/core/auth-nextjs-passkey/src/app/auth/signin/page.tsx b/examples/core/auth-nextjs-passkey/src/app/auth/signin/page.tsx
new file mode 100644
index 00000000000..6ae609504a5
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/app/auth/signin/page.tsx
@@ -0,0 +1,31 @@
+'use client';
+import * as React from 'react';
+import type { AuthProvider } from '@toolpad/core';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { signIn as webauthnSignIn } from 'next-auth/webauthn';
+import { providerMap } from '../../../auth';
+import serverSignIn from './actions';
+
+// Create a wrapper function for signIn
+const signIn = async (provider: AuthProvider, formData: FormData, callbackUrl?: string) => {
+ if (provider.id === 'passkey') {
+ try {
+ return await webauthnSignIn('passkey', {
+ email: formData.get('email'),
+ callbackUrl: callbackUrl || '/',
+ });
+ } catch (error) {
+ console.error(error);
+ return {
+ error: (error as Error)?.message || 'Something went wrong',
+ type: 'WebAuthnError',
+ };
+ }
+ }
+ // Use regular signIn for other providers
+ return serverSignIn(provider, formData, callbackUrl);
+};
+
+export default function SignIn() {
+ return
+
+
+ {props.children}
+
+
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-passkey/src/app/public/layout.tsx b/examples/core/auth-nextjs-passkey/src/app/public/layout.tsx
new file mode 100644
index 00000000000..5dee163b753
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/app/public/layout.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+
+export default async function DashboardPagesLayout(props: { children: React.ReactNode }) {
+ return (
+
+ {props.children}
+
+ );
+}
diff --git a/examples/core/auth-nextjs-passkey/src/app/public/page.tsx b/examples/core/auth-nextjs-passkey/src/app/public/page.tsx
new file mode 100644
index 00000000000..19805793014
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/app/public/page.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default async function HomePage() {
+ return (
+
+
+ Public page
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-passkey/src/auth.ts b/examples/core/auth-nextjs-passkey/src/auth.ts
new file mode 100644
index 00000000000..6444dc86c13
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/auth.ts
@@ -0,0 +1,41 @@
+import NextAuth from 'next-auth';
+import Passkey from 'next-auth/providers/passkey';
+import { PrismaAdapter } from '@auth/prisma-adapter';
+import { PrismaClient } from '@prisma/client';
+import type { Provider } from 'next-auth/providers';
+
+const prisma = new PrismaClient();
+
+const providers: Provider[] = [Passkey];
+
+export const providerMap = providers.map((provider) => {
+ if (typeof provider === 'function') {
+ const providerData = provider();
+ return { id: providerData.id, name: providerData.name };
+ }
+ return { id: provider.id, name: provider.name };
+});
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers,
+ adapter: PrismaAdapter(prisma),
+ experimental: {
+ enableWebAuthn: true,
+ },
+ secret: process.env.AUTH_SECRET,
+ pages: {
+ signIn: '/auth/signin',
+ },
+ callbacks: {
+ authorized({ auth: session, request: { nextUrl } }) {
+ const isLoggedIn = !!session?.user;
+ const isPublicPage = nextUrl.pathname.startsWith('/public');
+
+ if (isPublicPage || isLoggedIn) {
+ return true;
+ }
+
+ return false; // Redirect unauthenticated users to login page
+ },
+ },
+});
diff --git a/examples/core/auth-nextjs-passkey/src/prisma.ts b/examples/core/auth-nextjs-passkey/src/prisma.ts
new file mode 100644
index 00000000000..ee2f97d763c
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/prisma.ts
@@ -0,0 +1,9 @@
+import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+export const prisma = globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') {
+ globalForPrisma.prisma = prisma;
+}
diff --git a/examples/core/auth-nextjs-passkey/src/prisma/schema.prisma b/examples/core/auth-nextjs-passkey/src/prisma/schema.prisma
new file mode 100644
index 00000000000..558675b06c5
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/src/prisma/schema.prisma
@@ -0,0 +1,78 @@
+datasource db {
+ provider = "postgresql"
+ url = env("DATABASE_URL")
+}
+
+// schema.prisma
+generator client {
+ provider = "prisma-client-js"
+
+}
+
+model User {
+ id String @id @default(cuid())
+ name String?
+ email String @unique
+ emailVerified DateTime?
+ image String?
+ accounts Account[]
+ sessions Session[]
+ Authenticator Authenticator[]
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+model Account {
+ userId String
+ type String
+ provider String
+ providerAccountId String
+ refresh_token String?
+ access_token String?
+ expires_at Int?
+ token_type String?
+ scope String?
+ id_token String?
+ session_state String?
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ @@id([provider, providerAccountId])
+}
+
+model Session {
+ sessionToken String @unique
+ userId String
+ expires DateTime
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+model VerificationToken {
+ identifier String
+ token String
+ expires DateTime
+
+ @@id([identifier, token])
+}
+
+model Authenticator {
+ credentialID String @unique
+ userId String
+ providerAccountId String
+ credentialPublicKey String
+ counter Int
+ credentialDeviceType String
+ credentialBackedUp Boolean
+ transports String?
+
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ @@id([userId, credentialID])
+}
\ No newline at end of file
diff --git a/examples/core/auth-nextjs-passkey/tsconfig.json b/examples/core/auth-nextjs-passkey/tsconfig.json
new file mode 100644
index 00000000000..bb5584ed1a4
--- /dev/null
+++ b/examples/core/auth-nextjs-passkey/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "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"
+ }
+ ]
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/core/auth-nextjs-themed/.env b/examples/core/auth-nextjs-themed/.env
new file mode 100644
index 00000000000..856f2860e78
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/.env
@@ -0,0 +1,3 @@
+
+AUTH_SECRET="cNU2IkgN6v9dVQ1EqbCe4Npqh0IbM6VEsMBpg69wiyU=" # Added by `npx auth`. Read more: https://cli.authjs.dev
+AUTH_URL="https://r3l69w-3000.csb.app"
\ No newline at end of file
diff --git a/examples/core/auth-nextjs-themed/.gitattributes b/examples/core/auth-nextjs-themed/.gitattributes
new file mode 100644
index 00000000000..dfe0770424b
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/examples/core/auth-nextjs-themed/.gitignore b/examples/core/auth-nextjs-themed/.gitignore
new file mode 100644
index 00000000000..b38185899f2
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/.gitignore
@@ -0,0 +1,36 @@
+# Ignore files generated by the IDE
+.idea/
+
+# Ignore compiled binaries
+*.exe
+*.dll
+*.so
+*.next
+
+# Ignore build output directories
+/bin/
+/build/
+/dist/
+
+# Ignore package manager directories
+/node_modules/
+/vendor/
+
+# Ignore log files
+*.log
+
+# Ignore temporary files
+*.tmp
+*.swp
+*.bak
+
+# Ignore sensitive or personal files
+config.ini
+secrets.txt
+
+# Ignore operating system files
+.DS_Store
+Thumbs.db
+
+# Environment variables
+*.env*
\ No newline at end of file
diff --git a/examples/core/auth-nextjs-themed/README.md b/examples/core/auth-nextjs-themed/README.md
new file mode 100644
index 00000000000..9c9b9a314ee
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/README.md
@@ -0,0 +1,37 @@
+# Toolpad Core - Create Toolpad App
+
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-toolpad-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Setup
+
+Run `npx auth secret` to generate a secret and replace the value in the .env.local file with it.
+
+Add the CLIENT_ID and CLIENT_SECRET from your OAuth provider to the .env.local file.
+
+## Getting Started
+
+First, run the development server: `npm run dev`
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+## Run on CodeSandbox
+
+Run this example on CodeSandbox [here](https://codesandbox.io/p/sandbox/github/mui/toolpad/tree/master/examples/core/auth-nextjs-themed).
+
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-nextjs-themed
+# or
+pnpm dlx create-toolpad-app@latest --example auth-nextjs-themed
+```
+
+and follow the instructions in the terminal.
+
+## 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.
diff --git a/examples/core/auth-nextjs-themed/app/(dashboard)/DashboardContent.tsx b/examples/core/auth-nextjs-themed/app/(dashboard)/DashboardContent.tsx
new file mode 100644
index 00000000000..cb951603a50
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/(dashboard)/DashboardContent.tsx
@@ -0,0 +1,107 @@
+'use client';
+import * as React from 'react';
+import { alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid2';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import StatCard, { StatCardProps } from '../components/StatCard';
+import HighlightedCard from '../components/HiglightedCard';
+import SessionsChart from '../components/SessionsChart';
+import PageViewsBarChart from '../components/PageViewsBarChart';
+import CustomTreeView from '../components/CustomTreeView';
+import ChartUserByCountry from '../components/ChartUserByCountry';
+
+const data: StatCardProps[] = [
+ {
+ title: 'Users',
+ value: '14k',
+ interval: 'Last 30 days',
+ trend: 'up',
+ data: [
+ 200, 24, 220, 260, 240, 380, 100, 240, 280, 240, 300, 340, 320, 360, 340, 380, 360, 400, 380,
+ 420, 400, 640, 340, 460, 440, 480, 460, 600, 880, 920,
+ ],
+ },
+ {
+ title: 'Conversions',
+ value: '325',
+ interval: 'Last 30 days',
+ trend: 'down',
+ data: [
+ 1640, 1250, 970, 1130, 1050, 900, 720, 1080, 900, 450, 920, 820, 840, 600, 820, 780, 800, 760,
+ 380, 740, 660, 620, 840, 500, 520, 480, 400, 360, 300, 220,
+ ],
+ },
+ {
+ title: 'Event count',
+ value: '200k',
+ interval: 'Last 30 days',
+ trend: 'neutral',
+ data: [
+ 500, 400, 510, 530, 520, 600, 530, 520, 510, 730, 520, 510, 530, 620, 510, 530, 520, 410, 530,
+ 520, 610, 530, 520, 610, 530, 420, 510, 430, 520, 510,
+ ],
+ },
+];
+
+export default function DashboardContent() {
+ return (
+
+ ({
+ flexGrow: 1,
+ backgroundColor: theme.vars
+ ? `rgba(${theme.vars.palette.background.defaultChannel} / 1)`
+ : alpha(theme.palette.background.default, 1),
+ overflow: 'auto',
+ })}
+ >
+
+
+ {/* cards */}
+
+ Overview
+
+ theme.spacing(2) }}>
+ {data.map((card, index) => (
+
+
+ ))}
+
+
+
+
+
+
+
+
+ Details
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/(dashboard)/SidebarFooterAccount.tsx b/examples/core/auth-nextjs-themed/app/(dashboard)/SidebarFooterAccount.tsx
new file mode 100644
index 00000000000..4372318c3cb
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/(dashboard)/SidebarFooterAccount.tsx
@@ -0,0 +1,114 @@
+'use client';
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import MenuList from '@mui/material/MenuList';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import Divider from '@mui/material/Divider';
+import {
+ Account,
+ AccountPreview,
+ AccountPreviewProps,
+ AccountPopoverFooter,
+ SignOutButton,
+} from '@toolpad/core/Account';
+import { SidebarFooterProps } from '@toolpad/core/DashboardLayout';
+
+function AccountSidebarPreview(props: AccountPreviewProps & { mini: boolean }) {
+ const { handleClick, open, mini } = props;
+ return (
+
+
+ );
+}
+
+function SidebarFooterAccountPopover({ mini }: { mini: boolean }) {
+ return (
+
+ {mini ?
+
+
+
+
+ );
+}
+
+const createPreviewComponent = (mini: boolean) => {
+ function PreviewComponent(props: AccountPreviewProps) {
+ return
+ `drop-shadow(0px 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.10)' : 'rgba(0,0,0,0.32)'})`,
+ mt: 1,
+ '&::before': {
+ content: '""',
+ display: 'block',
+ position: 'absolute',
+ bottom: 10,
+ left: 0,
+ width: 10,
+ height: 10,
+ bgcolor: 'background.paper',
+ transform: 'translate(-50%, -50%) rotate(45deg)',
+ zIndex: 0,
+ },
+ },
+ },
+ },
+ },
+ }}
+ />
+ );
+}
+
+export function ToolbarAccountOverride() {
+ return null;
+}
diff --git a/examples/core/auth-nextjs-themed/app/(dashboard)/layout.tsx b/examples/core/auth-nextjs-themed/app/(dashboard)/layout.tsx
new file mode 100644
index 00000000000..c12af668eb4
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/(dashboard)/layout.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import Copyright from '../components/Copyright';
+import SidebarFooterAccount, { ToolbarAccountOverride } from './SidebarFooterAccount';
+
+export default function Layout(props: { children: React.ReactNode }) {
+ return (
+
+
+ {props.children}
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/(dashboard)/orders/page.tsx b/examples/core/auth-nextjs-themed/app/(dashboard)/orders/page.tsx
new file mode 100644
index 00000000000..b0b9b0d84dd
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/(dashboard)/orders/page.tsx
@@ -0,0 +1,7 @@
+'use client';
+import * as React from 'react';
+import CustomDataGrid from '../../components/CustomDataGrid';
+
+export default function OrdersPage() {
+ return
+
+ );
+}
+
+function SignUpLink() {
+ return (
+
+ Don't have an account?
+ );
+}
+
+function DemoInfo() {
+ return (
+
+ You can use toolpad-demo@mui.com with the password @demo1 to
+ test
+
+ );
+}
+
+export default function SignIn() {
+ return (
+ (({ theme }) => ({
+ textAnchor: 'middle',
+ dominantBaseline: 'central',
+ fill: (theme.vars || theme).palette.text.secondary,
+ variants: [
+ {
+ props: {
+ variant: 'primary',
+ },
+ style: {
+ fontSize: theme.typography.h5.fontSize,
+ },
+ },
+ {
+ props: ({ variant }) => variant !== 'primary',
+ style: {
+ fontSize: theme.typography.body2.fontSize,
+ },
+ },
+ {
+ props: {
+ variant: 'primary',
+ },
+ style: {
+ fontWeight: theme.typography.h5.fontWeight,
+ },
+ },
+ {
+ props: ({ variant }) => variant !== 'primary',
+ style: {
+ fontWeight: theme.typography.body2.fontWeight,
+ },
+ },
+ ],
+}));
+
+interface PieCenterLabelProps {
+ primaryText: string;
+ secondaryText: string;
+}
+
+function PieCenterLabel({ primaryText, secondaryText }: PieCenterLabelProps) {
+ const { width, height, left, top } = useDrawingArea();
+ const primaryY = top + height / 2 - 10;
+ const secondaryY = primaryY + 24;
+
+ return (
+
+
+ {primaryText}
+
+
+ {secondaryText}
+
+
+ );
+}
+
+const colors = [
+ 'hsl(220, 20%, 65%)',
+ 'hsl(220, 20%, 42%)',
+ 'hsl(220, 20%, 35%)',
+ 'hsl(220, 20%, 25%)',
+];
+
+export default function ChartUserByCountry() {
+ return (
+
+
+
+ Users by country
+
+
+
+
+
+ {countries.map((country, index) => (
+
+ {country.flag}
+
+
+
+ {country.name}
+
+
+ {country.value}%
+
+
+
+
+ ))}
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/Copyright.tsx b/examples/core/auth-nextjs-themed/app/components/Copyright.tsx
new file mode 100644
index 00000000000..18e72887597
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/Copyright.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+
+export default function Copyright(props: any) {
+ return (
+
+ {'Copyright © '}
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/CustomDataGrid.tsx b/examples/core/auth-nextjs-themed/app/components/CustomDataGrid.tsx
new file mode 100644
index 00000000000..27a6050d060
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/CustomDataGrid.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { DataGrid } from '@mui/x-data-grid';
+import { columns, rows } from '../mocks/gridOrdersData';
+
+export default function CustomizedDataGrid() {
+ return (
+
+ (params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd')}
+ initialState={{
+ pagination: { paginationModel: { pageSize: 20 } },
+ }}
+ sx={(theme) => ({
+ borderColor:
+ theme.palette.mode === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200],
+ '& .MuiDataGrid-cell': {
+ borderColor:
+ theme.palette.mode === 'dark' ? theme.palette.grey[700] : theme.palette.grey[200],
+ },
+ })}
+ pageSizeOptions={[10, 20, 50]}
+ disableColumnResize
+ density="compact"
+ slotProps={{
+ filterPanel: {
+ filterFormProps: {
+ logicOperatorInputProps: {
+ variant: 'outlined',
+ size: 'small',
+ },
+ columnInputProps: {
+ variant: 'outlined',
+ size: 'small',
+ sx: { mt: 'auto' },
+ },
+ operatorInputProps: {
+ variant: 'outlined',
+ size: 'small',
+ sx: { mt: 'auto' },
+ },
+ valueInputProps: {
+ InputComponentProps: {
+ variant: 'outlined',
+ size: 'small',
+ },
+ },
+ },
+ },
+ }}
+ />
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx b/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx
new file mode 100644
index 00000000000..59307f43a46
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/CustomDatePicker.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import dayjs, { Dayjs } from 'dayjs';
+import Button from '@mui/material/Button';
+import CalendarTodayRoundedIcon from '@mui/icons-material/CalendarTodayRounded';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { UseDateFieldProps } from '@mui/x-date-pickers/DateField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import {
+ BaseSingleInputFieldProps,
+ DateValidationError,
+ FieldSection,
+} from '@mui/x-date-pickers/models';
+
+interface ButtonFieldProps
+ extends UseDateFieldProps,
+ BaseSingleInputFieldProps {
+ setOpen?: React.Dispatch>;
+}
+
+function ButtonField(props: ButtonFieldProps) {
+ const {
+ setOpen,
+ label,
+ id,
+ disabled,
+ InputProps: { ref } = {},
+ inputProps: { 'aria-label': ariaLabel } = {},
+ } = props;
+
+ return (
+ setOpen?.((prev) => !prev)}
+ startIcon={
+ );
+}
+
+export default function CustomDatePicker() {
+ const [value, setValue] = React.useState(dayjs('2023-04-17'));
+ const [open, setOpen] = React.useState(false);
+
+ return (
+
+ setValue(newValue)}
+ slots={{ field: ButtonField }}
+ slotProps={{
+ field: { setOpen } as any,
+ nextIconButton: { size: 'small' },
+ previousIconButton: { size: 'small' },
+ }}
+ open={open}
+ onClose={() => setOpen(false)}
+ onOpen={() => setOpen(true)}
+ views={['day', 'month', 'year']}
+ />
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx b/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx
new file mode 100644
index 00000000000..d0f18d52d1b
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/CustomTreeView.tsx
@@ -0,0 +1,203 @@
+'use client';
+import * as React from 'react';
+import clsx from 'clsx';
+import { animated, useSpring } from '@react-spring/web';
+import { TransitionProps } from '@mui/material/transitions';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Collapse from '@mui/material/Collapse';
+import Typography from '@mui/material/Typography';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import {
+ unstable_useTreeItem2 as useTreeItem2,
+ UseTreeItem2Parameters,
+} from '@mui/x-tree-view/useTreeItem2';
+import {
+ TreeItem2Content,
+ TreeItem2IconContainer,
+ TreeItem2Label,
+ TreeItem2Root,
+} from '@mui/x-tree-view/TreeItem2';
+import { TreeItem2Icon } from '@mui/x-tree-view/TreeItem2Icon';
+import { TreeItem2Provider } from '@mui/x-tree-view/TreeItem2Provider';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { useTheme } from '@mui/material/styles';
+
+type Color = 'blue' | 'green';
+
+type ExtendedTreeItemProps = {
+ color?: Color;
+ id: string;
+ label: string;
+};
+
+const ITEMS: TreeViewBaseItem[] = [
+ {
+ id: '1',
+ label: 'Website',
+ children: [
+ { id: '1.1', label: 'Home', color: 'green' },
+ { id: '1.2', label: 'Pricing', color: 'green' },
+ { id: '1.3', label: 'About us', color: 'green' },
+ {
+ id: '1.4',
+ label: 'Blog',
+ children: [
+ { id: '1.1.1', label: 'Announcements', color: 'blue' },
+ { id: '1.1.2', label: 'April lookahead', color: 'blue' },
+ { id: '1.1.3', label: "What's new", color: 'blue' },
+ { id: '1.1.4', label: 'Meet the team', color: 'blue' },
+ ],
+ },
+ ],
+ },
+ {
+ id: '2',
+ label: 'Store',
+ children: [
+ { id: '2.1', label: 'All products', color: 'green' },
+ {
+ id: '2.2',
+ label: 'Categories',
+ children: [
+ { id: '2.2.1', label: 'Gadgets', color: 'blue' },
+ { id: '2.2.2', label: 'Phones', color: 'blue' },
+ { id: '2.2.3', label: 'Wearables', color: 'blue' },
+ ],
+ },
+ { id: '2.3', label: 'Bestsellers', color: 'green' },
+ { id: '2.4', label: 'Sales', color: 'green' },
+ ],
+ },
+ { id: '4', label: 'Contact', color: 'blue' },
+ { id: '5', label: 'Help', color: 'blue' },
+];
+
+function DotIcon({ color }: { color: string }) {
+ return (
+
+
+
+
+ );
+}
+
+const AnimatedCollapse = animated(Collapse);
+
+function TransitionComponent(props: TransitionProps) {
+ const style = useSpring({
+ to: {
+ opacity: props.in ? 1 : 0,
+ transform: `translate3d(0,${props.in ? 0 : 20}px,0)`,
+ },
+ });
+
+ return
+ {iconColor &&
+ {children}
+
+
+ );
+}
+
+interface CustomTreeItemProps
+ extends Omit,
+ Omit, 'onFocus'> {}
+
+const CustomTreeItem = React.forwardRef(function CustomTreeItem(
+ props: CustomTreeItemProps,
+ ref: React.Ref,
+) {
+ const { id, itemId, label, disabled, children, ...other } = props;
+
+ const {
+ getRootProps,
+ getContentProps,
+ getIconContainerProps,
+ getLabelProps,
+ getGroupTransitionProps,
+ status,
+ publicAPI,
+ } = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref });
+
+ const item = publicAPI.getItem(itemId);
+ const color = item?.color;
+ return (
+
+
+
+ {status.expandable && (
+
+
+ )}
+
+
+ {children && (
+
+
+ );
+});
+
+export default function CustomizedTreeView() {
+ return (
+
+
+
+ Product tree
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/HiglightedCard.tsx b/examples/core/auth-nextjs-themed/app/components/HiglightedCard.tsx
new file mode 100644
index 00000000000..f6f8d68b280
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/HiglightedCard.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import InsightsRoundedIcon from '@mui/icons-material/InsightsRounded';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+
+export default function HighlightedCard() {
+ const theme = useTheme();
+ const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+
+ return (
+
+
+
+ Explore your data
+
+
+ Uncover performance and visitor insights with our data wizardry.
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx b/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx
new file mode 100644
index 00000000000..e7a90bde2a4
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/PageViewsBarChart.tsx
@@ -0,0 +1,85 @@
+import * as React from 'react';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { useTheme } from '@mui/material/styles';
+
+export default function PageViewsBarChart() {
+ const theme = useTheme();
+ const colorPalette = [
+ (theme.vars || theme).palette.primary.dark,
+ (theme.vars || theme).palette.primary.main,
+ (theme.vars || theme).palette.primary.light,
+ ];
+ return (
+
+
+
+ Page views and downloads
+
+
+
+
+ 1.3M
+
+
+
+ Page views and downloads for the last 6 months
+
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx b/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx
new file mode 100644
index 00000000000..f43d0af4b4a
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/SessionsChart.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
+import Stack from '@mui/material/Stack';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+function AreaGradient({ color, id }: { color: string; id: string }) {
+ return (
+
+
+
+
+ );
+}
+
+function getDaysInMonth(month: number, year: number) {
+ const date = new Date(year, month, 0);
+ const monthName = date.toLocaleDateString('en-US', {
+ month: 'short',
+ });
+ const daysInMonth = date.getDate();
+ const days = [];
+ let i = 1;
+ while (days.length < daysInMonth) {
+ days.push(`${monthName} ${i}`);
+ i += 1;
+ }
+ return days;
+}
+
+export default function SessionsChart() {
+ const theme = useTheme();
+ const data = getDaysInMonth(4, 2024);
+
+ const colorPalette = [
+ theme.palette.primary.light,
+ theme.palette.primary.main,
+ theme.palette.primary.dark,
+ ];
+
+ return (
+
+
+
+ Sessions
+
+
+
+
+ 13,277
+
+
+
+ Sessions per day for the last 30 days
+
+
+ (i + 1) % 5 === 0,
+ },
+ ]}
+ series={[
+ {
+ id: 'direct',
+ label: 'Direct',
+ showMark: false,
+ curve: 'linear',
+ stack: 'total',
+ area: true,
+ stackOrder: 'ascending',
+ data: [
+ 300, 900, 600, 1200, 1500, 1800, 2400, 2100, 2700, 3000, 1800, 3300, 3600, 3900,
+ 4200, 4500, 3900, 4800, 5100, 5400, 4800, 5700, 6000, 6300, 6600, 6900, 7200, 7500,
+ 7800, 8100,
+ ],
+ },
+ {
+ id: 'referral',
+ label: 'Referral',
+ showMark: false,
+ curve: 'linear',
+ stack: 'total',
+ area: true,
+ stackOrder: 'ascending',
+ data: [
+ 500, 900, 700, 1400, 1100, 1700, 2300, 2000, 2600, 2900, 2300, 3200, 3500, 3800,
+ 4100, 4400, 2900, 4700, 5000, 5300, 5600, 5900, 6200, 6500, 5600, 6800, 7100, 7400,
+ 7700, 8000,
+ ],
+ },
+ {
+ id: 'organic',
+ label: 'Organic',
+ showMark: false,
+ curve: 'linear',
+ stack: 'total',
+ stackOrder: 'ascending',
+ data: [
+ 1000, 1500, 1200, 1700, 1300, 2000, 2400, 2200, 2600, 2800, 2500, 3000, 3400, 3700,
+ 3200, 3900, 4100, 3500, 4300, 4500, 4000, 4700, 5000, 5200, 4800, 5400, 5600, 5900,
+ 6100, 6300,
+ ],
+ area: true,
+ },
+ ]}
+ height={250}
+ margin={{ left: 50, right: 20, top: 20, bottom: 20 }}
+ grid={{ horizontal: true }}
+ sx={{
+ '& .MuiAreaElement-series-organic': {
+ fill: "url('#organic')",
+ },
+ '& .MuiAreaElement-series-referral': {
+ fill: "url('#referral')",
+ },
+ '& .MuiAreaElement-series-direct': {
+ fill: "url('#direct')",
+ },
+ }}
+ slotProps={{
+ legend: {
+ hidden: true,
+ },
+ }}
+ >
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/components/StatCard.tsx b/examples/core/auth-nextjs-themed/app/components/StatCard.tsx
new file mode 100644
index 00000000000..0438bc8f1fd
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/components/StatCard.tsx
@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+import { areaElementClasses } from '@mui/x-charts/LineChart';
+
+export type StatCardProps = {
+ title: string;
+ value: string;
+ interval: string;
+ trend: 'up' | 'down' | 'neutral';
+ data: number[];
+};
+
+function getDaysInMonth(month: number, year: number) {
+ const date = new Date(year, month, 0);
+ const monthName = date.toLocaleDateString('en-US', {
+ month: 'short',
+ });
+ const daysInMonth = date.getDate();
+ const days = [];
+ let i = 1;
+ while (days.length < daysInMonth) {
+ days.push(`${monthName} ${i}`);
+ i += 1;
+ }
+ return days;
+}
+
+function AreaGradient({ color, id }: { color: string; id: string }) {
+ return (
+
+
+
+
+ );
+}
+
+export default function StatCard({ title, value, interval, trend, data }: StatCardProps) {
+ const theme = useTheme();
+ const daysInWeek = getDaysInMonth(4, 2024);
+
+ const trendColors = {
+ up: theme.palette.mode === 'light' ? theme.palette.success.main : theme.palette.success.dark,
+ down: theme.palette.mode === 'light' ? theme.palette.error.main : theme.palette.error.dark,
+ neutral: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[700],
+ };
+
+ const labelColors = {
+ up: 'success' as const,
+ down: 'error' as const,
+ neutral: 'default' as const,
+ };
+
+ const color = labelColors[trend];
+ const chartColor = trendColors[trend];
+ const trendValues = { up: '+25%', down: '-25%', neutral: '+5%' };
+
+ return (
+
+
+
+ {title}
+
+
+
+
+
+ {value}
+
+
+
+ {interval}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/layout.tsx b/examples/core/auth-nextjs-themed/app/layout.tsx
new file mode 100644
index 00000000000..3fceadb73cb
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/layout.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { NextAppProvider } from '@toolpad/core/nextjs';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
+import type { Navigation } from '@toolpad/core/AppProvider';
+import { SessionProvider, signIn, signOut } from 'next-auth/react';
+import theme from '../theme';
+import { auth } from '../auth';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ title: 'Dashboard',
+ icon:
+
+
+ {children}
+
+
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/mocks/CustomIcons.tsx b/examples/core/auth-nextjs-themed/app/mocks/CustomIcons.tsx
new file mode 100644
index 00000000000..af53b6aeba4
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/mocks/CustomIcons.tsx
@@ -0,0 +1,189 @@
+import * as React from 'react';
+import SvgIcon from '@mui/material/SvgIcon';
+
+export function UsaFlag() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+export function BrazilFlag() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export function GlobeFlag() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx b/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx
new file mode 100644
index 00000000000..d04b3fdcd74
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/mocks/gridData.tsx
@@ -0,0 +1,619 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import { GridCellParams, GridRowsProp, GridColDef } from '@mui/x-data-grid';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+type SparkLineData = number[];
+
+function getDaysInMonth(month: number, year: number) {
+ const date = new Date(year, month, 0);
+ const monthName = date.toLocaleDateString('en-US', {
+ month: 'short',
+ });
+ const daysInMonth = date.getDate();
+ const days = [];
+ let i = 1;
+ while (days.length < daysInMonth) {
+ days.push(`${monthName} ${i}`);
+ i += 1;
+ }
+ return days;
+}
+
+function renderSparklineCell(params: GridCellParams) {
+ const data = getDaysInMonth(4, 2024);
+ const { value, colDef } = params;
+
+ if (!value || value.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+ );
+}
+
+function renderStatus(status: 'Online' | 'Offline') {
+ const colors: { [index: string]: 'success' | 'default' } = {
+ Online: 'success',
+ Offline: 'default',
+ };
+
+ return
+ {params.value.name.toUpperCase().substring(0, 1)}
+
+ );
+}
+
+export const columns: GridColDef[] = [
+ { field: 'pageTitle', headerName: 'Page Title', flex: 1.5, minWidth: 200 },
+ {
+ field: 'status',
+ headerName: 'Status',
+ flex: 0.5,
+ minWidth: 80,
+ renderCell: (params) => renderStatus(params.value as any),
+ },
+ {
+ field: 'users',
+ headerName: 'Users',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 80,
+ },
+ {
+ field: 'eventCount',
+ headerName: 'Event Count',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 100,
+ },
+ {
+ field: 'viewsPerUser',
+ headerName: 'Views per User',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 120,
+ },
+ {
+ field: 'averageTime',
+ headerName: 'Average Time',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 100,
+ },
+ {
+ field: 'conversions',
+ headerName: 'Daily Conversions',
+ flex: 1,
+ minWidth: 150,
+ renderCell: renderSparklineCell,
+ },
+];
+
+export const rows: GridRowsProp = [
+ {
+ id: 1,
+ pageTitle: 'Homepage Overview',
+ status: 'Online',
+ eventCount: 8345,
+ users: 212423,
+ viewsPerUser: 18.5,
+ averageTime: '2m 15s',
+ conversions: [
+ 469172, 488506, 592287, 617401, 640374, 632751, 668638, 807246, 749198, 944863, 911787,
+ 844815, 992022, 1143838, 1446926, 1267886, 1362511, 1348746, 1560533, 1670690, 1695142,
+ 1916613, 1823306, 1683646, 2025965, 2529989, 3263473, 3296541, 3041524, 2599497,
+ ],
+ },
+ {
+ id: 2,
+ pageTitle: 'Product Details - Gadgets',
+ status: 'Online',
+ eventCount: 5653,
+ users: 172240,
+ viewsPerUser: 9.7,
+ averageTime: '2m 30s',
+ conversions: [
+ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 557488, 1341471,
+ 2044561, 2206438,
+ ],
+ },
+ {
+ id: 3,
+ pageTitle: 'Checkout Process - Step 1',
+ status: 'Offline',
+ eventCount: 3455,
+ users: 58240,
+ viewsPerUser: 15.2,
+ averageTime: '2m 10s',
+ conversions: [
+ 166896, 190041, 248686, 226746, 261744, 271890, 332176, 381123, 396435, 495620, 520278,
+ 460839, 704158, 559134, 681089, 712384, 765381, 771374, 851314, 907947, 903675, 1049642,
+ 1003160, 881573, 1072283, 1139115, 1382701, 1395655, 1355040, 1381571,
+ ],
+ },
+ {
+ id: 4,
+ pageTitle: 'User Profile Dashboard',
+ status: 'Online',
+ eventCount: 112543,
+ users: 96240,
+ viewsPerUser: 4.5,
+ averageTime: '2m 40s',
+ conversions: [
+ 264651, 311845, 436558, 439385, 520413, 533380, 562363, 533793, 558029, 791126, 649082,
+ 566792, 723451, 737827, 890859, 935554, 1044397, 1022973, 1129827, 1145309, 1195630, 1358925,
+ 1373160, 1172679, 1340106, 1396974, 1623641, 1687545, 1581634, 1550291,
+ ],
+ },
+ {
+ id: 5,
+ pageTitle: 'Article Listing - Tech News',
+ status: 'Offline',
+ eventCount: 3653,
+ users: 142240,
+ viewsPerUser: 3.1,
+ averageTime: '2m 55s',
+ conversions: [
+ 251871, 262216, 402383, 396459, 378793, 406720, 447538, 451451, 457111, 589821, 640744,
+ 504879, 626099, 662007, 754576, 768231, 833019, 851537, 972306, 1014831, 1027570, 1189068,
+ 1119099, 987244, 1197954, 1310721, 1480816, 1577547, 1854053, 1791831,
+ ],
+ },
+ {
+ id: 6,
+ pageTitle: 'FAQs - Customer Support',
+ status: 'Online',
+ eventCount: 106543,
+ users: 15240,
+ viewsPerUser: 7.2,
+ averageTime: '2m 20s',
+ conversions: [
+ 13671, 16918, 27272, 34315, 42212, 56369, 64241, 77857, 70680, 91093, 108306, 94734, 132289,
+ 133860, 147706, 158504, 192578, 207173, 220052, 233496, 250091, 285557, 268555, 259482,
+ 274019, 321648, 359801, 399502, 447249, 497403,
+ ],
+ },
+ {
+ id: 7,
+ pageTitle: 'Product Comparison - Laptops',
+ status: 'Offline',
+ eventCount: 7853,
+ users: 32240,
+ viewsPerUser: 6.5,
+ averageTime: '2m 50s',
+ conversions: [
+ 93682, 107901, 144919, 151769, 170804, 183736, 201752, 219792, 227887, 295382, 309600, 278050,
+ 331964, 356826, 404896, 428090, 470245, 485582, 539056, 582112, 594289, 671915, 649510,
+ 574911, 713843, 754965, 853020, 916793, 960158, 984265,
+ ],
+ },
+ {
+ id: 8,
+ pageTitle: 'Shopping Cart - Electronics',
+ status: 'Online',
+ eventCount: 8563,
+ users: 48240,
+ viewsPerUser: 4.3,
+ averageTime: '3m 10s',
+ conversions: [
+ 52394, 63357, 82800, 105466, 128729, 144472, 172148, 197919, 212302, 278153, 290499, 249824,
+ 317499, 333024, 388925, 410576, 462099, 488477, 533956, 572307, 591019, 681506, 653332,
+ 581234, 719038, 783496, 911609, 973328, 1056071, 1112940,
+ ],
+ },
+ {
+ id: 9,
+ pageTitle: 'Payment Confirmation - Bank Transfer',
+ status: 'Offline',
+ eventCount: 4563,
+ users: 18240,
+ viewsPerUser: 2.7,
+ averageTime: '3m 25s',
+ conversions: [
+ 15372, 16901, 25489, 30148, 40857, 51136, 64627, 75804, 89633, 100407, 114908, 129957, 143568,
+ 158509, 174822, 192488, 211512, 234702, 258812, 284328, 310431, 338186, 366582, 396749,
+ 428788, 462880, 499125, 537723, 578884, 622825,
+ ],
+ },
+ {
+ id: 10,
+ pageTitle: 'Product Reviews - Smartphones',
+ status: 'Online',
+ eventCount: 9863,
+ users: 28240,
+ viewsPerUser: 5.1,
+ averageTime: '3m 05s',
+ conversions: [
+ 70211, 89234, 115676, 136021, 158744, 174682, 192890, 218073, 240926, 308190, 317552, 279834,
+ 334072, 354955, 422153, 443911, 501486, 538091, 593724, 642882, 686539, 788615, 754813,
+ 687955, 883645, 978347, 1142551, 1233074, 1278155, 1356724,
+ ],
+ },
+ {
+ id: 11,
+ pageTitle: 'Subscription Management - Services',
+ status: 'Offline',
+ eventCount: 6563,
+ users: 24240,
+ viewsPerUser: 4.8,
+ averageTime: '3m 15s',
+ conversions: [
+ 49662, 58971, 78547, 93486, 108722, 124901, 146422, 167883, 189295, 230090, 249837, 217828,
+ 266494, 287537, 339586, 363299, 412855, 440900, 490111, 536729, 580591, 671635, 655812,
+ 576431, 741632, 819296, 971762, 1052605, 1099234, 1173591,
+ ],
+ },
+ {
+ id: 12,
+ pageTitle: 'Order Tracking - Shipments',
+ status: 'Online',
+ eventCount: 12353,
+ users: 38240,
+ viewsPerUser: 3.5,
+ averageTime: '3m 20s',
+ conversions: [
+ 29589, 37965, 55800, 64672, 77995, 91126, 108203, 128900, 148232, 177159, 193489, 164471,
+ 210765, 229977, 273802, 299381, 341092, 371567, 413812, 457693, 495920, 564785, 541022,
+ 491680, 618096, 704926, 833365, 904313, 974622, 1036567,
+ ],
+ },
+ {
+ id: 13,
+ pageTitle: 'Customer Feedback - Surveys',
+ status: 'Offline',
+ eventCount: 5863,
+ users: 13240,
+ viewsPerUser: 2.3,
+ averageTime: '3m 30s',
+ conversions: [
+ 8472, 9637, 14892, 19276, 23489, 28510, 33845, 39602, 45867, 52605, 59189, 65731, 76021,
+ 85579, 96876, 108515, 119572, 131826, 145328, 160192, 176528, 196662, 217929, 239731, 262920,
+ 289258, 315691, 342199, 370752, 402319,
+ ],
+ },
+ {
+ id: 14,
+ pageTitle: 'Account Settings - Preferences',
+ status: 'Online',
+ eventCount: 7853,
+ users: 18240,
+ viewsPerUser: 3.2,
+ averageTime: '3m 15s',
+ conversions: [
+ 15792, 16948, 22728, 25491, 28412, 31268, 34241, 37857, 42068, 46893, 51098, 55734, 60780,
+ 66421, 72680, 79584, 87233, 95711, 105285, 115814, 127509, 140260, 154086, 169495, 186445,
+ 205109, 225580, 247983, 272484, 299280,
+ ],
+ },
+ {
+ id: 15,
+ pageTitle: 'Login Page - Authentication',
+ status: 'Offline',
+ eventCount: 9563,
+ users: 24240,
+ viewsPerUser: 2.5,
+ averageTime: '3m 35s',
+ conversions: [
+ 25638, 28355, 42089, 53021, 66074, 80620, 97989, 118202, 142103, 166890, 193869, 225467,
+ 264089, 307721, 358059, 417835, 488732, 573924, 674878, 794657, 938542, 1111291, 1313329,
+ 1543835, 1812156, 2123349, 2484926, 2907023, 3399566, 3973545,
+ ],
+ },
+ {
+ id: 16,
+ pageTitle: 'Promotions - Seasonal Sales',
+ status: 'Online',
+ eventCount: 13423,
+ users: 54230,
+ viewsPerUser: 7.8,
+ averageTime: '2m 45s',
+ conversions: [
+ 241732, 256384, 289465, 321423, 345672, 378294, 398472, 420364, 436278, 460192, 495374,
+ 510283, 532489, 559672, 587312, 610982, 629385, 654732, 678925, 704362, 725182, 749384,
+ 772361, 798234, 819472, 846291, 872183, 894673, 919283, 945672,
+ ],
+ },
+ {
+ id: 17,
+ pageTitle: 'Tutorials - How to Guides',
+ status: 'Offline',
+ eventCount: 4234,
+ users: 19342,
+ viewsPerUser: 5.2,
+ averageTime: '3m 05s',
+ conversions: [
+ 12345, 14567, 16789, 18901, 21023, 23145, 25267, 27389, 29501, 31623, 33745, 35867, 37989,
+ 40101, 42223, 44345, 46467, 48589, 50701, 52823, 54945, 57067, 59189, 61301, 63423, 65545,
+ 67667, 69789, 71901, 74023,
+ ],
+ },
+ {
+ id: 18,
+ pageTitle: 'Blog Posts - Tech Insights',
+ status: 'Online',
+ eventCount: 8567,
+ users: 34234,
+ viewsPerUser: 6.3,
+ averageTime: '2m 50s',
+ conversions: [
+ 23456, 25678, 27890, 30102, 32324, 34546, 36768, 38980, 41202, 43424, 45646, 47868, 50080,
+ 52302, 54524, 56746, 58968, 61180, 63402, 65624, 67846, 70068, 72290, 74502, 76724, 78946,
+ 81168, 83380, 85602, 87824,
+ ],
+ },
+ {
+ id: 19,
+ pageTitle: 'Events - Webinars',
+ status: 'Offline',
+ eventCount: 3456,
+ users: 19234,
+ viewsPerUser: 4.5,
+ averageTime: '3m 20s',
+ conversions: [
+ 123456, 145678, 167890, 190012, 212324, 234546, 256768, 278980, 301202, 323424, 345646,
+ 367868, 390080, 412302, 434524, 456746, 478968, 501180, 523402, 545624, 567846, 590068,
+ 612290, 634502, 656724, 678946, 701168, 723380, 745602, 767824,
+ ],
+ },
+ {
+ id: 20,
+ pageTitle: 'Support - Contact Us',
+ status: 'Online',
+ eventCount: 6734,
+ users: 27645,
+ viewsPerUser: 3.9,
+ averageTime: '2m 55s',
+ conversions: [
+ 234567, 256789, 278901, 301023, 323245, 345467, 367689, 389801, 412023, 434245, 456467,
+ 478689, 500801, 523023, 545245, 567467, 589689, 611801, 634023, 656245, 678467, 700689,
+ 722801, 745023, 767245, 789467, 811689, 833801, 856023, 878245,
+ ],
+ },
+ {
+ id: 21,
+ pageTitle: 'Case Studies - Success Stories',
+ status: 'Offline',
+ eventCount: 4567,
+ users: 19345,
+ viewsPerUser: 6.1,
+ averageTime: '3m 10s',
+ conversions: [
+ 34567, 36789, 38901, 41023, 43145, 45267, 47389, 49501, 51623, 53745, 55867, 57989, 60101,
+ 62223, 64345, 66467, 68589, 70701, 72823, 74945, 77067, 79189, 81301, 83423, 85545, 87667,
+ 89789, 91901, 94023, 96145,
+ ],
+ },
+ {
+ id: 22,
+ pageTitle: 'News - Industry Updates',
+ status: 'Online',
+ eventCount: 7856,
+ users: 34567,
+ viewsPerUser: 5.7,
+ averageTime: '3m 05s',
+ conversions: [
+ 45678, 47890, 50102, 52324, 54546, 56768, 58980, 61202, 63424, 65646, 67868, 70080, 72302,
+ 74524, 76746, 78968, 81180, 83402, 85624, 87846, 90068, 92290, 94502, 96724, 98946, 101168,
+ 103380, 105602, 107824, 110046,
+ ],
+ },
+ {
+ id: 23,
+ pageTitle: 'Forum - User Discussions',
+ status: 'Offline',
+ eventCount: 5678,
+ users: 23456,
+ viewsPerUser: 4.2,
+ averageTime: '2m 40s',
+ conversions: [
+ 56789, 58901, 61023, 63145, 65267, 67389, 69501, 71623, 73745, 75867, 77989, 80101, 82223,
+ 84345, 86467, 88589, 90701, 92823, 94945, 97067, 99189, 101301, 103423, 105545, 107667,
+ 109789, 111901, 114023, 116145, 118267,
+ ],
+ },
+ {
+ id: 24,
+ pageTitle: 'Documentation - API Reference',
+ status: 'Online',
+ eventCount: 6789,
+ users: 27689,
+ viewsPerUser: 5.0,
+ averageTime: '3m 00s',
+ conversions: [
+ 67890, 70102, 72324, 74546, 76768, 78980, 81202, 83424, 85646, 87868, 90080, 92302, 94524,
+ 96746, 98968, 101180, 103402, 105624, 107846, 110068, 112290, 114502, 116724, 118946, 121168,
+ 123380, 125602, 127824, 130046, 132268,
+ ],
+ },
+ {
+ id: 25,
+ pageTitle: 'Services - Consulting',
+ status: 'Offline',
+ eventCount: 4563,
+ users: 19240,
+ viewsPerUser: 6.4,
+ averageTime: '3m 25s',
+ conversions: [
+ 345678, 367890, 390012, 412324, 434546, 456768, 478980, 501202, 523424, 545646, 567868,
+ 590080, 612302, 634524, 656746, 678968, 701180, 723402, 745624, 767846, 790068, 812290,
+ 834502, 856724, 878946, 901168, 923380, 945602, 967824, 990046,
+ ],
+ },
+ {
+ id: 26,
+ pageTitle: 'Feedback - User Reviews',
+ status: 'Online',
+ eventCount: 8564,
+ users: 34240,
+ viewsPerUser: 6.2,
+ averageTime: '3m 15s',
+ conversions: [
+ 123478, 145690, 167912, 190134, 212356, 234578, 256790, 279012, 301234, 323456, 345678,
+ 367890, 390012, 412234, 434456, 456678, 478890, 501012, 523234, 545456, 567678, 589890,
+ 612012, 634234, 656456, 678678, 700890, 723012, 745234, 767456,
+ ],
+ },
+ {
+ id: 27,
+ pageTitle: 'Profiles - Team Members',
+ status: 'Offline',
+ eventCount: 5634,
+ users: 23423,
+ viewsPerUser: 5.5,
+ averageTime: '2m 45s',
+ conversions: [
+ 345123, 367345, 389567, 411789, 434012, 456234, 478456, 500678, 522901, 545123, 567345,
+ 589567, 611789, 634012, 656234, 678456, 700678, 722901, 745123, 767345, 789567, 811789,
+ 834012, 856234, 878456, 900678, 922901, 945123, 967345, 989567,
+ ],
+ },
+ {
+ id: 28,
+ pageTitle: 'Notifications - Alerts',
+ status: 'Online',
+ eventCount: 6745,
+ users: 27654,
+ viewsPerUser: 4.9,
+ averageTime: '3m 10s',
+ conversions: [
+ 456123, 478345, 500567, 522789, 545012, 567234, 589456, 611678, 633901, 656123, 678345,
+ 700567, 722789, 745012, 767234, 789456, 811678, 833901, 856123, 878345, 900567, 922789,
+ 945012, 967234, 989456, 1011678, 1033901, 1056123, 1078345, 1100567,
+ ],
+ },
+ {
+ id: 29,
+ pageTitle: 'Dashboard - Metrics',
+ status: 'Offline',
+ eventCount: 5678,
+ users: 23456,
+ viewsPerUser: 6.3,
+ averageTime: '2m 50s',
+ conversions: [
+ 567890, 590112, 612334, 634556, 656778, 678990, 701212, 723434, 745656, 767878, 790100,
+ 812322, 834544, 856766, 878988, 901210, 923432, 945654, 967876, 990098, 1012320, 1034542,
+ 1056764, 1078986, 1101208, 1123430, 1145652, 1167874, 1190096, 1212318,
+ ],
+ },
+ {
+ id: 30,
+ pageTitle: 'Reports - Monthly Analysis',
+ status: 'Online',
+ eventCount: 7890,
+ users: 34567,
+ viewsPerUser: 5.9,
+ averageTime: '3m 20s',
+ conversions: [
+ 678901, 701123, 723345, 745567, 767789, 790011, 812233, 834455, 856677, 878899, 901121,
+ 923343, 945565, 967787, 990009, 1012231, 1034453, 1056675, 1078897, 1101119, 1123341, 1145563,
+ 1167785, 1190007, 1212229, 1234451, 1256673, 1278895, 1301117, 1323339,
+ ],
+ },
+ {
+ id: 31,
+ pageTitle: 'Training - Employee Onboarding',
+ status: 'Offline',
+ eventCount: 3456,
+ users: 19234,
+ viewsPerUser: 6.1,
+ averageTime: '3m 10s',
+ conversions: [
+ 789012, 811234, 833456, 855678, 877890, 900112, 922334, 944556, 966778, 989000, 1011222,
+ 1033444, 1055666, 1077888, 1100110, 1122332, 1144554, 1166776, 1188998, 1211220, 1233442,
+ 1255664, 1277886, 1300108, 1322330, 1344552, 1366774, 1388996, 1411218, 1433440,
+ ],
+ },
+ {
+ id: 32,
+ pageTitle: 'Resources - Knowledge Base',
+ status: 'Online',
+ eventCount: 5678,
+ users: 23456,
+ viewsPerUser: 4.7,
+ averageTime: '3m 25s',
+ conversions: [
+ 890123, 912345, 934567, 956789, 979012, 1001234, 1023456, 1045678, 1067890, 1090123, 1112345,
+ 1134567, 1156789, 1179012, 1201234, 1223456, 1245678, 1267890, 1290123, 1312345, 1334567,
+ 1356789, 1379012, 1401234, 1423456, 1445678, 1467890, 1490123, 1512345, 1534567,
+ ],
+ },
+ {
+ id: 33,
+ pageTitle: 'Settings - Privacy Controls',
+ status: 'Offline',
+ eventCount: 6789,
+ users: 27689,
+ viewsPerUser: 5.8,
+ averageTime: '3m 05s',
+ conversions: [
+ 901234, 923456, 945678, 967890, 990112, 1012334, 1034556, 1056778, 1079000, 1101222, 1123444,
+ 1145666, 1167888, 1190110, 1212332, 1234554, 1256776, 1278998, 1301220, 1323442, 1345664,
+ 1367886, 1390108, 1412330, 1434552, 1456774, 1478996, 1501218, 1523440, 1545662,
+ ],
+ },
+ {
+ id: 34,
+ pageTitle: 'Integrations - Third-Party Services',
+ status: 'Online',
+ eventCount: 4567,
+ users: 19345,
+ viewsPerUser: 4.4,
+ averageTime: '2m 50s',
+ conversions: [
+ 123457, 145679, 167891, 190113, 212335, 234557, 256779, 279001, 301223, 323445, 345667,
+ 367889, 390011, 412233, 434455, 456677, 478899, 501121, 523343, 545565, 567787, 590009,
+ 612231, 634453, 656675, 678897, 701119, 723341, 745563, 767785,
+ ],
+ },
+ {
+ id: 35,
+ pageTitle: 'Account - Billing Information',
+ status: 'Offline',
+ eventCount: 7890,
+ users: 34567,
+ viewsPerUser: 5.4,
+ averageTime: '3m 00s',
+ conversions: [
+ 234568, 256790, 278912, 301134, 323356, 345578, 367790, 390012, 412234, 434456, 456678,
+ 478890, 501112, 523334, 545556, 567778, 590000, 612222, 634444, 656666, 678888, 701110,
+ 723332, 745554, 767776, 789998, 812220, 834442, 856664, 878886,
+ ],
+ },
+];
diff --git a/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx b/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx
new file mode 100644
index 00000000000..ab093005bf3
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/app/mocks/gridOrdersData.tsx
@@ -0,0 +1,287 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import { GridCellParams, GridRowsProp, GridColDef } from '@mui/x-data-grid';
+import { SparkLineChart } from '@mui/x-charts/SparkLineChart';
+
+type SparkLineData = number[];
+
+function getDaysInMonth(month: number, year: number) {
+ const date = new Date(year, month, 0);
+ const monthName = date.toLocaleDateString('en-US', {
+ month: 'short',
+ });
+ const daysInMonth = date.getDate();
+ const days = [];
+ let i = 1;
+ while (days.length < daysInMonth) {
+ days.push(`${monthName} ${i}`);
+ i += 1;
+ }
+ return days;
+}
+
+function renderSparklineCell(params: GridCellParams) {
+ const data = getDaysInMonth(4, 2024);
+ const { value, colDef } = params;
+
+ if (!value || value.length === 0) {
+ return null;
+ }
+
+ return (
+
+
+ );
+}
+
+function renderStatus(status: 'In Stock' | 'Out of Stock' | 'Low Stock') {
+ const colors: { [index: string]: 'success' | 'error' | 'default' } = {
+ 'In Stock': 'success',
+ 'Out of Stock': 'error',
+ 'Low Stock': 'default',
+ };
+
+ return
+ {params.value.name.toUpperCase().substring(0, 1)}
+
+ );
+}
+
+export const columns: GridColDef[] = [
+ { field: 'productName', headerName: 'Product Name', flex: 1.5, minWidth: 200 },
+ {
+ field: 'status',
+ headerName: 'Status',
+ flex: 1,
+ minWidth: 80,
+ renderCell: (params) => renderStatus(params.value as any),
+ },
+ {
+ field: 'totalOrders',
+ headerName: 'Total Orders',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 80,
+ },
+ {
+ field: 'revenue',
+ headerName: 'Revenue',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 100,
+ },
+ {
+ field: 'avgOrderValue',
+ headerName: 'Avg Order Value',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 120,
+ },
+ {
+ field: 'processingTime',
+ headerName: 'Processing Time',
+ headerAlign: 'right',
+ align: 'right',
+ flex: 1,
+ minWidth: 100,
+ },
+ {
+ field: 'dailyOrders',
+ headerName: 'Daily Orders',
+ flex: 1,
+ minWidth: 150,
+ renderCell: renderSparklineCell,
+ },
+];
+
+export const rows: GridRowsProp = [
+ {
+ id: 1,
+ productName: 'Premium Wireless Headphones',
+ status: 'In Stock',
+ totalOrders: 8345,
+ revenue: '$212,423',
+ avgOrderValue: '$185.50',
+ processingTime: '2d 15h',
+ dailyOrders: [
+ 65, 72, 68, 82, 75, 78, 88, 95, 89, 85, 92, 85, 88, 91, 87, 85, 89, 92, 95, 88, 85, 90, 92,
+ 89, 86, 88, 91, 94, 90, 87,
+ ],
+ },
+ {
+ id: 2,
+ productName: 'Smart Fitness Watch',
+ status: 'Low Stock',
+ totalOrders: 12567,
+ revenue: '$458,945',
+ avgOrderValue: '$149.99',
+ processingTime: '1d 8h',
+ dailyOrders: [
+ 120, 115, 125, 118, 130, 128, 135, 142, 138, 145, 150, 148, 155, 160, 158, 165, 170, 168, 175,
+ 172, 178, 180, 176, 182, 185, 188, 192, 190, 195, 198,
+ ],
+ },
+ {
+ id: 3,
+ productName: 'Organic Coffee Beans',
+ status: 'In Stock',
+ totalOrders: 25890,
+ revenue: '$129,450',
+ avgOrderValue: '$24.99',
+ processingTime: '1d 2h',
+ dailyOrders: [
+ 250, 245, 260, 255, 265, 270, 268, 275, 280, 278, 285, 290, 288, 295, 300, 298, 305, 310, 308,
+ 315, 320, 318, 325, 330, 328, 335, 340, 338, 345, 350,
+ ],
+ },
+ {
+ id: 4,
+ productName: 'Gaming Laptop Pro',
+ status: 'Out of Stock',
+ totalOrders: 3456,
+ revenue: '$4,147,200',
+ avgOrderValue: '$1,199.99',
+ processingTime: '3d 12h',
+ dailyOrders: [
+ 35, 32, 38, 36, 40, 42, 39, 45, 43, 48, 46, 50, 48, 52, 50, 55, 53, 58, 56, 60, 58, 62, 60,
+ 65, 63, 68, 66, 70, 68, 72,
+ ],
+ },
+ {
+ id: 5,
+ productName: 'Yoga Mat Premium',
+ status: 'In Stock',
+ totalOrders: 15678,
+ revenue: '$548,730',
+ avgOrderValue: '$34.99',
+ processingTime: '1d 4h',
+ dailyOrders: [
+ 155, 150, 160, 158, 165, 170, 168, 175, 172, 178, 180, 176, 182, 185, 188, 192, 190, 195, 198,
+ 200, 198, 205, 208, 210, 212, 215, 218, 220, 222, 225,
+ ],
+ },
+ {
+ id: 6,
+ productName: 'Smartphone Case',
+ status: 'In Stock',
+ totalOrders: 42567,
+ revenue: '$425,670',
+ avgOrderValue: '$19.99',
+ processingTime: '1d 0h',
+ dailyOrders: [
+ 420, 415, 425, 430, 428, 435, 440, 438, 445, 450, 448, 455, 460, 458, 465, 470, 468, 475, 480,
+ 478, 485, 490, 488, 495, 500, 498, 505, 510, 508, 515,
+ ],
+ },
+ {
+ id: 7,
+ productName: 'Professional Camera Kit',
+ status: 'Low Stock',
+ totalOrders: 2345,
+ revenue: '$2,345,000',
+ avgOrderValue: '$999.99',
+ processingTime: '2d 8h',
+ dailyOrders: [
+ 22, 20, 25, 23, 28, 26, 30, 28, 32, 30, 35, 33, 38, 36, 40, 38, 42, 40, 45, 43, 48, 46, 50,
+ 48, 52, 50, 55, 53, 58, 56,
+ ],
+ },
+ {
+ id: 8,
+ productName: 'Wireless Charging Pad',
+ status: 'In Stock',
+ totalOrders: 18934,
+ revenue: '$567,890',
+ avgOrderValue: '$29.99',
+ processingTime: '1d 6h',
+ dailyOrders: [
+ 180, 175, 185, 182, 188, 192, 190, 195, 198, 200, 198, 205, 208, 210, 212, 215, 218, 220, 222,
+ 225, 228, 230, 232, 235, 238, 240, 242, 245, 248, 250,
+ ],
+ },
+ {
+ id: 9,
+ productName: 'Smart Home Hub',
+ status: 'In Stock',
+ totalOrders: 7890,
+ revenue: '$789,000',
+ avgOrderValue: '$99.99',
+ processingTime: '2d 0h',
+ dailyOrders: [
+ 75, 72, 78, 76, 80, 82, 79, 85, 83, 88, 86, 90, 88, 92, 90, 95, 93, 98, 96, 100, 98, 102, 100,
+ 105, 103, 108, 106, 110, 108, 112,
+ ],
+ },
+ {
+ id: 10,
+ productName: 'Ergonomic Office Chair',
+ status: 'Low Stock',
+ totalOrders: 4567,
+ revenue: '$1,370,100',
+ avgOrderValue: '$299.99',
+ processingTime: '3d 0h',
+ dailyOrders: [
+ 42, 40, 45, 43, 48, 46, 50, 48, 52, 50, 55, 53, 58, 56, 60, 58, 62, 60, 65, 63, 68, 66, 70,
+ 68, 72, 70, 75, 73, 78, 76,
+ ],
+ },
+ {
+ id: 11,
+ productName: 'Portable Power Bank',
+ status: 'In Stock',
+ totalOrders: 23456,
+ revenue: '$703,680',
+ avgOrderValue: '$29.99',
+ processingTime: '1d 4h',
+ dailyOrders: [
+ 230, 225, 235, 232, 238, 242, 240, 245, 248, 250, 248, 255, 258, 260, 262, 265, 268, 270, 272,
+ 275, 278, 280, 282, 285, 288, 290, 292, 295, 298, 300,
+ ],
+ },
+ {
+ id: 12,
+ productName: 'Mechanical Keyboard',
+ status: 'In Stock',
+ totalOrders: 9876,
+ revenue: '$987,600',
+ avgOrderValue: '$99.99',
+ processingTime: '1d 12h',
+ dailyOrders: [
+ 95, 92, 98, 96, 100, 102, 99, 105, 103, 108, 106, 110, 108, 112, 110, 115, 113, 118, 116, 120,
+ 118, 122, 120, 125, 123, 128, 126, 130, 128, 132,
+ ],
+ },
+];
diff --git a/examples/core/auth-nextjs-themed/auth.ts b/examples/core/auth-nextjs-themed/auth.ts
new file mode 100644
index 00000000000..def197e2280
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/auth.ts
@@ -0,0 +1,60 @@
+import NextAuth from 'next-auth';
+import GitHub from 'next-auth/providers/github';
+import Google from 'next-auth/providers/google';
+import Credentials from 'next-auth/providers/credentials';
+import type { Provider } from 'next-auth/providers';
+
+const providers: Provider[] = [
+ GitHub({
+ clientId: process.env.GITHUB_CLIENT_ID,
+ clientSecret: process.env.GITHUB_CLIENT_SECRET,
+ }),
+ Google({
+ clientId: process.env.GOOGLE_CLIENT_ID,
+ clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+ }),
+ Credentials({
+ credentials: {
+ email: { label: 'Email Address', type: 'email' },
+ password: { label: 'Password', type: 'password' },
+ },
+ authorize(c) {
+ if (c.password === '@demo1' && c.email === 'toolpad-demo@mui.com') {
+ return {
+ id: 'test',
+ name: 'Toolpad Demo',
+ email: String(c.email),
+ };
+ }
+ return null;
+ },
+ }),
+];
+
+export const providerMap = providers.map((provider) => {
+ if (typeof provider === 'function') {
+ const providerData = provider();
+ return { id: providerData.id, name: providerData.name };
+ }
+ return { id: provider.id, name: provider.name };
+});
+
+export const { handlers, auth, signIn, signOut } = NextAuth({
+ providers,
+ secret: process.env.AUTH_SECRET,
+ pages: {
+ signIn: '/auth/signin',
+ },
+ callbacks: {
+ authorized({ auth: session, request: { nextUrl } }) {
+ const isLoggedIn = !!session?.user;
+ const isPublicPage = nextUrl.pathname.startsWith('/public');
+
+ if (isPublicPage || isLoggedIn) {
+ return true;
+ }
+
+ return false; // Redirect unauthenticated users to login page
+ },
+ },
+});
diff --git a/examples/core-auth-nextjs/src/middleware.ts b/examples/core/auth-nextjs-themed/middleware.ts
similarity index 100%
rename from examples/core-auth-nextjs/src/middleware.ts
rename to examples/core/auth-nextjs-themed/middleware.ts
diff --git a/examples/core/auth-nextjs-themed/next-env.d.ts b/examples/core/auth-nextjs-themed/next-env.d.ts
new file mode 100644
index 00000000000..40c3d68096c
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/next-env.d.ts
@@ -0,0 +1,5 @@
+/// = {
+ MuiList: {
+ styleOverrides: {
+ root: {
+ padding: '8px',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 0,
+ },
+ },
+ },
+ MuiListItem: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ [`& .${svgIconClasses.root}`]: {
+ width: '1rem',
+ height: '1rem',
+ color: theme.palette.text.secondary,
+ },
+ [`& .${typographyClasses.root}`]: {
+ fontWeight: 500,
+ },
+ [`& .${buttonBaseClasses.root}`]: {
+ display: 'flex',
+ gap: 8,
+ padding: '2px 8px',
+ borderRadius: theme.shape.borderRadius,
+ opacity: 0.7,
+ '&.Mui-selected': {
+ opacity: 1,
+ backgroundColor: alpha(theme.palette.action.selected, 0.3),
+ [`& .${svgIconClasses.root}`]: {
+ color: theme.palette.text.primary,
+ },
+ '&:focus-visible': {
+ backgroundColor: alpha(theme.palette.action.selected, 0.3),
+ },
+ '&:hover': {
+ backgroundColor: alpha(theme.palette.action.selected, 0.5),
+ },
+ },
+ '&:focus-visible': {
+ backgroundColor: 'transparent',
+ },
+ },
+ }),
+ },
+ },
+ MuiListItemText: {
+ styleOverrides: {
+ primary: ({ theme }) => ({
+ fontSize: theme.typography.body2.fontSize,
+ fontWeight: 500,
+ lineHeight: theme.typography.body2.lineHeight,
+ }),
+ secondary: ({ theme }) => ({
+ fontSize: theme.typography.caption.fontSize,
+ lineHeight: theme.typography.caption.lineHeight,
+ }),
+ },
+ },
+ MuiListItemIcon: {
+ styleOverrides: {
+ root: {
+ minWidth: 0,
+ justifyContent: 'center',
+ },
+ },
+ },
+ MuiChip: {
+ defaultProps: {
+ size: 'small',
+ },
+ styleOverrides: {
+ root: ({ theme }) => ({
+ border: '1px solid',
+ borderRadius: '999px',
+ [`& .${chipClasses.label}`]: {
+ fontWeight: 600,
+ },
+ variants: [
+ {
+ props: {
+ color: 'default',
+ },
+ style: {
+ borderColor: gray[200],
+ backgroundColor: gray[100],
+ [`& .${chipClasses.label}`]: {
+ color: gray[500],
+ },
+ [`& .${chipClasses.icon}`]: {
+ color: gray[500],
+ },
+ ...theme.applyStyles('dark', {
+ borderColor: gray[700],
+ backgroundColor: gray[800],
+ [`& .${chipClasses.label}`]: {
+ color: gray[300],
+ },
+ [`& .${chipClasses.icon}`]: {
+ color: gray[300],
+ },
+ }),
+ },
+ },
+ {
+ props: {
+ color: 'success',
+ },
+ style: {
+ borderColor: green[200],
+ backgroundColor: green[50],
+ [`& .${chipClasses.label}`]: {
+ color: green[500],
+ },
+ [`& .${chipClasses.icon}`]: {
+ color: green[500],
+ },
+ ...theme.applyStyles('dark', {
+ borderColor: green[800],
+ backgroundColor: green[900],
+ [`& .${chipClasses.label}`]: {
+ color: green[300],
+ },
+ [`& .${chipClasses.icon}`]: {
+ color: green[300],
+ },
+ }),
+ },
+ },
+ {
+ props: {
+ color: 'error',
+ },
+ style: {
+ borderColor: red[100],
+ backgroundColor: red[50],
+ [`& .${chipClasses.label}`]: {
+ color: red[500],
+ },
+ [`& .${chipClasses.icon}`]: {
+ color: red[500],
+ },
+ ...theme.applyStyles('dark', {
+ borderColor: red[800],
+ backgroundColor: red[900],
+ [`& .${chipClasses.label}`]: {
+ color: red[200],
+ },
+ [`& .${chipClasses.icon}`]: {
+ color: red[300],
+ },
+ }),
+ },
+ },
+ {
+ props: { size: 'small' },
+ style: {
+ maxHeight: 20,
+ [`& .${chipClasses.label}`]: {
+ fontSize: theme.typography.caption.fontSize,
+ },
+ [`& .${svgIconClasses.root}`]: {
+ fontSize: theme.typography.caption.fontSize,
+ },
+ },
+ },
+ {
+ props: { size: 'medium' },
+ style: {
+ [`& .${chipClasses.label}`]: {
+ fontSize: theme.typography.caption.fontSize,
+ },
+ },
+ },
+ ],
+ }),
+ },
+ },
+ MuiTablePagination: {
+ styleOverrides: {
+ actions: {
+ display: 'flex',
+ gap: 8,
+ marginRight: 6,
+ [`& .${iconButtonClasses.root}`]: {
+ minWidth: 0,
+ width: 36,
+ height: 36,
+ },
+ },
+ },
+ },
+ MuiIcon: {
+ defaultProps: {
+ fontSize: 'small',
+ },
+ styleOverrides: {
+ root: {
+ variants: [
+ {
+ props: {
+ fontSize: 'small',
+ },
+ style: {
+ fontSize: '1rem',
+ },
+ },
+ ],
+ },
+ },
+ },
+};
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/feedback.tsx b/examples/core/auth-nextjs-themed/theme/customizations/feedback.tsx
new file mode 100644
index 00000000000..19b5942825b
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/theme/customizations/feedback.tsx
@@ -0,0 +1,40 @@
+import { Theme, alpha, Components } from '@mui/material/styles';
+import { gray } from '../themePrimitives';
+
+export const feedbackCustomizations: Components = {
+ MuiAlert: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ borderRadius: 10,
+ color: theme.palette.text.primary,
+ border: `1px solid ${alpha(gray[300], 0.9)}`,
+ ...theme.applyStyles('dark', {
+ border: `1px solid ${alpha(gray[700], 0.9)}`,
+ }),
+ }),
+ },
+ },
+ MuiDialog: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ '& .MuiDialog-paper': {
+ borderRadius: '10px',
+ border: '1px solid',
+ borderColor: theme.palette.divider,
+ },
+ }),
+ },
+ },
+ MuiLinearProgress: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ height: 8,
+ borderRadius: 8,
+ backgroundColor: gray[200],
+ ...theme.applyStyles('dark', {
+ backgroundColor: gray[800],
+ }),
+ }),
+ },
+ },
+};
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/index.ts b/examples/core/auth-nextjs-themed/theme/customizations/index.ts
new file mode 100644
index 00000000000..6c7c04eeb5b
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/theme/customizations/index.ts
@@ -0,0 +1,4 @@
+export { inputsCustomizations } from './inputs';
+export { dataDisplayCustomizations } from './dataDisplay';
+export { feedbackCustomizations } from './feedback';
+export { navigationCustomizations } from './navigation';
diff --git a/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
new file mode 100644
index 00000000000..6a5f28d1f98
--- /dev/null
+++ b/examples/core/auth-nextjs-themed/theme/customizations/inputs.tsx
@@ -0,0 +1,466 @@
+import * as React from 'react';
+import { alpha, Theme, Components } from '@mui/material/styles';
+import { outlinedInputClasses } from '@mui/material/OutlinedInput';
+import { svgIconClasses } from '@mui/material/SvgIcon';
+import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
+import { toggleButtonClasses } from '@mui/material/ToggleButton';
+import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
+import { gray, brand } from '../themePrimitives';
+
+export const inputsCustomizations: Components = {
+ MuiButtonBase: {
+ defaultProps: {
+ disableTouchRipple: true,
+ disableRipple: true,
+ },
+ styleOverrides: {
+ root: ({ theme }) => ({
+ boxSizing: 'border-box',
+ transition: 'all 100ms ease-in',
+ '&:focus-visible': {
+ outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
+ outlineOffset: '2px',
+ },
+ }),
+ },
+ },
+ MuiButton: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ boxShadow: 'none',
+ borderRadius: theme.shape.borderRadius,
+ textTransform: 'none',
+ variants: [
+ {
+ props: {
+ size: 'small',
+ },
+ style: {
+ height: '2.25rem',
+ padding: '8px 12px',
+ },
+ },
+ {
+ props: {
+ size: 'medium',
+ },
+ style: {
+ height: '2.5rem', // 40px
+ },
+ },
+ {
+ props: {
+ color: 'primary',
+ variant: 'contained',
+ },
+ style: {
+ color: 'white',
+ backgroundColor: gray[900],
+ backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
+ boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
+ border: `1px solid ${gray[700]}`,
+ '&:hover': {
+ backgroundImage: 'none',
+ backgroundColor: gray[700],
+ boxShadow: 'none',
+ },
+ '&:active': {
+ backgroundColor: gray[800],
+ },
+ ...theme.applyStyles('dark', {
+ color: 'black',
+ backgroundColor: gray[50],
+ backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
+ boxShadow: 'inset 0 -1px 0 hsl(220, 30%, 80%)',
+ border: `1px solid ${gray[50]}`,
+ '&:hover': {
+ backgroundImage: 'none',
+ backgroundColor: gray[300],
+ boxShadow: 'none',
+ },
+ '&:active': {
+ backgroundColor: gray[400],
+ },
+ }),
+ },
+ },
+ {
+ props: {
+ color: 'secondary',
+ variant: 'contained',
+ },
+ style: {
+ color: 'white',
+ backgroundColor: brand[300],
+ backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
+ boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
+ border: `1px solid ${brand[500]}`,
+ '&:hover': {
+ backgroundColor: brand[700],
+ boxShadow: 'none',
+ },
+ '&:active': {
+ backgroundColor: brand[700],
+ backgroundImage: 'none',
+ },
+ },
+ },
+ {
+ props: {
+ variant: 'outlined',
+ },
+ style: {
+ color: theme.palette.text.primary,
+ border: '1px solid',
+ borderColor: gray[200],
+ backgroundColor: alpha(gray[50], 0.3),
+ '&:hover': {
+ backgroundColor: gray[100],
+ borderColor: gray[300],
+ },
+ '&:active': {
+ backgroundColor: gray[200],
+ },
+ ...theme.applyStyles('dark', {
+ backgroundColor: gray[800],
+ borderColor: gray[700],
+
+ '&:hover': {
+ backgroundColor: gray[900],
+ borderColor: gray[600],
+ },
+ '&:active': {
+ backgroundColor: gray[900],
+ },
+ }),
+ },
+ },
+ {
+ props: {
+ color: 'secondary',
+ variant: 'outlined',
+ },
+ style: {
+ color: brand[700],
+ border: '1px solid',
+ borderColor: brand[200],
+ backgroundColor: brand[50],
+ '&:hover': {
+ backgroundColor: brand[100],
+ borderColor: brand[400],
+ },
+ '&:active': {
+ backgroundColor: alpha(brand[200], 0.7),
+ },
+ ...theme.applyStyles('dark', {
+ color: brand[50],
+ border: '1px solid',
+ borderColor: brand[900],
+ backgroundColor: alpha(brand[900], 0.3),
+ '&:hover': {
+ borderColor: brand[700],
+ backgroundColor: alpha(brand[900], 0.6),
+ },
+ '&:active': {
+ backgroundColor: alpha(brand[900], 0.5),
+ },
+ }),
+ },
+ },
+ {
+ props: {
+ variant: 'text',
+ },
+ style: {
+ color: gray[600],
+ '&:hover': {
+ backgroundColor: gray[100],
+ },
+ '&:active': {
+ backgroundColor: gray[200],
+ },
+ ...theme.applyStyles('dark', {
+ color: gray[50],
+ '&:hover': {
+ backgroundColor: gray[700],
+ },
+ '&:active': {
+ backgroundColor: alpha(gray[700], 0.7),
+ },
+ }),
+ },
+ },
+ {
+ props: {
+ color: 'secondary',
+ variant: 'text',
+ },
+ style: {
+ color: brand[700],
+ '&:hover': {
+ backgroundColor: alpha(brand[100], 0.5),
+ },
+ '&:active': {
+ backgroundColor: alpha(brand[200], 0.7),
+ },
+ ...theme.applyStyles('dark', {
+ color: brand[100],
+ '&:hover': {
+ backgroundColor: alpha(brand[900], 0.5),
+ },
+ '&:active': {
+ backgroundColor: alpha(brand[900], 0.3),
+ },
+ }),
+ },
+ },
+ ],
+ }),
+ },
+ },
+ // @ts-ignore TODO: MuiLoadingButton is not present in the default `theme`
+ MuiLoadingButton: {
+ styleOverrides: {
+ // @ts-ignore
+ root: ({ theme }) => ({
+ '& .MuiLoadingButton-loadingIndicator': {
+ color: gray[400],
+ ...theme.applyStyles('dark', {
+ color: gray[600],
+ }),
+ },
+ }),
+ },
+ },
+ MuiIconButton: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ boxShadow: 'none',
+ borderRadius: theme.shape.borderRadius,
+ textTransform: 'none',
+ fontWeight: theme.typography.fontWeightMedium,
+ letterSpacing: 0,
+ color: theme.palette.text.primary,
+ border: '1px solid ',
+ borderColor: gray[200],
+ backgroundColor: alpha(gray[50], 0.3),
+ '&:hover': {
+ backgroundColor: gray[100],
+ borderColor: gray[300],
+ },
+ '&:active': {
+ backgroundColor: gray[200],
+ },
+ ...theme.applyStyles('dark', {
+ backgroundColor: gray[800],
+ borderColor: gray[700],
+ '&:hover': {
+ backgroundColor: gray[900],
+ borderColor: gray[600],
+ },
+ '&:active': {
+ backgroundColor: gray[900],
+ },
+ }),
+ variants: [
+ {
+ props: {
+ size: 'small',
+ },
+ style: {
+ width: '2.25rem',
+ height: '2.25rem',
+ padding: '0.25rem',
+ [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
+ },
+ },
+ {
+ props: {
+ size: 'medium',
+ },
+ style: {
+ width: '2.5rem',
+ height: '2.5rem',
+ },
+ },
+ ],
+ }),
+ },
+ },
+ MuiToggleButtonGroup: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ borderRadius: '10px',
+ boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
+ [`& .${toggleButtonGroupClasses.selected}`]: {
+ color: brand[500],
+ },
+ ...theme.applyStyles('dark', {
+ [`& .${toggleButtonGroupClasses.selected}`]: {
+ color: '#fff',
+ },
+ boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
+ }),
+ }),
+ },
+ },
+ MuiToggleButton: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ padding: '12px 16px',
+ textTransform: 'none',
+ borderRadius: '10px',
+ fontWeight: 500,
+ ...theme.applyStyles('dark', {
+ color: gray[400],
+ boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
+ [`&.${toggleButtonClasses.selected}`]: {
+ color: brand[300],
+ },
+ }),
+ }),
+ },
+ },
+ MuiCheckbox: {
+ defaultProps: {
+ disableRipple: true,
+ icon: = {
+ MuiMenuItem: {
+ styleOverrides: {
+ root: ({ theme }) => ({
+ borderRadius: theme.shape.borderRadius,
+ padding: '6px 8px',
+ [`&.${menuItemClasses.focusVisible}`]: {
+ backgroundColor: 'transparent',
+ },
+ [`&.${menuItemClasses.selected}`]: {
+ [`&.${menuItemClasses.focusVisible}`]: {
+ backgroundColor: alpha(theme.palette.action.selected, 0.3),
+ },
+ },
+ }),
+ },
+ },
+ MuiMenu: {
+ styleOverrides: {
+ list: {
+ gap: '0px',
+ [`&.${dividerClasses.root}`]: {
+ margin: '0 -8px',
+ },
+ },
+ paper: ({ theme }) => ({
+ marginTop: '4px',
+ borderRadius: theme.shape.borderRadius,
+ border: `1px solid ${theme.palette.divider}`,
+ backgroundImage: 'none',
+ background: 'hsl(0, 0%, 100%)',
+ boxShadow:
+ 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
+ [`& .${buttonBaseClasses.root}`]: {
+ '&.Mui-selected': {
+ backgroundColor: alpha(theme.palette.action.selected, 0.3),
+ },
+ },
+ ...theme.applyStyles('dark', {
+ background: gray[900],
+ boxShadow:
+ 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
+ }),
+ }),
+ },
+ },
+ MuiSelect: {
+ defaultProps: {
+ IconComponent: React.forwardRef((props, ref) => (
+
+ {props.children}
+
+ );
+}
diff --git a/examples/core-auth-nextjs/src/app/(dashboard)/orders/page.tsx b/examples/core/auth-nextjs/src/app/(dashboard)/orders/page.tsx
similarity index 100%
rename from examples/core-auth-nextjs/src/app/(dashboard)/orders/page.tsx
rename to examples/core/auth-nextjs/src/app/(dashboard)/orders/page.tsx
diff --git a/examples/core-auth-nextjs/src/app/(dashboard)/page.tsx b/examples/core/auth-nextjs/src/app/(dashboard)/page.tsx
similarity index 100%
rename from examples/core-auth-nextjs/src/app/(dashboard)/page.tsx
rename to examples/core/auth-nextjs/src/app/(dashboard)/page.tsx
diff --git a/examples/core/auth-nextjs/src/app/api/auth/[...nextauth]/route.ts b/examples/core/auth-nextjs/src/app/api/auth/[...nextauth]/route.ts
new file mode 100644
index 00000000000..ca225652075
--- /dev/null
+++ b/examples/core/auth-nextjs/src/app/api/auth/[...nextauth]/route.ts
@@ -0,0 +1,3 @@
+import { handlers } from '../../../../auth';
+
+export const { GET, POST } = handlers;
diff --git a/examples/core-auth-nextjs/src/app/auth/signin/page.tsx b/examples/core/auth-nextjs/src/app/auth/signin/page.tsx
similarity index 100%
rename from examples/core-auth-nextjs/src/app/auth/signin/page.tsx
rename to examples/core/auth-nextjs/src/app/auth/signin/page.tsx
diff --git a/examples/core-auth-nextjs/src/app/layout.tsx b/examples/core/auth-nextjs/src/app/layout.tsx
similarity index 87%
rename from examples/core-auth-nextjs/src/app/layout.tsx
rename to examples/core/auth-nextjs/src/app/layout.tsx
index 610583ab933..ed6df4dbcc3 100644
--- a/examples/core-auth-nextjs/src/app/layout.tsx
+++ b/examples/core/auth-nextjs/src/app/layout.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
-import { AppProvider } from '@toolpad/core/nextjs';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { NextAppProvider } from '@toolpad/core/nextjs';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import type { Navigation } from '@toolpad/core/AppProvider';
@@ -40,14 +40,14 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
-
{props.children}
-
+
diff --git a/examples/core-auth-nextjs/src/app/public/layout.tsx b/examples/core/auth-nextjs/src/app/public/layout.tsx
similarity index 100%
rename from examples/core-auth-nextjs/src/app/public/layout.tsx
rename to examples/core/auth-nextjs/src/app/public/layout.tsx
diff --git a/examples/core/auth-nextjs/src/app/public/page.tsx b/examples/core/auth-nextjs/src/app/public/page.tsx
new file mode 100644
index 00000000000..9eb1ae52478
--- /dev/null
+++ b/examples/core/auth-nextjs/src/app/public/page.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default async function HomePage() {
+ return Public page ;
+}
diff --git a/examples/core-auth-nextjs/src/auth.ts b/examples/core/auth-nextjs/src/auth.ts
similarity index 74%
rename from examples/core-auth-nextjs/src/auth.ts
rename to examples/core/auth-nextjs/src/auth.ts
index 74dd44ac883..c9874f0a52e 100644
--- a/examples/core-auth-nextjs/src/auth.ts
+++ b/examples/core/auth-nextjs/src/auth.ts
@@ -26,26 +26,11 @@ const providers: Provider[] = [
}),
];
-const missingVars: string[] = [];
-
if (!process.env.GITHUB_CLIENT_ID) {
- missingVars.push('GITHUB_CLIENT_ID');
+ console.warn('Missing environment variable "GITHUB_CLIENT_ID"');
}
if (!process.env.GITHUB_CLIENT_SECRET) {
- missingVars.push('GITHUB_CLIENT_SECRET');
-}
-
-if (missingVars.length > 0) {
- const baseMessage =
- 'Authentication is configured but the following environment variables are missing:';
-
- if (process.env.NODE_ENV === 'production') {
- throw new Error(`error - ${baseMessage} ${missingVars.join(', ')}`);
- } else {
- console.warn(
- `\u001b[33mwarn\u001b[0m - ${baseMessage} \u001b[31m${missingVars.join(', ')}\u001b[0m`,
- );
- }
+ console.warn('Missing environment variable "GITHUB_CLIENT_SECRET"');
}
export const providerMap = providers.map((provider) => {
diff --git a/examples/core/auth-nextjs/src/middleware.ts b/examples/core/auth-nextjs/src/middleware.ts
new file mode 100644
index 00000000000..02c48f4db60
--- /dev/null
+++ b/examples/core/auth-nextjs/src/middleware.ts
@@ -0,0 +1,6 @@
+export { auth as middleware } from './auth';
+
+export const config = {
+ // https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher
+ matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
+};
diff --git a/examples/core/auth-nextjs/tsconfig.json b/examples/core/auth-nextjs/tsconfig.json
new file mode 100644
index 00000000000..bb5584ed1a4
--- /dev/null
+++ b/examples/core/auth-nextjs/tsconfig.json
@@ -0,0 +1,23 @@
+{
+ "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"
+ }
+ ]
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
diff --git a/examples/core-vite/.gitignore b/examples/core/auth-vite/.gitignore
similarity index 100%
rename from examples/core-vite/.gitignore
rename to examples/core/auth-vite/.gitignore
diff --git a/examples/core/auth-vite/README.md b/examples/core/auth-vite/README.md
new file mode 100644
index 00000000000..c02f7e78a33
--- /dev/null
+++ b/examples/core/auth-vite/README.md
@@ -0,0 +1,33 @@
+# Toolpad Core - Vite with React Router and mock authentication
+
+This example provides a minimal setup to get Toolpad Core working in Vite with HMR, as well as routing with React Router and a mock authentication setup.
+
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example auth-vite
+# or
+pnpm dlx create-toolpad-app@latest --example auth-vite
+```
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## The source
+
+[Check out the source code](https://github.com/mui/toolpad/tree/master/examples/core/auth-vite/)
diff --git a/examples/core/auth-vite/index.html b/examples/core/auth-vite/index.html
new file mode 100644
index 00000000000..fc6eb70c9c8
--- /dev/null
+++ b/examples/core/auth-vite/index.html
@@ -0,0 +1,20 @@
+
+
+
+ Toolpad Core Vite with Auth
+
+
+
+
+
+
diff --git a/examples/core/auth-vite/package.json b/examples/core/auth-vite/package.json
new file mode 100644
index 00000000000..312aef1fbfb
--- /dev/null
+++ b/examples/core/auth-vite/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "core-vite-auth",
+ "version": "0.1.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "tsc -b && vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@emotion/react": "^11",
+ "@emotion/styled": "^11",
+ "@mui/icons-material": "^6",
+ "@mui/material": "^6",
+ "@toolpad/core": "latest",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "react-router": "^7"
+ },
+ "devDependencies": {
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
+ "@vitejs/plugin-react": "^4.3.2",
+ "typescript": "^5",
+ "vite": "^5.4.8"
+ }
+}
diff --git a/examples/core-vite/public/vite.svg b/examples/core/auth-vite/public/vite.svg
similarity index 100%
rename from examples/core-vite/public/vite.svg
rename to examples/core/auth-vite/public/vite.svg
diff --git a/examples/core/auth-vite/src/App.tsx b/examples/core/auth-vite/src/App.tsx
new file mode 100644
index 00000000000..1a54541e4ff
--- /dev/null
+++ b/examples/core/auth-vite/src/App.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { ReactRouterAppProvider } from '@toolpad/core/react-router';
+import { Outlet, useNavigate } from 'react-router';
+import type { Navigation, Session } from '@toolpad/core/AppProvider';
+import { SessionContext } from './SessionContext';
+
+const NAVIGATION: Navigation = [
+ {
+ kind: 'header',
+ title: 'Main items',
+ },
+ {
+ title: 'Dashboard',
+ icon: (null);
+ const navigate = useNavigate();
+
+ const signIn = React.useCallback(() => {
+ navigate('/sign-in');
+ }, [navigate]);
+
+ const signOut = React.useCallback(() => {
+ setSession(null);
+ navigate('/sign-in');
+ }, [navigate]);
+
+ const sessionContextValue = React.useMemo(() => ({ session, setSession }), [session, setSession]);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/examples/core/auth-vite/src/SessionContext.ts b/examples/core/auth-vite/src/SessionContext.ts
new file mode 100644
index 00000000000..6dff1dcae9a
--- /dev/null
+++ b/examples/core/auth-vite/src/SessionContext.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { Session } from '@toolpad/core';
+
+export interface SessionContextValue {
+ session: Session | null;
+ setSession: (session: Session | null) => void;
+}
+
+export const SessionContext = React.createContext({
+ session: {},
+ setSession: () => {},
+});
+
+export function useSession() {
+ return React.useContext(SessionContext);
+}
diff --git a/examples/core-vite/src/assets/.gitkeep b/examples/core/auth-vite/src/assets/.gitkeep
similarity index 100%
rename from examples/core-vite/src/assets/.gitkeep
rename to examples/core/auth-vite/src/assets/.gitkeep
diff --git a/examples/core/auth-vite/src/layouts/dashboard.tsx b/examples/core/auth-vite/src/layouts/dashboard.tsx
new file mode 100644
index 00000000000..03a99900aa0
--- /dev/null
+++ b/examples/core/auth-vite/src/layouts/dashboard.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Outlet, Navigate, useLocation } from 'react-router';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { useSession } from '../SessionContext';
+
+export default function Layout() {
+ const { session } = useSession();
+ const location = useLocation();
+
+ if (!session) {
+ // Add the `callbackUrl` search parameter
+ const redirectTo = `/sign-in?callbackUrl=${encodeURIComponent(location.pathname)}`;
+
+ return
+
+
+
+ );
+}
diff --git a/examples/core/auth-vite/src/main.tsx b/examples/core/auth-vite/src/main.tsx
new file mode 100644
index 00000000000..d5929bec598
--- /dev/null
+++ b/examples/core/auth-vite/src/main.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import App from './App';
+import Layout from './layouts/dashboard';
+import DashboardPage from './pages';
+import OrdersPage from './pages/orders';
+import SignInPage from './pages/signIn';
+
+const router = createBrowserRouter([
+ {
+ Component: App,
+ children: [
+ {
+ path: '/',
+ Component: Layout,
+ children: [
+ {
+ path: '/',
+ Component: DashboardPage,
+ },
+ {
+ path: '/orders',
+ Component: OrdersPage,
+ },
+ ],
+ },
+ {
+ path: '/sign-in',
+ Component: SignInPage,
+ },
+ ],
+ },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ ,
+);
diff --git a/examples/core-vite/src/pages/index.tsx b/examples/core/auth-vite/src/pages/index.tsx
similarity index 100%
rename from examples/core-vite/src/pages/index.tsx
rename to examples/core/auth-vite/src/pages/index.tsx
diff --git a/examples/core-vite/src/pages/orders.tsx b/examples/core/auth-vite/src/pages/orders.tsx
similarity index 100%
rename from examples/core-vite/src/pages/orders.tsx
rename to examples/core/auth-vite/src/pages/orders.tsx
diff --git a/examples/core/auth-vite/src/pages/signIn.tsx b/examples/core/auth-vite/src/pages/signIn.tsx
new file mode 100644
index 00000000000..17008f42546
--- /dev/null
+++ b/examples/core/auth-vite/src/pages/signIn.tsx
@@ -0,0 +1,47 @@
+'use client';
+import * as React from 'react';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import type { Session } from '@toolpad/core/AppProvider';
+import { useNavigate } from 'react-router';
+import { useSession } from '../SessionContext';
+
+const fakeAsyncGetSession = async (formData: any): Promise => {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ if (formData.get('password') === 'password') {
+ resolve({
+ user: {
+ name: 'Bharat Kashyap',
+ email: formData.get('email') || '',
+ image: 'https://avatars.githubusercontent.com/u/19550456',
+ },
+ });
+ }
+ reject(new Error('Incorrect credentials.'));
+ }, 1000);
+ });
+};
+
+export default function SignIn() {
+ const { setSession } = useSession();
+ const navigate = useNavigate();
+ return (
+ {
+ // Demo session
+ try {
+ const session = await fakeAsyncGetSession(formData);
+ if (session) {
+ setSession(session);
+ navigate(callbackUrl || '/', { replace: true });
+ return {};
+ }
+ } catch (error) {
+ return { error: error instanceof Error ? error.message : 'An error occurred' };
+ }
+ return {};
+ }}
+ />
+ );
+}
diff --git a/examples/core-vite/src/vite-env.d.ts b/examples/core/auth-vite/src/vite-env.d.ts
similarity index 100%
rename from examples/core-vite/src/vite-env.d.ts
rename to examples/core/auth-vite/src/vite-env.d.ts
diff --git a/examples/core/auth-vite/tsconfig.json b/examples/core/auth-vite/tsconfig.json
new file mode 100644
index 00000000000..251a83f8a97
--- /dev/null
+++ b/examples/core/auth-vite/tsconfig.json
@@ -0,0 +1,20 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": false,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src"]
+}
diff --git a/examples/core-vite/vite.config.ts b/examples/core/auth-vite/vite.config.ts
similarity index 100%
rename from examples/core-vite/vite.config.ts
rename to examples/core/auth-vite/vite.config.ts
diff --git a/examples/core/firebase-vite/.gitignore b/examples/core/firebase-vite/.gitignore
new file mode 100644
index 00000000000..a547bf36d8d
--- /dev/null
+++ b/examples/core/firebase-vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/core/firebase-vite/README.md b/examples/core/firebase-vite/README.md
new file mode 100644
index 00000000000..676555594b9
--- /dev/null
+++ b/examples/core/firebase-vite/README.md
@@ -0,0 +1,46 @@
+# Toolpad Core - Vite with React Router and Firebase Auth
+
+This example provides a minimal setup to get Toolpad Core working in Vite with HMR, as well as routing with React Router and authentication with Firebase.
+
+## Clone using `create-toolpad-app`
+
+To copy this example and customize it for your needs, run
+
+```bash
+npx create-toolpad-app@latest --example firebase-vite
+# or
+pnpm dlx create-toolpad-app@latest --example firebase-vite
+```
+
+## Setting up
+
+The project requires a `.env` with the following variables:
+
+```bash
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_AUTH_DOMAIN=
+VITE_FIREBASE_PROJECT_ID=
+VITE_FIREBASE_STORAGE_BUCKET=
+VITE_FIREBASE_MESSAGE_SENDER_ID=
+VITE_FIREBASE_APP_ID=
+```
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## The source
+
+[Check out the source code](https://github.com/mui/toolpad/tree/master/examples/core/vite/)
diff --git a/examples/core-vite/index.html b/examples/core/firebase-vite/index.html
similarity index 100%
rename from examples/core-vite/index.html
rename to examples/core/firebase-vite/index.html
diff --git a/examples/core/firebase-vite/package.json b/examples/core/firebase-vite/package.json
new file mode 100644
index 00000000000..5c86cf00fb9
--- /dev/null
+++ b/examples/core/firebase-vite/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "auth-vite-themed",
+ "version": "0.1.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "firebase": "^11",
+ "@emotion/react": "^11",
+ "@emotion/styled": "^11",
+ "@mui/icons-material": "^6",
+ "@mui/material": "^6",
+ "@toolpad/core": "latest",
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "react-router": "^7"
+ },
+ "devDependencies": {
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
+ "@vitejs/plugin-react": "^4.3.2",
+ "typescript": "^5",
+ "vite": "^5.4.8"
+ }
+}
diff --git a/examples/core/firebase-vite/public/vite.svg b/examples/core/firebase-vite/public/vite.svg
new file mode 100644
index 00000000000..e7b8dfb1b2a
--- /dev/null
+++ b/examples/core/firebase-vite/public/vite.svg
@@ -0,0 +1 @@
+(null);
+ const [loading, setLoading] = React.useState(true);
+
+ const sessionContextValue = React.useMemo(
+ () => ({
+ session,
+ setSession,
+ loading,
+ }),
+ [session, loading],
+ );
+
+ React.useEffect(() => {
+ // Returns an `unsubscribe` function to be called during teardown
+ const unsubscribe = onAuthStateChanged((user: User | null) => {
+ if (user) {
+ setSession({
+ user: {
+ name: user.displayName || '',
+ email: user.email || '',
+ image: user.photoURL || '',
+ },
+ });
+ } else {
+ setSession(null);
+ }
+ setLoading(false);
+ });
+
+ return () => unsubscribe();
+ }, []);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/examples/core/firebase-vite/src/SessionContext.tsx b/examples/core/firebase-vite/src/SessionContext.tsx
new file mode 100644
index 00000000000..bf7f187abfa
--- /dev/null
+++ b/examples/core/firebase-vite/src/SessionContext.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export interface Session {
+ user: {
+ name?: string;
+ email?: string;
+ image?: string;
+ };
+}
+
+interface SessionContextType {
+ session: Session | null;
+ setSession: (session: Session) => void;
+ loading: boolean;
+}
+
+const SessionContext = React.createContext({
+ session: null,
+ setSession: () => {},
+ loading: true,
+});
+
+export default SessionContext;
+
+export const useSession = () => React.useContext(SessionContext);
diff --git a/examples/core-tutorial/app/api/auth/[...nextAuth]/route.ts b/examples/core/firebase-vite/src/assets/.gitkeep
similarity index 100%
rename from examples/core-tutorial/app/api/auth/[...nextAuth]/route.ts
rename to examples/core/firebase-vite/src/assets/.gitkeep
diff --git a/examples/core/firebase-vite/src/firebase/auth.ts b/examples/core/firebase-vite/src/firebase/auth.ts
new file mode 100644
index 00000000000..014956544b3
--- /dev/null
+++ b/examples/core/firebase-vite/src/firebase/auth.ts
@@ -0,0 +1,92 @@
+import {
+ GoogleAuthProvider,
+ GithubAuthProvider,
+ signInWithPopup,
+ setPersistence,
+ browserSessionPersistence,
+ signInWithEmailAndPassword,
+ signOut,
+} from 'firebase/auth';
+import { firebaseAuth } from './firebaseConfig';
+
+const googleProvider = new GoogleAuthProvider();
+const githubProvider = new GithubAuthProvider();
+
+// Sign in with Google functionality
+export const signInWithGoogle = async () => {
+ try {
+ return setPersistence(firebaseAuth, browserSessionPersistence).then(async () => {
+ const result = await signInWithPopup(firebaseAuth, googleProvider);
+ return {
+ success: true,
+ user: result.user,
+ error: null,
+ };
+ });
+ } catch (error: any) {
+ return {
+ success: false,
+ user: null,
+ error: error.message,
+ };
+ }
+};
+
+// Sign in with GitHub functionality
+export const signInWithGithub = async () => {
+ try {
+ return setPersistence(firebaseAuth, browserSessionPersistence).then(async () => {
+ const result = await signInWithPopup(firebaseAuth, githubProvider);
+ return {
+ success: true,
+ user: result.user,
+ error: null,
+ };
+ });
+ } catch (error: any) {
+ return {
+ success: false,
+ user: null,
+ error: error.message,
+ };
+ }
+};
+
+// Sign in with email and password
+
+export async function signInWithCredentials(email: string, password: string) {
+ try {
+ return setPersistence(firebaseAuth, browserSessionPersistence).then(async () => {
+ const userCredential = await signInWithEmailAndPassword(firebaseAuth, email, password);
+ return {
+ success: true,
+ user: userCredential.user,
+ error: null,
+ };
+ });
+ } catch (error: any) {
+ return {
+ success: false,
+ user: null,
+ error: error.message || 'Failed to sign in with email/password',
+ };
+ }
+}
+
+// Sign out functionality
+export const firebaseSignOut = async () => {
+ try {
+ await signOut(firebaseAuth);
+ return { success: true };
+ } catch (error: any) {
+ return {
+ success: false,
+ error: error.message,
+ };
+ }
+};
+
+// Auth state observer
+export const onAuthStateChanged = (callback: (user: any) => void) => {
+ return firebaseAuth.onAuthStateChanged(callback);
+};
diff --git a/examples/core/firebase-vite/src/firebase/firebaseConfig.ts b/examples/core/firebase-vite/src/firebase/firebaseConfig.ts
new file mode 100644
index 00000000000..bc753697b56
--- /dev/null
+++ b/examples/core/firebase-vite/src/firebase/firebaseConfig.ts
@@ -0,0 +1,14 @@
+import { initializeApp } from 'firebase/app';
+import { getAuth } from 'firebase/auth';
+
+const app = initializeApp({
+ apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+ authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+ projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+ storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+ messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGE_SENDER_ID,
+ appId: import.meta.env.VITE_FIREBASE_APP_ID,
+});
+
+export const firebaseAuth = getAuth(app);
+export default app;
diff --git a/examples/core/firebase-vite/src/layouts/dashboard.tsx b/examples/core/firebase-vite/src/layouts/dashboard.tsx
new file mode 100644
index 00000000000..07e4183641b
--- /dev/null
+++ b/examples/core/firebase-vite/src/layouts/dashboard.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import LinearProgress from '@mui/material/LinearProgress';
+import { Outlet, Navigate, useLocation } from 'react-router';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer } from '@toolpad/core/PageContainer';
+import { Account } from '@toolpad/core/Account';
+
+import { useSession } from '../SessionContext';
+
+function CustomAccount() {
+ return (
+
+
+ );
+ }
+
+ if (!session) {
+ // Add the `callbackUrl` search parameter
+ const redirectTo = `/sign-in?callbackUrl=${encodeURIComponent(location.pathname)}`;
+
+ return
+
+
+
+ );
+}
diff --git a/examples/core/firebase-vite/src/main.tsx b/examples/core/firebase-vite/src/main.tsx
new file mode 100644
index 00000000000..a806e8e3b68
--- /dev/null
+++ b/examples/core/firebase-vite/src/main.tsx
@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import App from './App';
+import Layout from './layouts/dashboard';
+import DashboardPage from './pages';
+import OrdersPage from './pages/orders';
+import SignInPage from './pages/signin';
+
+const router = createBrowserRouter([
+ {
+ Component: App,
+ children: [
+ {
+ path: '/',
+ Component: Layout,
+ children: [
+ {
+ path: '',
+ Component: DashboardPage,
+ },
+ {
+ path: 'orders',
+ Component: OrdersPage,
+ },
+ ],
+ },
+ {
+ path: '/sign-in',
+ Component: SignInPage,
+ },
+ ],
+ },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+
+ ,
+);
diff --git a/examples/core/firebase-vite/src/pages/index.tsx b/examples/core/firebase-vite/src/pages/index.tsx
new file mode 100644
index 00000000000..e4581fc26bf
--- /dev/null
+++ b/examples/core/firebase-vite/src/pages/index.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default function DashboardPage() {
+ return Welcome to Toolpad! ;
+}
diff --git a/examples/core-tutorial/app/(dashboard)/orders/page.tsx b/examples/core/firebase-vite/src/pages/orders.tsx
similarity index 100%
rename from examples/core-tutorial/app/(dashboard)/orders/page.tsx
rename to examples/core/firebase-vite/src/pages/orders.tsx
diff --git a/examples/core/firebase-vite/src/pages/signin.tsx b/examples/core/firebase-vite/src/pages/signin.tsx
new file mode 100644
index 00000000000..32e8bdc8e34
--- /dev/null
+++ b/examples/core/firebase-vite/src/pages/signin.tsx
@@ -0,0 +1,87 @@
+'use client';
+import * as React from 'react';
+import Alert from '@mui/material/Alert';
+import LinearProgress from '@mui/material/LinearProgress';
+import { SignInPage } from '@toolpad/core/SignInPage';
+import { Navigate, useNavigate } from 'react-router';
+import { useSession, type Session } from '../SessionContext';
+import { signInWithGoogle, signInWithGithub, signInWithCredentials } from '../firebase/auth';
+
+function DemoInfo() {
+ return (
+
+ You can use toolpad-demo@mui.com with the password @demo1 to
+ test
+
+ );
+}
+
+export default function SignIn() {
+ const { session, setSession, loading } = useSession();
+ const navigate = useNavigate();
+
+ if (loading) {
+ return {
+ let result;
+ try {
+ if (provider.id === 'google') {
+ result = await signInWithGoogle();
+ }
+ if (provider.id === 'github') {
+ result = await signInWithGithub();
+ }
+ if (provider.id === 'credentials') {
+ const email = formData?.get('email') as string;
+ const password = formData?.get('password') as string;
+
+ if (!email || !password) {
+ return { error: 'Email and password are required' };
+ }
+
+ result = await signInWithCredentials(email, password);
+ }
+
+ if (result?.success && result?.user) {
+ // Convert Firebase user to Session format
+ const userSession: Session = {
+ user: {
+ name: result.user.displayName || '',
+ email: result.user.email || '',
+ image: result.user.photoURL || '',
+ },
+ };
+ setSession(userSession);
+ navigate(callbackUrl || '/', { replace: true });
+ return {};
+ }
+ return { error: result?.error || 'Failed to sign in' };
+ } catch (error) {
+ return { error: error instanceof Error ? error.message : 'An error occurred' };
+ }
+ }}
+ slots={{ subtitle: DemoInfo }}
+ slotProps={{
+ emailField: {
+ defaultValue: 'toolpad-demo@mui.com',
+ },
+ passwordField: {
+ defaultValue: '@demo1',
+ },
+ }}
+ />
+ );
+}
diff --git a/examples/core/firebase-vite/src/vite-env.d.ts b/examples/core/firebase-vite/src/vite-env.d.ts
new file mode 100644
index 00000000000..11f02fe2a00
--- /dev/null
+++ b/examples/core/firebase-vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// Welcome to the Toolpad orders! ;
+}
diff --git a/examples/core-tutorial/app/(dashboard)/page.tsx b/examples/core/tutorial/app/(dashboard)/page.tsx
similarity index 100%
rename from examples/core-tutorial/app/(dashboard)/page.tsx
rename to examples/core/tutorial/app/(dashboard)/page.tsx
diff --git a/examples/core-tutorial/app/layout.tsx b/examples/core/tutorial/app/layout.tsx
similarity index 65%
rename from examples/core-tutorial/app/layout.tsx
rename to examples/core/tutorial/app/layout.tsx
index eff87342084..490c41047c0 100644
--- a/examples/core-tutorial/app/layout.tsx
+++ b/examples/core/tutorial/app/layout.tsx
@@ -1,8 +1,10 @@
-import { AppProvider } from '@toolpad/core/nextjs';
+import * as React from 'react';
+import { NextAppProvider } from '@toolpad/core/nextjs';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import type { Navigation } from '@toolpad/core/AppProvider';
+import LinearProgress from '@mui/material/LinearProgress';
import theme from '../theme';
const NAVIGATION: Navigation = [
@@ -27,9 +29,11 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
-
- {children}
-
+
+ {children}
+
+
diff --git a/examples/core/tutorial/next-env.d.ts b/examples/core/tutorial/next-env.d.ts
new file mode 100644
index 00000000000..40c3d68096c
--- /dev/null
+++ b/examples/core/tutorial/next-env.d.ts
@@ -0,0 +1,5 @@
+/// Toolpad Core Vite
+
+
+
+
+
+
diff --git a/examples/core-vite/package.json b/examples/core/vite/package.json
similarity index 76%
rename from examples/core-vite/package.json
rename to examples/core/vite/package.json
index afe44cc4cf7..6d55773f903 100644
--- a/examples/core-vite/package.json
+++ b/examples/core/vite/package.json
@@ -13,13 +13,13 @@
"@mui/icons-material": "^6",
"@mui/material": "^6",
"@toolpad/core": "latest",
- "react": "^18",
- "react-dom": "^18",
- "react-router-dom": "^6"
+ "react": "^19.0.0",
+ "react-dom": "^19.0.0",
+ "react-router": "^7"
},
"devDependencies": {
- "@types/react": "^18",
- "@types/react-dom": "^18",
+ "@types/react": "^19.0.0",
+ "@types/react-dom": "^19.0.0",
"@vitejs/plugin-react": "^4.3.2",
"typescript": "^5",
"vite": "^5.4.8"
diff --git a/examples/core/vite/public/vite.svg b/examples/core/vite/public/vite.svg
new file mode 100644
index 00000000000..e7b8dfb1b2a
--- /dev/null
+++ b/examples/core/vite/public/vite.svg
@@ -0,0 +1 @@
+
+
+
);
}
diff --git a/examples/core-tutorial/app/auth/[...path]/page.tsx b/examples/core/vite/src/assets/.gitkeep
similarity index 100%
rename from examples/core-tutorial/app/auth/[...path]/page.tsx
rename to examples/core/vite/src/assets/.gitkeep
diff --git a/examples/core-vite/src/layouts/dashboard.tsx b/examples/core/vite/src/layouts/dashboard.tsx
similarity index 88%
rename from examples/core-vite/src/layouts/dashboard.tsx
rename to examples/core/vite/src/layouts/dashboard.tsx
index c540feb6e0f..84b8584f7c6 100644
--- a/examples/core-vite/src/layouts/dashboard.tsx
+++ b/examples/core/vite/src/layouts/dashboard.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
import { DashboardLayout } from '@toolpad/core/DashboardLayout';
import { PageContainer } from '@toolpad/core/PageContainer';
diff --git a/examples/core-vite/src/main.tsx b/examples/core/vite/src/main.tsx
similarity index 92%
rename from examples/core-vite/src/main.tsx
rename to examples/core/vite/src/main.tsx
index cda00abd9f2..cee7678c361 100644
--- a/examples/core-vite/src/main.tsx
+++ b/examples/core/vite/src/main.tsx
@@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
-import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { createBrowserRouter, RouterProvider } from 'react-router';
import App from './App';
import Layout from './layouts/dashboard';
import DashboardPage from './pages';
@@ -15,11 +15,11 @@ const router = createBrowserRouter([
Component: Layout,
children: [
{
- path: '/',
+ path: '',
Component: DashboardPage,
},
{
- path: '/orders',
+ path: 'orders',
Component: OrdersPage,
},
],
diff --git a/examples/core/vite/src/pages/index.tsx b/examples/core/vite/src/pages/index.tsx
new file mode 100644
index 00000000000..e4581fc26bf
--- /dev/null
+++ b/examples/core/vite/src/pages/index.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default function DashboardPage() {
+ return Welcome to Toolpad! ;
+}
diff --git a/examples/core/vite/src/pages/orders.tsx b/examples/core/vite/src/pages/orders.tsx
new file mode 100644
index 00000000000..de4948afd88
--- /dev/null
+++ b/examples/core/vite/src/pages/orders.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react';
+import Typography from '@mui/material/Typography';
+
+export default function OrdersPage() {
+ return Welcome to the Toolpad orders! ;
+}
diff --git a/examples/core/vite/src/vite-env.d.ts b/examples/core/vite/src/vite-env.d.ts
new file mode 100644
index 00000000000..11f02fe2a00
--- /dev/null
+++ b/examples/core/vite/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// A Toolpad Studio app that fetches data from Supabase and shows it in a list component.
-
-
-
-## Check out the live app
-
-[Open example](https://mui-toolpad-supabase-production.up.railway.app/prod/pages/page)
+ {
- // Add app name to package.json
-
- // Default files, common to all apps
- const files = new Map([
+ // Common files regardless of framework
+ const commonFiles = new Map([
['theme.ts', { content: theme }],
- ['next-env.d.ts', { content: nextTypes }],
- ['next.config.mjs', { content: nextConfig }],
['.eslintrc.json', { content: eslintConfig }],
- ['tsconfig.json', { content: tsConfig }],
['README.md', { content: readme }],
['.gitignore', { content: gitignore }],
[
@@ -53,51 +66,130 @@ export default function generateProject(
},
],
]);
- const indexPageContent = indexPage(options);
- switch (options.router) {
- case 'nextjs-pages': {
- const nextJsPagesRouterStarter = new Map([
- ['pages/index.tsx', { content: indexPageContent }],
- ['pages/orders/index.tsx', { content: ordersPage }],
- ['pages/_document.tsx', { content: document }],
- ['pages/_app.tsx', { content: app(options) }],
+ switch (options.framework) {
+ case 'vite': {
+ const viteFiles = new Map([
+ ['vite.config.mts', { content: viteConfig }],
+ ['src/main.tsx', { content: viteMain(options) }],
+ ['src/layouts/dashboard.tsx', { content: viteDashboardLayout(options) }],
+ ['src/App.tsx', { content: viteApp(options) }],
+ ['src/pages/index.tsx', { content: indexPage(options) }],
+ ['src/pages/orders.tsx', { content: ordersPage(options) }],
+ ['index.html', { content: viteHtml }],
]);
+
if (options.auth) {
const authFiles = new Map([
- ['auth.ts', { content: auth(options) }],
- ['.env.local', { content: envLocal(options) }],
- ['middleware.ts', { content: middleware }],
- // next-auth v5 does not provide an API route, so this file must be in the app router
- // even if the rest of the app is using pages router
- // https://authjs.dev/getting-started/installation#configure
- ['app/api/auth/[...nextAuth]/route.ts', { content: routeHandler }],
- ['pages/auth/signin.tsx', { content: signInPagePagesRouter(options) }],
+ ['src/firebase/auth.ts', { content: viteFirebaseAuth(options) }],
+ ['src/firebase/firebaseConfig.ts', { content: viteFirebaseConfig(options) }],
+ ['src/SessionContext.ts', { content: viteSessionContext }],
+ ['.env', { content: viteEnv }],
+ ['src/pages/signin.tsx', { content: viteSignIn(options) }],
]);
- return new Map([...files, ...nextJsPagesRouterStarter, ...authFiles]);
+
+ return new Map([...commonFiles, ...viteFiles, ...authFiles]);
}
- return new Map([...files, ...nextJsPagesRouterStarter]);
+
+ return new Map([...commonFiles, ...viteFiles]);
}
- case 'nextjs-app':
+
+ case 'nextjs':
default: {
- const nextJsAppRouterStarter = new Map([
- ['app/(dashboard)/layout.tsx', { content: dashboardLayout }],
- ['app/layout.tsx', { content: rootLayout(options) }],
- ['app/(dashboard)/page.tsx', { content: indexPageContent }],
- ['app/(dashboard)/orders/page.tsx', { content: ordersPage }],
+ const nextCommonFiles = new Map([
+ ['tsconfig.json', { content: tsConfig }],
+ ['next-env.d.ts', { content: nextTypes }],
+ ['next.config.mjs', { content: nextConfig(options) }],
]);
- if (options.auth) {
- const authFiles = new Map([
- ['auth.ts', { content: auth(options) }],
- ['.env.local', { content: envLocal(options) }],
- ['middleware.ts', { content: middleware }],
- ['app/api/auth/[...nextAuth]/route.ts', { content: routeHandler }],
- ['app/auth/signin/page.tsx', { content: signInPage(options) }],
- ]);
- return new Map([...files, ...nextJsAppRouterStarter, ...authFiles]);
+ switch (options.router) {
+ case 'nextjs-pages': {
+ const nextJsPagesRouterStarter = new Map([
+ ['pages/index.tsx', { content: indexPage(options) }],
+ ['pages/orders/index.tsx', { content: ordersPage(options) }],
+ ['pages/_document.tsx', { content: document }],
+ ['pages/_app.tsx', { content: app(options) }],
+ ]);
+ if (options.auth) {
+ const authFiles = new Map([
+ ['auth.ts', { content: auth(options) }],
+ ['.env.local', { content: envLocal(options) }],
+ ['middleware.ts', { content: middleware }],
+ // next-auth v5 does not provide an API route, so this file must be in the app router
+ // even if the rest of the app is using pages router
+ // https://authjs.dev/getting-started/installation#configure
+ ['app/api/auth/[...nextAuth]/route.ts', { content: routeHandler }],
+ ['pages/auth/signin.tsx', { content: signInPagePagesRouter(options) }],
+ ]);
+ if (options.hasNodemailerProvider || options.hasPasskeyProvider) {
+ // Prisma adapter support requires removal of middleware
+ authFiles.delete('middleware.ts');
+ const prismaFiles = new Map([
+ ['prisma.ts', { content: prisma }],
+ ['.env', { content: env }],
+ ['prisma/schema.prisma', { content: schemaPrisma(options) }],
+ ]);
+ return new Map([
+ ...commonFiles,
+ ...nextCommonFiles,
+ ...nextJsPagesRouterStarter,
+ ...authFiles,
+ ...prismaFiles,
+ ]);
+ }
+ return new Map([
+ ...commonFiles,
+ ...nextCommonFiles,
+ ...nextJsPagesRouterStarter,
+ ...authFiles,
+ ]);
+ }
+ return new Map([...commonFiles, ...nextCommonFiles, ...nextJsPagesRouterStarter]);
+ }
+ case 'nextjs-app':
+ default: {
+ const nextJsAppRouterStarter = new Map([
+ ['app/(dashboard)/layout.tsx', { content: dashboardLayout }],
+ ['app/layout.tsx', { content: rootLayout(options) }],
+ ['app/(dashboard)/page.tsx', { content: indexPage(options) }],
+ ['app/(dashboard)/orders/page.tsx', { content: ordersPage(options) }],
+ ]);
+ if (options.auth) {
+ const authFiles = new Map([
+ ['auth.ts', { content: auth(options) }],
+ ['.env.local', { content: envLocal(options) }],
+ ['middleware.ts', { content: middleware }],
+ ['app/api/auth/[...nextAuth]/route.ts', { content: routeHandler }],
+ ['app/auth/signin/page.tsx', { content: signInPage(options) }],
+ ['app/auth/signin/actions.ts', { content: signInAction(options) }],
+ ]);
+ if (options.hasNodemailerProvider || options.hasPasskeyProvider) {
+ // Prisma adapater support requires removal of middleware
+ authFiles.delete('middleware.ts');
+ const prismaFiles = new Map([
+ ['prisma.ts', { content: prisma }],
+ ['.env', { content: env }],
+ ['prisma/schema.prisma', { content: schemaPrisma(options) }],
+ ]);
+ return new Map([
+ ...commonFiles,
+ ...nextCommonFiles,
+ ...nextJsAppRouterStarter,
+ ...authFiles,
+ ...prismaFiles,
+ ]);
+ }
+
+ return new Map([
+ ...commonFiles,
+ ...nextCommonFiles,
+ ...nextJsAppRouterStarter,
+ ...authFiles,
+ ]);
+ }
+ return new Map([...commonFiles, ...nextCommonFiles, ...nextJsAppRouterStarter]);
+ }
}
- return new Map([...files, ...nextJsAppRouterStarter]);
}
}
}
diff --git a/packages/create-toolpad-app/src/index.ts b/packages/create-toolpad-app/src/index.ts
index fd202baab3a..e7d1f578cde 100644
--- a/packages/create-toolpad-app/src/index.ts
+++ b/packages/create-toolpad-app/src/index.ts
@@ -18,7 +18,12 @@ import generateStudioProject from './generateStudioProject';
import writeFiles from './writeFiles';
import { downloadAndExtractExample } from './examples';
import type { PackageJson } from './templates/packageType';
-import type { SupportedRouter, PackageManager, GenerateProjectOptions } from './types';
+import type {
+ SupportedFramework,
+ SupportedRouter,
+ PackageManager,
+ GenerateProjectOptions,
+} from './types';
/**
* Find package.json of the create-toolpad-app package
@@ -54,7 +59,6 @@ function getPackageManager(): PackageManager {
}
// From https://github.com/vercel/next.js/blob/canary/packages/create-next-app/helpers/is-folder-empty.ts
-
async function isFolderEmpty(pathDir: string): Promise {
const validFiles = [
'.DS_Store',
@@ -102,6 +106,7 @@ const validatePath = async (relativePath: string): Promise =>
await fs.access(absolutePath, fsConstants.F_OK);
// Directory exists, verify if it's empty to proceed
+
if (await isFolderEmpty(absolutePath)) {
return true;
}
@@ -272,13 +277,18 @@ const run = async () => {
message: example
? `Enter path of directory to download example "${chalk.cyan(example)}" into`
: 'Enter path of directory to bootstrap new app',
- validate: validatePath,
+ // This check is only necessary if an empty app is being bootstrapped,
+ // not if an example is being downloaded.
+ validate: example ? () => true : validatePath,
default: '.',
});
}
const absolutePath = bashResolvePath(projectPath);
+ let hasNodemailerProvider = false;
+ let hasPasskeyProvider = false;
+
// If the user has provided an example, download and extract it
if (example) {
await downloadAndExtractExample(absolutePath, example);
@@ -289,14 +299,28 @@ const run = async () => {
await scaffoldStudioProject(absolutePath, installFlag);
} else {
// Otherwise, create a new project with Toolpad Core
- const routerOption: SupportedRouter = await select({
- message: 'Which router would you like to use?',
- default: 'nextjs-app',
+ const frameworkOption: SupportedFramework = await select({
+ message: 'Which framework would you like to use?',
+ default: 'nextjs',
choices: [
- { name: 'Next.js App Router', value: 'nextjs-app' },
- { name: 'Next.js Pages Router', value: 'nextjs-pages' },
+ { name: 'Next.js', value: 'nextjs' },
+ { name: 'Vite', value: 'vite' },
],
});
+
+ let routerOption: SupportedRouter | undefined;
+
+ if (frameworkOption === 'nextjs') {
+ routerOption = await select({
+ message: 'Which router would you like to use?',
+ default: 'nextjs-app',
+ choices: [
+ { name: 'Next.js App Router', value: 'nextjs-app' },
+ { name: 'Next.js Pages Router', value: 'nextjs-pages' },
+ ],
+ });
+ }
+
const authFlag = await confirm({
message: 'Would you like to enable authentication?',
default: true,
@@ -306,38 +330,55 @@ const run = async () => {
authProviderOptions = await checkbox({
message: 'Select authentication providers to enable:',
required: true,
- choices: [
- { name: 'Google', value: 'google' },
- { name: 'GitHub', value: 'github' },
- { name: 'GitLab', value: 'gitlab' },
- { name: 'Twitter', value: 'twitter' },
- { name: 'Facebook', value: 'facebook' },
- { name: 'Cognito', value: 'cognito' },
- { name: 'Microsoft Entra ID', value: 'microsoft-entra-id' },
- { name: 'Apple', value: 'apple' },
- { name: 'Instagram', value: 'instagram' },
- { name: 'TikTok', value: 'tiktok' },
- { name: 'LinkedIn', value: 'linkedin' },
- { name: 'Slack', value: 'slack' },
- { name: 'Spotify', value: 'spotify' },
- { name: 'Twitch', value: 'twitch' },
- { name: 'Discord', value: 'discord' },
- { name: 'Line', value: 'line' },
- { name: 'Auth0', value: 'auth0' },
- { name: 'Keycloak', value: 'keycloak' },
- { name: 'Okta', value: 'okta' },
- { name: 'FusionAuth', value: 'fusionauth' },
- ],
+ choices:
+ frameworkOption === 'nextjs'
+ ? [
+ { name: 'Google', value: 'google' },
+ { name: 'GitHub', value: 'github' },
+ { name: 'Passkey', value: 'passkey' },
+ { name: 'Magic Link', value: 'nodemailer' },
+ { name: 'Credentials', value: 'credentials' },
+ { name: 'GitLab', value: 'gitlab' },
+ { name: 'Twitter', value: 'twitter' },
+ { name: 'Facebook', value: 'facebook' },
+ { name: 'Cognito', value: 'cognito' },
+ { name: 'Microsoft Entra ID', value: 'microsoft-entra-id' },
+ { name: 'Apple', value: 'apple' },
+ { name: 'Instagram', value: 'instagram' },
+ { name: 'TikTok', value: 'tiktok' },
+ { name: 'LinkedIn', value: 'linkedin' },
+ { name: 'Slack', value: 'slack' },
+ { name: 'Spotify', value: 'spotify' },
+ { name: 'Twitch', value: 'twitch' },
+ { name: 'Discord', value: 'discord' },
+ { name: 'Line', value: 'line' },
+ { name: 'Auth0', value: 'auth0' },
+ { name: 'Keycloak', value: 'keycloak' },
+ { name: 'Okta', value: 'okta' },
+ { name: 'FusionAuth', value: 'fusionauth' },
+ ]
+ : [
+ { name: 'Google', value: 'google' },
+ { name: 'GitHub', value: 'github' },
+ { name: 'Credentials', value: 'credentials' },
+ ],
});
+ hasNodemailerProvider = authProviderOptions?.includes('nodemailer');
+ hasPasskeyProvider = authProviderOptions?.includes('passkey');
}
+
const options = {
name: path.basename(absolutePath),
absolutePath,
coreVersion: args.coreVersion,
router: routerOption,
+ framework: frameworkOption,
auth: authFlag,
install: installFlag,
authProviders: authProviderOptions,
+ hasCredentialsProvider: authProviderOptions?.includes('credentials'),
+ hasNodemailerProvider,
+ hasPasskeyProvider,
};
await scaffoldCoreProject(options);
}
@@ -353,11 +394,17 @@ const run = async () => {
const installInstruction = example || !installFlag ? ` ${packageManager} install\n` : '';
+ const databaseInstruction =
+ hasNodemailerProvider || hasPasskeyProvider
+ ? ` npx prisma migrate dev --schema=prisma/schema.prisma\n`
+ : '';
+
const message = `Run the following to get started: \n\n${chalk.magentaBright(
- `${changeDirectoryInstruction}${installInstruction} ${packageManager}${
+ `${changeDirectoryInstruction}${databaseInstruction}${installInstruction} ${packageManager}${
packageManager === 'yarn' ? '' : ' run'
} dev`,
)}`;
+
// eslint-disable-next-line no-console
console.log(message);
// eslint-disable-next-line no-console
diff --git a/packages/create-toolpad-app/src/templates/auth/auth.ts b/packages/create-toolpad-app/src/templates/auth/auth.ts
deleted file mode 100644
index 89678eaf477..00000000000
--- a/packages/create-toolpad-app/src/templates/auth/auth.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import type { SupportedAuthProvider } from '@toolpad/core/SignInPage';
-import { kebabToConstant, kebabToPascal } from '@toolpad/utils/strings';
-import { requiresIssuer, requiresTenantId } from './utils';
-import { Template } from '../../types';
-
-const CredentialsProviderTemplate = `Credentials({
- credentials: {
- email: { label: 'Email Address', type: 'email' },
- password: { label: 'Password', type: 'password' },
- },
- authorize(c) {
- if (c.password !== 'password') {
- return null;
- }
- return {
- id: 'test',
- name: 'Test User',
- email: String(c.email),
- };
- },
-}),`;
-
-const oAuthProviderTemplate = (provider: SupportedAuthProvider) => `
- ${kebabToPascal(provider)}({
- clientId: process.env.${kebabToConstant(provider)}_CLIENT_ID,
- clientSecret: process.env.${kebabToConstant(provider)}_CLIENT_SECRET,${requiresIssuer(provider) ? `\nissuer: process.env.${kebabToConstant(provider)}_ISSUER,\n` : ''}${requiresTenantId(provider) ? `tenantId: process.env.${kebabToConstant(provider)}_TENANT_ID,` : ''}
- }),`;
-const checkEnvironmentVariables = (
- providers: SupportedAuthProvider[] | undefined,
-) => `const missingVars: string[] = [];
-
-const isMissing = (name: string, envVar: string | undefined) => {
- if (!envVar) {
- missingVars.push(name);
- }
-};
-
-${providers
- ?.filter((p) => p !== 'credentials')
- .map(
- (provider) =>
- `isMissing('${kebabToConstant(provider)}_CLIENT_ID', process.env.${kebabToConstant(provider)}_CLIENT_ID);\nisMissing('${kebabToConstant(provider)}_CLIENT_SECRET', process.env.${kebabToConstant(provider)}_CLIENT_SECRET)`,
- )
- .join('\n')}
-
-if (missingVars.length > 0) {
- const baseMessage = 'Authentication is configured but the following environment variables are missing:';
-
- if (process.env.NODE_ENV === 'production') {
- console.warn(\`warn: \${baseMessage} \${missingVars.join(', ')}\`);
- } else {
- console.warn(\`\\u001b[33mwarn:\\u001b[0m \${baseMessage} \\u001b[31m\${missingVars.join(', ')}\\u001b[0m\`);
- }
-}`;
-
-const auth: Template = (options) => {
- const providers = options.authProviders;
-
- return `import NextAuth from 'next-auth';\nimport { AuthProvider, SupportedAuthProvider } from '@toolpad/core/SignInPage';\n${providers
- ?.map(
- (provider) =>
- `import ${kebabToPascal(provider)} from 'next-auth/providers/${provider.toLowerCase()}';`,
- )
- .join('\n')}
-import type { Provider } from 'next-auth/providers';
-
-const providers: Provider[] = [${providers
- ?.map((provider) => {
- if (provider === 'credentials') {
- return CredentialsProviderTemplate;
- }
- return oAuthProviderTemplate(provider);
- })
- .join('\n')}
-];
-
-${checkEnvironmentVariables(providers)}
-
-export const providerMap = providers.map((provider) => {
- if (typeof provider === 'function') {
- const providerData = provider();
- return { id: providerData.id, name: providerData.name };
- }
- return { id: provider.id, name: provider.name };
-});
-
-export const { handlers, auth, signIn, signOut } = NextAuth({
- providers,
- secret: process.env.AUTH_SECRET,
- pages: {
- signIn: '/auth/signin',
- },
- callbacks: {
- authorized({ auth: session, request: { nextUrl } }) {
- const isLoggedIn = !!session?.user;
- const isPublicPage = nextUrl.pathname.startsWith('/public');
-
- if (isPublicPage || isLoggedIn) {
- return true;
- }
-
- return false; // Redirect unauthenticated users to login page
- },
- },
-});
- `;
-};
-
-export default auth;
diff --git a/packages/create-toolpad-app/src/templates/auth/nextjs-app/signInPage.ts b/packages/create-toolpad-app/src/templates/auth/nextjs-app/signInPage.ts
deleted file mode 100644
index a5d65da77e8..00000000000
--- a/packages/create-toolpad-app/src/templates/auth/nextjs-app/signInPage.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Template } from '../../../types';
-
-const signInPage: Template = (options) => {
- const { authProviders: providers } = options;
- const hasCredentialsProvider = providers?.includes('credentials');
-
- return `import * as React from 'react';
-import { SignInPage, type AuthProvider } from '@toolpad/core/SignInPage';
-import { AuthError } from 'next-auth';
-import { providerMap, signIn } from '../../../auth';
-
-export default function SignIn() {
- return (
- {
- 'use server';
- try {
- return await signIn(provider.id, {
- redirectTo: callbackUrl ?? '/',
- });
- } catch (error) {
- // The desired flow for successful sign in in all cases
- // and unsuccessful sign in for OAuth providers will cause a \`redirect\`,
- // and \`redirect\` is a throwing function, so we need to re-throw
- // to allow the redirect to happen
- // Source: https://github.com/vercel/next.js/issues/49298#issuecomment-1542055642
- // Detect a \`NEXT_REDIRECT\` error and re-throw it
- if (error instanceof Error && error.message === 'NEXT_REDIRECT') {
- throw error;
- }
- // Handle Auth.js errors
- if (error instanceof AuthError) {
- return {
- error: ${
- hasCredentialsProvider
- ? `error.type === 'CredentialsSignin' ? 'Invalid credentials.'
- : 'An error with Auth.js occurred.',`
- : `'An error with Auth.js occurred.'`
- },
- type: error.type,
- };
- }
- // An error boundary must exist to handle unknown errors
- return {
- error: 'Something went wrong.',
- type: 'UnknownError',
- };
- }
- }}
- />
- );
-}`;
-};
-
-export default signInPage;
diff --git a/packages/create-toolpad-app/src/templates/auth/nextjs-pages/signIn.ts b/packages/create-toolpad-app/src/templates/auth/nextjs-pages/signIn.ts
deleted file mode 100644
index d6731ab4f8c..00000000000
--- a/packages/create-toolpad-app/src/templates/auth/nextjs-pages/signIn.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Template } from '../../../types';
-
-const signIn: Template = (options) => {
- const { authProviders: providers } = options;
- const hasCredentialsProvider = providers?.includes('credentials');
-
- return `import * as React from 'react';
-import type { GetServerSidePropsContext, InferGetServerSidePropsType } from 'next';
-import { SignInPage } from '@toolpad/core/SignInPage';
-import { signIn } from 'next-auth/react';
-import { useRouter } from 'next/router';
-import { auth, providerMap } from '../../auth';
-
-export default function SignIn({
- providers,
-}: InferGetServerSidePropsType) {
- const router = useRouter();
- return (
- {
- try {
- const signInResponse = await signIn(
- provider.id,
- { callbackUrl: callbackUrl ?? '/' },
- );
- if (signInResponse && signInResponse.error) {
- // Handle Auth.js errors
- return {
- error: ${
- hasCredentialsProvider
- ? `error.type === 'CredentialsSignIn' ? 'Invalid credentials.'
- : 'An error with Auth.js occurred.'`
- : `'An error with Auth.js occurred'`
- },
- type: signInResponse.error,
- };
- }
- ${hasCredentialsProvider ? `router.push(callbackUrl ?? '/');` : ''}
- return {};
- } catch (error) {
- // An error boundary must exist to handle unknown errors
- return {
- error: 'Something went wrong.',
- type: 'UnknownError',
- };
- }
- }}
- />
- );
-}
-
-SignIn.getLayout = (page: React.ReactNode) => page;
-
-SignIn.requireAuth = false;
-
-export async function getServerSideProps(context: GetServerSidePropsContext) {
- const session = await auth(context);
-
- // If the user is already logged in, redirect.
- // Note: Make sure not to redirect to the same page
- // To avoid an infinite loop!
- if (session) {
- return { redirect: { destination: '/' } };
- }
-
- return {
- props: {
- providers: providerMap,
- },
- };
-}`;
-};
-
-export default signIn;
diff --git a/packages/create-toolpad-app/src/templates/gitignore.ts b/packages/create-toolpad-app/src/templates/gitignore.ts
index 83fb41355f3..8ccd0b95cf7 100644
--- a/packages/create-toolpad-app/src/templates/gitignore.ts
+++ b/packages/create-toolpad-app/src/templates/gitignore.ts
@@ -91,6 +91,9 @@ const gitignore = `
# Nuxt.js build / generate output
.nuxt
dist
+
+ # Vite build output
+ dist-ssr
# Gatsby files
.cache/
@@ -119,8 +122,21 @@ const gitignore = `
# TernJS port file
.tern-port
+
+
+ # Editor directories and files
+ .vscode/*
+ !.vscode/extensions.json
+ .idea
+ .DS_Store
+ *.suo
+ *.ntvs*
+ *.njsproj
+ *.sln
+ *.sw?
+
- # Stores VSCode versions used for testing VSCode extensions
+ # Stores VS Code versions used for testing VS Code extensions
.vscode-test
# yarn v2
diff --git a/packages/create-toolpad-app/src/templates/indexPage.ts b/packages/create-toolpad-app/src/templates/indexPage.ts
index 3ba19486dd6..5576feda920 100644
--- a/packages/create-toolpad-app/src/templates/indexPage.ts
+++ b/packages/create-toolpad-app/src/templates/indexPage.ts
@@ -8,21 +8,33 @@ const indexPage: Template = (options) => {
import Typography from '@mui/material/Typography';`;
let sessionHandling = '';
- let welcomeMessage = `Welcome to ();
+ React.useEffect(() => {
+ const loadProviders = async () => {
+ const providers = await getProviders();
+ const providerList =
+ Object.entries(providers || {}).map(([id, data]) => ({
+ id,
+ name: data.name,
+ })) || [];
+ setProviderMap(providerList);
+ };
+ loadProviders();
+ }, []);`
+ : ''
+}
+ return (
+ ) {
+ const router = useRouter();
+ return (
+ {
+ try {
+ ${
+ hasPasskeyProvider
+ ? `if (provider.id === 'passkey') {
+ try {
+ return await webauthnSignIn('passkey', {
+ email: formData.get('email'),
+ callbackUrl: callbackUrl || '/',
+ });
+ } catch (error) {
+ console.error(error);
+ return {
+ error: (error as Error)?.message || 'Something went wrong',
+ type: 'WebAuthnError',
+ };
+ }
+ }`
+ : ''
+ }
+ const signInResponse = await signIn(
+ provider.id, {
+ ...(formData ? { email: formData.get('email'), password: formData.get('password')${hasNodemailerProvider || hasCredentialsProvider ? `, redirect: false` : ''}
+ } :
+ { callbackUrl: callbackUrl ?? '/' })
+ }
+ );
+ ${
+ hasNodemailerProvider
+ ? `\n// For the nodemailer provider, we want to return a success message
+ // instead of redirecting to a \`verify-request\` page
+ if (
+ provider.id === "nodemailer"
+ ) {
+ return {
+ success: "Check your email for a verification link.",
+ };
+ }
+ `
+ : ''
+ }
+ if (signInResponse && signInResponse.error) {
+ // Handle Auth.js errors
+ return {
+ error: ${
+ hasCredentialsProvider
+ ? `signInResponse.error === 'CredentialsSignin' ? 'Invalid credentials.'
+ : 'An error with Auth.js occurred.'`
+ : `'An error with Auth.js occurred'`
+ },
+ type: signInResponse.error,
+ };
+ }
+ ${
+ hasCredentialsProvider || hasNodemailerProvider
+ ? `
+ if(provider.id === "credentials" || provider.id === "nodemailer") {
+ router.push(callbackUrl ?? '/');
+ }`
+ : ''
+ }
+ return {};
+ } catch (error) {
+ // An error boundary must exist to handle unknown errors
+ return {
+ error: 'Something went wrong.',
+ type: 'UnknownError',
+ };
+ }
+ }}
+ />
+ );
+}
+
+SignIn.getLayout = (page: React.ReactNode) => page;
+
+SignIn.requireAuth = false;
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const session = await auth(context);
+
+ // If the user is already logged in, redirect.
+ // Note: Make sure not to redirect to the same page
+ // To avoid an infinite loop!
+ if (session) {
+ return { redirect: { destination: '/' } };
+ }
+
+ return {
+ props: {
+ providers: providerMap,
+ },
+ };
+}`;
+};
+
+export default signIn;
diff --git a/packages/create-toolpad-app/src/templates/nextjs/auth/prisma.ts b/packages/create-toolpad-app/src/templates/nextjs/auth/prisma.ts
new file mode 100644
index 00000000000..34d03e0ef8c
--- /dev/null
+++ b/packages/create-toolpad-app/src/templates/nextjs/auth/prisma.ts
@@ -0,0 +1,11 @@
+const prisma = `import { PrismaClient } from '@prisma/client';
+
+const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };
+
+export const prisma = globalForPrisma.prisma || new PrismaClient();
+
+if (process.env.NODE_ENV !== 'production') {
+ globalForPrisma.prisma = prisma;
+}`;
+
+export default prisma;
diff --git a/packages/create-toolpad-app/src/templates/auth/route.ts b/packages/create-toolpad-app/src/templates/nextjs/auth/route.ts
similarity index 100%
rename from packages/create-toolpad-app/src/templates/auth/route.ts
rename to packages/create-toolpad-app/src/templates/nextjs/auth/route.ts
diff --git a/packages/create-toolpad-app/src/templates/nextjs/auth/schemaPrisma.ts b/packages/create-toolpad-app/src/templates/nextjs/auth/schemaPrisma.ts
new file mode 100644
index 00000000000..4fb2b066f13
--- /dev/null
+++ b/packages/create-toolpad-app/src/templates/nextjs/auth/schemaPrisma.ts
@@ -0,0 +1,88 @@
+import { Template } from '../../../types';
+
+const schemaPrisma: Template = (options) => `
+
+datasource db {
+ provider = "postgresql"
+ url = env("DATABASE_URL")
+}
+
+generator client {
+ provider = "prisma-client-js"
+}
+
+model User {
+ id String @id @default(cuid())
+ name String?
+ email String @unique
+ emailVerified DateTime?
+ image String?
+ accounts Account[]
+ sessions Session[]
+ ${options.hasPasskeyProvider ? 'Authenticator Authenticator[]' : ''}
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+model Account {
+ userId String
+ type String
+ provider String
+ providerAccountId String
+ refresh_token String?
+ access_token String?
+ expires_at Int?
+ token_type String?
+ scope String?
+ id_token String?
+ session_state String?
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ @@id([provider, providerAccountId])
+}
+
+model Session {
+ sessionToken String @unique
+ userId String
+ expires DateTime
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ createdAt DateTime @default(now())
+ updatedAt DateTime @updatedAt
+}
+
+model VerificationToken {
+ identifier String
+ token String
+ expires DateTime
+
+ @@id([identifier, token])
+}
+
+${
+ options.hasPasskeyProvider
+ ? `
+model Authenticator {
+ credentialID String @unique
+ userId String
+ providerAccountId String
+ credentialPublicKey String
+ counter Int
+ credentialDeviceType String
+ credentialBackedUp Boolean
+ transports String?
+
+ user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+
+ @@id([userId, credentialID])
+}`
+ : ''
+}
+`;
+
+export default schemaPrisma;
diff --git a/packages/create-toolpad-app/src/templates/auth/utils.ts b/packages/create-toolpad-app/src/templates/nextjs/auth/utils.ts
similarity index 100%
rename from packages/create-toolpad-app/src/templates/auth/utils.ts
rename to packages/create-toolpad-app/src/templates/nextjs/auth/utils.ts
diff --git a/packages/create-toolpad-app/src/templates/nextjs-app/dashboardLayout.ts b/packages/create-toolpad-app/src/templates/nextjs/nextjs-app/dashboardLayout.ts
similarity index 100%
rename from packages/create-toolpad-app/src/templates/nextjs-app/dashboardLayout.ts
rename to packages/create-toolpad-app/src/templates/nextjs/nextjs-app/dashboardLayout.ts
diff --git a/packages/create-toolpad-app/src/templates/nextjs-app/rootLayout.ts b/packages/create-toolpad-app/src/templates/nextjs/nextjs-app/rootLayout.ts
similarity index 80%
rename from packages/create-toolpad-app/src/templates/nextjs-app/rootLayout.ts
rename to packages/create-toolpad-app/src/templates/nextjs/nextjs-app/rootLayout.ts
index e229705445e..9ab535e257a 100644
--- a/packages/create-toolpad-app/src/templates/nextjs-app/rootLayout.ts
+++ b/packages/create-toolpad-app/src/templates/nextjs/nextjs-app/rootLayout.ts
@@ -1,13 +1,14 @@
-import { Template } from '../../types';
+import { Template } from '../../../types';
const rootLayout: Template = (options) => {
const authEnabled = options.auth;
return `import * as React from 'react';
-import { AppProvider } from '@toolpad/core/nextjs';
-import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter';
+import { NextAppProvider } from '@toolpad/core/nextjs';
+import { AppRouterCacheProvider } from '@mui/material-nextjs/v15-appRouter';
import DashboardIcon from '@mui/icons-material/Dashboard';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+${authEnabled ? '' : `import LinearProgress from '@mui/material/LinearProgress'`}
import type { Navigation } from '@toolpad/core/AppProvider';
${
authEnabled
@@ -57,7 +58,8 @@ export default ${authEnabled ? 'async ' : ''}function RootLayout(props: { childr
${authEnabled ? '' : ''}
-
{props.children}
-
,
title: 'MUI',
+ homeUrl: '/toolpad/core/introduction',
}}
router={router}
theme={demoTheme}
diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx
index 6344cc63b92..804d9c7ece1 100644
--- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx
+++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.tsx
@@ -76,6 +76,7 @@ export default function DashboardLayoutBranding(props: DemoProps) {
branding={{
logo: