Merge branch 'main' into customer-data-app-radix

.github/workflows/app_harness.yml

@@ -1,17 +1,17 @@
 name: app-harness
 env:
- REFLEX_VERSION: "==0.3.8"
+ REFLEX_DEP: 'reflex'
  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 +50,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,16 @@
 name: check-export
 env:
- REFLEX_VERSION: "==0.3.9"
+ REFLEX_DEP: 'reflex'
  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 +24,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 +43,7 @@ jobs:
  echo "$f is not a directory!"
  exit 1
  fi
- 
+
  cd "$f"
 
  if [[ ! -f requirements.txt ]]; then
@@ -59,7 +59,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
 
@@ -155,7 +156,10 @@ def query_form():
  ),
  rx.text("Body:"),
  rx.text_area(
- value=QueryState.body, height="30vh", on_change=QueryState.set_body
+ value=QueryState.body,
+ height="20vh",
+ width="20vh",
+ on_change=QueryState.set_body,
  ),
  rx.hstack(
  rx.button("Clear", on_click=QueryState.clear_query),
@@ -172,7 +176,6 @@ def query_form():
  height="30vh",
  )
  ),
- # width="50vw",
  width="100%",
  )
 

basic_crud/requirements.txt

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

chatroom/chatroom/chatroom.py → chakra_apps/chatroom/chatroom/chatroom.py

@@ -35,7 +35,7 @@ async def nick_change(self, nick: str) -> None:
  async def send_message(self) -> None:
  """Broadcast chat message to other connected clients."""
  m = Message(nick=self.nick, sent=time.time(), message=self.in_message)
- await broadcast_event("state.incoming_message", payload=dict(message=m))
+ await broadcast_event("state.state.incoming_message", payload=dict(message=m))
  self.in_message = ""
 
  @rx.var
@@ -45,34 +45,34 @@ def other_nicks(self) -> t.List[str]:
 
 
 def index() -> rx.Component:
- return rx.vstack(
- rx.center(rx.heading("Reflex Chat!", font_size="2em")),
- rx.hstack(
- rx.vstack(
- rx.input(
+ return rx.chakra.vstack(
+ rx.chakra.center(rx.chakra.heading("Reflex Chat!", font_size="2em")),
+ rx.chakra.hstack(
+ rx.chakra.vstack(
+ rx.chakra.input(
  placeholder="Nick",
  default_value=State.nick,
  on_blur=State.nick_change,
  ),
- rx.text("Other Users", font_weight="bold"),
- rx.foreach(State.other_nicks, rx.text),
+ rx.chakra.text("Other Users", font_weight="bold"),
+ rx.foreach(State.other_nicks, rx.chakra.text),
  width="20vw",
  align_items="left",
  ),
- rx.vstack(
+ rx.chakra.vstack(
  rx.foreach(
  State.messages,
- lambda m: rx.text("<", m.nick, "> ", m.message),
+ lambda m: rx.chakra.text("<", m.nick, "> ", m.message),
  ),
- rx.form(
- rx.hstack(
- rx.input(
+ rx.chakra.form(
+ rx.chakra.hstack(
+ rx.chakra.input(
  placeholder="Message",
  value=State.in_message,
  on_change=State.set_in_message,
  flex_grow=1,
  ),
- rx.button("Send", on_click=State.send_message),
+ rx.chakra.button("Send", on_click=State.send_message),
  ),
  on_submit=lambda d: State.send_message(),
  ),
@@ -115,5 +115,5 @@ async def broadcast_nicks() -> None:
  """Simulate State.set_nicks event with updated nick list from all clients."""
  nicks = []
  for state in app.state_manager.states.values():
- nicks.append(state.nick)
- await broadcast_event("state.set_nicks", payload=dict(nicks=nicks))
+ nicks.append(state.get_substate(State.get_full_name().split(".")).nick)
+ await broadcast_event("state.state.set_nicks", payload=dict(nicks=nicks))

chakra_apps/clock/clock/clock.py

@@ -0,0 +1,213 @@
+"""A Reflex example of a analog clock."""
+
+import asyncio
+from datetime import datetime, timezone
+from typing import Any
+
+import reflex as rx
+import pytz
+
+
+# The supported time zones.
+TIMEZONES = [
+ "Asia/Tokyo",
+ "Australia/Sydney",
+ "Europe/London",
+ "Europe/Paris",
+ "Europe/Moscow",
+ "US/Pacific",
+ "US/Eastern",
+]
+DEFAULT_ZONE = TIMEZONES[-2]
+
+
+def rotate(degrees: int) -> str:
+ """CSS to rotate a clock hand.
+
+ Args:
+ degrees: The degrees to rotate the clock hand.
+
+ Returns:
+ The CSS to rotate the clock hand.
+ """
+ return f"rotate({degrees}deg)"
+
+
+class State(rx.State):
+ """The app state."""
+
+ # The time zone to display the clock in.
+ zone: str = rx.Cookie(DEFAULT_ZONE)
+
+ # Whether the clock is running.
+ running: bool = False
+
+ # The last updated timestamp
+ _now: datetime = datetime.fromtimestamp(0)
+
+ @rx.cached_var
+ def valid_zone(self) -> str:
+ """Get the current time zone.
+
+ Returns:
+ The current time zone.
+ """
+ try:
+ pytz.timezone(self.zone)
+ except Exception:
+ return DEFAULT_ZONE
+ return self.zone
+
+ @rx.cached_var
+ def time_info(self) -> dict[str, Any]:
+ """Get the current time info.
+
+ This can also be done as several computed vars, but this is more concise.
+
+ Returns:
+ A dictionary of the current time info.
+ """
+ now = self._now.astimezone(pytz.timezone(self.valid_zone))
+ return {
+ "hour": now.hour if now.hour <= 12 else now.hour % 12,
+ "minute": now.minute,
+ "second": now.second,
+ "meridiem": "AM" if now.hour < 12 else "PM",
+ "minute_display": f"{now.minute:02}",
+ "second_display": f"{now.second:02}",
+ "hour_rotation": rotate(now.hour * 30 - 90),
+ "minute_rotation": rotate(now.minute * 0.0167 * 360 - 90),
+ "second_rotation": rotate(now.second * 0.0167 * 360 - 90),
+ }
+
+ def on_load(self):
+ """Switch the clock off when the page refreshes."""
+ self.running = False
+ self.refresh()
+
+ def refresh(self):
+ """Refresh the clock."""
+ self._now = datetime.now(timezone.utc)
+
+ @rx.background
+ async def tick(self):
+ """Update the clock every second."""
+ while self.running:
+ async with self:
+ self.refresh()
+
+ # Sleep for a second.
+ await asyncio.sleep(1)
+
+ def flip_switch(self, running: bool):
+ """Start or stop the clock.
+
+ Args:
+ running: Whether the clock should be running.
+ """
+ # Set the switch state.
+ self.running = running
+
+ # Start the clock if the switch is on.
+ if self.running:
+ return State.tick
+
+
+def clock_hand(rotation: str, color: str, length: str) -> rx.Component:
+ """Create a clock hand.
+
+ Args:
+ rotation: The rotation of the clock hand.
+ color: The color of the clock hand.
+ length: The length of the clock hand.
+
+ Returns:
+ A clock hand component.
+ """
+ return rx.chakra.divider(
+ transform=rotation,
+ width=f"{length}em",
+ position="absolute",
+ border_style="solid",
+ border_width="4px",
+ border_image=f"linear-gradient(to right, rgb(250,250,250) 50%, {color} 100%) 0 0 100% 0",
+ z_index=0,
+ )
+
+
+def analog_clock() -> rx.Component:
+ """Create the analog clock."""
+ return rx.chakra.circle(
+ # The inner circle.
+ rx.chakra.circle(
+ width="1em",
+ height="1em",
+ border_width="thick",
+ border_color="#43464B",
+ z_index=1,
+ ),
+ # The clock hands.
+ clock_hand(State.time_info["hour_rotation"], "black", "16"),
+ clock_hand(State.time_info["minute_rotation"], "red", "18"),
+ clock_hand(State.time_info["second_rotation"], "blue", "19"),
+ border_width="thick",
+ border_color="#43464B",
+ width="25em",
+ height="25em",
+ bg="rgb(250,250,250)",
+ box_shadow="dark-lg",
+ )
+
+
+def digital_clock() -> rx.Component:
+ """Create the digital clock."""
+ return rx.chakra.hstack(
+ rx.chakra.heading(State.time_info["hour"]),
+ rx.chakra.heading(":"),
+ rx.chakra.heading(State.time_info["minute_display"]),
+ rx.chakra.heading(":"),
+ rx.chakra.heading(State.time_info["second_display"]),
+ rx.chakra.heading(State.time_info["meridiem"]),
+ border_width="medium",
+ border_color="#43464B",
+ border_radius="2em",
+ padding_x="2em",
+ bg="white",
+ color="#333",
+ )
+
+
+def timezone_select() -> rx.Component:
+ """Create the timezone select."""
+ return rx.chakra.select(
+ TIMEZONES,
+ placeholder="Select a time zone.",
+ on_change=State.set_zone,
+ value=State.valid_zone,
+ bg="#white",
+ )
+
+
+def index():
+ """The main view."""
+ return rx.chakra.center(
+ rx.chakra.vstack(
+ analog_clock(),
+ rx.chakra.hstack(
+ digital_clock(),
+ rx.chakra.switch(is_checked=State.running, on_change=State.flip_switch),
+ ),
+ timezone_select(),
+ padding="5em",
+ border_width="medium",
+ border_color="#43464B",
+ border_radius="25px",
+ bg="#ededed",
+ text_align="center",
+ ),
+ padding="5em",
+ )
+
+
+app = rx.App()
+app.add_page(index, title="Clock", on_load=State.on_load)

chakra_apps/clock/requirements.txt

@@ -0,0 +1,2 @@
+reflex>=0.3.8
+pytz==2022.7.1