better_ui 0.9.0 → 0.9.1

data/spec/components/previews/better_ui/dropdown/dropdown_component_preview.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Dropdown
+    # @label Dropdown
+    class DropdownComponentPreview < ViewComponent::Preview
+      # @label Default
+      def default
+        render_with_template
+      end
+
+      # @label All Sizes
+      def all_sizes
+        render_with_template
+      end
+
+      # @label With Icons
+      def with_icons
+        render_with_template
+      end
+
+      # @label With Dividers and Headers
+      def with_dividers_and_headers
+        render_with_template
+      end
+
+      # @label Placement Options
+      def placement_options
+        render_with_template
+      end
+
+      # @label Disabled Items
+      def disabled_items
+        render_with_template
+      end
+
+      # @label Playground
+      # @param size select { choices: [sm, md, lg] }
+      # @param placement select { choices: [bottom_start, bottom_end, top_start, top_end] }
+      # @param shadow select { choices: [none, sm, md, lg, xl] }
+      # @param auto_close toggle
+      # @param close_on_item_click toggle
+      def playground(
+        size: :md,
+        placement: :bottom_start,
+        shadow: :lg,
+        auto_close: true,
+        close_on_item_click: true
+      )
+        @size = size.presence&.to_sym || :md
+        @placement = placement.presence&.to_sym || :bottom_start
+        @shadow = shadow.presence&.to_sym || :lg
+        @auto_close = auto_close
+        @close_on_item_click = close_on_item_click
+        render_with_template
+      end
+    end
+  end
+end

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

@@ -0,0 +1,17 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-6">FontAwesome Icon Sizes</h3>
+
+  <div class="space-y-6">
+    <% (@sizes || BetterUi::FaIconComponent::SIZES.keys).each do |size| %>
+      <div class="flex items-center gap-4">
+        <span class="w-20 text-sm font-medium text-gray-600 uppercase"><%= size %></span>
+
+        <div class="flex gap-4 items-center">
+          <%= render BetterUi::FaIconComponent.new(name: "user", style: :solid, size: size) %>
+          <%= render BetterUi::FaIconComponent.new(name: "heart", style: :solid, size: size, variant: :danger) %>
+          <%= render BetterUi::FaIconComponent.new(name: "star", style: :solid, size: size, variant: :warning) %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/fa_icon_component_preview/all_styles.html.erb

@@ -0,0 +1,19 @@
+<div class="p-8 space-y-6">
+  <h3 class="text-lg font-semibold mb-4">FontAwesome Icon Styles</h3>
+
+  <div class="space-y-4">
+    <% (@styles || BetterUi::FaIconComponent::STYLES.keys).each do |style| %>
+      <div class="flex items-center gap-4">
+        <span class="w-24 text-sm font-medium text-gray-600 capitalize"><%= style %></span>
+
+        <div class="flex gap-4 items-center text-2xl">
+          <%= render BetterUi::FaIconComponent.new(name: "user", style: style) %>
+          <%= render BetterUi::FaIconComponent.new(name: "heart", style: style) %>
+          <%= render BetterUi::FaIconComponent.new(name: "star", style: style) %>
+          <%= render BetterUi::FaIconComponent.new(name: "bell", style: style) %>
+          <%= render BetterUi::FaIconComponent.new(name: "bookmark", style: style) %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/fa_icon_component_preview/all_variants.html.erb

@@ -0,0 +1,26 @@
+<div class="p-8">
+  <h3 class="text-lg font-semibold mb-6">FontAwesome Icon Variants</h3>
+
+  <div class="space-y-4">
+    <div class="flex items-center gap-4 mb-2">
+      <span class="w-24 text-sm font-medium text-gray-600">inherit</span>
+      <div class="flex gap-4 items-center text-2xl">
+        <%= render BetterUi::FaIconComponent.new(name: "user", style: :solid) %>
+        <%= render BetterUi::FaIconComponent.new(name: "heart", style: :solid) %>
+        <%= render BetterUi::FaIconComponent.new(name: "star", style: :solid) %>
+      </div>
+    </div>
+
+    <% (@variants || BetterUi::ApplicationComponent::VARIANTS.keys).each do |variant| %>
+      <div class="flex items-center gap-4">
+        <span class="w-24 text-sm font-medium text-gray-600 capitalize"><%= variant %></span>
+
+        <div class="flex gap-4 items-center text-2xl">
+          <%= render BetterUi::FaIconComponent.new(name: "user", style: :solid, variant: variant) %>
+          <%= render BetterUi::FaIconComponent.new(name: "heart", style: :solid, variant: variant) %>
+          <%= render BetterUi::FaIconComponent.new(name: "star", style: :solid, variant: variant) %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

data/spec/components/previews/better_ui/fa_icon_component_preview/animations.html.erb

@@ -0,0 +1,26 @@
+<div class="p-8 space-y-8">
+  <h3 class="text-lg font-semibold mb-6">FontAwesome Icon Animations</h3>
+
+  <div class="space-y-6 text-2xl">
+    <div class="flex items-center gap-4">
+      <span class="w-32 text-sm font-medium text-gray-600">No animation</span>
+      <%= render BetterUi::FaIconComponent.new(name: "spinner", style: :solid) %>
+      <%= render BetterUi::FaIconComponent.new(name: "gear", style: :solid) %>
+      <%= render BetterUi::FaIconComponent.new(name: "circle-notch", style: :solid) %>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <span class="w-32 text-sm font-medium text-gray-600">Spin</span>
+      <%= render BetterUi::FaIconComponent.new(name: "spinner", style: :solid, spin: true) %>
+      <%= render BetterUi::FaIconComponent.new(name: "gear", style: :solid, spin: true) %>
+      <%= render BetterUi::FaIconComponent.new(name: "circle-notch", style: :solid, spin: true) %>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <span class="w-32 text-sm font-medium text-gray-600">Pulse</span>
+      <%= render BetterUi::FaIconComponent.new(name: "spinner", style: :solid, pulse: true) %>
+      <%= render BetterUi::FaIconComponent.new(name: "gear", style: :solid, pulse: true) %>
+      <%= render BetterUi::FaIconComponent.new(name: "circle-notch", style: :solid, pulse: true) %>
+    </div>
+  </div>
+</div>

data/spec/components/previews/better_ui/fa_icon_component_preview/transformations.html.erb

@@ -0,0 +1,88 @@
+<div class="p-8 space-y-8">
+  <h3 class="text-lg font-semibold mb-6">FontAwesome Icon Transformations</h3>
+
+  <div class="space-y-8 text-2xl">
+    <%# Flip transformations %>
+    <div>
+      <h4 class="text-base font-medium mb-4 text-gray-700">Flip</h4>
+      <div class="space-y-4">
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">Normal</span>
+          <%= render BetterUi::FaIconComponent.new(name: "flag", style: :solid) %>
+          <%= render BetterUi::FaIconComponent.new(name: "shield", style: :solid) %>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">Horizontal</span>
+          <%= render BetterUi::FaIconComponent.new(name: "flag", style: :solid, flip: :horizontal) %>
+          <%= render BetterUi::FaIconComponent.new(name: "shield", style: :solid, flip: :horizontal) %>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">Vertical</span>
+          <%= render BetterUi::FaIconComponent.new(name: "flag", style: :solid, flip: :vertical) %>
+          <%= render BetterUi::FaIconComponent.new(name: "shield", style: :solid, flip: :vertical) %>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">Both</span>
+          <%= render BetterUi::FaIconComponent.new(name: "flag", style: :solid, flip: :both) %>
+          <%= render BetterUi::FaIconComponent.new(name: "shield", style: :solid, flip: :both) %>
+        </div>
+      </div>
+    </div>
+
+    <%# Rotate transformations %>
+    <div>
+      <h4 class="text-base font-medium mb-4 text-gray-700">Rotate</h4>
+      <div class="space-y-4">
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">Normal</span>
+          <%= render BetterUi::FaIconComponent.new(name: "arrow-right", style: :solid) %>
+          <%= render BetterUi::FaIconComponent.new(name: "phone", style: :solid) %>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">90 degrees</span>
+          <%= render BetterUi::FaIconComponent.new(name: "arrow-right", style: :solid, rotate: 90) %>
+          <%= render BetterUi::FaIconComponent.new(name: "phone", style: :solid, rotate: 90) %>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">180 degrees</span>
+          <%= render BetterUi::FaIconComponent.new(name: "arrow-right", style: :solid, rotate: 180) %>
+          <%= render BetterUi::FaIconComponent.new(name: "phone", style: :solid, rotate: 180) %>
+        </div>
+
+        <div class="flex items-center gap-4">
+          <span class="w-32 text-sm font-medium text-gray-600">270 degrees</span>
+          <%= render BetterUi::FaIconComponent.new(name: "arrow-right", style: :solid, rotate: 270) %>
+          <%= render BetterUi::FaIconComponent.new(name: "phone", style: :solid, rotate: 270) %>
+        </div>
+      </div>
+    </div>
+
+    <%# Fixed width %>
+    <div>
+      <h4 class="text-base font-medium mb-4 text-gray-700">Fixed Width</h4>
+      <div class="space-y-2">
+        <div class="flex items-center gap-1 bg-gray-100 p-2 rounded">
+          <%= render BetterUi::FaIconComponent.new(name: "home", style: :solid, fixed_width: true) %>
+          <span class="text-sm">Home</span>
+        </div>
+        <div class="flex items-center gap-1 bg-gray-100 p-2 rounded">
+          <%= render BetterUi::FaIconComponent.new(name: "info", style: :solid, fixed_width: true) %>
+          <span class="text-sm">Info</span>
+        </div>
+        <div class="flex items-center gap-1 bg-gray-100 p-2 rounded">
+          <%= render BetterUi::FaIconComponent.new(name: "book", style: :solid, fixed_width: true) %>
+          <span class="text-sm">Book</span>
+        </div>
+        <div class="flex items-center gap-1 bg-gray-100 p-2 rounded">
+          <%= render BetterUi::FaIconComponent.new(name: "music", style: :solid, fixed_width: true) %>
+          <span class="text-sm">Music</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module BetterUi
+  class FaIconComponentPreview < ViewComponent::Preview
+    # @label Default
+    def default
+      render BetterUi::FaIconComponent.new(name: "user")
+    end
+
+    # @label All Styles
+    # @display bg_color #f5f5f5
+    def all_styles
+      @styles = BetterUi::FaIconComponent::STYLES.keys
+      render_with_template
+    end
+
+    # @label All Sizes
+    # @display bg_color #f5f5f5
+    def all_sizes
+      @sizes = BetterUi::FaIconComponent::SIZES.keys
+      render_with_template
+    end
+
+    # @label All Variants
+    # @display bg_color #f5f5f5
+    def all_variants
+      @variants = BetterUi::ApplicationComponent::VARIANTS.keys
+      render_with_template
+    end
+
+    # @label Animations
+    # @display bg_color #f5f5f5
+    def animations
+      render_with_template
+    end
+
+    # @label Transformations
+    # @display bg_color #f5f5f5
+    def transformations
+      render_with_template
+    end
+
+    # @label Playground
+    # @param name text
+    # @param style select { choices: [regular, solid, light, thin, brands] }
+    # @param variant select { choices: [~, primary, secondary, accent, success, danger, warning, info, light, dark] }
+    # @param size select { choices: [xs, sm, md, lg, xl, 2xl] }
+    # @param spin toggle
+    # @param pulse toggle
+    # @param flip select { choices: [~, horizontal, vertical, both] }
+    # @param rotate select { choices: [~, 90, 180, 270] }
+    # @param fixed_width toggle
+    def playground(
+      name: "user",
+      style: :regular,
+      variant: nil,
+      size: :md,
+      spin: false,
+      pulse: false,
+      flip: nil,
+      rotate: nil,
+      fixed_width: false
+    )
+      spin_bool = ActiveModel::Type::Boolean.new.cast(spin)
+      pulse_bool = ActiveModel::Type::Boolean.new.cast(pulse)
+      fixed_width_bool = ActiveModel::Type::Boolean.new.cast(fixed_width)
+      variant_val = variant.present? && variant != "~" ? variant.to_sym : nil
+      flip_val = flip.present? && flip != "~" ? flip.to_sym : nil
+      rotate_val = rotate.present? && rotate != "~" ? rotate.to_i : nil
+      size_val = size.to_s == "2xl" ? :"2xl" : size.to_sym
+
+      render BetterUi::FaIconComponent.new(
+        name: name,
+        style: style,
+        variant: variant_val,
+        size: size_val,
+        spin: spin_bool,
+        pulse: pulse_bool,
+        flip: flip_val,
+        rotate: rotate_val,
+        fixed_width: fixed_width_bool
+      )
+    end
+  end
+end

data/spec/components/previews/better_ui/forms/checkbox_component_preview/all_sizes.html.erb

@@ -0,0 +1,12 @@
+<div class="space-y-4 p-4">
+  <% BetterUi::Forms::CheckboxComponent::SIZES.each do |size| %>
+    <div>
+      <%= render BetterUi::Forms::CheckboxComponent.new(
+        name: "size_#{size}",
+        label: "Size: #{size.to_s.upcase}",
+        size: size,
+        checked: true
+      ) %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/forms/checkbox_component_preview/all_variants.html.erb

@@ -0,0 +1,12 @@
+<div class="space-y-4 p-4">
+  <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+    <div>
+      <%= render BetterUi::Forms::CheckboxComponent.new(
+        name: "variant_#{variant}",
+        label: "Variant: #{variant.to_s.titleize}",
+        variant: variant,
+        checked: true
+      ) %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/forms/checkbox_component_preview/form_integration.html.erb

@@ -0,0 +1,32 @@
+<div class="p-4 max-w-md">
+  <h3 class="text-lg font-semibold mb-4">Form Builder Integration Example</h3>
+
+  <%= form_with url: "#", method: :post, builder: BetterUi::UiFormBuilder, data: { turbo: false } do |f| %>
+    <div class="space-y-4">
+      <%= render BetterUi::Forms::CheckboxComponent.new(
+        name: "user[newsletter]",
+        label: "Subscribe to newsletter",
+        hint: "Receive weekly updates about new features"
+      ) %>
+
+      <%= render BetterUi::Forms::CheckboxComponent.new(
+        name: "user[marketing]",
+        label: "Receive marketing emails",
+        variant: :secondary
+      ) %>
+
+      <%= render BetterUi::Forms::CheckboxComponent.new(
+        name: "user[terms]",
+        label: "I agree to the terms and conditions",
+        required: true,
+        variant: :primary
+      ) %>
+
+      <div class="pt-4">
+        <%= render BetterUi::ButtonComponent.new(type: :submit, variant: :primary) do %>
+          Submit
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/forms/checkbox_component_preview.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Forms
+    # @label Checkbox
+    class CheckboxComponentPreview < ViewComponent::Preview
+      # @label Default
+      # @display bg_color #f5f5f5
+      def default
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "newsletter",
+          label: "Subscribe to newsletter"
+        )
+      end
+
+      # @label Checked
+      # @display bg_color #f5f5f5
+      def checked
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "terms",
+          label: "I agree to the terms and conditions",
+          checked: true
+        )
+      end
+
+      # @label With Hint
+      # @display bg_color #f5f5f5
+      def with_hint
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "marketing",
+          label: "Receive marketing emails",
+          hint: "We'll send you occasional updates about new features and promotions."
+        )
+      end
+
+      # @label With Errors
+      # @display bg_color #f5f5f5
+      def with_errors
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "terms",
+          label: "I agree to the terms and conditions",
+          errors: [ "You must accept the terms and conditions to continue" ]
+        )
+      end
+
+      # @label Required Field
+      # @display bg_color #f5f5f5
+      def required
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "terms",
+          label: "I agree to the terms and conditions",
+          required: true
+        )
+      end
+
+      # @label Disabled State
+      # @display bg_color #f5f5f5
+      def disabled
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "disabled_option",
+          label: "This option is disabled",
+          disabled: true,
+          checked: true
+        )
+      end
+
+      # @label Readonly State
+      # @display bg_color #f5f5f5
+      def readonly
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "readonly_option",
+          label: "This option is readonly",
+          readonly: true,
+          checked: true
+        )
+      end
+
+      # @label Label on Left
+      # @display bg_color #f5f5f5
+      def label_left
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "active",
+          label: "Active",
+          label_position: :left
+        )
+      end
+
+      # @label All Sizes
+      # @display bg_color #f5f5f5
+      def all_sizes
+        render_with_template
+      end
+
+      # @label All Variants
+      # @display bg_color #f5f5f5
+      def all_variants
+        render_with_template
+      end
+
+      # @label Form Integration
+      # @display bg_color #f5f5f5
+      def form_integration
+        render_with_template
+      end
+
+      # @label Playground
+      # @param variant select { choices: [primary, secondary, accent, success, danger, warning, info, light, dark] }
+      # @param size select { choices: [xs, sm, md, lg, xl] }
+      # @param label_position select { choices: [left, right] }
+      # @param checked toggle
+      # @param disabled toggle
+      # @param readonly toggle
+      # @param required toggle
+      # @param with_hint toggle
+      # @param with_error toggle
+      def playground(
+        variant: :primary,
+        size: :md,
+        label_position: :right,
+        checked: false,
+        disabled: false,
+        readonly: false,
+        required: false,
+        with_hint: false,
+        with_error: false
+      )
+        render BetterUi::Forms::CheckboxComponent.new(
+          name: "playground",
+          label: "Playground Checkbox",
+          variant: variant.to_sym,
+          size: size.to_sym,
+          label_position: label_position.to_sym,
+          checked: checked,
+          disabled: disabled,
+          readonly: readonly,
+          required: required,
+          hint: with_hint ? "This is a helpful hint" : nil,
+          errors: with_error ? [ "This field has an error" ] : nil
+        )
+      end
+    end
+  end
+end

data/spec/components/previews/better_ui/forms/checkbox_group_component_preview/all_variants.html.erb

@@ -0,0 +1,14 @@
+<div class="space-y-6 p-4">
+  <% BetterUi::ApplicationComponent::VARIANTS.each do |variant, _| %>
+    <div>
+      <%= render BetterUi::Forms::CheckboxGroupComponent.new(
+        name: "variant_#{variant}",
+        collection: ["Option 1", "Option 2", "Option 3"],
+        selected: ["Option 1", "Option 2"],
+        variant: variant,
+        legend: "Variant: #{variant.to_s.titleize}",
+        orientation: :horizontal
+      ) %>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/forms/checkbox_group_component_preview/form_integration.html.erb

@@ -0,0 +1,47 @@
+<div class="p-4 max-w-lg">
+  <h3 class="text-lg font-semibold mb-4">Form Builder Integration Example</h3>
+
+  <%= form_with url: "#", method: :post, builder: BetterUi::UiFormBuilder, data: { turbo: false } do |f| %>
+    <div class="space-y-6">
+      <%= render BetterUi::Forms::CheckboxGroupComponent.new(
+        name: "user[roles]",
+        collection: [
+          ["Administrator", "admin"],
+          ["Editor", "editor"],
+          ["Viewer", "viewer"]
+        ],
+        selected: ["editor"],
+        legend: "User Roles",
+        hint: "Select the roles for this user",
+        required: true
+      ) %>
+
+      <%= render BetterUi::Forms::CheckboxGroupComponent.new(
+        name: "user[notifications]",
+        collection: [
+          ["Email", "email"],
+          ["Push", "push"],
+          ["SMS", "sms"]
+        ],
+        legend: "Notification Preferences",
+        orientation: :horizontal,
+        variant: :secondary
+      ) %>
+
+      <%= render BetterUi::Forms::CheckboxGroupComponent.new(
+        name: "user[skills]",
+        collection: ["Ruby", "JavaScript", "Python", "Go", "Rust", "TypeScript"],
+        legend: "Programming Skills",
+        orientation: :horizontal,
+        size: :sm,
+        variant: :accent
+      ) %>
+
+      <div class="pt-4">
+        <%= render BetterUi::ButtonComponent.new(type: :submit, variant: :primary) do %>
+          Save Preferences
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/spec/components/previews/better_ui/forms/checkbox_group_component_preview/orientations.html.erb

@@ -0,0 +1,34 @@
+<div class="space-y-8 p-4">
+  <div>
+    <h4 class="text-sm font-medium text-gray-700 mb-2">Vertical Orientation (Default)</h4>
+    <%= render BetterUi::Forms::CheckboxGroupComponent.new(
+      name: "vertical_options",
+      collection: ["Option 1", "Option 2", "Option 3", "Option 4"],
+      selected: ["Option 1"],
+      legend: "Vertical Layout",
+      orientation: :vertical
+    ) %>
+  </div>
+
+  <div>
+    <h4 class="text-sm font-medium text-gray-700 mb-2">Horizontal Orientation</h4>
+    <%= render BetterUi::Forms::CheckboxGroupComponent.new(
+      name: "horizontal_options",
+      collection: ["Option 1", "Option 2", "Option 3", "Option 4"],
+      selected: ["Option 2", "Option 3"],
+      legend: "Horizontal Layout",
+      orientation: :horizontal
+    ) %>
+  </div>
+
+  <div>
+    <h4 class="text-sm font-medium text-gray-700 mb-2">Horizontal with Many Options (Wraps)</h4>
+    <%= render BetterUi::Forms::CheckboxGroupComponent.new(
+      name: "many_options",
+      collection: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+      selected: ["Mon", "Wed", "Fri"],
+      legend: "Days of Week",
+      orientation: :horizontal
+    ) %>
+  </div>
+</div>