jet_ui 0.2.4

data/app/components/jet_ui/accordion/summary_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Accordion
+    class SummaryComponent < JetUi::BaseComponent
+      def initialize(icon: 'chevron-down', **options)
+        @icon = icon
+        @options = options
+      end
+
+      erb_template <<~ERB
+        <summary class="<%= classes %>">
+          <%= content %>
+          <%= helpers.jet_ui.icon(@icon, class: icon_classes) if @icon %>
+        </summary>
+      ERB
+
+      private
+
+      def classes
+        class_names('accordion__summary', @options[:class])
+      end
+
+      def icon_classes
+        'accordion__icon'
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Alert
+    class Component < BaseComponent
+      VARIANTS = %i[default info error success warning].freeze
+      DEFAULT_VARIANT = :default
+
+      def initialize(variant: DEFAULT_VARIANT, **options)
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @options = options
+      end
+
+      def call
+        content_tag :div, content, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names(
+          'alert',
+          "alert-#{@variant}",
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Avatar
+    class Component < BaseComponent
+      VARIANTS = %i[rounded circle square].freeze
+      DEFAULT_VARIANT = :circle
+      DEFAULT_SIZE = 12
+
+      def initialize(src: nil, name: nil, size: DEFAULT_SIZE, variant: DEFAULT_VARIANT, **options)
+        @src     = src
+        @name    = name
+        @size    = size
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @options = options
+      end
+
+      def call
+        content_tag :div, inner_content, class: avatar_classes, style: avatar_style
+      end
+
+      private
+
+      def inner_content
+        if @src.present?
+          helpers.image_tag @src, alt: @name.to_s, class: 'size-full object-cover'
+        elsif @name.present?
+          content_tag :span, initials
+        else
+          render JetUi::Icon::Component.new('user', class: 'w-8/12')
+        end
+      end
+
+      def initials
+        @name.split.pluck(0).join.upcase[0..1]
+      end
+
+      def avatar_classes
+        class_names(
+          'avatar',
+          { 'avatar--circle': @variant == :circle },
+          { 'avatar--rounded': @variant == :rounded },
+          @options.delete(:class)
+        )
+      end
+
+      def avatar_style
+        size = "calc(var(--spacing) * #{@size})"
+        font_size = (@size * 1.65).round(1)
+        "width: #{size}; height: #{size}; font-size: #{font_size}px"
+      end
+    end
+  end
+end

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

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Badge
+    class Component < BaseComponent
+      VARIANTS = %i[default info error success warning].freeze
+      DEFAULT_VARIANT = :default
+      SIZES = %i[xs sm md lg].freeze
+      DEFAULT_SIZE = :sm
+
+      def initialize(variant: DEFAULT_VARIANT, size: DEFAULT_SIZE, rounded: false, **options)
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @size    = SIZES.include?(size) ? size : DEFAULT_SIZE
+        @rounded = rounded
+        @options = options
+      end
+
+      def call
+        content_tag :span, content, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names(
+          'badge',
+          "badge-#{@variant}",
+          "badge-#{@size}",
+          { 'badge-rounded': @rounded },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/base_component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+module JetUi
+  class BaseComponent < ::ViewComponent::Base
+  end
+end

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Breadcrumbs
+    class Component < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :nav, class: class_names('breadcrumbs', @options.delete(:class)),
+                          'aria-label': 'Breadcrumb', **@options do
+          content_tag :ol, content, class: 'breadcrumbs__list'
+        end
+      end
+    end
+  end
+end

data/app/components/jet_ui/breadcrumbs/item_component.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Breadcrumbs
+    class ItemComponent < BaseComponent
+      def initialize(label = nil, href: nil, **options)
+        @label  = label
+        @href   = href
+        @options = options
+      end
+
+      def call
+        content_tag :li, class: 'breadcrumbs__item' do
+          text = @label.presence || content
+          if @href
+            link_to text, @href, class: class_names('breadcrumbs__link', @options.delete(:class)), **@options
+          else
+            content_tag :span, text, class: class_names('breadcrumbs__current', @options.delete(:class)),
+                                     'aria-current': 'page', **@options
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Btn
+    class Component < BaseComponent
+      SIZES = %i[xs sm md lg icon_xs icon_sm icon_md icon_lg].freeze
+      DEFAULT_SIZE = :md
+
+      VARIANTS = %i[default outline secondary danger ghost link].freeze
+      DEFAULT_VARIANT = :default
+
+      def initialize(variant: DEFAULT_VARIANT, url: nil, size: DEFAULT_SIZE, rounded: false, block: false,
+                     circle: false, method: nil, **options)
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @url = url
+        @size = SIZES.include?(size.to_sym) ? size.to_sym : DEFAULT_SIZE
+        @rounded = rounded
+        @block = block
+        @circle = circle
+        @method = method
+        @options = options
+      end
+
+      def call
+        if @url && @method
+          button_to @url, class: classes, method: @method, **@options do
+            content
+          end
+        elsif @url
+          link_to content, @url, class: classes, **@options
+        else
+          button_tag content, type: 'button', class: classes, **@options
+        end
+      end
+
+      private
+
+      def classes
+        class_names(
+          'btn',
+          "btn-#{@variant}",
+          "btn-#{@size.to_s.tr('_', '-')}",
+          { 'btn-block': @block },
+          { 'btn-rounded': @rounded },
+          { 'btn-circle': @circle },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/card/body_component.rb

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

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

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

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Card
+    class FooterComponent < 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)
+      end
+
+      private
+
+      def classes
+        class_names(
+          'card__footer',
+          direction_class,
+          align_class,
+          justify_class,
+          { 'card__footer-bordered': @bordered },
+          @options.delete(:class)
+        )
+      end
+
+      def direction_class
+        'card__footer--col' if @direction == :col
+      end
+
+      def align_class
+        { center: 'card__footer--align-center', end: 'card__footer--align-end' }[@align]
+      end
+
+      def justify_class
+        {
+          center: 'card__footer--justify-center',
+          end: 'card__footer--justify-end',
+          between: 'card__footer--justify-between'
+        }[@justify]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Card
+    class HeaderComponent < BaseComponent
+      def initialize(direction: :col, 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)
+      end
+
+      private
+
+      def classes
+        class_names(
+          'card__header',
+          direction_class,
+          align_class,
+          justify_class,
+          { 'card__header-bordered': @bordered },
+          @options.delete(:class)
+        )
+      end
+
+      def direction_class
+        'card__header--row' if @direction == :row
+      end
+
+      def align_class
+        { center: 'card__header--align-center', end: 'card__header--align-end' }[@align]
+      end
+
+      def justify_class
+        {
+          center: 'card__header--justify-center',
+          end: 'card__header--justify-end',
+          between: 'card__header--justify-between'
+        }[@justify]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Card
+    class SubtitleComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag(:span, content, class: classes, **@options)
+      end
+
+      private
+
+      def classes
+        class_names(
+          'card__subtitle',
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Card
+    class TitleComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag(:strong, content, class: classes, **@options)
+      end
+
+      private
+
+      def classes
+        class_names(
+          'card__title',
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Clipboard
+    class Component < JetUi::BaseComponent
+      def initialize(as: nil, value: nil, source_id: nil, success_text: 'Copied!',
+                     tooltip: nil, tooltip_success: nil, tooltip_placement: 'top', **options)
+        @as = as
+        @value = value
+        @source_id = source_id
+        @success_text = success_text
+        @tooltip = tooltip
+        @tooltip_success = tooltip_success || success_text
+        @tooltip_placement = tooltip_placement
+        @options = options
+      end
+
+      def call
+        if @as
+          helpers.jet_ui.public_send(@as, **attrs) { content }
+        else
+          content_tag :span, content, class: classes, **attrs
+        end
+      end
+
+      private
+
+      def attrs
+        @options.except(:class, :data).merge(data: data_attributes)
+      end
+
+      def data_attributes
+        base = {
+          controller: @tooltip ? 'clipboard tooltip' : 'clipboard',
+          clipboard_success_text_value: @success_text,
+          action: @tooltip ? 'click->clipboard#copy clipboard:change->tooltip#updateContent' : 'click->clipboard#copy'
+        }
+
+        base[:clipboard_content_value] = @value if @value
+        base[:clipboard_source_id_value] = @source_id if @source_id
+        base.merge!(tooltip_attributes) if @tooltip
+        base.merge(@options.fetch(:data, {}))
+      end
+
+      def tooltip_attributes
+        {
+          tooltip_content_value: @tooltip,
+          tooltip_placement_value: @tooltip_placement,
+          clipboard_success_text_value: @success_text
+        }
+      end
+
+      def classes
+        class_names('cursor-pointer', @options[:class])
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Divider
+    class Component < BaseComponent
+      ALIGNS = %i[center start end].freeze
+      DEFAULT_ALIGN = :center
+
+      def initialize(align: DEFAULT_ALIGN, **options)
+        @align = ALIGNS.include?(align) ? align : DEFAULT_ALIGN
+        @options = options
+      end
+
+      def call
+        content_tag :div, content.presence, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names(
+          'divider',
+          { 'divider-start': @align == :start },
+          { 'divider-end': @align == :end },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Drawer
+    class BodyComponent < 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('drawer__body', @options[:class])
+      end
+    end
+  end
+end

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

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Drawer
+    class Component < JetUi::BaseComponent
+      SIZES = %w[sm md lg xl 2xl 3xl 4xl 5xl 6xl].freeze
+      DEFAULT_SIZE = '2xl'
+
+      def initialize(title: nil, subtitle: nil, size: DEFAULT_SIZE, id: nil)
+        @title = title
+        @subtitle = subtitle
+        @size = size
+        @id = id
+      end
+
+      erb_template <<~ERB
+        <%= container_tag do %>
+          <%= helpers.jet_ui.drawer_header(title: @title, subtitle: @subtitle, closable: closable?, id: @id) %>
+          <%= content %>
+        <% end %>
+      ERB
+
+      private
+
+      def container_tag(&block)
+        return sync_dialog(&block) if @id
+        return turbo_frame_dialog(&block) if helpers.turbo_frame_request?
+
+        content_tag :div, class: class_names('mx-auto bg-background', "w-#{@size}"), &block
+      end
+
+      def sync_dialog(&block)
+        dialog_tag(id: @id, data: { drawers_target: 'dialog' }, &block)
+      end
+
+      def turbo_frame_dialog(&block)
+        helpers.turbo_frame_tag :drawer do
+          dialog_tag(id: :drawerDialog, data: { controller: 'drawer' }) do
+            helpers.turbo_frame_tag(:drawerContent, &block)
+          end
+        end
+      end
+
+      def dialog_tag(**options, &block)
+        attrs = { tabindex: '-1', class: class_names('drawer', 'animate-slide-left', "w-#{@size}") }
+        content_tag :dialog, **attrs, **options, &block
+      end
+
+      def closable?
+        helpers.turbo_frame_request? || @id
+      end
+    end
+  end
+end