fix: Separate examples into studio and core, add srcDark to Exa…

…mplesGrid
mui · Oct 23, 2024 · 1d8c260 · 1d8c260
1 parent b126c45
commit 1d8c260
Show file tree

Hide file tree

Showing 252 changed files with 132 additions and 105 deletions.
diff --git a/.gitignore b/.gitignore
@@ -62,7 +62,7 @@ packages/toolpad-studio/public/typings.json
 .toolpad-generated
 
 # examples
-examples/*/yarn.lock
+examples/*/*/yarn.lock
 
 
 # tests

diff --git a/README.md b/README.md
@@ -61,6 +61,12 @@ Check out our [documentation](https://mui.com/toolpad/studio/getting-started/).
 
 ## Examples
 
+### Core
+
+Find a [list of example apps](https://mui.com/toolpad/core/introduction/examples/) on our docs to help you get started with Toolpad Core quickly.
+
+### Studio
+
 Check out our [mui-public](https://tools-public.mui.com/prod/pages/OverviewPage) app to see how a Toolpad Studio app looks in production.
 Our documentation contains more [examples](https://mui.com/toolpad/studio/examples/) to help you get started.
 

diff --git a/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md b/docs/data/toolpad/core/components/sign-in-page/sign-in-page.md
@@ -56,7 +56,7 @@ The `SignInPage` component can be set up to use [Passkeys](https://passkeys.dev)
 {{"demo": "PasskeySignInPage.js", "iframe": true}}
 
 :::info
-The [Toolpad Core Passkey example app](https://github.com/mui/mui-toolpad/tree/master/examples/core-auth-nextjs-passkey/) comes with a working app using `next-auth/webauthn`, Prisma and PostgreSQL.
+The [Toolpad Core Passkey example app](https://github.com/mui/mui-toolpad/tree/master/examples/core/auth-nextjs-passkey/) comes with a working app using `next-auth/webauthn`, Prisma and PostgreSQL.
 :::
 
 {{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/auth-next-passkey.png", "srcDark": "/static/toolpad/docs/core/auth-next-passkey-dark.png", "alt": "Auth.js Passkeys & Next.js with Toolpad Core sign-in page", "caption": "Auth.js Passkeys & Next.js app router with Toolpad Core Sign-in page", "zoom": true, "aspectRatio": "1.428" }}
@@ -98,7 +98,7 @@ The component is composable with any authentication library you might want to us
 
 #### Setting up
 
-If you're using [`create-toolpad-app`](/toolpad/core/introduction/installation/), or the [Next.js app directory example](https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs/), Auth.js is already installed. To proceed, add `AUTH_SECRET` to the environment variables by running:
+If you're using [`create-toolpad-app`](/toolpad/core/introduction/installation/), or the [Next.js app directory example](https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs/), Auth.js is already installed. To proceed, add `AUTH_SECRET` to the environment variables by running:
 
 ```bash
 npx auth secret
@@ -119,7 +119,7 @@ GITHUB_CLIENT_SECRET=<your-client-secret>
 
 ##### Server Configuration
 
-If you're using [`create-toolpad-app`](/toolpad/core/introduction/installation/), or the default [Next.js app directory example](https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs/), this server configuration is already set up for you.
+If you're using [`create-toolpad-app`](/toolpad/core/introduction/installation/), or the default [Next.js app directory example](https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs/), this server configuration is already set up for you.
 
 Otherwise, follow the [custom sign in page instructions](https://authjs.dev/guides/pages/signin) to set up the server configuration.
 
@@ -188,11 +188,11 @@ export default function SignIn() {
 ```
 
 :::success
-If you're using the default [Next.js example](https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs/), all of this is already configured for you. Otherwise, follow the [custom sign-in page instructions](https://authjs.dev/guides/pages/signin).
+If you're using the default [Next.js example](https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs/), all of this is already configured for you. Otherwise, follow the [custom sign-in page instructions](https://authjs.dev/guides/pages/signin).
 :::
 
 :::info
-If you're not on the Next Auth v5 version yet, see the [example with Next Auth v4](https://github.com/mui/toolpad/tree/master/examples/core-auth-nextjs-pages-nextauth-4/) to get started.
+If you're not on the Next Auth v5 version yet, see the [example with Next Auth v4](https://github.com/mui/toolpad/tree/master/examples/core/auth-nextjs-pages-nextauth-4/) to get started.
 :::
 
 ## Customization

diff --git a/docs/data/toolpad/core/introduction/integration.md b/docs/data/toolpad/core/introduction/integration.md
@@ -252,7 +252,7 @@ That's it! You now have Toolpad Core integrated into your Next.js App Router app
 {{"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)
+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
@@ -663,7 +663,7 @@ That's it! You now have Toolpad Core integrated into your Next.js Pages Router a
 {{"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)
+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
@@ -835,5 +835,5 @@ That's it! You now have Toolpad Core integrated into your single-page app with R
 {{"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)
+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/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/pages/toolpad/studio/examples/basic-crud-app.js b/docs/pages/toolpad/studio/examples/basic-crud-app.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../../../examples/basic-crud-app/README.md?muiMarkdown';
+import * as pageProps from '../../../../../examples/studio/basic-crud-app/README.md?muiMarkdown';
 
 export default function Page() {
  return <MarkdownDocs disableAd {...pageProps} />;

diff --git a/docs/pages/toolpad/studio/examples/npm-stats.js b/docs/pages/toolpad/studio/examples/npm-stats.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../../../examples/npm-stats/README.md?muiMarkdown';
+import * as pageProps from '../../../../../examples/studio/npm-stats/README.md?muiMarkdown';
 
 export default function Page() {
  return <MarkdownDocs disableAd {...pageProps} />;

diff --git a/docs/pages/toolpad/studio/examples/qr-generator.js b/docs/pages/toolpad/studio/examples/qr-generator.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
-import * as pageProps from '../../../../../examples/qr-generator/README.md?muiMarkdown';
+import * as pageProps from '../../../../../examples/studio/qr-generator/README.md?muiMarkdown';
 
 export default function Page() {
  return <MarkdownDocs disableAd {...pageProps} />;

diff --git a/docs/src/modules/components/ExamplesGrid/ExamplesGrid.tsx b/docs/src/modules/components/ExamplesGrid/ExamplesGrid.tsx
@@ -6,12 +6,13 @@ 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 } from '@mui/material/styles';
+import { alpha, useTheme } from '@mui/material/styles';
 
 interface Example {
  title: string;
  description: string;
  src: string;
+ srcDark?: string;
  href: string;
  source: string;
 }
@@ -30,66 +31,71 @@ function Templates({ examplesFile }: TemplatesProps) {
  };
  importExamples();
  }, [examplesFile]);
+ const docsTheme = useTheme();
 
  return (
  <Grid container spacing={2} sx={{ pt: 2, pb: 4 }}>
- {examples.map((example) => (
- <Grid item xs={12} sm={4} sx={{ flexGrow: 1 }} key={example.title}>
- <Card
- sx={(theme) => ({
- 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"
- >
- <CardMedia
- component="a"
- image={example.src}
- title={example.description}
- href={example.href || example.source}
- rel="nofollow"
+ {examples.map((example) => {
+ const computedSrc =
+ docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src;
+ return (
+ <Grid item xs={12} sm={4} sx={{ flexGrow: 1 }} key={example.title}>
+ <Card
  sx={(theme) => ({
- height: 0,
- pt: '65%',
- borderRadius: 0.5,
- bgcolor: 'currentColor',
- border: '1px solid',
- borderColor: 'grey.100',
- color: 'grey.100',
+ 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', {
- borderColor: 'grey.900',
- color: 'primaryDark.900',
+ backgroundColor: `${alpha(theme.palette.primary.dark, 0.1)}`,
+ borderColor: 'divider',
  }),
  })}
- />
- <CardContent sx={{ flexGrow: 1, p: 0 }}>
- <Typography component="h2" variant="h6" fontWeight={600} gutterBottom>
- {example.title}
- </Typography>
- <Typography component="p" variant="body2" color="text.secondary">
- {example.description}
- </Typography>
- </CardContent>
- <CardActions sx={{ p: 0, ml: -1 }}>
- <Button component="a" href={example.source} size="small" target="_blank">
- Source code
- </Button>
- </CardActions>
- </Card>
- </Grid>
- ))}
+ variant="outlined"
+ >
+ <CardMedia
+ component="a"
+ image={computedSrc}
+ title={example.description}
+ href={example.href || example.source}
+ rel="nofollow"
+ sx={(theme) => ({
+ 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',
+ }),
+ })}
+ />
+ <CardContent sx={{ flexGrow: 1, p: 0 }}>
+ <Typography component="h2" variant="h6" fontWeight={600} gutterBottom>
+ {example.title}
+ </Typography>
+ <Typography component="p" variant="body2" color="text.secondary">
+ {example.description}
+ </Typography>
+ </CardContent>
+ <CardActions sx={{ p: 0, ml: -1 }}>
+ <Button component="a" href={example.source} size="small" target="_blank">
+ Source code
+ </Button>
+ </CardActions>
+ </Card>
+ </Grid>
+ );
+ })}
  </Grid>
  );
 }

diff --git a/docs/src/modules/components/ExamplesGrid/core-examples.ts b/docs/src/modules/components/ExamplesGrid/core-examples.ts
@@ -6,28 +6,47 @@ export default function examples() {
  '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',
+ 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',
+ srcDark: '/static/toolpad/docs/core/auth-next-dark.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',
+ srcDark: '/static/toolpad/docs/core/auth-next-dark.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',
+ source: 'https://github.com/mui/toolpad/tree/master/examples/core/vite/',
+ },
+ {
+ 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/',
+ },
+ {
+ 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/',
  },
  ];
 }