Test checkout

.eslintignore

@@ -4,6 +4,7 @@ pnpm-lock.yaml
 /docs/export
 /docs/schemas
 /packages/**/dist
+/packages/**/build
 /packages/toolpad-studio/.next
 /packages/toolpad-studio/public
 

.eslintrc.js

@@ -129,7 +129,14 @@ module.exports = {
         'packages/toolpad-studio-runtime/**/*',
         'packages/toolpad-utils/**/*',
       ],
-      excludedFiles: ['tsup.config.ts', '*.spec.ts', '*.spec.tsx', 'vitest.config.ts'],
+      excludedFiles: [
+        'tsup.config.ts',
+        '*.spec.ts',
+        '*.spec.tsx',
+        '*.test.ts',
+        '*.test.tsx',
+        'vitest.config.ts',
+      ],
       rules: {
         'import/no-extraneous-dependencies': ['error'],
       },

.gitignore

@@ -48,6 +48,7 @@ lerna-debug.log
 .env
 
 dist/
+build/
 
 packages/toolpad-studio/public/web_modules
 packages/toolpad-studio/public/runtime

.npmrc

@@ -1,5 +1,5 @@
 # Enforce pnpm
 
-engine-strict = true
-auto-install-peers = true
+engine-strict=true
+auto-install-peers=true
 strict-peer-dependencies=false

CONTRIBUTING.md

@@ -2,7 +2,7 @@
 
 ## Local development
 
-If you would like to hack on Toolpad Studio or want to run the latest version, you can follow these steps:
+If you would like to hack on Toolpad or want to run the latest version, you can follow these steps:
 
 _If you're looking into contributing to the docs, follow the [instructions](#building-and-running-the-documentation) down below_
 
@@ -11,7 +11,7 @@ _If you're looking into contributing to the docs, follow the [instructions](#bui
 - git
 - node.js
 
-### Running apps inside the monorepo (recommended)
+### Running Toolpad Studio apps inside the monorepo (recommended)
 
 This uses the local version of Toolpad Studio as built in the mono-repository.
 This is recommended when your app is in a folder inside of the mono-repository.
@@ -139,6 +139,34 @@ pnpm install
 
 </details>
 
+### Developing on Toolpad Core
+
+This uses the local version of Toolpad Core as built in the mono-repository, and allows for quickly testing out changes and their results.
+
+Some application examples for different JavaScript frameworks (such as Next.js, Vite...) are present in the `playground` folder that can be used to quickly develop on Toolpad Core on a live application.
+
+1. Install dependencies:
+
+   ```bash
+   pnpm install
+   ```
+
+2. Run the built-in watch mode
+
+   ```bash
+   pnpm dev
+   ```
+
+3. Run any application in the `playground` folder in development mode, such as `toolpad-core-nextjs`
+
+   ```bash
+   cd playground/toolpad-core-nextjs
+   ```
+
+   ```bash
+   pnpm dev
+   ```
+
 ## Running integration tests
 
 The playwright tests can be run in one of two modes:
@@ -198,7 +226,7 @@ Use the `--ui` flag to run the tests interactively.
 
 ## Using CodeSandbox CI
 
-Each pull request is built on [CodeSandbox CI](https://codesandbox.io/docs/learn/sandboxes/ci). As a result of that we have a published Toolpad Studio package for ever pull request. To use the package from the pull request, take the following steps:
+Each pull request is built on [CodeSandbox CI](https://codesandbox.io/docs/learn/sandboxes/ci). As a result of that we have a published Toolpad Studio package for every pull request. To use the package from the pull request, take the following steps:
 
 1. In the GitHub PR checks, locate the ci/codesandbox check and make sure it has successfully finished building. Click on "details" to open the CodeSandbox CI user interface.
 

docs/data/toolpad/core/api/components/dashboard-layout.md

@@ -0,0 +1,3 @@
+# Dashboard Layout API
+
+<p class="description">DashboardLayout API reference</p>

docs/data/toolpad/core/api/index.md

@@ -4,7 +4,7 @@
 
 ## Components
 
-- [Dashboard](/toolpad/core/api/dashboard/)
+- [Dashboard Layout](/toolpad/core/api/dashboard-layout/)
 - [Data Grid](/toolpad/core/api/data-grid/)
 - [Line Chart](/toolpad/core/api/line-chart/)
 - [Select Filter](/toolpad/core/api/select-filter/)

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBasic.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+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 } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import theme from '../theme';
+
+const NAVIGATION = [
+  {
+    kind: 'header',
+    title: 'Main items',
+  },
+  {
+    title: 'Dashboard',
+    icon: <DashboardIcon />,
+  },
+  {
+    title: 'Orders',
+    icon: <ShoppingCartIcon />,
+  },
+  {
+    kind: 'divider',
+  },
+  {
+    kind: 'header',
+    title: 'Analytics',
+  },
+  {
+    title: 'Reports',
+    icon: <BarChartIcon />,
+    children: [
+      {
+        title: 'Sales',
+        icon: <DescriptionIcon />,
+      },
+      {
+        title: 'Traffic',
+        icon: <DescriptionIcon />,
+      },
+    ],
+  },
+  {
+    title: 'Integrations',
+    icon: <LayersIcon />,
+  },
+];
+
+export default function DashboardLayoutBasic() {
+  return (
+    <AppProvider theme={theme} navigation={NAVIGATION}>
+      <DashboardLayout>
+        <Box
+          sx={{
+            py: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Typography>Dashboard content goes here.</Typography>
+        </Box>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutBranding.js

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import theme from '../theme';
+
+const NAVIGATION = [
+  {
+    title: 'Dashboard',
+    icon: <DashboardIcon />,
+  },
+  {
+    title: 'Orders',
+    icon: <ShoppingCartIcon />,
+  },
+];
+
+const BRANDING = {
+  logo: <img src="https://mui.com/static/logo.png" alt="MUI logo" />,
+  title: 'MUI',
+};
+
+export default function DashboardLayoutBranding() {
+  return (
+    <AppProvider theme={theme} navigation={NAVIGATION} branding={BRANDING}>
+      <DashboardLayout>
+        <Box
+          sx={{
+            py: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Typography>Dashboard content goes here.</Typography>
+        </Box>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutNavigation.js

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import DescriptionIcon from '@mui/icons-material/Description';
+import FolderIcon from '@mui/icons-material/Folder';
+import { AppProvider } from '@toolpad/core/AppProvider';
+import { DashboardLayout } from '@toolpad/core/DashboardLayout';
+import theme from '../theme';
+
+const NAVIGATION = [
+  {
+    title: 'Item 1',
+    icon: <DescriptionIcon />,
+  },
+  {
+    title: 'Item 2',
+    icon: <DescriptionIcon />,
+  },
+  {
+    title: 'Folder 1',
+    icon: <FolderIcon />,
+    children: [
+      {
+        title: 'Item A1',
+        icon: <DescriptionIcon />,
+      },
+      {
+        title: 'Item A2',
+        icon: <DescriptionIcon />,
+      },
+      {
+        title: 'Folder A1',
+        icon: <FolderIcon />,
+        children: [
+          {
+            title: 'Item B1',
+            icon: <DescriptionIcon />,
+          },
+          {
+            title: 'Item B2',
+            icon: <DescriptionIcon />,
+          },
+        ],
+      },
+    ],
+  },
+  { kind: 'divider' },
+  {
+    kind: 'header',
+    title: 'Header 1',
+  },
+  {
+    title: 'Item A',
+    icon: <DescriptionIcon />,
+  },
+  {
+    kind: 'header',
+    title: 'Header 2',
+  },
+  {
+    title: 'Item B',
+    icon: <DescriptionIcon />,
+  },
+  {
+    title: 'Folder 2',
+    icon: <FolderIcon />,
+    children: [
+      {
+        kind: 'header',
+        title: 'Header A1',
+      },
+      {
+        title: 'Item C1',
+        icon: <DescriptionIcon />,
+      },
+      {
+        title: 'Item C2',
+        icon: <DescriptionIcon />,
+      },
+      { kind: 'divider' },
+      {
+        kind: 'header',
+        title: 'Header A2',
+      },
+      {
+        title: 'Item C3',
+        icon: <DescriptionIcon />,
+      },
+    ],
+  },
+];
+
+export default function DashboardLayoutNavigation() {
+  return (
+    <AppProvider theme={theme} navigation={NAVIGATION}>
+      <DashboardLayout>
+        <Box
+          sx={{
+            py: 4,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+          }}
+        >
+          <Typography>Dashboard content goes here.</Typography>
+        </Box>
+      </DashboardLayout>
+    </AppProvider>
+  );
+}

docs/data/toolpad/core/components/dashboard-layout/dashboard-layout.md

@@ -0,0 +1,30 @@
+# Dashboard Layout
+
+<p class="description">The dashboard layout component provides a customizable out-of-the-box layout for a typical dashboard page.</p>
+
+## Demo
+
+A Dashboard Layout has a configurable header and sidebar with navigation.
+
+{{"demo": "DashboardLayoutBasic.js", "height": 500, "iframe": true}}
+
+Some features of this layout depend on the `AppProvider` component that must be present at the base application level.
+
+## Branding
+
+The `branding` prop in the `AppProvider` allows for setting a `logo` or `title` in the page header.
+
+{{"demo": "DashboardLayoutBranding.js", "height": 500, "iframe": true}}
+
+## Navigation
+
+The `navigation` prop in the `AppProvider` allows for setting any type of navigation structure in the sidebar, such as links, headings, nested collapsible lists and dividers, in any order.
+
+{{"demo": "DashboardLayoutNavigation.js", "height": 640, "iframe": true}}
+
+<!-- ## API
+
+See the documentation below for a complete reference to all of the props available to the components mentioned here.
+
+- [`<AppProvider />`](/toolpad/core/reference/components/app-provider/#properties)
+- [`<DashboardLayout />`](/toolpad/core/reference/components/dashboard-layout/#properties) -->

docs/data/toolpad/core/components/index.md

@@ -2,7 +2,7 @@
 
 <p class="description">This page contains an index to the component pages that come with Toolpad Core.</p>
 
-- [Dashboard](/toolpad/core/components/dashboard/)
+- [Dashboard Layout](/toolpad/core/components/dashboard-layout/)
 - [Data Grid](/toolpad/core/components/data-grid/)
 - [Line Chart](/toolpad/core/components/line-chart/)
 - [Select Filter](/toolpad/core/components/select-filter/)