regenerate pyi files and bring chakra to full 0.8.0 compat (#42)

* regenerate pyi files and bring chakra to full 0.8.0 compat

* add ruff ci

* run pyright

* add working dir

* do it through extra args

* run pyi again and uv lock

* ignore that file

* add check for pyi files

* use 3.13 for check pyi

* basically do DCE

* make override a warning

* disable check pyi and use better pyi generatio

* make the headings work

* huh

* enable pyi in ci

Author: adhami3310

.github/workflows/ci.yml

@@ -0,0 +1,80 @@
+name: ci
+env:
+  OPENAI_API_KEY: "dummy"
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  type-check:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install UV
+        uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.10"
+          enable-cache: true
+          activate-environment: true
+      - name: Install dependencies
+        run: uv sync
+      - name: Run Type Checking
+        uses: jakebailey/pyright-action@v2
+        with:
+          extra-args: reflex_chakra
+          version: PATH
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install UV
+        uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.10"
+          enable-cache: true
+          activate-environment: true
+      - name: Install dependencies
+        run: uv sync
+      - name: Run Ruff Linter
+        run: ruff check --output-format=github reflex_chakra
+      - name: Run Ruff Formatter
+        run: ruff format --check --diff reflex_chakra
+  check-pyi:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install UV
+        uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.13"
+          enable-cache: true
+          activate-environment: true
+      - name: Install dependencies
+        run: uv sync
+      - name: Run PYI generation
+        run: python regenerate_pyi.py
+      - name: Check if there are any changes
+        run: git diff --exit-code -- "*.pyi" || (echo "PYI files have changed. Please commit the changes." && exit 1)
+  check-export:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Install UV
+        uses: astral-sh/setup-uv@v6
+        with:
+          python-version: "3.10"
+          enable-cache: true
+          activate-environment: true
+      - name: Install Reflex
+        working-directory: ./docs/rcweb
+        run: uv pip install $(grep -ivE "reflex-chakra" requirements.txt)
+
+      - name: Initialize Reflex
+        working-directory: ./docs/rcweb
+        run: uv run reflex init
+
+      - name: Build frontend
+        working-directory: ./docs/rcweb
+        run: uv run reflex export

.github/workflows/export_docs.yml

@@ -160,3 +160,5 @@ cython_debug/
 #  and can be added to the global gitignore or merged into this file.  For a more nuclear
 #  option (not recommended) you can uncomment the following to ignore the entire idea folder.
 #.idea/
+
+assets/chakra_color_mode_provider.js

.gitignore

@@ -0,0 +1 @@
+3.13

.python-version

@@ -1,9 +1,11 @@
 """App styling."""
 
 import reflex as rx
-from . import fonts
+
 import reflex_chakra as rc
 
+from . import fonts
+
 font_weights = {
     "bold": "800",
     "heading": "700",
@@ -40,23 +42,6 @@ def get_code_style_rdx(color: str):
     "line_height": "1.5",
 }
 
-tab_style = {
-    "color": rx.color("slate", 9),
-    "cursor": "pointer",
-    "_hover": {
-        "color": rx.color("slate", 11),
-    },
-    **fonts.small,
-    "padding_x": "0.5em",
-    "padding_y": "0.25em",
-    "&[data-state='active']": {
-        "color": rx.color("violet", 9),
-    },
-    "not:&[data-state='active']": {
-        "color": rx.color("slate", 11),
-    },
-}
-
 
 # General styles.
 SANS = "Instrument Sans"

docs/rcweb/rcweb/constants/css.py

@@ -1,33 +1,19 @@
 """Welcome to Reflex! This file outlines the steps to create a basic app."""
 
 import os
-from pathlib import Path
 from collections import defaultdict
+from pathlib import Path
 from types import SimpleNamespace
 
-import reflex as rx
-import reflex_chakra as rc
 import flexdown
+import reflex as rx
+from reflex.utils.format import to_kebab_case, to_snake_case
 
-from .utils.flexdown import xd
-from .utils.docpage import multi_docs
-from .constants import css
-
-
-def should_skip_compile(doc: flexdown.Document):
-    """Skip compilation if the markdown file has not been modified since the last compilation."""
-    if not os.environ.get("REFLEX_PERSIST_WEB_DIR", False):
-        return False
+import reflex_chakra as rc  # noqa: F401
 
-    # Check if the doc has been compiled already.
-    compiled_output = f".web/pages/{doc.replace('.md', '.js')}"
-    # Get the timestamp of the compiled file.
-    compiled_time = (
-        os.path.getmtime(compiled_output) if os.path.exists(compiled_output) else 0
-    )
-    # Get the timestamp of the source file.
-    source_time = os.path.getmtime(doc)
-    return compiled_time > source_time
+from .constants import css
+from .utils.docpage import Route, multi_docs
+from .utils.flexdown import xd
 
 
 def find_flexdown_files(directory: str) -> list[str]:
@@ -40,14 +26,16 @@ def find_flexdown_files(directory: str) -> list[str]:
         A list of paths to Flexdown files.
     """
     return [
-        os.path.join(root, file).replace("\\", "/")
+        (Path(root) / file).as_posix()
         for root, _, files in os.walk(directory)
         for file in files
         if file.endswith(".md")
     ]
 
 
-def extract_components_from_metadata(document) -> list:
+def extract_components_from_metadata(
+    document: flexdown.Document,
+) -> list[tuple[type, str]]:
     """Extract components from the document metadata.
 
     Args:
@@ -56,14 +44,14 @@ def extract_components_from_metadata(document) -> list:
     Returns:
         A list of tuples containing component instances and their string representation.
     """
-    components = []
+    components: list[tuple[type, str]] = []
     for comp_str in document.metadata.get("components", []):
         component = eval(comp_str)
         if isinstance(component, type):
             components.append((component, comp_str))
         elif hasattr(component, "__self__"):
             components.append((component.__self__, comp_str))
-        elif isinstance(component, SimpleNamespace) and hasattr(component, "__call__"):
+        elif isinstance(component, SimpleNamespace) and hasattr(component, "__call__"):  # noqa: B004
             components.append((component.__call__.__self__, comp_str))
     return components
 
@@ -99,8 +87,10 @@ def convert_to_title_case(text: str) -> str:
 
 
 def create_doc_component(
-    doc_path: str, base_dir: str, component_registry: defaultdict
-) -> rx.Component:
+    doc_path: str,
+    base_dir: str,
+    component_registry: defaultdict[str, list[tuple[str, list[tuple[type, str]]]]],
+) -> Route:
     """Create a document component for a given file path.
 
     Args:
@@ -112,13 +102,14 @@ def create_doc_component(
         A component object representing the document page.
     """
     doc_path = doc_path.replace("\\", "/")
-    route_path = rx.utils.format.to_kebab_case(
+    doc_path_path = Path(doc_path)
+    route_path = to_kebab_case(
         f"/{doc_path.removeprefix(base_dir).replace('.md', '/')}"
     ).replace("//", "/")
-    category = os.path.basename(os.path.dirname(doc_path)).title()
+    category = doc_path_path.parent.name.title()
     document = flexdown.parse_file(doc_path)
-    title = rx.utils.format.to_snake_case(os.path.basename(doc_path).replace(".md", ""))
-    component_list = [title, *extract_components_from_metadata(document)]
+    title = to_snake_case(doc_path_path.name.replace(".md", ""))
+    component_list = (title, extract_components_from_metadata(document))
     component_registry[category].append(component_list)
     return multi_docs(
         path=route_path,
@@ -129,7 +120,7 @@ def create_doc_component(
     )
 
 
-def generate_document_routes(doc_paths: list[str], base_dir: str) -> list[rx.Component]:
+def generate_document_routes(doc_paths: list[str], base_dir: str) -> list[Route]:
     """Generate document components and routes from Flexdown file paths.
 
     Args:
@@ -146,9 +137,7 @@ def generate_document_routes(doc_paths: list[str], base_dir: str) -> list[rx.Com
     ]
 
 
-def setup_application_routes(
-    app: rx.App, doc_routes: list[rx.Component], base_path: str
-):
+def setup_application_routes(app: rx.App, doc_routes: list[Route], base_path: str):
     """Set up application routes based on document components.
 
     Args:

docs/rcweb/rcweb/rcweb.py

@@ -1,7 +1,8 @@
 """Code block components for documentation pages."""
 
 import reflex as rx
-from ...constants import css, fonts
+
+from rcweb.constants import css, fonts
 
 
 @rx.memo
@@ -20,8 +21,6 @@ def code_block(code: str, language: str):
             padding="20px",
             style=fonts.code,
             margin="0",
-            # TODO: use this when it's looking good
-            # can_copy=True,
         ),
         rx.button(
             rx.icon(
@@ -76,8 +75,6 @@ def code_block_dark(code: str, language: str):
             },
             padding="20px",
             margin="0",
-            # TODO: use this when it's looking good
-            # can_copy=True,
         ),
         rx.button(
             rx.icon(

docs/rcweb/rcweb/utils/blocks/code.py

@@ -1,7 +1,8 @@
 """Template for documentation pages."""
 
 import reflex as rx
-from ...constants import css, fonts
+
+from rcweb.constants import css, fonts
 
 icon_margins = {
     "h1": "10px",
@@ -12,20 +13,21 @@
 
 
 def h_comp_common(
-    text: rx.Var[str],
+    text: rx.Var[str] | rx.Var[list[str]],
     heading: str,
     font_size: list[str] | str = "",
     font_weight: str = "",
     scroll_margin: str = "",
     margin_top: str = "",
     margin_bottom: str = "",
     convert_to_str: bool = False,
-    style: dict = {},
+    style: dict | None = None,
 ) -> rx.Component:
+    style = style or {}
     if convert_to_str:
-        id_ = text.to(list[str])[0].lower().split().join("-")
+        id_ = text.to(list)[0].to(str).lower().split(" ").join("-")
     else:
-        id_ = text.lower().split().join("-")
+        id_ = text.to(str).lower().split(" ").join("-")
     href = rx.State.router.page.full_path + "#" + id_
 
     return rx.box(
@@ -70,7 +72,6 @@ def h_comp_common(
             on_click=lambda: rx.set_clipboard(href),
             margin_bottom="0.5em",
         ),
-        # border_top=f"1px solid {rx.color('mauve', 3)}" if heading == "h2" else None,
         _hover={
             "color": rx.color("violet", 9),
         },
@@ -86,7 +87,6 @@ def h1_comp(text: rx.Var[str]) -> rx.Component:
         text=text,
         heading="h1",
         style={
-            # "color": c_color("slate", 12),
             "font-size": ["32px", "48px"],
             "font-style": "normal",
             "font-weight": "600",
@@ -105,7 +105,6 @@ def h1_comp_xd(text: rx.Var[str]) -> rx.Component:
         heading="h1",
         style=fonts.xx_large,
         margin_bottom="24px",
-        # margin_top="1.5em",
         scroll_margin="4em",
         convert_to_str=True,
     )

docs/rcweb/rcweb/utils/blocks/headings.py

@@ -1,7 +1,8 @@
 """Typography blocks for doc pages."""
 
 import reflex as rx
-from ...constants import fonts
+
+from rcweb.constants import fonts
 
 
 def definition(title: str, *children) -> rx.Component: