flowbite-components 0.1.3 → 0.2.0

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

@@ -1,21 +1,23 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Textarea < Field
+  class Input
+    class Textarea < Input
       class << self
         # rubocop:disable Layout/LineLength
         def styles
-          {
-            default: Flowbite::Style.new(
-              default: ["block", "w-full", "text-gray-900", "bg-gray-50", "rounded-lg", "border", "border-gray-300", "focus:ring-blue-500", "focus:border-blue-500", "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: ["block", "w-full", "bg-gray-100", "rounded-lg", "border", "border-gray-300", "text-gray-900", "cursor-not-allowed"],
-              error: ["block", "w-full", "bg-red-50", "border", "border-red-500", "text-red-900", "placeholder-red-700", "rounded-lg", "focus:ring-red-500", "focus:border-red-500", "dark:bg-gray-700", "dark:text-red-500", "dark:placeholder-red-500", "dark:border-red-500"]
-            )
-          }.freeze
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["block", "w-full", "text-heading", "bg-neutral-secondary-medium", "rounded-base", "border", "border-default-medium", "focus:ring-brand", "focus:border-brand", "shadow-xs", "placeholder:text-body"],
+                disabled: ["block", "w-full", "bg-neutral-secondary-medium", "rounded-base", "border", "border-default-medium", "text-fg-disabled", "cursor-not-allowed", "shadow-xs", "placeholder:text-fg-disabled"],
+                error: ["block", "w-full", "bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "placeholder:text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "shadow-xs"]
+              }
+            }.freeze
+          )
         end
-        # rubocop:enable Layout/LineLength
       end
+      # rubocop:enable Layout/LineLength
 
       # Returns the HTML to use for the actual input field element.
       def call
@@ -30,7 +32,7 @@ module Flowbite
 
       # Returns the CSS classes to apply to the input field
       def classes
-        self.class.classes(size: size, state: state)
+        self.class.classes(size: size, state: state) + @class
       end
 
       # Returns the name of the method used to generate HTML for the input field

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,10 +1,40 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     class ValidationError < ViewComponent::Base
+      class << self
+        def classes(state: :default, style: :default)
+          style = styles.fetch(style)
+          style.fetch(state)
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          Flowbite::Styles.from_hash(
+            {
+              default: {
+                default: ["mt-2", "text-sm", "text-red-600", "dark:text-red-500"]
+              }
+            }.freeze
+          )
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
       def call
-        tag.p(content, class: "mt-2 text-sm text-red-600 dark:text-red-500")
+        tag.p(content, class: classes)
+      end
+
+      def initialize(class: nil)
+        @class = Array.wrap(binding.local_variable_get(:class))
+      end
+
+      protected
+
+      # Returns the CSS classes to apply to the validation error
+      def classes
+        self.class.classes + @class
       end
     end
   end

data/app/components/flowbite/input.rb

@@ -0,0 +1,155 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # The individual input form element used in forms - without labels, error
+  # messages, hints, etc.
+  #
+  # Use this when you want to render an input field on its own without any
+  # surrounding elements, i.e. as a building block in more complex input
+  # components. To render a complete input field with labels and error messages,
+  # use {Flowbite::InputField} instead.
+  #
+  # By default this renders a text input field. To render other types of input
+  # fields, use one of the subclasses, such as {Flowbite::Input::Checkbox} or
+  # {Flowbite::Input::Textarea}.
+  #
+  # @example Usage
+  #   <%= render(Flowbite::Input::Email.new(attribute: :email, form: form)) %>
+  #
+  # @lookbook_embed InputPreview
+  class Input < ViewComponent::Base
+    SIZES = {
+      sm: ["px-2.5", "py-2", "text-sm"],
+      default: ["px-3", "py-2.5", "text-sm"],
+      lg: ["px-3.5", "py-3", "text-base"]
+    }.freeze
+
+    STATES = [
+      DEFAULT = :default,
+      DISABLED = :disabled,
+      ERROR = :error
+    ].freeze
+
+    attr_reader :options, :size, :style
+
+    class << self
+      # @return [Array<String>] The CSS classes to apply to the input field
+      #   given the specified +size+, +state+, and +style+.
+      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 Input 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
+
+      # @return [Flowbite::Styles] The available styles for this input field.
+      def styles
+        # rubocop:disable Layout/LineLength
+        Flowbite::Styles.from_hash(
+          {
+            default: {
+              default: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-heading", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "placeholder:text-body"],
+              disabled: ["bg-neutral-secondary-medium", "border", "border-default-medium", "text-fg-disabled", "rounded-base", "focus:ring-brand", "focus:border-brand", "block", "w-full", "shadow-xs", "cursor-not-allowed", "placeholder:text-fg-disabled"],
+              error: ["bg-danger-soft", "border", "border-danger-subtle", "text-fg-danger-strong", "rounded-base", "focus:ring-danger", "focus:border-danger", "block", "w-full", "shadow-xs", "placeholder:text-fg-danger-strong"]
+            }
+          }.freeze
+        )
+        # rubocop:enable Layout/LineLength
+      end
+    end
+
+    # @param attribute [Symbol] The attribute on the form's object this input
+    #   field is for.
+    #
+    # @param form [ActionView::Helpers::FormBuilder] The form builder this
+    #   input field is part of.
+    #
+    # @param class [String, Array<String>] Additional CSS classes to apply to
+    #   the input field.
+    #
+    # @param disabled [Boolean] Whether the input field should be disabled.
+    #
+    # @param options [Hash] Additional HTML attributes to pass to the input
+    #   field. For example, you can use this to set placeholder text by
+    #   passing +options: {placeholder: "Enter your name"}+
+    #
+    # @param size [Symbol] The size of the input field. Can be one of +:sm+,
+    #   +:default+, or +:lg+.
+    def initialize(attribute:, form:, class: nil, disabled: false, options: {}, size: :default)
+      @attribute = attribute
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @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
+    #
+    # @return [Array<String>] An array of CSS classes.
+    def classes
+      self.class.classes(size: size, state: state) + @class
+    end
+
+    # Returns the name of the method used to generate HTML for the input field
+    #
+    # @return [Symbol] The form helper method name to call on +form+.
+    def input_field_type
+      :text_field
+    end
+
+    protected
+
+    # @return [Boolean] Returns true if the field is disabled
+    def disabled?
+      !!@disabled
+    end
+
+    # Returns true if the object has errors. Returns false if there is no
+    # object.
+    #
+    # @return [Boolean] true if there are errors, false otherwise.
+    def errors?
+      return false unless @object
+
+      @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

data/app/components/flowbite/input_field/checkbox.html.erb

@@ -1,7 +1,5 @@
-<div class="flex">
-  <div class="flex items-center h-5">
-      <%= input %>
-  </div>
+<div class="<%= classes.join(" ") %>">
+  <div class="flex items-center h-5"><%= input %></div>
 
   <div class="ms-2 text-sm">
     <%= label %>

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

@@ -5,6 +5,10 @@ module Flowbite
     class Checkbox < InputField
       protected
 
+      def default_container_classes
+        ["flex"]
+      end
+
       def default_hint_options
         return {} unless @hint
 
@@ -29,9 +33,9 @@ module Flowbite
 
       def hint_classes
         if disabled?
-          "text-xs font-normal text-gray-400 dark:text-gray-500"
+          "text-xs font-normal text-fg-disabled"
         else
-          "text-xs font-normal text-gray-500 dark:text-gray-300"
+          "text-xs font-normal text-body"
         end
       end
 
@@ -44,9 +48,9 @@ module Flowbite
 
       def label_classes
         if disabled?
-          "font-medium text-gray-400 dark:text-gray-500"
+          "font-medium text-fg-disabled"
         else
-          "font-medium text-gray-900 dark:text-gray-300"
+          "font-medium text-heading"
         end
       end
     end

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class InputField
+    class DateTime < InputField
+      protected
+
+      def input_component
+        Flowbite::Input::DateTime
+      end
+    end
+  end
+end

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

@@ -1,8 +1,8 @@
-<div>
+<%= content_tag(:div, container_options) do %>
   <%= label %>
   <%= input %>
   <%= hint %>
   <% errors.each do |error| %>
     <%= render(Flowbite::Input::ValidationError.new) { error.upcase_first } %>
   <% end %>
-</div>
+<% end %>

data/app/components/flowbite/input_field/radio_button.html.erb

@@ -1,7 +1,5 @@
-<div class="flex">
-  <div class="flex items-center h-5">
-      <%= input %>
-  </div>
+<div class="<%= classes.join(" ") %>">
+  <div class="flex items-center h-5"><%= input %></div>
 
   <div class="ms-2 text-sm">
     <%= label %>

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

@@ -3,13 +3,17 @@
 module Flowbite
   class InputField
     class RadioButton < InputField
-      def initialize(attribute:, form:, value:, disabled: false, hint: nil, input: {}, label: {})
-        super(attribute: attribute, form: form, disabled: disabled, hint: hint, input: input, label: label)
+      def initialize(attribute:, form:, value:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {})
+        super(attribute: attribute, class: binding.local_variable_get(:class), form: form, disabled: disabled, hint: hint, input: input, label: label, options: options)
         @value = value
       end
 
       protected
 
+      def default_container_classes
+        ["flex"]
+      end
+
       def default_input
         args = {
           attribute: @attribute,
@@ -22,6 +26,15 @@ module Flowbite
         input_component.new(**args)
       end
 
+      def default_hint_options
+        return {} unless @hint
+
+        {
+          class: hint_classes,
+          id: id_for_hint_element
+        }.merge(@hint[:options] || {})
+      end
+
       # Returns options for the default label element. This includes CSS classes
       # since they are specific to RadioButton labels (and Checkbox ones).
       def default_label_options
@@ -33,21 +46,6 @@ module Flowbite
         })
       end
 
-      # Returns the HTML to use for the hint element if any
-      def hint
-        return unless hint?
-
-        component = Flowbite::Input::Hint.new(
-          attribute: @attribute,
-          form: @form,
-          options: {
-            class: hint_classes,
-            id: id_for_hint_element
-          }
-        ).with_content(@hint)
-        render(component)
-      end
-
       def input_component
         ::Flowbite::Input::RadioButton
       end
@@ -56,9 +54,9 @@ module Flowbite
 
       def hint_classes
         if disabled?
-          "text-xs font-normal text-gray-400 dark:text-gray-500"
+          "text-xs font-normal text-fg-disabled"
         else
-          "text-xs font-normal text-gray-500 dark:text-gray-300"
+          "text-xs font-normal text-body"
         end
       end
 
@@ -76,9 +74,9 @@ module Flowbite
 
       def label_classes
         if disabled?
-          "font-medium text-gray-400 dark:text-gray-500"
+          "font-medium text-fg-disabled"
         else
-          "font-medium text-gray-900 dark:text-gray-300"
+          "font-medium text-heading"
         end
       end
     end

data/app/components/flowbite/input_field.rb

@@ -1,9 +1,9 @@
 # frozen_string_literal: true
 
 module Flowbite
-  # A form element for a single field, containing label, input field, error
-  # messages, helper text and whatever else is needed for a user friendly input
-  # experience.
+  # A fully fledged form element for an attribute containing label, input field,
+  # error messages, helper text and whatever else is needed for a user-friendly
+  # input experience.
   #
   # @see https://flowbite.com/docs/forms/input-field/
   #
@@ -13,81 +13,143 @@ module Flowbite
   # more.
   #
   # Usually you'd use one of the subclasses of this class which implement the
-  # different input types, like `Flowbite::InputField::Text`,
-  # `Flowbite::InputField::Email`, etc.
+  # different input types, like {Flowbite::InputField::Text},
+  # {Flowbite::InputField::Email}, etc.
   #
-  # Expects 2 arguments:
+  # To render an input without labels or error messages etc, see
+  # {Flowbite::Input} instead and one of its subclasses.
   #
-  # @param attribute [Symbol] The name of the attribute to render in this input
-  # field.
+  # @example Basic usage
+  #   <% form_for @person do |form| %>
+  #     <%= render(
+  #       Flowbite::InputField::Number.new(
+  #         attribute: :name,
+  #         form: form
+  #       )
+  #     ) %>
+  #   <% end %>
   #
-  # @param form [ActionView::Helpers::FormBuilder] The form builder object that
-  # will be used to generate the input field.
+  # @example Kitchen sink
+  #   <% form_for @person do |form| %>
+  #     <%= render(
+  #       Flowbite::InputField::Number.new(
+  #         attribute: :name,
+  #         class: ["mb-4", "w-full"],
+  #         disabled: true,
+  #         form: form,
+  #         hint: {
+  #           content: "Please enter your full name.",
+  #           options: {id: "name-helper-text"}
+  #         },
+  #         input: {
+  #           options: {placeholder: "All of your names here"}
+  #         },
+  #         label: {
+  #           content: "Full name",
+  #           options: {class: ["mb-2", "font-medium"]}
+  #         },
+  #         options: {data: {controller: "form-field"}},
+  #         size: :lg
+  #       )
+  #     ) %>
+  #   <% end %>
   #
-  # Supports additional arguments:
+  # @viewcomponent_slot [Flowbite::Input::Hint] hint Helper text displayed
+  #   below the input field to provide additional context or instructions.
+  # @viewcomponent_slot [Flowbite::Input] input The input element itself.
+  #   Usually auto-generated based on the input type subclass.
+  # @viewcomponent_slot [Flowbite::Input::Label] label The label for the input
+  #   field, rendered above the input element.
   #
-  # @param hint [String] A hint to display below the input field, providing
-  # additional context or instructions for the user. This is optional. See
-  # https://flowbite.com/docs/forms/input-field/#helper-text
-  #
-  # @param label [Hash] A hash with options for the label. These are passed to
-  # Flowbite::Input::Label, see that for details. Can contain:
-  # - `content`: The content of the label. If not provided, the label will
-  #   default to the attribute name.
-  # - `options`: A hash of additional options to pass to the label component.
-  #   This can be used to set the class, for example.
-  #
-  # @param disabled [Boolean] Whether the input field should be disabled.
-  # Defaults to `false`.
-  #
-  # @param input [Hash] A hash with options for the default input component.
-  # These are passed to the input components constructor, so see whatever
-  # component is being used for details. Can contain:
-  # - `options`: Additional HTML attributes to pass to the input element.
-  #
-  # @param size [Symbol] The size of the input field. Can be one of `:sm`,
-  # `:md`, or `:lg`. Defaults to `:md`.
-  #
-  # Sample usage
-  #
-  #     <% form_for @person do |form| %>
-  #       <%= render(
-  #         Flowbite::InputField::Number.new(
-  #           :attribute => :name,
-  #           :form => form
-  #         )
-  #       ) %>
-  #     <% end %>
-  #
-  # To render an input without labels or error messages etc, use
-  # `Flowbite::Input::Field` instead.
+  # @lookbook_embed InputFieldPreview
   class InputField < ViewComponent::Base
     renders_one :hint
     renders_one :input
     renders_one :label
 
     # Returns the errors for attribute
+    #
+    # @return [Array<String>] An array of error messages for the attribute.
     def errors
+      return [] unless @object
+
       @object.errors[@attribute] || []
     end
 
-    def initialize(attribute:, form:, disabled: false, hint: nil, input: {}, label: {}, size: :default)
+    # @param attribute [Symbol] The name of the attribute to render in this
+    #   input field.
+    #
+    # @param form [ActionView::Helpers::FormBuilder] The form builder object that
+    #   will be used to generate the input field.
+    #
+    # @param class [String, Array<String>] Additional CSS classes to apply to
+    #   the input field container, i.e. the outermost element. To add classes to
+    #   individual components of the InputField, use the +input+, +label+ and
+    #   +hint+ arguments.
+    #
+    # @param disabled [Boolean] Whether the input field should be disabled.
+    #
+    # @param hint [Hash] A hint to display below the input field, providing
+    #   additional context or instructions for the user. If provided, this Hash
+    #   is passed to the {Flowbite::Input::Hint} constructor.
+    # @option hint [String] content The content of the hint element.
+    # @option hint [Hash] options Additional options to pass to the hint
+    #   component. This can be used to set the class, for example.
+    #
+    # @param input [Hash] A hash with options for the input component.
+    #   These are passed to the input component's constructor, see the
+    #   documentation for whatever input component is being used.
+    #   See {Flowbite::Input}.
+    # @option input [Hash] options Additional HTML attributes to pass to
+    #   the input element.
+    #
+    # @param label [Hash] A hash with options for the label element. If
+    #   provided, this Hash is passed to the {Flowbite::Input::Label}
+    #   constructor.
+    # @option label [String] content The content of the label element.
+    # @option label [Hash] options Additional options to pass to the label
+    #   component. This can be used to set the class, for example.
+    #
+    # @param options [Hash] Additional HTML attributes to pass to the input
+    #   field container element.
+    #
+    # @param size [Symbol] The size of the input field. Can be one of +:sm+,
+    #   +:default+, or +:lg+.
+    def initialize(attribute:, form:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {}, size: :default)
       @attribute = attribute
+      @class = Array.wrap(binding.local_variable_get(:class))
       @disabled = disabled
       @form = form
       @hint = hint
       @input = input
       @label = label
       @object = form.object
+      @options = options || {}
       @size = size
     end
 
     def input_component
-      ::Flowbite::Input::Field
+      ::Flowbite::Input
     end
 
     protected
 
+    def classes
+      if @options[:class]
+        Array.wrap(@options[:class])
+      else
+        [default_container_classes, @class].flatten.compact
+      end
+    end
+
+    def container_options
+      @options.merge({class: classes.join(" ")})
+    end
+
+    def default_container_classes
+      []
+    end
+
     # Returns the HTML to use for the hint element if any
     def default_hint
       return unless hint?
@@ -171,7 +233,13 @@ module Flowbite
     end
 
     def id_for_hint_element
-      "#{@form.object_name}_#{@attribute}_hint"
+      [
+        @form.object_name,
+        @attribute,
+        "hint"
+      ]
+        .compact_blank
+        .join("_")
     end
 
     # @return [Hash] The keyword arguments for the input component.

data/app/components/flowbite/link.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # The link component can be used to set hyperlinks from one page to another or
+  # to an external website when clicking on an inline text item, button, or card
+  #
+  # Use this component to add default styles to an inline link element.
+  #
+  # @lookbook_embed LinkPreview
+  class Link < ViewComponent::Base
+    attr_reader :href, :options
+
+    class << self
+      def classes
+        ["font-medium", "text-fg-brand", "hover:underline"]
+      end
+    end
+
+    # Initialize the Link component.
+    #
+    # @param href What to link to. This can be a String or anything else that
+    # `link_to` supports. See `ActionView::Helpers::UrlHelper#link_to` for more
+    # details.
+    #
+    # @param options [Hash] Additional HTML options for the link element
+    def initialize(href:, class: nil, **options)
+      super()
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @href = href
+      @options = options
+    end
+
+    def call
+      link_to(content, href, {class: classes}.merge(options))
+    end
+
+    private
+
+    def classes
+      self.class.classes + @class
+    end
+  end
+end