[REF-3536][REF-3537][REF-3541]Move chakra components into its repo(reflex-chakra)

benchmarks/test_benchmark_compile_pages.py

@@ -7,6 +7,7 @@
 from typing import Generator
 
 import pytest
+import reflex_chakra as rc
 
 from benchmarks import WINDOWS_SKIP_REASON
 from reflex import constants
@@ -144,7 +145,7 @@ class State(rx.State):
 
     def index() -> rx.Component:
         return rx.center(
-            rx.chakra.input(
+            rc.input(
                 id="token", value=State.router.session.client_token, is_read_only=True
             ),
             rx.vstack(

integration/test_background_task.py

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

integration/test_client_storage.py

@@ -17,6 +17,8 @@
 
 def ClientSide():
     """App for testing client-side state."""
+    import reflex_chakra as rc
+
     import reflex as rx
 
     class ClientSideState(rx.State):
@@ -70,18 +72,18 @@ def set_var(self):
 
     def index():
         return rx.fragment(
-            rx.chakra.input(
+            rc.input(
                 value=ClientSideState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
-            rx.chakra.input(
+            rc.input(
                 placeholder="state var",
                 value=ClientSideState.state_var,
                 on_change=ClientSideState.set_state_var,  # type: ignore
                 id="state_var",
             ),
-            rx.chakra.input(
+            rc.input(
                 placeholder="input value",
                 value=ClientSideState.input_value,
                 on_change=ClientSideState.set_input_value,  # type: ignore

integration/test_dynamic_routes.py

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

integration/test_event_actions.py

@@ -16,6 +16,8 @@ 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):
@@ -53,7 +55,7 @@ def get_event_triggers(self):
 
     def index():
         return rx.vstack(
-            rx.chakra.input(
+            rc.input(
                 value=EventActionState.router.session.client_token,
                 is_read_only=True,
                 id="token",
@@ -146,10 +148,10 @@ def index():
                     200
                 ).stop_propagation,
             ),
-            rx.chakra.list(
+            rc.list(
                 rx.foreach(
                     EventActionState.order,  # type: ignore
-                    rx.chakra.list_item,
+                    rc.list_item,
                 ),
             ),
             on_click=EventActionState.on_click("outer"),  # type: ignore

integration/test_event_chain.py

@@ -18,6 +18,8 @@ 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
@@ -127,17 +129,15 @@ def click_yield_interim_value(self):
 
     app = rx.App(state=rx.State)
 
-    token_input = rx.chakra.input(
+    token_input = rc.input(
         value=State.router.session.client_token, is_read_only=True, id="token"
     )
 
     @app.add_page
     def index():
         return rx.fragment(
             token_input,
-            rx.chakra.input(
-                value=State.interim_value, is_read_only=True, id="interim_value"
-            ),
+            rc.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,6 +20,8 @@ def FormSubmit(form_component):
     """
     from typing import Dict, List
 
+    import reflex_chakra as rc
+
     import reflex as rx
 
     class FormState(rx.State):
@@ -35,28 +37,28 @@ def form_submit(self, form_data: Dict):
     @app.add_page
     def index():
         return rx.vstack(
-            rx.chakra.input(
+            rc.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
             eval(form_component)(
                 rx.vstack(
-                    rx.chakra.input(id="name_input"),
-                    rx.hstack(rx.chakra.pin_input(length=4, id="pin_input")),
-                    rx.chakra.number_input(id="number_input"),
+                    rc.input(id="name_input"),
+                    rx.hstack(rc.pin_input(length=4, id="pin_input")),
+                    rc.number_input(id="number_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%"),
-                    rx.chakra.range_slider(id="range_input"),
+                    rc.range_slider(id="range_input"),
                     rx.radio(["option1", "option2"], id="radio_input"),
                     rx.radio(FormState.var_options, id="radio_input_var"),
-                    rx.chakra.select(["option1", "option2"], id="select_input"),
-                    rx.chakra.select(FormState.var_options, id="select_input_var"),
+                    rc.select(["option1", "option2"], id="select_input"),
+                    rc.select(FormState.var_options, id="select_input_var"),
                     rx.text_area(id="text_area_input"),
-                    rx.chakra.input(
+                    rc.input(
                         id="debounce_input",
                         debounce_timeout=0,
                         on_change=rx.console_log,
@@ -79,6 +81,8 @@ def FormSubmitName(form_component):
     """
     from typing import Dict, List
 
+    import reflex_chakra as rc
+
     import reflex as rx
 
     class FormState(rx.State):
@@ -94,39 +98,39 @@ def form_submit(self, form_data: Dict):
     @app.add_page
     def index():
         return rx.vstack(
-            rx.chakra.input(
+            rc.input(
                 value=FormState.router.session.client_token,
                 is_read_only=True,
                 id="token",
             ),
             eval(form_component)(
                 rx.vstack(
-                    rx.chakra.input(name="name_input"),
-                    rx.hstack(rx.chakra.pin_input(length=4, name="pin_input")),
-                    rx.chakra.number_input(name="number_input"),
+                    rc.input(name="name_input"),
+                    rx.hstack(rc.pin_input(length=4, name="pin_input")),
+                    rc.number_input(name="number_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%"),
-                    rx.chakra.range_slider(name="range_input"),
+                    rc.range_slider(name="range_input"),
                     rx.radio(FormState.options, name="radio_input"),
                     rx.select(
                         FormState.options,
                         name="select_input",
                         default_value=FormState.options[0],
                     ),
                     rx.text_area(name="text_area_input"),
-                    rx.chakra.input_group(
-                        rx.chakra.input_left_element(rx.icon(tag="chevron_right")),
-                        rx.chakra.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,
                         ),
-                        rx.chakra.input_right_element(rx.icon(tag="chevron_left")),
+                        rc.input_right_element(rx.icon(tag="chevron_left")),
                     ),
-                    rx.chakra.button_group(
+                    rc.button_group(
                         rx.button("Submit", type_="submit"),
                         rx.icon_button(FormState.val, icon=rx.icon(tag="plus")),
                         variant="outline",
@@ -148,8 +152,8 @@ def index():
         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="rx.chakra.form"),
-        functools.partial(FormSubmitName, form_component="rx.chakra.form"),
+        functools.partial(FormSubmit, form_component="rc.form"),
+        functools.partial(FormSubmitName, form_component="rc.form"),
     ],
     ids=[
         "id-radix",

integration/test_server_side_event.py

@@ -11,6 +11,8 @@
 
 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):
@@ -39,12 +41,12 @@ def set_value_return_c(self):
     @app.add_page
     def index():
         return rx.fragment(
-            rx.chakra.input(
+            rc.input(
                 id="token", value=SSState.router.session.client_token, is_read_only=True
             ),
-            rx.chakra.input(default_value="a", id="a"),
-            rx.chakra.input(default_value="b", id="b"),
-            rx.chakra.input(default_value="c", id="c"),
+            rc.input(default_value="a", id="a"),
+            rc.input(default_value="b", id="b"),
+            rc.input(default_value="c", id="c"),
             rx.button(
                 "Clear Immediate",
                 id="clear_immediate",