flowbite-components 0.1.4 → 0.3.0

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

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Date < Field
+  class Input
+    class Date < Input
       def input_field_type
         :date_field
       end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Input
+    class DateTime < Input
+      def input_field_type
+        :datetime_field
+      end
+    end
+  end
+end

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

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Email < Field
+  class Input
+    class Email < Input
       # Returns the name of the method used to generate HTML for the input field
       def input_field_type
         :email_field

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

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class File < Field
+  class Input
+    class File < Input
       SIZES = {
         sm: ["text-sm"],
         default: ["text-sm"],

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

@@ -1,7 +1,12 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
+    # A hint element for input fields.
+    #
+    # Provides additional context or instructions for the user.
+    #
+    # See https://flowbite.com/docs/forms/input-field/#helper-text
     class Hint < ViewComponent::Base
       STATES = [
         DEFAULT = :default

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

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label
     class Label < ViewComponent::Base
       STATES = [

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

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Number < Field
+  class Input
+    class Number < Input
       def input_field_type
         :number_field
       end

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

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Password < Field
+  class Input
+    class Password < Input
       def input_field_type
         :password_field
       end

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

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Phone < Field
+  class Input
+    class Phone < Input
       def input_field_type
         :phone_field
       end

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

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # The radio button component can be used to allow the user to choose a
     # single option from one or more available options.
     #
     # https://flowbite.com/docs/forms/radio/
-    class RadioButton < Field
+    class RadioButton < Input
       class << self
         # Radio buttons only have their default size.
         def sizes

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

@@ -1,13 +1,13 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     # The `Select` component renders a select input field for use in forms.
     #
     # https://flowbite.com/docs/forms/select/
     #
     # Wraps `ActionView::Helpers::FormOptionsHelper#select`: https://api.rubyonrails.org/classes/ActionView/Helpers/FormOptionsHelper.html#method-i-select
-    class Select < Field
+    class Select < Input
       SIZES = {
         sm: ["px-2.5", "py-2", "text-sm"],
         default: ["px-3", "py-2.5", "text-sm"],

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

@@ -1,8 +1,8 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
-    class Textarea < Field
+  class Input
+    class Textarea < Input
       class << self
         # rubocop:disable Layout/LineLength
         def styles

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,7 +1,7 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module Input
+  class Input
     class ValidationError < ViewComponent::Base
       class << self
         def classes(state: :default, style: :default)

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.rb

@@ -31,6 +31,13 @@ module Flowbite
 
       private
 
+      def default_input_arguments
+        args = super
+        args[:unchecked_value] = @input[:unchecked_value] if @input.key?(:unchecked_value)
+        args[:value] = @input[:value] if @input.key?(:value)
+        args
+      end
+
       def hint_classes
         if disabled?
           "text-xs font-normal text-fg-disabled"
@@ -39,13 +46,6 @@ module Flowbite
         end
       end
 
-      def input_arguments
-        args = super
-        args[:unchecked_value] = @input[:unchecked_value] if @input.key?(:unchecked_value)
-        args[:value] = @input[:value] if @input.key?(:value)
-        args
-      end
-
       def label_classes
         if disabled?
           "font-medium text-fg-disabled"

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 class="<%= classes.join(" ") %>">
+<%= 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.rb

@@ -26,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
@@ -37,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

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

@@ -19,7 +19,7 @@ module Flowbite
             form: @form,
             include_blank: @include_blank,
             multiple: @multiple,
-            options: input_options,
+            options: default_input_options,
             size: @size
           )
         )