WIP: widget showcase (#245)

* Create Widgets showcase

* tweak calendary for widget showcase

* Add link badge

* tweak barchart showcase

* move widget showcase examples to examples module

* Add links to showcase index cards

* Add chart to widget showcase

* Add chart and placeholders for help

astro.config.mjs

@@ -252,7 +252,13 @@ export default defineConfig({
             { label: "v0.21", link: "/highlights/v021/" },
           ],
         },
-        { label: "Showcase", link: "/showcase/" },
+        {
+          label: "Showcase", collapsed: true, items: [
+            { label: "Showcase", link: "/showcase/" },
+            { label: "Apps", link: "/showcase/apps/" },
+            { label: "Widgets", link: "/showcase/widgets/" },
+          ],
+        },
         { label: "References", link: "/references/" },
         {
           label: "Developer Guide",

code/widget-showcase/Cargo.toml

@@ -0,0 +1,21 @@
+[package]
+name = "widget-showcase"
+version.workspace = true
+authors.workspace = true
+description.workspace = true
+documentation.workspace = true
+repository.workspace = true
+keywords.workspace = true
+license.workspace = true
+edition.workspace = true
+rust-version.workspace = true
+publish.workspace = true
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+clap = { version = "4.4.11", features = ["derive"] }
+color-eyre = "0.6.2"
+crossterm = "0.27.0"
+ratatui = { version = "0.24.0", features = ["all-widgets"] }
+time = "0.3.30"

code/widget-showcase/README.md

@@ -0,0 +1,30 @@
+# Widget Showcase
+
+The purpose of this project is to create small single examples for display at
+<https://ratatui.rs/showcase/widgets>. Contributions welcome!
+
+It's encourage to make examples of third party widgets too using this project, though if they are
+more advanced than the ones already in this repo (i.e. require anything beyond just rendering), you
+may need to add another binary to the source project.
+
+## Contributing
+
+To add each widget:
+
+- Add a widget to `enum Widget` in [main.rs](./src/main.rs)
+- Add a new module to [examples.rs](./src/examples.rs)
+- Add a render function to the module
+- Call the render function from `render_frame` in `main.rs`
+- Create a VHS tape (copy from the existing tapes) and edit the output and screenshot
+- Run `~/go/bin/vhs <tapefile>.tape` (Install VHS from main to get the Aardvark Blue theme and the
+  Screenshot command).
+- Add the image to the [widgets showcase](../../src/content/docs/showcase/widgets/index.mdx)
+
+## Design guidelines
+
+For each example
+
+- Make it look nice
+- Keep it consistent with the other widgets
+- Keep it simple (less is more) - example barchart has 3 items not 20.
+- Avoid animation unless necessary (probably)

code/widget-showcase/bar_chart.tape

@@ -0,0 +1,10 @@
+# This requires vhs installed from source for the updated theme and screenshot command
+# go install github.com/charmbracelet/vhs@main
+Output "../../src/content/docs/showcase/widgets/bar_chart.gif"
+Set Theme "Aardvark Blue"
+Set Width 800
+Set Height 300
+Type "cargo run -- -w bar-chart" Enter
+Sleep 2s
+Screenshot "../../src/content/docs/showcase/widgets/bar_chart.png"
+Sleep 1s

code/widget-showcase/block.tape

@@ -0,0 +1,10 @@
+# This requires vhs installed from source for the updated theme and screenshot command
+# go install github.com/charmbracelet/vhs@main
+Output "../../src/content/docs/showcase/widgets/block.gif"
+Set Theme "Aardvark Blue"
+Set Width 800
+Set Height 300
+Type "cargo run -- -w block" Enter
+Sleep 2s
+Screenshot "../../src/content/docs/showcase/widgets/block.png"
+Sleep 1s

code/widget-showcase/calendar.tape

@@ -0,0 +1,10 @@
+# This requires vhs installed from source for the updated theme and screenshot command
+# go install github.com/charmbracelet/vhs@main
+Output "../../src/content/docs/showcase/widgets/calendar.gif"
+Set Theme "Aardvark Blue"
+Set Width 800
+Set Height 300
+Type "cargo run -- -w calendar" Enter
+Sleep 2s
+Screenshot "../../src/content/docs/showcase/widgets/calendar.png"
+Sleep 1s

code/widget-showcase/chart.tape

@@ -0,0 +1,10 @@
+# This requires vhs installed from source for the updated theme and screenshot command
+# go install github.com/charmbracelet/vhs@main
+Output "../../src/content/docs/showcase/widgets/chart.gif"
+Set Theme "Aardvark Blue"
+Set Width 800
+Set Height 300
+Type "cargo run -- -w chart" Enter
+Sleep 2s
+Screenshot "../../src/content/docs/showcase/widgets/chart.png"
+Sleep 1s

code/widget-showcase/src/examples.rs

@@ -0,0 +1,4 @@
+pub mod bar_chart;
+pub mod block;
+pub mod calendar;
+pub mod chart;

code/widget-showcase/src/examples/bar_chart.rs

@@ -0,0 +1,33 @@
+use ratatui::{prelude::*, widgets::*};
+
+pub fn render(frame: &mut Frame) {
+    let data = BarGroup::default().bars(&[
+        Bar::default()
+            .label("Red".into())
+            .value(2)
+            .style(Style::new().red()),
+        Bar::default()
+            .label("Green".into())
+            .value(7)
+            .style(Style::new().green()),
+        Bar::default()
+            .label("Blue".into())
+            .value(11)
+            .style(Style::new().blue()),
+    ]);
+    let vertical = BarChart::default()
+        .bar_width(5)
+        .bar_gap(1)
+        .data(data.clone());
+    let horizontal = BarChart::default()
+        .bar_width(1)
+        .bar_gap(1)
+        .data(data)
+        .direction(Direction::Horizontal);
+    let layout = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Length(20), Constraint::Min(0)])
+        .split(frame.size());
+    frame.render_widget(vertical, layout[0]);
+    frame.render_widget(horizontal, layout[1]);
+}

code/widget-showcase/src/examples/block.rs

@@ -0,0 +1,37 @@
+use ratatui::{
+    prelude::*,
+    widgets::{block::*, *},
+};
+
+pub fn render(frame: &mut Frame) {
+    // intentionally mismatched border types to show how they look
+    let border_set = symbols::border::Set {
+        top_left: symbols::line::ROUNDED.top_left,
+        top_right: symbols::line::THICK.top_right,
+        bottom_left: symbols::line::ROUNDED.bottom_left,
+        bottom_right: symbols::border::THICK.bottom_right,
+        vertical_left: symbols::line::ROUNDED.vertical,
+        vertical_right: symbols::line::THICK.vertical,
+        horizontal_top: symbols::line::NORMAL.horizontal,
+        horizontal_bottom: symbols::line::DOUBLE.horizontal,
+    };
+    let block = Block::default()
+        .title("Left Title".yellow())
+        .title(Title::from("Center title".blue()).alignment(Alignment::Center))
+        .title(Title::from("Right Title".green()).alignment(Alignment::Right))
+        .title(
+            Title::from("Bottom Center title".blue())
+                .alignment(Alignment::Center)
+                .position(block::Position::Bottom),
+        )
+        .borders(Borders::ALL)
+        .border_set(border_set)
+        .border_style(Style::default().fg(Color::Red));
+    frame.render_widget(
+        Paragraph::new("A Block widget that wraps other widgets.".italic())
+            .block(block)
+            .alignment(Alignment::Center)
+            .wrap(Wrap { trim: true }),
+        frame.size(),
+    );
+}

code/widget-showcase/src/examples/calendar.rs

@@ -0,0 +1,50 @@
+use ratatui::{
+    prelude::*,
+    widgets::{calendar::*, *},
+};
+use time::{Date, Month};
+
+pub fn render(frame: &mut Frame) -> color_eyre::Result<()> {
+    let default_style = Style::new().black().on_gray();
+
+    let january = Date::from_calendar_date(2023, Month::January, 1)?;
+    let new_years_day = Date::from_calendar_date(2023, Month::January, 2)?;
+    let mlk_day = Date::from_calendar_date(2023, Month::January, 16)?;
+    let australia_day = Date::from_calendar_date(2023, Month::January, 26)?;
+    let mut events = CalendarEventStore::default();
+    events.add(new_years_day, Style::new().on_blue());
+    events.add(mlk_day, Style::new().dark_gray().on_black());
+    events.add(
+        australia_day,
+        Style::new().not_bold().green().on_light_yellow(),
+    );
+
+    let january_calendar = Monthly::new(january, events)
+        .show_month_header(Style::default())
+        .default_style(default_style);
+
+    let february = Date::from_calendar_date(2023, Month::February, 1)?;
+    let washingtons_birthday =
+        Date::from_calendar_date(2023, Month::February, 20)?;
+    let mut events = CalendarEventStore::default();
+    events.add(
+        washingtons_birthday,
+        Style::new()
+            .red()
+            .on_white()
+            .underline_color(Color::Blue)
+            .underlined(),
+    );
+    let february_calendar = Monthly::new(february, events)
+        .show_weekdays_header(Style::default())
+        .show_surrounding(Style::new().dim())
+        .default_style(default_style);
+
+    let layout = Layout::default()
+        .direction(Direction::Horizontal)
+        .constraints([Constraint::Length(23), Constraint::Min(0)])
+        .split(frame.size());
+    frame.render_widget(january_calendar, layout[0]);
+    frame.render_widget(february_calendar, layout[1]);
+    Ok(())
+}