From 9149d239c7ee73a34e404c1b02d738d66d0899b0 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Thu, 8 Aug 2024 15:12:11 +0530
Subject: [PATCH 1/5] fix: Update showcase to include Core

---
 docs/src/components/home/ProductsSwitcher.tsx |   4 +-
 .../home/ToolpadCoreShowcaseDemo.tsx          | 131 +++++++++++
 docs/src/components/home/ToolpadShowcase.tsx  | 215 +++++++++++++-----
 docs/src/route.ts                             |   3 +-
 4 files changed, 293 insertions(+), 60 deletions(-)
 create mode 100644 docs/src/components/home/ToolpadCoreShowcaseDemo.tsx

diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx
index 812c6b9b4355bf..f42bb70cdb1296 100644
--- a/docs/src/components/home/ProductsSwitcher.tsx
+++ b/docs/src/components/home/ProductsSwitcher.tsx
@@ -89,8 +89,8 @@ export default function ProductsSwitcher(props: {
       icon={<IconImage name="product-advanced" height={32} width={32} />}
     />,
     <ProductItem
-      name="Toolpad Studio"
-      description="Self-hosted, low-code internal tool builder."
+      name="Toolpad"
+      description="Components and tools for building dashboards and internal apps"
       icon={<IconImage name="product-toolpad" />}
       chip={
         <Chip
diff --git a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
new file mode 100644
index 00000000000000..f4f44549253023
--- /dev/null
+++ b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
@@ -0,0 +1,131 @@
+import * as React from 'react';
+import Paper from '@mui/material/Paper';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import BarChartIcon from '@mui/icons-material/BarChart';
+import DescriptionIcon from '@mui/icons-material/Description';
+import LayersIcon from '@mui/icons-material/Layers';
+import { AppProvider, Router } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import { PageContainer, type Navigation } from '@toolpad/core';
+import DemoSandbox from 'docs/src/modules/components/DemoSandbox';
+import Grid from '@mui/material/Grid2';
+import { styled } from '@mui/material/styles';
+
+const NAVIGATION: Navigation = [
+  {
+    kind: 'header',
+    title: 'Main items',
+  },
+  {
+    segment: 'dashboard',
+    title: 'Dashboard',
+    icon: <DashboardIcon />,
+  },
+  {
+    segment: 'orders',
+    title: 'Orders',
+    icon: <ShoppingCartIcon />,
+  },
+  {
+    kind: 'divider',
+  },
+  {
+    kind: 'header',
+    title: 'Analytics',
+  },
+  {
+    segment: 'reports',
+    title: 'Reports',
+    icon: <BarChartIcon />,
+    children: [
+      {
+        segment: 'sales',
+        title: 'Sales',
+        icon: <DescriptionIcon />,
+      },
+      {
+        segment: 'traffic',
+        title: 'Traffic',
+        icon: <DescriptionIcon />,
+      },
+    ],
+  },
+  {
+    segment: 'integrations',
+    title: 'Integrations',
+    icon: <LayersIcon />,
+  },
+];
+
+interface DemoProps {
+  window?: () => Window;
+}
+
+const NOOP = () => {};
+
+const PlaceHolder = styled('div')<{ height: number }>(({ theme, height }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  height,
+  borderRadius: theme.shape.borderRadius,
+}));
+
+function DashboardLayoutBasic(props: DemoProps) {
+  const { window } = props;
+
+  const [pathname, setPathname] = React.useState('/page');
+
+  const router = React.useMemo<Router>(() => {
+    return {
+      pathname,
+      searchParams: new URLSearchParams(),
+      navigate: (path) => setPathname(String(path)),
+    };
+  }, [pathname]);
+
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+      <DashboardLayout>
+        <PageContainer>
+          <Grid container spacing={2}>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={12}>
+              <PlaceHolder height={200} />
+            </Grid>
+          </Grid>
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}
+
+export default function ToolpadDashboardLayout() {
+  return (
+    <Paper
+      variant="outlined"
+      sx={(theme) => ({
+        display: 'flex',
+        alignItems: 'center',
+        maxWidth: '100%',
+        mx: 'auto',
+        bgcolor: '#FFF',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        ...theme.applyDarkStyles({
+          bgcolor: 'primaryDark.900',
+        }),
+      })}
+    >
+      <DemoSandbox iframe name="DashboardLayout" onResetDemoClick={NOOP} usesCssVarsTheme>
+        <DashboardLayoutBasic />
+      </DemoSandbox>
+    </Paper>
+  );
+}
diff --git a/docs/src/components/home/ToolpadShowcase.tsx b/docs/src/components/home/ToolpadShowcase.tsx
index 08a10b519b16a5..69746041897737 100644
--- a/docs/src/components/home/ToolpadShowcase.tsx
+++ b/docs/src/components/home/ToolpadShowcase.tsx
@@ -10,7 +10,92 @@ import { HighlightedCode } from '@mui/docs/HighlightedCode';
 import MoreInfoBox from 'docs/src/components/action/MoreInfoBox';
 import ROUTES from 'docs/src/route';
 
+const ToolpadCoreShowcase = React.lazy(() => import('./ToolpadCoreShowcaseDemo'));
+
 const tabOneCode = `
+const NAVIGATION: Navigation = [
+  {
+    kind: 'header',
+    title: 'Main items',
+  },
+  {
+    segment: 'dashboard',
+    title: 'Dashboard',
+    icon: <DashboardIcon />,
+  },
+  {
+    segment: 'orders',
+    title: 'Orders',
+    icon: <ShoppingCartIcon />,
+  },
+  {
+    kind: 'divider',
+  },
+  {
+    kind: 'header',
+    title: 'Analytics',
+  },
+  {
+    segment: 'reports',
+    title: 'Reports',
+    icon: <BarChartIcon />,
+    children: [
+      {
+        segment: 'sales',
+        title: 'Sales',
+        icon: <DescriptionIcon />,
+      },
+      {
+        segment: 'traffic',
+        title: 'Traffic',
+        icon: <DescriptionIcon />,
+      },
+    ],
+  },
+  {
+    segment: 'integrations',
+    title: 'Integrations',
+    icon: <LayersIcon />,
+  },
+];
+
+function DashboardLayoutBasic(props: DemoProps) {
+  const { window } = props;
+
+  const [pathname, setPathname] = React.useState('/page');
+
+  const router = React.useMemo<Router>(() => {
+    return {
+      pathname,
+      searchParams: new URLSearchParams(),
+      navigate: (path) => setPathname(String(path)),
+    };
+  }, [pathname]);
+
+  const demoWindow = window !== undefined ? window() : undefined;
+
+  return (
+    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
+      <DashboardLayout>
+        <PageContainer>
+          <Grid container spacing={2}>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={6}>
+              <PlaceHolder height={100} />
+            </Grid>
+            <Grid size={12}>
+              <PlaceHolder height={200} />
+            </Grid>
+          </Grid>
+        </PageContainer>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}`;
+
+const tabTwoCode = `
 apiVersion: v1
 kind: page
 spec:
@@ -31,35 +116,6 @@ spec:
   - component: codeComponent.map
     name: map
 `;
-
-const tabTwoCode = `
-import { createDataProvider } from "@toolpad/studio/server";
-import db from "../db";
-export default createDataProvider({
-  async getRecords({ paginationModel: { start, pageSize } }) {
-    return {
-      records: await db.query("SELECT * FROM USERS"),
-    };
-  },
-});
-`;
-
-const tabThreeCode = `
-import * as React from "react";
-import { createComponent } from "@toolpad/studio/browser";
-import * as L from "leaflet";
-function Leaflet({ lat, long, zoom }: LeafletProps) {
-  const root: any = React.useRef(null);
-  return (
-    <div ref={root} style={{ height: 400 }} />
-  );
-}
-export default createComponent(Leaflet, {
-  argTypes: {
-    lat: { type: "number", }
-})
-  `;
-
 interface ImageProps {
   alt: string;
   index: number;
@@ -85,6 +141,29 @@ function Image({ alt, index, src, value }: ImageProps) {
   );
 }
 
+interface DemoProps {
+  value: number;
+  index: number;
+}
+
+function ToolpadCoreShowcaseDemo({ value, index }: DemoProps) {
+  return (
+    <Box hidden={value !== index}>
+      <React.Suspense
+        fallback={
+          <Box
+            sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
+          >
+            <p>Loading...</p>
+          </Box>
+        }
+      >
+        <ToolpadCoreShowcase />
+      </React.Suspense>
+    </Box>
+  );
+}
+
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
@@ -115,37 +194,47 @@ function a11yProps(index: number) {
 const tabsCodeInfo = [
   {
     code: tabOneCode,
-    label: 'Local first',
-    language: 'yml',
+    label: 'Core',
+    language: 'tsx',
     description:
-      "Store your app's configuration locally in yaml files. Changes made in Toolpad Studio are automatically synced to the files, and vice-versa.",
+      'Drop-in components that abstract away the complexity of dashboard layouts, authentication, navigation, and more.',
     imgSrc: '/static/branding/toolpad/ex-1.png',
-    imgAlt: '.yaml file represents Toolpad app',
+    imgAlt: 'Toolpad app',
+    Demo: ToolpadCoreShowcaseDemo,
   },
   {
     code: tabTwoCode,
-    label: 'Serverless',
-    language: 'tsx',
+    label: 'Studio',
+    language: 'yml',
     description:
-      'Write serverless functions to fetch your data, Toolpad automatically makes the result available on the page.',
-    imgSrc: '/static/branding/toolpad/ex-2.png',
-    imgAlt: 'Toolpad user management app',
-  },
-  {
-    code: tabThreeCode,
-    label: 'Customizable',
-    language: 'tsx',
-    description: 'Bring your own React components into Toolpad Studio.',
-    imgSrc: '/static/branding/toolpad/ex-3.png',
-    imgAlt: 'Toolpad app with custom component',
+      "Use a drag-and-drop interface to build your app's configuration. Changes made in Studio are automatically synced to .yml files, and vice-versa. Bring your own components and data.",
+    imgSrc: '/static/branding/toolpad/ex-1.png',
+    imgAlt: '.yaml file represents Toolpad app',
   },
+  // {
+  //   code: tabTwoCode,
+  //   label: 'Serverless',
+  //   language: 'tsx',
+  //   description:
+  //     'Write serverless functions to fetch your data, Toolpad automatically makes the result available on the page.',
+  //   imgSrc: '/static/branding/toolpad/ex-2.png',
+  //   imgAlt: 'Toolpad user management app',
+  // },
+  // {
+  //   code: tabThreeCode,
+  //   label: 'Customizable',
+  //   language: 'tsx',
+  //   description: 'Bring your own React components into Toolpad Studio.',
+  //   imgSrc: '/static/branding/toolpad/ex-3.png',
+  //   imgAlt: 'Toolpad app with custom component',
+  // },
 ];
 
 export default function ToolpadShowcase() {
-  const [value, setValue] = React.useState(0);
+  const [tabValue, setTabValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setValue(newValue);
+    setTabValue(newValue);
   };
 
   return (
@@ -154,7 +243,7 @@ export default function ToolpadShowcase() {
       preview={
         <Box sx={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
           <Tabs
-            value={value}
+            value={tabValue}
             onChange={handleChange}
             aria-label="Toolpad showcase"
             sx={(theme) => ({
@@ -206,9 +295,19 @@ export default function ToolpadShowcase() {
                 borderRadius: '8px',
               })}
             >
-              {tabsCodeInfo.map((tab, index) => (
-                <Image key={index} index={index} value={value} src={tab.imgSrc} alt={tab.imgAlt} />
-              ))}
+              {tabsCodeInfo.map((tab, index) =>
+                tab.Demo ? (
+                  <tab.Demo index={index} value={tabValue} key={index} />
+                ) : (
+                  <Image
+                    key={index}
+                    index={index}
+                    value={tabValue}
+                    src={tab.imgSrc}
+                    alt={tab.imgAlt}
+                  />
+                ),
+              )}
             </Paper>
           </Box>
         </Box>
@@ -217,7 +316,7 @@ export default function ToolpadShowcase() {
         <React.Fragment>
           <ShowcaseCodeWrapper maxHeight={250}>
             {tabsCodeInfo.map((tab, index) => (
-              <CustomTabPanel key={index} value={value} index={index}>
+              <CustomTabPanel key={index} value={tabValue} index={index}>
                 <Typography
                   variant="body2"
                   sx={{
@@ -240,10 +339,12 @@ export default function ToolpadShowcase() {
             ))}
           </ShowcaseCodeWrapper>
           <MoreInfoBox
-            primaryBtnLabel="Start using Toolpad"
-            primaryBtnHref={ROUTES.toolpadLandingPage}
-            secondaryBtnLabel="Learn more about why to use Toolpad"
-            secondaryBtnHref={ROUTES.toolpadWhy}
+            primaryBtnLabel={`Start using Toolpad ${tabValue === 0 ? 'Core' : 'Studio'}`}
+            primaryBtnHref={
+              tabValue === 0 ? ROUTES.toolpadLandingPage : ROUTES.toolpadStudioLandingPage
+            }
+            secondaryBtnLabel={`Learn more about Toolpad ${tabValue === 0 ? 'Core' : 'Studio'}`}
+            secondaryBtnHref={tabValue === 0 ? ROUTES.toolpadCoreDocs : ROUTES.toolpadStudioWhy}
           />
         </React.Fragment>
       }
diff --git a/docs/src/route.ts b/docs/src/route.ts
index c91b5953700ece..b5d20ee57a4b4f 100644
--- a/docs/src/route.ts
+++ b/docs/src/route.ts
@@ -51,9 +51,10 @@ const ROUTES = {
   treeViewOverview: '/x/react-tree-view/',
   // Toolpad pages
   toolpadLandingPage: '/toolpad/',
+  toolpadStudioLandingPage: '/toolpad/studio/',
   toolpadStudioDocs: '/toolpad/studio/getting-started/',
   toolpadCoreDocs: '/toolpad/core/introduction/',
-  toolpadWhy: '/toolpad/studio/getting-started/why-toolpad/',
+  toolpadStudioWhy: '/toolpad/studio/getting-started/why-toolpad/',
   // External pages
   rssFeed: '/feed/blog/rss.xml',
   handbook: 'https://mui-org.notion.site/Handbook-f086d47e10794d5e839aef9dc67f324b',

From 55d186dde6a75666810e758662ca9a2eff758ecc Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Thu, 8 Aug 2024 15:13:57 +0530
Subject: [PATCH 2/5] fix: Remove old code

---
 docs/src/components/home/ToolpadShowcase.tsx | 17 -----------------
 1 file changed, 17 deletions(-)

diff --git a/docs/src/components/home/ToolpadShowcase.tsx b/docs/src/components/home/ToolpadShowcase.tsx
index 69746041897737..a63d6df43e0286 100644
--- a/docs/src/components/home/ToolpadShowcase.tsx
+++ b/docs/src/components/home/ToolpadShowcase.tsx
@@ -211,23 +211,6 @@ const tabsCodeInfo = [
     imgSrc: '/static/branding/toolpad/ex-1.png',
     imgAlt: '.yaml file represents Toolpad app',
   },
-  // {
-  //   code: tabTwoCode,
-  //   label: 'Serverless',
-  //   language: 'tsx',
-  //   description:
-  //     'Write serverless functions to fetch your data, Toolpad automatically makes the result available on the page.',
-  //   imgSrc: '/static/branding/toolpad/ex-2.png',
-  //   imgAlt: 'Toolpad user management app',
-  // },
-  // {
-  //   code: tabThreeCode,
-  //   label: 'Customizable',
-  //   language: 'tsx',
-  //   description: 'Bring your own React components into Toolpad Studio.',
-  //   imgSrc: '/static/branding/toolpad/ex-3.png',
-  //   imgAlt: 'Toolpad app with custom component',
-  // },
 ];
 
 export default function ToolpadShowcase() {

From dbea25c572553f553898c37f53d3ab8282564fd9 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Tue, 13 Aug 2024 15:58:36 +0530
Subject: [PATCH 3/5] fix: Jan review

---
 docs/src/components/home/ToolpadShowcase.tsx | 114 ++++---------------
 1 file changed, 25 insertions(+), 89 deletions(-)

diff --git a/docs/src/components/home/ToolpadShowcase.tsx b/docs/src/components/home/ToolpadShowcase.tsx
index a63d6df43e0286..541af5ce23b706 100644
--- a/docs/src/components/home/ToolpadShowcase.tsx
+++ b/docs/src/components/home/ToolpadShowcase.tsx
@@ -12,8 +12,7 @@ import ROUTES from 'docs/src/route';
 
 const ToolpadCoreShowcase = React.lazy(() => import('./ToolpadCoreShowcaseDemo'));
 
-const tabOneCode = `
-const NAVIGATION: Navigation = [
+const tabOneCode = `<AppProvider navigation={[
   {
     kind: 'header',
     title: 'Main items',
@@ -22,78 +21,15 @@ const NAVIGATION: Navigation = [
     segment: 'dashboard',
     title: 'Dashboard',
     icon: <DashboardIcon />,
-  },
-  {
-    segment: 'orders',
-    title: 'Orders',
-    icon: <ShoppingCartIcon />,
-  },
-  {
-    kind: 'divider',
-  },
-  {
-    kind: 'header',
-    title: 'Analytics',
-  },
-  {
-    segment: 'reports',
-    title: 'Reports',
-    icon: <BarChartIcon />,
-    children: [
-      {
-        segment: 'sales',
-        title: 'Sales',
-        icon: <DescriptionIcon />,
-      },
-      {
-        segment: 'traffic',
-        title: 'Traffic',
-        icon: <DescriptionIcon />,
-      },
-    ],
-  },
-  {
-    segment: 'integrations',
-    title: 'Integrations',
-    icon: <LayersIcon />,
-  },
-];
-
-function DashboardLayoutBasic(props: DemoProps) {
-  const { window } = props;
-
-  const [pathname, setPathname] = React.useState('/page');
-
-  const router = React.useMemo<Router>(() => {
-    return {
-      pathname,
-      searchParams: new URLSearchParams(),
-      navigate: (path) => setPathname(String(path)),
-    };
-  }, [pathname]);
-
-  const demoWindow = window !== undefined ? window() : undefined;
-
-  return (
-    <AppProvider navigation={NAVIGATION} router={router} window={demoWindow}>
-      <DashboardLayout>
-        <PageContainer>
-          <Grid container spacing={2}>
-            <Grid size={6}>
-              <PlaceHolder height={100} />
-            </Grid>
-            <Grid size={6}>
-              <PlaceHolder height={100} />
-            </Grid>
-            <Grid size={12}>
-              <PlaceHolder height={200} />
-            </Grid>
-          </Grid>
-        </PageContainer>
-      </DashboardLayout>
-    </AppProvider>
-  );
-}`;
+  }
+  // ...
+]}>
+  <DashboardLayout>
+    <PageContainer>
+      {/* ... */}
+    </PageContainer>
+  </DashboardLayout>
+</AppProvider>`;
 
 const tabTwoCode = `
 apiVersion: v1
@@ -196,8 +132,6 @@ const tabsCodeInfo = [
     code: tabOneCode,
     label: 'Core',
     language: 'tsx',
-    description:
-      'Drop-in components that abstract away the complexity of dashboard layouts, authentication, navigation, and more.',
     imgSrc: '/static/branding/toolpad/ex-1.png',
     imgAlt: 'Toolpad app',
     Demo: ToolpadCoreShowcaseDemo,
@@ -207,7 +141,7 @@ const tabsCodeInfo = [
     label: 'Studio',
     language: 'yml',
     description:
-      "Use a drag-and-drop interface to build your app's configuration. Changes made in Studio are automatically synced to .yml files, and vice-versa. Bring your own components and data.",
+      'A drag-and-drop builder for creating dashboards and internal tools quickly, with your own components and data. Changes you make are synced to yml, and vice versa.',
     imgSrc: '/static/branding/toolpad/ex-1.png',
     imgAlt: '.yaml file represents Toolpad app',
   },
@@ -300,18 +234,20 @@ export default function ToolpadShowcase() {
           <ShowcaseCodeWrapper maxHeight={250}>
             {tabsCodeInfo.map((tab, index) => (
               <CustomTabPanel key={index} value={tabValue} index={index}>
-                <Typography
-                  variant="body2"
-                  sx={{
-                    pb: 1.5,
-                    mb: 1.5,
-                    borderBottom: '1px solid',
-                    borderColor: 'divider',
-                    color: 'grey.400',
-                  }}
-                >
-                  {tab.description}
-                </Typography>
+                {tab.description ? (
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      pb: 1.5,
+                      mb: 1.5,
+                      borderBottom: '1px solid',
+                      borderColor: 'divider',
+                      color: 'grey.400',
+                    }}
+                  >
+                    {tab.description}
+                  </Typography>
+                ) : null}
                 <HighlightedCode
                   copyButtonHidden
                   code={tab.code}

From adc78089c56c91649bdf891a0bdc8ffaaaab5e88 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Wed, 14 Aug 2024 11:27:19 +0530
Subject: [PATCH 4/5] fix: Scroll issue on demo

---
 docs/src/components/home/ToolpadCoreShowcaseDemo.tsx | 2 +-
 docs/src/components/home/ToolpadShowcase.tsx         | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
index f4f44549253023..380fe6d8dca99d 100644
--- a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
+++ b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
@@ -97,7 +97,7 @@ function DashboardLayoutBasic(props: DemoProps) {
               <PlaceHolder height={100} />
             </Grid>
             <Grid size={12}>
-              <PlaceHolder height={200} />
+              <PlaceHolder height={100} />
             </Grid>
           </Grid>
         </PageContainer>
diff --git a/docs/src/components/home/ToolpadShowcase.tsx b/docs/src/components/home/ToolpadShowcase.tsx
index 541af5ce23b706..12ec7225b2d8d2 100644
--- a/docs/src/components/home/ToolpadShowcase.tsx
+++ b/docs/src/components/home/ToolpadShowcase.tsx
@@ -206,7 +206,8 @@ export default function ToolpadShowcase() {
               sx={(theme) => ({
                 width: '100%',
                 height: 260,
-                overflow: 'clip',
+                overflow: 'auto',
+                scrollbarGutter: 'stable',
                 boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.1)}`,
                 borderColor: 'grey.200',
                 borderRadius: '8px',

From 7a5f6fc2b828023c772056368372444c292b65c6 Mon Sep 17 00:00:00 2001
From: Bharat Kashyap <bharatkashyap@outlook.com>
Date: Fri, 16 Aug 2024 13:13:53 +0530
Subject: [PATCH 5/5] fix: Leaner code, scrollbar fixes

---
 .../home/ToolpadCoreShowcaseDemo.tsx          |  25 +---
 docs/src/components/home/ToolpadShowcase.tsx  | 109 ++++++++++--------
 2 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
index 380fe6d8dca99d..21c05b0e570e47 100644
--- a/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
+++ b/docs/src/components/home/ToolpadCoreShowcaseDemo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Paper from '@mui/material/Paper';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import BarChartIcon from '@mui/icons-material/BarChart';
@@ -73,7 +72,7 @@ const PlaceHolder = styled('div')<{ height: number }>(({ theme, height }) => ({
 function DashboardLayoutBasic(props: DemoProps) {
   const { window } = props;
 
-  const [pathname, setPathname] = React.useState('/page');
+  const [pathname, setPathname] = React.useState('/dashboard');
 
   const router = React.useMemo<Router>(() => {
     return {
@@ -108,24 +107,8 @@ function DashboardLayoutBasic(props: DemoProps) {
 
 export default function ToolpadDashboardLayout() {
   return (
-    <Paper
-      variant="outlined"
-      sx={(theme) => ({
-        display: 'flex',
-        alignItems: 'center',
-        maxWidth: '100%',
-        mx: 'auto',
-        bgcolor: '#FFF',
-        borderRadius: '8px',
-        overflow: 'hidden',
-        ...theme.applyDarkStyles({
-          bgcolor: 'primaryDark.900',
-        }),
-      })}
-    >
-      <DemoSandbox iframe name="DashboardLayout" onResetDemoClick={NOOP} usesCssVarsTheme>
-        <DashboardLayoutBasic />
-      </DemoSandbox>
-    </Paper>
+    <DemoSandbox iframe name="DashboardLayout" onResetDemoClick={NOOP} usesCssVarsTheme>
+      <DashboardLayoutBasic />
+    </DemoSandbox>
   );
 }
diff --git a/docs/src/components/home/ToolpadShowcase.tsx b/docs/src/components/home/ToolpadShowcase.tsx
index 12ec7225b2d8d2..a2bcbf435e9ff9 100644
--- a/docs/src/components/home/ToolpadShowcase.tsx
+++ b/docs/src/components/home/ToolpadShowcase.tsx
@@ -52,18 +52,46 @@ spec:
   - component: codeComponent.map
     name: map
 `;
+
+interface TabContainerProps {
+  index: number;
+  value: number;
+  isDemo: boolean;
+  children: React.ReactNode;
+}
+
+function TabContainer({ index, value, isDemo, children }: TabContainerProps) {
+  return (
+    <Paper
+      variant="outlined"
+      key={index}
+      sx={(theme) => ({
+        width: '100%',
+        maxWidth: '100%',
+        height: 260,
+        display: value === index ? 'flex' : 'none',
+        overflow: isDemo ? 'auto' : 'clip',
+        bgcolor: '#FFF',
+        borderRadius: '8px',
+        boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.1)}`,
+        borderColor: 'grey.200',
+        ...(isDemo && { scrollbarGutter: 'stable' }),
+      })}
+    >
+      {children}
+    </Paper>
+  );
+}
+
 interface ImageProps {
   alt: string;
-  index: number;
   src: string;
-  value: number;
 }
 
-function Image({ alt, index, src, value }: ImageProps) {
+function Image({ alt, src }: ImageProps) {
   return (
     <Box
       component="img"
-      hidden={value !== index}
       src={src}
       alt={alt}
       loading="lazy"
@@ -77,26 +105,24 @@ function Image({ alt, index, src, value }: ImageProps) {
   );
 }
 
-interface DemoProps {
-  value: number;
-  index: number;
-}
-
-function ToolpadCoreShowcaseDemo({ value, index }: DemoProps) {
+function ToolpadCoreShowcaseDemo() {
   return (
-    <Box hidden={value !== index}>
-      <React.Suspense
-        fallback={
-          <Box
-            sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}
-          >
-            <p>Loading...</p>
-          </Box>
-        }
-      >
-        <ToolpadCoreShowcase />
-      </React.Suspense>
-    </Box>
+    <React.Suspense
+      fallback={
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <p>Loading...</p>
+        </div>
+      }
+    >
+      <ToolpadCoreShowcase />
+    </React.Suspense>
   );
 }
 
@@ -201,32 +227,17 @@ export default function ToolpadShowcase() {
             ))}
           </Tabs>
           <Box sx={{ p: 2 }}>
-            <Paper
-              variant="outlined"
-              sx={(theme) => ({
-                width: '100%',
-                height: 260,
-                overflow: 'auto',
-                scrollbarGutter: 'stable',
-                boxShadow: `0 4px 8px ${alpha(theme.palette.common.black, 0.1)}`,
-                borderColor: 'grey.200',
-                borderRadius: '8px',
-              })}
-            >
-              {tabsCodeInfo.map((tab, index) =>
-                tab.Demo ? (
-                  <tab.Demo index={index} value={tabValue} key={index} />
-                ) : (
-                  <Image
-                    key={index}
-                    index={index}
-                    value={tabValue}
-                    src={tab.imgSrc}
-                    alt={tab.imgAlt}
-                  />
-                ),
-              )}
-            </Paper>
+            {tabsCodeInfo.map((tab, index) =>
+              tab.Demo ? (
+                <TabContainer index={index} value={tabValue} isDemo>
+                  <tab.Demo />
+                </TabContainer>
+              ) : (
+                <TabContainer index={index} value={tabValue} isDemo={false}>
+                  <Image src={tab.imgSrc} alt={tab.imgAlt} />
+                </TabContainer>
+              ),
+            )}
           </Box>
         </Box>
       }