lightning_ui_kit 0.1.1 → 0.1.3

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

@@ -0,0 +1,40 @@
+<%= tag.div data:, 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" do %>
+  <% if @label %>
+    <label data-slot="label" class="text-base/6 text-zinc-950 select-none data-disabled:opacity-50 sm:text-sm/6">
+      <%= @label %>
+    </label>
+  <% end %>
+  <% if @description %>
+    <p data-slot="description" class="text-base/6 text-zinc-500 data-disabled:opacity-50 sm:text-sm/6">
+      <%= @description %>
+    </p>
+  <% end %>
+  <span data-slot="control"
+    class="group relative block w-full before:absolute before:inset-px before:rounded-[calc(var(--radius-lg)-1px)] before:bg-white before:shadow-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-lg after:ring-transparent after:ring-inset focus:after:ring-2 focus:after:ring-blue-500 has-data-disabled:opacity-50 has-data-disabled:before:bg-zinc-950/5 has-data-disabled:before:shadow-none">
+    <% if @form %>
+      <%= @form.select(
+        @name,
+        @options_for_select,
+        {multiple: @multiple},
+        class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold 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 data-disabled:border-zinc-950/20 data-disabled:opacity-100",
+        data: select_data
+      ) %>
+    <% else %>
+      <%= select_tag(
+        @name,
+        @options_for_select,
+        multiple: @multiple,
+        class: "relative block w-full appearance-none rounded-lg py-[calc(--spacing(2.5)-1px)] sm:py-[calc(--spacing(1.5)-1px)] pr-[calc(--spacing(10)-1px)] pl-[calc(--spacing(3.5)-1px)] sm:pr-[calc(--spacing(9)-1px)] sm:pl-[calc(--spacing(3)-1px)] [&_optgroup]:font-semibold 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 data-disabled:border-zinc-950/20 data-disabled:opacity-100",
+        data: select_data
+      ) %>
+    <% end %>
+    <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"><svg class="size-5 stroke-zinc-500 group-has-data-disabled:stroke-zinc-600 sm:size-4 forced-colors:stroke-[CanvasText]" viewBox="0 0 16 16" aria-hidden="true" fill="none"><path d="M5.75 10.75L8 13L10.25 10.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10.25 5.25L8 3L5.75 5.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span>
+  </span>
+  <% 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/select_component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+class LightningUiKit::SelectComponent < LightningUiKit::BaseComponent
+  include LightningUiKit::Errors
+
+  def initialize(name:, form: nil, label: nil, errors: nil, description: nil, disabled: false, options_for_select: [], multiple: false, **options)
+    @name = name
+    @form = form
+    @label = label
+    @errors = errors
+    @multiple = multiple
+    @description = description
+    @disabled = disabled
+    @options_for_select = options_for_select
+    @options = options
+  end
+
+  def data
+    default_data = {
+      slot: "field",
+      action: "click->switch#toggle",
+      controller: "select",
+      disabled: @disabled
+    }
+
+    default_data.merge(@options[:data] || {})
+  end
+
+  def select_data
+    {}.tap do |data|
+      if has_errors?
+        data[:invalid] = "true"
+      end
+    end
+  end
+
+  def control_data
+    {slot: "control"}.merge(@options[:control_data] || {}).tap do |data|
+      if @disabled
+        data[:disabled] = "true"
+      end
+      if has_errors?
+        data[:invalid] = "true"
+      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/sidebar_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class LightningUiKit::SidebarComponent < LightningUiKit::BaseComponent
+end

data/app/components/{lightning_ui → lightning_ui_kit}/skeleton_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::SkeletonComponent < LightningUi::BaseComponent
+class LightningUiKit::SkeletonComponent < LightningUiKit::BaseComponent
   def initialize(with_title: false, lines: 3)
     @with_title = with_title
     @lines = lines

data/app/components/lightning_ui_kit/spinner_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class LightningUiKit::SpinnerComponent < LightningUiKit::BaseComponent
+end

data/app/components/{lightning_ui → lightning_ui_kit}/switch_component.html.erb

@@ -14,7 +14,7 @@
     </p>
   <% end %>
   <%= tag.button(
-    class: "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-changing:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ] bg-zinc-200 ring-1 ring-black/5 ring-inset   data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) ) ) focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500 data-hover:ring-black/15 data-hover:data-checked:ring-(--switch-bg-ring)  ) data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5  [--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] ]  [--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]",
+    class: "group relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-changing:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ] bg-zinc-200 ring-1 ring-black/5 ring-inset   data-checked:bg-(--switch-bg) data-checked:ring-(--switch-bg-ring) ) ) focus:outline-hidden data-focus:outline-2 data-focus:outline-offset-2 data-focus:outline-blue-500 hover:ring-black/15 hover:data-checked:ring-(--switch-bg-ring)  ) data-disabled:bg-zinc-200 data-disabled:opacity-50 data-disabled:data-checked:bg-zinc-200 data-disabled:data-checked:ring-black/5  [--switch-bg-ring:var(--color-zinc-950)]/90 [--switch-bg:var(--color-zinc-900)] ]  [--switch-ring:var(--color-zinc-950)]/90 [--switch-shadow:var(--color-black)]/10 [--switch:white]",
     aria: { checked: @enabled },
     role: "switch",
     type: "button",
@@ -35,4 +35,11 @@
       ) %>
     <% end %>
   <% 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 %>
 </div>

data/app/components/{lightning_ui → lightning_ui_kit}/switch_component.rb

@@ -1,10 +1,13 @@
 # frozen_string_literal: true
 
-class LightningUi::SwitchComponent < LightningUi::BaseComponent
-  def initialize(name:, form: nil, label: nil, description: nil, enabled: false, disabled: false, **options)
+class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
+  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 LightningUi::SwitchComponent < LightningUi::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 → lightning_ui_kit}/table/action_component.rb

@@ -1,4 +1,4 @@
-class LightningUi::Table::ActionComponent < LightningUi::BaseComponent
+class LightningUiKit::Table::ActionComponent < LightningUiKit::BaseComponent
   def initialize(&block)
     @block = block
   end

data/app/components/{lightning_ui → lightning_ui_kit}/table/column_component.rb

@@ -1,4 +1,4 @@
-class LightningUi::Table::ColumnComponent < LightningUi::BaseComponent
+class LightningUiKit::Table::ColumnComponent < LightningUiKit::BaseComponent
   attr_reader :title
 
   def initialize(title, &block)

data/app/components/{lightning_ui → lightning_ui_kit}/table_component.rb

@@ -1,11 +1,11 @@
 # frozen_string_literal: true
 
-class LightningUi::TableComponent < LightningUi::BaseComponent
+class LightningUiKit::TableComponent < LightningUiKit::BaseComponent
   renders_many :columns, ->(title, &block) do
-    LightningUi::Table::ColumnComponent.new(title, &block)
+    LightningUiKit::Table::ColumnComponent.new(title, &block)
   end
   renders_many :actions, ->(&block) do
-    LightningUi::Table::ActionComponent.new(&block)
+    LightningUiKit::Table::ActionComponent.new(&block)
   end
 
   def initialize(data:, actions_title: "Actions", empty_message: "No data available")

data/app/components/{lightning_ui → lightning_ui_kit}/text_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class LightningUi::TextComponent < LightningUi::BaseComponent
+class LightningUiKit::TextComponent < LightningUiKit::BaseComponent
   def initialize(size: :md, **options)
     @size = size
     @options = options

data/app/components/{lightning_ui → 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 → lightning_ui_kit}/textarea_component.rb

@@ -1,7 +1,9 @@
 # frozen_string_literal: true
 
-class LightningUi::TextareaComponent < LightningUi::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)
+class LightningUiKit::TextareaComponent < LightningUiKit::BaseComponent
+  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 LightningUi::TextareaComponent < LightningUi::BaseComponent
     @rows = rows
     @multiple = multiple
     @cols = cols
+    @error = error
     @label = label
     @form = form
     @type = type
@@ -21,7 +24,11 @@ class LightningUi::TextareaComponent < LightningUi::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 LightningUi::TextareaComponent < LightningUi::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/helpers/lightning_ui_kit/application_helper.rb

@@ -0,0 +1,7 @@
+module LightningUiKit
+  module ApplicationHelper
+    def lui_asset_path(file)
+      "/lightning_ui_kit-assets/#{file}".gsub("//", "/")
+    end
+  end
+end

data/app/helpers/{lightning_ui → lightning_ui_kit}/heroicon_helper.rb

@@ -1,6 +1,6 @@
 # require "heroicon"
 
-module LightningUi
+module LightningUiKit
   module HeroiconHelper
     def heroicon(name, variant: Heroicons.configuration.variant, options: {}, path_options: {})
       raw Heroicons::Icon.render(

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 → 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 → lightning_ui_kit}/engine.rb

@@ -1,19 +1,18 @@
 require "view_component"
-require "stimulus-rails"
 
-module LightningUi
+module LightningUiKit
   class Engine < ::Rails::Engine
-    isolate_namespace LightningUi
+    isolate_namespace LightningUiKit
 
     config.autoload_paths = %W[
       #{root}/app/components
       #{root}/app/helpers
     ]
 
-    initializer "lightning_ui.helpers" do
+    initializer "lightning_ui_kit.helpers" do
       ActiveSupport.on_load(:action_controller_base) do
-        helper LightningUi::ApplicationHelper
-        helper LightningUi::HeroiconHelper
+        helper LightningUiKit::ApplicationHelper
+        helper LightningUiKit::HeroiconHelper
       end
     end
   end

data/lib/lightning_ui_kit/version.rb

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

data/lib/lightning_ui_kit.rb

@@ -0,0 +1,6 @@
+require "lightning_ui_kit/version"
+require "lightning_ui_kit/engine"
+
+module LightningUiKit
+  # Your code goes here...
+end