@shopify/cli-kit 0.0.0-nightly-20230110194301

package/dist/private/node/ui/components/Tasks.test.js

@@ -0,0 +1,50 @@
+import { Tasks } from './Tasks.js';
+import { getLastFrameAfterUnmount } from '../../../../testing/ui.js';
+import React from 'react';
+import { describe, expect, test } from 'vitest';
+import { render } from 'ink-testing-library';
+describe('Tasks', () => {
+    test('shows a success state at the end', async () => {
+        // Given
+        const firstTask = {
+            title: 'task 1',
+            task: async () => { },
+        };
+        const secondTask = {
+            title: 'task 2',
+            task: async () => { },
+        };
+        // When
+        const renderInstance = render(React.createElement(Tasks, { tasks: [firstTask, secondTask] }));
+        // wait for next tick
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Then
+        expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot(`
+      "████████████████████████████████████████████████████████████████████████████████
+      Complete!"
+    `);
+    });
+    test('shows a failure state at the end', async () => {
+        // Given
+        const firstTask = {
+            title: 'task 1',
+            task: async () => {
+                throw new Error('something went wrong');
+            },
+        };
+        const secondTask = {
+            title: 'task 2',
+            task: async () => { },
+        };
+        // When
+        const renderInstance = render(React.createElement(Tasks, { tasks: [firstTask, secondTask] }));
+        // wait for next tick
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        // Then
+        expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot(`
+      "████████████████████████████████████████████████████████████████████████████████
+      task 1"
+    `);
+    });
+});
+//# sourceMappingURL=Tasks.test.js.map

package/dist/private/node/ui/components/Tasks.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tasks.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/Tasks.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,KAAK,EAAC,MAAM,YAAY,CAAA;AAChC,OAAO,EAAC,wBAAwB,EAAC,MAAM,2BAA2B,CAAA;AAClE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAC,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;IACrB,IAAI,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAClD,QAAQ;QACR,MAAM,SAAS,GAAG;YAChB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,KAAK,IAAI,EAAE,GAAE,CAAC;SACrB,CAAA;QAED,MAAM,UAAU,GAAG;YACjB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,KAAK,IAAI,EAAE,GAAE,CAAC;SACrB,CAAA;QACD,OAAO;QAEP,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,KAAK,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,GAAI,CAAC,CAAA;QAExE,qBAAqB;QACrB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QAEtD,OAAO;QACP,MAAM,CAAC,wBAAwB,CAAC,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;KAGtE,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,kCAAkC,EAAE,KAAK,IAAI,EAAE;QAClD,QAAQ;QACR,MAAM,SAAS,GAAG;YAChB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,KAAK,IAAI,EAAE;gBACf,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAA;YACzC,CAAC;SACF,CAAA;QAED,MAAM,UAAU,GAAG;YACjB,KAAK,EAAE,QAAQ;YACf,IAAI,EAAE,KAAK,IAAI,EAAE,GAAE,CAAC;SACrB,CAAA;QAED,OAAO;QACP,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,KAAK,IAAC,KAAK,EAAE,CAAC,SAAS,EAAE,UAAU,CAAC,GAAI,CAAC,CAAA;QAExE,qBAAqB;QACrB,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAA;QAEtD,OAAO;QACP,MAAM,CAAC,wBAAwB,CAAC,cAAc,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;KAGtE,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {Tasks} from './Tasks.js'\nimport {getLastFrameAfterUnmount} from '../../../../testing/ui.js'\nimport React from 'react'\nimport {describe, expect, test} from 'vitest'\nimport {render} from 'ink-testing-library'\n\ndescribe('Tasks', () => {\n  test('shows a success state at the end', async () => {\n    // Given\n    const firstTask = {\n      title: 'task 1',\n      task: async () => {},\n    }\n\n    const secondTask = {\n      title: 'task 2',\n      task: async () => {},\n    }\n    // When\n\n    const renderInstance = render(<Tasks tasks={[firstTask, secondTask]} />)\n\n    // wait for next tick\n    await new Promise((resolve) => setTimeout(resolve, 0))\n\n    // Then\n    expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot(`\n      \"\u001b[32m████████████████████████████████████████████████████████████████████████████████\u001b[39m\n      Complete!\"\n    `)\n  })\n\n  test('shows a failure state at the end', async () => {\n    // Given\n    const firstTask = {\n      title: 'task 1',\n      task: async () => {\n        throw new Error('something went wrong')\n      },\n    }\n\n    const secondTask = {\n      title: 'task 2',\n      task: async () => {},\n    }\n\n    // When\n    const renderInstance = render(<Tasks tasks={[firstTask, secondTask]} />)\n\n    // wait for next tick\n    await new Promise((resolve) => setTimeout(resolve, 0))\n\n    // Then\n    expect(getLastFrameAfterUnmount(renderInstance)).toMatchInlineSnapshot(`\n      \"\u001b[31m████████████████████████████████████████████████████████████████████████████████\u001b[39m\n      task 1\"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/TextAnimation.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface Props {
+    text: string;
+}
+/**
+ * `TextAnimation` applies a rainbow animation to text.
+ */
+declare const TextAnimation: React.FC<Props>;
+export { TextAnimation };

package/dist/private/node/ui/components/TextAnimation.js

@@ -0,0 +1,35 @@
+/* eslint-disable id-length */
+import { Text } from 'ink';
+import React, { useEffect, useRef, useState } from 'react';
+import gradient from 'gradient-string';
+function rainbow(text, frame) {
+    const hue = 5 * frame;
+    const leftColor = { h: hue % 360, s: 0.8, v: 1 };
+    const rightColor = { h: (hue + 1) % 360, s: 0.8, v: 1 };
+    return gradient(leftColor, rightColor)(text, { interpolation: 'hsv', hsvSpin: 'long' });
+}
+/**
+ * `TextAnimation` applies a rainbow animation to text.
+ */
+const TextAnimation = ({ text }) => {
+    const frame = useRef(0);
+    const [renderedFrame, setRenderedFrame] = useState(text);
+    const timeout = useRef();
+    const renderAnimation = () => {
+        const newFrame = frame.current + 1;
+        frame.current = newFrame;
+        setRenderedFrame(rainbow(text, frame.current));
+        timeout.current = setTimeout(() => {
+            renderAnimation();
+        }, 35);
+    };
+    useEffect(() => {
+        renderAnimation();
+        return () => {
+            clearTimeout(timeout.current);
+        };
+    }, []);
+    return React.createElement(Text, null, renderedFrame);
+};
+export { TextAnimation };
+//# sourceMappingURL=TextAnimation.js.map

package/dist/private/node/ui/components/TextAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAnimation.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/TextAnimation.tsx"],"names":[],"mappings":"AAAA,8BAA8B;AAC9B,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAA;AACxB,OAAO,KAAK,EAAE,EAAC,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAC,MAAM,OAAO,CAAA;AACxD,OAAO,QAAQ,MAAM,iBAAiB,CAAA;AAMtC,SAAS,OAAO,CAAC,IAAY,EAAE,KAAa;IAC1C,MAAM,GAAG,GAAG,CAAC,GAAG,KAAK,CAAA;IACrB,MAAM,SAAS,GAAG,EAAC,CAAC,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAC,CAAA;IAC9C,MAAM,UAAU,GAAG,EAAC,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAC,CAAA;IACrD,OAAO,QAAQ,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,IAAI,EAAE,EAAC,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAC,CAAC,CAAA;AACvF,CAAC;AAED;;GAEG;AACH,MAAM,aAAa,GAAoB,CAAC,EAAC,IAAI,EAAC,EAAe,EAAE;IAC7D,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;IACvB,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAA;IACxD,MAAM,OAAO,GAAG,MAAM,EAAkB,CAAA;IAExC,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,CAAC,CAAA;QAClC,KAAK,CAAC,OAAO,GAAG,QAAQ,CAAA;QAExB,gBAAgB,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAA;QAE9C,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YAChC,eAAe,EAAE,CAAA;QACnB,CAAC,EAAE,EAAE,CAAC,CAAA;IACR,CAAC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAA;QAEjB,OAAO,GAAG,EAAE;YACV,YAAY,CAAC,OAAO,CAAC,OAA4B,CAAC,CAAA;QACpD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,oBAAC,IAAI,QAAE,aAAa,CAAQ,CAAA;AACrC,CAAC,CAAA;AAED,OAAO,EAAC,aAAa,EAAC,CAAA","sourcesContent":["/* eslint-disable id-length */\nimport {Text} from 'ink'\nimport React, {useEffect, useRef, useState} from 'react'\nimport gradient from 'gradient-string'\n\ninterface Props {\n  text: string\n}\n\nfunction rainbow(text: string, frame: number) {\n  const hue = 5 * frame\n  const leftColor = {h: hue % 360, s: 0.8, v: 1}\n  const rightColor = {h: (hue + 1) % 360, s: 0.8, v: 1}\n  return gradient(leftColor, rightColor)(text, {interpolation: 'hsv', hsvSpin: 'long'})\n}\n\n/**\n * `TextAnimation` applies a rainbow animation to text.\n */\nconst TextAnimation: React.FC<Props> = ({text}): JSX.Element => {\n  const frame = useRef(0)\n  const [renderedFrame, setRenderedFrame] = useState(text)\n  const timeout = useRef<NodeJS.Timeout>()\n\n  const renderAnimation = () => {\n    const newFrame = frame.current + 1\n    frame.current = newFrame\n\n    setRenderedFrame(rainbow(text, frame.current))\n\n    timeout.current = setTimeout(() => {\n      renderAnimation()\n    }, 35)\n  }\n\n  useEffect(() => {\n    renderAnimation()\n\n    return () => {\n      clearTimeout(timeout.current as unknown as number)\n    }\n  }, [])\n\n  return <Text>{renderedFrame}</Text>\n}\n\nexport {TextAnimation}\n"]}

package/dist/private/node/ui/components/TextInput.d.ts

@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+interface Props {
+    placeholder?: string;
+    value: string;
+    onChange: (value: string) => void;
+    color?: string;
+}
+declare const TextInput: FC<Props>;
+export { TextInput };

package/dist/private/node/ui/components/TextInput.js

@@ -0,0 +1,74 @@
+/* eslint-disable no-nested-ternary */
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { Text, useInput } from 'ink';
+import chalk from 'chalk';
+const TextInput = ({ value, placeholder = '', onChange, color = 'cyan' }) => {
+    const [cursorOffset, setCursorOffset] = useState((value || '').length);
+    // if the updated value is shorter than the last one we need to reset the cursor
+    useEffect(() => {
+        setCursorOffset((previousOffset) => {
+            const newValue = value || '';
+            if (previousOffset > newValue.length - 1) {
+                return newValue.length;
+            }
+            return previousOffset;
+        });
+    }, [value]);
+    let renderedValue = value.length > 0 ? '' : chalk.inverse(' ');
+    const renderedPlaceholder = placeholder.length > 0 ? chalk.inverse(placeholder[0]) + chalk.dim(placeholder.slice(1)) : undefined;
+    // render cursor
+    renderedValue = value
+        .split('')
+        .map((char, index) => {
+        if (index === cursorOffset) {
+            return chalk.inverse(char);
+        }
+        else {
+            return char;
+        }
+    })
+        .join('');
+    if (cursorOffset === value.length) {
+        renderedValue += chalk.inverse(' ');
+    }
+    useInput((input, key) => {
+        if (key.upArrow ||
+            key.downArrow ||
+            (key.ctrl && input === 'c') ||
+            key.tab ||
+            (key.shift && key.tab) ||
+            key.return) {
+            return;
+        }
+        let nextCursorOffset = cursorOffset;
+        let nextValue = value;
+        if (key.leftArrow) {
+            if (cursorOffset > 0) {
+                nextCursorOffset--;
+            }
+        }
+        else if (key.rightArrow) {
+            if (cursorOffset < value.length) {
+                nextCursorOffset++;
+            }
+        }
+        else if (key.backspace || key.delete) {
+            if (cursorOffset > 0) {
+                nextValue = value.slice(0, cursorOffset - 1) + value.slice(cursorOffset, value.length);
+                nextCursorOffset--;
+            }
+        }
+        else {
+            nextValue = value.slice(0, cursorOffset) + input + value.slice(cursorOffset, value.length);
+            nextCursorOffset += input.length;
+        }
+        setCursorOffset(nextCursorOffset);
+        if (nextValue !== value) {
+            onChange(nextValue);
+        }
+    });
+    return (React.createElement(Text, { color: color }, placeholder ? (value.length > 0 ? renderedValue : renderedPlaceholder) : renderedValue));
+};
+export { TextInput };
+//# sourceMappingURL=TextInput.js.map

package/dist/private/node/ui/components/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable no-nested-ternary */\nimport * as React from 'react'\nimport {useEffect, useState} from 'react'\nimport {Text, useInput} from 'ink'\nimport chalk from 'chalk'\nimport type {FC} from 'react'\n\ninterface Props {\n  placeholder?: string\n  value: string\n  onChange: (value: string) => void\n  color?: string\n}\n\nconst TextInput: FC<Props> = ({value, placeholder = '', onChange, color = 'cyan'}) => {\n  const [cursorOffset, setCursorOffset] = useState((value || '').length)\n\n  // if the updated value is shorter than the last one we need to reset the cursor\n  useEffect(() => {\n    setCursorOffset((previousOffset) => {\n      const newValue = value || ''\n\n      if (previousOffset > newValue.length - 1) {\n        return newValue.length\n      }\n\n      return previousOffset\n    })\n  }, [value])\n\n  let renderedValue = value.length > 0 ? '' : chalk.inverse(' ')\n  const renderedPlaceholder =\n    placeholder.length > 0 ? chalk.inverse(placeholder[0]) + chalk.dim(placeholder.slice(1)) : undefined\n\n  // render cursor\n  renderedValue = value\n    .split('')\n    .map((char, index) => {\n      if (index === cursorOffset) {\n        return chalk.inverse(char)\n      } else {\n        return char\n      }\n    })\n    .join('')\n\n  if (cursorOffset === value.length) {\n    renderedValue += chalk.inverse(' ')\n  }\n\n  useInput((input, key) => {\n    if (\n      key.upArrow ||\n      key.downArrow ||\n      (key.ctrl && input === 'c') ||\n      key.tab ||\n      (key.shift && key.tab) ||\n      key.return\n    ) {\n      return\n    }\n\n    let nextCursorOffset = cursorOffset\n    let nextValue = value\n\n    if (key.leftArrow) {\n      if (cursorOffset > 0) {\n        nextCursorOffset--\n      }\n    } else if (key.rightArrow) {\n      if (cursorOffset < value.length) {\n        nextCursorOffset++\n      }\n    } else if (key.backspace || key.delete) {\n      if (cursorOffset > 0) {\n        nextValue = value.slice(0, cursorOffset - 1) + value.slice(cursorOffset, value.length)\n        nextCursorOffset--\n      }\n    } else {\n      nextValue = value.slice(0, cursorOffset) + input + value.slice(cursorOffset, value.length)\n      nextCursorOffset += input.length\n    }\n\n    setCursorOffset(nextCursorOffset)\n\n    if (nextValue !== value) {\n      onChange(nextValue)\n    }\n  })\n\n  return (\n    <Text color={color}>{placeholder ? (value.length > 0 ? renderedValue : renderedPlaceholder) : renderedValue}</Text>\n  )\n}\n\nexport {TextInput}\n"]}

package/dist/private/node/ui/components/TextInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/private/node/ui/components/TextInput.test.js

@@ -0,0 +1,139 @@
+import { TextInput } from './TextInput.js';
+import { sendInput, waitForChange, waitForInputsToBeReady } from '../../../../testing/ui.js';
+import React, { useState } from 'react';
+import { describe, test, expect, vi } from 'vitest';
+import { render } from 'ink-testing-library';
+const ARROW_LEFT = '\u001B[D';
+const ARROW_RIGHT = '\u001B[C';
+const DELETE = '\u007F';
+describe('TextInput', () => {
+    test('default state', () => {
+        const { lastFrame } = render(React.createElement(TextInput, { value: "", onChange: () => { } }));
+        // inverted space escape sequence
+        expect(lastFrame()).toMatchInlineSnapshot('" "');
+    });
+    test('displays value with cursor', () => {
+        const { lastFrame } = render(React.createElement(TextInput, { value: "Hello", onChange: () => { } }));
+        // inverted space escape sequence after Hello
+        expect(lastFrame()).toMatchInlineSnapshot('"Hello "');
+    });
+    test('displays placeholder', () => {
+        const { lastFrame } = render(React.createElement(TextInput, { value: "", placeholder: "Placeholder", onChange: () => { } }));
+        // inverted escape sequence around "P", laceholder after that
+        expect(lastFrame()).toMatchInlineSnapshot('"Placeholder"');
+    });
+    test('moves the cursor with arrows', async () => {
+        const renderInstance = render(React.createElement(TextInput, { value: "Hello", onChange: () => { } }));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello "');
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, ARROW_LEFT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_LEFT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_LEFT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_LEFT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_LEFT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        // cursor can't go before the first character
+        renderInstance.stdin.write(ARROW_LEFT);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_RIGHT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_RIGHT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_RIGHT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_RIGHT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello"');
+        await sendInput(renderInstance, ARROW_RIGHT);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello "');
+        // cursor can't go after the last character
+        renderInstance.stdin.write(ARROW_RIGHT);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello "');
+    });
+    test('moves the cursor when deleting', async () => {
+        const StatefulTextInput = () => {
+            const [value, setValue] = useState('Hello');
+            return React.createElement(TextInput, { value: value, onChange: setValue });
+        };
+        const renderInstance = render(React.createElement(StatefulTextInput, null));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello "');
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, DELETE);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hell "');
+        await sendInput(renderInstance, DELETE);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hel "');
+        await sendInput(renderInstance, DELETE);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"He "');
+        await sendInput(renderInstance, DELETE);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"H "');
+        await sendInput(renderInstance, DELETE);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('" "');
+        // cannot delete after the value has been cleared
+        renderInstance.stdin.write(DELETE);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('" "');
+    });
+    test('accepts input', async () => {
+        const StatefulTextInput = () => {
+            const [value, setValue] = useState('');
+            return React.createElement(TextInput, { value: value, onChange: setValue });
+        };
+        const renderInstance = render(React.createElement(StatefulTextInput, null));
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, 'H');
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"H "');
+        await sendInput(renderInstance, 'ello');
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Hello "');
+    });
+    test('onChange', async () => {
+        const onChange = vi.fn();
+        const renderInstance = render(React.createElement(TextInput, { value: "", onChange: onChange }));
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, 'X');
+        expect(onChange).toHaveBeenCalledWith('X');
+    });
+    test('deletes at the beginning and in the middle of text', async () => {
+        const StatefulTextInput = () => {
+            const [value, setValue] = useState('');
+            return React.createElement(TextInput, { value: value, onChange: setValue });
+        };
+        const renderInstance = render(React.createElement(StatefulTextInput, null));
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, 'T');
+        await sendInput(renderInstance, 'e');
+        await sendInput(renderInstance, 's');
+        await sendInput(renderInstance, 't');
+        await sendInput(renderInstance, ARROW_LEFT);
+        await sendInput(renderInstance, DELETE);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Tet"');
+        await sendInput(renderInstance, ARROW_LEFT);
+        await sendInput(renderInstance, ARROW_LEFT);
+        renderInstance.stdin.write(DELETE);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"Tet"');
+    });
+    test('adjusts cursor when text is shorter than last value', async () => {
+        let resetValue = () => { };
+        const StatefulTextInput = () => {
+            const [value, setValue] = useState('');
+            resetValue = () => setValue('');
+            return React.createElement(TextInput, { value: value, onChange: setValue });
+        };
+        const renderInstance = render(React.createElement(StatefulTextInput, null));
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, 'A');
+        await sendInput(renderInstance, 'B');
+        await waitForChange(resetValue, renderInstance.lastFrame);
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('" "');
+        await sendInput(renderInstance, 'A');
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"A "');
+        await sendInput(renderInstance, 'B');
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot('"AB "');
+    });
+});
+//# sourceMappingURL=TextInput.test.js.map

package/dist/private/node/ui/components/TextInput.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/TextInput.test.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAA;AACxC,OAAO,EAAC,SAAS,EAAE,aAAa,EAAE,sBAAsB,EAAC,MAAM,2BAA2B,CAAA;AAC1F,OAAO,KAAK,EAAE,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAA;AACrC,OAAO,EAAC,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAC,MAAM,QAAQ,CAAA;AACjD,OAAO,EAAC,MAAM,EAAC,MAAM,qBAAqB,CAAA;AAE1C,MAAM,UAAU,GAAG,UAAU,CAAA;AAC7B,MAAM,WAAW,GAAG,UAAU,CAAA;AAC9B,MAAM,MAAM,GAAG,QAAQ,CAAA;AAEvB,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE;QACzB,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,SAAS,IAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,CAAC,CAAA;QAEtE,iCAAiC;QACjC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,CAAA;IACrE,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,CAAC,CAAA;QAE3E,6CAA6C;QAC7C,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;IAC1E,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,sBAAsB,EAAE,GAAG,EAAE;QAChC,MAAM,EAAC,SAAS,EAAC,GAAG,MAAM,CAAC,oBAAC,SAAS,IAAC,KAAK,EAAC,EAAE,EAAC,WAAW,EAAC,aAAa,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,CAAC,CAAA;QAEhG,6DAA6D;QAC7D,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,2CAA2C,CAAC,CAAA;IACxF,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;QAC9C,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,SAAS,IAAC,KAAK,EAAC,OAAO,EAAC,QAAQ,EAAE,GAAG,EAAE,GAAE,CAAC,GAAI,CAAC,CAAA;QAE9E,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;QAEvF,MAAM,sBAAsB,EAAE,CAAA;QAC9B,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,6CAA6C;QAC7C,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAA;QACtC,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QAEtF,MAAM,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;QAC5C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;QAC5C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;QAC5C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;QAC5C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,WAAW,CAAC,CAAA;QAC5C,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;QACvF,2CAA2C;QAC3C,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACvC,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;IACzF,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;QAChD,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAA;YAE3C,OAAO,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;QACxD,CAAC,CAAA;QAED,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,iBAAiB,OAAG,CAAC,CAAA;QAEpD,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;QAEvF,MAAM,sBAAsB,EAAE,CAAA;QAC9B,MAAM,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QACvC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,4BAA4B,CAAC,CAAA;QACtF,MAAM,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QACvC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,2BAA2B,CAAC,CAAA;QACrF,MAAM,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QACvC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,0BAA0B,CAAC,CAAA;QACpF,MAAM,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QACvC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,yBAAyB,CAAC,CAAA;QACnF,MAAM,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QACvC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,CAAA;QAClF,iDAAiD;QACjD,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAClC,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,CAAA;IACpF,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;QAC/B,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;YAEtC,OAAO,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;QACxD,CAAC,CAAA;QAED,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,iBAAiB,OAAG,CAAC,CAAA;QAEpD,MAAM,sBAAsB,EAAE,CAAA;QAC9B,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,yBAAyB,CAAC,CAAA;QACnF,MAAM,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QACvC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,6BAA6B,CAAC,CAAA;IACzF,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,EAAE;QAC1B,MAAM,QAAQ,GAAG,EAAE,CAAC,EAAE,EAAE,CAAA;QAExB,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,SAAS,IAAC,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,QAAQ,GAAI,CAAC,CAAA;QAEzE,MAAM,sBAAsB,EAAE,CAAA;QAC9B,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QAEpC,MAAM,CAAC,QAAQ,CAAC,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,oDAAoD,EAAE,KAAK,IAAI,EAAE;QACpE,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;YAEtC,OAAO,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;QACxD,CAAC,CAAA;QAED,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,iBAAiB,OAAG,CAAC,CAAA;QAEpD,MAAM,sBAAsB,EAAE,CAAA;QAC9B,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,MAAM,SAAS,CAAC,cAAc,EAAE,MAAM,CAAC,CAAA;QACvC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,0BAA0B,CAAC,CAAA;QACpF,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,MAAM,SAAS,CAAC,cAAc,EAAE,UAAU,CAAC,CAAA;QAC3C,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAClC,MAAM,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,CAAA;QACxD,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,0BAA0B,CAAC,CAAA;IACtF,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,qDAAqD,EAAE,KAAK,IAAI,EAAE;QACrE,IAAI,UAAU,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;QAEzB,MAAM,iBAAiB,GAAG,GAAG,EAAE;YAC7B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAA;YACtC,UAAU,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;YAE/B,OAAO,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAA;QACxD,CAAC,CAAA;QAED,MAAM,cAAc,GAAG,MAAM,CAAC,oBAAC,iBAAiB,OAAG,CAAC,CAAA;QAEpD,MAAM,sBAAsB,EAAE,CAAA;QAC9B,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QAEpC,MAAM,aAAa,CAAC,UAAU,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;QAEzD,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,wBAAwB,CAAC,CAAA;QAClF,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,yBAAyB,CAAC,CAAA;QACnF,MAAM,SAAS,CAAC,cAAc,EAAE,GAAG,CAAC,CAAA;QACpC,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,CAAC,CAAC,qBAAqB,CAAC,0BAA0B,CAAC,CAAA;IACtF,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import {TextInput} from './TextInput.js'\nimport {sendInput, waitForChange, waitForInputsToBeReady} from '../../../../testing/ui.js'\nimport React, {useState} from 'react'\nimport {describe, test, expect, vi} from 'vitest'\nimport {render} from 'ink-testing-library'\n\nconst ARROW_LEFT = '\\u001B[D'\nconst ARROW_RIGHT = '\\u001B[C'\nconst DELETE = '\\u007F'\n\ndescribe('TextInput', () => {\n  test('default state', () => {\n    const {lastFrame} = render(<TextInput value=\"\" onChange={() => {}} />)\n\n    // inverted space escape sequence\n    expect(lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7m \u001b[27m\u001b[39m\"')\n  })\n\n  test('displays value with cursor', () => {\n    const {lastFrame} = render(<TextInput value=\"Hello\" onChange={() => {}} />)\n\n    // inverted space escape sequence after Hello\n    expect(lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHello\u001b[7m \u001b[27m\u001b[39m\"')\n  })\n\n  test('displays placeholder', () => {\n    const {lastFrame} = render(<TextInput value=\"\" placeholder=\"Placeholder\" onChange={() => {}} />)\n\n    // inverted escape sequence around \"P\", laceholder after that\n    expect(lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7mP\u001b[27m\u001b[2mlaceholder\u001b[22m\u001b[39m\"')\n  })\n\n  test('moves the cursor with arrows', async () => {\n    const renderInstance = render(<TextInput value=\"Hello\" onChange={() => {}} />)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHello\u001b[7m \u001b[27m\u001b[39m\"')\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ARROW_LEFT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHell\u001b[7mo\u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_LEFT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHel\u001b[7ml\u001b[27mo\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_LEFT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHe\u001b[7ml\u001b[27mlo\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_LEFT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mH\u001b[7me\u001b[27mllo\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_LEFT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7mH\u001b[27mello\u001b[39m\"')\n    // cursor can't go before the first character\n    renderInstance.stdin.write(ARROW_LEFT)\n    await new Promise((resolve) => setTimeout(resolve, 100))\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7mH\u001b[27mello\u001b[39m\"')\n\n    await sendInput(renderInstance, ARROW_RIGHT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mH\u001b[7me\u001b[27mllo\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_RIGHT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHe\u001b[7ml\u001b[27mlo\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_RIGHT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHel\u001b[7ml\u001b[27mo\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_RIGHT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHell\u001b[7mo\u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_RIGHT)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHello\u001b[7m \u001b[27m\u001b[39m\"')\n    // cursor can't go after the last character\n    renderInstance.stdin.write(ARROW_RIGHT)\n    await new Promise((resolve) => setTimeout(resolve, 100))\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHello\u001b[7m \u001b[27m\u001b[39m\"')\n  })\n\n  test('moves the cursor when deleting', async () => {\n    const StatefulTextInput = () => {\n      const [value, setValue] = useState('Hello')\n\n      return <TextInput value={value} onChange={setValue} />\n    }\n\n    const renderInstance = render(<StatefulTextInput />)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHello\u001b[7m \u001b[27m\u001b[39m\"')\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, DELETE)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHell\u001b[7m \u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, DELETE)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHel\u001b[7m \u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, DELETE)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHe\u001b[7m \u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, DELETE)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mH\u001b[7m \u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, DELETE)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7m \u001b[27m\u001b[39m\"')\n    // cannot delete after the value has been cleared\n    renderInstance.stdin.write(DELETE)\n    await new Promise((resolve) => setTimeout(resolve, 100))\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7m \u001b[27m\u001b[39m\"')\n  })\n\n  test('accepts input', async () => {\n    const StatefulTextInput = () => {\n      const [value, setValue] = useState('')\n\n      return <TextInput value={value} onChange={setValue} />\n    }\n\n    const renderInstance = render(<StatefulTextInput />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 'H')\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mH\u001b[7m \u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, 'ello')\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mHello\u001b[7m \u001b[27m\u001b[39m\"')\n  })\n\n  test('onChange', async () => {\n    const onChange = vi.fn()\n\n    const renderInstance = render(<TextInput value=\"\" onChange={onChange} />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 'X')\n\n    expect(onChange).toHaveBeenCalledWith('X')\n  })\n\n  test('deletes at the beginning and in the middle of text', async () => {\n    const StatefulTextInput = () => {\n      const [value, setValue] = useState('')\n\n      return <TextInput value={value} onChange={setValue} />\n    }\n\n    const renderInstance = render(<StatefulTextInput />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 'T')\n    await sendInput(renderInstance, 'e')\n    await sendInput(renderInstance, 's')\n    await sendInput(renderInstance, 't')\n    await sendInput(renderInstance, ARROW_LEFT)\n    await sendInput(renderInstance, DELETE)\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mTe\u001b[7mt\u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, ARROW_LEFT)\n    await sendInput(renderInstance, ARROW_LEFT)\n    renderInstance.stdin.write(DELETE)\n    await new Promise((resolve) => setTimeout(resolve, 100))\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7mT\u001b[27met\u001b[39m\"')\n  })\n\n  test('adjusts cursor when text is shorter than last value', async () => {\n    let resetValue = () => {}\n\n    const StatefulTextInput = () => {\n      const [value, setValue] = useState('')\n      resetValue = () => setValue('')\n\n      return <TextInput value={value} onChange={setValue} />\n    }\n\n    const renderInstance = render(<StatefulTextInput />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 'A')\n    await sendInput(renderInstance, 'B')\n\n    await waitForChange(resetValue, renderInstance.lastFrame)\n\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36m\u001b[7m \u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, 'A')\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mA\u001b[7m \u001b[27m\u001b[39m\"')\n    await sendInput(renderInstance, 'B')\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot('\"\u001b[36mAB\u001b[7m \u001b[27m\u001b[39m\"')\n  })\n})\n"]}

package/dist/private/node/ui/components/TextPrompt.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface Props {
+    message: string;
+    onSubmit: (value: string) => void;
+    placeholder?: string;
+}
+declare const TextPrompt: React.FC<Props>;
+export { TextPrompt };

package/dist/private/node/ui/components/TextPrompt.js

@@ -0,0 +1,52 @@
+import { TextInput } from './TextInput.js';
+import { handleCtrlC } from '../../ui.js';
+import useLayout from '../hooks/use-layout.js';
+import React, { useCallback, useState } from 'react';
+import { Box, useApp, useInput, Text } from 'ink';
+import { figures } from 'listr2';
+const TextPrompt = ({ message, onSubmit, placeholder }) => {
+    const { oneThird } = useLayout();
+    const [answer, setAnswer] = useState('');
+    const { exit: unmountInk } = useApp();
+    const [submitted, setSubmitted] = useState(false);
+    const [valid, setValid] = useState(false);
+    const underline = new Array(oneThird - 3).fill('▔');
+    useInput(useCallback((input, key) => {
+        handleCtrlC(input, key);
+        if (key.return) {
+            setSubmitted(true);
+            if (valid) {
+                onSubmit(answer);
+                unmountInk();
+            }
+        }
+    }, [answer, onSubmit, valid]));
+    const shouldShowError = submitted && !valid;
+    const color = shouldShowError ? 'red' : 'cyan';
+    const error = shouldShowError ? 'Please enter a value' : undefined;
+    return (React.createElement(Box, { flexDirection: "column", marginBottom: 1, width: oneThird },
+        React.createElement(Box, null,
+            React.createElement(Box, { marginRight: 2 },
+                React.createElement(Text, null, "?")),
+            React.createElement(Text, null, message)),
+        submitted && valid ? (React.createElement(Box, null,
+            React.createElement(Box, { marginRight: 2 },
+                React.createElement(Text, { color: "cyan" }, figures.tick)),
+            React.createElement(Box, { flexGrow: 1 },
+                React.createElement(Text, { color: "cyan" }, answer)))) : (React.createElement(Box, { flexDirection: "column" },
+            React.createElement(Box, null,
+                React.createElement(Box, { marginRight: 2 },
+                    React.createElement(Text, { color: color }, `>`)),
+                React.createElement(Box, { flexGrow: 1 },
+                    React.createElement(TextInput, { value: answer, onChange: (answer) => {
+                            setAnswer(answer);
+                            setValid(answer.length > 0);
+                            setSubmitted(false);
+                        }, placeholder: placeholder, color: color }))),
+            React.createElement(Box, { marginLeft: 3 },
+                React.createElement(Text, { color: color }, underline)),
+            error && (React.createElement(Box, { marginLeft: 3 },
+                React.createElement(Text, { color: color }, error)))))));
+};
+export { TextPrompt };
+//# sourceMappingURL=TextPrompt.js.map

package/dist/private/node/ui/components/TextPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextPrompt.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/TextPrompt.tsx"],"names":[],"mappings":"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","sourcesContent":["import {TextInput} from './TextInput.js'\nimport {handleCtrlC} from '../../ui.js'\nimport useLayout from '../hooks/use-layout.js'\nimport React, {useCallback, useState} from 'react'\nimport {Box, useApp, useInput, Text} from 'ink'\nimport {figures} from 'listr2'\n\nexport interface Props {\n  message: string\n  onSubmit: (value: string) => void\n  placeholder?: string\n}\n\nconst TextPrompt: React.FC<Props> = ({message, onSubmit, placeholder}) => {\n  const {oneThird} = useLayout()\n  const [answer, setAnswer] = useState<string>('')\n  const {exit: unmountInk} = useApp()\n  const [submitted, setSubmitted] = useState(false)\n  const [valid, setValid] = useState(false)\n  const underline = new Array(oneThird - 3).fill('▔')\n\n  useInput(\n    useCallback(\n      (input, key) => {\n        handleCtrlC(input, key)\n\n        if (key.return) {\n          setSubmitted(true)\n\n          if (valid) {\n            onSubmit(answer)\n            unmountInk()\n          }\n        }\n      },\n      [answer, onSubmit, valid],\n    ),\n  )\n\n  const shouldShowError = submitted && !valid\n  const color = shouldShowError ? 'red' : 'cyan'\n  const error = shouldShowError ? 'Please enter a value' : undefined\n\n  return (\n    <Box flexDirection=\"column\" marginBottom={1} width={oneThird}>\n      <Box>\n        <Box marginRight={2}>\n          <Text>?</Text>\n        </Box>\n        <Text>{message}</Text>\n      </Box>\n      {submitted && valid ? (\n        <Box>\n          <Box marginRight={2}>\n            <Text color=\"cyan\">{figures.tick}</Text>\n          </Box>\n\n          <Box flexGrow={1}>\n            <Text color=\"cyan\">{answer}</Text>\n          </Box>\n        </Box>\n      ) : (\n        <Box flexDirection=\"column\">\n          <Box>\n            <Box marginRight={2}>\n              <Text color={color}>{`>`}</Text>\n            </Box>\n            <Box flexGrow={1}>\n              <TextInput\n                value={answer}\n                onChange={(answer) => {\n                  setAnswer(answer)\n                  setValid(answer.length > 0)\n                  setSubmitted(false)\n                }}\n                placeholder={placeholder}\n                color={color}\n              />\n            </Box>\n          </Box>\n          <Box marginLeft={3}>\n            <Text color={color}>{underline}</Text>\n          </Box>\n          {error && (\n            <Box marginLeft={3}>\n              <Text color={color}>{error}</Text>\n            </Box>\n          )}\n        </Box>\n      )}\n    </Box>\n  )\n}\n\nexport {TextPrompt}\n"]}

package/dist/private/node/ui/components/TextPrompt.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/private/node/ui/components/TextPrompt.test.js

@@ -0,0 +1,68 @@
+import { TextPrompt } from './TextPrompt.js';
+import { getLastFrameAfterUnmount, sendInput, waitForInputsToBeReady } from '../../../../testing/ui.js';
+import { unstyled } from '../../../../output.js';
+import { render } from 'ink-testing-library';
+import React from 'react';
+import { describe, expect, test, vi } from 'vitest';
+const ENTER = '\r';
+describe('TextPrompt', () => {
+    test('default state', () => {
+        const { lastFrame } = render(React.createElement(TextPrompt, { onSubmit: () => { }, message: "Test question", placeholder: "Placeholder" }));
+        expect(unstyled(lastFrame())).toMatchInlineSnapshot(`
+      "?  Test question
+      >  Placeholder
+         ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+      "
+    `);
+    });
+    test('validation error', async () => {
+        const renderInstance = render(React.createElement(TextPrompt, { onSubmit: () => { }, message: "Test question" }));
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, ENTER);
+        // testing with styles because the color changes to red
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Test question
+      >   
+         ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+         Please enter a value
+      "
+    `);
+        await sendInput(renderInstance, 'A');
+        // color changes back to valid color
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Test question
+      >  A 
+         ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+      "
+    `);
+    });
+    test('submitting the value', async () => {
+        const onSubmit = vi.fn();
+        const renderInstance = render(React.createElement(TextPrompt, { onSubmit: onSubmit, message: "Test question" }));
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, 'A');
+        await sendInput(renderInstance, ENTER);
+        expect(onSubmit).toHaveBeenCalledWith('A');
+        expect(unstyled(getLastFrameAfterUnmount(renderInstance))).toMatchInlineSnapshot(`
+      "?  Test question
+      ✔  A
+      "
+    `);
+    });
+    test('text wrapping', async () => {
+        // component width is 80 characters wide in tests but because of the question mark and
+        // spaces before the question, we only have 77 characters to work with
+        const renderInstance = render(React.createElement(TextPrompt, { onSubmit: () => { }, message: "Test question" }));
+        await waitForInputsToBeReady();
+        await sendInput(renderInstance, 'A'.repeat(77));
+        await sendInput(renderInstance, 'B'.repeat(6));
+        expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Test question
+      >  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
+         BBBBBB 
+         ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔
+      "
+    `);
+    });
+});
+//# sourceMappingURL=TextPrompt.test.js.map

package/dist/private/node/ui/components/TextPrompt.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextPrompt.test.js","sourceRoot":"","sources":["../../../../../src/private/node/ui/components/TextPrompt.test.tsx"],"names":[],"mappings":"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","sourcesContent":["import {TextPrompt} from './TextPrompt.js'\nimport {getLastFrameAfterUnmount, sendInput, waitForInputsToBeReady} from '../../../../testing/ui.js'\nimport {unstyled} from '../../../../output.js'\nimport {render} from 'ink-testing-library'\nimport React from 'react'\nimport {describe, expect, test, vi} from 'vitest'\n\nconst ENTER = '\\r'\n\ndescribe('TextPrompt', () => {\n  test('default state', () => {\n    const {lastFrame} = render(<TextPrompt onSubmit={() => {}} message=\"Test question\" placeholder=\"Placeholder\" />)\n\n    expect(unstyled(lastFrame()!)).toMatchInlineSnapshot(`\n      \"?  Test question\n      >  Placeholder\n         ▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔\n      \"\n    `)\n  })\n\n  test('validation error', async () => {\n    const renderInstance = render(<TextPrompt onSubmit={() => {}} message=\"Test question\" />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, ENTER)\n    // testing with styles because the color changes to red\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"?  Test question\n      \u001b[31m>\u001b[39m  \u001b[31m\u001b[7m \u001b[27m\u001b[39m\n         \u001b[31m▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔\u001b[39m\n         \u001b[31mPlease enter a value\u001b[39m\n      \"\n    `)\n    await sendInput(renderInstance, 'A')\n    // color changes back to valid color\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"?  Test question\n      \u001b[36m>\u001b[39m  \u001b[36mA\u001b[7m \u001b[27m\u001b[39m\n         \u001b[36m▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔\u001b[39m\n      \"\n    `)\n  })\n\n  test('submitting the value', async () => {\n    const onSubmit = vi.fn()\n    const renderInstance = render(<TextPrompt onSubmit={onSubmit} message=\"Test question\" />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 'A')\n    await sendInput(renderInstance, ENTER)\n    expect(onSubmit).toHaveBeenCalledWith('A')\n    expect(unstyled(getLastFrameAfterUnmount(renderInstance)!)).toMatchInlineSnapshot(`\n      \"?  Test question\n      ✔  A\n      \"\n    `)\n  })\n\n  test('text wrapping', async () => {\n    // component width is 80 characters wide in tests but because of the question mark and\n    // spaces before the question, we only have 77 characters to work with\n    const renderInstance = render(<TextPrompt onSubmit={() => {}} message=\"Test question\" />)\n\n    await waitForInputsToBeReady()\n    await sendInput(renderInstance, 'A'.repeat(77))\n    await sendInput(renderInstance, 'B'.repeat(6))\n    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`\n      \"?  Test question\n      \u001b[36m>\u001b[39m  \u001b[36mAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\u001b[39m\n         \u001b[36mBBBBBB\u001b[7m \u001b[27m\u001b[39m\n         \u001b[36m▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔▔\u001b[39m\n      \"\n    `)\n  })\n})\n"]}

package/dist/private/node/ui/components/TokenizedText.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+interface CommandToken {
+    command: string;
+}
+interface LinkToken {
+    link: {
+        label?: string;
+        url: string;
+    };
+}
+interface CharToken {
+    char: string;
+}
+interface UserInputToken {
+    userInput: string;
+}
+interface FilePathToken {
+    filePath: string;
+}
+interface ListToken {
+    list: {
+        items: TokenItem[];
+        ordered?: boolean;
+    };
+}
+declare type Token = string | CommandToken | LinkToken | CharToken | UserInputToken | FilePathToken | ListToken;
+export declare type TokenItem = Token | Token[];
+interface Props {
+    item: TokenItem;
+}
+/**
+ * `TokenizedText` renders a text string with tokens that can be either strings,
+ * links, and commands.
+ */
+declare const TokenizedText: React.FC<Props>;
+export { TokenizedText };