uchi 0.1.3 → 0.1.5

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,86 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class InputField
+    class RadioButton < InputField
+      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
+
+      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
+
+      def input_component
+        ::Flowbite::Input::RadioButton
+      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,192 @@
+# 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(**input_arguments))
+    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
+
+    # @return [Hash] The keyword arguments for the input component.
+    def input_arguments
+      {
+        attribute: @attribute,
+        disabled: @disabled,
+        form: @form,
+        options: input_options,
+        size: @size
+      }
+    end
+
+    def input_options
+      default_input_options.merge(@input[:options] || {})
+    end
+  end
+end

data/app/components/flowbite/link.rb

@@ -0,0 +1,21 @@
+module Flowbite
+  class Link < ViewComponent::Base
+    attr_reader :href, :text, :options
+
+    class << self
+      def classes
+        ["font-medium", "text-blue-600", "dark:text-blue-500", "hover:underline"].join(" ")
+      end
+    end
+
+    def initialize(href:, **options)
+      super()
+      @href = href
+      @options = options
+    end
+
+    def call
+      link_to(content, href, {class: self.class.classes}.merge(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/app/components/flowbite/toast/icon.html.erb

@@ -0,0 +1,5 @@
+<div class="<%= container_classes.join(" ") %>">
+  <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+    <path d="<%= svg_path %>"/>
+  </svg>
+</div>

data/app/components/flowbite/toast/icon.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Toast
+    # Renders an icon for a toast notification.
+    #
+    # @param style [Symbol] The color style of the icon (:default, :success, :danger, :warning).
+    class Icon < ViewComponent::Base
+      class << self
+        def classes(style: :default)
+          styles.fetch(style).fetch(:classes)
+        end
+
+        def svg_path(style: :default)
+          styles.fetch(style).fetch(:svg_path)
+        end
+
+        # rubocop:disable Layout/LineLength
+        def styles
+          {
+            default: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-blue-500", "bg-blue-100", "rounded-lg", "dark:bg-blue-800", "dark:text-blue-200"],
+              svg_path: "M15.147 15.085a7.159 7.159 0 0 1-6.189 3.307A6.713 6.713 0 0 1 3.1 15.444c-2.679-4.513.287-8.737.888-9.548A4.373 4.373 0 0 0 5 1.608c1.287.953 6.445 3.218 5.537 10.5 1.5-1.122 2.706-3.01 2.853-6.14 1.433 1.049 3.993 5.395 1.757 9.117Z"
+            },
+            success: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-green-500", "bg-green-100", "rounded-lg", "dark:bg-green-800", "dark:text-green-200"],
+              svg_path: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"
+            },
+            danger: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-red-500", "bg-red-100", "rounded-lg", "dark:bg-red-800", "dark:text-red-200"],
+              svg_path: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 11.793a1 1 0 1 1-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L8.586 10 6.293 7.707a1 1 0 0 1 1.414-1.414L10 8.586l2.293-2.293a1 1 0 0 1 1.414 1.414L11.414 10l2.293 2.293Z"
+            },
+            warning: {
+              classes: ["inline-flex", "items-center", "justify-center", "shrink-0", "w-8", "h-8", "text-orange-500", "bg-orange-100", "rounded-lg", "dark:bg-orange-700", "dark:text-orange-200"],
+              svg_path: "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"
+            }
+          }.freeze
+        end
+        # rubocop:enable Layout/LineLength
+      end
+
+      attr_reader :style
+
+      def initialize(style: :default)
+        @style = style
+      end
+
+      def container_classes
+        self.class.classes(style: style)
+      end
+
+      def svg_path
+        self.class.svg_path(style: style)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,11 @@
+<div class="<%= container_classes.join(" ") %>" role="alert" <%= options.map { |k, v| "#{k}=\"#{v}\"" }.join(" ").html_safe %>>
+  <%= render Flowbite::Toast::Icon.new(style: style) %>
+  <div class="ms-3 text-sm font-normal"><%= message %></div>
+  <% if dismissible %>
+    <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" aria-label="Close">
+      <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+      </svg>
+    </button>
+  <% end %>
+</div>

data/app/components/flowbite/toast.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a toast notification element.
+  #
+  # See https://flowbite.com/docs/components/toast/
+  #
+  # @param message [String] The message to display in the toast.
+  # @param style [Symbol] The color style of the toast (:default, :success, :danger, :warning).
+  # @param dismissible [Boolean] Whether the toast can be dismissed (default: true).
+  # @param class [Array<String>] Additional CSS classes for the toast container.
+  # @param options [Hash] Additional HTML options for the toast container.
+  class Toast < ViewComponent::Base
+    class << self
+      def classes
+        ["flex", "items-center", "w-full", "max-w-xs", "p-4", "text-gray-500", "bg-white", "rounded-lg", "shadow-sm", "dark:text-gray-400", "dark:bg-gray-800"]
+      end
+    end
+
+    attr_reader :message, :style, :dismissible, :additional_classes, :options
+
+    def initialize(message:, style: :default, dismissible: true, class: [], **options)
+      @message = message
+      @style = style
+      @dismissible = dismissible
+      @additional_classes = Array(binding.local_variable_get(:class)) || []
+      @options = options
+    end
+
+    def container_classes
+      self.class.classes + additional_classes
+    end
+  end
+end

data/app/components/uchi/field/base.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module Uchi
+  class Field
+    class Base < Field
+      # Uchi::Field::Base::Edit components render fields in the edit view.
+      class Edit < ViewComponent::Base
+        attr_reader :field, :form, :record, :repository, :label, :hint
+
+        def initialize(field:, form:, repository:, label: nil, hint: nil)
+          super()
+
+          @field = field
+          @form = form
+          @label = label
+          @hint = hint
+          @record = form.object
+          @repository = repository
+        end
+      end
+
+      # Uchi::Field::Base::Show components render fields in the show view.
+      class Show < ViewComponent::Base
+        attr_reader :field, :record, :repository
+
+        def initialize(field:, record:, repository:)
+          super()
+
+          @field = field
+          @record = record
+          @repository = repository
+        end
+      end
+
+      # Uchi::Field::Base::Index components render fields in the index view.
+      class Index < ViewComponent::Base
+        attr_reader :field, :record, :repository
+
+        class << self
+          # Returns the CSS classes to apply to the td or th of the table where
+          # this field is rendered.
+          def classes_for_table_cell
+            []
+          end
+        end
+
+        def initialize(field:, record:, repository:)
+          super()
+
+          @field = field
+          @record = record
+          @repository = repository
+        end
+      end
+    end
+  end
+end

data/app/components/uchi/field/belongs_to/edit.html.erb

@@ -0,0 +1 @@
+<%= render(Flowbite::InputField::Select.new(**options)) %>

data/app/components/uchi/field/belongs_to/index.html.erb

@@ -0,0 +1 @@
+<%= field.value(record) %>

data/app/components/uchi/field/belongs_to/show.html.erb

@@ -0,0 +1,5 @@
+<% if associated_record %>
+  <%= render(Flowbite::Link.new(
+    href: associated_repository.routes.path_for(:show, id: associated_record.id)
+  ).with_content(associated_record.to_s)) %>
+<% end %>