CCV2 Embedded apps for concepts

[sfc-gh-dmatthews]

📚 Context

This PR adds the source code for embedded examples in the Custom Components V2 docs, introduced later in this stack.

🧠 Description of Changes

Current:

No examples or documentation existed for the new components v2 API.

Revised:

Added complete component examples demonstrating various patterns and capabilities:

• Basic Examples:

• Simple "Hello World" component with inline HTML/CSS/JS
• Simple button component with trigger values and callbacks
• Basic counter with state management and external files

• Interactive Components:

• Interactive counter with both state and trigger values
• Hold-to-confirm danger button with animations and cooldown
• Radial menu selector with viewport-aware positioning
• Stopwatch with complex state management and lap tracking

• Display Components:

• Radial dial gauge with smooth animations and color zones
• Rich data handling example with DataFrames and base64 images

• Component Architecture:

• Modular file organization patterns (__init__.py, separate CSS/HTML/JS files)
• State vs trigger value usage patterns
• Callback function implementations
• Data serialization examples (JSON, Arrow, base64)

• Advanced Features:

• CSS animations and transitions using Streamlit design tokens
• Mobile-responsive touch event handling
• Viewport boundary detection and positioning
• Component cleanup and memory management
• Session state integration patterns

💥 Impact

Size:

• Small
• Not small

🌐 References

• Notion

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

[sfc-gh-dmatthews]

• CCV2 Template Tutorials #1434
• Better diff highlighting for code blocks #1433
• CCV2 Conceptual docs #1432
• CCV2 Embedded apps for concepts #1431 👈 (View in Graphite)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[sfc-gh-bnisco]

note: I am a little worried about using this as a pattern in our docs. While it is valid, there are some drawbacks. One notable drawback I've seen is that it doesn't always detect a file change when the underlying files change, so refreshing the page leads to a stale component. One would have to restart the streamlit server in order for the changes to be picked up.

While it might be a bit uglier, putting the file content in Python strings might be better overall.

We have considered expanding the API in Streamlit to allow for Paths to be passed directly to the html/css/js arguments of st.components.v2.component(), but haven't implemented that yet.

[sfc-gh-dmatthews]

It would be delightful if we could support local paths for non-packaged components. That would definitley clean up the docs for me.

[sfc-gh-dmatthews]

Merge activity

• Mar 12, 8:08 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Mar 12, 8:09 PM UTC: @sfc-gh-dmatthews merged this pull request with Graphite.