Update examples for Reflex 0.4.0

.github/workflows/app_harness.yml

@@ -1,17 +1,18 @@
 name: app-harness
 env:
-  REFLEX_VERSION: "==0.3.8"
+  # TODO: switch to the official release
+  REFLEX_DEP: 'reflex==0.4.0'
   TELEMETRY_ENABLED: false
   APP_HARNESS_HEADLESS: 1
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
   workflow_dispatch:
     inputs:
-      reflex_version:
-        description: "Reflex version"
+      reflex_dep:
+        description: 'Reflex dep (raw pip spec)'
 
 jobs:
   list-examples-with-tests:
@@ -50,6 +51,6 @@ jobs:
           python -m venv venv
           source venv/bin/activate
 
-          pip install 'reflex${{ github.event.inputs.reflex_version || env.REFLEX_VERSION }}' -r requirements.txt -r requirements-dev.txt
+          pip install '${{ github.event.inputs.reflex_dep || env.REFLEX_DEP }}' -r requirements.txt -r requirements-dev.txt
           reflex init
           pytest tests -vv

.github/workflows/check_export.yml

@@ -1,16 +1,17 @@
 name: check-export
 env:
-  REFLEX_VERSION: "==0.3.8"
+  # TODO: switch to the official release
+  REFLEX_DEP: 'reflex==0.4.0'
   TELEMETRY_ENABLED: false
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
   workflow_dispatch:
     inputs:
-      reflex_version:
-        description: "Reflex version"
+      reflex_dep:
+        description: 'Reflex dep (raw pip spec)'
 
 jobs:
   list-examples:
@@ -24,7 +25,7 @@ jobs:
         run: |
           # TODO fix sales export
           # TODO fix stable_diffusion export (gets stuck)
-          EXAMPLES="$(find . -not -name '.*'  -maxdepth 1 -type d | cut -f2 -d/  | sort | grep -vw sales | grep -vw stable_diffusion | jq -R | jq -s -c)"
+          EXAMPLES="$(find . -not -name '.*'  -maxdepth 1 -type d | cut -f2 -d/  | sort | grep -vw chakra_apps | jq -R | jq -s -c)"
           echo $EXAMPLES
           echo "examples=$EXAMPLES" >> $GITHUB_OUTPUT
 
@@ -43,7 +44,7 @@ jobs:
             echo "$f is not a directory!"
             exit 1
           fi
-          
+
           cd "$f"
 
           if [[ ! -f requirements.txt ]]; then
@@ -59,7 +60,7 @@ jobs:
           python -m venv venv
           source venv/bin/activate
 
-          pip install 'reflex${{ github.event.inputs.reflex_version || env.REFLEX_VERSION }}' -r requirements.txt
+          pip install '${{ github.event.inputs.reflex_dep || env.REFLEX_DEP }}' -r requirements.txt
           export OPENAI_API_KEY="dummy"
           reflex init
           reflex export

basic_crud/basic_crud/basic_crud.py

@@ -1,4 +1,5 @@
 """Welcome to Reflex! This file outlines the steps to create a basic app."""
+
 import asyncio
 import json
 
@@ -107,84 +108,86 @@ async def send_query(self):
 
 
 def data_display():
-    return rx.chakra.vstack(
-        rx.chakra.heading(State.total, " products found"),
+    return rx.vstack(
+        rx.heading(State.total, " products found"),
         rx.foreach(State.products, render_product),
-        rx.chakra.spacer(),
+        rx.spacer(),
         width="30vw",
         height="100%",
     )
 
 
 def render_product(product: Product):
-    return rx.chakra.hstack(
-        rx.chakra.image(src=product.image, height="100%", width="3vw"),
-        rx.chakra.text(f"({product.code}) {product.label}", width="10vw"),
-        rx.chakra.vstack(
-            rx.chakra.text("Stock:", product.quantity),
-            rx.chakra.text("Category:", product.category),
+    return rx.hstack(
+        rx.image(src=product.image, height="100%", width="3vw"),
+        rx.text(f"({product.code}) {product.label}", width="10vw"),
+        rx.vstack(
+            rx.text("Stock:", product.quantity),
+            rx.text("Category:", product.category),
             spacing="0",
             width="7vw",
         ),
-        rx.chakra.vstack(
-            rx.chakra.text("Seller:", product.seller),
-            rx.chakra.text("Sender:", product.sender),
+        rx.vstack(
+            rx.text("Seller:", product.seller),
+            rx.text("Sender:", product.sender),
             spacing="0",
             width="7vw",
         ),
-        rx.chakra.spacer(),
+        rx.spacer(),
         border="solid black 1px",
         spcaing="5",
         width="100%",
     )
 
 
 def query_form():
-    return rx.chakra.vstack(
-        rx.chakra.hstack(
-            rx.chakra.text("Query:"),
-            rx.chakra.select(
+    return rx.vstack(
+        rx.hstack(
+            rx.text("Query:"),
+            rx.select(
                 ["GET", "POST", "PUT", "DELETE"],
                 on_change=QueryState.update_method,
             ),
-            rx.chakra.input(
+            rx.input(
                 value=QueryState.url_query,
                 on_change=QueryState.set_url_query,
                 width="30vw",
             ),
         ),
-        rx.chakra.text("Body:"),
-        rx.chakra.text_area(
-            value=QueryState.body, height="30vh", on_change=QueryState.set_body
+        rx.text("Body:"),
+        rx.text_area(
+            value=QueryState.body,
+            height="20vh",
+            width="20vh",
+            on_change=QueryState.set_body,
         ),
-        rx.chakra.hstack(
-            rx.chakra.button("Clear", on_click=QueryState.clear_query),
-            rx.chakra.button("Send", on_click=QueryState.send_query),
+        rx.hstack(
+            rx.button("Clear", on_click=QueryState.clear_query),
+            rx.button("Send", on_click=QueryState.send_query),
         ),
-        rx.chakra.divider(orientation="horizontal", border="solid black 1px", width="100%"),
-        rx.chakra.hstack(
-            rx.chakra.text("Status: ", QueryState.response_code), rx.chakra.spacer(), width="100%"
+        rx.divider(orientation="horizontal", border="solid black 1px", width="100%"),
+        rx.hstack(
+            rx.text("Status: ", QueryState.response_code), rx.spacer(), width="100%"
         ),
-        rx.chakra.container(
+        rx.container(
             rx.markdown(
                 QueryState.f_response,
                 language="json",
                 height="30vh",
             )
         ),
-        # width="50vw",
         width="100%",
     )
 
 
 def index() -> rx.Component:
-    return rx.chakra.hstack(
-        rx.chakra.spacer(),
+    return rx.hstack(
+        rx.spacer(),
         data_display(),
-        rx.chakra.spacer(),
-        rx.chakra.divider(orientation="vertical", border="solid black 1px"),
+        rx.spacer(),
+        rx.divider(orientation="vertical", border="solid black 1px"),
         query_form(),
-        rx.chakra.spacer(),
+        rx.spacer(),
         height="100vh",
         width="100vw",
         spacing="0",

basic_crud/requirements.txt

@@ -1 +1 @@
-reflex>=0.3.8
+reflex>=0.4.0