Skip to content

Commit 74ffae6

Browse files
43081j43081j
committed
chore: run format
1 parent d7523e3 commit 74ffae6

File tree

7 files changed

+656
-632
lines changed

7 files changed

+656
-632
lines changed

‎examples/basic/autocomplete-multiselect.ts

Lines changed: 71 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -7,86 +7,94 @@ import color from 'picocolors';
77
*/
88

99
async function main() {
10-
console.clear();
10+
console.clear();
1111

12-
p.intro(`${color.bgCyan(color.black(' Integrated Autocomplete Multiselect Example '))}`);
12+
p.intro(`${color.bgCyan(color.black(' Integrated Autocomplete Multiselect Example '))}`);
1313

14-
p.note(`
14+
p.note(
15+
`
1516
${color.cyan('Filter and select multiple items in a single interface:')}
1617
- ${color.yellow('Type')} to filter the list in real-time
1718
- Use ${color.yellow('up/down arrows')} to navigate with improved stability
1819
- Press ${color.yellow('Space')} to select/deselect the highlighted item ${color.green('(multiple selections allowed)')}
1920
- Use ${color.yellow('Backspace')} to modify your filter text when searching for different options
2021
- Press ${color.yellow('Enter')} when done selecting all items
2122
- Press ${color.yellow('Ctrl+C')} to cancel
22-
`, 'Instructions');
23+
`,
24+
'Instructions'
25+
);
2326

24-
// Frameworks in alphabetical order
25-
const frameworks = [
26-
{ value: 'angular', label: 'Angular', hint: 'Frontend/UI' },
27-
{ value: 'django', label: 'Django', hint: 'Python Backend' },
28-
{ value: 'dotnet', label: '.NET Core', hint: 'C# Backend' },
29-
{ value: 'electron', label: 'Electron', hint: 'Desktop' },
30-
{ value: 'express', label: 'Express', hint: 'Node.js Backend' },
31-
{ value: 'flask', label: 'Flask', hint: 'Python Backend' },
32-
{ value: 'flutter', label: 'Flutter', hint: 'Mobile' },
33-
{ value: 'laravel', label: 'Laravel', hint: 'PHP Backend' },
34-
{ value: 'nestjs', label: 'NestJS', hint: 'Node.js Backend' },
35-
{ value: 'nextjs', label: 'Next.js', hint: 'React Framework' },
36-
{ value: 'nuxt', label: 'Nuxt.js', hint: 'Vue Framework' },
37-
{ value: 'rails', label: 'Ruby on Rails', hint: 'Ruby Backend' },
38-
{ value: 'react', label: 'React', hint: 'Frontend/UI' },
39-
{ value: 'reactnative', label: 'React Native', hint: 'Mobile' },
40-
{ value: 'spring', label: 'Spring Boot', hint: 'Java Backend' },
41-
{ value: 'svelte', label: 'Svelte', hint: 'Frontend/UI' },
42-
{ value: 'tauri', label: 'Tauri', hint: 'Desktop' },
43-
{ value: 'vue', label: 'Vue.js', hint: 'Frontend/UI' },
44-
];
27+
// Frameworks in alphabetical order
28+
const frameworks = [
29+
{ value: 'angular', label: 'Angular', hint: 'Frontend/UI' },
30+
{ value: 'django', label: 'Django', hint: 'Python Backend' },
31+
{ value: 'dotnet', label: '.NET Core', hint: 'C# Backend' },
32+
{ value: 'electron', label: 'Electron', hint: 'Desktop' },
33+
{ value: 'express', label: 'Express', hint: 'Node.js Backend' },
34+
{ value: 'flask', label: 'Flask', hint: 'Python Backend' },
35+
{ value: 'flutter', label: 'Flutter', hint: 'Mobile' },
36+
{ value: 'laravel', label: 'Laravel', hint: 'PHP Backend' },
37+
{ value: 'nestjs', label: 'NestJS', hint: 'Node.js Backend' },
38+
{ value: 'nextjs', label: 'Next.js', hint: 'React Framework' },
39+
{ value: 'nuxt', label: 'Nuxt.js', hint: 'Vue Framework' },
40+
{ value: 'rails', label: 'Ruby on Rails', hint: 'Ruby Backend' },
41+
{ value: 'react', label: 'React', hint: 'Frontend/UI' },
42+
{ value: 'reactnative', label: 'React Native', hint: 'Mobile' },
43+
{ value: 'spring', label: 'Spring Boot', hint: 'Java Backend' },
44+
{ value: 'svelte', label: 'Svelte', hint: 'Frontend/UI' },
45+
{ value: 'tauri', label: 'Tauri', hint: 'Desktop' },
46+
{ value: 'vue', label: 'Vue.js', hint: 'Frontend/UI' },
47+
];
4548

46-
// Use the new integrated autocompleteMultiselect component
47-
const result = await p.autocompleteMultiselect<string>({
48-
message: 'Select frameworks (type to filter)',
49-
options: frameworks,
50-
placeholder: 'Type to filter...',
51-
maxItems: 8
52-
});
49+
// Use the new integrated autocompleteMultiselect component
50+
const result = await p.autocompleteMultiselect<string>({
51+
message: 'Select frameworks (type to filter)',
52+
options: frameworks,
53+
placeholder: 'Type to filter...',
54+
maxItems: 8,
55+
});
5356

54-
if (p.isCancel(result)) {
55-
p.cancel('Operation cancelled.');
56-
process.exit(0);
57-
}
57+
if (p.isCancel(result)) {
58+
p.cancel('Operation cancelled.');
59+
process.exit(0);
60+
}
5861

59-
// Type guard: if not a cancel symbol, result must be a string array
60-
function isStringArray(value: unknown): value is string[] {
61-
return Array.isArray(value) && value.every(item => typeof item === 'string');
62-
}
62+
// Type guard: if not a cancel symbol, result must be a string array
63+
function isStringArray(value: unknown): value is string[] {
64+
return Array.isArray(value) && value.every((item) => typeof item === 'string');
65+
}
6366

64-
// We can now use the type guard to ensure type safety
65-
if (!isStringArray(result)) {
66-
throw new Error('Unexpected result type');
67-
}
67+
// We can now use the type guard to ensure type safety
68+
if (!isStringArray(result)) {
69+
throw new Error('Unexpected result type');
70+
}
6871

69-
const selectedFrameworks = result;
72+
const selectedFrameworks = result;
7073

71-
// If no items selected, show a message
72-
if (selectedFrameworks.length === 0) {
73-
p.note('No frameworks were selected', 'Empty Selection');
74-
process.exit(0);
75-
}
74+
// If no items selected, show a message
75+
if (selectedFrameworks.length === 0) {
76+
p.note('No frameworks were selected', 'Empty Selection');
77+
process.exit(0);
78+
}
7679

77-
// Display selected frameworks with detailed information
78-
p.note(`You selected ${color.green(selectedFrameworks.length)} frameworks:`, 'Selection Complete');
79-
80-
// Show each selected framework with its details
81-
const selectedDetails = selectedFrameworks
82-
.map(value => {
83-
const framework = frameworks.find(f => f.value === value);
84-
return framework ? `${color.cyan(framework.label)} ${color.dim(`- ${framework.hint}`)}` : value;
85-
})
86-
.join('\n');
80+
// Display selected frameworks with detailed information
81+
p.note(
82+
`You selected ${color.green(selectedFrameworks.length)} frameworks:`,
83+
'Selection Complete'
84+
);
8785

88-
p.log.message(selectedDetails);
89-
p.outro(`Successfully selected ${color.green(selectedFrameworks.length)} frameworks.`);
86+
// Show each selected framework with its details
87+
const selectedDetails = selectedFrameworks
88+
.map((value) => {
89+
const framework = frameworks.find((f) => f.value === value);
90+
return framework
91+
? `${color.cyan(framework.label)} ${color.dim(`- ${framework.hint}`)}`
92+
: value;
93+
})
94+
.join('\n');
95+
96+
p.log.message(selectedDetails);
97+
p.outro(`Successfully selected ${color.green(selectedFrameworks.length)} frameworks.`);
9098
}
9199

92-
main().catch(console.error);
100+
main().catch(console.error);

‎examples/basic/autocomplete.ts

Lines changed: 46 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,58 @@ import * as p from '@clack/prompts';
22
import color from 'picocolors';
33

44
async function main() {
5-
console.clear();
5+
console.clear();
66

7-
p.intro(`${color.bgCyan(color.black(' Autocomplete Example '))}`);
7+
p.intro(`${color.bgCyan(color.black(' Autocomplete Example '))}`);
88

9-
p.note(`
9+
p.note(
10+
`
1011
${color.cyan('This example demonstrates the type-ahead autocomplete feature:')}
1112
- ${color.yellow('Type')} to filter the list in real-time
1213
- Use ${color.yellow('up/down arrows')} to navigate the filtered results
1314
- Press ${color.yellow('Enter')} to select the highlighted option
1415
- Press ${color.yellow('Ctrl+C')} to cancel
15-
`, 'Instructions');
16-
17-
const countries = [
18-
{ value: 'us', label: 'United States', hint: 'NA' },
19-
{ value: 'ca', label: 'Canada', hint: 'NA' },
20-
{ value: 'mx', label: 'Mexico', hint: 'NA' },
21-
{ value: 'br', label: 'Brazil', hint: 'SA' },
22-
{ value: 'ar', label: 'Argentina', hint: 'SA' },
23-
{ value: 'uk', label: 'United Kingdom', hint: 'EU' },
24-
{ value: 'fr', label: 'France', hint: 'EU' },
25-
{ value: 'de', label: 'Germany', hint: 'EU' },
26-
{ value: 'it', label: 'Italy', hint: 'EU' },
27-
{ value: 'es', label: 'Spain', hint: 'EU' },
28-
{ value: 'pt', label: 'Portugal', hint: 'EU' },
29-
{ value: 'ru', label: 'Russia', hint: 'EU/AS' },
30-
{ value: 'cn', label: 'China', hint: 'AS' },
31-
{ value: 'jp', label: 'Japan', hint: 'AS' },
32-
{ value: 'in', label: 'India', hint: 'AS' },
33-
{ value: 'kr', label: 'South Korea', hint: 'AS' },
34-
{ value: 'au', label: 'Australia', hint: 'OC' },
35-
{ value: 'nz', label: 'New Zealand', hint: 'OC' },
36-
{ value: 'za', label: 'South Africa', hint: 'AF' },
37-
{ value: 'eg', label: 'Egypt', hint: 'AF' },
38-
];
39-
40-
const result = await p.autocomplete({
41-
message: 'Select a country',
42-
options: countries,
43-
placeholder: 'Type to search countries...',
44-
maxItems: 8,
45-
});
46-
47-
if (p.isCancel(result)) {
48-
p.cancel('Operation cancelled.');
49-
process.exit(0);
50-
}
51-
52-
const selected = countries.find(c => c.value === result);
53-
p.outro(`You selected: ${color.cyan(selected?.label)} (${color.yellow(selected?.hint)})`);
16+
`,
17+
'Instructions'
18+
);
19+
20+
const countries = [
21+
{ value: 'us', label: 'United States', hint: 'NA' },
22+
{ value: 'ca', label: 'Canada', hint: 'NA' },
23+
{ value: 'mx', label: 'Mexico', hint: 'NA' },
24+
{ value: 'br', label: 'Brazil', hint: 'SA' },
25+
{ value: 'ar', label: 'Argentina', hint: 'SA' },
26+
{ value: 'uk', label: 'United Kingdom', hint: 'EU' },
27+
{ value: 'fr', label: 'France', hint: 'EU' },
28+
{ value: 'de', label: 'Germany', hint: 'EU' },
29+
{ value: 'it', label: 'Italy', hint: 'EU' },
30+
{ value: 'es', label: 'Spain', hint: 'EU' },
31+
{ value: 'pt', label: 'Portugal', hint: 'EU' },
32+
{ value: 'ru', label: 'Russia', hint: 'EU/AS' },
33+
{ value: 'cn', label: 'China', hint: 'AS' },
34+
{ value: 'jp', label: 'Japan', hint: 'AS' },
35+
{ value: 'in', label: 'India', hint: 'AS' },
36+
{ value: 'kr', label: 'South Korea', hint: 'AS' },
37+
{ value: 'au', label: 'Australia', hint: 'OC' },
38+
{ value: 'nz', label: 'New Zealand', hint: 'OC' },
39+
{ value: 'za', label: 'South Africa', hint: 'AF' },
40+
{ value: 'eg', label: 'Egypt', hint: 'AF' },
41+
];
42+
43+
const result = await p.autocomplete({
44+
message: 'Select a country',
45+
options: countries,
46+
placeholder: 'Type to search countries...',
47+
maxItems: 8,
48+
});
49+
50+
if (p.isCancel(result)) {
51+
p.cancel('Operation cancelled.');
52+
process.exit(0);
53+
}
54+
55+
const selected = countries.find((c) => c.value === result);
56+
p.outro(`You selected: ${color.cyan(selected?.label)} (${color.yellow(selected?.hint)})`);
5457
}
5558

56-
main().catch(console.error);
59+
main().catch(console.error);

0 commit comments

Comments
 (0)