jet_ui 0.2.4

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

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Stat
+    class DescriptionComponent < BaseComponent
+      VARIANTS = %i[default success warning error].freeze
+      DEFAULT_VARIANT = :default
+
+      TRENDING_UP_PATH   = 'M2.25 17.9999L9 11.2499L13.3064 15.5564C14.5101 13.188 16.5042 ' \
+                           '11.2022 19.1203 10.0375L21.8609 8.81726M21.8609 8.81726L15.9196 ' \
+                           '6.53662M21.8609 8.81726L19.5802 14.7585'
+      TRENDING_DOWN_PATH = 'M2.25 6L9 12.75L13.2862 8.46383C15.3217 10.0166 16.8781 12.23 ' \
+                           '17.5919 14.8941L18.3684 17.7919M18.3684 17.7919L21.5504 ' \
+                           '12.2806M18.3684 17.7919L12.857 14.6099'
+
+      def initialize(variant: DEFAULT_VARIANT, **options)
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @options = options
+      end
+
+      def call
+        content_tag :p, class: classes, **@options do
+          safe_join([trend_icon, content].compact)
+        end
+      end
+
+      private
+
+      def classes
+        class_names(
+          'stat__description',
+          variant_class,
+          @options.delete(:class)
+        )
+      end
+
+      def variant_class
+        return nil if @variant == :default
+
+        "stat__description--#{@variant}"
+      end
+
+      def trend_icon
+        return nil if @variant == :default
+
+        path = @variant == :success ? TRENDING_UP_PATH : TRENDING_DOWN_PATH
+        tag.svg(
+          tag.path(d: path, stroke: 'currentColor', 'stroke-width': '1.5',
+                   'stroke-linecap': 'round', 'stroke-linejoin': 'round'),
+          width: '16', height: '16', viewBox: '0 0 24 24',
+          fill: 'none', xmlns: 'http://www.w3.org/2000/svg',
+          'aria-hidden': 'true'
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/stat/label_component.rb

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

data/app/components/jet_ui/stat/value_component.rb

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

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

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

data/app/components/jet_ui/stepper/step_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Stepper
+    class StepComponent < BaseComponent
+      STATUSES = %i[pending current completed].freeze
+      DEFAULT_STATUS = :pending
+
+      def initialize(text = nil, status: DEFAULT_STATUS, number: nil, icon: nil, description: nil, url: nil, **options)
+        @text        = text
+        @status      = STATUSES.include?(status) ? status : DEFAULT_STATUS
+        @number      = number
+        @icon        = icon
+        @description = description
+        @url         = url
+        @options     = options
+      end
+
+      def call
+        content_tag :li, class: item_classes, **@options do
+          if @url && @status != :pending
+            content_tag(:a, href: @url, class: 'stepper__link') { inner_content }
+          else
+            inner_content
+          end
+        end
+      end
+
+      private
+
+      def inner_content
+        safe_join([indicator, step_content])
+      end
+
+      def indicator
+        content_tag(:div, class: 'stepper__indicator') { indicator_inner }
+      end
+
+      def indicator_inner
+        if @status == :completed && !@icon
+          render(JetUi::Icon::Component.new('check', size: 5))
+        elsif @icon
+          render(JetUi::Icon::Component.new(@icon, size: 5))
+        elsif @number
+          content_tag(:span, @number.to_s, class: 'stepper__number')
+        else
+          content_tag(:span, nil, class: 'stepper__dot')
+        end
+      end
+
+      def step_content
+        content_tag(:div, class: 'stepper__content') do
+          parts = [content_tag(:span, @text || content, class: 'stepper__title')]
+          parts << content_tag(:span, @description, class: 'stepper__description') if @description
+          safe_join(parts)
+        end
+      end
+
+      def item_classes
+        class_names(
+          'stepper__item',
+          "stepper__item-#{@status}",
+          { 'stepper__item-has-url': @url.present? },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Table
+    class Component < BaseComponent
+      SIZES = %i[xs sm md lg].freeze
+      DEFAULT_SIZE = :md
+
+      def initialize(bordered: false, full: true, size: DEFAULT_SIZE, hovered: false, **options)
+        @bordered = bordered
+        @full     = full
+        @size     = SIZES.include?(size) ? size : DEFAULT_SIZE
+        @hovered  = hovered
+        @options  = options
+      end
+
+      def call
+        content_tag :div, class: 'scroller scroller-x' do
+          content_tag :table, content, class: classes, **@options
+        end
+      end
+
+      private
+
+      def classes
+        class_names(
+          'table',
+          "table-#{@size}",
+          { 'table-bordered': @bordered },
+          { 'table-full': @full },
+          { 'table-hovered': @hovered },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/table/tbody_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Table
+    class TbodyComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :tbody, content, class: @options.delete(:class), **@options
+      end
+    end
+  end
+end

data/app/components/jet_ui/table/td_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Table
+    class TdComponent < BaseComponent
+      def initialize(actions: false, sticky: nil, **options)
+        @actions = actions
+        @sticky  = sticky
+        @options = options
+      end
+
+      def call
+        content_tag :td, content, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names(
+          @options.delete(:class),
+          { table__actions: @actions },
+          { table__td_sticky: @sticky },
+          { 'table__td_sticky-left': @sticky == :left },
+          { 'table__td_sticky-right': @sticky == :right }
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/table/tfoot_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Table
+    class TfootComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :tfoot, content, class: @options.delete(:class), **@options
+      end
+    end
+  end
+end

data/app/components/jet_ui/table/th_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Table
+    class ThComponent < BaseComponent
+      def initialize(sticky: nil, **options)
+        @sticky  = sticky
+        @options = options
+      end
+
+      def call
+        content_tag :th, content, class: classes, **@options
+      end
+
+      private
+
+      def classes
+        class_names(
+          @options.delete(:class),
+          { table__th_sticky: @sticky },
+          { 'table__th_sticky-left': @sticky == :left },
+          { 'table__th_sticky-right': @sticky == :right }
+        )
+      end
+    end
+  end
+end

data/app/components/jet_ui/table/thead_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Table
+    class TheadComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :thead, content, class: @options.delete(:class), **@options
+      end
+    end
+  end
+end

data/app/components/jet_ui/table/tr_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Table
+    class TrComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :tr, content, class: @options.delete(:class), **@options
+      end
+    end
+  end
+end

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

@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Tabs
+    class Component < BaseComponent
+      VARIANTS = %i[pill underline].freeze
+      DEFAULT_VARIANT = :pill
+
+      def initialize(variant: DEFAULT_VARIANT, **options)
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @options = options
+      end
+
+      def call
+        content_tag :div, class: wrapper_classes do
+          content_tag :ul, content, class: class_names('tabs__list', @options.delete(:class))
+        end
+      end
+
+      private
+
+      def wrapper_classes
+        class_names(
+          'tabs',
+          { 'tabs--underline': @variant == :underline }
+        )
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Tabs
+    class ItemComponent < BaseComponent
+      def initialize(label = nil, href:, icon: nil, active: false, **options)
+        @label   = label
+        @href    = href
+        @icon    = icon
+        @active  = active
+        @options = options
+      end
+
+      def call
+        content_tag :li, class: 'tabs__item' do
+          link_to @href, class: link_classes, **@options do
+            concat render(JetUi::Icon::Component.new(@icon, size: 4)) if @icon
+            concat(@label.presence || content)
+          end
+        end
+      end
+
+      private
+
+      def link_classes
+        class_names(
+          'tabs__link',
+          { 'tabs__link--active': @active },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

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

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

data/app/components/jet_ui/timeline/content_component.rb

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

data/app/components/jet_ui/timeline/dot_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Timeline
+    class DotComponent < BaseComponent
+      VARIANTS = %i[default info success warning error].freeze
+      DEFAULT_VARIANT = :default
+
+      def initialize(variant: DEFAULT_VARIANT, icon: nil, **options)
+        @variant = VARIANTS.include?(variant) ? variant : DEFAULT_VARIANT
+        @icon    = icon
+        @options = options
+      end
+
+      def call
+        content_tag :div, icon_content, class: classes, **@options
+      end
+
+      private
+
+      def icon_content
+        return unless @icon
+
+        render(JetUi::Icon::Component.new(@icon, size: 4))
+      end
+
+      def classes
+        class_names(
+          'timeline-dot',
+          "timeline-dot-#{@variant}",
+          { 'timeline-dot-icon': @icon.present? },
+          @options.delete(:class)
+        )
+      end
+    end
+  end
+end

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

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

data/app/components/jet_ui/timeline/time_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Timeline
+    class TimeComponent < BaseComponent
+      def initialize(**options)
+        @options = options
+      end
+
+      def call
+        content_tag :time, content, class: class_names('timeline-time', @options.delete(:class)), **@options
+      end
+    end
+  end
+end

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

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+module JetUi
+  module Tooltip
+    class Component < JetUi::BaseComponent
+      def initialize(title:, as: nil, placement: :top, **options)
+        @as = as
+        @title = title
+        @placement = placement
+        @options = options
+      end
+
+      def call
+        if @as
+          helpers.jet_ui.public_send(@as, **attrs) { content }
+        else
+          content_tag :span, content, class: 'w-fit', **attrs
+        end
+      end
+
+      private
+
+      def attrs
+        data_attributes = {
+          controller: 'tooltip',
+          tooltip_content_value: @title,
+          tooltip_placement_value: @placement
+        }.deep_merge(@options.fetch(:data, {}))
+
+        @options.except(:data).merge(data: data_attributes)
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<dialog id="turbo-confirm" tabindex="-1"
+        class="modal w-2xl animate-slide-up"
+        data-controller="turbo-confirm">
+  <form method="dialog">
+    <div class="modal__header modal__header-bordered">
+      <div>
+        <h3 class="modal__title">Are you absolutely sure?</h3>
+      </div>
+    </div>
+
+    <div class="modal__body">
+      <p>This cannot be undone.</p>
+    </div>
+
+    <div class="modal__footer modal__footer-bordered flex flex-row gap-2 items-start justify-end">
+      <%= helpers.jet_ui.btn "Cancel", type: :submit, variant: :outline, value: "cancel" %>
+      <%= helpers.jet_ui.btn "Yes, I'm sure", type: :submit, variant: :danger, value: "confirm" %>
+    </div>
+  </form>
+</dialog>

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

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module JetUi
+  module TurboConfirm
+    class Component < JetUi::BaseComponent
+    end
+  end
+end

data/app/helpers/jet_ui_helper.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module JetUiHelper
+  def jet_ui
+    @jet_ui ||= JetUi::Builder.new(self)
+  end
+end
+
+module JetUi
+  class Builder
+    def initialize(view_context)
+      @view = view_context
+    end
+
+    def method_missing(name, *args, **kwargs, &block)
+      component_class = resolve_component(name)
+      content = args.shift if args.first.is_a?(String)
+      instance = component_class.new(*args, **kwargs)
+      content ? @view.render(instance) { content } : @view.render(instance, &block)
+    end
+
+    def respond_to_missing?(name, include_private = false)
+      resolve_component(name)
+      true
+    rescue NameError
+      super
+    end
+
+    private
+
+    def resolve_component(name)
+      parts = name.to_s.split('_')
+      "JetUi::#{name.to_s.camelize}::Component".safe_constantize ||
+        "JetUi::#{parts.first.camelize}::#{parts.drop(1).map(&:camelize).join}Component".constantize
+    end
+  end
+end

data/lib/generators/jet_ui/eject/USAGE

@@ -0,0 +1,20 @@
+Description:
+    Ejects one or more JetUi components into your application so they can
+    be customised locally. The ejected files take precedence over the gem's
+    built-in versions, similar to how `rails generate devise:views` works.
+
+    For components that include a Stimulus controller (e.g. flash), the JS
+    file is also ejected alongside the Ruby and CSS files.
+
+    Available components:
+      btn, card, icon, spinner, avatar, breadcrumbs, tabs, empty, list,
+      divider, timeline, stepper, table, pagy, flash
+
+Examples:
+    rails generate jet_ui:eject btn
+    rails generate jet_ui:eject flash
+    rails generate jet_ui:eject btn card flash
+    rails generate jet_ui:eject btn --skip-test
+    rails generate jet_ui:eject btn --skip-preview
+    rails generate jet_ui:eject flash --skip-javascript
+    rails generate jet_ui:eject btn --skip-test --skip-preview