Doggo - A collection of unstyled Phoenix components

Your Libraries & OS Mentoring Libraries
21

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.

22

Iā€™m using Doggo for a side project that is not public.The styles are written with SCSS. The screenshot shows the app bar, tab navigation, table, and input components. Thatā€™s all I can show you at this time :smile:

image
image2026Ɨ834 29.2 KB

2 Likes
23

Iā€™m using it in a project (closed source). With Tailwind, you can either use @apply (which is what Iā€™m currently doing) or wrap everything and use utility classes, though YMMV here, I only briefly spiked this.

1 Like
24

Thank you for your feedback. There are a number of parallel initiatives currently ongoing to provide a stack of live components and it is not always easy to keep track of them an see where they are complementary or potentially build on each other.

25

Doggo 0.6.0 is released!

This release brings some significant changes with it. All components have been replaced with component builder functions, which means you can now customize all modifier attributes, rename components, and also customize the modifier class names.

The existing hard-coded Phoenix Storybook stories have been replaced with a mix task that generates stories into your storybook folder. This means you donā€™t need a separate storybook route for the Doggo components any more - just at them to your existing storybook. Furthermore, the generated stories automatically render variation groups for all configured modifiers. This is done dynamically - if you change the modifier configuration, you donā€™t need to re-generate the stories.

Release Notes

Added

  • Add Doggo.Storybook and mix dog.gen.stories for generating
    Phoenix.Storybook stories for the configured components. The generated
    stories automatically render variation groups for all configured modifiers.
  • Add Doggo.modifier_classes/1.
  • Add Doggo.modifier_class_name/2.

Changed

  • Replace all function components defined in Doggo with build macros
    in Doggo.Components. This allows you to customize the modifier attributes,
    component names, base classes, and some other options at compile time.
  • Make modifier class name builder configurable.
  • Rename build macro for former input component to field.
  • Configure Gettext module for field component (formerly input) via
    compile-time option instead of global attribute.
  • Allow to set required text and required title attributes for input and label.
  • Add module argument to mix dog.modifiers that points to the module
    in which the Doggo components are configured.
  • Replace placeholder attribute with placeholder_src and
    placeholder_content attributes in avatar component.
  • Replace phx-feedback-for attribute in favor of
    Phoenix.Component.used_input?/1.
  • Donā€™t use h2 for Doggo.page_header/1 sub title.
  • Nest vertical_nav_nested component into <div>.
  • Rename drawer-nav-title class in vertical_nav_nested component to be
    based on configured component name (default: vertical-nav-nested-title).
  • Better consistency, various improvements and optimizations in all components.
  • Revise The component type classification.
  • Add maturity levels for all components (experimental, developing, refining,
    stable).
  • Require live_view ~> 1.0.0-rc.6.

Removed

  • Remove Phoenix.Storybook stories bundled in the priv folder in favor of
    mix dog.gen.stories and Doggo.Storybook.
  • Remove Doggo.flash_group/1.

Upgrade Guide

  1. For all Doggo components you were using, call the corresponding build
    macros in Doggo.Components in one of your modules and update your HEEx
    templates to call the generated functions instead of the ones from the
    Doggo module. See readme for installation details.
  2. The previous Doggo version instructed you to configure a separate Storybook
    that reads the stories from the priv folder of the dependency. Remove that
    second Storybook and run
    mix dog.gen.stories -m [component-module] -o [storybook-folder] -a to
    generate stories for the configured Doggo components in the primary
    Storybook.
  3. If you use mix dog.modifiers in a script, add the --module argument.
  4. If you were setting the gettext attribute on the input component, pass
    the gettext_module option to Doggo.Components.build_field/1 instead.
9 Likes
26

Quick follow-up with some internal refactoring. It also inlines dependent components into the image and field components instead of requiring the user to compile those dependencies. Consequently, the component builders for field descriptions, errors, and labels have been removed. Those were very simple components that only made sense in the context of the field component, so I doubt that anybody will miss them.

4 Likes
27

I just released Doggo 0.9.0. Since I didnā€™t announce the releases in between, just a brief summary:

  • Various components have seen improvements, including documentation, stories, and customizability, and bumps in maturity levels.
  • Example CSS has been added for some components and will be added for the remaining components in the future. Links to the CSS files have been added to the component docs on Hex.
  • The demo application has been deployed and is available at https://woylie-doggo.fly.dev/.
  • mix dog.classes and Doggo.classes/1 have been added to retrieve all classes used in the configured components. Unlike the previous mix dog.modifiers and Doggo.modifier_classes/1, the output includes the base classes, the nested classes based on the base class, customizable additional classes, and configured modifier classes.

https://hexdocs.pm/doggo/changelog.html#0-9-0-2024-09-25

11 Likes