diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js index 11bcf6a73b2..04c62cf2e26 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.js @@ -85,4 +85,3 @@ DashboardLayoutSidebarHidden.propTypes = { }; export default DashboardLayoutSidebarHidden; - diff --git a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview index fa199e3ee3a..61a5a75910b 100644 --- a/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview +++ b/docs/data/toolpad/core/components/dashboard-layout/DashboardLayoutSidebarHidden.tsx.preview @@ -7,4 +7,4 @@ - \ No newline at end of file + diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.js b/docs/data/toolpad/core/introduction/TutorialDefault.js index bc5c23d5ac4..928e38311ef 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.js +++ b/docs/data/toolpad/core/introduction/TutorialDefault.js @@ -2,6 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { createTheme } from '@mui/material/styles'; 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 { PageContainer } from '@toolpad/core/PageContainer'; @@ -9,10 +10,15 @@ import { useDemoRouter } from '@toolpad/core/internals'; const NAVIGATION = [ { - segment: 'page', - title: 'Page', + segment: '', + title: 'Dashboard', icon: , }, + { + segment: 'orders', + title: 'Orders', + icon: , + }, ]; const demoTheme = createTheme({ @@ -33,8 +39,10 @@ const demoTheme = createTheme({ function DemoPageContent({ pathname }) { switch (pathname) { - case '/page': + case '/': return Hello world!; + case '/orders': + return Orders page; default: return null; } diff --git a/docs/data/toolpad/core/introduction/TutorialDefault.tsx b/docs/data/toolpad/core/introduction/TutorialDefault.tsx index eb3bca3d9ed..350f676d6cf 100644 --- a/docs/data/toolpad/core/introduction/TutorialDefault.tsx +++ b/docs/data/toolpad/core/introduction/TutorialDefault.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { createTheme } from '@mui/material/styles'; 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 { PageContainer } from '@toolpad/core/PageContainer'; @@ -9,10 +10,15 @@ import type { Navigation } from '@toolpad/core'; const NAVIGATION: Navigation = [ { - segment: 'page', - title: 'Page', + segment: '', + title: 'Dashboard', icon: , }, + { + segment: 'orders', + title: 'Orders', + icon: , + }, ]; const demoTheme = createTheme({ @@ -33,8 +39,10 @@ const demoTheme = createTheme({ function DemoPageContent({ pathname }: { pathname: string }) { switch (pathname) { - case '/page': + case '/': return Hello world!; + case '/orders': + return Orders page; default: return null; } diff --git a/docs/data/toolpad/core/introduction/TutorialPages.js b/docs/data/toolpad/core/introduction/TutorialPages.js index ec20a7eca1e..1213fcecced 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.js +++ b/docs/data/toolpad/core/introduction/TutorialPages.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { Typography } from '@mui/material'; import { createTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; @@ -15,10 +16,15 @@ const NAVIGATION = [ title: 'Main items', }, { - segment: 'page', - title: 'Page', + segment: '', + title: 'Dashboard', icon: , }, + { + segment: 'orders', + title: 'Orders', + icon: , + }, // Add the following new item: { segment: 'page-2', @@ -45,8 +51,10 @@ const demoTheme = createTheme({ function DemoPageContent({ pathname }) { switch (pathname) { - case '/page': + case '/': return Hello world!; + case '/orders': + return Orders page; case '/page-2': return ( diff --git a/docs/data/toolpad/core/introduction/TutorialPages.tsx b/docs/data/toolpad/core/introduction/TutorialPages.tsx index da40aeca68b..d5c698cbc04 100644 --- a/docs/data/toolpad/core/introduction/TutorialPages.tsx +++ b/docs/data/toolpad/core/introduction/TutorialPages.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Typography } from '@mui/material'; import { createTheme } from '@mui/material/styles'; import DashboardIcon from '@mui/icons-material/Dashboard'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import TimelineIcon from '@mui/icons-material/Timeline'; import { AppProvider } from '@toolpad/core/AppProvider'; import { DashboardLayout } from '@toolpad/core/DashboardLayout'; @@ -15,10 +16,15 @@ const NAVIGATION: Navigation = [ title: 'Main items', }, { - segment: 'page', - title: 'Page', + segment: '', + title: 'Dashboard', icon: , }, + { + segment: 'orders', + title: 'Orders', + icon: , + }, // Add the following new item: { segment: 'page-2', @@ -45,8 +51,10 @@ const demoTheme = createTheme({ function DemoPageContent({ pathname }: { pathname: string }) { switch (pathname) { - case '/page': + case '/': return Hello world!; + case '/orders': + return Orders page; case '/page-2': return ( diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md index ad87ddf4224..f777fc246f7 100644 --- a/docs/data/toolpad/core/introduction/tutorial.md +++ b/docs/data/toolpad/core/introduction/tutorial.md @@ -19,7 +19,7 @@ npx create-toolpad-app@latest --example core-tutorial ``` ```bash pnpm -pnpm create toolpad-app --example core-tutorial +pnpm dlx create toolpad-app --example core-tutorial ``` ```bash yarn @@ -51,9 +51,9 @@ yarn && yarn dev 3. The following splash screen appears: -{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/installation-1.png", "alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }} +{{"component": "modules/components/DocsImage.tsx", "src": "/static/toolpad/docs/core/bootstrap.png", "srcDark": "/static/toolpad/docs/core/bootstrap-dark.png", "alt": "Toolpad Core entry point", "caption": "Starting with Toolpad Core", "zoom": true, "indent": 1 }} -4. The app has one page already created, which can be viewed by clicking on the "Go to page" button. The following page should appear: +4. The app has two pages already created in a dashboard layout, with routing, breadcrumbs and theming already set up: {{"demo": "TutorialDefault.js", "iframe": true, "hideToolbar": true }} @@ -84,15 +84,6 @@ import TimelineIcon from '@mui/icons-material/TimelineIcon'; // ... const NAVIGATION: Navigation = [ - { - kind: 'header', - title: 'Main items', - }, - { - segment: 'page', - title: 'Page', - icon: , - }, // Add the following new item: { segment: 'page-2', diff --git a/docs/public/static/toolpad/docs/core/bootstrap-dark.png b/docs/public/static/toolpad/docs/core/bootstrap-dark.png new file mode 100644 index 00000000000..1e1b7fecc88 Binary files /dev/null and b/docs/public/static/toolpad/docs/core/bootstrap-dark.png differ diff --git a/docs/public/static/toolpad/docs/core/bootstrap.png b/docs/public/static/toolpad/docs/core/bootstrap.png new file mode 100644 index 00000000000..aae62b75fc3 Binary files /dev/null and b/docs/public/static/toolpad/docs/core/bootstrap.png differ diff --git a/docs/public/static/toolpad/docs/core/installation-1.png b/docs/public/static/toolpad/docs/core/installation-1.png deleted file mode 100644 index fadff5c62e6..00000000000 Binary files a/docs/public/static/toolpad/docs/core/installation-1.png and /dev/null differ diff --git a/examples/core-tutorial/app/(dashboard)/orders/page.tsx b/examples/core-tutorial/app/(dashboard)/orders/page.tsx new file mode 100644 index 00000000000..de4948afd88 --- /dev/null +++ b/examples/core-tutorial/app/(dashboard)/orders/page.tsx @@ -0,0 +1,6 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; + +export default function OrdersPage() { + return Welcome to the Toolpad orders!; +} diff --git a/examples/core-tutorial/app/(dashboard)/page.tsx b/examples/core-tutorial/app/(dashboard)/page.tsx new file mode 100644 index 00000000000..deff7996b7d --- /dev/null +++ b/examples/core-tutorial/app/(dashboard)/page.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; +import Link from 'next/link'; + +export default function HomePage() { + return ( + + Welcome to Toolpad Core! + + ); +} diff --git a/examples/core-tutorial/app/(dashboard)/page/page.tsx b/examples/core-tutorial/app/(dashboard)/page/page.tsx deleted file mode 100644 index d1087ebf3b8..00000000000 --- a/examples/core-tutorial/app/(dashboard)/page/page.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Typography } from '@mui/material'; - -export default function Home() { - return ( -
- - Hello world! - -
- ); -} diff --git a/examples/core-tutorial/app/layout.tsx b/examples/core-tutorial/app/layout.tsx index 9767eaf6fe1..aa9c0899cb6 100644 --- a/examples/core-tutorial/app/layout.tsx +++ b/examples/core-tutorial/app/layout.tsx @@ -1,5 +1,6 @@ import { AppProvider } from '@toolpad/core/nextjs'; import DashboardIcon from '@mui/icons-material/Dashboard'; +import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; import { AppRouterCacheProvider } from '@mui/material-nextjs/v14-appRouter'; import type { Navigation } from '@toolpad/core'; import theme from '../theme'; @@ -10,10 +11,15 @@ const NAVIGATION: Navigation = [ title: 'Main items', }, { - segment: 'page', - title: 'Page', + segment: '', + title: 'Dashboard', icon: , }, + { + segment: 'orders', + title: 'Orders', + icon: , + }, ]; export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) { diff --git a/examples/core-tutorial/app/page.tsx b/examples/core-tutorial/app/page.tsx deleted file mode 100644 index 5fb2ae93396..00000000000 --- a/examples/core-tutorial/app/page.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Link from 'next/link'; -import { Container, Typography, Box } from '@mui/material'; -import NavigateButton from './NavigateButton'; - -export default function Home() { - return ( - - - - Welcome to Toolpad Core! - - - - Get started by editing (dashboard)/page/page.tsx - - - - - ); -} diff --git a/examples/core-tutorial/next-env.d.ts b/examples/core-tutorial/next-env.d.ts index 4f11a03dc6c..40c3d68096c 100644 --- a/examples/core-tutorial/next-env.d.ts +++ b/examples/core-tutorial/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information. diff --git a/examples/core-tutorial/package.json b/examples/core-tutorial/package.json index fd957e80228..ea2ab889336 100644 --- a/examples/core-tutorial/package.json +++ b/examples/core-tutorial/package.json @@ -12,16 +12,15 @@ "react-dom": "^18", "next": "^14", "@toolpad/core": "latest", - "@mui/material": "^5", - "@mui/material-nextjs": "^5", - "@mui/icons-material": "^5", + "@mui/material": "^6", + "@mui/material-nextjs": "^6", + "@mui/icons-material": "^6", "@emotion/react": "^11", - "@emotion/styled": "^11", - "@emotion/cache": "^11" + "@emotion/styled": "^11" }, "devDependencies": { "typescript": "^5", - "@types/node": "^20.16.10", + "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", diff --git a/packages/create-toolpad-app/src/index.ts b/packages/create-toolpad-app/src/index.ts index adf15057b67..40cc0be8173 100644 --- a/packages/create-toolpad-app/src/index.ts +++ b/packages/create-toolpad-app/src/index.ts @@ -173,15 +173,17 @@ const scaffoldCoreProject = async (options: GenerateProjectOptions): Promise { const pathArg = args._?.[0] as string; const installFlag = args.install as boolean; const studioFlag = args.studio as boolean; + const example = args.example as string; if (pathArg) { const pathValidOrError = await validatePath(pathArg); @@ -266,7 +269,9 @@ const run = async () => { if (!pathArg) { projectPath = await input({ - message: 'Enter path for new project directory:', + message: example + ? `Enter path of directory to download example "${chalk.cyan(example)}" into` + : 'Enter path of directory to bootstrap new app', validate: validatePath, default: '.', }); @@ -275,8 +280,8 @@ const run = async () => { const absolutePath = bashResolvePath(projectPath); // If the user has provided an example, download and extract it - if (args.example) { - await downloadAndExtractExample(absolutePath, args.example); + if (example) { + await downloadAndExtractExample(absolutePath, example); } // If the studio flag is set, create a new project with Toolpad Studio @@ -331,6 +336,7 @@ const run = async () => { coreVersion: args.coreVersion, router: routerOption, auth: authFlag, + install: installFlag, authProviders: authProviderOptions, }; await scaffoldCoreProject(options); @@ -345,7 +351,7 @@ const run = async () => { ? ` cd ${path.relative(process.cwd(), absolutePath)}\n` : ''; - const installInstruction = installFlag ? '' : ` ${packageManager} install\n`; + const installInstruction = example || !installFlag ? ` ${packageManager} install\n` : ''; const message = `Run the following to get started: \n\n${chalk.magentaBright( `${changeDirectoryInstruction}${installInstruction} ${packageManager}${ diff --git a/packages/create-toolpad-app/src/types.ts b/packages/create-toolpad-app/src/types.ts index 5c26b15f01c..61d5811a235 100644 --- a/packages/create-toolpad-app/src/types.ts +++ b/packages/create-toolpad-app/src/types.ts @@ -11,6 +11,7 @@ export interface GenerateProjectOptions { absolutePath: string; auth?: boolean; authProviders?: SupportedAuthProvider[]; + install?: boolean; router?: SupportedRouter; coreVersion?: string; projectType?: ProjectType; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 283d8dc4f3e..f03d96dc54b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -195,7 +195,7 @@ importers: version: 7.37.1(eslint@8.57.1) eslint-plugin-react-compiler: specifier: latest - version: 0.0.0-experimental-9a75bad-20241003(eslint@8.57.1) + version: 0.0.0-experimental-7c1344f-20241007(eslint@8.57.1) eslint-plugin-react-hooks: specifier: 4.6.2 version: 4.6.2(eslint@8.57.1) @@ -2136,7 +2136,7 @@ packages: '@docsearch/react@3.6.2': resolution: {integrity: sha512-rtZce46OOkVflCQH71IdbXSFK+S8iJZlUF56XBW5rIgx/eG5qoomC7Ag3anZson1bBac/JFQn7XOBfved/IMRA==} peerDependencies: - '@types/react': ^18.3.6 + '@types/react': ^18.3.4 react: '>= 16.8.0 < 19.0.0' react-dom: '>= 16.8.0 < 19.0.0' search-insights: '>= 1 < 3' @@ -4037,7 +4037,7 @@ packages: engines: {node: '>=18'} peerDependencies: '@testing-library/dom': ^10.0.0 - '@types/react': ^18.3.6 + '@types/react': ^18.3.4 '@types/react-dom': 18.3.0 react: ^18.0.0 react-dom: ^18.0.0 @@ -6040,8 +6040,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@0.0.0-experimental-9a75bad-20241003: - resolution: {integrity: sha512-qZ/oEuECrXt3J4+13TvHEOBfrizBuUborCMFccZFn64UcWgbLzn+6Yb4xVx80YQiT1GT6UiKh62OkvnP6yYR2w==} + eslint-plugin-react-compiler@0.0.0-experimental-7c1344f-20241007: + resolution: {integrity: sha512-DBieMH/EKK6Tss5wMxZUx24DV4OYpkUW3m6Ec0BExddhpJlwOyEYuuRlMyZEFYJCIOyx+gCf4rvLgzMDSLRsMQ==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -15906,7 +15906,7 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@0.0.0-experimental-9a75bad-20241003(eslint@8.57.1): + eslint-plugin-react-compiler@0.0.0-experimental-7c1344f-20241007(eslint@8.57.1): dependencies: '@babel/core': 7.25.7 '@babel/parser': 7.25.7