lightning_ui_kit 0.1.2 → 0.1.3

data/app/components/lightning_ui_kit/switch_component.rb

@@ -1,10 +1,13 @@
 # frozen_string_literal: true
 
 class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
-  def initialize(name:, form: nil, label: nil, description: nil, enabled: false, disabled: false, **options)
+  include LightningUiKit::Errors
+
+  def initialize(name:, form: nil, label: nil, error: nil, description: nil, enabled: false, disabled: false, **options)
     @name = name
     @form = form
     @label = label
+    @error = error
     @description = description
     @enabled = enabled
     @disabled = disabled
@@ -28,4 +31,12 @@ class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
       end
     end
   end
+
+  def error_data
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
 end

data/app/components/lightning_ui_kit/textarea_component.html.erb

@@ -2,12 +2,12 @@
   class: "[&>[data-slot=label]+[data-slot=control]]:mt-3 [&>[data-slot=label]+[data-slot=description]]:mt-1 [&>[data-slot=description]+[data-slot=control]]:mt-3 [&>[data-slot=control]+[data-slot=description]]:mt-3 [&>[data-slot=control]+[data-slot=error]]:mt-3 *:data-[slot=label]:font-medium",
   data:
 ) do %>
-    <% if @label %>
-      <%= tag.label(
-        @label,
-        class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
-        data: label_data
-      ) %>
+  <% if @label %>
+    <%= tag.label(
+      @label,
+      class: "text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6",
+      data: label_data
+    ) %>
   <% end %>
   <% if @description %>
     <%= tag.p(
@@ -25,7 +25,7 @@
         cols: @cols,
         multiple: @multiple,
         data: input_data,
-        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
         disabled: @disabled,
         autofocus: @autofocus
       ) %>
@@ -39,10 +39,17 @@
         cols: @cols,
         multiple: @multiple,
         data: input_data,
-        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 data-hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:data-hover:border-red-500 dark:data-invalid:data-hover:border-red-500 data-disabled:border-zinc-950/20",
+        class: "relative block w-full appearance-none rounded-lg px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2.5)-1px)] sm:px-[calc(--spacing(3)-1px)] sm:py-[calc(--spacing(1.5)-1px)] text-base/6 text-zinc-950 placeholder:text-zinc-500 sm:text-sm/6 border border-zinc-950/10 hover:border-zinc-950/20 bg-transparent focus:outline-hidden data-invalid:border-red-500 data-invalid:hover:border-red-500 dark:data-invalid:hover:border-red-500 data-disabled:border-zinc-950/20",
         disabled: @disabled,
         autofocus: @autofocus
       ) %>
     </span>
   <% end %>
+  <% if has_errors? %>
+    <%= tag.p(
+      error_messages,
+      class: "text-base/6 text-red-600 data-disabled:opacity-50 sm:text-sm/6",
+      data: error_data
+    ) %>
+  <% end %>
 <% end %>

data/app/components/lightning_ui_kit/textarea_component.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
 class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
-  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, description: nil, disabled: false, multiple: false, rows: 3, cols: nil, **options)
+  include LightningUiKit::Errors
+
+  def initialize(name:, value: nil, autofocus: false, label: nil, form: nil, type: :text, error: nil, description: nil, disabled: false, multiple: false, rows: 3, cols: nil, **options)
     @name = name
     @value = value
     @disabled = disabled
@@ -9,6 +11,7 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
     @rows = rows
     @multiple = multiple
     @cols = cols
+    @error = error
     @label = label
     @form = form
     @type = type
@@ -21,7 +24,11 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
   end
 
   def input_data
-    @options[:input_data] || {}
+    (@options[:input_data] || {}).tap do |data|
+      if has_errors?
+        data[:invalid] = "true"
+      end
+    end
   end
 
   def label_data
@@ -39,4 +46,12 @@ class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
       end
     end
   end
+
+  def error_data
+    {slot: "error"}.merge(@options[:error_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+    end
+  end
 end

data/app/javascript/lightning_ui_kit/controllers/dropzone_controller.js

@@ -0,0 +1,76 @@
+import { Controller } from "@hotwired/stimulus"
+import { DirectUpload } from "@rails/activestorage"
+
+class Upload {
+  constructor(file, controller) {
+    this.controller = controller
+    this.file = file;
+    this.directUpload = new DirectUpload(file, this.controller.inputTarget.dataset.directUploadUrl, this);
+  }
+
+  process() {
+    this.insertUpload();
+
+    this.directUpload.create((error, blob) => {
+      if (error) {
+        const fileContainer = this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`)
+        const status = fileContainer.querySelector("[data-lui-dropzone-target='status']")
+        status.textContent = "Failed. " + error
+        status.classList.add("text-red-500")
+      } else {
+        const hiddenField = document.createElement('input')
+        hiddenField.setAttribute("type", "hidden");
+        hiddenField.setAttribute("value", blob.signed_id);
+        hiddenField.name = this.controller.inputTarget.name
+        this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`).appendChild(hiddenField)
+      }
+    });
+  }
+
+  insertUpload() {
+    const template = this.controller.templateTarget.content.cloneNode(true)
+    template.querySelector('#\\#NEW_FILE').id = `upload_${this.directUpload.id}`
+    template.querySelector("[data-lui-dropzone-target='filename']").textContent = this.file.name
+    template.querySelector("[data-lui-dropzone-target='status']").textContent = "Uploading..."
+
+    this.controller.filesTarget.appendChild(template)
+  }
+
+  directUploadWillStoreFileWithXHR(request) {
+    request.upload.addEventListener("progress", (event) => this.updateProgress(event));
+  }
+
+  updateProgress(event) {
+    const progress = ((event.loaded / event.total) * 100).toFixed(0)
+    const status = progress == 100 ? "Uploaded" : "Uploading..."
+
+    const fileContainer = this.controller.filesTarget.querySelector(`#upload_${this.directUpload.id}`)
+    fileContainer.querySelector("[data-lui-dropzone-target='status']").textContent = status
+    fileContainer.querySelector("[data-lui-dropzone-target='progressbar']").style.width = `${progress}%`
+    fileContainer.querySelector("[data-lui-dropzone-target='percentage-progress']").textContent = `${progress}%`
+  }
+}
+
+export default class extends Controller {
+  static targets = ["input", "template", "files"]
+
+  selectFiles(_event) {
+    this.inputTarget.click()
+  }
+
+  uploadFiles(event) {
+    event.preventDefault();
+    const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+    [...files].forEach(f => new Upload(f, this).process())
+  }
+
+  activate(event) {
+    event.preventDefault()
+  }
+
+  removeFile(event) {
+    event.preventDefault()
+    const container = event.target.closest("[data-lui-dropzone-target='file']")
+    container.remove()
+  }
+}

data/app/javascript/lightning_ui_kit/index.js

@@ -2,6 +2,9 @@ const namespace = 'lui'
 
 import { Application } from "@hotwired/stimulus"
 
+import * as ActiveStorage from "@rails/activestorage"
+ActiveStorage.start()
+
 const application = Application.start()
 window.Stimulus = application
 
@@ -14,6 +17,7 @@ import ModalController from './controllers/modal_controller'
 import RevealController from './controllers/reveal_controller'
 import SwitchController from './controllers/switch_controller'
 import DropdownController from './controllers/dropdown_controller'
+import DropzoneController from './controllers/dropzone_controller'
 
 export function registerLuiControllers(application) {
   application.register(`${namespace}-clipboard`, ClipboardController)
@@ -25,6 +29,7 @@ export function registerLuiControllers(application) {
   application.register(`${namespace}-reveal`, RevealController)
   application.register(`${namespace}-switch`, SwitchController)
   application.register(`${namespace}-dropdown`, DropdownController)
+  application.register(`${namespace}-dropzone`, DropzoneController)
 }
 registerLuiControllers(application)
 

data/config/locales/en.yml

@@ -0,0 +1,3 @@
+en:
+  dropzone:
+    default_message: "Drag and Drop your files here"

data/lib/lightning_ui_kit/engine.rb

@@ -1,5 +1,4 @@
 require "view_component"
-require "stimulus-rails"
 
 module LightningUiKit
   class Engine < ::Rails::Engine

data/lib/lightning_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module LightningUiKit
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lightning_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - Alex Koval
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-25 00:00:00.000000000 Z
+date: 2025-03-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -128,6 +128,11 @@ files:
 - app/components/lightning_ui_kit/dropdown/item_component.rb
 - app/components/lightning_ui_kit/dropdown_component.html.erb
 - app/components/lightning_ui_kit/dropdown_component.rb
+- app/components/lightning_ui_kit/dropzone_component.html.erb
+- app/components/lightning_ui_kit/dropzone_component.rb
+- app/components/lightning_ui_kit/errors.rb
+- app/components/lightning_ui_kit/file_input_component.html.erb
+- app/components/lightning_ui_kit/file_input_component.rb
 - app/components/lightning_ui_kit/input_component.html.erb
 - app/components/lightning_ui_kit/input_component.rb
 - app/components/lightning_ui_kit/link_component.html.erb
@@ -161,12 +166,14 @@ files:
 - app/javascript/lightning_ui_kit/controllers/checkbox_controller.js
 - app/javascript/lightning_ui_kit/controllers/clipboard_controller.js
 - app/javascript/lightning_ui_kit/controllers/dropdown_controller.js
+- app/javascript/lightning_ui_kit/controllers/dropzone_controller.js
 - app/javascript/lightning_ui_kit/controllers/main_controller.js
 - app/javascript/lightning_ui_kit/controllers/modal_controller.js
 - app/javascript/lightning_ui_kit/controllers/reveal_controller.js
 - app/javascript/lightning_ui_kit/controllers/switch_controller.js
 - app/javascript/lightning_ui_kit/index.js
 - config/initializers/heroicons.rb
+- config/locales/en.yml
 - lib/lightning_ui_kit.rb
 - lib/lightning_ui_kit/engine.rb
 - lib/lightning_ui_kit/version.rb