flowbite-components 0.1.3 → 0.2.0

data/app/components/flowbite/styles.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Styles
+    class StyleNotFoundError < ::KeyError; end
+
+    class << self
+      def from_hash(styles_hash)
+        styles = Styles.new
+        styles_hash.each do |style_name, states_hash|
+          styles.add_style(style_name, states_hash)
+        end
+        styles
+      end
+    end
+
+    def add_style(style_name, states_hash)
+      @styles[style_name] = Flowbite::Style.new(states_hash)
+    end
+
+    def fetch(style_name)
+      return @styles[style_name] if @styles.key?(style_name)
+
+      raise \
+        StyleNotFoundError,
+        "Style not found: #{style_name}. Available styles: " \
+        "#{@styles.keys.sort.join(", ")}"
+    end
+
+    def initialize
+      @styles = {}
+    end
+  end
+end

data/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>

data/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

data/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>

data/app/components/flowbite/toast.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a toast notification element.
+  #
+  # @example Usage
+  #  <%= render(Flowbite::Toast.new(message: "Something has happened!")) %>
+  #
+  # @see https://flowbite.com/docs/components/toast/
+  # @lookbook_embed ToastPreview
+  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
+
+    # @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).
+    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

data/lib/flowbite/components/version.rb

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

data/lib/yard/flowbite_viewcomponent.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+# YARD plugin for documenting ViewComponent slots
+#
+# This plugin adds a @viewcomponent_slot tag that can be used to document
+# slots defined with renders_one and renders_many in ViewComponent classes.
+#
+# Usage:
+#   # @viewcomponent_slot [Flowbite::Card::Title] title The title of the card
+#   renders_one :title
+#
+#   # @viewcomponent_slot [Flowbite::Breadcrumb::Item] items The breadcrumb items
+#   renders_many :items
+#
+# The tag accepts:
+#   - Types (optional): The component class(es) that can be rendered in the slot
+#   - Name (required): The slot name (matching the symbol passed to renders_one/renders_many)
+#   - Description (optional): A description of what the slot is for
+
+YARD::Tags::Library.define_tag(
+  "ViewComponent Slot",
+  :viewcomponent_slot,
+  :with_types_and_name
+)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flowbite-components
 version: !ruby/object:Gem::Version
-  version: 0.1.3
+  version: 0.2.0
 platform: ruby
 authors:
 - Jakob Skjerning
@@ -23,6 +23,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 4.0.0
+- !ruby/object:Gem::Dependency
+  name: yard
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: A library of View Components based on the Flowbite design system to be
   used in Rails applications.
 email:
@@ -35,14 +49,23 @@ files:
 - LICENSE
 - README.md
 - app/assets/tailwind/flowbite_components/engine.css
+- app/components/flowbite/breadcrumb.rb
+- app/components/flowbite/breadcrumb/home_icon.rb
+- app/components/flowbite/breadcrumb/item.rb
+- app/components/flowbite/breadcrumb/item/current.rb
+- app/components/flowbite/breadcrumb/item/first.rb
+- app/components/flowbite/breadcrumb/separator_icon.rb
 - app/components/flowbite/button.rb
 - app/components/flowbite/button/outline.rb
 - app/components/flowbite/button/pill.rb
 - app/components/flowbite/card.rb
+- app/components/flowbite/card/card.html.erb
+- app/components/flowbite/card/title.rb
+- app/components/flowbite/input.rb
 - app/components/flowbite/input/checkbox.rb
 - app/components/flowbite/input/date.rb
+- app/components/flowbite/input/date_time.rb
 - app/components/flowbite/input/email.rb
-- app/components/flowbite/input/field.rb
 - app/components/flowbite/input/file.rb
 - app/components/flowbite/input/hint.rb
 - app/components/flowbite/input/label.rb
@@ -58,6 +81,7 @@ files:
 - app/components/flowbite/input_field/checkbox.html.erb
 - app/components/flowbite/input_field/checkbox.rb
 - app/components/flowbite/input_field/date.rb
+- app/components/flowbite/input_field/date_time.rb
 - app/components/flowbite/input_field/email.rb
 - app/components/flowbite/input_field/file.rb
 - app/components/flowbite/input_field/input_field.html.erb
@@ -70,15 +94,23 @@ files:
 - app/components/flowbite/input_field/text.rb
 - app/components/flowbite/input_field/textarea.rb
 - app/components/flowbite/input_field/url.rb
+- app/components/flowbite/link.rb
 - app/components/flowbite/style.rb
+- app/components/flowbite/styles.rb
+- app/components/flowbite/toast.rb
+- app/components/flowbite/toast/icon.html.erb
+- app/components/flowbite/toast/icon.rb
+- app/components/flowbite/toast/toast.html.erb
 - lib/flowbite/components.rb
 - lib/flowbite/components/engine.rb
 - lib/flowbite/components/version.rb
-homepage: https://github.com/substancelab/flowbite-components
+- lib/yard/flowbite_viewcomponent.rb
+homepage: https://flowbite-components.substancelab.com
 licenses: []
 metadata:
   allowed_push_host: https://rubygems.org/
-  homepage_uri: https://github.com/substancelab/flowbite-components
+  documentation_uri: https://flowbite-components.substancelab.com/docs
+  homepage_uri: https://flowbite-components.substancelab.com
   source_code_uri: https://github.com/substancelab/flowbite-components
   changelog_uri: https://github.com/substancelab/flowbite-components/blob/main/CHANGELOG.md
 rdoc_options: []
@@ -96,7 +128,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.9
+rubygems_version: 4.0.3
 specification_version: 4
 summary: ViewComponents using the Flowbite design system
 test_files: []

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

@@ -1,117 +0,0 @@
-# frozen_string_literal: true
-
-module Flowbite
-  module Input
-    # The indivdual input component for use in forms without labels or error
-    # messages.
-    #
-    # Use this when you want to render an input field on its own without any
-    # surrounding elements, ie as a building block in more complex input
-    # components.
-    #
-    # To render a complete input field with labels and error messages, use
-    # `Flowbite::InputField` instead.
-    class Field < ViewComponent::Base
-      SIZES = {
-        sm: ["p-2", "text-xs"],
-        default: ["p-2.5", "text-sm"],
-        lg: ["p-4", "text-base"]
-      }.freeze
-
-      STATES = [
-        DEFAULT = :default,
-        DISABLED = :disabled,
-        ERROR = :error
-      ].freeze
-
-      attr_reader :options, :size, :style
-
-      class << self
-        def classes(size: :default, state: :default, style: :default)
-          style = styles.fetch(style)
-          state_classes = style.fetch(state)
-          state_classes + sizes.fetch(size)
-        end
-
-        # Returns the sizes this Field supports.
-        #
-        # This is effectively the SIZES constant, but provided as a method to
-        # return the constant from the current class, not the superclass.
-        #
-        # @return [Hash] A hash mapping size names to their corresponding CSS
-        # classes.
-        def sizes
-          const_get(:SIZES)
-        end
-
-        # rubocop:disable Layout/LineLength
-        def styles
-          {
-            default: Flowbite::Style.new(
-              default: ["bg-gray-50", "border", "border-gray-300", "text-gray-900", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-white", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
-              disabled: ["bg-gray-100", "border", "border-gray-300", "text-gray-900", "text-sm", "rounded-lg", "focus:ring-blue-500", "focus:border-blue-500", "block", "w-full", "p-2.5", "cursor-not-allowed", "dark:bg-gray-700", "dark:border-gray-600", "dark:placeholder-gray-400", "dark:text-gray-400", "dark:focus:ring-blue-500", "dark:focus:border-blue-500"],
-              error: ["bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "dark:bg-gray-700", "focus:border-red-500", "block", "w-full", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
-            )
-          }.freeze
-        end
-        # rubocop:enable Layout/LineLength
-      end
-
-      def initialize(attribute:, form:, disabled: false, options: {}, size: :default)
-        @attribute = attribute
-        @disabled = disabled
-        @form = form
-        @options = options || {}
-        @object = form.object
-        @size = size
-      end
-
-      # Returns the HTML to use for the actual input field element.
-      def call
-        @form.send(
-          input_field_type,
-          @attribute,
-          **input_options
-        )
-      end
-
-      # Returns the CSS classes to apply to the input field
-      def classes
-        self.class.classes(size: size, state: state)
-      end
-
-      # Returns the name of the method used to generate HTML for the input field
-      def input_field_type
-        :text_field
-      end
-
-      protected
-
-      # Returns true if the field is disabled
-      def disabled?
-        !!@disabled
-      end
-
-      def errors?
-        @object.errors.include?(@attribute.intern)
-      end
-
-      private
-
-      # Returns the options argument for the input field
-      def input_options
-        {
-          class: classes,
-          disabled: disabled?
-        }.merge(options)
-      end
-
-      def state
-        return DISABLED if disabled?
-        return ERROR if errors?
-
-        DEFAULT
-      end
-    end
-  end
-end