diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md index 975af850692..587a877e407 100644 --- a/docs/data/toolpad/core/introduction/examples.md +++ b/docs/data/toolpad/core/introduction/examples.md @@ -7,6 +7,26 @@ title: Examples

Browse a collection of Toolpad Core examples to help you get started quickly.

+## Installation + +You can create a new project based on any of these examples using the `create-toolpad-app` command: + + + +```bash npm +npx create-toolpad-app@latest --example "example-name" +``` + +```bash pnpm +pnpm create toolpad-app --example "example-name" +``` + +```bash yarn +yarn create toolpad-app --example "example-name" +``` + + + ## Featured examples {{"component": "modules/components/examples/CoreFeaturedExamples.tsx"}} diff --git a/docs/data/toolpad/core/introduction/tutorial.md b/docs/data/toolpad/core/introduction/tutorial.md index 2da0269d33c..8cae1c5e245 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 tutorial ``` ```bash pnpm -pnpm dlx create toolpad-app --example tutorial +pnpm create toolpad-app --example tutorial ``` ```bash yarn diff --git a/docs/src/modules/components/examples/ExamplesFeatured.tsx b/docs/src/modules/components/examples/ExamplesFeatured.tsx index 96015ca917d..38026a299ee 100644 --- a/docs/src/modules/components/examples/ExamplesFeatured.tsx +++ b/docs/src/modules/components/examples/ExamplesFeatured.tsx @@ -15,6 +15,9 @@ 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 ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'; +import CheckRounded from '@mui/icons-material/CheckRounded'; +import copy from 'clipboard-copy'; import { Example, versionGitHubLink } from './examplesUtils'; interface FeaturedExamplesProps { @@ -23,6 +26,13 @@ interface FeaturedExamplesProps { export default function ExamplesFeatured(props: FeaturedExamplesProps) { const t = useTranslate(); + const [copiedId, setCopiedId] = React.useState(null); + + const handleCopy = React.useCallback((text: string, id: string) => { + copy(text); + setCopiedId(id); + setTimeout(() => setCopiedId(null), 2000); + }, []); const examples = props.examples.filter((example: Example) => example.featured === true); const docsTheme = useTheme(); @@ -32,6 +42,9 @@ export default function ExamplesFeatured(props: FeaturedExamplesProps) { {examples.map((example: Example) => { const computedSrc = docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src; + const exampleName = example.source.split('/').pop(); + const installCommand = `pnpm create toolpad-app --example ${exampleName}`; + return ( @@ -160,6 +173,22 @@ export default function ExamplesFeatured(props: FeaturedExamplesProps) { + + + - - {example.stackBlitz === true ? ( - - - - - - ) : null} - {example.codeSandbox === true ? ( - - - - - - ) : null} - + + + + + + + {example.stackBlitz === true ? ( + + + + + + ) : null} + + {example.codeSandbox === true ? ( + + + + + + ) : null} + + + { + handleCopy(installCommand, example.title); + }} + > + {copiedId === example.title ? ( + + ) : ( + + )} + + diff --git a/examples/core/auth-nextjs-email/README.md b/examples/core/auth-nextjs-email/README.md index 804f8ed65b9..32a708341eb 100644 --- a/examples/core/auth-nextjs-email/README.md +++ b/examples/core/auth-nextjs-email/README.md @@ -51,7 +51,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example auth-nextjs-email # or -pnpm dlx create-toolpad-app --example auth-nextjs-email +pnpm create toolpad-app --example auth-nextjs-email ``` and follow the instructions in the terminal. diff --git a/examples/core/auth-nextjs-pages-nextauth-4/README.md b/examples/core/auth-nextjs-pages-nextauth-4/README.md index 77aebd49469..e4012aa91bc 100644 --- a/examples/core/auth-nextjs-pages-nextauth-4/README.md +++ b/examples/core/auth-nextjs-pages-nextauth-4/README.md @@ -25,7 +25,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example auth-nextjs-pages-nextauth-4 # or -pnpm dlx create-toolpad-app --example auth-nextjs-pages-nextauth-4 +pnpm create toolpad-app --example auth-nextjs-pages-nextauth-4 ``` and follow the instructions in the terminal. diff --git a/examples/core/auth-nextjs-pages/README.md b/examples/core/auth-nextjs-pages/README.md index 7657d8d54a2..eb51ac7da78 100644 --- a/examples/core/auth-nextjs-pages/README.md +++ b/examples/core/auth-nextjs-pages/README.md @@ -47,7 +47,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example auth-nextjs-pages # or -pnpm dlx create-toolpad-app --example auth-nextjs-pages +pnpm create toolpad-app --example auth-nextjs-pages ``` and follow the instructions in the terminal. diff --git a/examples/core/auth-nextjs-passkey/README.md b/examples/core/auth-nextjs-passkey/README.md index 83f5b255091..a047667c976 100644 --- a/examples/core/auth-nextjs-passkey/README.md +++ b/examples/core/auth-nextjs-passkey/README.md @@ -41,7 +41,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example auth-nextjs-passkey # or -pnpm dlx create-toolpad-app --example auth-nextjs-passkey +pnpm create toolpad-app --example auth-nextjs-passkey ``` and follow the instructions in the terminal. diff --git a/examples/core/auth-nextjs-themed/README.md b/examples/core/auth-nextjs-themed/README.md index bfa85485846..7f7d0161f09 100644 --- a/examples/core/auth-nextjs-themed/README.md +++ b/examples/core/auth-nextjs-themed/README.md @@ -25,7 +25,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example auth-nextjs-themed # or -pnpm dlx create-toolpad-app --example auth-nextjs-themed +pnpm create toolpad-app --example auth-nextjs-themed ``` and follow the instructions in the terminal. diff --git a/examples/core/auth-nextjs/README.md b/examples/core/auth-nextjs/README.md index d14529ee516..ab74ab1942a 100644 --- a/examples/core/auth-nextjs/README.md +++ b/examples/core/auth-nextjs/README.md @@ -35,7 +35,7 @@ GITHUB_CLIENT_SECRET= ```bash npx auth secret # or -pnpm dlx create-toolpad-app --example auth-nextjs +pnpm create toolpad-app --example auth-nextjs ``` ### GitHub configuration diff --git a/examples/core/auth-vite/README.md b/examples/core/auth-vite/README.md index fb547a323e5..7383208c58e 100644 --- a/examples/core/auth-vite/README.md +++ b/examples/core/auth-vite/README.md @@ -9,7 +9,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example auth-vite # or -pnpm dlx create-toolpad-app --example auth-vite +pnpm create toolpad-app --example auth-vite ``` ## Getting Started diff --git a/examples/core/firebase-vite/README.md b/examples/core/firebase-vite/README.md index 776f5774572..65eeb1ab3e2 100644 --- a/examples/core/firebase-vite/README.md +++ b/examples/core/firebase-vite/README.md @@ -9,7 +9,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example firebase-vite # or -pnpm dlx create-toolpad-app --example firebase-vite +pnpm create toolpad-app --example firebase-vite ``` ## Setting up diff --git a/examples/core/tutorial/README.md b/examples/core/tutorial/README.md index fe43dc017bf..8f8045d42d1 100644 --- a/examples/core/tutorial/README.md +++ b/examples/core/tutorial/README.md @@ -25,7 +25,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example tutorial # or -pnpm dlx create-toolpad-app --example tutorial +pnpm create toolpad-app --example tutorial ``` and follow the instructions in the terminal. diff --git a/examples/core/vite/README.md b/examples/core/vite/README.md index 99dceef9a44..8a5982080bd 100644 --- a/examples/core/vite/README.md +++ b/examples/core/vite/README.md @@ -9,7 +9,7 @@ To copy this example and customize it for your needs, run ```bash npx create-toolpad-app@latest --example vite # or -pnpm dlx create-toolpad-app --example vite +pnpm create toolpad-app --example vite ``` and follow the instructions in the terminal. diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8054a9ce321..e61f0eb987f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -201,7 +201,7 @@ importers: version: 7.37.4(eslint@8.57.1) eslint-plugin-react-compiler: specifier: latest - version: 19.0.0-beta-714736e-20250131(eslint@8.57.1) + version: 19.0.0-beta-30d8a17-20250209(eslint@8.57.1) eslint-plugin-react-hooks: specifier: 5.1.0 version: 5.1.0(eslint@8.57.1) @@ -6092,8 +6092,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@19.0.0-beta-714736e-20250131: - resolution: {integrity: sha512-iTPUaHzvBejGqicSwZLCDBgWBxLzU1Dvqjs31loNoOPRnsey5dcOupaZajECKVvXmB1wcbIWNp6/VR5+dM9d6w==} + eslint-plugin-react-compiler@19.0.0-beta-30d8a17-20250209: + resolution: {integrity: sha512-D2wohyvsW27KSQV8IhyjL9UhYKs4f7Y8WPIuNOeiYylOaredvb2vW/AAE2m36BWLsn3Q9xRYz1UZj2AXR15w/g==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -16287,7 +16287,7 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@19.0.0-beta-714736e-20250131(eslint@8.57.1): + eslint-plugin-react-compiler@19.0.0-beta-30d8a17-20250209(eslint@8.57.1): dependencies: '@babel/core': 7.26.0 '@babel/parser': 7.26.2