better_ui 0.9.0 → 0.9.1

data/spec/components/previews/better_ui/card_component_preview.rb

@@ -0,0 +1,269 @@
+# frozen_string_literal: true
+
+module BetterUi
+  # @label Card
+  class CardComponentPreview < ViewComponent::Preview
+    # @label Default
+    # @display bg_color #f5f5f5
+    def default
+      render BetterUi::CardComponent.new do
+        "This is a default card with solid primary style and medium size."
+      end
+    end
+
+    # @label With Header
+    # @display bg_color #f5f5f5
+    def with_header
+      render BetterUi::CardComponent.new do |card|
+        card.with_header { "Card Header" }
+        card.with_body { "This card has a header section separated by a divider." }
+      end
+    end
+
+    # @label With Footer
+    # @display bg_color #f5f5f5
+    def with_footer
+      render BetterUi::CardComponent.new do |card|
+        card.with_body { "This card has a footer section for actions or additional information." }
+        card.with_footer { "Card Footer" }
+      end
+    end
+
+    # @label With All Sections
+    # @display bg_color #f5f5f5
+    def with_all_sections
+      render BetterUi::CardComponent.new do |card|
+        card.with_header { "Complete Card" }
+        card.with_body { "This card demonstrates all three sections: header, body, and footer." }
+        card.with_footer { "Footer with actions" }
+      end
+    end
+
+    # @label Solid Style
+    # @display bg_color #f5f5f5
+    def solid_style
+      render BetterUi::CardComponent.new(variant: :primary, style: :solid) do |card|
+        card.with_header { "Solid Card" }
+        card.with_body { "Filled background with subtle border and dark text. Best for emphasis." }
+      end
+    end
+
+    # @label Outline Style
+    # @display bg_color #f5f5f5
+    def outline_style
+      render BetterUi::CardComponent.new(variant: :primary, style: :outline) do |card|
+        card.with_header { "Outline Card" }
+        card.with_body { "White background with colored border. Clean and minimal." }
+      end
+    end
+
+    # @label Ghost Style (Transparent)
+    # @display bg_color #f5f5f5
+    def ghost_style
+      render BetterUi::CardComponent.new(variant: :primary, style: :ghost) do |card|
+        card.with_header { "Ghost Card" }
+        card.with_body { "Transparent background with colored text. Most subtle option." }
+      end
+    end
+
+    # @label Soft Style
+    # @display bg_color #f5f5f5
+    def soft_style
+      render BetterUi::CardComponent.new(variant: :primary, style: :soft) do |card|
+        card.with_header { "Soft Card" }
+        card.with_body { "Light colored background with subtle border. Gentle appearance." }
+      end
+    end
+
+    # @label Bordered Style
+    # @display bg_color #f5f5f5
+    def bordered_style
+      render BetterUi::CardComponent.new(style: :bordered) do |card|
+        card.with_header { "Bordered Card" }
+        card.with_body { "White background with variant-colored border. Defaults to light variant. Positioned between soft and outline in visual weight." }
+      end
+    end
+
+    # @label Success Card
+    # @display bg_color #f5f5f5
+    def success_card
+      render BetterUi::CardComponent.new(variant: :success) do |card|
+        card.with_header { "✓ Success" }
+        card.with_body { "Operation completed successfully!" }
+      end
+    end
+
+    # @label Danger Card
+    # @display bg_color #f5f5f5
+    def danger_card
+      render BetterUi::CardComponent.new(variant: :danger) do |card|
+        card.with_header { "⚠ Error" }
+        card.with_body { "An error occurred while processing your request." }
+      end
+    end
+
+    # @label Info Card
+    # @display bg_color #f5f5f5
+    def info_card
+      render BetterUi::CardComponent.new(variant: :info) do |card|
+        card.with_header { "ℹ Information" }
+        card.with_body { "Here's some helpful information for you." }
+      end
+    end
+
+    # @label Without Shadow
+    # @display bg_color #f5f5f5
+    def without_shadow
+      render BetterUi::CardComponent.new(shadow: false) do |card|
+        card.with_header { "Flat Card" }
+        card.with_body { "This card has no shadow elevation." }
+      end
+    end
+
+    # @label Extra Small Size
+    # @display bg_color #f5f5f5
+    def extra_small_size
+      render BetterUi::CardComponent.new(size: :xs) do |card|
+        card.with_header { "XS Card" }
+        card.with_body { "Extra small card with compact padding." }
+      end
+    end
+
+    # @label Small Size
+    # @display bg_color #f5f5f5
+    def small_size
+      render BetterUi::CardComponent.new(size: :sm) do |card|
+        card.with_header { "Small Card" }
+        card.with_body { "Small card with reduced padding." }
+      end
+    end
+
+    # @label Large Size
+    # @display bg_color #f5f5f5
+    def large_size
+      render BetterUi::CardComponent.new(size: :lg) do |card|
+        card.with_header { "Large Card" }
+        card.with_body { "Large card with generous padding." }
+      end
+    end
+
+    # @label Extra Large Size
+    # @display bg_color #f5f5f5
+    def extra_large_size
+      render BetterUi::CardComponent.new(size: :xl) do |card|
+        card.with_header { "XL Card" }
+        card.with_body { "Extra large card with maximum padding." }
+      end
+    end
+
+    # @label All Variants
+    # @display bg_color #f5f5f5
+    def all_variants
+      render_with_template
+    end
+
+    # @label All Styles
+    # @display bg_color #f5f5f5
+    def all_styles
+      render_with_template
+    end
+
+    # @label All Sizes
+    # @display bg_color #f5f5f5
+    def all_sizes
+      render_with_template
+    end
+
+    # @label Full-Width Image
+    # @display bg_color #f5f5f5
+    def full_width_image
+      render BetterUi::CardComponent.new(body_padding: false) do |card|
+        card.with_header { "Photo Gallery" }
+        card.with_body do
+          "<div class='bg-gradient-to-r from-blue-500 to-purple-600 h-48 flex items-center justify-center text-white font-bold'>Full-Width Image Placeholder</div>".html_safe
+        end
+        card.with_footer { "Image caption or actions" }
+      end
+    end
+
+    # @label Table Container
+    # @display bg_color #f5f5f5
+    def table_container
+      render BetterUi::CardComponent.new(body_padding: false, style: :bordered) do |card|
+        card.with_header { "Data Table" }
+        card.with_body do
+          "<table class='w-full'><thead class='bg-gray-50'><tr><th class='px-6 py-3 text-left'>Name</th><th class='px-6 py-3 text-left'>Status</th></tr></thead><tbody><tr class='border-t'><td class='px-6 py-4'>Item 1</td><td class='px-6 py-4'>Active</td></tr><tr class='border-t'><td class='px-6 py-4'>Item 2</td><td class='px-6 py-4'>Pending</td></tr></tbody></table>".html_safe
+        end
+      end
+    end
+
+    # @label No Padding
+    # @display bg_color #f5f5f5
+    def no_padding
+      render BetterUi::CardComponent.new(
+        header_padding: false,
+        body_padding: false,
+        footer_padding: false
+      ) do |card|
+        card.with_header do
+          "<div class='bg-blue-100 p-4 font-bold'>Custom Padded Header</div>".html_safe
+        end
+        card.with_body do
+          "<div class='bg-white p-8'>Content with custom padding</div>".html_safe
+        end
+        card.with_footer do
+          "<div class='bg-gray-100 p-4'>Custom Padded Footer</div>".html_safe
+        end
+      end
+    end
+
+    # @label Selective Padding
+    # @display bg_color #f5f5f5
+    def selective_padding
+      render BetterUi::CardComponent.new(
+        variant: :info,
+        header_padding: true,
+        body_padding: false,
+        footer_padding: true
+      ) do |card|
+        card.with_header { "Normal Header (with padding)" }
+        card.with_body do
+          "<div class='bg-gradient-to-b from-blue-50 to-white p-8'>Body with custom padding - the card body_padding is false, allowing custom spacing</div>".html_safe
+        end
+        card.with_footer { "Normal Footer (with padding)" }
+      end
+    end
+
+    # @label Playground
+    # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param style select { choices: [solid, outline, ghost, soft, bordered] }
+    # @param size select { choices: [xs, sm, md, lg, xl] }
+    # @param shadow toggle
+    # @param header_padding toggle
+    # @param body_padding toggle
+    # @param footer_padding toggle
+    # @param with_header toggle
+    # @param with_footer toggle
+    def playground(variant: :primary, style: :solid, size: :md, shadow: true, header_padding: true, body_padding: true, footer_padding: true, with_header: true, with_footer: false)
+      render BetterUi::CardComponent.new(
+        variant: variant.to_sym,
+        style: style.to_sym,
+        size: size.to_sym,
+        shadow: shadow,
+        header_padding: header_padding,
+        body_padding: body_padding,
+        footer_padding: footer_padding
+      ) do |card|
+        if with_header
+          card.with_header { "Playground Card Header" }
+        end
+
+        card.with_body { "This is an interactive card playground. Adjust the parameters to see how the card changes." }
+
+        if with_footer
+          card.with_footer { "Card Footer" }
+        end
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/container_component_preview/all_sizes.html.erb

@@ -0,0 +1,13 @@
+<div class="space-y-6 p-4">
+  <% [:sm, :md, :lg, :xl, :full].each do |size| %>
+    <div>
+      <p class="text-sm font-medium text-gray-500 mb-2">Size: <code><%= size %></code></p>
+      <%= render BetterUi::ContainerComponent.new(size: size, container_classes: "bg-blue-50 border border-blue-200 rounded-lg") do %>
+        <div class="bg-white p-4 rounded shadow-sm text-center">
+          Container with <strong><%= size %></strong> max-width
+          (<%= size == :full ? "max-w-full" : "max-w-screen-#{size}" %>)
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/container_component_preview.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module BetterUi
+  # @label Container
+  class ContainerComponentPreview < ViewComponent::Preview
+    # @label Default
+    # @display bg_color #f5f5f5
+    def default
+      render BetterUi::ContainerComponent.new do
+        "<div class='bg-white p-6 rounded-lg shadow-sm'>This is a default container with lg max-width, horizontal padding, and centered alignment.</div>".html_safe
+      end
+    end
+
+    # @label All Sizes
+    # @display bg_color #f5f5f5
+    def all_sizes
+      render_with_template
+    end
+
+    # @label Without Padding
+    # @display bg_color #f5f5f5
+    def without_padding
+      render BetterUi::ContainerComponent.new(padding: false) do
+        "<div class='bg-white p-6 shadow-sm'>This container has no horizontal padding. Content goes edge-to-edge within the max-width constraint.</div>".html_safe
+      end
+    end
+
+    # @label Without Centering
+    # @display bg_color #f5f5f5
+    def without_centering
+      render BetterUi::ContainerComponent.new(centered: false) do
+        "<div class='bg-white p-6 rounded-lg shadow-sm'>This container is not centered. It aligns to the left by default.</div>".html_safe
+      end
+    end
+
+    # @label Full Width
+    # @display bg_color #f5f5f5
+    def full_width
+      render BetterUi::ContainerComponent.new(size: :full) do
+        "<div class='bg-white p-6 rounded-lg shadow-sm'>This container uses full width with no max-width constraint (other than max-w-full).</div>".html_safe
+      end
+    end
+
+    # @label Playground
+    # @param size select { choices: [sm, md, lg, xl, full] }
+    # @param padding toggle
+    # @param centered toggle
+    def playground(size: :lg, padding: true, centered: true)
+      render BetterUi::ContainerComponent.new(
+        size: size.to_sym,
+        padding: padding,
+        centered: centered,
+        container_classes: "bg-blue-50 border border-blue-200 rounded-lg"
+      ) do
+        "<div class='bg-white p-6 rounded shadow-sm'>Interactive container playground. Adjust the parameters to see how the container changes. Current size: <strong>#{size}</strong>, padding: <strong>#{padding}</strong>, centered: <strong>#{centered}</strong>.</div>".html_safe
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/dialog/alert_component_preview/all_variants.html.erb

@@ -0,0 +1,17 @@
+<div class="p-4 space-y-4">
+  <h3 class="text-lg font-semibold mb-4">All Variants</h3>
+
+  <div class="flex flex-wrap gap-3">
+    <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+      <%= render BetterUi::Dialog::AlertComponent.new(
+        variant: variant,
+        title: variant.to_s.capitalize,
+        text: "This is a #{variant} alert dialog."
+      ) do |a| %>
+        <% a.with_trigger do %>
+          <%= render(BetterUi::ButtonComponent.new(variant: variant, style: :outline)) do %><%= variant.to_s.capitalize %><% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/dialog/alert_component_preview/custom_button_label.html.erb

@@ -0,0 +1,14 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Custom Button Label</h3>
+
+  <%= render BetterUi::Dialog::AlertComponent.new(
+    variant: :success,
+    title: "Saved Successfully!",
+    text: "Your changes have been saved.",
+    button_label: "Got it!"
+  ) do |a| %>
+    <% a.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :success)) do %>Show Success Alert<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/alert_component_preview/default.html.erb

@@ -0,0 +1,13 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Default Alert (Info)</h3>
+
+  <%= render BetterUi::Dialog::AlertComponent.new(
+    variant: :info,
+    title: "Information",
+    text: "This is an informational alert. Click OK to dismiss."
+  ) do |a| %>
+    <% a.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :info)) do %>Show Info Alert<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/alert_component_preview/playground.html.erb

@@ -0,0 +1,16 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Playground</h3>
+
+  <%= render BetterUi::Dialog::AlertComponent.new(
+    variant: @variant,
+    title: @title,
+    text: @text,
+    icon: @icon,
+    button_label: @button_label,
+    size: @size
+  ) do |a| %>
+    <% a.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: @variant.presence || :info)) do %>Show Alert<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/alert_component_preview/without_icon.html.erb

@@ -0,0 +1,14 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Without Icon</h3>
+
+  <%= render BetterUi::Dialog::AlertComponent.new(
+    variant: :warning,
+    title: "Warning",
+    text: "This alert has no icon displayed.",
+    icon: false
+  ) do |a| %>
+    <% a.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :warning)) do %>Show Alert (No Icon)<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/alert_component_preview.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Dialog
+    # @label Dialog Alert
+    class AlertComponentPreview < ViewComponent::Preview
+      # @label Default (Info)
+      # @display max_height 600px
+      def default
+        render_with_template
+      end
+
+      # @label All Variants
+      # @display max_height 800px
+      def all_variants
+        render_with_template
+      end
+
+      # @label Without Icon
+      # @display max_height 600px
+      def without_icon
+        render_with_template
+      end
+
+      # @label Custom Button Label
+      # @display max_height 600px
+      def custom_button_label
+        render_with_template
+      end
+
+      # @label Playground
+      # @display max_height 600px
+      # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+      # @param title text
+      # @param text text
+      # @param icon toggle
+      # @param button_label text
+      # @param size select { choices: [sm, md, lg] }
+      def playground(
+        variant: :info,
+        title: "Alert Title",
+        text: "This is the alert message.",
+        icon: true,
+        button_label: "OK",
+        size: :sm
+      )
+        @variant = variant.presence&.to_sym || :info
+        @title = title
+        @text = text
+        @icon = icon
+        @button_label = button_label
+        @size = size.presence&.to_sym || :sm
+        render_with_template
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/dialog/confirm_component_preview/all_variants.html.erb

@@ -0,0 +1,17 @@
+<div class="p-4 space-y-4">
+  <h3 class="text-lg font-semibold mb-4">All Variants</h3>
+
+  <div class="flex flex-wrap gap-3">
+    <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+      <%= render BetterUi::Dialog::ConfirmComponent.new(
+        variant: variant,
+        title: "#{variant.to_s.capitalize} Confirm",
+        text: "This is a #{variant} confirmation dialog."
+      ) do |c| %>
+        <% c.with_trigger do %>
+          <%= render(BetterUi::ButtonComponent.new(variant: variant, style: :outline)) do %><%= variant.to_s.capitalize %><% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/dialog/confirm_component_preview/custom_labels.html.erb

@@ -0,0 +1,15 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Custom Labels</h3>
+
+  <%= render BetterUi::Dialog::ConfirmComponent.new(
+    variant: :primary,
+    title: "Publish Article?",
+    text: "This will make the article visible to all users.",
+    confirm_label: "Publish Now",
+    cancel_label: "Save as Draft"
+  ) do |c| %>
+    <% c.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :primary)) do %>Publish<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/confirm_component_preview/danger_confirm.html.erb

@@ -0,0 +1,15 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Danger Confirm (Delete)</h3>
+
+  <%= render BetterUi::Dialog::ConfirmComponent.new(
+    variant: :danger,
+    title: "Delete Item?",
+    text: "This action cannot be undone. This will permanently delete the item and all associated data.",
+    confirm_label: "Yes, delete it",
+    cancel_label: "No, keep it"
+  ) do |c| %>
+    <% c.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :danger)) do %>Delete Item<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/confirm_component_preview/default.html.erb

@@ -0,0 +1,13 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Default Confirm (Warning)</h3>
+
+  <%= render BetterUi::Dialog::ConfirmComponent.new(
+    variant: :warning,
+    title: "Confirm Action",
+    text: "Are you sure you want to proceed with this action?"
+  ) do |c| %>
+    <% c.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: :warning)) do %>Show Confirm<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/confirm_component_preview/playground.html.erb

@@ -0,0 +1,17 @@
+<div class="p-4">
+  <h3 class="text-lg font-semibold mb-4">Playground</h3>
+
+  <%= render BetterUi::Dialog::ConfirmComponent.new(
+    variant: @variant,
+    title: @title,
+    text: @text,
+    icon: @icon,
+    confirm_label: @confirm_label,
+    cancel_label: @cancel_label,
+    size: @size
+  ) do |c| %>
+    <% c.with_trigger do %>
+      <%= render(BetterUi::ButtonComponent.new(variant: @variant.presence || :warning)) do %>Open Confirm<% end %>
+    <% end %>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/dialog/confirm_component_preview.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Dialog
+    # @label Dialog Confirm
+    class ConfirmComponentPreview < ViewComponent::Preview
+      # @label Default (Warning)
+      # @display max_height 600px
+      def default
+        render_with_template
+      end
+
+      # @label All Variants
+      # @display max_height 800px
+      def all_variants
+        render_with_template
+      end
+
+      # @label Danger Confirm
+      # @display max_height 600px
+      def danger_confirm
+        render_with_template
+      end
+
+      # @label Custom Labels
+      # @display max_height 600px
+      def custom_labels
+        render_with_template
+      end
+
+      # @label Playground
+      # @display max_height 600px
+      # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+      # @param title text
+      # @param text text
+      # @param icon toggle
+      # @param confirm_label text
+      # @param cancel_label text
+      # @param size select { choices: [sm, md, lg] }
+      def playground(
+        variant: :warning,
+        title: "Confirm Action",
+        text: "Are you sure you want to proceed?",
+        icon: true,
+        confirm_label: "Confirm",
+        cancel_label: "Cancel",
+        size: :sm
+      )
+        @variant = variant.presence&.to_sym || :warning
+        @title = title
+        @text = text
+        @icon = icon
+        @confirm_label = confirm_label
+        @cancel_label = cancel_label
+        @size = size.presence&.to_sym || :sm
+        render_with_template
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/dialog/dialog_component_preview/all_sizes.html.erb

@@ -0,0 +1,32 @@
+<div class="p-4 space-y-4">
+  <h3 class="text-lg font-semibold mb-4">All Sizes</h3>
+
+  <div class="flex flex-wrap gap-3">
+    <% %i[sm md lg xl xxl full].each do |size| %>
+      <%= render BetterUi::Dialog::DialogComponent.new(size: size) do |d| %>
+        <% d.with_trigger do %>
+          <%= render(BetterUi::ButtonComponent.new(variant: :primary, style: :outline)) do %><%= size.to_s.upcase %><% end %>
+        <% end %>
+
+        <%= render BetterUi::CardComponent.new(style: :bordered, shadow: true, size: :md) do |card| %>
+          <% card.with_header do %>
+            <h3 class="text-lg font-semibold text-grayscale-900">Size: <%= size.to_s.upcase %></h3>
+          <% end %>
+
+          <% card.with_body do %>
+            <p class="text-grayscale-600">This dialog uses the <code class="bg-grayscale-100 px-1 rounded"><%= size %></code> size option.</p>
+          <% end %>
+
+          <% card.with_footer do %>
+            <div class="flex justify-end">
+              <%= render(BetterUi::ButtonComponent.new(
+                variant: :primary,
+                data: { action: "click->better-ui--dialog--dialog#close" }
+              )) do %>Close<% end %>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+</div>