flowbite-components 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ca94dfc5af1c662f4a7cfb77f038f60402daf411673078c30b77672280c6055
-  data.tar.gz: 60ad1e86847bd59c9b8ba598d44562cbd8f24776b9e696bc55e60550da9cfc0b
+  metadata.gz: 2df1ff6599a8e3fa6a41cd9b6329654d3ebb532eae460f37dceb1c8e9b3e0be5
+  data.tar.gz: 33362285ce24f76a7490f646dffb524a66f3c44c584e8da5d66abad27a74f809
 SHA512:
-  metadata.gz: 2676a2b3da22cae60d35793a71d2e24637edb9cd61f5d3096c95352b1f6426d3e1116d124a474f05fa5198f4ce7935b1f0499f1ee82eb756101a9229a1ecf6bc
-  data.tar.gz: 18fc7aaad24ffad2d9ec01a5ae772bf0b7194a24d3d91800a535fa3b3fd22017f1fac025791ff59a4a6de249d931abf2d30d16e88e3e1f50e78fc04d747a9899
+  metadata.gz: 9968e1c9ad9230e73475ddc85d1069395444700af804f5712b8f3bef027fd4744b3eec136cd3edc737f947aaf478b5fa22279ed3f9494735684c8d66e93690c4
+  data.tar.gz: 3d3f420dbf18ceb93de989ea5818aff5551279cc29e11e4c326ccb2148ca76dfaf8c451571c911c0149ff129f772d674752ec7b126ece767bd7f34d3b1a43503

data/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.3.0]
+
+### Added
+
+* Badge component.
+* Sidebar component.
+
+### Changed
+
+### Fixed
+
+* `:class` arguments to subcomponents (ie `hint` and `input`) of Flowbite::InputField are now forwarded correctly. If passed as `:class` the given value is added to the existing class names, if passed in `options[:class]` the existing class attribute is replaced.
+
+
 ## [0.2.0]
 
 ### Added

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

@@ -0,0 +1,4 @@
+<%= content_tag(tag_name, **tag_options) do %>
+  <% if dot? %><%= render(Flowbite::Badge::Dot.new(style: @style)) %><% end %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Badge
+    # Renders a colored dot indicator for use inside a badge.
+    #
+    # @param style [Symbol] The color style of the dot (:alternative, :brand,
+    #   :danger, :gray, :success, :warning).
+    class Dot < ViewComponent::Base
+      CLASSES = {
+        alternative: ["bg-heading", "me-1", "rounded-full"],
+        brand: ["bg-fg-brand-strong", "me-1", "rounded-full"],
+        danger: ["bg-fg-danger-strong", "me-1", "rounded-full"],
+        gray: ["bg-heading", "me-1", "rounded-full"],
+        success: ["bg-fg-success-strong", "me-1", "rounded-full"],
+        warning: ["bg-fg-warning", "me-1", "rounded-full"]
+      }.freeze
+
+      SIZES = {
+        default: ["h-1.5", "w-1.5"]
+      }.freeze
+
+      class << self
+        def classes(size: :default, style: :brand)
+          CLASSES.fetch(style) + sizes.fetch(size)
+        end
+
+        def sizes
+          SIZES
+        end
+      end
+
+      attr_reader :size, :style
+
+      def initialize(size: :default, style: :brand)
+        @size = size
+        @style = style
+      end
+
+      def call
+        content_tag(:span, nil, class: self.class.classes(size: size, style: style))
+      end
+    end
+  end
+end

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/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/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/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/toast/toast.html.erb

@@ -1,8 +1,8 @@
-<div
-  class="<%= container_classes.join(" ") %>"
-  role="alert"
-  <%= options.map { |k, v| "#{k}=\"#{v}\"" }.join(" ").html_safe %>
->
+<%= tag.div(
+  class: container_classes.join(" "),
+  role: "alert",
+  **options,
+) do %>
   <%= render Flowbite::Toast::Icon.new(style: style) %>
 
   <div class="ms-3 text-sm font-normal"><%= message %></div>
@@ -37,4 +37,4 @@
       </svg>
     </button>
   <% end %>
-</div>
+<% end %>

data/lib/flowbite/components/version.rb

@@ -2,6 +2,6 @@
 
 module Flowbite
   module Components
-    VERSION = "0.2.0"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flowbite-components
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.0
 platform: ruby
 authors:
 - Jakob Skjerning
@@ -49,6 +49,10 @@ files:
 - LICENSE
 - README.md
 - app/assets/tailwind/flowbite_components/engine.css
+- app/components/flowbite/badge.rb
+- app/components/flowbite/badge/badge.html.erb
+- app/components/flowbite/badge/dot.rb
+- app/components/flowbite/badge/pill.rb
 - app/components/flowbite/breadcrumb.rb
 - app/components/flowbite/breadcrumb/home_icon.rb
 - app/components/flowbite/breadcrumb/item.rb
@@ -95,6 +99,9 @@ files:
 - app/components/flowbite/input_field/textarea.rb
 - app/components/flowbite/input_field/url.rb
 - app/components/flowbite/link.rb
+- app/components/flowbite/sidebar.rb
+- app/components/flowbite/sidebar/item.rb
+- app/components/flowbite/sidebar/navigation.rb
 - app/components/flowbite/style.rb
 - app/components/flowbite/styles.rb
 - app/components/flowbite/toast.rb
@@ -128,7 +135,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.3
+rubygems_version: 4.0.6
 specification_version: 4
 summary: ViewComponents using the Flowbite design system
 test_files: []