stimulus_plumbers 0.2.7 → 0.2.9

data/lib/stimulus_plumbers.rb

@@ -5,32 +5,59 @@ require_relative "stimulus_plumbers/version"
 require "active_support"
 require "active_support/core_ext/string"
 
+# -- Core infrastructure --
 require_relative "stimulus_plumbers/configuration"
 require_relative "stimulus_plumbers/helpers"
 require_relative "stimulus_plumbers/logger"
 
-require_relative "stimulus_plumbers/components/plumber/html_options"
-require_relative "stimulus_plumbers/components/plumber/dispatcher"
-require_relative "stimulus_plumbers/components/plumber/renderer"
-require_relative "stimulus_plumbers/components/plumber/base"
+# -- Plumber base --
+require_relative "stimulus_plumbers/plumber/html_options"
+require_relative "stimulus_plumbers/plumber/dispatcher"
+require_relative "stimulus_plumbers/plumber/renderer"
+require_relative "stimulus_plumbers/plumber/base"
 
-require_relative "stimulus_plumbers/components/icon/renderer"
-require_relative "stimulus_plumbers/components/avatar/renderer"
-require_relative "stimulus_plumbers/components/button/renderer"
-require_relative "stimulus_plumbers/components/card/renderer"
-require_relative "stimulus_plumbers/components/action_list/renderer"
-require_relative "stimulus_plumbers/components/popover/renderer"
+# -- UI components --
+require_relative "stimulus_plumbers/components/icon"
+require_relative "stimulus_plumbers/components/avatar"
+require_relative "stimulus_plumbers/components/button"
+require_relative "stimulus_plumbers/components/button/group"
+require_relative "stimulus_plumbers/components/card"
+require_relative "stimulus_plumbers/components/card/section"
+require_relative "stimulus_plumbers/components/action_list"
+require_relative "stimulus_plumbers/components/action_list/section"
+require_relative "stimulus_plumbers/components/action_list/item"
+require_relative "stimulus_plumbers/components/popover"
+require_relative "stimulus_plumbers/components/popover/builder"
 
-require_relative "stimulus_plumbers/components/calendar/renderer"
+# -- Calendar --
+require_relative "stimulus_plumbers/components/calendar"
+require_relative "stimulus_plumbers/components/calendar/month/turbo"
 require_relative "stimulus_plumbers/components/calendar/month/turbo/days_of_week"
 require_relative "stimulus_plumbers/components/calendar/month/turbo/days_of_month"
-require_relative "stimulus_plumbers/components/calendar/month/turbo/renderer"
 
+# -- Date picker --
 require_relative "stimulus_plumbers/components/date_picker/navigator"
 require_relative "stimulus_plumbers/components/date_picker/navigation"
-require_relative "stimulus_plumbers/components/date_picker/renderer"
 
-require_relative "stimulus_plumbers/form/field_component"
+# -- Combobox --
+require_relative "stimulus_plumbers/components/combobox"
+require_relative "stimulus_plumbers/components/combobox/trigger"
+require_relative "stimulus_plumbers/components/combobox/popover"
+require_relative "stimulus_plumbers/components/combobox/options"
+require_relative "stimulus_plumbers/components/combobox/options/option"
+require_relative "stimulus_plumbers/components/combobox/options/option_group"
+require_relative "stimulus_plumbers/components/combobox/date"
+require_relative "stimulus_plumbers/components/combobox/dropdown"
+require_relative "stimulus_plumbers/components/combobox/autocomplete"
+require_relative "stimulus_plumbers/components/combobox/time"
+require_relative "stimulus_plumbers/components/combobox/time/drum"
+
+# -- Form --
+require_relative "stimulus_plumbers/form/field"
+require_relative "stimulus_plumbers/form/fields/group"
+require_relative "stimulus_plumbers/form/fields/label"
+require_relative "stimulus_plumbers/form/fields/hint"
+require_relative "stimulus_plumbers/form/fields/error"
 require_relative "stimulus_plumbers/form/builder"
 
 module StimulusPlumbers

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: stimulus_plumbers
 version: !ruby/object:Gem::Version
-  version: 0.2.7
+  version: 0.2.9
 platform: ruby
 authors:
 - Ryan Chang
@@ -37,37 +37,57 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - README.md
 - app/assets/javascripts/stimulus-plumbers/.keep
 - app/assets/javascripts/stimulus-plumbers/stimulus-plumbers-controllers.es.js
 - app/assets/javascripts/stimulus-plumbers/stimulus-plumbers-controllers.umd.js
 - app/assets/stylesheets/stimulus_plumbers/tokens.css
 - lib/stimulus_plumbers.rb
-- lib/stimulus_plumbers/components/action_list/renderer.rb
-- lib/stimulus_plumbers/components/avatar/renderer.rb
-- lib/stimulus_plumbers/components/button/renderer.rb
+- lib/stimulus_plumbers/components/action_list.rb
+- lib/stimulus_plumbers/components/action_list/item.rb
+- lib/stimulus_plumbers/components/action_list/section.rb
+- lib/stimulus_plumbers/components/avatar.rb
+- lib/stimulus_plumbers/components/button.rb
+- lib/stimulus_plumbers/components/button/group.rb
+- lib/stimulus_plumbers/components/calendar.rb
+- lib/stimulus_plumbers/components/calendar/month/turbo.rb
 - lib/stimulus_plumbers/components/calendar/month/turbo/days_of_month.rb
 - lib/stimulus_plumbers/components/calendar/month/turbo/days_of_week.rb
-- lib/stimulus_plumbers/components/calendar/month/turbo/renderer.rb
-- lib/stimulus_plumbers/components/calendar/renderer.rb
-- lib/stimulus_plumbers/components/card/renderer.rb
+- lib/stimulus_plumbers/components/card.rb
+- lib/stimulus_plumbers/components/card/section.rb
+- lib/stimulus_plumbers/components/combobox.rb
+- lib/stimulus_plumbers/components/combobox/autocomplete.rb
+- lib/stimulus_plumbers/components/combobox/date.rb
+- lib/stimulus_plumbers/components/combobox/dropdown.rb
+- lib/stimulus_plumbers/components/combobox/options.rb
+- lib/stimulus_plumbers/components/combobox/options/option.rb
+- lib/stimulus_plumbers/components/combobox/options/option_group.rb
+- lib/stimulus_plumbers/components/combobox/popover.rb
+- lib/stimulus_plumbers/components/combobox/time.rb
+- lib/stimulus_plumbers/components/combobox/time/drum.rb
+- lib/stimulus_plumbers/components/combobox/trigger.rb
 - lib/stimulus_plumbers/components/date_picker/navigation.rb
 - lib/stimulus_plumbers/components/date_picker/navigator.rb
-- lib/stimulus_plumbers/components/date_picker/renderer.rb
-- lib/stimulus_plumbers/components/icon/renderer.rb
-- lib/stimulus_plumbers/components/plumber/base.rb
-- lib/stimulus_plumbers/components/plumber/dispatcher.rb
-- lib/stimulus_plumbers/components/plumber/html_options.rb
-- lib/stimulus_plumbers/components/plumber/renderer.rb
-- lib/stimulus_plumbers/components/popover/renderer.rb
+- lib/stimulus_plumbers/components/icon.rb
+- lib/stimulus_plumbers/components/popover.rb
+- lib/stimulus_plumbers/components/popover/builder.rb
 - lib/stimulus_plumbers/configuration.rb
 - lib/stimulus_plumbers/engine.rb
 - lib/stimulus_plumbers/form/builder.rb
-- lib/stimulus_plumbers/form/field_component.rb
+- lib/stimulus_plumbers/form/field.rb
 - lib/stimulus_plumbers/form/fields/choice.rb
+- lib/stimulus_plumbers/form/fields/combobox.rb
+- lib/stimulus_plumbers/form/fields/error.rb
 - lib/stimulus_plumbers/form/fields/file.rb
+- lib/stimulus_plumbers/form/fields/group.rb
+- lib/stimulus_plumbers/form/fields/hint.rb
+- lib/stimulus_plumbers/form/fields/label.rb
+- lib/stimulus_plumbers/form/fields/password.rb
 - lib/stimulus_plumbers/form/fields/renderer.rb
+- lib/stimulus_plumbers/form/fields/search.rb
 - lib/stimulus_plumbers/form/fields/select.rb
+- lib/stimulus_plumbers/form/fields/submit.rb
 - lib/stimulus_plumbers/form/fields/text.rb
 - lib/stimulus_plumbers/form/fields/text_area.rb
 - lib/stimulus_plumbers/helpers.rb
@@ -77,24 +97,23 @@ files:
 - lib/stimulus_plumbers/helpers/calendar_helper.rb
 - lib/stimulus_plumbers/helpers/calendar_turbo_helper.rb
 - lib/stimulus_plumbers/helpers/card_helper.rb
-- lib/stimulus_plumbers/helpers/date_picker_helper.rb
+- lib/stimulus_plumbers/helpers/combobox_helper.rb
 - lib/stimulus_plumbers/helpers/plumber_helper.rb
 - lib/stimulus_plumbers/helpers/popover_helper.rb
 - lib/stimulus_plumbers/logger.rb
-- lib/stimulus_plumbers/themes/action_list.rb
-- lib/stimulus_plumbers/themes/avatar.rb
+- lib/stimulus_plumbers/plumber/base.rb
+- lib/stimulus_plumbers/plumber/dispatcher.rb
+- lib/stimulus_plumbers/plumber/html_options.rb
+- lib/stimulus_plumbers/plumber/renderer.rb
 - lib/stimulus_plumbers/themes/base.rb
-- lib/stimulus_plumbers/themes/button.rb
-- lib/stimulus_plumbers/themes/calendar.rb
-- lib/stimulus_plumbers/themes/card.rb
-- lib/stimulus_plumbers/themes/form.rb
-- lib/stimulus_plumbers/themes/layout.rb
+- lib/stimulus_plumbers/themes/schema.rb
 - lib/stimulus_plumbers/themes/schema/ranges.rb
 - lib/stimulus_plumbers/themes/tailwind/action_list.rb
 - lib/stimulus_plumbers/themes/tailwind/avatar.rb
 - lib/stimulus_plumbers/themes/tailwind/button.rb
 - lib/stimulus_plumbers/themes/tailwind/calendar.rb
 - lib/stimulus_plumbers/themes/tailwind/card.rb
+- lib/stimulus_plumbers/themes/tailwind/combobox.rb
 - lib/stimulus_plumbers/themes/tailwind/form.rb
 - lib/stimulus_plumbers/themes/tailwind/layout.rb
 - lib/stimulus_plumbers/themes/tailwind_theme.rb

data/lib/stimulus_plumbers/components/action_list/renderer.rb

@@ -1,47 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module ActionList
-      class Renderer < Plumber::Base
-        def list(**kwargs, &block)
-          html_options = merge_html_options(
-            { classes: theme.resolve(:action_list).fetch(:classes, "") },
-            kwargs
-          )
-          template.content_tag(:div, template.capture(&block), **html_options)
-        end
-
-        def section(title: nil, **kwargs, &block)
-          html_options = merge_html_options(kwargs)
-          template.content_tag(:div, **html_options) do
-            template.safe_join(
-              [
-                (template.content_tag(:p, title) if title.present?),
-                template.content_tag(:ul, template.capture(&block))
-              ].compact
-            )
-          end
-        end
-
-        def item(content = nil, url: nil, external: false, active: false, **kwargs, &block)
-          content      = template.capture(&block) if block_given?
-          html_options = merge_html_options(
-            { classes: theme.resolve(:action_list_item, active: active).fetch(:classes, "") },
-            kwargs
-          )
-
-          inner = if url
-                    html_options[:target] = "_blank" if external
-                    template.content_tag(:a, content, href: url, **html_options)
-                  else
-                    html_options[:type] ||= "button"
-                    template.content_tag(:button, content, **html_options)
-                  end
-
-          template.content_tag(:li, inner)
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/avatar/renderer.rb

@@ -1,74 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module Avatar
-      class Renderer < Plumber::Base
-        def avatar(name: nil, initials: nil, url: nil, color: nil, size: :md, **kwargs, &block)
-          color_css = resolve_color(color, name, initials) unless url || block_given?
-
-          html_options = merge_html_options(
-            {
-              classes:      [theme.resolve(:avatar, size: size).fetch(:classes, ""), color_css],
-              "aria-label": name,
-              role:         "img"
-            },
-            kwargs
-          )
-
-          template.content_tag(:span, inner(name, initials, url, &block), **html_options)
-        end
-
-        private
-
-        def inner(name, initials, url, &block)
-          if block_given?
-            template.capture(&block)
-          elsif url
-            template.tag.img(src: url, alt: name.present? ? "#{name}'s avatar" : "", onerror: "this.src=''")
-          elsif initials
-            initials_svg(initials)
-          else
-            fallback_svg
-          end
-        end
-
-        def resolve_color(color, name, initials)
-          if color
-            theme.avatar_colors.fetch(color, nil)
-          elsif (seed = name || initials)
-            theme.avatar_color_range[seed.bytes.reduce(:^) % theme.avatar_color_range.length]
-          else
-            theme.avatar_color_range.first
-          end
-        end
-
-        def initials_svg(initials)
-          template.content_tag(:svg, viewBox: "0 0 40 40") do
-            template.content_tag(
-              :text,
-              initials.upcase,
-              x:             "50%",
-              y:             "50%",
-              dy:            "0.35em",
-              fill:          "currentColor",
-              "font-size":   "20",
-              "text-anchor": "middle"
-            )
-          end
-        end
-
-        def fallback_svg
-          template.content_tag(:svg, viewBox: "0 0 40 40") do
-            template.tag.path(
-              fill: "currentColor",
-              d:    "M8.28 27.5A14.95 14.95 0 0120 21.8c4.76 0 8.97 2.24 11.72 5.7a14.02 " \
-                    "14.02 0 01-8.25 5.91 14.82 14.82 0 01-6.94 0 14.02 14.02 0 01-8.25-5.9z" \
-                    "M13.99 12.78a6.02 6.02 0 1112.03 0 6.02 6.02 0 01-12.03 0z"
-            )
-          end
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/button/renderer.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module Button
-      class Renderer < Plumber::Base
-        def button(content = nil, url: nil, external: false, variant: :primary, size: :md, **kwargs, &block)
-          content      = template.capture(&block) if block_given?
-          html_options = merge_html_options(
-            { classes: theme.resolve(:button, variant: variant, size: size).fetch(:classes, "") },
-            kwargs
-          )
-
-          if url
-            html_options[:target] = "_blank" if external
-            template.content_tag(:a, content, href: url, **html_options)
-          else
-            html_options[:type] ||= "button"
-            template.content_tag(:button, content, **html_options)
-          end
-        end
-
-        def group(alignment: :left, direction: :row, **kwargs, &block)
-          html_options = merge_html_options(
-            { classes: theme.resolve(:button_group, alignment: alignment, direction: direction).fetch(:classes, "") },
-            kwargs
-          )
-          template.content_tag(:div, template.capture(&block), **html_options)
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/calendar/month/turbo/renderer.rb

@@ -1,57 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module Calendar
-      module Month
-        module Turbo
-          class Renderer < Plumber::Base
-            STIMULUS_CONTROLLER = "calendar-month-observer"
-
-            def render(
-              date: Date.today,
-              today: Date.today,
-              selectable: false,
-              selected_date: nil,
-              show_other_months: false,
-              **kwargs
-            )
-              html_options = merge_html_options(
-                {
-                  classes: theme.resolve(:calendar).fetch(:classes, ""),
-                  data:    { controller: STIMULUS_CONTROLLER, action: "click->#{STIMULUS_CONTROLLER}#select" }
-                },
-                kwargs
-              )
-
-              template.content_tag(:div, role: "grid", **html_options) do
-                template.safe_join(
-                  [
-                    days_of_week,
-                    days_of_month(
-                      date:              date,
-                      today:             today,
-                      selectable:        selectable,
-                      selected_date:     selected_date,
-                      show_other_months: show_other_months
-                    )
-                  ]
-                )
-              end
-            end
-
-            private
-
-            def days_of_week(**kwargs)
-              DaysOfWeek.new(template).render(**kwargs)
-            end
-
-            def days_of_month(**kwargs)
-              DaysOfMonth.new(template, **kwargs).render
-            end
-          end
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/calendar/renderer.rb

@@ -1,35 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module Calendar
-      class Renderer < Plumber::Base
-        STIMULUS_CONTROLLER          = "calendar-month"
-        OBSERVER_STIMULUS_CONTROLLER = "calendar-month-observer"
-        STIMULUS_DATA                = {
-          controller: "#{STIMULUS_CONTROLLER} #{OBSERVER_STIMULUS_CONTROLLER}",
-          action:     "click->#{OBSERVER_STIMULUS_CONTROLLER}#select"
-        }.freeze
-
-        def month(**kwargs)
-          html_options = merge_html_options(
-            { classes: theme.resolve(:calendar).fetch(:classes, ""), data: STIMULUS_DATA },
-            kwargs
-          )
-
-          template.content_tag(:div, role: "grid", **html_options) do
-            template.safe_join(
-              [
-                template.tag.div(data: { "#{STIMULUS_CONTROLLER}-target" => "daysOfWeek" }),
-                template.tag.div(
-                  role: "rowgroup",
-                  data: { "#{STIMULUS_CONTROLLER}-target" => "daysOfMonth" }
-                )
-              ]
-            )
-          end
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/card/renderer.rb

@@ -1,41 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module Card
-      class Renderer < Plumber::Base
-        def card(title: nil, **kwargs, &block)
-          html_options = merge_html_options(
-            { classes: theme.resolve(:card).fetch(:classes, "") },
-            kwargs
-          )
-
-          template.content_tag(:div, **html_options) do
-            template.safe_join(
-              [
-                (template.content_tag(:h2, title) if title.present?),
-                template.capture(&block)
-              ].compact
-            )
-          end
-        end
-
-        def section(title: nil, **kwargs, &block)
-          html_options = merge_html_options(
-            { classes: theme.resolve(:card_section).fetch(:classes, "") },
-            kwargs
-          )
-
-          template.content_tag(:div, **html_options) do
-            template.safe_join(
-              [
-                (template.content_tag(:h3, title) if title.present?),
-                template.capture(&block)
-              ].compact
-            )
-          end
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/date_picker/renderer.rb

@@ -1,82 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module DatePicker
-      class Renderer < Plumber::Base
-        STIMULUS_CONTROLLER = "datepicker"
-        POPOVER_CONTROLLER  = "popover"
-        CALENDAR_CONTROLLER = Calendar::Renderer::OBSERVER_STIMULUS_CONTROLLER
-        CALENDAR_OUTLET     = "#{STIMULUS_CONTROLLER}_#{Calendar::Renderer::STIMULUS_CONTROLLER}_outlet".freeze
-        STIMULUS_DATA       = {
-          controller: "#{STIMULUS_CONTROLLER} #{POPOVER_CONTROLLER}",
-          action:     "#{CALENDAR_CONTROLLER}:selected->#{STIMULUS_CONTROLLER}#selected " \
-                      "#{CALENDAR_CONTROLLER}:selected->#{POPOVER_CONTROLLER}#hide"
-        }.freeze
-
-        def render(calendar_id: nil, calendar_dialog_id: nil, **kwargs)
-          data         = calendar_id ? STIMULUS_DATA.merge(CALENDAR_OUTLET => "##{calendar_id}") : STIMULUS_DATA
-          html_options = merge_html_options(
-            { classes: theme.resolve(:datepicker).fetch(:classes, ""), data: data },
-            kwargs
-          )
-
-          template.content_tag(:div, **html_options) do
-            template.safe_join([display_input(calendar_dialog_id), hidden_input, popover(calendar_id, calendar_dialog_id)])
-          end
-        end
-
-        private
-
-        def display_input(calendar_dialog_id)
-          template.tag.input(
-            type: "text",
-            role: "combobox",
-            aria: { label: "Date", haspopup: "dialog", controls: calendar_dialog_id },
-            data: {
-              "#{STIMULUS_CONTROLLER}_target": "display",
-              "#{POPOVER_CONTROLLER}_target":  "activator",
-              action:                          [
-                "focus->#{POPOVER_CONTROLLER}#show",
-                "click->#{POPOVER_CONTROLLER}#show"
-              ].join(" ")
-            }
-          )
-        end
-
-        def hidden_input
-          template.tag.input(
-            type: "hidden",
-            data: { "#{STIMULUS_CONTROLLER}_target": "input" }
-          )
-        end
-
-        def popover(calendar_id, calendar_dialog_id)
-          template.content_tag(
-            :div,
-            id:     calendar_dialog_id,
-            role:   "dialog",
-            aria:   { label: "Date picker" },
-            data:   { "#{POPOVER_CONTROLLER}_target": "content" },
-            hidden: ""
-          ) do
-            template.safe_join(
-              [
-                navigation(stimulus_controller: STIMULUS_CONTROLLER, step: "month"),
-                calendar_month(id: calendar_id)
-              ]
-            )
-          end
-        end
-
-        def navigation(**kwargs)
-          Navigation.new(template).render(stimulus_controller: STIMULUS_CONTROLLER, step: "month", **kwargs)
-        end
-
-        def calendar_month(**kwargs)
-          Calendar::Renderer.new(template).month(**kwargs)
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/icon/renderer.rb

@@ -1,51 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module Icon
-      class Renderer < Plumber::Base
-        ICONS = {
-          "arrow-left"  => "M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18",
-          "arrow-right" => "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3",
-          "arrow-up"    => "M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18",
-          "arrow-down"  => "M19.5 13.5 12 21m0 0-7.5-7.5M12 21V3"
-        }.freeze
-
-        def icon(name:, **kwargs)
-          html_options = merge_html_options(
-            { classes: theme.resolve(:icon).fetch(:classes, "") },
-            kwargs
-          )
-
-          if ICONS[name]
-            svg_icon(ICONS[name], html_options)
-          else
-            template.content_tag(:span, nil, **html_options)
-          end
-        end
-
-        private
-
-        def svg_icon(path, html_options)
-          template.content_tag(
-            :svg,
-            xmlns:          "http://www.w3.org/2000/svg",
-            fill:           "none",
-            viewBox:        "0 0 24 24",
-            width:          "24",
-            height:         "24",
-            "stroke-width": "1.5",
-            stroke:         "currentColor",
-            **html_options
-          ) do
-            template.tag.path(
-              "stroke-linecap":  "round",
-              "stroke-linejoin": "round",
-              d:                 path
-            )
-          end
-        end
-      end
-    end
-  end
-end

data/lib/stimulus_plumbers/components/plumber/base.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-module StimulusPlumbers
-  module Components
-    module Plumber
-      class Base
-        include HtmlOptions
-        include Renderer
-
-        attr_reader :template
-
-        def initialize(template)
-          @template = template
-        end
-
-        def theme
-          StimulusPlumbers.config.theme
-        end
-      end
-    end
-  end
-end