view_component-contrib 0.2.2 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb40fc2b6095e17a5cb7402bb9c577ee9df9152b65342a3fd2879861b0ec61c4
-  data.tar.gz: da852768b8dfe7907aae80bcee8afb5a52998185365e4f2bf702d2e5160df8cf
+  metadata.gz: 66619dee8f7cb3f26eddce9c5809ce7c879f8f464f2fa8ed140cd5a0ba08bfbd
+  data.tar.gz: e0f4013b8bebd93cab59f17ed52f1a6bd92c401b672919f49b386019296b0b1a
 SHA512:
-  metadata.gz: d8492733e339fe678625730a079a5831c3647f9063aa13f50f3ef34d1a4c03a1505c536f06bb9cf3959310e311774b265c18cb9f01070d77b3d93a0e7b295241
-  data.tar.gz: d6e0426d3014ea7978eaf807e9a8aa11b0d729f16309e303c2a6a2d0d2d09d34d9e2146293648b57aba7bece138c831f4182c983aea4c2602dfa3dcc769f0cf3
+  metadata.gz: 9d35a906a4c66e3097266b2b3f8df662fac38dd5f0ce4580e35d5e0a99cd3c90ee2ce6c5db36c3fc8ec16a9e9359fc600e61b205075d55ac36d853b77e6afb00
+  data.tar.gz: d66d56152567959e2f9cbe57ee0b9becaaeeed366179c88bfaf17b9bc1dd92b50295c996a03e169bfd397f9d2444d4ba8e3c9e7e7c48fe91cca49c5f658d00ca

data/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## master
 
+## 0.2.4 (2025-01-03)
+
+- Add inheritance strategies to style variants ([@omarluq][])
+
+- Add special `class:` variant to `style` helper. For appending classes.
+  Inspired by https://cva.style/docs/getting-started/extending-components
+
+## 0.2.3 (2024-07-31)
+
+- Fix publishing transpiled files (and bring Ruby 2.7 support back) ([@palkan][])
+
 ## 0.2.2 (2023-11-29)
 
 - Add `compound` styles support. ([@palkan][])

data/README.md

@@ -277,6 +277,15 @@ And in the template:
 </div>
 ```
 
+You can also add additional classes through thr `style` method using the special `class:` variant, like so:
+
+```erb
+<div>
+  <button class="<%= style(size:, theme:, class: 'extra-class') %>">Click me</button>
+  <img src="..." class="<%= style(:image, orient: :portrait) %>">
+</div>
+```
+
 Finally, you can inject into the class list compilation process to add your own logic:
 
 ```ruby
@@ -292,6 +301,69 @@ class ButtonComponent < ViewComponent::Base
 end
 ```
 
+### Style variants inheritance
+
+Style variants support three inheritance strategies when extending components:
+
+1. `override` (default behavior): Completely replaces parent variants.
+2. `merge` (deep merge): Preserves all variant keys unless explicitly overwritten.
+3. `extend` (shallow merge): Preserves variants unless explicitly overwritten.
+
+Consider an example:
+
+```ruby
+class Parent::Component < ViewComponent::Base
+  include ViewComponentContrib::StyleVariants
+
+  style do
+    variants do
+      size {
+        md { "text-md" }
+        lg { "text-lg" }
+      }
+      disabled {
+        yes { "opacity-50" }
+      }
+    end
+  end
+end
+
+# Using override strategy (default)
+class Child::Component < Parent::Component
+  style do
+    variants do
+      size {
+        lg { "text-larger" }
+      }
+    end
+  end
+end
+
+# Using merge strategy
+class Child::Component < Parent::Component
+  style do
+    variants(strategy: :merge) do
+      size {
+        lg { "text-larger" }
+      }
+    end
+  end
+end
+
+# Using extend strategy
+class Child::Component < Parent::Component
+  style do
+    variants(strategy: :extend) do
+      size {
+        lg { "text-larger" }
+      }
+    end
+  end
+end
+```
+
+In this example, the `override` strategy will only keep the `size.lg` variant, dropping all others. The `merge` strategy preserves all variants and their keys, only replacing the `size.lg` value. The `extend` strategy keeps all variants but replaces all keys of the overwritten `size` variant.
+
 ### Dependent (or compound) styles
 
 Sometimes it might be necessary to define complex styling rules, e.g., when a combination of variants requires adding additional styles. That's where usage of Ruby blocks for configuration becomes useful. For example:

data/lib/.rbnext/3.0/view_component_contrib/style_variants.rb

@@ -0,0 +1,242 @@
+# frozen_string_literal: true
+
+module ViewComponentContrib
+  # Organize style in variants that can be combined.
+  # Inspired by https://www.tailwind-variants.org and https://cva.style/docs/getting-started/variants
+  #
+  # Example:
+  #
+  #   class ButtonComponent < ViewComponent::Base
+  #     include ViewComponentContrib::StyleVariants
+  #
+  #     erb_template <<~ERB
+  #       <button class="<%= style(size: 'sm', color: 'secondary') %>">Click me</button>
+  #     ERB
+  #
+  #     style do
+  #       base {
+  #         %w(
+  #           font-medium bg-blue-500 text-white rounded-full
+  #         )
+  #       }
+  #       variants {
+  #         color {
+  #           primary { %w(bg-blue-500 text-white) }
+  #           secondary  { %w(bg-purple-500 text-white) }
+  #         }
+  #         size {
+  #           sm { "text-sm" }
+  #           md { "text-base" }
+  #           lg { "px-4 py-3 text-lg" }
+  #         }
+  #       }
+  #       defaults { {size: :md, color: :primary} }
+  #    end
+  #
+  #    attr_reader :size, :color
+  #
+  #    def initialize(size: :md, color: :primary)
+  #      @size = size
+  #      @color = color
+  #    end
+  #  end
+  #
+  module StyleVariants
+    class VariantBuilder
+      attr_reader :unwrap_blocks
+
+      def initialize(unwrap_blocks = true)
+        @unwrap_blocks = unwrap_blocks
+        @variants = {}
+      end
+
+      def build(&block)
+        instance_eval(&block)
+        @variants
+      end
+
+      def respond_to_missing?(name, include_private = false)
+        true
+      end
+
+      def method_missing(name, &block)
+        return super unless block_given?
+
+        @variants[name] = if unwrap_blocks
+          VariantBuilder.new(false).build(&block)
+        else
+          block
+        end
+      end
+    end
+
+    class StyleSet
+      def initialize(&init_block)
+        @base_block = nil
+        @defaults = {}
+        @variants = {}
+        @compounds = {}
+
+        return unless init_block
+
+        @init_block = init_block
+        instance_eval(&init_block)
+      end
+
+      def base(&block)
+        @base_block = block
+      end
+
+      def defaults(&block)
+        @defaults = block.call.freeze
+      end
+
+      def variants(strategy: :override, &block)
+        variants = build_variants(&block)
+        @variants = handle_variants(variants, strategy)
+      end
+
+      def build_variants(&block)
+        VariantBuilder.new(true).build(&block)
+      end
+
+      def handle_variants(variants, strategy)
+        return variants if strategy == :override
+
+        parent_variants = find_parent_variants
+        return variants unless parent_variants
+
+        return parent_variants.deep_merge(variants) if strategy == :merge
+
+        parent_variants.merge(variants) if strategy == :extend
+      end
+
+      def find_parent_variants
+        parent_component = @init_block.binding.receiver.superclass
+        return unless parent_component.respond_to?(:style_config)
+
+        parent_config = parent_component.style_config
+        default_parent_style = parent_component.default_style_name
+        parent_style_set = parent_config.instance_variable_get(:@styles)[default_parent_style.to_sym]
+        parent_style_set.instance_variable_get(:@variants).deep_dup
+      end
+
+      def compound(**variants, &block)
+        @compounds[variants] = block
+      end
+
+      def compile(**variants)
+        acc = Array(@base_block&.call || [])
+
+        config = @defaults.merge(variants.compact)
+
+        config.each do |variant, value|
+          value = cast_value(value)
+          variant = @variants.dig(variant, value) || next
+          styles = variant.is_a?(::Proc) ? variant.call(**config) : variant
+          acc.concat(Array(styles))
+        end
+
+        @compounds.each do |compound, value|
+          next unless compound.all? { |k, v| config[k] == v }
+
+          styles = value.is_a?(::Proc) ? value.call(**config) : value
+          acc.concat(Array(styles))
+        end
+
+        acc.concat(Array(config[:class]))
+        acc.concat(Array(config[:class_name]))
+        acc
+      end
+
+      def dup
+        copy = super
+        copy.instance_variable_set(:@defaults, @defaults.dup)
+        copy.instance_variable_set(:@variants, @variants.dup)
+        copy.instance_variable_set(:@compounds, @compounds.dup)
+        copy
+      end
+
+      private
+
+      def cast_value(val)
+        case val
+        when true then :yes
+        when false then :no
+        else
+          val
+        end
+      end
+    end
+
+    class StyleConfig # :nodoc:
+      DEFAULT_POST_PROCESSOR = ->(compiled) { compiled.join(" ") }
+
+      attr_reader :postprocessor
+
+      def initialize
+        @styles = {}
+        @postprocessor = DEFAULT_POST_PROCESSOR
+      end
+
+      def define(name, &block)
+        styles[name] = StyleSet.new(&block)
+      end
+
+      def compile(name, **variants)
+        styles[name]&.compile(**variants).then do |compiled|
+          next unless compiled
+
+          postprocess(compiled)
+        end
+      end
+
+      # Allow defining a custom postprocessor
+      def postprocess_with(callable = nil, &block)
+        @postprocessor = callable || block
+      end
+
+      def dup
+        copy = super
+        copy.instance_variable_set(:@styles, @styles.dup)
+        copy
+      end
+
+      private
+
+      attr_reader :styles
+
+      def postprocess(compiled) ;  postprocessor.call(compiled); end
+    end
+
+    def self.included(base)
+      base.extend ClassMethods
+    end
+
+    module ClassMethods
+      # Returns the name of the default style set based on the class name:
+      #  MyComponent::Component => my_component
+      #  Namespaced::MyComponent => my_component
+      def default_style_name
+        @default_style_name ||= name.demodulize.sub(/(::Component|Component)$/, "").underscore.presence || "component"
+      end
+
+      def style(name = default_style_name, &block)
+        style_config.define(name.to_sym, &block)
+      end
+
+      def style_config
+        @style_config ||=
+          if superclass.respond_to?(:style_config)
+            superclass.style_config.dup
+          else
+            StyleConfig.new
+          end
+      end
+    end
+
+    def style(name = self.class.default_style_name, **variants)
+      self.class.style_config.compile(name.to_sym, **variants)
+    end
+  end
+end

data/lib/view_component_contrib/style_variants.rb

@@ -77,7 +77,10 @@ module ViewComponentContrib
         @variants = {}
         @compounds = {}
 
-        instance_eval(&init_block) if init_block
+        return unless init_block
+
+        @init_block = init_block
+        instance_eval(&init_block)
       end
 
       def base(&block)
@@ -88,8 +91,34 @@ module ViewComponentContrib
         @defaults = block.call.freeze
       end
 
-      def variants(&block)
-        @variants = VariantBuilder.new(true).build(&block)
+      def variants(strategy: :override, &block)
+        variants = build_variants(&block)
+        @variants = handle_variants(variants, strategy)
+      end
+
+      def build_variants(&block)
+        VariantBuilder.new(true).build(&block)
+      end
+
+      def handle_variants(variants, strategy)
+        return variants if strategy == :override
+
+        parent_variants = find_parent_variants
+        return variants unless parent_variants
+
+        return parent_variants.deep_merge(variants) if strategy == :merge
+
+        parent_variants.merge(variants) if strategy == :extend
+      end
+
+      def find_parent_variants
+        parent_component = @init_block.binding.receiver.superclass
+        return unless parent_component.respond_to?(:style_config)
+
+        parent_config = parent_component.style_config
+        default_parent_style = parent_component.default_style_name
+        parent_style_set = parent_config.instance_variable_get(:@styles)[default_parent_style.to_sym]
+        parent_style_set.instance_variable_get(:@variants).deep_dup
       end
 
       def compound(**variants, &block)
@@ -115,6 +144,8 @@ module ViewComponentContrib
           acc.concat(Array(styles))
         end
 
+        acc.concat(Array(config[:class]))
+        acc.concat(Array(config[:class_name]))
         acc
       end
 

data/lib/view_component_contrib/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ViewComponentContrib # :nodoc:all
-  VERSION = "0.2.2"
+  VERSION = "0.2.4"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: view_component-contrib
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.2.4
 platform: ruby
 authors:
 - Vladimir Dementyev
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-11-29 00:00:00.000000000 Z
+date: 2025-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component
@@ -147,6 +147,7 @@ files:
 - LICENSE.txt
 - README.md
 - app/views/view_component_contrib/preview.html.erb
+- lib/.rbnext/3.0/view_component_contrib/style_variants.rb
 - lib/view_component-contrib.rb
 - lib/view_component_contrib.rb
 - lib/view_component_contrib/base.rb
@@ -170,7 +171,7 @@ metadata:
   documentation_uri: http://github.com/palkan/view_component-contrib
   homepage_uri: http://github.com/palkan/view_component-contrib
   source_code_uri: http://github.com/palkan/view_component-contrib
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -185,8 +186,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.20
-signing_key:
+rubygems_version: 3.4.19
+signing_key: 
 specification_version: 4
 summary: A collection of extensions and developer tools for ViewComponent
 test_files: []