Feature: the Modal component. (#418)

CHANGELOG.md

@@ -12,6 +12,9 @@ current (development)
 - Bugfix: Forward the selected/focused area from the child in gridbox.
 - Bugfix: Fix incorrect Canvas computed dimensions.
 
+### Component:
+- Feature: Add the `Modal` component.
+
 ### Screen
 - Feature: add `Box::Union(a,b) -> Box`
 

CMakeLists.txt

@@ -109,6 +109,7 @@ add_library(component
   src/ftxui/component/event.cpp
   src/ftxui/component/input.cpp
   src/ftxui/component/maybe.cpp
+  src/ftxui/component/modal.cpp
   src/ftxui/component/menu.cpp
   src/ftxui/component/radiobox.cpp
   src/ftxui/component/radiobox.cpp

cmake/ftxui_test.cmake

@@ -31,6 +31,7 @@ add_executable(tests
   src/ftxui/component/container_test.cpp
   src/ftxui/component/input_test.cpp
   src/ftxui/component/menu_test.cpp
+  src/ftxui/component/modal_test.cpp
   src/ftxui/component/radiobox_test.cpp
   src/ftxui/component/receiver_test.cpp
   src/ftxui/component/resizable_split_test.cpp

examples/component/CMakeLists.txt

@@ -25,6 +25,7 @@ example(menu_multiple)
 example(menu_style)
 example(menu_underline_animated_gallery)
 example(modal_dialog)
+example(modal_dialog_custom)
 example(nested_screen)
 example(print_key_press)
 example(radiobox)

examples/component/modal_dialog.cpp

@@ -1,94 +1,83 @@
-#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
-#include <string>  // for string, basic_string, char_traits, operator+
-#include <vector>  // for vector
+#include <ftxui/component/component_options.hpp>  // for ButtonOption
+#include <functional>                             // for function
+#include <memory>                                 // for allocator, shared_ptr
 
 #include "ftxui/component/captured_mouse.hpp"  // for ftxui
-#include "ftxui/component/component.hpp"  // for Button, Renderer, Horizontal, Tab
-#include "ftxui/component/component_base.hpp"      // for ComponentBase
-#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
-#include "ftxui/dom/elements.hpp"  // for operator|, Element, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT
+#include "ftxui/component/component.hpp"  // for Button, operator|=, Renderer, Vertical, Modal
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive, Component
+#include "ftxui/dom/elements.hpp"  // for operator|, separator, text, size, Element, vbox, border, GREATER_THAN, WIDTH, center, HEIGHT
+
+using namespace ftxui;
+
+auto button_style = ButtonOption::Animated();
+
+// Definition of the main component. The details are not important.
+Component MainComponent(std::function<void()> show_modal,
+                        std::function<void()> exit) {
+  auto component = Container::Vertical({
+      Button("Show modal", show_modal, button_style),
+      Button("Quit", exit, button_style),
+  });
+  // Polish how the two buttons are rendered:
+  component |= Renderer([&](Element inner) {
+    return vbox({
+               text("Main component"),
+               separator(),
+               inner,
+           })                                //
+           | size(WIDTH, GREATER_THAN, 15)   //
+           | size(HEIGHT, GREATER_THAN, 15)  //
+           | border                          //
+           | center;                         //
+  });
+  return component;
+}
+
+// Definition of the modal component. The details are not important.
+Component ModalComponent(std::function<void()> do_nothing,
+                         std::function<void()> hide_modal) {
+  auto component = Container::Vertical({
+      Button("Do nothing", do_nothing, button_style),
+      Button("Quit modal", hide_modal, button_style),
+  });
+  // Polish how the two buttons are rendered:
+  component |= Renderer([&](Element inner) {
+    return vbox({
+               text("Modal component "),
+               separator(),
+               inner,
+           })                               //
+           | size(WIDTH, GREATER_THAN, 30)  //
+           | border;                        //
+  });
+  return component;
+}
 
 int main(int argc, const char* argv[]) {
-  using namespace ftxui;
   auto screen = ScreenInteractive::TerminalOutput();
 
-  // There are two layers. One at depth = 0 and the modal window at depth = 1;
-  int depth = 0;
+  // State of the application:
+  bool modal_shown = false;
 
-  // The current rating of FTXUI.
-  std::string rating = "3/5 stars";
+  // Some actions modifying the state:
+  auto show_modal = [&] { modal_shown = true; };
+  auto hide_modal = [&] { modal_shown = false; };
+  auto exit = screen.ExitLoopClosure();
+  auto do_nothing = [&] {};
 
-  // At depth=0, two buttons. One for rating FTXUI and one for quitting.
-  auto button_rate_ftxui = Button("Rate FTXUI", [&] { depth = 1; });
-  auto button_quit = Button("Quit", screen.ExitLoopClosure());
+  // Instanciate the main and modal components:
+  auto main_component = MainComponent(show_modal, exit);
+  auto modal_component = ModalComponent(do_nothing, hide_modal);
 
-  auto depth_0_container = Container::Horizontal({
-      button_rate_ftxui,
-      button_quit,
-  });
-  auto depth_0_renderer = Renderer(depth_0_container, [&] {
-    return vbox({
-               text("Modal dialog example"),
-               separator(),
-               text("☆☆☆ FTXUI:" + rating + " ☆☆☆") | bold,
-               filler(),
-               hbox({
-                   button_rate_ftxui->Render(),
-                   filler(),
-                   button_quit->Render(),
-               }),
-           }) |
-           border | size(HEIGHT, GREATER_THAN, 18) | center;
-  });
+  // Use the `Modal` function to use together the main component and its modal
+  // window. The |modal_shown| boolean controls whether the modal is shown or
+  // not.
+  main_component |= Modal(modal_component, &modal_shown);
 
-  // At depth=1, The "modal" window.
-  std::vector<std::string> rating_labels = {
-      "1/5 stars", "2/5 stars", "3/5 stars", "4/5 stars", "5/5 stars",
-  };
-  auto on_rating = [&](std::string new_rating) {
-    rating = new_rating;
-    depth = 0;
-  };
-  auto depth_1_container = Container::Horizontal({
-      Button(&rating_labels[0], [&] { on_rating(rating_labels[0]); }),
-      Button(&rating_labels[1], [&] { on_rating(rating_labels[1]); }),
-      Button(&rating_labels[2], [&] { on_rating(rating_labels[2]); }),
-      Button(&rating_labels[3], [&] { on_rating(rating_labels[3]); }),
-      Button(&rating_labels[4], [&] { on_rating(rating_labels[4]); }),
-  });
-
-  auto depth_1_renderer = Renderer(depth_1_container, [&] {
-    return vbox({
-               text("Do you like FTXUI?"),
-               separator(),
-               hbox(depth_1_container->Render()),
-           }) |
-           border;
-  });
-
-  auto main_container = Container::Tab(
-      {
-          depth_0_renderer,
-          depth_1_renderer,
-      },
-      &depth);
-
-  auto main_renderer = Renderer(main_container, [&] {
-    Element document = depth_0_renderer->Render();
-
-    if (depth == 1) {
-      document = dbox({
-          document,
-          depth_1_renderer->Render() | clear_under | center,
-      });
-    }
-    return document;
-  });
-
-  screen.Loop(main_renderer);
+  screen.Loop(main_component);
   return 0;
 }
 
-// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
 // Use of this source code is governed by the MIT license that can be found in
 // the LICENSE file.

examples/component/modal_dialog_custom.cpp

@@ -0,0 +1,94 @@
+#include <memory>  // for allocator, shared_ptr, __shared_ptr_access
+#include <string>  // for string, basic_string, char_traits, operator+
+#include <vector>  // for vector
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Button, Renderer, Horizontal, Tab
+#include "ftxui/component/component_base.hpp"      // for ComponentBase
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, filler, text, hbox, separator, center, vbox, bold, border, clear_under, dbox, size, GREATER_THAN, HEIGHT
+
+int main(int argc, const char* argv[]) {
+  using namespace ftxui;
+  auto screen = ScreenInteractive::TerminalOutput();
+
+  // There are two layers. One at depth = 0 and the modal window at depth = 1;
+  int depth = 0;
+
+  // The current rating of FTXUI.
+  std::string rating = "3/5 stars";
+
+  // At depth=0, two buttons. One for rating FTXUI and one for quitting.
+  auto button_rate_ftxui = Button("Rate FTXUI", [&] { depth = 1; });
+  auto button_quit = Button("Quit", screen.ExitLoopClosure());
+
+  auto depth_0_container = Container::Horizontal({
+      button_rate_ftxui,
+      button_quit,
+  });
+  auto depth_0_renderer = Renderer(depth_0_container, [&] {
+    return vbox({
+               text("Modal dialog example"),
+               separator(),
+               text("☆☆☆ FTXUI:" + rating + " ☆☆☆") | bold,
+               filler(),
+               hbox({
+                   button_rate_ftxui->Render(),
+                   filler(),
+                   button_quit->Render(),
+               }),
+           }) |
+           border | size(HEIGHT, GREATER_THAN, 18) | center;
+  });
+
+  // At depth=1, The "modal" window.
+  std::vector<std::string> rating_labels = {
+      "1/5 stars", "2/5 stars", "3/5 stars", "4/5 stars", "5/5 stars",
+  };
+  auto on_rating = [&](std::string new_rating) {
+    rating = new_rating;
+    depth = 0;
+  };
+  auto depth_1_container = Container::Horizontal({
+      Button(&rating_labels[0], [&] { on_rating(rating_labels[0]); }),
+      Button(&rating_labels[1], [&] { on_rating(rating_labels[1]); }),
+      Button(&rating_labels[2], [&] { on_rating(rating_labels[2]); }),
+      Button(&rating_labels[3], [&] { on_rating(rating_labels[3]); }),
+      Button(&rating_labels[4], [&] { on_rating(rating_labels[4]); }),
+  });
+
+  auto depth_1_renderer = Renderer(depth_1_container, [&] {
+    return vbox({
+               text("Do you like FTXUI?"),
+               separator(),
+               hbox(depth_1_container->Render()),
+           }) |
+           border;
+  });
+
+  auto main_container = Container::Tab(
+      {
+          depth_0_renderer,
+          depth_1_renderer,
+      },
+      &depth);
+
+  auto main_renderer = Renderer(main_container, [&] {
+    Element document = depth_0_renderer->Render();
+
+    if (depth == 1) {
+      document = dbox({
+          document,
+          depth_1_renderer->Render() | clear_under | center,
+      });
+    }
+    return document;
+  });
+
+  screen.Loop(main_renderer);
+  return 0;
+}
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

include/ftxui/component/component.hpp

@@ -7,9 +7,9 @@
 #include <utility>     // for forward
 #include <vector>      // for vector
 
-#include "ftxui/component/component_base.hpp"     // for Component, Components
-#include "ftxui/component/component_options.hpp"  // for ButtonOption, CheckboxOption, InputOption (ptr only), MenuEntryOption (ptr only), MenuOption, RadioboxOption (ptr only)
-#include "ftxui/dom/elements.hpp"                 // for Element
+#include "ftxui/component/component_base.hpp"  // for Component, Components
+#include "ftxui/component/component_options.hpp"  // for ButtonOption, CheckboxOption, MenuOption
+#include "ftxui/dom/elements.hpp"  // for Element
 #include "ftxui/util/ref.hpp"  // for Ref, ConstStringRef, ConstStringListRef, StringRef
 
 namespace ftxui {
@@ -88,6 +88,9 @@ Component Maybe(Component, std::function<bool()>);
 ComponentDecorator Maybe(const bool* show);
 ComponentDecorator Maybe(std::function<bool()>);
 
+Component Modal(Component main, Component modal, const bool* show_modal);
+ComponentDecorator Modal(Component modal, const bool* show_modal);
+
 Component Collapsible(ConstStringRef label,
                       Component child,
                       Ref<bool> show = false);

src/ftxui/component/animation.cpp

@@ -1,4 +1,4 @@
-#include <cmath>
+#include <cmath>    // IWYU pragma: keep
 #include <ratio>    // for ratio
 #include <utility>  // for move
 

src/ftxui/component/component_options.cpp

@@ -1,5 +1,6 @@
 #include "ftxui/component/component_options.hpp"
 
+#include <ftxui/screen/color.hpp>  // for Color, Color::Black, Color::White, Color::GrayDark, Color::GrayLight
 #include <memory>   // for shared_ptr
 #include <utility>  // for move
 

src/ftxui/component/maybe.cpp

@@ -43,7 +43,7 @@ Component Maybe(Component child, std::function<bool()> show) {
 /// ### Example
 ///
 /// ```cpp
-/// auto component = Renderer([]{ return "Hello World!"; });
+/// auto component = Renderer([]{ return text("Hello World!"); });
 /// auto maybe_component = component | Maybe([&]{ return counter == 42; });
 /// ```
 ComponentDecorator Maybe(std::function<bool()> show) {
@@ -60,7 +60,7 @@ ComponentDecorator Maybe(std::function<bool()> show) {
 /// ### Example
 ///
 /// ```cpp
-/// auto component = Renderer([]{ return "Hello World!"; });
+/// auto component = Renderer([]{ return text("Hello World!"); });
 /// auto maybe_component = Maybe(component, &show);
 /// ```
 Component Maybe(Component child, const bool* show) {
@@ -74,7 +74,7 @@ Component Maybe(Component child, const bool* show) {
 /// ### Example
 ///
 /// ```cpp
-/// auto component = Renderer([]{ return "Hello World!"; });
+/// auto component = Renderer([]{ return text("Hello World!"); });
 /// auto maybe_component = component | Maybe(&show);
 /// ```
 ComponentDecorator Maybe(const bool* show) {

src/ftxui/component/modal.cpp

@@ -0,0 +1,66 @@
+#include <ftxui/component/event.hpp>  // for Event
+#include <ftxui/dom/elements.hpp>  // for operator|, Element, center, clear_under, dbox
+#include <memory>                  // for __shared_ptr_access, shared_ptr
+#include <utility>                 // for move
+
+#include "ftxui/component/component.hpp"  // for Make, Tab, ComponentDecorator, Modal
+#include "ftxui/component/component_base.hpp"  // for Component, ComponentBase
+
+namespace ftxui {
+
+// Add a |modal| window on top of the |main| component. It is shown one on the
+// top of the other when |show_modal| is true.
+/// @ingroup component
+// NOLINTNEXTLINE
+Component Modal(Component main, Component modal, const bool* show_modal) {
+  class Impl : public ComponentBase {
+   public:
+    explicit Impl(Component main, Component modal, const bool* show_modal)
+        : main_(std::move(main)),
+          modal_(std::move(modal)),
+          show_modal_(show_modal) {
+      selector_ = *show_modal_;
+      Add(Container::Tab({main_, modal_}, &selector_));
+    }
+
+   private:
+    Element Render() override {
+      selector_ = *show_modal_;
+      auto document = main_->Render();
+      if (*show_modal_) {
+        document = dbox({
+            document,
+            modal_->Render() | clear_under | center,
+        });
+      }
+      return document;
+    }
+
+    bool OnEvent(Event event) override {
+      selector_ = *show_modal_;
+      return ComponentBase::OnEvent(event);
+    }
+
+    Component main_;
+    Component modal_;
+    const bool* show_modal_;
+    int selector_ = 0;
+  };
+  return Make<Impl>(main, modal, show_modal);
+}
+
+// Decorate a component. Add a |modal| window on top of it. It is shown one on
+// the top of the other when |show_modal| is true.
+/// @ingroup component
+// NOLINTNEXTLINE
+ComponentDecorator Modal(Component modal, const bool* show_modal) {
+  return [modal, show_modal](Component main) {
+    return Modal(std::move(main), modal, show_modal);
+  };
+}
+
+}  // namespace ftxui
+
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

src/ftxui/component/modal_test.cpp

@@ -0,0 +1,47 @@
+#include <gtest/gtest-message.h>  // for Message
+#include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestPartResult, TestFactoryImpl
+#include <ftxui/dom/elements.hpp>  // for Element, operator|, text, border
+#include <memory>  // for shared_ptr, allocator, __shared_ptr_access
+
+#include "ftxui/component/component.hpp"       // for Renderer, Modal
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/dom/node.hpp"                  // for Render
+#include "ftxui/screen/screen.hpp"             // for Screen
+#include "gtest/gtest_pred_impl.h"             // for Test, EXPECT_EQ, TEST
+
+namespace ftxui {
+
+TEST(ModalTest, Basic) {
+  auto main = Renderer([] { return text("main") | border; });
+  auto modal = Renderer([] { return text("modal") | border; });
+  bool show_modal = false;
+  auto component = Modal(main, modal, &show_modal);
+
+  Screen screen(10, 7);
+  Render(screen, component->Render());
+  EXPECT_EQ(screen.ToString(),
+            "╭────────╮\r\n"
+            "│main    │\r\n"
+            "│        │\r\n"
+            "│        │\r\n"
+            "│        │\r\n"
+            "│        │\r\n"
+            "╰────────╯");
+
+  show_modal = true;
+  Render(screen, component->Render());
+  EXPECT_EQ(screen.ToString(),
+            "╭────────╮\r\n"
+            "│main    │\r\n"
+            "│╭─────╮ │\r\n"
+            "││modal│ │\r\n"
+            "│╰─────╯ │\r\n"
+            "│        │\r\n"
+            "╰────────╯");
+}
+
+}  // namespace ftxui
+
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

src/ftxui/component/screen_interactive.cpp

@@ -3,8 +3,10 @@
 #include <chrono>  // for operator-, milliseconds, duration, operator>=, time_point, common_type<>::type
 #include <csignal>  // for signal, raise, SIGTSTP, SIGABRT, SIGFPE, SIGILL, SIGINT, SIGSEGV, SIGTERM, SIGWINCH
 #include <cstdio>   // for fileno, size_t, stdin
-#include <functional>        // for function
-#include <initializer_list>  // for initializer_list
+#include <ftxui/component/task.hpp>  // for Task, Closure, AnimationTask
+#include <ftxui/screen/screen.hpp>   // for Pixel, Screen::Cursor, Screen
+#include <functional>                // for function
+#include <initializer_list>          // for initializer_list
 #include <iostream>  // for cout, ostream, basic_ostream, operator<<, endl, flush
 #include <stack>     // for stack
 #include <thread>    // for thread, sleep_for
@@ -17,7 +19,7 @@
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse, CapturedMouseInterface
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
 #include "ftxui/component/event.hpp"           // for Event
-#include "ftxui/component/receiver.hpp"  // for ReceiverImpl, Sender, MakeReceiver, SenderImpl, Receiver
+#include "ftxui/component/receiver.hpp"  // for Sender, ReceiverImpl, MakeReceiver, SenderImpl, Receiver
 #include "ftxui/component/screen_interactive.hpp"
 #include "ftxui/component/terminal_input_parser.hpp"  // for TerminalInputParser
 #include "ftxui/dom/node.hpp"                         // for Node, Render

src/ftxui/component/screen_interactive_test.cpp

@@ -1,6 +1,7 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
 #include <csignal>  // for raise, SIGABRT, SIGFPE, SIGILL, SIGINT, SIGSEGV, SIGTERM
+#include <ftxui/component/event.hpp>  // for Event, Event::Custom
 
 #include "ftxui/component/component.hpp"  // for Renderer
 #include "ftxui/component/screen_interactive.hpp"

src/ftxui/component/terminal_input_parser.cpp

@@ -1,8 +1,10 @@
 #include "ftxui/component/terminal_input_parser.hpp"
 
-#include <cstdint>  // for uint32_t
-#include <memory>   // for unique_ptr
-#include <utility>  // for move
+#include <cstdint>                    // for uint32_t
+#include <ftxui/component/mouse.hpp>  // for Mouse, Mouse::Button, Mouse::Motion
+#include <ftxui/component/receiver.hpp>  // for SenderImpl, Sender
+#include <memory>                        // for unique_ptr, allocator
+#include <utility>                       // for move
 
 #include "ftxui/component/event.hpp"  // for Event
 #include "ftxui/component/task.hpp"   // for Task

src/ftxui/component/terminal_input_parser_test.cpp

@@ -1,11 +1,13 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver, TestFactoryImpl
 #include <algorithm>                // for max
-#include <initializer_list>  // for initializer_list
-#include <memory>            // for unique_ptr, allocator
-#include <variant>           // for get
+#include <ftxui/component/mouse.hpp>  // for Mouse, Mouse::Left, Mouse::Middle, Mouse::Pressed, Mouse::Released, Mouse::Right
+#include <ftxui/component/task.hpp>   // for Task
+#include <initializer_list>           // for initializer_list
+#include <memory>                     // for allocator, unique_ptr
+#include <variant>                    // for get
 
-#include "ftxui/component/event.hpp"  // for Event, Event::Return, Event::ArrowDown, Event::ArrowLeft, Event::ArrowRight, Event::ArrowUp, Event::Backspace, Event::Custom, Event::Delete, Event::End, Event::Escape, Event::F10, Event::F11, Event::F12, Event::F5, Event::F6, Event::F7, Event::F8, Event::F9, Event::Home, Event::PageDown, Event::PageUp, Event::Tab, Event::TabReverse
+#include "ftxui/component/event.hpp"  // for Event, Event::Return, Event::ArrowDown, Event::ArrowLeft, Event::ArrowRight, Event::ArrowUp, Event::Backspace, Event::Custom, Event::Delete, Event::End, Event::F10, Event::F11, Event::F12, Event::F5, Event::F6, Event::F7, Event::F8, Event::F9, Event::Home, Event::PageDown, Event::PageUp, Event::Tab, Event::TabReverse, Event::Escape
 #include "ftxui/component/receiver.hpp"  // for MakeReceiver, ReceiverImpl
 #include "ftxui/component/terminal_input_parser.hpp"
 #include "gtest/gtest_pred_impl.h"  // for AssertionResult, Test, EXPECT_EQ, EXPECT_TRUE, TEST, EXPECT_FALSE

src/ftxui/dom/blink_test.cpp

@@ -1,11 +1,11 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
-#include <string>                   // for allocator
+#include <gtest/gtest.h>  // for Test, AssertionResult, TestInfo (ptr only), EXPECT_TRUE, TEST
+#include <string>  // for allocator
 
 #include "ftxui/dom/elements.hpp"   // for operator|, text, blink, Element
 #include "ftxui/dom/node.hpp"       // for Render
 #include "ftxui/screen/screen.hpp"  // for Screen, Pixel
-#include "gtest/gtest_pred_impl.h"  // for Test, AssertionResult, EXPECT_TRUE, TEST
 
 namespace ftxui {
 

src/ftxui/dom/bold_test.cpp

@@ -1,11 +1,11 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
-#include <string>                   // for allocator
+#include <gtest/gtest.h>  // for Test, AssertionResult, TestInfo (ptr only), EXPECT_TRUE, TEST
+#include <string>  // for allocator
 
 #include "ftxui/dom/elements.hpp"   // for operator|, text, bold, Element
 #include "ftxui/dom/node.hpp"       // for Render
 #include "ftxui/screen/screen.hpp"  // for Screen, Pixel
-#include "gtest/gtest_pred_impl.h"  // for Test, AssertionResult, EXPECT_TRUE, TEST
 
 namespace ftxui {
 

src/ftxui/dom/canvas.cpp

@@ -1,12 +1,13 @@
 #include "ftxui/dom/canvas.hpp"
 
-#include <algorithm>  // for max, min
-#include <cstdint>    // for uint8_t
-#include <cstdlib>    // for abs
-#include <map>        // for allocator, map
-#include <memory>     // for make_shared
-#include <utility>    // for move, pair
-#include <vector>     // for vector
+#include <algorithm>               // for max, min
+#include <cstdint>                 // for uint8_t
+#include <cstdlib>                 // for abs
+#include <ftxui/screen/color.hpp>  // for Color
+#include <map>                     // for map
+#include <memory>                  // for make_shared
+#include <utility>                 // for move, pair
+#include <vector>                  // for vector
 
 #include "ftxui/dom/elements.hpp"     // for Element, canvas
 #include "ftxui/dom/node.hpp"         // for Node

src/ftxui/dom/dim_test.cpp

@@ -1,11 +1,11 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
-#include <string>                   // for allocator
+#include <gtest/gtest.h>  // for Test, AssertionResult, TestInfo (ptr only), EXPECT_TRUE, TEST
+#include <string>  // for allocator
 
 #include "ftxui/dom/elements.hpp"   // for operator|, text, dim, Element
 #include "ftxui/dom/node.hpp"       // for Render
 #include "ftxui/screen/screen.hpp"  // for Screen, Pixel
-#include "gtest/gtest_pred_impl.h"  // for Test, AssertionResult, EXPECT_TRUE, TEST
 
 namespace ftxui {
 

src/ftxui/dom/flexbox_helper.cpp

@@ -1,9 +1,10 @@
 #include "ftxui/dom/flexbox_helper.hpp"
 
-#include <algorithm>  // for min, max
-#include <cstddef>    // for size_t
-#include <memory>     // for allocator_traits<>::value_type
-#include <utility>    // for swap, move
+#include <algorithm>                     // for max, min
+#include <cstddef>                       // for size_t
+#include <ftxui/dom/flexbox_config.hpp>  // for FlexboxConfig, FlexboxConfig::Direction, FlexboxConfig::AlignContent, FlexboxConfig::JustifyContent, FlexboxConfig::Wrap, FlexboxConfig::Direction::RowInversed, FlexboxConfig::AlignItems, FlexboxConfig::Direction::Row, FlexboxConfig::Direction::Column, FlexboxConfig::Direction::ColumnInversed, FlexboxConfig::Wrap::WrapInversed, FlexboxConfig::AlignContent::Stretch, FlexboxConfig::JustifyContent::Stretch, FlexboxConfig::Wrap::Wrap, FlexboxConfig::AlignContent::Center, FlexboxConfig::AlignContent::FlexEnd, FlexboxConfig::AlignContent::FlexStart, FlexboxConfig::AlignContent::SpaceAround, FlexboxConfig::AlignContent::SpaceBetween, FlexboxConfig::AlignContent::SpaceEvenly, FlexboxConfig::AlignItems::Center, FlexboxConfig::AlignItems::FlexEnd, FlexboxConfig::AlignItems::FlexStart, FlexboxConfig::AlignItems::Stretch, FlexboxConfig::JustifyContent::Center, FlexboxConfig::JustifyContent::FlexEnd, FlexboxConfig::JustifyContent::FlexStart, FlexboxConfig::JustifyContent::SpaceAround, FlexboxConfig::JustifyContent::SpaceBetween, FlexboxConfig::JustifyContent::SpaceEvenly, FlexboxConfig::Wrap::NoWrap
+#include <memory>                        // for allocator_traits<>::value_type
+#include <utility>                       // for swap, move
 
 #include "ftxui/dom/box_helper.hpp"  // for Element, Compute
 

src/ftxui/dom/flexbox_helper_test.cpp

@@ -1,6 +1,7 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for TestPartResult, SuiteApiResolver, TestFactoryImpl
-#include <memory>                   // for allocator_traits<>::value_type
+#include <ftxui/dom/flexbox_config.hpp>  // for FlexboxConfig, FlexboxConfig::Direction, FlexboxConfig::Direction::Column, FlexboxConfig::Direction::ColumnInversed, FlexboxConfig::Direction::Row, FlexboxConfig::Direction::RowInversed
+#include <memory>                        // for allocator_traits<>::value_type
 
 #include "ftxui/dom/flexbox_helper.hpp"
 #include "gtest/gtest_pred_impl.h"  // for EXPECT_EQ, Test, TEST

src/ftxui/dom/flexbox_test.cpp

@@ -434,25 +434,25 @@ TEST(FlexboxTest, GapY) {
 
 TEST(FlexboxTest, Focus) {
   auto document = vbox({
-    paragraph("0 -"),
-    paragraph("1 -"),
-    paragraph("2 -"),
-    paragraph("3 -"),
-    paragraph("4 -"),
-    paragraph("5 -"),
-    paragraph("6 -"),
-    paragraph("7 -") | focus,
-    paragraph("8 -"),
-    paragraph("9 -"),
-  }) | yframe | flex;
+                      paragraph("0 -"),
+                      paragraph("1 -"),
+                      paragraph("2 -"),
+                      paragraph("3 -"),
+                      paragraph("4 -"),
+                      paragraph("5 -"),
+                      paragraph("6 -"),
+                      paragraph("7 -") | focus,
+                      paragraph("8 -"),
+                      paragraph("9 -"),
+                  }) |
+                  yframe | flex;
 
   Screen screen(1, 3);
   Render(screen, document);
   EXPECT_EQ(screen.ToString(),
             "-\r\n"
             "7\r\n"
-            "-"
-            );
+            "-");
 }
 
 }  // namespace ftxui

src/ftxui/dom/gridbox.cpp

@@ -28,7 +28,7 @@ int Integrate(std::vector<int>& elements) {
   }
   return accu;
 }
-}
+}  // namespace
 
 class GridBox : public Node {
  public:

src/ftxui/dom/gridbox_test.cpp

@@ -2,10 +2,11 @@
 #include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
 #include <stddef.h>                 // for size_t
 #include <algorithm>                // for remove
-#include <string>                   // for string, allocator, basic_string
+#include <memory>                   // for shared_ptr
+#include <string>                   // for allocator, basic_string, string
 #include <vector>                   // for vector
 
-#include "ftxui/dom/elements.hpp"  // for text, operator|, Elements, gridbox, Element, flex, flex_grow, flex_shrink, vtext, vbox, border
+#include "ftxui/dom/elements.hpp"  // for text, operator|, Element, flex, Elements, flex_grow, flex_shrink, vtext, gridbox, vbox, focus, operator|=, border, frame
 #include "ftxui/dom/node.hpp"      // for Render
 #include "ftxui/screen/screen.hpp"  // for Screen
 #include "gtest/gtest_pred_impl.h"  // for Test, TEST, EXPECT_EQ

src/ftxui/dom/node.cpp

@@ -1,4 +1,5 @@
-#include <utility>  // for move
+#include <ftxui/screen/box.hpp>  // for Box
+#include <utility>               // for move
 
 #include "ftxui/dom/node.hpp"
 #include "ftxui/screen/screen.hpp"  // for Screen

src/ftxui/dom/node_decorator.cpp

@@ -1,5 +1,6 @@
-#include <memory>  // for __shared_ptr_access
-#include <vector>  // for __alloc_traits<>::value_type
+#include <ftxui/dom/node.hpp>  // for Node, Elements
+#include <memory>              // for __shared_ptr_access
+#include <vector>              // for __alloc_traits<>::value_type
 
 #include "ftxui/dom/node_decorator.hpp"
 #include "ftxui/dom/requirement.hpp"  // for Requirement

src/ftxui/dom/underlined_test.cpp

@@ -1,11 +1,11 @@
 #include <gtest/gtest-message.h>  // for Message
 #include <gtest/gtest-test-part.h>  // for SuiteApiResolver, TestFactoryImpl, TestPartResult
-#include <string>                   // for allocator
+#include <gtest/gtest.h>  // for Test, AssertionResult, TestInfo (ptr only), EXPECT_TRUE, TEST
+#include <string>  // for allocator
 
 #include "ftxui/dom/elements.hpp"   // for operator|, text, underlined, Element
 #include "ftxui/dom/node.hpp"       // for Render
 #include "ftxui/screen/screen.hpp"  // for Screen, Pixel
-#include "gtest/gtest_pred_impl.h"  // for Test, AssertionResult, EXPECT_TRUE, TEST
 
 namespace ftxui {