better_ui 0.9.0 → 0.9.1

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

@@ -0,0 +1,150 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Forms
+    # @label Checkbox Group
+    class CheckboxGroupComponentPreview < ViewComponent::Preview
+      # @label Default
+      # @display bg_color #f5f5f5
+      def default
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "interests",
+          collection: [ "Sports", "Music", "Art", "Technology" ],
+          legend: "Interests"
+        )
+      end
+
+      # @label With Selection
+      # @display bg_color #f5f5f5
+      def with_selection
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "roles",
+          collection: [
+            [ "Administrator", "admin" ],
+            [ "Editor", "editor" ],
+            [ "Viewer", "viewer" ]
+          ],
+          selected: [ "admin", "viewer" ],
+          legend: "User Roles"
+        )
+      end
+
+      # @label Horizontal Layout
+      # @display bg_color #f5f5f5
+      def horizontal
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "days",
+          collection: [ "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun" ],
+          orientation: :horizontal,
+          legend: "Available Days"
+        )
+      end
+
+      # @label With Hint
+      # @display bg_color #f5f5f5
+      def with_hint
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "notifications",
+          collection: [
+            [ "Email notifications", "email" ],
+            [ "Push notifications", "push" ],
+            [ "SMS notifications", "sms" ]
+          ],
+          legend: "Notification Preferences",
+          hint: "Select how you'd like to be notified"
+        )
+      end
+
+      # @label With Errors
+      # @display bg_color #f5f5f5
+      def with_errors
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "terms",
+          collection: [
+            [ "Terms of Service", "tos" ],
+            [ "Privacy Policy", "privacy" ]
+          ],
+          legend: "Legal Agreements",
+          errors: [ "You must accept all agreements to continue" ]
+        )
+      end
+
+      # @label Required Field
+      # @display bg_color #f5f5f5
+      def required
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "skills",
+          collection: [ "Ruby", "JavaScript", "Python", "Go" ],
+          legend: "Programming Skills",
+          required: true,
+          hint: "Select at least one skill"
+        )
+      end
+
+      # @label Disabled State
+      # @display bg_color #f5f5f5
+      def disabled
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "permissions",
+          collection: [
+            [ "Read", "read" ],
+            [ "Write", "write" ],
+            [ "Delete", "delete" ]
+          ],
+          selected: [ "read" ],
+          legend: "Permissions (Disabled)",
+          disabled: true
+        )
+      end
+
+      # @label All Variants
+      # @display bg_color #f5f5f5
+      def all_variants
+        render_with_template
+      end
+
+      # @label Orientations
+      # @display bg_color #f5f5f5
+      def orientations
+        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 orientation select { choices: [vertical, horizontal] }
+      # @param disabled toggle
+      # @param required toggle
+      # @param with_hint toggle
+      # @param with_error toggle
+      def playground(
+        variant: :primary,
+        size: :md,
+        orientation: :vertical,
+        disabled: false,
+        required: false,
+        with_hint: false,
+        with_error: false
+      )
+        render BetterUi::Forms::CheckboxGroupComponent.new(
+          name: "playground",
+          collection: [ "Option A", "Option B", "Option C" ],
+          legend: "Playground Group",
+          variant: variant.to_sym,
+          size: size.to_sym,
+          orientation: orientation.to_sym,
+          disabled: disabled,
+          required: required,
+          hint: with_hint ? "Select one or more options" : nil,
+          errors: with_error ? [ "Please make a selection" ] : nil
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<div class="space-y-4 p-4">
+  <% BetterUi::Forms::BaseComponent::SIZES.each do |size| %>
+    <div>
+      <%= render BetterUi::Forms::NumberInputComponent.new(
+        name: "example_#{size}",
+        label: "Size: #{size}",
+        placeholder: "0",
+        size: size,
+        min: 0,
+        max: 100
+      ) %>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,45 @@
+<div class="p-4 max-w-2xl">
+  <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">
+      <%= f.ui_number_input :age,
+        label: "Age",
+        hint: "Enter your age in years",
+        min: 0,
+        max: 120,
+        required: true,
+        size: :md
+      %>
+
+      <%= f.ui_number_input :price,
+        label: "Price",
+        placeholder: "0.00",
+        min: 0,
+        step: 0.01,
+        required: true
+      %>
+
+      <%= f.ui_number_input :quantity,
+        label: "Quantity",
+        hint: "How many items would you like?",
+        min: 1,
+        max: 100,
+        size: :lg
+      %>
+
+      <%= f.ui_number_input :weight,
+        label: "Weight (kg)",
+        placeholder: "0.0",
+        min: 0,
+        step: 0.1
+      %>
+
+      <div class="pt-2">
+        <%= render BetterUi::ButtonComponent.new(variant: :primary, type: :submit) do %>
+          Submit
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,211 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Forms
+    # @label Number Input
+    class NumberInputComponentPreview < ViewComponent::Preview
+      # @label Default
+      # @display bg_color #f5f5f5
+      def default
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "example",
+          label: "Example Number",
+          placeholder: "Enter a number"
+        )
+      end
+
+      # @label With Value
+      # @display bg_color #f5f5f5
+      def with_value
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "age",
+          label: "Age",
+          value: 25
+        )
+      end
+
+      # @label With Min, Max, and Step
+      # @display bg_color #f5f5f5
+      def with_constraints
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "price",
+          label: "Price",
+          placeholder: "0.00",
+          min: 0,
+          max: 10000,
+          step: 0.01,
+          hint: "Enter a price between $0 and $10,000"
+        )
+      end
+
+      # @label With Hint
+      # @display bg_color #f5f5f5
+      def with_hint
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "quantity",
+          label: "Quantity",
+          hint: "Enter the number of items you want to order",
+          min: 1,
+          max: 100
+        )
+      end
+
+      # @label With Errors
+      # @display bg_color #f5f5f5
+      def with_errors
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "age",
+          label: "Age",
+          value: -5,
+          min: 0,
+          max: 120,
+          errors: [
+            "Age must be positive",
+            "Age must be a valid number"
+          ]
+        )
+      end
+
+      # @label Required Field
+      # @display bg_color #f5f5f5
+      def required
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "employee_count",
+          label: "Number of Employees",
+          required: true,
+          min: 1,
+          placeholder: "Enter number"
+        )
+      end
+
+      # @label Disabled State
+      # @display bg_color #f5f5f5
+      def disabled
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "disabled_field",
+          label: "Disabled Field",
+          value: 42,
+          disabled: true
+        )
+      end
+
+      # @label Readonly State
+      # @display bg_color #f5f5f5
+      def readonly
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "readonly_field",
+          label: "Readonly Field",
+          value: 100,
+          readonly: true
+        )
+      end
+
+      # @label Without Spinners
+      # @display bg_color #f5f5f5
+      def without_spinners
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "price",
+          label: "Price (No Spinners)",
+          placeholder: "0.00",
+          min: 0,
+          step: 0.01,
+          show_spinner: false,
+          hint: "Clean input without up/down arrows"
+        )
+      end
+
+      # @label With Prefix Icon (Currency)
+      # @display bg_color #f5f5f5
+      def with_prefix_icon
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "price",
+          label: "Price",
+          placeholder: "0.00",
+          min: 0,
+          step: 0.01
+        ) do |component|
+          component.with_prefix_icon do
+            '<span class="text-gray-500 text-sm font-medium">$</span>'.html_safe
+          end
+        end
+      end
+
+      # @label With Suffix Icon (Unit)
+      # @display bg_color #f5f5f5
+      def with_suffix_icon
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "weight",
+          label: "Weight",
+          placeholder: "0",
+          min: 0,
+          step: 0.1
+        ) do |component|
+          component.with_suffix_icon do
+            '<span class="text-gray-500 text-sm font-medium">kg</span>'.html_safe
+          end
+        end
+      end
+
+      # @label With Both Icons
+      # @display bg_color #f5f5f5
+      def with_both_icons
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "temperature",
+          label: "Temperature",
+          placeholder: "0",
+          min: -100,
+          max: 100,
+          step: 0.5
+        ) do |component|
+          component.with_prefix_icon do
+            '<svg class="h-5 w-5 text-danger-500" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"/>
+            </svg>'.html_safe
+          end
+          component.with_suffix_icon do
+            '<span class="text-gray-500 text-sm font-medium">°C</span>'.html_safe
+          end
+        end
+      end
+
+      # @label All Sizes
+      # @display bg_color #f5f5f5
+      def all_sizes
+        render_with_template
+      end
+
+      # @label Form Integration
+      # @display bg_color #f5f5f5
+      def form_integration
+        render_with_template
+      end
+
+      # @label Playground
+      # @param size select { choices: [xs, sm, md, lg, xl] }
+      # @param disabled toggle
+      # @param readonly toggle
+      # @param required toggle
+      # @param show_spinner toggle
+      # @param with_hint toggle
+      # @param with_error toggle
+      # @param with_constraints toggle
+      def playground(size: :md, disabled: false, readonly: false, required: false, show_spinner: true, with_hint: false, with_error: false, with_constraints: false)
+        render BetterUi::Forms::NumberInputComponent.new(
+          name: "playground",
+          label: "Playground Number Input",
+          placeholder: "Enter a number...",
+          size: size.to_sym,
+          disabled: disabled,
+          readonly: readonly,
+          required: required,
+          show_spinner: show_spinner,
+          min: with_constraints ? 0 : nil,
+          max: with_constraints ? 100 : nil,
+          step: with_constraints ? 5 : nil,
+          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/password_input_component_preview/all_sizes.html.erb

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

data/spec/components/previews/better_ui/forms/password_input_component_preview/confirm_password_example.html.erb

@@ -0,0 +1,29 @@
+<div class="p-4 max-w-md space-y-4">
+  <%= render BetterUi::Forms::PasswordInputComponent.new(
+    name: "user[password]",
+    label: "New Password",
+    hint: "Must be at least 8 characters",
+    placeholder: "Enter new password",
+    required: true
+  ) do |component|
+    component.with_prefix_icon do
+      '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+      </svg>'.html_safe
+    end
+  end %>
+
+  <%= render BetterUi::Forms::PasswordInputComponent.new(
+    name: "user[password_confirmation]",
+    label: "Confirm Password",
+    hint: "Re-enter your password to confirm",
+    placeholder: "Confirm password",
+    required: true
+  ) do |component|
+    component.with_prefix_icon do
+      '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+      </svg>'.html_safe
+    end
+  end %>
+</div>

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

@@ -0,0 +1,34 @@
+<div class="p-4 max-w-2xl">
+  <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">
+      <%= f.ui_text_input :email,
+        label: "Email Address",
+        hint: "We'll never share your email",
+        placeholder: "you@example.com",
+        required: true,
+        size: :md
+      %>
+
+      <%= f.ui_password_input :password,
+        label: "Password",
+        hint: "Use 8 or more characters with a mix of letters, numbers & symbols",
+        placeholder: "Create a strong password",
+        required: true
+      %>
+
+      <%= f.ui_password_input :password_confirmation,
+        label: "Confirm Password",
+        placeholder: "Re-enter your password",
+        required: true
+      %>
+
+      <div class="pt-2">
+        <%= render BetterUi::ButtonComponent.new(variant: :primary, type: :submit) do %>
+          Create Account
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

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

@@ -0,0 +1,181 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module Forms
+    # @label Password Input
+    class PasswordInputComponentPreview < ViewComponent::Preview
+      # @label Default
+      # @display bg_color #f5f5f5
+      def default
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          placeholder: "Enter your password"
+        )
+      end
+
+      # @label With Value
+      # @display bg_color #f5f5f5
+      def with_value
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          value: "secret123"
+        )
+      end
+
+      # @label With Hint
+      # @display bg_color #f5f5f5
+      def with_hint
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          hint: "Must be at least 8 characters with 1 number and 1 special character",
+          placeholder: "Enter your password"
+        )
+      end
+
+      # @label With Errors
+      # @display bg_color #f5f5f5
+      def with_errors
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          value: "weak",
+          errors: [
+            "Password is too short (minimum is 8 characters)",
+            "Password must include at least one number",
+            "Password must include at least one special character"
+          ]
+        )
+      end
+
+      # @label Required Field
+      # @display bg_color #f5f5f5
+      def required
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          required: true,
+          placeholder: "Enter your password"
+        )
+      end
+
+      # @label Disabled State
+      # @display bg_color #f5f5f5
+      def disabled
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          value: "password123",
+          disabled: true
+        )
+      end
+
+      # @label Readonly State
+      # @display bg_color #f5f5f5
+      def readonly
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          value: "••••••••",
+          readonly: true
+        )
+      end
+
+      # @label With Prefix Icon (Lock)
+      # @display bg_color #f5f5f5
+      def with_prefix_icon
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          placeholder: "Enter your password"
+        ) do |component|
+          component.with_prefix_icon do
+            '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+            </svg>'.html_safe
+          end
+        end
+      end
+
+      # @label Complete Example
+      # @display bg_color #f5f5f5
+      def complete_example
+        render BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          hint: "Use 8 or more characters with a mix of letters, numbers & symbols",
+          placeholder: "Create a strong password",
+          required: true
+        ) do |component|
+          component.with_prefix_icon do
+            '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+            </svg>'.html_safe
+          end
+        end
+      end
+
+      # @label Confirm Password Example
+      # @display bg_color #f5f5f5
+      def confirm_password_example
+        render_with_template
+      end
+
+      # @label All Sizes
+      # @display bg_color #f5f5f5
+      def all_sizes
+        render_with_template
+      end
+
+      # @label Form Integration
+      # @display bg_color #f5f5f5
+      def form_integration
+        render_with_template
+      end
+
+      # @label Playground
+      # @param size select { choices: [xs, sm, md, lg, xl] }
+      # @param disabled toggle
+      # @param readonly toggle
+      # @param required toggle
+      # @param with_hint toggle
+      # @param with_error toggle
+      # @param with_prefix_icon toggle
+      def playground(
+        size: :md,
+        disabled: false,
+        readonly: false,
+        required: false,
+        with_hint: false,
+        with_error: false,
+        with_prefix_icon: false
+      )
+        component = BetterUi::Forms::PasswordInputComponent.new(
+          name: "user[password]",
+          label: "Password",
+          placeholder: "Enter your password",
+          size: size.to_sym,
+          disabled: disabled,
+          readonly: readonly,
+          required: required,
+          hint: with_hint ? "Must be at least 8 characters" : nil,
+          errors: with_error ? [ "Password is too weak" ] : nil
+        )
+
+        if with_prefix_icon
+          render component do |c|
+            c.with_prefix_icon do
+              '<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
+              </svg>'.html_safe
+            end
+          end
+        else
+          render component
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<div class="space-y-6 max-w-md">
+  <% countries = [["Italy", "it"], ["France", "fr"], ["Germany", "de"], ["Spain", "es"]] %>
+
+  <% BetterUi::Forms::BaseComponent::SIZES.each do |size| %>
+    <%= render BetterUi::Forms::SelectComponent.new(
+      name: "size_#{size}",
+      collection: countries,
+      label: "Size: #{size}",
+      placeholder: "Select a country...",
+      size: size
+    ) %>
+  <% end %>
+</div>