aeros 0.0.1 → 0.0.2

data/app/components/aeros/primitives/input_attachments/controller.js

@@ -0,0 +1,357 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "dropzone",
+    "fileInput",
+    "previewsContainer",
+    "hiddenInputs",
+    "progressContainer",
+    "progressBar",
+    "progressText"
+  ];
+
+  static values = {
+    accept: { type: String, default: "*/*" },
+    maxFiles: Number,
+    maxSize: Number,
+    attachments: { type: Array, default: [] },
+    directUploadUrl: String
+  };
+
+  connect() {
+    this.dragCounter = 0;
+    this.renderPreviews();
+    this.renderHiddenInputs();
+  }
+
+  triggerFileInput() {
+    this.fileInputTarget.click();
+  }
+
+  onDragOver(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragCounter++;
+    this.dropzoneTarget.classList.add("border-indigo-400", "bg-indigo-50");
+  }
+
+  onDragLeave(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragCounter--;
+    if (this.dragCounter === 0) {
+      this.dropzoneTarget.classList.remove("border-indigo-400", "bg-indigo-50");
+    }
+  }
+
+  onDrop(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.dragCounter = 0;
+    this.dropzoneTarget.classList.remove("border-indigo-400", "bg-indigo-50");
+
+    const files = Array.from(event.dataTransfer.files);
+    this.handleFiles(files);
+  }
+
+  onFileSelect(event) {
+    const files = Array.from(event.target.files);
+    this.handleFiles(files);
+    event.target.value = "";
+  }
+
+  handleFiles(files) {
+    const validFiles = files.filter(file => this.validateFile(file));
+
+    if (this.maxFilesValue) {
+      const remaining = this.maxFilesValue - this.attachmentsValue.length;
+      if (validFiles.length > remaining) {
+        alert(`You can only add ${remaining} more file(s).`);
+        validFiles.splice(remaining);
+      }
+    }
+
+    if (validFiles.length === 0) return;
+
+    if (this.directUploadUrlValue) {
+      this.uploadFiles(validFiles);
+    } else {
+      this.addFilesLocally(validFiles);
+    }
+  }
+
+  validateFile(file) {
+    if (this.maxSizeValue && file.size > this.maxSizeValue) {
+      alert(`File "${file.name}" is too large. Maximum size is ${this.formatBytes(this.maxSizeValue)}.`);
+      return false;
+    }
+
+    if (this.acceptValue !== "*/*") {
+      const acceptedTypes = this.acceptValue.split(",").map(t => t.trim());
+      const fileType = file.type;
+      const fileExt = "." + file.name.split(".").pop().toLowerCase();
+
+      const isAccepted = acceptedTypes.some(accepted => {
+        if (accepted.startsWith(".")) {
+          return fileExt === accepted.toLowerCase();
+        }
+        if (accepted.endsWith("/*")) {
+          return fileType.startsWith(accepted.replace("/*", "/"));
+        }
+        return fileType === accepted;
+      });
+
+      if (!isAccepted) {
+        alert(`File "${file.name}" is not an accepted file type.`);
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  async uploadFiles(files) {
+    this.showProgress();
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
+      const progress = ((i / files.length) * 100).toFixed(0);
+      this.updateProgress(progress);
+
+      try {
+        const signedId = await this.uploadFile(file);
+        const url = URL.createObjectURL(file);
+
+        this.attachmentsValue = [
+          ...this.attachmentsValue,
+          {
+            id: signedId,
+            url: url,
+            filename: file.name,
+            position: this.attachmentsValue.length,
+            isNew: true
+          }
+        ];
+      } catch (error) {
+        console.error(`Failed to upload ${file.name}:`, error);
+        alert(`Failed to upload "${file.name}".`);
+      }
+    }
+
+    this.hideProgress();
+    this.renderPreviews();
+    this.renderHiddenInputs();
+    this.dispatch("change", { detail: { attachments: this.attachmentsValue } });
+  }
+
+  async uploadFile(file) {
+    return new Promise((resolve, reject) => {
+      const formData = new FormData();
+      formData.append("file", file);
+
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", this.directUploadUrlValue);
+      xhr.setRequestHeader("Accept", "application/json");
+      xhr.setRequestHeader("X-CSRF-Token", this.csrfToken());
+
+      xhr.upload.addEventListener("progress", (event) => {
+        if (event.lengthComputable) {
+          const progress = ((event.loaded / event.total) * 100).toFixed(0);
+          this.updateProgress(progress);
+        }
+      });
+
+      xhr.addEventListener("load", () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          const response = JSON.parse(xhr.responseText);
+          resolve(response.signed_id || response.id);
+        } else {
+          reject(new Error(`Upload failed: ${xhr.status}`));
+        }
+      });
+
+      xhr.addEventListener("error", () => reject(new Error("Upload failed")));
+      xhr.send(formData);
+    });
+  }
+
+  addFilesLocally(files) {
+    files.forEach(file => {
+      const url = URL.createObjectURL(file);
+      const tempId = `temp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+
+      this.attachmentsValue = [
+        ...this.attachmentsValue,
+        {
+          id: tempId,
+          url: url,
+          filename: file.name,
+          position: this.attachmentsValue.length,
+          file: file,
+          isNew: true
+        }
+      ];
+    });
+
+    this.renderPreviews();
+    this.renderHiddenInputs();
+    this.dispatch("change", { detail: { attachments: this.attachmentsValue } });
+  }
+
+  removeAttachment(event) {
+    const index = parseInt(event.currentTarget.dataset.index, 10);
+    const attachment = this.attachmentsValue[index];
+
+    if (attachment?.url?.startsWith("blob:")) {
+      URL.revokeObjectURL(attachment.url);
+    }
+
+    this.attachmentsValue = this.attachmentsValue.filter((_, i) => i !== index);
+    this.reorderPositions();
+    this.renderPreviews();
+    this.renderHiddenInputs();
+    this.dispatch("change", { detail: { attachments: this.attachmentsValue } });
+  }
+
+  reorderPositions() {
+    this.attachmentsValue = this.attachmentsValue.map((att, idx) => ({
+      ...att,
+      position: idx
+    }));
+  }
+
+  onDragStartPreview(event) {
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("text/plain", event.currentTarget.dataset.index);
+    event.currentTarget.classList.add("opacity-50");
+  }
+
+  onDragEndPreview(event) {
+    event.currentTarget.classList.remove("opacity-50");
+  }
+
+  onDragOverPreview(event) {
+    event.preventDefault();
+    event.dataTransfer.dropEffect = "move";
+  }
+
+  onDropPreview(event) {
+    event.preventDefault();
+    const fromIndex = parseInt(event.dataTransfer.getData("text/plain"), 10);
+    const toIndex = parseInt(event.currentTarget.dataset.index, 10);
+
+    if (fromIndex === toIndex) return;
+
+    const attachments = [...this.attachmentsValue];
+    const [moved] = attachments.splice(fromIndex, 1);
+    attachments.splice(toIndex, 0, moved);
+
+    this.attachmentsValue = attachments.map((att, idx) => ({
+      ...att,
+      position: idx
+    }));
+
+    this.renderPreviews();
+    this.renderHiddenInputs();
+    this.dispatch("change", { detail: { attachments: this.attachmentsValue } });
+  }
+
+  renderPreviews() {
+    const html = this.attachmentsValue.map((attachment, index) => {
+      const isImage = this.isImageFile(attachment.filename || attachment.url);
+
+      return `
+        <div class="relative group rounded-lg border border-gray-200 overflow-hidden bg-gray-50 aspect-square cursor-move"
+             draggable="true"
+             data-index="${index}"
+             data-action="dragstart->${this.identifier}#onDragStartPreview dragend->${this.identifier}#onDragEndPreview dragover->${this.identifier}#onDragOverPreview drop->${this.identifier}#onDropPreview">
+          ${isImage
+            ? `<img src="${attachment.url}" alt="${this.escapeHtml(attachment.filename)}" class="w-full h-full object-cover">`
+            : `<div class="w-full h-full flex flex-col items-center justify-center p-2">
+                <svg class="h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+                <span class="mt-1 text-xs text-gray-500 truncate max-w-full">${this.escapeHtml(attachment.filename)}</span>
+              </div>`
+          }
+          <button type="button"
+                  class="absolute top-1 right-1 p-1 bg-white rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity hover:bg-red-50"
+                  data-index="${index}"
+                  data-action="click->${this.identifier}#removeAttachment">
+            <svg class="h-4 w-4 text-gray-500 hover:text-red-500" 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>
+          <div class="absolute bottom-1 left-1 px-1.5 py-0.5 bg-black/50 rounded text-[10px] text-white">
+            ${index + 1}
+          </div>
+        </div>
+      `;
+    }).join("");
+
+    this.previewsContainerTarget.innerHTML = html;
+  }
+
+  renderHiddenInputs() {
+    const baseName = this.element.dataset[`${this.identifier.replace(/-/g, "")}Name`] ||
+                     this.element.querySelector("[name]")?.name?.replace(/\[\]$/, "") ||
+                     "attachments";
+
+    const html = this.attachmentsValue.map((attachment, index) => {
+      if (attachment.file) {
+        return "";
+      }
+      return `<input type="hidden" name="${baseName}[${index}][id]" value="${attachment.id}">
+              <input type="hidden" name="${baseName}[${index}][position]" value="${index}">`;
+    }).join("");
+
+    this.hiddenInputsTarget.innerHTML = html;
+  }
+
+  isImageFile(filename) {
+    if (!filename) return false;
+    const ext = filename.split(".").pop().toLowerCase();
+    return ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp"].includes(ext);
+  }
+
+  showProgress() {
+    if (this.hasProgressContainerTarget) {
+      this.progressContainerTarget.classList.remove("hidden");
+    }
+  }
+
+  hideProgress() {
+    if (this.hasProgressContainerTarget) {
+      this.progressContainerTarget.classList.add("hidden");
+    }
+  }
+
+  updateProgress(percent) {
+    if (this.hasProgressBarTarget) {
+      this.progressBarTarget.style.width = `${percent}%`;
+    }
+    if (this.hasProgressTextTarget) {
+      this.progressTextTarget.textContent = `${percent}%`;
+    }
+  }
+
+  formatBytes(bytes) {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+  }
+
+  escapeHtml(text) {
+    if (!text) return "";
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  csrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.content || "";
+  }
+}

data/app/components/aeros/primitives/input_attachments/styles.css

@@ -0,0 +1,102 @@
+/* Input Attachments */
+.cp-input-attachments {
+}
+
+.cp-input-attachments__container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.cp-input-attachments__dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1.5rem;
+  border: 2px dashed var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  background: var(--ui-input-bg);
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.cp-input-attachments__dropzone:hover {
+  border-color: var(--ui-input-ring);
+  background: var(--ui-muted);
+}
+
+.cp-input-attachments__dropzone--dragging {
+  border-color: var(--ui-input-ring);
+  background: var(--ui-muted);
+}
+
+.cp-input-attachments__dropzone-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: center;
+}
+
+.cp-input-attachments__icon {
+  width: 2rem;
+  height: 2rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-attachments__text {
+  font-size: 0.875rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-attachments__link {
+  font-weight: 500;
+  color: var(--ui-primary);
+}
+
+.cp-input-attachments__hint {
+  font-size: 0.75rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-attachments__file-input {
+  display: none;
+}
+
+.cp-input-attachments__progress {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.cp-input-attachments__progress--hidden {
+  display: none;
+}
+
+.cp-input-attachments__progress-info {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  color: var(--ui-muted-foreground);
+}
+
+.cp-input-attachments__progress-track {
+  height: 0.375rem;
+  background: var(--ui-accent);
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.cp-input-attachments__progress-bar {
+  height: 100%;
+  background: var(--ui-primary);
+  transition: width 0.3s ease;
+}
+
+.cp-input-attachments__previews {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+  gap: 0.75rem;
+}

data/app/components/aeros/primitives/input_color/component.html.erb

@@ -0,0 +1,24 @@
+<div class="cp-input-color <%= 'cp-input-color--disabled' if disabled %>">
+  <div class="cp-input-color__container">
+    <input
+      type="color"
+      id="<%= input_id %>"
+      name="<%= name %>"
+      value="<%= value %>"
+      class="cp-input-color__input <%= size_class %>"
+      <%= 'disabled' if disabled %>
+      <% data.each do |key, val| %>
+        data-<%= key.to_s.dasherize %>="<%= val %>"
+      <% end %>
+    />
+    <% if label %>
+      <label for="<%= input_id %>" class="cp-input-color__label">
+        <%= label %>
+      </label>
+    <% end %>
+  </div>
+
+  <% if helper_text %>
+    <p class="cp-input-color__helper"><%= helper_text %></p>
+  <% end %>
+</div>

data/app/components/aeros/primitives/input_color/component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Aeros::Primitives::InputColor
+  class Component < ::Aeros::ApplicationViewComponent
+    prop :name, description: "Input name attribute"
+    prop :id, description: "Input id", optional: true
+    prop :value, description: "Current color value", default: -> { "#000000" }
+    prop :label, description: "Label text", optional: true
+    prop :helper_text, description: "Helper text", optional: true
+    prop :disabled, description: "Disabled state", default: -> { false }
+    prop :data, description: "Data attributes", default: -> { {} }
+    prop :size, description: "Size variant", values: [:small, :default, :large], default: -> { :default }
+
+    examples("Input Color", description: "Color picker input") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "color"
+      end
+
+      b.example(:with_label, title: "With Label") do |e|
+        e.preview name: "brand_color", label: "Brand Color", value: "#6366f1"
+      end
+
+      b.example(:sizes, title: "Sizes") do |e|
+        e.preview name: "small", size: :small
+        e.preview name: "default", size: :default
+        e.preview name: "large", size: :large
+      end
+    end
+
+    def input_id
+      id || name
+    end
+
+    def size_class
+      case size.to_sym
+      when :small then "cp-input-color--small"
+      when :large then "cp-input-color--large"
+      else ""
+      end
+    end
+  end
+end

data/app/components/aeros/primitives/input_color/styles.css

@@ -0,0 +1,64 @@
+/* Input Color */
+.cp-input-color {
+}
+
+.cp-input-color--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.cp-input-color__container {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.cp-input-color__input {
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border: 1px solid var(--ui-input-border);
+  border-radius: var(--ui-input-radius, 0.375rem);
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.cp-input-color__input::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.cp-input-color__input::-webkit-color-swatch {
+  border: none;
+  border-radius: calc(var(--ui-input-radius, 0.375rem) - 1px);
+}
+
+.cp-input-color__input::-moz-color-swatch {
+  border: none;
+  border-radius: calc(var(--ui-input-radius, 0.375rem) - 1px);
+}
+
+.cp-input-color__input:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--ui-background), 0 0 0 4px var(--ui-ring);
+}
+
+.cp-input-color__input--small {
+  width: 2rem;
+  height: 2rem;
+}
+
+.cp-input-color__input--large {
+  width: 3rem;
+  height: 3rem;
+}
+
+.cp-input-color__label {
+  font-size: 0.875rem;
+  color: var(--ui-foreground);
+}
+
+.cp-input-color__helper {
+  margin-top: 0.25rem;
+  font-size: 0.875rem;
+  color: var(--ui-muted-foreground);
+}

data/app/components/aeros/primitives/input_password/component.html.erb

@@ -0,0 +1,43 @@
+<div class="cp-input-password">
+  <%= render Aeros::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-password__field" data-controller="<%= controller_name %>">
+      <input
+        type="password"
+        id="<%= id %>"
+        name="<%= name %>"
+        value="<%= value %>"
+        placeholder="<%= placeholder %>"
+        autocomplete="<%= autocomplete %>"
+        class="cp-input-password__input"
+        data-<%= controller_name %>-target="input"
+        <%= 'disabled' if disabled %>
+        <%= 'required' if required %>
+        <% data.each do |key, val| %>
+          data-<%= key.to_s.dasherize %>="<%= val %>"
+        <% end %>
+      />
+      <% if show_toggle %>
+        <button
+          type="button"
+          class="cp-input-password__toggle"
+          data-action="click-><%= controller_name %>#toggle"
+          tabindex="-1"
+        >
+          <span data-<%= controller_name %>-target="showIcon">
+            <%= lucide_icon("eye", class: "cp-input-password__toggle-icon") %>
+          </span>
+          <span data-<%= controller_name %>-target="hideIcon" class="cp-input-password__toggle-icon--hidden">
+            <%= lucide_icon("eye-off", class: "cp-input-password__toggle-icon") %>
+          </span>
+        </button>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/app/components/aeros/primitives/input_password/component.rb

@@ -0,0 +1,20 @@
+module Aeros::Primitives::InputPassword
+  class Component < ::Aeros::FormBuilder::BaseComponent
+    prop :autocomplete, description: "Autocomplete attribute", default: -> { "current-password" }
+    prop :show_toggle, description: "Show password visibility toggle", default: -> { true }
+
+    examples("Input Password", description: "Password input with visibility toggle") do |b|
+      b.example(:default, title: "Default") do |e|
+        e.preview name: "password"
+      end
+
+      b.example(:with_label, title: "With Label") do |e|
+        e.preview name: "password", label: "Password"
+      end
+
+      b.example(:no_toggle, title: "Without Toggle") do |e|
+        e.preview name: "password", show_toggle: false
+      end
+    end
+  end
+end