Mishka Chelekom Documentation

The Kit (MishkaChelekom.Kit) is an opt-in Spark DSL that allows you to reuse and restyle generated components without modifying their original files. It creates thin wrappers that delegate to the real component.

Key features:

• Styling: Use customize to define colors, variants, or sizes. Use the ! suffix (e.g., bg-brand-500!) to ensure Tailwind classes are applied verbatim.
• Headless Customization: For components like dialogs, use part to style specific sub-elements using the [&_[data-part=...]] selector pattern.
• Vendoring: Because the Kit is a live macro, you must vendor it into your application for production. Use the CLI to copy the engine to your lib/ directory.

For a full DSL reference, see usage-rules/docs/kit.md.

defmodule MyAppWeb.Kit do
  use MishkaChelekom.Kit

  customize :button do
    color :brand, "bg-brand-500! text-white!"
    default color: :brand
  end

  customize :confirm_dialog do
    from :dialog
    part :popup, "[&_[data-part=popup]]:rounded-2xl"
  end
end

The Drawer component is commonly used for:

1. Mobile Navigation: A large drawer positioned on the left containing navigation links.
2. Shopping Cart: A right positioned drawer showing cart items and a checkout button.
3. Filter Panel: A right positioned drawer containing forms for filtering content.

<%!-- Mobile Navigation Pattern --%>
<.button phx-click={show_drawer("mobile-nav")} class="md:hidden">
  <.icon name="hero-bars-3" />
</.button>

<.drawer id="mobile-nav" position="left" size="large">
  <:header>
    <div class="flex items-center gap-2">
      <img src="/logo.svg" class="h-8" />
      <span class="font-bold">MyApp</span>
    </div>
  </:header>
  <nav class="space-y-1">
    <a :for={item <- @nav_items} href={item.path} class="block p-3 hover:bg-gray-100 rounded">
      {item.label}
    </a>
  </nav>
</.drawer>

<%!-- Shopping Cart Pattern --%>
<.drawer id="cart-drawer" position="right" size="large">
  <:header>Shopping Cart ({@cart_count})</:header>
  <div class="space-y-4">
    <div :for={item <- @cart_items} class="flex gap-4 border-b pb-4">
      <img src={item.image} class="w-16 h-16 object-cover rounded" />
      <div class="flex-1">
        <p class="font-medium">{item.name}</p>
        <p class="text-gray-500">${item.price}</p>
      </div>
    </div>
  </div>
  <div class="mt-auto pt-4 border-t">
    <div class="flex justify-between mb-4">
      <span>Total:</span>
      <span class="font-bold">${@cart_total}</span>
    </div>
    <.button full_width color="primary">Checkout</.button>
  </div>
</.drawer>

<%!-- Filter Panel Pattern --%>
<.drawer id="filters" position="right">
  <:header>Filters</:header>
  <.form for={@filter_form} phx-change="filter">
    <div class="space-y-4">
      <div>
        <label class="font-medium">Category</label>
        <.group_checkbox field={@filter_form[:categories]}>
          <:checkbox :for={cat <- @categories} value={cat.id} label={cat.name} />
        </.group_checkbox>
      </div>
      <div>
        <label class="font-medium">Price Range</label>
        <.range_field field={@filter_form[:price]} min={0} max={1000} />
      </div>
    </div>
    <.button type="submit" class="mt-4">Apply Filters</.button>
  </.form>
</.drawer>

The ScrollArea hook operates on a specific DOM hierarchy. If you are building a custom implementation or debugging, ensure the following structure and classes are present:

Required DOM Structure

<div id="scroll-1" phx-hook="ScrollArea" class="scroll-area-wrapper">
  <!-- Scrollable viewport -->
  <div class="scroll-viewport">
    <div class="scroll-content">
      <!-- Your content here -->
    </div>
  </div>

  <!-- Vertical scrollbar -->
  <div class="scrollbar-y">
    <div class="thumb-y"></div>
  </div>

  <!-- Horizontal scrollbar -->
  <div class="scrollbar-x">
    <div class="thumb-x"></div>
  </div>
</div>

CSS Class Reference

• .scroll-area-wrapper: The main container.
• .scroll-viewport: The scrollable area (native scrollbars are hidden here via scrollbar-width: none and ::-webkit-scrollbar { display: none }).
• .scroll-content: The inner wrapper for your content.
• .scrollbar-y / .scrollbar-x: The tracks for vertical and horizontal scrollbars.
• .thumb-y / .thumb-x: The draggable thumb elements for vertical and horizontal scrollbars.

The Popover component relies on specific data-part attributes to allow the JavaScript engine to identify and control the trigger and the popup.

Component Parts

|data-part="popup"|role="dialog"`, anchored content |

Accessibility (ARIA & Keyboard)

• Trigger: Automatically manages aria-expanded ("true"/"false") and aria-controls (linked to the popup's ID).
• Popup: Uses role="dialog".
• Dismissal:
  • Pressing Escape closes the popup and returns focus to the trigger.
  • Clicking outside the popup closes it.
• Focus Management: When opened, focus automatically moves to the first focusable element inside the popup (e.g., [data-part="item"], [role="menuitem"], [role="option"], a, or button).