Split progress bar example into static and animated versions

examples/go.mod

@@ -3,14 +3,14 @@ module examples
 go 1.13
 
 require (
-	github.com/charmbracelet/bubbles v0.8.0
+	github.com/charmbracelet/bubbles v0.8.1-0.20210726164137-e723cfd15ee9
 	github.com/charmbracelet/bubbletea v0.13.1
 	github.com/charmbracelet/glamour v0.2.0
 	github.com/charmbracelet/lipgloss v0.1.2
 	github.com/fogleman/ease v0.0.0-20170301025033-8da417bf1776
 	github.com/lucasb-eyer/go-colorful v1.2.0
 	github.com/mattn/go-isatty v0.0.12
-	github.com/mattn/go-runewidth v0.0.12
+	github.com/mattn/go-runewidth v0.0.13
 	github.com/muesli/reflow v0.2.1-0.20210115123740-9e1d0d53df68
 	github.com/muesli/termenv v0.8.1
 )

examples/go.sum

@@ -9,10 +9,12 @@ github.com/alecthomas/repr v0.0.0-20180818092828-117648cd9897 h1:p9Sln00KOTlrYkx
 github.com/alecthomas/repr v0.0.0-20180818092828-117648cd9897/go.mod h1:xTS7Pm1pD1mvyM075QCDSRqH6qRLXylzS24ZTpRiSzQ=
 github.com/atotto/clipboard v0.1.2 h1:YZCtFu5Ie8qX2VmVTBnrqLSiU9XOWwqNRmdT3gIQzbY=
 github.com/atotto/clipboard v0.1.2/go.mod h1:ZY9tmq7sm5xIbd9bOK4onWV4S6X0u6GY7Vn0Yu86PYI=
-github.com/charmbracelet/bubbles v0.8.0 h1:+l2op90Ag37Vn+30O1hbg/0wBl+e+sxHhgY1F/rvdHs=
-github.com/charmbracelet/bubbles v0.8.0/go.mod h1:5WX1sSSjNCgCrzvRMN/z23HxvWaa+AI16Ch0KPZPeDs=
+github.com/charmbracelet/bubbles v0.8.1-0.20210726164137-e723cfd15ee9 h1:Ud8eC8EStC58Eq6lX7jC1rcY+m9TEQJ7elyLZ6SQ3Pc=
+github.com/charmbracelet/bubbles v0.8.1-0.20210726164137-e723cfd15ee9/go.mod h1:ajGUot5oksQSKxAATWfJU6STm4B0Pb1+e36bdkXrxsc=
 github.com/charmbracelet/glamour v0.2.0 h1:mTgaiNiumpqTZp3qVM6DH9UB0NlbY17wejoMf1kM8Pg=
 github.com/charmbracelet/glamour v0.2.0/go.mod h1:UA27Kwj3QHialP74iU6C+Gpc8Y7IOAKupeKMLLBURWM=
+github.com/charmbracelet/harmonica v0.1.0 h1:lFKeSd6OAckQ/CEzPVd2mqj+YMEubQ/3FM2IYY3xNm0=
+github.com/charmbracelet/harmonica v0.1.0/go.mod h1:KSri/1RMQOZLbw7AHqgcBycp8pgJnQMYYT8QZRqZ1Ao=
 github.com/charmbracelet/lipgloss v0.1.2 h1:D+LUMg34W7n2pkuMrevKVxT7HXqnoRHm7IoomkX3/ZU=
 github.com/charmbracelet/lipgloss v0.1.2/go.mod h1:5D8zradw52m7QmxRF6QgwbwJi9je84g8MkWiGN07uKg=
 github.com/containerd/console v1.0.1 h1:u7SFAJyRqWcG6ogaMAx3KjSTy1e3hT9QxqX7Jco7dRc=
@@ -36,8 +38,8 @@ github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Ky
 github.com/mattn/go-runewidth v0.0.7/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
 github.com/mattn/go-runewidth v0.0.9/go.mod h1:H031xJmbD/WCDINGzjvQ9THkh0rPKHF+m2gUSrubnMI=
 github.com/mattn/go-runewidth v0.0.10/go.mod h1:RAqKPSqVFrSLVXbA8x7dzmKdmGzieGRCM46jaSJTDAk=
-github.com/mattn/go-runewidth v0.0.12 h1:Y41i/hVW3Pgwr8gV+J23B9YEY0zxjptBuCWEaxmAOow=
-github.com/mattn/go-runewidth v0.0.12/go.mod h1:RAqKPSqVFrSLVXbA8x7dzmKdmGzieGRCM46jaSJTDAk=
+github.com/mattn/go-runewidth v0.0.13 h1:lTGmDsbAYt5DmK6OnoV7EuIF1wEIFAcxld6ypU4OSgU=
+github.com/mattn/go-runewidth v0.0.13/go.mod h1:Jdepj2loyihRzMpdS35Xk/zdY8IAYHsh153qUoGf23w=
 github.com/microcosm-cc/bluemonday v1.0.2 h1:5lPfLTTAvAbtS0VqT+94yOtFnGfUWYyx0+iToC3Os3s=
 github.com/microcosm-cc/bluemonday v1.0.2/go.mod h1:iVP4YcDBq+n/5fb23BhYFvIMq/leAFZyRl6bYmGDlGc=
 github.com/muesli/reflow v0.1.0/go.mod h1:I9bWAt7QTg/que/qmUCJBGlj7wEq8OAFBjPNjc6xK4I=

examples/progress-animated/main.go

@@ -0,0 +1,93 @@
+package main
+
+// A simple example that shows how to render an animated progress bar. In this
+// example we bump the progress by 25% every two seconds, animating our
+// progress bar to its new target state.
+//
+// It's also possible to render a progress bar in a more static fashion without
+// transitions. For details on that approach see the progress-static example.
+
+import (
+	"fmt"
+	"os"
+	"strings"
+	"time"
+
+	"github.com/charmbracelet/bubbles/progress"
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+)
+
+const (
+	padding  = 2
+	maxWidth = 80
+)
+
+var helpStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("#626262")).Render
+
+func main() {
+	m := model{
+		progress: progress.NewModel(progress.WithDefaultGradient()),
+	}
+
+	if err := tea.NewProgram(m).Start(); err != nil {
+		fmt.Println("Oh no!", err)
+		os.Exit(1)
+	}
+}
+
+type tickMsg time.Time
+
+type model struct {
+	progress progress.Model
+}
+
+func (_ model) Init() tea.Cmd {
+	return tickCmd()
+}
+
+func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		return m, tea.Quit
+
+	case tea.WindowSizeMsg:
+		m.progress.Width = msg.Width - padding*2 - 4
+		if m.progress.Width > maxWidth {
+			m.progress.Width = maxWidth
+		}
+		return m, nil
+
+	case tickMsg:
+		if m.progress.Percent() == 1.0 {
+			return m, tea.Quit
+		}
+
+		// Note that you can also use progress.Model.SetPercent to set the
+		// percentage value explicitly, too.
+		cmd := m.progress.IncrPercent(0.25)
+		return m, tea.Batch(tickCmd(), cmd)
+
+	// FrameMsg is sent when the progress bar wants to animate itself
+	case progress.FrameMsg:
+		var cmd tea.Cmd
+		m.progress, cmd = m.progress.Update(msg)
+		return m, cmd
+
+	default:
+		return m, nil
+	}
+}
+
+func (e model) View() string {
+	pad := strings.Repeat(" ", padding)
+	return "\n" +
+		pad + e.progress.View() + "\n\n" +
+		pad + helpStyle("Press any key to quit")
+}
+
+func tickCmd() tea.Cmd {
+	return tea.Tick(time.Second*2, func(t time.Time) tea.Msg {
+		return tickMsg(t)
+	})
+}

examples/progress-static/main.go

@@ -0,0 +1,94 @@
+package main
+
+// A simple example that shows how to render a progress bar in a "pure"
+// fashion. In this example we bump the progress by 25% every second,
+// maintaining the progress state on our top level model using the progress bar
+// model's ViewAs method only for rendering.
+//
+// The signature for ViewAs is:
+//
+//     func (m Model) ViewAs(percent float64) string
+//
+// So it takes a float between 0 and 1, and renders the progress bar
+// accordingly. When using the progress bar in this "pure" fashion and there's
+// no need to call an Update method.
+//
+// The progress bar is also able to animate itself, however. For details see
+// the progress-animated example.
+
+import (
+	"fmt"
+	"os"
+	"strings"
+	"time"
+
+	"github.com/charmbracelet/bubbles/progress"
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/charmbracelet/lipgloss"
+)
+
+const (
+	padding  = 2
+	maxWidth = 80
+)
+
+var helpStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("#626262")).Render
+
+func main() {
+	prog := progress.NewModel(progress.WithScaledGradient("#FF7CCB", "#FDFF8C"))
+
+	if err := tea.NewProgram(model{progress: prog}).Start(); err != nil {
+		fmt.Println("Oh no!", err)
+		os.Exit(1)
+	}
+}
+
+type tickMsg time.Time
+
+type model struct {
+	percent  float64
+	progress progress.Model
+}
+
+func (_ model) Init() tea.Cmd {
+	return tickCmd()
+}
+
+func (m model) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
+	switch msg := msg.(type) {
+
+	case tea.KeyMsg:
+		return m, tea.Quit
+
+	case tea.WindowSizeMsg:
+		m.progress.Width = msg.Width - padding*2 - 4
+		if m.progress.Width > maxWidth {
+			m.progress.Width = maxWidth
+		}
+		return m, nil
+
+	case tickMsg:
+		m.percent += 0.25
+		if m.percent > 1.0 {
+			m.percent = 1.0
+			return m, tea.Quit
+		}
+		return m, tickCmd()
+
+	default:
+		return m, nil
+	}
+}
+
+func (e model) View() string {
+	pad := strings.Repeat(" ", padding)
+	return "\n" +
+		pad + e.progress.ViewAs(e.percent) + "\n\n" +
+		pad + helpStyle("Press any key to quit")
+}
+
+func tickCmd() tea.Cmd {
+	return tea.Tick(time.Second, func(t time.Time) tea.Msg {
+		return tickMsg(t)
+	})
+}

examples/progress/main.go

@@ -1,84 +0,0 @@
-package main
-
-import (
-	"fmt"
-	"os"
-	"strings"
-	"time"
-
-	"github.com/charmbracelet/bubbles/progress"
-	tea "github.com/charmbracelet/bubbletea"
-)
-
-const (
-	fps              = 60
-	stepSize float64 = 1.0 / (float64(fps) * 2.0)
-	padding          = 2
-	maxWidth         = 80
-)
-
-func main() {
-	prog, err := progress.NewModel(progress.WithScaledGradient("#FF7CCB", "#FDFF8C"))
-	if err != nil {
-		fmt.Println("Could not initialize progress model:", err)
-		os.Exit(1)
-	}
-
-	if err = tea.NewProgram(example{progress: prog}).Start(); err != nil {
-		fmt.Println("Oh no!", err)
-		os.Exit(1)
-	}
-}
-
-type tickMsg time.Time
-
-type example struct {
-	percent  float64
-	progress *progress.Model
-}
-
-func (e example) Init() tea.Cmd {
-	return tickCmd()
-}
-
-func (e example) Update(msg tea.Msg) (tea.Model, tea.Cmd) {
-	switch msg := msg.(type) {
-
-	case tea.KeyMsg:
-		switch msg.String() {
-		case "q", "ctrl+c", "esc":
-			return e, tea.Quit
-		default:
-			return e, nil
-		}
-
-	case tea.WindowSizeMsg:
-		e.progress.Width = msg.Width - padding*2 - 4
-		if e.progress.Width > maxWidth {
-			e.progress.Width = maxWidth
-		}
-		return e, nil
-
-	case tickMsg:
-		e.percent += stepSize
-		if e.percent > 1.0 {
-			e.percent = 1.0
-			return e, tea.Quit
-		}
-		return e, tickCmd()
-
-	default:
-		return e, nil
-	}
-}
-
-func (e example) View() string {
-	pad := strings.Repeat(" ", padding)
-	return "\n" + pad + e.progress.View(e.percent) + "\n\n"
-}
-
-func tickCmd() tea.Cmd {
-	return tea.Tick(time.Second/fps, func(t time.Time) tea.Msg {
-		return tickMsg(t)
-	})
-}