flowbite-components 0.1.4 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0013a87a4e4924d4ca2fe6f3ba8eff3f9f266be23a15b07cbddd25164d436805
-  data.tar.gz: d50dd418f1403dc2375754f4b0d295c9c2d4f1a09c0904bffce88fc76268135b
+  metadata.gz: 0ca94dfc5af1c662f4a7cfb77f038f60402daf411673078c30b77672280c6055
+  data.tar.gz: 60ad1e86847bd59c9b8ba598d44562cbd8f24776b9e696bc55e60550da9cfc0b
 SHA512:
-  metadata.gz: e410ab1f18d6264c18cae8e5c0322c612422e33aa4136ab99ff21e6b0564ceaeb95decd262a265d72b9029022ff76965c19eeb0438d3d295c85cd2962986a3ab
-  data.tar.gz: 168b101505fbddfc952c334cc169c1e12e5f129beb8c3f884ffd32047c0548bd22655fd03a6da3589f9ff5071c94850d727761c7aacb96b2712c09420657147c
+  metadata.gz: 2676a2b3da22cae60d35793a71d2e24637edb9cd61f5d3096c95352b1f6426d3e1116d124a474f05fa5198f4ce7935b1f0499f1ee82eb756101a9229a1ecf6bc
+  data.tar.gz: 18fc7aaad24ffad2d9ec01a5ae772bf0b7194a24d3d91800a535fa3b3fd22017f1fac025791ff59a4a6de249d931abf2d30d16e88e3e1f50e78fc04d747a9899

data/CHANGELOG.md

@@ -3,13 +3,23 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
-## [Unreleased]
+## [0.2.0]
 
 ### Added
 
+* Breadcrumb component, including Flowbite::Breadcrumb::Item with Flowbite::Breadcrumb::Item::First and Flowbite::Breadcrumb::Item::Current variants.
+* DateTime input field components.
+* Toast component.
+* Ruby 4.0 support (no changes).
+
 ### Changed
 
-### Removed
+* [BREAKING] The API of Flowbite::InputField::RadioButton now follows the same structure as the other components for hints. Instead of passing a String (`hint: "This is the hint"`) you now have to pass a Hash that's passed along to the Hint component (i.e. `hint: {content: "This is the hint"}`), allowing you to customize other options (eg HTML attributes like class) as well.
+* [BREAKING] Flowbite::Input::Field has been renamed to Flowbite::Input. All individual input components now use that as their superclass. This matches the class hierarchy of Flowbite::InputField::* classes better and allows Flowbite::Input to automagically appear in the documentation.
+
+### Fixed
+
+* Flowbite::InputField classes now correctly add their options to the container element, so you can add id attributes or connect Stimulus controllers again.
 
 
 ## [0.1.4]
@@ -19,7 +29,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * Flowbite::Link component to render links.
 * Flowbite::Card now displays a title via the title argument/slot.
 * Improved error message when an unknown style is requested.
-* Input-elements now support forms without an object; ie forms built with `form_tag` - not `form_for` or `form_with`.
+* Input-elements now support forms without an object; i.e. forms built with `form_tag` - not `form_for` or `form_with`.
 
 ### Changed
 
@@ -28,7 +38,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Removed
 
-* [BREAKING] Color-specific styles from Flowbite::Button, ie `alternative`, `green`, `light`, `purple`, `red`, `yellow`.
+* [BREAKING] Color-specific styles from Flowbite::Button, i.e. `alternative`, `green`, `light`, `purple`, `red`, `yellow`.
 
 
 ## [0.1.3]

data/README.md

@@ -7,6 +7,8 @@ Unofficial, open source implementation of [Flowbite](https://flowbite.com/) comp
 
 Flowbite Components provides a comprehensive library of UI components following the Flowbite design system, implemented as Rails ViewComponents with full Tailwind CSS integration and dark mode support.
 
+Preview the components at https://flowbite-components.substancelab.com/lookbook/
+
 ## Features
 
 - **Full Flowbite Design System**: Faithful implementation of Flowbite components
@@ -82,6 +84,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 <% end %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.
+
 ### Button Examples
 
 ```erb
@@ -91,16 +95,18 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 <% end %>
 
 <!-- Outline button with color -->
-<%= render Flowbite::Button::Outline.new(style: :blue) do %>
+<%= render Flowbite::Button::Outline.new(style: :success) do %>
   Outline Button
 <% end %>
 
 <!-- Pill button -->
-<%= render Flowbite::Button::Pill.new(style: :green) do %>
+<%= render Flowbite::Button::Pill.new(style: :danger) do %>
   Pill Button
 <% end %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/button/default.
+
 ### Custom Input Options
 
 ```erb
@@ -118,6 +124,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/inputfield.
+
 ### Custom Labels
 
 ```erb
@@ -131,6 +139,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_label/inputlabel.
+
 ### Disabled and Error States
 
 ```erb
@@ -149,6 +159,8 @@ If you want to use one of the other [Flowbite themes](https://flowbite.com/docs/
 ) %>
 ```
 
+See more examples at https://flowbite-components.substancelab.com/lookbook/inspect/input_field/disabled_state.
+
 ## How to customize components
 
 ### Add specific CSS classes
@@ -238,7 +250,7 @@ render(Component.new(class: "these are added"))
 ```
 
 This makes for easier customization of components, where you don't have to
-recreate the entire classlist, ie in order to increase sizes or add margins or
+recreate the entire classlist, i.e. in order to increase sizes or add margins or
 whatever.
 
 If you want to replace the entire class attribute for a component, pass it as part of the `options` hash, ie
@@ -276,7 +288,7 @@ This library includes a demo application with previews for all components. To vi
 1. cd demo
 2. Run `bundle && npm install`
 3. Run `rails server`
-4. Visit `http://localhost:3000/rails/lookbook`
+4. Visit `http://localhost:3000/lookbook`
 
 ## Contributing
 
@@ -296,6 +308,13 @@ Bug reports and pull requests are welcome on GitHub at [https://github.com/subst
 - [ViewComponent Documentation](https://viewcomponent.org/)
 - [Tailwind CSS Documentation](https://tailwindcss.com/docs)
 
+## Other ViewComponent-based libraries
+
+If Flowbite isn't your preference, perhaps one of these other component libraries suits you better?
+
+* [GOV.UK Components](https://govuk-components.netlify.app/introduction/get-started/)
+* [Primer Product UI for Rails](https://primer.style/product/getting-started/rails/)
+
 ## Other Flowbite component libraries
 
 * https://flowbite-react.com/

data/app/components/flowbite/breadcrumb/home_icon.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    # Renders a breadcrumb home icon.
+    #
+    # This is typically used as a prefix icon in the first breadcrumb item,
+    # but can be used standalone if needed.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Breadcrumb::HomeIcon.new %>
+    class HomeIcon < ViewComponent::Base
+      def call
+        tag.svg(
+          class: "w-3 h-3 me-2.5",
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "currentColor",
+          viewBox: "0 0 20 20"
+        ) do
+          tag.path(
+            d: "m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/item/current.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    class Item
+      # Renders the current page breadcrumb item.
+      # Current items are rendered as non-interactive spans with different styling.
+      #
+      # @param options [Hash] Additional HTML attributes to pass to the span element.
+      #
+      # @example Current page item
+      #   <%= render Flowbite::Breadcrumb::Item::Current.new { "Current Page" } %>
+      class Current < Item
+        def initialize(**options)
+          super(href: nil, **options)
+        end
+
+        protected
+
+        def item_options
+          {"aria-current": "page"}
+        end
+
+        def render_link
+          link_options = {class: link_classes}.merge(options)
+          content_tag(:span, content, **link_options)
+        end
+
+        def link_classes
+          ["ms-1", "text-sm", "font-medium", "text-body-subtle"]
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/item/first.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    class Item
+      # Renders the first breadcrumb item (typically home).
+      # First items don't show a separator icon.
+      #
+      # @param href [String] The URL for the breadcrumb link.
+      # @param options [Hash] Additional HTML attributes to pass to the link element.
+      #
+      # @example First item
+      #   <%= render Flowbite::Breadcrumb::Item::First.new(href: "/") { "Home" } %>
+      class First < Item
+        protected
+
+        def item_options
+          {class: "inline-flex items-center"}
+        end
+
+        def link_classes
+          ["text-sm", "font-medium", "inline-flex", "items-center", "text-body", "hover:text-fg-brand"]
+        end
+
+        def prefix_icon
+          nil
+        end
+
+        def render_link
+          icon = render(Flowbite::Breadcrumb::HomeIcon.new)
+          link_options = {class: link_classes}.merge(options)
+          content_tag(:a, safe_join([icon, content]), href: href, **link_options)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    # Base class for rendering a breadcrumb item (middle items in the breadcrumb trail).
+    #
+    # @param href [String] The URL for the breadcrumb link.
+    # @param options [Hash] Additional HTML attributes to pass to the link element.
+    #
+    # @example Middle item
+    #   <%= render Flowbite::Breadcrumb::Item.new(href: "/projects") { "Projects" } %>
+    class Item < ViewComponent::Base
+      attr_reader :href, :options
+
+      def initialize(href:, **options)
+        super()
+        @href = href
+        @options = options
+      end
+
+      def call
+        content_tag(:li, item_options) do
+          content_tag(:div, class: "flex items-center") do
+            concat(render(prefix_icon)) if prefix_icon
+            concat(render_link)
+          end
+        end
+      end
+
+      protected
+
+      def item_options
+        {}
+      end
+
+      def prefix_icon
+        Flowbite::Breadcrumb::SeparatorIcon.new
+      end
+
+      def render_link
+        link_options = {class: link_classes}.merge(options)
+        content_tag(:a, content, href: href, **link_options)
+      end
+
+      def link_classes
+        ["ms-1", "text-sm", "font-medium", "text-body", "hover:text-fg-brand"]
+      end
+    end
+  end
+end

data/app/components/flowbite/breadcrumb/separator_icon.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    # Renders a breadcrumb separator icon.
+    #
+    # This is automatically used by Breadcrumb::Item components, but can be
+    # used standalone if needed.
+    #
+    # @example Standalone usage
+    #   <%= render Flowbite::Breadcrumb::SeparatorIcon.new %>
+    class SeparatorIcon < ViewComponent::Base
+      def call
+        tag.svg(
+          class: "w-3.5 h-3.5 rtl:rotate-180 text-body",
+          "aria-hidden": "true",
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          height: 24,
+          viewBox: "0 0 24 24",
+          width: 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/breadcrumb.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb navigation component.
+  #
+  # Use {Flowbite::Breadcrumb} and the child {Flowbite::Breadcrumb::Item}
+  # components to create and indicate a series of page structure and URLs to
+  # help the user navigate through the website.
+  #
+  # Breadcrumbs consist of the following components:
+  #
+  # - {Flowbite::Breadcrumb}: Container for breadcrumb items.
+  # - {Flowbite::Breadcrumb::HomeIcon}: Home icon for the first breadcrumb item.
+  # - {Flowbite::Breadcrumb::SeparatorIcon}: Separator between breadcrumb items.
+  # - {Flowbite::Breadcrumb::Item}: An individual breadcrumb item.
+  # - {Flowbite::Breadcrumb::Item::Current}: An individual breadcrumb item
+  #   without a link, usually used for the current page in the breadcrumb trail.
+  # - {Flowbite::Breadcrumb::Item::First}: An individual breadcrumb item with a
+  #   home icon on it.
+  #
+  # @example Usage
+  #   <%= render(Flowbite::Breadcrumb.new) do |breadcrumb| %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render(Flowbite::Breadcrumb::Item::First.new(href: "/")) { "Root page" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render(Flowbite::Breadcrumb::Item.new(href: "/projects")) { "Parent page" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render(Flowbite::Breadcrumb::Item::Current.new) { "Current Page" } %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # @viewcomponent_slot [Flowbite::Breadcrumb::Item] items The items of the
+  #   breadcrumb trail. Use {Flowbite::Breadcrumb::Item::First} for the first
+  #   item to get a home icon, and {Flowbite::Breadcrumb::Item::Current} for the
+  #   last item to render it without a link.
+  #
+  # @lookbook_embed BreadcrumbPreview
+  # @see https://flowbite.com/docs/components/breadcrumb/
+  class Breadcrumb < ViewComponent::Base
+    renders_many :items
+
+    def call
+      content_tag(:nav, class: "flex", "aria-label": "Breadcrumb") do
+        content_tag(:ol, class: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse") do
+          items.each do |item|
+            concat(item)
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/button.rb

@@ -1,14 +1,15 @@
 # frozen_string_literal: true
 
 module Flowbite
-  # Renders a HTML button element.
-  #
-  # See https://flowbite.com/docs/components/buttons/
-  #
-  # @param label [String] The text to display on the button.
+  # Renders a HTML button element. See https://flowbite.com/docs/components/buttons/
   #
   # All other parameters are optional and are passed directly to the button tag
   # as HTML attributes.
+  #
+  # @example Basic usage
+  #  <%= render Flowbite::Button.new { "Click me" } %>
+  #
+  # @lookbook_embed ButtonPreview
   class Button < ViewComponent::Base
     SIZES = {
       xs: ["text-xs", "px-3", "py-1.5"],

data/app/components/flowbite/card.rb

@@ -3,7 +3,21 @@
 module Flowbite
   # Renders a card element.
   #
-  # See https://flowbite.com/docs/components/cards/
+  # To render a title in the card, use the title argument or the title slot.
+  #
+  # @example Using the title slot
+  #     <%= render(Flowbite::Card.new) do |card| %>
+  #       <% card.with_title do %>
+  #         <div><%= parent_category.name %></div>
+  #         <%= render(Flowbite::Card::Title.new) { category.name } %>
+  #       <% end %>
+  #     <% end %>
+  #
+  # @viewcomponent_slot [Flowbite::Card::Title] title The title of the card,
+  #   rendered at the top. Use +with_title+ to set custom content.
+  #
+  # @see https://flowbite.com/docs/components/cards/
+  # @lookbook_embed CardPreview
   class Card < ViewComponent::Base
     renders_one :title
 

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

@@ -1,14 +1,14 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # The checkbox component can be used to receive one or more selected options
     # from the user in the form of a square box available in multiple styles,
     # sizes, colors, and variants coded with the utility classes from Tailwind
     # CSS and with support for dark mode.
     #
     # https://flowbite.com/docs/forms/checkbox/
-    class Checkbox < Field
+    class Checkbox < Input
       DEFAULT_CHECKED_VALUE = "1"
       DEFAULT_UNCHECKED_VALUE = "0"
 

data/app/components/flowbite/input/date.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Date < Field
+  class Input
+    class Date < Input
       def input_field_type
         :date_field
       end

data/app/components/flowbite/input/date_time.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Input
+    class DateTime < Input
+      def input_field_type
+        :datetime_field
+      end
+    end
+  end
+end

data/app/components/flowbite/input/email.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Email < Field
+  class Input
+    class Email < Input
       # Returns the name of the method used to generate HTML for the input field
       def input_field_type
         :email_field

data/app/components/flowbite/input/file.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class File < Field
+  class Input
+    class File < Input
       SIZES = {
         sm: ["text-sm"],
         default: ["text-sm"],

data/app/components/flowbite/input/hint.rb

@@ -1,7 +1,12 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
+    # A hint element for input fields.
+    #
+    # Provides additional context or instructions for the user.
+    #
+    # See https://flowbite.com/docs/forms/input-field/#helper-text
     class Hint < ViewComponent::Base
       STATES = [
         DEFAULT = :default

data/app/components/flowbite/input/label.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label
     class Label < ViewComponent::Base
       STATES = [

data/app/components/flowbite/input/number.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Number < Field
+  class Input
+    class Number < Input
       def input_field_type
         :number_field
       end

data/app/components/flowbite/input/password.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Password < Field
+  class Input
+    class Password < Input
       def input_field_type
         :password_field
       end

data/app/components/flowbite/input/phone.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Phone < Field
+  class Input
+    class Phone < Input
       def input_field_type
         :phone_field
       end

data/app/components/flowbite/input/radio_button.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # The radio button component can be used to allow the user to choose a
     # single option from one or more available options.
     #
     # https://flowbite.com/docs/forms/radio/
-    class RadioButton < Field
+    class RadioButton < Input
       class << self
         # Radio buttons only have their default size.
         def sizes

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

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # The `Select` component renders a select input field for use in forms.
     #
     # https://flowbite.com/docs/forms/select/
     #
     # Wraps `ActionView::Helpers::FormOptionsHelper#select`: https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select
-    class Select < Field
+    class Select < Input
       SIZES = {
         sm: ["px-2.5", "py-2", "text-sm"],
         default: ["px-3", "py-2.5", "text-sm"],

data/app/components/flowbite/input/textarea.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Textarea < Field
+  class Input
+    class Textarea < Input
       class << self
         # rubocop:disable Layout/LineLength
         def styles

data/app/components/flowbite/input/url.rb

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Url < Field
+  class Input
+    class Url < Input
       # Returns the name of the method used to generate HTML for the input field
       def input_field_type
         :url_field

data/app/components/flowbite/input/validation_error.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     class ValidationError < ViewComponent::Base
       class << self
         def classes(state: :default, style: :default)