Example apps for custom components v2 (#1360)

* Example apps for custom components v2

* Add Tailwind example

* Self-host Tailwind script

Author: sfc-gh-dmatthews

python/api-examples-source/charts.video3/requirements.txt

@@ -1,2 +1,2 @@
-streamlit>=1.50.0
+streamlit-nightly
 webvtt-py

python/api-examples-source/components.custom_anchors.py

@@ -0,0 +1,39 @@
+import streamlit as st
+
+JS = """
+export default function(component) {
+    const { data, setTriggerValue, parentElement } = component;
+    parentElement.innerHTML = data;
+    const links = parentElement.querySelectorAll('a');
+
+    links.forEach((link) => {
+        link.onclick = (e) => {
+            setTriggerValue('clicked', link.getAttribute('data-link'));
+        };
+    });
+}
+"""
+
+CSS = """
+a {
+    color: var(--st-link-color);
+}
+"""
+
+my_component = st.components.v2.component(
+    "inline_links",
+    css=CSS,
+    js=JS,
+)
+
+paragraph_html = """
+<p>This is an example paragraph with inline links. To see the response in
+Python, click on the <a href="#" data-link="link_1">first link</a> or
+<a href="#" data-link="link_2">second link</a>.</p>
+"""
+
+result = my_component(data=paragraph_html, on_clicked_change=lambda: None)
+if result.clicked == "link_1":
+    st.write("You clicked the first link!")
+elif result.clicked == "link_2":
+    st.write("You clicked the second link!")

python/api-examples-source/components.interactive_svg.py

@@ -0,0 +1,46 @@
+import streamlit as st
+
+HTML = """
+<p>Click on the triangle, square, or circle to interact with the shapes:</p>
+
+<svg width="400" height="300">
+    <polygon points="100,50 50,150 150,150" data-shape="triangle"></polygon>
+    <rect x="200" y="75" width="100" height="100" data-shape="square"></rect>
+    <circle cx="125" cy="225" r="40" data-shape="circle"></circle>
+</svg>
+"""
+
+JS = """
+export default function(component) {
+    const { setTriggerValue, parentElement } = component;
+    const shapes = parentElement.querySelectorAll('[data-shape]');
+    
+    shapes.forEach((shape) => {
+        shape.onclick = (e) => {
+            setTriggerValue('clicked', shape.getAttribute('data-shape'));
+        };
+    });
+}
+"""
+
+CSS = """
+polygon, rect, circle {
+    stroke: var(--st-primary-color);
+    stroke-width: 2;
+    fill: transparent;
+    cursor: pointer;
+}
+polygon:hover, rect:hover, circle:hover {
+    fill: var(--st-secondary-background-color);
+}
+"""
+
+my_component = st.components.v2.component(
+    "clickable_svg",
+    html=HTML,
+    css=CSS,
+    js=JS,
+)
+
+result = my_component(on_clicked_change=lambda: None)
+result

python/api-examples-source/components.markdown_links.py

@@ -0,0 +1,28 @@
+import streamlit as st
+
+JS = """
+export default function(component) {
+    const { setTriggerValue } = component;
+    const links = document.querySelectorAll('a[href="#"]');
+
+    links.forEach((link) => {
+        link.onclick = (e) => {
+            setTriggerValue('clicked', link.innerHTML);
+        };
+    });
+}
+"""
+
+my_component = st.components.v2.component(
+    "inline_links",
+    js=JS,
+)
+
+result = my_component(on_clicked_change=lambda: None)
+
+st.markdown(
+    "Components aren't [sandboxed](#), so you can write JS that [interacts](#) with the main [document](#)."
+)
+
+if result.clicked:
+    st.write(f"You clicked {result.clicked}!")

python/api-examples-source/components.tailwind.py

@@ -0,0 +1,33 @@
+import streamlit as st
+
+with open("python/api-examples-source/tailwind_example.js", "r") as f:
+    TAILWIND_SCRIPT = f.read()
+
+HTML = """
+    <button class="bg-blue-500 hover:bg-blue-700 text-white py-1 px-3 rounded">
+        Click me!
+    </button>
+"""
+JS = TAILWIND_SCRIPT + """
+    export default function(component) {
+        const { setTriggerValue, parentElement } = component;
+        const button = parentElement.querySelector('button');
+        button.onclick = () => {
+            setTriggerValue('clicked', true);
+        };
+    }
+"""
+my_component = st.components.v2.component(
+    "my_tailwind_button",
+    html=HTML,
+    js=JS,
+)
+result_1 = my_component(
+    isolate_styles=False, on_clicked_change=lambda: None, key="one"
+)
+result_1
+
+result_2 = my_component(
+    isolate_styles=False, on_clicked_change=lambda: None, key="two"
+)
+result_2

python/api-examples-source/components.text_input.py

@@ -0,0 +1,64 @@
+import streamlit as st
+
+HTML = """
+    <label style='padding-right: 1em;' for='txt'>Enter text</label>
+    <input id='txt' type='text' />
+"""
+
+JS = """
+    export default function(component) {
+        const { setStateValue, parentElement, data } = component;
+
+        const label = parentElement.querySelector('label');
+        label.innerText = data.label;
+
+        const input = parentElement.querySelector('input');
+        if (input.value !== data.value) {
+            input.value = data.value ?? '';
+        };
+
+        input.onkeydown = (e) => {
+            if (e.key === 'Enter') {
+                setStateValue('value', e.target.value);
+            }
+        };
+
+        input.onblur = (e) => {
+            setStateValue('value', e.target.value);
+        };
+    }
+"""
+
+my_component = st.components.v2.component(
+    "my_text_input",
+    html=HTML,
+    js=JS,
+)
+
+
+def my_component_wrapper(
+    label, *, default="", key=None, on_change=lambda: None
+):
+    component_state = st.session_state.get(key, {})
+    value = component_state.get("value", default)
+    data = {"label": label, "value": value}
+    result = my_component(
+        data=data, default={"value": value}, key=key, on_value_change=on_change
+    )
+    return result
+
+
+st.title("My custom component")
+
+if st.button("Hello World"):
+    st.session_state["my_text_input_instance"]["value"] = "Hello World"
+if st.button("Clear text"):
+    st.session_state["my_text_input_instance"]["value"] = ""
+result = my_component_wrapper(
+    "Enter something",
+    default="I love Streamlit!",
+    key="my_text_input_instance",
+)
+
+st.write("Result:", result)
+st.write("Session state:", st.session_state)

python/api-examples-source/guides/requirements.txt

@@ -1 +1 @@
-streamlit>=1.50.0
+streamlit-nightly

python/api-examples-source/hello/requirements.txt

@@ -2,4 +2,4 @@ pandas==1.5.3
 numpy==1.23.5
 altair==4.2.0
 pydeck==0.8.0
-streamlit>=1.50.0
+streamlit-nightly

python/api-examples-source/mpa-hello/requirements.txt

@@ -3,4 +3,4 @@ numpy==1.23.5
 altair==4.2.0
 pydeck==0.8.0
 opencv-python-headless==4.8.1.78
-streamlit>=1.50.0
+streamlit-nightly

python/api-examples-source/navigation.example_1/requirements.txt

@@ -1 +1 @@
-streamlit>=1.50.0
+streamlit-nightly