Add Toast component

Extracted from Uchi's component library (www.uchiadmin.com).

Author: koppen

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ### Added
 
 * DateTime input field components.
+* Toast component.
 
 ### Changed
 

app/components/flowbite/toast.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a toast notification element.
+  #
+  # See https://flowbite.com/docs/components/toast/
+  #
+  # @param class [Array<String>] Additional CSS classes for the toast container.
+  # @param dismissible [Boolean] Whether the toast can be dismissed (default: true).
+  # @param message [String] The message to display in the toast.
+  # @param options [Hash] Additional HTML options for the toast container.
+  # @param style [Symbol] The color style of the toast (:default, :success, :danger, :warning).
+  class Toast < ViewComponent::Base
+    class << self
+      def classes
+        ["flex", "items-center", "w-full", "max-w-xs", "p-4", "text-body", "bg-neutral-primary-soft", "rounded-base", "shadow-xs", "border", "border-default"]
+      end
+    end
+
+    attr_reader :dismissible, :message, :options, :style
+
+    def initialize(message:, dismissible: true, style: :default, class: nil, **options)
+      @message = message
+      @style = style
+      @dismissible = dismissible
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @options = options
+    end
+
+    def container_classes
+      self.class.classes + @class
+    end
+  end
+end

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

@@ -0,0 +1,5 @@
+<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>
+</div>

app/components/flowbite/toast/icon.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Toast
+    # Renders an icon for a toast notification.
+    #
+    # @param style [Symbol] The color style of the icon (:default, :success, :danger, :warning).
+    class Icon < ViewComponent::Base
+      class << self
+        def classes(style: :default)
+          styles.fetch(style).fetch(:classes)
+        end
+
+        def svg_path(style: :default)
+          styles.fetch(style).fetch(:svg_path)
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-blue-500", "bg-blue-100", "rounded-lg", "dark:bg-blue-800", "dark:text-blue-200"],
+              svg_path: "M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+            },
+            success: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-green-500", "bg-green-100", "rounded-lg", "dark:bg-green-800", "dark:text-green-200"],
+              svg_path: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
+            },
+            danger: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-red-500", "bg-red-100", "rounded-lg", "dark:bg-red-800", "dark:text-red-200"],
+              svg_path: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"
+            },
+            warning: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-orange-500", "bg-orange-100", "rounded-lg", "dark:bg-orange-700", "dark:text-orange-200"],
+              svg_path: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+            }
+          }.freeze
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      attr_reader :style
+
+      def initialize(style: :default)
+        @style = style
+      end
+
+      def container_classes
+        self.class.classes(style: style)
+      end
+
+      def svg_path
+        self.class.svg_path(style: style)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,40 @@
+<div
+  class="<%= container_classes.join(" ") %>"
+  role="alert"
+  <%= options.map { |k, v| "#{k}=\"#{v}\"" }.join(" ").html_safe %>
+>
+  <%= render Flowbite::Toast::Icon.new(style: style) %>
+
+  <div class="ms-3 text-sm font-normal"><%= message %></div>
+
+  <% if dismissible %>
+    <%# Styles from https://flowbite.com/docs/components/toast/#default-toast %>
+    <button
+      type="button"
+      class="
+        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
+      "
+      aria-label="Close"
+    >
+      <svg
+        class="w-3 h-3"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 14 14"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
+        />
+      </svg>
+    </button>
+  <% end %>
+</div>

demo/test/components/previews/toast_preview.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+class ToastPreview < Lookbook::Preview
+  # @!group Styles
+  #
+  # Use these toast notification styles to show feedback messages to your users.
+  # Toast notifications appear with different colors and icons based on the style.
+  #
+  # @display classes flex flex-col space-y-4
+
+  def default
+    render(Flowbite::Toast.new(message: "Improvement archived successfully."))
+  end
+
+  def success
+    render(Flowbite::Toast.new(message: "Item moved successfully.", style: :success))
+  end
+
+  def danger
+    render(Flowbite::Toast.new(message: "Item has been deleted.", style: :danger))
+  end
+
+  def warning
+    render(Flowbite::Toast.new(message: "Improve password difficulty.", style: :warning))
+  end
+
+  # @!endgroup
+
+  # @!group Dismissible
+  #
+  # Control whether the toast can be dismissed with a close button.
+  #
+  # @display classes flex flex-col space-y-4
+
+  def with_dismiss_button
+    render(Flowbite::Toast.new(message: "This toast can be dismissed.", dismissible: true))
+  end
+
+  def without_dismiss_button
+    render(Flowbite::Toast.new(message: "This toast cannot be dismissed.", dismissible: false))
+  end
+
+  # @!endgroup
+
+  # @!group Custom styling
+  #
+  # Add custom classes to the toast container.
+  #
+  # @display classes flex flex-col space-y-4
+
+  def with_custom_classes
+    render(Flowbite::Toast.new(message: "Custom styled toast.", class: ["bg-blue-50", "border-blue-200"]))
+  end
+
+  # @!endgroup
+end

test/components/flowbite/toast_test.rb

@@ -0,0 +1,120 @@
+require "test_helper"
+
+class Flowbite::ToastTest < Minitest::Test
+  include ViewComponent::TestHelpers
+
+  def test_render_component
+    render_inline(Flowbite::Toast.new(message: "Test message"))
+
+    assert_component_rendered
+    assert_selector("div[role='alert']", text: "Test message")
+  end
+
+  def test_renders_message
+    render_inline(Flowbite::Toast.new(message: "Hello, World!"))
+
+    assert_selector("div", text: "Hello, World!")
+  end
+
+  def test_renders_with_default_classes
+    render_inline(Flowbite::Toast.new(message: "Test"))
+
+    assert_selector("div.flex.items-center.w-full.max-w-xs.p-4")
+  end
+
+  def test_renders_with_additional_classes
+    render_inline(Flowbite::Toast.new(message: "Test", class: ["custom-class", "another-class"]))
+
+    assert_selector("div.custom-class.another-class")
+  end
+
+  def test_renders_dismissible_button_by_default
+    render_inline(Flowbite::Toast.new(message: "Test"))
+
+    assert_selector("button[type='button'][aria-label='Close']")
+  end
+
+  def test_renders_without_dismissible_button
+    render_inline(Flowbite::Toast.new(message: "Test", dismissible: false))
+
+    assert_no_selector("button[type='button'][aria-label='Close']")
+  end
+
+  def test_renders_with_custom_html_options
+    render_inline(Flowbite::Toast.new(message: "Test", id: "my-toast", "data-controller": "toast"))
+
+    assert_selector("div[id='my-toast'][data-controller='toast']")
+  end
+
+  def test_renders_default_style_icon
+    render_inline(Flowbite::Toast.new(message: "Test", style: :default))
+
+    assert_selector("div.text-blue-500.bg-blue-100")
+  end
+
+  def test_renders_success_style_icon
+    render_inline(Flowbite::Toast.new(message: "Test", style: :success))
+
+    assert_selector("div.text-green-500.bg-green-100")
+  end
+
+  def test_renders_danger_style_icon
+    render_inline(Flowbite::Toast.new(message: "Test", style: :danger))
+
+    assert_selector("div.text-red-500.bg-red-100")
+  end
+
+  def test_renders_warning_style_icon
+    render_inline(Flowbite::Toast.new(message: "Test", style: :warning))
+
+    assert_selector("div.text-orange-500.bg-orange-100")
+  end
+end
+
+class Flowbite::Toast::IconTest < Minitest::Test
+  include ViewComponent::TestHelpers
+
+  def test_render_component
+    render_inline(Flowbite::Toast::Icon.new)
+
+    assert_component_rendered
+    assert_selector("svg")
+  end
+
+  def test_renders_default_style
+    render_inline(Flowbite::Toast::Icon.new(style: :default))
+
+    assert_selector("div.text-blue-500.bg-blue-100")
+  end
+
+  def test_renders_success_style
+    render_inline(Flowbite::Toast::Icon.new(style: :success))
+
+    assert_selector("div.text-green-500.bg-green-100")
+  end
+
+  def test_renders_danger_style
+    render_inline(Flowbite::Toast::Icon.new(style: :danger))
+
+    assert_selector("div.text-red-500.bg-red-100")
+  end
+
+  def test_renders_warning_style
+    render_inline(Flowbite::Toast::Icon.new(style: :warning))
+
+    assert_selector("div.text-orange-500.bg-orange-100")
+  end
+
+  def test_renders_svg_with_proper_attributes
+    render_inline(Flowbite::Toast::Icon.new)
+
+    assert_selector("svg[aria-hidden='true']")
+    assert_selector("svg[fill='currentColor']")
+  end
+
+  def test_renders_icon_with_proper_classes
+    render_inline(Flowbite::Toast::Icon.new)
+
+    assert_selector("div.inline-flex.items-center.justify-center.shrink-0.w-8.h-8")
+  end
+end