Implement widgets command

src/textual_dev/cli.py

@@ -219,6 +219,14 @@ def colors() -> None:
     ColorsApp().run()
 
 
+@run.command("widgets")
+def widgets() -> None:
+    """Explore possible widgets."""
+    from textual_dev.previews import WidgetsApp
+
+    WidgetsApp().run()
+
+
 @run.command("keys")
 def keys() -> None:
     """Show key events."""

src/textual_dev/previews/__init__.py

@@ -5,4 +5,4 @@
 from .easing import EasingApp
 from .keys import KeysApp
 
-__all__ = ["BorderApp", "ColorsApp", "EasingApp", "KeysApp"]
+__all__ = ["BorderApp", "ColorsApp", "EasingApp", "KeysApp", "WidgetsApp"]

src/textual_dev/previews/widgets.css

@@ -0,0 +1,142 @@
+Screen {
+    align: center middle;
+    overflow: auto;
+}
+
+#Button Button {
+    margin: 1 2;
+}
+
+#Button VerticalScroll {
+    width: 24;
+}
+
+#Checkbox VerticalScroll {
+    width: auto;
+    height: auto;
+    background: $boost;
+    padding: 2;
+}
+
+#ListItem ListView {
+    width: 34;
+    height: auto;
+    margin: 2 2;
+}
+
+#ListItem Label {
+    padding: 1 2;
+}
+
+
+#OptionList OptionList {
+    width: 70%;
+    height: 80%;
+}
+
+
+/*Placeholder*/
+
+#top {
+    height: 50%;
+    width: 100%;
+    layout: grid;
+    grid-size: 2 2;
+}
+
+#left {
+    row-span: 2;
+}
+
+#bot {
+    height: 50%;
+    width: 100%;
+    layout: grid;
+    grid-size: 8 8;
+}
+
+#c1 {
+    row-span: 4;
+    column-span: 8;
+    height: 100%;
+}
+
+#col1, #col2, #col3 {
+    width: 1fr;
+}
+
+#p1 {
+    row-span: 4;
+    column-span: 4;
+}
+
+#p2 {
+    row-span: 2;
+    column-span: 4;
+}
+
+#p3 {
+    row-span: 2;
+    column-span: 2;
+}
+
+#p4 {
+    row-span: 1;
+    column-span: 2;
+}
+
+#RadioButton RadioSet {
+    width: 50%;
+}
+
+#RadioSet Horizontal {
+    align: center middle;
+    height: auto;
+}
+
+#RadioSet RadioSet {
+    width: 45%;
+}
+
+#Select Select {
+    width: 60;
+    margin: 2;
+}
+
+#SelectionList SelectionList {
+    padding: 1;
+    border: solid $accent;
+    width: 80%;
+    height: 80%;
+}
+
+
+
+#Switch {
+   align: center middle;
+}
+
+#Switch .container {
+    height: auto;
+    width: auto;
+}
+
+#Switch Switch {
+    height: auto;
+    width: auto;
+}
+
+#Switch .label {
+    height: 3;
+    content-align: center middle;
+    width: auto;
+}
+
+#custom-design {
+    background: darkslategrey;
+}
+
+#custom-design > .switch--slider {
+    color: dodgerblue;
+    background: darkslateblue;
+}

src/textual_dev/previews/widgets.py

@@ -0,0 +1,101 @@
+from textual.app import App, ComposeResult
+from textual.containers import Vertical
+from textual.widgets import Button, ContentSwitcher
+
+from textual_dev.previews.widgets import (
+    option_list_example,
+    button_example,
+    checkbox_example,
+    list_item_example,
+    data_table_example,
+    markdown_viewer_example,
+    placeholder_example,
+    pretty_example,
+    directory_tree_example,
+    footer_example,
+    header_example,
+    input_example,
+    label_example,
+    loading_example,
+    markdown_example,
+    radio_button_example,
+    radio_set_example,
+    select_example,
+    selection_list_example,
+    sparkline_example,
+    static_example,
+    switch_example,
+    tree_example,
+)
+
+WIDGETS = {
+    "Button": button_example,
+    "Checkbox": checkbox_example,
+    # ContentSwitcher missing
+    "DataTable": data_table_example,
+    "DirectoryTree": directory_tree_example,
+    "Footer": footer_example,
+    "Header": header_example,
+    "Input": input_example,
+    "Label": label_example,
+    "ListItem": list_item_example,
+    # ListView missing
+    "Loading": loading_example,
+    "MarkdownViewer": markdown_viewer_example,
+    "Markdown": markdown_example,
+    "OptionList": option_list_example,
+    "Placeholder": placeholder_example,
+    "Pretty": pretty_example,
+    # ProgressBar missing
+    "RadioButton": radio_button_example,
+    "RadioSet": radio_set_example,
+    "Select": select_example,
+    "SelectionList": selection_list_example,
+    "Sparkline": sparkline_example,
+    "Static": static_example,
+    "Switch": switch_example,
+    # TabbedContatn missing
+    # Tabs missing
+    # TextLog missing
+    "Tree": tree_example,
+}
+
+
+class WidgetButtons(Vertical):
+    DEFAULT_CSS = """
+    WidgetButtons {
+        dock: left;
+        width: 32;
+        overflow-y: scroll;
+    }
+
+    WidgetButtons > Button {
+        width: 100%;
+    }
+    """
+
+    def compose(self) -> ComposeResult:
+        for widget in WIDGETS.keys():
+            yield Button(widget, id=widget)
+
+
+class WidgetsApp(App[None]):
+    """Demonstrates widget types."""
+
+    CSS_PATH = "widgets.css"
+
+    def compose(self) -> ComposeResult:
+        yield WidgetButtons()
+
+        first_button = list(WIDGETS.keys())[0]
+
+        with ContentSwitcher(initial=first_button):
+            for widget_name, widget in WIDGETS.items():
+                yield from widget(id=widget_name)
+
+    def on_button_pressed(self, event: Button.Pressed) -> None:
+        self.query_one(ContentSwitcher).current = event.button.id
+
+
+if __name__ == "__main__":
+    WidgetsApp().run()

src/textual_dev/previews/widgets/__init__.py

@@ -0,0 +1,120 @@
+import random
+from statistics import mean
+
+from textual.app import ComposeResult
+from textual.containers import Container
+from textual.widgets import (
+    DirectoryTree,
+    Footer,
+    Header,
+    Input,
+    Label,
+    ListView,
+    ListItem,
+    LoadingIndicator,
+    Sparkline,
+    Static,
+    Tree,
+)
+
+from .button import button_example
+from .checkbox import checkbox_example
+from .data_table import data_table_example
+from .markdown import markdown_viewer_example, markdown_example
+from .option_list import option_list_example
+from .placeholder import placeholder_example
+from .pretty import pretty_example
+from .radio import radio_button_example, radio_set_example
+from .select import select_example, selection_list_example
+from .switch import switch_example
+
+
+def directory_tree_example(id: str) -> ComposeResult:
+    yield Container(DirectoryTree("./"), id=id)
+
+
+def footer_example(id: str) -> ComposeResult:
+    yield Container(Footer(), id=id)
+
+
+def header_example(id: str) -> ComposeResult:
+    yield Container(Header(), id=id)
+
+
+def input_example(id: str) -> ComposeResult:
+    yield Container(
+        Input(placeholder="First Name"), Input(placeholder="Last Name"), id=id
+    )
+
+
+def label_example(id: str) -> ComposeResult:
+    yield Container(Label("Hello, world!"), id=id)
+
+
+def list_item_example(id: str) -> ComposeResult:
+    yield Container(
+        ListView(
+            ListItem(Label("One")),
+            ListItem(Label("Two")),
+            ListItem(Label("Three")),
+        ),
+        id=id,
+    )
+
+    yield Footer()
+
+
+def loading_example(id: str) -> ComposeResult:
+    yield Container(LoadingIndicator(), id=id)
+
+
+def sparkline_example(id: str) -> ComposeResult:
+    data = [random.expovariate(1 / 3) for _ in range(1000)]
+
+    yield Container(
+        Sparkline(data, summary_function=max),
+        Sparkline(data, summary_function=mean),
+        Sparkline(data, summary_function=min),
+        id=id,
+    )
+
+
+def static_example(id: str) -> ComposeResult:
+    yield Container(Static("Hello, world!"), id=id)
+
+
+def tree_example(id: str) -> ComposeResult:
+    tree: Tree[dict] = Tree("Dune")
+    tree.root.expand()
+    characters = tree.root.add("Characters", expand=True)
+    characters.add_leaf("Paul")
+    characters.add_leaf("Jessica")
+    characters.add_leaf("Chani")
+    yield Container(tree, id=id)
+
+
+__all__ = [
+    "button_example",
+    "checkbox_example",
+    "data_table_example",
+    "directory_tree_example",
+    "footer_example",
+    "header_example",
+    "input_example",
+    "label_example",
+    "list_item_example",
+    "loading_example",
+    "markdown_viewer_example",
+    "markdown_example",
+    "option_list_example",
+    "placeholder_example",
+    "pretty_example",
+    "radio_button_example",
+    "radio_set_example",
+    "select_example",
+    "selection_list_example",
+    "sparkline_example",
+    "static_example",
+    "switch_example",
+    "tree_example",
+]