V1.0.0 A smaller, smooter, cleaner, clearer framework

.flake8

@@ -1,4 +1,4 @@
 [flake8]
-extend-ignore = E203, E501
+extend-ignore = E203, E501, E731
 exclude = .github,__pycache__,docs/source/conf.py,old,build,dist,venv,
 max-complexity = 10

example/src/app.py

@@ -2,4 +2,4 @@
 
 app = MainApp()
 
-app.run()
+app.app.run()

example/src/assets/style.css

@@ -1,3 +1,47 @@
 html, body, * {
     font-style: italic
-}
+}
+
+.status-icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: bold;
+    color: white;
+}
+
+/* RUNNING (spinner) */
+.running {
+    border: 3px solid rgba(0,0,0,0.1);
+    border-left-color: #4CAF50;
+    animation: spin 1s linear infinite;
+}
+
+/* STATIC STATES */
+.success {
+    background-color: #4CAF50;
+}
+
+.error {
+    background-color: #F44336;
+}
+
+.info {
+    background-color: #2196F3;
+}
+
+/* Spin animation */
+@keyframes spin {
+    0% { transform: rotate(0deg);}
+    100% { transform: rotate(360deg);}
+}
+
+.status-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}

example/src/components/__init__.py

@@ -2,6 +2,16 @@
 from .sidebar import SidebarComponent
 from .data_viewer import DataViewerComponent
 from .metric import MetricComponent
+from .toast import ToastComponent
+from .button import ButtonComponent
+from .status import StatusComponent
 
-
-__all__ = [LoginDialogComponent, SidebarComponent, DataViewerComponent, MetricComponent]
+__all__ = [
+    LoginDialogComponent,
+    SidebarComponent,
+    DataViewerComponent,
+    MetricComponent,
+    ToastComponent,
+    ButtonComponent,
+    StatusComponent
+]

example/src/components/button.py

@@ -0,0 +1,22 @@
+import streamlit as st
+from ststeroids import Component, Flow
+
+
+class ButtonComponent(Component):
+
+    EVENT_ClICK = "click"
+
+    def __init__(self, button_text: str):
+        self.button_text = button_text
+
+    def _handle_click(self):
+        self.trigger(self.EVENT_ClICK)
+
+    def display(self):
+        st.button(self.button_text, on_click=self._handle_click)
+
+    def on_click(self, flow: Flow) -> None:
+        """
+        Register a flow to be executed when the user clicks the button.
+        """
+        self.on(self.EVENT_ClICK, flow)

example/src/components/data_viewer.py

@@ -1,29 +1,27 @@
-import uuid
 import streamlit as st
 from ststeroids import Component
 
 
 class DataViewerComponent(Component):
     def __init__(
         self,
-        component_id: str,
         header: str,
         column_config: dict = {},
         column_order: list = [],
     ):
-        super().__init__(component_id, {"data": None, "dek": uuid.uuid4()})
         self.header = header
         self.column_config = column_config
         self.column_order = column_order
+        self.data = None
 
-    def render(self):
+    def display(self):
         st.subheader(self.header)
         st.dataframe(
-            self.state.data,
+            self.data,
             hide_index=True,
             column_config=self.column_config,
             column_order=self.column_order,
         )
 
     def set_data(self, data):
-        self.state.data = data
+        self.data = data

example/src/components/login_dialog.py

@@ -1,37 +1,31 @@
 import streamlit as st
-from ststeroids import Component, Flow
+from ststeroids import Dialog, Flow
 
 
-class LoginDialogComponent(Component):
+class LoginDialogComponent(Dialog):
+
+    EVENT_LOGIN = "login"
+
     def __init__(
         self,
-        component_id: str,
-        login_flow: Flow,
-        login_success_flow: Flow,
-        header: str = "Enter username/password",
     ):
-        super().__init__(component_id, {"visible": False})
-        self.header = header
-        self.login_flow = login_flow
-        self.login_success_flow = login_success_flow
+        self.error_message = None
+        self.hide()
 
-    def render(self):
-        if self.state.visible:
-            username = st.text_input("Username")
-            password = st.text_input("Password", type="password")
-            if st.button("Login", use_container_width=True):
-                login_succes = self.login_flow.execute_run(username, password)
-                if login_succes:
-                    self.login_success_flow.execute_run()
-                else:
-                    st.error("Login failed, please check your username and password.")
+    def display(self):
+        self.username = st.text_input("Username")
+        self.password = st.text_input("Password", type="password")
+        if st.button("Login", use_container_width=True):
+            self.trigger(self.EVENT_LOGIN)
+        if self.error_message:
+            st.error(self.error_message)
+            self.error_message = None
 
-    def show(self):
-        if self.state.visible is False:
-            self.state.visible = True
-            st.rerun()
+    def on_login(self, flow: Flow) -> None:
+        """
+        Register a flow to be executed when the user clicks the login button.
+        """
+        self.on(self.EVENT_LOGIN, flow)
 
-    def hide(self):
-        if self.state.visible is True:
-            self.state.visible = False
-            st.rerun()
+    def set_error(self, message: str):
+        self.error_message = message

example/src/components/metric.py

@@ -1,18 +1,17 @@
 import streamlit as st
-from ststeroids import Component
+from ststeroids import Fragment
 
 
-class MetricComponent(Component):
+class MetricComponent(Fragment):
     def __init__(
         self,
-        component_id: str,
         header: str,
     ):
-        super().__init__(component_id, {"value": None})
         self.header = header
+        self.value = 0
 
-    def render(self):
-        st.metric(self.header, self.state.value)
+    def display(self):
+        st.metric(self.header, self.value)
 
     def set_value(self, value: int):
-        self.state.value = value
+        self.value = value

example/src/components/sidebar.py

@@ -1,15 +1,14 @@
 import streamlit as st
-from ststeroids import Component, Router
+from ststeroids import Component
 
 
 class SidebarComponent(Component):
 
-    def __init__(self, component_id: str, router: Router):
-        super().__init__(component_id)
-        self.router = router
-
-    def render(self):
+    def display(self):
         with st.sidebar:
-            st.page_link("pages/dashboard.py", icon=":material/search:", label="Dashboard")
-            st.page_link("pages/manage.py", icon=":material/bar_chart:", label="Manage data")
-
+            st.page_link(
+                "pages/dashboard.py", icon=":material/search:", label="Dashboard"
+            )
+            st.page_link(
+                "pages/manage.py", icon=":material/bar_chart:", label="Manage data"
+            )

example/src/components/status.py

@@ -0,0 +1,32 @@
+from typing import Literal
+
+import streamlit as st
+from ststeroids import Component
+
+
+class StatusComponent(Component):
+
+    def __init__(
+        self,
+        message: str = None,
+        type: Literal["running", "info", "error", "success"] = "info",
+    ):
+        self.message = message
+        self.type = type
+
+    def display(self):
+        if self.message:
+            st.markdown(f"<div class='status-row'>{self._status_icon(self.type)}<div>{self.message}</div></div>", unsafe_allow_html=True)
+
+    def set_status(self, message: str, type: Literal["running", "info", "error", "success"] = "info"):
+        self.message = message
+        self.type = type
+
+    def clear(self):
+        self.message = None
+        self.type = None
+
+    def _status_icon(self, state: str):
+        icons = {"success": "✓", "error": "✕", "info": "i", "running": ""}
+
+        return f"<div class='status-icon {state}'>{icons.get(state, '')}</div>"

example/src/components/toast.py

@@ -0,0 +1,18 @@
+import streamlit as st
+from ststeroids import Component
+
+
+class ToastComponent(Component):
+    def __init__(
+        self,
+    ):
+        self.message = None
+        self.hide()
+
+    def display(self):
+        st.toast(self.message)
+        self.hide()
+
+    def set_message(self, message: str):
+        self.message = message
+        self.show()

example/src/flows/__init__.py

@@ -1,5 +1,7 @@
 from .login import LoginFlow
-from .login_succes import LoginSuccessFlow
 from .refresh import RefreshFlow
+from .app_setup import SetupFlow
+from .logout import LogoutFlow
+from .long_running import LongRunningFlow
 
-__all__ = [LoginFlow, LoginSuccessFlow, RefreshFlow]
+__all__ = [LoginFlow, RefreshFlow, SetupFlow, LogoutFlow, LongRunningFlow]

example/src/flows/app_setup.py

@@ -0,0 +1,6 @@
+from ststeroids import Flow, FlowContext
+
+
+class SetupFlow(Flow):
+    def run(self, _ctx: FlowContext):
+        print("I'm a flow setting up the app per user")

example/src/flows/login.py

@@ -1,17 +1,62 @@
 from service import MockBackendService
-from ststeroids import Flow, Store
+from ststeroids import Flow, Store, FlowContext
+from components import (
+    LoginDialogComponent,
+    DataViewerComponent,
+    MetricComponent,
+    ToastComponent,
+)
+from shared import ComponentIDs
+import streamlit as st
 
 
 class LoginFlow(Flow):
     def __init__(self, session_store: Store, backend_service: MockBackendService):
-        super().__init__()
         self.session_store = session_store
         self.backend_service = backend_service
 
-    def run(self, username: str, password: str):
-        response = self.backend_service.authenticate(username, password)
+    @property
+    def cp_login_dialog(self):
+        return LoginDialogComponent.get(ComponentIDs.dialog_login)
+
+    @property
+    def cp_data_viewer(self):
+        return DataViewerComponent.get(ComponentIDs.data_viewer)
+
+    @property
+    def cp_total_movies(self):
+        return MetricComponent.get(ComponentIDs.total_movies)
+
+    @property
+    def cp_toast(self):
+        return ToastComponent.get(ComponentIDs.toast)
+
+    def run(self, _ctx: FlowContext):
+        response = self.backend_service.authenticate(
+            self.cp_login_dialog.username, self.cp_login_dialog.password
+        )
         if response.ok:
-            token_data = response.json()
-            self.session_store.set_property("access_token", token_data["access_token"])
-            return True
-        return False
+            self._login_success(response)
+        else:
+            self._login_failed()
+
+    def _login_success(self, response):
+        token_data = response.json()
+        self.session_store.set_property("access_token", token_data["access_token"])
+        self.cp_login_dialog.hide()
+        response = self.backend_service.get_movies()
+        # enable the line below for example of an error scenario
+        # response.ok = False
+        if response.ok:
+            data = response.json()
+            self.session_store.set_property(
+                "data", data
+            )  # Store the data in the session_store for later use in more complex applications
+            self.cp_total_movies.set_value(len(data))
+            self.cp_data_viewer.set_data(data)
+        else:
+            self.cp_toast.set_message("error")
+        st.switch_page("pages/dashboard.py")
+
+    def _login_failed(self):
+        self.cp_login_dialog.set_error("Login failed, check your username and password")