Phx_component_helpers

Overview

PhxComponentHelpers is a library that provides helper functions designed to improve the configurability and extensibility of Phoenix LiveView components from templates. It aims to simplify the development of stateless components by reducing the amount of boilerplate code required. The library offers features such as setting HTML, data, or phx attributes from component assigns, validating mandatory attributes, and extending CSS classes from component assigns. PhxComponentHelpers is intended to work well with the PETAL stack, which consists of Phoenix, Elixir, TailwindCSS, Alpine.js, and LiveView.

Features

• Set HTML, data, or phx attributes: This feature allows you to easily set attributes from component assigns, providing greater flexibility in configuring your components from templates.
• Set multiple attributes at once: You can set a bunch of attributes at once using a custom prefix, such as @click or x-bind for Alpine.js users. This simplifies the process of configuring attributes in your components.
• Validate mandatory attributes: PhxComponentHelpers provides functionality to validate mandatory attributes, ensuring that the necessary attributes are provided to your components.
• Extend CSS classes: You can set and extend CSS classes from component assigns, allowing you to easily customize the styling of your components from templates.
• Forward assigns to child components: PhxComponentHelpers allows you to forward a subset of assigns to child components, enabling more extensive customization and configuration options.

Installation

To install PhxComponentHelpers, follow these steps:

1. Add the following line to your mix.exs file in the deps function:

   {:phx_component_helpers, "~> x.x.x"}
   

   Replace x.x.x with the desired version of PhxComponentHelpers.

2. Run the following command in your terminal to fetch the dependency:

   mix deps.get
   

3. Once the dependency is fetched, you can start using PhxComponentHelpers in your Phoenix LiveView project.

Summary

PhxComponentHelpers is a library that provides helper functions for Phoenix LiveView, making it easier to create configurable and extensible components from templates. It offers features such as setting attributes, validating mandatory attributes, and extending CSS classes from component assigns. The library is designed to work well with the PETAL stack (Phoenix, Elixir, TailwindCSS, Alpine.js, LiveView) and aims to improve developer productivity and consistency in UI and code. Compared to other libraries like Surface, PhxComponentHelpers focuses more on providing syntactic sugar and helper functions rather than being a comprehensive UI framework.