Playground React Components Development

[zurfyx]

We frequently come across PRs addressing issues in our Playground Components: Modal, Button, Dropdown or Toolbar basics. Most recently, #4496

While it's encouraging to see the community engaged and eager to contribute to the project, it makes me question whether that's the best use of everyone's time. These reusable components have been implemented many times elsewhere and they are much more complete and reliable than what we have. For example, rc-dropdown's focuses solely on dropdowns, but they do it great.

I wonder to what extent we want to invest resources into the development of our in-house components or whether we should promote the use of external libraries for our Playground-only code, and perhaps even leaning towards a popular design system.

I don't mean to fix this problem in immediate terms but I'd like to hear other's opinions, especially as we consider a playground redesign. As usual, it comes with trade-offs: external libraries can be very reliable and complete but they will never be as flexible and lightweight as our in-house components.

cc @acywatson @fantactuka @thegreatercurve @tylerjbainbridge @ivailop7

[fantactuka]

As usual, it comes with trade-offs: external libraries can be very reliable and complete but they will never be as flexible and lightweight as our in-house components

Alternatively can use headless components from https://react-spectrum.adobe.com/react-aria/, where we have full control of rendering, but don't have to manage a11y props, positioning and underlying state

[ivailop7]

This is a really good idea, it's been something on my suggestions list as well. In my opinion, at the stage where one ends up thinking about text editing, they already have a component library with proper a11y in place and the conversation becomes about integration of existing components. Picking one framework, Material UI, Ant Design, Adobe React Spectrum or something else, will have a really good mileage on cutting the effort on minor fixes in the playground widgets and improve the experience to hot swap components. I'm totally on board. For example, I wanted to use https://casesandberg.github.io/react-color/ for the color selections, but I think going ahead with a component library makes more sense. As long as we do it in a unobtrusive way and it has a clean code separation between the components library and lexical code, it will be an absolute win!

[GermanJablo]

+1 for React-aria.
Now in addition to hooks they also have components: https://react-spectrum.adobe.com/react-aria/react-aria-components.html
The accessibility and UX is top-notch.

[acywatson]

I've had a pretty good experience using radix, which is very flexible:

https://www.radix-ui.com/