fix components link in enterprise section (#1504)

Author: Lendemor

docs/enterprise/components.md

@@ -0,0 +1,119 @@
+---
+title: Enterprise Components
+---
+
+```python exec
+import reflex as rx
+from pcweb.pages.docs import enterprise
+from pcweb.templates.docpage import h1_comp, text_comp_2
+from pcweb.components.icons import get_icon
+
+def enterprise_component_grid():
+    sections = [
+        {
+            "title": "AG Grid",
+            "description": "Advanced data grid with sorting, filtering, editing, and pagination",
+            "link": enterprise.ag_grid.index.path,
+            "components": [
+                ("Overview", enterprise.ag_grid.index.path),
+                ("Column Definitions", enterprise.ag_grid.column_defs.path),
+                ("Aligned Grids", enterprise.ag_grid.aligned_grids.path),
+                ("Model Wrapper", enterprise.ag_grid.model_wrapper.path),
+                ("Pivot Mode", enterprise.ag_grid.pivot_mode.path),
+                ("Theme", enterprise.ag_grid.theme.path),
+                ("Value Transformers", enterprise.ag_grid.value_transformers.path),
+            ]
+        },
+        {
+            "title": "AG Chart", 
+            "description": "Interactive charts and data visualization",
+            "link": enterprise.ag_chart.path,
+            "components": [
+                ("Overview", enterprise.ag_chart.path),
+            ]
+        },
+        {
+            "title": "Interactive Components",
+            "description": "Drag-and-drop and mapping functionality", 
+            "link": enterprise.drag_and_drop.path,
+            "components": [
+                ("Drag and Drop", enterprise.drag_and_drop.path),
+                ("Mapping", enterprise.map.index.path),
+            ]
+        },
+        {
+            "title": "Mantine",
+            "description": "Rich UI components from Mantine library",
+            "link": enterprise.mantine.index.path,
+            "components": [
+                ("Overview", enterprise.mantine.index.path),
+                ("Autocomplete", enterprise.mantine.autocomplete.path),
+                ("Collapse", enterprise.mantine.collapse.path),
+                ("Combobox", enterprise.mantine.combobox.path),
+                ("JSON Input", enterprise.mantine.json_input.path),
+                ("Loading Overlay", enterprise.mantine.loading_overlay.path),
+                ("Multi Select", enterprise.mantine.multi_select.path),
+                ("Number Formatter", enterprise.mantine.number_formatter.path),
+                ("Pill", enterprise.mantine.pill.path),
+                ("Ring Progress", enterprise.mantine.ring_progress.path),
+                ("Semi Circle Progress", enterprise.mantine.semi_circle_progress.path),
+                ("Spoiler", enterprise.mantine.spoiler.path),
+                ("Tags Input", enterprise.mantine.tags_input.path),
+                ("Timeline", enterprise.mantine.timeline.path),
+                ("Tree", enterprise.mantine.tree.path),
+            ]
+        }
+    ]
+    
+    cards = []
+    for section in sections:
+        cards.append(
+            rx.box(
+                rx.link(
+                    rx.el.h1(
+                        section["title"],
+                        class_name="font-large text-slate-12",
+                    ),
+                    get_icon("new_tab", class_name="text-slate-11 [&>svg]:size-4"),
+                    href=section["link"],
+                    underline="none",
+                    class_name="px-4 py-2 bg-slate-1 hover:bg-slate-3 transition-bg flex flex-row justify-between items-center !text-slate-12",
+                ),
+                rx.text(
+                    section["description"],
+                    class_name="px-4 py-2 font-small text-slate-9 border-t border-slate-5",
+                ),
+                rx.box(
+                    *[
+                        rx.link(
+                            comp[0],
+                            href=comp[1],
+                            class_name="font-small text-slate-11 hover:!text-violet-9 transition-color w-fit",
+                        )
+                        for comp in section["components"]
+                    ],
+                    class_name="flex flex-col gap-2.5 px-4 py-2 border-t border-slate-5",
+                ),
+                class_name="flex flex-col border border-slate-5 rounded-xl bg-slate-2 shadow-large overflow-hidden",
+            )
+        )
+    
+    return rx.box(
+        *cards,
+        class_name="grid grid-cols-1 lg:grid-cols-2 gap-6",
+    )
+
+component_grid = enterprise_component_grid()
+```
+
+```python eval
+h1_comp(text="Enterprise Components")
+```
+
+```python eval
+text_comp_2(text="Advanced UI components and features to enhance your Reflex applications. Available for free with the 'Built with Reflex' badge, or without the badge with an enterprise license.")
+```
+
+```python eval
+component_grid
+```

pcweb/components/docpage/sidebar/sidebar.py

@@ -602,9 +602,7 @@ def sidebar_comp(
                                 ),
                                 create_sidebar_section(
                                     "Components",
-                                    enterprise_component_items[0]
-                                    .children[0]
-                                    .link.replace("_", "-"),
+                                    enterprise.components.path,
                                     enterprise_component_items,
                                     enterprise_index,
                                     url,

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

@@ -5,13 +5,15 @@
 
 def get_sidebar_items_enterprise_usage():
     """Get the enterprise usage sidebar items."""
+    from pcweb.pages.docs import enterprise
+    
     return [
         SideBarItem(
             names="Overview",
             children=[
                 SideBarItem(
                     names="How to use Enterprise",
-                    link="/docs/enterprise/overview/",
+                    link=enterprise.overview.path,
                 ),
             ],
         ),
@@ -20,11 +22,11 @@ def get_sidebar_items_enterprise_usage():
             children=[
                 SideBarItem(
                     names="Built with Reflex",
-                    link="/docs/enterprise/built-with-reflex/",
+                    link=enterprise.built_with_reflex.path,
                 ),
                 SideBarItem(
                     names="Single Port Proxy",
-                    link="/docs/enterprise/single-port-proxy/",
+                    link=enterprise.single_port_proxy.path,
                 ),
             ],
         ),
@@ -33,37 +35,39 @@ def get_sidebar_items_enterprise_usage():
 
 def get_sidebar_items_enterprise_components():
     """Get the enterprise components sidebar items."""
+    from pcweb.pages.docs import enterprise
+    
     return [
         SideBarItem(
             names="AG Grid",
             children=[
                 SideBarItem(
                     names="Overview",
-                    link="/docs/enterprise/ag_grid/",
+                    link=enterprise.ag_grid.index.path,
                 ),
                 SideBarItem(
                     names="Column Definitions",
-                    link="/docs/enterprise/ag_grid/column-defs/",
+                    link=enterprise.ag_grid.column_defs.path,
                 ),
                 SideBarItem(
                     names="Aligned Grids",
-                    link="/docs/enterprise/ag_grid/aligned-grids/",
+                    link=enterprise.ag_grid.aligned_grids.path,
                 ),
                 SideBarItem(
                     names="Model Wrapper",
-                    link="/docs/enterprise/ag_grid/model-wrapper/",
+                    link=enterprise.ag_grid.model_wrapper.path,
                 ),
                 SideBarItem(
                     names="Pivot Mode",
-                    link="/docs/enterprise/ag_grid/pivot-mode/",
+                    link=enterprise.ag_grid.pivot_mode.path,
                 ),
                 SideBarItem(
                     names="Theme",
-                    link="/docs/enterprise/ag_grid/theme/",
+                    link=enterprise.ag_grid.theme.path,
                 ),
                 SideBarItem(
                     names="Value Transformers",
-                    link="/docs/enterprise/ag_grid/value-transformers/",
+                    link=enterprise.ag_grid.value_transformers.path,
                 ),
             ],
         ),
@@ -72,7 +76,7 @@ def get_sidebar_items_enterprise_components():
             children=[
                 SideBarItem(
                     names="Overview",
-                    link="/docs/enterprise/ag_chart/",
+                    link=enterprise.ag_chart.path,
                 ),
             ],
         ),
@@ -81,11 +85,11 @@ def get_sidebar_items_enterprise_components():
             children=[
                 SideBarItem(
                     names="Drag and Drop",
-                    link="/docs/enterprise/drag-and-drop/",
+                    link=enterprise.drag_and_drop.path,
                 ),
                 SideBarItem(
                     names="Mapping",
-                    link="/docs/enterprise/map/",
+                    link=enterprise.map.index.path,
                 ),
             ],
         ),
@@ -94,59 +98,59 @@ def get_sidebar_items_enterprise_components():
             children=[
                 SideBarItem(
                     names="Overview",
-                    link="/docs/enterprise/mantine/",
+                    link=enterprise.mantine.index.path,
                 ),
                 SideBarItem(
                     names="Autocomplete",
-                    link="/docs/enterprise/mantine/autocomplete/",
+                    link=enterprise.mantine.autocomplete.path,
                 ),
                 SideBarItem(
                     names="Collapse",
-                    link="/docs/enterprise/mantine/collapse/",
+                    link=enterprise.mantine.collapse.path,
                 ),
                 SideBarItem(
                     names="JSON Input",
-                    link="/docs/enterprise/mantine/json-input/",
+                    link=enterprise.mantine.json_input.path,
                 ),
                 SideBarItem(
                     names="Loading Overlay",
-                    link="/docs/enterprise/mantine/loading-overlay/",
+                    link=enterprise.mantine.loading_overlay.path,
                 ),
                 SideBarItem(
                     names="Multi Select",
-                    link="/docs/enterprise/mantine/multi-select/",
+                    link=enterprise.mantine.multi_select.path,
                 ),
                 SideBarItem(
                     names="Number Formatter",
-                    link="/docs/enterprise/mantine/number-formatter/",
+                    link=enterprise.mantine.number_formatter.path,
                 ),
                 SideBarItem(
                     names="Pill",
-                    link="/docs/enterprise/mantine/pill/",
+                    link=enterprise.mantine.pill.path,
                 ),
                 SideBarItem(
                     names="Ring Progress",
-                    link="/docs/enterprise/mantine/ring-progress/",
+                    link=enterprise.mantine.ring_progress.path,
                 ),
                 SideBarItem(
                     names="Semi Circle Progress",
-                    link="/docs/enterprise/mantine/semi-circle-progress/",
+                    link=enterprise.mantine.semi_circle_progress.path,
                 ),
                 SideBarItem(
                     names="Spoiler",
-                    link="/docs/enterprise/mantine/spoiler/",
+                    link=enterprise.mantine.spoiler.path,
                 ),
                 SideBarItem(
                     names="Tags Input",
-                    link="/docs/enterprise/mantine/tags-input/",
+                    link=enterprise.mantine.tags_input.path,
                 ),
                 SideBarItem(
                     names="Timeline",
-                    link="/docs/enterprise/mantine/timeline/",
+                    link=enterprise.mantine.timeline.path,
                 ),
                 SideBarItem(
                     names="Tree",
-                    link="/docs/enterprise/mantine/tree/",
+                    link=enterprise.mantine.tree.path,
                 ),
             ],
         ),

pcweb/pages/docs/__init__.py

@@ -223,6 +223,9 @@ def comp():
     title = rx.utils.format.to_snake_case(os.path.basename(doc).replace(".md", ""))
     title2 = to_title_case(title)
     route = rx.utils.format.to_kebab_case(f"/{doc.replace('.md', '/')}")
+    # Handle index files: /folder/index/ -> /folder/
+    if route.endswith("/index/"):
+        route = route[:-7] + "/"
 
     comp = get_component(doc, title)