ENG-7843: update web dep. warnings + fix alert block (ENG-7845) (#1647)

* update web dep. warnings + fix alert block

* Update docs/library/forms/input.md

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update docs/library/graphing/general/axis.md

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update docs/state_structure/component_state.md

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update docs/state_structure/component_state.md

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* Update docs/recipes/others/chips.md

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

* add bg to MD blocks

---------

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Author: LineIndent

blog/2023-09-28-unlocking-new-workflows-with-background-tasks.md

@@ -122,7 +122,7 @@ screen updating and processing simultaneously.
 
 ```python eval
 rx.center(
-    rx.video(url="https://user-images.githubusercontent.com/1524005/271007407-09c832ff-ecbd-4a9d-a8a5-67779c673045.mov"),
+    rx.video(src="https://user-images.githubusercontent.com/1524005/271007407-09c832ff-ecbd-4a9d-a8a5-67779c673045.mov"),
     rx.box(height="3em"),
     width="100%",
     padding_y="2em"

blog/2023-10-25-implementing-sign-in-with-google.md

@@ -46,7 +46,7 @@ and sign in with the Google account that should manage the app and credential to
 
 ```python eval
 rx.center(
-    rx.video(url="https://github.com/reflex-dev/reflex-examples/assets/1524005/af2499a6-0bda-4d60-b52b-4f51b7322fd5"),
+    rx.video(src="https://github.com/reflex-dev/reflex-examples/assets/1524005/af2499a6-0bda-4d60-b52b-4f51b7322fd5"),
     rx.box(height="3em"),
     width="100%",
     padding_y="2em"
@@ -492,7 +492,7 @@ app.add_page(index)
 
 ```python eval
 rx.center(
-    rx.video(url="https://github.com/reflex-dev/reflex-examples/assets/1524005/b0c7145b-6c19-4072-bc9d-ae8927c8988f"),
+    rx.video(src="https://github.com/reflex-dev/reflex-examples/assets/1524005/b0c7145b-6c19-4072-bc9d-ae8927c8988f"),
     rx.box(height="3em"),
     width="100%",
     padding_y="2em"

docs/api-reference/event_triggers.md

@@ -43,6 +43,10 @@ SYNTHETIC_EVENTS = [
         "state": """class ChangeState(rx.State):
     checked: bool = False
 
+    @rx.event
+    def set_checked(self):
+        self.checked = not self.checked
+
 """,
         "example": """rx.switch(on_change=ChangeState.set_checked)""",
     },
@@ -102,7 +106,7 @@ SYNTHETIC_EVENTS = [
     @rx.event
     def on_mount(self):
         self.events = self.events[-4:] + ["on_mount @ " + str(datetime.now())]
-        
+
     @rx.event
     async def load_data(self):
         # Common pattern: Set loading state, yield to update UI, then fetch data
@@ -141,7 +145,7 @@ SYNTHETIC_EVENTS = [
         self.events = self.events[-4:] + ["on_unmount @ " + str(datetime.now())]
         # Common pattern: Clean up resources when component is removed
         self.status = f"Resource {self.resource_id} cleaned up"
-        
+
     @rx.event
     def initialize_resource(self):
         self.status = f"Resource {self.resource_id} initialized"

docs/client_storage/overview.md

@@ -24,6 +24,17 @@ class ClientStorageState(rx.State):
     my_local_storage: str = rx.LocalStorage("")
     custom_cookie: str = rx.Cookie(name="CustomNamedCookie", max_age=3600)
 
+    @rx.event
+    def set_my_cookie(self, value: str):
+        self.my_cookie = value
+
+    @rx.event
+    def set_my_local_storage(self, value: str):
+        self.my_local_storage = value
+
+    @rx.event
+    def set_custom_cookie(self, value: str):
+        self.custom_cookie = value
 
 def client_storage_example():
     return rx.vstack(

docs/components/conditional_rendering.md

@@ -53,7 +53,7 @@ You can also set props conditionally using `rx.cond`. In this example, we set th
 class PropCondState(rx.State):
 
     value: int
-    
+
     @rx.event
     def set_end(self, value: list[int | float]):
         self.value = value[0]
@@ -95,6 +95,10 @@ class MatchState(rx.State):
         "corgi",
     ]
 
+    @rx.event
+    def set_cat_breed(self, breed: str):
+        self.cat_breed = breed
+
 
 def match_demo():
     return rx.flex(

docs/enterprise/drag-and-drop.md

@@ -29,6 +29,10 @@ import reflex_enterprise as rxe
 class BasicDndState(rx.State):
     drop_count: int = 0
 
+    def increment_drop_count(self):
+        self.drop_count += 1
+
+
 @rx.memo
 def draggable_card():
     return rxe.dnd.draggable(
@@ -64,7 +68,7 @@ def basic_drag_drop():
                     font_weight="bold"
                 ),
                 accept=["BasicCard"],
-                on_drop=BasicDndState.setvar("drop_count", BasicDndState.drop_count + 1),
+                on_drop=BasicDndState.increment_drop_count,
             ),
             spacing="4",
             align="start"
@@ -84,6 +88,10 @@ import reflex_enterprise as rxe
 class MultiPositionState(rx.State):
     card_position: int = 0
 
+    def set_card_position(self, position: int):
+        self.card_position = position
+
+
 @rx.memo
 def movable_card():
     return rxe.dnd.draggable(
@@ -118,7 +126,7 @@ def drop_zone(position: int):
         border_color=rx.cond(params.is_over, "green.500", "red.500"),
         bg=rx.cond(params.is_over, "green.100", "blue.100"),
         accept=["MovableCard"],
-        on_drop=MultiPositionState.setvar("card_position", position),
+        on_drop=lambda _: MultiPositionState.set_card_position(position),
         display="flex",
         align_items="center",
         justify_content="center"
@@ -129,7 +137,7 @@ def multi_position_example():
         rx.text("Drag the card between positions", weight="bold"),
         rx.grid(
             drop_zone(0),
-            drop_zone(1), 
+            drop_zone(1),
             drop_zone(2),
             drop_zone(3),
             columns="2",
@@ -152,7 +160,10 @@ import reflex_enterprise as rxe
 class StateTrackingState(rx.State):
     drag_info: str = "No drag activity"
 
-@rx.memo  
+    def set_drag_info(self, value: str):
+        self.drag_info = value
+
+@rx.memo
 def tracked_draggable():
     drag_params = rxe.dnd.Draggable.collected_params
     return rxe.dnd.draggable(
@@ -165,7 +176,7 @@ def tracked_draggable():
             opacity=rx.cond(drag_params.is_dragging, 0.5, 1.0)
         ),
         type="TrackedItem",
-        on_end=StateTrackingState.setvar("drag_info", "Drag ended")
+        on_end=StateTrackingState.set_drag_info("Drag ended")
     )
 
 def tracked_drop_target():
@@ -184,8 +195,8 @@ def tracked_drop_target():
             justify_content="center"
         ),
         accept=["TrackedItem"],
-        on_drop=StateTrackingState.setvar("drag_info", "Item successfully dropped!"),
-        on_hover=StateTrackingState.setvar("drag_info", "Item hovering over drop zone")
+        on_drop=StateTrackingState.set_drag_info("Item successfully dropped!"),
+        on_hover=StateTrackingState.set_drag_info("Item hovering over drop zone")
     )
 
 def state_tracking_example():
@@ -227,34 +238,34 @@ class DynamicListState(rx.State):
     def move_item(self, item_data: dict, target_list: str):
         item_id = item_data.get("id")
         source_list = item_data.get("list_id")
-        
+
         if not item_id or not source_list:
             return
-            
+
         # Find the item in the source list
         source_items = getattr(self, f"list_{source_list.lower()}")
         item_to_move = None
         for item in source_items:
             if item.id == item_id:
                 item_to_move = item
                 break
-                
+
         if not item_to_move:
             return
-            
+
         # Remove from source list only
         if source_list == "A":
             self.list_a = [item for item in self.list_a if item.id != item_id]
         else:
             self.list_b = [item for item in self.list_b if item.id != item_id]
-        
+
         # Create new item for target list
         new_item = ListItem(
             id=item_id,
             text=item_to_move.text,
             list_id=target_list
         )
-        
+
         # Add to target list
         if target_list == "A":
             self.list_a.append(new_item)
@@ -421,6 +432,9 @@ import reflex_enterprise as rxe
 class SimpleState(rx.State):
     message: str = "No items dropped yet"
 
+    def set_message_from_item(self, item: dict):
+        self.message = f"Dropped: {item['name']}"
+
 def simple_draggable():
     return rxe.dnd.draggable(
         rx.box(
@@ -444,7 +458,7 @@ def simple_drop_target():
             min_height="100px"
         ),
         accept=["simple"],
-        on_drop=lambda item: SimpleState.setvar("message", f"Dropped: {item['name']}")
+        on_drop=SimpleState.set_message_from_item
     )
 
 def item_data_example():
@@ -467,6 +481,12 @@ class CollectState(rx.State):
     drag_info: str = "No drag activity"
     drop_info: str = "No drop activity"
 
+    def handle_drop(self, item: dict):
+        self.drop_info = f"Dropped: {item.get('name', 'Unknown')}"
+        return rx.toast(f"Successfully dropped {item.get('name', 'item')}")
+
+
+
 def collect_draggable():
     params = rxe.dnd.Draggable.collected_params
     return rxe.dnd.draggable(
@@ -516,10 +536,7 @@ def collect_drop_target():
             min_height="120px"
         ),
         accept=["collect_item"],
-        on_drop=lambda item: [
-            CollectState.setvar("drop_info", f"Dropped: {item.get('name', 'Unknown')}"),
-            rx.toast(f"Successfully dropped {item.get('name', 'item')}")
-        ]
+        on_drop=CollectState.handle_drop,
     )
 
 def custom_collect_example():

docs/enterprise/mantine/json-input.md

@@ -13,7 +13,11 @@ import reflex as rx
 import reflex_enterprise as rxe
 
 class JsonInputState(rx.State):
-    json_data: str = ''
+    json_data: str = ""
+
+    def set_json_data(self, value: str):
+        self.json_data = value
+
 
 def json_input_example():
     return rxe.mantine.json_input(
@@ -25,7 +29,7 @@ def json_input_example():
         required=True,
         size="md",
         format_on_blur=True,
-        on_change=lambda value: JsonInputState.setvar("json_data", value),
+        on_change=JsonInputState.set_json_data,
         width="300px",
     )
 ```

docs/enterprise/mantine/multi-select.md

@@ -13,6 +13,9 @@ import reflex_enterprise as rxe
 class MultiSelectState(rx.State):
     selected_fruits: list = []
 
+    def set_selected_fruits(self, value: list):
+        self.selected_fruits = value
+
 
 def multi_select_example():
     return rx.vstack(
@@ -21,7 +24,8 @@ def multi_select_example():
             placeholder="Pick all that you like",
             data=["Apple", "Banana", "Cherry", "Date", "Elderberry"],
             value=MultiSelectState.selected_fruits,
-            on_change=lambda value: MultiSelectState.setvar("selected_fruits", value),
+            on_change=MultiSelectState.set_selected_fruits,
         )
     )
+
 ```