reflex 0.4.2a1__py3-none-any.whl → 0.4.3a2__py3-none-any.whl

reflex/.templates/apps/blank/code/blank.py

@@ -4,7 +4,7 @@ from rxconfig import config
 
 import reflex as rx
 
-docs_url = "https://reflex.dev/docs/getting-started/introduction"
+docs_url = "https://reflex.dev/docs/getting-started/introduction/"
 filename = f"{config.app_name}/{config.app_name}.py"
 
 

reflex/.templates/apps/sidebar/README.md

@@ -41,7 +41,7 @@ See the [Project Structure docs](https://reflex.dev/docs/getting-started/project
 In this template, the pages in your app are defined in `{your_app}/pages/`.
 Each page is a function that returns a Reflex component.
 For example, to edit this page you can modify `{your_app}/pages/index.py`.
-See the [pages docs](https://reflex.dev/docs/components/pages/) for more information on pages.
+See the [pages docs](https://reflex.dev/docs/pages/routes/) for more information on pages.
 
 In this template, instead of using `rx.add_page` or the `@rx.page` decorator,
 we use the `@template` decorator from `{your_app}/templates/template.py`.
@@ -62,7 +62,8 @@ In this template, we have a sidebar component in `{your_app}/components/sidebar.
 
 ### Adding State
 
-As your app grows, we recommend using [substates](https://reflex.dev/docs/state/substates/)
+As your app grows, we recommend using [substates](https://reflex.dev/docs/substates/overview/)
 to organize your state.
+
 You can either define substates in their own files, or if the state is
 specific to a page, you can define it in the page file itself.

reflex/.templates/apps/sidebar/assets/reflex_white.svg

@@ -0,0 +1,8 @@
+<svg width="56" height="12" viewBox="0 0 56 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z" fill="white"/>
+<path d="M11.2 11.5999V0.399902H17.92V2.6399H13.44V4.8799H17.92V7.1199H13.44V9.3599H17.92V11.5999H11.2Z" fill="white"/>
+<path d="M20.16 11.5999V0.399902H26.88V2.6399H22.4V4.8799H26.88V7.1199H22.4V11.5999H20.16Z" fill="white"/>
+<path d="M29.12 11.5999V0.399902H31.36V9.3599H35.84V11.5999H29.12Z" fill="white"/>
+<path d="M38.08 11.5999V0.399902H44.8V2.6399H40.32V4.8799H44.8V7.1199H40.32V9.3599H44.8V11.5999H38.08Z" fill="white"/>
+<path d="M47.04 4.8799V0.399902H49.28V4.8799H47.04ZM53.76 4.8799V0.399902H56V4.8799H53.76ZM49.28 7.1199V4.8799H53.76V7.1199H49.28ZM47.04 11.5999V7.1199H49.28V11.5999H47.04ZM53.76 11.5999V7.1199H56V11.5999H53.76Z" fill="white"/>
+</svg>

reflex/.templates/apps/sidebar/code/components/sidebar.py

@@ -11,17 +11,17 @@ def sidebar_header() -> rx.Component:
     Returns:
         The sidebar header component.
     """
-    return rx.chakra.hstack(
+    return rx.hstack(
         # The logo.
-        rx.chakra.image(
-            src="/icon.svg",
-            height="2em",
+        rx.color_mode_cond(
+            rx.image(src="/reflex_black.svg", height="2em"),
+            rx.image(src="/reflex_white.svg", height="2em"),
         ),
-        rx.chakra.spacer(),
+        rx.spacer(),
         # Link to Reflex GitHub repo.
-        rx.chakra.link(
-            rx.chakra.center(
-                rx.chakra.image(
+        rx.link(
+            rx.center(
+                rx.image(
                     src="/github.svg",
                     height="3em",
                     padding="0.5em",
@@ -35,6 +35,7 @@ def sidebar_header() -> rx.Component:
             ),
             href="https://github.com/reflex-dev/reflex",
         ),
+        align="center",
         width="100%",
         border_bottom=styles.border,
         padding="1em",
@@ -47,15 +48,17 @@ def sidebar_footer() -> rx.Component:
     Returns:
         The sidebar footer component.
     """
-    return rx.chakra.hstack(
-        rx.chakra.spacer(),
-        rx.chakra.link(
-            rx.chakra.text("Docs"),
+    return rx.hstack(
+        rx.spacer(),
+        rx.link(
+            rx.text("Docs"),
             href="https://reflex.dev/docs/getting-started/introduction/",
+            style=styles.link_style,
         ),
-        rx.chakra.link(
-            rx.chakra.text("Blog"),
+        rx.link(
+            rx.text("Blog"),
             href="https://reflex.dev/blog/",
+            style=styles.link_style,
         ),
         width="100%",
         border_top=styles.border,
@@ -79,14 +82,14 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
         (rx.State.router.page.path == "/") & text == "Home"
     )
 
-    return rx.chakra.link(
-        rx.chakra.hstack(
-            rx.chakra.image(
+    return rx.link(
+        rx.hstack(
+            rx.image(
                 src=icon,
                 height="2.5em",
                 padding="0.5em",
             ),
-            rx.chakra.text(
+            rx.text(
                 text,
             ),
             bg=rx.cond(
@@ -99,6 +102,7 @@ def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
                 styles.accent_text_color,
                 styles.text_color,
             ),
+            align="center",
             border_radius=styles.border_radius,
             box_shadow=styles.box_shadow,
             width="100%",
@@ -118,10 +122,10 @@ def sidebar() -> rx.Component:
     # Get all the decorated pages and add them to the sidebar.
     from reflex.page import get_decorated_pages
 
-    return rx.chakra.box(
-        rx.chakra.vstack(
+    return rx.box(
+        rx.vstack(
             sidebar_header(),
-            rx.chakra.vstack(
+            rx.vstack(
                 *[
                     sidebar_item(
                         text=page.get("title", page["route"].strip("/").capitalize()),
@@ -135,7 +139,7 @@ def sidebar() -> rx.Component:
                 align_items="flex-start",
                 padding="1em",
             ),
-            rx.chakra.spacer(),
+            rx.spacer(),
             sidebar_footer(),
             height="100dvh",
         ),

reflex/.templates/apps/sidebar/code/pages/dashboard.py

@@ -1,4 +1,5 @@
 """The dashboard page."""
+
 from code.templates import template
 
 import reflex as rx
@@ -11,11 +12,11 @@ def dashboard() -> rx.Component:
     Returns:
         The UI for the dashboard page.
     """
-    return rx.chakra.vstack(
-        rx.chakra.heading("Dashboard", font_size="3em"),
-        rx.chakra.text("Welcome to Reflex!"),
-        rx.chakra.text(
+    return rx.vstack(
+        rx.heading("Dashboard", size="8"),
+        rx.text("Welcome to Reflex!"),
+        rx.text(
             "You can edit this page in ",
-            rx.chakra.code("{your_app}/pages/dashboard.py"),
+            rx.code("{your_app}/pages/dashboard.py"),
         ),
     )

reflex/.templates/apps/sidebar/code/pages/settings.py

@@ -1,6 +1,6 @@
 """The settings page."""
 
-from code.templates import template
+from code.templates import ThemeState, template
 
 import reflex as rx
 
@@ -12,11 +12,50 @@ def settings() -> rx.Component:
     Returns:
         The UI for the settings page.
     """
-    return rx.chakra.vstack(
-        rx.chakra.heading("Settings", font_size="3em"),
-        rx.chakra.text("Welcome to Reflex!"),
-        rx.chakra.text(
+    return rx.vstack(
+        rx.heading("Settings", size="8"),
+        rx.hstack(
+            rx.text("Dark mode: "),
+            rx.color_mode.switch(),
+        ),
+        rx.hstack(
+            rx.text("Theme color: "),
+            rx.select(
+                [
+                    "tomato",
+                    "red",
+                    "ruby",
+                    "crimson",
+                    "pink",
+                    "plum",
+                    "purple",
+                    "violet",
+                    "iris",
+                    "indigo",
+                    "blue",
+                    "cyan",
+                    "teal",
+                    "jade",
+                    "green",
+                    "grass",
+                    "brown",
+                    "orange",
+                    "sky",
+                    "mint",
+                    "lime",
+                    "yellow",
+                    "amber",
+                    "gold",
+                    "bronze",
+                    "gray",
+                ],
+                value=ThemeState.accent_color,
+                on_change=ThemeState.set_accent_color,
+            ),
+        ),
+        rx.text(
             "You can edit this page in ",
-            rx.chakra.code("{your_app}/pages/settings.py"),
+            rx.code("{your_app}/pages/settings.py"),
+            size="1",
         ),
     )

reflex/.templates/apps/sidebar/code/styles.py

@@ -4,12 +4,12 @@ import reflex as rx
 
 border_radius = "0.375rem"
 box_shadow = "0px 0px 0px 1px rgba(84, 82, 95, 0.14)"
-border = "1px solid #F4F3F6"
-text_color = "black"
-accent_text_color = "#1A1060"
-accent_color = "#F5EFFE"
-hover_accent_color = {"_hover": {"color": accent_color}}
-hover_accent_bg = {"_hover": {"bg": accent_color}}
+border = f"1px solid {rx.color('accent', 12)}"
+text_color = rx.color("gray", 11)
+accent_text_color = rx.color("accent", 10)
+accent_color = rx.color("accent", 1)
+hover_accent_color = {"_hover": {"color": accent_text_color}}
+hover_accent_bg = {"_hover": {"background_color": accent_color}}
 content_width_vw = "90vw"
 sidebar_width = "20em"
 
@@ -24,7 +24,7 @@ template_content_style = {
 }
 
 link_style = {
-    "color": text_color,
+    "color": accent_text_color,
     "text_decoration": "none",
     **hover_accent_color,
 }
@@ -36,27 +36,25 @@ overlapping_button_style = {
 }
 
 base_style = {
-    rx.chakra.MenuButton: {
-        "width": "3em",
-        "height": "3em",
+    rx.menu.trigger: {
         **overlapping_button_style,
     },
-    rx.chakra.MenuItem: hover_accent_bg,
+    rx.menu.item: hover_accent_bg,
 }
 
 markdown_style = {
-    "code": lambda text: rx.chakra.code(text, color="#1F1944", bg="#EAE4FD"),
-    "a": lambda text, **props: rx.chakra.link(
+    "code": lambda text: rx.code(text, color=accent_text_color, bg=accent_color),
+    "a": lambda text, **props: rx.link(
         text,
         **props,
         font_weight="bold",
-        color="#03030B",
+        color=accent_text_color,
         text_decoration="underline",
-        text_decoration_color="#AD9BF8",
+        text_decoration_color=accent_text_color,
         _hover={
-            "color": "#AD9BF8",
+            "color": accent_color,
             "text_decoration": "underline",
-            "text_decoration_color": "#03030B",
+            "text_decoration_color": accent_color,
         },
     ),
 }

reflex/.templates/apps/sidebar/code/templates/__init__.py

@@ -1 +1 @@
-from .template import template
+from .template import ThemeState, template

reflex/.templates/apps/sidebar/code/templates/template.py

@@ -17,6 +17,21 @@ default_meta = [
 ]
 
 
+def menu_item_link(text, href):
+    return rx.menu.item(
+        rx.link(
+            text,
+            href=href,
+            width="100%",
+            color="inherit",
+        ),
+        _hover={
+            "color": styles.accent_color,
+            "background_color": styles.accent_text_color,
+        },
+    )
+
+
 def menu_button() -> rx.Component:
     """The menu button on the top right of the page.
 
@@ -25,37 +40,24 @@ def menu_button() -> rx.Component:
     """
     from reflex.page import get_decorated_pages
 
-    return rx.chakra.box(
-        rx.chakra.menu(
-            rx.chakra.menu_button(
-                rx.chakra.icon(
-                    tag="hamburger",
-                    size="4em",
-                    color=styles.text_color,
+    return rx.box(
+        rx.menu.root(
+            rx.menu.trigger(
+                rx.icon(
+                    "menu",
+                    size=36,
+                    color=styles.accent_text_color,
                 ),
+                background_color=styles.accent_color,
             ),
-            rx.chakra.menu_list(
+            rx.menu.content(
                 *[
-                    rx.chakra.menu_item(
-                        rx.chakra.link(
-                            page["title"],
-                            href=page["route"],
-                            width="100%",
-                        )
-                    )
+                    menu_item_link(page["title"], page["route"])
                     for page in get_decorated_pages()
                 ],
-                rx.chakra.menu_divider(),
-                rx.chakra.menu_item(
-                    rx.chakra.link(
-                        "About", href="https://github.com/reflex-dev", width="100%"
-                    )
-                ),
-                rx.chakra.menu_item(
-                    rx.chakra.link(
-                        "Contact", href="mailto:founders@=reflex.dev", width="100%"
-                    )
-                ),
+                rx.menu.separator(),
+                menu_item_link("About", "https://github.com/reflex-dev"),
+                menu_item_link("Contact", "mailto:founders@=reflex.dev"),
             ),
         ),
         position="fixed",
@@ -65,6 +67,12 @@ def menu_button() -> rx.Component:
     )
 
 
+class ThemeState(rx.State):
+    """The state for the theme of the app."""
+
+    accent_color: str = "crimson"
+
+
 def template(
     route: str | None = None,
     title: str | None = None,
@@ -101,31 +109,37 @@ def template(
         # Get the meta tags for the page.
         all_meta = [*default_meta, *(meta or [])]
 
-        @rx.page(
-            route=route,
-            title=title,
-            image=image,
-            description=description,
-            meta=all_meta,
-            script_tags=script_tags,
-            on_load=on_load,
-        )
         def templated_page():
-            return rx.chakra.hstack(
+            return rx.hstack(
                 sidebar(),
-                rx.chakra.box(
-                    rx.chakra.box(
+                rx.box(
+                    rx.box(
                         page_content(),
                         **styles.template_content_style,
                     ),
                     **styles.template_page_style,
                 ),
                 menu_button(),
-                align_items="flex-start",
+                align="start",
                 transition="left 0.5s, width 0.5s",
                 position="relative",
             )
 
-        return templated_page
+        @rx.page(
+            route=route,
+            title=title,
+            image=image,
+            description=description,
+            meta=all_meta,
+            script_tags=script_tags,
+            on_load=on_load,
+        )
+        def theme_wrap():
+            return rx.theme(
+                templated_page(),
+                accent_color=ThemeState.accent_color,
+            )
+
+        return theme_wrap
 
     return decorator

reflex/.templates/jinja/custom_components/README.md.jinja2

@@ -0,0 +1,9 @@
+# {{ module_name }}
+
+A Reflex custom component {{ module_name }}.
+
+## Installation
+
+```bash
+pip install {{ package_name }}
+```

reflex/.templates/jinja/custom_components/__init__.py.jinja2

@@ -0,0 +1 @@
+from .{{ module_name }} import *

reflex/.templates/jinja/custom_components/demo_app.py.jinja2

@@ -0,0 +1,36 @@
+"""Welcome to Reflex! This file showcases the custom component in a basic app."""
+
+from rxconfig import config
+
+import reflex as rx
+
+from {{ custom_component_module_dir }} import {{ module_name }}
+
+filename = f"{config.app_name}/{config.app_name}.py"
+
+
+class State(rx.State):
+    """The app state."""
+
+    pass
+
+
+def index() -> rx.Component:
+    return rx.center(
+        rx.theme_panel(),
+        rx.vstack(
+            rx.heading("Welcome to Reflex!", size="9"),
+            rx.text("Test your custom component by editing ", rx.code(filename)),
+            {{ module_name }}(),
+            align="center",
+            spacing="7",
+            font_size="2em",
+        ),
+        height="100vh",
+    )
+
+
+# Add state and page to the app.
+app = rx.App()
+app.add_page(index)
+

reflex/.templates/jinja/custom_components/pyproject.toml.jinja2

@@ -0,0 +1,35 @@
+[build-system]
+requires = [
+    "setuptools",
+    "wheel",
+]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "{{ package_name }}"
+version = "0.0.1"
+description = "Reflex custom component {{ module_name }}"
+readme = "README.md"
+license = { text = "Apache-2.0" }
+requires-python = ">=3.8"
+authors = [{ name = "Your Name", email = "YOUREMAIL@domain.com" }]
+keywords = [
+    "reflex",
+    "reflex-custom-components"]
+
+dependencies = [
+    "reflex>=0.4.2"
+]
+
+classifiers = [
+  "Development Status :: 4 - Beta",
+]
+
+[project.urls]
+Homepage = "https://github.com"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.setuptools.packages.find]
+where = ["custom_components"]

reflex/.templates/jinja/custom_components/src.py.jinja2

@@ -0,0 +1,57 @@
+"""Reflex custom component {{ component_class_name }}."""
+
+# For wrapping react guide, visit https://reflex.dev/docs/wrapping-react/overview/
+
+import reflex as rx
+
+# Some libraries you may want to wrap may require dynamic imports.
+# This is because they they may not be compatible with Server-Side Rendering (SSR).
+# To handle this in Reflex all you need to do is subclass NoSSRComponent instead.
+# For example:
+# from reflex.components.component import NoSSRComponent
+# class {{ component_class_name }}(NoSSRComponent):
+#     pass
+
+
+class {{ component_class_name }}(rx.Component):
+    """{{ component_class_name }} component."""
+
+    # The React library to wrap.
+    library = "Fill-Me"
+
+    # The React component tag.
+    tag = "Fill-Me"
+
+    # If the tag is the default export from the module, you must set is_default = True.
+    # This is normally used when components don't have curly braces around them when importing.
+    # is_default = True
+
+    # If you are wrapping another components with the same tag as a component in your project
+    # you can use aliases to differentiate between them and avoid naming conflicts.
+    # alias = "Other{{ component_class_name }}"
+
+    # The props of the React component.
+    # Note: when Reflex compiles the component to Javascript,
+    # `snake_case` property names are automatically formatted as `camelCase`.
+    # The prop names may be defined in `camelCase` as well.
+    # some_prop: rx.Var[str] = "some default value"
+    # some_other_prop: rx.Var[int] = 1
+
+    # By default Reflex will install the library you have specified in the library property.
+    # However, sometimes you may need to install other libraries to use a component.
+    # In this case you can use the lib_dependencies property to specify other libraries to install.
+    # lib_dependencies: list[str] = []
+
+    # Event triggers, I did not understand the wording of the doc.
+    # def get_event_triggers(self) -> dict[str, Any]:
+    #     return {
+    #         **super().get_event_triggers(),
+    #         "on_change": lambda e0: [e0],
+    #     }
+
+    # To add custom code to your component
+    # def _get_custom_code(self) -> str:
+    #     return "const customCode = 'customCode';"
+
+
+{{ module_name }} = {{ component_class_name }}.create

reflex/.templates/jinja/web/utils/context.js.jinja2

@@ -25,11 +25,31 @@ export const clientStorage = {}
 
 {% if state_name %}
 export const state_name = "{{state_name}}"
-export const onLoadInternalEvent = () => [
-    Event('{{state_name}}.{{const.update_vars_internal}}', {vars: hydrateClientStorage(clientStorage)}),
-    Event('{{state_name}}.{{const.on_load_internal}}')
-]
 
+// Theses events are triggered on initial load and each page navigation.
+export const onLoadInternalEvent = () => {
+    const internal_events = [];
+
+    // Get tracked cookie and local storage vars to send to the backend.
+    const client_storage_vars = hydrateClientStorage(clientStorage);
+    // But only send the vars if any are actually set in the browser.
+    if (client_storage_vars && Object.keys(client_storage_vars).length !== 0) {
+        internal_events.push(
+            Event(
+                '{{state_name}}.{{const.update_vars_internal}}',
+                {vars: client_storage_vars},
+            ),
+        );
+    }
+
+    // `on_load_internal` triggers the correct on_load event(s) for the current page.
+    // If the page does not define any on_load event, this will just set `is_hydrated = true`.
+    internal_events.push(Event('{{state_name}}.{{const.on_load_internal}}'));
+
+    return internal_events;
+}
+
+// The following events are sent when the websocket connects or reconnects.
 export const initialEvents = () => [
     Event('{{state_name}}.{{const.hydrate}}'),
     ...onLoadInternalEvent()
@@ -60,13 +80,13 @@ export function UploadFilesProvider({ children }) {
 
 export function EventLoopProvider({ children }) {
   const dispatch = useContext(DispatchContext)
-  const [addEvents, connectError] = useEventLoop(
+  const [addEvents, connectErrors] = useEventLoop(
     dispatch,
     initialEvents,
     clientStorage,
   )
   return (
-    <EventLoopContext.Provider value={[addEvents, connectError]}>
+    <EventLoopContext.Provider value={[addEvents, connectErrors]}>
       {children}
     </EventLoopContext.Provider>
   )