tramway 3.1 → 3.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8d6347854d4ed5eb627a0adb496c8f6ffd7d5f5d4948c510586af26f42bc7a3f
-  data.tar.gz: 52d08842b5fd4a6cb025d23e5faf8de44b699e4ed471b8c24049955bfab1a93f
+  metadata.gz: 000e5072249d738796fc44b63dccf1f228bd028eec1b63526450e2c69f5ddea5
+  data.tar.gz: 97b97098ee9f835a6372411cd7dee96ef5e16011f3262479c43e72077a07ec87
 SHA512:
-  metadata.gz: b92182b455ad051e1e08e7020674ff3079acb09afba3e6845ad53b284cdf3fbe6844855b1b948a9066a990e3d669833a70d1cac04b62c15bf6fca22b27b0cbb9
-  data.tar.gz: 0b9a66a185ab03f7f345ff966b16c6b65558e6487356c4b4a7c580decf1c579f7a1e3d8ac9ca2e05fe8859da40abc284c06ea5a43aff7f758b332d618514ef1a
+  metadata.gz: e51c09e468e483f088b6d148804b423e1a092cc6887b0e83b51a13ae8eec458a0abd527d625a40cf963b9e2c98578012c5fddc09c1e9b5278dd1586a2b13d5b0
+  data.tar.gz: 51eaf91dfb27013da6fd432166704dbf7a919c7f1f1a5e86e0ce54b4e76fbb755b72d91069e5546d57222249ae2433dffd432585be913dcf28b3c56bfee65f16

data/README.md

@@ -17,6 +17,7 @@ Codex instruction that points agents to the Tramway skill for Tramway-native cod
   * [Tramway Form](https://github.com/Purple-Magic/tramway#tramway-form)
   * [Tramway Navbar](https://github.com/Purple-Magic/tramway#tramway-navbar)
   * [Tramway Flash](https://github.com/Purple-Magic/tramway#tramway-flash)
+  * [Tramway Tooltip](https://github.com/Purple-Magic/tramway#tramway-tooltip)
   * [Tramway Chat](https://github.com/Purple-Magic/tramway#tramway-chat)
   * [Tramway Table Component](https://github.com/Purple-Magic/tramway#tramway-table-component)
   * [Tailwind-styled forms](https://github.com/Purple-Magic/tramway#tailwind-styled-forms)
@@ -891,6 +892,29 @@ they will be merged into the flash container.
 Use the `type` argument is compatible to [Lantern Color Palette](https://github.com/TrinityMonsters/tramway/blob/main/README.md#lantern-color-palette) or provide a `color:` keyword to set
 the semantic accent explicitly.
 
+### Tramway Tooltip
+
+`tramway_tooltip` renders a dark tooltip around block content with a default minimum width of `min-w-40` and maximum width of `max-w-sm`. Pass `text:` for the tooltip body and `event:` to
+choose when it appears. Supported events are `:hover` and `:onclick`; hover is the default.
+
+```haml
+= tramway_tooltip text: 'Shown on hover' do
+  %span Help
+
+= tramway_tooltip text: 'Shown after click', event: :onclick do
+  %button More info
+```
+
+```erb
+<%= tramway_tooltip text: 'Shown on hover' do %>
+  <span>Help</span>
+<% end %>
+
+<%= tramway_tooltip text: 'Shown after click', event: :onclick do %>
+  <button>More info</button>
+<% end %>
+```
+
 ### Tramway Chat
 
 `tramway_chat` renders the chat experience bundled with Tramway. Provide a chat ID, a list of message hashes, and the URL
@@ -1130,9 +1154,16 @@ Example 3: rendering button
   <%= tramway_button path: '/projects', text: 'Projects', size: :small %>
   ```
 
-* `tramway_badge` renders a Tailwind-styled badge with the provided `text`. Pass a semantic `type` (for example, `:success` or
-  `:danger`) to use the built-in color mappings, or supply a custom Tailwind color family with `color:`. When you opt into a
-  custom color, ensure the corresponding background utilities are available in your Tailwind safelist.
+  Use `tooltip:` to show Tramway's tooltip from the rendered button. The tooltip accepts the same `event:` values as
+  `tramway_tooltip`: `:hover` or `:onclick`.
+
+  ```erb
+  <%= tramway_button path: '/projects', text: 'Projects', tooltip: { text: 'Open projects', event: :hover } %>
+  ```
+
+* `tramway_badge` renders a dark shadcn-style Tailwind badge with the provided `text`. Pass a semantic `type` (for example,
+  `:success` or `:danger`) to use the built-in color mappings, or supply a custom Tailwind color family with `color:`. When
+  you opt into a custom color, ensure the corresponding accent utilities are available in your Tailwind safelist.
 
   ```erb
   <%= tramway_badge text: 'Active', type: :success %>
@@ -1273,14 +1304,14 @@ Example for [importmap-rails](https://github.com/rails/importmap-rails) config
 
 *config/importmap.rb*
 ```ruby
-pin '@tramway/tramway-select', to: 'tramway/tramway-select_controller.js'
+pin '@tramway/tramway', to: 'tramway/tramway.js'
 ```
 
 *app/javascript/controllers/index.js*
 ```js
 import { application } from "controllers/application"
 import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
-import { TramwaySelect } from "@tramway/tramway-select" // importing TramwaySelect controller class
+import { TramwaySelect } from "@tramway/tramway" // importing TramwaySelect controller class
 eagerLoadControllersFrom("controllers", application)
 
 application.register('tramway-select', TramwaySelect) // register TramwaySelect controller class as `tramway-select` stimulus controller

data/app/assets/javascripts/tramway/tramway.js

@@ -0,0 +1,418 @@
+import { Controller } from "@hotwired/stimulus"
+
+class TramwaySelect extends Controller {
+  static targets = ["dropdown", "showSelectedArea", "hiddenInput", "caretDown", "caretUp"]
+
+  static values = {
+    items: Array,
+    dropdownContainer: String,
+    itemContainer: String,
+    selectedItemTemplate: String,
+    dropdownState: String,
+    selectedItems: Array,
+    placeholder: String,
+    selectAsInput: String,
+    value: Array,
+    onChange: String,
+    multiple: Boolean,
+    autocomplete: Boolean,
+    autocompleteInput: String
+  }
+
+  connect() {
+    this.dropdownState = 'closed';
+
+    this.items = JSON.parse(this.element.dataset.items).map((item, index) => {
+      return {
+        index,
+        text: item.text,
+        value: item.value.toString(),
+        selected: false
+      }
+    });
+
+    const initialValues = this.element.dataset.value === undefined ? [] : JSON.parse(this.element.dataset.value);
+
+    initialValues.map((value) => {
+      const itemIndex = this.items.findIndex(x => x.value.toString() === value.toString());
+      this.items[itemIndex].selected = true;
+    })
+
+    this.selectedItems = this.items.filter(item => item.selected);
+
+    this.renderSelectedItems();
+  }
+
+  renderSelectedItems() {
+    const allItems = this.fillTemplate(this.element.dataset.selectedItemTemplate, this.selectedItems)
+
+    let content = allItems;
+
+    if (this.autocomplete() && this.selectedItems.length === 0) {
+      content += this.element.dataset.autocompleteInput;
+    }
+
+    this.showSelectedAreaTarget.innerHTML = content;
+    this.showSelectedAreaTarget.insertAdjacentHTML("beforeEnd", this.input());
+    this.updateInputOptions();
+  }
+
+  fillTemplate(template, items) {
+    return items.map((item) => {
+      return template.replace(/{{text}}/g, item.text).replace(/{{value}}/g, item.value)
+    }).join('')
+  }
+
+  closeOnClickOutside(event) {
+    if (this.dropdownState === 'open' && !this.element.contains(event.target)) {
+      this.closeDropdown();
+    }
+  }
+
+  toggleDropdown() {
+    if (this.dropdownState === 'closed') {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  }
+
+  rerenderItems() {
+    this.closeDropdown();
+    this.openDropdown();
+  }
+
+  openDropdown() {
+    this.dropdownState = 'open';
+    this.dropdownTarget.insertAdjacentHTML("afterend", this.template);
+
+    if (this.dropdown()) {
+      this.dropdown().addEventListener('click', event => event.stopPropagation());
+    }
+
+    this.caretDownTarget.classList.add('hidden');
+    this.caretUpTarget.classList.remove('hidden');
+  }
+
+  dropdown() {
+    return this.element.querySelector('#dropdown');
+  }
+
+  closeDropdown() {
+    this.dropdownState = 'closed';
+
+    if (this.dropdown()) {
+      this.dropdown().remove();
+    }
+
+    const onChange = this.element.dataset.onChange;
+
+    if (onChange) {
+      const [controllerName, actionName] = onChange.split('#');
+      const controller = this.application.controllers.find(controller => controller.identifier === controllerName)
+
+      if (controller) {
+        if (typeof controller[actionName] === 'function') {
+          controller[actionName]({ target: this.element });
+        } else {
+          alert(`Action not found: ${actionName}`); // eslint-disable-line no-undef
+        }
+      } else {
+        alert(`Controller not found: ${controllerName}`); // eslint-disable-line no-undef
+      }
+    }
+
+    this.caretDownTarget.classList.remove('hidden');
+    this.caretUpTarget.classList.add('hidden');
+  }
+
+  get template() {
+    return this.element.dataset.dropdownContainer.replace(
+      /{{content}}/g,
+      this.fillTemplate(this.element.dataset.itemContainer, this.items.filter(item => !item.selected))
+    );
+  }
+
+  toggleItem({ currentTarget }) {
+    const itemIndex = this.items.findIndex(x => x.value === currentTarget.dataset.value);
+    const itemSelectedIndex = this.selectedItems.findIndex(x => x.value === currentTarget.dataset.value);
+
+    if (!this.multiple()) {
+      this.selectedItems = [];
+      this.items.forEach(item => item.selected = false);
+      this.closeDropdown()
+    }
+
+    if (itemSelectedIndex !== -1) {
+      this.selectedItems = this.selectedItems.filter((_, index) => index !== itemSelectedIndex);
+      this.items[itemIndex].selected = false;
+    } else {
+      this.selectedItems.push(this.items[itemIndex]);
+      this.items[itemIndex].selected = true;
+    }
+
+    this.renderSelectedItems();
+
+    if (this.multiple()) {
+      this.rerenderItems();
+    }
+  }
+
+  input() {
+    const placeholder = this.selectedItems.length > 0 ? '' : this.element.dataset.placeholder;
+    return this.element.dataset.selectAsInput.replace(/{{placeholder}}/g, placeholder);
+  }
+
+  updateInputOptions() {
+    this.hiddenInputTarget.innerHTML = '';
+    this.selectedItems.forEach(selected => {
+      const option = document.createElement("option");
+      option.text = selected.text;
+      option.value = selected.value;
+      option.setAttribute("selected", true);
+      this.hiddenInputTarget.append(option);
+    });
+
+    this.hiddenInputTarget.value = this.selectedItems.map(item => item.value);
+  }
+
+  multiple() {
+    return this.element.dataset.multiple == 'true';
+  }
+
+  autocomplete() {
+    return this.element.dataset.autocomplete == 'true';
+  }
+
+  search(event) {
+    const searchTerm = event.target.value.toLowerCase();
+    const filteredItems = this.items.filter(item => item.text.toLowerCase().includes(searchTerm) && !item.selected);
+    const dropdown = this.dropdown();
+
+    if (dropdown) {
+      dropdown.innerHTML = this.fillTemplate(this.element.dataset.itemContainer, filteredItems);
+    }
+  }
+}
+
+class TableRowPreview extends Controller {
+  connect() {
+    this.items = JSON.parse(this.element.dataset.items || '{}');
+    this.attachSwipeGesture();
+  }
+
+  disconnect() {
+    this.detachSwipeGesture();
+  }
+
+  toggle() {
+    const rollUp = this.rollUpElement();
+    if (!rollUp) return;
+
+    rollUp.classList.remove("animate-roll-down");
+    rollUp.classList.add("animate-roll-up");
+
+    if (Object.keys(this.items).length === 0) {
+      rollUp.classList.remove("hidden");
+      return;
+    }
+
+    const existingTable = rollUp.querySelector(".div-table");
+    if (existingTable) {
+      existingTable.remove();
+    }
+
+    const existingTitle = rollUp.querySelector("h3");
+    if (existingTitle) {
+      existingTitle.remove();
+    }
+
+    const titleText = document.createElement("h3");
+
+    titleText.classList.add("text-xl");
+    titleText.classList.add("text-white");
+    titleText.classList.add("py-4");
+    titleText.classList.add("px-4");
+    titleText.textContent = Object.values(this.items)[0];
+
+    const table = this.createTable(this.items);
+
+    rollUp.insertAdjacentElement('afterbegin', table);
+    rollUp.insertAdjacentElement('afterbegin', titleText);
+
+    rollUp.classList.remove("hidden");
+  }
+
+  close() {
+    const rollUp = this.rollUpElement();
+    if (!rollUp) return;
+
+    this.resetDragStyles(rollUp);
+    rollUp.classList.remove("animate-roll-up");
+    rollUp.classList.add("animate-roll-down");
+
+    rollUp.addEventListener("animationend", () => {
+      rollUp.classList.add("hidden");
+      rollUp.classList.remove("animate-roll-down");
+      rollUp.classList.add("animate-roll-up");
+    }, { once: true });
+  }
+
+  rollUpElement() {
+    if (this.element.id === "roll-up") return this.element;
+
+    return this.element.previousElementSibling || document.getElementById("roll-up");
+  }
+
+  attachSwipeGesture() {
+    if (this.element.id !== "roll-up") return;
+
+    this.startY = null;
+    this.startX = null;
+    this.currentDeltaY = 0;
+
+    this.onTouchStart = (event) => {
+      if (this.element.classList.contains("hidden")) return;
+      if (event.touches.length !== 1) return;
+
+      this.startY = event.touches[0].clientY;
+      this.startX = event.touches[0].clientX;
+      this.currentDeltaY = 0;
+      this.element.style.transition = "none";
+    };
+
+    this.onTouchMove = (event) => {
+      if (this.startY === null || event.touches.length !== 1) return;
+
+      const deltaY = event.touches[0].clientY - this.startY;
+      const deltaX = Math.abs(event.touches[0].clientX - this.startX);
+      if (deltaY <= 0 || deltaY <= deltaX) return;
+
+      this.currentDeltaY = deltaY;
+      this.element.style.transform = `translateY(${deltaY}px)`;
+      event.preventDefault();
+    };
+
+    this.onTouchEnd = () => {
+      if (this.startY === null) return;
+
+      const shouldClose = this.currentDeltaY > 80;
+      this.startY = null;
+      this.startX = null;
+
+      if (shouldClose) {
+        this.close();
+        return;
+      }
+
+      this.resetDragStyles(this.element);
+    };
+
+    this.element.addEventListener("touchstart", this.onTouchStart, { passive: true });
+    this.element.addEventListener("touchmove", this.onTouchMove, { passive: false });
+    this.element.addEventListener("touchend", this.onTouchEnd);
+    this.element.addEventListener("touchcancel", this.onTouchEnd);
+  }
+
+  detachSwipeGesture() {
+    if (this.element.id !== "roll-up") return;
+    if (!this.onTouchStart) return;
+
+    this.element.removeEventListener("touchstart", this.onTouchStart);
+    this.element.removeEventListener("touchmove", this.onTouchMove);
+    this.element.removeEventListener("touchend", this.onTouchEnd);
+    this.element.removeEventListener("touchcancel", this.onTouchEnd);
+  }
+
+  resetDragStyles(element) {
+    element.style.transition = "";
+    element.style.transform = "";
+  }
+
+  createTable(items) {
+    const table = document.createElement("div");
+    table.classList.add("div-table");
+    table.classList.add("text-white");
+    table.classList.add("px-2");
+
+    Object.entries(items).forEach(([key, value]) => {
+      const rows = this.createTableRow(key, value);
+
+      rows.forEach((row) => table.appendChild(row));
+    });
+
+    return table;
+  }
+
+  createTableRow(key, value) {
+    const keyRow = document.createElement("div");
+    keyRow.classList.add("div-table-row");
+    keyRow.classList.add("bg-gray-700");
+    keyRow.classList.add("text-white");
+    keyRow.classList.add("px-2");
+    keyRow.classList.add("py-1");
+    keyRow.classList.add("text-xs");
+    keyRow.classList.add("font-semibold");
+    keyRow.textContent = key;
+
+    const valueRow = document.createElement("div");
+    valueRow.classList.add("div-table-row");
+    valueRow.classList.add("bg-gray-800");
+    valueRow.classList.add("px-2");
+    valueRow.classList.add("py-2");
+    valueRow.textContent = value;
+
+    return [keyRow, valueRow];
+  }
+}
+
+class UiCheckbox extends Controller {
+  static targets = ["input", "button", "indicator"]
+
+  connect() {
+    this.sync()
+  }
+
+  toggle(event) {
+    event.preventDefault()
+
+    if (this.inputTarget.disabled) return
+
+    this.inputTarget.click()
+    this.sync()
+  }
+
+  sync() {
+    const checked = this.inputTarget.checked
+    const state = checked ? "checked" : "unchecked"
+
+    this.buttonTarget.setAttribute("aria-checked", checked.toString())
+    this.buttonTarget.dataset.state = state
+    this.buttonTarget.classList.toggle("border-zinc-50", checked)
+    this.buttonTarget.classList.toggle("bg-zinc-50", checked)
+    this.buttonTarget.classList.toggle("text-zinc-950", checked)
+    this.buttonTarget.classList.toggle("border-zinc-800", !checked)
+    this.buttonTarget.classList.toggle("bg-zinc-950", !checked)
+    this.buttonTarget.classList.toggle("text-zinc-50", !checked)
+    this.indicatorTarget.classList.toggle("hidden", !checked)
+    this.buttonTarget.toggleAttribute("disabled", this.inputTarget.disabled)
+  }
+}
+
+class Tooltip extends Controller {
+  static targets = ["panel"]
+
+  toggle(event) {
+    event.stopPropagation()
+
+    this.panelTarget.classList.toggle("hidden")
+  }
+
+  closeOnClickOutside(event) {
+    if (this.element.contains(event.target)) return
+
+    this.panelTarget.classList.add("hidden")
+  }
+}
+
+export { TramwaySelect, TableRowPreview, UiCheckbox, Tooltip }

data/app/components/tramway/badge_component.rb

@@ -4,6 +4,11 @@ module Tramway
   # Default Tramway badge
   #
   class BadgeComponent < Tramway::BaseComponent
+    DEFAULT_BADGE_CLASSES = %w[
+      inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors
+      focus:outline-none focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2 focus:ring-offset-zinc-950
+    ].freeze
+
     option :text
     option :type, optional: true
     option :color, optional: true
@@ -11,12 +16,43 @@ module Tramway
     include Tramway::ColorsMethods
 
     def classes
-      theme_classes(
-        classic: [
-          'flex', 'px-3', 'py-1', 'text-sm', 'font-semibold', 'rounded-full', 'w-fit', 'h-fit',
-          "bg-#{resolved_color}-700", "text-#{resolved_color}-100", 'shadow-md'
-        ]
-      )
+      (DEFAULT_BADGE_CLASSES + color_classes).join(' ')
+    end
+
+    def color_classes
+      return accent_color_classes if color.present?
+
+      mapped_color_classes || accent_color_classes
+    end
+
+    def mapped_color_classes
+      {
+        default: default_color_classes,
+        life: default_color_classes,
+        secondary: secondary_color_classes,
+        inverse: inverse_color_classes
+      }[normalized_type]
+    end
+
+    def default_color_classes
+      %w[border-transparent bg-zinc-50 text-zinc-950 shadow hover:bg-zinc-200]
+    end
+
+    def secondary_color_classes
+      %w[border-transparent bg-zinc-800 text-zinc-50 shadow hover:bg-zinc-800/80]
+    end
+
+    def inverse_color_classes
+      %w[border-zinc-800 bg-zinc-950 text-zinc-50 shadow hover:bg-zinc-900]
+    end
+
+    def accent_color_classes
+      [
+        "border-#{resolved_color}-800",
+        "bg-#{resolved_color}-900/30",
+        "text-#{resolved_color}-400",
+        "hover:bg-#{resolved_color}-900"
+      ]
     end
   end
 end

data/app/components/tramway/button_component.html.haml

@@ -1,27 +1,34 @@
-- if text.present?
-  - if stop_cell_propagation?
-    = helpers.button_to text, path, method:, form: form_options, class: classes, **render_options
-  - else
-    - case @tag
-    - when :a
-      = link_to text, path, class: classes, **render_options
-    - when :button
-      %button{ class: classes, **render_options }
-        = text
-    - when :form
+- button_markup = capture do
+  - if text.present?
+    - if stop_cell_propagation?
       = helpers.button_to text, path, method:, form: form_options, class: classes, **render_options
-- else
-  - if stop_cell_propagation?
-    = helpers.button_to path, method:, class: classes, form: form_options, **render_options do
-      = content
+    - else
+      - case @tag
+      - when :a
+        = link_to text, path, class: classes, **render_options
+      - when :button
+        %button{ class: classes, **render_options }
+          = text
+      - when :form
+        = helpers.button_to text, path, method:, form: form_options, class: classes, **render_options
   - else
-    - case @tag
-    - when :a
-      = link_to path, class: classes, **render_options do
-        = content
-    - when :button
-      %button{ class: classes, **render_options }
-        = content
-    - when :form
+    - if stop_cell_propagation?
       = helpers.button_to path, method:, class: classes, form: form_options, **render_options do
         = content
+    - else
+      - case @tag
+      - when :a
+        = link_to path, class: classes, **render_options do
+          = content
+      - when :button
+        %button{ class: classes, **render_options }
+          = content
+      - when :form
+        = helpers.button_to path, method:, class: classes, form: form_options, **render_options do
+          = content
+
+- if tooltip.present?
+  = render Tramway::TooltipComponent.new(**tooltip_options) do
+    = button_markup
+- else
+  = button_markup

data/app/components/tramway/button_component.rb

@@ -1,6 +1,33 @@
 # frozen_string_literal: true
 
 module Tramway
+  # Tooltip options handling for Tramway button
+  module ButtonComponentTooltip
+    def tooltip_options
+      {
+        text: tooltip_value(:text),
+        event: tooltip_value(:event)
+      }
+    end
+
+    private
+
+    def validate_tooltip!
+      return if tooltip.blank?
+      return if tooltip.is_a?(Hash) && tooltip_key?(:text) && tooltip_key?(:event)
+
+      raise ArgumentError, 'Tooltip must be a hash with :text and :event keys.'
+    end
+
+    def tooltip_key?(key)
+      tooltip.key?(key) || tooltip.key?(key.to_s)
+    end
+
+    def tooltip_value(key)
+      tooltip[key] || tooltip[key.to_s]
+    end
+  end
+
   # Default Tramway button
   #
   class ButtonComponent < BaseComponent
@@ -17,12 +44,15 @@ module Tramway
     option :size, default: -> { :medium }
     option :method, optional: true, default: -> { :get }
     option :tag, optional: true, default: -> {}
+    option :tooltip, optional: true, default: -> {}
     option :options, optional: true, default: -> { {} }
     option :form_options, optional: true, default: -> { {} }
 
     include Tramway::ColorsMethods
+    include Tramway::ButtonComponentTooltip
 
     def before_render
+      validate_tooltip!
       return if tag.present?
 
       @tag = if tag_button?
@@ -67,7 +97,7 @@ module Tramway
 
       case normalized_type
       when :default, :life, :secondary
-        ['hover:bg-zinc-250', 'bg-zinc-50', 'text-zinc-950']
+        ['hover:bg-zinc-200', 'bg-zinc-50', 'text-zinc-950']
       when :inverse
         ['hover:bg-zinc-800', 'bg-zinc-950', 'text-zinc-50', 'border', 'border-zinc-800']
       else

data/app/components/tramway/form/builder.rb

@@ -103,7 +103,7 @@ module Tramway
           Tramway::ButtonComponent.new(
             text: action,
             size: form_size,
-            type: :inverse,
+            type: :default,
             options: sanitized_options.merge(name: :commit, type: :submit)
           ),
           &