From 70576bc9e0c6e41b19d67b33e63f3b4f39d7f989 Mon Sep 17 00:00:00 2001 From: Maas Lalani Date: Mon, 3 Oct 2022 12:06:18 -0400 Subject: [PATCH] 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 | 328 +++++++++++++++++++++++++++ examples/altscreen-toggle/README.md | 3 + examples/chat/README.md | 3 + examples/chat/main.go | 8 +- examples/composable-views/README.md | 3 + examples/composable-views/main.go | 10 +- examples/credit-card-form/README.md | 3 + examples/debounce/README.md | 3 + examples/exec/README.md | 3 + examples/fullscreen/README.md | 3 + examples/glamour/README.md | 3 + examples/help/README.md | 3 + examples/http/README.md | 3 + examples/list-default/README.md | 3 + examples/list-fancy/README.md | 3 + examples/list-simple/README.md | 3 + examples/mouse/README.md | 3 + examples/package-manager/README.md | 3 + examples/pager/README.md | 3 + examples/paginator/README.md | 3 + examples/pipe/README.md | 3 + examples/progress-animated/README.md | 3 + examples/progress-static/README.md | 3 + examples/realtime/README.md | 3 + examples/result/README.md | 3 + examples/send-msg/README.md | 3 + examples/sequence/README.md | 3 + examples/simple/README.md | 3 + examples/spinner/README.md | 3 + examples/spinners/README.md | 3 + examples/split-editors/README.md | 3 + examples/split-editors/main.go | 5 + examples/stopwatch/README.md | 3 + examples/table/README.md | 3 + examples/tabs/README.md | 3 + examples/textarea/README.md | 3 + examples/textinput/README.md | 3 + examples/textinputs/README.md | 3 + examples/timer/README.md | 3 + examples/tui-daemon-combo/README.md | 3 + examples/views/README.md | 3 + 41 files changed, 454 insertions(+), 8 deletions(-) create mode 100644 examples/README.md create mode 100644 examples/altscreen-toggle/README.md create mode 100644 examples/chat/README.md create mode 100644 examples/composable-views/README.md create mode 100644 examples/credit-card-form/README.md create mode 100644 examples/debounce/README.md create mode 100644 examples/exec/README.md create mode 100644 examples/fullscreen/README.md create mode 100644 examples/glamour/README.md create mode 100644 examples/help/README.md create mode 100644 examples/http/README.md create mode 100644 examples/list-default/README.md create mode 100644 examples/list-fancy/README.md create mode 100644 examples/list-simple/README.md create mode 100644 examples/mouse/README.md create mode 100644 examples/package-manager/README.md create mode 100644 examples/pager/README.md create mode 100644 examples/paginator/README.md create mode 100644 examples/pipe/README.md create mode 100644 examples/progress-animated/README.md create mode 100644 examples/progress-static/README.md create mode 100644 examples/realtime/README.md create mode 100644 examples/result/README.md create mode 100644 examples/send-msg/README.md create mode 100644 examples/sequence/README.md create mode 100644 examples/simple/README.md create mode 100644 examples/spinner/README.md create mode 100644 examples/spinners/README.md create mode 100644 examples/split-editors/README.md create mode 100644 examples/stopwatch/README.md create mode 100644 examples/table/README.md create mode 100644 examples/tabs/README.md create mode 100644 examples/textarea/README.md create mode 100644 examples/textinput/README.md create mode 100644 examples/textinputs/README.md create mode 100644 examples/timer/README.md create mode 100644 examples/tui-daemon-combo/README.md create mode 100644 examples/views/README.md diff --git a/examples/README.md b/examples/README.md new file mode 100644 index 0000000..c829edc --- /dev/null +++ b/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. + + + + + +### Chat + +The `chat` examples shows a basic chat application with a multi-line `textarea` +input. + + + + + +### 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. + + + + + +### 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. + + + + + +### Debounce + +The `debounce` example shows how to throttle key presses to avoid overloading +your Bubble Tea application. + + + + + +### Exec + +The `exec` example shows how to execute a running command during the execution +of a Bubble Tea application such as launching an `EDITOR`. + + + + + +### Full Screen + +The `fullscreen` example shows how to make a Bubble Tea application fullscreen. + + + + + +### Glamour + +The `glamour` example shows how to use [Glamour](https://github.com/charmbracelet/glamour) inside a viewport bubble. + + + + + +### Help + +The `help` example shows how to use the `help` bubble to display help to the +user of your application. + + + + + +### Http + +The `http` example shows how to make an `http` call within your Bubble Tea +application. + + + + + +### Default List + +The `list-default` example shows how to use the list bubble. + + + + + +### Fancy List + +The `list-fancy` example shows how to use the list bubble with extra customizations. + + + + + +### Simple List + +The `list-simple` example shows how to use the list and customize it to have a simpler, more compact, appearance. + + + + + +### Mouse + +The `mouse` example shows how to receive mouse events in a Bubble Tea +application. + + + Code + + +### Package Manager + +The `package-manager` example shows how to build an interface for a package +manager using the `tea.Println` feature. + + + + + +### Pager + +The `pager` example shows how to build a simple pager application similar to +`less`. + + + + + +### Paginator + +The `paginator` example shows how to build a simple paginated list. + + + + + +### Pipe + +The `pipe` example demonstrates using shell pipes to communicate with Bubble +Tea applications. + + + + + +### Animated Progress + +The `progress-animated` example shows how to build a progress bar with an +animated progression. + + + + + +### Download Progress + +The `progress-download` example demonstrates how to download a file while +indicating download progress through Bubble Tea. + + + Code + + +### Static Progress + +The `progress-static` example shows a progress bar with static incrementation +of progress. + + + + + +### Real Time + +The `realtime` example demonstrates the use of go channels to perform realtime +communication with a Bubble Tea application. + + + + + +### Result + +The `result` example shows a choice menu with the ability to select an option. + + + + + +### Send Msg + +The `send-msg` example demonstrates the usage of custom `tea.Msg`s. + + + + + +### Sequence + +The `sequence` example demonstrates the `tea.Sequence` command. + + + + + +### Simple + +The `simple` example shows a very simple Bubble Tea application. + + + + + +### Spinner + +The `spinner` example demonstrates a spinner bubble being used to indicate loading. + + + + + +### Spinners + +The `spinner` example shows various spinner types that are available. + + + + + +### Split Editors + +The `split-editors` example shows multiple `textarea`s being used in a single +application and being able to switch focus between them. + + + + + +### Stop Watch + +The `stopwatch` example shows a sample stop watch built with Bubble Tea. + + + + + +### Table + +The `table` example demonstrates the table bubble being used to display tabular +data. + + + + + +### Tabs + +The `tabs` example demonstrates tabbed navigation styled with [Lip Gloss](https://github.com/charmbracelet/lipgloss). + + + + + +### Text Area + +The `textarea` example demonstrates a simple Bubble Tea application using a +`textarea` bubble. + + + + + +### Text Input + +The `textinput` example demonstrates a simple Bubble Tea application using a `textinput` bubble. + + + + + +### Multiple Text Inputs + +The `textinputs` example shows multiple `textinputs` and being able to switch +focus between them as well as changing the cursor mode. + + + + + +### Timer + +The `timer` example shows a simple timer built with Bubble Tea. + + + + + +### TUI Daemon + +The `tui-daemon-combo` demonstrates building a text-user interface along with a +daemon mode using Bubble Tea. + + + + + +### Views + +The `views` example demonstrates how to build a Bubble Tea application with +multiple views and switch between them. + + + + + diff --git a/examples/altscreen-toggle/README.md b/examples/altscreen-toggle/README.md new file mode 100644 index 0000000..73f0df7 --- /dev/null +++ b/examples/altscreen-toggle/README.md @@ -0,0 +1,3 @@ +# Alt Screen Toggle + + diff --git a/examples/chat/README.md b/examples/chat/README.md new file mode 100644 index 0000000..4d0f51e --- /dev/null +++ b/examples/chat/README.md @@ -0,0 +1,3 @@ +# Chat + + diff --git a/examples/chat/main.go b/examples/chat/main.go index bbf3b3a..3d04a49 100644 --- a/examples/chat/main.go +++ b/examples/chat/main.go @@ -51,11 +51,9 @@ func initialModel() model { ta.ShowLineNumbers = false - vp := viewport.New(30, 10) - vp.SetContent(`Welcome to the Bubbles multi-line text input! -Try typing any message and pressing ENTER. -If you write a long message, it will automatically wrap :D - `) + vp := viewport.New(30, 5) + vp.SetContent(`Welcome to the chat room! +Type a message and press Enter to send.`) ta.KeyMap.InsertNewline.SetEnabled(false) diff --git a/examples/composable-views/README.md b/examples/composable-views/README.md new file mode 100644 index 0000000..7aaaceb --- /dev/null +++ b/examples/composable-views/README.md @@ -0,0 +1,3 @@ +# Composable Views + + diff --git a/examples/composable-views/main.go b/examples/composable-views/main.go index 2167d53..1dbe4f9 100644 --- a/examples/composable-views/main.go +++ b/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 } diff --git a/examples/credit-card-form/README.md b/examples/credit-card-form/README.md new file mode 100644 index 0000000..8c4e2b1 --- /dev/null +++ b/examples/credit-card-form/README.md @@ -0,0 +1,3 @@ +# Credit Card Form + + diff --git a/examples/debounce/README.md b/examples/debounce/README.md new file mode 100644 index 0000000..b3f79ca --- /dev/null +++ b/examples/debounce/README.md @@ -0,0 +1,3 @@ +# Debounce + + diff --git a/examples/exec/README.md b/examples/exec/README.md new file mode 100644 index 0000000..d9ba184 --- /dev/null +++ b/examples/exec/README.md @@ -0,0 +1,3 @@ +# Exec + + diff --git a/examples/fullscreen/README.md b/examples/fullscreen/README.md new file mode 100644 index 0000000..b8f1650 --- /dev/null +++ b/examples/fullscreen/README.md @@ -0,0 +1,3 @@ +# Full Screen + + diff --git a/examples/glamour/README.md b/examples/glamour/README.md new file mode 100644 index 0000000..c63c5e7 --- /dev/null +++ b/examples/glamour/README.md @@ -0,0 +1,3 @@ +# Glamour + + diff --git a/examples/help/README.md b/examples/help/README.md new file mode 100644 index 0000000..7ca37ac --- /dev/null +++ b/examples/help/README.md @@ -0,0 +1,3 @@ +# Help + + diff --git a/examples/http/README.md b/examples/http/README.md new file mode 100644 index 0000000..559d8d7 --- /dev/null +++ b/examples/http/README.md @@ -0,0 +1,3 @@ +# HTTP + + diff --git a/examples/list-default/README.md b/examples/list-default/README.md new file mode 100644 index 0000000..b346811 --- /dev/null +++ b/examples/list-default/README.md @@ -0,0 +1,3 @@ +# Default List + + diff --git a/examples/list-fancy/README.md b/examples/list-fancy/README.md new file mode 100644 index 0000000..0ea46e5 --- /dev/null +++ b/examples/list-fancy/README.md @@ -0,0 +1,3 @@ +# Fancy List + + diff --git a/examples/list-simple/README.md b/examples/list-simple/README.md new file mode 100644 index 0000000..8ab2d73 --- /dev/null +++ b/examples/list-simple/README.md @@ -0,0 +1,3 @@ +# Simple List + + diff --git a/examples/mouse/README.md b/examples/mouse/README.md new file mode 100644 index 0000000..aa69fcd --- /dev/null +++ b/examples/mouse/README.md @@ -0,0 +1,3 @@ +# Mouse + + diff --git a/examples/package-manager/README.md b/examples/package-manager/README.md new file mode 100644 index 0000000..099de9d --- /dev/null +++ b/examples/package-manager/README.md @@ -0,0 +1,3 @@ +# Package Manager + + diff --git a/examples/pager/README.md b/examples/pager/README.md new file mode 100644 index 0000000..92b778f --- /dev/null +++ b/examples/pager/README.md @@ -0,0 +1,3 @@ +# Pager + + diff --git a/examples/paginator/README.md b/examples/paginator/README.md new file mode 100644 index 0000000..426485c --- /dev/null +++ b/examples/paginator/README.md @@ -0,0 +1,3 @@ +# Paginator + + diff --git a/examples/pipe/README.md b/examples/pipe/README.md new file mode 100644 index 0000000..18d8ff2 --- /dev/null +++ b/examples/pipe/README.md @@ -0,0 +1,3 @@ +# Pipe + + diff --git a/examples/progress-animated/README.md b/examples/progress-animated/README.md new file mode 100644 index 0000000..1d1e9c1 --- /dev/null +++ b/examples/progress-animated/README.md @@ -0,0 +1,3 @@ +# Animated Progress + + diff --git a/examples/progress-static/README.md b/examples/progress-static/README.md new file mode 100644 index 0000000..6330364 --- /dev/null +++ b/examples/progress-static/README.md @@ -0,0 +1,3 @@ +# Static Progress + + diff --git a/examples/realtime/README.md b/examples/realtime/README.md new file mode 100644 index 0000000..559b4ea --- /dev/null +++ b/examples/realtime/README.md @@ -0,0 +1,3 @@ +# Real Time + + diff --git a/examples/result/README.md b/examples/result/README.md new file mode 100644 index 0000000..a4aa4dd --- /dev/null +++ b/examples/result/README.md @@ -0,0 +1,3 @@ +# Result + + diff --git a/examples/send-msg/README.md b/examples/send-msg/README.md new file mode 100644 index 0000000..28e1f10 --- /dev/null +++ b/examples/send-msg/README.md @@ -0,0 +1,3 @@ +# Send Msg + + diff --git a/examples/sequence/README.md b/examples/sequence/README.md new file mode 100644 index 0000000..567b405 --- /dev/null +++ b/examples/sequence/README.md @@ -0,0 +1,3 @@ +# Sequence + + diff --git a/examples/simple/README.md b/examples/simple/README.md new file mode 100644 index 0000000..e467ce0 --- /dev/null +++ b/examples/simple/README.md @@ -0,0 +1,3 @@ +# Simple + + diff --git a/examples/spinner/README.md b/examples/spinner/README.md new file mode 100644 index 0000000..54e3e1b --- /dev/null +++ b/examples/spinner/README.md @@ -0,0 +1,3 @@ +# Spinner + + diff --git a/examples/spinners/README.md b/examples/spinners/README.md new file mode 100644 index 0000000..c345100 --- /dev/null +++ b/examples/spinners/README.md @@ -0,0 +1,3 @@ +# Spinners + + diff --git a/examples/split-editors/README.md b/examples/split-editors/README.md new file mode 100644 index 0000000..2c3d128 --- /dev/null +++ b/examples/split-editors/README.md @@ -0,0 +1,3 @@ +# Split Editors + + diff --git a/examples/split-editors/main.go b/examples/split-editors/main.go index dba2731..5e7f404 100644 --- a/examples/split-editors/main.go +++ b/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")) diff --git a/examples/stopwatch/README.md b/examples/stopwatch/README.md new file mode 100644 index 0000000..b873877 --- /dev/null +++ b/examples/stopwatch/README.md @@ -0,0 +1,3 @@ +# Stopwatch + + diff --git a/examples/table/README.md b/examples/table/README.md new file mode 100644 index 0000000..06ec39a --- /dev/null +++ b/examples/table/README.md @@ -0,0 +1,3 @@ +# Table + + diff --git a/examples/tabs/README.md b/examples/tabs/README.md new file mode 100644 index 0000000..7587251 --- /dev/null +++ b/examples/tabs/README.md @@ -0,0 +1,3 @@ +# Tabs + + diff --git a/examples/textarea/README.md b/examples/textarea/README.md new file mode 100644 index 0000000..c1f9f2e --- /dev/null +++ b/examples/textarea/README.md @@ -0,0 +1,3 @@ +# Text Area + + diff --git a/examples/textinput/README.md b/examples/textinput/README.md new file mode 100644 index 0000000..275d763 --- /dev/null +++ b/examples/textinput/README.md @@ -0,0 +1,3 @@ +# Text Input + + diff --git a/examples/textinputs/README.md b/examples/textinputs/README.md new file mode 100644 index 0000000..deaa096 --- /dev/null +++ b/examples/textinputs/README.md @@ -0,0 +1,3 @@ +# Text Inputs + + diff --git a/examples/timer/README.md b/examples/timer/README.md new file mode 100644 index 0000000..24e67cb --- /dev/null +++ b/examples/timer/README.md @@ -0,0 +1,3 @@ +# Timer + + diff --git a/examples/tui-daemon-combo/README.md b/examples/tui-daemon-combo/README.md new file mode 100644 index 0000000..a0be282 --- /dev/null +++ b/examples/tui-daemon-combo/README.md @@ -0,0 +1,3 @@ +# TUI Daemon + + diff --git a/examples/views/README.md b/examples/views/README.md new file mode 100644 index 0000000..59aebcf --- /dev/null +++ b/examples/views/README.md @@ -0,0 +1,3 @@ +# Views + +