That is actually something I was thinking about. I have another project in its very early stages. In its current form, it is only an SCSS starter kit, but the idea in general was to define a specification first (e.g. a naming convention for design tokens and recommendations for the project structure), with the starter kit basically just being a reference implementation. And since I’ve published Doggo, I was wondering whether it would make sense to define a collection of standard components in a generic way that is not bound to any frameworks or languages. If that component specification was comprehensive enough and in a machine-readable format (e.g. JSON), it would be possible to generate Phoenix components from that specification, indeed, at least the HEEx part.
woylie
Nefcairon
Great work - I was waiting for something like that.
I hope some capable devs with good CSS knowledge provide some basic CSS styling. One day we might have that for some of the most common CSS frameworks (e.g. Tailwind, Milligram,…).
yasoob
@woylie nice job! Is it possible to maybe have the storybook deployed somewhere (Fly?) so folks can quickly see how the components work and behave? This would definitely reduce the friction to test and potentially adopt these components.
Also, are you currently using these components in a project or are you just developing them on their own?
woylie
I could deploy the storybook, but since the components don’t have default styles, I don’t think it would be very useful.
I’m using Doggo in my side projects currently. I might start using it at work as well, if a new project comes along.
greven
Cool stuff.
I’m working for a few months on writing a headless components library for LV too, but the more the merrier as we are still pretty thin on that front. The idea is for it to be the base of a more opinionated / styled UI library that makes use of it.
Keep up the good work!
woylie
Doggo 0.3.0 introduces a bunch of new components. This concludes the base component set for now. The next focus are the remaining APG patterns and keyboard interactions.
Added
- New component:
Doggo.avatar/1. - New component:
Doggo.badge/1. - New component:
Doggo.bottom_navigation/1. - New component:
Doggo.box/1. - New component:
Doggo.callout/1. - New component:
Doggo.fab/1. - New component:
Doggo.field_group/1. - New component:
Doggo.page_header/1. - New component:
Doggo.skeleton/1. - New component:
Doggo.steps/1. - New component:
Doggo.tag/1. - New component:
Doggo.tooltip/1. - Allow to visually hide labels.
- Support autocomplete via
<datalist>ininput/1component. addon_leftandaddon_rightslots on theinput/1component.gettextattribute onDoggo.input/1, giving you the choice to
set the Gettext module locally.
woylie
By the way, there is a demo app in the same repository that I use for development. I added instructions for running it locally.
woylie
Release 0.4.0 focuses on improving the consistency of the existing components and on improving the test coverage. It also introduces the cluster and toggle_button components.
woylie
Doggo 0.5.0 focuses on the semantics of the remaining APG patterns. Note that not all added components are fully functional yet: client-side interactivity including keyboard support will be the next focus. Components that are not ready to be used yet are marked with admonition blocks in the documentation.
Added
- New component:
Doggo.alert_dialog/1. - New component:
Doggo.carousel/1. - New component:
Doggo.combobox/1. - New component:
Doggo.disclosure_button/1. - New component:
Doggo.menu/1. - New component:
Doggo.menu_bar/1. - New component:
Doggo.menu_button/1. - New component:
Doggo.menu_group/1. - New component:
Doggo.menu_item/1. - New component:
Doggo.menu_item_checkbox/1. - New component:
Doggo.menu_item_radio_group/1. - New component:
Doggo.radio_group/1. - New component:
Doggo.split_pane/1. - New component:
Doggo.tabs/1. - New component:
Doggo.toolbar/1. - New component:
Doggo.tree/1. - Storybook page about modifier classes.
- Mix task
mix dog.modifiersto list all modifier classes.
Changed
- Set
aria-invalidandaria-errormessageattributes inDoggo.input/1
component. - Use buttons instead of links in
Doggo.action_bar/1. - Add
toolbarrole toDoggo.action_bar/1. - Use
sectioninstead ofarticleinDoggo.modal/1. - Use
buttonfor close button inDoggo.modal/1. - Add
dismissableattribute toDoggo.modal/1. - Remove
rolefrombutton_link/1, addclass. - Rename
Doggo.drawer/1slots toheader,main, andfooter. - Rename
Doggo.drawer_nav/1,Doggo.drawer_nav_nested/1and
Doggo.drawer_nav_sectiontoDoggo.vertical_nav/1,
Doggo.vertical_nav_nested/1andDoggo.vertical_nav_section/1. - Depend on
phoenix_storybook ~> 0.6.0.
kromnomo
Hi, I find the headless components super useful, so thanks a lot. Do you know of any projects where the components have already been used? It would be super interesting to see how well the components can be styled in practice, e.g. with Tailwind.