Code Monkey home page Code Monkey logo

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

View Code? Open in Web Editor NEW
4.0 4.0 1.0 1.63 MB

The `r3bl-ts-utils` package is a set of useful TypeScript functions and classes that can be used in Node.js and browser environments. They are inspired by Kotlin stdlib, and Rust to write code as expressions rather than statements, colorized text, powerful Text User Interface (TUI) framework to build powerful CLI apps, cache, and timer utilities.

Home Page: https://r3bl.com

License: Apache License 2.0

TypeScript 99.55% JavaScript 0.45%
cli color console hooks-api-react ink kotlin react rust-lang scopes terminal tui typescript utilities utils

r3bl-ts-utils's People

Contributors

nazmulidris avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

coldmind-dev

r3bl-ts-utils's Issues

Create TextInputField based on TextInput using useNodeKeypress

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

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

Support theming for ui components

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

Make useNodeKeypress & its dependents behave like useInput(handler, { isActive:boolean })

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.