aeno 0.0.3

data/app/components/aeno/primitives/input_tagging/controller.js

@@ -0,0 +1,326 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "search",
+    "dropdown",
+    "selectedContainer",
+    "hiddenInputs",
+    "optionsContainer",
+    "createOption",
+    "createLabel",
+    "empty",
+    "loading",
+    "tag"
+  ];
+
+  static values = {
+    tagsUrl: String,
+    createUrl: String,
+    allowCreate: { type: Boolean, default: true },
+    maxTags: Number,
+    selected: { type: Array, default: [] }
+  };
+
+  connect() {
+    this.closeDropdown = this.closeDropdown.bind(this);
+    this.availableTags = [];
+    this.highlightedIndex = -1;
+
+    if (this.tagsUrlValue) {
+      this.loadTags();
+    }
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this.closeDropdown);
+  }
+
+  async loadTags() {
+    if (!this.tagsUrlValue) return;
+
+    this.showLoading();
+
+    try {
+      const response = await fetch(this.tagsUrlValue, {
+        headers: { "Accept": "application/json" }
+      });
+      const data = await response.json();
+      this.availableTags = Array.isArray(data) ? data : (data.tags || []);
+    } catch (error) {
+      console.error("Failed to load tags:", error);
+      this.availableTags = [];
+    }
+
+    this.hideLoading();
+  }
+
+  onFocus() {
+    this.openDropdown();
+    this.filterOptions();
+  }
+
+  onSearchInput() {
+    this.openDropdown();
+    this.filterOptions();
+  }
+
+  onKeydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.highlightNext();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.highlightPrevious();
+        break;
+      case "Enter":
+        event.preventDefault();
+        this.selectHighlighted();
+        break;
+      case "Escape":
+        this.closeDropdown();
+        this.searchTarget.blur();
+        break;
+      case "Backspace":
+        if (this.searchTarget.value === "" && this.selectedValue.length > 0) {
+          this.removeLastTag();
+        }
+        break;
+      case "Tab":
+        this.closeDropdown();
+        break;
+    }
+  }
+
+  filterOptions() {
+    const query = this.searchTarget.value.toLowerCase().trim();
+    const filtered = this.availableTags.filter(tag => {
+      const tagName = typeof tag === "string" ? tag : tag.name;
+      const isNotSelected = !this.selectedValue.includes(tagName);
+      const matchesQuery = query === "" || tagName.toLowerCase().includes(query);
+      return isNotSelected && matchesQuery;
+    });
+
+    this.renderOptions(filtered);
+    this.updateCreateOption(query, filtered);
+    this.updateEmptyState(filtered, query);
+    this.highlightedIndex = -1;
+  }
+
+  renderOptions(tags) {
+    const html = tags.map((tag, index) => {
+      const tagName = typeof tag === "string" ? tag : tag.name;
+      return `
+        <button type="button"
+                class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none"
+                data-action="click->${this.identifier}#selectOption"
+                data-tag-name="${this.escapeHtml(tagName)}"
+                data-index="${index}">
+          ${this.escapeHtml(tagName)}
+        </button>
+      `;
+    }).join("");
+
+    this.optionsContainerTarget.innerHTML = html;
+  }
+
+  updateCreateOption(query, filteredTags) {
+    if (!this.allowCreateValue || !this.hasCreateOptionTarget) return;
+
+    const exactMatch = filteredTags.some(tag => {
+      const tagName = typeof tag === "string" ? tag : tag.name;
+      return tagName.toLowerCase() === query.toLowerCase();
+    });
+
+    const alreadySelected = this.selectedValue.some(
+      tag => tag.toLowerCase() === query.toLowerCase()
+    );
+
+    const showCreate = query.length > 0 && !exactMatch && !alreadySelected;
+
+    this.createOptionTarget.classList.toggle("hidden", !showCreate);
+    if (showCreate && this.hasCreateLabelTarget) {
+      this.createLabelTarget.textContent = query;
+    }
+  }
+
+  updateEmptyState(filtered, query) {
+    if (!this.hasEmptyTarget) return;
+
+    const hasCreateOption = this.allowCreateValue && query.length > 0;
+    const showEmpty = filtered.length === 0 && !hasCreateOption;
+    this.emptyTarget.classList.toggle("hidden", !showEmpty);
+  }
+
+  openDropdown() {
+    this.dropdownTarget.classList.remove("hidden");
+    document.addEventListener("click", this.closeDropdown);
+  }
+
+  closeDropdown(event) {
+    if (event && this.element.contains(event.target)) return;
+    this.dropdownTarget.classList.add("hidden");
+    document.removeEventListener("click", this.closeDropdown);
+    this.highlightedIndex = -1;
+  }
+
+  selectOption(event) {
+    const tagName = event.currentTarget.dataset.tagName;
+    this.addTag(tagName);
+    this.searchTarget.value = "";
+    this.filterOptions();
+    this.searchTarget.focus();
+  }
+
+  async createTag() {
+    const tagName = this.searchTarget.value.trim();
+    if (!tagName) return;
+
+    if (this.createUrlValue) {
+      try {
+        const response = await fetch(this.createUrlValue, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "Accept": "application/json",
+            "X-CSRF-Token": this.csrfToken()
+          },
+          body: JSON.stringify({ tag: { name: tagName } })
+        });
+
+        if (response.ok) {
+          const newTag = await response.json();
+          const newTagName = typeof newTag === "string" ? newTag : (newTag.name || tagName);
+          this.availableTags.push(newTagName);
+        }
+      } catch (error) {
+        console.error("Failed to create tag:", error);
+      }
+    }
+
+    this.addTag(tagName);
+    this.searchTarget.value = "";
+    this.filterOptions();
+    this.searchTarget.focus();
+  }
+
+  addTag(tagName) {
+    if (this.selectedValue.includes(tagName)) return;
+    if (this.maxTagsValue && this.selectedValue.length >= this.maxTagsValue) return;
+
+    this.selectedValue = [...this.selectedValue, tagName];
+    this.renderSelectedTags();
+    this.renderHiddenInputs();
+    this.dispatch("change", { detail: { tags: this.selectedValue } });
+  }
+
+  removeTag(event) {
+    const tagElement = event.currentTarget.closest("[data-tag-name]");
+    const tagName = tagElement.dataset.tagName;
+
+    this.selectedValue = this.selectedValue.filter(t => t !== tagName);
+    this.renderSelectedTags();
+    this.renderHiddenInputs();
+    this.filterOptions();
+    this.dispatch("change", { detail: { tags: this.selectedValue } });
+  }
+
+  removeLastTag() {
+    if (this.selectedValue.length === 0) return;
+    this.selectedValue = this.selectedValue.slice(0, -1);
+    this.renderSelectedTags();
+    this.renderHiddenInputs();
+    this.filterOptions();
+    this.dispatch("change", { detail: { tags: this.selectedValue } });
+  }
+
+  renderSelectedTags() {
+    const html = this.selectedValue.map(tag => `
+      <span class="inline-flex items-center gap-x-1 rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10"
+            data-${this.identifier}-target="tag"
+            data-tag-name="${this.escapeHtml(tag)}">
+        ${this.escapeHtml(tag)}
+        <button type="button"
+                class="group relative -mr-1 h-3.5 w-3.5 rounded-sm hover:bg-indigo-600/20"
+                data-action="click->${this.identifier}#removeTag">
+          <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </span>
+    `).join("");
+
+    this.selectedContainerTarget.innerHTML = html;
+  }
+
+  renderHiddenInputs() {
+    const baseName = this.element.querySelector("input[type='hidden']")?.name ||
+                     this.searchTarget.name?.replace(/\[\]$/, "") + "[]";
+    const inputName = baseName.endsWith("[]") ? baseName : baseName + "[]";
+
+    const html = this.selectedValue.map(tag =>
+      `<input type="hidden" name="${inputName}" value="${this.escapeHtml(tag)}">`
+    ).join("");
+
+    this.hiddenInputsTarget.innerHTML = html;
+  }
+
+  highlightNext() {
+    const options = this.optionsContainerTarget.querySelectorAll("button");
+    if (options.length === 0) return;
+
+    this.highlightedIndex = Math.min(this.highlightedIndex + 1, options.length - 1);
+    this.updateHighlight(options);
+  }
+
+  highlightPrevious() {
+    const options = this.optionsContainerTarget.querySelectorAll("button");
+    if (options.length === 0) return;
+
+    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+    this.updateHighlight(options);
+  }
+
+  updateHighlight(options) {
+    options.forEach((opt, idx) => {
+      opt.classList.toggle("bg-gray-100", idx === this.highlightedIndex);
+    });
+
+    if (this.highlightedIndex >= 0 && options[this.highlightedIndex]) {
+      options[this.highlightedIndex].scrollIntoView({ block: "nearest" });
+    }
+  }
+
+  selectHighlighted() {
+    const options = this.optionsContainerTarget.querySelectorAll("button");
+    if (this.highlightedIndex >= 0 && this.highlightedIndex < options.length) {
+      options[this.highlightedIndex].click();
+    } else if (this.allowCreateValue && this.searchTarget.value.trim()) {
+      this.createTag();
+    }
+  }
+
+  showLoading() {
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.classList.remove("hidden");
+    }
+  }
+
+  hideLoading() {
+    if (this.hasLoadingTarget) {
+      this.loadingTarget.classList.add("hidden");
+    }
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  csrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.content || "";
+  }
+}

data/app/components/aeno/primitives/input_tagging/styles.css

@@ -0,0 +1,148 @@
+/* Input Tagging */
+.cp-input-tagging {
+}
+
+.cp-input-tagging__container {
+  position: relative;
+}
+
+.cp-input-tagging__tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+  min-height: 1.75rem;
+}
+
+.cp-input-tagging__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  background: var(--ui-accent);
+  color: var(--ui-accent-foreground);
+  border-radius: var(--ui-radius-sm);
+}
+
+.cp-input-tagging__tag-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: 0.125rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.7;
+  border-radius: 2px;
+}
+
+.cp-input-tagging__tag-remove:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.cp-input-tagging__tag-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.cp-input-tagging__search {
+  position: relative;
+}
+
+.cp-input-tagging__input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-input-fg);
+  background: var(--ui-input-bg);
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cp-input-tagging__input:focus {
+  border-color: var(--ui-input-border-focus);
+  box-shadow: 0 0 0 1px var(--ui-input-ring);
+}
+
+.cp-input-tagging__dropdown {
+  position: absolute;
+  z-index: 10;
+  margin-top: 0.25rem;
+  width: 100%;
+  max-height: 15rem;
+  overflow: auto;
+  background: var(--ui-popover);
+  border: 1px solid var(--ui-border);
+  border-radius: var(--ui-radius);
+  box-shadow: var(--ui-shadow-lg);
+}
+
+.cp-input-tagging__dropdown--hidden {
+  display: none;
+}
+
+.cp-input-tagging__loading {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-tagging__loading--hidden {
+  display: none;
+}
+
+.cp-input-tagging__options {
+  padding: 0.25rem 0;
+}
+
+.cp-input-tagging__create {
+  border-top: 1px solid var(--ui-border);
+}
+
+.cp-input-tagging__create--hidden {
+  display: none;
+}
+
+.cp-input-tagging__create-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--ui-foreground);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.cp-input-tagging__create-btn:hover {
+  background: var(--ui-accent);
+}
+
+.cp-input-tagging__create-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.cp-input-tagging__empty {
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-tagging__empty--hidden {
+  display: none;
+}

data/app/components/aeno/primitives/input_text/component.html.erb

@@ -0,0 +1,25 @@
+<div class="cp-input-text">
+  <%= render Aeno::Primitives::InputWrapper::Component.new(
+      label: label,
+      helper_text: helper_text,
+      error_text: error_text,
+      name: name,
+      id: id,
+      disabled: disabled,
+      required: required) do %>
+    <input
+      type="<%= type || 'text' %>"
+      id="<%= id %>"
+      name="<%= name %>"
+      value="<%= value %>"
+      placeholder="<%= placeholder %>"
+      autocomplete="<%= autocomplete %>"
+      class="cp-input-text__input <%= 'cp-input-text__input--error' if error_text %>"
+      <%= 'disabled' if disabled %>
+      <%= 'required' if required %>
+      <% data.each do |key, val| %>
+        data-<%= key.to_s.dasherize %>="<%= val %>"
+      <% end %>
+    />
+  <% end %>
+</div>

data/app/components/aeno/primitives/input_text/component.rb

@@ -0,0 +1,20 @@
+module Aeno::Primitives::InputText
+  class Component < ::Aeno::FormBuilder::BaseComponent
+    prop :autocomplete, description: "Autocomplete attribute", optional: true
+
+    examples("Input Text", description: "Single-line text input") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "username"
+      end
+
+      b.example(:with_label, title: "With Label") do |e|
+        e.preview name: "email", label: "Email", placeholder: "you@example.com"
+      end
+
+      b.example(:states, title: "States") do |e|
+        e.preview name: "disabled_field", label: "Disabled", disabled: true
+        e.preview name: "required_field", label: "Required", required: true
+      end
+    end
+  end
+end

data/app/components/aeno/primitives/input_text/styles.css

@@ -0,0 +1,38 @@
+/* Input Text */
+.cp-input-text {
+}
+
+.cp-input-text__input {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-input-fg);
+  background: var(--ui-input-bg);
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cp-input-text__input::placeholder {
+  color: var(--ui-input-placeholder);
+}
+
+.cp-input-text__input:focus {
+  border-color: var(--ui-input-border-focus);
+  box-shadow: 0 0 0 1px var(--ui-input-ring);
+}
+
+.cp-input-text__input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cp-input-text__input--error {
+  border-color: var(--ui-destructive);
+}
+
+.cp-input-text__input--error:focus {
+  box-shadow: 0 0 0 1px var(--ui-destructive);
+}

data/app/components/aeno/primitives/input_text_area/component.html.erb

@@ -0,0 +1,23 @@
+<div class="cp-input-text-area">
+  <%= render Aeno::Primitives::InputWrapper::Component.new(
+      label: label,
+      helper_text: helper_text,
+      error_text: error_text,
+      name: name,
+      id: id,
+      disabled: disabled,
+      required: required) do %>
+    <textarea
+      id="<%= id %>"
+      name="<%= name %>"
+      placeholder="<%= placeholder %>"
+      rows="<%= rows %>"
+      class="cp-input-text-area__textarea"
+      <%= 'disabled' if disabled %>
+      <%= 'required' if required %>
+      <% data.each do |key, val| %>
+        data-<%= key.to_s.dasherize %>="<%= val %>"
+      <% end %>
+    ><%= value %></textarea>
+  <% end %>
+</div>

data/app/components/aeno/primitives/input_text_area/component.rb

@@ -0,0 +1,19 @@
+module Aeno::Primitives::InputTextArea
+  class Component < ::Aeno::FormBuilder::BaseComponent
+    prop :rows, description: "Number of visible rows", default: -> { 4 }
+
+    examples("Input Text Area", description: "Multi-line text input") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "description"
+      end
+
+      b.example(:with_label, title: "With Label") do |e|
+        e.preview name: "bio", label: "Bio", placeholder: "Tell us about yourself"
+      end
+
+      b.example(:rows, title: "Custom Rows") do |e|
+        e.preview name: "content", rows: 8
+      end
+    end
+  end
+end

data/app/components/aeno/primitives/input_text_area/styles.css

@@ -0,0 +1,30 @@
+/* Input Text Area */
+.cp-input-text-area {
+}
+
+.cp-input-text-area__textarea {
+  display: block;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  color: var(--ui-input-fg);
+  background: var(--ui-input-bg);
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  outline: none;
+  resize: vertical;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.cp-input-text-area__textarea::placeholder {
+  color: var(--ui-input-placeholder);
+}
+
+.cp-input-text-area__textarea:focus {
+  border-color: var(--ui-input-border-focus);
+  box-shadow: 0 0 0 1px var(--ui-input-ring);
+}
+
+.cp-input-text-area__textarea--error {
+  border-color: var(--ui-destructive);
+}

data/app/components/aeno/primitives/input_text_area_ai/component.html.erb

@@ -0,0 +1,51 @@
+<div class="cp-input-text-area-ai">
+  <%= render Aeno::Primitives::InputWrapper::Component.new(
+      label: label,
+      helper_text: helper_text,
+      error_text: error_text,
+      name: name,
+      id: id,
+      disabled: disabled,
+      required: required) do %>
+    <div class="cp-input-text-area-ai__container"
+         data-controller="<%= controller_name %>"
+         <%= stimulus_values.map { |k, v| "data-#{k.dasherize}=\"#{ERB::Util.html_escape(v)}\"" }.join(" ").html_safe %>>
+
+      <textarea
+        id="<%= id %>"
+        name="<%= name %>"
+        placeholder="<%= placeholder %>"
+        rows="<%= rows %>"
+        class="cp-input-text-area-ai__textarea"
+        data-<%= controller_name %>-target="textarea"
+        <%= 'disabled' if disabled %>
+        <%= 'required' if required %>
+        <% data.each do |key, val| %>
+          data-<%= key.to_s.dasherize %>="<%= val %>"
+        <% end %>
+      ><%= value %></textarea>
+
+      <div class="cp-input-text-area-ai__actions">
+        <button type="button"
+                class="cp-input-text-area-ai__ai-btn"
+                data-<%= controller_name %>-target="aiButton"
+                data-action="click-><%= controller_name %>#generateAi"
+                <%= 'disabled' if disabled %>>
+          <span data-<%= controller_name %>-target="buttonIcon">
+            <%= lucide_icon("sparkles", class: "cp-input-text-area-ai__ai-icon") %>
+          </span>
+          <span data-<%= controller_name %>-target="buttonSpinner" class="cp-input-text-area-ai__spinner--hidden">
+            <%= ui("spinner", size: :xs) %>
+          </span>
+          <span data-<%= controller_name %>-target="buttonLabel"><%= ai_button_label %></span>
+        </button>
+      </div>
+
+      <div class="cp-input-text-area-ai__streaming cp-input-text-area-ai__streaming--hidden"
+           data-<%= controller_name %>-target="streamingIndicator">
+        <%= ui("spinner", size: :xs) %>
+        <span>Generating...</span>
+      </div>
+    </div>
+  <% end %>
+</div>