Update examples to support reflex 0.2.0

clock/.gitignore

@@ -1,4 +1,4 @@
-.web
-pynecone.db
 *.py[cod]
-__pycache__/
+.web
+__pycache__/
+reflex.db

clock/clock/clock.py

@@ -1,10 +1,10 @@
-"""A Pynecone example of a analog clock."""
+"""A Reflex example of a analog clock."""
 
 import asyncio
 from datetime import datetime
 from typing import Any
 
-import pynecone as pc
+import reflex as rx
 import pytz
 
 
@@ -32,7 +32,7 @@ def rotate(degrees: int) -> str:
     return f"rotate({degrees}deg)"
 
 
-class State(pc.State):
+class State(rx.State):
     """The app state."""
 
     # The time zone to display the clock in.
@@ -41,7 +41,7 @@ class State(pc.State):
     # Whether the clock is running.
     running: bool = False
 
-    @pc.var
+    @rx.var
     def time_info(self) -> dict[str, Any]:
         """Get the current time info.
 
@@ -91,7 +91,7 @@ def flip_switch(self, running: bool):
             return self.tick
 
 
-def clock_hand(rotation: str, color: str, length: str) -> pc.Component:
+def clock_hand(rotation: str, color: str, length: str) -> rx.Component:
     """Create a clock hand.
 
     Args:
@@ -102,7 +102,7 @@ def clock_hand(rotation: str, color: str, length: str) -> pc.Component:
     Returns:
         A clock hand component.
     """
-    return pc.divider(
+    return rx.divider(
         transform=rotation,
         width=f"{length}em",
         position="absolute",
@@ -113,11 +113,11 @@ def clock_hand(rotation: str, color: str, length: str) -> pc.Component:
     )
 
 
-def analog_clock() -> pc.Component:
+def analog_clock() -> rx.Component:
     """Create the analog clock."""
-    return pc.circle(
+    return rx.circle(
         # The inner circle.
-        pc.circle(
+        rx.circle(
             width="1em",
             height="1em",
             border_width="thick",
@@ -137,15 +137,15 @@ def analog_clock() -> pc.Component:
     )
 
 
-def digital_clock() -> pc.Component:
+def digital_clock() -> rx.Component:
     """Create the digital clock."""
-    return pc.hstack(
-        pc.heading(State.time_info["hour"]),
-        pc.heading(":"),
-        pc.heading(State.time_info["minute_display"]),
-        pc.heading(":"),
-        pc.heading(State.time_info["second_display"]),
-        pc.heading(State.time_info["meridiem"]),
+    return rx.hstack(
+        rx.heading(State.time_info["hour"]),
+        rx.heading(":"),
+        rx.heading(State.time_info["minute_display"]),
+        rx.heading(":"),
+        rx.heading(State.time_info["second_display"]),
+        rx.heading(State.time_info["meridiem"]),
         border_width="medium",
         border_color="#43464B",
         border_radius="2em",
@@ -155,9 +155,9 @@ def digital_clock() -> pc.Component:
     )
 
 
-def timezone_select() -> pc.Component:
+def timezone_select() -> rx.Component:
     """Create the timezone select."""
-    return pc.select(
+    return rx.select(
         TIMEZONES,
         placeholder="Select a time zone.",
         on_change=State.set_zone,
@@ -168,12 +168,12 @@ def timezone_select() -> pc.Component:
 
 def index():
     """The main view."""
-    return pc.center(
-        pc.vstack(
+    return rx.center(
+        rx.vstack(
             analog_clock(),
-            pc.hstack(
+            rx.hstack(
                 digital_clock(),
-                pc.switch(is_checked=State.running, on_change=State.flip_switch),
+                rx.switch(is_checked=State.running, on_change=State.flip_switch),
             ),
             timezone_select(),
             padding="5em",
@@ -188,6 +188,6 @@ def index():
 
 
 # Add state and page to the app.
-app = pc.App(state=State)
+app = rx.App(state=State)
 app.add_page(index, title="Clock", on_load=State.on_load)
 app.compile()

clock/requirements.txt

@@ -1,2 +1,2 @@
-pynecone>=0.1.33
+reflex>=0.2.0
 pytz==2022.7.1

clock/rxconfig.py

@@ -0,0 +1,7 @@
+import reflex as rx
+
+config = rx.Config(
+    app_name="clock",
+    db_url="sqlite:///reflex.db",
+    env=rx.Env.DEV,
+)

counter/.gitignore

@@ -1,5 +1,4 @@
 *.py[cod]
 .web
 __pycache__/
-pynecone.db
 reflex.db

counter/requirements.txt

@@ -1 +1 @@
-pynecone>=0.1.33
+reflex>=0.2.0

counter/rxconfig.py

@@ -1,9 +1,7 @@
 import reflex as rx
 
-
 config = rx.Config(
     app_name="counter",
-    bun_path="$HOME/.bun/bin/bun",
     db_url="sqlite:///reflex.db",
     env=rx.Env.DEV,
 )

crm/.gitignore

@@ -1,4 +1,4 @@
+*.py[cod]
 .web
-pynecone.db
 __pycache__/
-*.py[cod]
+reflex.db

crm/crm/components/crm.py

@@ -1,14 +1,14 @@
 from crm.state import State
 from crm.state.models import Contact
-import pynecone as pc
+import reflex as rx
 
 
 class CRMState(State):
     contacts: list[Contact] = []
     query = ""
 
     def get_contacts(self) -> list[Contact]:
-        with pc.session() as sess:
+        with rx.session() as sess:
             if self.query != "":
                 print("Query...")
                 self.contacts = (
@@ -28,7 +28,7 @@ def filter(self, query):
         print("Returning...")
         return self.get_contacts()
 
-    @pc.var
+    @rx.var
     def num_contacts(self):
         return len(self.contacts)
 
@@ -44,7 +44,7 @@ def toggle(self):
     def add_contact(self):
         if not self.user:
             raise ValueError("No user logged in")
-        with pc.session() as sess:
+        with rx.session() as sess:
             sess.expire_on_commit = False
             sess.add(
                 Contact(
@@ -57,22 +57,22 @@ def add_contact(self):
 
 
 def add_modal():
-    return pc.modal(
-        pc.modal_overlay(
-            pc.modal_content(
-                pc.modal_header("Add"),
-                pc.modal_body(
-                    pc.input(
+    return rx.modal(
+        rx.modal_overlay(
+            rx.modal_content(
+                rx.modal_header("Add"),
+                rx.modal_body(
+                    rx.input(
                         on_change=AddModalState.set_name,
                         placeholder="Name",
                         margin_bottom="0.5rem",
                     ),
-                    pc.input(on_change=AddModalState.set_email, placeholder="Email"),
+                    rx.input(on_change=AddModalState.set_email, placeholder="Email"),
                     padding_y=0,
                 ),
-                pc.modal_footer(
-                    pc.button("Close", on_click=AddModalState.toggle),
-                    pc.button(
+                rx.modal_footer(
+                    rx.button("Close", on_click=AddModalState.toggle),
+                    rx.button(
                         "Add", on_click=AddModalState.add_contact, margin_left="0.5rem"
                     ),
                 ),
@@ -85,27 +85,27 @@ def add_modal():
 def contact_row(
     contact,
 ):
-    return pc.tr(
-        pc.td(contact.contact_name),
-        pc.td(contact.email),
-        pc.td(pc.badge(contact.stage)),
+    return rx.tr(
+        rx.td(contact.contact_name),
+        rx.td(contact.email),
+        rx.td(rx.badge(contact.stage)),
     )
 
 
 def crm():
-    return pc.box(
-        pc.button("Refresh", on_click=CRMState.get_contacts),
-        pc.hstack(
-            pc.heading("Contacts"),
-            pc.button("Add", on_click=AddModalState.toggle),
+    return rx.box(
+        rx.button("Refresh", on_click=CRMState.get_contacts),
+        rx.hstack(
+            rx.heading("Contacts"),
+            rx.button("Add", on_click=AddModalState.toggle),
             justify_content="space-between",
             align_items="flex-start",
             margin_bottom="1rem",
         ),
-        pc.responsive_grid(
-            pc.box(
-                pc.stat(
-                    pc.stat_label("Contacts"), pc.stat_number(CRMState.num_contacts)
+        rx.responsive_grid(
+            rx.box(
+                rx.stat(
+                    rx.stat_label("Contacts"), rx.stat_number(CRMState.num_contacts)
                 ),
                 border="1px solid #eaeaef",
                 padding="1rem",
@@ -115,9 +115,9 @@ def crm():
             margin_bottom="1rem",
         ),
         add_modal(),
-        pc.input(placeholder="Filter by name...", on_change=CRMState.filter),
-        pc.table_container(
-            pc.table(pc.tbody(pc.foreach(CRMState.contacts, contact_row))),
+        rx.input(placeholder="Filter by name...", on_change=CRMState.filter),
+        rx.table_container(
+            rx.table(rx.tbody(rx.foreach(CRMState.contacts, contact_row))),
             margin_top="1rem",
         ),
         width="100%",

crm/crm/components/navbar.py

@@ -1,24 +1,24 @@
 from crm.state import State, LoginState
-import pynecone as pc
+import reflex as rx
 
 
 def navbar():
-    return pc.box(
-        pc.hstack(
-            pc.link("Pyneknown", href="/", font_weight="medium"),
-            pc.hstack(
-                pc.cond(
+    return rx.box(
+        rx.hstack(
+            rx.link("Pyneknown", href="/", font_weight="medium"),
+            rx.hstack(
+                rx.cond(
                     State.user,
-                    pc.hstack(
-                        pc.link(
+                    rx.hstack(
+                        rx.link(
                             "Log out",
                             color="blue.600",
                             on_click=LoginState.log_out,
                         ),
-                        pc.avatar(name=State.user.email, size="md"),
+                        rx.avatar(name=State.user.email, size="md"),
                         spacing="1rem",
                     ),
-                    pc.box(),
+                    rx.box(),
                 )
             ),
             justify_content="space-between",

crm/crm/crm.py

@@ -1,11 +1,11 @@
-"""Welcome to Pynecone! This file outlines the steps to create a basic app."""
-import pynecone as pc
+"""Welcome to Reflex! This file outlines the steps to create a basic app."""
+import reflex as rx
 from crm.pages import index, login
 from crm.state import State
 
 
 # Add state and page to the app.
-app = pc.App(state=State)
+app = rx.App(state=State)
 app.add_page(index)
 app.add_page(login)
 app.compile()

crm/crm/pages/index.py

@@ -1,22 +1,22 @@
 from crm.components import navbar
 from crm.components import crm
 from crm.state import State
-import pynecone as pc
+import reflex as rx
 
 
 def index():
-    return pc.vstack(
+    return rx.vstack(
         navbar(),
-        pc.cond(
+        rx.cond(
             State.user,
             crm(),
-            pc.vstack(
-                pc.heading("Welcome to Pyneknown!"),
-                pc.text(
-                    "This Pynecone example demonstrates how to build a fully-fledged customer relationship management (CRM) interface."
+            rx.vstack(
+                rx.heading("Welcome to Pyneknown!"),
+                rx.text(
+                    "This Reflex example demonstrates how to build a fully-fledged customer relationship management (CRM) interface."
                 ),
-                pc.link(
-                    pc.button(
+                rx.link(
+                    rx.button(
                         "Log in to get started", color_scheme="blue", underline="none"
                     ),
                     href="/login",