(feat) update base components

frontend/components/card.py

@@ -1,9 +1,9 @@
 from streamlit_elements import mui
+
 from frontend.components.dashboard import Dashboard
 
 
 class Card(Dashboard.Item):
-
     DEFAULT_CONTENT = (
         "This impressive paella is a perfect party dish and a fun meal to cook "
         "together with your guests. Add 1 cup of frozen peas along with the mussels, "
@@ -11,7 +11,9 @@ class Card(Dashboard.Item):
     )
 
     def __call__(self, content):
-        with mui.Card(key=self._key, sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"}, elevation=1):
+        with mui.Card(key=self._key,
+                      sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"},
+                      elevation=1):
             mui.CardHeader(
                 title="Shrimp and Chorizo Paella",
                 subheader="September 14, 2016",

frontend/components/dashboard.py

@@ -1,11 +1,11 @@
-from uuid import uuid4
 from abc import ABC, abstractmethod
-from streamlit_elements import dashboard, mui
 from contextlib import contextmanager
+from uuid import uuid4
+
+from streamlit_elements import dashboard, mui
 
 
 class Dashboard:
-
     DRAGGABLE_CLASS = "draggable"
 
     def __init__(self):
@@ -36,15 +36,15 @@ class Dashboard:
         @contextmanager
         def title_bar(self, padding="5px 15px 5px 15px", dark_switcher=True):
             with mui.Stack(
-                className=self._draggable_class,
-                alignItems="center",
-                direction="row",
-                spacing=1,
-                sx={
-                    "padding": padding,
-                    "borderBottom": 1,
-                    "borderColor": "divider",
-                },
+                    className=self._draggable_class,
+                    alignItems="center",
+                    direction="row",
+                    spacing=1,
+                    sx={
+                        "padding": padding,
+                        "borderBottom": 1,
+                        "borderColor": "divider",
+                    },
             ):
                 yield
 

frontend/components/editor.py

@@ -1,8 +1,10 @@
 from functools import partial
+
 import streamlit as st
-from streamlit_elements import mui, editor, sync, lazy, event
+from streamlit_elements import editor, event, lazy, mui, sync
 
 from backend.utils.os_utils import save_file
+
 from .dashboard import Dashboard
 
 
@@ -37,7 +39,7 @@ class Editor(Dashboard.Item):
     @property
     def tabs(self):
         return self._tabs
-    
+
     def update_content(self, label, content):
         self._tabs[label]["content"] = content
 
@@ -54,7 +56,9 @@ class Editor(Dashboard.Item):
         return self._tabs[label]["content"]
 
     def __call__(self):
-        with mui.Paper(key=self._key, sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"}, elevation=1):
+        with mui.Paper(key=self._key,
+                       sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"},
+                       elevation=1):
 
             with self.title_bar("0px 15px 0px 15px"):
                 with mui.Grid(container=True, spacing=4, sx={"display": "flex", "alignItems": "center"}):

frontend/components/media_player.py

@@ -1,6 +1,8 @@
-from streamlit_elements import media, mui, sync, lazy
+from streamlit_elements import lazy, media, mui, sync
+
 from .dashboard import Dashboard
 
+
 class Player(Dashboard.Item):
 
     def __init__(self, *args, **kwargs):
@@ -11,13 +13,17 @@ class Player(Dashboard.Item):
         self._url = event.target.value
 
     def __call__(self):
-        with mui.Paper(key=self._key, sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"}, elevation=1):
+        with mui.Paper(key=self._key,
+                       sx={"display": "flex", "flexDirection": "column", "borderRadius": 3, "overflow": "hidden"},
+                       elevation=1):
             with self.title_bar(padding="10px 15px 10px 15px", dark_switcher=False):
                 mui.icon.OndemandVideo()
                 mui.Typography("Media player")
 
-            with mui.Stack(direction="row", spacing=2, justifyContent="space-evenly", alignItems="center", sx={"padding": "10px"}):
-                mui.TextField(defaultValue=self._url, label="URL", variant="standard", sx={"flex": 0.97}, onChange=lazy(self._set_url))
+            with mui.Stack(direction="row", spacing=2, justifyContent="space-evenly", alignItems="center",
+                           sx={"padding": "10px"}):
+                mui.TextField(defaultValue=self._url, label="URL", variant="standard", sx={"flex": 0.97},
+                              onChange=lazy(self._set_url))
                 mui.IconButton(mui.icon.PlayCircleFilled, onClick=sync(), sx={"color": "primary.main"})
 
             media.Player(self._url, controls=True, width="100%", height="100%")