reflex 0.5.10a3__py3-none-any.whl → 0.6.0a1__py3-none-any.whl

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

@@ -1,178 +0,0 @@
-"""Sidebar component for the app."""
-
-import reflex as rx
-
-from .state import State
-from .styles import *
-
-
-def sidebar_header() -> rx.Component:
-    """Sidebar header.
-
-    Returns:
-        rx.Component: The sidebar header component.
-    """
-    return rx.chakra.hstack(
-        rx.chakra.image(
-            src="/icon.svg",
-            height="2em",
-        ),
-        rx.chakra.spacer(),
-        rx.chakra.link(
-            rx.chakra.center(
-                rx.chakra.image(
-                    src="/github.svg",
-                    height="3em",
-                    padding="0.5em",
-                ),
-                box_shadow=box_shadow,
-                bg="transparent",
-                border_radius=border_radius,
-                _hover={
-                    "bg": accent_color,
-                },
-            ),
-            href="https://github.com/reflex-dev/reflex",
-        ),
-        width="100%",
-        border_bottom=border,
-        padding="1em",
-    )
-
-
-def sidebar_footer() -> rx.Component:
-    """Sidebar footer.
-
-    Returns:
-        rx.Component: The sidebar footer component.
-    """
-    return rx.chakra.hstack(
-        rx.chakra.link(
-            rx.chakra.center(
-                rx.chakra.image(
-                    src="/paneleft.svg",
-                    height="2em",
-                    padding="0.5em",
-                ),
-                bg="transparent",
-                border_radius=border_radius,
-                **hover_accent_bg,
-            ),
-            on_click=State.toggle_sidebar_displayed,
-            transform=rx.cond(~State.sidebar_displayed, "rotate(180deg)", ""),
-            transition="transform 0.5s, left 0.5s",
-            position="relative",
-            left=rx.cond(State.sidebar_displayed, "0px", "20.5em"),
-            **overlapping_button_style,
-        ),
-        rx.chakra.spacer(),
-        rx.chakra.link(
-            rx.chakra.text(
-                "Docs",
-            ),
-            href="https://reflex.dev/docs/getting-started/introduction/",
-        ),
-        rx.chakra.link(
-            rx.chakra.text(
-                "Blog",
-            ),
-            href="https://reflex.dev/blog/",
-        ),
-        width="100%",
-        border_top=border,
-        padding="1em",
-    )
-
-
-def sidebar_item(text: str, icon: str, url: str) -> rx.Component:
-    """Sidebar item.
-
-    Args:
-        text (str): The text of the item.
-        icon (str): The icon of the item.
-        url (str): The URL of the item.
-
-    Returns:
-        rx.Component: The sidebar item component.
-    """
-    return rx.chakra.link(
-        rx.chakra.hstack(
-            rx.chakra.image(
-                src=icon,
-                height="2.5em",
-                padding="0.5em",
-            ),
-            rx.chakra.text(
-                text,
-            ),
-            bg=rx.cond(
-                State.origin_url == f"/{text.lower()}/",
-                accent_color,
-                "transparent",
-            ),
-            color=rx.cond(
-                State.origin_url == f"/{text.lower()}/",
-                accent_text_color,
-                text_color,
-            ),
-            border_radius=border_radius,
-            box_shadow=box_shadow,
-            width="100%",
-            padding_x="1em",
-        ),
-        href=url,
-        width="100%",
-    )
-
-
-def sidebar() -> rx.Component:
-    """Sidebar.
-
-    Returns:
-        rx.Component: The sidebar component.
-    """
-    return rx.chakra.box(
-        rx.chakra.vstack(
-            sidebar_header(),
-            rx.chakra.vstack(
-                sidebar_item(
-                    "Welcome",
-                    "/github.svg",
-                    "/",
-                ),
-                sidebar_item(
-                    "Graphing Demo",
-                    "/github.svg",
-                    "/graphing",
-                ),
-                sidebar_item(
-                    "Data Table Demo",
-                    "/github.svg",
-                    "/datatable",
-                ),
-                sidebar_item(
-                    "Forms Demo",
-                    "/github.svg",
-                    "/forms",
-                ),
-                sidebar_item(
-                    "Chat App Demo",
-                    "/github.svg",
-                    "/chatapp",
-                ),
-                width="100%",
-                overflow_y="auto",
-                align_items="flex-start",
-                padding="1em",
-            ),
-            rx.chakra.spacer(),
-            sidebar_footer(),
-            height="100dvh",
-        ),
-        display=["none", "none", "block"],
-        min_width=sidebar_width,
-        height="100%",
-        position="sticky",
-        top="0px",
-        border_right=border,
-    )

reflex/.templates/apps/demo/code/state.py

@@ -1,22 +0,0 @@
-"""Base state for the app."""
-
-import reflex as rx
-
-
-class State(rx.State):
-    """State for the app."""
-
-    sidebar_displayed: bool = True
-
-    @rx.var
-    def origin_url(self) -> str:
-        """Get the url of the current page.
-
-        Returns:
-            str: The url of the current page.
-        """
-        return self.router_data.get("asPath", "")
-
-    def toggle_sidebar_displayed(self) -> None:
-        """Toggle the sidebar displayed."""
-        self.sidebar_displayed = not self.sidebar_displayed

reflex/.templates/apps/demo/code/states/form_state.py

@@ -1,40 +0,0 @@
-import reflex as rx
-
-from ..state import State
-
-
-class FormState(State):
-    """Form state."""
-
-    form_data: dict = {}
-
-    def handle_submit(self, form_data: dict):
-        """Handle the form submit.
-
-        Args:
-            form_data: The form data.
-        """
-        self.form_data = form_data
-
-
-class UploadState(State):
-    """The app state."""
-
-    # The images to show.
-    img: list[str]
-
-    async def handle_upload(self, files: list[rx.UploadFile]):
-        """Handle the upload of file(s).
-
-        Args:
-            files: The uploaded files.
-        """
-        for file in files:
-            upload_data = await file.read()
-            outfile = rx.get_asset_path(file.filename)
-            # Save the file.
-            with open(outfile, "wb") as file_object:
-                file_object.write(upload_data)
-
-            # Update the img var.
-            self.img.append(f"/{file.filename}")

reflex/.templates/apps/demo/code/states/pie_state.py

@@ -1,47 +0,0 @@
-from typing import Any
-
-import reflex as rx
-
-from ..state import State
-
-
-class PieChartState(State):
-    """Pie Chart State."""
-
-    resources: list[dict[str, Any]] = [
-        dict(type_="🏆", count=1),
-        dict(type_="🪵", count=1),
-        dict(type_="🥑", count=1),
-        dict(type_="🧱", count=1),
-    ]
-
-    @rx.cached_var
-    def resource_types(self) -> list[str]:
-        """Get the resource types.
-
-        Returns:
-            The resource types.
-        """
-        return [r["type_"] for r in self.resources]
-
-    def increment(self, type_: str):
-        """Increment the count of a resource type.
-
-        Args:
-            type_: The type of resource to increment.
-        """
-        for resource in self.resources:
-            if resource["type_"] == type_:
-                resource["count"] += 1
-                break
-
-    def decrement(self, type_: str):
-        """Decrement the count of a resource type.
-
-        Args:
-            type_: The type of resource to decrement.
-        """
-        for resource in self.resources:
-            if resource["type_"] == type_ and resource["count"] > 0:
-                resource["count"] -= 1
-                break

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

@@ -1,68 +0,0 @@
-"""Styles for the app."""
-
-import reflex as rx
-
-from .state import State
-
-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}}
-content_width_vw = "90vw"
-sidebar_width = "20em"
-
-template_page_style = {
-    "padding_top": "5em",
-    "padding_x": "2em",
-}
-
-template_content_style = {
-    "width": rx.cond(
-        State.sidebar_displayed,
-        f"calc({content_width_vw} - {sidebar_width})",
-        content_width_vw,
-    ),
-    "min-width": sidebar_width,
-    "align_items": "flex-start",
-    "box_shadow": box_shadow,
-    "border_radius": border_radius,
-    "padding": "1em",
-    "margin_bottom": "2em",
-}
-
-link_style = {
-    "color": text_color,
-    "text_decoration": "none",
-    **hover_accent_color,
-}
-
-overlapping_button_style = {
-    "background_color": "white",
-    "border": border,
-    "border_radius": border_radius,
-}
-
-base_style = {
-    rx.chakra.MenuButton: {
-        "width": "3em",
-        "height": "3em",
-        **overlapping_button_style,
-    },
-    rx.chakra.MenuItem: hover_accent_bg,
-}
-
-tab_style = {
-    "color": "#494369",
-    "font_weight": 600,
-    "_selected": {
-        "color": "#5646ED",
-        "bg": "#F5EFFE",
-        "padding_x": "0.5em",
-        "padding_y": "0.25em",
-        "border_radius": "8px",
-    },
-}

reflex/.templates/apps/demo/code/webui/components/__init__.py

@@ -1,4 +0,0 @@
-from .loading_icon import loading_icon
-from .modal import modal
-from .navbar import navbar
-from .sidebar import sidebar

reflex/.templates/apps/demo/code/webui/components/chat.py

@@ -1,118 +0,0 @@
-import reflex as rx
-
-from ...webui import styles
-from ...webui.components import loading_icon
-from ...webui.state import QA, State
-
-
-def message(qa: QA) -> rx.Component:
-    """A single question/answer message.
-
-    Args:
-        qa: The question/answer pair.
-
-    Returns:
-        A component displaying the question/answer pair.
-    """
-    return rx.chakra.box(
-        rx.chakra.box(
-            rx.chakra.text(
-                qa.question,
-                bg=styles.border_color,
-                shadow=styles.shadow_light,
-                **styles.message_style,
-            ),
-            text_align="right",
-            margin_top="1em",
-        ),
-        rx.chakra.box(
-            rx.chakra.text(
-                qa.answer,
-                bg=styles.accent_color,
-                shadow=styles.shadow_light,
-                **styles.message_style,
-            ),
-            text_align="left",
-            padding_top="1em",
-        ),
-        width="100%",
-    )
-
-
-def chat() -> rx.Component:
-    """List all the messages in a single conversation.
-
-    Returns:
-        A component displaying all the messages in a single conversation.
-    """
-    return rx.chakra.vstack(
-        rx.chakra.box(rx.foreach(State.chats[State.current_chat], message)),
-        py="8",
-        flex="1",
-        width="100%",
-        max_w="3xl",
-        padding_x="4",
-        align_self="center",
-        overflow="hidden",
-        padding_bottom="5em",
-        **styles.base_style[rx.chakra.Vstack],
-    )
-
-
-def action_bar() -> rx.Component:
-    """The action bar to send a new message.
-
-    Returns:
-        The action bar to send a new message.
-    """
-    return rx.chakra.box(
-        rx.chakra.vstack(
-            rx.chakra.form(
-                rx.chakra.form_control(
-                    rx.chakra.hstack(
-                        rx.chakra.input(
-                            placeholder="Type something...",
-                            value=State.question,
-                            on_change=State.set_question,
-                            _placeholder={"color": "#fffa"},
-                            _hover={"border_color": styles.accent_color},
-                            style=styles.input_style,
-                        ),
-                        rx.chakra.button(
-                            rx.cond(
-                                State.processing,
-                                loading_icon(height="1em"),
-                                rx.chakra.text("Send"),
-                            ),
-                            type_="submit",
-                            _hover={"bg": styles.accent_color},
-                            style=styles.input_style,
-                        ),
-                        **styles.base_style[rx.chakra.Hstack],
-                    ),
-                    is_disabled=State.processing,
-                ),
-                on_submit=State.process_question,
-                width="100%",
-            ),
-            rx.chakra.text(
-                "ReflexGPT may return factually incorrect or misleading responses. Use discretion.",
-                font_size="xs",
-                color="#fff6",
-                text_align="center",
-            ),
-            width="100%",
-            max_w="3xl",
-            mx="auto",
-            **styles.base_style[rx.chakra.Vstack],
-        ),
-        position="sticky",
-        bottom="0",
-        left="0",
-        py="4",
-        backdrop_filter="auto",
-        backdrop_blur="lg",
-        border_top=f"1px solid {styles.border_color}",
-        align_items="stretch",
-        width="100%",
-    )

reflex/.templates/apps/demo/code/webui/components/loading_icon.py

@@ -1,19 +0,0 @@
-import reflex as rx
-
-
-class LoadingIcon(rx.Component):
-    """A custom loading icon component."""
-
-    library = "react-loading-icons"
-    tag = "SpinningCircles"
-    stroke: rx.Var[str]
-    stroke_opacity: rx.Var[str]
-    fill: rx.Var[str]
-    fill_opacity: rx.Var[str]
-    stroke_width: rx.Var[str]
-    speed: rx.Var[str]
-    height: rx.Var[str]
-    on_change: rx.EventHandler[lambda status: [status]]
-
-
-loading_icon = LoadingIcon.create

reflex/.templates/apps/demo/code/webui/components/modal.py

@@ -1,56 +0,0 @@
-import reflex as rx
-
-from ...webui.state import State
-
-
-def modal() -> rx.Component:
-    """A modal to create a new chat.
-
-    Returns:
-        The modal component.
-    """
-    return rx.chakra.modal(
-        rx.chakra.modal_overlay(
-            rx.chakra.modal_content(
-                rx.chakra.modal_header(
-                    rx.chakra.hstack(
-                        rx.chakra.text("Create new chat"),
-                        rx.chakra.icon(
-                            tag="close",
-                            font_size="sm",
-                            on_click=State.toggle_modal,
-                            color="#fff8",
-                            _hover={"color": "#fff"},
-                            cursor="pointer",
-                        ),
-                        align_items="center",
-                        justify_content="space-between",
-                    )
-                ),
-                rx.chakra.modal_body(
-                    rx.chakra.input(
-                        placeholder="Type something...",
-                        on_blur=State.set_new_chat_name,
-                        bg="#222",
-                        border_color="#fff3",
-                        _placeholder={"color": "#fffa"},
-                    ),
-                ),
-                rx.chakra.modal_footer(
-                    rx.chakra.button(
-                        "Create",
-                        bg="#5535d4",
-                        box_shadow="md",
-                        px="4",
-                        py="2",
-                        h="auto",
-                        _hover={"bg": "#4c2db3"},
-                        on_click=State.create_chat,
-                    ),
-                ),
-                bg="#222",
-                color="#fff",
-            ),
-        ),
-        is_open=State.modal_open,
-    )

reflex/.templates/apps/demo/code/webui/components/navbar.py

@@ -1,70 +0,0 @@
-import reflex as rx
-
-from ...webui import styles
-from ...webui.state import State
-
-
-def navbar():
-    return rx.chakra.box(
-        rx.chakra.hstack(
-            rx.chakra.hstack(
-                rx.chakra.icon(
-                    tag="hamburger",
-                    mr=4,
-                    on_click=State.toggle_drawer,
-                    cursor="pointer",
-                ),
-                rx.chakra.link(
-                    rx.chakra.box(
-                        rx.chakra.image(src="favicon.ico", width=30, height="auto"),
-                        p="1",
-                        border_radius="6",
-                        bg="#F0F0F0",
-                        mr="2",
-                    ),
-                    href="/",
-                ),
-                rx.chakra.breadcrumb(
-                    rx.chakra.breadcrumb_item(
-                        rx.chakra.heading("ReflexGPT", size="sm"),
-                    ),
-                    rx.chakra.breadcrumb_item(
-                        rx.chakra.text(
-                            State.current_chat, size="sm", font_weight="normal"
-                        ),
-                    ),
-                ),
-            ),
-            rx.chakra.hstack(
-                rx.chakra.button(
-                    "+ New chat",
-                    bg=styles.accent_color,
-                    px="4",
-                    py="2",
-                    h="auto",
-                    on_click=State.toggle_modal,
-                ),
-                rx.chakra.menu(
-                    rx.chakra.menu_button(
-                        rx.chakra.avatar(name="User", size="md"),
-                        rx.chakra.box(),
-                    ),
-                    rx.chakra.menu_list(
-                        rx.chakra.menu_item("Help"),
-                        rx.chakra.menu_divider(),
-                        rx.chakra.menu_item("Settings"),
-                    ),
-                ),
-                spacing="8",
-            ),
-            justify="space-between",
-        ),
-        bg=styles.bg_dark_color,
-        backdrop_filter="auto",
-        backdrop_blur="lg",
-        p="4",
-        border_bottom=f"1px solid {styles.border_color}",
-        position="sticky",
-        top="0",
-        z_index="100",
-    )

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

@@ -1,66 +0,0 @@
-import reflex as rx
-
-from ...webui import styles
-from ...webui.state import State
-
-
-def sidebar_chat(chat: str) -> rx.Component:
-    """A sidebar chat item.
-
-    Args:
-        chat: The chat item.
-
-    Returns:
-        The sidebar chat item.
-    """
-    return rx.chakra.hstack(
-        rx.chakra.box(
-            chat,
-            on_click=lambda: State.set_chat(chat),
-            style=styles.sidebar_style,
-            color=styles.icon_color,
-            flex="1",
-        ),
-        rx.chakra.box(
-            rx.chakra.icon(
-                tag="delete",
-                style=styles.icon_style,
-                on_click=State.delete_chat,
-            ),
-            style=styles.sidebar_style,
-        ),
-        color=styles.text_light_color,
-        cursor="pointer",
-    )
-
-
-def sidebar() -> rx.Component:
-    """The sidebar component.
-
-    Returns:
-        The sidebar component.
-    """
-    return rx.chakra.drawer(
-        rx.chakra.drawer_overlay(
-            rx.chakra.drawer_content(
-                rx.chakra.drawer_header(
-                    rx.chakra.hstack(
-                        rx.chakra.text("Chats"),
-                        rx.chakra.icon(
-                            tag="close",
-                            on_click=State.toggle_drawer,
-                            style=styles.icon_style,
-                        ),
-                    )
-                ),
-                rx.chakra.drawer_body(
-                    rx.chakra.vstack(
-                        rx.foreach(State.chat_titles, lambda chat: sidebar_chat(chat)),
-                        align_items="stretch",
-                    )
-                ),
-            ),
-        ),
-        placement="left",
-        is_open=State.drawer_open,
-    )