examples/README.md GIFs (#470)

* docs(examples): Add `examples/README.md`

Adds `examples/README.md` with GIFs of examples

* docs(examples): Individual READMEs

* docs(examples): add short description to each example

examples/README.md

@@ -0,0 +1,328 @@
+# Examples
+
+### Alt Screen Toggle
+
+The `altscreen-toggle` example shows how to transition between the alternative
+screen buffer and the normal screen buffer using Bubble Tea.
+
+<a href="./altscreen-toggle/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/altscreen-toggle.gif" />
+</a>
+
+### Chat
+
+The `chat` examples shows a basic chat application with a multi-line `textarea`
+input.
+
+<a href="./chat/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/chat.gif" />
+</a>
+
+### Composable Views
+
+The `composable-views` example shows how to compose two bubble models (spinner
+and timer) together in a single application and switch between them.
+
+<a href="./composable-views/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/composable-views.gif" />
+</a>
+
+### Credit Card Form
+
+The `credit-card-form` example demonstrates how to build a multi-step form with
+`textinput`s bubbles and validation on the inputs.
+
+<a href="./credit-card-form/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/credit-card-form.gif" />
+</a>
+
+### Debounce
+
+The `debounce` example shows how to throttle key presses to avoid overloading
+your Bubble Tea application.
+
+<a href="./debounce/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/debounce.gif" />
+</a>
+
+### Exec
+
+The `exec` example shows how to execute a running command during the execution
+of a Bubble Tea application such as launching an `EDITOR`.
+ 
+<a href="./exec/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/exec.gif" />
+</a>
+
+### Full Screen
+
+The `fullscreen` example shows how to make a Bubble Tea application fullscreen.
+
+<a href="./fullscreen/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/fullscreen.gif" />
+</a>
+
+### Glamour
+
+The `glamour` example shows how to use [Glamour](https://github.com/charmbracelet/glamour) inside a viewport bubble.
+
+<a href="./glamour/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/glamour.gif" />
+</a>
+
+### Help
+
+The `help` example shows how to use the `help` bubble to display help to the
+user of your application.
+
+<a href="./help/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/help.gif" />
+</a>
+
+### Http
+
+The `http` example shows how to make an `http` call within your Bubble Tea
+application.
+
+<a href="./http/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/http.gif" />
+</a>
+
+### Default List
+
+The `list-default` example shows how to use the list bubble.
+
+<a href="./list-default/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/list-default.gif" />
+</a>
+
+### Fancy List
+
+The `list-fancy` example shows how to use the list bubble with extra customizations.
+
+<a href="./list-fancy/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/list-fancy.gif" />
+</a>
+
+### Simple List
+
+The `list-simple` example shows how to use the list and customize it to have a simpler, more compact, appearance.
+
+<a href="./list-simple/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/list-simple.gif" />
+</a>
+
+### Mouse
+
+The `mouse` example shows how to receive mouse events in a Bubble Tea
+application.
+
+<a href="./mouse/main.go">
+  Code
+</a>
+
+### Package Manager
+
+The `package-manager` example shows how to build an interface for a package
+manager using the `tea.Println` feature.
+
+<a href="./package-manager/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/package-manager.gif" />
+</a>
+
+### Pager
+
+The `pager` example shows how to build a simple pager application similar to
+`less`.
+
+<a href="./pager/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/pager.gif" />
+</a>
+
+### Paginator
+
+The `paginator` example shows how to build a simple paginated list.
+
+<a href="./paginator/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/paginator.gif" />
+</a>
+
+### Pipe
+
+The `pipe` example demonstrates using shell pipes to communicate with Bubble
+Tea applications.
+
+<a href="./pipe/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/pipe.gif" />
+</a>
+
+### Animated Progress
+
+The `progress-animated` example shows how to build a progress bar with an
+animated progression.
+
+<a href="./progress-animated/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/progress-animated.gif" />
+</a>
+
+### Download Progress
+
+The `progress-download` example demonstrates how to download a file while
+indicating download progress through Bubble Tea.
+
+<a href="./progress-download/main.go">
+  Code
+</a>
+
+### Static Progress
+
+The `progress-static` example shows a progress bar with static incrementation
+of progress.
+
+<a href="./progress-static/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/progress-static.gif" />
+</a>
+
+### Real Time
+
+The `realtime` example demonstrates the use of go channels to perform realtime
+communication with a Bubble Tea application.
+
+<a href="./realtime/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/realtime.gif" />
+</a>
+
+### Result
+
+The `result` example shows a choice menu with the ability to select an option.
+
+<a href="./result/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/result.gif" />
+</a>
+
+### Send Msg
+
+The `send-msg` example demonstrates the usage of custom `tea.Msg`s.
+
+<a href="./send-msg/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/send-msg.gif" />
+</a>
+
+### Sequence
+
+The `sequence` example demonstrates the `tea.Sequence` command.
+
+<a href="./sequence/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/sequence.gif" />
+</a>
+
+### Simple
+
+The `simple` example shows a very simple Bubble Tea application.
+
+<a href="./simple/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/simple.gif" />
+</a>
+
+### Spinner
+
+The `spinner` example demonstrates a spinner bubble being used to indicate loading.
+
+<a href="./spinner/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/spinner.gif" />
+</a>
+
+### Spinners
+
+The `spinner` example shows various spinner types that are available.
+
+<a href="./spinners/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/spinners.gif" />
+</a>
+
+### Split Editors
+
+The `split-editors` example shows multiple `textarea`s being used in a single
+application and being able to switch focus between them.
+
+<a href="./split-editors/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/split-editors.gif" />
+</a>
+
+### Stop Watch
+
+The `stopwatch` example shows a sample stop watch built with Bubble Tea.
+
+<a href="./stopwatch/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/stopwatch.gif" />
+</a>
+
+### Table
+
+The `table` example demonstrates the table bubble being used to display tabular
+data.
+
+<a href="./table/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/table.gif" />
+</a>
+
+### Tabs
+
+The `tabs` example demonstrates tabbed navigation styled with [Lip Gloss](https://github.com/charmbracelet/lipgloss).
+
+<a href="./tabs/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/tabs.gif" />
+</a>
+
+### Text Area
+
+The `textarea` example demonstrates a simple Bubble Tea application using a
+`textarea` bubble.
+
+<a href="./textarea/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/textarea.gif" />
+</a>
+
+### Text Input
+
+The `textinput` example demonstrates a simple Bubble Tea application using a `textinput` bubble.
+
+<a href="./textinput/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/textinput.gif" />
+</a>
+
+### Multiple Text Inputs
+
+The `textinputs` example shows multiple `textinputs` and being able to switch
+focus between them as well as changing the cursor mode.
+
+<a href="./textinputs/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/textinputs.gif" />
+</a>
+
+### Timer
+
+The `timer` example shows a simple timer built with Bubble Tea.
+
+<a href="./timer/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/timer.gif" />
+</a>
+
+### TUI Daemon
+
+The `tui-daemon-combo` demonstrates building a text-user interface along with a
+daemon mode using Bubble Tea.
+
+<a href="./tui-daemon-combo/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/tui-daemon-combo.gif" />
+</a>
+
+### Views
+
+The `views` example demonstrates how to build a Bubble Tea application with
+multiple views and switch between them.
+
+<a href="./views/main.go">
+  <img width="750" src="https://stuff.charm.sh/bubbletea-examples/views.gif" />
+</a>
+

examples/altscreen-toggle/README.md

@@ -0,0 +1,3 @@
+# Alt Screen Toggle
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/altscreen-toggle.gif" />

examples/chat/README.md

@@ -0,0 +1,3 @@
+# Chat
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/chat.gif" />

examples/chat/main.go

@@ -51,11 +51,9 @@ func initialModel() model {
 
 	ta.ShowLineNumbers = false
 
-	vp := viewport.New(30, 10)
+	vp := viewport.New(30, 5)
-	vp.SetContent(`Welcome to the Bubbles multi-line text input!
+	vp.SetContent(`Welcome to the chat room!
-Try typing any message and pressing ENTER.
+Type a message and press Enter to send.`)
-If you write a long message, it will automatically wrap :D
-	`)
 
 	ta.KeyMap.InsertNewline.SetEnabled(false)
 

examples/composable-views/README.md

@@ -0,0 +1,3 @@
+# Composable Views
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/composable-views.gif" />

examples/composable-views/main.go

@@ -44,10 +44,14 @@ var (
 		spinner.Monkey,
 	}
 	modelStyle = lipgloss.NewStyle().
-			Padding(1, 2).
+			Width(15).
+			Height(5).
+			Align(lipgloss.Center, lipgloss.Center).
 			BorderStyle(lipgloss.HiddenBorder())
 	focusedModelStyle = lipgloss.NewStyle().
-				Padding(1, 2).
+				Width(15).
+				Height(5).
+				Align(lipgloss.Center, lipgloss.Center).
 				BorderStyle(lipgloss.NormalBorder()).
 				BorderForeground(lipgloss.Color("69"))
 	spinnerStyle = lipgloss.NewStyle().Foreground(lipgloss.Color("69"))
@@ -124,7 +128,7 @@ func (m mainModel) View() string {
 	} else {
 		s += lipgloss.JoinHorizontal(lipgloss.Top, modelStyle.Render(fmt.Sprintf("%4s", m.timer.View())), focusedModelStyle.Render(m.spinner.View()))
 	}
-	s += helpStyle.Render(fmt.Sprintf("\ntab: change focused model • n: new %s • q: exit\n", model))
+	s += helpStyle.Render(fmt.Sprintf("\ntab: focus next • n: new %s • q: exit\n", model))
 	return s
 }
 

examples/credit-card-form/README.md

@@ -0,0 +1,3 @@
+# Credit Card Form
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/credit-card-form.gif" />

examples/debounce/README.md

@@ -0,0 +1,3 @@
+# Debounce
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/debounce.gif" />

examples/exec/README.md

@@ -0,0 +1,3 @@
+# Exec
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/exec.gif" />

examples/fullscreen/README.md

@@ -0,0 +1,3 @@
+# Full Screen
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/fullscreen.gif" />

examples/glamour/README.md

@@ -0,0 +1,3 @@
+# Glamour
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/glamour.gif" />

examples/help/README.md

@@ -0,0 +1,3 @@
+# Help
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/help.gif" />

examples/http/README.md

@@ -0,0 +1,3 @@
+# HTTP
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/http.gif" />

examples/list-default/README.md

@@ -0,0 +1,3 @@
+# Default List
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/list-default.gif" />

examples/list-fancy/README.md

@@ -0,0 +1,3 @@
+# Fancy List
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/list-fancy.gif" />

examples/list-simple/README.md

@@ -0,0 +1,3 @@
+# Simple List
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/list-simple.gif" />

examples/mouse/README.md

@@ -0,0 +1,3 @@
+# Mouse
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/mouse.gif" />

examples/package-manager/README.md

@@ -0,0 +1,3 @@
+# Package Manager
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/package-manager.gif" />

examples/pager/README.md

@@ -0,0 +1,3 @@
+# Pager
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/pager.gif" />

examples/paginator/README.md

@@ -0,0 +1,3 @@
+# Paginator
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/paginator.gif" />

examples/pipe/README.md

@@ -0,0 +1,3 @@
+# Pipe
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/pipe.gif" />

examples/progress-animated/README.md

@@ -0,0 +1,3 @@
+# Animated Progress
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/progress-animated.gif" />

examples/progress-static/README.md

@@ -0,0 +1,3 @@
+# Static Progress
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/progress-static.gif" />

examples/realtime/README.md

@@ -0,0 +1,3 @@
+# Real Time
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/realtime.gif" />

examples/result/README.md

@@ -0,0 +1,3 @@
+# Result
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/result.gif" />

examples/send-msg/README.md

@@ -0,0 +1,3 @@
+# Send Msg
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/send-msg.gif" />

examples/sequence/README.md

@@ -0,0 +1,3 @@
+# Sequence
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/sequence.gif" />

examples/simple/README.md

@@ -0,0 +1,3 @@
+# Simple
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/simple.gif" />

examples/spinner/README.md

@@ -0,0 +1,3 @@
+# Spinner
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/spinner.gif" />

examples/spinners/README.md

@@ -0,0 +1,3 @@
+# Spinners
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/spinners.gif" />

examples/split-editors/README.md

@@ -0,0 +1,3 @@
+# Split Editors
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/split-editors.gif" />

examples/split-editors/main.go

@@ -28,6 +28,9 @@ var (
 	placeholderStyle = lipgloss.NewStyle().
 				Foreground(lipgloss.Color("238"))
 
+	endOfBufferStyle = lipgloss.NewStyle().
+				Foreground(lipgloss.Color("235"))
+
 	focusedPlaceholderStyle = lipgloss.NewStyle().
 				Foreground(lipgloss.Color("99"))
 
@@ -54,6 +57,8 @@ func newTextarea() textarea.Model {
 	t.FocusedStyle.CursorLine = cursorLineStyle
 	t.FocusedStyle.Base = focusedBorderStyle
 	t.BlurredStyle.Base = blurredBorderStyle
+	t.FocusedStyle.EndOfBuffer = endOfBufferStyle
+	t.BlurredStyle.EndOfBuffer = endOfBufferStyle
 	t.KeyMap.DeleteWordBackward.SetEnabled(false)
 	t.KeyMap.LineNext = key.NewBinding(key.WithKeys("down"))
 	t.KeyMap.LinePrevious = key.NewBinding(key.WithKeys("up"))

examples/stopwatch/README.md

@@ -0,0 +1,3 @@
+# Stopwatch
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/stopwatch.gif" />

examples/table/README.md

@@ -0,0 +1,3 @@
+# Table
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/table.gif" />

examples/tabs/README.md

@@ -0,0 +1,3 @@
+# Tabs
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/tabs.gif" />

examples/textarea/README.md

@@ -0,0 +1,3 @@
+# Text Area
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/textarea.gif" />

examples/textinput/README.md

@@ -0,0 +1,3 @@
+# Text Input
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/textinput.gif" />

examples/textinputs/README.md

@@ -0,0 +1,3 @@
+# Text Inputs
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/textinputs.gif" />

examples/timer/README.md

@@ -0,0 +1,3 @@
+# Timer
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/timer.gif" />

examples/tui-daemon-combo/README.md

@@ -0,0 +1,3 @@
+# TUI Daemon
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/tui-daemon-combo.gif" />

examples/views/README.md

@@ -0,0 +1,3 @@
+# Views
+
+<img width="800" src="https://stuff.charm.sh/bubbletea-examples/views.gif" />