Git Product home page Git Product logo

roc-tui's Introduction

Terminal UI for Roc (WIP)

This is a tui platform for Roc built on top of the excellent tui-rs.

My goal for making this platform is to learn more about Roc dev; to explore ideas for the Roc editor, and how to do Action-State in Roc.

I welcome any feedback or assistance!

Note that to close the app it is currently hardcoded in the platform to the 'ESC' key. This will be configurable when I add support for effects.

Here is the hello.roc example.

# Model
Model : { text : Str }

init = \_ -> { text: "Hello world!" }

# Handle Events
update : Model, Event -> Model
update = \model, _ -> model

# Render UI
render : Model -> List Elem
render = \model -> 
    text = [[Elem.styled model.text { fg: Green }]]
    
    [ Elem.layout [ Elem.paragraph { text } ] {} ]

Here is a demonstration of examples/todo.roc.

and, here is a demonstration of examples/popup.roc.

If your feeling brave you can use a URL release of this platform. For more information how to do this see the Roc Tutorial.

Things I'm working on, or thinking about

  • Block widget
  • Paragraph widget
  • Responsive layouts
  • Styling
  • Scrolling for paragraphs
  • Optional Records for better API
  • List widget
  • Add support for Popup/Modals
  • Support for effects (e.g. close app)
  • Support more widgets. Currently blocked on #4554
    • Canvas widget
    • Tabs
    • Table
    • Charts
    • Sparkline
  • More examples
  • Support Tasks such as opening a File similar to CLI, needs investigation. Better to wait for improved roc glue support and packages
  • Better error handling, don't mess up terminal if Roc panics somehow
  • Support for mouse input
  • Write some tests

Process to add functionality

  1. Review the tui-rs docs and examples to understand the behaviour.
  2. Add feature to the Platform API *.roc files
  3. Generate platform/glue.rs with roc glue platform/main.roc platform/src/glue.rs note the comments in platform/main.roc
  4. Use cargo build from the platform folder to fix any errors
  5. Wire functionality into the platform host Rust code
  6. Update hello.roc and other examples
  7. Rebuild release with roc build --bundle .tar.br platform/main.roc

Platform Docs

roc docs platform/main.roc
cd ./generated-docs
simple-http-server --nocache --index

roc-tui's People

Contributors

lukewilliamboswell avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

roc-tui's Issues

Rgb colors aren't working

Need to investigate further. Everything appears to be wired up correctly, however it isn't rendering the colour specified.

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.