[ENG-4127][ENG-4128][ENG-4126][ENG-4125]UI overview section improvements (#1097)

* UI overview improvements

* Add next/prev for state overview

Author: ElijahAhianyo

docs/ui/overview.md

@@ -31,8 +31,7 @@ rx.text('Hello World!', color='blue', font_size="1.5em")
 Here `"Hello World!"` is the child text to display, while `color` and `font_size` are props that modify the appearance of the text.
 
 ```md alert success
-Regular Python data types can be passed in as children to components.
-This is useful for passing in text, numbers, and other simple data types.
+# Regular Python data types can be passed in as children to components. This is useful for passing in text, numbers, and other simple data types.
 ```
 
 ## Another Example
@@ -55,6 +54,7 @@ rx.vstack(
         header="Third item",
         content="The third accordion item's content",
     ),
+    collapsible=True,
     width="300px",
 )
 )

pcweb/components/docpage/sidebar/sidebar.py

@@ -5,7 +5,7 @@
 import reflex as rx
 import reflex_chakra as rc
 from pcweb.components.docpage.navbar.state import NavbarState
-from .state import SidebarState, SidebarItem
+from .state import SidebarState, SideBarItem, SideBarBase
 import reflex_chakra as rc
 
 from .sidebar_items.learn import learn, frontend, backend, hosting
@@ -17,6 +17,7 @@
 from .sidebar_items.recipes import recipes
 from pcweb.styles.colors import c_color
 
+
 def sidebar_link(*children, **props):
     """Create a sidebar link that closes the sidebar when clicked."""
     return rx.link(
@@ -28,7 +29,7 @@ def sidebar_link(*children, **props):
 
 
 def sidebar_leaf(
-    item: SidebarItem,
+    item: SideBarItem,
     url: str,
 ) -> rx.Component:
     """Get the leaf node of the sidebar."""
@@ -124,7 +125,7 @@ def sidebar_icon(name):
 
 
 def sidebar_item_comp(
-    item: SidebarItem,
+    item: SideBarItem,
     index: list[int],
     url: str,
 ):
@@ -221,6 +222,18 @@ def get_prev_next(url):
     return None, None
 
 
+def filter_out_non_sidebar_items(items: list[SideBarBase]) -> list[SideBarItem]:
+    """Filter out non-sidebar items making sure only SideBarItems are present.
+
+    Args:
+        items: The items to filter.
+
+    Return:
+        The filtered side bar items.
+    """
+    return [item for item in items if isinstance(item, SideBarItem)]
+
+
 def sidebar_category(name: str, url: str, icon: str, index: int):
     return rx.el.li(
         rx.link(
@@ -267,7 +280,13 @@ def sidebar_category(name: str, url: str, icon: str, index: int):
     )
 
 
-def create_sidebar_section(section_title, section_url, items, index, url):
+def create_sidebar_section(
+    section_title: str,
+    section_url: str,
+    items: list[SideBarItem],
+    index: rx.Var[list[str]] | list[str],
+    url: rx.Var[str] | str,
+) -> rx.Component:
     # Check if the section has any nested sections (Like the Other Libraries Section)
     nested = any(len(child.children) > 0 for item in items for child in item.children)
     # Make sure the index is a list
@@ -313,7 +332,6 @@ def sidebar_comp(
     tutorials_index: list[int],
     width: str = "100%",
 ):
-
     from pcweb.pages.docs.recipes_overview import overview
     from pcweb.pages.docs.library import library
     from pcweb.pages.docs.custom_components import custom_components
@@ -351,12 +369,12 @@ def sidebar_comp(
                     create_sidebar_section(
                         "User Interface",
                         ui.overview.path,
-                        frontend,
+                        filter_out_non_sidebar_items(frontend),
                         frontend_index,
                         url,
                     ),
                     create_sidebar_section(
-                        "State", state.overview.path, backend, backend_index, url
+                        "State", state.overview.path, filter_out_non_sidebar_items(backend), backend_index, url
                     ),
                     create_sidebar_section(
                         "Hosting",

pcweb/components/docpage/sidebar/sidebar_items/component_lib.py

@@ -1,5 +1,5 @@
 import reflex as rx
-from ..state import SidebarItem
+from ..state import SideBarItem
 from reflex.utils.format import to_title_case, to_snake_case
 
 
@@ -12,28 +12,28 @@ def get_component_link(category, clist, prefix="") -> str:
 def get_category_children(category, category_list, prefix=""):
     category = category.replace("-", " ")
     if isinstance(category_list, dict):
-        return SidebarItem(
+        return SideBarItem(
             names=category,
             children=[
                 get_category_children(c, category_list[c]) for c in category_list
             ],
         )
     category_item_children = []
     category_item_children.append(
-        SidebarItem(
+        SideBarItem(
             names="Overview",
             link=f"/docs/library/{prefix}{category.lower().replace(' ', '-')}/",
         )
     )
     for c in category_list:
         component_name = to_snake_case(c[0])
         name = to_title_case(component_name, sep=" ")
-        item = SidebarItem(
+        item = SideBarItem(
             names=name,
             link=get_component_link(category, c, prefix=prefix),
         )
         category_item_children.append(item)
-    return SidebarItem(names=category, children=category_item_children)
+    return SideBarItem(names=category, children=category_item_children)
 
 
 def get_sidebar_items_component_lib():

pcweb/components/docpage/sidebar/sidebar_items/item.py

@@ -1,5 +1,5 @@
 from pcweb.route import Route
-from ..state import SidebarState, SidebarItem
+from ..state import SidebarState, SideBarItem
 
 
 def create_item(route: Route, children=None):
@@ -13,10 +13,10 @@ def create_item(route: Route, children=None):
         else:
             alt_name_for_next_prev = ""
         name = name.replace("Api", "API").replace("Cli", "CLI")
-        return SidebarItem(
+        return SideBarItem(
             names=name, alt_name_for_next_prev=alt_name_for_next_prev, link=route.path
         )
-    return SidebarItem(
+    return SideBarItem(
         names=route,
         children=list(map(create_item, children)),
     )

pcweb/components/docpage/sidebar/sidebar_items/learn.py

@@ -42,8 +42,14 @@ def get_sidebar_items_frontend():
         wrapping_react,
         custom_components,
     )
+    from pcweb.components.docpage.sidebar.state import SideBarSection
 
     items = [
+        SideBarSection(
+            names="User Interface Overview",
+            alt_name_for_next_prev="",
+            link=ui.overview.path
+        ),
         create_item(
             "Components",
             children=[
@@ -115,8 +121,14 @@ def get_sidebar_items_backend():
         utility_methods,
         vars,
     )
+    from pcweb.components.docpage.sidebar.state import SideBarSection
 
     items = [
+        SideBarSection(
+            names="State Overview",
+            alt_name_for_next_prev="",
+            link=state.overview.path
+        ),
         create_item(
             "Vars",
             children=[

pcweb/components/docpage/sidebar/sidebar_items/recipes.py

@@ -1,4 +1,4 @@
-from .item import create_item, SidebarItem
+from .item import create_item
 
 
 def get_sidebar_items_recipes():

pcweb/components/docpage/sidebar/sidebar_items/reference.py

@@ -1,4 +1,4 @@
-from .item import create_item, SidebarItem
+from .item import create_item
 
 
 def get_sidebar_items_api_reference():

pcweb/components/docpage/sidebar/state.py

@@ -7,8 +7,8 @@
 from reflex.base import Base
 
 
-class SidebarItem(Base):
-    """A single item in the sidebar."""
+class SideBarBase(Base):
+    """Base class for the Side bar."""
 
     # The name to display in the sidebar.
     names: str = ""
@@ -19,12 +19,22 @@ class SidebarItem(Base):
     link: str = ""
 
     # The children items.
-    children: list[SidebarItem] = []
+    children: list[SideBarItem] = []
 
     # Whether the item is a category. Occurs if a single item is at the top level of the sidebar for asthetics.
     outer = False
 
 
+class SideBarItem(SideBarBase):
+    """A single item in the sidebar."""
+    ...
+
+
+class SideBarSection(SideBarBase):
+    """A section in the sidebar."""
+    ...
+
+
 class SidebarState(rx.State):
     _sidebar_index: int = -1