Making best use of Phlex::Kit

[mhenrixon]

For my app/views/components I have the following code:

module Components
  extend Phlex::Kit
end

Which allows me to take the following page component:

module Components
  class Page < Components::Application
    def initialize(id:, max_w: "2xl")
      @id    = id
      @max_w = max_w
      super()
    end

    def view_template(&block)
      section(id: @id, class: "page") do
        div(class: "page-row max-w-#{@max_w}") do
          div(class: "page-col sm:max-w-#{@max_w}") do
            div(class: "p-2 space-y-4 md:space-y-6 sm:p-8 cosmos-prose", &block)
          end
        end
      end
    end
  end
end

and render it with:

module Customers
  class Index < ApplicationView
    include Components

    def initialize(customers:)
      @customers = customers
    end

    def view_template
      Page(id: "customers", max_w: "7xl") do
        h1 class: "title", text: "Customers"
      end
    end
  end
end

Is there an easy way to achieve the same within my customer's namespace? So that I can just do Form(customer: @customer) from the Edit page?

I am not entirely sure how to best structure the code, but I would very much prefer not to have to type out all those render and .new

[joeldrapper]

I guess you could have a Customers kit, but I'd just use Components::CustomerForm.

[mhenrixon]

So if I have my own components kit and I want to use someone else's phlex kit I run into the following situation.

module Components
  extend Phlex::Kit
  
  class Base < Phlex::HTML
    include PhlexyUI
  end
end

I'd be fine with something like:

module Components
  extend Phlex::Kit
  
  class Base < Phlex::HTML
    # 1. This
    include PhlexyUI
  end
  
  # 2. Or this
  class Button < DaisyUI::Button
end

But the only thing I have found to work is to use our Components as a kit and then include DaisyUI in the views, otherwise I have to use render Components::Button or render DaisyUI::Button.

How can I bridge the gap and create a nice way of using both external and internal components?

[mhenrixon]

I want to render PhlexUI::Button() or Button()

[mhenrixon]

If do the following:

class Something::Index < Views::Base
  include PhlexUI
end

I can render both PhlexUI components and our own but now it becomes hard to track where components are coming from.

[mhenrixon]

We have the following code:

module Views
  module Organizations
    module Members
      class Index < Views::Base
        def initialize(organization: Current.organization, member: Current.member)
          @organization = organization
          @member = member
        end

        def view_template
          render Components::Daisy::Card.new(:base_100) do |card|
            figure do
              img(src: "/shoes.webp", alt: "Shoes")
            end
            card.body do
              card.title do
                "Shoes!"
              end
              p do
                "If a dog chews shoes whose shoes does he choose?"
              end
              card.actions class: "justify-end" do
                render Components::Daisy::Button.new :primary do
                  "Buy Now"
                end
              end
            end
          end

          # render Components::RightDrawer.new do |drawer|
          RightDrawer() do |drawer|
            drawer.add_content do
              render Components::Organizations::Members.new(organization: @organization, member: @member)
            end

            drawer.add_side do
              plain "New Member / Edit Member form"
              # render Components::Organizations::Members::Form.new(organization: @organization, member: Member.new)
            end
          end
        end
      end
    end
  end
end

Uses this:

# https://github.com/PhlexyUI/phlexy_ui
# Documentation: https://phlexyui.com/
#
module Components
  class Daisy < Components::Base
    include PhlexyUI
  end
end

But as you can see, I end up having to render Components::Daisy all the time.

[cirdes]

If do the following:

class Something::Index < Views::Base
  include PhlexUI
end

I can render both PhlexUI components and our own but now it becomes hard to track where components are coming from.

that is a really good point!

[joeldrapper]

If you do this, as you suggested, anything inheriting from Components::Base will be able to render components from the PhlexyUI kit directly.

module Components
  extend Phlex::Kit
  
  class Base < Phlex::HTML
    include PhlexyUI
  end
end

Example

class Components::MyComponent < Components::Base
  def view_template
    Card do
      #...
    end
  end
end

If you don’t include the PhlexyUI kit, you can still render its components but you’d need to use the full namespace.

class Components::MyComponent < Components::Base
  def view_template
    PhlexyUI::Card do
      #...
    end
  end
end

[mhenrixon]

Ok, that works for the PhlexyUI flat namespace but how do I handle this:

module Views
  module Organizations
    module Members
      class Index < Views::Base
        def initialize(organization: Current.organization, member: Current.member)
          @organization = organization
          @member = member
        end

        def view_template
          PhlexyUI::Card do |drawer|
            drawer.add_content do
              render Components::Organizations::Members.new(organization: @organization, member: @member)
            end

            drawer.add_side do
              plain "New Member / Edit Member form"
            end
          end
        end
      end
    end
  end
end

Why do I have render Components::Organizations::Members.new(organization: @organization, member: @member) or more importantly, how can I use the short form render for deeply nested Components?

This will be a fairly large project, I can't just flatten stuff as that one folder would be humongous. Was anyone ever in a similar situation? I think partials would be better off in the views folder then so that I can render them without all the namespaces.

[joeldrapper]

To be able to use Components::Organizations::Members() instead of render Components::Organizations::Members.new, the module Components::Organizations would need to extend Phlex::Kit.

[mhenrixon]

Ok, I am clearly doing something wrong. We are working on cleaning up what we have and moving things around. When we are done I will see about the nested modules and check those.

I am guessing, I should create a new file or initializer for those modules to extend phlex kit but I have to investigate. Then I'll provide a PR for the documentation.