clean up

mui · Dec 26, 2024 · 5a95ec6 · 5a95ec6
1 parent 3260cad
commit 5a95ec6
Show file tree

Hide file tree

Showing 9 changed files with 301 additions and 265 deletions.
diff --git a/docs/src/modules/components/examples/CoreFeaturedExamples.tsx b/docs/src/modules/components/examples/CoreFeaturedExamples.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import FeaturedExamples from 'docs-toolpad/src/modules/components/examples/FeaturedExamples';
+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 <FeaturedExamples examplesFile={coreExamples()} />;
+  return <ExamplesFeatured examples={coreExamples} />;
 }
diff --git a/docs/src/modules/components/examples/CoreOtherExamples.tsx b/docs/src/modules/components/examples/CoreOtherExamples.tsx
@@ -3,5 +3,5 @@ import ExamplesGrid from 'docs-toolpad/src/modules/components/examples/ExamplesG
 import coreExamples from 'docs-toolpad/src/modules/components/examples/coreExamples';
 
 export default function CoreOtherExamples() {
-  return <ExamplesGrid examplesFile={coreExamples()} reverse />;
+  return <ExamplesGrid examples={coreExamples} />;
 }
diff --git a/.../components/examples/FeaturedExamples.tsx → .../components/examples/ExamplesFeatured.tsx b/.../components/examples/FeaturedExamples.tsx → .../components/examples/ExamplesFeatured.tsx
@@ -15,16 +15,16 @@ 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: Example[];
+  examples: Example[];
 }
 
-export default function FeaturedExamples(props: FeaturedExamplesProps) {
+export default function ExamplesFeatured(props: FeaturedExamplesProps) {
   const t = useTranslate();
 
-  const examples = props.examplesFile.filter((example: Example) => example.featured === true);
+  const examples = props.examples.filter((example: Example) => example.featured === true);
   const docsTheme = useTheme();
 
   return (
@@ -51,7 +51,7 @@ export default function FeaturedExamples(props: FeaturedExamplesProps) {
               }}
             >
               <Link
-                href={example.href}
+                href={versionGitHubLink(example.href)}
                 target="_blank"
                 sx={{
                   position: 'relative',
@@ -150,14 +150,19 @@ export default function FeaturedExamples(props: FeaturedExamplesProps) {
                     </Tooltip>
                   ) : null}
                   <Tooltip title="See source code">
-                    <IconButton component="a" href={example.source} color="primary" size="small">
+                    <IconButton
+                      component="a"
+                      href={versionGitHubLink(example.source)}
+                      color="primary"
+                      size="small"
+                    >
                       <CodeRoundedIcon />
                     </IconButton>
                   </Tooltip>
                 </Box>
                 <Button
                   component="a"
-                  href={example.href}
+                  href={versionGitHubLink(example.href)}
                   size="small"
                   variant="outlined"
                   color="primary"

diff --git a/docs/src/modules/components/examples/ExamplesGrid.tsx b/docs/src/modules/components/examples/ExamplesGrid.tsx
@@ -12,11 +12,10 @@ 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 type { Example } from './types';
+import { Example, versionGitHubLink } from './examplesUtils';
 
 interface ExamplesGridProps {
-  examplesFile: Example[];
-  reverse?: boolean;
+  examples: Example[];
 }
 
 function StackBlitzIcon() {
@@ -35,12 +34,10 @@ function CodeSandboxIcon() {
   );
 }
 
-function ExamplesGrid(props: ExamplesGridProps) {
+export default function ExamplesGrid(props: ExamplesGridProps) {
   const t = useTranslate();
 
-  const examples = (props.reverse ? [...props.examplesFile].reverse() : props.examplesFile).filter(
-    (example: Example) => example.featured !== true,
-  );
+  const examples = props.examples.filter((example: Example) => example.featured !== true);
   const docsTheme = useTheme();
 
   return (
@@ -73,7 +70,7 @@ function ExamplesGrid(props: ExamplesGridProps) {
                 component="a"
                 image={computedSrc}
                 title={example.description}
-                href={example.href || example.source}
+                href={versionGitHubLink(example.href || example.source)}
                 rel="nofollow"
                 sx={(theme) => ({
                   height: 0,
@@ -105,7 +102,12 @@ function ExamplesGrid(props: ExamplesGridProps) {
                   justifyContent: 'space-between',
                 }}
               >
-                <Button component="a" href={example.source} size="small" target="_blank">
+                <Button
+                  component="a"
+                  href={versionGitHubLink(example.source)}
+                  size="small"
+                  target="_blank"
+                >
                   {t('source')}
                 </Button>
                 <Stack direction="row" spacing={1}>
@@ -144,5 +146,3 @@ function ExamplesGrid(props: ExamplesGridProps) {
     </Grid>
   );
 }
-
-export default ExamplesGrid;
diff --git a/docs/src/modules/components/examples/StudioExamples.tsx b/docs/src/modules/components/examples/StudioExamples.tsx
@@ -1,7 +1,137 @@
 import * as React from 'react';
 import ExamplesGrid from 'docs-toolpad/src/modules/components/examples/ExamplesGrid';
-import studioExamples from 'docs-toolpad/src/modules/components/examples/studioExampless';
+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 <ExamplesGrid examplesFile={studioExamples()} />;
+  return <ExamplesGrid examples={examples} />;
 }