[WIP][Site] Bootstrapping section to find "UI Components"

[weaverryan]

Q	A
Bug fix?	no
New feature?	no
Issues	None
License	MIT

UI Component = Twig component / markup + Stimulus controller

I'd like a place to share "solutions". What is the general markup and Stimulus controller needed for a modal? A tooltip? Tabs? Toast notifications, etc? How can we help people discover that, if you need to build a popover, there is a controller for that?

I'm proposing a new section on ux.symfony.com to find these "pieces". It's meant to be solution-based: you search/browse for your need (e.g. modals) vs the package (e.g. "turbo" or "live components"). We talked about this and Bootstrapped a bit on a live stream - https://www.youtube.com/watch?v=3f65q46k6TM - this is the result.

Unstyled example page for toasts

ui-component-demo.mp4

UI Component Ideas

• Modal
• Tooltip/Popover
• Button
• Tabs
• Toast
• Dropdown
• Trix
• (video player)
• Clipboard
• Alert
• Form Inputs
• Pagination
• Google Maps & open street maps
• Sliders
• Off-Canvas Menus
• Lightboxes
• Badge
• Progress
• Autocomplete
• Charts
• Image cropper
• Dropzone for upload
• Lazy images
• Password toggle

Open questions:

• WDYT?
• I use Tailwind. Do we try to have a Bootstrap version? And also a "no CSS" version of each one?
• I've used the word "UI Components" to describe these... "component" is a loaded name, but it might still fit well.

[yguedidi]

About the naming, at work we faced a similar situation where we were reusing existing things only, without any specific code for that "thing", in the context of Storybook.
It wasn't a story describing a state of the component, nor a component because of no specific code for it, just a particular composition we want to document.
We ended up naming it a "Recipe", like cooking, we mix what we have.

So what about "UI Recipes"? 😁

[smnandre]

Recipes is great!

Is it possible to decide if we want bootstrap and/or "pure css" on a recipe basis ?

---

Would you accept LiveComponent in here too ? Now that i've played a lot with Live, i'm thinking at some basic component that could be really usefull (custom dropzone, calendar with ranges, some "infinite paginator" ... )

---

Side not for the name: I think "HowTo" could be a challenger... but i'd really like to keep that name aside for something more "how/why" than "what".. Questions with a project scope (how to structure my folders / how to reuse components / how to decide what's "front" what's "back" ....

[seb-jean]

For me, use Tailwind is a good idea.

The list of ideas is super interesting :).
I add to the UI Component Ideas : Breadcrumbs.

[yguedidi]

I use Tailwind. Do we try to have a Bootstrap version? And also a "no CSS" version of each one?

I have no particular opinion on my side about Tailwind or not, but I think having a "no CSS" with semantic class names on elements is good, so it's a matter of copying the markup and styling the classes :)
Maybe the system can be "extensible" and allow the community to contribute with different front-end libraries (Bootstrap, Materialize, Foundation, etc...)

[seb-jean]

We could take an example from Catalyst from Tailwind UI.

[adeys]

Hi evryone!!
I found these :

• https://shadcn.rails-components.com
• phlexui.com

I hope it helps

[yguedidi]

Just to share so I don't forget: I (re)discovered PicoCSS, looks like to be a good candidate for a semantic markup only variants

[smnandre]

I (re?)discoverd DaisyUI .... and seriously still not sure if this is a joke or not.

[seb-jean]

I watched the live streaming (https://www.youtube.com/watch?v=anXeWMLHNWE) associated with this Pull Request.
I tell myself that it could be interesting to make the sources for the different components available and thus the community could contribute to this Pull Request.
What do you think ?

[norkunas]

Toasts/tooltip/popover can be done today with popover api https://mdn.github.io/dom-examples/popover-api/toast-popovers/

[seb-jean]

Can we help with this PR? 😃

[smnandre]

Can we help with this PR? 😃

Of course, help is always more than welcome !

We're moving towards some kind of "recipe system", you can poke us in Slack if you want :)
(the ux channel, or DM @kbond @WebMamba or me if you prefer)

[dahromy]

I've create this bundle based on shadcn-ui

https://github.com/dahromy/fusion-ui

[kbond]

@dahromy, wow, this is really cool! Very similar to our plans for ux.symfony.com (we'd also like to include demos)

[dahromy]

@dahromy, wow, this is really cool! Very similar to our plans for ux.symfony.com (we'd also like to include demos)

With pleasure