uchi 0.1.5 → 0.1.6

data/app/components/{flowbite → uchi/flowbite}/input_field/number.rb

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

data/app/components/{flowbite → uchi/flowbite}/input_field/password.rb

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

data/app/components/{flowbite → uchi/flowbite}/input_field/phone.rb

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

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

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

data/app/components/{flowbite → uchi/flowbite}/input_field/radio_button.rb

@@ -1,15 +1,19 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::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)
+      def initialize(attribute:, form:, value:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {})
+        super(attribute: attribute, class: binding.local_variable_get(:class), form: form, disabled: disabled, hint: hint, input: input, label: label, options: options)
         @value = value
       end
 
       protected
 
+      def default_container_classes
+        ["flex"]
+      end
+
       def default_input
         args = {
           attribute: @attribute,
@@ -37,7 +41,7 @@ module Flowbite
       def hint
         return unless hint?
 
-        component = Flowbite::Input::Hint.new(
+        component = Uchi::Flowbite::Input::Hint.new(
           attribute: @attribute,
           form: @form,
           options: {
@@ -49,16 +53,16 @@ module Flowbite
       end
 
       def input_component
-        ::Flowbite::Input::RadioButton
+        Uchi::Flowbite::Input::RadioButton
       end
 
       private
 
       def hint_classes
         if disabled?
-          "text-xs font-normal text-gray-400 dark:text-gray-500"
+          "text-xs font-normal text-fg-disabled"
         else
-          "text-xs font-normal text-gray-500 dark:text-gray-300"
+          "text-xs font-normal text-body"
         end
       end
 
@@ -76,9 +80,9 @@ module Flowbite
 
       def label_classes
         if disabled?
-          "font-medium text-gray-400 dark:text-gray-500"
+          "font-medium text-fg-disabled"
         else
-          "font-medium text-gray-900 dark:text-gray-300"
+          "font-medium text-heading"
         end
       end
     end

data/app/components/{flowbite → uchi/flowbite}/input_field/select.rb

@@ -1,11 +1,13 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class InputField
     class Select < InputField
-      def initialize(attribute:, form:, collection: [], disabled: false, hint: nil, input: {}, label: {}, size: :default)
+      def initialize(attribute:, form:, collection: [], disabled: false, hint: nil, include_blank: false, input: {}, label: {}, multiple: false, size: :default)
         super(attribute: attribute, disabled: disabled, form: form, hint: hint, input: input, label: label, size: size)
         @collection = collection
+        @include_blank = include_blank
+        @multiple = multiple
       end
 
       def input
@@ -15,6 +17,8 @@ module Flowbite
             collection: @collection,
             disabled: @disabled,
             form: @form,
+            include_blank: @include_blank,
+            multiple: @multiple,
             options: input_options,
             size: @size
           )
@@ -24,7 +28,7 @@ module Flowbite
       private
 
       def input_component
-        ::Flowbite::Input::Select
+        Uchi::Flowbite::Input::Select
       end
     end
   end

data/app/components/{flowbite → uchi/flowbite}/input_field/text.rb

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

data/app/components/{flowbite → uchi/flowbite}/input_field/textarea.rb

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

data/app/components/{flowbite → uchi/flowbite}/input_field/url.rb

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

data/app/components/{flowbite → uchi/flowbite}/input_field.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::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.
@@ -71,28 +71,42 @@ module Flowbite
       @object.errors[@attribute] || []
     end
 
-    def initialize(attribute:, form:, disabled: false, hint: nil, input: {}, label: {}, size: :default)
+    def initialize(attribute:, form:, class: nil, disabled: false, hint: nil, input: {}, label: {}, options: {}, size: :default)
       @attribute = attribute
+      @class = Array.wrap(binding.local_variable_get(:class))
       @disabled = disabled
       @form = form
       @hint = hint
       @input = input
       @label = label
       @object = form.object
+      @options = options || {}
       @size = size
     end
 
     def input_component
-      ::Flowbite::Input::Field
+      Uchi::Flowbite::Input::Field
     end
 
     protected
 
+    def classes
+      if @options[:class]
+        Array.wrap(@options[:class])
+      else
+        [default_container_classes, @class].flatten.compact
+      end
+    end
+
+    def default_container_classes
+      []
+    end
+
     # Returns the HTML to use for the hint element if any
     def default_hint
       return unless hint?
 
-      component = Flowbite::Input::Hint.new(
+      component = Uchi::Flowbite::Input::Hint.new(
         attribute: @attribute,
         form: @form,
         options: default_hint_options
@@ -138,7 +152,7 @@ module Flowbite
     end
 
     def default_label
-      component = Flowbite::Input::Label.new(**default_label_options)
+      component = Uchi::Flowbite::Input::Label.new(**default_label_options)
       if default_label_content
         component.with_content(default_label_content)
       else

data/app/components/uchi/flowbite/link.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Uchi::Flowbite
+  # The link component can be used to set hyperlinks from one page to another or
+  # to an external website when clicking on an inline text item, button, or card
+  #
+  # Use this component to add default styles to an inline link element.
+  class Link < ViewComponent::Base
+    attr_reader :href, :options
+
+    class << self
+      def classes
+        ["font-medium", "text-fg-brand", "hover:underline"]
+      end
+    end
+
+    # Initialize the Link component.
+    #
+    # @param href What to link to. This can be a String or anything else that
+    # `link_to` supports. See `ActionView::Helpers::UrlHelper#link_to` for more
+    # details.
+    #
+    # @param options [Hash] Additional HTML options for the link element
+    def initialize(href:, class: nil, **options)
+      super()
+      @class = Array.wrap(binding.local_variable_get(:class))
+      @href = href
+      @options = options
+    end
+
+    def call
+      link_to(content, href, {class: classes}.merge(options))
+    end
+
+    private
+
+    def classes
+      self.class.classes + @class
+    end
+  end
+end

data/app/components/{flowbite → uchi/flowbite}/style.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class Style
     attr_reader :classes
 

data/app/components/{flowbite → uchi/flowbite}/toast/icon.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   class Toast
     # Renders an icon for a toast notification.
     #

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

@@ -0,0 +1,40 @@
+<div
+  class="<%= container_classes.join(" ") %>"
+  role="alert"
+  <%= options.map { |k, v| "#{k}=\"#{v}\"" }.join(" ").html_safe %>
+>
+  <%= render Uchi::Flowbite::Toast::Icon.new(style: style) %>
+
+  <div class="ms-3 text-sm font-normal"><%= message %></div>
+
+  <% if dismissible %>
+    <%# Styles from https://flowbite.com/docs/components/toast/#default-toast %>
+    <button
+      type="button"
+      class="
+        ms-auto flex items-center justify-center text-body
+        hover:text-heading bg-transparent box-border border
+        border-transparent hover:bg-neutral-secondary-medium focus:ring-4
+        focus:ring-neutral-tertiary font-medium leading-5 rounded text-sm
+        h-8 w-8 focus:outline-none
+      "
+      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 → uchi/flowbite}/toast.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module Flowbite
+module Uchi::Flowbite
   # Renders a toast notification element.
   #
   # See https://flowbite.com/docs/components/toast/
@@ -13,7 +13,7 @@ module Flowbite
   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"]
+        ["flex", "items-center", "w-full", "max-w-xs", "p-4", "text-body", "bg-neutral-primary-soft", "rounded-base", "shadow-xs", "border", "border-default"]
       end
     end
 

data/app/components/uchi/ui/actions/dropdown/dropdown.html.erb

@@ -0,0 +1,59 @@
+<div class="relative" data-controller="dropdown">
+  <%= render(Uchi::Flowbite::Button.new(style: :secondary, :data => {:action => "dropdown#toggle click@window->dropdown#hide"}, id: button_id)) do %>
+    <div class="inline-flex items-center">
+      <%= repository.translate.actions_button_label %>
+
+      <svg
+        class="w-4 h-4 ms-1.5 -me-0.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m19 9-7 7-7-7"
+        />
+      </svg>
+    </div>
+  <% end %>
+
+  <!-- Dropdown menu -->
+  <div
+    aria-orientation="vertical"
+    aria-hidden="true"
+    data-dropdown-target="menu"
+    class="
+      transition transform origin-top-right absolute z-10 hidden bg-neutral-primary-medium border border-default-medium
+      rounded-base shadow-lg w-44 mt-1 -ml-1/2
+    "
+    id="actions-dropdown-<%= record.id %>"
+    role="menu"
+    tabindex="-1"
+  >
+    <ul
+      class="p-2 text-sm text-body font-medium"
+      aria-labelledby="<%= button_id %>"
+    >
+      <% actions.each do |action| %>
+        <li role="menuitem">
+          <%= form_with url: helpers.actions_executions_path, method: :post, class: "block" do %>
+            <%= hidden_field_tag :model, repository.model.name %>
+            <%= hidden_field_tag :action_name, action.class.name %>
+            <%= hidden_field_tag :id, record.id %>
+
+            <%= button_tag type: "submit",
+                          class: "block inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded" do %>
+              <%= action.name %>
+            <% end %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+</div>

data/app/components/uchi/ui/actions/dropdown.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Uchi
+  module Ui
+    module Actions
+      # Renders a dropdown menu of actions that can be performed on a record.
+      #
+      # This component displays available actions for a repository in a dropdown
+      # menu. Each action can be clicked to execute it on the specified record(s).
+      class Dropdown < ViewComponent::Base
+        attr_reader :actions, :record, :repository
+
+        def initialize(actions:, record:, repository:)
+          super()
+          @actions = actions
+          @record = record
+          @repository = repository
+        end
+
+        def render?
+          actions.any?
+        end
+
+        private
+
+        def button_id
+          "actions-dropdown-button-#{record.id}"
+        end
+      end
+    end
+  end
+end

data/app/components/uchi/ui/breadcrumb/breadcrumb.html.erb

@@ -1,12 +1,12 @@
-<%= render(Flowbite::Breadcrumb.new) do |breadcrumb| %>
+<%= render(Uchi::Flowbite::Breadcrumb.new) do |breadcrumb| %>
   <% items.each.with_index do |item, index| %>
     <% breadcrumb.with_item do %>
       <% if index.zero? %>
-        <%= render Flowbite::BreadcrumbItem::First.new(href: item[:href]).with_content(item[:label]) %>
+        <%= render Uchi::Flowbite::BreadcrumbItem::First.new(href: item[:href]).with_content(item[:label]) %>
       <% elsif index == items.size - 1 %>
-        <%= render Flowbite::BreadcrumbItem::Current.new.with_content(item[:label]) %>
+        <%= render Uchi::Flowbite::BreadcrumbItem::Current.new.with_content(item[:label]) %>
       <% else %>
-        <%= render Flowbite::BreadcrumbItem.new(href: item[:href]).with_content(item[:label]) %>
+        <%= render Uchi::Flowbite::BreadcrumbItem.new(href: item[:href]).with_content(item[:label]) %>
       <% end %>
     <% end %>
   <% end %>

data/app/components/uchi/ui/form/input/collection_checkboxes.html.erb

@@ -15,6 +15,7 @@
         <div class="flex items-center h-5">
           <%= b.check_box(class: checkbox_classes.join(" "), disabled: disabled?) %>
         </div>
+
         <div class="ms-2 text-sm">
           <%= b.label(class: checkbox_label_classes.join(" ")) %>
         </div>
@@ -27,6 +28,6 @@
   <% end %>
 
   <% errors.each do |error| %>
-    <%= render(Flowbite::Input::ValidationError.new) { error.upcase_first } %>
+    <%= render(Uchi::Flowbite::Input::ValidationError.new) { error.upcase_first } %>
   <% end %>
 </div>

data/app/components/uchi/ui/form/input/collection_checkboxes.rb

@@ -68,22 +68,22 @@ module Uchi
           end
 
           def label_classes
-            base = ["block", "mb-2", "text-sm", "font-medium"]
+            base = ["select-none ms-2 text-sm font-medium"]
             if disabled?
-              base + ["text-gray-400", "dark:text-gray-500"]
+              base + ["text-fg-disabled"]
             elsif errors?
-              base + ["text-red-700", "dark:text-red-500"]
+              base + ["text-fg-danger-strong"]
             else
-              base + ["text-gray-900", "dark:text-white"]
+              base + ["text-heading"]
             end
           end
 
           def hint_classes
             base = ["text-xs", "font-normal", "mt-1"]
             if disabled?
-              base + ["text-gray-400", "dark:text-gray-500"]
+              base + ["text-fg-disabled"]
             else
-              base + ["text-gray-500", "dark:text-gray-300"]
+              base + ["text-body"]
             end
           end
 
@@ -92,26 +92,21 @@ module Uchi
           end
 
           def checkbox_classes
-            base = ["w-4", "h-4", "rounded-sm", "focus:ring-2", "focus:ring-offset-2"]
+            base = ["w-4", "h-4", "border", "rounded-xs", "focus:ring-2"]
             if disabled?
-              base + ["text-blue-600", "bg-gray-100", "border-gray-300",
-                "dark:bg-gray-700", "dark:border-gray-600"]
+              base + ["border-light", "bg-neutral-secondary-medium", "focus:ring-brand-soft"]
             elsif errors?
-              base + ["text-red-600", "bg-red-50", "border-red-500",
-                "focus:ring-red-500", "dark:focus:ring-red-600",
-                "dark:bg-gray-700", "dark:border-red-500"]
+              base + ["text-fg-danger", "bg-danger-soft", "border-fg-danger", "focus:ring-fg-danger"]
             else
-              base + ["text-blue-600", "bg-gray-100", "border-gray-300",
-                "focus:ring-blue-500", "dark:focus:ring-blue-600",
-                "dark:bg-gray-700", "dark:border-gray-600"]
+              base + ["border-default-medium", "bg-neutral-secondary-medium", "focus:ring-brand-soft"]
             end
           end
 
           def checkbox_label_classes
             if disabled?
-              ["ms-2", "text-sm", "font-medium", "text-gray-400", "dark:text-gray-500"]
+              ["select-none", "ms-2", "text-sm", "font-medium", "text-fg-disabled"]
             else
-              ["ms-2", "text-sm", "font-medium", "text-gray-900", "dark:text-gray-300"]
+              ["select-none", "ms-2", "text-sm", "font-medium", "text-heading"]
             end
           end
 

data/app/components/uchi/ui/frame/frame.html.erb

@@ -1,3 +1,8 @@
-<div class="bg-white border border-gray-200 shadow-sm md:rounded-lg dark:bg-gray-800 dark:border-gray-700">
+<div
+  class="
+    relative overflow-x-auto bg-neutral-primary-soft shadow-xs rounded-base
+    border border-default
+  "
+>
   <%= content %>
 </div>