flowbite-components 0.3.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2df1ff6599a8e3fa6a41cd9b6329654d3ebb532eae460f37dceb1c8e9b3e0be5
-  data.tar.gz: 33362285ce24f76a7490f646dffb524a66f3c44c584e8da5d66abad27a74f809
+  metadata.gz: a29d44c915146870abbd45cd6a839a0948877dfdf8590fed7eef8e528a382964
+  data.tar.gz: fbe0bc1142849ec153628cb781776ddea678f5391bd42ab7f71ba891174dbd4f
 SHA512:
-  metadata.gz: 9968e1c9ad9230e73475ddc85d1069395444700af804f5712b8f3bef027fd4744b3eec136cd3edc737f947aaf478b5fa22279ed3f9494735684c8d66e93690c4
-  data.tar.gz: 3d3f420dbf18ceb93de989ea5818aff5551279cc29e11e4c326ccb2148ca76dfaf8c451571c911c0149ff129f772d674752ec7b126ece767bd7f34d3b1a43503
+  metadata.gz: fd37a866269767b5607d75453cacf38d4832dbdd82b5097a18531d7f576b8849b335f48a6e7ce743aa1b3251c40baa316379780299564213b2d02ddb7461705f
+  data.tar.gz: 83f821ca6081890355483066c64308c3388c783785da725a1546390404528d5a5478ea642facb7fca627eb61a13c4fbd85939343f9f94ab043d32fb003d5fb4a

data/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 This project adheres to [Semantic Versioning](http://semver.org/).
 
+## [0.4.0]
+
+### Added
+
+- Avatar component, with image, initials and placeholder icon fallbacks, sizes, shapes, border and status dot
+- Spinner component
+- Progress component
+- Pagination component
+- Rating component, including `Flowbite::Rating::Star` for the individual stars
+- `Flowbite::Toast::CloseButton` component for the close button of toasts
+- `Flowbite::Toast` accepts `button: {options: {...}}` for passing HTML options, e.g. data attributes, to the default close button, or a `button` slot for rendering your own
+- Alert component
+
+### Fixed
+
+- `Flowbite::Card` no longer renders an empty `h5` element when card title is blank.
+
 ## [0.3.0]
 
 ### Added
@@ -10,8 +27,6 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 * 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.

data/README.md

@@ -272,7 +272,7 @@ bundle exec rake test
 To check code style:
 
 ```bash
-bundle exec rake standard
+bundle exec rake lint
 ```
 
 To install this gem onto your local machine:
@@ -285,10 +285,8 @@ bundle exec rake install
 
 This library includes a demo application with previews for all components. To view them:
 
-1. cd demo
-2. Run `bundle && npm install`
-3. Run `rails server`
-4. Visit `http://localhost:3000/lookbook`
+1. Run `./demo/run` from the project root.
+2. Visit `http://localhost:3000/lookbook`
 
 ## Contributing
 

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

@@ -0,0 +1,36 @@
+<%= tag.div(
+  class: container_classes.join(" "),
+  role: "alert",
+  **options,
+) do %>
+  <% if additional_content? %>
+    <% if icon? || title? %>
+      <div class="flex items-center">
+        <% if icon? %>
+          <%= render Flowbite::Alert::Icon.new(class: icon_classes) %>
+          <span class="sr-only"><%= style_label %></span>
+        <% end %>
+
+        <% if title? %>
+          <h3 class="font-medium"><%= title %></h3>
+        <% end %>
+      </div>
+    <% end %>
+    <% if content.present? %>
+      <div class="mt-2 mb-4"><%= content %></div>
+    <% end %>
+    <%= additional_content %>
+  <% elsif icon? %>
+    <%= render Flowbite::Alert::Icon.new(class: icon_classes) %>
+    <span class="sr-only"><%= style_label %></span>
+    <div>
+      <% if title? %>
+        <span class="font-medium me-1"><%= title %></span>
+      <% end %><%= content %>
+    </div>
+  <% else %>
+    <% if title? %>
+      <span class="font-medium"><%= title %></span>
+    <% end %><%= content %>
+  <% end %>
+<% end %>

data/app/components/flowbite/alert/icon.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Alert
+    # Renders the info icon shown inside an alert.
+    #
+    # Flowbite uses the same outlined info icon for all alert styles; the
+    # icon inherits its color from the alert via +currentColor+.
+    #
+    # @param class [String, Array<String>] Additional CSS classes for the svg
+    #   element.
+    #
+    # @see https://flowbite.com/docs/components/alerts/
+    class Icon < ViewComponent::Base
+      SVG_PATH = "M10 11h2v5m-2 0h4m-2.592-8.5h.01M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
+
+      class << self
+        def classes
+          ["w-4", "h-4", "shrink-0"]
+        end
+      end
+
+      def initialize(class: nil)
+        @class = Array.wrap(binding.local_variable_get(:class))
+      end
+
+      def call
+        tag.svg(
+          tag.path(
+            d: svg_path,
+            stroke: "currentColor",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "stroke-width": "2"
+          ),
+          "aria-hidden": "true",
+          class: svg_classes,
+          fill: "none",
+          viewBox: "0 0 24 24",
+          xmlns: "http://www.w3.org/2000/svg"
+        )
+      end
+
+      def svg_classes
+        self.class.classes + @class
+      end
+
+      def svg_path
+        SVG_PATH
+      end
+    end
+  end
+end

data/app/components/flowbite/alert.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders an alert element for showing feedback messages to the user.
+  #
+  # The block given to the alert is used as its message.
+  #
+  # @example Usage
+  #  <%= render(Flowbite::Alert.new) { "Something has happened!" } %>
+  #
+  # @example With title and style
+  #  <%= render(Flowbite::Alert.new(style: :danger, title: "Danger alert!")) do %>
+  #    Change a few things up and try submitting again.
+  #  <% end %>
+  #
+  # @example With a list
+  #  <%= render(Flowbite::Alert.new(title: "Ensure that these requirements are met:")) do %>
+  #    <ul class="mt-2 list-disc list-outside space-y-1 ps-2.5">
+  #      <li>At least 10 characters</li>
+  #    </ul>
+  #  <% end %>
+  #
+  # @example With additional content
+  #  <%= render(Flowbite::Alert.new(bordered: true, title: "This is an info alert")) do |alert| %>
+  #    <% alert.with_additional_content do %>
+  #      <%= render(Flowbite::Button.new(size: :xs)) { "View more" } %>
+  #    <% end %>
+  #    More info about this alert.
+  #  <% end %>
+  #
+  # @viewcomponent_slot additional_content Content rendered below the
+  #   message, for example action buttons. When given, the title is rendered
+  #   as a heading next to the icon and the message below it.
+  #
+  # @see https://flowbite.com/docs/components/alerts/
+  # @lookbook_embed AlertPreview
+  class Alert < ViewComponent::Base
+    renders_one :additional_content
+
+    class << self
+      # @return [Array<String>] The color classes for the given style and state.
+      def classes(state: :default, style: :info)
+        styles.fetch(style).fetch(state)
+      end
+
+      # rubocop:disable Layout/LineLength
+      def styles
+        Flowbite::Styles.from_hash({
+          danger: {
+            border: ["border-danger-subtle"],
+            default: ["bg-danger-soft", "text-fg-danger-strong"]
+          },
+          dark: {
+            border: ["border-default-medium"],
+            default: ["bg-neutral-secondary-medium", "text-heading"]
+          },
+          info: {
+            border: ["border-brand-subtle"],
+            default: ["bg-brand-softer", "text-fg-brand-strong"]
+          },
+          success: {
+            border: ["border-success-subtle"],
+            default: ["bg-success-soft", "text-fg-success-strong"]
+          },
+          warning: {
+            border: ["border-warning-subtle"],
+            default: ["bg-warning-soft", "text-fg-warning"]
+          }
+        }.freeze)
+      end
+      # rubocop:enable Layout/LineLength
+    end
+
+    attr_reader :options, :style, :title
+
+    # @param border_accent [Boolean] Whether to show a thick top border
+    #   accent instead of rounded corners (default: false).
+    # @param bordered [Boolean] Whether to add a border in the color of the
+    #   style (default: false).
+    # @param class [String, Array<String>] Additional CSS classes for the
+    #   alert container.
+    # @param icon [Boolean] Whether to show an info icon (default: true).
+    # @param options [Hash] Additional HTML options for the alert container.
+    # @param style [Symbol] The color style of the alert (:danger, :dark,
+    #   :info, :success, :warning).
+    # @param title [String] An optional bold title shown before the message.
+    def initialize(border_accent: false, bordered: false, class: nil,
+      icon: true, style: :info, title: nil, **options)
+      @border_accent = border_accent
+      @bordered = bordered
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @icon = icon
+      @options = options
+      @style = style
+      @title = title
+    end
+
+    def border_accent?
+      !!@border_accent
+    end
+
+    def bordered?
+      !!@bordered
+    end
+
+    def container_classes
+      result = ["p-4", "text-sm"]
+      result += layout_classes
+      result += self.class.classes(style: style)
+      result += border_classes
+      result += ["rounded-base"] unless border_accent?
+      result + @class
+    end
+
+    # @return [Array<String>] The CSS classes for the icon in the current
+    #   layout.
+    def icon_classes
+      if additional_content?
+        ["me-2"]
+      else
+        ["me-2", "mt-0.5"]
+      end
+    end
+
+    def icon?
+      !!@icon
+    end
+
+    # @return [String] The screen reader label describing the alert style.
+    def style_label
+      style.to_s.capitalize
+    end
+
+    def title?
+      title.present?
+    end
+
+    private
+
+    def border_classes
+      if border_accent?
+        ["border-t-4"] + self.class.classes(state: :border, style: style)
+      elsif bordered?
+        ["border"] + self.class.classes(state: :border, style: style)
+      else
+        []
+      end
+    end
+
+    def layout_classes
+      return [] if additional_content? || !icon?
+
+      ["flex", "items-start"]
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+<% avatar = capture do %>
+  <% if image? %>
+    <%= tag.img(alt: alt, class: image_classes, src: src, **options) %>
+  <% elsif initials? %>
+    <%= tag.div(class: initials_classes, **options) do %>
+      <span class="font-medium text-body"><%= initials %></span>
+    <% end %>
+  <% else %>
+    <%= tag.div(class: placeholder_classes, **options) do %>
+      <%= render(Flowbite::Avatar::PlaceholderIcon.new(size: size)) %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<% if dot? %>
+  <div class="relative flex h-fit w-fit">
+    <%= avatar %>
+    <%= top_dot %>
+    <%= bottom_dot %>
+  </div>
+<% else %>
+  <%= avatar %>
+<% end %>

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

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Avatar
+    # Renders a status dot indicator positioned on top of an avatar.
+    #
+    # Usually added through the +top_dot+ or +bottom_dot+ slots of
+    # Flowbite::Avatar, which set the position and size. When rendered on its
+    # own, the dot must be placed inside a relatively positioned container
+    # together with the avatar.
+    #
+    # @example Through an Avatar slot
+    #  <%= render(Flowbite::Avatar.new(src: user.avatar_url)) do |avatar| %>
+    #    <% avatar.with_top_dot(label: "Online", style: :success) %>
+    #  <% end %>
+    #
+    # @example Standalone
+    #  <div class="relative">
+    #    <%= render(Flowbite::Avatar.new(src: user.avatar_url)) %>
+    #    <%= render(Flowbite::Avatar::Dot.new(label: "Online", position: :bottom, style: :success)) %>
+    #  </div>
+    #
+    # @see https://flowbite.com/docs/components/avatar/
+    class Dot < ViewComponent::Base
+      POSITIONS = {
+        bottom: ["bottom-0"],
+        top: ["top-0"]
+      }.freeze
+
+      # Horizontal offsets placing the dot at the right edge of an avatar of
+      # the given size.
+      SIZES = {
+        xs: ["left-1.5"],
+        sm: ["left-3"],
+        base: ["left-5"],
+        default: ["left-7"],
+        lg: ["left-8"],
+        xl: ["left-11"],
+        "2xl": ["left-13"]
+      }.freeze
+
+      class << self
+        def classes(position: :top, size: :default, style: :success)
+          POSITIONS.fetch(position) + sizes.fetch(size) +
+            ["absolute", "w-3.5", "h-3.5"] +
+            styles.fetch(style).fetch(:default) +
+            ["border-2", "border-buffer", "rounded-full"]
+        end
+
+        def sizes
+          SIZES
+        end
+
+        def styles
+          Flowbite::Styles.from_hash(
+            {
+              danger: {default: ["bg-danger"]},
+              success: {default: ["bg-success"]}
+            }.freeze
+          )
+        end
+      end
+
+      attr_reader :label, :position, :size, :style
+
+      # @param label [String] Text describing the status for screen readers,
+      #   since the dot otherwise only conveys it through color.
+      # @param position [Symbol] Where to place the dot (:bottom, :top).
+      # @param size [Symbol] The size of the avatar the dot is placed on.
+      # @param style [Symbol] The color of the dot (:danger, :success).
+      def initialize(label: nil, position: :top, size: :default, style: :success)
+        @label = label
+        @position = position
+        @size = size
+        @style = style
+      end
+
+      def call
+        content_tag(:span, class: self.class.classes(position: position, size: size, style: style)) do
+          content_tag(:span, label, class: "sr-only") if label.present?
+        end
+      end
+    end
+  end
+end

data/app/components/flowbite/avatar/placeholder_icon.html.erb

@@ -0,0 +1,13 @@
+<svg
+  aria-hidden="true"
+  class="<%= classes.join(" ") %>"
+  fill="currentColor"
+  viewBox="0 0 20 20"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    clip-rule="evenodd"
+    d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+    fill-rule="evenodd"
+  />
+</svg>

data/app/components/flowbite/avatar/placeholder_icon.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Avatar
+    # Renders the person icon shown in an avatar without an image or
+    # initials.
+    #
+    # @see https://flowbite.com/docs/components/avatar/
+    class PlaceholderIcon < ViewComponent::Base
+      # The icon is slightly larger than the avatar and offset to the left,
+      # so the person is centered and cropped by the container.
+      SIZES = {
+        xs: ["w-5.5", "h-5.5", "-left-0.5"],
+        sm: ["w-7", "h-7", "-left-0.5"],
+        base: ["w-10", "h-10", "-left-1"],
+        default: ["w-12", "h-12", "-left-1"],
+        lg: ["w-13", "h-13", "-left-1"],
+        xl: ["w-17", "h-17", "-left-1.5"],
+        "2xl": ["w-19", "h-19", "-left-1.5"]
+      }.freeze
+
+      class << self
+        def classes(size: :default)
+          ["absolute"] + sizes.fetch(size) + ["text-body-subtle"]
+        end
+
+        def sizes
+          SIZES
+        end
+      end
+
+      attr_reader :size
+
+      # @param size [Symbol] The size of the avatar the icon is placed in.
+      def initialize(size: :default)
+        @size = size
+      end
+
+      def classes
+        self.class.classes(size: size)
+      end
+    end
+  end
+end

data/app/components/flowbite/avatar.rb

@@ -0,0 +1,132 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders an avatar representing a user.
+  #
+  # The avatar shows an image when +src+ is given. Without an image it falls
+  # back to the given +initials+, and without initials it renders a
+  # placeholder person icon.
+  #
+  # @example Image
+  #  <%= render(Flowbite::Avatar.new(alt: "Jese Leos", src: user.avatar_url)) %>
+  #
+  # @example Initials with a rounded square shape
+  #  <%= render(Flowbite::Avatar.new(initials: "JL", shape: :rounded)) %>
+  #
+  # @example Placeholder icon with a status dot
+  #  <%= render(Flowbite::Avatar.new) do |avatar| %>
+  #    <% avatar.with_bottom_dot(label: "Online", style: :success) %>
+  #  <% end %>
+  #
+  # @viewcomponent_slot [Flowbite::Avatar::Dot] bottom_dot A status dot placed
+  #   at the bottom of the avatar. Use +with_bottom_dot+ to add one.
+  # @viewcomponent_slot [Flowbite::Avatar::Dot] top_dot A status dot placed at
+  #   the top of the avatar. Use +with_top_dot+ to add one.
+  #
+  # @see https://flowbite.com/docs/components/avatar/
+  # @lookbook_embed AvatarPreview
+  class Avatar < ViewComponent::Base
+    renders_one :bottom_dot, ->(**options) { Flowbite::Avatar::Dot.new(position: :bottom, size: size, **options) }
+    renders_one :top_dot, ->(**options) { Flowbite::Avatar::Dot.new(position: :top, size: size, **options) }
+
+    BORDERED_CLASSES = ["p-1", "ring-2", "ring-default"].freeze
+
+    INITIALS_CLASSES = ["relative", "inline-flex", "items-center", "justify-center", "overflow-hidden", "bg-neutral-tertiary"].freeze
+
+    PLACEHOLDER_CLASSES = ["relative", "overflow-hidden", "bg-neutral-secondary-medium"].freeze
+
+    SIZES = {
+      xs: ["w-4.5", "h-4.5"],
+      sm: ["w-6", "h-6"],
+      base: ["w-8", "h-8"],
+      default: ["w-10", "h-10"],
+      lg: ["w-11", "h-11"],
+      xl: ["w-14", "h-14"],
+      "2xl": ["w-16", "h-16"]
+    }.freeze
+
+    class << self
+      def classes(bordered: false, shape: :circle, size: :default)
+        result = sizes.fetch(size) + shape_classes(shape: shape, size: size)
+        result += BORDERED_CLASSES if bordered
+        result
+      end
+
+      # @return [Array<String>] The classes defining the corners of the
+      #   avatar. Small rounded avatars get smaller corners.
+      def shape_classes(shape: :circle, size: :default)
+        case shape
+        when :circle then ["rounded-full"]
+        when :rounded then [:xs, :sm].include?(size) ? ["rounded-sm"] : ["rounded-base"]
+        else raise ArgumentError, "Unknown shape: #{shape}. Available shapes: circle, rounded"
+        end
+      end
+
+      def sizes
+        SIZES
+      end
+    end
+
+    attr_reader :alt, :initials, :options, :size, :src
+
+    # @param alt [String] Alternative text for the image. Defaults to an
+    #   empty string, marking the image as decorative.
+    # @param bordered [Boolean] Whether to add a ring around the avatar.
+    # @param class [String, Array<String>] Additional CSS classes for the
+    #   avatar element.
+    # @param initials [String] Initials to show when there is no image.
+    # @param options [Hash] Additional HTML options for the avatar element.
+    # @param shape [Symbol] The shape of the avatar (:circle, :rounded).
+    # @param size [Symbol] The size of the avatar (:xs, :sm, :base, :default,
+    #   :lg, :xl, :"2xl").
+    # @param src [String] The URL of the avatar image. When blank, the avatar
+    #   falls back to initials or a placeholder icon.
+    def initialize(alt: nil, bordered: false, class: nil, initials: nil, shape: :circle, size: :default, src: nil, **options)
+      @alt = alt.to_s
+      @bordered = bordered
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @initials = initials
+      @shape = shape
+      @size = size
+      @src = src
+      @options = options
+    end
+
+    def bordered?
+      !!@bordered
+    end
+
+    def dot?
+      top_dot? || bottom_dot?
+    end
+
+    def image?
+      @src.present?
+    end
+
+    # @return [Array<String>] The classes for the image element.
+    def image_classes
+      classes + @class
+    end
+
+    def initials?
+      @initials.present?
+    end
+
+    # @return [Array<String>] The classes for the initials container.
+    def initials_classes
+      INITIALS_CLASSES + classes + @class
+    end
+
+    # @return [Array<String>] The classes for the placeholder icon container.
+    def placeholder_classes
+      PLACEHOLDER_CLASSES + classes + @class
+    end
+
+    private
+
+    def classes
+      self.class.classes(bordered: bordered?, shape: @shape, size: @size)
+    end
+  end
+end

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

@@ -1,4 +1,7 @@
 <%= content_tag(tag_name, **tag_options) do %>
-  <% if dot? %><%= render(Flowbite::Badge::Dot.new(style: @style)) %><% end %>
+  <% if dot? %>
+    <%= render(Flowbite::Badge::Dot.new(style: @style)) %>
+  <% end %>
+
   <%= content %>
 <% 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/input_field.html.erb

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