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.