[REF-3562][REF-3563] Replace chakra usage (#3872)

benchmarks/test_benchmark_compile_pages.py

@@ -130,7 +130,6 @@ def render_multiple_pages(app, num: int):
 
 def AppWithOnePage():
     """A reflex app with one page."""
-    import reflex_chakra as rc
     from rxconfig import config  # type: ignore
 
     import reflex as rx
@@ -145,7 +144,7 @@ def AppWithOnePage():
 
     def index() -> rx.Component:
         return rx.center(
-            rc.input(
+            rx.input(
                 id="token", value=State.router.session.client_token, is_read_only=True
             ),
             rx.vstack(

integration/test_background_task.py

@@ -13,7 +13,6 @@ def BackgroundTask():
     import asyncio
 
     import pytest
-    import reflex_chakra as rc
 
     import reflex as rx
     from reflex.state import ImmutableStateError
@@ -116,11 +115,11 @@ def BackgroundTask():
 
     def index() -> rx.Component:
         return rx.vstack(
-            rc.input(
+            rx.input(
                 id="token", value=State.router.session.client_token, is_read_only=True
             ),
             rx.heading(State.counter, id="counter"),
-            rc.input(
+            rx.input(
                 id="iterations",
                 placeholder="Iterations",
                 value=State.iterations.to_string(),  # type: ignore

integration/test_client_storage.py

@@ -17,8 +17,6 @@ from . import utils
 
 def ClientSide():
     """App for testing client-side state."""
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class ClientSideState(rx.State):
@@ -72,18 +70,18 @@ def ClientSide():
 
     def index():
         return rx.fragment(
-            rc.input(
+            rx.input(
                 value=ClientSideState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rc.input(
+            rx.input(
                 placeholder="state var",
                 value=ClientSideState.state_var,
                 on_change=ClientSideState.set_state_var,  # type: ignore
                 id="state_var",
             ),
-            rc.input(
+            rx.input(
                 placeholder="input value",
                 value=ClientSideState.input_value,
                 on_change=ClientSideState.set_input_value,  # type: ignore
@@ -313,7 +311,6 @@ async def test_client_side_state(
     # no cookies should be set yet!
     assert not driver.get_cookies()
     local_storage_items = local_storage.items()
-    local_storage_items.pop("chakra-ui-color-mode", None)
     local_storage_items.pop("last_compiled_time", None)
     assert not local_storage_items
 
@@ -429,7 +426,6 @@ async def test_client_side_state(
         assert f"{sub_state_name}.c3" not in cookie_info_map(driver)
 
     local_storage_items = local_storage.items()
-    local_storage_items.pop("chakra-ui-color-mode", None)
     local_storage_items.pop("last_compiled_time", None)
     assert local_storage_items.pop(f"{sub_state_name}.l1") == "l1 value"
     assert local_storage_items.pop(f"{sub_state_name}.l2") == "l2 value"

integration/test_dynamic_routes.py

@@ -17,8 +17,6 @@ def DynamicRoute():
     """App for testing dynamic routes."""
     from typing import List
 
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class DynamicState(rx.State):
@@ -41,13 +39,13 @@ def DynamicRoute():
 
     def index():
         return rx.fragment(
-            rc.input(
+            rx.input(
                 value=DynamicState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rc.input(value=rx.State.page_id, is_read_only=True, id="page_id"),  # type: ignore
-            rc.input(
+            rx.input(value=rx.State.page_id, is_read_only=True, id="page_id"),  # type: ignore
+            rx.input(
                 value=DynamicState.router.page.raw_path,
                 is_read_only=True,
                 id="raw_path",
@@ -60,10 +58,10 @@ def DynamicRoute():
                 id="link_page_next",  # type: ignore
             ),
             rx.link("missing", href="/missing", id="link_missing"),
-            rc.list(
+            rx.list(  # type: ignore
                 rx.foreach(
                     DynamicState.order,  # type: ignore
-                    lambda i: rc.list_item(rx.text(i)),
+                    lambda i: rx.list_item(rx.text(i)),
                 ),
             ),
         )

integration/test_event_actions.py

@@ -16,8 +16,6 @@ def TestEventAction():
     """App for testing event_actions."""
     from typing import List, Optional
 
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class EventActionState(rx.State):
@@ -55,7 +53,7 @@ def TestEventAction():
 
     def index():
         return rx.vstack(
-            rc.input(
+            rx.input(
                 value=EventActionState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -148,10 +146,10 @@ def TestEventAction():
                     200
                 ).stop_propagation,
             ),
-            rc.list(
+            rx.list(  # type: ignore
                 rx.foreach(
                     EventActionState.order,  # type: ignore
-                    rc.list_item,
+                    rx.list_item,
                 ),
             ),
             on_click=EventActionState.on_click("outer"),  # type: ignore

integration/test_event_chain.py

@@ -18,8 +18,6 @@ def EventChain():
     import time
     from typing import List
 
-    import reflex_chakra as rc
-
     import reflex as rx
 
     # repeated here since the outer global isn't exported into the App module
@@ -129,7 +127,7 @@ def EventChain():
 
     app = rx.App(state=rx.State)
 
-    token_input = rc.input(
+    token_input = rx.input(
         value=State.router.session.client_token, is_read_only=True, id="token"
     )
 
@@ -137,7 +135,7 @@ def EventChain():
     def index():
         return rx.fragment(
             token_input,
-            rc.input(value=State.interim_value, is_read_only=True, id="interim_value"),
+            rx.input(value=State.interim_value, is_read_only=True, id="interim_value"),
             rx.button(
                 "Return Event",
                 id="return_event",

integration/test_form_submit.py

@@ -20,8 +20,6 @@ def FormSubmit(form_component):
     """
     from typing import Dict, List
 
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class FormState(rx.State):
@@ -37,28 +35,29 @@ def FormSubmit(form_component):
     @app.add_page
     def index():
         return rx.vstack(
-            rc.input(
+            rx.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
             eval(form_component)(
                 rx.vstack(
-                    rc.input(id="name_input"),
-                    rx.hstack(rc.pin_input(length=4, id="pin_input")),
-                    rc.number_input(id="number_input"),
+                    rx.input(id="name_input"),
                     rx.checkbox(id="bool_input"),
                     rx.switch(id="bool_input2"),
                     rx.checkbox(id="bool_input3"),
                     rx.switch(id="bool_input4"),
                     rx.slider(id="slider_input", default_value=[50], width="100%"),
-                    rc.range_slider(id="range_input"),
                     rx.radio(["option1", "option2"], id="radio_input"),
                     rx.radio(FormState.var_options, id="radio_input_var"),
-                    rc.select(["option1", "option2"], id="select_input"),
-                    rc.select(FormState.var_options, id="select_input_var"),
+                    rx.select(
+                        ["option1", "option2"],
+                        name="select_input",
+                        default_value="option1",
+                    ),
+                    rx.select(FormState.var_options, id="select_input_var"),
                     rx.text_area(id="text_area_input"),
-                    rc.input(
+                    rx.input(
                         id="debounce_input",
                         debounce_timeout=0,
                         on_change=rx.console_log,
@@ -81,8 +80,6 @@ def FormSubmitName(form_component):
     """
     from typing import Dict, List
 
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class FormState(rx.State):
@@ -98,22 +95,19 @@ def FormSubmitName(form_component):
     @app.add_page
     def index():
         return rx.vstack(
-            rc.input(
+            rx.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
             eval(form_component)(
                 rx.vstack(
-                    rc.input(name="name_input"),
-                    rx.hstack(rc.pin_input(length=4, name="pin_input")),
-                    rc.number_input(name="number_input"),
+                    rx.input(name="name_input"),
                     rx.checkbox(name="bool_input"),
                     rx.switch(name="bool_input2"),
                     rx.checkbox(name="bool_input3"),
                     rx.switch(name="bool_input4"),
                     rx.slider(name="slider_input", default_value=[50], width="100%"),
-                    rc.range_slider(name="range_input"),
                     rx.radio(FormState.options, name="radio_input"),
                     rx.select(
                         FormState.options,
@@ -121,21 +115,13 @@ def FormSubmitName(form_component):
                         default_value=FormState.options[0],
                     ),
                     rx.text_area(name="text_area_input"),
-                    rc.input_group(
-                        rc.input_left_element(rx.icon(tag="chevron_right")),
-                        rc.input(
-                            name="debounce_input",
-                            debounce_timeout=0,
-                            on_change=rx.console_log,
-                        ),
-                        rc.input_right_element(rx.icon(tag="chevron_left")),
-                    ),
-                    rc.button_group(
-                        rx.button("Submit", type_="submit"),
-                        rx.icon_button(FormState.val, icon=rx.icon(tag="plus")),
-                        variant="outline",
-                        is_attached=True,
+                    rx.input(
+                        name="debounce_input",
+                        debounce_timeout=0,
+                        on_change=rx.console_log,
                     ),
+                    rx.button("Submit", type_="submit"),
+                    rx.icon_button(FormState.val, icon=rx.icon(tag="plus")),
                 ),
                 on_submit=FormState.form_submit,
                 custom_attrs={"action": "/invalid"},
@@ -152,16 +138,12 @@ def FormSubmitName(form_component):
         functools.partial(FormSubmitName, form_component="rx.form.root"),
         functools.partial(FormSubmit, form_component="rx.el.form"),
         functools.partial(FormSubmitName, form_component="rx.el.form"),
-        functools.partial(FormSubmit, form_component="rc.form"),
-        functools.partial(FormSubmitName, form_component="rc.form"),
     ],
     ids=[
         "id-radix",
         "name-radix",
         "id-html",
         "name-html",
-        "id-chakra",
-        "name-chakra",
     ],
 )
 def form_submit(request, tmp_path_factory) -> Generator[AppHarness, None, None]:
@@ -224,16 +206,6 @@ async def test_submit(driver, form_submit: AppHarness):
     name_input = driver.find_element(by, "name_input")
     name_input.send_keys("foo")
 
-    pin_inputs = driver.find_elements(By.CLASS_NAME, "chakra-pin-input")
-    pin_values = ["8", "1", "6", "4"]
-    for i, pin_input in enumerate(pin_inputs):
-        pin_input.send_keys(pin_values[i])
-
-    number_input = driver.find_element(By.CLASS_NAME, "chakra-numberinput")
-    buttons = number_input.find_elements(By.XPATH, "//div[@role='button']")
-    for _ in range(3):
-        buttons[1].click()
-
     checkbox_input = driver.find_element(By.XPATH, "//button[@role='checkbox']")
     checkbox_input.click()
 
@@ -275,15 +247,12 @@ async def test_submit(driver, form_submit: AppHarness):
     print(form_data)
 
     assert form_data["name_input"] == "foo"
-    assert form_data["pin_input"] == pin_values
-    assert form_data["number_input"] == "-3"
     assert form_data["bool_input"]
     assert form_data["bool_input2"]
     assert not form_data.get("bool_input3", False)
     assert not form_data.get("bool_input4", False)
 
     assert form_data["slider_input"] == "50"
-    assert form_data["range_input"] == ["25", "75"]
     assert form_data["radio_input"] == "option2"
     assert form_data["select_input"] == "option1"
     assert form_data["text_area_input"] == "Some\nText"

integration/test_server_side_event.py

@@ -11,8 +11,6 @@ from reflex.testing import AppHarness
 
 def ServerSideEvent():
     """App with inputs set via event handlers and set_value."""
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class SSState(rx.State):
@@ -41,12 +39,12 @@ def ServerSideEvent():
     @app.add_page
     def index():
         return rx.fragment(
-            rc.input(
+            rx.input(
                 id="token", value=SSState.router.session.client_token, is_read_only=True
             ),
-            rc.input(default_value="a", id="a"),
-            rc.input(default_value="b", id="b"),
-            rc.input(default_value="c", id="c"),
+            rx.input(default_value="a", id="a"),
+            rx.input(default_value="b", id="b"),
+            rx.input(default_value="c", id="c"),
             rx.button(
                 "Clear Immediate",
                 id="clear_immediate",

integration/test_table.py

@@ -10,89 +10,45 @@ from reflex.testing import AppHarness
 
 def Table():
     """App using table component."""
-    from typing import List
-
-    import reflex_chakra as rc
-
     import reflex as rx
 
-    class TableState(rx.State):
-        rows: List[List[str]] = [
-            ["John", "30", "New York"],
-            ["Jane", "31", "San Fransisco"],
-            ["Joe", "32", "Los Angeles"],
-        ]
-
-        headers: List[str] = ["Name", "Age", "Location"]
-
-        footers: List[str] = ["footer1", "footer2", "footer3"]
-
-        caption: str = "random caption"
-
     app = rx.App(state=rx.State)
 
     @app.add_page
     def index():
         return rx.center(
-            rc.input(
+            rx.input(
                 id="token",
-                value=TableState.router.session.client_token,
+                value=rx.State.router.session.client_token,
                 is_read_only=True,
             ),
-            rc.table_container(
-                rc.table(
-                    headers=TableState.headers,
-                    rows=TableState.rows,
-                    footers=TableState.footers,
-                    caption=TableState.caption,
-                    variant="striped",
-                    color_scheme="blue",
-                    width="100%",
+            rx.table.root(
+                rx.table.header(
+                    rx.table.row(
+                        rx.table.column_header_cell("Name"),
+                        rx.table.column_header_cell("Age"),
+                        rx.table.column_header_cell("Location"),
+                    ),
                 ),
-            ),
-        )
-
-    @app.add_page
-    def another():
-        return rx.center(
-            rc.table_container(
-                rc.table(  # type: ignore
-                    rc.thead(  # type: ignore
-                        rc.tr(  # type: ignore
-                            rc.th("Name"),
-                            rc.th("Age"),
-                            rc.th("Location"),
-                        )
+                rx.table.body(
+                    rx.table.row(
+                        rx.table.row_header_cell("John"),
+                        rx.table.cell(30),
+                        rx.table.cell("New York"),
                     ),
-                    rc.tbody(  # type: ignore
-                        rc.tr(  # type: ignore
-                            rc.td("John"),
-                            rc.td(30),
-                            rc.td("New York"),
-                        ),
-                        rc.tr(  # type: ignore
-                            rc.td("Jane"),
-                            rc.td(31),
-                            rc.td("San Francisco"),
-                        ),
-                        rc.tr(  # type: ignore
-                            rc.td("Joe"),
-                            rc.td(32),
-                            rc.td("Los Angeles"),
-                        ),
+                    rx.table.row(
+                        rx.table.row_header_cell("Jane"),
+                        rx.table.cell(31),
+                        rx.table.cell("San Fransisco"),
                     ),
-                    rc.tfoot(  # type: ignore
-                        rc.tr(
-                            rc.td("footer1"),
-                            rc.td("footer2"),
-                            rc.td("footer3"),
-                        )  # type: ignore
+                    rx.table.row(
+                        rx.table.row_header_cell("Joe"),
+                        rx.table.cell(32),
+                        rx.table.cell("Los Angeles"),
                     ),
-                    rc.table_caption("random caption"),
-                    variant="striped",
-                    color_scheme="teal",
-                )
-            )
+                ),
+                width="100%",
+            ),
         )
 
 
@@ -138,23 +94,20 @@ def driver(table: AppHarness):
         driver.quit()
 
 
-@pytest.mark.parametrize("route", ["", "/another"])
-def test_table(driver, table: AppHarness, route):
+def test_table(driver, table: AppHarness):
     """Test that a table component is rendered properly.
 
     Args:
         driver: Selenium WebDriver open to the app
         table: Harness for Table app
-        route: Page route or path.
     """
-    driver.get(f"{table.frontend_url}/{route}")
     assert table.app_instance is not None, "app is not running"
 
     thead = driver.find_element(By.TAG_NAME, "thead")
     # poll till page is fully loaded.
     table.poll_for_content(element=thead)
     # check headers
-    assert thead.find_element(By.TAG_NAME, "tr").text == "NAME AGE LOCATION"
+    assert thead.find_element(By.TAG_NAME, "tr").text == "Name Age Location"
     # check first row value
     assert (
         driver.find_element(By.TAG_NAME, "tbody")
@@ -162,12 +115,3 @@ def test_table(driver, table: AppHarness, route):
         .text
         == "John 30 New York"
     )
-    # check footer
-    assert (
-        driver.find_element(By.TAG_NAME, "tfoot")
-        .find_element(By.TAG_NAME, "tr")
-        .text.lower()
-        == "footer1 footer2 footer3"
-    )
-    # check caption
-    assert driver.find_element(By.TAG_NAME, "caption").text == "random caption"

integration/test_tailwind.py

@@ -27,8 +27,6 @@ def TailwindApp(
     """
     from pathlib import Path
 
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class UnusedState(rx.State):
@@ -36,7 +34,7 @@ def TailwindApp(
 
     def index():
         return rx.el.div(
-            rc.text(paragraph_text, class_name=paragraph_class_name),
+            rx.text(paragraph_text, class_name=paragraph_class_name),
             rx.el.p(paragraph_text, class_name=paragraph_class_name),
             rx.text(paragraph_text, as_="p", class_name=paragraph_class_name),
             rx.el.div("Test external stylesheet", class_name="external"),

integration/test_upload.py

@@ -16,8 +16,6 @@ def UploadFile():
     """App for testing dynamic routes."""
     from typing import Dict, List
 
-    import reflex_chakra as rc
-
     import reflex as rx
 
     class UploadState(rx.State):
@@ -46,7 +44,7 @@ def UploadFile():
 
     def index():
         return rx.vstack(
-            rc.input(
+            rx.input(
                 value=UploadState.router.session.client_token,
                 is_read_only=True,
                 id="token",

integration/test_var_operations.py

@@ -14,8 +14,6 @@ def VarOperations():
     """App with var operations."""
     from typing import Dict, List
 
-    import reflex_chakra as rc
-
     import reflex as rx
     from reflex.ivars.base import LiteralVar
     from reflex.ivars.sequence import ArrayVar
@@ -552,10 +550,7 @@ def VarOperations():
                 VarOperationState.html_str,
                 id="html_str",
             ),
-            rc.highlight(
-                "second",
-                query=[VarOperationState.str_var2],
-            ),
+            rx.el.mark("second"),
             rx.text(ArrayVar.range(2, 5).join(","), id="list_join_range1"),
             rx.text(ArrayVar.range(2, 10, 2).join(","), id="list_join_range2"),
             rx.text(ArrayVar.range(5, 0, -1).join(","), id="list_join_range3"),

pyproject.toml

@@ -59,7 +59,7 @@ httpx = ">=0.25.1,<1.0"
 twine = ">=4.0.0,<6.0"
 tomlkit = ">=0.12.4,<1.0"
 lazy_loader = ">=0.4"
-reflex-chakra = ">=0.6.0a"
+reflex-chakra = ">=0.6.0a6"
 
 [tool.poetry.group.dev.dependencies]
 pytest = ">=7.1.2,<8.0"

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -27,7 +27,7 @@ function AppWrap({children}) {
 
 export default function MyApp({ Component, pageProps }) {
   return (
-    <ThemeProvider defaultTheme={ defaultColorMode } storageKey="chakra-ui-color-mode" attribute="class">
+    <ThemeProvider defaultTheme={ defaultColorMode } attribute="class">
       <AppWrap>
         <StateProvider>
           <EventLoopProvider>

reflex/.templates/web/components/reflex/chakra_color_mode_provider.js

@@ -1,36 +0,0 @@
-import { useColorMode as chakraUseColorMode } from "@chakra-ui/react";
-import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
-import { ColorModeContext, defaultColorMode } from "/utils/context.js";
-
-export default function ChakraColorModeProvider({ children }) {
-  const { theme, resolvedTheme, setTheme } = useTheme();
-  const { colorMode, toggleColorMode } = chakraUseColorMode();
-  const [resolvedColorMode, setResolvedColorMode] = useState(colorMode);
-
-  useEffect(() => {
-    if (colorMode != resolvedTheme) {
-      toggleColorMode();
-    }
-    setResolvedColorMode(resolvedTheme);
-  }, [theme, resolvedTheme]);
-
-  const rawColorMode = colorMode;
-  const setColorMode = (mode) => {
-    const allowedModes = ["light", "dark", "system"];
-    if (!allowedModes.includes(mode)) {
-      console.error(
-        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
-      );
-      mode = defaultColorMode;
-    }
-    setTheme(mode);
-  };
-  return (
-    <ColorModeContext.Provider
-      value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
-    >
-      {children}
-    </ColorModeContext.Provider>
-  );
-}

reflex/__init__.pyi

@@ -132,6 +132,7 @@ from .components.radix.themes.layout.container import container as container
 from .components.radix.themes.layout.flex import flex as flex
 from .components.radix.themes.layout.grid import grid as grid
 from .components.radix.themes.layout.list import list_item as list_item
+from .components.radix.themes.layout.list import list_ns as list  # noqa
 from .components.radix.themes.layout.list import ordered_list as ordered_list
 from .components.radix.themes.layout.list import unordered_list as unordered_list
 from .components.radix.themes.layout.section import section as section

reflex/components/radix/__init__.pyi

@@ -55,6 +55,7 @@ from .themes.layout.container import container as container
 from .themes.layout.flex import flex as flex
 from .themes.layout.grid import grid as grid
 from .themes.layout.list import list_item as list_item
+from .themes.layout.list import list_ns as list  # noqa
 from .themes.layout.list import ordered_list as ordered_list
 from .themes.layout.list import unordered_list as unordered_list
 from .themes.layout.section import section as section

reflex/components/radix/themes/base.py

@@ -262,26 +262,6 @@ class ThemePanel(RadixThemesComponent):
         """
         return {"react": "useEffect"}
 
-    def add_hooks(self) -> list[str]:
-        """Add a hook on the ThemePanel to clear chakra-ui-color-mode.
-
-        Returns:
-            The hooks to render.
-        """
-        # The panel freezes the tab if the user color preference differs from the
-        # theme "appearance", so clear it out when theme panel is used.
-        return [
-            """
-            useEffect(() => {
-                if (typeof window !== 'undefined') {
-                    window.onbeforeunload = () => {
-                        localStorage.removeItem('chakra-ui-color-mode');
-                    }
-                    window.onbeforeunload();
-                }
-            }, [])"""
-        ]
-
 
 class RadixThemesColorModeProvider(Component):
     """Next-themes integration for radix themes components."""

reflex/components/radix/themes/base.pyi

@@ -583,7 +583,6 @@ class Theme(RadixThemesComponent):
 
 class ThemePanel(RadixThemesComponent):
     def add_imports(self) -> dict[str, str]: ...
-    def add_hooks(self) -> list[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore

reflex/components/radix/themes/layout/__init__.pyi

@@ -9,6 +9,7 @@ from .container import container as container
 from .flex import flex as flex
 from .grid import grid as grid
 from .list import list_item as list_item
+from .list import list_ns as list  # noqa
 from .list import ordered_list as ordered_list
 from .list import unordered_list as unordered_list
 from .section import section as section

reflex/style.py

@@ -290,7 +290,6 @@ def _format_emotion_style_pseudo_selector(key: str) -> str:
     """
     prefix = None
     if key.startswith("_"):
-        # Handle pseudo selectors in chakra style format.
         prefix = "&:"
         key = key[1:]
     if key.startswith(":"):

reflex/utils/pyi_generator.py

@@ -903,7 +903,13 @@ class PyiGenerator:
             # construct the import statement and handle special cases for aliases
             sub_mod_attrs_imports = [
                 f"from .{path} import {mod if not isinstance(mod, tuple) else mod[0]} as {mod if not isinstance(mod, tuple) else mod[1]}"
-                + ("  # type: ignore" if mod in pyright_ignore_imports else "")
+                + (
+                    "  # type: ignore"
+                    if mod in pyright_ignore_imports
+                    else "  # noqa"  # ignore ruff formatting here for cases like rx.list.
+                    if isinstance(mod, tuple)
+                    else ""
+                )
                 for mod, path in sub_mod_attrs.items()
             ]
             sub_mod_attrs_imports.append("")

tests/components/datadisplay/test_table.py

@@ -1,177 +0,0 @@
-import sys
-from typing import List, Tuple
-
-import pytest
-from reflex_chakra.components.datadisplay.table import Tbody, Tfoot, Thead
-
-from reflex.state import BaseState
-
-PYTHON_GT_V38 = sys.version_info.major >= 3 and sys.version_info.minor > 8
-
-
-class TableState(BaseState):
-    """Test State class."""
-
-    rows_List_List_str: List[List[str]] = [["random", "row"]]
-    rows_List_List: List[List] = [["random", "row"]]
-    rows_List_str: List[str] = ["random", "row"]
-    rows_Tuple_List_str: Tuple[List[str]] = (["random", "row"],)
-    rows_Tuple_List: Tuple[List] = ["random", "row"]  # type: ignore
-    rows_Tuple_str_str: Tuple[str, str] = (
-        "random",
-        "row",
-    )
-    rows_Tuple_Tuple_str_str: Tuple[Tuple[str, str]] = (
-        (
-            "random",
-            "row",
-        ),
-    )
-    rows_Tuple_Tuple: Tuple[Tuple] = (
-        (
-            "random",
-            "row",
-        ),
-    )
-    rows_str: str = "random, row"
-    headers_List_str: List[str] = ["header1", "header2"]
-    headers_Tuple_str_str: Tuple[str, str] = (
-        "header1",
-        "header2",
-    )
-    headers_str: str = "headers1, headers2"
-    footers_List_str: List[str] = ["footer1", "footer2"]
-    footers_Tuple_str_str: Tuple[str, str] = (
-        "footer1",
-        "footer2",
-    )
-    footers_str: str = "footer1, footer2"
-
-    if sys.version_info.major >= 3 and sys.version_info.minor > 8:
-        rows_list_list_str: list[list[str]] = [["random", "row"]]
-        rows_list_list: list[list] = [["random", "row"]]
-        rows_list_str: list[str] = ["random", "row"]
-        rows_tuple_list_str: tuple[list[str]] = (["random", "row"],)
-        rows_tuple_list: tuple[list] = ["random", "row"]  # type: ignore
-        rows_tuple_str_str: tuple[str, str] = (
-            "random",
-            "row",
-        )
-        rows_tuple_tuple_str_str: tuple[tuple[str, str]] = (
-            (
-                "random",
-                "row",
-            ),
-        )
-        rows_tuple_tuple: tuple[tuple] = (
-            (
-                "random",
-                "row",
-            ),
-        )
-
-
-valid_extras = (
-    [
-        TableState.rows_list_list_str,
-        TableState.rows_list_list,
-        TableState.rows_tuple_list_str,
-        TableState.rows_tuple_list,
-        TableState.rows_tuple_tuple_str_str,
-        TableState.rows_tuple_tuple,
-    ]
-    if PYTHON_GT_V38
-    else []
-)
-invalid_extras = (
-    [TableState.rows_list_str, TableState.rows_tuple_str_str] if PYTHON_GT_V38 else []
-)
-
-
-@pytest.mark.parametrize(
-    "rows",
-    [
-        [["random", "row"]],
-        TableState.rows_List_List_str,
-        TableState.rows_List_List,
-        TableState.rows_Tuple_List_str,
-        TableState.rows_Tuple_List,
-        TableState.rows_Tuple_Tuple_str_str,
-        TableState.rows_Tuple_Tuple,
-        *valid_extras,
-    ],
-)
-def test_create_table_body_with_valid_rows_prop(rows):
-    render_dict = Tbody.create(rows=rows).render()
-    assert render_dict["name"] == "Tbody"
-    assert len(render_dict["children"]) == 1
-
-
-@pytest.mark.parametrize(
-    "rows",
-    [
-        ["random", "row"],
-        "random, rows",
-        TableState.rows_List_str,
-        TableState.rows_Tuple_str_str,
-        TableState.rows_str,
-        *invalid_extras,
-    ],
-)
-def test_create_table_body_with_invalid_rows_prop(rows):
-    with pytest.raises(TypeError):
-        Tbody.create(rows=rows)
-
-
-@pytest.mark.parametrize(
-    "headers",
-    [
-        ["random", "header"],
-        TableState.headers_List_str,
-        TableState.headers_Tuple_str_str,
-    ],
-)
-def test_create_table_head_with_valid_headers_prop(headers):
-    render_dict = Thead.create(headers=headers).render()
-    assert render_dict["name"] == "Thead"
-    assert len(render_dict["children"]) == 1
-    assert render_dict["children"][0]["name"] == "Tr"
-
-
-@pytest.mark.parametrize(
-    "headers",
-    [
-        "random, header",
-        TableState.headers_str,
-    ],
-)
-def test_create_table_head_with_invalid_headers_prop(headers):
-    with pytest.raises(TypeError):
-        Thead.create(headers=headers)
-
-
-@pytest.mark.parametrize(
-    "footers",
-    [
-        ["random", "footers"],
-        TableState.footers_List_str,
-        TableState.footers_Tuple_str_str,
-    ],
-)
-def test_create_table_footer_with_valid_footers_prop(footers):
-    render_dict = Tfoot.create(footers=footers).render()
-    assert render_dict["name"] == "Tfoot"
-    assert len(render_dict["children"]) == 1
-    assert render_dict["children"][0]["name"] == "Tr"
-
-
-@pytest.mark.parametrize(
-    "footers",
-    [
-        "random, footers",
-        TableState.footers_str,
-    ],
-)
-def test_create_table_footer_with_invalid_footers_prop(footers):
-    with pytest.raises(TypeError):
-        Tfoot.create(footers=footers)

tests/components/forms/test_form.py

@@ -1,5 +1,4 @@
-from reflex_chakra.components.forms.form import Form
-
+from reflex.components.radix.primitives.form import Form
 from reflex.event import EventChain
 from reflex.ivars.base import ImmutableVar
 

tests/components/media/test_icon.py

@@ -1,55 +0,0 @@
-import pytest
-from reflex_chakra.components.media.icon import ICON_LIST, Icon
-
-from reflex.utils import format
-
-
-def test_no_tag_errors():
-    """Test that an icon without a tag raises an error."""
-    with pytest.raises(AttributeError):
-        Icon.create()
-
-
-def test_children_errors():
-    """Test that an icon with children raises an error."""
-    with pytest.raises(AttributeError):
-        Icon.create("child", tag="search")
-
-
-@pytest.mark.parametrize(
-    "tag",
-    ICON_LIST,
-)
-def test_valid_icon(tag: str):
-    """Test that a valid icon does not raise an error.
-
-    Args:
-        tag: The icon tag.
-    """
-    icon = Icon.create(tag=tag)
-    assert icon.tag == format.to_title_case(tag) + "Icon"
-
-
-@pytest.mark.parametrize("tag", ["", " ", "invalid", 123])
-def test_invalid_icon(tag):
-    """Test that an invalid icon raises an error.
-
-    Args:
-        tag: The icon tag.
-    """
-    with pytest.raises(ValueError):
-        Icon.create(tag=tag)
-
-
-@pytest.mark.parametrize(
-    "tag",
-    ["Check", "Close", "eDit"],
-)
-def test_tag_with_capital(tag: str):
-    """Test that an icon that tag with capital does not raise an error.
-
-    Args:
-        tag: The icon tag.
-    """
-    icon = Icon.create(tag=tag)
-    assert icon.tag == format.to_title_case(tag) + "Icon"

tests/components/test_component.py

@@ -2,8 +2,6 @@ from contextlib import nullcontext
 from typing import Any, Dict, List, Optional, Type, Union
 
 import pytest
-import reflex_chakra as rc
-from reflex_chakra.components.layout.box import Box
 
 import reflex as rx
 from reflex.base import Base
@@ -16,6 +14,7 @@ from reflex.components.component import (
     StatefulComponent,
     custom_component,
 )
+from reflex.components.radix.themes.layout.box import Box
 from reflex.constants import EventTriggers
 from reflex.event import EventChain, EventHandler, parse_args_spec
 from reflex.ivars.base import ImmutableVar, LiteralVar
@@ -1114,8 +1113,8 @@ def test_component_with_only_valid_children(fixture, request):
     [
         (rx.text("hi"), '<RadixThemesText as={"p"}>\n  {"hi"}\n</RadixThemesText>'),
         (
-            rx.box(rc.heading("test", size="md")),
-            '<RadixThemesBox>\n  <Heading size={"md"}>\n  {"test"}\n</Heading>\n</RadixThemesBox>',
+            rx.box(rx.heading("test", size="3")),
+            '<RadixThemesBox>\n  <RadixThemesHeading size={"3"}>\n  {"test"}\n</RadixThemesHeading>\n</RadixThemesBox>',
         ),
     ],
 )

tests/components/typography/test_markdown.py

@@ -1,5 +1,4 @@
 import pytest
-import reflex_chakra as rc
 
 import reflex as rx
 from reflex.components.markdown import Markdown
@@ -37,9 +36,7 @@ def test_get_component(tag, expected):
 def test_set_component_map():
     """Test setting the component map."""
     component_map = {
-        "h1": lambda value: rx.box(
-            rc.heading(value, as_="h1", size="2xl"), padding="1em"
-        ),
+        "h1": lambda value: rx.box(rx.heading(value, as_="h1"), padding="1em"),
         "p": lambda value: rx.box(rx.text(value), padding="1em"),
     }
     md = Markdown.create("# Hello", component_map=component_map)

tests/test_app.py

@@ -13,7 +13,6 @@ from typing import Generator, List, Tuple, Type
 from unittest.mock import AsyncMock
 
 import pytest
-import reflex_chakra as rc
 import sqlmodel
 from fastapi import FastAPI, UploadFile
 from starlette_admin.auth import AuthProvider
@@ -1311,13 +1310,13 @@ def test_app_wrap_priority(compilable_app: tuple[App, Path]):
         tag = "Fragment1"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-            return {(99, "Box"): rc.box()}
+            return {(99, "Box"): rx.box()}
 
     class Fragment2(Component):
         tag = "Fragment2"
 
         def _get_app_wrap_components(self) -> dict[tuple[int, str], Component]:
-            return {(50, "Text"): rc.text()}
+            return {(50, "Text"): rx.text()}
 
     class Fragment3(Component):
         tag = "Fragment3"
@@ -1337,19 +1336,17 @@ def test_app_wrap_priority(compilable_app: tuple[App, Path]):
     assert (
         "function AppWrap({children}) {"
         "return ("
-        "<Box>"
-        "<ChakraProvider theme={extendTheme(theme)}>"
-        "<ChakraColorModeProvider>"
-        "<Text>"
+        "<RadixThemesBox>"
+        '<RadixThemesText as={"p"}>'
+        "<RadixThemesColorModeProvider>"
         "<Fragment2>"
         "<Fragment>"
         "{children}"
         "</Fragment>"
         "</Fragment2>"
-        "</Text>"
-        "</ChakraColorModeProvider>"
-        "</ChakraProvider>"
-        "</Box>"
+        "</RadixThemesColorModeProvider>"
+        "</RadixThemesText>"
+        "</RadixThemesBox>"
         ")"
         "}"
     ) in "".join(app_js_lines)