diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md
index 36dd4d14471..975af850692 100644
--- a/docs/data/toolpad/core/introduction/examples.md
+++ b/docs/data/toolpad/core/introduction/examples.md
@@ -7,12 +7,10 @@ title: Examples
Browse a collection of Toolpad Core examples to help you get started quickly.
-
+## Featured examples
-## Featured Examples
+{{"component": "modules/components/examples/CoreFeaturedExamples.tsx"}}
-{{"component": "modules/components/Examples/FeaturedExamples.tsx", "examplesFile": "core-examples.ts"}}
+## Other examples
-## Other Examples
-
-{{"component": "modules/components/Examples/ExamplesGrid.tsx", "examplesFile": "core-examples.ts", "reverse": true}}
+{{"component": "modules/components/examples/CoreOtherExamples.tsx"}}
diff --git a/docs/data/toolpad/studio/getting-started/examples-overview.md b/docs/data/toolpad/studio/getting-started/examples-overview.md
index 4f071102e2f..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/Examples/ExamplesGrid.tsx", "examplesFile": "studio-examples.ts"}}
+{{"component": "modules/components/examples/StudioExamples.tsx"}}
diff --git a/docs/src/modules/components/Examples/core-examples.ts b/docs/src/modules/components/Examples/core-examples.ts
deleted file mode 100644
index 94e131d4766..00000000000
--- a/docs/src/modules/components/Examples/core-examples.ts
+++ /dev/null
@@ -1,112 +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/',
- codeSandbox: true,
- stackBlitz: true,
- },
- {
- 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',
- srcDark: '/static/toolpad/docs/core/auth-next-dark.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs/',
- codeSandbox: true,
- stackBlitz: true,
- },
- {
- 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',
- srcDark: '/static/toolpad/docs/core/auth-next-dark.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs-pages/',
- // infinite redirection
- codeSandbox: false,
- stackBlitz: false,
- },
- {
- title: 'Auth.js Magic Link with Next.js App Router',
- description:
- 'This app shows you to how to get started using Toolpad Core with Auth.js Magic Links 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-email',
- // Crash with Prisma
- codeSandbox: false,
- stackBlitz: false,
- },
- {
- 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/',
- codeSandbox: true,
- // Show nothing
- stackBlitz: false,
- },
- {
- title: 'Auth.js v4 with Next.js Pages Router',
- description:
- 'This app shows you to how to get started using Toolpad Core with Auth.js v4 and the Next.js Pages router.',
- src: '/static/toolpad/docs/core/auth-next.png',
- srcDark: '/static/toolpad/docs/core/auth-next-dark.png',
- source:
- 'https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs-pages-nextauth-4/',
- codeSandbox: true,
- // Show nothing
- stackBlitz: false,
- },
- {
- title: 'Next.js App Router with Auth.js Passkey',
- description:
- 'This app shows you to how to get started using Toolpad Core with Auth.js Passkeys and the Next.js App Router.',
- src: '/static/toolpad/docs/core/auth-next-passkey.png',
- srcDark: '/static/toolpad/docs/core/auth-next-passkey-dark.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs-passkey/',
- // Crash with Prisma
- codeSandbox: false,
- stackBlitz: false,
- },
- {
- title: 'Vite with React Router and mock authentication',
- description:
- 'This app shows you to how to get started using Toolpad Core with Vite, React Router and any external authentication provider.',
- src: '/static/toolpad/docs/core/vite-react-router.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core/auth-vite',
- codeSandbox: true,
- // Show nothing
- stackBlitz: false,
- },
- {
- title: 'Vite with React Router and Firebase Auth',
- description:
- 'This app shows you to how to get started using Toolpad Core with Vite, React Router, and authentication using Firebase.',
- src: '/static/toolpad/docs/core/firebase-vite-light.png',
- srcDark: '/static/toolpad/docs/core/firebase-vite-dark.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core/firebase-vite',
- // Show nothing
- codeSandbox: false,
- stackBlitz: false,
- },
- {
- title: 'Functional dashboard',
- description:
- 'This example shows you how to get started building a dashboard with Toolpad Core, Next.js App Router, Auth.js and Material UI components in a customized theme.',
- src: '/static/toolpad/docs/core/functional-dashboard.png',
- href: 'https://mui.com/toolpad/core/templates/nextjs-dashboard',
- srcDark: '/static/toolpad/docs/core/functional-dashboard-dark.png',
- source: 'https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs-themed',
- featured: true,
- new: true,
- codeSandbox: true,
- stackBlitz: true,
- },
- ];
-}
diff --git a/docs/src/modules/components/Examples/studio-examples.ts b/docs/src/modules/components/Examples/studio-examples.ts
deleted file mode 100644
index c889a4dbcd3..00000000000
--- a/docs/src/modules/components/Examples/studio-examples.ts
+++ /dev/null
@@ -1,118 +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/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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- 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',
- href: 'https://github.com/mui/toolpad/tree/master/examples/studio/custom-server/',
- source: 'https://github.com/mui/toolpad/tree/master/examples/studio/custom-server/',
- },
- ];
-}
diff --git a/docs/src/modules/components/Examples/types.ts b/docs/src/modules/components/Examples/types.ts
deleted file mode 100644
index 729ea4aa9c7..00000000000
--- a/docs/src/modules/components/Examples/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface Example {
- title: string;
- description: string;
- src: string;
- srcDark?: string;
- href: string;
- source: string;
- codeSandbox?: boolean;
- stackBlitz?: boolean;
- new?: boolean;
- featured?: boolean;
-}
diff --git a/docs/src/modules/components/examples/CoreFeaturedExamples.tsx b/docs/src/modules/components/examples/CoreFeaturedExamples.tsx
new file mode 100644
index 00000000000..67af812cef3
--- /dev/null
+++ b/docs/src/modules/components/examples/CoreFeaturedExamples.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import ExamplesFeatured from 'docs-toolpad/src/modules/components/examples/ExamplesFeatured';
+import coreExamples from 'docs-toolpad/src/modules/components/examples/coreExamples';
+
+export default function CoreFeaturedExamples() {
+ return ;
+}
diff --git a/docs/src/modules/components/examples/CoreOtherExamples.tsx b/docs/src/modules/components/examples/CoreOtherExamples.tsx
new file mode 100644
index 00000000000..14a65c35045
--- /dev/null
+++ b/docs/src/modules/components/examples/CoreOtherExamples.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import ExamplesGrid from 'docs-toolpad/src/modules/components/examples/ExamplesGrid';
+import coreExamples from 'docs-toolpad/src/modules/components/examples/coreExamples';
+
+export default function CoreOtherExamples() {
+ return ;
+}
diff --git a/docs/src/modules/components/Examples/FeaturedExamples.tsx b/docs/src/modules/components/examples/ExamplesFeatured.tsx
similarity index 82%
rename from docs/src/modules/components/Examples/FeaturedExamples.tsx
rename to docs/src/modules/components/examples/ExamplesFeatured.tsx
index c935d807b9d..9aa7e3ae46f 100644
--- a/docs/src/modules/components/Examples/FeaturedExamples.tsx
+++ b/docs/src/modules/components/examples/ExamplesFeatured.tsx
@@ -8,7 +8,6 @@ import Button from '@mui/material/Button';
import IconButton from '@mui/material/IconButton';
import Link from '@mui/material/Link';
import Tooltip from '@mui/material/Tooltip';
-import Skeleton from '@mui/material/Skeleton';
import Typography from '@mui/material/Typography';
import SvgIcon from '@mui/material/SvgIcon';
import Visibility from '@mui/icons-material/Visibility';
@@ -16,49 +15,17 @@ import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
import { useTheme } from '@mui/material/styles';
import { sxChip } from 'docs/src/modules/components/AppNavDrawerItem';
-import type { Example } from './types';
+import { Example, versionGitHubLink } from './examplesUtils';
interface FeaturedExamplesProps {
- examplesFile: string;
+ examples: Example[];
}
-export default function FeaturedExamples(props: FeaturedExamplesProps) {
+export default function ExamplesFeatured(props: FeaturedExamplesProps) {
const t = useTranslate();
- const [examples, setExamples] = React.useState([]);
- const [loading, setLoading] = React.useState(true);
-
- React.useEffect(() => {
- const importExamples = async () => {
- setLoading(true);
- let exampleContent = await import(`./${props.examplesFile}`);
- exampleContent = exampleContent
- .default()
- .filter((example: Example) => example.featured === true);
- setExamples(exampleContent);
- setLoading(false);
- };
- importExamples();
- }, [props.examplesFile]);
+ const examples = props.examples.filter((example: Example) => example.featured === true);
const docsTheme = useTheme();
- if (loading) {
- return (
-
- {[1].map((key) => (
-
-
-
-
-
- ))}
-
- );
- }
return (
@@ -84,7 +51,7 @@ export default function FeaturedExamples(props: FeaturedExamplesProps) {
}}
>
) : null}
-
+