Using Phlex::Kit to propose a new PhlexUI syntax

[cirdes]

New format

Instead of writing:

render PhlexUI::Accordion.new  do
  render PhlexUI::Accordion::Item.new do
    render PhlexUI::AccordionDefaultTrigger.new { "Title" }
    render PhlexUI::AccordionDefaultContent.new { "Content" }
  end
end

we will be able to use:

PhlexUI.Accordion do
  PhlexUI.AccordionItem do
    PhlexUI.AccordionDefaultTrigger { "Title" }
    PhlexUI.AccordionDefaultContent { "Content" }
  end
end

Or even better, like how Material UI is abbreviated to Mui, we should abbreviate PhlexUI to Pui for a shorter namespace. I have created a module to forward all requests from Pui to PhlexUI, but in the future, we should rename the PhlexUI module to Pui.

Pui.Accordion do
  Pui.AccordionItem do
    Pui.AccordionDefaultTrigger { "Title" }
    Pui.AccordionDefaultContent { "Content" }
  end
end

Testing

To be able to write better tests, I have created a phlex_context method inside TestHelper to be used for tests. That way, we can write Phlex syntax inside the tests. I also removed the test/accordion because it wasn't testing much. We should be able to test everything inside test/accordion_test.rb.

Drop Builder support

Accordion has a "builder" that can create an accordion easily with a block syntax. @iseth and I agreed that this style shouldn't be promoted because it goes against the customization principle of Shadcn, hiding away parts of the component.

Fix ActiveSupport dependency

Fix the ActiveSupport dependency to allow PhlexUI to be used with Rails 6 and above. Previously, only Rails 6 was allowed.

If we agree with the changes here, I will be able to extend them to all other components! I would like to see a PhlexUI V1 soon in the future.

Thanks @joeldrapper for helping me out with Phlex::Kit

[sethhorsley]

This seems really good. Instead of using Pui i suggest using UI like shad does

[joeldrapper]

Rather than ship a gem that uses the UI namespace, you could continue to use PhlexUI and suggest in the documentation that you can put UI = PhlexUI in an initializer if you want as an alias.