improved CRUD example with changing banner color

README.md

@@ -16,7 +16,7 @@ apps.
 🐍 Rio is based **entirely on Python**. You **won't need a single line of HTML, CSS, or
 JavaScript** to create beautiful, modern apps.
 
-[Tutorial](https://rio.dev/get-started) - [Examples](https://rio.dev/examples) - [Discord](https://discord.gg/7ejXaPwhyH) -  [Docs](https://rio.dev/docs) - [Source Code](https://gitlab.com/team-rio/rio)
+[Tutorial](https://rio.dev/get-started) - [Examples](https://rio.dev/examples) - [Discord](https://discord.gg/7ejXaPwhyH) - [Docs](https://rio.dev/docs) - [Source Code](https://gitlab.com/team-rio/rio)
 
 Rio brings React-style components to Python. Pull from a wealth of built-in
 components and combine them to create your own custom components. Then combine
@@ -25,12 +25,12 @@ machine and on the web.
 
 ## Features 🧩
 
-- Modern, **declarative UI** framework
-- **100% Python** - Zero HTML, CSS, or JavaScript required
-- Over **50 Built-in components** for common UI elements, such as `rio.Switch`, `rio.Button`, and `rio.Text`, and many more
-- Integrates with **modern Python tooling**: Thanks to being **entirely Type Safe** editors can give you instant suggestions and highlight problems right away
-- Apps can run **both locally and on the web**
-- **Open Source & Free forever**
+-   Modern, **declarative UI** framework
+-   **100% Python** - Zero HTML, CSS, or JavaScript required
+-   Over **50 Built-in components** for common UI elements, such as `rio.Switch`, `rio.Button`, and `rio.Text`, and many more
+-   Integrates with **modern Python tooling**: Thanks to being **entirely Type Safe** editors can give you instant suggestions and highlight problems right away
+-   Apps can run **both locally and on the web**
+-   **Open Source & Free forever**
 
 ## Installation 🛠️
 
@@ -51,7 +51,7 @@ rio new
 You can choose from a variety of built-in templates to get you started. Here's a complete example to create a project based on the tic-tac-toe template:
 
 ```bash
-rio new my-app --type website --template 'Tic-Tac-Toe'
+rio new my-app --type website --template "Tic-Tac-Toe"
 cd my-project
 rio run
 ```

rio/snippets/snippet-files/project-template-Simple CRUD/components/__init__.py

@@ -1,2 +1,2 @@
-from .item_editor import ItemEditor
-from .item_list import ItemList
+from .item_editor import ItemEditor as ItemEditor
+from .item_list import ItemList as ItemList

rio/snippets/snippet-files/project-template-Simple CRUD/components/item_editor.py

@@ -44,7 +44,7 @@ class ItemEditor(rio.Component):
         Changes the name of the currently selected menu item.
 
         Args:
-            ev: The event object that contains the new text.
+            ev: The event object that contains the new name.
         """
         self.currently_selected_menu_item.name = ev.text
 
@@ -53,7 +53,7 @@ class ItemEditor(rio.Component):
         Changes the description of the currently selected menu item.
 
         Args:
-            ev: The event object that contains the new text.
+            ev: The event object that contains the new description.
         """
         self.currently_selected_menu_item.description = ev.text
 

rio/snippets/snippet-files/project-template-Simple CRUD/pages/__init__.py

@@ -1 +1 @@
-from .crud_page import CrudPage
+from .crud_page import CrudPage as CrudPage

rio/snippets/snippet-files/project-template-Simple CRUD/pages/crud_page.py

@@ -1,3 +1,5 @@
+from typing import *  # type:ignore
+
 import rio
 
 # <additional-imports>
@@ -24,12 +26,14 @@ class CrudPage(rio.Component):
         menu_item_set: A list of menu items.
         currently_selected_menu_item: The currently selected menu item.
         banner_text: The text to be displayed in the banner.
+        banner_style: The style of the banner (success, danger, info).
         is_new_entry: A flag to indicate if the currently selected menu item is a new entry.
     """
 
     menu_item_set: list[data_models.MenuItems] = []
     currently_selected_menu_item: data_models.MenuItems | None = None
     banner_text: str = ""
+    banner_style: Literal["success", "danger", "info"] = "success"
     is_new_entry: bool = False
 
     @rio.event.on_populate
@@ -49,8 +53,10 @@ class CrudPage(rio.Component):
         Args:
             idx: The index of the item to be deleted.
         """
+        # delete the item from the list
         self.menu_item_set.pop(idx)
         self.banner_text = "Item was deleted"
+        self.banner_style = "danger"
         self.currently_selected_menu_item = None
 
     async def on_press_cancel_event(self) -> None:
@@ -72,10 +78,12 @@ class CrudPage(rio.Component):
         if self.is_new_entry:
             self.menu_item_set.append(self.currently_selected_menu_item)
             self.banner_text = "Item was added"
+            self.banner_style = "success"
             self.is_new_entry = False
             self.currently_selected_menu_item = None
         else:
             self.banner_text = "Item was updated"
+            self.banner_style = "info"
 
     async def on_press_add_new_item(self) -> None:
         """
@@ -137,7 +145,7 @@ class CrudPage(rio.Component):
 
         if self.currently_selected_menu_item is None:
             return rio.Column(
-                rio.Banner(self.banner_text, style="danger"),
+                rio.Banner(self.banner_text, style=self.banner_style),
                 comps.ItemList(
                     menu_item_set=self.menu_item_set,
                     on_add_new_item_event=self.on_press_add_new_item,
@@ -150,7 +158,7 @@ class CrudPage(rio.Component):
             )
         else:
             return rio.Column(
-                rio.Banner(self.banner_text, style="danger"),
+                rio.Banner(self.banner_text, style=self.banner_style),
                 rio.Row(
                     comps.ItemList(
                         menu_item_set=self.menu_item_set,