From 622faa61ccfdb06c78d275672651252173f61dcf Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Mon, 27 Jan 2025 16:28:38 +0530 Subject: [PATCH 1/2] enh: Add install instructions to docs --- .../toolpad/core/introduction/examples.md | 20 ++++ .../components/examples/ExamplesFeatured.tsx | 29 +++++ .../components/examples/ExamplesGrid.tsx | 107 +++++++++++------- pnpm-lock.yaml | 11 +- 4 files changed, 124 insertions(+), 43 deletions(-) diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md index 975af850692..0cab19cf594 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 --example "example-name" +``` + +```bash pnpm +pnpm dlx 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/src/modules/components/examples/ExamplesFeatured.tsx b/docs/src/modules/components/examples/ExamplesFeatured.tsx index 9aa7e3ae46f..0ef75d04c7a 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 dlx create-toolpad-app@latest --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/pnpm-lock.yaml b/pnpm-lock.yaml index 8914f6a1033..ecd717ee3b0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -201,7 +201,7 @@ importers: version: 7.37.3(eslint@8.57.1) eslint-plugin-react-compiler: specifier: latest - version: 19.0.0-beta-decd7b8-20250118(eslint@8.57.1) + version: 19.0.0-beta-27714ef-20250124(eslint@8.57.1) eslint-plugin-react-hooks: specifier: 5.1.0 version: 5.1.0(eslint@8.57.1) @@ -6090,8 +6090,8 @@ packages: peerDependencies: eslint: '>=7.0.0' - eslint-plugin-react-compiler@19.0.0-beta-decd7b8-20250118: - resolution: {integrity: sha512-qfs+Xo+VcYPbbVLI2tCP+KBGwm0oksAhjFJO1GwOvP+4b18LLcPZu7xopRhUTOaNd+nn1vOp9EQLZC1wMNxSrQ==} + eslint-plugin-react-compiler@19.0.0-beta-27714ef-20250124: + resolution: {integrity: sha512-8/NaV8E+eQ+BiKGeWg5wIizuKwEXLo+n/lgiyTLmJnZj8eoFW3G7NGJf3Nke4ji3Rndy34LK5Qi5TF6BPiZlSQ==} engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0} peerDependencies: eslint: '>=7' @@ -7542,6 +7542,7 @@ packages: lodash.get@4.4.2: resolution: {integrity: sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==} + deprecated: This package is deprecated. Use the optional chaining (?.) operator instead. lodash.groupby@4.6.0: resolution: {integrity: sha512-5dcWxm23+VAoz+awKmBaiBvzox8+RqMgFhi7UvX9DHZr2HdxHXM/Wrf8cfKpsW37RNrvtPn6hSwNqurSILbmJw==} @@ -7554,6 +7555,7 @@ packages: lodash.isequal@4.5.0: resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} + deprecated: This package is deprecated. Use require('node:util').isDeepStrictEqual instead. lodash.isfunction@3.0.9: resolution: {integrity: sha512-AirXNj15uRIMMPihnkInB4i3NHeb4iBtNg9WRWuK2o31S+ePwwNmDPaTL3o7dTJ+VXNZim7rFs4rxN4YU1oUJw==} @@ -7599,6 +7601,7 @@ packages: lodash.omit@4.5.0: resolution: {integrity: sha512-XeqSp49hNGmlkj2EJlfrQFIzQ6lXdNro9sddtQzcJY8QaoC2GO0DT7xaIokHeyM+mIT0mPMlPvkYzg2xCuHdZg==} + deprecated: This package is deprecated. Use destructuring assignment syntax instead. lodash.once@4.1.1: resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==} @@ -16276,7 +16279,7 @@ snapshots: globals: 13.24.0 rambda: 7.5.0 - eslint-plugin-react-compiler@19.0.0-beta-decd7b8-20250118(eslint@8.57.1): + eslint-plugin-react-compiler@19.0.0-beta-27714ef-20250124(eslint@8.57.1): dependencies: '@babel/core': 7.26.0 '@babel/parser': 7.26.2 From ab9ad85aa466e9ed827a4fd11618d6d0a642360f Mon Sep 17 00:00:00 2001 From: Bharat Kashyap Date: Tue, 11 Feb 2025 14:37:04 +0530 Subject: [PATCH 2/2] fix: Jan review --- docs/data/toolpad/core/introduction/examples.md | 4 ++-- docs/data/toolpad/core/introduction/tutorial.md | 2 +- docs/src/modules/components/examples/ExamplesFeatured.tsx | 2 +- docs/src/modules/components/examples/ExamplesGrid.tsx | 2 +- examples/core/auth-nextjs-email/README.md | 2 +- examples/core/auth-nextjs-pages-nextauth-4/README.md | 2 +- examples/core/auth-nextjs-pages/README.md | 2 +- examples/core/auth-nextjs-passkey/README.md | 2 +- examples/core/auth-nextjs-themed/README.md | 2 +- examples/core/auth-nextjs/README.md | 2 +- examples/core/auth-vite/README.md | 2 +- examples/core/firebase-vite/README.md | 2 +- examples/core/tutorial/README.md | 2 +- examples/core/vite/README.md | 2 +- 14 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs/data/toolpad/core/introduction/examples.md b/docs/data/toolpad/core/introduction/examples.md index 0cab19cf594..587a877e407 100644 --- a/docs/data/toolpad/core/introduction/examples.md +++ b/docs/data/toolpad/core/introduction/examples.md @@ -14,11 +14,11 @@ You can create a new project based on any of these examples using the `create-to ```bash npm -npx create-toolpad-app --example "example-name" +npx create-toolpad-app@latest --example "example-name" ``` ```bash pnpm -pnpm dlx create-toolpad-app --example "example-name" +pnpm create toolpad-app --example "example-name" ``` ```bash yarn 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 0ef75d04c7a..2fd4b7d0bf6 100644 --- a/docs/src/modules/components/examples/ExamplesFeatured.tsx +++ b/docs/src/modules/components/examples/ExamplesFeatured.tsx @@ -43,7 +43,7 @@ export default function ExamplesFeatured(props: FeaturedExamplesProps) { const computedSrc = docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src; const exampleName = example.source.split('/').pop(); - const installCommand = `pnpm dlx create-toolpad-app@latest --example ${exampleName}`; + const installCommand = `pnpm create toolpad-app --example ${exampleName}`; return ( diff --git a/docs/src/modules/components/examples/ExamplesGrid.tsx b/docs/src/modules/components/examples/ExamplesGrid.tsx index 8cf08d9f8b7..92ce28145bf 100644 --- a/docs/src/modules/components/examples/ExamplesGrid.tsx +++ b/docs/src/modules/components/examples/ExamplesGrid.tsx @@ -53,7 +53,7 @@ export default function ExamplesGrid(props: ExamplesGridProps) { {examples.map((example) => { const exampleName = example.source.split('/').pop(); - const installCommand = `pnpm dlx create-toolpad-app@latest --example ${exampleName}`; + const installCommand = `pnpm create toolpad-app --example ${exampleName}`; const computedSrc = docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src; return ( diff --git a/examples/core/auth-nextjs-email/README.md b/examples/core/auth-nextjs-email/README.md index ef8a4f3cdce..5279552b872 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@latest --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 04efdfad123..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@latest --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 65b93a7ad4f..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@latest --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 65a8272086c..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@latest --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 9c9b9a314ee..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@latest --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 71b291d1002..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@latest --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 c02f7e78a33..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@latest --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 676555594b9..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@latest --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 47c0fedd221..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@latest --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 79d574e9cfc..656700f575c 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@latest --example vite +pnpm create toolpad-app@latest --example vite ``` and follow the instructions in the terminal.