Angular UI Components Library for Telegram Mini Apps

[kalenkevich]

Summary

Objective

Develop an Angular UI Components library for Telegram Mini Apps that implements the design language outlined in the Figma Telegram UI Kit.

Functionality

• Theme Auto-Switching. Components should automatically switch between light and dark themes based on the user's system settings or explicit user choice.
• Telegram Colors Tokens. Support dynamic theme-based colors provided by Telegram Mini Apps platform.
• Responsive Design. Components should be responsive and adaptable to various screen sizes and orientations without loss of functionality or aesthetics.
• Cross-Platform Compatibility. Ensure the components render consistently on different Telegram applications over all available platforms (mobile, desktop, web)
• Interactivity. Components should have interactive states (hover, active, disabled, etc.) as outlined in the Figma UI Kit.

Technical Requirements

• Out-of-the-box SDK Support
  • Handling the themeChanged event and theme switching.
  • Transitioning to fullscreen mode upon app start.
  • UI adaptability at viewportChanged event.
  • UI and web application viewport adaptability upon the appearance/hiding of the Main Button through setParams.
  • Must consider the characteristics of both fullscreen and compact web views.
    • Insets & Safe Area for iOS and Android.
    • Tabbar and other navigation in the footer for both fullscreen and compact web views.
• Dynamic Import. The UI Kit should be structured in a way that facilitates modular component imports.
• Modularity. Components should be designed as reusable and standalone elements.
• Documentation. Provide comprehensive documentation for each component, including examples of usage, API descriptions, and integration guidelines.

Deliverables

• Source code for all components
• A live demo page showcasing all components
• Documentation site
• NPM package for easy installation and integration

Context

Similar to React UI Components library develop Angular UI Components library for Telegram Mini Apps that implements the design language outlined in the Figma Telegram UI Kit.

References

Similar to React UI Components Library issue and corresponding Bounty

Estimate suggested reward

$20K

[hstarorg]

I can do this, how do I get started?

[Avcharov]

Would be happy to participate, what is needed to be involved?