jet_ui 0.2.4

data/app/components/jet_ui/drawer/footer_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Drawer
+    class FooterComponent < JetUi::BaseComponent
+      def initialize(direction: :row, align: :start, justify: :start, bordered: true, **options)
+        @direction = direction
+        @align = align
+        @justify = justify
+        @bordered = bordered
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names(
+          'drawer__footer',
+          { 'drawer__footer-bordered' => @bordered },
+          direction_class,
+          align_class,
+          justify_class,
+          @options[:class]
+        )
+      end
+
+      def direction_class
+        { col: 'flex flex-col gap-2', row: 'flex flex-row gap-2' }[@direction]
+      end
+
+      def align_class
+        { start: 'items-start', center: 'items-center', end: 'items-end' }[@align]
+      end
+
+      def justify_class
+        { start: 'justify-start', center: 'justify-center', end: 'justify-end',
+          between: 'justify-between' }[@justify]
+      end
+    end
+  end
+end

data/app/components/jet_ui/drawer/header_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Drawer
+    class HeaderComponent < JetUi::BaseComponent
+      def initialize(title: nil, subtitle: nil, closable: true, id: nil, bordered: true, **options)
+        @title = title
+        @subtitle = subtitle
+        @closable = closable
+        @id = id
+        @bordered = bordered
+        @options = options
+      end
+
+      erb_template <<~ERB
+        <div class="<%= classes %>">
+          <div>
+            <% if @title %>
+              <h3 class="drawer__title"><%= @title %></h3>
+            <% end %>
+            <% if @subtitle %>
+              <div class="drawer__subtitle"><%= @subtitle %></div>
+            <% end %>
+            <%= content %>
+          </div>
+
+          <% if @closable %>
+            <button type="button" class="drawer__close" data-action="click->drawer#close click->drawers#close" aria-label="Close" data-id="<%= @id %>">
+              <%= helpers.jet_ui.icon("x-mark", size: 6) %>
+            </button>
+          <% end %>
+        </div>
+      ERB
+
+      private
+
+      def classes
+        class_names(
+          'drawer__header',
+          { 'drawer__header-bordered' => @bordered },
+          @options[:class]
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/dropdown/button_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dropdown
+    class ButtonComponent < JetUi::BaseComponent
+      def initialize(href: nil, **options)
+        @href = href
+        @options = options
+      end
+
+      erb_template <<~ERB
+        <li class="dropdown__item">
+          <%= button_to content, @href, **@options.except(:class), class: classes, form: { class: "dropdown__form" } %>
+        </li>
+      ERB
+
+      private
+
+      def classes
+        class_names('dropdown__link', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/dropdown/component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dropdown
+    class Component < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      erb_template <<~ERB
+        <%= content_tag :div, class: classes, **attrs do %>
+          <%= content %>
+        <% end %>
+      ERB
+
+      private
+
+      def attrs
+        data_attributes = { controller: 'dropdown' }.deep_merge(@options.fetch(:data, {}))
+        @options.except(:class, :data).merge(data: data_attributes)
+      end
+
+      def classes
+        class_names('dropdown', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/dropdown/divider_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dropdown
+    class DividerComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :li, nil, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('dropdown__divider', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/dropdown/link_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dropdown
+    class LinkComponent < JetUi::BaseComponent
+      def initialize(url: nil, active: false, **options)
+        @url = url
+        @active = active
+        @options = options
+      end
+
+      erb_template <<~ERB
+        <li class="dropdown__item">
+          <%= link_to content, @url, class: classes, **@options.except(:class) %>
+        </li>
+      ERB
+
+      private
+
+      def classes
+        class_names(
+          'dropdown__link',
+          ('dropdown__link-active' if @active),
+          @options[:class]
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/dropdown/menu_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dropdown
+    class MenuComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      erb_template <<~ERB
+        <div class="dropdown__menu" data-dropdown-target="menu">
+          <ul class="<%= classes %>">
+            <%= content %>
+          </ul>
+        </div>
+      ERB
+
+      private
+
+      def classes
+        class_names('dropdown__wrapper', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/dropdown/title_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dropdown
+    class TitleComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :h6, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('dropdown__title', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/dropdown/trigger_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Dropdown
+    class TriggerComponent < JetUi::BaseComponent
+      def initialize(as: nil, **options)
+        @as = as
+        @options = options
+        @options[:data] ||= {}
+        @options[:data][:dropdown_target] = 'trigger'
+      end
+
+      def call
+        if @as
+          helpers.jet_ui.public_send(@as, **@options) { content }
+        else
+          content_tag :span, content, role: :button, class: classes, **@options.except(:class)
+        end
+      end
+
+      private
+
+      def classes
+        class_names('dropdown__trigger', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/empty/actions_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Empty
+    class ActionsComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        render JetUi::Group::Component.new(sticky: false,
+                                           class: class_names('empty__actions', @options.delete(:class)),
+                                           **@options) do
+          content
+        end
+      end
+    end
+  end
+end

data/app/components/jet_ui/empty/component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Empty
+    class Component < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: class_names('empty', @options.delete(:class)), **@options
+      end
+    end
+  end
+end

data/app/components/jet_ui/empty/description_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Empty
+    class DescriptionComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :p, content, class: class_names('empty__description', @options.delete(:class)), **@options
+      end
+    end
+  end
+end

data/app/components/jet_ui/empty/icon_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Empty
+    class IconComponent < BaseComponent
+      def initialize(name = nil, **options)
+        @name    = name
+        @options = options
+      end
+
+      def call
+        content_tag :div, class: class_names('empty__icon', @options.delete(:class)), **@options do
+          render JetUi::Icon::Component.new(@name.presence || content.to_s.strip, size: 6)
+        end
+      end
+    end
+  end
+end

data/app/components/jet_ui/empty/title_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Empty
+    class TitleComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :h3, content, class: class_names('empty__title', @options.delete(:class)), **@options
+      end
+    end
+  end
+end

data/app/components/jet_ui/flash/component.html.erb

@@ -0,0 +1,14 @@
+<%= helpers.turbo_frame_tag @frame_id, class: 'flash-container', target: :_top, refresh: :morph do %>
+  <% flash_messages.each do |key, message| %>
+    <% next if message.blank? %>
+
+    <%= content_tag :div, id: "flash-#{key}", class: item_class(key), data: item_data do %>
+      <p class="flash-item__message"><%= message.html_safe %></p>
+      <% if @dismissible %>
+        <button class="flash-item__close" type="button" data-action="flash#close" aria-label="Close">
+          <%= render(JetUi::Icon::Component.new('x-mark', size: 5)) %>
+        </button>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/jet_ui/flash/component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Flash
+    class Component < BaseComponent
+      DISMISS_AFTER = 5000
+      SHOW_DELAY    = 250
+
+      TYPE_CLASSES = {
+        'notice' => 'flash-item-info',
+        'success' => 'flash-item-success',
+        'alert' => 'flash-item-error',
+        'error' => 'flash-item-error',
+        'warning' => 'flash-item-warning'
+      }.freeze
+
+      def initialize(messages: nil, dismissible: true, frame_id: :flash)
+        @messages    = messages
+        @dismissible = dismissible
+        @frame_id    = frame_id
+      end
+
+      private
+
+      def flash_messages
+        @messages || flash
+      end
+
+      def item_class(flash_type)
+        type_class = TYPE_CLASSES[flash_type.to_s] || "flash-item-#{flash_type}"
+        class_names('flash-item', 'flash-item--hidden', type_class)
+      end
+
+      def item_data
+        attrs = { controller: 'flash', action: 'turbo:morph@window->flash#connect' }
+        if @dismissible
+          attrs[:flash_dismiss_after_value] = DISMISS_AFTER
+          attrs[:flash_show_delay_value]    = SHOW_DELAY
+        end
+        attrs
+      end
+    end
+  end
+end

data/app/components/jet_ui/group/component.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Group
+    class Component < BaseComponent
+      def initialize(sticky: true, **options)
+        @sticky = sticky
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names(
+          'ui_group',
+          { 'ui_group-sticky': @sticky },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/header/actions_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Header
+    class ActionsComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('header__actions', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/header/component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Header
+    class Component < JetUi::BaseComponent
+      def initialize(direction: :row, align: :start, justify: :between,
+                     sticky: false, bordered: false, **options)
+        @direction = direction
+        @align = align
+        @justify = justify
+        @sticky = sticky
+        @bordered = bordered
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names(
+          'header',
+          "header--#{@direction}",
+          "header--align-#{@align}",
+          "header--justify-#{@justify}",
+          { 'header--sticky' => @sticky },
+          { 'header--bordered' => @bordered },
+          @options[:class]
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/header/heading_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Header
+    class HeadingComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('header__heading', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/header/subtitle_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Header
+    class SubtitleComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :p, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('header__subtitle', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/header/title_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Header
+    class TitleComponent < JetUi::BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :h1, content, class: classes, **@options.except(:class)
+      end
+
+      private
+
+      def classes
+        class_names('header__title', @options[:class])
+      end
+    end
+  end
+end

data/app/components/jet_ui/icon/component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+require 'cgi'
+
+module JetUi
+  module Icon
+    class Component < BaseComponent
+      ICONS_PATH = JetUi::Engine.root.join('app', 'assets', 'images', 'jet_ui', 'icons')
+
+      def initialize(name = nil, size: nil, **options)
+        @name    = name.to_s
+        @size    = size
+        @options = options
+      end
+
+      def call
+        icon_name = @name.presence || content.to_s.strip
+        svg = File.read(ICONS_PATH.join("#{icon_name}.svg"))
+        # rubocop:disable Rails/OutputSafety
+        svg.sub('<svg', "<svg #{html_attributes(icon_name)}").html_safe
+        # rubocop:enable Rails/OutputSafety
+      end
+
+      private
+
+      def html_attributes(icon_name)
+        attrs = {
+          class: class_names('icon', @options.delete(:class)),
+          style: size_style,
+          'aria-hidden': 'true',
+          'aria-label': icon_name.to_s.humanize
+        }.merge(@options)
+        attrs.compact!
+
+        attrs.map { |k, v| "#{k}=\"#{CGI.escapeHTML(v.to_s)}\"" }.join(' ')
+      end
+
+      def size_style
+        return unless @size
+
+        size = "calc(var(--spacing) * #{@size})"
+        "width: #{size}; height: #{size};"
+      end
+    end
+  end
+end

data/app/components/jet_ui/list/action_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module List
+    class ActionComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names('list__action', @options.delete(:class))
+      end
+    end
+  end
+end

data/app/components/jet_ui/list/component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module JetUi
+  module List
+    class Component < BaseComponent
+      VARIANTS = %i[default divided].freeze
+      DEFAULT_VARIANT = :default
+
+      def initialize(variant: DEFAULT_VARIANT, **options)
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @options = options
+      end
+
+      def call
+        content_tag :ul, content, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names(
+          'list',
+          { 'list--divided': @variant == :divided },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end