uchi 0.1.2 → 0.1.4

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

@@ -0,0 +1,117 @@
+# 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

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class File < Field
+      SIZES = {
+        sm: ["text-xs"],
+        default: ["text-sm"],
+        lg: ["text-lg"]
+      }.freeze
+
+      # Returns the name of the method used to generate HTML for the input field
+      def input_field_type
+        :file_field
+      end
+
+      # rubocop:disable Layout/LineLength
+      def self.styles
+        {
+          default: Flowbite::Style.new(
+            default: ["block", "w-full", "text-gray-900", "border", "border-gray-300", "rounded-lg", "cursor-pointer", "bg-gray-50", "focus:outline-none", "dark:text-gray-400", "dark:bg-gray-700", "dark:border-gray-600"],
+            disabled: ["block", "w-full", "text-gray-400", "border", "border-gray-300", "rounded-lg", "cursor-not-allowed", "bg-gray-100", "dark:text-gray-500", "dark:bg-gray-600", "dark:border-gray-500"],
+            error: ["block", "w-full", "text-red-900", "border", "border-red-500", "rounded-lg", "cursor-pointer", "bg-red-50", "focus:outline-none", "dark:text-red-400", "dark:bg-gray-700", "dark:border-red-500"]
+          )
+        }.freeze
+      end
+      # rubocop:enable Layout/LineLength
+    end
+  end
+end

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    class Hint < ViewComponent::Base
+      STATES = [
+        DEFAULT = :default
+      ].freeze
+
+      class << self
+        def classes(state: :default, style: :default)
+          style = styles.fetch(style)
+          style.fetch(state)
+        end
+
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["mt-2", "text-sm", "text-gray-500", "dark:text-gray-400"]
+            )
+          }.freeze
+        end
+      end
+
+      def call
+        tag.p(
+          content,
+          class: classes,
+          **@options
+        )
+      end
+
+      def initialize(attribute:, form:, options: {})
+        @attribute = attribute
+        @form = form
+        @options = options
+        @object = form.object
+      end
+
+      # Returns an array with the CSS classes to apply to the label element
+      def classes
+        self.class.classes(state: state)
+      end
+
+      protected
+
+      # Returns the state of the label.
+      #
+      # See the STATES constant for valid values.
+      #
+      # @return [Symbol] the state of the label
+      def state
+        DEFAULT
+      end
+    end
+  end
+end

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

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module Input
+    # https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-label
+    class Label < ViewComponent::Base
+      STATES = [
+        DEFAULT = :default,
+        DISABLED = :disabled,
+        ERROR = :error
+      ].freeze
+
+      class << self
+        def classes(state: :default, style: :default)
+          style = styles.fetch(style)
+          style.fetch(state)
+        end
+
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["block", "mb-2", "text-sm", "font-medium", "text-gray-900", "dark:text-white"],
+              disabled: ["block", "mb-2", "text-sm", "font-medium", "text-gray-400", "dark:text-gray-500"],
+              error: ["block", "mb-2", "text-sm", "font-medium", "text-red-700", "dark:text-red-500"]
+            )
+          }.freeze
+        end
+      end
+
+      def call
+        if content?
+          @form.label(@attribute, content, **options)
+        else
+          @form.label(@attribute, **options)
+        end
+      end
+
+      def errors?
+        @object.errors.include?(@attribute.intern)
+      end
+
+      def initialize(attribute:, form:, disabled: false, options: {})
+        @attribute = attribute
+        @disabled = disabled
+        @form = form
+        @object = form.object
+        @options = options
+      end
+
+      # Returns an array with the CSS classes to apply to the label element
+      def classes
+        self.class.classes(state: state)
+      end
+
+      protected
+
+      def disabled?
+        !!@disabled
+      end
+
+      # Returns the state of the label.
+      #
+      # See the STATES constant for valid values.
+      #
+      # @return [Symbol] the state of the label
+      def state
+        return DISABLED if disabled?
+        return ERROR if errors?
+
+        DEFAULT
+      end
+
+      private
+
+      def options
+        {
+          class: classes
+        }.merge(@options)
+      end
+    end
+  end
+end

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

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

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

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

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

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

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

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Flowbite
+  module 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 << self
+        # Radio buttons only have their default size.
+        def sizes
+          {
+            default: ["w-4", "h-4"]
+          }
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: Flowbite::Style.new(
+              default: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              disabled: ["text-blue-600", "bg-gray-100", "border-gray-300", "focus:ring-blue-500", "dark:focus:ring-blue-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-gray-600"],
+              error: ["text-red-600", "bg-red-50", "border-red-500", "focus:ring-red-500", "dark:focus:ring-red-600", "dark:ring-offset-gray-800", "focus:ring-2", "dark:bg-gray-700", "dark:border-red-500"]
+            )
+          }.freeze
+        end
+      end
+
+      # Returns the HTML to use for the actual input field element.
+      def call
+        @form.send(
+          input_field_type,
+          @attribute,
+          @value,
+          **input_options
+        )
+      end
+
+      def initialize(attribute:, form:, value:, disabled: false, options: {})
+        super(attribute: attribute, disabled: disabled, form: form, options: options)
+        @value = value
+      end
+
+      def input_field_type
+        :radio_button
+      end
+    end
+  end
+end

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,54 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class InputField
+    class Checkbox < InputField
+      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
+
+      def input_component
+        ::Flowbite::Input::Checkbox
+      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 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-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/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/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