flowbite-components 0.1.0 → 0.1.2

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,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