plone
`@plone/components` - Framework agnostic ReactJS CMS components
[!IMPORTANT] If you are not a member of the Volto Team or Developers Team in the Plone GitHub organization, then do not work on or comment on this issue.
PLIP (Plone Improvement Proposal)
Responsible Persons
Proposer: Víctor Fernández de Alba (@sneridagh)
Seconder:
Abstract
Extract the basic Volto React components to their own Volto core add-on, and being able to release them separately from Volto core.
Motivation
Since long time ago that there is the need to render Plone content into other React-based frameworks (NextJS, Remix, Gatsby, etc...). Having a unified set of default basic components for reuse everywhere would help a lot in order to expand the influence of Plone as headless CMS.
One could thing about this library in a small SDK to show Plone content in React frameworks.
Status
This is an ongoing project, lead by Víctor Fernández de Alba (@sneridagh). You can find it in the Volto monorepo:
https://github.com/plone/volto/tree/main/packages/components
and it is being released regularly, as their development advances:
https://www.npmjs.com/package/@plone/components
You can learn more about it in:
https://github.com/plone/volto/blob/main/packages/components/README.md
Assumptions
The components of this library won't use any specific design system nor SemanticUI in order to be as much as possible unspecific and agnostic, to ease the reusability.
This PLIP has relation with PLIP #4347 (Modernize Data Fetching API). The components should be agnostic in data fetching and use the @plone/client library proposed in that PLIP. Thus, they will be Redux-free.
The components should be "dumb", so no data fetching as stated above, nor relying on any other external facility different than coming from an idiomatic React artifact (eg. context).
They have to be ready to use anywhere, not only in Volto itself. In fact, they will be used initially outside it, so it must be framework agnostic (NextJS, Remix, etc).
Proposal & Implementation
The proposed implementation will use a headless CSS component library as building blocks: react-aria-components. The vanilla basic CSS would be the one coming from Quanta design system, but it must be easy to override/substitute by its own local styling using the same styling methods provided by react-aria-components see: https://react-spectrum.adobe.com/react-aria/styling.html
Fundamental components
- [x] Container
- [ ] Grid
- [x] Button
- [x] Accordion
- [ ] Tooltip
- [ ] PopUp
- [x] Inputs
- [ ] Checkboxes
- [x] Selects
- [ ] ComboBox
- [ ] Widgets in display mode
- [ ] Widgets in edit mode (a selection of them to be used in forms? TBD)
CMSUI components
- [ ] Toolbar
- [ ] Sidebar
- [ ] Widgets
- [ ] Add/Edit form
- [ ] AddLinkWidget
- [ ] BlockChooser
- [x] BlocksRenderer
Public theme components
- [ ] Header
- [ ] Footer
- [x] Breadcrumbs
- [ ] Sections / Fat Menu
- [ ] AnonTools
- [ ] Comments
- [ ] LanguageSelector
- [ ] Pagination
- [ ] Login
- [ ] Volto Core Blocks View components
Deliverables
-
@plone/componentsnpm package. - Documentation on how to use it
- StoryBook with detailed information about the components
- Accessibility and acceptance tests
- Upgrade guide
Risks
The idea is to develop this totally aside from Volto itself. Could be that they will never made into Volto, and only used as a support library to be used outside in other React frameworks or React projects.
It will be up to the community to decide if @plone/components should make it or not into Volto. Starting using it will potentially break any theming and shadow customization in projects, this has to be planned as a next major of Plone (7 or beyond).
Participants
Víctor Fernández de Alba (Leading) ... anybody interested to help will be welcomed! Please contact @sneridagh
[!IMPORTANT] If you are not a member of the Volto Team or Developers Team in the Plone GitHub organization, then do not work on or comment on this issue.
Update on this: CMSUI and Public Theme components will not be part of @plone/components, which will only be a React Components Library with optional Quanta styles and Tailwind flavor. Those will instead be in the @plone/layout package. We are happy with the current state of the library, therefore I am closing this. Of course the library will need to be kept up to date with new react-aria-components releases, but it's outside of the scope of this issue.
