better_ui 0.7.2 → 0.9.0

data/app/components/better_ui/dialog/alert_component/alert_component.html.erb

@@ -0,0 +1,61 @@
+<%= render BetterUi::Dialog::DialogComponent.new(
+  size: size,
+  close_on_backdrop: close_on_backdrop,
+  close_on_escape: close_on_escape,
+  show_close_button: false,
+  **options
+) do |dialog| %>
+  <% if trigger? %>
+    <% dialog.with_trigger do %>
+      <%= trigger %>
+    <% end %>
+  <% end %>
+
+  <%= render BetterUi::CardComponent.new(style: :bordered, shadow: :sm, size: :md) do |card| %>
+    <% card.with_body do %>
+      <div class="text-center">
+        <% if icon %>
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full <%= icon_color_classes %>">
+            <% case icon_name %>
+            <% when :check_circle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            <% when :exclamation_circle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+              </svg>
+            <% when :exclamation_triangle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+              </svg>
+            <% when :information_circle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+              </svg>
+            <% end %>
+          </div>
+        <% end %>
+
+        <% if title %>
+          <h3 class="mt-4 text-lg font-semibold text-grayscale-900"><%= title %></h3>
+        <% end %>
+
+        <% if text %>
+          <p class="mt-2 text-sm text-grayscale-500"><%= text %></p>
+        <% end %>
+      </div>
+    <% end %>
+
+    <% card.with_footer do %>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
+        <%= render(BetterUi::ButtonComponent.new(
+          variant: variant,
+          style: :solid,
+          container_classes: "w-full",
+          data: { action: "click->better-ui--dialog--dialog#close" }
+        )) do %><%= button_label %><% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/better_ui/dialog/alert_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Dialog
+    class AlertComponent < ApplicationComponent
+      renders_one :trigger
+
+      ICON_VARIANTS = {
+        success:   :check_circle,
+        danger:    :exclamation_circle,
+        warning:   :exclamation_triangle,
+        info:      :information_circle,
+        primary:   :information_circle,
+        secondary: :information_circle,
+        accent:    :information_circle,
+        light:     :information_circle,
+        dark:      :information_circle
+      }.freeze
+
+      def initialize(
+        variant: :info,
+        title: nil,
+        text: nil,
+        icon: true,
+        button_label: "OK",
+        size: :sm,
+        close_on_backdrop: true,
+        close_on_escape: true,
+        **options
+      )
+        @variant = validate_variant(normalize_symbol(variant, :info))
+        @title = title
+        @text = text
+        @icon = icon
+        @button_label = button_label
+        @size = normalize_symbol(size, :sm)
+        @close_on_backdrop = close_on_backdrop
+        @close_on_escape = close_on_escape
+        @options = options
+      end
+
+      private
+
+      attr_reader :variant, :title, :text, :icon, :button_label, :size,
+                  :close_on_backdrop, :close_on_escape, :options
+
+      def icon_name
+        ICON_VARIANTS[@variant]
+      end
+
+      def icon_color_classes
+        case @variant
+        when :success   then "text-success-600 bg-success-100"
+        when :danger    then "text-danger-600 bg-danger-100"
+        when :warning   then "text-warning-600 bg-warning-100"
+        when :info      then "text-info-600 bg-info-100"
+        when :primary   then "text-primary-600 bg-primary-100"
+        when :secondary then "text-secondary-600 bg-secondary-100"
+        when :accent    then "text-accent-600 bg-accent-100"
+        when :light     then "text-grayscale-600 bg-grayscale-100"
+        when :dark      then "text-grayscale-800 bg-grayscale-200"
+        end
+      end
+
+      def normalize_symbol(value, fallback)
+        sym = value.to_s.strip.to_sym
+        sym.blank? ? fallback : sym
+      end
+
+      def validate_variant(variant)
+        unless BetterUi::ApplicationComponent::VARIANTS.key?(variant)
+          raise ArgumentError, "Invalid variant: #{variant}. Must be one of: #{BetterUi::ApplicationComponent::VARIANTS.keys.join(", ")}"
+        end
+        variant
+      end
+    end
+  end
+end

data/app/components/better_ui/dialog/confirm_component/confirm_component.html.erb

@@ -0,0 +1,67 @@
+<%= render BetterUi::Dialog::DialogComponent.new(
+  size: size,
+  close_on_backdrop: close_on_backdrop,
+  close_on_escape: close_on_escape,
+  show_close_button: false,
+  **options
+) do |dialog| %>
+  <% if trigger? %>
+    <% dialog.with_trigger do %>
+      <%= trigger %>
+    <% end %>
+  <% end %>
+
+  <%= render BetterUi::CardComponent.new(style: :bordered, shadow: :sm, size: :md) do |card| %>
+    <% card.with_body do %>
+      <div class="text-center">
+        <% if icon %>
+          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full <%= icon_color_classes %>">
+            <% case icon_name %>
+            <% when :check_circle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            <% when :exclamation_circle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
+              </svg>
+            <% when :exclamation_triangle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+              </svg>
+            <% when :information_circle %>
+              <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
+              </svg>
+            <% end %>
+          </div>
+        <% end %>
+
+        <% if title %>
+          <h3 class="mt-4 text-lg font-semibold text-grayscale-900"><%= title %></h3>
+        <% end %>
+
+        <% if text %>
+          <p class="mt-2 text-sm text-grayscale-500"><%= text %></p>
+        <% end %>
+      </div>
+    <% end %>
+
+    <% card.with_footer do %>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
+        <%= render(BetterUi::ButtonComponent.new(
+          variant: :secondary,
+          style: :outline,
+          container_classes: "w-full sm:w-auto",
+          data: { action: "click->better-ui--dialog--dialog#cancel" }
+        )) do %><%= cancel_label %><% end %>
+        <%= render(BetterUi::ButtonComponent.new(
+          variant: variant,
+          style: :solid,
+          container_classes: "w-full sm:w-auto",
+          data: { action: "click->better-ui--dialog--dialog#confirm" }
+        )) do %><%= confirm_label %><% end %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/better_ui/dialog/confirm_component.rb

@@ -0,0 +1,80 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Dialog
+    class ConfirmComponent < ApplicationComponent
+      renders_one :trigger
+
+      ICON_VARIANTS = {
+        success:   :check_circle,
+        danger:    :exclamation_circle,
+        warning:   :exclamation_triangle,
+        info:      :information_circle,
+        primary:   :information_circle,
+        secondary: :information_circle,
+        accent:    :information_circle,
+        light:     :information_circle,
+        dark:      :information_circle
+      }.freeze
+
+      def initialize(
+        variant: :warning,
+        title: nil,
+        text: nil,
+        icon: true,
+        confirm_label: "Confirm",
+        cancel_label: "Cancel",
+        size: :sm,
+        close_on_backdrop: false,
+        close_on_escape: false,
+        **options
+      )
+        @variant = validate_variant(normalize_symbol(variant, :warning))
+        @title = title
+        @text = text
+        @icon = icon
+        @confirm_label = confirm_label
+        @cancel_label = cancel_label
+        @size = normalize_symbol(size, :sm)
+        @close_on_backdrop = close_on_backdrop
+        @close_on_escape = close_on_escape
+        @options = options
+      end
+
+      private
+
+      attr_reader :variant, :title, :text, :icon, :confirm_label, :cancel_label,
+                  :size, :close_on_backdrop, :close_on_escape, :options
+
+      def icon_name
+        ICON_VARIANTS[@variant]
+      end
+
+      def icon_color_classes
+        case @variant
+        when :success   then "text-success-600 bg-success-100"
+        when :danger    then "text-danger-600 bg-danger-100"
+        when :warning   then "text-warning-600 bg-warning-100"
+        when :info      then "text-info-600 bg-info-100"
+        when :primary   then "text-primary-600 bg-primary-100"
+        when :secondary then "text-secondary-600 bg-secondary-100"
+        when :accent    then "text-accent-600 bg-accent-100"
+        when :light     then "text-grayscale-600 bg-grayscale-100"
+        when :dark      then "text-grayscale-800 bg-grayscale-200"
+        end
+      end
+
+      def normalize_symbol(value, fallback)
+        sym = value.to_s.strip.to_sym
+        sym.blank? ? fallback : sym
+      end
+
+      def validate_variant(variant)
+        unless BetterUi::ApplicationComponent::VARIANTS.key?(variant)
+          raise ArgumentError, "Invalid variant: #{variant}. Must be one of: #{BetterUi::ApplicationComponent::VARIANTS.keys.join(", ")}"
+        end
+        variant
+      end
+    end
+  end
+end

data/app/components/better_ui/dialog/dialog_component/dialog_component.html.erb

@@ -0,0 +1,44 @@
+<div <%= tag.attributes(component_attributes) %>>
+  <% if trigger? %>
+    <div data-action="click->better-ui--dialog--dialog#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+
+  <div data-dialog-overlay
+       role="dialog"
+       aria-modal="true"
+       class="fixed inset-0 z-[1000]"
+       <%= "hidden" unless open %>>
+    <%# Backdrop %>
+    <div data-better-ui--dialog--dialog-target="backdrop"
+         data-action="click->better-ui--dialog--dialog#backdropClick"
+         class="fixed inset-0 bg-black/50 transition-opacity duration-200 <%= open ? 'opacity-100' : 'opacity-0' %>">
+    </div>
+
+    <%# Centering wrapper %>
+    <div class="fixed inset-0 overflow-y-auto">
+      <div class="flex min-h-full items-center justify-center p-4 text-center sm:p-0"
+           data-action="click->better-ui--dialog--dialog#backdropClick">
+        <%# Panel (size-only wrapper) %>
+        <div data-better-ui--dialog--dialog-target="panel"
+             class="<%= panel_classes %>"
+             role="document">
+
+          <% if show_close_button %>
+            <button type="button"
+                    class="absolute right-4 top-4 text-grayscale-400 hover:text-grayscale-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-md p-1 z-10"
+                    data-action="click->better-ui--dialog--dialog#close"
+                    aria-label="Close">
+              <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          <% end %>
+
+          <%= content %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/better_ui/dialog/dialog_component.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Dialog
+    class DialogComponent < ApplicationComponent
+      renders_one :trigger
+
+      SIZES = {
+        sm:   "sm:max-w-sm",
+        md:   "sm:max-w-md",
+        lg:   "sm:max-w-lg",
+        xl:   "sm:max-w-xl",
+        xxl:  "sm:max-w-2xl",
+        full: "sm:max-w-full sm:mx-4"
+      }.freeze
+
+      def initialize(
+        size: :md,
+        close_on_backdrop: true,
+        close_on_escape: true,
+        open: false,
+        show_close_button: true,
+        container_classes: nil,
+        **options
+      )
+        @size = validate_size(size)
+        @close_on_backdrop = close_on_backdrop
+        @close_on_escape = close_on_escape
+        @open = open
+        @show_close_button = show_close_button
+        @container_classes = container_classes
+        @options = options
+      end
+
+      private
+
+      attr_reader :size, :close_on_backdrop, :close_on_escape, :open,
+                  :show_close_button, :container_classes, :options
+
+      def component_id
+        @options[:id] || "dialog-#{object_id}"
+      end
+
+      def controller_data
+        {
+          controller: "better-ui--dialog--dialog",
+          "better-ui--dialog--dialog-open-value": @open,
+          "better-ui--dialog--dialog-close-on-backdrop-value": @close_on_backdrop,
+          "better-ui--dialog--dialog-close-on-escape-value": @close_on_escape
+        }
+      end
+
+      def component_attributes
+        {
+          id: component_id,
+          data: controller_data,
+          **@options.except(:id)
+        }
+      end
+
+      def panel_classes
+        css_classes(
+          "relative w-full text-left",
+          "transition-all duration-200",
+          "opacity-0 scale-95 translate-y-4 sm:translate-y-0 sm:scale-95",
+          SIZES[@size],
+          @container_classes
+        )
+      end
+
+      def validate_size(size)
+        size = size.to_s.strip.to_sym if size.respond_to?(:to_s)
+        size = :md if size.blank?
+        unless SIZES.key?(size)
+          raise ArgumentError, "Invalid size: #{size}. Must be one of: #{SIZES.keys.join(", ")}"
+        end
+        size
+      end
+    end
+  end
+end

data/app/components/better_ui/divider_component/divider_component.html.erb

@@ -0,0 +1,11 @@
+<% if horizontal? && has_label? %>
+  <div class="<%= wrapper_classes %>" role="separator" <%= tag.attributes(html_attributes) %>>
+    <div class="<%= line_classes(:first) %>"></div>
+    <span class="<%= label_text_classes %>"><%= @label %></span>
+    <div class="<%= line_classes(:second) %>"></div>
+  </div>
+<% elsif horizontal? %>
+  <hr class="<%= component_classes %>" <%= tag.attributes(html_attributes) %>>
+<% else %>
+  <div class="<%= component_classes %>" role="separator" <%= tag.attributes(html_attributes) %>></div>
+<% end %>