Roadmap: Reusable React Component Library (Done. Only missing docs)

[denolfe]

Description

Export all Payload React components for re-use outside of Payload

Implementation Detail

Use webpack to export all Payload React components, so a developer may use them elsewhere.

Potential Breaking Changes

None

Effort

High

[JarrodMFlesch]

We should attempt to convert SCSS vars to CSS vars where possible.

Related discord thread

[jacobsfletch]

Related #2388

[miguelvictor]

Toast notifications please 💯

Related discord thread

[jacobsfletch]

Drawers 👇

#3042

[IAmNatch]

Form components would be great as well 🙏
#3112

[wrobson-lllow]

Any updates to this? I would like to make a custom field built off the relationship where I can define how the options are sorted.

[jimzer]

I'm also working on plugins and it would be awesome to build the different UI components with Payload official components to match the look and feel 🔥

[jacobsfletch]

Storybook → #2165

[tyteen4a03]

Are there any movements to this?

[jacobsfletch]

@tyteen4a03 we're going to be starting work on this soon and will to have it finished by the end of Q4. We're going to be setting a new public roadmap in the coming days to bump this in priority.

[hatsumatsu]

This is great, can't wait to start building custom fields based on payload's core components!

One UI-related thing I noticed is the inconsistent style of icons. Maybe this is a something that could be fixed when working on the components? Using an existing set like https://remixicon.com could be a low-effort approach. I would love to see the great feature set of payload be reflected in the quality of UI 💅

[Jan-Eckerlein]

Wdym? Icons are the same. Hole components look different to reflect the different behaviour.
Only uploads are out of place. Don’t like em in general. And no link to the upload collection entry

[hatsumatsu]

@Jan-Eckerlein What I mean is that the different icons are inconsistent in style: compare the line width of the ❎ and 🔽 icon and the optical size of ❎ and ➕ . In the upload field the thin-lined "copy" icon sits next to an "edit" icon with a very different line width. It just doesn't look like these visual elements belong to the same design language. In the relation field this becomes even more obvious where the actual entry appears scaled down.

Using a pre-existing icon sets like https://remixicon.com that manage to deliver a consistent design language over a whole range of icons could be a low-hanging fruit in improving the UI of payload.

[jacobsfletch]

Hey everyone, quick update here. We're actively working on a new @payloadcms/ui package. This will go out together with Payload 3.0 which is currently in alpha. In 3.0, the admin panel installs and consumes this package directly. Keep an eye on that thread as we work toward an official stable release. The ui packages is still in its early stages, but long term will include a full, standalone testing suite, Storybook, and more. I'll post more updates here as they roll in.

[wrobson-lllow]

Was this released with 3.0? is it compatible with 2.0?

[akhrarovsaid]

@wrobson-lllow Yep, you can install @payloadcms/ui into your v3 project right now. It's not compatible with v2 unfortunately as it takes advantage of several new patterns and optimizations that are unique to v3.

[ahmadkakarr]

Great idea

[GermanJablo]

I'm going to mark this discussion as complete now that @payloadcms/ui is a thing. If there's anything missing, let me know!

[tyteen4a03]

I don't think this should be marked as done until the documentation are in place to support developers on how to use the components.

[GermanJablo]

You're right! I'm going to rename the discussion to reflect what's missing.