Skip to content

Commit e145f12

Browse files
bharatkashyapbharatkashyap
authored
[docs] Add CLI install instructions to docs (#4639)
1 parent d27e3a9 commit e145f12

File tree

15 files changed

+132
-54
lines changed

15 files changed

+132
-54
lines changed

‎docs/data/toolpad/core/introduction/examples.md

+20
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,26 @@ title: Examples
77

88
<p class="description">Browse a collection of Toolpad Core examples to help you get started quickly.</p>
99

10+
## Installation
11+
12+
You can create a new project based on any of these examples using the `create-toolpad-app` command:
13+
14+
<codeblock storageKey="package-manager">
15+
16+
```bash npm
17+
npx create-toolpad-app@latest --example "example-name"
18+
```
19+
20+
```bash pnpm
21+
pnpm create toolpad-app --example "example-name"
22+
```
23+
24+
```bash yarn
25+
yarn create toolpad-app --example "example-name"
26+
```
27+
28+
</codeblock>
29+
1030
## Featured examples
1131

1232
{{"component": "modules/components/examples/CoreFeaturedExamples.tsx"}}

‎docs/data/toolpad/core/introduction/tutorial.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ npx create-toolpad-app@latest --example tutorial
1919
```
2020

2121
```bash pnpm
22-
pnpm dlx create toolpad-app --example tutorial
22+
pnpm create toolpad-app --example tutorial
2323
```
2424

2525
```bash yarn

‎docs/src/modules/components/examples/ExamplesFeatured.tsx

+29
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
1515
import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
1616
import { useTheme } from '@mui/material/styles';
1717
import { sxChip } from 'docs/src/modules/components/AppNavDrawerItem';
18+
import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
19+
import CheckRounded from '@mui/icons-material/CheckRounded';
20+
import copy from 'clipboard-copy';
1821
import { Example, versionGitHubLink } from './examplesUtils';
1922

2023
interface FeaturedExamplesProps {
@@ -23,6 +26,13 @@ interface FeaturedExamplesProps {
2326

2427
export default function ExamplesFeatured(props: FeaturedExamplesProps) {
2528
const t = useTranslate();
29+
const [copiedId, setCopiedId] = React.useState<string | null>(null);
30+
31+
const handleCopy = React.useCallback((text: string, id: string) => {
32+
copy(text);
33+
setCopiedId(id);
34+
setTimeout(() => setCopiedId(null), 2000);
35+
}, []);
2636

2737
const examples = props.examples.filter((example: Example) => example.featured === true);
2838
const docsTheme = useTheme();
@@ -32,6 +42,9 @@ export default function ExamplesFeatured(props: FeaturedExamplesProps) {
3242
{examples.map((example: Example) => {
3343
const computedSrc =
3444
docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src;
45+
const exampleName = example.source.split('/').pop();
46+
const installCommand = `pnpm create toolpad-app --example ${exampleName}`;
47+
3548
return (
3649
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} key={example.title}>
3750
<Typography component="h3" variant="h6" sx={{ fontWeight: 'semiBold' }}>
@@ -160,6 +173,22 @@ export default function ExamplesFeatured(props: FeaturedExamplesProps) {
160173
</IconButton>
161174
</Tooltip>
162175
</Box>
176+
177+
<Button
178+
size="small"
179+
variant="outlined"
180+
onClick={() => handleCopy(installCommand, example.title)}
181+
startIcon={
182+
copiedId === example.title ? (
183+
<CheckRounded fontSize="small" />
184+
) : (
185+
<ContentCopyRounded fontSize="small" />
186+
)
187+
}
188+
>
189+
{installCommand}
190+
</Button>
191+
163192
<Button
164193
component="a"
165194
href={example.href}

‎docs/src/modules/components/examples/ExamplesGrid.tsx

+68-39
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,16 @@ import Card from '@mui/material/Card';
44
import CardActions from '@mui/material/CardActions';
55
import CardContent from '@mui/material/CardContent';
66
import CardMedia from '@mui/material/CardMedia';
7-
import Button from '@mui/material/Button';
87
import Grid from '@mui/material/Grid';
98
import Typography from '@mui/material/Typography';
109
import { alpha, useTheme } from '@mui/material/styles';
1110
import IconButton from '@mui/material/IconButton';
1211
import Tooltip from '@mui/material/Tooltip';
13-
import Stack from '@mui/material/Stack';
1412
import SvgIcon from '@mui/material/SvgIcon';
13+
import GitHubIcon from '@mui/icons-material/GitHub';
14+
import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded';
15+
import CheckRounded from '@mui/icons-material/CheckRounded';
16+
import copy from 'clipboard-copy';
1517
import { Example, versionGitHubLink } from './examplesUtils';
1618

1719
interface ExamplesGridProps {
@@ -36,13 +38,22 @@ function CodeSandboxIcon() {
3638

3739
export default function ExamplesGrid(props: ExamplesGridProps) {
3840
const t = useTranslate();
41+
const [copiedId, setCopiedId] = React.useState<string | null>(null);
42+
43+
const handleCopy = (text: string, id: string) => {
44+
copy(text);
45+
setCopiedId(id);
46+
setTimeout(() => setCopiedId(null), 2000);
47+
};
3948

4049
const examples = props.examples.filter((example: Example) => example.featured !== true);
4150
const docsTheme = useTheme();
4251

4352
return (
4453
<Grid container spacing={2} sx={{ pt: 2, pb: 4 }}>
4554
{examples.map((example) => {
55+
const exampleName = example.source.split('/').pop();
56+
const installCommand = `pnpm create toolpad-app --example ${exampleName}`;
4657
const computedSrc =
4758
docsTheme?.palette?.mode === 'dark' && example.srcDark ? example.srcDark : example.src;
4859
return (
@@ -99,45 +110,63 @@ export default function ExamplesGrid(props: ExamplesGridProps) {
99110
p: 0,
100111
display: 'flex',
101112
alignItems: 'center',
102-
justifyContent: 'space-between',
113+
justifyContent: 'flex-start',
114+
gap: 1,
103115
}}
104116
>
105-
<Button
106-
component="a"
107-
href={versionGitHubLink(example.source)}
108-
size="small"
109-
target="_blank"
110-
>
111-
{t('source')}
112-
</Button>
113-
<Stack direction="row" spacing={1}>
114-
{example.stackBlitz === true ? (
115-
<Tooltip title="Edit in StackBlitz">
116-
<IconButton
117-
component="a"
118-
href={`https://stackblitz.com/github/${example.source.replace('https://github.com/', '')}`}
119-
target="_blank"
120-
rel="noopener noreferrer"
121-
size="small"
122-
>
123-
<StackBlitzIcon />
124-
</IconButton>
125-
</Tooltip>
126-
) : null}
127-
{example.codeSandbox === true ? (
128-
<Tooltip title="Edit in CodeSandbox">
129-
<IconButton
130-
component="a"
131-
href={`https://codesandbox.io/p/sandbox/github/${example.source.replace('https://github.com/', '')}`}
132-
target="_blank"
133-
rel="noopener noreferrer"
134-
size="small"
135-
>
136-
<CodeSandboxIcon />
137-
</IconButton>
138-
</Tooltip>
139-
) : null}
140-
</Stack>
117+
<Tooltip title={t('source')}>
118+
<IconButton
119+
component="a"
120+
href={versionGitHubLink(example.source)}
121+
size="small"
122+
target="_blank"
123+
>
124+
<GitHubIcon fontSize="small" />
125+
</IconButton>
126+
</Tooltip>
127+
128+
{example.stackBlitz === true ? (
129+
<Tooltip title="Edit in StackBlitz">
130+
<IconButton
131+
component="a"
132+
href={`https://stackblitz.com/github/${example.source.replace('https://github.com/', '')}`}
133+
target="_blank"
134+
rel="noopener noreferrer"
135+
size="small"
136+
>
137+
<StackBlitzIcon />
138+
</IconButton>
139+
</Tooltip>
140+
) : null}
141+
142+
{example.codeSandbox === true ? (
143+
<Tooltip title="Edit in CodeSandbox">
144+
<IconButton
145+
component="a"
146+
href={`https://codesandbox.io/p/sandbox/github/${example.source.replace('https://github.com/', '')}`}
147+
target="_blank"
148+
rel="noopener noreferrer"
149+
size="small"
150+
>
151+
<CodeSandboxIcon />
152+
</IconButton>
153+
</Tooltip>
154+
) : null}
155+
156+
<Tooltip title={installCommand}>
157+
<IconButton
158+
size="small"
159+
onClick={() => {
160+
handleCopy(installCommand, example.title);
161+
}}
162+
>
163+
{copiedId === example.title ? (
164+
<CheckRounded fontSize="small" />
165+
) : (
166+
<ContentCopyRounded fontSize="small" />
167+
)}
168+
</IconButton>
169+
</Tooltip>
141170
</CardActions>
142171
</Card>
143172
</Grid>

‎examples/core/auth-nextjs-email/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ To copy this example and customize it for your needs, run
5151
```bash
5252
npx create-toolpad-app@latest --example auth-nextjs-email
5353
# or
54-
pnpm dlx create-toolpad-app --example auth-nextjs-email
54+
pnpm create toolpad-app --example auth-nextjs-email
5555
```
5656

5757
and follow the instructions in the terminal.

‎examples/core/auth-nextjs-pages-nextauth-4/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ To copy this example and customize it for your needs, run
2525
```bash
2626
npx create-toolpad-app@latest --example auth-nextjs-pages-nextauth-4
2727
# or
28-
pnpm dlx create-toolpad-app --example auth-nextjs-pages-nextauth-4
28+
pnpm create toolpad-app --example auth-nextjs-pages-nextauth-4
2929
```
3030

3131
and follow the instructions in the terminal.

‎examples/core/auth-nextjs-pages/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ To copy this example and customize it for your needs, run
4747
```bash
4848
npx create-toolpad-app@latest --example auth-nextjs-pages
4949
# or
50-
pnpm dlx create-toolpad-app --example auth-nextjs-pages
50+
pnpm create toolpad-app --example auth-nextjs-pages
5151
```
5252

5353
and follow the instructions in the terminal.

‎examples/core/auth-nextjs-passkey/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ To copy this example and customize it for your needs, run
4141
```bash
4242
npx create-toolpad-app@latest --example auth-nextjs-passkey
4343
# or
44-
pnpm dlx create-toolpad-app --example auth-nextjs-passkey
44+
pnpm create toolpad-app --example auth-nextjs-passkey
4545
```
4646

4747
and follow the instructions in the terminal.

‎examples/core/auth-nextjs-themed/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ To copy this example and customize it for your needs, run
2525
```bash
2626
npx create-toolpad-app@latest --example auth-nextjs-themed
2727
# or
28-
pnpm dlx create-toolpad-app --example auth-nextjs-themed
28+
pnpm create toolpad-app --example auth-nextjs-themed
2929
```
3030

3131
and follow the instructions in the terminal.

‎examples/core/auth-nextjs/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ GITHUB_CLIENT_SECRET=
3535
```bash
3636
npx auth secret
3737
# or
38-
pnpm dlx create-toolpad-app --example auth-nextjs
38+
pnpm create toolpad-app --example auth-nextjs
3939
```
4040

4141
### GitHub configuration

‎examples/core/auth-vite/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ To copy this example and customize it for your needs, run
99
```bash
1010
npx create-toolpad-app@latest --example auth-vite
1111
# or
12-
pnpm dlx create-toolpad-app --example auth-vite
12+
pnpm create toolpad-app --example auth-vite
1313
```
1414

1515
## Getting Started

‎examples/core/firebase-vite/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ To copy this example and customize it for your needs, run
99
```bash
1010
npx create-toolpad-app@latest --example firebase-vite
1111
# or
12-
pnpm dlx create-toolpad-app --example firebase-vite
12+
pnpm create toolpad-app --example firebase-vite
1313
```
1414

1515
## Setting up

‎examples/core/tutorial/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ To copy this example and customize it for your needs, run
2525
```bash
2626
npx create-toolpad-app@latest --example tutorial
2727
# or
28-
pnpm dlx create-toolpad-app --example tutorial
28+
pnpm create toolpad-app --example tutorial
2929
```
3030

3131
and follow the instructions in the terminal.

‎examples/core/vite/README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ To copy this example and customize it for your needs, run
99
```bash
1010
npx create-toolpad-app@latest --example vite
1111
# or
12-
pnpm dlx create-toolpad-app --example vite
12+
pnpm create toolpad-app --example vite
1313
```
1414

1515
and follow the instructions in the terminal.

‎pnpm-lock.yaml

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)