add ipyreact and widget

pages/sine_widget.py

@@ -0,0 +1,63 @@
+import ipyreact
+from traitlets import List, Any
+import numpy as np
+
+class TldrawSineWidget(ipyreact.ReactWidget):
+    points = List(List(Any())).tag(sync=True)
+    _esm = """
+    import { TDShapeType, Tldraw } from "@tldraw/tldraw";
+    import * as React from "react";
+
+    export default function App({ points }) {
+
+        const [app, setApp] = React.useState()
+
+        const handleMount = React.useCallback((app: Tldraw) => {
+            setApp(app)
+        }, []);
+
+        React.useEffect(() => {
+            if (app) {
+            app.createShapes({
+                type: "draw",
+                id: "draw1",
+                color: 'red',
+                points: points,
+            });
+            }
+        }, [points, app])
+
+        return (
+            <div
+            style={{
+                position: "relative",
+                width: "800px",
+                height: "350px",
+            }}
+            >
+            <Tldraw onMount={handleMount} onChange={e => console.log("hii")} />
+            </div>
+        );
+}
+
+    """
+
+import solara
+import numpy as np
+
+float_value = solara.reactive(0)
+
+@solara.component
+def Page():
+    stretchx = 50
+    x = np.arange(0,4*np.pi*stretchx , 2)
+    y = 130*np.sin(x*1/stretchx+float_value.value)+150
+
+    points = np.column_stack((x, y)).tolist()
+    TldrawSineWidget.element(points=points)
+    solara.Markdown(f"**Float value**: {float_value.value}")
+    solara.FloatSlider("Some float", value=float_value, min=0, max=4*np.pi, step=0.1)
+
+    with solara.Row():
+        solara.Button("Reset", on_click=lambda: float_value.set(0))
+Page()

requirements.txt

@@ -1,5 +1,6 @@
 geemap>=0.21.0
 leafmap
 mapwidget
+ipyreact
 solara
 geopandas