flowbite-components 0.2.0 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0ca94dfc5af1c662f4a7cfb77f038f60402daf411673078c30b77672280c6055
-  data.tar.gz: 60ad1e86847bd59c9b8ba598d44562cbd8f24776b9e696bc55e60550da9cfc0b
+  metadata.gz: a29d44c915146870abbd45cd6a839a0948877dfdf8590fed7eef8e528a382964
+  data.tar.gz: fbe0bc1142849ec153628cb781776ddea678f5391bd42ab7f71ba891174dbd4f
 SHA512:
-  metadata.gz: 2676a2b3da22cae60d35793a71d2e24637edb9cd61f5d3096c95352b1f6426d3e1116d124a474f05fa5198f4ce7935b1f0499f1ee82eb756101a9229a1ecf6bc
-  data.tar.gz: 18fc7aaad24ffad2d9ec01a5ae772bf0b7194a24d3d91800a535fa3b3fd22017f1fac025791ff59a4a6de249d931abf2d30d16e88e3e1f50e78fc04d747a9899
+  metadata.gz: fd37a866269767b5607d75453cacf38d4832dbdd82b5097a18531d7f576b8849b335f48a6e7ce743aa1b3251c40baa316379780299564213b2d02ddb7461705f
+  data.tar.gz: 83f821ca6081890355483066c64308c3388c783785da725a1546390404528d5a5478ea642facb7fca627eb61a13c4fbd85939343f9f94ab043d32fb003d5fb4a

data/CHANGELOG.md

@@ -3,6 +3,35 @@
 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
+
+* Badge component.
+* Sidebar component.
+
+### 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/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

@@ -0,0 +1,7 @@
+<%= 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