View Source Turboprop (Turboprop v0.1.0)
A toolkit to build beautiful, accessible components for Phoenix using Tailwind and Zag.
Parts
Turboprop consists of multiple parts, each with their own purpose in building your component library.
Turboprop Hooks
Turboprop Hooks allow you add a ton of accessibility features to your components by simply adding a hook and a few data attributes to them.
This includes:
- Keyboard interactions
- Focus management
- ARIA attributes
You can either install and use them through the hex.pm dependency and some helpers we offer to add the relevant attributes to a component, or install them directly through npm and adding the attributes yourself.
As an example, this renders a fully accessible dropdown menu:
<div {menu()}>
<button
class="rounded-md bg-blue-500 px-3 py-1.5 text-sm text-white shadow-sm hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
{menu_trigger()}
>
Menu
</button>
<div {menu_positioner()}>
<div
class="z-10 w-48 text-sm origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
{menu_content()}
>
<Phoenix.Component.link navigate="/link" class="block px-4 py-2 outline-0 data-[highlighted]:bg-gray-100" {menu_item()}>
Link
</Phoenix.Component.link>
<a href="/anchor" id="test" class="block px-4 py-2 outline-0 data-[highlighted]:bg-gray-100" {menu_item()}>Anchor</a>
</div>
</div>
</div>
</div>
Turboprop Merge
Turboprop Merge allows you to easily merge a list of Tailwind Classes to avoid style conflicts.
Imagine this component:
attr :class, :string, doc: "Class override"
def button(assigns) do
~H"""
<button class={["bg-black px-3 py-1.5 text-sm", @class]}>Click me!</button>
"""
end
And imagine wanting to make the text a little bigger as a one-off. You've already added a @class
attribute, but rendering the component
with class="text-lg"
will lead to an HTML output of "bg-black px-3 py-1.5 text-sm text-lg"
, with two competing font size classes.
Now, replace the class
attribute with class={merge(["bg-black px-3 py-1.5 text-sm", @class])}
and you will magically get
"bg-black px-3 py-1.5 text-lg"
.
Prior art
This type of library exists in the JavaScript world already, in multiple flavors. Turboprop Merge was heavily inspired especially by tailwind-merge, so much so that we copied their tests as a starting point.