stimulus_plumbers 0.2.9 → 0.3.0

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

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module ActionList
-        LIST_ITEM_ACTIVE = %w[bg-[--sp-color-primary]/10 text-[--sp-color-primary]].freeze
-        LIST_ITEM_BASE   = %w[
-          flex items-center gap-[--sp-space-2] w-full
-          px-[--sp-space-2] py-[--sp-space-1]
-          rounded-[--sp-radius-sm] text-[--sp-text-sm]
-          cursor-pointer select-none outline-none
-          hover:bg-[--sp-color-muted] focus:bg-[--sp-color-muted] focus:text-[--sp-color-fg]
-        ].freeze
-
-        private
-
-        def action_list_classes
-          { classes: klasses("py-[--sp-space-1]") }
-        end
-
-        def action_list_item_classes(active: false)
-          {
-            classes: klasses(
-              *LIST_ITEM_BASE,
-              *(active ? LIST_ITEM_ACTIVE : [])
-            )
-          }
-        end
-      end
-    end
-  end
-end

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

@@ -1,52 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module Avatar
-        COLORS = {
-          amber:   "text-white bg-amber-600",
-          lime:    "text-white bg-lime-600",
-          sky:     "text-white bg-sky-600",
-          cyan:    "text-white bg-cyan-600",
-          teal:    "text-white bg-teal-600",
-          emerald: "text-white bg-emerald-600",
-          indigo:  "text-white bg-indigo-600",
-          fuchsia: "text-white bg-fuchsia-600",
-          rose:    "text-white bg-rose-600",
-          pink:    "text-white bg-pink-600",
-          violet:  "text-white bg-violet-600",
-          blue:    "text-white bg-blue-600"
-        }.freeze
-
-        SIZES = {
-          sm: "size-[--sp-icon-size]",
-          md: "size-[--sp-avatar-size]",
-          lg: "size-12"
-        }.freeze
-
-        BASE = %w[rounded-[--sp-radius-full] overflow-hidden inline-flex items-center justify-center].freeze
-
-        def avatar_colors
-          COLORS
-        end
-
-        def avatar_color_range
-          COLORS.values
-        end
-
-        private
-
-        def avatar_classes(size: :md, color: nil)
-          {
-            classes: klasses(
-              SIZES.fetch(size, SIZES[:md]),
-              COLORS.fetch(color, nil),
-              *BASE
-            )
-          }
-        end
-      end
-    end
-  end
-end

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

@@ -1,89 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module Button
-        VARIANTS = {
-          primary:     %w[
-            bg-[--sp-color-primary]
-            text-[--sp-color-primary-fg]
-            hover:bg-[--sp-color-primary]/90
-            focus-visible:ring-[--sp-focus-ring-color]
-          ].freeze,
-          secondary:   %w[
-            bg-[--sp-color-muted]
-            text-[--sp-color-fg]
-            hover:bg-[--sp-color-border]
-          ].freeze,
-          outline:     %w[
-            border border-[--sp-color-border]
-            bg-transparent
-            text-[--sp-color-fg]
-            hover:bg-[--sp-color-muted]
-          ].freeze,
-          destructive: %w[
-            bg-[--sp-color-destructive]
-            text-[--sp-color-destructive-fg]
-            hover:bg-[--sp-color-destructive]/90
-          ].freeze,
-          ghost:       %w[hover:bg-[--sp-color-muted] text-[--sp-color-fg]].freeze,
-          link:        %w[text-[--sp-color-primary] underline-offset-4 hover:underline].freeze
-        }.freeze
-
-        SIZES = {
-          sm: %w[h-8 px-[--sp-space-3] text-[--sp-text-sm]].freeze,
-          md: %w[h-9 px-[--sp-space-4] text-[--sp-text-base]].freeze,
-          lg: %w[h-11 px-[--sp-space-6] text-[--sp-text-lg]].freeze
-        }.freeze
-
-        FLEX_ALIGN = {
-          row: {
-            left:   "justify-start",
-            center: %w[justify-center items-center].freeze,
-            right:  "justify-end",
-            top:    "items-start",
-            bottom: "items-end"
-          }.freeze,
-          col: {
-            top:    "justify-start",
-            center: %w[justify-center items-center].freeze,
-            bottom: "justify-end",
-            left:   "items-start",
-            right:  "items-end"
-          }.freeze
-        }.freeze
-
-        BASE = %w[
-          inline-flex items-center justify-center gap-2 font-medium
-          rounded-[--sp-radius-md] transition-colors
-          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
-          disabled:pointer-events-none disabled:opacity-50
-        ].freeze
-
-        GROUP_BASE = %w[flex gap-[--sp-space-2]].freeze
-
-        private
-
-        def button_classes(variant: :primary, size: :md)
-          {
-            classes: klasses(
-              *BASE,
-              *VARIANTS.fetch(variant, []),
-              *SIZES.fetch(size, [])
-            )
-          }
-        end
-
-        def button_group_classes(alignment: :left, direction: :row)
-          {
-            classes: klasses(
-              *GROUP_BASE,
-              *Array(FLEX_ALIGN.dig(direction, alignment))
-            )
-          }
-        end
-      end
-    end
-  end
-end

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

@@ -1,80 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module Calendar
-        GRID = %w[w-full].freeze
-
-        DAYS_OF_WEEK = %w[
-          grid grid-cols-7 text-center text-[--sp-text-xs]
-          font-medium text-[--sp-color-muted-fg] mb-1
-        ].freeze
-
-        DAYS_OF_MONTH = %w[grid grid-cols-7].freeze
-
-        DAY = %w[
-          size-[--sp-calendar-day-size] rounded-[--sp-radius-md]
-          flex items-center justify-center text-[--sp-text-sm]
-          hover:bg-[--sp-color-muted] cursor-pointer
-        ].freeze
-
-        DAY_SELECTED = %w[
-          bg-[--sp-color-primary]
-          text-[--sp-color-primary-fg]
-          hover:bg-[--sp-color-primary]/90
-        ].freeze
-
-        NAV = %w[flex items-center justify-between gap-1 mb-2].freeze
-
-        NAV_BTN = %w[
-          inline-flex items-center justify-center
-          size-[--sp-calendar-day-size] rounded-[--sp-radius-md]
-          text-[--sp-color-fg] hover:bg-[--sp-color-muted]
-          focus-visible:outline-none focus-visible:ring-2
-          focus-visible:ring-[--sp-focus-ring-color]
-          disabled:pointer-events-none disabled:opacity-50
-        ].freeze
-
-        NAV_ICON = %w[size-4 stroke-current].freeze
-
-        private
-
-        def calendar_classes
-          { classes: klasses(*GRID) }
-        end
-
-        def calendar_days_of_week_classes
-          { classes: klasses(*DAYS_OF_WEEK) }
-        end
-
-        def calendar_days_of_month_classes
-          { classes: klasses(*DAYS_OF_MONTH) }
-        end
-
-        def calendar_day_classes(today: false, selected: false, outside: false)
-          {
-            classes: klasses(
-              *DAY,
-              *(today    ? ["font-bold"] : []),
-              *(selected ? DAY_SELECTED : []),
-              *(outside  ? %w[text-[--sp-color-muted-fg] opacity-50] : [])
-            )
-          }
-        end
-
-        def calendar_navigation_classes
-          { classes: klasses(*NAV) }
-        end
-
-        def calendar_navigation_navigator_classes
-          { classes: klasses(*NAV_BTN) }
-        end
-
-        def calendar_navigation_navigator_icon_classes
-          { classes: klasses(*NAV_ICON) }
-        end
-      end
-    end
-  end
-end

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

@@ -1,24 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module Card
-        BASE = %w[
-          rounded-[--sp-radius-lg] border border-[--sp-color-border]
-          bg-[--sp-color-bg] shadow-[--sp-shadow-sm]
-        ].freeze
-
-        private
-
-        def card_classes
-          { classes: klasses(*BASE) }
-        end
-
-        def card_section_classes
-          { classes: klasses("p-[--sp-space-6]") }
-        end
-      end
-    end
-  end
-end

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

@@ -1,75 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module Combobox
-        LISTBOX = %w[
-          py-[--sp-space-1] overflow-y-auto max-h-60
-        ].freeze
-
-        OPTION_BASE = %w[
-          flex items-center gap-[--sp-space-2] w-full
-          px-[--sp-space-2] py-[--sp-space-1]
-          rounded-[--sp-radius-sm] text-[--sp-text-sm]
-          cursor-pointer select-none outline-none
-          hover:bg-[--sp-color-muted] focus:bg-[--sp-color-muted]
-        ].freeze
-
-        OPTION_SELECTED = %w[
-          bg-[--sp-color-primary]/10 text-[--sp-color-primary]
-        ].freeze
-
-        OPTION_DISABLED = %w[
-          opacity-50 cursor-not-allowed pointer-events-none
-        ].freeze
-
-        OPTION_GROUP = %w[py-[--sp-space-1]].freeze
-
-        AUTOCOMPLETE_LOADING = %w[
-          flex items-center justify-center
-          py-[--sp-space-2] text-[--sp-text-sm] text-[--sp-color-muted-fg]
-        ].freeze
-
-        AUTOCOMPLETE_EMPTY = %w[
-          flex items-center justify-center
-          py-[--sp-space-2] text-[--sp-text-sm] text-[--sp-color-muted-fg]
-        ].freeze
-
-        TIME = %w[flex gap-[--sp-space-2] overflow-hidden].freeze
-
-        private
-
-        def combobox_listbox_classes
-          { classes: klasses(*LISTBOX) }
-        end
-
-        def combobox_option_classes(selected: false, disabled: false)
-          {
-            classes: klasses(
-              *OPTION_BASE,
-              *(selected ? OPTION_SELECTED : []),
-              *(disabled ? OPTION_DISABLED : [])
-            )
-          }
-        end
-
-        def combobox_option_group_classes
-          { classes: klasses(*OPTION_GROUP) }
-        end
-
-        def combobox_autocomplete_loading_classes
-          { classes: klasses(*AUTOCOMPLETE_LOADING) }
-        end
-
-        def combobox_autocomplete_empty_classes
-          { classes: klasses(*AUTOCOMPLETE_EMPTY) }
-        end
-
-        def combobox_time_classes
-          { classes: klasses(*TIME) }
-        end
-      end
-    end
-  end
-end

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

@@ -1,108 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module Form
-        INPUT_BASE = %w[
-          w-full rounded-md border px-3 py-2 text-sm text-gray-900
-          bg-white focus:outline-none focus:ring-2 focus:ring-offset-0
-        ].freeze
-        INPUT_ERROR   = %w[border-red-700 focus:ring-red-700].freeze
-        INPUT_DEFAULT = %w[border-gray-500 focus:ring-blue-700].freeze
-
-        GROUP_BASE    = %w[flex gap-1 mb-3].freeze
-        GROUP_INLINE  = %w[flex-row items-center].freeze
-
-        LABEL         = %w[text-sm font-medium text-gray-900].freeze
-        REQUIRED_MARK = %w[text-red-700 ml-0.5].freeze
-        DETAILS       = %w[text-xs text-gray-600].freeze
-        ERROR_TEXT    = %w[text-xs text-red-700].freeze
-        CHECKBOX      = %w[size-4 rounded border-gray-500 text-blue-700].freeze
-        RADIO         = %w[size-4 border-gray-500 text-blue-700].freeze
-
-        INPUT_GROUP_BASE   = %w[flex items-center overflow-hidden rounded-md border].freeze
-        INPUT_GROUP_BORDER = { error: "border-red-700", default: "border-gray-500" }.freeze
-
-        INPUT_REVEAL = %w[
-          flex-1 border-0 bg-transparent px-3 py-2 text-sm text-gray-900 focus:outline-none
-        ].freeze
-        BUTTON_REVEAL = %w[
-          self-stretch border-0 bg-transparent px-3 cursor-pointer text-gray-600 hover:text-gray-900 text-sm
-        ].freeze
-        SUBMIT_LINK = %w[cursor-pointer text-sm font-medium text-gray-900 hover:underline].freeze
-
-        private
-
-        def form_group_classes(layout: :stacked, **_rest)
-          { classes: klasses(*GROUP_BASE, layout == :inline ? GROUP_INLINE : "flex-col") }
-        end
-
-        def form_label_classes(hidden: false, **)
-          { classes: klasses(*LABEL, hidden ? "sr-only" : nil) }
-        end
-
-        def form_required_mark_classes
-          { classes: klasses(*REQUIRED_MARK) }
-        end
-
-        def form_details_classes
-          { classes: klasses(*DETAILS) }
-        end
-
-        def form_error_classes
-          { classes: klasses(*ERROR_TEXT) }
-        end
-
-        def form_input_classes(error: false)
-          { classes: klasses(*INPUT_BASE, *(error ? INPUT_ERROR : INPUT_DEFAULT)) }
-        end
-
-        def form_textarea_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_file_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_select_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_checkbox_classes(**)
-          { classes: klasses(*CHECKBOX) }
-        end
-
-        def form_radio_classes(**)
-          { classes: klasses(*RADIO) }
-        end
-
-        def form_input_group_classes(error: false)
-          { classes: klasses(*INPUT_GROUP_BASE, INPUT_GROUP_BORDER[error ? :error : :default]) }
-        end
-
-        def form_combobox_classes(error: false)
-          form_input_classes(error: error)
-        end
-
-        def form_input_reveal_classes
-          { classes: klasses(*INPUT_REVEAL) }
-        end
-
-        def form_button_reveal_classes
-          { classes: klasses(*BUTTON_REVEAL) }
-        end
-
-        def form_submit_classes(variant: :default)
-          case variant
-          when :button
-            { classes: klasses(*Button::BASE, *Button::VARIANTS[:primary], *Button::SIZES[:md]) }
-          else
-            { classes: klasses(*SUBMIT_LINK) }
-          end
-        end
-      end
-    end
-  end
-end

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

@@ -1,25 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Themes
-    module Tailwind
-      module Layout
-        DIVIDER = %w[border-t border-[--sp-color-border] my-[--sp-space-1]].freeze
-        POPOVER = %w[
-          rounded-[--sp-radius-lg] border border-[--sp-color-border]
-          bg-[--sp-color-bg] shadow-[--sp-shadow-md] z-[--sp-z-popover]
-        ].freeze
-
-        private
-
-        def divider_classes
-          { classes: klasses(*DIVIDER) }
-        end
-
-        def popover_classes
-          { classes: klasses(*POPOVER) }
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/themes/tailwind_theme.rb

@@ -1,31 +0,0 @@
-# frozen_string_literal: true
-
-require_relative "tailwind/action_list"
-require_relative "tailwind/combobox"
-require_relative "tailwind/avatar"
-require_relative "tailwind/button"
-require_relative "tailwind/calendar"
-require_relative "tailwind/card"
-require_relative "tailwind/form"
-require_relative "tailwind/layout"
-
-module StimulusPlumbers
-  module Themes
-    class TailwindTheme < Base
-      include Tailwind::ActionList
-      include Tailwind::Combobox
-      include Tailwind::Avatar
-      include Tailwind::Button
-      include Tailwind::Calendar
-      include Tailwind::Card
-      include Tailwind::Form
-      include Tailwind::Layout
-
-      private
-
-      def klasses(*classes)
-        classes.flatten.reject(&:blank?).join(" ")
-      end
-    end
-  end
-end