charmbracelet / bubbles

TUI components for Bubble Tea 🫧
MIT License
5.57k stars 263 forks source link

Implement `Navigation` bubble for routing #179

Open maaslalani opened 2 years ago

maaslalani commented 2 years ago

Bubbles should probably help users build multi-view applications such as glow, etc... more easily. We can likely do this by implementing routing and navigation through a Bubble similar to how we help define keybindings with key.Binding.

I'm roughly imagining something like this:


// Package route provides some types and functionality for defining different 
// routes and nested models for your Bubble Tea applications.
type RouteMap struct {
    Home   route.Screen
    Help   route.Screen
    Secret route.Screen
}

type Screen struct {
    // model is the nested model this screen uses for updating and viewing
    model   tea.Model
    // binding is the key binding needed to navigate to this view.
    binding key.Binding
}

// Navigation defines key bindings to navigate to different routes in 
// your application.
var Navigation RouteMap {
    Home:  Screen{homeModel, homeBinding}
    Help:  Screen{helpModel, helpBinding}
    // ...
}

I'd imagine we can also then implement many helper methods and handle updating nested models for most use cases. I think this will make multi-view Bubble Tea applications much easier to implement if we can simply define several tea.Model and define key.Bindings to switch between them and handle all routing and updates for the users building the apps. This could also allow us to build Stack based navigation, etc...

KaviiSuri commented 1 year ago

I'd love to pick this up and contribute!

How should I move forward?

maaslalani commented 1 year ago

Hey @KaviiSuri, awesome that you want to contribute. I think to implement this we'll need some sort of Navigation bubble as mentioned. This should mean that the top level navigation can contain different Screens (maybe we can improve this name) and a way to switch between them through their configured keybindings.

I think a lot of the inspiration will come from this video of making nested models (https://www.youtube.com/watch?v=uJ2egAkSkjg) and making a way to stream line this code and make concepts that most people would understand so that it is easier to build multi-view applications.

If you want to give it a go please feel free to! Let me know if you have any further questions or want to ask about clarification about introducing concepts.

KaviiSuri commented 1 year ago

Hi, Thanks for the video! I'll go through it and get back with any questions I have! (I'm kinda new to bubbles so I might have a lot of them!)

KaviiSuri commented 1 year ago

@maaslalani I've added a draft PR, wanted to get your inputs on how to move forward.