fix(widgets): Example app in marimo

python/examples/marimo/numerous/.gitignore

@@ -0,0 +1,2 @@
+# added by numerous init
+.env

python/examples/marimo/numerous/app.py

@@ -0,0 +1,65 @@
+import marimo
+
+__generated_with = "0.9.24"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def __():
+    import marimo as mo
+    import numerous.widgets as wi
+    aw = mo.ui.anywidget
+    ht = mo.Html
+    from page import page
+    return aw, ht, mo, page, wi
+
+
+@app.cell
+def __(counter, ht, increment_counter, page, selection_widget, tabs):
+    ht(page(**{
+        "tabs": tabs,
+        "show_components": tabs.active_tab == "Components",
+        "show_advanced": tabs.active_tab == "Advanced",
+        "counter": counter,
+        "increment_counter": increment_counter,
+        "selection_widget": selection_widget,
+
+    }))
+    return
+
+
+@app.cell
+def __(aw, wi):
+    tabs = aw(wi.Tabs(["Components", "Advanced"]))
+    return (tabs,)
+
+
+@app.cell
+def __(mo):
+    value, set_value = mo.state(0)
+    return set_value, value
+
+
+@app.cell
+def __(aw, value, wi):
+    counter = aw(wi.Number(default=value(), label="Counter:", fit_to_content=True))
+    return (counter,)
+
+
+@app.cell
+def __(aw, set_value, value, wi):
+    def on_click(event):
+        set_value(value()+1)
+
+    increment_counter = aw(wi.Button(label="Increment Counter", on_click=on_click))
+    return increment_counter, on_click
+
+
+@app.cell
+def __(aw, wi):
+    selection_widget = aw(wi.DropDown(["1", "2", "3"], label="Select Value", fit_to_content=True))
+    return (selection_widget,)
+
+
+if __name__ == "__main__":
+    app.run()

python/examples/marimo/numerous/numerous.toml

@@ -0,0 +1,11 @@
+name = "Numerous Widgets Marimo Demo"
+description = "This app is to demo the Numerous widgets toolbox on Numerous"
+cover_image = "app_cover.jpg"
+exclude = ["*venv", "venv*", ".git", ".env"]
+port = 8000
+
+[python]
+  library = "marimo"
+  version = "3.12"
+  app_file = "app.py"
+  requirements_file = "requirements.txt"

python/examples/marimo/numerous/page.html.j2

@@ -0,0 +1,66 @@
+<style>
+    {{css}}
+
+
+    .title {
+        text-align: left;
+        font-size: 3em;
+        background-color: black;
+        color: black;
+        padding-left: .5em;
+    }
+
+    .column_with_spacing {
+        display: flex;
+        flex-direction: column;
+        gap: 2em;
+        margin-top: 2em;
+    }
+
+    .bordered_container {
+        border-right: 1px solid var(--ui-widget-border-color);
+        border-bottom: 1px solid var(--ui-widget-border-color);
+        border-left: 1px solid var(--ui-widget-border-color);
+        border-radius: 4px;
+        box-shadow: var(--ui-widget-dropdown-shadow);
+        padding: 1em;
+    }
+    .header-container {
+        display: flex;
+        background-color: black;
+        padding: 1em;
+        height: fit-content;
+        overflow: hidden;
+        border-radius: 4px;
+    }
+    .logo {
+        transform: scale(0.2);
+        transform-origin: top left;
+        background-color: black;
+        padding-left: 1em;
+        height: 50px;
+        width: 20%;
+    }
+
+    
+</style>
+
+
+<div class="header-container">
+    <div class="logo">{{ logo }}</div>
+</div>
+
+
+<div style="margin-top: 1em;">
+    {{tabs}}
+</div>
+<div class="bordered_container">
+    <div class="column_with_spacing" style="display: {{'flex' if show_components else 'none'}}">
+        {{ counter }}
+        {{ increment_counter }}
+        {{ selection_widget}}
+    </div>
+    <div class="column_with_spacing" style="display: {{'flex' if show_advanced else 'none'}}">
+        <h2>More to come soon...</h2>
+    </div>
+</div>

python/examples/marimo/numerous/page.py

@@ -0,0 +1,19 @@
+from numerous.widgets import render_template
+from numerous.widgets.base._config import IS_DEV
+from pathlib import Path
+from typing import Dict, Any
+
+
+with open(Path(__file__).parent.joinpath("page.html.j2"), "r") as f:
+    page_html_template = f.read()   
+
+def page(**page_variables):
+    page_variables["css"] = open(Path(__file__).parent.joinpath("styles.css"), "r").read()
+    page_variables["logo"] = open(Path(__file__).parent.joinpath("logo.svg"), "r").read()
+    print("logo")
+    print(page_variables["logo"])
+    if IS_DEV:
+        with open(Path(__file__).parent.joinpath("page.html.j2"), "r") as f:
+            page_html_template = f.read()   
+
+    return render_template(page_html_template, **page_variables)

python/examples/marimo/numerous/requirements.txt

@@ -0,0 +1,2 @@
+marimo
+numerous-widgets