UI Components Library for Telegram Mini Apps

[kuhel]

Summary

Objective

To develop a React 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

Approval

This specification must be approved by the project stakeholders before work commences. Any changes to the scope or deliverables should be documented and agreed upon by all parties involved.

Context

To develop a React UI Components library for Telegram Mini Apps that implements the design language outlined in the Figma Telegram UI Kit.

References

https://weui.io/

https://vkcom.github.io/VKUI/

https://mantine.dev/

Estimate suggested reward

Up to $20K

[mbaneshi]

Thanks, @delovoyhomie for approvement

[markokhman]

@kuhel this one can only be done after the design one (#363), right?

[designervoid]

Hello everyone!

What are your thoughts on a cross-platform design system?
For instance, using Tailwind for the base package.
It works well for web, but seems less effective on mobile platforms (see benchmark).

What other options do we have for the UI Component Package?

1. Separate web components for the web, like @tonconnect/ui (use web components in any web environment).
2. Separate components for React Native.

Like: @ton/ui/web, @ton/ui/mobile.

Looking forward to community thoughts, thanks!

[mainsmirnov]

Good evening,

We would love to take on this assignment, and we are currently in the process of preparing the design for this issue.

Desired reward: $20,000
Submission deadline: January 22

We will publish a version for each of the designated segments: Layout, Form, Navigation, Feedback, Overlays, Data Display, Typography, and Miscellaneous. We can split the reward for each block.

We plan to use Storybook for documentation. This tool will make it easier to delineate documentation in each component and make property descriptions available in the IDE.

UPD:
If you choose us, I'd be happy to split the payment into two phases:

Stage 1: Overall architecture (provider for theme, platform, etc.), Typography components, and buttons.
Stage 2: Finalization of the remaining components.

[designervoid]

Hi!

I've added a cli to the ton-design-system package, and we are now capable of distributing pre-built components.

Today, I tested the command npx "@designervoid/ton-design-system@latest" cli -g and successfully integrated the Button component into a Solid.js application.

I'm currently in the process of creating React components and more complex components.

[kuhel]

Hi @designervoid , thank you for suggestions and appreciate yours efforts. But we aim UI Kit following strict guidelines of Telegram. @mainsmirnov team is on UI kit layouts and we will ask them to contribute for web components library.

[mbaneshi]

@kuhel thank you ,would you please make these consideration somehow more obvious in future ,so community can discuss next step not assignment .

[kuhel]

make these consideration somehow more obvious in future

Well, I must admit that request was focused on UI language of Telegram from the very beginning.

implements the design language outlined in the Figma Telegram UI Kit

[mainsmirnov]

Greetings, community! We are thrilled to announce the release of the beta version of our library.

1. Library: npm
2. Code: TelegramUI
3. Storybook: tgui.xelene.me

[delovoyhomie]

@mainsmirnov thank you for the contribution!

To accurately recognize your valuable contributions in our repository, we kindly request you to submit a Pull Request to the Hall of Fame file, providing the wallet address and a link to the bounty with the number.

Please follow these steps:

1. Fork the repository (if you haven't already).

2. Edit the Hall of Fame file, commit, and push your changes.

3. Create a Pull Request from your fork to the main repository, providing the wallet address and a link to the bounty with the number (for example, Pull Request Article: Generation of block random seed #136).
   For reference on what your entry should look like, please see the examples of past merged pull requests.

4. And please follow the questbook proposal stage in accordance with the bounty guideline

[delovoyhomie]

Thank you for the contribution!

• https://questbook.app/dashboard/?grantId=0xd92881bea3923fec2d8e61aa947c981faa4ab970&chainId=10&role=admin&proposalId=6622b5260bb93bd090542690&isRenderingProposalBody=true
• https://tonviewer.com/transaction/280b2e8835cf95d09a2c24c7bccd557ac0a548179111f71a306723e7cf5e518c

Rewards sent.