Sharing some concerns

[nicolas-brousse]

Here some of our regular concerns we used for components.

StimulusControllerHelpers

To easilly genrate controller name, action and target from the component name.

module Components
  module StimulusControllerHelpers
    # See: https://github.com/stimulusjs/stimulus/blob/7f58b5597292e88423c3fa9ccd0e6f25ffc83192/packages/%40stimulus/webpack-helpers/src/index.ts#L31
    def stimulus_controller_name
      @stimulus_controller_name ||= self.class.name.underscore
                                        .sub(/_component$/, "")
                                        .tr("_", "-")
                                        .gsub(%r{/}, "--")
    end

    def stimulus_action(action_or_action_method, action_method = nil)
      if action_or_action_method.is_a?(Hash)
        action_or_action_method.map { |action, method| stimulus_action(action, method) }.join(" ")
      elsif action_method
        "#{action_or_action_method}->#{stimulus_controller_name}\##{action_method.to_s.camelcase(:lower)}"
      else
        "#{stimulus_controller_name}\##{action_or_action_method.to_s.camelcase(:lower)}"
      end
    end

    def stimulus_target(target)
      "#{stimulus_controller_name}.#{target.to_s.camelcase(:lower)}"
    end
  end
end

Themable

For components like Button. May be used for theme primary, secondary, etc.

module Components
  module Themable
    extend ActiveSupport::Concern

    class_methods do
      attr_reader :themes

      def with_theme(themes:, default: nil)
        @themes = themes

        attribute :theme, default: default&.to_sym

        validates :theme, inclusion: { in: themes.keys.map(&:to_sym) }, allow_nil: true
      end
    end

    def theme_class
      return unless theme

      self.class.themes[theme.to_sym]
    end
  end
end