feat(poc): py render proposal

Author: ObservedObserver

Home.py

@@ -8,8 +8,6 @@
 from streamlit_shadcn_ui import slider, input, textarea, radio_group, switch
 from streamlit_extras.stylable_container import stylable_container
 
-ui.element("test")
-
 ui_result = ui.button("Button", key="btn")
 st.write("UI Button Clicked:", ui_result)
 
@@ -49,4 +47,11 @@
 
 st.header("Button Component")
 trigger_btn = ui.button(text="Trigger Button", key="trigger_btn")
-ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1")
+ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1")
+
+with ui.element("card", key="base_ele") as card:
+    with ui.element("card", key="base_ele2") as card2:
+        card2.add_child(ui.element("input", key="nst2_input", label="Value"))
+        card2.add_child(ui.element("button", key="nst2_btn", text="Nest Submmit", variant="outline"))
+    card.add_child(card2)
+    card.add_child(ui.element("button", key="nst_btn", text="Hello World"))

README.md

@@ -50,6 +50,19 @@ Check docs and compoenent examples in [![Streamlit App](https://static.streamlit
 + [x] badges
 + [x] link_button
 
+## One more thing
+There is a new component in testing, it will allows you to nest all streamlit-shadcn-ui components together.
+
+POC:
+```py
+with ui.element("card", key="base_ele") as card:
+    with ui.element("card", key="base_ele2") as card2:
+        card2.add_child(ui.element("input", key="nst2_input"))
+        card2.add_child(ui.element("button", key="nst2_btn", text="Nest Submmit", variant="outline"))
+    card.add_child(card2)
+    card.add_child(ui.element("button", key="nst_btn", text="Hello World"))
+```
+
 # License
 This repo is under MIT license. See [LICENSE](LICENSE) for details.
 `streamlit_shadcn_ui/components/packages/streamlit-components-lib` is under its original Apache-2.0 license. It is a temporal patch for streamlit-components-lib in react 18. 

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/element/registerComponents.ts

@@ -1,8 +1,12 @@
 
+import { StButton } from "../button";
 import { StCard } from "../card"
+import { StInput } from "../input";
 
 const ComponentCollection = {
-    card: StCard
+    card: StCard,
+    button: StButton,
+    input: StInput,
 } as const;
 
 export function getComponent (componentName: string) {

streamlit_shadcn_ui/py_components/base/element.py

@@ -1,52 +1,45 @@
 from streamlit_shadcn_ui.py_components.utils.declare import declare_component
 
+component_func = declare_component("element_renderer", release=False)
 
 class UIElement:
-    def __init__(self, key, value):
+    def __init__(self, name: str, props=None, key=None):
         self.key = key
-        self.value = value
+        self.props = props
+        self.name = name
+        self.children = []
+    
+    def renderTree(self, tree):
+        c = component_func(comp="element_renderer", props={
+            "tree": tree,
+        }, key=self.key, default=None)
+        return c
 
     def render(self):
-        raise NotImplementedError
-
-    def get_key(self):
-        return self.key
-
-    def get_value(self):
-        return self.value
+        tree = {
+            "name": self.name,
+            "props": self.props,
+            "children": []
+        }
+        for child in self.children:
+            tree["children"].append(child.render())
+        print(tree)
+        return tree
+    
+    def __enter__(self):
+        return self
+    
+    def __exit__(self, exc_type, exc_val, exc_tb):
+        tree = self.render()
+        return self.renderTree(tree)
+
+    def add_child(self, child):
+        self.children.append(child)
 
-    def set_value(self, value):
-        self.value = value
-
-    def set_key(self, key):
-        self.key = key
-
-    def __str__(self):
-        return f"{self.key}: {self.value}"
-
-    def __repr__(self):
-        return f"{self.key}: {self.value}"
-
-component_func = declare_component("element_renderer", release=False)
 
 
 # def ui_element():
     # case 1. 任意的shadcn ui组件
 
-def element(key):
-    tree = {
-        "name": "card",
-        "props": {
-            "className": "bg-red-500"
-        },
-        "children": ["Hello World", {
-            "name": "input",
-            "props": {
-                "className": "bg-yellow-500"
-            }
-        }]
-    }
-    c = component_func(comp="element_renderer", props={
-        "tree": tree,
-    }, key=key, default=None)
-    return c
+def element(name: str, key=None, **props):
+    return UIElement(name=name, props=props, key=key)