Bezier React next roadmap (v2~3)

[sungik-choi]

Summary

Describes what's next on the roadmap for Bezier React.

Background

As Channel's services have diversified, there is a need to make the Bezier design system work across different services, including Channel's desk. The existing bezier design system is not scalable because it was written for the Channel Talk service only. To meet the new needs, we are redesigning the design system with a highly scalable structure that can support the expansion of the business.

In Bezier React, we need to think about and apply various problem-solving methods to gradually migrate the redesigned design system to the channel's web services that use the existing legacy design system.

We can break it down into two huge tasks.

1. Foundation changes
2. Component changes

In Bezier React, we're going to divide the changes into two phases, V2 and V3.

V2

Goal

Solve and improve the problems of the existing design system.

• Change the style system from CSS-in-JS to CSS-based. Unify the approach to Foundation with CSS variables.
• Improve the existing Component (considering the changes in V3, I don't think we should make too many breaking changes here).
• Improve the Alpha Component and turn it into a Stable Component. Change the corresponding old Component to Legacy Component (deprecated).

V3

Goal

Apply Bezier design system v2 as a stable version.

• Gradually migrate the application by applying the new Foundation and Component.
• During the V2 -> V3 timeframe, gradually migrate towards keeping Legacy by adding Alpha prefix to the new Foundation/Component.
• Once the application is migrated, version up to V3 and remove Legacy.

Tasks that can be done independently

• Add Headless UI Component package: to make it easier for each application to implement a component corresponding to the 'App Component' of the new design system without duplicating logic.