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

reflex/.templates/apps/demo/code/pages/forms.py

@@ -1,257 +0,0 @@
-"""The settings page for the template."""
-
-import reflex as rx
-
-from ..states.form_state import FormState, UploadState
-from ..styles import *
-
-forms_1_code = """rx.chakra.vstack(
-    rx.chakra.form(
-        rx.chakra.vstack(
-            rx.chakra.input(
-                placeholder="First Name",
-                id="first_name",
-            ),
-            rx.chakra.input(
-                placeholder="Last Name", id="last_name"
-            ),
-            rx.chakra.hstack(
-                rx.chakra.checkbox("Checked", id="check"),
-                rx.chakra.switch("Switched", id="switch"),
-            ),
-            rx.chakra.button("Submit",
-                       type_="submit",
-                       bg="#ecfdf5",
-                       color="#047857",
-                       border_radius="lg",
-            ),
-        ),
-        on_submit=FormState.handle_submit,
-    ),
-    rx.chakra.divider(),
-    rx.chakra.heading("Results"),
-    rx.chakra.text(FormState.form_data.to_string()),
-    width="100%",
-)"""
-
-color = "rgb(107,99,246)"
-
-forms_1_state = """class FormState(rx.State):
-
-    form_data: dict = {}
-
-    def handle_submit(self, form_data: dict):
-        "Handle the form submit."
-        self.form_data = form_data"""
-
-
-forms_2_code = """rx.chakra.vstack(
-    rx.upload(
-        rx.chakra.vstack(
-            rx.chakra.button(
-                "Select File",
-                color=color,
-                bg="white",
-                border=f"1px solid {color}",
-            ),
-            rx.chakra.text(
-                "Drag and drop files here or click to select files"
-            ),
-        ),
-        border=f"1px dotted {color}",
-        padding="5em",
-    ),
-    rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
-    rx.chakra.button(
-        "Upload",
-        on_click=lambda: UploadState.handle_upload(
-            rx.upload_files()
-        ),
-    ),
-    rx.chakra.button(
-        "Clear",
-        on_click=rx.clear_selected_files,
-    ),
-    rx.foreach(
-        UploadState.img, lambda img: rx.chakra.image(src=img, width="20%", height="auto",)
-    ),
-    padding="5em",
-    width="100%",
-)"""
-
-forms_2_state = """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}")"""
-
-
-def forms_page() -> rx.Component:
-    """The UI for the settings page.
-
-    Returns:
-        rx.Component: The UI for the settings page.
-    """
-    return rx.chakra.box(
-        rx.chakra.vstack(
-            rx.chakra.heading(
-                "Forms Demo",
-                font_size="3em",
-            ),
-            rx.chakra.vstack(
-                rx.chakra.form(
-                    rx.chakra.vstack(
-                        rx.chakra.input(
-                            placeholder="First Name",
-                            id="first_name",
-                        ),
-                        rx.chakra.input(placeholder="Last Name", id="last_name"),
-                        rx.chakra.hstack(
-                            rx.chakra.checkbox("Checked", id="check"),
-                            rx.chakra.switch("Switched", id="switch"),
-                        ),
-                        rx.chakra.button(
-                            "Submit",
-                            type_="submit",
-                            bg="#ecfdf5",
-                            color="#047857",
-                            border_radius="lg",
-                        ),
-                    ),
-                    on_submit=FormState.handle_submit,
-                ),
-                rx.chakra.divider(),
-                rx.chakra.heading("Results"),
-                rx.chakra.text(FormState.form_data.to_string()),
-                width="100%",
-            ),
-            rx.chakra.tabs(
-                rx.chakra.tab_list(
-                    rx.chakra.tab("Code", style=tab_style),
-                    rx.chakra.tab("State", style=tab_style),
-                    padding_x=0,
-                ),
-                rx.chakra.tab_panels(
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            forms_1_code,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            forms_1_state,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    width="100%",
-                ),
-                variant="unstyled",
-                color_scheme="purple",
-                align="end",
-                width="100%",
-                padding_top=".5em",
-            ),
-            rx.chakra.heading("Upload Example", font_size="3em"),
-            rx.chakra.text("Try uploading some images and see how they look."),
-            rx.chakra.vstack(
-                rx.upload(
-                    rx.chakra.vstack(
-                        rx.chakra.button(
-                            "Select File",
-                            color=color,
-                            bg="white",
-                            border=f"1px solid {color}",
-                        ),
-                        rx.chakra.text(
-                            "Drag and drop files here or click to select files"
-                        ),
-                    ),
-                    border=f"1px dotted {color}",
-                    padding="5em",
-                ),
-                rx.chakra.hstack(rx.foreach(rx.selected_files, rx.chakra.text)),
-                rx.chakra.button(
-                    "Upload",
-                    on_click=lambda: UploadState.handle_upload(rx.upload_files()),
-                ),
-                rx.chakra.button(
-                    "Clear",
-                    on_click=rx.clear_selected_files,
-                ),
-                rx.foreach(
-                    UploadState.img,
-                    lambda img: rx.chakra.image(
-                        src=img,
-                        width="20%",
-                        height="auto",
-                    ),
-                ),
-                padding="5em",
-                width="100%",
-            ),
-            rx.chakra.tabs(
-                rx.chakra.tab_list(
-                    rx.chakra.tab("Code", style=tab_style),
-                    rx.chakra.tab("State", style=tab_style),
-                    padding_x=0,
-                ),
-                rx.chakra.tab_panels(
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            forms_2_code,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            forms_2_state,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    width="100%",
-                ),
-                variant="unstyled",
-                color_scheme="purple",
-                align="end",
-                width="100%",
-                padding_top=".5em",
-            ),
-            style=template_content_style,
-        ),
-        style=template_page_style,
-    )

reflex/.templates/apps/demo/code/pages/graphing.py

@@ -1,253 +0,0 @@
-"""The dashboard page for the template."""
-
-import reflex as rx
-
-from ..states.pie_state import PieChartState
-from ..styles import *
-
-data_1 = [
-    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
-    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
-    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
-    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
-    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
-    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
-    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
-]
-data_1_show = """[
-    {"name": "Page A", "uv": 4000, "pv": 2400, "amt": 2400},
-    {"name": "Page B", "uv": 3000, "pv": 1398, "amt": 2210},
-    {"name": "Page C", "uv": 2000, "pv": 9800, "amt": 2290},
-    {"name": "Page D", "uv": 2780, "pv": 3908, "amt": 2000},
-    {"name": "Page E", "uv": 1890, "pv": 4800, "amt": 2181},
-    {"name": "Page F", "uv": 2390, "pv": 3800, "amt": 2500},
-    {"name": "Page G", "uv": 3490, "pv": 4300, "amt": 2100},
-]"""
-
-
-graph_1_code = """rx.recharts.composed_chart(
-    rx.recharts.area(
-        data_key="uv", stroke="#8884d8", fill="#8884d8"
-    ),
-    rx.recharts.bar(
-        data_key="amt", bar_size=20, fill="#413ea0"
-    ),
-    rx.recharts.line(
-        data_key="pv", type_="monotone", stroke="#ff7300"
-    ),
-    rx.recharts.x_axis(data_key="name"),
-    rx.recharts.y_axis(),
-    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
-    rx.recharts.graphing_tooltip(),
-    data=data,
-)"""
-
-
-graph_2_code = """rx.recharts.pie_chart(
-    rx.recharts.pie(
-        data=PieChartState.resources,
-        data_key="count",
-        name_key="type_",
-        cx="50%",
-        cy="50%",
-        start_angle=180,
-        end_angle=0,
-        fill="#8884d8",
-        label=True,
-    ),
-    rx.recharts.graphing_tooltip(),
-),
-rx.chakra.vstack(
-    rx.foreach(
-        PieChartState.resource_types,
-        lambda type_, i: rx.chakra.hstack(
-            rx.chakra.button(
-                "-",
-                on_click=PieChartState.decrement(type_),
-            ),
-            rx.chakra.text(
-                type_,
-                PieChartState.resources[i]["count"],
-            ),
-            rx.chakra.button(
-                "+",
-                on_click=PieChartState.increment(type_),
-            ),
-        ),
-    ),
-)"""
-
-graph_2_state = """class PieChartState(rx.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]:
-        return [r["type_"] for r in self.resources]
-
-    def increment(self, type_: str):
-        for resource in self.resources:
-            if resource["type_"] == type_:
-                resource["count"] += 1
-                break
-
-    def decrement(self, type_: str):
-        for resource in self.resources:
-            if (
-                resource["type_"] == type_
-                and resource["count"] > 0
-            ):
-                resource["count"] -= 1
-                break
-"""
-
-
-def graphing_page() -> rx.Component:
-    """The UI for the dashboard page.
-
-    Returns:
-        rx.Component: The UI for the dashboard page.
-    """
-    return rx.chakra.box(
-        rx.chakra.vstack(
-            rx.chakra.heading(
-                "Graphing Demo",
-                font_size="3em",
-            ),
-            rx.chakra.heading(
-                "Composed Chart",
-                font_size="2em",
-            ),
-            rx.chakra.stack(
-                rx.recharts.composed_chart(
-                    rx.recharts.area(data_key="uv", stroke="#8884d8", fill="#8884d8"),
-                    rx.recharts.bar(data_key="amt", bar_size=20, fill="#413ea0"),
-                    rx.recharts.line(data_key="pv", type_="monotone", stroke="#ff7300"),
-                    rx.recharts.x_axis(data_key="name"),
-                    rx.recharts.y_axis(),
-                    rx.recharts.cartesian_grid(stroke_dasharray="3 3"),
-                    rx.recharts.graphing_tooltip(),
-                    data=data_1,
-                    # height="15em",
-                ),
-                width="100%",
-                height="20em",
-            ),
-            rx.chakra.tabs(
-                rx.chakra.tab_list(
-                    rx.chakra.tab("Code", style=tab_style),
-                    rx.chakra.tab("Data", style=tab_style),
-                    padding_x=0,
-                ),
-                rx.chakra.tab_panels(
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            graph_1_code,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            data_1_show,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    width="100%",
-                ),
-                variant="unstyled",
-                color_scheme="purple",
-                align="end",
-                width="100%",
-                padding_top=".5em",
-            ),
-            rx.chakra.heading("Interactive Example", font_size="2em"),
-            rx.chakra.hstack(
-                rx.recharts.pie_chart(
-                    rx.recharts.pie(
-                        data=PieChartState.resources,
-                        data_key="count",
-                        name_key="type_",
-                        cx="50%",
-                        cy="50%",
-                        start_angle=180,
-                        end_angle=0,
-                        fill="#8884d8",
-                        label=True,
-                    ),
-                    rx.recharts.graphing_tooltip(),
-                ),
-                rx.chakra.vstack(
-                    rx.foreach(
-                        PieChartState.resource_types,
-                        lambda type_, i: rx.chakra.hstack(
-                            rx.chakra.button(
-                                "-",
-                                on_click=PieChartState.decrement(type_),
-                            ),
-                            rx.chakra.text(
-                                type_,
-                                PieChartState.resources[i]["count"],
-                            ),
-                            rx.chakra.button(
-                                "+",
-                                on_click=PieChartState.increment(type_),
-                            ),
-                        ),
-                    ),
-                ),
-                width="100%",
-                height="15em",
-            ),
-            rx.chakra.tabs(
-                rx.chakra.tab_list(
-                    rx.chakra.tab("Code", style=tab_style),
-                    rx.chakra.tab("State", style=tab_style),
-                    padding_x=0,
-                ),
-                rx.chakra.tab_panels(
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            graph_2_code,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    rx.chakra.tab_panel(
-                        rx.code_block(
-                            graph_2_state,
-                            language="python",
-                            show_line_numbers=True,
-                        ),
-                        width="100%",
-                        padding_x=0,
-                        padding_y=".25em",
-                    ),
-                    width="100%",
-                ),
-                variant="unstyled",
-                color_scheme="purple",
-                align="end",
-                width="100%",
-                padding_top=".5em",
-            ),
-            style=template_content_style,
-            min_h="100vh",
-        ),
-        style=template_page_style,
-        min_h="100vh",
-    )

reflex/.templates/apps/demo/code/pages/home.py

@@ -1,56 +0,0 @@
-"""The home page of the app."""
-
-import reflex as rx
-
-from ..styles import *
-
-
-def home_page() -> rx.Component:
-    """The UI for the home page.
-
-    Returns:
-        rx.Component: The UI for the home page.
-    """
-    return rx.chakra.box(
-        rx.chakra.vstack(
-            rx.chakra.heading(
-                "Welcome to Reflex! 👋",
-                font_size="3em",
-            ),
-            rx.chakra.text(
-                "Reflex is an open-source app framework built specifically to allow you to build web apps in pure python. 👈 Select a demo from the sidebar to see some examples of what Reflex can do!",
-            ),
-            rx.chakra.heading(
-                "Things to check out:",
-                font_size="2em",
-            ),
-            rx.chakra.unordered_list(
-                rx.chakra.list_item(
-                    "Take a look at ",
-                    rx.chakra.link(
-                        "reflex.dev",
-                        href="https://reflex.dev",
-                        color="rgb(107,99,246)",
-                    ),
-                ),
-                rx.chakra.list_item(
-                    "Check out our ",
-                    rx.chakra.link(
-                        "docs",
-                        href="https://reflex.dev/docs/getting-started/introduction/",
-                        color="rgb(107,99,246)",
-                    ),
-                ),
-                rx.chakra.list_item(
-                    "Ask a question in our ",
-                    rx.chakra.link(
-                        "community",
-                        href="https://discord.gg/T5WSbC2YtQ",
-                        color="rgb(107,99,246)",
-                    ),
-                ),
-            ),
-            style=template_content_style,
-        ),
-        style=template_page_style,
-    )