flowbite-components 0.2.0 → 0.4.0

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

data/app/components/flowbite/sidebar/item.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Sidebar
+    # Renders a sidebar navigation item.
+    #
+    # Each item renders as a list item containing a link. Optionally, an icon
+    # can be provided using the +icon+ slot, which will be displayed before the
+    # label text.
+    #
+    # @example Basic item
+    #   <%= render Flowbite::Sidebar::Item.new(href: "/dashboard") { "Dashboard" } %>
+    #
+    # @example Item with icon
+    #   <%= render(Flowbite::Sidebar::Item.new(href: "/dashboard")) do |item| %>
+    #     <% item.with_icon do %>
+    #       <svg class="w-5 h-5" ...>...</svg>
+    #     <% end %>
+    #     Dashboard
+    #   <% end %>
+    #
+    # @viewcomponent_slot icon An optional icon displayed before the label text.
+    class Item < ViewComponent::Base
+      renders_one :icon
+
+      attr_reader :href, :options
+
+      class << self
+        def classes
+          [
+            "flex", "items-center", "px-2", "py-1.5", "text-body",
+            "rounded-base", "hover:bg-neutral-tertiary", "hover:text-fg-brand", "group"
+          ]
+        end
+      end
+
+      # @param class [Array<String>] Additional CSS classes for the link element.
+      # @param href [String] The URL for the navigation link.
+      # @param options [Hash] Additional HTML attributes for the link element.
+      def initialize(href:, class: nil, **options)
+        super()
+        @class = Array.wrap(binding.local_variable_get(:class))
+        @href = href
+        @options = options
+      end
+
+      def call
+        content_tag(:li) do
+          link_options = {class: link_classes}.merge(options)
+          content_tag(:a, href: href, **link_options) do
+            concat(icon) if icon?
+            concat(content_tag(:span, content, class: label_classes))
+          end
+        end
+      end
+
+      private
+
+      def label_classes
+        "ms-3" if icon?
+      end
+
+      def link_classes
+        self.class.classes + @class
+      end
+    end
+  end
+end

data/app/components/flowbite/sidebar/navigation.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Sidebar
+    # Renders the navigation list for a sidebar.
+    #
+    # This component renders a +<ul>+ with navigation items. It can be used
+    # inside a {Flowbite::Sidebar} for a fixed-position sidebar, or standalone
+    # in any layout that needs sidebar-style navigation.
+    #
+    # @example Inside a Sidebar
+    #   <%= render(Flowbite::Sidebar.new) do %>
+    #     <%= render(Flowbite::Sidebar::Navigation.new) do |nav| %>
+    #       <% nav.with_item do %>
+    #         <%= render(Flowbite::Sidebar::Item.new(href: "/")) { "Home" } %>
+    #       <% end %>
+    #     <% end %>
+    #   <% end %>
+    #
+    # @example Standalone
+    #   <%= render(Flowbite::Sidebar::Navigation.new) do |nav| %>
+    #     <% nav.with_item do %>
+    #       <%= render(Flowbite::Sidebar::Item.new(href: "/")) { "Home" } %>
+    #     <% end %>
+    #   <% end %>
+    class Navigation < ViewComponent::Base
+      renders_many :items
+
+      class << self
+        def classes
+          ["space-y-2", "font-medium"]
+        end
+      end
+
+      # @param class [Array<String>] Additional CSS classes for the list element.
+      # @param options [Hash] Additional HTML options for the list element.
+      def initialize(class: nil, **options)
+        super()
+        @class = Array.wrap(binding.local_variable_get(:class))
+        @options = options
+      end
+
+      def call
+        content_tag(:ul, list_options) do
+          items.each do |item|
+            concat(item)
+          end
+        end
+      end
+
+      private
+
+      def list_classes
+        self.class.classes + @class
+      end
+
+      def list_options
+        {class: list_classes}.merge(@options)
+      end
+    end
+  end
+end

data/app/components/flowbite/sidebar.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a fixed-position sidebar container.
+  #
+  # Use {Flowbite::Sidebar} as the outer shell and
+  # {Flowbite::Sidebar::Navigation} inside it to render the list of
+  # {Flowbite::Sidebar::Item}s.
+  #
+  # @example Usage
+  #   <%= render(Flowbite::Sidebar.new) do %>
+  #     <%= render(Flowbite::Sidebar::Navigation.new) do |nav| %>
+  #       <% nav.with_item do %>
+  #         <%= render(Flowbite::Sidebar::Item.new(href: "/dashboard")) { "Dashboard" } %>
+  #       <% end %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @see https://flowbite.com/docs/components/sidebar/
+  # @lookbook_embed SidebarPreview
+  class Sidebar < ViewComponent::Base
+    class << self
+      def classes
+        [
+          "fixed", "top-0", "left-0", "z-40", "w-64", "h-screen",
+          "transition-transform", "-translate-x-full", "sm:translate-x-0"
+        ]
+      end
+    end
+
+    # @param class [Array<String>] Additional CSS classes for the sidebar
+    #   container.
+    # @param options [Hash] Additional HTML options for the sidebar container.
+    def initialize(class: nil, **options)
+      super()
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @options = options
+    end
+
+    def call
+      content_tag(:aside, aside_options) do
+        content_tag(:div, class: wrapper_classes) do
+          content
+        end
+      end
+    end
+
+    private
+
+    def aside_classes
+      self.class.classes + @class
+    end
+
+    def aside_options
+      {class: aside_classes, "aria-label": "Sidebar"}.merge(@options)
+    end
+
+    def wrapper_classes
+      ["h-full", "px-3", "py-4", "overflow-y-auto", "bg-neutral-primary-soft"]
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<%= tag.div(role: "status", **options) do %>
+  <svg
+    aria-hidden="true"
+    class="<%= classes.join(" ") %>"
+    fill="none"
+    viewBox="0 0 100 101"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+      fill="currentColor"
+    />
+
+    <path
+      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+    />
+  </svg>
+
+  <span class="sr-only"><%= message %></span>
+<% end %>

data/app/components/flowbite/spinner.rb

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a loading spinner.
+  #
+  # @example Basic usage
+  #  <%= render(Flowbite::Spinner.new) %>
+  #
+  # @example With a custom style and size
+  #  <%= render(Flowbite::Spinner.new(style: :success, size: :lg)) %>
+  #
+  # @see https://flowbite.com/docs/components/spinner/
+  # @lookbook_embed SpinnerPreview
+  class Spinner < ViewComponent::Base
+    SIZES = {
+      xs: ["w-4", "h-4"],
+      sm: ["w-6", "h-6"],
+      default: ["w-8", "h-8"],
+      lg: ["w-10", "h-10"],
+      xl: ["w-12", "h-12"]
+    }.freeze
+
+    class << self
+      def classes(size: :default, style: :brand)
+        style = styles.fetch(style)
+        ["text-neutral-tertiary", "animate-spin"] + style.fetch(:default) + sizes.fetch(size)
+      end
+
+      def sizes
+        SIZES
+      end
+
+      def styles
+        Flowbite::Styles.from_hash(
+          {
+            brand: {default: ["fill-brand"]},
+            danger: {default: ["fill-danger"]},
+            success: {default: ["fill-success"]},
+            warning: {default: ["fill-warning"]}
+          }.freeze
+        )
+      end
+    end
+
+    attr_reader :message, :options
+
+    # @param class [String, Array<String>] Additional CSS classes for the spinner icon.
+    # @param message [String] Text for screen readers announcing the loading state.
+    # @param options [Hash] Additional HTML options for the container element.
+    # @param size [Symbol] The size of the spinner (:xs, :sm, :default, :lg, :xl).
+    # @param style [Symbol] The color style of the spinner (:brand, :danger, :success, :warning).
+    def initialize(class: nil, message: "Loading...", size: :default, style: :brand, **options)
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @message = message
+      @size = size
+      @style = style
+      @options = options
+    end
+
+    private
+
+    def classes
+      self.class.classes(size: @size, style: @style) + @class
+    end
+  end
+end

data/app/components/flowbite/toast/close_button.html.erb

@@ -0,0 +1,17 @@
+<%= tag.button(**button_options) do %>
+  <svg
+    aria-hidden="true"
+    class="w-3 h-3"
+    fill="none"
+    viewBox="0 0 14 14"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    />
+  </svg>
+<% end %>

data/app/components/flowbite/toast/close_button.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Toast
+    # Renders the close button of a toast notification.
+    #
+    # @param options [Hash] Additional HTML options for the button element.
+    #   These are merged over the default options.
+    class CloseButton < ViewComponent::Base
+      class << self
+        # Styles from https://flowbite.com/docs/components/toast/#default-toast
+        # rubocop:disable Layout/LineLength
+        def classes
+          ["ms-auto", "flex", "items-center", "justify-center", "text-body", "hover:text-heading", "bg-transparent", "box-border", "border", "border-transparent", "hover:bg-neutral-secondary-medium", "focus:ring-4", "focus:ring-neutral-tertiary", "font-medium", "leading-5", "rounded", "text-sm", "h-8", "w-8", "focus:outline-none"]
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      def initialize(**options)
+        @options = options || {}
+      end
+
+      def button_options
+        {
+          aria: {label: "Close"},
+          class: self.class.classes,
+          type: "button"
+        }.merge(@options)
+      end
+    end
+  end
+end

data/app/components/flowbite/toast/icon.html.erb

@@ -1,5 +1,11 @@
 <div class="<%= container_classes.join(" ") %>">
-  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-    <path d="<%= svg_path %>"/>
+  <svg
+    aria-hidden="true"
+    class="w-4 h-4"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="<%= svg_path %>" />
   </svg>
 </div>