New heritence class version

blitz/ui/components/base.py

@@ -1,4 +1,5 @@
-from typing import Any, Generic, Self, TypeVar, Protocol, cast
+import time
+from typing import Annotated, Any, Generic, Self, TypeVar, Protocol, cast
 from blitz.ui.blitz_ui import BlitzUI, get_blitz_ui
 from typing import overload
 from nicegui import ui
@@ -34,6 +35,7 @@ def __init__(self, *args: Any, props: str = "", classes: str = "", **kwargs: Any
         self.current_project = self.blitz_ui.current_project
         self.current_app = self.blitz_ui.current_app
 
+        print("in base component", classes)
         if hasattr(self, "props"):
             self.props = f"{self.props} {props}"
         else:
@@ -64,31 +66,37 @@ def ng(self, value: V) -> None:
         self._ng = value
 
     @classmethod
-    def variant(cls, name: str, *, props: str = "", classes: str = "", **kwargs: Any) -> type[Self]:
+    def variant(cls, name: str = "", *, props: str = "", classes: str = "",docstring:str="", **kwargs: Any) -> type[Self]:
         """
         Create a new type (class) based on the current component class with specified props and classes.
 
         :param props: The properties to be predefined in the new class.
         :param classes: The CSS classes to be predefined in the new class.
         :return: A new type (class) that is a variant of the current class with predefined props and classes.
         """
+        if not name:
+            new_type_name = f"{cls.__name__}_{str(time.time()).replace(".","")}"
+        else:
+            new_type_name = f"{name}{cls.__name__}"
 
         if hasattr(cls, "props"):
             props = f"{getattr(cls, 'props')} {props}"
         if hasattr(cls, "classes"):
             classes = f"{getattr(cls, 'classes')} {classes}"
 
         return type(
-            f"{name}{cls.__name__}",
+            new_type_name,
             (cls,),
             {
                 "props": props,
                 "classes": classes,
             },
         )
-
-    def __enter__(self) -> V:
-        return self.ng
+
+    def __enter__(self) -> Any | None:
+        if hasattr(self.ng, "__enter__"):
+            return self.ng.__enter__()
+        return None
 
     def __exit__(self, exc_type: Any, exc_value: Any, traceback: Any) -> None:
         if hasattr(self.ng, "__exit__"):

blitz/ui/components/gpt_chat_components.py

@@ -12,6 +12,7 @@
 import yaml
 
 from blitz.ui.components.buttons.icon import IconButton
+from blitz.ui.components.rows import WFullItemsCenter
 
 
 class ResponseJSON:
@@ -108,7 +109,8 @@ def _toggle_expansion(self) -> None:
     @ui.refreshable
     def render(self) -> None:
         self.download_dialog()
-        with ui.row(wrap=False).classes("items-center w-full"):
+        with WFullItemsCenter(wrap=False):
+        #with ui.row(wrap=False).classes("items-center w-full"):
             with ui.expansion(
                 self.blitz_app_title,
                 icon="settings_suggest",

blitz/ui/components/header.py

@@ -5,6 +5,7 @@
 from blitz.ui.blitz_ui import BlitzUI, get_blitz_ui
 from blitz.ui.components.buttons import FlatButton
 from blitz.ui.components.base import BaseComponent
+from blitz.ui.components.rows import ItemsCenterContentCenterRow
 
 MAIN_PINK = "#cd87ff"
 DARK_PINK = "#a72bff"
@@ -56,8 +57,8 @@ def render(self) -> None:
                     ui.icon(name="bolt", color=DARK_PINK, size="32px")
                     with ui.link(target=f"/projects/{self.blitz_ui.current_project}"):
                         ui.label("Blitz Dashboard")
-
-                with ui.row().classes("items-center justify-between content-center"):
+                with ItemsCenterContentCenterRow(classes="justify-between"):
+                #with ui.row().classes("items-center justify-between content-center"):
                     with ui.link(target=f"{self.blitz_ui.localhost_url}/projects").classes("disabled"):
                         ui.tooltip("Multiple App management is coming soon")
                         ui.label("Projects")

blitz/ui/components/rows.py

@@ -0,0 +1,56 @@
+from typing import Any, Self
+from blitz.ui.components.base import BaseComponent
+from nicegui import ui
+
+class BaseRow(BaseComponent[ui.row]):
+    def __init__(self, wrap: bool = True,props: str = "", classes: str = "") -> None:
+        self.wrap = wrap
+        print("--->", "in init", classes)
+        super().__init__(props=props, classes=classes)
+
+    def __new__(cls, *args: Any, **kwargs: Any) -> Self:
+        instance = super().__new__(cls)
+        instance.__init__(*args, **kwargs)
+        print("--------->", instance.classes)
+        for parent in cls.mro():
+            if hasattr(parent, "classes"):
+                instance.classes = parent.classes
+        return instance
+
+    def __setattr__(self, __name: str, __value: Any) -> None:
+        if __name == "classes" and hasattr(self, "classes"):
+            print("!!!!!!!!",__value)
+            if  __value in self.classes:
+                return 
+            __value = f"{self.classes} {__value}"
+        return super().__setattr__(__name, __value)
+
+    def render(self) -> None:
+        print(self.classes)
+        self.ng = ui.row(wrap=self.wrap).props(self.props).classes(self.classes)
+
+
+
+class WFullRow(BaseRow.variant(classes="w-full")): # type: ignore
+    """Row with w-full class."""
+    ...
+
+class ContentCenterRow(BaseRow.variant(classes="content-center")): # type: ignore
+    """Row with content-center class."""
+    ...
+
+class ItemsCenterRow(BaseRow.variant(classes="items-center")): # type: ignore
+    """Row with items-center class."""
+    ...
+
+class WFullItemsCenter(WFullRow, ItemsCenterRow):
+    """Row with w-full and items-center classes."""
+    ...
+
+class WFullContentCenterRow(WFullRow, ContentCenterRow):
+    """Row with w-full and content-center classes."""
+    ...
+
+class ItemsCenterContentCenterRow(ItemsCenterRow, ContentCenterRow):
+    """Row with items-center and content-center classes."""
+    ...

blitz/ui/pages/diagram.py

@@ -45,5 +45,5 @@ def render(self) -> None:
                 raise Exception
             ui.mermaid(self.blitz_ui.erd)
         with ui.footer().classes("w-full justify-start "):
-            ui.button(icon="zoom_in", on_click=self.zoom_svg).classes("borderrounded-sm").props("flat")
+            ui.button(icon="zoom_in", on_click=self.zoom_svg).classes("border rounded-sm").props("flat")
             ui.button(icon="zoom_out", on_click=self.unzoom_svg).classes("border rounded-sm").props("flat")

random-blitz-app/.blitz

@@ -0,0 +1 @@
+random-blitz-app/blitz.yaml

random-blitz-app/blitz.yaml

@@ -0,0 +1,5 @@
+config:
+  description: ''
+  name: Random Blitz App
+  version: 0.1.0
+

test/.blitz

@@ -0,0 +1 @@
+test/blitz.json

test/blitz.json

@@ -0,0 +1,8 @@
+{
+    "config": {
+        "name": "test",
+        "description": "",
+        "version": "0.1.0"
+    },
+    "resources": {}
+}