+16 -15

packages/jsx/src/components/option.ts

Reviewed

··· 1 1 - import { type Option, isCancel } from '@clack/prompts'; 1 1 + import { type Option as PromptOption, isCancel } from '@clack/prompts'; 2 2 import type { JSX } from '../types.js'; 3 3 import { resolveChildren } from '../utils.js'; 4 4 5 5 - export interface OptionProps { 6 6 - value: unknown; 5 5 + export interface OptionProps<T> { 6 6 + value: T; 7 7 + hint?: string; 7 8 children?: JSX.Element | JSX.Element[] | string; 8 9 } 9 10 10 10 - export async function Option(props: OptionProps): Promise<Option<unknown>> { 11 11 - let label = ''; 12 12 - if (props.children) { 13 13 - const children = await resolveChildren(props.children); 11 11 + export async function Option<T>(props: OptionProps<T>): Promise<PromptOption<T>> { 12 12 + const { children, ...opts } = props; 13 13 + 14 14 + if (children) { 15 15 + const resolvedChildren = await resolveChildren(children); 14 16 const childStrings: string[] = []; 15 17 16 16 - for (const child of children) { 18 18 + for (const child of resolvedChildren) { 17 19 if (isCancel(child)) { 18 20 continue; 19 21 } 20 22 childStrings.push(String(child)); 21 23 } 22 24 23 23 - label = childStrings.join('\n'); 24 24 - } else { 25 25 - label = String(props.value); 25 25 + return { 26 26 + ...opts, 27 27 + label: childStrings.join('\n'), 28 28 + } as PromptOption<T>; 26 29 } 27 27 - return { 28 28 - value: props.value, 29 29 - label, 30 30 - }; 30 30 + 31 31 + return opts as PromptOption<T>; 31 32 }

+2 -8

packages/jsx/src/components/select.ts

Reviewed

··· 4 4 import { resolveChildren } from '../utils.js'; 5 5 6 6 export interface SelectProps extends Omit<SelectOptions<unknown>, 'options'> { 7 7 - children: JSX.Element[] | JSX.Element; 7 7 + children: JSX.Element[] | JSX.Element | string; 8 8 } 9 9 10 10 const isOptionLike = (obj: unknown): obj is Option<unknown> => { 11 11 - return ( 12 12 - obj !== null && 13 13 - typeof obj === 'object' && 14 14 - Object.hasOwnProperty.call(obj, 'label') && 15 15 - Object.hasOwnProperty.call(obj, 'value') && 16 16 - typeof (obj as { label: string }).label === 'string' 17 17 - ); 11 11 + return obj !== null && typeof obj === 'object' && Object.hasOwnProperty.call(obj, 'value'); 18 12 }; 19 13 20 14 export async function Select(props: SelectProps): ReturnType<typeof select> {

+1 -1

packages/jsx/src/types.ts

Reviewed

··· 1 1 namespace JSX { 2 2 - export type IntrinsicElements = {}; 2 2 + export type IntrinsicElements = never; 3 3 4 4 export type Element = Promise<unknown>; 5 5 }

-302

packages/jsx/test/__snapshots__/jsx.test.tsx.snap

Reviewed

··· 1 1 - // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 2 - 3 3 - exports[`jsx > Confirm > can set active text 1`] = ` 4 4 - [ 5 5 - "<cursor.hide>", 6 6 - "│ 7 7 - ◆ foo? 8 8 - │ ● DO IT / ○ No 9 9 - └ 10 10 - ", 11 11 - "<cursor.backward count=999><cursor.up count=4>", 12 12 - "<cursor.down count=1>", 13 13 - "<erase.down>", 14 14 - "◇ foo? 15 15 - │ DO IT", 16 16 - " 17 17 - ", 18 18 - "<cursor.show>", 19 19 - ] 20 20 - `; 21 21 - 22 22 - exports[`jsx > Confirm > can set inactive text 1`] = ` 23 23 - [ 24 24 - "<cursor.hide>", 25 25 - "│ 26 26 - ◆ foo? 27 27 - │ ● Yes / ○ DONT DO IT 28 28 - └ 29 29 - ", 30 30 - "<cursor.backward count=999><cursor.up count=4>", 31 31 - "<cursor.down count=1>", 32 32 - "<erase.down>", 33 33 - "◇ foo? 34 34 - │ Yes", 35 35 - " 36 36 - ", 37 37 - "<cursor.show>", 38 38 - ] 39 39 - `; 40 40 - 41 41 - exports[`jsx > Confirm > can set message 1`] = ` 42 42 - [ 43 43 - "<cursor.hide>", 44 44 - "│ 45 45 - ◆ foo? 46 46 - │ ● Yes / ○ No 47 47 - └ 48 48 - ", 49 49 - "<cursor.backward count=999><cursor.up count=4>", 50 50 - "<cursor.down count=1>", 51 51 - "<erase.down>", 52 52 - "◇ foo? 53 53 - │ Yes", 54 54 - " 55 55 - ", 56 56 - "<cursor.show>", 57 57 - ] 58 58 - `; 59 59 - 60 60 - exports[`jsx > Note > can render children as message 1`] = ` 61 61 - [ 62 62 - "│ 63 63 - ◇  ──────────╮ 64 64 - │ │ 65 65 - │ a message │ 66 66 - │ │ 67 67 - ├─────────────╯ 68 68 - ", 69 69 - ] 70 70 - `; 71 71 - 72 72 - exports[`jsx > Note > can render complex results as message 1`] = ` 73 73 - [ 74 74 - "<cursor.hide>", 75 75 - "│ 76 76 - ◆ say yes 77 77 - │ ● Yes / ○ No 78 78 - └ 79 79 - ", 80 80 - "<cursor.backward count=999><cursor.up count=4>", 81 81 - "<cursor.down count=1>", 82 82 - "<erase.down>", 83 83 - "◇ say yes 84 84 - │ Yes", 85 85 - " 86 86 - ", 87 87 - "<cursor.show>", 88 88 - "│ 89 89 - ◇  ─────╮ 90 90 - │ │ 91 91 - │ true │ 92 92 - │ │ 93 93 - ├────────╯ 94 94 - ", 95 95 - ] 96 96 - `; 97 97 - 98 98 - exports[`jsx > Note > can render multiple children as message 1`] = ` 99 99 - [ 100 100 - "<cursor.hide>", 101 101 - "│ 102 102 - ◆ say yes 103 103 - │ ● Yes / ○ No 104 104 - └ 105 105 - ", 106 106 - "<cursor.hide>", 107 107 - "│ 108 108 - ◆ say yes again 109 109 - │ ● Yes / ○ No 110 110 - └ 111 111 - ", 112 112 - "<cursor.backward count=999><cursor.up count=4>", 113 113 - "<cursor.down count=1>", 114 114 - "<erase.down>", 115 115 - "◇ say yes 116 116 - │ Yes", 117 117 - " 118 118 - ", 119 119 - "<cursor.show>", 120 120 - "<cursor.backward count=999><cursor.up count=4>", 121 121 - "<cursor.down count=1>", 122 122 - "<erase.down>", 123 123 - "◇ say yes again 124 124 - │ Yes", 125 125 - " 126 126 - ", 127 127 - "<cursor.show>", 128 128 - "│ 129 129 - ◇  ─────╮ 130 130 - │ │ 131 131 - │ true │ 132 132 - │ true │ 133 133 - │ │ 134 134 - ├────────╯ 135 135 - ", 136 136 - ] 137 137 - `; 138 138 - 139 139 - exports[`jsx > Note > can render string message 1`] = ` 140 140 - [ 141 141 - "│ 142 142 - ◇  ────╮ 143 143 - │ │ 144 144 - │ foo │ 145 145 - │ │ 146 146 - ├───────╯ 147 147 - ", 148 148 - ] 149 149 - `; 150 150 - 151 151 - exports[`jsx > Password > can set custom mask 1`] = ` 152 152 - [ 153 153 - "<cursor.hide>", 154 154 - "│ 155 155 - ◆ foo 156 156 - │ _ 157 157 - └ 158 158 - ", 159 159 - "<cursor.backward count=999><cursor.up count=4>", 160 160 - "<cursor.down count=2>", 161 161 - "<erase.line><cursor.left count=1>", 162 162 - "│ !_", 163 163 - "<cursor.down count=2>", 164 164 - "<cursor.backward count=999><cursor.up count=4>", 165 165 - "<cursor.down count=2>", 166 166 - "<erase.line><cursor.left count=1>", 167 167 - "│ !!_", 168 168 - "<cursor.down count=2>", 169 169 - "<cursor.backward count=999><cursor.up count=4>", 170 170 - "<cursor.down count=1>", 171 171 - "<erase.down>", 172 172 - "◇ foo 173 173 - │ !!", 174 174 - " 175 175 - ", 176 176 - "<cursor.show>", 177 177 - ] 178 178 - `; 179 179 - 180 180 - exports[`jsx > Password > renders password input 1`] = ` 181 181 - [ 182 182 - "<cursor.hide>", 183 183 - "│ 184 184 - ◆ foo 185 185 - │ _ 186 186 - └ 187 187 - ", 188 188 - "<cursor.backward count=999><cursor.up count=4>", 189 189 - "<cursor.down count=1>", 190 190 - "<erase.down>", 191 191 - "◇ foo 192 192 - │", 193 193 - " 194 194 - ", 195 195 - "<cursor.show>", 196 196 - ] 197 197 - `; 198 198 - 199 199 - exports[`jsx > Password > renders user input 1`] = ` 200 200 - [ 201 201 - "<cursor.hide>", 202 202 - "│ 203 203 - ◆ foo 204 204 - │ _ 205 205 - └ 206 206 - ", 207 207 - "<cursor.backward count=999><cursor.up count=4>", 208 208 - "<cursor.down count=2>", 209 209 - "<erase.line><cursor.left count=1>", 210 210 - "│ ▪_", 211 211 - "<cursor.down count=2>", 212 212 - "<cursor.backward count=999><cursor.up count=4>", 213 213 - "<cursor.down count=2>", 214 214 - "<erase.line><cursor.left count=1>", 215 215 - "│ ▪▪_", 216 216 - "<cursor.down count=2>", 217 217 - "<cursor.backward count=999><cursor.up count=4>", 218 218 - "<cursor.down count=1>", 219 219 - "<erase.down>", 220 220 - "◇ foo 221 221 - │ ▪▪", 222 222 - " 223 223 - ", 224 224 - "<cursor.show>", 225 225 - ] 226 226 - `; 227 227 - 228 228 - exports[`jsx > Text > can set default value 1`] = ` 229 229 - [ 230 230 - "<cursor.hide>", 231 231 - "│ 232 232 - ◆ foo 233 233 - │ _ 234 234 - └ 235 235 - ", 236 236 - "<cursor.backward count=999><cursor.up count=4>", 237 237 - "<cursor.down count=1>", 238 238 - "<erase.down>", 239 239 - "◇ foo 240 240 - │ bar", 241 241 - " 242 242 - ", 243 243 - "<cursor.show>", 244 244 - ] 245 245 - `; 246 246 - 247 247 - exports[`jsx > Text > can set initial value 1`] = ` 248 248 - [ 249 249 - "<cursor.hide>", 250 250 - "│ 251 251 - ◆ foo 252 252 - │ bar█ 253 253 - └ 254 254 - ", 255 255 - "<cursor.backward count=999><cursor.up count=4>", 256 256 - "<cursor.down count=1>", 257 257 - "<erase.down>", 258 258 - "◇ foo 259 259 - │ bar", 260 260 - " 261 261 - ", 262 262 - "<cursor.show>", 263 263 - ] 264 264 - `; 265 265 - 266 266 - exports[`jsx > Text > can set placeholder 1`] = ` 267 267 - [ 268 268 - "<cursor.hide>", 269 269 - "│ 270 270 - ◆ foo 271 271 - │ bar 272 272 - └ 273 273 - ", 274 274 - "<cursor.backward count=999><cursor.up count=4>", 275 275 - "<cursor.down count=1>", 276 276 - "<erase.down>", 277 277 - "◇ foo 278 278 - │", 279 279 - " 280 280 - ", 281 281 - "<cursor.show>", 282 282 - ] 283 283 - `; 284 284 - 285 285 - exports[`jsx > Text > renders text input 1`] = ` 286 286 - [ 287 287 - "<cursor.hide>", 288 288 - "│ 289 289 - ◆ foo 290 290 - │ _ 291 291 - └ 292 292 - ", 293 293 - "<cursor.backward count=999><cursor.up count=4>", 294 294 - "<cursor.down count=1>", 295 295 - "<erase.down>", 296 296 - "◇ foo 297 297 - │", 298 298 - " 299 299 - ", 300 300 - "<cursor.show>", 301 301 - ] 302 302 - `;

+58

packages/jsx/test/components/__snapshots__/confirm.test.tsx.snap

Reviewed

··· 1 1 + // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 2 + 3 3 + exports[`Confirm > can set active text 1`] = ` 4 4 + [ 5 5 + "<cursor.hide>", 6 6 + "│ 7 7 + ◆ foo? 8 8 + │ ● DO IT / ○ No 9 9 + └ 10 10 + ", 11 11 + "<cursor.backward count=999><cursor.up count=4>", 12 12 + "<cursor.down count=1>", 13 13 + "<erase.down>", 14 14 + "◇ foo? 15 15 + │ DO IT", 16 16 + " 17 17 + ", 18 18 + "<cursor.show>", 19 19 + ] 20 20 + `; 21 21 + 22 22 + exports[`Confirm > can set inactive text 1`] = ` 23 23 + [ 24 24 + "<cursor.hide>", 25 25 + "│ 26 26 + ◆ foo? 27 27 + │ ● Yes / ○ DONT DO IT 28 28 + └ 29 29 + ", 30 30 + "<cursor.backward count=999><cursor.up count=4>", 31 31 + "<cursor.down count=1>", 32 32 + "<erase.down>", 33 33 + "◇ foo? 34 34 + │ Yes", 35 35 + " 36 36 + ", 37 37 + "<cursor.show>", 38 38 + ] 39 39 + `; 40 40 + 41 41 + exports[`Confirm > can set message 1`] = ` 42 42 + [ 43 43 + "<cursor.hide>", 44 44 + "│ 45 45 + ◆ foo? 46 46 + │ ● Yes / ○ No 47 47 + └ 48 48 + ", 49 49 + "<cursor.backward count=999><cursor.up count=4>", 50 50 + "<cursor.down count=1>", 51 51 + "<erase.down>", 52 52 + "◇ foo? 53 53 + │ Yes", 54 54 + " 55 55 + ", 56 56 + "<cursor.show>", 57 57 + ] 58 58 + `;

+92

packages/jsx/test/components/__snapshots__/note.test.tsx.snap

Reviewed

··· 1 1 + // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 2 + 3 3 + exports[`Note > can render children as message 1`] = ` 4 4 + [ 5 5 + "│ 6 6 + ◇  ──────────╮ 7 7 + │ │ 8 8 + │ a message │ 9 9 + │ │ 10 10 + ├─────────────╯ 11 11 + ", 12 12 + ] 13 13 + `; 14 14 + 15 15 + exports[`Note > can render complex results as message 1`] = ` 16 16 + [ 17 17 + "<cursor.hide>", 18 18 + "│ 19 19 + ◆ say yes 20 20 + │ ● Yes / ○ No 21 21 + └ 22 22 + ", 23 23 + "<cursor.backward count=999><cursor.up count=4>", 24 24 + "<cursor.down count=1>", 25 25 + "<erase.down>", 26 26 + "◇ say yes 27 27 + │ Yes", 28 28 + " 29 29 + ", 30 30 + "<cursor.show>", 31 31 + "│ 32 32 + ◇  ─────╮ 33 33 + │ │ 34 34 + │ true │ 35 35 + │ │ 36 36 + ├────────╯ 37 37 + ", 38 38 + ] 39 39 + `; 40 40 + 41 41 + exports[`Note > can render multiple children as message 1`] = ` 42 42 + [ 43 43 + "<cursor.hide>", 44 44 + "│ 45 45 + ◆ say yes 46 46 + │ ● Yes / ○ No 47 47 + └ 48 48 + ", 49 49 + "<cursor.hide>", 50 50 + "│ 51 51 + ◆ say yes again 52 52 + │ ● Yes / ○ No 53 53 + └ 54 54 + ", 55 55 + "<cursor.backward count=999><cursor.up count=4>", 56 56 + "<cursor.down count=1>", 57 57 + "<erase.down>", 58 58 + "◇ say yes 59 59 + │ Yes", 60 60 + " 61 61 + ", 62 62 + "<cursor.show>", 63 63 + "<cursor.backward count=999><cursor.up count=4>", 64 64 + "<cursor.down count=1>", 65 65 + "<erase.down>", 66 66 + "◇ say yes again 67 67 + │ Yes", 68 68 + " 69 69 + ", 70 70 + "<cursor.show>", 71 71 + "│ 72 72 + ◇  ─────╮ 73 73 + │ │ 74 74 + │ true │ 75 75 + │ true │ 76 76 + │ │ 77 77 + ├────────╯ 78 78 + ", 79 79 + ] 80 80 + `; 81 81 + 82 82 + exports[`Note > can render string message 1`] = ` 83 83 + [ 84 84 + "│ 85 85 + ◇  ────╮ 86 86 + │ │ 87 87 + │ foo │ 88 88 + │ │ 89 89 + ├───────╯ 90 90 + ", 91 91 + ] 92 92 + `;

+78

packages/jsx/test/components/__snapshots__/password.test.tsx.snap

Reviewed

··· 1 1 + // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 2 + 3 3 + exports[`Password > can set custom mask 1`] = ` 4 4 + [ 5 5 + "<cursor.hide>", 6 6 + "│ 7 7 + ◆ foo 8 8 + │ _ 9 9 + └ 10 10 + ", 11 11 + "<cursor.backward count=999><cursor.up count=4>", 12 12 + "<cursor.down count=2>", 13 13 + "<erase.line><cursor.left count=1>", 14 14 + "│ !_", 15 15 + "<cursor.down count=2>", 16 16 + "<cursor.backward count=999><cursor.up count=4>", 17 17 + "<cursor.down count=2>", 18 18 + "<erase.line><cursor.left count=1>", 19 19 + "│ !!_", 20 20 + "<cursor.down count=2>", 21 21 + "<cursor.backward count=999><cursor.up count=4>", 22 22 + "<cursor.down count=1>", 23 23 + "<erase.down>", 24 24 + "◇ foo 25 25 + │ !!", 26 26 + " 27 27 + ", 28 28 + "<cursor.show>", 29 29 + ] 30 30 + `; 31 31 + 32 32 + exports[`Password > renders password input 1`] = ` 33 33 + [ 34 34 + "<cursor.hide>", 35 35 + "│ 36 36 + ◆ foo 37 37 + │ _ 38 38 + └ 39 39 + ", 40 40 + "<cursor.backward count=999><cursor.up count=4>", 41 41 + "<cursor.down count=1>", 42 42 + "<erase.down>", 43 43 + "◇ foo 44 44 + │", 45 45 + " 46 46 + ", 47 47 + "<cursor.show>", 48 48 + ] 49 49 + `; 50 50 + 51 51 + exports[`Password > renders user input 1`] = ` 52 52 + [ 53 53 + "<cursor.hide>", 54 54 + "│ 55 55 + ◆ foo 56 56 + │ _ 57 57 + └ 58 58 + ", 59 59 + "<cursor.backward count=999><cursor.up count=4>", 60 60 + "<cursor.down count=2>", 61 61 + "<erase.line><cursor.left count=1>", 62 62 + "│ ▪_", 63 63 + "<cursor.down count=2>", 64 64 + "<cursor.backward count=999><cursor.up count=4>", 65 65 + "<cursor.down count=2>", 66 66 + "<erase.line><cursor.left count=1>", 67 67 + "│ ▪▪_", 68 68 + "<cursor.down count=2>", 69 69 + "<cursor.backward count=999><cursor.up count=4>", 70 70 + "<cursor.down count=1>", 71 71 + "<erase.down>", 72 72 + "◇ foo 73 73 + │ ▪▪", 74 74 + " 75 75 + ", 76 76 + "<cursor.show>", 77 77 + ] 78 78 + `;

+61

packages/jsx/test/components/__snapshots__/select.test.tsx.snap

Reviewed

··· 1 1 + // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 2 + 3 3 + exports[`Select > renders options 1`] = ` 4 4 + [ 5 5 + "<cursor.hide>", 6 6 + "│ 7 7 + ◆ foo 8 8 + │ ● opt0 9 9 + │ ○ opt1 10 10 + └ 11 11 + ", 12 12 + "<cursor.backward count=999><cursor.up count=5>", 13 13 + "<cursor.down count=1>", 14 14 + "<erase.down>", 15 15 + "◇ foo 16 16 + │ opt0", 17 17 + " 18 18 + ", 19 19 + "<cursor.show>", 20 20 + ] 21 21 + `; 22 22 + 23 23 + exports[`Select > renders options with hints 1`] = ` 24 24 + [ 25 25 + "<cursor.hide>", 26 26 + "│ 27 27 + ◆ foo 28 28 + │ ● Three o three (hint one) 29 29 + │ ○ Eight o eight 30 30 + └ 31 31 + ", 32 32 + "<cursor.backward count=999><cursor.up count=5>", 33 33 + "<cursor.down count=1>", 34 34 + "<erase.down>", 35 35 + "◇ foo 36 36 + │ Three o three", 37 37 + " 38 38 + ", 39 39 + "<cursor.show>", 40 40 + ] 41 41 + `; 42 42 + 43 43 + exports[`Select > renders options with labels 1`] = ` 44 44 + [ 45 45 + "<cursor.hide>", 46 46 + "│ 47 47 + ◆ foo 48 48 + │ ● Three o three 49 49 + │ ○ Eight o eight 50 50 + └ 51 51 + ", 52 52 + "<cursor.backward count=999><cursor.up count=5>", 53 53 + "<cursor.down count=1>", 54 54 + "<erase.down>", 55 55 + "◇ foo 56 56 + │ Three o three", 57 57 + " 58 58 + ", 59 59 + "<cursor.show>", 60 60 + ] 61 61 + `;

+77

packages/jsx/test/components/__snapshots__/text.test.tsx.snap

Reviewed

··· 1 1 + // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html 2 2 + 3 3 + exports[`Text > can set default value 1`] = ` 4 4 + [ 5 5 + "<cursor.hide>", 6 6 + "│ 7 7 + ◆ foo 8 8 + │ _ 9 9 + └ 10 10 + ", 11 11 + "<cursor.backward count=999><cursor.up count=4>", 12 12 + "<cursor.down count=1>", 13 13 + "<erase.down>", 14 14 + "◇ foo 15 15 + │ bar", 16 16 + " 17 17 + ", 18 18 + "<cursor.show>", 19 19 + ] 20 20 + `; 21 21 + 22 22 + exports[`Text > can set initial value 1`] = ` 23 23 + [ 24 24 + "<cursor.hide>", 25 25 + "│ 26 26 + ◆ foo 27 27 + │ bar█ 28 28 + └ 29 29 + ", 30 30 + "<cursor.backward count=999><cursor.up count=4>", 31 31 + "<cursor.down count=1>", 32 32 + "<erase.down>", 33 33 + "◇ foo 34 34 + │ bar", 35 35 + " 36 36 + ", 37 37 + "<cursor.show>", 38 38 + ] 39 39 + `; 40 40 + 41 41 + exports[`Text > can set placeholder 1`] = ` 42 42 + [ 43 43 + "<cursor.hide>", 44 44 + "│ 45 45 + ◆ foo 46 46 + │ bar 47 47 + └ 48 48 + ", 49 49 + "<cursor.backward count=999><cursor.up count=4>", 50 50 + "<cursor.down count=1>", 51 51 + "<erase.down>", 52 52 + "◇ foo 53 53 + │", 54 54 + " 55 55 + ", 56 56 + "<cursor.show>", 57 57 + ] 58 58 + `; 59 59 + 60 60 + exports[`Text > renders text input 1`] = ` 61 61 + [ 62 62 + "<cursor.hide>", 63 63 + "│ 64 64 + ◆ foo 65 65 + │ _ 66 66 + └ 67 67 + ", 68 68 + "<cursor.backward count=999><cursor.up count=4>", 69 69 + "<cursor.down count=1>", 70 70 + "<erase.down>", 71 71 + "◇ foo 72 72 + │", 73 73 + " 74 74 + ", 75 75 + "<cursor.show>", 76 76 + ] 77 77 + `;

+37

packages/jsx/test/components/confirm.test.tsx

Reviewed

··· 1 1 + import { MockReadable, MockWritable } from '@clack/test-utils'; 2 2 + import { beforeEach, describe, expect, test } from 'vitest'; 3 3 + import { Confirm } from '../../src/index.js'; 4 4 + 5 5 + describe('Confirm', () => { 6 6 + let input: MockReadable; 7 7 + let output: MockWritable; 8 8 + 9 9 + beforeEach(() => { 10 10 + input = new MockReadable(); 11 11 + output = new MockWritable(); 12 12 + }); 13 13 + 14 14 + test('can set message', async () => { 15 15 + const task = <Confirm message="foo?" input={input} output={output} />; 16 16 + input.emit('keypress', '', { name: 'return' }); 17 17 + const result = await task; 18 18 + expect(result).to.equal(true); 19 19 + expect(output.buffer).toMatchSnapshot(); 20 20 + }); 21 21 + 22 22 + test('can set active text', async () => { 23 23 + const task = <Confirm message="foo?" active="DO IT" input={input} output={output} />; 24 24 + input.emit('keypress', '', { name: 'return' }); 25 25 + const result = await task; 26 26 + expect(result).to.equal(true); 27 27 + expect(output.buffer).toMatchSnapshot(); 28 28 + }); 29 29 + 30 30 + test('can set inactive text', async () => { 31 31 + const task = <Confirm message="foo?" inactive="DONT DO IT" input={input} output={output} />; 32 32 + input.emit('keypress', '', { name: 'return' }); 33 33 + const result = await task; 34 34 + expect(result).to.equal(true); 35 35 + expect(output.buffer).toMatchSnapshot(); 36 36 + }); 37 37 + });

+53

packages/jsx/test/components/note.test.tsx

Reviewed

··· 1 1 + import { MockReadable, MockWritable } from '@clack/test-utils'; 2 2 + import { beforeEach, describe, expect, test } from 'vitest'; 3 3 + import { Confirm, Note } from '../../src/index.js'; 4 4 + 5 5 + describe('Note', () => { 6 6 + let input: MockReadable; 7 7 + let output: MockWritable; 8 8 + 9 9 + beforeEach(() => { 10 10 + input = new MockReadable(); 11 11 + output = new MockWritable(); 12 12 + }); 13 13 + 14 14 + test('can render string message', async () => { 15 15 + const task = <Note message="foo" output={output} />; 16 16 + await task; 17 17 + 18 18 + expect(output.buffer).toMatchSnapshot(); 19 19 + }); 20 20 + 21 21 + test('can render children as message', async () => { 22 22 + const task = <Note output={output}>a message</Note>; 23 23 + await task; 24 24 + 25 25 + expect(output.buffer).toMatchSnapshot(); 26 26 + }); 27 27 + 28 28 + test('can render complex results as message', async () => { 29 29 + const task = ( 30 30 + <Note output={output}> 31 31 + <Confirm message="say yes" input={input} output={output} /> 32 32 + </Note> 33 33 + ); 34 34 + input.emit('keypress', '', { name: 'return' }); 35 35 + await task; 36 36 + 37 37 + expect(output.buffer).toMatchSnapshot(); 38 38 + }); 39 39 + 40 40 + test('can render multiple children as message', async () => { 41 41 + const task = ( 42 42 + <Note output={output}> 43 43 + <Confirm message="say yes" input={input} output={output} /> 44 44 + <Confirm message="say yes again" input={input} output={output} /> 45 45 + </Note> 46 46 + ); 47 47 + input.emit('keypress', '', { name: 'return' }); 48 48 + input.emit('keypress', '', { name: 'return' }); 49 49 + await task; 50 50 + 51 51 + expect(output.buffer).toMatchSnapshot(); 52 52 + }); 53 53 + });

+50

packages/jsx/test/components/password.test.tsx

Reviewed

··· 1 1 + import { MockReadable, MockWritable } from '@clack/test-utils'; 2 2 + import { beforeEach, describe, expect, test } from 'vitest'; 3 3 + import { Password } from '../../src/index.js'; 4 4 + 5 5 + describe('Password', () => { 6 6 + let input: MockReadable; 7 7 + let output: MockWritable; 8 8 + 9 9 + beforeEach(() => { 10 10 + input = new MockReadable(); 11 11 + output = new MockWritable(); 12 12 + }); 13 13 + 14 14 + test('renders password input', async () => { 15 15 + const task = <Password message="foo" output={output} input={input} />; 16 16 + 17 17 + input.emit('keypress', '', { name: 'return' }); 18 18 + 19 19 + const result = await task; 20 20 + 21 21 + expect(result).to.equal(undefined); 22 22 + expect(output.buffer).toMatchSnapshot(); 23 23 + }); 24 24 + 25 25 + test('renders user input', async () => { 26 26 + const task = <Password message="foo" output={output} input={input} />; 27 27 + 28 28 + input.emit('keypress', 'a', { name: 'a' }); 29 29 + input.emit('keypress', 'b', { name: 'b' }); 30 30 + input.emit('keypress', '', { name: 'return' }); 31 31 + 32 32 + const result = await task; 33 33 + 34 34 + expect(result).to.equal('ab'); 35 35 + expect(output.buffer).toMatchSnapshot(); 36 36 + }); 37 37 + 38 38 + test('can set custom mask', async () => { 39 39 + const task = <Password message="foo" mask="!" output={output} input={input} />; 40 40 + 41 41 + input.emit('keypress', 'a', { name: 'a' }); 42 42 + input.emit('keypress', 'b', { name: 'b' }); 43 43 + input.emit('keypress', '', { name: 'return' }); 44 44 + 45 45 + const result = await task; 46 46 + 47 47 + expect(result).to.equal('ab'); 48 48 + expect(output.buffer).toMatchSnapshot(); 49 49 + }); 50 50 + });

+74

packages/jsx/test/components/select.test.tsx

Reviewed

··· 1 1 + import { MockReadable, MockWritable } from '@clack/test-utils'; 2 2 + import { beforeEach, describe, expect, test } from 'vitest'; 3 3 + import { Option, Select } from '../../src/index.js'; 4 4 + 5 5 + describe('Select', () => { 6 6 + let input: MockReadable; 7 7 + let output: MockWritable; 8 8 + 9 9 + beforeEach(() => { 10 10 + input = new MockReadable(); 11 11 + output = new MockWritable(); 12 12 + }); 13 13 + 14 14 + test('renders options', async () => { 15 15 + const task = ( 16 16 + <Select message="foo" input={input} output={output}> 17 17 + <Option value={'opt0'} /> 18 18 + <Option value={'opt1'} /> 19 19 + </Select> 20 20 + ); 21 21 + 22 22 + // wait a tick... sad times 23 23 + await new Promise((res) => setTimeout(res, 0)); 24 24 + 25 25 + input.emit('keypress', '', { name: 'return' }); 26 26 + 27 27 + const result = await task; 28 28 + 29 29 + expect(result).to.equal('opt0'); 30 30 + expect(output.buffer).toMatchSnapshot(); 31 31 + }); 32 32 + 33 33 + test('renders options with labels', async () => { 34 34 + const task = ( 35 35 + <Select message="foo" input={input} output={output}> 36 36 + <Option value={303}>Three o three</Option> 37 37 + <Option value={808}>Eight o eight</Option> 38 38 + </Select> 39 39 + ); 40 40 + 41 41 + // wait a tick... sad times 42 42 + await new Promise((res) => setTimeout(res, 0)); 43 43 + 44 44 + input.emit('keypress', '', { name: 'return' }); 45 45 + 46 46 + const result = await task; 47 47 + 48 48 + expect(result).to.equal(303); 49 49 + expect(output.buffer).toMatchSnapshot(); 50 50 + }); 51 51 + 52 52 + test('renders options with hints', async () => { 53 53 + const task = ( 54 54 + <Select message="foo" input={input} output={output}> 55 55 + <Option value={303} hint="hint one"> 56 56 + Three o three 57 57 + </Option> 58 58 + <Option value={808} hint="hint two"> 59 59 + Eight o eight 60 60 + </Option> 61 61 + </Select> 62 62 + ); 63 63 + 64 64 + // wait a tick... sad times 65 65 + await new Promise((res) => setTimeout(res, 0)); 66 66 + 67 67 + input.emit('keypress', '', { name: 'return' }); 68 68 + 69 69 + const result = await task; 70 70 + 71 71 + expect(result).to.equal(303); 72 72 + expect(output.buffer).toMatchSnapshot(); 73 73 + }); 74 74 + });

+57

packages/jsx/test/components/text.test.tsx

Reviewed

··· 1 1 + import { MockReadable, MockWritable } from '@clack/test-utils'; 2 2 + import { beforeEach, describe, expect, test } from 'vitest'; 3 3 + import { Text } from '../../src/index.js'; 4 4 + 5 5 + describe('Text', () => { 6 6 + let input: MockReadable; 7 7 + let output: MockWritable; 8 8 + 9 9 + beforeEach(() => { 10 10 + input = new MockReadable(); 11 11 + output = new MockWritable(); 12 12 + }); 13 13 + 14 14 + test('renders text input', async () => { 15 15 + const task = <Text message="foo" output={output} input={input} />; 16 16 + 17 17 + input.emit('keypress', '', { name: 'return' }); 18 18 + 19 19 + const result = await task; 20 20 + 21 21 + expect(result).to.equal(''); 22 22 + expect(output.buffer).toMatchSnapshot(); 23 23 + }); 24 24 + 25 25 + test('can set placeholder', async () => { 26 26 + const task = <Text message="foo" placeholder="bar" output={output} input={input} />; 27 27 + 28 28 + input.emit('keypress', '', { name: 'return' }); 29 29 + 30 30 + const result = await task; 31 31 + 32 32 + expect(result).to.equal(''); 33 33 + expect(output.buffer).toMatchSnapshot(); 34 34 + }); 35 35 + 36 36 + test('can set default value', async () => { 37 37 + const task = <Text message="foo" defaultValue="bar" output={output} input={input} />; 38 38 + 39 39 + input.emit('keypress', '', { name: 'return' }); 40 40 + 41 41 + const result = await task; 42 42 + 43 43 + expect(result).to.equal('bar'); 44 44 + expect(output.buffer).toMatchSnapshot(); 45 45 + }); 46 46 + 47 47 + test('can set initial value', async () => { 48 48 + const task = <Text message="foo" initialValue="bar" output={output} input={input} />; 49 49 + 50 50 + input.emit('keypress', '', { name: 'return' }); 51 51 + 52 52 + const result = await task; 53 53 + 54 54 + expect(result).to.equal('bar'); 55 55 + expect(output.buffer).toMatchSnapshot(); 56 56 + }); 57 57 + });

+1 -172

packages/jsx/test/jsx.test.tsx

Reviewed

··· 1 1 import { MockReadable, MockWritable } from '@clack/test-utils'; 2 2 import { beforeEach, describe, expect, test } from 'vitest'; 3 3 - import { Confirm, Note, Option, Password, Select, Text, jsx } from '../src/index.js'; 3 3 + import { Confirm, jsx } from '../src/index.js'; 4 4 5 5 describe('jsx', () => { 6 6 let input: MockReadable; ··· 33 33 const task = jsx('unknown-nonsense' as never, {} as never); 34 34 const result = await task; 35 35 expect(result).to.equal(null); 36 36 - }); 37 37 - 38 38 - describe('Confirm', () => { 39 39 - test('can set message', async () => { 40 40 - const task = <Confirm message="foo?" input={input} output={output} />; 41 41 - input.emit('keypress', '', { name: 'return' }); 42 42 - const result = await task; 43 43 - expect(result).to.equal(true); 44 44 - expect(output.buffer).toMatchSnapshot(); 45 45 - }); 46 46 - 47 47 - test('can set active text', async () => { 48 48 - const task = <Confirm message="foo?" active="DO IT" input={input} output={output} />; 49 49 - input.emit('keypress', '', { name: 'return' }); 50 50 - const result = await task; 51 51 - expect(result).to.equal(true); 52 52 - expect(output.buffer).toMatchSnapshot(); 53 53 - }); 54 54 - 55 55 - test('can set inactive text', async () => { 56 56 - const task = <Confirm message="foo?" inactive="DONT DO IT" input={input} output={output} />; 57 57 - input.emit('keypress', '', { name: 'return' }); 58 58 - const result = await task; 59 59 - expect(result).to.equal(true); 60 60 - expect(output.buffer).toMatchSnapshot(); 61 61 - }); 62 62 - }); 63 63 - 64 64 - describe('Note', () => { 65 65 - test('can render string message', async () => { 66 66 - const task = <Note message="foo" output={output} />; 67 67 - await task; 68 68 - 69 69 - expect(output.buffer).toMatchSnapshot(); 70 70 - }); 71 71 - 72 72 - test('can render children as message', async () => { 73 73 - const task = <Note output={output}>a message</Note>; 74 74 - await task; 75 75 - 76 76 - expect(output.buffer).toMatchSnapshot(); 77 77 - }); 78 78 - 79 79 - test('can render complex results as message', async () => { 80 80 - const task = ( 81 81 - <Note output={output}> 82 82 - <Confirm message="say yes" input={input} output={output} /> 83 83 - </Note> 84 84 - ); 85 85 - input.emit('keypress', '', { name: 'return' }); 86 86 - await task; 87 87 - 88 88 - expect(output.buffer).toMatchSnapshot(); 89 89 - }); 90 90 - 91 91 - test('can render multiple children as message', async () => { 92 92 - const task = ( 93 93 - <Note output={output}> 94 94 - <Confirm message="say yes" input={input} output={output} /> 95 95 - <Confirm message="say yes again" input={input} output={output} /> 96 96 - </Note> 97 97 - ); 98 98 - input.emit('keypress', '', { name: 'return' }); 99 99 - input.emit('keypress', '', { name: 'return' }); 100 100 - await task; 101 101 - 102 102 - expect(output.buffer).toMatchSnapshot(); 103 103 - }); 104 104 - }); 105 105 - 106 106 - describe('Text', () => { 107 107 - test('renders text input', async () => { 108 108 - const task = <Text message="foo" output={output} input={input} />; 109 109 - 110 110 - input.emit('keypress', '', { name: 'return' }); 111 111 - 112 112 - const result = await task; 113 113 - 114 114 - expect(result).to.equal(''); 115 115 - expect(output.buffer).toMatchSnapshot(); 116 116 - }); 117 117 - 118 118 - test('can set placeholder', async () => { 119 119 - const task = <Text message="foo" placeholder="bar" output={output} input={input} />; 120 120 - 121 121 - input.emit('keypress', '', { name: 'return' }); 122 122 - 123 123 - const result = await task; 124 124 - 125 125 - expect(result).to.equal(''); 126 126 - expect(output.buffer).toMatchSnapshot(); 127 127 - }); 128 128 - 129 129 - test('can set default value', async () => { 130 130 - const task = <Text message="foo" defaultValue="bar" output={output} input={input} />; 131 131 - 132 132 - input.emit('keypress', '', { name: 'return' }); 133 133 - 134 134 - const result = await task; 135 135 - 136 136 - expect(result).to.equal('bar'); 137 137 - expect(output.buffer).toMatchSnapshot(); 138 138 - }); 139 139 - 140 140 - test('can set initial value', async () => { 141 141 - const task = <Text message="foo" initialValue="bar" output={output} input={input} />; 142 142 - 143 143 - input.emit('keypress', '', { name: 'return' }); 144 144 - 145 145 - const result = await task; 146 146 - 147 147 - expect(result).to.equal('bar'); 148 148 - expect(output.buffer).toMatchSnapshot(); 149 149 - }); 150 150 - }); 151 151 - 152 152 - describe('Password', () => { 153 153 - test('renders password input', async () => { 154 154 - const task = <Password message="foo" output={output} input={input} />; 155 155 - 156 156 - input.emit('keypress', '', { name: 'return' }); 157 157 - 158 158 - const result = await task; 159 159 - 160 160 - expect(result).to.equal(undefined); 161 161 - expect(output.buffer).toMatchSnapshot(); 162 162 - }); 163 163 - 164 164 - test('renders user input', async () => { 165 165 - const task = <Password message="foo" output={output} input={input} />; 166 166 - 167 167 - input.emit('keypress', 'a', { name: 'a' }); 168 168 - input.emit('keypress', 'b', { name: 'b' }); 169 169 - input.emit('keypress', '', { name: 'return' }); 170 170 - 171 171 - const result = await task; 172 172 - 173 173 - expect(result).to.equal('ab'); 174 174 - expect(output.buffer).toMatchSnapshot(); 175 175 - }); 176 176 - 177 177 - test('can set custom mask', async () => { 178 178 - const task = <Password message="foo" mask="!" output={output} input={input} />; 179 179 - 180 180 - input.emit('keypress', 'a', { name: 'a' }); 181 181 - input.emit('keypress', 'b', { name: 'b' }); 182 182 - input.emit('keypress', '', { name: 'return' }); 183 183 - 184 184 - const result = await task; 185 185 - 186 186 - expect(result).to.equal('ab'); 187 187 - expect(output.buffer).toMatchSnapshot(); 188 188 - }); 189 189 - }); 190 190 - 191 191 - describe('Select', () => { 192 192 - test('renders options', async () => { 193 193 - const task = ( 194 194 - <Select message="pick one" input={input} output={output}> 195 195 - <Option value={303}>Option One</Option> 196 196 - <Option value={808}>Option Two</Option> 197 197 - </Select> 198 198 - ); 199 199 - 200 200 - input.emit('keypress', '', { name: 'return' }); 201 201 - 202 202 - const result = await task; 203 203 - 204 204 - expect(result).to.equal(303); 205 205 - expect(output.buffer).toMatchSnapshot(); 206 206 - }); 207 36 }); 208 37 });