stimulus_plumbers_tailwind 0.4.0 → 0.4.3

data/lib/stimulus_plumbers/themes/tailwind/timeline.rb

@@ -0,0 +1,104 @@
+# frozen_string_literal: true
+
+require_relative "timeline/group"
+
+module StimulusPlumbers
+  module Themes
+    module Tailwind
+      module Timeline
+        TRACK_VERTICAL   = %w[flex flex-col gap-y-10].freeze
+        TRACK_HORIZONTAL = %w[flex].freeze
+
+        TRACK_LINE_VERTICAL = %w[absolute inset-y-0 start-3 w-px bg-(--sp-color-border)].freeze
+
+        ITEM_VERTICAL    = %w[flex gap-x-4 items-start].freeze
+        ITEM_HORIZONTAL  = %w[relative flex-1].freeze
+
+        ITEM_INDICATOR_DOT = %w[
+          mt-1 flex shrink-0 size-6 items-center justify-center rounded-full z-10
+          bg-(--sp-color-bg) ring-4 ring-(--sp-color-bg)
+        ].freeze
+        ITEM_INDICATOR_DOT_MARK = %w[size-3 rounded-full bg-(--sp-color-indicator)].freeze
+
+        ITEM_INDICATOR_ICON = %w[
+          mt-1 flex shrink-0 size-6 items-center justify-center rounded-full z-10
+          bg-(--sp-color-primary) text-(--sp-color-primary-fg)
+          ring-4 ring-(--sp-color-bg)
+        ].freeze
+
+        ITEM_INDICATOR_ICON_SLOT = %w[size-(--sp-icon-size-sm) stroke-current].freeze
+
+        ITEM_INDICATOR_DOT_HORIZONTAL = %w[
+          z-10 flex shrink-0 size-6 items-center justify-center rounded-full
+          bg-(--sp-color-bg) ring-4 ring-(--sp-color-bg)
+        ].freeze
+
+        ITEM_INDICATOR_ICON_HORIZONTAL = %w[
+          z-10 flex shrink-0 size-6 items-center justify-center rounded-full
+          bg-(--sp-color-primary) text-(--sp-color-primary-fg)
+          ring-4 ring-(--sp-color-bg)
+        ].freeze
+
+        ITEM_CONNECTOR_HORIZONTAL = %w[w-full h-px bg-(--sp-color-border) last:hidden].freeze
+        ITEM_CONTENT_HORIZONTAL   = %w[mt-3 pe-2].freeze
+
+        ITEM_TIME        = %w[mb-1 block text-sm leading-none text-(--sp-color-muted-fg)].freeze
+        ITEM_TIME_BADGE  = %w[
+          mb-1 inline-block
+          bg-(--sp-color-bg-muted) border border-(--sp-color-border)
+          text-(--sp-color-fg) text-xs font-medium px-1.5 py-0.5 rounded
+        ].freeze
+        ITEM_TITLE       = %w[mb-1 text-base font-semibold text-(--sp-color-fg)].freeze
+        ITEM_HEADING     = %w[mb-1].freeze
+        ITEM_TRIGGER     = %w[
+          w-full text-left text-base font-semibold
+          text-(--sp-color-fg)
+          hover:text-(--sp-color-primary)
+          focus-visible:outline-none focus-visible:ring-2
+          focus-visible:ring-(--sp-color-primary) focus-visible:rounded-sm
+        ].freeze
+        ITEM_DESCRIPTION = %w[text-sm text-(--sp-color-muted-fg)].freeze
+        ITEM_DETAIL      = %w[mt-2 text-sm text-(--sp-color-muted-fg)].freeze
+        ITEM_ACTIONS     = %w[mt-3 flex flex-wrap items-center gap-2].freeze
+
+        private
+
+        def timeline_classes(orientation: :vertical)
+          track = orientation.to_sym == :horizontal ? TRACK_HORIZONTAL : TRACK_VERTICAL
+          { classes: klasses(track) }
+        end
+
+        def timeline_item_classes(orientation: :vertical)
+          item = orientation.to_sym == :horizontal ? ITEM_HORIZONTAL : ITEM_VERTICAL
+          { classes: klasses(item) }
+        end
+
+        def timeline_item_indicator_classes(type: :dot, orientation: :vertical)
+          base = if orientation.to_sym == :horizontal
+                   type.to_sym == :icon ? ITEM_INDICATOR_ICON_HORIZONTAL : ITEM_INDICATOR_DOT_HORIZONTAL
+                 else
+                   type.to_sym == :icon ? ITEM_INDICATOR_ICON : ITEM_INDICATOR_DOT
+                 end
+          { classes: klasses(base) }
+        end
+
+        def timeline_item_time_classes(type: :default)
+          base = type.to_sym == :badge ? ITEM_TIME_BADGE : ITEM_TIME
+          { classes: klasses(base) }
+        end
+
+        def timeline_item_title_classes       = { classes: klasses(ITEM_TITLE) }
+        def timeline_item_heading_classes     = { classes: klasses(ITEM_HEADING) }
+        def timeline_item_trigger_classes     = { classes: klasses(ITEM_TRIGGER) }
+        def timeline_item_description_classes = { classes: klasses(ITEM_DESCRIPTION) }
+        def timeline_item_detail_classes      = { classes: klasses(ITEM_DETAIL) }
+        def timeline_item_actions_classes     = { classes: klasses(ITEM_ACTIONS) }
+        def timeline_item_indicator_dot_classes = { classes: klasses(ITEM_INDICATOR_DOT_MARK) }
+        def timeline_item_connector_classes       = { classes: klasses(ITEM_CONNECTOR_HORIZONTAL) }
+        def timeline_item_content_classes         = { classes: klasses(ITEM_CONTENT_HORIZONTAL) }
+        def timeline_track_line_classes                = { classes: klasses(TRACK_LINE_VERTICAL) }
+        def timeline_item_indicator_icon_slot_classes  = { classes: klasses(ITEM_INDICATOR_ICON_SLOT) }
+      end
+    end
+  end
+end

data/lib/stimulus_plumbers/themes/tailwind_theme.rb

@@ -14,6 +14,7 @@ require_relative "tailwind/form/input"
 require_relative "tailwind/icon"
 require_relative "tailwind/layout"
 require_relative "tailwind/link"
+require_relative "tailwind/timeline"
 
 module StimulusPlumbers
   module Themes
@@ -31,6 +32,8 @@ module StimulusPlumbers
       include Tailwind::Icon
       include Tailwind::Layout
       include Tailwind::Link
+      include Tailwind::Timeline
+      include Tailwind::Timeline::Group
 
       private
 

data/lib/stimulus_plumbers_tailwind/engine.rb

@@ -7,5 +7,9 @@ module StimulusPlumbersTailwind
         c.theme.register(:tailwind, StimulusPlumbers::Themes::TailwindTheme)
       end
     end
+
+    rake_tasks do
+      load File.join(__dir__, "../tasks/stimulus_plumbers_tailwind.rake")
+    end
   end
 end

data/lib/stimulus_plumbers_tailwind/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module StimulusPlumbersTailwind
-  VERSION = "0.4.0"
+  VERSION = "0.4.3"
 end

data/lib/tasks/stimulus_plumbers_tailwind.rake

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+namespace :stimulus_plumbers_tailwind do
+  desc "Add @source directive for stimulus_plumbers_tailwind into Tailwind CSS entry file"
+  task install: :environment do
+    require "generators/stimulus_plumbers_tailwind/install/install_generator"
+    StimulusPlumbersTailwind::Generators::InstallGenerator.new(
+      [], {}, { destination_root: Rails.root.to_s }
+    ).invoke_all
+  end
+end
+
+Rake::Task["assets:precompile"].enhance(["stimulus_plumbers_tailwind:install"]) if Rake::Task.task_defined?("assets:precompile")
+
+Rake::Task["tailwindcss:build"].enhance(["stimulus_plumbers_tailwind:install"]) if Rake::Task.task_defined?("tailwindcss:build")

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stimulus_plumbers_tailwind
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.4.3
 platform: ruby
 authors:
 - Ryan Chang
@@ -33,6 +33,7 @@ files:
 - CHANGELOG.md
 - LICENSE-DEPENDENCIES
 - README.md
+- lib/generators/stimulus_plumbers_tailwind/install/install_generator.rb
 - lib/stimulus_plumbers/themes/tailwind/avatar.rb
 - lib/stimulus_plumbers/themes/tailwind/button.rb
 - lib/stimulus_plumbers/themes/tailwind/button/group.rb
@@ -698,10 +699,13 @@ files:
 - lib/stimulus_plumbers/themes/tailwind/layout.rb
 - lib/stimulus_plumbers/themes/tailwind/link.rb
 - lib/stimulus_plumbers/themes/tailwind/list.rb
+- lib/stimulus_plumbers/themes/tailwind/timeline.rb
+- lib/stimulus_plumbers/themes/tailwind/timeline/group.rb
 - lib/stimulus_plumbers/themes/tailwind_theme.rb
 - lib/stimulus_plumbers_tailwind.rb
 - lib/stimulus_plumbers_tailwind/engine.rb
 - lib/stimulus_plumbers_tailwind/version.rb
+- lib/tasks/stimulus_plumbers_tailwind.rake
 homepage: https://github.com/ryancyq/stimulus-plumbers
 licenses:
 - MIT