flowbite-components 0.1.1 → 0.1.2

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module 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
+      SIZES = {
+        sm: ["p-2", "text-xs"],
+        default: ["p-2.5", "text-sm"],
+        lg: ["px-4", "py-3", "text-base"]
+      }.freeze
+
+      def initialize(form:, attribute:, collection: [], disabled: false, options: {}, size: :default)
+        super(form: form, attribute: attribute, disabled: disabled, options: options, size: size)
+        @collection = collection
+      end
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          @collection,
+          {},
+          html_options
+        )
+      end
+
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :select
+      end
+
+      private
+
+      # Returns the html_options argument for the select method
+      def html_options
+        {
+          class: classes,
+          disabled: disabled?
+        }.merge(options)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Textarea < Field
+      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
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          **input_options
+        )
+      end
+
+      protected
+
+      # 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_area
+      end
+    end
+  end
+end

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

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Url < Field
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :url_field
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class ValidationError < ViewComponent::Base
+      def call
+        tag.p(content, class: "mt-2 text-sm text-red-600 dark:text-red-500")
+      end
+    end
+  end
+end

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

@@ -0,0 +1,14 @@
+<div class="flex">
+  <div class="flex items-center h-5">
+      <%= input %>
+  </div>
+
+  <div class="ms-2 text-sm">
+    <%= label %>
+    <%= hint %>
+  </div>
+
+  <% errors.each do |error| %>
+    <%= render(Flowbite::Input::ValidationError.new) { error.upcase_first } %>
+  <% end %>
+</div>

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

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class InputField
+    class Checkbox < InputField
+      protected
+
+      def input_component
+        ::Flowbite::Input::Checkbox
+      end
+
+      protected
+
+      def default_hint_options
+        return {} unless @hint
+
+        {
+          class: hint_classes,
+          id: id_for_hint_element
+        }.merge(@hint[:options] || {})
+      end
+
+      def default_label_options
+        options = super
+        options[:options] ||= {}
+        options[:options][:class] = options.dig(:options, :class) || label_classes
+        options
+      end
+
+      private
+
+      def hint_classes
+        if disabled?
+          "text-xs font-normal text-gray-400 dark:text-gray-500"
+        else
+          "text-xs font-normal text-gray-500 dark:text-gray-300"
+        end
+      end
+
+      def label_classes
+        if disabled?
+          "font-medium text-gray-400 dark:text-gray-500"
+        else
+          "font-medium text-gray-900 dark:text-gray-300"
+        end
+      end
+    end
+  end
+end

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,14 @@
+<div class="flex">
+  <div class="flex items-center h-5">
+      <%= input %>
+  </div>
+
+  <div class="ms-2 text-sm">
+    <%= label %>
+    <%= hint %>
+  </div>
+
+  <% errors.each do |error| %>
+    <%= render(Flowbite::Input::ValidationError.new) { error.upcase_first } %>
+  <% end %>
+</div>

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

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class InputField
+    class RadioButton < InputField
+      protected
+
+      def initialize(attribute:, form:, value:, disabled: false, hint: nil, input: {}, label: {})
+        super(attribute: attribute, form: form, disabled: disabled, hint: hint, input: input, label: label)
+        @value = value
+      end
+
+      def input_component
+        ::Flowbite::Input::RadioButton
+      end
+
+      protected
+
+      def default_input
+        args = {
+          attribute: @attribute,
+          disabled: disabled?,
+          form: @form,
+          options: default_input_options.merge(@input[:options] || {}),
+          value: @value
+        }
+
+        input_component.new(**args)
+      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
+        super.merge({
+          options: {
+            class: label_classes,
+            for: id_for_input_element
+          }
+        })
+      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
+
+      private
+
+      def hint_classes
+        if disabled?
+          "text-xs font-normal text-gray-400 dark:text-gray-500"
+        else
+          "text-xs font-normal text-gray-500 dark:text-gray-300"
+        end
+      end
+
+      def id_for_input_element
+        [
+          @form.object_name,
+          @attribute,
+          @value
+        ].join("_")
+      end
+
+      def id_for_hint_element
+        [id_for_input_element, "hint"].join("_")
+      end
+
+      def label_classes
+        if disabled?
+          "font-medium text-gray-400 dark:text-gray-500"
+        else
+          "font-medium text-gray-900 dark:text-gray-300"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class InputField
+    class Select < InputField
+      def initialize(attribute:, form:, collection: [], disabled: false, hint: nil, input: {}, label: {}, size: :default)
+        super(attribute: attribute, disabled: disabled, form: form, hint: hint, input: input, label: label, size: size)
+        @collection = collection
+      end
+
+      def input
+        render(
+          input_component.new(
+            attribute: @attribute,
+            collection: @collection,
+            disabled: @disabled,
+            form: @form,
+            options: input_options,
+            size: @size
+          )
+        )
+      end
+
+      private
+
+      def input_component
+        ::Flowbite::Input::Select
+      end
+    end
+  end
+end

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

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class InputField
+    class Text < InputField
+    end
+  end
+end

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

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

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

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

data/app/components/flowbite/input_field.rb

@@ -0,0 +1,187 @@
+# 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.
+  #
+  # @see https://flowbite.com/docs/forms/input-field/
+  #
+  # The input field is an important part of the form element that can be used to
+  # create interactive controls to accept data from the user based on multiple
+  # input types, such as text, email, number, password, URL, phone number, and
+  # 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.
+  #
+  # Expects 2 arguments:
+  #
+  # @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.
+  #
+  # Supports additional arguments:
+  #
+  # @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.
+  class InputField < ViewComponent::Base
+    renders_one :hint
+    renders_one :input
+    renders_one :label
+
+    # Returns the errors for attribute
+    def errors
+      @object.errors[@attribute] || []
+    end
+
+    def initialize(attribute:, form:, disabled: false, hint: nil, input: {}, label: {}, size: :default)
+      @attribute = attribute
+      @disabled = disabled
+      @form = form
+      @hint = hint
+      @input = input
+      @label = label
+      @object = form.object
+      @size = size
+    end
+
+    def input_component
+      ::Flowbite::Input::Field
+    end
+
+    protected
+
+    # Returns the HTML to use for the hint element if any
+    def default_hint
+      return unless hint?
+
+      component = Flowbite::Input::Hint.new(
+        attribute: @attribute,
+        form: @form,
+        options: default_hint_options
+      ).with_content(default_hint_content)
+      render(component)
+    end
+
+    def default_hint_content
+      return nil unless @hint
+
+      @hint[:content]
+    end
+
+    # Returns a Hash with the default attributes to apply to the hint element.
+    #
+    # The default attributes can be overriden by passing the `hint[options]`
+    # argument to the constructor.
+    def default_hint_options
+      return {} unless @hint
+
+      {
+        id: id_for_hint_element
+      }.merge(@hint[:options] || {})
+    end
+
+    # Returns a Hash with the default attributes to apply to the input element.
+    #
+    # The default attributes can be overriden by passing the `input[options]`
+    # argument to the constructor.
+    def default_input_options
+      if hint?
+        {
+          "aria-describedby": id_for_hint_element
+        }
+      else
+        {}
+      end
+    end
+
+    # Returns the HTML to use for the default input element.
+    def default_input
+      render(input_component.new(
+        form: @form,
+        attribute: @attribute,
+        disabled: @disabled,
+        options: input_options,
+        size: @size
+      ))
+    end
+
+    def default_label
+      component = Flowbite::Input::Label.new(**default_label_options)
+      if default_label_content
+        component.with_content(default_label_content)
+      else
+        component
+      end
+    end
+
+    def default_label_content
+      @label[:content]
+    end
+
+    def default_label_options
+      label_options = @label.dup
+      label_options.delete(:content)
+
+      {
+        attribute: @attribute,
+        form: @form
+      }.merge(label_options)
+    end
+
+    # Returns true if the input field is disabled, false otherwise.
+    def disabled?
+      !!@disabled
+    end
+
+    # Returns true if the input field has a hint, false otherwise.
+    def hint?
+      @hint.present?
+    end
+
+    def id_for_hint_element
+      "#{@form.object_name}_#{@attribute}_hint"
+    end
+
+    def input_options
+      default_input_options.merge(@input[:options] || {})
+    end
+  end
+end

data/app/components/flowbite/style.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Style
+    attr_reader :classes
+
+    delegate :fetch, to: :classes
+
+    def initialize(classes)
+      @classes = classes
+    end
+  end
+end

data/lib/flowbite/components/version.rb

@@ -2,6 +2,6 @@
 
 module Flowbite
   module Components
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end