flowbite-components 0.1.0 → 0.1.2

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/{view_components → components}/engine.rb

@@ -1,9 +1,9 @@
 require "rails/engine"
 
 module Flowbite
-  module ViewComponents
+  module Components
     class Engine < ::Rails::Engine
-      isolate_namespace Flowbite::ViewComponents
+      isolate_namespace Flowbite::Components
 
       config.autoload_paths = [
         "#{root}/app/components"

data/lib/flowbite/{view_components → components}/version.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Flowbite
-  module ViewComponents
-    VERSION = "0.1.0"
+  module Components
+    VERSION = "0.1.2"
   end
 end

data/lib/flowbite/{view_components.rb → components.rb}

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
-require_relative "view_components/engine"
-require_relative "view_components/version"
+require_relative "components/engine"
+require_relative "components/version"
 
 require "view_component"
 
 module Flowbite
-  module ViewComponents
+  module Components
     class Error < StandardError; end
     # Your code goes here...
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: flowbite-components
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.2
 platform: ruby
 authors:
 - Jakob Skjerning
@@ -23,7 +23,8 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 4.0.0
-description: A library of Flowbite View Components to be used in Rails applications.
+description: A library of View Components based on the Flowbite design system to be
+  used in Rails applications.
 email:
 - jakob@mentalized.net
 executables: []
@@ -33,18 +34,56 @@ files:
 - CHANGELOG.md
 - LICENSE
 - README.md
-- lib/flowbite/view_components.rb
-- lib/flowbite/view_components/engine.rb
-- lib/flowbite/view_components/version.rb
-homepage: https://github.com/substancelab/flowbite-view_components
+- app/assets/tailwind/flowbite_components/engine.css
+- app/components/flowbite/button.rb
+- app/components/flowbite/button/outline.rb
+- app/components/flowbite/button/pill.rb
+- app/components/flowbite/card.rb
+- app/components/flowbite/input/checkbox.rb
+- app/components/flowbite/input/date.rb
+- app/components/flowbite/input/email.rb
+- app/components/flowbite/input/field.rb
+- app/components/flowbite/input/file.rb
+- app/components/flowbite/input/hint.rb
+- app/components/flowbite/input/label.rb
+- app/components/flowbite/input/number.rb
+- app/components/flowbite/input/password.rb
+- app/components/flowbite/input/phone.rb
+- app/components/flowbite/input/radio_button.rb
+- app/components/flowbite/input/select.rb
+- app/components/flowbite/input/textarea.rb
+- app/components/flowbite/input/url.rb
+- app/components/flowbite/input/validation_error.rb
+- app/components/flowbite/input_field.rb
+- app/components/flowbite/input_field/checkbox.html.erb
+- app/components/flowbite/input_field/checkbox.rb
+- app/components/flowbite/input_field/date.rb
+- app/components/flowbite/input_field/email.rb
+- app/components/flowbite/input_field/file.rb
+- app/components/flowbite/input_field/input_field.html.erb
+- app/components/flowbite/input_field/number.rb
+- app/components/flowbite/input_field/password.rb
+- app/components/flowbite/input_field/phone.rb
+- app/components/flowbite/input_field/radio_button.html.erb
+- app/components/flowbite/input_field/radio_button.rb
+- app/components/flowbite/input_field/select.rb
+- app/components/flowbite/input_field/text.rb
+- app/components/flowbite/input_field/textarea.rb
+- app/components/flowbite/input_field/url.rb
+- app/components/flowbite/style.rb
+- lib/flowbite/components.rb
+- lib/flowbite/components/engine.rb
+- lib/flowbite/components/version.rb
+homepage: https://github.com/substancelab/flowbite-components
 licenses: []
 metadata:
   allowed_push_host: https://rubygems.org/
-  homepage_uri: https://github.com/substancelab/flowbite-view_components
-  source_code_uri: https://github.com/substancelab/flowbite-view_components
-  changelog_uri: https://github.com/substancelab/flowbite-view_components/blob/main/CHANGELOG.md
+  homepage_uri: https://github.com/substancelab/flowbite-components
+  source_code_uri: https://github.com/substancelab/flowbite-components
+  changelog_uri: https://github.com/substancelab/flowbite-components/blob/main/CHANGELOG.md
 rdoc_options: []
 require_paths:
+- app
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
@@ -59,5 +98,5 @@ required_rubygems_version: !ruby/object:Gem::Requirement
 requirements: []
 rubygems_version: 3.6.9
 specification_version: 4
-summary: Flowbite components for Rails applications
+summary: ViewComponents using the Flowbite design system
 test_files: []