flowbite-components 0.2.0 → 0.4.0

data/app/components/flowbite/badge/pill.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Badge
+    # Renders a pill-shaped badge with fully rounded corners.
+    #
+    # @example Basic usage
+    #  <%= render(Flowbite::Badge::Pill.new) { "Default" } %>
+    #
+    # @see https://flowbite.com/docs/components/badge/
+    class Pill < Flowbite::Badge
+      class << self
+        # rubocop:disable Layout/LineLength
+        def styles
+          Flowbite::Styles.from_hash({
+            alternative: {
+              default: ["bg-neutral-primary-soft", "hover:bg-neutral-secondary-medium", "rounded-full", "text-heading"]
+            },
+            brand: {
+              default: ["bg-brand-softer", "hover:bg-brand-soft", "rounded-full", "text-fg-brand-strong"]
+            },
+            danger: {
+              default: ["bg-danger-soft", "hover:bg-danger-medium", "rounded-full", "text-fg-danger-strong"]
+            },
+            gray: {
+              default: ["bg-neutral-secondary-medium", "hover:bg-neutral-tertiary-medium", "rounded-full", "text-heading"]
+            },
+            success: {
+              default: ["bg-success-soft", "hover:bg-success-medium", "rounded-full", "text-fg-success-strong"]
+            },
+            warning: {
+              default: ["bg-warning-soft", "hover:bg-warning-medium", "rounded-full", "text-fg-warning"]
+            }
+          }.freeze)
+        end
+        # rubocop:enable Layout/LineLength
+      end
+    end
+  end
+end

data/app/components/flowbite/badge.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a badge component for displaying labels, counts, or status
+  # indicators.
+  #
+  # @example Basic usage
+  #  <%= render(Flowbite::Badge.new) { "Default" } %>
+  #
+  # @example With border
+  #  <%= render(Flowbite::Badge.new(bordered: true, style: :success)) { "Success" } %>
+  #
+  # @see https://flowbite.com/docs/components/badge/
+  # @lookbook_embed BadgePreview
+  class Badge < ViewComponent::Base
+    SIZES = {
+      default: ["text-xs", "font-medium", "px-1.5", "py-0.5"],
+      lg: ["text-sm", "font-medium", "px-2", "py-1"]
+    }.freeze
+
+    BORDER_CLASSES = {
+      alternative: ["border", "border-default"],
+      brand: ["border", "border-brand-subtle"],
+      danger: ["border", "border-danger-subtle"],
+      gray: ["border", "border-default-medium"],
+      success: ["border", "border-success-subtle"],
+      warning: ["border", "border-warning-subtle"]
+    }.freeze
+
+    class << self
+      def classes(size: :default, state: :default, style: :brand)
+        styles.fetch(style).fetch(state) + sizes.fetch(size)
+      end
+
+      def sizes
+        SIZES
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        Flowbite::Styles.from_hash({
+          alternative: {
+            default: ["bg-neutral-primary-soft", "hover:bg-neutral-secondary-medium", "rounded", "text-heading"]
+          },
+          brand: {
+            default: ["bg-brand-softer", "hover:bg-brand-soft", "rounded", "text-fg-brand-strong"]
+          },
+          danger: {
+            default: ["bg-danger-soft", "hover:bg-danger-medium", "rounded", "text-fg-danger-strong"]
+          },
+          gray: {
+            default: ["bg-neutral-secondary-medium", "hover:bg-neutral-tertiary-medium", "rounded", "text-heading"]
+          },
+          success: {
+            default: ["bg-success-soft", "hover:bg-success-medium", "rounded", "text-fg-success-strong"]
+          },
+          warning: {
+            default: ["bg-warning-soft", "hover:bg-warning-medium", "rounded", "text-fg-warning"]
+          }
+        }.freeze)
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    attr_reader :options
+
+    # @param bordered [Boolean] Whether to add a border to the badge.
+    # @param class [String, Array<String>] Additional CSS classes.
+    # @param dot [Boolean] Whether to show a dot indicator.
+    # @param href [String] If provided, renders the badge as a link.
+    # @param size [Symbol] The size of the badge (:default or :lg).
+    # @param style [Symbol] The color style (:alternative, :brand, :danger,
+    #   :gray, :success, :warning).
+    def initialize(bordered: false, class: nil, dot: false, href: nil,
+      size: :default, style: :brand, **options)
+      @bordered = bordered
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @dot = dot
+      @href = href
+      @size = size
+      @style = style
+      @options = options
+    end
+
+    def bordered?
+      !!@bordered
+    end
+
+    def dot?
+      !!@dot
+    end
+
+    def link?
+      @href.present?
+    end
+
+    private
+
+    def classes
+      result = self.class.classes(size: @size, state: :default, style: @style)
+      result += BORDER_CLASSES.fetch(@style) if bordered?
+      result += ["inline-flex", "items-center"] if dot?
+      result + @class
+    end
+
+    def tag_name
+      link? ? :a : :span
+    end
+
+    def tag_options
+      opts = {class: classes}
+      opts[:href] = @href if link?
+      opts.merge(options)
+    end
+  end
+end

data/app/components/flowbite/card.rb

@@ -70,14 +70,10 @@ module Flowbite
 
     # Returns the HTML to use for the title element if any
     def default_title
-      component = Flowbite::Card::Title.new(**default_title_options)
-
-      if default_title_content
-        component.with_content(default_title_content)
-      else
-        component
-      end
+      return unless title?
 
+      component = Flowbite::Card::Title.new(**default_title_options)
+      component.with_content(default_title_content)
       render(component)
     end
 
@@ -94,7 +90,7 @@ module Flowbite
     end
 
     def title?
-      @title.present?
+      default_title_content.present?
     end
   end
 end

data/app/components/flowbite/input_field/checkbox.rb

@@ -31,6 +31,13 @@ module Flowbite
 
       private
 
+      def default_input_arguments
+        args = super
+        args[:unchecked_value] = @input[:unchecked_value] if @input.key?(:unchecked_value)
+        args[:value] = @input[:value] if @input.key?(:value)
+        args
+      end
+
       def hint_classes
         if disabled?
           "text-xs font-normal text-fg-disabled"
@@ -39,13 +46,6 @@ module Flowbite
         end
       end
 
-      def input_arguments
-        args = super
-        args[:unchecked_value] = @input[:unchecked_value] if @input.key?(:unchecked_value)
-        args[:value] = @input[:value] if @input.key?(:value)
-        args
-      end
-
       def label_classes
         if disabled?
           "font-medium text-fg-disabled"

data/app/components/flowbite/input_field/input_field.html.erb

@@ -2,6 +2,7 @@
   <%= label %>
   <%= input %>
   <%= hint %>
+
   <% errors.each do |error| %>
     <%= render(Flowbite::Input::ValidationError.new) { error.upcase_first } %>
   <% end %>

data/app/components/flowbite/input_field/select.rb

@@ -19,7 +19,7 @@ module Flowbite
             form: @form,
             include_blank: @include_blank,
             multiple: @multiple,
-            options: input_options,
+            options: default_input_options,
             size: @size
           )
         )

data/app/components/flowbite/input_field.rb

@@ -155,11 +155,19 @@ module Flowbite
       return unless hint?
 
       component = Flowbite::Input::Hint.new(
+        **default_hint_arguments
+      ).with_content(default_hint_content)
+      render(component)
+    end
+
+    # @return [Hash] The keyword arguments for the hint component.
+    def default_hint_arguments
+      {
         attribute: @attribute,
+        class: @hint[:class],
         form: @form,
         options: default_hint_options
-      ).with_content(default_hint_content)
-      render(component)
+      }
     end
 
     def default_hint_content
@@ -180,23 +188,37 @@ module Flowbite
       }.merge(@hint[:options] || {})
     end
 
+    # Returns the HTML to use for the default input element.
+    def default_input
+      render(input_component.new(**default_input_arguments))
+    end
+
+    # @return [Hash] The keyword arguments for the default input component.
+    def default_input_arguments
+      {
+        attribute: @attribute,
+        class: @input[:class],
+        disabled: @disabled,
+        form: @form,
+        options: default_input_options,
+        size: @size
+      }
+    end
+
     # Returns a Hash with the default attributes to apply to the input element.
     #
     # The default attributes can be overriden by passing the `input[options]`
     # argument to the constructor.
     def default_input_options
-      if hint?
+      options = if hint?
         {
           "aria-describedby": id_for_hint_element
         }
       else
         {}
       end
-    end
 
-    # Returns the HTML to use for the default input element.
-    def default_input
-      render(input_component.new(**input_arguments))
+      options.merge(@input[:options] || {})
     end
 
     def default_label
@@ -241,20 +263,5 @@ module Flowbite
         .compact_blank
         .join("_")
     end
-
-    # @return [Hash] The keyword arguments for the input component.
-    def input_arguments
-      {
-        attribute: @attribute,
-        disabled: @disabled,
-        form: @form,
-        options: input_options,
-        size: @size
-      }
-    end
-
-    def input_options
-      default_input_options.merge(@input[:options] || {})
-    end
   end
 end

data/app/components/flowbite/pagination/chevron_left_icon.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Pagination
+    # Renders the chevron-left icon shown on a pagination's previous link.
+    #
+    # This is automatically used by {Flowbite::Pagination::PreviousLink}, but
+    # can be used standalone if needed.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Pagination::ChevronLeftIcon.new %>
+    class ChevronLeftIcon < ViewComponent::Base
+      def call
+        tag.svg(
+          class: "w-4 h-4 rtl:rotate-180",
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: 24,
+          height: 24,
+          fill: "none",
+          viewBox: "0 0 24 24"
+        ) do
+          tag.path(
+            stroke: "currentColor",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "m15 19-7-7 7-7"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/pagination/chevron_right_icon.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Pagination
+    # Renders the chevron-right icon shown on a pagination's next link.
+    #
+    # This is automatically used by {Flowbite::Pagination::NextLink}, but can
+    # be used standalone if needed.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Pagination::ChevronRightIcon.new %>
+    class ChevronRightIcon < ViewComponent::Base
+      def call
+        tag.svg(
+          class: "w-4 h-4 rtl:rotate-180",
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          width: 24,
+          height: 24,
+          fill: "none",
+          viewBox: "0 0 24 24"
+        ) do
+          tag.path(
+            stroke: "currentColor",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2",
+            d: "m9 5 7 7-7 7"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/pagination/gap.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Pagination
+    # Renders a gap indicator between page numbers in a pagination component.
+    #
+    # This is automatically used by {Flowbite::Pagination}, but can be used
+    # standalone if needed.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Pagination::Gap.new %>
+    class Gap < ViewComponent::Base
+      class << self
+        def classes
+          ["flex", "items-center", "justify-center", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "hover:text-heading", "font-medium", "text-sm", "w-9", "h-9", "focus:outline-none"]
+        end
+      end
+
+      def call
+        content_tag(:li, "…", class: self.class.classes)
+      end
+    end
+  end
+end

data/app/components/flowbite/pagination/link.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Pagination
+    # Renders a single page number link in a pagination component.
+    #
+    # This is automatically used by {Flowbite::Pagination}, but can be used
+    # standalone if needed.
+    #
+    # @param current [Boolean] Whether this link represents the current page.
+    # @param page [Integer] The page number to display.
+    # @param url [String] The URL for the page.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Pagination::Link.new(page: 2, url: "/posts?page=2") %>
+    class Link < ViewComponent::Base
+      class << self
+        def classes(current: false)
+          if current
+            ["flex", "items-center", "justify-center", "text-fg-brand", "bg-neutral-tertiary-medium", "box-border", "border", "border-default-medium", "hover:text-fg-brand", "font-medium", "text-sm", "w-9", "h-9", "focus:outline-none"]
+          else
+            ["flex", "items-center", "justify-center", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "hover:text-heading", "font-medium", "text-sm", "w-9", "h-9", "focus:outline-none"]
+          end
+        end
+      end
+
+      attr_reader :page, :url
+
+      def initialize(page:, url:, current: false)
+        @current = current
+        @page = page
+        @url = url
+      end
+
+      def call
+        content_tag(:li) { render_link }
+      end
+
+      def current?
+        !!@current
+      end
+
+      private
+
+      def render_link
+        link_options = {class: self.class.classes(current: current?)}
+        link_options[:aria] = {current: "page"} if current?
+        content_tag(:a, page, href: url, **link_options)
+      end
+    end
+  end
+end

data/app/components/flowbite/pagination/next_link.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Pagination
+    # Renders the "Next page" link in a pagination component.
+    #
+    # This is automatically used by {Flowbite::Pagination}, but can be used
+    # standalone if needed.
+    #
+    # @param disabled [Boolean] Whether to disable the link. When disabled, a
+    #   non-interactive +<span>+ is rendered instead of a link, so the control
+    #   can't be focused or activated.
+    # @param url [String] The URL for the next page. Ignored if +disabled+.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Pagination::NextLink.new(url: "/posts?page=2") %>
+    class NextLink < ViewComponent::Base
+      class << self
+        def classes(disabled: false)
+          classes = ["flex", "items-center", "justify-center", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "hover:text-heading", "font-medium", "rounded-e-base", "text-sm", "w-9", "h-9", "focus:outline-none"]
+          classes += ["opacity-50", "cursor-not-allowed"] if disabled
+          classes
+        end
+      end
+
+      attr_reader :url
+
+      def initialize(url:, disabled: false)
+        @disabled = disabled
+        @url = url
+      end
+
+      def call
+        content_tag(:li) { render_link }
+      end
+
+      def disabled?
+        !!@disabled
+      end
+
+      private
+
+      def render_link
+        content_tag(tag_name, tag_options) do
+          concat(content_tag(:span, "Next", class: "sr-only"))
+          concat(render(Flowbite::Pagination::ChevronRightIcon.new))
+        end
+      end
+
+      def tag_name
+        disabled? ? :span : :a
+      end
+
+      def tag_options
+        options = {class: self.class.classes(disabled: disabled?)}
+
+        if disabled?
+          options[:"aria-disabled"] = "true"
+        else
+          options[:href] = url
+        end
+
+        options
+      end
+    end
+  end
+end

data/app/components/flowbite/pagination/pagination.html.erb

@@ -0,0 +1,11 @@
+<%= tag.nav("aria-label": "Pagination", **options) do %>
+  <ul class="<%= list_classes.join(" ") %>">
+    <%= render(Flowbite::Pagination::PreviousLink.new(url: previous_url, disabled: previous_url.nil?)) %>
+
+    <% pages.each do |page| %>
+      <%= page %>
+    <% end %>
+
+    <%= render(Flowbite::Pagination::NextLink.new(url: next_url, disabled: next_url.nil?)) %>
+  </ul>
+<% end %>

data/app/components/flowbite/pagination/previous_link.rb

@@ -0,0 +1,67 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Pagination
+    # Renders the "Previous page" link in a pagination component.
+    #
+    # This is automatically used by {Flowbite::Pagination}, but can be used
+    # standalone if needed.
+    #
+    # @param disabled [Boolean] Whether to disable the link. When disabled, a
+    #   non-interactive +<span>+ is rendered instead of a link, so the control
+    #   can't be focused or activated.
+    # @param url [String] The URL for the previous page. Ignored if +disabled+.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Pagination::PreviousLink.new(url: "/posts?page=1") %>
+    class PreviousLink < ViewComponent::Base
+      class << self
+        def classes(disabled: false)
+          classes = ["flex", "items-center", "justify-center", "text-body", "bg-neutral-secondary-medium", "box-border", "border", "border-default-medium", "hover:bg-neutral-tertiary-medium", "hover:text-heading", "font-medium", "rounded-s-base", "text-sm", "w-9", "h-9", "focus:outline-none"]
+          classes += ["opacity-50", "cursor-not-allowed"] if disabled
+          classes
+        end
+      end
+
+      attr_reader :url
+
+      def initialize(url:, disabled: false)
+        @disabled = disabled
+        @url = url
+      end
+
+      def call
+        content_tag(:li) { render_link }
+      end
+
+      def disabled?
+        !!@disabled
+      end
+
+      private
+
+      def render_link
+        content_tag(tag_name, tag_options) do
+          concat(content_tag(:span, "Previous", class: "sr-only"))
+          concat(render(Flowbite::Pagination::ChevronLeftIcon.new))
+        end
+      end
+
+      def tag_name
+        disabled? ? :span : :a
+      end
+
+      def tag_options
+        options = {class: self.class.classes(disabled: disabled?)}
+
+        if disabled?
+          options[:"aria-disabled"] = "true"
+        else
+          options[:href] = url
+        end
+
+        options
+      end
+    end
+  end
+end

data/app/components/flowbite/pagination.rb

@@ -0,0 +1,63 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders pagination controls for navigating between pages of results.
+  #
+  # This component doesn't know about pages, page numbers, or any pagination
+  # library. The caller decides which pages to show (including where to
+  # place gaps) using the +pages+ slot, and provides the URLs for the
+  # previous/next links directly.
+  #
+  # @example Usage
+  #   <%= render(Flowbite::Pagination.new(
+  #     previous_url: (posts_path(page: @pagy.page - 1) if @pagy.page > 1),
+  #     next_url: (posts_path(page: @pagy.page + 1) if @pagy.page < @pagy.pages)
+  #   )) do |pagination| %>
+  #     <% (1..@pagy.pages).each do |page| %>
+  #       <% pagination.with_page do %>
+  #         <%= render(Flowbite::Pagination::Link.new(
+  #           page: page,
+  #           url: posts_path(page: page),
+  #           current: page == @pagy.page
+  #         )) %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @viewcomponent_slot [Flowbite::Pagination::Link, Flowbite::Pagination::Gap]
+  #   pages The pages to show. Use {Flowbite::Pagination::Link} for page
+  #   numbers, and {Flowbite::Pagination::Gap} where numbers are skipped.
+  #
+  # @see https://flowbite.com/docs/components/pagination/
+  # @lookbook_embed PaginationPreview
+  class Pagination < ViewComponent::Base
+    renders_many :pages
+
+    class << self
+      def classes
+        ["flex", "-space-x-px", "text-sm"]
+      end
+    end
+
+    attr_reader :next_url, :options, :previous_url
+
+    # @param class [Array<String>] Additional CSS classes for the list element.
+    # @param next_url [String] The URL for the next page. Omit to disable the
+    #   next link, e.g. when already on the last page.
+    # @param options [Hash] Additional HTML options for the nav element.
+    # @param previous_url [String] The URL for the previous page. Omit to
+    #   disable the previous link, e.g. when already on the first page.
+    def initialize(next_url: nil, previous_url: nil, class: nil, **options)
+      @next_url = next_url
+      @previous_url = previous_url
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @options = options
+    end
+
+    private
+
+    def list_classes
+      self.class.classes + @class
+    end
+  end
+end