Add ViewComponents and Helpers Wrappers for PhlexUI

[cirdes]

Description

To enhance the flexibility and usability of PhlexUI components, I propose adding ViewComponents and Helpers wrappers. This will allow developers to use PhlexUI components with Phlex, ViewComponents, or directly within .erb files, making the library more versatile and accessible across different Ruby on Rails views.

Benefits

• Increased Flexibility: Developers can choose their preferred method for rendering components, whether using Phlex, ViewComponents, or traditional .erb templates.
• Enhanced Usability: Provides a consistent interface for using components across different parts of the application.
• Broader Adoption: By supporting multiple rendering methods, PhlexUI can cater to a wider range of developers and projects.

Implementation

1. Create ViewComponents Wrappers:

   • Define ViewComponents that wrap the existing PhlexUI components, allowing them to be used within the ViewComponent framework.

   • Example:

     # app/components/phlex_ui/button_component.rb
     module PhlexUI
     class ButtonComponent < ViewComponent::Base
      def initialize(...)
        @...
      end
     
      def call
        # Render the PhlexUI button component
        render PhlexUI::Button.new(...)
      end
     end
     end

2. Create Helper Methods:

   • Define helper methods to render PhlexUI components directly within .erb files.
   • Example:

     # app/helpers/phlex_ui_helper.rb
     module PhlexUIHelper
     def phlex_ui_button(...)
      render PhlexUI::Button.new(...)
     end
     end

3. Usage Examples:

   • Using ViewComponents:

     <%= render PhlexUI::ButtonComponent.new(...) %>

   • Using Helpers in .erb Files:

     <%= phlex_ui_button(...) %>

4. Ensure Compatibility:

   • Test the integration to ensure that PhlexUI components render correctly when used with Phlex, ViewComponents, and .erb files.
   • Provide documentation and examples to guide developers on how to use the new wrappers.

[iseth]

Yes check out how polaris does it here: https://github.com/baoagency/polaris_view_components/blob/8fa4a020650d3d56630293245b6c5c1c37b85cd7/app/helpers/polaris/view_helper.rb#L90