r3bl-org / r3bl-ts-utils Goto Github PK

Use something like https://www.npmjs.com/package/cli-color to support more than just a handful of predefined colors

Here are some other examples:

1. https://www.npmjs.com/package/terminal-kit
2. https://www.npmjs.com/package/asciichart
3. https://www.npmjs.com/package/ascii-art
4. https://www.npmjs.com/package/ansi-escapes
5. https://www.npmjs.com/package/terminal-kit

Currently TextInput is built on useInput which really doesn't work w/ useNodeKeypress.

• useInput is hooked into data event via StdinContext - https://github.com/nazmulidris/ink/blob/ece996911c187b1ce3c601315c84cfb3e6219715/src/hooks/use-input.ts#L115
• TextInput gets its key events from useInput - https://github.com/vadimdemedes/ink-text-input/blob/27c40731bcf1b490dd90f67a49cde992715e0da1/source/index.tsx#L52
• useNodeKeypress is hooked into keypress events from readline

Here are the changes that need to be made.

1. Copy TextInput into TextInputField (in r3bl-ts-utils)
   1.1 Replace useInput w/ useNodeKeypress
   1.2 Remove all the needless code
2. Change useNodeKeypress
   2.1 It should only have 1 active keypress listener at any given time
   2.2 Remove all existing listeners when a new one is attached, restore them on detach
   2.3 Might need to create an ActionRegistry (singleton, static, just like TimerRegistry) to handle these things.

Test it in the existing experiments that use TextInput.

Next - Apply similar thinking to migrating confirm-input to useNodeKeypress

Currently, there is no support for theming in the UI components. The colors are hard coded. It is assumed that the user has their terminal in a dark mode theme.

It isn't really easy to detect what their current terminal theme, and it is safe to assume that most developers use dark themes in their terminals.

However it is important to provide a set of color options for users:

1. high contrast theme
2. color blind theme
3. default dark theme
4. alternative dark theme

When there are many components that can receive keyboard input visible at the same time, the focus system ensures that the one that is currently focused is going to receive these events. There can be one exception which is having a "global" listener that can respond to keypresses regardless of what other component has focus.

Ink's useInput hook has a way to turn on and off the event listener that is attached to it. It can take a boolean called "isActive" which turns listening on or off. https://github.com/nazmulidris/ink/blob/ece996911c187b1ce3c601315c84cfb3e6219715/src/hooks/use-input.ts#L92

useNodeKeypress and all the other hooks that depend on it should adopt this behavior as well.

Here's a related issue to this: #2