view_component-contrib 0.2.1 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b586c9ad03730cff1cc38721c6904f427c71a73f5777605f17fc0379f60f8dc7
-  data.tar.gz: 7c2ed9aed5c845492a8487fab7ce5e66c639d455d8b4027c383b047ad961fdf0
+  metadata.gz: eb40fc2b6095e17a5cb7402bb9c577ee9df9152b65342a3fd2879861b0ec61c4
+  data.tar.gz: da852768b8dfe7907aae80bcee8afb5a52998185365e4f2bf702d2e5160df8cf
 SHA512:
-  metadata.gz: c1d2f760734b6ca7f71da538fbba4c04b0ff91b885cc47e09f3943b81a5a097ef62293348dc3ac07e20a4b812e52cf8a4bd8b39b6cb306551dceac4a784c652b
-  data.tar.gz: baaf5f34009ca87228246f260357339849f3d22e988543f36c36e772293bede4f249741fee5749db46d37a78dd8dc94674e13181d618282463a31afd5dba48b7
+  metadata.gz: d8492733e339fe678625730a079a5831c3647f9063aa13f50f3ef34d1a4c03a1505c536f06bb9cf3959310e311774b265c18cb9f01070d77b3d93a0e7b295241
+  data.tar.gz: d6e0426d3014ea7978eaf807e9a8aa11b0d729f16309e303c2a6a2d0d2d09d34d9e2146293648b57aba7bece138c831f4182c983aea4c2602dfa3dcc769f0cf3

data/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## master
 
+## 0.2.2 (2023-11-29)
+
+- Add `compound` styles support. ([@palkan][])
+
+- Support using booleans as style variant values. ([@palkan][])
+
 ## 0.2.1 (2023-11-16)
 
 - Fix style variants inhertiance. ([@palkan][])

data/README.md

@@ -209,15 +209,19 @@ class ButtonComponent < ViewComponent::Base
         md { "text-base" }
         lg { "px-4 py-3 text-lg" }
       }
+      disabled {
+        yes { "opacity-75" }
+      }
     }
     defaults { {size: :md, color: :primary} }
   end
 
-  attr_reader :size, :color
+  attr_reader :size, :color, :disabled
 
-  def initialize(size: nil, color: nil)
+  def initialize(size: nil, color: nil, disabled: false)
     @size = size
     @color = color
+    @disabled = disabled
   end
 end
 ```
@@ -234,6 +238,12 @@ Passing `size: :lg` and `color: :secondary` would result in the following HTML:
 <button class="font-medium bg-purple-500 text-white rounded-full px-4 py-3 text-lg">Click me</button>
 ```
 
+The `true` / `false` variant value would be converted into the `yes` / `no` variants:
+
+```erb
+<button class="<%= style(size:, color:, disabled: true) %>">Click me</button>
+```
+
 **NOTE:** If you pass `nil`, the default value would be used.
 
 You can define multiple style sets in a single component:
@@ -276,11 +286,58 @@ class ButtonComponent < ViewComponent::Base
   # You can provide either a proc or any other callable object
   style_config.postprocess_with do |classes|
     # classes is an array of CSS classes
+    # NOTE: This is an abstract TailwindMerge class, not to be confused with existing libraries
     TailwindMerge.call(classes).join(" ")
   end
 end
 ```
 
+### 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:
+
+```ruby
+style do
+  variants {
+    size {
+      sm { "text-sm" }
+      md { "text-base" }
+      lg { "px-4 py-3 text-lg" }
+    }
+    theme {
+      primary do |size:, **|
+        %w[bg-blue-500 text-white].tap do
+          _1 << "uppercase" if size == :lg
+        end
+      end
+      secondary { %w[bg-purple-500 text-white] }
+    }
+  }
+end
+```
+
+The specified variants are passed as block arguments, so you can implement dynamic styling.
+
+If you prefer declarative approach, you can use the special `compound` directive. The previous example could be rewritten as follows:
+
+```ruby
+style do
+  variants {
+    size {
+      sm { "text-sm" }
+      md { "text-base" }
+      lg { "px-4 py-3 text-lg" }
+    }
+    theme {
+      primary { %w[bg-blue-500 text-white] }
+      secondary { %w[bg-purple-500 text-white] }
+    }
+  }
+
+  compound(size: :lg, theme: :primary) { %w[uppercase] }
+end
+```
+
 ### Using with TailwindCSS LSP
 
 To make completions (and other LSP features) work with our DSL, try the following configuration:

data/lib/view_component_contrib/style_variants.rb

@@ -75,6 +75,7 @@ module ViewComponentContrib
         @base_block = nil
         @defaults = {}
         @variants = {}
+        @compounds = {}
 
         instance_eval(&init_block) if init_block
       end
@@ -91,12 +92,26 @@ module ViewComponentContrib
         @variants = VariantBuilder.new(true).build(&block)
       end
 
+      def compound(**variants, &block)
+        @compounds[variants] = block
+      end
+
       def compile(**variants)
         acc = Array(@base_block&.call || [])
 
-        @defaults.merge(variants.compact).each do |variant, value|
+        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 : variant
+          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
 
@@ -107,8 +122,20 @@ module ViewComponentContrib
         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:

data/lib/view_component_contrib/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: view_component-contrib
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.2.2
 platform: ruby
 authors:
 - Vladimir Dementyev
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-16 00:00:00.000000000 Z
+date: 2023-11-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component