feat: ui element for render react component

Author: ObservedObserver

README.md

@@ -66,6 +66,11 @@ with ui.element("card", key="base_ele") as card:
 
 <img width="735" alt="POC example" src="https://github.com/ObservedObserver/streamlit-shadcn-ui/assets/22167673/ace9670f-64a4-4417-973e-7f8a86c704e2">
 
+## Reference
++ [streamlit-shadcn-ui examples and docs repo](https://github.com/ObservedObserver/steamlit-shadcn-ui-docs)
++ [Streamlit](https://streamlit.io/)
++ [shadcn-ui](https://ui.shadcn.com/)
+
 # 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. 

pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "streamlit-shadcn-ui"
-version = "0.1.10"
+version = "0.1.11"
 readme = "README.md"
 keywords = ["streamlit", "shadcn", "ui", "components"]
 description = "Using shadcn components in Streamlit"

streamlit_shadcn_ui/components/packages/frontend/src/App.tsx

@@ -58,8 +58,6 @@ function App(props: ComponentProps<{comp: string; props: any; [key: string]: any
     const { args, width, disabled, theme } = props;
     const container = useRef(null);
 
-    console.log(props)
-
     useEffect(() => {
         if (container.current) {
             Streamlit.setFrameHeight(container.current.offsetHeight + 10);

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/card.tsx

@@ -11,12 +11,13 @@ interface StCardProps {
     content?: string;
     description?: string;
     children?: React.ReactNode;
+    className?: string;
 }
 export const StCard = forwardRef<HTMLDivElement, StCardProps>(
     (props: StCardProps, ref) => {
-        const { title, content, description, children } = props;
+        const { title, content, description, children, className } = props;
         return (
-            <Card ref={ref}>
+            <Card className={`m-2 ${className}`} ref={ref}>
                 <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle className="text-sm font-medium">
                         {title}

streamlit_shadcn_ui/components/packages/frontend/src/components/streamlit/element/index.tsx

@@ -16,7 +16,6 @@ function dfsRender (tree: IElementTree | string) {
     }
     const children = tree.children?.map(child => typeof child === "string" ? child : dfsRender(child)) ?? [];
     const ele = getComponent(tree.name) || tree.name
-    console.log('ele', ele)
     return createElement(ele, tree.props, ...children)
 }
 export const ElementRenderer = forwardRef<HTMLDivElement, ElementRendererProps>((props, ref) => {

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

@@ -10,7 +10,6 @@ const ComponentCollection = {
 } as const;
 
 export function getComponent (componentName: string) {
-    console.log(componentName, ComponentCollection)
     if (componentName in ComponentCollection) {
         return ComponentCollection[componentName]
     }

streamlit_shadcn_ui/py_components/base/element.py

@@ -1,54 +1,42 @@
+from typing import List, Optional, Any, Dict
 from streamlit_shadcn_ui.py_components.utils.declare import declare_component
 from .context import get_context
-component_func = declare_component("element_renderer", release=False)
+
+__RELEASE = True
+component_func = declare_component("element_renderer", release=__RELEASE)
 
 class UIElement:
-    def __init__(self, name: str, props=None, key=None):
+    def __init__(self, name: str, props: Optional[Dict[str, Any]] = None, key: Optional[str] = None):
         self.key = key
-        self.props = props
+        self.props = props if props is not None else {}
         self.name = name
-        self.children = []
+        self.children: List['UIElement'] = []
         self.is_root = False
 
-    def renderTree(self, tree):
-        c = component_func(comp="element_renderer", props={
-            "tree": tree,
-        }, key=self.key, default=None)
-        return c
+    def render_tree(self, tree: Dict[str, Any]) -> Any:
+        return component_func(comp="element_renderer", props={"tree": tree}, key=self.key, default=None)
 
-    def render(self):
-        tree = {
+    def render(self) -> Dict[str, Any]:
+        return {
             "name": self.name,
             "props": self.props,
-            "children": []
+            "children": [child.render() for child in self.children]
         }
-        for child in self.children:
-            tree["children"].append(child.render())
-        print(tree)
-        return tree
 
-    def __enter__(self):
+    def __enter__(self) -> 'UIElement':
         ctx = get_context()
-        if (ctx["in_render"] is False):
+        if not ctx["in_render"]:
             ctx["in_render"] = True
             self.is_root = True
         return self
 
-    def __exit__(self, exc_type, exc_val, exc_tb):
-        tree = self.render()
-        ctx = get_context()
-        if (self.is_root):
-            ctx["in_render"] = False
-            return self.renderTree(tree)
-        return
+    def __exit__(self, exc_type, exc_val, exc_tb) -> None:
+        if self.is_root:
+            get_context()["in_render"] = False
+            self.render_tree(self.render())
 
-    def add_child(self, child):
+    def add_child(self, child: 'UIElement') -> None:
         self.children.append(child)
 
-
-
-# def ui_element():
-    # case 1. 任意的shadcn ui组件
-
-def element(name: str, key=None, **props):
-    return UIElement(name=name, props=props, key=key)
+def element(name: str, key: Optional[str] = None, **props) -> UIElement:
+    return UIElement(name=name, props=props, key=key)