flowbite-components 0.3.0 → 0.4.0

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

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

@@ -0,0 +1,14 @@
+<% if label_outside? %>
+  <div class="flex justify-between mb-1">
+    <span class="text-sm font-medium text-body"><%= label %></span>
+    <span class="text-sm font-medium text-body"><%= percentage %></span>
+  </div>
+<% end %>
+
+<%= tag.div(class: classes.join(" "), **track_options) do %>
+  <div class="<%= bar_classes.join(" ") %>" style="<%= width_style %>">
+    <% if label_inside? %>
+      <%= percentage %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/flowbite/progress.rb

@@ -0,0 +1,163 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a progress bar indicating the completion of a task.
+  #
+  # The progress value is clamped to the range 0 to 100 and used as the
+  # width of the bar.
+  #
+  # The track is rendered with role="progressbar" and the matching ARIA
+  # value attributes. The +label+, if given, is used as its accessible name.
+  # Pass +aria: {label: "..."}+ to name a progress bar without a visible
+  # label.
+  #
+  # @example Basic usage
+  #  <%= render(Flowbite::Progress.new(progress: 45)) %>
+  #
+  # @example With a custom style and size
+  #  <%= render(Flowbite::Progress.new(progress: 45, size: :lg, style: :success)) %>
+  #
+  # @example With the label inside the bar
+  #  <%= render(Flowbite::Progress.new(label_position: :inside, progress: 45)) %>
+  #
+  # @example With a label outside the bar
+  #  <%= render(Flowbite::Progress.new(label: "Flowbite", label_position: :outside, progress: 45)) %>
+  #
+  # @example With an accessible name and no visible label
+  #  <%= render(Flowbite::Progress.new(aria: {label: "Upload progress"}, progress: 45)) %>
+  #
+  # @see https://flowbite.com/docs/components/progress/
+  # @lookbook_embed ProgressPreview
+  class Progress < ViewComponent::Base
+    LABEL_POSITIONS = [:inside, :none, :outside].freeze
+
+    SIZES = {
+      sm: ["h-1.5"],
+      default: ["h-2"],
+      lg: ["h-2.5"]
+    }.freeze
+
+    # Only vertical padding, so the bar can shrink to zero width at 0%.
+    INSIDE_LABEL_CLASSES = [
+      "text-xs", "font-medium", "text-white", "text-center", "py-0.5",
+      "leading-none", "rounded-full", "h-4", "flex", "items-center",
+      "justify-center"
+    ].freeze
+
+    class << self
+      # @return [Array<String>] The CSS classes for the bar indicating the
+      #   progress.
+      def bar_classes(label_position: :none, size: :default, style: :brand)
+        style = styles.fetch(style)
+        if label_position == :inside
+          style.fetch(:default) + INSIDE_LABEL_CLASSES
+        else
+          style.fetch(:default) + sizes.fetch(size) + ["rounded-full"]
+        end
+      end
+
+      # @return [Array<String>] The CSS classes for the track containing the
+      #   bar.
+      def classes(label_position: :none, size: :default)
+        result = ["w-full", "bg-neutral-quaternary", "rounded-full"]
+        result += sizes.fetch(size) unless label_position == :inside
+        result
+      end
+
+      def sizes
+        SIZES
+      end
+
+      def styles
+        Flowbite::Styles.from_hash(
+          {
+            brand: {default: ["bg-brand"]},
+            danger: {default: ["bg-danger"]},
+            dark: {default: ["bg-dark"]},
+            success: {default: ["bg-success"]},
+            warning: {default: ["bg-warning"]}
+          }.freeze
+        )
+      end
+    end
+
+    attr_reader :label, :label_position, :options
+
+    # @param class [String, Array<String>] Additional CSS classes for the
+    #   track element.
+    # @param label [String] Text to show next to the percentage when
+    #   label_position is :outside. Also used as the accessible name of the
+    #   progress bar.
+    # @param label_position [Symbol] Where to show the percentage (:inside,
+    #   :none, :outside).
+    # @param options [Hash] Additional HTML options for the track element.
+    # @param progress [Numeric] The progress in percent. Values outside the
+    #   range 0 to 100 are clamped.
+    # @param size [Symbol] The height of the progress bar (:sm, :default,
+    #   :lg). Ignored when label_position is :inside.
+    # @param style [Symbol] The color style of the bar (:brand, :danger,
+    #   :dark, :success, :warning).
+    def initialize(progress:, class: nil, label: nil, label_position: :none, size: :default, style: :brand, **options)
+      unless LABEL_POSITIONS.include?(label_position)
+        raise ArgumentError,
+          "Unknown label_position: #{label_position}. " \
+          "Available label positions: #{LABEL_POSITIONS.join(", ")}"
+      end
+
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @label = label
+      @label_position = label_position
+      @options = options
+      @progress = progress
+      @size = size
+      @style = style
+    end
+
+    # @return [Array<String>] The CSS classes for the bar.
+    def bar_classes
+      self.class.bar_classes(label_position: label_position, size: @size, style: @style)
+    end
+
+    # @return [Array<String>] The CSS classes for the track.
+    def classes
+      self.class.classes(label_position: label_position, size: @size) + @class
+    end
+
+    def label_inside?
+      label_position == :inside
+    end
+
+    def label_outside?
+      label_position == :outside
+    end
+
+    # @return [String] The progress formatted as a percentage, ie "45%".
+    def percentage
+      "#{rounded_progress}%"
+    end
+
+    # @return [Numeric] The progress clamped to the range 0 to 100.
+    def progress
+      @progress.clamp(0, 100)
+    end
+
+    # @return [Numeric] The clamped progress rounded to one decimal place.
+    #   Whole numbers are returned as Integers, ie 45 rather than 45.0.
+    def rounded_progress
+      value = progress.to_f.round(1)
+      (value == value.to_i) ? value.to_i : value
+    end
+
+    # @return [Hash] The HTML attributes for the track element, including
+    #   the progressbar role and ARIA values. Merged with the given options.
+    def track_options
+      aria = {label: label.presence, valuemax: 100, valuemin: 0, valuenow: rounded_progress}.compact
+      {aria: aria, role: "progressbar"}.deep_merge(options)
+    end
+
+    # @return [String] The inline style setting the width of the bar.
+    def width_style
+      "width: #{percentage}"
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+<%= tag.div(class: container_classes.join(" "), **options) do %>
+  <div class="flex items-center space-x-1">
+    <% stars.each do |filled| %>
+      <%= render(Flowbite::Rating::Star.new(filled: filled, size: size)) %>
+    <% end %>
+  </div>
+
+  <span class="sr-only"><%= screen_reader_text %></span>
+
+  <% if text.present? %>
+    <p class="ms-2 text-sm font-medium text-body"><%= text %></p>
+  <% end %>
+<% end %>

data/app/components/flowbite/rating/star.html.erb

@@ -0,0 +1,13 @@
+<svg
+  aria-hidden="true"
+  class="<%= classes.join(" ") %>"
+  fill="currentColor"
+  height="24"
+  viewBox="0 0 24 24"
+  width="24"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M13.849 4.22c-.684-1.626-3.014-1.626-3.698 0L8.397 8.387l-4.552.361c-1.775.14-2.495 2.331-1.142 3.477l3.468 2.937-1.06 4.392c-.413 1.713 1.472 3.067 2.992 2.149L12 19.35l3.897 2.354c1.52.918 3.405-.436 2.992-2.15l-1.06-4.39 3.468-2.938c1.353-1.146.633-3.336-1.142-3.477l-4.552-.36-1.754-4.17Z"
+  />
+</svg>

data/app/components/flowbite/rating/star.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Rating
+    # Renders a single star of a rating.
+    #
+    # @param filled [Boolean] Whether the star is filled (default: true).
+    # @param size [Symbol] The size of the star (:default, :md, :lg).
+    #
+    # @see https://flowbite.com/docs/components/rating/
+    class Star < ViewComponent::Base
+      SIZES = {
+        default: ["w-5", "h-5"],
+        md: ["w-6", "h-6"],
+        lg: ["w-7", "h-7"]
+      }.freeze
+
+      class << self
+        def classes(size: :default, state: :filled, style: :default)
+          sizes.fetch(size) + styles.fetch(style).fetch(state)
+        end
+
+        def sizes
+          SIZES
+        end
+
+        def styles
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                empty: ["text-fg-disabled"],
+                filled: ["text-fg-yellow"]
+              }
+            }.freeze
+          )
+        end
+      end
+
+      attr_reader :size
+
+      def initialize(filled: true, size: :default)
+        @filled = filled
+        @size = size
+      end
+
+      def classes
+        self.class.classes(size: size, state: state)
+      end
+
+      def filled?
+        !!@filled
+      end
+
+      def state
+        filled? ? :filled : :empty
+      end
+    end
+  end
+end

data/app/components/flowbite/rating.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a star rating, showing a value out of a maximum number of stars.
+  #
+  # The number of filled stars is the value rounded to the nearest whole
+  # number (halves round up), clamped between 0 and +max+. The remaining stars
+  # are rendered as empty stars. The exact value is announced to screen
+  # readers.
+  #
+  # @example Basic usage
+  #  <%= render(Flowbite::Rating.new(value: 4)) %>
+  #
+  # @example With text and a custom size
+  #  <%= render(Flowbite::Rating.new(size: :lg, text: "4.95 out of 5", value: 4.95)) %>
+  #
+  # @see https://flowbite.com/docs/components/rating/
+  # @lookbook_embed RatingPreview
+  class Rating < ViewComponent::Base
+    class << self
+      def classes
+        ["flex", "items-center"]
+      end
+    end
+
+    attr_reader :max, :options, :size, :text, :value
+
+    # @param class [String, Array<String>] Additional CSS classes for the
+    #   container element.
+    # @param max [Integer] The total number of stars to render (default: 5).
+    # @param options [Hash] Additional HTML options for the container element.
+    # @param size [Symbol] The size of the stars (:default, :md, :lg).
+    # @param text [String] Optional text rendered after the stars, e.g.
+    #   "4.95 out of 5".
+    # @param value [Numeric] The rating value, e.g. 4 or 4.95.
+    def initialize(value:, class: nil, max: 5, size: :default, text: nil, **options)
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @max = max
+      @options = options
+      @size = size
+      @text = text
+      @value = value
+    end
+
+    def container_classes
+      self.class.classes + @class
+    end
+
+    # @return [Integer] The number of stars to render as filled.
+    def filled_count
+      value.round.clamp(0, max)
+    end
+
+    # @return [String] The rating as announced to screen readers.
+    def screen_reader_text
+      "Rated #{value} out of #{max}"
+    end
+
+    # @return [Array<Boolean>] One entry per star, true if the star is filled.
+    def stars
+      Array.new(max) { |index| index < filled_count }
+    end
+  end
+end