view_component-contrib 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e77986cf3606cd3c99d8bb42308ea152a0d2795d5e1f1976a047b46fc536ff17
-  data.tar.gz: 92cd0f179bdff4b3526ff93bd760116071c23ccff4c1693b772fbd93bfe3eb62
+  metadata.gz: 66619dee8f7cb3f26eddce9c5809ce7c879f8f464f2fa8ed140cd5a0ba08bfbd
+  data.tar.gz: e0f4013b8bebd93cab59f17ed52f1a6bd92c401b672919f49b386019296b0b1a
 SHA512:
-  metadata.gz: 2719170e4c8a3b4f721f04cc7450302b10ac8fdc66046299921942d59a63dc1063e229f17657821b0b8879ced4d8ac0e968814fb527e0d5d8d9571ca507fa88f
-  data.tar.gz: 9b3f4ce732f3fd73668dfc70d15a80a2f96a52c5593ad6a2150e8df3e25234e9593c2d5d4cda39d2f0bd0e9f08e9958e290b7fb887541140fc3e2bc9d0f57e0e
+  metadata.gz: 9d35a906a4c66e3097266b2b3f8df662fac38dd5f0ce4580e35d5e0a99cd3c90ee2ce6c5db36c3fc8ec16a9e9359fc600e61b205075d55ac36d853b77e6afb00
+  data.tar.gz: d66d56152567959e2f9cbe57ee0b9becaaeeed366179c88bfaf17b9bc1dd92b50295c996a03e169bfd397f9d2444d4ba8e3c9e7e7c48fe91cca49c5f658d00ca

data/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## 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][])

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

@@ -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/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.3"
+  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.3
+  version: 0.2.4
 platform: ruby
 authors:
 - Vladimir Dementyev
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-31 00:00:00.000000000 Z
+date: 2025-01-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component