woylie/doggo

Doggo is a Phoenix LiveView component library that provides a comprehensive suite of accessible, styled UI elements such as dialogs, carousels, and form controls. It features a macro-based build system that allows for compile-time customization of component attributes and classes, alongside client-side JavaScript hooks for interactivity and localization. The system includes tooling for generating Storybook documentation and CSS safelists, supported by extensive testing for accessibility and state persistence.

10 changes.

This period focused on releasing Doggo 0.18.0, which introduced a major component API overhaul, new utilities like \Doggo.Form\ and \Doggo.JS\, and stricter validation. Concurrently, the project migrated its configuration to modern Elixir syntax and regenerated the demo application for Phoenix 1.7, integrating Storybook for component visualization and updating core dependencies.

19 changes.

This period focused on establishing the Doggo UI component library for Phoenix LiveView, introducing a macro-based build system for customizable components and comprehensive accessibility testing. The work also centered on integrating Phoenix Storybook to provide interactive documentation and visual examples for the new components, supported by new Mix tasks and a modernized demo application asset pipeline.

8 changes.

This period focused on building the 'Doggo' UI component library, introducing a comprehensive suite of interactive JavaScript hooks and corresponding CSS styles for elements like accordions, dialogs, and carousels. The work included establishing a design system with semantic tokens and accessibility utilities, alongside extensive testing via unit tests, HTML fixtures, and Playwright end-to-end tests to ensure state persistence and accessibility compliance.

Added Storybook data files for core components (accordion, card, date, datetime, fallback, property\_list, relative\_time, table, tabs, tag, time, tree) in the demo/storybook/data directory. These files register the components with PhoenixStorybook and Doggo.Storybook, enabling them to be displayed in the Storybook UI for demonstration and testing purposes.

demo/storybook/data · high confidence

New Storybook stories have been added for the combobox, field, field group, and radio group components, providing interactive documentation and examples for these form elements. The combobox story includes a specific example demonstrating server-side filtering functionality.

demo/storybook/form, demo/storybook/navigation · high confidence

The demo application now includes a Storybook interface powered by Phoenix Storybook. This adds a new 'Storybook' folder and an 'Introduction' page that displays the library version, component count, and category count, along with links to documentation and resources. This change allows users to browse and interact with the Doggo components directly within the demo app.

demo/storybook · high confidence

New Storybook story files have been added for various UI components, including buttons (action\_bar, button, button\_link, disclosure\_button, switch, toggle\_button, toolbar), dialogs (alert\_dialog, modal), and layout elements (app\_bar, box, cluster, drawer, page\_header, split\_pane, stack). These stories link the components from DemoWeb.CoreComponents to the PhoenixStorybook interface, enabling developers to view and interact with these components in isolation.

demo/storybook/buttons · high confidence

New Storybook story files have been added for the menu, menu\_bar, menu\_button, menu\_group, menu\_item, menu\_item\_checkbox, and menu\_item\_radio\_group components. These files register the corresponding functions from DemoWeb.CoreComponents with PhoenixStorybook and Doggo.Storybook, enabling interactive documentation and testing of these UI elements in the demo application.

demo/storybook/feedback, demo/storybook/media, demo/storybook/menu · high confidence

A new demo view at \/patch-test\ allows users to verify that interactive components (such as modals, carousels, trees, and toggletips) preserve their state during LiveView DOM patches. The harness provides controls to force re-renders, toggle auto-ticking, wrap components in comprehensions, and dynamically add or remove items to test state persistence under various patch conditions.

_demo/lib/demo\web/live · high confidence

The demo application has been updated to include a comprehensive set of UI component hooks from the @woylie/doggo library. The main app entry point (app.js) now registers hooks for Accordion, Carousel, Combobox, Dialog, Menu, MenuButton, SplitPane, Tabs, Toggletip, Toolbar, Tooltip, and Tree, enabling these components to function within Phoenix LiveView. Additionally, a new Storybook configuration (storybook.js) exposes these same hooks, allowing developers to preview and test the components in isolation. The setup also includes client-side datetime formatting utilities (localizeTimes, relativeTimes) and a topbar progress indicator for navigation events.

demo/assets/js · high confidence

This change introduces Storybook stories for the Doggo UI component library, providing interactive documentation and visual examples for a wide range of interface elements. The new files in \lib/doggo/storybook\ cover layout and structural components (Box, Card, Cluster, Drawer, AppBar), navigation elements (Breadcrumb, BottomNavigation, VerticalNav), form controls (Field, Combobox, Button, Toggle), and feedback widgets (Alert, Badge, Callout, Carousel, Dialog). Each story defines variations, modifier groups, and slot usage to demonstrate how the components behave with different attributes and content.

lib/doggo/storybook · high confidence

The demo application now includes a new set of global base styles located in \demo/assets/css/base\. This initialization introduces CSS \@layer\ scoping (specifically the \demo\ layer) to manage style precedence, defines foundational resets for layout and typography, and adds reusable keyframe animations for fade-in, fade-out, and spin effects. These styles provide the visual foundation for the demo interface, including default appearances for form controls and text elements.

demo/assets/css/base · high confidence

The demo application now uses a structured SCSS build that imports a comprehensive set of component styles (including accordion, alert, badge, card, combobox, tabs, table, and toggletip) alongside layout and page styles. A new Storybook theme file maps design tokens to Storybook's color variables, enabling consistent dark-mode support and visual consistency across the component library documentation.

demo/assets/css · high confidence

Adds CSS styles for a comprehensive set of UI components—including accordion, alert, app-bar, avatar, badge, bottom-navigation, box, breadcrumb, button, callout, card, carousel, cluster, combobox, dialog, drawer, field, and more—within the 'doggo' CSS layer. These styles provide consistent visual design, layout, and accessibility features (such as focus outlines and target sizes) for the user interface.

assets/css/components · high confidence

Doggo components are now generated at compile time using macros defined in \Doggo.Components\ (invoked via \use Doggo.Components\), replacing the previous static component definitions. This change allows users to customize component names, base CSS classes, modifier attributes, and default values for attributes and slots directly in their application code. The system includes a new \Doggo.BuildOptions\ module to validate and split build options, \Doggo.Macros\ to generate the component functions, and \Doggo.Template\ to compile HEEx templates with injected values. Additionally, new helper modules \Doggo.Form\, \Doggo.JS\, and \Doggo.Time\ provide utilities for form accessibility, JavaScript hooks, and client-side datetime formatting, while \Doggo.Storybook\ integrates with Phoenix Storybook for optional visual testing.

lib/doggo · high confidence

Adds a new JavaScript module structure that provides interactive UI components (hooks) for elements like accordions, carousels, comboboxes, dialogs, menus, split panes, tabs, trees, toolbars, toggletips, and tooltips, alongside utilities for navigation and DOM observation. It also introduces client-side formatting for dates and times, allowing elements with \data-relative\ or \data-localize\ attributes to display relative time strings (e.g., "2 hours ago") or localized absolute times, with automatic updates and fallbacks to server-rendered text if client-side formatting fails.

assets/js · high confidence

Adds a comprehensive set of accessible, styled UI components to the \lib/doggo/components\ directory, including accordion, action bar, alert, alert dialog, app bar, avatar, badge, bottom navigation, box, breadcrumb, button, button link, callout, card, and carousel. These components provide standardized layouts, navigation patterns, and interactive controls for building modern web interfaces.

lib/doggo/components · high confidence

Two new Mix tasks are introduced to streamline integration with Phoenix Storybook and Tailwind CSS. The \mix dog.gen.stories\ task generates Storybook modules for Doggo components, supporting generation for all components or a single specified one, with options to force overwrite existing files and create output directories. The \mix dog.safelist\ task lists all component classes and data attributes, allowing users to print them, write them to a file, or check if an existing safelist file is up to date. Both tasks require the \phoenix\_storybook\ dependency and operate on the module specified via the \-m\ flag.

lib/mix · high confidence

This change introduces a suite of new JavaScript hooks in \assets/js/hooks\ that provide client-side interactivity for various UI components. The \accordion.js\ hook manages keyboard navigation between headers. The \carousel.js\ hook handles auto-rotation, pause/resume controls, and active state synchronization. The \combobox.js\ hook implements listbox selection, filtering (including server-side filtering), and required attribute validation. The \dialog.js\ hook enhances native \\<dialog\>\ elements with \closedby\ attribute support and \on\_cancel\ execution. The \menu.js\ and \menu\_button.js\ hooks manage menu opening/closing, roving tabindex, and type-ahead search. The \split\_pane.js\ hook allows resizing panes via drag or keyboard. The \tabs.js\ hook handles tab selection and keyboard navigation. The \toggletip.js\ hook manages popover positioning and accessibility announcements. The \toolbar.js\ hook manages focus traversal within toolbars. The \tooltip.js\ hook handles tooltip visibility and dismissal. The \tree.js\ hook manages tree item expansion, collapse, and keyboard navigation. These hooks are designed to be used with Phoenix LiveView hooks.

assets/js/hooks · high confidence

The demo application now includes a set of SCSS layout modules that provide utility classes for common page structures. Users can apply the \.container\ class for centered content with adjustable max-widths, the \.grid\ class for responsive auto-fit column layouts, the \.level\ class for side-by-side alignment of two elements, and the \.with-sidebar\ class for flexible sidebar/content arrangements. These styles are scoped within the \@layer demo\ cascade layer to ensure predictable specificity and easy customization via CSS variables.

demo/assets/css/layouts · high confidence

The demo application configuration has been regenerated to align with Phoenix 1.7 standards. This includes a new \config/config.exs\ that switches the HTTP adapter to \Bandit.PhoenixAdapter\ and configures the JSON library. Development settings in \dev.exs\ now support port configuration via the \PORT\ environment variable and enable specific code reloading patterns for the demo and \doggo\ apps. Production configuration in \runtime.exs\ has been updated to read \SECRET\_KEY\_BASE\ and \PHX\_HOST\ from environment variables, while release scripts (\rel/env.sh.eex\, \rel/overlays/bin/server\) have been added to support deployment on Fly.io with IPv6 and distributed Erlang settings.

demo/config · high confidence

The demo application has been regenerated for Phoenix 1.7, introducing a Storybook interface for component visualization. Users can now access the Storybook at /storybook, while the main home page redirects to this location. The update includes a new CanonicalHost plug that redirects requests to the canonical host in production, and a new PatchTestLive route at /patch-test for testing purposes.

_demo, demo/lib/demo\web · high confidence

The demo application has been regenerated to align with Phoenix 1.7 standards. The application supervision tree in \application.ex\ now explicitly starts \Phoenix.PubSub\ and the \DemoWeb.Endpoint\, while telemetry and DNS clustering dependencies have been removed from the configuration.

demo/lib/demo · medium confidence

The demo application's asset management has been restructured to use a modern, modular toolchain. A new esbuild-based build script (build.js) now handles bundling for JavaScript and CSS, targeting specific browser versions and supporting production minification and watch modes. Configuration files have been added to enforce code quality via stylelint (with custom property validation against tokens.css) and Prettier, while switching to pnpm for package management. Additionally, end-to-end testing capabilities have been introduced through a new Playwright configuration, which sets up a dedicated local server port and tests across multiple browser profiles, including reduced-motion preferences.

demo/assets · high confidence

This release introduces significant behavioral changes to the component API, moving several configuration attributes (such as \title\, \close\_label\, and carousel descriptions) into build-time options to simplify component usage. It adds new modules \Doggo.Form\ for form control accessibility and \Doggo.JS\ for JavaScript commands, while deprecating the legacy \Doggo\ JS functions. New components include \relative\_time\, \toggletip\, and \property\_list\, and existing components like \date\, \datetime\, and \time\ now support client-side localization via a new \localize\ attribute. The release also enforces stricter validation through a new \diagnostics\ config option and renames several slots and attributes (e.g., \:main\ to \:body\ in drawers, \text\ to \label\ in icons).

(repo-wide) · high confidence

The assets/css directory now includes a new tokens.css file that defines a comprehensive set of semantic color tokens (for primary, danger, warning, info, and success states in both light and dark themes) and global non-color tokens for spacing, typography, and breakpoints. Additionally, a new common.css file provides a visually hidden utility class for accessibility purposes, both organized within the 'doggo' CSS layer.

assets/css · high confidence

The configuration file has been updated to use the modern \import Config\ syntax instead of the deprecated \import Mix.Config\, ensuring compatibility with newer Elixir versions. Additionally, the Elixir runtime is now configured to use \Tz.TimeZoneDatabase\ for time zone handling, and the application's diagnostics feature is explicitly enabled via the \:doggo\ configuration key.

config · high confidence

The \Doggo\ module has been refactored to serve as a container for miscellaneous functions and macros, with actual component definitions moved to \Doggo.Components\. This change introduces a new \safelist/1\ function that extracts all base classes, modifier classes, and data attributes from a given components module, facilitating CSS purging. Additionally, several JS helper functions previously defined in \Doggo\ are now deprecated in favor of counterparts in \Doggo.JS\.

lib · high confidence

The demo application's component layer has been regenerated to align with Phoenix 1.7 standards. This introduces a centralized \CoreComponents\ module that defines a comprehensive suite of UI building blocks (such as buttons, fields, modals, and navigation elements) using the new \Phoenix.Component\ DSL. Additionally, a dedicated \Icons\ module is now provided to handle SVG icon rendering, and layout templates are embedded via a new \Layouts\ module, replacing previous implementation patterns.

_demo/lib/demo\web/components · high confidence

The demo application's layout templates (app.html.heex and root.html.heex) have been regenerated to align with Phoenix 1.7 conventions. The root layout now includes a CSRF token meta tag, uses the .live\_title component for page titles, and links to static assets via the \~p/ path helper. The app layout has been simplified to a basic structure wrapping inner content.

_demo/lib/demo\web/components/layouts · high confidence

Added HTML fixtures for UI component testing; Added Playwright end-to-end tests for demo components; Added comprehensive test suite for Doggo components; Added test suite for demo web application; Added test support infrastructure for accessibility and fixture generation; Added tests for component label validation and safelist generation; Added tests for story generation and safelist mix tasks; Added unit tests for Doggo UI components; Added unit tests for UI hooks and utilities.

The library and demo app have been updated to require Elixir \~\> 1.17 and upgraded to Phoenix LiveView 1.2.11, Phoenix 1.8.13, and Phoenix Storybook 1.5.0. Development tooling has also been bumped, including Credo to 1.7.19, Dialyxir to 1.4.7, ExDoc to 0.40.3, and Excoveralls to 0.18.5. The demo application's JavaScript dependencies were refreshed, installing esbuild 0.28.2, PostCSS 8.5.28, and Stylelint 17.14.1.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

• CAI 71 → 69 (-1.4)
• Rubric changed (rubric-2026.09.15 → rubric-2026.10.1) — scores are not directly comparable.

• Code Health 64 → 68 (+3.8)
• Architecture 99 → 99 (+0.2)
• Maturity 63 → 63 (+0.0)
• Readiness 92 → 68 (-23.9)
• Security 89 → 90 (+1.2)
• Performance 100 (new)

• Change coupling: combobox.js ↔ combobox.ex (assets/js/hooks/combobox.js)
• Documentation: no usage examples (README.md)
• Duplicated block (15 lines × 2) (lib/doggo/storybook/datetime.ex)
• Duplicated block (23 lines × 2) (lib/doggo/components/icon.ex)
• Duplicated block (26–27 lines × 2) (lib/doggo/storybook/icon.ex)
• Duplicated block (28 lines × 2) (lib/doggo/storybook/icon_sprite.ex)
• Duplicated block (34–41 lines × 2) (lib/doggo/components/datetime.ex)
• Duplicated block (60 lines × 2) (lib/doggo/components/menu.ex)
• TooManyFunctions: Doggo (lib/doggo.ex)
• carousel.initCarousel (cyclomatic 39) (assets/js/hooks/carousel.js)
• initCarousel (cognitive 45) (assets/js/hooks/carousel.js)
• initCombobox (cognitive 75) (assets/js/hooks/combobox.js)
• initCombobox (cyclomatic 63) (assets/js/hooks/combobox.js)
• initTree (cognitive 46) (assets/js/hooks/tree.js)
• initTree (cyclomatic 37) (assets/js/hooks/tree.js)
• menu.initMenu (cyclomatic 16) (assets/js/hooks/menu.js)

• Change coupling: alert_dialog.ex ↔ modal.ex (lib/doggo/components/alert_dialog.ex)
• Change coupling: combobox.js ↔ combobox.ex (assets/js/hooks/combobox.js)
• Change coupling: combobox.js ↔ combobox.ex (assets/js/hooks/combobox.js)
• Change coupling: date.ex ↔ datetime.ex (lib/doggo/components/date.ex)
• Change coupling: icon.ex ↔ icon_sprite.ex (lib/doggo/components/icon.ex)
• Documentation: no architecture or design documentation (README.md)
• Duplicated block (20 lines × 3) (lib/doggo/components/button.ex)
• Duplicated block (21 lines × 2) (lib/doggo/components/button.ex)
• Duplicated block (24 lines × 2) (lib/doggo/components/icon.ex)
• Duplicated block (24 lines × 3) (lib/doggo/components/menu_group.ex)
• Duplicated block (34 lines × 2) (lib/doggo/components/action_bar.ex)
• Duplicated block (37 lines × 2) (lib/doggo/components/alert_dialog.ex)
• Duplicated block (47–51 lines × 2) (lib/doggo/components/menu.ex)
• Duplicated block (47–53 lines × 3) (lib/doggo/components/date.ex)
• Duplicated block (52 lines × 3) (lib/doggo/components/alert.ex)
• Duplicated block (8 lines × 2) (lib/doggo/components/alert_dialog.ex)
• Medium CVE: EEF-[CVE redacted] (mix.lock)
• No assertions: scrolls the slides by keyboard (demo/assets/e2e/carousel.spec.js)
• Semantic overlap and naming inconsistency: localizeTimes and relativeTimes appear to perform the same DOM transformation (converting time elements to human-readable formats). The naming convention is inconsistent (localize vs relative_time namespace, localizeTimes vs relativeTimes), and the intent is nearly identical, suggesting either duplication or a confusing split of concerns.
• Skipped (documented): (unnamed test) (demo/assets/e2e/toggletip.spec.js)
• …and 5 more

• 220 commits — 200 feature/other, 20 fixes

• lib/doggo — 75 commits
• (repo) — 71 commits
• (root) — 25 commits
• assets/css — 17 commits
• demo/assets — 13 commits
• test/doggo — 7 commits
• demo/config — 3 commits
• test/fixtures — 3 commits
• demo/storybook — 2 commits
• .github/workflows — 1 commit
• demo/lib — 1 commit
• demo/mix.exs — 1 commit
• lib/doggo.ex — 1 commit

• fix: Merge pull request #793 from woylie/fix/menu-clickaway-carousel-autorotate
• fix: Merge pull request #808 from woylie/fix-file-input-value
• fix: Merge pull request #817 from woylie/change-tracking-fixes
• fix: Merge pull request #826 from woylie/fix/call-on-cancel-once
• fix: Merge pull request #840 from woylie/fix-code-reload
• fix: fix aria-describedby of field without form field after errors change
• fix: fix change tracking through derived assigns
• fix: fix client-side switch toggling, add styles
• fix: fix danger-subdued
• fix: fix deprecated option
• fix: fix docs
• fix: fix table example
• fix: fix tree issues
• fix: fix: accept rendered content as title
• fix: fix: close menu opened from a menu button when clicking outside
• fix: fix: don't pass value to file input, pass multiple
• fix: fix: put carousel's slide container in the tab order
• fix: fix: remove modal focus ring around tabindex=-1 elements in safari
• fix: fix: run modal on_cancel only once
• fix: fix: stop carousel rotation under point after clicking pause to resume
• …and 200 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

woylie/doggo was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.