[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs.
bomb.sh/docs
feat: Add password example + add CLI preview (#3)
Co-authored-by: Paul Valladares <85648028+dreyfus92@users.noreply.github.com>
authored by
MacFJA
Paul Valladares
and committed by
GitHub
(Apr 6, 2025, 8:22 PM -0600)
50aa0a93
daa2d9da
+96
+85
src/content/docs/clack/prompts.mdx
+85
src/content/docs/clack/prompts.mdx
···
29
29
});
30
30
```
31
31
32
+
<pre class="cli-preview"><font color="#555753">│</font>
33
+
<font color="#06989A">◆</font> What is your name?
34
+
<font color="#06989A">│</font> <span style="background-color:#FFFFFF"><font color="#181818">J</font></span><font color="#AAAAAA">ohn Doe</font>
35
+
<font color="#06989A">└</font></pre>
36
+
37
+
### Password Input
38
+
```ts twoslash
39
+
import { password } from '@clack/prompts';
40
+
41
+
const secret = await password({
42
+
message: 'What is your password?',
43
+
mask: '*',
44
+
validate: (value) => {
45
+
if (value.length < 8) return 'Your password must be at least 8 characters';
46
+
if (!/[A-Z]/.test(value)) return 'Your password must be least contain 1 uppercase letter';
47
+
if (!/[0-9]/.test(value)) return 'Your password must be least contain 1 number';
48
+
if (!/[*?!@&]/.test(value)) return 'Your password must be least contain 1 special characters (*?!@&)';
49
+
return undefined;
50
+
},
51
+
});
52
+
```
53
+
54
+
<pre class="cli-preview"><font color="#555753">│</font>
55
+
<font color="#06989A">◆</font> What is your password?
56
+
<font color="#06989A">│</font> *****<span style="background-color:#FFFFFF"><font color="#FFFFFF">_</font></span>
57
+
<font color="#06989A">└</font></pre>
58
+
32
59
### Selection
60
+
61
+
#### Simple value
33
62
34
63
```ts twoslash
35
64
import { select } from '@clack/prompts';
···
44
73
});
45
74
```
46
75
76
+
<pre class="cli-preview"><font color="#555753">│</font>
77
+
<font color="#06989A">◆</font> Pick a framework
78
+
<font color="#06989A">│</font> <font color="#4E9A06">●</font> Next.js
79
+
<font color="#06989A">│</font> ○ Astro
80
+
<font color="#06989A">│</font> ○ SvelteKit
81
+
<font color="#06989A">└</font></pre>
82
+
83
+
#### Complex value
84
+
85
+
```ts twoslash
86
+
import { select } from '@clack/prompts';
87
+
88
+
const framework = await select({
89
+
message: 'Pick a framework',
90
+
options: [
91
+
{ value: { framework: 'Next', language: 'React' }, label: 'Next.js' },
92
+
{ value: { framework: null, language: 'Astro' }, label: 'Astro' },
93
+
{ value: { framework: 'Sveltekit', language: 'Svelte' }, label: 'SvelteKit' },
94
+
],
95
+
});
96
+
```
97
+
98
+
<pre class="cli-preview"><font color="#555753">│</font>
99
+
<font color="#06989A">◆</font> Pick a framework
100
+
<font color="#06989A">│</font> <font color="#4E9A06">●</font> Next.js
101
+
<font color="#06989A">│</font> ○ Astro
102
+
<font color="#06989A">│</font> ○ SvelteKit
103
+
<font color="#06989A">└</font></pre>
104
+
105
+
#### Multiple values
106
+
107
+
```ts twoslash
108
+
import { multiselect } from '@clack/prompts';
109
+
110
+
const framework = await multiselect({
111
+
message: 'Pick a framework',
112
+
options: [
113
+
{ value: { framework: 'Next', language: 'React' }, label: 'Next.js' },
114
+
{ value: { framework: null, language: 'Astro' }, label: 'Astro' },
115
+
{ value: { framework: 'Sveltekit', language: 'Svelte' }, label: 'SvelteKit' },
116
+
],
117
+
});
118
+
```
119
+
120
+
<pre class="cli-preview"><font color="#555753">│</font>
121
+
<font color="#06989A">◆</font> Pick a framework
122
+
<font color="#06989A">│</font> <font color="#4E9A06">◼</font> Next.js
123
+
<font color="#06989A">│</font> <font color="#06989A">◻</font> Astro
124
+
<font color="#06989A">│</font> ◻ SvelteKit
125
+
<font color="#06989A">└</font></pre>
126
+
47
127
### Confirmation
48
128
49
129
```ts twoslash
···
53
133
message: 'Do you want to continue?',
54
134
});
55
135
```
136
+
137
+
<pre class="cli-preview"><font color="#555753">│</font>
138
+
<font color="#06989A">◆</font> Do you want to continue?
139
+
<font color="#06989A">│</font> <font color="#4E9A06">●</font> Yes / ○ No
140
+
<font color="#06989A">└</font></pre>
56
141
57
142
## Installation
58
143
+11
src/styles/starlight.css
+11
src/styles/starlight.css
···
21
21
blockquote {
22
22
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
23
23
}
24
+
25
+
.cli-preview {
26
+
padding: 1em;
27
+
border: 1px solid #292929;
28
+
border-radius: 0.5em;
29
+
white-space: pre;
30
+
line-height: 1.2em;
31
+
font-family: monospace;
32
+
background-color: #181818;
33
+
color: white;
34
+
}